:root {
    --primary-dark: #005461;
    --primary-medium: #018790;
    --primary-light: #00B7B5;
    --danger: #D32F2F;
    --danger-dark: #B71C1C;
    --bg-light: #F4F4F4;
    --white: #ffffff;
}
body {
  background: var(--bg-light);
  color: var(--primary-dark);
}
.card, .navbar {
  border-radius: 1rem;
}
.btn {
  background: #018790;
  color: #000000;
  border: none;
}
/* Global safeguard for dark theme: force readable text colors and neutralize accidental black text */
/* Avoid forcing all elements to light text. Instead apply contextual rules:
   - Default body text stays light for the dark theme
   - Form controls/selects will use dark text by default (for white backgrounds)
   - Elements inside explicitly dark containers (.bg-dark, .card-dark, .modal-content.bg-dark) get light text */

/* default: body text for dark theme */
html, body { color: #e9eef6; }

/* form controls and selects should be readable on light backgrounds (use dark text by default) */
.form-control, .form-select, input, select, textarea {
  color: #111; /* dark text for light backgrounds like white/inputs */
}

/* when form controls are used inside dark containers, force light text */
.bg-dark .form-control, .bg-dark .form-select,
.card.bg-dark .form-control, .card.bg-dark .form-select,
.modal-content.bg-dark .form-control, .modal-content.bg-dark .form-select,
.modal-content.bg-dark, .card.bg-dark, .bg-dark {
  color: #e9eef6 !important;
}

/* Support dark containers that use inline styles like style="background: #1a1a1a" */
/* target elements whose parent has an inline background color commonly used in this project */
.card[style*="background: #1a1a1a"] ,
.card[style*='background:#1a1a1a'] ,
.modal-content[style*="background: #1a1a1a"],
.modal-content[style*='background:#1a1a1a'] {
  color: #e9eef6 !important;
}
.card[style*="background: #1a1a1a"] .form-control,
.card[style*='background:#1a1a1a'] .form-control,
.card[style*="background: #1a1a1a"] .form-select,
.card[style*='background:#1a1a1a'] .form-select {
  color: #e9eef6 !important;
}

/* If an element explicitly uses a light/white background via inline style, prefer dark text */
[style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background:white"], [style*="background: white"], [style*="background:#f8f9fa"], [style*="background: #f8f9fa"] {
  color: #111 !important;
}

/* Select options: default dark text (for white backgrounds) */
select option, .form-select option {
  color: #111;
  background: #fff;
}

/* Select options inside dark containers should be light */
.bg-dark select option, .card[style*="background: #1a1a1a"] select option, .modal-content.bg-dark select option {
  color: #e9eef6;
  background: #111;
}

/* Placeholder color: dark by default, light in dark containers */
::placeholder { color: rgba(0,0,0,0.55); }
.bg-dark ::placeholder, .card[style*="background: #1a1a1a"] ::placeholder, .modal-content.bg-dark ::placeholder { color: rgba(255,255,255,0.6); }



/* Ensure headings stand out */
h1,h2,h3,h4,h5,h6 {
  color: var(--primary-dark) !important;
}
/* Form label styling: enforce yellow labels site-wide (matches "text-warning") */
.form-label {
  color: #ffc107 !important; /* yellow similar to Bootstrap .text-warning */
  font-weight: 600;
}
/* Make muted/secondary text still visible on dark background */
.text-muted { color: #000000 !important; }
/* Ensure .form-label remains yellow even when combined with .text-muted */
.text-muted.form-label, .form-label.text-muted { color: #ffc107 !important; }
.modal .form-label, .card .form-label, .bg-dark .form-label {
  color: #ffc107 !important; /* ensure labels in modals/cards/bg-dark are yellow */
}
.small, small { color: #000000 !important; }
.btn:hover {
  background: #016e68;
  color: #000000;
}
input.form-control {
  background: #ffffff;
  color: #000000;
  border: 1px solid #018790;
}
input.form-control:focus {
  border-color: #018790;
  box-shadow: 0 0 0 0.2rem rgba(1,135,144,.25);
}
.card {
  /* neutral shadow to avoid red/pink glow from previous theme */
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
@media (max-width: 576px) {
  .card {
    padding: 1rem;
    margin: 0.5rem;
  }
  .navbar-brand {
    font-size: 1.2rem;
  }
}

/* Admin table polish */
.table-responsive {
  overflow: auto;
}
.role-select {
  border-radius: .5rem;
}

/* Smaller touch targets on mobile */
@media (max-width: 480px) {
  .btn { padding: .5rem .6rem; font-size: .95rem; }
  .card { border-radius: .7rem; }
  .table thead { display: none; }
  .table tbody td { display: block; width: 100%; }
  .table tbody tr { display: block; margin-bottom: .75rem; border: 1px solid rgba(255,255,255,0.04); padding: .5rem; }
  .table tbody td::before { content: attr(data-label); float: left; font-weight: 600; color: #018790; }
}

/* Password strength */
#pwdStrength {
  height: 6px;
  background: linear-gradient(90deg, #005461, #00B7B5);
  border-radius: 4px;
  width: 0%;
  transition: width .2s ease;
}
.pwd-strength { height: 6px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }

/* Contextual input/select/textarea coloring
   - Default: controls use dark text for light backgrounds (helps dropdowns/inputs that sit on white)
   - Dark containers (cards, modals, elements with bg-dark or inline dark background) keep light text
   - Autofill handled separately for both contexts using -webkit-text-fill-color and box-shadow hacks
*/

/* Default form control appearance (for light backgrounds) */
.form-control, .form-select, input, select, textarea {
  color: #000; /* dark text on light inputs */
  -webkit-text-fill-color: #000; /* Chrome/Safari */
  caret-color: #000;
  opacity: 1;
}

/* Placeholder color: dark by default (for light inputs) */
input::placeholder, textarea::placeholder, .form-control::placeholder {
  color: rgba(0,0,0,0.65);
}

/* Dark container overrides: any form controls inside these should have light text */
.bg-dark .form-control, .bg-dark .form-select, .modal-content.bg-dark .form-control, .modal-content.bg-dark .form-select,
.card.bg-dark .form-control, .card.bg-dark .form-select,
.card[style*="background: #1a1a1a"] .form-control, .card[style*='background:#1a1a1a'] .form-control,
.modal-content[style*="background: #1a1a1a"] .form-control, .modal-content[style*='background:#1a1a1a'] .form-control {
  color: #e9eef6 !important;
  -webkit-text-fill-color: #e9eef6 !important;
  caret-color: #e9eef6 !important;
}

/* Placeholder in dark containers */
.bg-dark ::placeholder, .modal-content.bg-dark ::placeholder, .card[style*="background: #1a1a1a"] ::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* Select option appearances: default dark on light backgrounds */
select option, .form-select option {
  color: #000;
  background: #fff;
}

/* Select options in dark containers */
.bg-dark select option, .modal-content.bg-dark select option, .card[style*="background: #1a1a1a"] select option {
  color: #e9eef6;
  background: #111;
}

/* Ensure select controls in dark containers keep dark background and light text */
.bg-dark .form-select, .modal-content.bg-dark .form-select, .card[style*="background: #1a1a1a"] .form-select {
  background-color: #111 !important;
  color: #e9eef6 !important;
  -webkit-text-fill-color: #e9eef6 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.bg-dark .form-select:focus, .modal-content.bg-dark .form-select:focus, .card[style*="background: #1a1a1a"] .form-select:focus {
  background-color: #111 !important;
  box-shadow: 0 0 0 0.15rem rgba(0,84,97,0.08) !important;
  border-color: rgba(0,84,97,0.18) !important;
}

/* Treat inline-styled dark inputs/selects (background:#111) as dark so header controls remain readable */
select[style*="background:#111"], select[style*="background: #111"], input[style*="background:#111"], input[style*="background: #111"] {
  background-color: #111 !important;
  color: #e9eef6 !important;
  -webkit-text-fill-color: #e9eef6 !important;
  border-color: #333 !important;
}

select[style*="background:#111"]:focus, select[style*="background: #111"]:focus {
  background-color: #111 !important;
  box-shadow: 0 0 0 0.12rem rgba(255,45,85,0.07) !important;
}

/* Options for inline dark selects */
select[style*="background:#111"] option, select[style*="background: #111"] option {
  background: #111;
  color: #e9eef6;
}

/* Autofill handling -- separate for light inputs and dark inputs
   For light inputs, force dark fill + white background (common input background)
   For dark inputs, force light fill + dark background
*/
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: #000 !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; /* white background for autofill on light inputs */
}

.bg-dark input:-webkit-autofill, .bg-dark textarea:-webkit-autofill, .modal-content.bg-dark input:-webkit-autofill, .modal-content.bg-dark textarea:-webkit-autofill,
.card[style*="background: #1a1a1a"] input:-webkit-autofill, .card[style*='background:#1a1a1a'] input:-webkit-autofill {
  -webkit-text-fill-color: #e9eef6 !important;
  -webkit-box-shadow: 0 0 0px 1000px #111 inset !important; /* dark autofill background for dark containers */
}

/* Prevent inputs inside dark containers from turning white on focus or autofill */
.bg-dark .form-control, .modal-content.bg-dark .form-control, .card[style*="background: #1a1a1a"] .form-control {
  background-color: rgba(0,0,0,0.15); /* subtle dark input background to keep contrast */
}

.bg-dark .form-control:focus, .modal-content.bg-dark .form-control:focus, .card[style*="background: #1a1a1a"] .form-control:focus {
  background-color: rgba(0,0,0,0.08) !important; /* keep dark on focus */
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0,84,97,0.12) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,84,97,0.12) !important;
}

/* Also handle autofill when focused inside dark containers */
.bg-dark input:-webkit-autofill:focus, .modal-content.bg-dark input:-webkit-autofill:focus,
.card[style*="background: #1a1a1a"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #111 inset !important;
  -webkit-text-fill-color: #e9eef6 !important;
}

.dropdown-toggle::after {
  display: none;
}

@media (max-width: 576px) {
  .fixed-bottom .text-center {
    padding: 0.2rem 0;
  }
  .fixed-bottom .text-center i {
    font-size: 1.2rem !important;
  }
  .fixed-bottom .text-center div {
    font-size: 0.6rem !important;
  }
}

/* Profile Page Styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.profile-container {
  min-height: calc(100vh - 80px); /* Account for sticky menu height */
  padding: 20px 15px;
  display: flex;
  align-items: center;
}

.profile-content {
  margin: auto;
  max-width: 800px;
  width: 100%;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .profile-container {
    padding: 15px 10px;
    min-height: calc(100vh - 70px);
  }
  .profile-content {
    padding: 1.5rem;
    border-radius: 8px;
  }
  .profile-picture-responsive {
    width: 100px !important;
    height: 100px !important;
  }
}

@media (min-width: 768px) {
  .profile-picture-responsive {
    width: 140px !important;
    height: 140px !important;
    border-width: 5px !important;
  }
}

@media (max-width: 576px) {
  .profile-container {
    padding: 10px 5px;
  }
  .profile-content {
    padding: 1rem;
    margin: 0;
    border-radius: 5px;
  }
  .profile-picture-responsive {
    width: 80px !important;
    height: 80px !important;
    border-width: 3px !important;
  }
  .btn-responsive {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
  /* Sticky menu adjustments for mobile */
  .navbar.fixed-bottom .container-fluid {
    padding: 0.5rem 0;
  }
  .navbar.fixed-bottom i {
    font-size: 1.2rem !important;
  }
  .navbar.fixed-bottom div {
    font-size: 0.6rem !important;
  }
}

/* Profile Page Enhancements */
.profile-card {
  transition: all 0.3s ease;
}

/* Ensure settings modal inputs are readable on dark background */
#settingsModal .modal-content, #settingsModal .modal-body {
  background: #111; /* keep modal dark */
  color: #e9eef6;
}
#settingsModal .form-control {
  background: #222 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  border: 1px solid rgba(0,84,97,0.14) !important;
}
#settingsModal .form-control::placeholder { color: rgba(255,255,255,0.6) !important; }
#settingsModal .form-select { background: #222 !important; color: #fff !important; }

.profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px rgba(255, 45, 85, 0.3) !important;
}

