/* ============================================================
   admin.css — Arrow Dynamic Archery
   Admin panel: layout, sidebar, roster, reservations,
   admin login modal, notifications, reports filter,
   profile save bar, editable-input styles.
   ============================================================ */


/* ── Inline form classes (used in tournament entry, class forms, etc.) ── */
.f-lb{font-size:0.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.4px;display:block;margin-bottom:3px;}
.f-in{background:var(--dark3);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:8px 10px;font-family:'DM Sans',sans-serif;font-size:0.88rem;outline:none;width:100%;box-sizing:border-box;}
.f-in:focus{border-color:var(--teal-light);}
.f-in option{background:var(--dark2);}

/* ── HAMBURGER (hidden by default — shown on mobile via .ham-visible) ── */
#admin-hamburger { display: none; }

/* ── DRAWER TOP-LEVEL NAV (hidden on desktop — shown only in mobile drawer) ── */
/* FIX: Restored to display:none on desktop. The prior change made these items
   visible on all viewports, causing sidebar misalignment on desktop/tablet.
   The ≤640px media query below overrides this to display:flex for mobile. */
.drawer-nav-section { display: none; }
.drawer-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  font-size: 0.82rem; font-weight: 600;
  border: none; border-left: 3px solid transparent;
  border-radius: 0; min-height: 36px;
  white-space: nowrap; color: var(--muted);
  background: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.drawer-nav-item:hover,
.drawer-nav-item:active {
  background: rgba(78,205,196,0.08); color: var(--text);
}
.drawer-nav-item.active {
  color: var(--teal-light); background: rgba(78,205,196,0.1);
  border-left-color: var(--teal-light);
}



/* ── ADMIN ROSTER ── */
.archer-list{display:flex;flex-direction:column;gap:7px;}
.archer-item{background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:9px 13px;display:flex;align-items:center;justify-content:space-between;gap:0.8rem;}
.archer-item-name{font-weight:600;font-size:0.92rem;}
.archer-item-meta{font-size:0.72rem;color:var(--muted);margin-top:2px;}
.status-pill{font-size:0.65rem;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;}
.status-active{background:rgba(82,217,139,0.15);color:var(--green);}
.status-idle{background:rgba(122,168,186,0.1);color:var(--muted);}

