/* =========================================================
   iSTEP Teacher Dashboard — shared styles
   Plain CSS, no build step. Safe for Laravel/Blade inclusion.
   Cross-browser notes are called out inline where relevant.
   ========================================================= */

:root{
  --bg:#FAF8F5;
  --card-bg:#fff;
  --panel-bg:#F3F1EC;
  --border:#EAE5DC;
  --border-soft:#F0EDE6;
  --input-border:#E0D9CC;

  --ink:#1C1917;
  --ink-soft:#3F3A33;
  --muted:#6B6459;
  --muted-2:#9A9284;

  --purple:#6D28D9;
  --purple-dark:#4C1D95;
  --purple-soft-bg:#F1EBFB;

  --gold-bg:#FFF7DF;
  --gold-border:#F0DA96;
  --gold-text:#8A6A08;
  --gold-icon:#C9970C;
  --gold-solid:#F2B90D;

  --silver-bg:#F2F2F5;
  --silver-border:#DBDBE2;
  --silver-text:#6B6B76;
  --silver-icon:#9C9CA8;

  --green-bg:#EAF6EE;
  --green-text:#1F7A3D;
  --red-text:#B3261E;
  --red-border:#EAD5D3;

  --radius-lg:16px;
  --radius-md:14px;
  --radius-sm:10px;
  --radius-pill:999px;

  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'Instrument Sans', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--purple); text-decoration:none; }
a:hover{ color:var(--purple-dark); }
button{ font-family:inherit; }

/* ---------- layout shell ---------- */
.page{ min-height:100vh; display:flex; flex-direction:column; }
.main{ flex:1; padding:32px 32px 56px; max-width:1280px; margin:0 auto; width:100%; }
@media (max-width:720px){
  .main{ padding:20px 16px 40px; }
}

/* ---------- top nav ---------- */
.topnav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 32px; background:var(--bg);
  border-bottom:1px solid var(--border);
  position:relative; z-index:20;
}
.topnav-left{ display:flex; align-items:center; gap:32px; min-width:0; }
.topnav-left > a{ display:inline-flex; align-items:center; flex:none; }
.topnav .logo{
  display:block;
  width:108px;
  max-width:108px;
  height:auto;
  max-height:48px;
  object-fit:contain;
  flex:none;
}
.topnav-links{ display:flex; gap:26px; font-size:13.5px; font-weight:500; color:var(--muted); }
.topnav-links a{ color:inherit; padding:21px 0; display:inline-block; border-bottom:2px solid transparent; }
.topnav-links a.active{ color:var(--ink); font-weight:600; border-bottom-color:var(--purple); }
.topnav-links .haschild{ position:relative; }
.topnav-right{ display:flex; align-items:center; gap:10px; flex:none; }

.keychip{
  display:flex; align-items:center; gap:5px; padding:4px 10px 4px 8px;
  border-radius:var(--radius-pill); font-size:12px; font-weight:700;
}
.keychip.gold{ background:var(--gold-bg); border:1px solid var(--gold-border); color:var(--gold-text); }
.keychip.silver{ background:var(--silver-bg); border:1px solid var(--silver-border); color:var(--silver-text); }

.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--purple); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700;
  flex:none;
}

.topnav-logout{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:7px 13px; border:1px solid var(--red-border);
  border-radius:9px; background:#fff; color:var(--red-text);
  font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap;
}
.topnav-logout:hover{ background:#FDECEC; color:var(--red-text); }
.topnav-mobile-logout{ display:none !important; color:var(--red-text) !important; font-weight:700 !important; }

.navmenu-btn{ display:none; background:none; border:none; padding:8px; cursor:pointer; }
.navmenu-btn svg{ display:block; }

.submenu{
  position:absolute; top:58px; left:-14px; width:210px; background:#fff;
  border:1px solid var(--border); border-radius:12px; padding:6px;
  box-shadow:0 12px 28px rgba(28,25,23,.10); display:none; flex-direction:column; gap:2px;
}
.submenu.open{ display:flex; }
.submenu a{ padding:9px 12px; border-radius:8px; color:var(--ink-soft); font-size:13px; }
.submenu a:hover{ background:var(--panel-bg); }
.submenu a.active{ background:var(--purple-soft-bg); color:var(--purple); font-weight:600; }

@media (max-width:480px){
  .keychip{ display:none; }
}
@media (max-width:900px){
  .topnav{ padding:0 16px; }
  .topnav-left{ gap:18px; }
  .topnav .logo{ width:96px; max-width:96px; max-height:42px; }
  .navmenu-btn{ display:inline-flex; }
  .topnav-links{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--bg); flex-direction:column; gap:0; padding:8px 16px;
    transform:translateX(-100%); transition:transform .2s ease; overflow-y:auto;
  }
  .topnav-links.open{ transform:translateX(0); }
  .topnav-links a{ padding:14px 4px; border-bottom:1px solid var(--border-soft); width:100%; }
  .submenu{ position:static; width:auto; box-shadow:none; margin:0 0 6px 12px; }
  .topnav-right .topnav-logout{ display:none; }
  .topnav-mobile-logout{ display:inline-block !important; }
}

