/* Shared styles for the Admin, Teacher and Parent pages (the student page keeps its own inline CSS).
   Same garden palette + fonts as the student app so everything feels like one product. */
:root{
  --bg:#f7f5ef;--bg2:#fff;--bg3:#f0ece2;--bg4:#fafaf7;
  --text:#1a1a18;--text2:#4a4a40;--text3:#7a7a6e;
  --accent:#4a7c59;--acl:#d4e8da;--acd:#2e5438;
  --border:#ddd8c4;--border2:#c8c0a8;
  --sh:0 2px 12px rgba(74,124,89,.08);--shl:0 8px 32px rgba(74,124,89,.13);
  --red-bg:#fee2e2;--red:#991b1b;--red-b:#e8a0a0;
  --amber-bg:#fff4d6;--amber:#8a5a00;--amber-b:#e8c878;
  --blue-bg:#e3eefc;--blue:#1d4ed8;
  --ok-bg:#e1f2e6;--ok:#1f6b3a;
  --radius:14px;
  --c1:#4a7c59;--c2:#2563eb;--c3:#c27c0e;--c4:#7c3aed;--c5:#c0392b;
}
[data-theme="dark"]{
  --bg:#111210;--bg2:#1a1c18;--bg3:#161a14;--bg4:#161a14;
  --text:#e8e6de;--text2:#b0ad9e;--text3:#8a887c;
  --accent:#6aae7e;--acl:#1e3828;--acd:#8ecba0;
  --border:#2e3228;--border2:#3e4438;
  --sh:0 2px 12px rgba(0,0,0,.3);--shl:0 8px 32px rgba(0,0,0,.4);
  --red-bg:#3d1212;--red:#fca5a5;--red-b:#7a2a2a;
  --amber-bg:#33290f;--amber:#f0c060;--amber-b:#5a4e28;
  --blue-bg:#16243f;--blue:#93b4fb;
  --ok-bg:#16301f;--ok:#8ecba0;
  --c1:#6aae7e;--c2:#6b9bff;--c3:#e0a53c;--c4:#a98bf5;--c5:#e8806f;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:hidden;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .3s,color .3s;overflow-x:hidden;line-height:1.5;}
[hidden]{display:none!important;}
button{font-family:inherit;}

/* header */
.app-header{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 1.5rem;position:sticky;top:0;z-index:200;box-shadow:var(--sh);}
.hdr{max-width:1280px;margin:0 auto;display:flex;align-items:center;height:62px;gap:1rem;}
.logo{display:flex;align-items:center;gap:.65rem;flex:1;min-width:0;}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,#4a7c59,#6aae7e);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.logo h1{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--accent);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.logo p{font-size:.65rem;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hdr-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0;}
.pill{padding:.3rem .8rem;border-radius:20px;font-size:.75rem;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .2s;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;text-decoration:none;}
.pill:hover{border-color:var(--accent);color:var(--accent);}
.pill-exit{border-color:var(--red-b);color:var(--red);background:var(--red-bg);}
.expiry-badge{font-size:.72rem;font-weight:600;color:var(--text3);white-space:nowrap;padding:.22rem .6rem;border-radius:12px;background:var(--bg3);}
.expiry-badge.warn{color:var(--red);background:var(--red-bg);}
.who{display:flex;align-items:center;gap:.45rem;cursor:pointer;padding:.15rem .5rem .15rem .15rem;border-radius:24px;border:1.5px solid var(--border);background:var(--bg3);font-size:.78rem;font-weight:700;color:var(--text2);}
.who:hover{border-color:var(--accent);}
.who .nm{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* avatar */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;font-weight:800;color:#fff;line-height:1;user-select:none;}
.avatar.sm{width:28px;height:28px;font-size:15px;}
.avatar.md{width:38px;height:38px;font-size:21px;}
.avatar.lg{width:56px;height:56px;font-size:31px;}
.avatar.xl{width:76px;height:76px;font-size:42px;}
.avatar.letter{font-size:.95em;font-family:'Playfair Display',serif;}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin:.6rem 0 1rem;}
.avatar-opt{border:2.5px solid transparent;border-radius:50%;padding:2px;background:none;cursor:pointer;display:flex;justify-content:center;}
.avatar-opt:hover{border-color:var(--border2);}
.avatar-opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--acl);}

