/* Light Theme - Darker Blue with Light Text */
body.light-theme {
    --background-color: #eef5fd; /* Lighter blue background */
    --text-color: #2c3e50;
    --card-bg: #ffffff;
    --border-color: #a4b7cc;
    --sidebar-bg: #2a4365; /* Darker blue sidebar, closer to dark theme */
    --sidebar-hover: #3d5a80; /* Slightly lighter on hover */
    --sidebar-active: #1e3356; /* Even darker active state */
    --navbar-bg: #243b58; /* Darker navbar */
    --sidebar-text: #ffffff; /* Light text for sidebar */
    --navbar-text: #ffffff; /* Light text for navbar */
    --input-bg: #ffffff;
    --input-border: #a4b7cc;
    --accent-color: #1e3356; /* Darker blue accent */
    --secondary-accent: #fd7e14; /* Orange secondary accent - unchanged */
    --primary-color: #1e3356; /* Darker blue for primary buttons */
    --primary-color-rgb: 30, 51, 86;     /* RGB values for #1e3356 */
    --accent-color-rgb: 30, 51, 86;      /* RGB values for #1e3356 */
    --secondary-accent-rgb: 253, 126, 20; /* RGB values for #fd7e14 */
}

/* Dark Theme - Greyish Blue with Purple Accent and Red Secondary */
body.dark-theme {
    --background-color: #1e2736; /* Slightly lighter greyish blue background */
    --text-color: #e0e0e0;
    --card-bg: #242e42;
    --border-color: #3a4459;
    --sidebar-bg: #141e2e; /* Darker greyish blue for sidebar */
    --sidebar-hover: #222d40;
    --sidebar-active: #7e57c2; /* Purple accent */
    --navbar-bg: #0f1824; /* Darker navbar */
    --sidebar-text: #e0e0e0; /* Light text for sidebar */
    --navbar-text: #e0e0e0; /* Light text for navbar */
    --input-bg: #2a3547;
    --input-border: #3a4459;
    --accent-color: #7e57c2; /* Purple main accent */
    --secondary-accent: #e53935; /* Red secondary accent - changed from orange */
    --primary-color: #7e57c2; /* Purple for primary buttons */
    --primary-color-rgb: 126, 87, 194;   /* RGB values for #7e57c2 */
    --accent-color-rgb: 126, 87, 194;    /* RGB values for #7e57c2 */
    --secondary-accent-rgb: 229, 57, 53; /* RGB values for #e53935 */
}

body.dark-theme #sidebarToggle,
body.dark-theme #userDropdown,
body.dark-theme .navbar .btn-link,
body.dark-theme .navbar .fas {
    color: rgba(255, 255, 255, 0.9);
}

/* Dropdown menu styling */
body.dark-theme .dropdown-item-text {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-theme .dropdown-menu {
    background-color: var(--navbar-bg);
    border-color: var(--border-color);
}

body.dark-theme .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-theme .dropdown-item:hover, 
body.dark-theme .dropdown-item:focus {
    background-color: var(--sidebar-hover);
    color: #ffffff;
}

body.dark-theme .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Make hover text light in dark mode */
body.dark-theme a:hover,
body.dark-theme .btn:hover,
body.dark-theme .nav-link:hover {
    color: #ffffff;
}

/* Fix form helper text and small text */
body.dark-theme .form-text,
body.dark-theme .text-muted,
body.dark-theme small,
body.dark-theme .small {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Fix contacts list in messages window */
body.dark-theme .list-group-item {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-theme .list-group-item:hover {
    background-color: var(--sidebar-hover);
}

body.dark-theme .list-group-item.active {
    background-color: var(--sidebar-active);
    color: white;
    border-color: var(--primary-color);
}

body.dark-theme .list-group-item .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Fix message conversation styling */
body.dark-theme .message-received {
    background-color: var(--navbar-bg);
}

body.dark-theme .message-sent {
    background-color: var(--sidebar-active);
}

body.dark-theme .message-timestamp {
    color: rgba(255, 255, 255, 0.6);
}

/* Fix dropdown text colors */
body.dark-theme .dropdown-item-text,
body.dark-theme .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
}

/* Apply theme variables */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* SIDEBAR STYLES - LIGHT AND DARK MODES */
#sidebar-wrapper {
    background-color: var(--sidebar-bg);
}

/* Fix dark sidebar text color in BOTH themes */
#sidebar-wrapper .sidebar-heading,
#sidebar-wrapper .list-group-item,
#sidebar-wrapper .sidebar-subheading,
#sidebar-wrapper a {
    color: white !important;
}

/* Ensure sidebar background remains dark in light theme */
body.light-theme #sidebar-wrapper .list-group-item {
    background-color: var(--sidebar-bg) !important;
}

/* Fix sidebar icons in light theme */
body.light-theme #sidebar-wrapper i,
body.light-theme #sidebar-wrapper .fa,
body.light-theme #sidebar-wrapper .fas,
body.light-theme #sidebar-wrapper .far,
body.light-theme #sidebar-wrapper svg {
    color: white !important;
}

