/* =====================================================================
   Safwa Academy — Student PORTAL styles (loads after styles.css)
   ===================================================================== */
body.portal { background: var(--paper); }
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

/* Sidebar */
.side { background:#fff; border-inline-end:1px solid var(--stone-200); position: sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding: 22px 16px; z-index: 50; }
.side .logo { padding: 6px 8px 22px; font-size: 21px; }
.side nav { display:grid; gap:4px; }
.side nav a { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:13px; font-weight:700; font-size:15px; color:var(--stone-500); transition:.16s; }
.side nav a .ic { font-size:18px; width:22px; text-align:center; }
.side nav a:hover { background: var(--stone-100); color: var(--ink); }
.side nav a.on { background: var(--brand-soft); color: var(--brand-dark); }
.side .badge-pill { margin-inline-start:auto; background: var(--gold); color:#3a2c00; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; }
.side .me { margin-top:auto; display:flex; align-items:center; gap:11px; padding:12px; border-radius:14px; background: var(--stone-100); }
.side .me .av { width:40px;height:40px;border-radius:12px; background:var(--brand); color:#fff; display:grid;place-items:center; font-weight:800; overflow:hidden;}
.side .me .av img{width:100%;height:100%;object-fit:cover;}
.side .me b { font-size:14px; display:block; } .side .me small { color:var(--stone-400); font-size:12px; }

/* Main */
.main { min-width:0; }
.topbar { position: sticky; top:0; z-index:40; background: rgba(250,249,247,.85); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--stone-200); display:flex; align-items:center; gap:16px; padding: 16px 30px; }
.topbar h1 { font-family:var(--font-display); font-size:24px; }
.sbToggle { display:none; width:42px;height:42px;border-radius:12px;border:1.5px solid var(--stone-200); background:#fff; }
.sbToggle span{ display:block; width:18px;height:2px;background:var(--ink);margin:3px auto;border-radius:2px;}
.top-actions { margin-inline-start:auto; display:flex; align-items:center; gap:12px; }
.streak-pill { display:flex; align-items:center; gap:7px; background: var(--gold-soft); color:#8a6d00; font-weight:800; font-size:14px; padding:9px 15px; border-radius:999px; }
.icon-btn { width:44px;height:44px;border-radius:13px;border:1.5px solid var(--stone-200); background:#fff; font-size:18px; position:relative; }
.icon-btn .dot { position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--rose); }
.top-av { width:44px;height:44px;border-radius:13px; overflow:hidden; background:var(--brand); }
.top-av img{width:100%;height:100%;object-fit:cover;}
.content { padding: 26px 30px 60px; }

/* Views */
.view { display:none; } .view.active { display:block; }

/* Welcome banner */
.welcome { background: linear-gradient(120deg, var(--brand), var(--brand-dark)); color:#fff; border-radius: var(--radius-lg);
  padding: 30px 34px; display:flex; align-items:center; gap: 24px; position:relative; overflow:hidden; box-shadow: var(--shadow); }
.welcome h2 { font-size: 28px; } .welcome p { color: rgba(255,255,255,.8); margin-top:8px; max-width: 460px; }
.welcome .art { margin-inline-start:auto; font-size: 68px; }
.welcome .btn { margin-top:18px; }

/* Stat cards */
.cards { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top: 22px; }
.pcard { background:#fff; border:1px solid var(--stone-200); border-radius: var(--radius-lg); padding:20px; transition:.2s; }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.pcard .ic { width:46px;height:46px;border-radius:13px; display:grid;place-items:center; font-size:22px; margin-bottom:14px; }
.pcard .v { font-family:var(--font-display); font-size:28px; font-weight:600; line-height:1; }
.pcard .l { color:var(--stone-500); font-size:13.5px; margin-top:6px; }
.ic-em{background:var(--brand-soft);} .ic-gd{background:var(--gold-soft);} .ic-sk{background:var(--sky-soft);} .ic-vi{background:var(--violet-soft);}

/* Grid layout */
.grid2 { display:grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap:20px; margin-top:22px; }
.panel { background:#fff; border:1px solid var(--stone-200); border-radius: var(--radius-lg); padding: 24px; min-width:0; }
.cards > *, .grid2 > * { min-width:0; }
.panel h3 { font-family:var(--font-body); font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:space-between; margin:0; }
.panel .link { font-size:13px; font-weight:700; color:var(--brand); }

/* Up-next class */
.upnext { display:flex; gap:16px; align-items:center; margin-top:18px; padding:16px; border-radius:16px; background:var(--brand-soft); flex-wrap:wrap; }
.upnext > div { min-width:0; }
.upnext .when { text-align:center; background:#fff; border-radius:13px; padding:10px 14px; box-shadow:var(--shadow-sm); }
.upnext .when b { font-family:var(--font-display); font-size:22px; display:block; color:var(--brand); }
.upnext .when small { font-size:11px; color:var(--stone-500); text-transform:uppercase; }
.upnext h4 { font-family:var(--font-body); font-weight:800; font-size:16px; } .upnext p { font-size:13px; color:var(--stone-500); margin-top:3px; }

/* Ring */
.ring-prog { position:relative; width:120px;height:120px; }
.ring-prog svg { transform: rotate(-90deg); }
.ring-bg { fill:none; stroke: var(--stone-100); stroke-width:12; }
.ring-fg { fill:none; stroke: var(--brand); stroke-width:12; stroke-linecap:round; }
.ring-prog .lbl { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring-prog .lbl b { font-family:var(--font-display); font-size:26px; }
.ring-prog .lbl small { font-size:11px; color:var(--stone-500); display:block; }
.ring-center { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; margin-top:6px; }

/* Progress bars / memorization */
.mline { display:grid; gap:16px; margin-top:18px; }
.mrow .top { display:flex; justify-content:space-between; font-size:14px; font-weight:700; margin-bottom:7px; }
.mrow .top span.p { color:var(--stone-400); font-weight:600; }
.bar { height:11px; background:var(--stone-100); border-radius:999px; overflow:hidden; }
.bar-fg { height:100%; width:0; border-radius:999px; transition: width 1.3s var(--ease); }

/* Timeline */
.timeline { position:relative; margin-top:20px; padding-inline-start:26px; }
.timeline::before { content:""; position:absolute; inset-inline-start:8px; top:6px; bottom:6px; width:2px; background:var(--stone-200); }
.tl { position:relative; padding-bottom:22px; }
.tl:last-child{padding-bottom:0;}
.tl .node { position:absolute; inset-inline-start:-26px; top:2px; width:18px;height:18px;border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px var(--stone-200); background:var(--stone-200); }
.tl.done .node { background:var(--brand); box-shadow:0 0 0 2px var(--brand); }
.tl.now .node { background:var(--gold); box-shadow:0 0 0 2px var(--gold); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 2px var(--gold);} 50%{box-shadow:0 0 0 6px rgba(212,160,23,.3);} }
.tl h4 { font-family:var(--font-body); font-weight:800; font-size:15.5px; } .tl p { font-size:13px; color:var(--stone-500); margin-top:2px; }
.tl .date { font-size:12px; color:var(--stone-400); font-weight:700; }

/* Badges */
.badges { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:16px; margin-top:20px; }
.badge { background:#fff; border:1px solid var(--stone-200); border-radius: var(--radius); padding:20px 12px; text-align:center; transition:.2s; cursor:pointer; position:relative; }
.badge .em { font-size:40px; display:block; transition: transform .25s var(--ease); }
.badge b { font-size:13px; display:block; margin-top:10px; }
.badge small { font-size:11px; color:var(--stone-400); }
.badge.earned:hover .em { transform: scale(1.15) rotate(-6deg); }
.badge.earned { border-color: var(--gold); box-shadow: 0 6px 18px -10px rgba(212,160,23,.6); }
.badge.locked { opacity:.55; filter: grayscale(.7); }
.badge .ribbon { position:absolute; top:-9px; inset-inline-end:8px; background:var(--gold); color:#3a2c00; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; }
.badge.pop { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Class list */
.clist { margin-top:6px; }
.crow { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--stone-100); }
.crow:last-child{border:none;}
.crow .cic { width:46px;height:46px;border-radius:13px; display:grid;place-items:center; font-size:20px; flex:none; }
.crow h4 { font-family:var(--font-body); font-weight:800; font-size:15.5px; } .crow p { font-size:13px; color:var(--stone-500); margin-top:2px; }
.crow .st { margin-inline-start:auto; font-size:12px; font-weight:800; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.st-done{background:var(--brand-soft); color:var(--brand-dark);} .st-up{background:var(--sky-soft); color:var(--sky);} .st-miss{background:var(--rose-soft); color:var(--rose);}
.seg { display:inline-flex; background:var(--stone-100); border-radius:999px; padding:4px; gap:4px; margin-bottom:18px; }
.seg button { border:none; background:none; padding:8px 18px; border-radius:999px; font-weight:700; font-size:14px; color:var(--stone-500); }
.seg button.on { background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }

/* Notifications */
.nlist{margin-top:6px;}
.nrow{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--stone-100);align-items:center;}
.nrow .ni{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:none;background:var(--brand-soft);}
.nrow.unread{background:linear-gradient(90deg,var(--brand-soft),transparent);border-radius:12px;padding-inline:12px;}
.nrow h4{font-family:var(--font-body);font-weight:700;font-size:15px;} .nrow p{font-size:13px;color:var(--stone-500);margin-top:2px;} .nrow .t{font-size:12px;color:var(--stone-400);margin-inline-start:auto;white-space:nowrap;}

/* Profile */
.prof-head{display:flex;align-items:center;gap:20px;margin-bottom:24px;}
.prof-head .av{width:84px;height:84px;border-radius:22px;overflow:hidden;background:var(--brand);}
.prof-head .av img{width:100%;height:100%;object-fit:cover;}

/* sidebar scrim */
.sb-scrim{position:fixed;inset:0;background:rgba(28,25,23,.4);z-index:45;opacity:0;pointer-events:none;transition:.3s;}
.sb-scrim.open{opacity:1;pointer-events:auto;}

@media (max-width: 900px) {
  .cards { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .grid2 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset:0 auto 0 0; width: 264px; transform: translateX(-105%); transition: transform .32s var(--ease); box-shadow: var(--shadow-lg); }
  .side.open { transform:none; }
  .sbToggle { display:block; }
  .content { padding: 20px 18px 50px; }
  .topbar { padding: 14px 18px; }
  .topbar h1 { font-size:20px; }
  .welcome { flex-direction:column; text-align:center; }
  .welcome .art { margin:0; }
  .streak-pill span.txt{display:none;}
}
@media (max-width:420px){ .cards{grid-template-columns:1fr;} }