/* ── LOCAL ADMIN LOGIN MODAL ── */
.bell-panel{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  width:320px;max-height:400px;overflow-y:auto;
  background:var(--dark2);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);z-index:9000;
}
.bell-panel.open{ display:block; }
.notif-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--border);}
.notif-hdr-title{font-size:0.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;}
.notif-clear-all{background:none;border:1px solid rgba(232,72,85,0.25);color:var(--red,#e84855);border-radius:6px;padding:3px 10px;font-size:0.68rem;font-family:'DM Sans',sans-serif;cursor:pointer;transition:background 0.15s;}
.notif-clear-all:hover{background:rgba(232,72,85,0.1);}
.notif-item-wrap{position:relative;overflow:hidden;}
.notif-item-inner{position:relative;transition:transform 0.2s ease;display:flex;align-items:stretch;}
.notif-item-inner.swiping{transition:none;}
.notif-item{ padding:10px 14px;border-bottom:1px solid var(--border);cursor:default;flex:1;min-width:0; }
.notif-item:last-child{ border-bottom:none; }
.notif-unread{ background:rgba(78,205,196,0.06); }
.notif-msg{ font-size:0.8rem;color:var(--text);line-height:1.4; }
.notif-time{ font-size:0.68rem;color:var(--muted);margin-top:3px;display:flex;align-items:center;justify-content:space-between; }
.notif-dismiss{background:none;border:none;color:var(--muted);font-size:0.72rem;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color 0.15s,background 0.15s;flex-shrink:0;margin-left:8px;}
.notif-dismiss:hover{color:var(--red,#e84855);background:rgba(232,72,85,0.1);}
.notif-swipe-bg{position:absolute;top:0;right:0;bottom:0;width:80px;display:flex;align-items:center;justify-content:center;background:var(--red,#e84855);color:#fff;font-size:0.72rem;font-weight:700;opacity:0;transition:opacity 0.15s;}
.notif-swipe-bg.visible{opacity:1;}

.admin-login-bg{
  position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:10000;
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.admin-login-bg.open{ display:flex; }
.admin-login-box{
  background:var(--dark2);border:1px solid var(--border);border-radius:14px;
  padding:2rem;width:100%;max-width:360px;
}
.admin-login-title{
  font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:2px;
  color:var(--teal-light);margin-bottom:0.3rem;
}
.admin-login-sub{ font-size:0.78rem;color:var(--muted);margin-bottom:1.4rem; }
.admin-login-err{
  font-size:0.78rem;color:var(--red);margin-bottom:0.8rem;
  display:none;padding:6px 10px;background:rgba(232,72,85,0.1);
  border-radius:6px;border:1px solid rgba(232,72,85,0.3);
}
.admin-login-divider{
  display:flex;align-items:center;gap:10px;margin:1.2rem 0;
  color:var(--muted);font-size:0.72rem;
}
.admin-login-divider::before,.admin-login-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}



/* ── ADMIN STICKY LAYOUT ── */

/* Make the main nav bar sticky */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Admin view: two-column layout on desktop, stacked on mobile */
#view-admin.active {
  padding: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column;
  min-height: calc(100vh - 60px);
}

.admin-layout {
  display: flex;
  min-height: calc(100vh - 60px);
  align-items: flex-start;
}

/* LEFT SIDEBAR NAV */
/* sidebar — see redesigned block below */

/* ── PERSISTENT SIDEBAR — visible across all admin tabs ──────────────────────
   When admin is logged in, the sidebar is moved to <body> and positioned fixed.
   body.admin-sidebar-active offsets all views so content doesn't sit under it.
   On mobile (≤640px) the sidebar is an off-canvas drawer — this only applies
   to desktop/tablet (>640px). ───────────────────────────────────────────────── */
@media (min-width: 641px) {
  body.admin-sidebar-active .admin-sidebar.sidebar-persistent {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 210; /* above top-nav (200) so sidebar is always on top */
    display: flex !important;
    flex-direction: column;
  }
  /* FIX: Push both the top-nav AND all views right so content doesn't sit
     under the fixed sidebar.  Without this, nav elements overlap the sidebar
     and appear as a misaligned duplicate bar. */
  body.admin-sidebar-active #top-nav,
  body.admin-sidebar-active .view {
    margin-left: 220px;
  }
  /* When sidebar is collapsed, reduce offsets */
  body.admin-sidebar-collapsed #top-nav,
  body.admin-sidebar-collapsed .view {
    margin-left: 56px;
  }
}

.admin-sidebar .vt-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.admin-sidebar .vt-btn.active {
  background: rgba(78,205,196,0.1);
  border-color: rgba(78,205,196,0.25);
  color: var(--teal-light);
}

.admin-sidebar .vt-btn:hover:not(.active) {
  background: var(--dark3);
  color: var(--text);
}

/* MAIN CONTENT AREA */
.admin-content {
  flex: 1;
  padding: 1.2rem 1.4rem;
  overflow-y: visible;
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* MOBILE: sidebar — see comprehensive mobile section at bottom of file */


.archer-roster-row { cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; }
.archer-roster-row:hover { background: rgba(78,205,196,.04); }


.archer-roster-row{cursor:pointer;transition:background .12s;}
.archer-roster-row:hover{background:rgba(78,205,196,.04);}

/* ── ADMIN SIDEBAR REDESIGN ── */
.admin-sidebar{
  width:220px;flex-shrink:0;background:var(--dark2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  height:calc(100vh - 60px);position:sticky;top:60px;overflow-y:auto;
  transition:width .25s ease;
  scrollbar-width:none;-ms-overflow-style:none;
}
.admin-sidebar::-webkit-scrollbar{display:none;}
.admin-sidebar.collapsed{width:56px;}
.sidebar-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
  min-height:40px;
}
/* Desktop branding inside sidebar toggle — replaces top-nav brand on the left */
.sidebar-toggle::before{
  content:'ADA';
  font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:2px;
  color:var(--teal-light);
}
.sidebar-toggle-btn{
  background:none;border:1px solid var(--border);color:var(--muted);
  border-radius:6px;width:30px;height:30px;cursor:pointer;font-size:0.85rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .2s,color .2s;
}
.sidebar-toggle-btn:hover{border-color:var(--teal-light);color:var(--teal-light);}
.sidebar-nav-section{padding:8px 0;border-bottom:1px solid var(--border);}
/* Top-level nav section (Dashboard, Scoring, Reports) — subtle visual separation */
#sidebar-top-nav{padding:4px 0 6px;}
.sidebar-nav-section:last-of-type{border-bottom:none;}
.sidebar-section-label{
  font-size:0.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:1px;padding:6px 16px 4px;white-space:nowrap;overflow:hidden;
  transition:opacity .2s;
}
.admin-sidebar.collapsed .sidebar-section-label{opacity:0;}
.sidebar-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:0.84rem;font-weight:500;
  border-left:3px solid transparent;transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;overflow:hidden;text-align:left;
}
.sidebar-btn:hover{background:rgba(78,205,196,0.06);color:var(--text);}
.sidebar-btn.active{color:var(--teal-light);border-left-color:var(--teal-light);background:rgba(78,205,196,0.08);}
.sidebar-btn-icon{font-size:1rem;flex-shrink:0;width:20px;text-align:center;}
.sidebar-btn-label{transition:opacity .2s;white-space:nowrap;}
.admin-sidebar.collapsed .sidebar-btn-label{opacity:0;width:0;overflow:hidden;}
.sidebar-logout{margin-top:auto;padding:12px 0;border-top:1px solid var(--border);}

/* Top nav overhaul */
#top-nav{
  position:sticky;top:0;z-index:200;display:flex;align-items:center;
  background:var(--dark);border-bottom:1px solid var(--border);
  padding:0 1rem;height:60px;gap:0;
  box-sizing:border-box; /* ensure padding doesn't expand total width */
  justify-content:flex-start; /* override nav space-between from styles.css */
}
/* Belt-and-suspenders: hide public nav items when admin sidebar is active.
   JS already sets display:none via _applyAdminVisibility, but this prevents
   any flash or race where JS hasn't run yet. */
body.admin-sidebar-active #nav-tabs-public { display: none !important; }
#top-nav .nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.nav-logo{width:34px;height:34px;flex-shrink:0;}
#top-nav .nav-tabs{display:flex;align-items:center;gap:4px;margin-left:1.5rem;flex:1;}
#top-nav .nav-tab{
  padding:6px 14px;border-radius:8px;font-size:0.82rem;font-weight:600;
  color:var(--muted);text-decoration:none;border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s;white-space:nowrap;
}
#top-nav .nav-tab:hover{background:rgba(78,205,196,0.08);color:var(--text);}
#top-nav .nav-tab.active{color:var(--teal-light);background:rgba(78,205,196,0.1);border-color:var(--teal-mid);}
#nav-user-bar{display:none;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}


/* ── Sidebar layout fixes ── */
.sidebar-btn { margin: 0; width: 100%; border-radius: 0; }
.sidebar-btn.active { background: rgba(78,205,196,0.09); }
.admin-sidebar > * { flex-shrink: 0; }

/* ── Reports filter bar ── */
.rpt-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:0 0 1rem;margin-bottom:0.5rem;}
.rpt-filters select{padding:6px 10px;background:var(--dark3);
  border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:0.82rem;}
.rpt-filter-label{font-size:0.72rem;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}

/* ── Sticky profile save bar ── */
.profile-sticky-bar{
  position:sticky;bottom:0;z-index:100;
  background:var(--dark);border-top:1px solid var(--border);
  padding:10px 1rem;display:flex;gap:10px;align-items:center;
  margin:0 -1rem;
}


.sidebar-toggle-btn {
  transition: transform .25s ease, border-color .2s, color .2s;
  font-size: 1.1rem;
  font-weight: 300;
}
.admin-sidebar.collapsed .sidebar-section-label { opacity: 0; pointer-events: none; }
.admin-sidebar.collapsed .sidebar-btn-label     { opacity: 0; width: 0; overflow: hidden; }
.admin-sidebar.collapsed .sidebar-toggle        { justify-content: center; }
.admin-sidebar.collapsed .sidebar-toggle::before { display: none; }


/* ── Admin Reservations grid ── */
#admin-lanes-card {
  max-width: none !important;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.res-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 0.5rem;
  box-sizing: border-box;
  max-width: 100%;
}
.res-grid-wrap table { border-collapse: collapse; min-width: 700px; width: 100%; }
.res-grid-wrap thead th {
  padding: 10px 8px; background: var(--dark3); color: var(--teal-light);
  font-size: 0.8rem; white-space: nowrap; text-align: center;
  border-bottom: 2px solid var(--border); border-left: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif; font-weight: 700;
}
.res-grid-wrap thead th:first-child { text-align: left; border-left: none; min-width: 90px; }
.res-grid-wrap td {
  padding: 0; border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border); text-align: center;
  vertical-align: top; height: 58px; min-width: 80px;
}
.res-grid-wrap td:first-child {
  padding: 0 10px; text-align: left; border-left: none;
  font-family: 'DM Mono', monospace; font-size: 0.8rem; color: var(--muted);
  white-space: nowrap; background: var(--dark3); font-weight: 600;
}
.res-cell-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 4px 4px; gap: 3px; }
.res-cell-taken { background: rgba(78,205,196,0.10); cursor: default; }
.res-cell-open { color: rgba(255,255,255,0.15); font-size: 0.68rem; cursor: pointer; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.res-cell-open:hover { background: rgba(78,205,196,0.06); color: var(--teal-light); }
.res-archer-name { font-size: 0.73rem; font-weight: 700; color: var(--teal-light); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.res-cancel-btn { font-size: 0.6rem; color: var(--red); background: rgba(232,72,85,0.08); border: 1px solid rgba(232,72,85,0.3); border-radius: 4px; cursor: pointer; padding: 2px 6px; white-space: nowrap; }
.res-cancel-btn:hover { background: rgba(232,72,85,0.2); }
/* Reservation add modal */
.res-modal-bg { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:6000;align-items:center;justify-content:center;padding:1rem; }
.res-modal-bg.open { display:flex; }
.res-modal-box { background:var(--dark2);border:1px solid var(--border);border-radius:14px;width:100%;max-width:480px;overflow:hidden;display:flex;flex-direction:column;max-height:90vh; }
.res-modal-header { display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border);flex-shrink:0; }
.res-modal-header h3 { font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:1px;color:var(--teal-light);margin:0; }
.res-modal-body { flex:1;overflow-y:auto;padding:1.2rem; }
.res-modal-footer { display:flex;gap:10px;padding:1rem 1.2rem;border-top:1px solid var(--border);background:var(--dark);flex-shrink:0; }
.res-modal-footer .btn { flex:1; }
#aar-guest-name { padding: 8px 10px; font-size: 0.85rem; width: 100%; }


.sc-chip{display:inline-block;min-width:20px;padding:2px 4px;border-radius:3px;font-size:0.7rem;font-weight:700;text-align:center;}

.adm-edit-input{
  background:var(--dark2);border:1px solid var(--teal-light);
  border-radius:6px;padding:4px 8px;color:var(--text);
  font-size:0.82rem;width:60%;text-align:right;
  outline:none;font-family:inherit;
}
.adm-edit-input:focus{ border-color:var(--teal-light);box-shadow:0 0 0 2px rgba(78,205,196,0.2); }
select.adm-edit-input, textarea.adm-edit-input{ width:60%; }
textarea.adm-edit-input{ width:100%;text-align:left;resize:vertical; }

/* ── Equipment slide-out drawer ── */
.equip-drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);
  z-index:5000;display:none;align-items:stretch;justify-content:flex-end;
}
.equip-drawer-overlay.open{display:flex;}
.equip-drawer{
  background:var(--dark2);width:min(620px,100vw);
  display:flex;flex-direction:column;height:100vh;overflow:hidden;
  border-left:1px solid var(--border);
  animation:equip-slide-in .25s ease;
}
@keyframes equip-slide-in{from{transform:translateX(100%);}to{transform:translateX(0);}}
.equip-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--dark);
}
.equip-drawer-header h3{
  font-family:'Bebas Neue',sans-serif;font-size:1.2rem;
  letter-spacing:1px;color:var(--teal-light);margin:0;
}
.equip-drawer-body{flex:1;overflow-y:auto;padding:1.2rem 1.4rem;}
.equip-drawer-footer{
  display:flex;gap:10px;padding:1rem 1.4rem;
  border-top:1px solid var(--border);background:var(--dark);flex-shrink:0;
}
.equip-drawer-footer .btn{flex:1;padding:12px;font-size:0.9rem;}
@media(max-width:640px){
  .equip-drawer{width:100vw;}
}