/* Ensure proper hover colors */
#sidebar-wrapper .list-group-item:hover {
    background-color: var(--sidebar-hover);
    color: white !important;
    transition: background-color 0.2s ease;
}

/* Fix specific icon targeting */
body.light-theme #sidebar-wrapper .list-group-item i,
body.light-theme #sidebar-wrapper .list-group-item .fa,
body.light-theme #sidebar-wrapper .list-group-item .fas,
body.light-theme #sidebar-wrapper .list-group-item .far,
body.light-theme #sidebar-wrapper .list-group-item svg {
    color: white !important;
}

/* Fix sidebar muted text and subheadings */
body.light-theme #sidebar-wrapper .text-muted,
body.light-theme #sidebar-wrapper small,
body.light-theme #sidebar-wrapper .small,
body.light-theme #sidebar-wrapper .sidebar-subheading {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Active items - darker background in light theme */
body.light-theme #sidebar-wrapper .list-group-item.active {
    background-color: var(--sidebar-active) !important;
    color: white !important;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Dark theme active items */
body.dark-theme #sidebar-wrapper .list-group-item.active {
    background-color: var(--sidebar-active);
    color: white !important;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Fix user dropdown in light theme */
body.light-theme #userDropdown,
body.light-theme .user-dropdown,
body.light-theme .navbar .user-menu .dropdown-toggle {
    color: white !important;
}

body.light-theme #userDropdown:hover,
body.light-theme .user-dropdown:hover,
body.light-theme .navbar .user-menu .dropdown-toggle:hover {
    color: var(--secondary-accent) !important;
}

/* Also target other potential dropdown selectors */
body.light-theme .navbar .dropdown-toggle,
body.light-theme .navbar .nav-item.dropdown > a {
    color: white !important;
}

body.light-theme .navbar .dropdown-toggle:hover,
body.light-theme .navbar .nav-item.dropdown > a:hover {
    color: var(--secondary-accent) !important;
}

/* Fix light theme navbar elements */
body.light-theme .navbar,
body.light-theme .navbar .nav-link,
body.light-theme .navbar .navbar-brand,
body.light-theme .navbar-nav .nav-link,
body.light-theme .navbar .navbar-text {
    color: white !important;
}

body.light-theme .navbar i,
body.light-theme .navbar .fa,
body.light-theme .navbar .fas,
body.light-theme .navbar .far,
body.light-theme .navbar svg {
    color: white !important;
}

/* Explicitly override any Bootstrap classes */
body.light-theme .bg-light .navbar-light .navbar-nav .nav-link,
body.light-theme .navbar-light .navbar-nav .nav-link,
body.light-theme .navbar-dark .navbar-nav .nav-link {
    color: white !important;
}

.navbar {
    background-color: var(--navbar-bg);
}

.card {
    background-color: var(--card-bg);
    color: var(--text-color);
}

/* Add secondary accent border to certain cards */
.card.featured {
    border-left: 3px solid var(--secondary-accent);
}

/* Highlighted cards with secondary accent */
.card.highlight {
    border-top: 3px solid var(--secondary-accent);
}

.form-control, .form-select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--input-border);
}

.form-control:focus, .form-select:focus {
    background-color: var(--input-bg);
    color: var(--text-color);
}

.table {
    color: var(--text-color);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: rgba(var(--primary-color-rgb, 30, 51, 86), 0.85);
    border-color: var(--primary-color);
}

.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transition: all 0.2s ease;
}

.btn-accent:hover {
    background-color: rgba(var(--accent-color-rgb, 30, 51, 86), 0.85);
    border-color: var(--accent-color);
}

.btn-secondary {
    background-color: var(--secondary-accent);
    border-color: var(--secondary-accent);
    color: white;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: rgba(var(--secondary-accent-rgb, 253, 126, 20), 0.85);
    border-color: var(--secondary-accent);
}

/* Outline buttons with secondary accent */
.btn-outline-secondary {
    color: var(--secondary-accent);
    border-color: var(--secondary-accent);
    transition: all 0.2s ease;
}

.btn-outline-secondary:hover {
    background-color: var(--secondary-accent);
    color: white;
}

.text-accent {
    color: var(--accent-color);
}

.text-secondary-accent {
    color: var(--secondary-accent);
}

.bg-accent {
    background-color: var(--accent-color);
}

.bg-secondary-accent {
    background-color: var(--secondary-accent);
}

.dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-color);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--sidebar-hover);
    color: var(--text-color);
}

.dropdown-divider {
    border-top: 1px solid var(--border-color);
}

