/* Admin panel — reuses design tokens (--ink, --steel, --wine, --amber, etc.)
   already defined in ../styles.css. This file only adds panel-specific layout. */

.admin-body{ background:var(--paper-dim); }

.admin-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.admin-sidebar{
  width:240px;
  flex-shrink:0;
  background:var(--ink);
  color:#B9C4D4;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.admin-logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:22px 20px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.admin-logo img{ width:36px; height:36px; object-fit:contain; }
.admin-logo span{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  color:var(--white);
  line-height:1.3;
}
.admin-logo small{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:0.62rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#93A3B6;
}
.admin-nav{
  display:flex;
  flex-direction:column;
  padding:16px 12px;
  gap:2px;
  flex-grow:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  /* The nav actually scrolled fine before this — the real problem was that
     the scrollbar was invisible against the dark sidebar (default overlay
     scrollbars only flash briefly while scrolling), so there was no visible
     way to tell the menu could scroll, or to grab a thumb and drag it.
     Giving it a permanent, visible thumb fixes that. */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.35) transparent;
}
.admin-nav::-webkit-scrollbar{ width:6px; }
.admin-nav::-webkit-scrollbar-track{ background:transparent; }
.admin-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.35); border-radius:3px; }
.admin-nav::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.55); }
.admin-nav a{
  padding:11px 14px;
  border-radius:8px;
  font-size:0.9rem;
  font-weight:500;
  color:#B9C4D4;
  transition:background 0.15s ease, color 0.15s ease;
}
.admin-nav a:hover{ background:rgba(255,255,255,0.06); color:var(--white); }
.admin-nav a.is-active{ background:var(--amber); color:var(--ink); font-weight:600; }

.admin-sidebar-footer{
  padding:16px 20px 22px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:0.8rem;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-logout-link{ color:var(--amber); font-weight:600; font-size:0.82rem; }
.admin-logout-link:hover{ text-decoration:underline; }

/* ---------- Main content ---------- */
.admin-main{ flex-grow:1; padding:36px 40px; max-width:1200px; }
.admin-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.admin-header h1{ font-family:var(--font-display); font-size:1.6rem; color:var(--ink); }
.admin-header p{ color:var(--slate); font-size:0.92rem; margin-top:4px; }

/* ---------- Stat tiles ---------- */
.admin-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:32px; }
.admin-stat-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px 22px;
}
.admin-stat-card strong{ display:block; font-family:var(--font-mono); font-size:1.7rem; color:var(--ink); }
.admin-stat-card span{ font-size:0.82rem; color:var(--slate); }

/* ---------- Cards / panels ---------- */
.admin-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px;
  margin-bottom:24px;
  /* A wide table (many columns, un-wrappable values like phone numbers or
     enrollment codes) inside a card only scrolls sideways within the card
     itself — without this, the whole page scrolls horizontally instead,
     dragging the sidebar and header off-screen with it on a phone. Only
     ever kicks in when content actually overflows, so cards with normal
     content are unaffected. */
  overflow-x:auto;
}
.admin-card h2{ font-family:var(--font-display); font-size:1.1rem; margin-bottom:16px; color:var(--ink); }

/* ---------- Tables ---------- */
.admin-table{ width:100%; border-collapse:collapse; font-size:0.88rem; }
.admin-table th{
  text-align:left;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--slate);
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.admin-table td{ padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr:hover td{ background:var(--paper-dim); }
.admin-table a.row-link{ color:var(--steel); font-weight:600; }

/* ---------- Status badges ---------- */
.status-badge{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:100px;
}
.status-New{ background:#FCEFD6; color:var(--amber-dark); }
.status-Contacted{ background:var(--steel-soft); color:var(--steel); }
.status-Enrolled{ background:var(--wine-soft); color:var(--wine); }
.status-Rejected{ background:#EEE; color:var(--slate); }

/* ---------- Filters ---------- */
.admin-filters{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; align-items:flex-end; }
.admin-filters .form-field{ min-width:160px; }

/* ---------- Login page ---------- */
.admin-login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  padding:24px;
}
.admin-login-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:40px;
  width:100%;
  max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.admin-login-card .admin-logo-center{ display:flex; flex-direction:column; align-items:center; margin-bottom:24px; }
.admin-login-card .admin-logo-center img{ width:56px; height:56px; margin-bottom:10px; }
.admin-login-card h1{ font-family:var(--font-display); font-size:1.3rem; text-align:center; color:var(--ink); }
.admin-login-card p.sub{ text-align:center; color:var(--slate); font-size:0.85rem; margin-top:4px; margin-bottom:24px; }
.admin-alert{
  padding:12px 14px;
  border-radius:8px;
  font-size:0.86rem;
  margin-bottom:18px;
}
.admin-alert-error{ background:var(--wine-soft); color:var(--wine); }
.admin-alert-success{ background:var(--steel-soft); color:var(--steel); }

/* ---------- Detail page ---------- */
.enquiry-detail-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.detail-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:0.9rem; }
.detail-row:last-child{ border-bottom:none; }
.detail-row span:first-child{ color:var(--slate); }
.detail-row span:last-child{ color:var(--ink); font-weight:500; text-align:right; }

.balance-highlight{ display:flex; gap:24px; margin-bottom:20px; }
.balance-box{ flex:1; background:var(--paper-dim); border-radius:var(--radius-sm); padding:16px 18px; }
.balance-box strong{ display:block; font-family:var(--font-mono); font-size:1.3rem; color:var(--ink); }
.balance-box span{ font-size:0.78rem; color:var(--slate); }
.balance-box.due strong{ color:var(--wine); }
.balance-box.paid strong{ color:var(--steel); }

@media(max-width:960px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; flex-wrap:wrap; align-items:center; }
  /* Without flex-wrap here, every nav link is forced onto one line and
     anything past the first few links (Batches, Attendance, Study
     Materials, Messages, Collect Fee, ...) is pushed off-screen with no
     way to reach it on a phone — wrapping is what actually makes the
     rest of the admin panel navigable on mobile. */
  .admin-nav{ flex-direction:row; flex-wrap:wrap; overflow:visible; min-height:0; }
  .admin-sidebar-footer{ margin-left:auto; border-top:none; flex-direction:row; align-items:center; gap:14px; }
  .admin-main{ padding:24px 18px; }
  .admin-stats{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .enquiry-detail-grid{ grid-template-columns:minmax(0,1fr); }
  .balance-highlight{ flex-direction:column; }
}