/* ══════════════════════════════════════════════════════════════
   ADMIN MOBILE RESPONSIVENESS
   Breakpoints: 768px (tablet), 640px (mobile off-canvas drawer),
   480px (small), 360px (compact).
   All rules preserve desktop layout.
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay (hidden on desktop, shown only on admin view mobile) ── */
#admin-drawer-overlay {
  display: none; position: fixed; inset: 0; z-index: 299;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity .25s ease;
}
#admin-drawer-overlay.open { display: block; }

/* ── TABLET ≤ 768px ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Top nav: tighten spacing */
  #top-nav { padding: 0 0.6rem; height: 54px; gap: 0; }
  #top-nav .nav-tabs { margin-left: 0.75rem; gap: 2px; }
  #top-nav .nav-tab { padding: 5px 8px; font-size: 0.74rem; }
  .nav-logo { width: 30px; height: 30px; }

  /* Sidebar: shrink width */
  .admin-sidebar { width: 180px; }
  .admin-sidebar.collapsed { width: 48px; }
  .sidebar-btn { padding: 8px 10px; font-size: 0.8rem; }
  .sidebar-section-label { padding: 6px 12px 3px; font-size: 0.6rem; }
  /* Match margins to narrower sidebar at tablet */
  body.admin-sidebar-active #top-nav,
  body.admin-sidebar-active .view { margin-left: 180px; }
  body.admin-sidebar-collapsed #top-nav,
  body.admin-sidebar-collapsed .view { margin-left: 48px; }

  /* Content area: reduce padding */
  .admin-content { padding: 1rem; }

  /* Reservation grid: allow scroll, reduce cell size */
  .res-grid-wrap table { min-width: 600px; }
  .res-grid-wrap td { height: 50px; min-width: 64px; }
  .res-archer-name { font-size: 0.68rem; }

  /* Report filters: stack */
  .rpt-filters { gap: 6px; }
  .rpt-filters select { font-size: 0.78rem; padding: 6px 8px; }
}

