/* ═══════════════════════════════════════════════════════════
   Parent Portal — Knowledge City Schools
   Cairo font · Bilingual AR/EN · Mobile-first responsive
═══════════════════════════════════════════════════════════ */

/* ── Variables: Dark (Default) ───────────────────────── */
:root,[data-theme="dark"]{
  --primary:#1a4f8a;--primary-l:#2563b0;--primary-d:#0f3060;
  --secondary:#38bdf8;--accent:#fbbf24;
  --green:#34d399;--red:#f87171;--orange:#fb923c;--purple:#a78bfa;--pink:#f472b6;
  --bg:#080f1e;--bg-sb:#0a1628;--bg-card:#0d1e38;--bg-card-h:#112444;
  --bg-inp:#091525;--bg-top:rgba(8,15,30,.92);--bg-modal:#0a1628;
  --brd:rgba(255,255,255,.07);--brd-md:rgba(255,255,255,.12);--brd-act:rgba(56,189,248,.45);
  --txt:#e8f0ff;--txt2:#94a3b8;--txt-m:#4e6280;
  --sh-sm:0 2px 8px rgba(0,0,0,.35);--sh:0 8px 32px rgba(0,0,0,.45);--sh-lg:0 20px 60px rgba(0,0,0,.6);
  --r:16px;--r-sm:10px;--tr:all .28s cubic-bezier(.4,0,.2,1);
  --sb-w:268px;
}
[data-theme="light"]{
  --bg:#f0f4fb;--bg-sb:#ffffff;--bg-card:#ffffff;--bg-card-h:#f5f8ff;
  --bg-inp:#f3f6fc;--bg-top:rgba(255,255,255,.95);--bg-modal:#ffffff;
  --brd:rgba(0,0,0,.07);--brd-md:rgba(0,0,0,.12);--brd-act:rgba(56,189,248,.6);
  --txt:#0f172a;--txt2:#475569;--txt-m:#94a3b8;
  --sh-sm:0 2px 8px rgba(0,0,0,.06);--sh:0 8px 32px rgba(0,0,0,.10);--sh-lg:0 20px 60px rgba(0,0,0,.15);
}

/* ── Reset ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg-card);border-radius:3px}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo',sans-serif;
  background:var(--bg);color:var(--txt);
  min-height:100vh;overflow-x:hidden;
  transition:background .35s,color .35s;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%,rgba(26,79,138,.18) 0%,transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 85%,rgba(56,189,248,.08) 0%,transparent 50%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* ── Layout ──────────────────────────────────────────── */
.pp-layout{display:flex;min-height:100vh;position:relative;z-index:1}

/* ── Sidebar ─────────────────────────────────────────── */
.pp-sb{
  width:var(--sb-w);background:var(--bg-sb);
  border-left:1px solid var(--brd);
  position:fixed;top:0;bottom:0;right:0;z-index:300;
  display:flex;flex-direction:column;
  box-shadow:var(--sh);transition:background .35s,border-color .35s,transform .3s;
  overflow-y:auto;
}
[dir=ltr] .pp-sb{left:0;right:auto;border-left:none;border-right:1px solid var(--brd)}

.pp-sb-logo{
  padding:16px 14px 12px;border-bottom:1px solid var(--brd);
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.pp-sb-logo img{width:110px;height:44px;object-fit:contain}

.pp-sb-user{
  padding:12px 14px;border-bottom:1px solid var(--brd);flex-shrink:0;
}
.pp-sb-av{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#fff;
}
.pp-sb-name{font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-sb-id{font-size:10.5px;color:var(--txt-m);margin-top:1px}

.pp-sb-nav{flex:1;padding:8px;overflow-y:auto}
.pp-nav-sec{
  font-size:9.5px;font-weight:700;color:var(--txt-m);
  letter-spacing:.9px;text-transform:uppercase;padding:12px 10px 5px;
}
.pp-nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--r-sm);cursor:pointer;transition:var(--tr);
  color:var(--txt2);font-size:13px;font-weight:600;
  margin-bottom:2px;position:relative;user-select:none;text-decoration:none;
}
.pp-nav-item:hover{background:rgba(56,189,248,.08);color:var(--txt)}
.pp-nav-item.active{
  background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(26,79,138,.12));
  color:var(--secondary);border:1px solid rgba(56,189,248,.18);
}
.pp-nav-item.active::before{
  content:'';position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;background:var(--secondary);border-radius:3px;
}
[dir=ltr] .pp-nav-item.active::before{right:auto;left:-8px}
.pp-nav-item i{width:17px;text-align:center;font-size:13px;flex-shrink:0}
.pp-nav-badge{
  margin-right:auto;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:20px;background:var(--red);color:#fff;
}
[dir=ltr] .pp-nav-badge{margin-right:0;margin-left:auto}