/* layout */
main.page{max-width:1280px;margin:0 auto;padding:1.4rem 1.5rem 3rem;}
.page-title{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--accent);margin-bottom:.2rem;}
.page-sub{font-size:.86rem;color:var(--text2);margin-bottom:1.2rem;}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--sh);}
.card h3{font-family:'Playfair Display',serif;font-size:1rem;margin-bottom:.15rem;}
.card .sub{font-size:.74rem;color:var(--text3);margin-bottom:.7rem;}
.grid{display:grid;gap:1rem;}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}
.row.sp{justify-content:space-between;}
.stack>*+*{margin-top:1rem;}
.muted{color:var(--text3);font-size:.78rem;}
.hint{font-size:.74rem;color:var(--text3);line-height:1.5;margin-top:.3rem;}
.empty{text-align:center;padding:1.6rem 1rem;color:var(--text3);font-size:.86rem;}
.empty .big{font-size:1.8rem;display:block;margin-bottom:.3rem;}

/* tabs */
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--border);margin-bottom:1.1rem;overflow-x:auto;}
.tab{padding:.6rem 1rem;border:none;background:none;font-weight:700;font-size:.86rem;color:var(--text3);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;}
.tab:hover{color:var(--accent);}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);}
.tab .count{font-size:.68rem;background:var(--bg3);border-radius:10px;padding:.05rem .45rem;margin-left:.3rem;}

/* forms + buttons */
label.lbl,.lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);display:block;margin-bottom:.3rem;}
.input,.select,.textarea{width:100%;padding:.55rem .7rem;border-radius:9px;border:1.5px solid var(--border);background:var(--bg4);color:var(--text);font-family:inherit;font-size:.88rem;outline:none;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,124,89,.14);}
.textarea{min-height:80px;resize:vertical;line-height:1.5;}
.select{width:auto;min-width:0;}
.field{margin-bottom:.9rem;}
.btn{padding:.5rem 1rem;border-radius:9px;border:1.5px solid var(--border);background:var(--bg3);color:var(--text2);font-weight:700;font-size:.82rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;transition:all .15s;}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{filter:brightness(1.1);color:#fff;}
.btn.danger{border-color:var(--red-b);color:var(--red);}
.btn.danger:hover{background:var(--red-bg);}
.btn.sm{padding:.28rem .6rem;font-size:.72rem;border-radius:8px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.err{color:var(--red);font-size:.8rem;margin-top:.4rem;}
.ok-msg{color:var(--ok);font-size:.8rem;margin-top:.4rem;}
.check{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--text2);padding:.25rem 0;cursor:pointer;}
.check input{accent-color:var(--accent);width:16px;height:16px;}
.seg{display:inline-flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg3);}
.seg button{border:none;background:none;padding:.4rem .8rem;font-weight:700;font-size:.78rem;color:var(--text3);cursor:pointer;}
.seg button.on{background:var(--accent);color:#fff;}

/* chips, badges, status */
.chip{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .55rem;border-radius:20px;font-size:.7rem;font-weight:700;background:var(--bg3);color:var(--text2);border:1px solid var(--border);white-space:nowrap;}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent;}
.chip.warn{background:var(--amber-bg);color:var(--amber);border-color:transparent;}
.chip.bad{background:var(--red-bg);color:var(--red);border-color:transparent;}
.chip.info{background:var(--blue-bg);color:var(--blue);border-color:transparent;}
.chip.x{cursor:pointer;}