.profile-picture-container {
  transition: all 0.3s ease;
}

.profile-picture-container:hover {
  transform: scale(1.05);
}

.profile-picture-wrapper {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.profile-picture-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 45, 85, 0.1), rgba(255, 107, 129, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.profile-picture-container:hover .profile-picture-wrapper::before {
  opacity: 1;
}

/* Ensure a fixed-bottom navbar doesn't overlap page content on small screens
   - Add bottom padding equal to the expected navbar height plus the device safe-area inset
   - Use a modest default (64px) and allow the navbar styles to change independently
*/
.has-sticky-footer {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Slightly larger padding on very small screens where icons/labels may wrap */
@media (max-width: 420px) {
  .has-sticky-footer {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }
}

/* Keep bottom padding on larger screens as well to prevent overlap
   (some desktop/webapp layouts can also show a fixed bottom bar) */
@media (min-width: 768px) {
  .has-sticky-footer {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

/* Dropdown animation: fade + slide */
.dropdown-menu {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
  will-change: opacity, transform;
}
.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
}

.info-card {
  transition: all 0.3s ease;
  cursor: default;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 45, 85, 0.2);
  background: rgba(255, 255, 255, 0.08) !important;
}

.btn-outline-danger:hover, .btn-outline-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 45, 85, 0.4);
}

