/* assets/dark-mode.css
   Consolidated dark-mode styles for the admin UI.
   This file centralizes visual rules that previously lived in
   multiple files (dashboard.css, overrides.css). It relies on the
   runtime toggles that add `body.dark-mode` and/or `html.dark-mode`.

   Keep this file conservative: color-only changes preferred; avoid
   layout/transforms where possible to minimize risk.
*/

/* Palette and variables used in dark mode */
body.dark-mode {
  --bg: #0b1220;
  --panel: #111827;
  --muted: #9aa3b2;
  --text: #e6eef8;
  --border: rgba(255,255,255,0.06);
  --accent: #0d6efd;
}

/* Apply dark surfaces to common containers */
body.dark-mode,
body.dark-mode .container,
body.dark-mode main,
body.dark-mode .admin-layout,
html.dark-mode {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Sidebar */
body.dark-mode .sidebar {
  background: var(--panel) !important;
  color: var(--text);
  border-right-color: rgba(255,255,255,0.04);
  box-shadow: none;
}
body.dark-mode .sidebar .nav-link { color: var(--muted); }
body.dark-mode .sidebar .nav-link.active { color: var(--text); font-weight:600; }

/* Sidebar icon colors specific to dark mode: keep icons readable and
   use the theme accent for active/hover states. We target the same
   selectors used in the base overrides so behavior is consistent. */
body.dark-mode #adminSidebarDesktop .nav-link .bi,
body.dark-mode .sidebar .nav-link .bi,
html.dark-mode #adminSidebarDesktop .nav-link .bi,
html.dark-mode .sidebar .nav-link .bi {
  color: rgba(154,163,178,0.86) !important; /* slightly brighter muted */
  opacity: 0.95 !important;
}

body.dark-mode #adminSidebarDesktop .nav-link.active .bi,
body.dark-mode .sidebar .nav-link.active .bi,
body.dark-mode #adminSidebarDesktop .nav-link:hover .bi,
body.dark-mode .sidebar .nav-link:hover .bi,
html.dark-mode #adminSidebarDesktop .nav-link.active .bi,
html.dark-mode .sidebar .nav-link.active .bi {
  color: var(--accent) !important; /* use the accent color in dark mode */
  opacity: 1 !important;
}

/* Navbar / header */
body.dark-mode .admin-header .navbar,
body.dark-mode .site-header .navbar {
  background: var(--bg) !important;
  color: var(--text);
}
body.dark-mode .navbar-brand { padding-top: .18rem !important; padding-bottom: .18rem !important; }
body.dark-mode .navbar-brand img,
body.dark-mode .admin-header .navbar-brand img,
.navbar-brand .brand-mark { height: 28px !important; max-height: 28px !important; }
body.dark-mode .navbar { min-height: 0 !important; }

/* Cards, tables, offcanvas surfaces */
body.dark-mode .card,
body.dark-mode .table,
body.dark-mode .offcanvas-body,
body.dark-mode .list-group-item,
body.dark-mode .admin-footer {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Make Bootstrap modals match dark mode surfaces so dialogs remain readable */
body.dark-mode .modal-content,
html.dark-mode .modal-content {
  background-color: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
body.dark-mode .modal-header,
body.dark-mode .modal-body,
body.dark-mode .modal-footer,
html.dark-mode .modal-header,
html.dark-mode .modal-body,
html.dark-mode .modal-footer {
  color: var(--text) !important;
  border-color: var(--border) !important;
}
/* Ensure the small close icon is visible on dark backgrounds */
body.dark-mode .btn-close,
html.dark-mode .btn-close {
  filter: invert(1) !important; /* make the close symbol visible */
}
/* Make modal form controls align with dark inputs */
body.dark-mode .modal .form-control,
html.dark-mode .modal .form-control {
  background-color: #0c1622 !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Table header and rows */
body.dark-mode .table thead th { background-color: rgba(255,255,255,0.03) !important; color: var(--text) !important; font-weight: 600; }
body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02) !important; }
body.dark-mode .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.04) !important; }

/* Inputs / forms */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"] {
  background-color: #0c1622 !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* Admin user fixed area */
