/* =====================================================================
   ZAVALA ACADEMICS — shared design tokens & base styles
   Used by every page (public site, tutor portal, booking, admin)
   ===================================================================== */

:root{
  --bg:#F5EFE1;
  --surface:#FFFFFF;
  --surface-soft:#EDE4D0;
  --ink:#211D17;
  --ink-soft:#6B6255;
  --line:#DDD2BA;
  --accent:#3B6EA5;
  --accent-ink:#274D78;
  --accent-soft:#E3ECF5;
  --rust:#D9573F;
  --rust-soft:#FAE1DA;
  --gold:#C1852B;
  --gold-soft:#F5E6C8;
  --shadow: 0 1px 2px rgba(33,29,23,0.06), 0 6px 20px rgba(33,29,23,0.06);
  --radius: 10px;
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1B1811; --surface:#242019; --surface-soft:#2A251C;
    --ink:#F1EBDA; --ink-soft:#B6AC96; --line:#3A342A;
    --accent:#6FA0D6; --accent-ink:#BFD9F2; --accent-soft:#26364A;
    --rust:#F0876B; --rust-soft:#3A241D; --gold:#E0B15C; --gold-soft:#332818;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.6;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0 0 8px;}
p{margin:0 0 12px;}
a{color:var(--accent-ink);}
.container{max-width:1040px; margin:0 auto; padding-inline:20px;}
.container-narrow{max-width:640px; margin:0 auto; padding-inline:20px;}

/* ---- Top nav ---- */
.topnav{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky; top:0; z-index:10;
}
.topnav .row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px; gap:16px; flex-wrap:wrap;
}
.brand{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--ink); text-decoration:none;}
.brand span{color:var(--accent);}
.brand-mark{width:28px; height:28px; flex:none; border-radius:7px;}
.navlinks{display:flex; gap:20px; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
.navlinks a{color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:500;}
.navlinks a:hover{color:var(--accent-ink);}

/* Groups .navlinks + an optional CTA button so both collapse together on
   mobile. On wide screens this is just an invisible wrapper — same layout
   as before it existed. */
.nav-panel{display:flex; align-items:center; gap:16px;}

/* Hidden until the mobile breakpoint below turns it on. */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:38px; height:38px; flex:none;
  border-radius:8px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); cursor:pointer;
}
.nav-toggle svg{width:19px; height:19px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.is-open .icon-menu{display:none;}
.nav-toggle.is-open .icon-close{display:block;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 20px; border-radius:9px; border:1px solid transparent;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(0.97); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 2px 4px rgba(37,69,58,0.18), 0 6px 16px rgba(37,69,58,0.14);}
.btn-primary:hover{box-shadow:0 3px 6px rgba(37,69,58,0.22), 0 10px 22px rgba(37,69,58,0.18);}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--line);}
.btn-danger{background:var(--rust); color:#fff;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-block{width:100%;}

/* ---- Cards / surfaces ---- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
.card-hover{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.card-hover:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(30,36,32,0.08), 0 16px 32px rgba(30,36,32,0.10);
  border-color:var(--accent);
}

/* ---- Forms ---- */
label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-family:var(--font-body); font-size:14px;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.field{margin-bottom:16px;}
.field-row{display:flex; gap:12px; flex-wrap:wrap;}
.field-row > .field{flex:1; min-width:160px;}
.checkbox-row{display:flex; align-items:center; gap:8px;}
.checkbox-row input{width:auto;}

/* ---- Password show/hide toggle (assets/js/password-toggle.js) ---- */
.password-field{position:relative;}
.password-toggle-btn{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; margin:0; color:var(--ink-soft); cursor:pointer; border-radius:6px;
}
.password-toggle-btn:hover{color:var(--ink); background:var(--surface-soft);}
.password-toggle-btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

/* ---- Badges / pills ---- */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--accent-soft); color:var(--accent-ink);
}
.pill.gold{background:var(--gold-soft); color:var(--gold);}
.pill.rust{background:var(--rust-soft); color:var(--rust);}
.pill.muted{background:var(--surface-soft); color:var(--ink-soft);}

/* ---- Tables ---- */
table{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
thead th{background:var(--surface-soft); font-weight:600; color:var(--ink-soft); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;}
tbody tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}

/* ---- Utility ---- */
.stack{display:flex; flex-direction:column; gap:14px;}
.hstack{display:flex; align-items:center; gap:10px;}
.muted{color:var(--ink-soft); font-size:13.5px;}
.center{text-align:center;}
.error-text{color:var(--rust); font-size:13px; margin-top:6px;}
.success-text{color:var(--accent-ink); font-size:13px; margin-top:6px;}
[hidden]{display:none !important;}

@media (max-width:600px){
  .field-row{flex-direction:column;}

  /* Collapse .nav-panel (navlinks + CTA) behind the hamburger button
     instead of letting a 6-link row wrap onto extra lines. */
  .nav-toggle{display:inline-flex;}
  .nav-panel{
    display:none;
    flex-direction:column; align-items:stretch;
    width:100%; order:10; gap:4px; padding-top:12px;
  }
  .nav-panel.open{display:flex;}
  .nav-panel .navlinks{flex-direction:column; gap:2px; width:100%;}
  .nav-panel .navlinks a{display:block; padding:10px 8px; border-radius:8px;}
  .nav-panel .navlinks a:hover{background:var(--surface-soft);}
  .nav-panel > .btn{width:100%; margin-top:4px;}
}