/* ============================================================
   MURTADHA ACADEMY [ DEMO ] — App Shell (Folio)
   Extends the v3 "Folio" illuminated-manuscript language into
   the LMS application surface. Shared by every portal screen.
   Tokens are identical to the marketing homepage (index.html).
   ============================================================ */

:root{
  --parchment:        oklch(0.955 0.022 80);
  --parchment-deep:   oklch(0.92  0.028 78);
  --parchment-bright: oklch(0.985 0.014 82);
  --vellum:           oklch(0.97  0.020 84);

  --ink:        oklch(0.20 0.025 260);
  --ink-soft:   oklch(0.36 0.025 260);
  --ink-mute:   oklch(0.54 0.020 260);

  --lapis:        oklch(0.42 0.110 151);
  --lapis-deep:   oklch(0.30 0.090 152);
  --lapis-bright: oklch(0.51 0.130 150);

  --gold:        oklch(0.74 0.130 78);
  --gold-deep:   oklch(0.58 0.135 70);
  --gold-pale:   oklch(0.88 0.060 82);

  --vermilion:      oklch(0.58 0.180 32);
  --vermilion-deep: oklch(0.50 0.180 30);
  --vermilion-pale: oklch(0.74 0.140 34);
  --emerald:        oklch(0.46 0.110 155);

  --rule:    oklch(0.78 0.030 80);
  --rule-2:  oklch(0.85 0.020 80);

  --ff-display: "Cormorant Garamond","EB Garamond",Georgia,serif;
  --ff-body:    "Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ff-arabic:  "Amiri","Scheherazade New",serif;
  --ff-mono:    "JetBrains Mono",ui-monospace,Menlo,monospace;

  --sidebar-w: 264px;
  --shadow-card: 0 1px 2px rgba(40,30,10,.04), 0 18px 40px -28px rgba(60,45,15,.30);
  --shadow-pop: 0 30px 70px -34px rgba(40,30,10,.45);
  --radius: 12px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(1100px 700px at 100% -5%, oklch(from var(--gold) l c h / .05), transparent 60%),
    radial-gradient(900px 600px at -5% 10%, oklch(from var(--lapis) l c h / .05), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.05  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:500; margin:0; letter-spacing:-0.01em; line-height:1.1; }
table{ border-collapse:collapse; width:100%; }

.arabic{ font-family:var(--ff-arabic); }
.mono{ font-family:var(--ff-mono); }
.muted{ color:var(--ink-mute); }
.soft{ color:var(--ink-soft); }
.serif{ font-family:var(--ff-display); }
.eyebrow{
  font-family:var(--ff-body); font-size:10.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
.diamond{ width:7px; height:7px; background:var(--gold-deep); transform:rotate(45deg); display:inline-block; }
.rule-orn{ display:flex; align-items:center; gap:12px; }
.rule-orn .ln{ height:1px; background:var(--rule); flex:1; }

/* ============================================================
   APP LAYOUT — sidebar + main
   ============================================================ */
.app{ display:grid; grid-template-columns: var(--sidebar-w) 1fr; min-height:100vh; }

.sidebar{
  position:sticky; top:0; align-self:start; height:100vh;
  background:
    linear-gradient(180deg, var(--lapis-deep), oklch(0.16 0.055 152));
  color: var(--parchment-bright);
  display:flex; flex-direction:column;
  border-right:1px solid oklch(from var(--gold) l c h / .25);
  overflow:hidden;
}
.sidebar::before{
  /* gold hairline rail */
  content:""; position:absolute; inset:0 0 0 auto; width:1px;
  background:linear-gradient(180deg, transparent, oklch(from var(--gold) l c h /.6), transparent);
}
.side-brand{ display:flex; align-items:center; gap:12px; padding:22px 22px 18px; border-bottom:1px solid oklch(from var(--gold) l c h / .18); }
.side-brand .mark{
  width:40px; height:40px; border-radius:9px; flex:none;
  background: var(--parchment-bright); display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px oklch(from var(--gold) l c h /.7), 0 0 0 3px oklch(from var(--gold) l c h /.12);
  overflow:hidden;
}
.side-brand .mark img{ width:30px; height:30px; object-fit:contain; }
.side-brand .wd{ font-family:var(--ff-display); font-size:18px; line-height:1.05; letter-spacing:.02em; }
.side-brand .wd small{ display:block; font-family:var(--ff-body); font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:oklch(from var(--gold-pale) l c h /.8); margin-top:3px; }

.side-role{
  margin:16px 18px 6px; padding:10px 14px; border-radius:8px;
  background:oklch(from var(--gold) l c h / .12);
  border:1px solid oklch(from var(--gold) l c h / .25);
  display:flex; align-items:center; gap:10px;
}
.side-role .av{ width:30px;height:30px;border-radius:50%; background:var(--gold-deep); color:var(--lapis-deep); display:grid;place-items:center; font-family:var(--ff-display); font-size:15px; font-weight:600; flex:none; }
.side-role .who{ display:block; font-size:12.5px; font-weight:600; line-height:1.2; }
.side-role .ro{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:oklch(from var(--gold-pale) l c h /.85); margin-top:2px; }

.side-nav{ padding:14px 12px; flex:1; overflow-y:auto; }
.side-nav .grp{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:oklch(from var(--parchment) l c h /.45); padding:14px 12px 8px; }
.side-nav a{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px;
  font-size:13px; color:oklch(from var(--parchment) l c h /.78); margin-bottom:2px;
  transition: background .15s, color .15s; position:relative;
}
.side-nav a .ic{ width:17px; text-align:center; opacity:.85; flex:none; }
.side-nav a:hover{ background:oklch(from var(--parchment) l c h /.07); color:var(--parchment-bright); }
.side-nav a.active{ background:oklch(from var(--gold) l c h /.16); color:var(--parchment-bright); }
.side-nav a.active::before{ content:""; position:absolute; left:0; top:7px; bottom:7px; width:2.5px; border-radius:2px; background:var(--gold); }
.side-nav a .tag{ margin-left:auto; font-size:10px; background:var(--vermilion); color:#fff; border-radius:99px; padding:1px 7px; font-weight:600; }
.side-foot{ padding:14px 18px; border-top:1px solid oklch(from var(--gold) l c h / .18); font-size:11px; color:oklch(from var(--parchment) l c h /.5); }

.main{ display:flex; flex-direction:column; min-width:0; }

/* ============================================================
   TOPBAR + PAGE HEADER
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:18px;
  padding:16px 36px; background:color-mix(in oklab, var(--parchment) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom:1px solid var(--rule-2);
}
.topbar .crumb{ font-size:12px; letter-spacing:.04em; color:var(--ink-mute); }
.topbar .crumb b{ color:var(--ink-soft); font-weight:600; }
.topbar .sp{ flex:1; }
.topbar .semester{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; color:var(--lapis); background:oklch(from var(--lapis) l c h /.08); border:1px solid oklch(from var(--lapis) l c h /.2); border-radius:99px; padding:5px 12px; }
.topbar .icon-btn{ width:34px;height:34px;border-radius:8px; display:grid;place-items:center; color:var(--ink-soft); border:1px solid var(--rule-2); background:var(--parchment-bright); position:relative; }
.topbar .icon-btn .dot{ position:absolute; top:7px; right:8px; width:6px;height:6px;border-radius:50%; background:var(--vermilion); }

.page{ padding:32px 36px 60px; max-width:1280px; width:100%; }
.page-head{ display:flex; align-items:flex-end; gap:20px; margin-bottom:26px; }
.page-head .titles{ min-width:0; }
.page-head h1{ font-size:34px; color:var(--ink); }
.page-head .sub{ font-family:var(--ff-display); font-style:italic; font-size:17px; color:var(--ink-soft); margin-top:4px; }
.page-head .actions{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   BUTTONS / CHIPS / PILLS
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; border-radius:3px; transition:transform .18s, box-shadow .18s, background .18s; white-space:nowrap; }
.btn-primary{ background:var(--lapis); color:var(--parchment-bright); box-shadow: inset 0 0 0 1px oklch(from var(--gold) l c h /.5); }
.btn-primary:hover{ background:var(--lapis-deep); transform:translateY(-1px); }
.btn-gold{ background:var(--gold-deep); color:var(--lapis-deep); }
.btn-gold:hover{ background:var(--gold); transform:translateY(-1px); }
.btn-ghost{ background:var(--parchment-bright); color:var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.btn-ghost:hover{ box-shadow: inset 0 0 0 1px var(--ink-soft); }
.btn-sm{ padding:6px 11px; font-size:10px; }

.chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; font-size:11.5px; border:1px solid var(--rule); border-radius:99px; color:var(--ink-soft); background:var(--parchment-bright); cursor:pointer; transition:all .15s; }
.chip:hover{ border-color:var(--ink-mute); }
.chip.active{ background:var(--lapis); color:var(--parchment-bright); border-color:var(--lapis); }

/* status pills — color-coded across the system */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.04em; padding:3px 10px; border-radius:99px; line-height:1.5; white-space:nowrap; }
.pill::before{ content:""; width:6px;height:6px;border-radius:50%; background:currentColor; opacity:.9; }
.pill.ok{ color:var(--emerald); background:oklch(from var(--emerald) l c h /.12); }
.pill.warn{ color:var(--vermilion-deep); background:oklch(from var(--vermilion) l c h /.12); }
.pill.gold{ color:var(--gold-deep); background:oklch(from var(--gold) l c h /.15); }
.pill.lapis{ color:var(--lapis); background:oklch(from var(--lapis) l c h /.1); }
.pill.mute{ color:var(--ink-mute); background:oklch(from var(--ink-mute) l c h /.1); }

/* ============================================================
   CARDS / FRAMES
   ============================================================ */
.card{ position:relative; background:var(--parchment-bright); border:1px solid var(--rule-2); border-radius:var(--radius); box-shadow:var(--shadow-card); }
.card.framed::before{ content:""; position:absolute; inset:7px; border:1px solid oklch(from var(--gold-deep) l c h /.28); border-radius:8px; pointer-events:none; }
.card-head{ display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--rule-2); }
.card-head h3{ font-size:19px; color:var(--ink); }
.card-head .eyebrow{ margin-bottom:2px; }
.card-head .actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.card-body{ padding:20px 22px; }
.card-foot{ padding:14px 22px; border-top:1px solid var(--rule-2); display:flex; align-items:center; gap:12px; font-size:12px; color:var(--ink-mute); }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* stat tiles */
.stat{ position:relative; background:var(--parchment-bright); border:1px solid var(--rule-2); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-card); overflow:hidden; }
.stat::after{ content:""; position:absolute; top:0; right:0; width:64px; height:64px; background:radial-gradient(circle at 80% 20%, oklch(from var(--gold) l c h /.18), transparent 70%); }
.stat .k{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }
.stat .v{ font-family:var(--ff-display); font-size:40px; line-height:1; color:var(--ink); margin:10px 0 6px; }
.stat .d{ font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.stat .d .up{ color:var(--emerald); } .stat .d .dn{ color:var(--vermilion-deep); }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap{ overflow-x:auto; }
.table{ font-size:13px; }
.table thead th{ text-align:left; font-family:var(--ff-body); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--rule); white-space:nowrap; }
.table tbody td{ padding:13px 16px; border-bottom:1px solid var(--rule-2); vertical-align:middle; }
.table tbody tr:hover{ background:oklch(from var(--gold) l c h /.05); }
.table tbody tr:last-child td{ border-bottom:0; }
.table .num{ font-family:var(--ff-mono); font-size:12px; color:var(--ink-soft); }
.table .name{ font-weight:600; color:var(--ink); }
.table .name .id{ display:block; font-family:var(--ff-mono); font-size:10.5px; font-weight:400; color:var(--ink-mute); }

