/* =====================================================================
   TPSC NOTES - STUDENT UI (shared design for all student pages)
   Matches the student dashboard. Loaded once from student_header.php.
   Pages use the "su-" classes; page-specific bits live in the page.
   ===================================================================== */

:root{
    --su-leaf:#8BC34A;
    --su-leaf-dark:#689F38;
    --su-forest:#2F5D1E;
    --su-forest-deep:#24491A;
    --su-paper:#F5F9EF;
    --su-ink:#17200F;
    --su-muted:#5F6B5A;
    --su-line:#E2E9DA;
    --su-soft:#F1F8E9;
    --su-good:#7CB342;
    --su-mid:#E0A100;
    --su-low:#D64545;
    --su-head:"Hind Siliguri",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --su-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

body.su-page{
    margin:0;
    background:var(--su-paper) !important;
    color:var(--su-ink);
    font-family:var(--su-body);
}
.su, .su *, .su *::before, .su *::after{ box-sizing:border-box; }

/* style.css caps every <main> at 1170px without centring; student pages handle their own width */
main.su{ width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; }

.su h1, .su h2, .su h3{ font-family:var(--su-head); color:var(--su-ink); }
.su a{ text-decoration:none; }
.su a:focus-visible, .su button:focus-visible{ outline:3px solid rgba(139,195,74,.55); outline-offset:3px; border-radius:10px; }

.su-wrap{ width:min(1180px, calc(100% - 32px)); margin:0 auto; }

/* ---------- Green page band ---------- */
.su-band{
    background:
        radial-gradient(circle at 88% 20%, rgba(139,195,74,.28) 0, rgba(139,195,74,0) 42%),
        linear-gradient(135deg, var(--su-forest) 0%, var(--su-forest-deep) 100%);
    color:#fff;
}
.su-band-inner{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    padding:30px 0 40px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:28px;
    align-items:center;
}
.su-band.lift .su-band-inner{ padding-bottom:86px; }
.su-crumb{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;
    color:#CFE3BF !important;
    font-size:14px;
    font-weight:600;
}
.su-crumb:hover{ color:#fff !important; }
.su-band h1{
    margin:0 0 6px;
    color:#fff;
    font-size:34px;
    line-height:1.15;
    font-weight:700;
    letter-spacing:-.3px;
}
.su-band-sub{ margin:0; max-width:62ch; color:#CFE3BF; font-size:15.5px; line-height:1.55; }
.su-band-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.su-band-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:13px;
    font-weight:600;
}
.su-band-side{ display:flex; align-items:center; gap:14px; }

/* body that overlaps the band */
.su-body{ width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:28px 0 56px; }
.su-band.lift + .su-body{ margin-top:-58px; padding-top:0; position:relative; }

/* ---------- Sections ---------- */
.su-section{ margin-bottom:34px; }
.su-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.su-section-head h2{ margin:0; font-size:21px; font-weight:700; }
.su-section-head p{ margin:4px 0 0; color:var(--su-muted); font-size:14px; }
.su-section-head a{ color:var(--su-leaf-dark); font-size:14px; font-weight:700; }
.su-count{ color:var(--su-muted); font-size:13.5px; font-weight:600; white-space:nowrap; }

/* ---------- Cards ---------- */
.su-card{
    border:1px solid var(--su-line);
    border-radius:18px;
    background:#fff;
}
.su-card.pad{ padding:20px 22px; }
.su-card.raised{ box-shadow:0 12px 30px rgba(23,32,15,.07); }

/* ---------- Stat tiles ---------- */
.su-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.su-stat{
    display:grid;
    gap:2px;
    padding:18px 20px;
    border:1px solid var(--su-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 12px 30px rgba(23,32,15,.07);
}
.su-stat-icon{
    width:38px; height:38px; margin-bottom:8px;
    display:grid; place-items:center;
    border-radius:11px; background:var(--su-soft); color:var(--su-leaf-dark);
}
.su-stat strong{ font-family:var(--su-head); font-size:30px; line-height:1.1; font-weight:700; }
.su-stat > span:last-child{ color:var(--su-muted); font-size:13.5px; }

/* ---------- Buttons ---------- */
.su-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 20px;
    border:0;
    border-radius:12px;
    font:inherit;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    transition:background .18s ease, transform .18s ease, border-color .18s ease;
    white-space:nowrap;
}
.su-btn-primary{ background:var(--su-forest); color:#fff !important; box-shadow:0 8px 18px rgba(47,93,30,.18); }
.su-btn-primary:hover{ background:var(--su-forest-deep); transform:translateY(-1px); }
.su-btn-leaf{ background:var(--su-leaf); color:#13240B !important; }
.su-btn-leaf:hover{ background:#9CCC65; }
.su-btn-soft{ background:var(--su-soft); color:var(--su-forest) !important; }
.su-btn-soft:hover{ background:#E3F0D3; }
.su-btn-ghost{ background:#fff; border:1.5px solid #CFE0BC; color:var(--su-forest) !important; }
.su-btn-ghost:hover{ border-color:var(--su-leaf); }
.su-btn-lock{ background:#FFF6E5; color:#8A5A00 !important; border:1px solid #F4D9A6; }
.su-btn-lock:hover{ background:#FFEFCF; }
.su-btn.disabled, .su-btn[disabled]{ background:#F2F4F1; color:#98A193 !important; box-shadow:none; cursor:default; transform:none; }
.su-btn.block{ width:100%; }
.su-btn.sm{ min-height:38px; padding:0 14px; font-size:13.5px; border-radius:10px; }

/* ---------- Chips / pills ---------- */
.su-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.su-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    border-radius:999px;
    background:#F3F6F0;
    color:#44513E;
    font-size:12.5px;
    font-weight:600;
    white-space:nowrap;
}
.su-chip.free{ background:#EAF5DC; color:#3F7020; }
.su-chip.premium{ background:#FFF4E0; color:#8A5A00; }
.su-chip.done{ background:#EAF2FF; color:#285A9E; }
.su-chip.warn{ background:#FFF1F1; color:#B42318; }

/* ---------- Score bars ---------- */
.su-track{ height:9px; border-radius:999px; background:#EEF2EA; overflow:hidden; }
.su-fill{ height:100%; border-radius:999px; background:var(--su-good); }
.su-fill.mid{ background:var(--su-mid); }
.su-fill.low{ background:var(--su-low); }
.su-pct.good{ color:#4F8A1F; }
.su-pct.mid{ color:#9A6B00; }
.su-pct.low{ color:#B42318; }

/* ---------- Notices ---------- */
.su-note{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid #CFE5B4;
    background:#F1F8E9;
    color:#2F5D1E;
    font-size:14.5px;
}
.su-note strong{ display:block; font-size:15px; }
.su-note.warn{ border-color:#F4D9A6; background:#FFF8EB; color:#7A5000; }
.su-note.bad{ border-color:#FECDCA; background:#FFF1F1; color:#9B2C2C; }

/* ---------- Empty state ---------- */
.su-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:34px 20px;
    border:1px dashed #D3DDC8;
    border-radius:16px;
    background:#fff;
    text-align:center;
    color:var(--su-muted);
    font-size:14.5px;
}
.su-empty strong{ color:var(--su-ink); font-size:16px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
    .su-band-inner{ grid-template-columns:1fr; gap:18px; }
    .su-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
    .su-band-inner{ padding:22px 0 30px; }
    .su-band.lift .su-band-inner{ padding-bottom:80px; }
    .su-band h1{ font-size:27px; }
    .su-band-sub{ font-size:14.5px; }
    .su-body{ padding-top:22px; }
    .su-band.lift + .su-body{ margin-top:-60px; }
    .su-stats{ gap:10px; }
    .su-stat{ padding:14px; border-radius:14px; }
    .su-stat-icon{ width:32px; height:32px; margin-bottom:6px; }
    .su-stat strong{ font-size:24px; }
    .su-section-head h2{ font-size:19px; }
    .su-card.pad{ padding:16px; }
}
@media (prefers-reduced-motion: reduce){
    .su-btn{ transition:none; }
}