.pp-sb-footer{padding:10px 8px 12px;border-top:1px solid var(--brd);flex-shrink:0}
.pp-lang-row{display:flex;gap:7px;margin-bottom:8px;align-items:center}
.pp-lang-btn{
  flex:1;background:var(--bg-inp);border:1px solid var(--brd-md);
  color:var(--txt2);padding:7px 10px;border-radius:8px;
  font-size:11.5px;font-weight:700;cursor:pointer;text-align:center;
  text-decoration:none;transition:var(--tr);font-family:'Cairo',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.pp-lang-btn:hover{border-color:var(--brd-act);color:var(--secondary)}
.pp-theme-btn{
  width:34px;height:34px;border-radius:9px;background:var(--bg-inp);
  border:1px solid var(--brd-md);color:var(--txt2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:var(--tr);flex-shrink:0;
}
.pp-theme-btn:hover{background:var(--bg-card-h);color:var(--txt)}
.pp-logout{
  display:flex;align-items:center;gap:8px;width:100%;background:transparent;
  border:1px solid var(--brd);color:var(--txt2);padding:9px 12px;
  border-radius:var(--r-sm);font-family:'Cairo',sans-serif;font-size:13px;
  font-weight:600;cursor:pointer;transition:var(--tr);
}
.pp-logout:hover{border-color:var(--red);color:var(--red);background:rgba(248,113,113,.06)}

/* ── Main ────────────────────────────────────────────── */
.pp-main{margin-right:var(--sb-w);min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
[dir=ltr] .pp-main{margin-right:0;margin-left:var(--sb-w)}

/* ── Topbar ──────────────────────────────────────────── */
.pp-topbar{
  position:sticky;top:0;z-index:100;
  background:var(--bg-top);backdrop-filter:blur(18px) saturate(1.8);
  border-bottom:1px solid var(--brd);
  padding:0 20px;height:58px;display:flex;align-items:center;gap:10px;
}
.pp-topbar-title{font-size:16px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-page-content{padding:20px;flex:1}

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;
  border-radius:var(--r-sm);font-family:'Cairo',sans-serif;
  font-size:13px;font-weight:700;cursor:pointer;border:none;
  transition:var(--tr);white-space:nowrap;text-decoration:none;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary-l),var(--secondary));
  color:#fff;box-shadow:0 3px 12px rgba(56,189,248,.25);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(56,189,248,.35)}
.btn-outline{background:transparent;color:var(--txt2);border:1px solid var(--brd-md)}
.btn-outline:hover{background:var(--bg-card-h);color:var(--txt);border-color:var(--brd-act)}
.btn-success{background:linear-gradient(135deg,#059669,var(--green));color:#fff}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(52,211,153,.35)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-icon{
  width:34px;height:34px;padding:0;justify-content:center;border-radius:var(--r-sm);
  background:var(--bg-card);border:1px solid var(--brd);color:var(--txt2);font-size:13px;flex-shrink:0;
}
.btn-icon:hover{background:var(--bg-card-h);color:var(--txt);border-color:var(--brd-act)}

/* ── Cards ───────────────────────────────────────────── */
.pp-card{
  background:var(--bg-card);border:1px solid var(--brd);
  border-radius:var(--r);transition:var(--tr);
}
.pp-card-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--brd);gap:10px;flex-wrap:wrap;
}
.pp-card-ttl{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.pp-card-icon{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  background:rgba(56,189,248,.12);color:var(--secondary);
}
.pp-card-body{padding:16px 18px}

/* ── Stat Cards ──────────────────────────────────────── */
.pp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
.pp-stat{
  background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--r);
  padding:16px;position:relative;overflow:hidden;transition:var(--tr);cursor:pointer;
}
.pp-stat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--brd-md)}
.pp-stat:active{transform:scale(.97)}
.pp-stat::after{
  content:'';position:absolute;top:-20px;right:-20px;
  width:90px;height:90px;border-radius:50%;opacity:.08;
}
[dir=ltr] .pp-stat::after{right:auto;left:-20px}
.ps-blue::after{background:var(--secondary)}
.ps-green::after{background:var(--green)}
.ps-amber::after{background:var(--accent)}
.ps-orange::after{background:var(--orange)}
.ps-gray::after{background:var(--txt2)}
.pp-stat-ico{
  width:40px;height:40px;border-radius:11px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.ps-blue  .pp-stat-ico{background:rgba(56,189,248,.12);color:var(--secondary)}
.ps-green .pp-stat-ico{background:rgba(52,211,153,.12);color:var(--green)}
.ps-amber .pp-stat-ico{background:rgba(251,191,36,.12);color:var(--accent)}
.ps-orange .pp-stat-ico{background:rgba(251,146,60,.12);color:var(--orange)}
.ps-gray  .pp-stat-ico{background:rgba(148,163,184,.12);color:var(--txt2)}
.pp-stat-val{font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
.pp-stat-lbl{font-size:11px;color:var(--txt-m);font-weight:500;line-height:1.3}
.pp-stat-hint{
  display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  font-size:10px;color:var(--secondary);background:rgba(56,189,248,.08);
  padding:2px 8px;border-radius:20px;border:1px solid rgba(56,189,248,.15);
}

/* ── Table ───────────────────────────────────────────── */
.pp-tbl-wrap{background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--r);overflow:hidden}
.pp-tbl-hd{
  padding:12px 18px;border-bottom:1px solid var(--brd);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pp-tbl-ttl{font-size:14px;font-weight:700;flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.pp-tbl-ttl i{color:var(--secondary);flex-shrink:0}
table{width:100%;border-collapse:collapse}
thead th{
  padding:9px 14px;font-size:11px;font-weight:700;
  color:var(--txt-m);background:rgba(56,189,248,.04);
  border-bottom:1px solid var(--brd);white-space:nowrap;
  text-align:right;
}
[dir=ltr] thead th{text-align:left}
tbody tr{border-bottom:1px solid var(--brd);transition:var(--tr);cursor:pointer}
tbody tr:hover{background:rgba(56,189,248,.05)}
tbody tr:last-child{border-bottom:none}
tbody td{padding:11px 14px;font-size:13px;vertical-align:middle}
.tnum{
  font-weight:700;color:var(--secondary);font-family:monospace;font-size:11px;
  background:rgba(56,189,248,.1);padding:3px 8px;border-radius:6px;display:inline-block;
}

/* ── Badges ──────────────────────────────────────────── */
.bdg{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;
}
.bdg-new  {background:rgba(56,189,248,.13); color:var(--secondary); border:1px solid rgba(56,189,248,.25)}
.bdg-open {background:rgba(251,191,36,.13); color:var(--accent);    border:1px solid rgba(251,191,36,.25)}
.bdg-prog {background:rgba(167,139,250,.13);color:var(--purple);    border:1px solid rgba(167,139,250,.25)}
.bdg-wait {background:rgba(251,146,60,.13); color:var(--orange);    border:1px solid rgba(251,146,60,.25)}
.bdg-esc  {background:rgba(248,113,113,.13);color:var(--red);       border:1px solid rgba(248,113,113,.25)}
.bdg-res  {background:rgba(52,211,153,.13); color:var(--green);     border:1px solid rgba(52,211,153,.25)}
.bdg-cls  {background:rgba(100,116,139,.13);color:var(--txt2);      border:1px solid rgba(100,116,139,.2)}
.bdg-reop {background:rgba(244,114,182,.13);color:var(--pink);      border:1px solid rgba(244,114,182,.25)}

/* ── Inputs ──────────────────────────────────────────── */
.inp,.sel,.txa{
  background:var(--bg-inp);border:1px solid var(--brd-md);
  border-radius:var(--r-sm);padding:10px 13px;
  color:var(--txt);font-family:'Cairo',sans-serif;font-size:13.5px;
  outline:none;transition:var(--tr);width:100%;
}
.inp::placeholder,.txa::placeholder{color:var(--txt-m)}
.inp:focus,.sel:focus,.txa:focus{border-color:var(--brd-act);box-shadow:0 0 0 3px rgba(56,189,248,.10)}
.sel option{background:var(--bg-modal);color:var(--txt)}
.txa{min-height:100px;resize:vertical;line-height:1.7}
.lbl{font-size:12px;font-weight:700;color:var(--txt2);margin-bottom:5px;display:block}
.lbl.req::after{content:' *';color:var(--red)}
.srch-box{
  display:flex;align-items:center;gap:8px;background:var(--bg-inp);
  border:1px solid var(--brd-md);border-radius:var(--r-sm);padding:9px 13px;transition:var(--tr);
}
.srch-box:focus-within{border-color:var(--brd-act);box-shadow:0 0 0 3px rgba(56,189,248,.10)}
.srch-box input{background:none;border:none;outline:none;color:var(--txt);font-family:'Cairo',sans-serif;font-size:13.5px;flex:1}
.srch-box i{color:var(--txt-m);font-size:13px;flex-shrink:0}

/* ── Alerts ──────────────────────────────────────────── */
.alert{
  padding:11px 14px;border-radius:var(--r-sm);
  font-size:13px;display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;line-height:1.6;
}
.alert i{flex-shrink:0;margin-top:1px}
.alert-info {background:rgba(56,189,248,.09);border:1px solid rgba(56,189,248,.2);color:var(--secondary)}
.alert-warn {background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.2);color:var(--accent)}
.alert-ok   {background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.2);color:var(--green)}
.alert-err  {background:rgba(248,113,113,.09);border:1px solid rgba(248,113,113,.2);color:var(--red)}

/* ── Form sections ───────────────────────────────────── */
.fsec{
  background:var(--bg-card);border:1px solid var(--brd);
  border-radius:var(--r);padding:20px;margin-bottom:14px;
}
.fsec-ttl{
  font-size:13px;font-weight:700;color:var(--secondary);
  margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.fsec-ttl::after{content:'';flex:1;height:1px;background:var(--brd)}
.fg{margin-bottom:14px}
.fg:last-child{margin-bottom:0}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ── Type grid ───────────────────────────────────────── */
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.type-btn{
  padding:13px 6px;border-radius:var(--r-sm);border:1px solid var(--brd-md);
  background:var(--bg-inp);color:var(--txt2);cursor:pointer;
  text-align:center;font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;
  transition:var(--tr);user-select:none;line-height:1.4;
}
.type-btn i{display:block;font-size:20px;margin-bottom:5px}
.type-btn:hover{border-color:var(--brd-act);color:var(--secondary)}
.type-btn.sel{border-color:var(--secondary);background:rgba(56,189,248,.1);color:var(--secondary)}

/* ── Priority ────────────────────────────────────────── */
.pri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.pri-btn{
  padding:10px 6px;border-radius:var(--r-sm);border:1px solid var(--brd-md);
  background:var(--bg-inp);color:var(--txt2);cursor:pointer;text-align:center;
  font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;transition:var(--tr);
}
.pri-btn.sel-low   {border-color:var(--green); background:rgba(52,211,153,.1);  color:var(--green)}
.pri-btn.sel-mid   {border-color:var(--accent);background:rgba(251,191,36,.1);  color:var(--accent)}
.pri-btn.sel-high  {border-color:var(--orange);background:rgba(251,146,60,.1);  color:var(--orange)}
.pri-btn.sel-urgent{border-color:var(--red);   background:rgba(248,113,113,.1); color:var(--red)}

/* ── Filter chips ────────────────────────────────────── */
.filter-bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.fchip{
  padding:6px 13px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;
  text-decoration:none;border:1.5px solid var(--brd);color:var(--txt-m);
  transition:var(--tr);font-family:'Cairo',sans-serif;display:inline-flex;align-items:center;gap:5px;
}
.fchip:hover,.fchip.on{border-color:var(--brd-act);color:var(--secondary);background:rgba(56,189,248,.08)}

/* ── Ticket row ──────────────────────────────────────── */
.tkt-row{
  display:block;background:var(--bg-card);border:1px solid var(--brd);
  border-radius:var(--r);padding:14px 16px;transition:var(--tr);
  text-decoration:none;color:var(--txt);margin-bottom:10px;
}
.tkt-row:hover{background:var(--bg-card-h);border-color:var(--brd-md);box-shadow:var(--sh-sm)}
.tkt-row.pending{border-right:3px solid var(--orange)}
[dir=ltr] .tkt-row.pending{border-right:none;border-left:3px solid var(--orange)}
.tkt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.tkt-title{font-size:14px;font-weight:700;flex:1;line-height:1.4}
.tkt-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tkt-meta-i{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--txt-m)}

/* ── Upload area ─────────────────────────────────────── */
.upload-area{
  border:2px dashed var(--brd-md);border-radius:var(--r-sm);
  padding:22px;text-align:center;cursor:pointer;transition:var(--tr);
}
.upload-area:hover{border-color:var(--brd-act);background:rgba(56,189,248,.04)}
.upload-area i{font-size:24px;color:var(--txt-m);display:block;margin-bottom:7px}

/* ── Status flow ─────────────────────────────────────── */
.sf{display:flex;align-items:flex-start;padding:14px 16px;overflow-x:auto;gap:0}
.sf-step{flex:1;text-align:center;position:relative;min-width:55px}
.sf-step::before{
  content:'';position:absolute;left:50%;right:-50%;top:13px;
  height:2px;background:var(--brd);z-index:0;
}
.sf-step:first-child::before{display:none}
.sf-dot{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--brd);background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 6px;font-size:10px;font-weight:700;
  position:relative;z-index:1;transition:var(--tr);color:var(--txt-m);
}
.sf-step.done   .sf-dot{background:var(--green);border-color:var(--green);color:#fff}
.sf-step.done::before{background:var(--green)}
.sf-step.active .sf-dot{background:var(--secondary);border-color:var(--secondary);color:#fff;box-shadow:0 0 0 4px rgba(56,189,248,.2)}
.sf-lbl{font-size:9px;color:var(--txt-m);font-weight:600;line-height:1.3}
.sf-step.done   .sf-lbl{color:var(--green)}
.sf-step.active .sf-lbl{color:var(--secondary)}

/* ── Detail grid ─────────────────────────────────────── */
.det-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.det-item{display:flex;flex-direction:column;gap:4px}
.det-lbl{font-size:10.5px;color:var(--txt-m);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.det-val{font-size:13.5px;font-weight:600}

/* ── Comments ────────────────────────────────────────── */
.cmt-item{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.cmt-item:last-child{border:none;padding-bottom:0}
.cmt-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cmt-av{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}
.cmt-av-parent{background:rgba(52,211,153,.2);color:var(--green)}
.cmt-av-staff {background:rgba(56,189,248,.2);color:var(--secondary)}
.cmt-name{font-size:12.5px;font-weight:700}
.cmt-role{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700;}
.cmt-role-parent{background:rgba(52,211,153,.12);color:var(--green)}
.cmt-role-staff {background:rgba(56,189,248,.12);color:var(--secondary)}
.cmt-time{font-size:10.5px;color:var(--txt-m);margin-right:auto}
[dir=ltr] .cmt-time{margin-right:0;margin-left:auto}
.cmt-body{font-size:13px;line-height:1.7;color:var(--txt)}
.cmt-body.parent-style{
  background:rgba(52,211,153,.05);border-right:3px solid rgba(52,211,153,.35);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 13px;
}
[dir=ltr] .cmt-body.parent-style{border-right:none;border-left:3px solid rgba(52,211,153,.35);border-radius:var(--r-sm) 0 0 var(--r-sm)}

/* ── Student cards ───────────────────────────────────── */
.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:10px}
.stu-card{border:2px solid var(--brd);border-radius:var(--r-sm);padding:14px;cursor:pointer;transition:var(--tr);background:var(--bg-inp);}
.stu-card:hover{border-color:var(--brd-act)}
.stu-card.sel{border-color:var(--green);background:rgba(52,211,153,.07)}
.stu-name{font-size:13px;font-weight:700;margin-bottom:3px}
.stu-meta{font-size:11px;color:var(--txt-m);display:flex;align-items:center;gap:4px;margin-top:3px}
.not-stu-card{
  border:2px dashed rgba(251,191,36,.4);border-radius:var(--r-sm);
  padding:14px;cursor:pointer;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--accent);background:rgba(251,191,36,.04);transition:var(--tr);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.not-stu-card:hover,.not-stu-card.sel{border-color:var(--accent);background:rgba(251,191,36,.1)}

/* ── Mobile overlay & toggle ─────────────────────────── */
.mob-toggle{display:none}
.pp-overlay-mob{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);z-index:299;
}

/* ── Topbar language bar (public pages without sidebar) ─ */
.pub-topbar{
  background:var(--bg-top);backdrop-filter:blur(18px);border-bottom:1px solid var(--brd);
  padding:0 20px;height:58px;display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:100;
}
.pub-topbar-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.pub-topbar-brand img{width:30px;height:30px;object-fit:contain;flex-shrink:0}
.pub-topbar-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-topbar-sub{font-size:10px;color:var(--txt-m);white-space:nowrap}
.pub-topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── Language switch pill (compact) ─────────────────── */
.lang-switch,.lang-pill{
  display:flex;background:var(--bg-inp);border:1px solid var(--brd-md);
  border-radius:20px;overflow:hidden;flex-shrink:0;
}
.lang-switch a,.lang-pill a{
  padding:6px 14px;font-size:12px;font-weight:700;color:var(--txt-m);
  text-decoration:none;transition:var(--tr);font-family:'Cairo',sans-serif;
  display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.lang-switch a.on,.lang-pill a.on{
  background:linear-gradient(135deg,var(--primary-l),var(--secondary));color:#fff;
}
.lang-switch a:hover:not(.on),.lang-pill a:hover:not(.on){color:var(--secondary)}

/* ── Toast ───────────────────────────────────────────── */
.pp-toast{
  position:fixed;bottom:20px;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--bg-modal);border:1px solid var(--brd-md);
  border-radius:var(--r-sm);padding:12px 18px;
  display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  z-index:9999;box-shadow:var(--sh-lg);
  min-width:260px;max-width:calc(100vw - 32px);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.pp-toast.show{transform:translateX(-50%) translateY(0)}
.pp-toast.ok i{color:var(--green)}
.pp-toast.err i{color:var(--red)}

/* ── Login ───────────────────────────────────────────── */
.pp-login-wrap{min-height:100vh;display:flex;flex-direction:column}
.pp-login-body{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.pp-login-card{
  background:var(--bg-card);border:1px solid var(--brd-md);
  border-radius:22px;padding:36px 32px;width:100%;max-width:420px;box-shadow:var(--sh-lg);
}
.pp-login-logo-ico{
  width:62px;height:62px;border-radius:18px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--primary-l),var(--secondary));
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#fff;box-shadow:0 8px 24px rgba(37,99,176,.4);
}
.pp-login-title{font-size:21px;font-weight:900;text-align:center;margin-bottom:4px}
.pp-login-sub{font-size:12px;color:var(--txt-m);text-align:center;margin-bottom:24px;line-height:1.6}

/* ── Att chip ────────────────────────────────────────── */
.att-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;background:var(--bg-inp);border:1px solid var(--brd);
  border-radius:8px;text-decoration:none;font-size:11px;color:var(--txt-m);margin:3px;transition:var(--tr);
}
.att-chip:hover{border-color:var(--brd-act);color:var(--secondary)}

/* ── Empty state ─────────────────────────────────────── */
.empty-state{text-align:center;padding:44px 20px}
.empty-state i{font-size:42px;color:var(--txt-m);opacity:.3;display:block;margin-bottom:13px}
.empty-state h3{font-size:16px;font-weight:700;margin-bottom:5px}
.empty-state p{font-size:13px;color:var(--txt-m)}

/* ── Anim ────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.pp-page-content>*{animation:fadeUp .3s ease}

/* ════════════════════════════════════════════════════
   RESPONSIVE — TABLET  ≤ 1024px
════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .pp-stats{grid-template-columns:repeat(3,1fr)}
  .det-grid{grid-template-columns:1fr 1fr}
  .type-grid{grid-template-columns:repeat(4,1fr)}
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  ≤ 768px
════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Sidebar off-canvas */
  :root{--sb-w:0px}
  .pp-sb{
    transform:translateX(100%);
    width:272px!important;box-shadow:var(--sh-lg);
  }
  [dir=ltr] .pp-sb{transform:translateX(-100%)}
  .pp-sb.open{transform:translateX(0)}
  .pp-overlay-mob.show{display:block}
  .pp-main{margin-right:0!important;margin-left:0!important}
  .mob-toggle{display:flex}

  /* Content padding */
  .pp-page-content{padding:14px}
  .pp-topbar{padding:0 14px;height:54px}
  .pp-topbar-title{font-size:14px}

  /* Stats: 2 per row */
  .pp-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .pp-stat{padding:13px}
  .pp-stat-val{font-size:22px}
  .pp-stat-lbl{font-size:10.5px}
  .pp-stat-ico{width:34px;height:34px;font-size:14px;margin-bottom:8px}
  .pp-stat-hint{display:none}

  /* Cards */
  .pp-card-hd{padding:12px 14px}
  .pp-card-body{padding:13px 14px}
  .pp-card-ttl{font-size:13px}

  /* Grids → single column */
  .fr2,.fr3{grid-template-columns:1fr!important}
  .det-grid{grid-template-columns:1fr 1fr}

  /* Type grid: 2×4 → 2×4 (keep 4 cols on wider mobile, 2 cols on narrow) */
  .type-grid{grid-template-columns:repeat(2,1fr)}
  .type-btn{padding:11px 6px;font-size:11.5px}
  .type-btn i{font-size:18px;margin-bottom:4px}

  /* Priority grid: 2 per row */
  .pri-grid{grid-template-columns:repeat(2,1fr)}

  /* Tables: scroll */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
  thead th,tbody td{padding:9px 10px;font-size:12px}

  /* Ticket rows */
  .tkt-row{padding:12px 13px}
  .tkt-title{font-size:13.5px}
  .tkt-meta{gap:8px}
  .tkt-meta-i{font-size:11px}

  /* Form */
  .fsec{padding:14px}
  .fsec-ttl{font-size:12.5px}

  /* Dashboard two-col → single */
  .dash-2col{display:flex!important;flex-direction:column!important}

  /* Student grid */
  .stu-grid{grid-template-columns:repeat(2,1fr)}

  /* Filter bar */
  .filter-bar{gap:6px}
  .fchip{padding:5px 10px;font-size:11.5px}

  /* Public topbar */
  .pub-topbar{padding:0 14px;height:54px}
  .pub-topbar-sub{display:none}
  .pub-topbar-name{font-size:12px}

  /* Track search grid → single col */
  .track-search-grid{grid-template-columns:1fr!important}

  /* Ticket detail two-col → single */
  .detail-2col{display:flex!important;flex-direction:column!important}

  /* Login card */
  .pp-login-card{padding:28px 20px}
  .pp-login-logo-ico{width:54px;height:54px;font-size:22px}
  .pp-login-title{font-size:19px}

  /* SF labels smaller */
  .sf-lbl{font-size:8.5px}
  .sf-dot{width:22px;height:22px;font-size:9px}

  /* Upload area */
  .upload-area{padding:16px}
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — SMALL PHONE  ≤ 400px
════════════════════════════════════════════════════ */
@media(max-width:400px){
  .pp-stats{grid-template-columns:1fr 1fr}
  .pp-stat-val{font-size:20px}
  .type-grid{grid-template-columns:repeat(2,1fr)}
  .stu-grid{grid-template-columns:1fr}
  .pri-grid{grid-template-columns:repeat(2,1fr)}
  .pp-login-card{padding:22px 16px;border-radius:16px}
}