/* Fix request item hover in dark mode */
body.dark-theme .request-list .request-item:hover {
    background-color: var(--sidebar-hover) !important;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* Fix table row hover in dark mode */
body.dark-theme .table-hover tbody tr:hover {
    background-color: var(--sidebar-hover) !important;
    color: #ffffff;
}

/* Fix table striping in dark mode */
body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Fix request item hover text color in dark mode */
body.dark-theme .request-list .request-item:hover,
body.dark-theme .request-list .request-item:hover,
body.dark-theme .table-hover tbody tr:hover,
body.dark-theme .table-hover tbody tr:hover{
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Also explicitly set the table text color in dark mode */
body.dark-theme .table,
body.dark-theme .table td,
body.dark-theme .table th,
body.dark-theme .table tr {
    color: var(--text-color);
}

/* Fix urgent request item text color in dark mode */
body.dark-theme .request-list .request-item.table-danger,
body.dark-theme .request-list .request-item.table-danger tr,
body.dark-theme .request-list .request-item.table-danger td{
    color: rgba(255, 255, 255, 0.9) !important;
    background-color: rgba(160, 60, 70, 0.8) !important; /* Darker red that's more visible in dark mode */
}

/* Make sure the text remains visible on hover */
/* body.dark-theme .request-list .request-item.table-danger:hover,
body.dark-theme .request-list .request-item.table-danger:hover tr
body.dark-theme .request-list .request-item.table-danger:hover  td{
    color: #ffffff !important;
    background-color: rgba(165, 50, 60, 0.8) !important;
} */

/* Ensure badge icons remain visible */
body.dark-theme .badge.bg-danger {
    color: white !important;
}

/* Fix sidebar list item border in dark mode */
body.dark-theme #sidebar-wrapper .list-group-item {
    border-right: none !important;
}

/* Fix sidebar width with right border space */
#sidebar-wrapper .list-group-item {
    width: calc(100% - 2px);
    margin-right: 1px; /* Creates space on the right side */
}

/* Secondary accent for important elements */
.important-item {
    border-left: 3px solid var(--secondary-accent);
}

.priority-badge {
    background-color: var(--secondary-accent);
    color: white;
}

/* Use secondary accent for alerts/notifications */
.notification-indicator {
    color: var(--secondary-accent);
}

.alert-count {
    background-color: var(--secondary-accent);
    color: white;
}

/* Make placeholder text lighter in dark mode */
body.dark-theme .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1;
  }


/* Make sure the text remains visible on hover */
body.dark-theme .table-danger:hover,
body.dark-theme .table-danger tr:hover
body.dark-theme .table-danger td:hover{
    color: #000000 !important;
    background-color: rgba(165, 50, 60, 1) !important;
}

/* Theme toggle styling */
#theme-toggle {
    color: var(--text-color);
}

.moon-icon, .sun-icon {
    font-size: 1.2rem;
}

/* Fix for badge stretching in mobile view */
@media (max-width: 767.98px) {
    .badge {
      display: inline-block;
      max-width: 100%;
      white-space: normal;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0.25rem 0.5rem;
    }
    
    /* Make badge text wrap if needed */
    .status-badge {
      white-space: normal;
      word-break: break-word;
      display: inline-block;
    }
  }

  /* Fix dark theme colors for modals and dropdown menus */

/* Modal fixes for dark theme */
body.dark-theme .modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
  }
  
  body.dark-theme .modal-header,
  body.dark-theme .modal-footer {
    border-color: var(--border-color);
  }
  
  body.dark-theme .modal-header .btn-close {
    filter: invert(1); /* Invert close button color for visibility */
  }
  
  /* Dropdown menu fixes for dark theme */
  body.dark-theme .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }
  
  body.dark-theme .dropdown-item {
    color: var(--text-color);
  }
  
  body.dark-theme .dropdown-item:hover,
  body.dark-theme .dropdown-item:focus {
    background-color: var(--sidebar-hover);
    color: white;
  }
  
  body.dark-theme .dropdown-divider {
    border-top-color: var(--border-color);
  }
  
  /* Notification dropdown specific fixes */
  body.dark-theme .notification-dropdown {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
  }
  
  body.dark-theme .notification-header,
  body.dark-theme .notification-footer {
    border-color: var(--border-color);
  }
  
  body.dark-theme .notification-item {
    border-color: var(--border-color);
  }
  
  /* Form controls within modals */
  body.dark-theme .modal-body .form-control,
  body.dark-theme .modal-body .form-select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--input-border);
  }
  
  body.dark-theme .modal-body .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
  }
  
  body.dark-theme .modal-body .form-text {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  /* Fix form labels in dark theme */
  body.dark-theme .modal-body label {
    color: var(--text-color);
  }
  
  /* Ensure buttons use correct accent colors */
  body.dark-theme .modal-footer .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  
  body.dark-theme .notification-footer .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  
  /* Fix toast notifications in dark theme */
  body.dark-theme .toast {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
  }
  
  body.dark-theme .toast-header {
    background-color: var(--sidebar-bg);
    color: white;
    border-color: var(--border-color);
  }
  
  body.dark-theme .toast-header .btn-close {
    filter: invert(1);
  }