/* =============================================================
   USHS Admin Layout
   Sidebar: hidden by default on ALL screen sizes.
   Slides in from the left when the hamburger is clicked.
   Header: always fixed at top, full width.
   ============================================================= */

:root {
  --admin-header-h:  62px;
  --admin-sidebar-w: 268px;

  --admin-bg:      oklch(0.18 0.04 260);
  --admin-card:    oklch(0.22 0.04 260);
  --admin-border:  oklch(0.98 0.005 250 / 0.14);
  --admin-primary: oklch(0.62 0.22 255);
  --admin-text:    oklch(0.98 0.005 250);
  --admin-muted:   oklch(0.72 0.02 260);
}

/* ── Resets ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }

/* ── Header ──────────────────────────────────────────────────
   Fixed, full-width, always on top.                         */
.ushs-header.admin-top-header,
header.ushs-header.admin-top-header {
  position: fixed !important;
  top:    0 !important;
  left:   0 !important;
  right:  0 !important;
  height: var(--admin-header-h) !important;
  z-index: 1060 !important;
  width:  100% !important;
  /* A little extra left padding so brand sits away from screen edge */
  padding-left: 8px !important;
}

/* ── Sidebar ─────────────────────────────────────────────────
   Hidden off-screen by default on ALL viewports.
   Slides in when .active is added by JS.                    */
.admin-sidebar {
  position: fixed !important;
  top:    0 !important;
  left:   0 !important;
  bottom: 0 !important;
  width:  var(--admin-sidebar-w) !important;
  height: 100vh !important;
  z-index: 1070 !important;          /* above header so it overlays it */
  overflow-y: auto !important;
  overflow-x: hidden !important;

  background: linear-gradient(
    180deg,
    oklch(0.20 0.04 260) 0%,
    oklch(0.14 0.034 261) 100%
  ) !important;
  border-right: 1px solid var(--admin-border) !important;
  border-radius: 0 20px 20px 0 !important;
  box-shadow: 8px 0 40px oklch(0 0 0 / 0.45) !important;

  /* Start off-screen */
  transform: translateX(-110%) !important;
  transition: transform .26s cubic-bezier(.4,0,.2,1) !important;
}

/* Slide in */
.admin-sidebar.active {
  transform: translateX(0) !important;
}

/* ── Sidebar header ─────────────────────────────────────── */
.admin-sidebar-header {
  padding: 20px 18px 14px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--admin-border) !important;
  background: oklch(0.98 0.005 250 / 0.04) !important;
}

.admin-sidebar-header i {
  color: var(--admin-primary) !important;
  filter: drop-shadow(0 0 10px oklch(0.62 0.22 255 / 0.30));
}

.admin-sidebar-header h4 {
  color: var(--admin-text) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 8px 0 4px !important;
}

.admin-sidebar-header p {
  color: var(--admin-muted) !important;
  font-size: 0.75rem !important;
  margin: 0 !important;
}

/* ── Sidebar nav items ──────────────────────────────────── */
.admin-sidebar-menu {
  padding: 10px 10px 24px !important;
}

.admin-sidebar-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 11px 14px !important;
  margin: 3px 0 !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  border-left: 3px solid transparent !important;
  color: var(--admin-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s, transform .15s !important;
}

.admin-sidebar-menu a i {
  width: 20px !important;
  min-width: 20px !important;
  text-align: center !important;
  color: inherit !important;
}

.admin-sidebar-menu a:hover,
.admin-sidebar-menu a.active {
  background: oklch(0.62 0.22 255 / 0.15) !important;
  border-color: oklch(0.62 0.22 255 / 0.28) !important;
  border-left-color: var(--admin-primary) !important;
  color: var(--admin-text) !important;
  transform: translateX(3px) !important;
}

.admin-sidebar-menu a.active {
  background: oklch(0.62 0.22 255 / 0.22) !important;
  box-shadow: inset 0 0 0 1px oklch(0.62 0.22 255 / 0.20) !important;
}

/* Logout tint */
.admin-sidebar-menu a[href="logout.php"] {
  color: oklch(0.78 0.17 27) !important;
  margin-top: 8px !important;
}
.admin-sidebar-menu a[href="logout.php"]:hover {
  background: oklch(0.62 0.24 27 / 0.15) !important;
  border-left-color: oklch(0.62 0.24 27) !important;
}

/* ── Backdrop ───────────────────────────────────────────────
   Shown over the whole page when sidebar is open.          */
.admin-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1065;          /* between header (1060 header is below sidebar) */
  background: oklch(0 0 0 / 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.admin-sidebar-backdrop.active {
  display: block !important;
}

/* ── Main content ───────────────────────────────────────────
   No left margin needed — sidebar overlays, doesn't push.
   Only top padding to clear the fixed header.
   The !important here overrides any inline page-level styles
   that still have margin-left: 250px from the old layout.  */
.main-content,
main.main-content,
.content-wrapper,
body .main-content,
body main.main-content {
  margin-left: 0 !important;
  padding-top: calc(var(--admin-header-h) + 20px) !important;
  min-height: 100vh !important;
  padding-left:  24px !important;
  padding-right: 24px !important;
}

/* ── Scrollbar inside sidebar ──────────────────────────── */
.admin-sidebar::-webkit-scrollbar       { width: 4px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb {
  background: oklch(0.62 0.22 255 / 0.30);
  border-radius: 4px;
}
.admin-sidebar::-webkit-scrollbar-thumb:hover {
  background: oklch(0.62 0.22 255 / 0.55);
}

/* ── Responsive tweaks ─────────────────────────────────── */
@media (max-width: 640px) {
  .admin-sidebar {
    width: min(var(--admin-sidebar-w), 88vw) !important;
  }

  .main-content,
  main.main-content,
  .content-wrapper {
    padding-left:  12px !important;
    padding-right: 12px !important;
  }
}