/* ── MOBILE ≤ 640px — Off-canvas drawer navigation ─────────── */
@media (max-width: 640px) {
  /* ── Top nav: clean mobile header ── */
  #top-nav { padding: 0 0.5rem; height: 50px; }
  #top-nav .nav-brand-text { display: none; }
  #top-nav .nav-tabs { margin-left: 0.4rem; }

  /* ── Reset sidebar margin-left from tablet breakpoint ──
     On mobile the sidebar is an off-canvas drawer (position:fixed),
     so content must NOT be offset. The tablet ≤768px rules set
     margin-left:180px/48px which cascade into ≤640px — zero them out. */
  body.admin-sidebar-active #top-nav,
  body.admin-sidebar-active .view,
  body.admin-sidebar-collapsed #top-nav,
  body.admin-sidebar-collapsed .view { margin-left: 0; }

  /* ── HIDE admin nav tabs on mobile — items live in drawer only ── */
  #nav-tabs-admin { display: none !important; }
  /* Public nav tabs remain visible for non-admin visitors */

  /* ── User bar: always on the right ── */
  #nav-user-bar { gap: 6px; margin-left: auto !important; }
  #nav-user-bar .btn { padding: 5px 8px; font-size: 0.72rem; }
  #nav-user-bar #nav-user-name { display: none; }

  /* ── Hamburger button: visible on mobile when admin is active ── */
  #admin-hamburger.ham-visible {
    display: flex !important;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.3rem;
    padding: 4px 8px;
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    order: -1;
  }
  #admin-hamburger.ham-visible:hover,
  #admin-hamburger.ham-visible:active { color: var(--teal-light); }

  /* ── Drawer top-level nav section (Dashboard, Scoring, Reports) ── */
  .admin-sidebar .drawer-nav-section {
    display: flex; flex-direction: column; padding: 4px 0;
    border-bottom: 1px solid var(--border);
  }
  .admin-sidebar .drawer-nav-section .sidebar-section-label {
    display: block; opacity: 1 !important; pointer-events: auto;
    padding: 10px 18px 4px; font-size: 0.62rem;
  }
  .admin-sidebar .drawer-nav-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 18px;
    font-size: 0.9rem; font-weight: 600;
    border: none; border-left: 3px solid transparent;
    border-radius: 0; min-height: 48px;
    white-space: nowrap; color: var(--muted);
    background: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
  }
  .admin-sidebar .drawer-nav-item:hover,
  .admin-sidebar .drawer-nav-item:active {
    background: rgba(78,205,196,0.08); color: var(--text);
  }
  .admin-sidebar .drawer-nav-item.active {
    color: var(--teal-light); background: rgba(78,205,196,0.1);
    border-left-color: var(--teal-light);
  }

  /* ── Sidebar → off-canvas drawer ── */
  .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    bottom: 0;
    width: 270px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 300;
    flex-direction: column !important;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--border) !important;
    border-bottom: none;
    padding: 0;
    gap: 0;
    background: var(--dark2);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }
  .admin-sidebar.drawer-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  /* Override any collapsed state on mobile */
  .admin-sidebar.collapsed {
    width: 270px !important;
    transform: translateX(-100%);
  }
  .admin-sidebar.collapsed.drawer-open {
    transform: translateX(0);
  }
  .admin-sidebar.collapsed .sidebar-btn-label { opacity: 1 !important; width: auto !important; overflow: visible !important; }
  .admin-sidebar.collapsed .sidebar-section-label { opacity: 1 !important; }

  /* Drawer header: branding + close hint */
  .admin-sidebar .sidebar-toggle {
    display: flex;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    background: var(--dark);
  }
  .admin-sidebar .sidebar-toggle::before {
    content: 'ADMIN MENU';
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: var(--teal-light);
  }
  .admin-sidebar .sidebar-toggle-btn { display: none; }

  /* Section labels: visible and styled */
  .admin-sidebar .sidebar-nav-section {
    display: flex; flex-direction: column; padding: 4px 0;
    border-bottom: 1px solid var(--border);
  }
  .admin-sidebar .sidebar-nav-section:last-of-type { border-bottom: none; }
  .admin-sidebar .sidebar-section-label {
    display: block; opacity: 1 !important; pointer-events: auto;
    padding: 10px 18px 4px; font-size: 0.62rem;
  }

  /* Nav buttons: full width, generous touch targets */
  .admin-sidebar .sidebar-btn {
    width: 100%;
    padding: 14px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    border-left: 3px solid transparent;
    border-radius: 0;
    border-right: none;
    border-top: none;
    border-bottom: none;
    min-height: 48px;
    gap: 12px;
    white-space: nowrap;
    color: var(--muted);
  }
  .admin-sidebar .sidebar-btn:hover,
  .admin-sidebar .sidebar-btn:active {
    background: rgba(78,205,196,0.08);
    color: var(--text);
  }
  .admin-sidebar .sidebar-btn.active {
    color: var(--teal-light);
    background: rgba(78,205,196,0.1);
    border-left-color: var(--teal-light);
  }
  .admin-sidebar .sidebar-btn-icon { font-size: 1.1rem; width: 22px; text-align: center; }
  .admin-sidebar .sidebar-btn-label {
    opacity: 1 !important; width: auto !important; overflow: visible !important;
    font-size: 0.9rem;
  }

  /* Logout at bottom */
  .admin-sidebar .sidebar-logout {
    margin-top: auto; padding: 8px 0 max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
  }

  /* ── Admin layout → full width ── */
  .admin-layout { flex-direction: column; }
  .admin-content { padding: 0.75rem 0.6rem; overflow-x: hidden; }

  /* ── Archer roster ── */
  #atab-archers .sec-title { font-size: 1rem; }
  #archer-list-view > div:first-child { flex-direction: column; gap: 8px; align-items: stretch !important; }
  #archer-list-view > div:first-child .btn { width: 100%; justify-content: center; }
  .archer-item { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .archer-item > div:last-child { align-self: flex-end; }

  /* ── Forms ── */
  .form-row { flex-direction: column; gap: 8px; }
  .form-group { min-width: unset !important; max-width: unset !important; width: 100%; }
  .form-group input,
  .form-group select { font-size: 16px; padding: 10px 12px; min-height: 44px; }

  /* ── Cards ── */
  .card { padding: 0.85rem; border-radius: 8px; }

  /* ── Reservation grid ── */
  .res-grid-wrap { border-radius: 8px; }
  .res-grid-wrap table { min-width: 560px; }
  .res-grid-wrap td { height: 46px; min-width: 56px; }
  .res-grid-wrap thead th { padding: 8px 4px; font-size: 0.72rem; }
  .res-grid-wrap td:first-child { padding: 0 6px; font-size: 0.72rem; }
  .res-archer-name { font-size: 0.65rem; }
  .res-cancel-btn { font-size: 0.55rem; padding: 2px 4px; }
  #atab-reservations .form-group { min-width: 120px; }
  #admin-lanes-card > div:first-child { flex-direction: column; align-items: stretch !important; gap: 6px; }
  #admin-lanes-card .btn-primary { width: 100%; justify-content: center; }

  /* ── Schedule ── */
  .sched-queue-item { flex-direction: column; gap: 6px; padding: 0.75rem; }
  .sched-queue-actions { width: 100%; justify-content: flex-end; }

  /* ── Modals ── */
  .modal-box { max-width: 100%; border-radius: 12px 12px 0 0; max-height: 95vh; }
  .res-modal-box { max-width: 100%; border-radius: 12px 12px 0 0; }
  .res-modal-body { padding: 1rem; }
  .res-modal-footer { padding: 0.75rem 1rem; }
  .res-modal-footer .btn { min-height: 44px; font-size: 0.85rem; }

  /* ── Admin edit inputs ── */
  .adm-edit-input { width: 100%; font-size: 16px; padding: 8px 10px; min-height: 40px; }
  select.adm-edit-input { width: 100%; }
  textarea.adm-edit-input { width: 100%; }

  /* ── Profile save bar ── */
  .profile-sticky-bar { margin: 0 -0.6rem; padding: 10px 0.6rem; }
  .profile-sticky-bar .btn { min-height: 44px; flex: 1; justify-content: center; font-size: 0.82rem; }

  /* ── Typography & spacing ── */
  .sec-title { font-size: 1rem; flex-direction: column; align-items: flex-start; gap: 6px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 0.75rem; }
  .stat-val { font-size: 1.6rem; }
  .bell-panel { width: calc(100vw - 24px); max-width: 320px; right: -8px; }

  /* ── Buttons: touch-friendly ── */
  .btn { min-height: 40px; padding: 9px 14px; }
  .btn-sm { min-height: 36px; padding: 7px 10px; }

  /* ── Session history ── */
  .session-hist-hdr { padding: 0.6rem 0.75rem; gap: 0.5rem; }
  .session-hist-name { font-size: 0.95rem; }

  /* ── Archer profile cards ── */
  .archer-profile-grid { grid-template-columns: 1fr; }
  .apc-stats { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .apc-stat-val { font-size: 0.95rem; }
}

/* ── SMALL MOBILE ≤ 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  .admin-content { padding: 0.5rem; }
  .card { padding: 0.7rem; margin-bottom: 0.75rem; }

  /* Drawer: slightly narrower */
  .admin-sidebar { width: 260px !important; }
  .admin-sidebar.collapsed { width: 260px !important; }

  /* Reservation grid */
  .res-grid-wrap table { min-width: 480px; }
  .res-grid-wrap td { height: 42px; min-width: 48px; }
  .res-grid-wrap thead th { font-size: 0.68rem; padding: 6px 3px; }

  /* Forms */
  .form-row { gap: 6px; }
  #atab-reservations .form-group { min-width: 100%; }
  #admin-lanes-card > div:nth-child(2) { flex-direction: column; gap: 6px; }
  #admin-lanes-card > div:nth-child(2) .form-group { min-width: 100%; flex: unset; }
  #admin-lanes-card > div:nth-child(2) .btn { width: 100%; justify-content: center; }

  /* Schedule */
  .sched-queue-item { padding: 0.6rem; }
  .sched-queue-name { font-size: 1rem; }
  .sched-queue-meta { font-size: 0.68rem; }
  .sched-queue-actions .btn { font-size: 0.72rem; }

  /* Modals: bottom sheet */
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal-box { border-radius: 14px 14px 0 0; max-height: 92vh; }
  .res-modal-bg { padding: 0; align-items: flex-end; }
  .res-modal-box { border-radius: 14px 14px 0 0; max-height: 92vh; }

  /* Equipment drawer */
  .equip-drawer-body { padding: 0.9rem; }
  .equip-drawer-header { padding: 0.8rem 0.9rem; }
  .equip-drawer-footer { padding: 0.75rem 0.9rem; }
  .equip-drawer-footer .btn { padding: 10px; font-size: 0.85rem; }

  /* Stats */
  .stat-grid { gap: 6px; }
  .stat-val { font-size: 1.4rem; }
  .stat-lbl { font-size: 0.6rem; }

  /* Top nav */
  #top-nav { height: 48px; padding: 0 0.4rem; }
  #top-nav .nav-tab { padding: 5px 8px; font-size: 0.72rem; }
  .nav-logo { width: 28px; height: 28px; }
}

