/* ==========================================================================
   UI v2: the design layer. Loaded after app.css; the institute's own colours
   (branding/theme.css) load after this file and still win.
   Design notes
   - Calm, light surfaces; the institute colour carries the chrome (sidebar, primary action).
   - One memorable motif: a faint eight-point star in the sidebar brand block, the sign-in panel and the profile header.
   - Compact, not cramped: 38px controls, 12px card radius, 16-20px card padding, a clear type scale.
   ========================================================================== */
:root{
  --bg:#f1f5f3;--surface:#fff;--surface-2:#f7faf9;--ink:#13201d;--muted:#5b6e69;--line:#dde6e2;--line-2:#cbd8d3;
  --brand:#0f5c4d;--brand-ink:#fff;--accent:#c9a24b;--danger:#d4351c;--ok:#14894f;--warn:#d98200;--info:#1a6fb5;
  --r-sm:8px;--r:12px;--r-lg:18px;--r:12px;
  --sh-1:0 1px 2px rgba(16,32,29,.06);
  --shadow:0 1px 2px rgba(16,32,29,.05),0 6px 18px rgba(16,32,29,.05);
  --sh-3:0 14px 44px rgba(16,32,29,.18);
  --side:252px;
  --tint:color-mix(in srgb,var(--brand) 8%,var(--surface));
  --tint-2:color-mix(in srgb,var(--brand) 14%,var(--surface));
  --ring:color-mix(in srgb,var(--brand) 38%,transparent);
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M28 3l6 14.5L49 23l-15 6-6 15-6-15-15-6 15-5.5z'/%3E%3Crect x='13' y='13' width='30' height='30' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0c1513;--surface:#142320;--surface-2:#182a26;--ink:#e8f1ee;--muted:#9bb1ab;--line:#26403a;--line-2:#31504a;--brand:#1fa58a;--sh-1:none;--shadow:0 1px 2px rgba(0,0,0,.35);--sh-3:0 14px 44px rgba(0,0,0,.5)}
  .alert-error{background:rgba(212,53,28,.14);color:#ffb4a6;border-color:rgba(212,53,28,.4)}
  .alert-warn{background:rgba(217,130,0,.14);color:#ffd28a;border-color:rgba(217,130,0,.4)}
}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Noto Sans","Noto Naskh Arabic",Arial,sans-serif;line-height:1.5;letter-spacing:.005em;font-feature-settings:"tnum" 1}
::selection{background:var(--tint-2)}
h1,h2,h3{font-weight:700;letter-spacing:-.012em;line-height:1.25}
h1,.page-title{font-size:1.65rem;margin:0 0 1rem}
h2{font-size:1.06rem;margin:0 0 .7rem}
h3{font-size:.95rem;margin:.9rem 0 .5rem}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.muted{color:var(--muted)}

/* ----- shell ----- */
.sidebar{width:var(--side);background:linear-gradient(185deg,color-mix(in srgb,var(--brand) 90%,#000) 0%,color-mix(in srgb,var(--brand) 72%,#000) 100%);box-shadow:2px 0 24px rgba(0,0,0,.12)}
.brand{height:68px;padding:0 1.1rem;font-size:1.02rem;letter-spacing:.01em;background-image:var(--star);background-size:56px 56px;background-position:right -8px center;border-block-end:1px solid rgba(255,255,255,.1)}
.brand .logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);color:var(--accent);font-size:1.15rem}
.sidebar nav.nav{padding:.7rem .65rem 1rem;gap:2px}
.nav-top,.nav-group>summary{padding:.5rem .65rem;border-radius:10px;font-weight:550;color:rgba(255,255,255,.86);transition:background .15s,color .15s}
.nav-top i,.nav-group>summary i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1);font-size:.95rem;flex:none;transition:background .15s}
.nav-top:hover,.nav-group>summary:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-group.has-active>summary,.nav-top.active{background:rgba(255,255,255,.14);color:#fff}
.nav-group.has-active>summary i,.nav-top.active i{background:var(--accent);color:#1b1608}
.nav-sub{margin-inline-start:1.7rem;border-inline-start:1px solid rgba(255,255,255,.16)}
.nav-sub a{padding:.4rem .7rem;font-size:.9rem;color:rgba(255,255,255,.78)}
.nav-sub a.active{background:rgba(255,255,255,.16);color:#fff;font-weight:650;box-shadow:inset 3px 0 0 var(--accent)}
[dir=rtl] .nav-sub a.active{box-shadow:inset -3px 0 0 var(--accent)}
.topbar{padding:.55rem 1.4rem;gap:1rem;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-block-end:1px solid var(--line)}
.gsearch input{height:40px;border-radius:999px;padding-inline:2.4rem 1rem;margin:0;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237a8b86' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 14px 50%;border-color:var(--line)}
[dir=rtl] .gsearch input{background-position:calc(100% - 14px) 50%}
.gsearch input:focus{background-color:var(--surface)}
.topbar-end{gap:.6rem}
a.user{display:inline-flex;align-items:center;gap:.5rem;padding:.2rem .7rem .2rem .25rem;border:1px solid var(--line);border-radius:999px;font-size:.88rem;color:var(--ink);background:var(--surface)}
a.user:hover{text-decoration:none;border-color:var(--line-2)}
a.user::before{content:attr(data-i);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:.8rem}
.bell{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1rem}
.bell:hover{border-color:var(--line-2);text-decoration:none}
.content{padding:1.5rem 1.6rem 2.5rem;max-width:1360px}

/* ----- surfaces ----- */
.card{border-radius:var(--r);padding:1.15rem 1.25rem;border-color:var(--line);box-shadow:var(--shadow);margin-block-end:1.1rem}
.card.flush{border-radius:var(--r)}
.card>h2:first-child,.card>.row-between:first-child h2{display:flex;align-items:center;gap:.5rem}
.card h2 small{font-weight:500;font-size:.8rem}
.pad{padding:1rem 1.25rem .3rem}
.card.flush>h2.pad{margin:0;padding-block:1rem .55rem}
.grid2{gap:1.1rem}
.sub{margin:1.1rem 0 .5rem}

.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-block-end:1.1rem}
.kpi{position:relative;display:block;padding:.95rem 1.1rem;border-radius:var(--r);border:1px solid var(--line);border-inline-start:4px solid var(--accent);box-shadow:var(--shadow);color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
a.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,32,29,.1);text-decoration:none}
.kpi span{font-size:.82rem;font-weight:550;color:var(--muted)}
.kpi b{display:block;white-space:nowrap;margin-block-start:.15rem;font-size:1.55rem;line-height:1.15;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.toolbar{align-items:center;gap:.8rem;margin-block-end:1rem}
.toolbar>span,.toolbar .filters{align-items:center}
.actions{gap:.6rem}
.empty{padding:2rem 1rem;border:1px dashed var(--line-2);border-radius:var(--r);margin:.8rem;background:var(--surface-2);font-size:.95rem}
.card.flush .empty{border:0;border-radius:0;margin:0;background:transparent}

/* ----- controls ----- */
label{font-size:.85rem;font-weight:600;color:var(--ink);margin-block-end:.85rem}
input,select,textarea{height:40px;padding:.45rem .75rem;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);font-size:.95rem;transition:border-color .15s,box-shadow .15s}
textarea{height:auto;min-height:84px;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line-2))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
select{appearance:none;-webkit-appearance:none;padding-inline-end:2rem;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237a8b86' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .8rem center}
[dir=rtl] select{background-position:left .8rem center}
input[type=checkbox],input[type=radio]{height:auto;accent-color:var(--brand)}
input[type=file]{height:auto;padding:.4rem}
input[type=search]{-webkit-appearance:none}
.form-grid{column-gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem}
legend{font-weight:650;font-size:.9rem;padding-inline:.4rem}
.inline-form{align-items:center}
.inline-form input,.inline-form select{flex:1 1 150px}
.field-error{font-size:.8rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:38px;padding:0 1rem;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);font-size:.92rem;font-weight:600;line-height:1;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn:hover{text-decoration:none;filter:none;background:var(--surface-2);border-color:color-mix(in srgb,var(--brand) 45%,var(--line-2))}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover{background:color-mix(in srgb,var(--brand) 88%,#000);border-color:color-mix(in srgb,var(--brand) 88%,#000)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--tint);color:var(--brand);border-color:transparent}
.btn-sm{height:32px;padding:0 .75rem;font-size:.85rem;border-radius:9px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
details>summary.btn{display:inline-flex}
.chip{padding:.28rem .7rem;font-size:.82rem;border-color:var(--line-2);background:var(--surface);color:var(--ink)}
.chips .chip.on{background:var(--tint-2);border-color:var(--brand);color:var(--brand);font-weight:650}
.badge{padding:.12rem .6rem;font-size:.76rem;font-weight:650;letter-spacing:.01em}
.tabl{padding:.42rem .9rem;border-color:var(--line-2);font-size:.86rem;transition:background .15s}
.tabl:hover{background:var(--tint)}
.tabl.active{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tabl .badge{margin-inline-start:.2rem}
.pager a,.pager .cur{border-radius:9px;min-width:34px;text-align:center}

/* ----- tables ----- */
.card.flush{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{font-size:.92rem}
.tbl th{padding:.7rem .9rem;font-size:.8rem;font-weight:650;text-transform:none;letter-spacing:.01em;color:var(--muted);background:var(--surface-2);border-block-end:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.65rem .9rem;border-block-end:1px solid var(--line)}
.tbl tbody tr:last-child td{border-block-end:0}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:var(--tint)}
.tbl td a{font-weight:600}
.tbl tfoot th,.tbl tfoot td{background:var(--surface-2);border-block-start:2px solid var(--line)}
.dl{grid-template-columns:minmax(120px,170px) 1fr;gap:.5rem 1.2rem}
.dl dt{font-size:.85rem}
.dl dd{font-weight:550;overflow-wrap:anywhere}
.progress{height:9px;background:var(--line)}
.progress span{background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 60%,var(--accent)))}

/* ----- alerts, toasts ----- */
.alert{border-radius:var(--r);padding:.8rem 1rem;display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem}
.alert-success{background:rgba(20,137,79,.1);border:1px solid rgba(20,137,79,.35);color:var(--ink)}
.alert-info{background:rgba(26,111,181,.09);border:1px solid rgba(26,111,181,.3)}
.toast{border-radius:12px;padding:.8rem 1.1rem;box-shadow:var(--sh-3);font-weight:550}
.dropdown{border-radius:12px;box-shadow:var(--sh-3);border-color:var(--line)}

/* ----- action menu (details based, no script) ----- */
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:25;min-width:230px;padding:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3)}
.menu-list a,.menu-list button{display:flex;gap:.6rem;align-items:center;width:100%;padding:.55rem .7rem;border:0;border-radius:9px;background:none;color:var(--ink);font:inherit;font-size:.9rem;font-weight:550;text-align:start;cursor:pointer;text-decoration:none}
.menu-list a:hover,.menu-list button:hover{background:var(--tint);color:var(--brand)}
.menu-list hr{border:0;border-block-start:1px solid var(--line);margin:.3rem 0}
.menu-list i{font-style:normal;width:1.2rem;text-align:center;opacity:.8}

/* ----- page tabs (student profile and similar) ----- */
.ptabs{position:sticky;top:60px;z-index:6;display:flex;gap:.25rem;padding:.35rem;margin-block:0 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs a{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:none;transition:background .15s,color .15s}
.ptabs a:hover{background:var(--tint);color:var(--ink)}
.ptabs a[aria-selected=true]{background:var(--brand);color:var(--brand-ink);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ptabs .n{min-width:20px;padding:0 .35rem;border-radius:999px;background:rgba(127,127,127,.18);font-size:.74rem;line-height:20px;text-align:center}
.ptabs a[aria-selected=true] .n{background:rgba(255,255,255,.25)}
.ptabs .n.warn{background:var(--danger);color:#fff}
.ppane{display:none}
.ppane.on{display:block;animation:pane .18s ease-out}
@keyframes pane{from{opacity:.4;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.ppane.on{animation:none}.kpi,.btn,.tbl tbody tr{transition:none}}

/* ----- student profile ----- */
.phero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem 1.4rem;align-items:center;padding:1.3rem 1.4rem;margin-block-end:1rem;color:#fff;border-radius:var(--r-lg);border:0;background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 92%,#000),color-mix(in srgb,var(--brand) 70%,#000));box-shadow:0 10px 30px color-mix(in srgb,var(--brand) 30%,transparent)}
.phero::before{content:"";position:absolute;inset:0;background-image:var(--star);background-size:56px 56px;opacity:.9;pointer-events:none}
.phero>*{position:relative}
.phero .avatar{width:84px;height:84px;margin:0;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.75);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.phero .avatar-ph{display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;font-size:2rem;font-weight:750}
.phero h1{margin:0 0 .15rem;font-size:1.55rem;color:#fff}
.phero h1 small{font-weight:500;font-size:1rem;opacity:.85}
.phero .meta{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin-block-start:.35rem}
.phero .meta span{padding:.12rem .6rem;border-radius:999px;background:rgba(255,255,255,.14);font-size:.8rem;font-weight:550}
.phero .family{margin-block-start:.5rem;font-size:.85rem;opacity:.92}
.phero .family a{color:#fff;font-weight:650;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.phero .actions{margin:0;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.phero .btn{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.phero .btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55)}
.phero .btn-primary{background:var(--accent);border-color:var(--accent);color:#1b1608}
.phero .btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}
.pstats{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem;margin-block-start:.2rem}
.pstat{display:block;padding:.65rem .85rem;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.14);text-decoration:none}
a.pstat:hover{background:rgba(255,255,255,.2);text-decoration:none}
.pstat span{display:block;font-size:.76rem;opacity:.85;font-weight:550}
.pstat b{display:block;font-size:1.3rem;font-weight:750;letter-spacing:-.01em}
.pstat.bad{background:rgba(212,53,28,.4);border-color:rgba(255,160,140,.5)}
.pstat.good b{color:#b9f0d0}
.menu .menu-list{color:var(--ink)}

/* ----- dashboard ----- */
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-block-end:1.2rem}
.hello h1{margin:0}
.hello p{margin:.15rem 0 0;color:var(--muted)}
.qa{display:flex;gap:.55rem;flex-wrap:wrap}
.qa a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-weight:600;font-size:.88rem;box-shadow:var(--sh-1);text-decoration:none;transition:border-color .15s,background .15s}
.qa a:hover{background:var(--tint);border-color:var(--brand);color:var(--brand)}
.qa a i{font-style:normal}
.sec-title{display:flex;align-items:center;gap:.6rem;margin:1.4rem 0 .7rem;font-size:1rem}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* ----- sign-in pages ----- */
body.bare{background:var(--bg)}
.bare-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(1200px 500px at 15% -10%,color-mix(in srgb,var(--brand) 18%,transparent),transparent 60%),radial-gradient(900px 400px at 100% 110%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),var(--bg)}
.card.login{width:100%;max-width:410px;margin:0;padding:2rem 1.8rem;border-radius:var(--r-lg);box-shadow:var(--sh-3);border:0}
.card.login h1{font-size:1.35rem;text-align:center;margin:.3rem 0 .15rem}
.card.login>p.muted{text-align:center;margin:0 0 1.2rem}
.card.login .btn-primary{height:44px;font-size:1rem}
.login-logo{display:block;max-height:64px;max-width:200px;margin:0 auto .6rem}

/* ----- module pages ----- */
.subnav{gap:.2rem;padding:.3rem;margin-block-end:1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.subnav::-webkit-scrollbar{display:none}
.subnav a{padding:.45rem .9rem;border-radius:10px;border:0;font-size:.9rem;white-space:nowrap}
.subnav a:hover{background:var(--tint);color:var(--ink);text-decoration:none}
.subnav a.active{background:var(--brand);color:var(--brand-ink);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.board-col{border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.lead-card{border-radius:10px;box-shadow:var(--sh-1);border-color:var(--line);transition:box-shadow .15s,border-color .15s}
.lead-card:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.lead-row{padding:.85rem 1.25rem}
.msg{border-radius:12px}
.cal{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.portal-head{padding:.75rem 1.4rem;box-shadow:var(--sh-1);background:var(--surface)}
.portal-main{padding:1.4rem 1.2rem 3rem}
.portal-grid .card{margin:0}

/* ----- phone and tablet ----- */
@media (max-width:1100px){.content{padding:1.2rem 1.1rem 2rem}.phero{grid-template-columns:auto 1fr}.phero .actions{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:1024px){
  .sidebar{width:min(86vw,300px);transition:transform .22s ease}
  body.side-open .sidebar{box-shadow:var(--sh-3)}
  body.side-open::after{content:"";position:fixed;inset:0;background:rgba(10,20,18,.45);z-index:15}
  .topbar{padding:.5rem .8rem}
  .ptabs{top:54px}
  .gsearch{flex:1 1 auto}
  .topbar-end .chip{display:none}
  .bottom-bar{border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(16,32,29,.1);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px)}
  .bottom-bar a.active,.bottom-bar button:active{color:var(--brand)}
  .bottom-bar a.active i{background:var(--tint-2);border-radius:12px;padding:.1rem .8rem}
}
@media (max-width:640px){
  html{font-size:15px}
  .content{padding:.9rem .8rem 5rem}
  h1,.page-title{font-size:1.35rem}
  .card{padding:1rem;border-radius:var(--r)}
  .form-grid{grid-template-columns:1fr}
  .btn{height:42px}.btn-sm{height:36px}
  input,select,textarea{height:44px;font-size:1rem}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar .filters,.toolbar>span{width:100%}
  .filters input,.filters select,.filters input[type=search]{flex:1 1 100%;width:100%;min-width:0}
  .phero{padding:1.1rem;gap:.9rem;grid-template-columns:auto 1fr}
  .phero .avatar{width:64px;height:64px}
  .phero h1{font-size:1.25rem}
  .pstats{grid-template-columns:repeat(2,1fr)}
  .phero .actions .btn{flex:1 1 auto}
  .dl{grid-template-columns:1fr;gap:.1rem}.dl dt{margin-block-start:.6rem}
  .ptabs a{padding:.5rem .8rem}
  .tbl th,.tbl td{padding:.55rem .7rem}
  .menu-list{position:fixed;inset-inline:.8rem;top:auto;bottom:4.6rem;min-width:0;max-height:60vh;overflow:auto}
}
@media print{.ptabs,.menu,.phero .actions,.qa{display:none!important}.ppane{display:block!important}.phero{color:#000;background:none;box-shadow:none;border:1px solid #999}.phero h1,.phero .family a,.pstat,.pstat span{color:#000}.phero::before{display:none}}

/* ----- refinements after the phone review ----- */
.bottom-bar a span,.bottom-bar button span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .topbar{gap:.5rem}
  .gsearch{flex:1 1 0;min-width:0}
  a.user{font-size:0;padding:.2rem;gap:0}
  .topbar-end form .btn{padding:0 .6rem;font-size:.8rem}
  .topbar-end{gap:.4rem}
  .phero .meta span{font-size:.74rem}
  .pstat b{font-size:1.15rem}
  .bottom-bar a,.bottom-bar button{font-size:.66rem}
}

/* ----- phone: simple tables become cards ----- */
@media (max-width:640px){
  .tbl.rt{border-collapse:separate}
  .tbl.rt thead{display:none}
  .tbl.rt,.tbl.rt tbody,.tbl.rt tfoot,.tbl.rt tr{display:block;width:100%}
  .tbl.rt tr{padding:.75rem 1rem;border-block-end:1px solid var(--line)}
  .tbl.rt tbody tr:last-child{border-block-end:0}
  .tbl.rt td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.22rem 0;border:0;text-align:end;overflow-wrap:anywhere}
  .tbl.rt td::before{content:attr(data-label);flex:none;max-width:42%;color:var(--muted);font-size:.8rem;font-weight:600;text-align:start}
  .tbl.rt td:not([data-label])::before{content:none}
  .tbl.rt td:not([data-label]){justify-content:flex-end}
  .tbl.rt td.num{text-align:end}
  .filters select{flex:1 1 calc(50% - .25rem)!important;width:auto!important;min-width:0}
  .filters input[type=search]{flex:1 1 100%!important}
  .filters .check{flex:1 1 auto}
}

/* ----- tidy small forms inside profile cards ----- */
.enroll-row{gap:.55rem;padding:.8rem 0}
.enroll-row .inline-form{gap:.5rem .8rem}
.enroll-row .inline-form>form{display:flex;flex-wrap:nowrap;gap:.4rem;align-items:center;margin:0}
.enroll-row .inline-form select,.enroll-row .inline-form input{flex:1 1 7rem;min-width:0;max-width:12rem}
.enroll-row .inline-form button{flex:none}
.profile-id{min-width:0}
details.top-gap>summary.btn{margin-block-end:.4rem}
.ppane>.card:last-child{margin-block-end:0}

/* ----- form tabs (add / edit student) share the page-tab look ----- */
.tabs{gap:.25rem;padding:.3rem;margin-block-end:1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:.45rem .95rem;border-radius:10px;border:0;font-size:.9rem;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.tab:hover{background:var(--tint);color:var(--ink)}
.tab.active{background:var(--brand);color:var(--brand-ink);box-shadow:0 1px 3px rgba(0,0,0,.2)}
/* account rows */
.acct-actions{display:inline-block;vertical-align:middle;margin-inline-end:.4rem;text-align:start}
.acct-actions>.card{min-width:min(560px,80vw);margin-block-end:0;box-shadow:var(--sh-3)}
td.num form.inline{display:inline-block;vertical-align:middle}
/* lead board */
.lead-card .btn{margin-block-start:.35rem}
.board-col h3{display:flex;align-items:center;gap:.3rem}

/* sign-in card: a brand band on top */
.card.login{overflow:hidden}
.card.login::before{content:"";display:block;height:8px;margin:-2rem -1.8rem 1.5rem;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--accent)) 60%,var(--accent))}

/* dark mode: keep the large coloured areas deep so the page stays calm */
@media (prefers-color-scheme:dark){
  .sidebar{background:linear-gradient(185deg,color-mix(in srgb,var(--brand) 42%,#000) 0%,color-mix(in srgb,var(--brand) 30%,#000) 100%)}
  .phero{background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 48%,#000),color-mix(in srgb,var(--brand) 32%,#000));box-shadow:0 10px 30px rgba(0,0,0,.4)}
  .btn-primary{color:#062018}
  .tabl.active,.ptabs a[aria-selected=true],.subnav a.active,.tab.active{color:#062018}
  .gsearch input{background-color:var(--surface-2)}
  .alert-info{background:rgba(26,111,181,.18)}
  .kpi,.card,.empty{border-color:var(--line)}
  .menu-list{background:var(--surface-2)}
}

/* ==========================================================================
   Menu style (Settings > Institute > Menu style): light (default), brand colour, or dark.
   The rules below read these variables, so each style only sets colours.
   ========================================================================== */
body,body.nav-light{--nav-bg:var(--surface);--nav-ink:#2a3a36;--nav-ink-2:#5b6e69;--nav-hover:var(--tint);--nav-active-bg:var(--tint-2);--nav-active-ink:var(--brand);--nav-chip:var(--surface-2);--nav-chip-active:var(--brand);--nav-chip-active-ink:#fff;--nav-line:var(--line);--nav-brand-ink:var(--ink)}
body.nav-brand{--nav-bg:linear-gradient(185deg,color-mix(in srgb,var(--brand) 90%,#000),color-mix(in srgb,var(--brand) 72%,#000));--nav-ink:rgba(255,255,255,.88);--nav-ink-2:rgba(255,255,255,.76);--nav-hover:rgba(255,255,255,.1);--nav-active-bg:rgba(255,255,255,.15);--nav-active-ink:#fff;--nav-chip:rgba(255,255,255,.1);--nav-chip-active:var(--accent);--nav-chip-active-ink:#1b1608;--nav-line:rgba(255,255,255,.14);--nav-brand-ink:#fff}
body.nav-dark{--nav-bg:#13201d;--nav-ink:rgba(255,255,255,.86);--nav-ink-2:rgba(255,255,255,.7);--nav-hover:rgba(255,255,255,.07);--nav-active-bg:rgba(255,255,255,.1);--nav-active-ink:#fff;--nav-chip:rgba(255,255,255,.07);--nav-chip-active:var(--accent);--nav-chip-active-ink:#1b1608;--nav-line:rgba(255,255,255,.1);--nav-brand-ink:#fff}
.sidebar{background:var(--nav-bg);color:var(--nav-ink);box-shadow:none;border-inline-end:1px solid var(--nav-line)}
body.nav-brand .sidebar,body.nav-dark .sidebar{box-shadow:2px 0 24px rgba(0,0,0,.12);border-inline-end:0}
.brand{color:var(--nav-brand-ink);background-image:none;border-block-end:1px solid var(--nav-line)}
body.nav-brand .brand{background-image:var(--star);background-size:56px 56px;background-position:right -8px center}
.brand .logo{background:var(--nav-chip);color:var(--brand)}
body.nav-brand .brand .logo,body.nav-dark .brand .logo{color:var(--accent)}
.sidebar nav a.nav-top,.nav-group>summary{color:var(--nav-ink)}
.sidebar nav a.nav-top i,.nav-group>summary i{background:var(--nav-chip);color:var(--nav-ink-2)}
.sidebar nav a.nav-top:hover,.nav-group>summary:hover{background:var(--nav-hover);color:var(--nav-ink)}
.nav-group.has-active>summary,.sidebar nav a.nav-top.active{background:var(--nav-active-bg);color:var(--nav-active-ink)}
.nav-group.has-active>summary i,.sidebar nav a.nav-top.active i{background:var(--nav-chip-active);color:var(--nav-chip-active-ink)}
.nav-sub{border-inline-start-color:var(--nav-line)}
.sidebar nav .nav-sub a{color:var(--nav-ink-2)}
.sidebar nav .nav-sub a:hover{background:var(--nav-hover);color:var(--nav-ink)}
.sidebar nav .nav-sub a.active{background:var(--nav-active-bg);color:var(--nav-active-ink);font-weight:650;box-shadow:inset 3px 0 0 var(--brand)}
body.nav-brand .sidebar nav .nav-sub a.active,body.nav-dark .sidebar nav .nav-sub a.active{box-shadow:inset 3px 0 0 var(--accent)}
[dir=rtl] .nav-sub a.active{box-shadow:inset -3px 0 0 var(--brand)}
.nav-group>summary::after{color:var(--nav-ink-2)}
.nav-group>summary:focus-visible,.nav-top:focus-visible,.nav-sub a:focus-visible{outline-color:var(--brand)}
body.nav-brand .nav-group>summary:focus-visible,body.nav-dark .nav-group>summary:focus-visible,body.nav-brand .nav-top:focus-visible,body.nav-dark .nav-top:focus-visible{outline-color:var(--accent)}
@media (prefers-color-scheme:dark){
  body,body.nav-light{--nav-bg:var(--surface);--nav-ink:var(--ink);--nav-ink-2:var(--muted);--nav-chip-active-ink:#062018}
  .sidebar{background:var(--nav-bg)}
  body.nav-brand .sidebar{background:linear-gradient(185deg,color-mix(in srgb,var(--brand) 42%,#000),color-mix(in srgb,var(--brand) 30%,#000))}
}

/* ==========================================================================
   Side menu v3: real line icons, clearer rows, quiet chevrons
   ========================================================================== */
.ico{display:inline-grid;place-items:center;flex:none;width:22px;height:22px}
.ico svg{width:21px;height:21px}
.sidebar nav.nav{padding:.9rem .75rem 1.2rem;gap:3px}
.sidebar nav a.nav-top,.nav-group>summary{position:relative;gap:.8rem;min-height:42px;padding:.5rem .8rem;border-radius:11px;font-size:.95rem;font-weight:600;letter-spacing:.005em}
.sidebar nav a.nav-top .ico,.nav-group>summary .ico{width:22px;height:22px;background:none;border-radius:0;color:var(--nav-ink-2);transition:color .15s}
.sidebar nav a.nav-top:hover .ico,.nav-group>summary:hover .ico{color:var(--nav-ink)}
.nav-group.has-active>summary,.sidebar nav a.nav-top.active{background:var(--nav-active-bg);color:var(--nav-active-ink)}
.nav-group.has-active>summary .ico,.sidebar nav a.nav-top.active .ico{background:none;color:var(--nav-active-ink)}
.sidebar nav a.nav-top.active::before,.nav-group.has-active>summary::before{content:"";position:absolute;inset-inline-start:-.75rem;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--nav-bar,var(--brand))}
[dir=rtl] .sidebar nav a.nav-top.active::before,[dir=rtl] .nav-group.has-active>summary::before{border-radius:4px 0 0 4px}
body.nav-brand,body.nav-dark{--nav-bar:var(--accent)}
.nav-group>summary::after{content:"";flex:none;width:7px;height:7px;margin-inline-start:auto;border:solid currentColor;border-width:0 1.8px 1.8px 0;opacity:.55;transform:rotate(-45deg);transition:transform .18s,opacity .15s;font-size:0}
[dir=rtl] .nav-group>summary::after{transform:rotate(135deg)}
.nav-group[open]>summary::after{transform:rotate(45deg);opacity:.8}
[dir=rtl] .nav-group[open]>summary::after{transform:rotate(45deg)}
.nav-sub{margin:2px 0 6px 1.55rem;padding-inline-start:.65rem;gap:2px}
[dir=rtl] .nav-sub{margin:2px 1.55rem 6px 0}
.sidebar nav .nav-sub a{padding:.46rem .8rem;border-radius:9px;font-size:.92rem;font-weight:550;line-height:1.3}
.sidebar nav .nav-sub a.active{box-shadow:none;font-weight:650}
.brand{height:70px;padding:0 1.15rem;gap:.75rem}
.brand .logo{width:38px;height:38px;border-radius:12px;background:var(--brand);color:var(--brand-ink);box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent)}
.brand .logo .ico svg{width:22px;height:22px}
body.nav-brand .brand .logo,body.nav-dark .brand .logo{background:rgba(255,255,255,.14);color:var(--accent);box-shadow:none}
.brand .logo-img{width:38px;height:38px;border-radius:10px}
.brand-name{font-size:1rem;font-weight:700;letter-spacing:-.005em;line-height:1.2}
/* phone bottom bar uses the same icons */
.bottom-bar .ico{width:26px;height:26px}.bottom-bar .ico svg{width:22px;height:22px}
.bottom-bar a.active .ico{background:var(--tint-2);border-radius:12px;width:54px}
.bottom-bar a.active i{background:none;padding:0}

/* ----- toolbars and filters: filters on the left, actions on the right, nothing orphaned ----- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1rem}
.toolbar>.filters,.toolbar>form.filters{flex:1 1 420px;min-width:0}
.toolbar>span,.toolbar>.tabs-inline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.toolbar>span:last-child:not(:first-child){margin-inline-start:auto}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filters input,.filters select{margin:0;height:38px;width:auto;min-width:0}
.filters input[type=search],.filters input[type=text]{flex:1 1 220px;min-width:160px}
.filters select{flex:0 1 160px}
.filters input[type=date]{flex:0 1 150px}
.filters .check{white-space:nowrap}
.filters .btn{flex:none}
/* titles never touch the first block */
.page-title{margin-block-end:1rem}
.content>.subnav:first-child,.content>.toolbar:first-child{margin-block-start:0}
/* consistent card headers */
.card>.row-between:first-child{margin-block-end:.7rem}
.card>.row-between>h2{margin:0}
.card>h2+.muted.small{margin-block-start:-.4rem}
/* row actions in tables stay on one line */
.tbl td.num form,.tbl td.num a.btn,.tbl td.num .btn{white-space:nowrap}
.tbl td:last-child .btn+.btn,.tbl td:last-child form+form{margin-inline-start:.3rem}
.tbl td.nw,.tbl td.num{white-space:nowrap}
.filters input[type=search],.filters input[type=text]{flex:1 1 180px;min-width:140px}
.filters select{flex:0 1 140px;min-width:110px}

/* ----- tab sets inside cards, and collapsed "add" blocks ----- */
.tabset-nav{display:inline-flex;gap:.2rem;padding:.25rem;margin-block-end:1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);max-width:100%;overflow-x:auto}
.tabset-nav button{height:34px;padding:0 1rem;border:0;border-radius:9px;background:none;color:var(--muted);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap}
.tabset-nav button:hover{background:var(--tint);color:var(--ink)}
.tabset-nav button.on{background:var(--brand);color:var(--brand-ink);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tabset-panel{display:none}.tabset-panel.on{display:block}
form.plain{margin:0}
.tabset-panel h2{display:none}
.newtx{padding:0}
.newtx-sum{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;cursor:pointer;list-style:none;font-weight:650;color:var(--brand)}
.newtx-sum::-webkit-details-marker{display:none}
.newtx-sum::before{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--brand);color:var(--brand-ink);font-size:1.1rem;line-height:1}
.newtx[open]>.newtx-sum{border-block-end:1px solid var(--line)}
.newtx[open]>.newtx-sum::before{content:"–"}
.newtx>.tabset{padding:1.1rem 1.25rem 1.25rem}
@media print{.newtx{display:none}}
.padded{padding:1.1rem 1.25rem 1.25rem}
.newtx form h2{display:none}
.tbl td details{display:inline-block;vertical-align:top;margin-inline-end:.3rem}
.tbl td details>summary{cursor:pointer;color:var(--brand);font-size:.85rem}

/* permission groups sit side by side instead of one long column */
.perm-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem;margin-block:1rem}
.perm-board .perm-group{display:flex;flex-direction:column;gap:.35rem;margin:0;padding:.7rem .9rem;background:var(--surface-2);border-radius:var(--r)}
.perm-board .perm-group label.check{margin:0;font-size:.88rem}

/* selectable print styles (Settings > Institute) */
.certificate.pt-modern{text-align:start;border-inline-start:1.2rem solid var(--brand)}.certificate.pt-modern .cert-body h1{color:var(--brand)}
.certificate.pt-elegant{font-family:Georgia,'Times New Roman',serif;border:6px double #b8923a;padding:1.2rem}.certificate.pt-elegant .cert-body h1{font-style:italic;color:#8a6a1c;font-weight:400}
.idcard.pt-modern{border-radius:5mm;border:0}.idcard.pt-modern .idcard-head{background:#111;color:#fff;border-radius:0 0 4mm 4mm}
.idcard.pt-elegant{border:1.5px solid #b8923a;font-family:Georgia,serif}.idcard.pt-elegant .idcard-head{background:#fff;color:#8a6a1c;border-block-end:1px solid #b8923a}
.receipt.pt-modern thead th{background:var(--brand);color:var(--brand-ink,#fff)}.receipt.pt-elegant{font-family:Georgia,'Times New Roman',serif}.receipt.pt-elegant h2,.receipt.pt-elegant h1{font-weight:400;letter-spacing:.04em}
.qadd{position:relative}.qadd summary{list-style:none;cursor:pointer}.qadd .menu-list{inset-inline-end:0;inset-inline-start:auto}
.kbd{display:inline-block;min-width:1.4rem;padding:.05rem .4rem;border:1px solid var(--line);border-radius:.3rem;background:var(--card,#fff);font:600 .8rem monospace;text-align:center}
#kbdHelp{border:1px solid var(--line);border-radius:.8rem;padding:1.2rem;max-width:26rem;width:90vw;background:var(--card,#fff);color:inherit}#kbdHelp::backdrop{background:rgba(0,0,0,.4)}

/* dashboard: no double spacing between widgets (grid gap only), tighter section headings */
.grid2>.card,.grid2>div>.card:last-child,.kpis+.grid2>.card{margin-block-end:0}
.grid2{gap:.9rem;grid-auto-flow:row dense;margin-block-end:1rem}
.kpis{gap:.75rem;margin-block-end:.9rem}
.sec-title{margin:1rem 0 .55rem}
.hello{margin-block-end:.8rem}
.alert{margin-block-end:.8rem}

/* dashboard widgets pack into two columns so a short card never leaves a gap beside a tall one */
.grid2.masonry{display:block;column-count:2;column-gap:.9rem}
.grid2.masonry>*{break-inside:avoid;display:block;width:100%;margin:0 0 .9rem}
@media (max-width:900px){.grid2.masonry{column-count:1}}

.backbtn{display:inline-flex;align-items:center;gap:.3rem;margin-block-end:.5rem;padding:.25rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.85rem;font-weight:600}
.backbtn:hover{color:var(--brand);border-color:var(--brand);text-decoration:none}
.pager{flex-wrap:wrap;align-items:center}.pager .gap{padding:.3rem .3rem;color:var(--muted)}.pager .info{margin-inline-start:.6rem;color:var(--muted);font-size:.85rem}