/* ---------- footer ---------- */
.footer{
  padding:20px 32px; border-top:1px solid var(--border);
  font-size:13px; color:var(--muted);
}

/* ---------- typography helpers ---------- */
.h1{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); }
.muted{ color:var(--muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:13.5px; font-weight:600;
  padding:10px 18px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; text-decoration:none; background:none; line-height:1.2;
  -webkit-appearance:none; appearance:none;
}
.btn-primary{ background:var(--purple); color:#fff; }
.btn-primary:hover{ background:#5b21b6; color:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; color:#fff; }
.btn-outline{ background:#fff; border-color:var(--input-border); color:var(--ink); }
.btn-outline:hover{ background:var(--panel-bg); }
.btn-danger-outline{ background:#fff; border-color:var(--red-border); color:var(--red-text); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:12.5px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- cards / panels ---------- */
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); }
.panel{ background:var(--panel-bg); border-radius:var(--radius-lg); padding:28px; }
@media (max-width:600px){ .panel{ padding:18px; } }

/* ---------- form fields ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.field .hint{ font-size:11.5px; color:var(--muted-2); margin-top:5px; }
.field .error{ font-size:11.5px; color:var(--red-text); margin-top:5px; display:none; }
.field.has-error .error{ display:block; }
.field.has-error input,
.field.has-error select{ border-color:var(--red-text); }

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=time], select, textarea{
  width:100%; padding:11px 14px; border:1px solid var(--input-border); border-radius:9px;
  background:#fff; font-family:var(--font-body); font-size:13.5px; color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%239A9284' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--purple); outline-offset:1px; }
input[readonly]{ background:var(--panel-bg); color:var(--muted); }

.radio-row{ display:flex; gap:22px; font-size:13.5px; color:var(--ink-soft); }
.radio-opt{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.radio-opt input[type=radio]{ width:17px; height:17px; accent-color:var(--purple); margin:0; }

.checkbox-row{ display:flex; align-items:center; gap:10px; }
.checkbox-row input[type=checkbox]{ width:18px; height:18px; accent-color:var(--purple); }

/* ---------- chips / badges ---------- */
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700; }
.chip-purple{ background:var(--purple-soft-bg); color:var(--purple); }
.chip-gold{ background:var(--gold-bg); border:1px solid var(--gold-border); color:var(--gold-text); }
.chip-silver{ background:var(--silver-bg); border:1px solid var(--silver-border); color:var(--silver-text); }
.chip-green{ background:var(--green-bg); color:var(--green-text); }
.chip-neutral{ background:var(--panel-bg); color:var(--muted); }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:28px; border-bottom:1px solid var(--border); font-size:14px; margin-bottom:22px; overflow-x:auto; }
.tabs a, .tabs button{
  background:none; border:none; cursor:pointer; padding:0 2px 13px; margin-bottom:-1px;
  color:var(--muted); font-weight:500; font-family:var(--font-body); font-size:14px;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.tabs a.active, .tabs button.active{ color:var(--ink); font-weight:700; border-bottom-color:var(--purple); }
.tabs .count{ padding:1px 8px; border-radius:var(--radius-pill); background:var(--panel-bg); color:var(--muted); font-size:11.5px; font-weight:700; margin-left:6px; }
.tabs a.active .count, .tabs button.active .count{ background:var(--purple-soft-bg); color:var(--purple); }

.tabpanel{ display:none; }
.tabpanel.active{ display:block; }

/* ---------- grids ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid-4{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

/* ---------- pagination ---------- */
.pagination{ display:flex; gap:6px; align-items:center; }
.pagination button, .pagination .pg{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--input-border);
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; color:var(--muted-2); cursor:pointer;
}
.pagination .pg.active{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(28,25,23,.45);
  display:none; align-items:center; justify-content:center; padding:24px; z-index:100;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:#fff; border-radius:18px; width:100%; max-width:480px; max-height:90vh;
  overflow-y:auto; padding:28px; position:relative;
}
.modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; color:var(--muted);
}

/* ---------- row list (label/value) ---------- */
.kvrow{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.kvrow:last-child{ border-bottom:none; }
.kvrow .k{ color:var(--muted); }
.kvrow .v{ color:var(--ink); font-weight:700; }

/* ---------- utility ---------- */
.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-20{ gap:20px; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* placeholder art (stand-ins for real photos/covers) */
.placeholder-art{
  background-image:repeating-linear-gradient(45deg,#EDE9E1,#EDE9E1 7px,#F6F3ED 7px,#F6F3ED 14px);
  display:flex; align-items:center; justify-content:center;
  font:10px ui-monospace, Menlo, monospace; color:#8F887B;
}