/* person cell with monogram avatar */
.person{ display:flex; align-items:center; gap:11px; }
.person .av{ width:34px;height:34px;border-radius:50%; flex:none; display:grid;place-items:center; font-family:var(--ff-display); font-size:15px; font-weight:600; background:oklch(from var(--lapis) l c h /.12); color:var(--lapis); box-shadow:inset 0 0 0 1px oklch(from var(--gold) l c h /.4); }
.person .av.gold{ background:oklch(from var(--gold) l c h /.18); color:var(--gold-deep); }

/* ============================================================
   ADMISSIONS PIPELINE (kanban)
   ============================================================ */
.pipeline{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(232px,1fr); gap:16px; overflow-x:auto; padding-bottom:8px; }
.pcol{ background:var(--parchment-deep); border:1px solid var(--rule-2); border-radius:10px; display:flex; flex-direction:column; min-height:120px; }
.pcol-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--rule-2); }
.pcol-head .t{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); }
.pcol-head .ct{ margin-left:auto; font-family:var(--ff-mono); font-size:11px; color:var(--ink-mute); background:var(--parchment-bright); border:1px solid var(--rule-2); border-radius:99px; padding:1px 8px; }
.pcol-body{ padding:10px; display:flex; flex-direction:column; gap:9px; }
.pcard{ background:var(--parchment-bright); border:1px solid var(--rule-2); border-left:3px solid var(--lapis); border-radius:7px; padding:11px 12px; box-shadow:0 6px 16px -12px rgba(40,30,10,.4); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.pcard:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -16px rgba(40,30,10,.5); }
.pcard.gold{ border-left-color:var(--gold-deep); }
.pcard.verm{ border-left-color:var(--vermilion); }
.pcard.emer{ border-left-color:var(--emerald); }
.pcard .nm{ font-weight:600; font-size:13px; color:var(--ink); }
.pcard .mt{ font-size:11px; color:var(--ink-mute); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; }
.pcard .pr{ font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; }

