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


/* ── 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-item{ padding:10px 14px;border-bottom:1px solid var(--border);cursor:default; }
.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; }

.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 */

.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 collapses to sticky horizontal strip */
@media (max-width: 640px) {
  .admin-layout { flex-direction: column; }

  .admin-sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 56px;         /* mobile nav height */
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    gap: 6px;
    z-index: 100;
    scrollbar-width: none;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }

  .admin-sidebar .vt-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .admin-content {
    padding: 1rem;
  }
}


.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;
}
.admin-sidebar.collapsed{width:56px;}
.sidebar-toggle{
  display:flex;align-items:center;justify-content:flex-end;
  padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.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);}
.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;
}
#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 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;}
}