/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg2);}
table.tbl{width:100%;border-collapse:collapse;font-size:.82rem;}
.tbl th{text-align:left;background:var(--acl);color:var(--acd);padding:.5rem .7rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;cursor:default;}
[data-theme="dark"] .tbl th{color:var(--accent);}
.tbl th.sortable{cursor:pointer;}
.tbl td{padding:.55rem .7rem;border-top:1px solid var(--border);vertical-align:middle;}
.tbl tr.click{cursor:pointer;}
.tbl tr.click:hover td{background:var(--bg3);}
.person{display:flex;align-items:center;gap:.55rem;min-width:0;}
.person .nm{font-weight:700;}
.person .un{font-size:.7rem;color:var(--text3);}

/* kpi */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:var(--sh);}
.kpi .v{font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:700;color:var(--accent);line-height:1.15;}
.kpi .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:700;margin-top:.15rem;}
.kpi .d{font-size:.72rem;color:var(--text3);margin-top:.2rem;}

/* progress bar */
.bar{height:8px;background:var(--bg3);border-radius:6px;overflow:hidden;min-width:70px;}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:6px;}
.bar.warn>i{background:var(--c3);} .bar.bad>i{background:var(--c5);}

/* modal */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;align-items:center;justify-content:center;padding:1rem;}
.overlay.show{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;max-width:460px;width:100%;box-shadow:var(--shl);max-height:90vh;overflow-y:auto;}
.modal.wide{max-width:720px;}
.modal h3{font-family:'Playfair Display',serif;font-size:1.1rem;margin-bottom:.5rem;}
.modal p{font-size:.86rem;color:var(--text2);margin-bottom:1rem;line-height:1.6;}
.modal .btns{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;margin-top:1rem;}

/* drawer (student detail) */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);background:var(--bg);border-left:1px solid var(--border);box-shadow:var(--shl);z-index:400;overflow-y:auto;padding:1.2rem 1.3rem 3rem;transform:translateX(102%);transition:transform .25s;}
.drawer.show{transform:none;}

/* login */
.login-wrap{max-width:420px;margin:4rem auto;padding:0 1.2rem;}

/* banner + toast */
.banner{background:var(--amber-bg);border-bottom:1px solid var(--amber-b);color:var(--amber);font-size:.82rem;font-weight:600;padding:.5rem 1.5rem;display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;}
.banner button{border:none;background:none;color:inherit;cursor:pointer;font-weight:800;font-size:1rem;}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:.6rem 1.1rem;border-radius:10px;font-size:.84rem;font-weight:600;z-index:600;box-shadow:var(--shl);max-width:92vw;}

/* charts */
.chart{width:100%;height:auto;display:block;}
.chart text{font-family:'Nunito',sans-serif;fill:var(--text3);font-size:10px;}
.chart .grid-l{stroke:var(--border);stroke-width:1;}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.72rem;color:var(--text2);margin-top:.4rem;}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem;vertical-align:-1px;}
.dom-row{display:grid;grid-template-columns:130px 1fr 36px;gap:.6rem;align-items:center;font-size:.78rem;margin:.35rem 0;}
.dom-row .bar{height:10px;}

.spinner{display:inline-flex;gap:4px;}
.spinner span{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:bounce 1.2s infinite;}
.spinner span:nth-child(2){animation-delay:.2s;}.spinner span:nth-child(3){animation-delay:.4s;}
@keyframes bounce{0%,80%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}}

@media(max-width:900px){.g-main,.g3{grid-template-columns:1fr;}.g2{grid-template-columns:1fr;}}
@media(max-width:600px){
  .app-header{padding:0 .8rem;}.hdr{gap:.4rem;}
  main.page{padding:1rem .9rem 3rem;}
  .logo p,.expiry-badge,.who .nm,.pill .lbl{display:none;}
  .pill{width:34px;height:34px;padding:0;justify-content:center;border-radius:50%;}
  .avatar-grid{grid-template-columns:repeat(4,1fr);}
  .dom-row{grid-template-columns:100px 1fr 32px;}
}