/* ============================================================
   GRADEBOOK GRID
   ============================================================ */
.gradebook{ font-size:13px; }
.gradebook th, .gradebook td{ padding:11px 14px; border-bottom:1px solid var(--rule-2); text-align:center; }
.gradebook thead th{ font-family:var(--ff-body); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; border-bottom:1px solid var(--rule); }
.gradebook thead th .wt{ display:block; font-family:var(--ff-mono); font-size:10px; color:var(--gold-deep); font-weight:500; letter-spacing:0; text-transform:none; margin-top:2px; }
.gradebook tbody th{ text-align:left; font-weight:600; color:var(--ink); }
.gradebook .score{ font-family:var(--ff-mono); }
.gradebook .final{ font-family:var(--ff-display); font-size:20px; font-weight:600; }
.gradebook tbody tr:hover{ background:oklch(from var(--gold) l c h /.05); }
.gradebook .col-final{ background:oklch(from var(--lapis) l c h /.05); }

/* letter grade chip */
.grade{ display:inline-grid; place-items:center; width:34px; height:30px; border-radius:6px; font-family:var(--ff-display); font-size:17px; font-weight:600; }
.grade.a{ background:oklch(from var(--emerald) l c h /.14); color:var(--emerald); }
.grade.b{ background:oklch(from var(--lapis) l c h /.12); color:var(--lapis); }
.grade.c{ background:oklch(from var(--gold) l c h /.18); color:var(--gold-deep); }
.grade.d,.grade.f{ background:oklch(from var(--vermilion) l c h /.14); color:var(--vermilion-deep); }