body.dark-mode .admin-user-fixed { background-color: #071018 !important; color: var(--text) !important; border-color: rgba(255,255,255,0.04) !important; }
body.dark-mode .admin-user-fixed .btn, body.dark-mode .admin-user-fixed a.btn { background-color: transparent !important; color: var(--text) !important; border-color: rgba(255,255,255,0.12) !important; }

/* Buttons and accents */
body.dark-mode .btn { color: var(--text); }
body.dark-mode .btn-primary { background-color: var(--accent) !important; border-color: rgba(13,110,253,0.9) !important; color: #fff !important; }
body.dark-mode .btn-outline-light { color: var(--text); border-color: rgba(255,255,255,0.12); }
body.dark-mode .btn-success { background-color: rgba(25,135,84,0.95) !important; border-color: rgba(25,135,84,0.95) !important; color: #fff !important; }
body.dark-mode .btn-outline-success { color: rgba(25,135,84,0.9) !important; border-color: rgba(25,135,84,0.18) !important; }
body.dark-mode .btn-danger { background-color: rgba(220,53,69,0.95) !important; border-color: rgba(220,53,69,0.9) !important; color: #fff !important; }

/* Tabs (dark-mode consolidated) */
body.dark-mode .nav-tabs { border-bottom: 1px solid rgba(255,255,255,0.06) !important; background: transparent !important; }
body.dark-mode .nav-tabs .nav-link { color: rgba(255,255,255,0.72) !important; background: transparent !important; border: 1px solid transparent !important; border-bottom: none !important; margin-right: .35rem !important; padding: .55rem .9rem !important; border-top-left-radius: .375rem !important; border-top-right-radius: .375rem !important; }
body.dark-mode .nav-tabs .nav-link:hover { color: rgba(255,255,255,0.9) !important; background: rgba(255,255,255,0.02) !important; }
body.dark-mode .nav-tabs .nav-link.active { color: #ffffff !important; background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-bottom-color: transparent !important; }

/* Input group icon pill */
body.dark-mode .input-group-text { background: rgba(255,255,255,0.02) !important; color: rgba(255,255,255,0.82) !important; border: 1px solid rgba(255,255,255,0.05) !important; box-shadow: none !important; }
body.dark-mode .input-group-text .bi, body.dark-mode .input-group-text i { color: inherit !important; opacity: .95 !important; font-size: 1.05em; }

/* Scrollbars (Firefox + WebKit) */
:root { --dm-scroll-thumb: rgba(255,255,255,0.16); --dm-scroll-track: rgba(255,255,255,0.03); }
body.dark-mode, html.dark-mode { --scroll-thumb: var(--dm-scroll-thumb); --scroll-track: var(--dm-scroll-track); }
.sidebar, .offcanvas-body { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.sidebar::-webkit-scrollbar, .offcanvas-body::-webkit-scrollbar { width:10px; }
.sidebar::-webkit-scrollbar-track, .offcanvas-body::-webkit-scrollbar-track { background: var(--scroll-track); border-radius:8px; }
.sidebar::-webkit-scrollbar-thumb, .offcanvas-body::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border-radius:8px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.18); }

/* Ensure the main document scrollbar (body/html) is dark in dark-mode */
html.dark-mode, body.dark-mode {
  scrollbar-width: thin;
  scrollbar-color: var(--dm-scroll-thumb) var(--dm-scroll-track);
}

/* WebKit-based browsers (Chrome, Edge) - style the page scrollbar */
html.dark-mode::-webkit-scrollbar, body.dark-mode::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
html.dark-mode::-webkit-scrollbar-track, body.dark-mode::-webkit-scrollbar-track {
  background: var(--dm-scroll-track);
}
html.dark-mode::-webkit-scrollbar-thumb, body.dark-mode::-webkit-scrollbar-thumb {
  background-color: var(--dm-scroll-thumb);
  border-radius: 10px;
  border: 2px solid transparent; /* provide padding so thumb doesn't touch edge */
  background-clip: content-box;
}
html.dark-mode::-webkit-scrollbar-thumb:hover, body.dark-mode::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,0.18);
}

/* Utility hardening to avoid white flashes from inline styles in dark mode */
html.dark-mode [style*="background: white"], html.dark-mode [style*="background:#fff"], html.dark-mode [style*="background: #fff"] { background-color: var(--bg) !important; color: var(--text) !important; }

/* Ensure Bootstrap "light" utility classes adapt in dark mode (cards/rows using .bg-light) */
html.dark-mode .bg-light,
body.dark-mode .bg-light,
html.dark-mode .text-bg-light,
body.dark-mode .text-bg-light {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Make pre/code blocks readable in dark mode, including those with inline light backgrounds */
html.dark-mode pre,
body.dark-mode pre,
html.dark-mode code,
body.dark-mode code,
html.dark-mode pre[style],
body.dark-mode pre[style],
html.dark-mode code[style],
body.dark-mode code[style] {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: .5rem .75rem !important;
  border-radius: .35rem !important;
  white-space: pre-wrap !important; /* preserve line breaks but allow wrapping on narrow screens */
}

/* Specifically override common inline light background used by some snippets */
html.dark-mode pre[style*="#f6f8fa"],
body.dark-mode pre[style*="#f6f8fa"],
html.dark-mode pre[style*="background:#f6f8fa"],
body.dark-mode pre[style*="background:#f6f8fa"] {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
}

/* Small accessibility/contrast tweaks */
/* Make muted text slightly more visible in dark mode (increase contrast) */
body.dark-mode .text-muted, body.dark-mode .text-secondary, body.dark-mode small.text-muted { color: rgba(154,163,178,0.96) !important; }

/* Placeholder text for inputs — ensure legibility across browsers */
body.dark-mode ::placeholder,
html.dark-mode ::placeholder {
  color: rgba(230,238,248,0.48) !important; /* lighter than muted, still subtle */
  opacity: 1 !important; /* force visible opacity in some browsers */
}
body.dark-mode :-ms-input-placeholder, body.dark-mode ::-ms-input-placeholder { color: rgba(230,238,248,0.48) !important; }

/* Footer / page footer readability */
html.dark-mode footer, body.dark-mode footer, html.dark-mode .footer, body.dark-mode .footer, html.dark-mode .admin-footer, body.dark-mode .admin-footer {
  color: var(--text) !important;
}
/* Improve small/low-contrast footer text specifically for the admin footer in dark mode */
body.dark-mode .admin-footer small, html.dark-mode .admin-footer small {
  color: rgba(230,238,248,0.92) !important; /* slightly brighter than var(--text) for improved legibility */
  font-weight: 500 !important; /* a touch bolder to aid readability at small sizes */
}
/* If footer uses .bg-light utility, tone it down in dark mode */
html.dark-mode footer.bg-light, body.dark-mode footer.bg-light, html.dark-mode .footer.bg-light, body.dark-mode .footer.bg-light {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Keep transitions smooth but subtle */
body, .sidebar, .admin-header .navbar, .card, .table { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }

/* Mobile header: ensure small-profile block and mobile buttons use dark surfaces */
@media (max-width: 767.98px) {
  html.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none,
  body.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none {
    background-color: transparent !important;
    color: var(--text) !important;
  }

  html.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none .btn,
  html.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none a.btn,
  body.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none .btn,
  body.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none a.btn {
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: rgba(255,255,255,0.12) !important;
  }

  html.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none .btn:hover,
  html.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none a.btn:hover,
  body.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none .btn:hover,
  body.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none a.btn:hover {
    background-color: rgba(255,255,255,0.03) !important;
  }

  /* Ensure avatar background doesn't show a light panel */
  html.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none .avatar-sm,
  body.dark-mode .admin-header .d-flex.align-items-center.ms-auto.d-md-none .avatar-sm {
    background-color: transparent !important;
  }
}

/* Force solid sidebar background in dark mode (avoid translucency showing page behind) */
html.dark-mode .sidebar,
body.dark-mode .sidebar,
html.dark-mode #adminSidebar,
body.dark-mode #adminSidebar,
html.dark-mode .offcanvas.offcanvas-start,
body.dark-mode .offcanvas.offcanvas-start {
  background-color: var(--panel) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border-right: 1px solid var(--border) !important;
  z-index: 1040; /* ensure it's above page content but below modals */
}

/* NOTE: previously this file hid the desktop hamburger (.btn-admin-toggle)
   unconditionally on >=768px via `display: none !important`. That
   prevented the toggle from being available in some sessions/pages and
   blocked the admin offcanvas toggle for certain users. The dashboard
   layout/appearance is controlled in `assets/dashboard.css`; remove the
   hard hide here so that `dashboard.css` can manage the intended
   visibility and positioning of the hamburger. If you prefer to hide
   it on desktop, reintroduce a rule in `dashboard.css` with the desired
   specificity and conditions.
*/

/* Hide desktop hamburger toggle if it's redundant; keep it visible on mobile */
@media (min-width: 768px) {
  .btn-admin-toggle { display: none !important; }
}


/* End of consolidated dark-mode.css */