.btn-danger:hover, .btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 45, 85, 0.4);
}

.modal-content {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.form-control:focus, .form-select:focus {
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.toast {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Responsive adjustments for profile page */
@media (max-width: 768px) {
  .profile-card {
    margin: 1rem;
    border-radius: 1rem !important;
  }
  
  .profile-picture-wrapper {
    width: 120px !important;
    height: 120px !important;
  }
  
  .info-card {
    padding: 0.75rem !important;
  }
  
  .btn-outline-danger, .btn-outline-warning {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
  }
}

@media (max-width: 576px) {
  .profile-card {
    margin: 0.5rem;
  }
  
  .profile-picture-wrapper {
    width: 100px !important;
    height: 100px !important;
  }
  
  .btn-outline-danger, .btn-outline-warning {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
}

/* Sticky Menu Enhancements */
.navbar.fixed-bottom {
  z-index: 1030;
  padding: 0.12rem 0; /* further reduced vertical padding for minimal look */
  min-height: 50px; /* compact height */
}

.nav-item {
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover {
  background: rgba(255, 45, 85, 0.1) !important;
  transform: translateY(-2px);
}

.nav-item.active {
  background: rgba(255, 45, 85, 0.2) !important;
}

.nav-item i {
  transition: all 0.3s ease;
}

.nav-item:hover i {
  transform: scale(1.1);
}

/* Minimal sticky style for compact mobile navs */

.sticky-minimal {
  border-top-width: 1px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Icon styles: consistent red color and size */
.sticky-minimal .sticky-icon,
.sticky-icon {
  font-size: 1.25rem; /* slightly smaller */
  color: #018790 !important; /* primary color */
  display: block;
  line-height: 1;
  margin: 0 auto;
}

.sticky-label {
  font-size: 0.62rem;
  color: rgba(0,0,0,0.9);
  margin-top: 0.15rem;
  line-height: 1;
}

/* reduce touch target vertical spacing but keep tappable width */
.sticky-minimal .container-fluid {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

/* Ensure active state still visible but minimal */
.nav-item.active {
  background: rgba(0,84,97,0.08) !important;
}

/* Show sticky on desktop as requested (do not hide) */

@media (max-width: 480px) {
  #dashboardContent .card-title {
    font-size: 1.5rem;
  }

  #dashboardContent .card-text {
    font-size: 0.9rem;
  }

  #dashboardContent .small {
    font-size: 0.8rem;
  }

  #dashboardContent .bi {
    font-size: 28px !important;
  }
}