/* ============================================================
   ATTENDANCE GRID
   ============================================================ */
.att-grid{ font-size:12.5px; }
.att-grid th, .att-grid td{ padding:9px 8px; text-align:center; border-bottom:1px solid var(--rule-2); }
.att-grid thead th{ font-family:var(--ff-mono); font-size:10px; color:var(--ink-mute); font-weight:500; }
.att-grid tbody th{ text-align:left; font-weight:600; padding-left:14px; white-space:nowrap; }
.att-mark{ display:inline-grid; place-items:center; width:26px;height:26px; border-radius:6px; font-size:11px; font-weight:700; }
.att-mark.p{ background:oklch(from var(--emerald) l c h /.14); color:var(--emerald); }      /* present */
.att-mark.a{ background:oklch(from var(--vermilion) l c h /.14); color:var(--vermilion-deep); } /* absent */
.att-mark.e{ background:oklch(from var(--gold) l c h /.18); color:var(--gold-deep); }        /* excused */
.att-mark.l{ background:oklch(from var(--lapis) l c h /.12); color:var(--lapis); }           /* late */
.att-cam{ font-size:9px; }  /* camera-off indicator */

/* ============================================================
   FORMS
   ============================================================ */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:10px 13px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--vellum); border:1px solid var(--rule); border-radius:7px; transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--lapis); box-shadow:0 0 0 3px oklch(from var(--lapis) l c h /.12); }
.field .hint{ font-size:11px; color:var(--ink-mute); margin-top:5px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ============================================================
   TABS / SECTION HEADS
   ============================================================ */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--rule); margin-bottom:22px; }
.tabs a{ padding:11px 16px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; position:relative; }
.tabs a.active{ color:var(--ink); }
.tabs a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold-deep); }

.sec-head{ display:flex; align-items:center; gap:12px; margin:34px 0 16px; }
.sec-head h2{ font-size:22px; color:var(--ink); }
.sec-head .ln{ flex:1; height:1px; background:var(--rule); }

/* list rows (announcements, deadlines, activity) */
.rows{ display:flex; flex-direction:column; }
.rowi{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--rule-2); }
.rowi:last-child{ border-bottom:0; }
.rowi .mk{ width:36px;height:36px;border-radius:8px; flex:none; display:grid;place-items:center; background:oklch(from var(--lapis) l c h /.1); color:var(--lapis); font-size:15px; }
.rowi .mk.gold{ background:oklch(from var(--gold) l c h /.16); color:var(--gold-deep); }
.rowi .mk.verm{ background:oklch(from var(--vermilion) l c h /.13); color:var(--vermilion-deep); }
.rowi .bd{ min-width:0; flex:1; }
.rowi .bd .t{ font-weight:600; color:var(--ink); font-size:13.5px; }
.rowi .bd .m{ font-size:12px; color:var(--ink-mute); margin-top:2px; }
.rowi .when{ font-family:var(--ff-mono); font-size:11px; color:var(--ink-mute); white-space:nowrap; }

/* progress meter */
.meter{ height:7px; border-radius:99px; background:oklch(from var(--ink-mute) l c h /.14); overflow:hidden; }
.meter > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); }
.meter.lapis > i{ background:linear-gradient(90deg,var(--lapis),var(--lapis-bright)); }

.rise{ animation:rise .7s cubic-bezier(.2,.7,.1,1) both; }
.rise-1{ animation-delay:.04s } .rise-2{ animation-delay:.12s } .rise-3{ animation-delay:.2s } .rise-4{ animation-delay:.28s }
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:-300px; z-index:60; transition:left .2s; }
  .sidebar.open{ left:0; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .page{ padding:24px 20px 48px; }
  .topbar{ padding:14px 20px; }
}