/* ── COMPACT MOBILE ≤ 360px ─────────────────────────────────── */
@media (max-width: 360px) {
  .admin-sidebar { width: 240px !important; }
  .admin-sidebar.collapsed { width: 240px !important; }
  .admin-sidebar .sidebar-btn { padding: 12px 14px; font-size: 0.85rem; }
  .admin-content { padding: 0.4rem; }
  .card { padding: 0.6rem; }
  #top-nav .nav-tab { padding: 4px 6px; font-size: 0.68rem; }
  .res-grid-wrap table { min-width: 420px; }
  .sec-title { font-size: 0.9rem; }
  .btn { font-size: 0.78rem; }
}

/* ── Training Session Grid Responsive ─────────────────────────── */
@media (max-width: 640px) {
  .adm-session-grid { grid-template-columns: 1fr !important; }
}

/* ── Light Mode Overrides ─────────────────────────────────────── */
body.light-mode .admin-sidebar{background:#FFFFFF;border-right-color:#CDD3DA;}
body.light-mode .sidebar-section-title{color:#5A6370;}
body.light-mode .sidebar-btn{color:#5A6370;}
body.light-mode .sidebar-btn:hover,body.light-mode .sidebar-btn:active{background:rgba(8,112,104,0.06);color:#1A1D21;}
body.light-mode .sidebar-btn.active{color:var(--teal-light);background:rgba(8,112,104,0.08);border-left-color:var(--teal-light);}
body.light-mode .drawer-nav-item{color:#5A6370;}
body.light-mode .drawer-nav-item:hover,body.light-mode .drawer-nav-item:active{background:rgba(8,112,104,0.06);color:#1A1D21;}
body.light-mode .drawer-nav-item.active{color:var(--teal-light);background:rgba(8,112,104,0.08);border-left-color:var(--teal-light);}
body.light-mode .bell-panel{background:#FFFFFF;border-color:#CDD3DA;box-shadow:0 8px 32px rgba(0,0,0,0.15);}
body.light-mode .f-in{background:#FFFFFF;border-color:#C0C8D0;color:#1A1D21;}
body.light-mode .f-in option{background:#FFFFFF;color:#1A1D21;}
body.light-mode #admin-theme-btn{background:rgba(0,0,0,0.04);border-color:#CDD3DA;}

/* ── Light Outdoor Pro — admin overrides ─────────────────────── */
body.light-outdoor .admin-sidebar{background:#F0EDE8;border-right-color:#B5AFA6;}
body.light-outdoor .sidebar-section-title{color:#4A433B;}
body.light-outdoor .sidebar-btn{color:#4A433B;}
body.light-outdoor .sidebar-btn:hover,body.light-outdoor .sidebar-btn:active{background:rgba(5,90,83,0.07);color:#1A1412;}
body.light-outdoor .sidebar-btn.active{color:var(--teal-light);background:rgba(5,90,83,0.1);border-left-color:var(--teal-light);}
body.light-outdoor .drawer-nav-item{color:#4A433B;}
body.light-outdoor .drawer-nav-item:hover,body.light-outdoor .drawer-nav-item:active{background:rgba(5,90,83,0.07);color:#1A1412;}
body.light-outdoor .drawer-nav-item.active{color:var(--teal-light);background:rgba(5,90,83,0.1);border-left-color:var(--teal-light);}
body.light-outdoor .bell-panel{background:#FAF8F5;border-color:#B5AFA6;box-shadow:0 8px 32px rgba(0,0,0,0.2);}
body.light-outdoor .f-in{background:#FAF8F5;border:2px solid #8C857C;color:#1A1412;}
body.light-outdoor .f-in option{background:#FAF8F5;color:#1A1412;}
body.light-outdoor #admin-theme-select{background:rgba(0,0,0,0.04);border-color:#B5AFA6;}

/* ── Dark Stealth Pro — admin overrides ──────────────────────── */
body.dark-stealth .admin-sidebar{background:#161B22;border-right-color:#30434F;}
body.dark-stealth .sidebar-section-title{color:#8B949E;}
body.dark-stealth .sidebar-btn{color:#8B949E;}
body.dark-stealth .sidebar-btn:hover,body.dark-stealth .sidebar-btn:active{background:rgba(93,229,219,0.06);color:#F0F6FC;}
body.dark-stealth .sidebar-btn.active{color:#5DE5DB;background:rgba(93,229,219,0.08);border-left-color:#5DE5DB;}
body.dark-stealth .drawer-nav-item{color:#8B949E;}
body.dark-stealth .drawer-nav-item:hover,body.dark-stealth .drawer-nav-item:active{background:rgba(93,229,219,0.06);color:#F0F6FC;}
body.dark-stealth .drawer-nav-item.active{color:#5DE5DB;background:rgba(93,229,219,0.08);border-left-color:#5DE5DB;}
body.dark-stealth .bell-panel{background:#161B22;border-color:#30434F;box-shadow:0 8px 32px rgba(0,0,0,0.4);}
body.dark-stealth .f-in{background:#161B22;border-color:#30434F;color:#F0F6FC;}
body.dark-stealth .f-in option{background:#161B22;color:#F0F6FC;}