/* Basic reset & Font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f0f2f5; /* Lighter gray background */
  color: #333;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 20px; /* Add some space at the top */
}

header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradient header */
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
  margin-bottom: 2rem;
  border-bottom: 5px solid #5a67d8;
}

header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

header .subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

main {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Increased gap */
  width: 95%;
  max-width: 1200px; /* Wider max-width */
  margin: 0 auto 2rem auto;
}

.panel.card {
  background: #fff;
  border-radius: 12px; /* More rounded corners */
  padding: 2rem; /* Increased padding */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Softer shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.panel.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.panel h2 {
  font-size: 1.5rem;
  color: #4a5568; /* Darker heading color */
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.75rem;
}

.panel h2 .fas {
  margin-right: 0.75rem;
  color: #667eea;
}

/* Current User Panel Specifics */
#current-user .metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px dashed #e2e8f0;
}

#current-user .metric:last-child {
  border-bottom: none;
}

#current-user .metric-label {
  font-weight: 600;
  color: #718096; /* Muted label color */
}

#current-user .metric-label .fas {
  margin-right: 0.5rem;
  color: #764ba2;
}

#current-user .metric-value {
  font-weight: bold;
  font-size: 1.1rem;
  color: #2d3748;
}

/* Global Analytics Panel Specifics */
#search-global {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#search-global:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
  outline: none;
}

.table-container {
  overflow-x: auto; /* For smaller screens */
}

#global table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

#global th,
#global td {
  padding: 0.9rem 1rem; /* Increased padding */
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle; /* Align text vertically */
}

/* Styling for the 4th column (Country) can be added here if needed. 
   Example for fixed width: 
   #global th:nth-child(4), #global td:nth-child(4) { width: 120px; text-align: center; } 
*/

#global th {
  background-color: #f7fafc; /* Light header for table */
  color: #4a5568;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
}

#global th[data-sort] {
  cursor: pointer;
  position: relative; /* For icon positioning if needed */
}

#global th[data-sort]:hover {
  background-color: #e2e8f0; /* Slightly darker on hover */
}

.sort-icon .fas {
  font-size: 0.8em; /* Make icon slightly smaller than header text */
  margin-left: 0.3em;
  color: #718096; /* Muted color for icons */
}

#global th[data-sort]:hover .sort-icon .fas,
#global th.active-sort-column .sort-icon .fas {
  color: #2d3748; /* Darker icon on hover / active */
}

#global th.active-sort-column {
  background-color: #e2e8f0; /* Same as hover for active column */
  font-weight: 700; /* Slightly bolder for active column */
}

#global tbody tr:hover {
  background-color: #edf2f7; /* Hover effect for rows */
}

#global td .fas {
  margin-right: 0.5rem;
}

.no-results-message {
  text-align: center;
  font-style: italic;
  color: #718096;
  padding: 1.5rem !important; /* Ensure padding is applied */
}

.status-active {
  color: #38a169; /* Green color for active status */
  font-weight: 600;
}

.status-active .fas.fa-circle {
  font-size: 0.7em; /* Smaller dot */
  margin-right: 0.4em;
  vertical-align: middle; /* Align dot nicely with text */
  position: relative;
  top: -1px; /* Fine-tune vertical alignment */
}

/* Responsive adjustments */
@media (min-width: 992px) { /* Adjusted breakpoint */
  main {
    flex-direction: row;
    align-items: flex-start; /* Align items to top */
  }
  #current-user {
    flex: 0 0 320px; /* Fixed width for current user panel */
  }
  #global {
    flex: 1;
  }
}

/* Utility for icons */
.fas {
  transition: color 0.3s ease;
}