@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=Amiri:wght@400;700&display=swap');

/* ==========================================================================
   Eemaan Foundation School ERP — "Illuminated Madrasa" design system (v57)
   A single, coherent stylesheet replacing the accreted v13–v44 patch layers.
   One visual identity: emerald + antique gold + parchment, with a restrained
   khatam (eight-pointed star) as the signature motif. Class names match the
   existing markup exactly; no HTML or JS hooks are changed.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root{
  /* Emerald — the institutional core */
  --emerald:#0c5a3f;
  --emerald-700:#084230;
  --emerald-900:#062a1f;
  --emerald-50:#eaf3ee;
  --emerald-100:#d8e8de;

  /* Gold — antique brass / gilt, used sparingly */
  --gold:#bd8a3c;
  --gold-deep:#9a6f2c;
  --gold-soft:#ecd9a6;
  --gold-tint:#f6ecd2;

  /* Parchment & paper */
  --parchment:#f7f2e7;
  --parchment-2:#fbf8f0;
  --paper:#ffffff;

  /* Ink & neutrals */
  --ink:#18271f;
  --ink-soft:#2c3c34;
  --muted:#5d6f66;
  --line:#e6ddc9;
  --line-soft:#efe8d8;

  /* Semantic */
  --success:#2f7d4f;
  --success-bg:#e9f6ee;
  --success-line:#bfe0cb;
  --danger:#b03636;
  --danger-bg:#fbeded;
  --danger-line:#eec4c4;
  --info:#1d5d91;
  --info-bg:#eaf3fb;
  --info-line:#c3dbef;
  --warn:#8a681d;
  --warn-bg:#fbf2da;
  --warn-line:#ead9a6;

  /* Geometry */
  --radius:20px;
  --radius-sm:13px;
  --radius-pill:999px;
  --shadow:0 14px 38px rgba(8,52,35,.09);
  --shadow-sm:0 6px 18px rgba(8,52,35,.07);
  --shadow-lg:0 24px 60px rgba(8,52,35,.16);
  --ring:0 0 0 3px rgba(189,138,60,.4);

  /* Compatibility aliases (older variable names referenced in markup) */
  --green:var(--emerald); --green2:var(--emerald-700); --green-dark:var(--emerald-700);
  --cream:var(--parchment); --text:var(--ink); --border:var(--line);

  /* Type */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-arabic:'Amiri','Scheherazade New',Georgia,serif;

  /* Layout widths */
  --page-max:1640px;
  --public-max:1240px;
  --sidebar-w:328px;
  --gap:24px;

  /* Signature: khatam (eight-pointed star) — gold tile, emerald star */
  --khatam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23084230'%3E%3Crect x='5.2' y='5.2' width='13.6' height='13.6' rx='1'/%3E%3Crect x='5.2' y='5.2' width='13.6' height='13.6' rx='1' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E");
  --khatam-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23bd8a3c'%3E%3Crect x='5.2' y='5.2' width='13.6' height='13.6' rx='1'/%3E%3Crect x='5.2' y='5.2' width='13.6' height='13.6' rx='1' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Reset & base -------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:
    radial-gradient(1200px 480px at 100% -8%,rgba(189,138,60,.07),transparent 60%),
    radial-gradient(1100px 520px at -10% 0,rgba(12,90,63,.06),transparent 55%),
    var(--parchment);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--emerald);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--gold-deep)}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--emerald-700);line-height:1.18;letter-spacing:-.01em}
h1{font-size:clamp(24px,2.4vw,32px);margin:.1em 0 .4em}
h2{font-size:clamp(20px,1.9vw,25px);margin:.2em 0 .5em}
h3{font-size:18px;margin:.2em 0 .4em}
p{margin:.5em 0}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:var(--gold-tint);color:var(--emerald-700);border-radius:7px;padding:2px 7px}
.muted{color:var(--muted)}
.small,.tiny{font-size:12.5px}
.tiny{font-size:11.5px}
.inline{display:inline}
.eyebrow{font-family:var(--font-body);letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;font-weight:800;color:var(--gold-deep)}

/* Accessible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:8px;
}

/* ---- Top bar ------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px clamp(16px,4vw,40px);
  min-height:68px;
  background:linear-gradient(120deg,var(--emerald-700),var(--emerald) 62%,var(--emerald-700));
  color:#fff;
  border-bottom:2px solid var(--gold);
  box-shadow:0 10px 30px rgba(6,42,31,.22);
}
.brand{display:flex;align-items:center;gap:13px;color:#fff;min-width:0}
.brand strong{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.1;color:#fff;letter-spacing:0}
.brand small{display:block;color:var(--gold-soft);font-size:11.5px;font-weight:600;letter-spacing:.04em;margin-top:3px}
.logo,.header-logo-box{
  width:52px;height:52px;flex:0 0 52px;
  display:grid;place-items:center;overflow:hidden;
  border-radius:14px;background:#fff;padding:6px;
  box-shadow:0 5px 14px rgba(0,0,0,.18),inset 0 0 0 2px rgba(189,138,60,.7);
}
.header-logo-box img,.logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:9px;background:#fff}
nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
nav a{
  color:#fff;font-weight:600;font-size:14px;
  padding:8px 13px;border-radius:var(--radius-pill);
  border:1px solid transparent;transition:background .15s ease,border-color .15s ease;
}
nav a:hover{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(236,217,166,.35)}
nav a.pill,.topbar nav a.pill{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:var(--emerald-900);font-weight:800;border-color:transparent}
nav a.pill:hover{filter:brightness(1.04)}

/* ---- Page container & shell --------------------------------------------- */
.container{width:min(var(--public-max),94vw);margin:26px auto 72px}
.app-shell{display:block}
.main-column{min-width:0}
@media(min-width:1051px){
  .container{width:min(var(--page-max),96vw)}
  .app-shell{display:flex;align-items:flex-start;gap:var(--gap)}
  .main-column{flex:1 1 auto;min-width:0;max-width:calc(100% - var(--sidebar-w) - var(--gap))}
  .right-sidebar{
    flex:0 0 var(--sidebar-w);width:var(--sidebar-w);
    position:sticky;top:88px;align-self:flex-start;
    display:grid;grid-template-columns:1fr;gap:16px;
    max-height:calc(100vh - 108px);overflow-y:auto;
    padding:2px 4px 18px 0;
  }
  .right-sidebar::-webkit-scrollbar{width:7px}
  .right-sidebar::-webkit-scrollbar-thumb{background:var(--gold-soft);border-radius:999px}
  .right-sidebar::-webkit-scrollbar-track{background:transparent}
}
@media(max-width:1050px){
  .app-shell{display:flex;flex-direction:column;gap:18px}
  .main-column{order:1}
  .right-sidebar{order:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
}

/* ---- Module / role navigation menu -------------------------------------- */
.role-menu,.erp-menu,.module-icon-menu{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:9px;margin:0 0 22px;padding:14px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.module-icon-menu a,.erp-menu a,.role-menu a{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:var(--radius-sm);
  background:var(--parchment-2);
  border:1px solid var(--line);
  color:var(--emerald-700);font-weight:700;font-size:13.5px;line-height:1.25;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.module-icon-menu a:hover,.erp-menu a:hover,.role-menu a:hover{
  transform:translateY(-1px);
  background:#fff;
  border-color:var(--gold);
  box-shadow:var(--shadow-sm);
}
.menu-icon{
  width:34px;height:34px;min-width:34px;border-radius:11px;
  display:grid;place-items:center;font-size:17px;line-height:1;
  background:linear-gradient(135deg,var(--emerald),var(--emerald-700));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(236,217,166,.28);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn{
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;color:var(--emerald-700);
  padding:10px 17px;font-family:var(--font-body);font-weight:700;font-size:14px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .12s ease,box-shadow .14s ease,filter .14s ease,background .14s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:var(--emerald-900);border-color:transparent;font-weight:800;
}
.btn.primary:hover{filter:brightness(1.04)}
.btn.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.btn.small{font-size:12px;padding:7px 12px}
.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px}

/* ---- Forms --------------------------------------------------------------- */
label{font-weight:700;font-size:13px;color:var(--ink-soft);display:block}
input,textarea,select{
  width:100%;margin-top:7px;
  border:1px solid #d8cfb8;border-radius:var(--radius-sm);
  padding:11px 13px;background:#fff;color:var(--ink);
  font:inherit;transition:border-color .14s ease,box-shadow .14s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--gold);box-shadow:var(--ring);
}
textarea{min-height:96px;resize:vertical;line-height:1.6}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;align-items:end}
.wide-field{grid-column:1/-1}
.checkline{display:flex;gap:9px;align-items:center;margin-top:10px;font-size:13.5px;color:var(--ink-soft);font-weight:600}
.checkline input{width:auto;margin:0}
.mini-form{display:grid;gap:8px}
.mini-form textarea{min-height:54px}

/* ---- Panels, cards & illuminated headers -------------------------------- */
.panel,.dashboard,.auth-card,.application-card,.question,.sidebar-card,
.appraisal-card,.tutorial-card,.cloud-board,.cloud-mini-panel,.cloud-status-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel,.dashboard{padding:24px;margin:18px 0;position:relative;overflow:hidden}
.application-card{padding:24px;margin-top:18px}
.question{padding:20px;margin:14px 0}

/* Illuminated header bar with khatam marker (replaces generic glyph) */
.panel>h1:first-child,.panel>h2:first-child,
.dashboard>h1:first-child,.dashboard>h2:first-child,
.auth-card>h1:first-child,.auth-card>h2:first-child,
.application-card>h2:first-child{
  display:flex;align-items:center;gap:13px;
  margin:-24px -24px 20px;padding:17px 22px;
  background:linear-gradient(120deg,var(--emerald-700),var(--emerald));
  color:#fff;border-bottom:2px solid var(--gold);
  font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:0;
}
.panel>h1:first-child::before,.panel>h2:first-child::before,
.dashboard>h1:first-child::before,.dashboard>h2:first-child::before,
.auth-card>h1:first-child::before,.auth-card>h2:first-child::before,
.application-card>h2:first-child::before{
  content:"";flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  background:var(--gold-tint) var(--khatam) center/22px 22px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(189,138,60,.55);
}

/* ---- Stats --------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:16px;margin:18px 0}
.stats.erp-stats{grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.stats.mini{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:10px 0 16px}
.stats div{
  background:linear-gradient(150deg,#fff,var(--gold-tint));
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 18px;text-align:center;box-shadow:var(--shadow-sm);
}
.stats.mini div{padding:13px;min-height:76px}
.stats strong{display:block;font-family:var(--font-display);font-size:30px;color:var(--emerald);line-height:1.1}
.stats.mini strong{font-size:21px}
.stats span{color:var(--muted);font-weight:700;font-size:12.5px}

/* ---- Tables -------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
th,td{padding:12px 13px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
th{
  background:linear-gradient(135deg,var(--gold-tint),#fff6e4);
  color:var(--warn);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:1;
}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--parchment-2)}
.compact-table th,.compact-table td{padding:8px 10px;font-size:13.5px}
.actions-cell{min-width:260px}
.actions-cell .btn,.actions-cell form{margin:2px 3px 2px 0}

/* ---- Badges & status pills ---------------------------------------------- */
.badge{
  display:inline-block;background:var(--emerald-50);color:var(--emerald);
  border:1px solid var(--emerald-100);border-radius:var(--radius-pill);
  padding:5px 11px;font-weight:700;font-size:12px;white-space:nowrap;
}
.danger-badge{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.status-pill{
  display:inline-block;border-radius:var(--radius-pill);padding:6px 12px;
  font-weight:800;font-size:12px;border:1px solid var(--line);background:#fff;letter-spacing:.01em;
}
.status-application-submitted{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.status-admission-in-process{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.status-admitted{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.status-rejected{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.status-pill.status-closed,.status-pill.status-cancelled{background:var(--gold-tint);color:var(--gold-deep);border-color:var(--gold-soft)}
.status-pill.status-completed{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.status-pill.status-scheduled{background:var(--emerald-50);color:var(--emerald);border-color:var(--emerald-100)}
/* The markup adds .blink-status; we replace the harsh blink with a calm pulse */
.blink-status{animation:gentlePulse 2.6s ease-in-out infinite}
@keyframes gentlePulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ---- Notices ------------------------------------------------------------- */
.notice{border-radius:var(--radius-sm);padding:13px 16px;margin:14px 0;border:1px solid var(--line);font-weight:500}
.notice.success{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.notice.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.notice.info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.warning-panel{background:var(--warn-bg);border-color:var(--warn-line)}
.focus-panel{border:2px solid var(--gold);background:linear-gradient(150deg,#fff,var(--gold-tint))}
.error-panel{border-color:var(--danger-line);background:var(--danger-bg)}

/* ---- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.45fr .8fr;gap:26px;align-items:stretch;
  background:
    radial-gradient(circle at 82% 12%,rgba(189,138,60,.3),transparent 38%),
    linear-gradient(125deg,var(--emerald) 0%,var(--emerald-700) 70%,var(--emerald-900));
  color:#fff;border:1px solid rgba(189,138,60,.4);
  border-radius:26px;padding:clamp(26px,3.5vw,44px);
  box-shadow:var(--shadow-lg);
}
/* khatam watermark — the one large flourish */
.hero::after{
  content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px;
  background:var(--khatam-gold) center/contain no-repeat;opacity:.1;pointer-events:none;
}
.hero>div{position:relative;z-index:1}
.hero .eyebrow{color:var(--gold-soft)}
.hero h1{color:#fff;font-size:clamp(27px,3.6vw,44px);line-height:1.06;margin:10px 0 16px}
.hero p{font-size:16.5px;line-height:1.7;color:#e9f3ee}
.hero .actions .btn{background:rgba(255,255,255,.94)}
.hero .actions .btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold-soft))}
.hero-card{
  background:rgba(255,255,255,.1);border:1px solid rgba(236,217,166,.32);
  border-radius:var(--radius);padding:26px;color:#fff;backdrop-filter:blur(8px);
}
.hero-card h3{color:#fff}
.hero-card ol,.hero-card ul{padding-left:20px;margin:10px 0 0}
.hero-card li{margin:11px 0;color:#eef7f0;line-height:1.55}
.erp-hero .muted,.erp-hero small,.hero .muted{color:rgba(255,255,255,.8)}

/* ---- Auth cards ---------------------------------------------------------- */
.auth-card{
  position:relative;overflow:hidden;
  width:min(720px,94vw);margin:42px auto;padding:30px;
}
.auth-card::after{
  content:"";position:absolute;right:-50px;bottom:-50px;width:200px;height:200px;
  background:var(--khatam-gold) center/contain no-repeat;opacity:.07;pointer-events:none;
}
.auth-card form{position:relative;z-index:1;display:grid;gap:14px;max-width:520px}
.auth-card .btn{justify-self:start;margin-top:4px}

/* ---- Dashboard tiles ----------------------------------------------------- */
.cloud-dash-main{display:block}
.cloud-heading{
  background:rgba(255,255,255,.74);border:1px solid var(--line);
  border-left:6px solid var(--gold);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 22px;box-shadow:var(--shadow-sm);
}
.cloud-heading h1{margin:0;color:var(--emerald-700)}
.cloud-heading p{margin:7px 0 0;color:var(--muted);line-height:1.5;max-width:860px}
.cloud-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:0 0 30px}
.teacher-grid,.student-grid,.staff-grid{grid-template-columns:repeat(auto-fill,minmax(154px,1fr))}
.cloud-tile{
  position:relative;overflow:hidden;
  min-height:134px;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:16px 10px;border-radius:18px;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 26px rgba(6,42,31,.14);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.cloud-tile:hover{transform:translateY(-3px);filter:brightness(1.05);box-shadow:0 18px 34px rgba(6,42,31,.2);color:#fff}
.cloud-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 12%,rgba(255,255,255,.22),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.1));pointer-events:none}
.cloud-tile .tile-icon{font-size:42px;line-height:1;margin-bottom:10px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15));z-index:1}
.cloud-tile .tile-title{font-size:14.5px;font-weight:800;letter-spacing:.02em;line-height:1.2;z-index:1}
.cloud-tile .tile-subtitle{font-size:11px;font-weight:700;opacity:.92;margin-top:6px;line-height:1.25;z-index:1}

/* Tones — all harmonised to the emerald/gold institutional family */
.tone-green,.tone-teal{background:linear-gradient(150deg,var(--emerald),#157a55)}
.tone-cyan{background:linear-gradient(150deg,#0d6b60,#13927d)}
.tone-blue{background:linear-gradient(150deg,#1d5d50,#2a8169)}
.tone-purple{background:linear-gradient(150deg,#305544,#5e7d56)}
.tone-violet{background:linear-gradient(150deg,#4c5c3b,#77864b)}
.tone-pink{background:linear-gradient(150deg,#0b4731,#1c6a49)}
.tone-magenta{background:linear-gradient(150deg,#72552b,#a47a36)}
.tone-brown{background:linear-gradient(150deg,#4a3a24,#7a6234)}
.tone-money{background:linear-gradient(150deg,#876a2f,#bf933d)}
.tone-gold,.tone-orange,.tone-coral{background:linear-gradient(150deg,var(--gold),var(--gold-soft));color:var(--emerald-900)}
.tone-gold .tile-icon,.tone-orange .tile-icon,.tone-coral .tile-icon{filter:none}
.tone-gold .tile-subtitle,.tone-orange .tile-subtitle,.tone-coral .tile-subtitle{color:rgba(24,39,31,.82)}

/* Dashboard boards & mini panels */
.cloud-panels{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.cloud-board{overflow:hidden;margin:0 0 24px;border-color:var(--gold-soft)}
.cloud-board-title{
  background:linear-gradient(120deg,var(--emerald-700),var(--emerald));
  color:#fff;min-height:46px;display:flex;align-items:center;gap:11px;padding:0 20px;
  font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:.02em;
  border-bottom:2px solid var(--gold);
}
.cloud-board-title::before{content:"";width:24px;height:24px;background:var(--khatam-gold) center/contain no-repeat;flex:0 0 24px;opacity:.95}
.cloud-board-body{padding:20px 22px;min-height:120px;background:linear-gradient(150deg,#fff,var(--parchment-2))}
.cloud-board-body table{border:1px solid var(--line)}
.cloud-record-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 24px}
.cloud-mini-panel{border-left:6px solid var(--gold);padding:16px;box-shadow:var(--shadow-sm)}
.cloud-mini-panel strong{display:block;font-family:var(--font-display);font-size:24px;color:var(--emerald);word-break:break-word}
.cloud-mini-panel span{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cloud-status-card{padding:22px;font-size:17px;border-left:6px solid var(--gold)}

/* erp-tile (alt card grid used on some pages) */
.grid{display:grid;gap:18px;margin:18px 0}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.erp-tile{
  display:block;color:var(--ink);
  background:linear-gradient(150deg,#fff,var(--parchment-2));
  border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:var(--radius);
  padding:20px;min-height:118px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.erp-tile:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow)}
.erp-tile strong{display:block;font-family:var(--font-display);font-size:18px;color:var(--emerald);margin-bottom:8px}
.erp-tile span{color:var(--muted);font-size:14px}

/* ---- Right sidebar widgets ---------------------------------------------- */
.right-sidebar{font-size:14px}
.sidebar-card{position:relative;overflow:hidden;padding:16px}
.sidebar-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--emerald),var(--gold))}
.side-title{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.sidebar-icon{
  width:38px;height:38px;min-width:38px;border-radius:12px;display:grid;place-items:center;
  font-size:18px;line-height:1;overflow:hidden;
  background:var(--gold-tint);border:1px solid var(--gold-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.side-title h3{margin:0;font-size:15.5px;color:var(--emerald-700)}
.side-title p{margin:2px 0 0;font-size:12px;color:var(--muted);font-weight:700;line-height:1.3}
.side-note{margin:10px 2px 0;line-height:1.4}

.sidebar-profile-card{padding:0 0 16px}
.sidebar-profile-card::before{display:none}
.profile-cover{
  min-height:56px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;
  background:radial-gradient(circle at 18% 12%,rgba(236,217,166,.5),transparent 40%),linear-gradient(125deg,var(--emerald),var(--emerald-700));
}
.profile-cover .sidebar-icon{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.24)}
.settings-chip{
  display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.26);
}
.settings-chip:hover{color:#fff;background:rgba(255,255,255,.26)}
.profile-main{display:flex;gap:14px;align-items:center;padding:16px;background:linear-gradient(150deg,#fff,var(--parchment))}
.profile-avatar{
  width:64px;height:64px;border-radius:18px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:var(--emerald-900);
  font-family:var(--font-display);font-size:24px;font-weight:600;
}
.profile-avatar.xl{
  width:72px;height:72px;min-width:72px;border-radius:20px;padding:5px;background:#fff;
  border:2px solid var(--gold-soft);box-shadow:0 8px 20px rgba(6,42,31,.15);
}
.profile-avatar img,.profile-avatar.xl img{width:100%;height:100%;object-fit:contain;display:block;border-radius:13px;background:#fff}
.profile-meta{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.profile-meta strong{font-family:var(--font-display);font-size:16px;line-height:1.25;color:var(--emerald-900);overflow-wrap:anywhere}
.profile-meta small,.profile-meta span{color:var(--muted);font-weight:700;font-size:12.5px}
.role-badge{
  display:inline-flex;align-items:center;width:max-content;
  padding:4px 11px;border-radius:var(--radius-pill);
  background:var(--emerald-50);color:var(--emerald);border:1px solid var(--emerald-100);
  font-weight:800;font-size:12px;
}

.prayer-mini-card{border:1px solid var(--gold-soft);border-radius:var(--radius-sm);padding:12px;margin-top:10px;background:var(--parchment-2)}
.prayer-mini-card.current{background:linear-gradient(135deg,var(--gold-tint),var(--parchment-2))}
.prayer-mini-card.next{background:linear-gradient(135deg,var(--emerald-50),var(--parchment-2))}
.prayer-mini-card span{display:block;color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.prayer-mini-card strong{display:block;color:var(--emerald-900);font-size:16px;line-height:1.25}
.prayer-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line-soft);padding:10px 0}
.prayer-row span{color:var(--muted);font-weight:700}

.weather-display{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--emerald-50),var(--parchment-2));border:1px solid var(--emerald-100);padding:14px}
.weather-temp{font-family:var(--font-display);font-size:35px;font-weight:600;color:var(--emerald);line-height:1;letter-spacing:-.02em}
.weather-display p{margin:0;color:var(--muted);font-size:12px;font-weight:700;text-align:right;line-height:1.3}

.date-lines{border-radius:var(--radius-sm);background:var(--parchment-2);border:1px solid var(--gold-soft);padding:14px;display:grid;gap:6px}
.date-lines strong{font-size:15px;color:var(--emerald-900)}
.date-lines span{color:var(--muted);font-weight:700}
.date-lines em{font-style:normal;color:var(--emerald);font-weight:800;font-size:13px}
.profile-preview{width:96px;height:96px;border-radius:18px;object-fit:cover;border:1px solid var(--line);display:grid;place-items:center;background:#fff;color:var(--muted);font-weight:700}
.profile-preview.contain-preview{object-fit:contain;padding:8px;background:#fff}

/* ---- Lesson content / rich editor --------------------------------------- */
.lesson-content{line-height:1.85;background:var(--parchment-2);border:1px solid var(--gold-soft);border-radius:var(--radius-sm);padding:18px;margin:14px 0}
.lesson-content blockquote,.rich-editor blockquote{border-left:4px solid var(--gold);margin:12px 0;padding:10px 14px;background:var(--gold-tint);border-radius:10px}
.lesson-content ul,.lesson-content ol,.rich-editor ul,.rich-editor ol{padding-left:24px}
.rich-editor-wrap{margin-top:8px;border:1px solid #d8cfb8;border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.editor-toolbar{display:flex;gap:6px;flex-wrap:wrap;padding:8px;background:var(--gold-tint);border-bottom:1px solid var(--gold-soft)}
.editor-toolbar button{border:1px solid var(--gold-soft);background:#fff;border-radius:9px;padding:7px 11px;font-weight:800;color:var(--emerald-700);cursor:pointer}
.editor-toolbar button:hover{background:var(--parchment-2)}
.rich-editor{min-height:190px;padding:14px;line-height:1.75;outline:none;background:#fff}
.rich-editor:empty:before{content:attr(data-placeholder);color:#a09678}
.arabic{font-family:var(--font-arabic);direction:rtl;text-align:right;font-size:1.3em;line-height:2}
pre{white-space:pre-wrap;background:var(--emerald-900);color:#e8fff1;border-radius:var(--radius-sm);padding:16px;max-height:460px;overflow:auto}

/* ---- Question / quiz options -------------------------------------------- */
.option{display:block;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;margin:8px 0;background:#fff;transition:border-color .14s ease,background .14s ease}
.option:hover{border-color:var(--gold);background:var(--parchment-2)}

/* ---- Messages, calendar, audio ------------------------------------------ */
.message-list,.calendar-list{display:grid;gap:12px}
.message-card,.calendar-card,.audio-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin:10px 0}
.message-card.urgent{border-color:var(--danger-line);background:var(--danger-bg)}
.calendar-card{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:start}
.date-box{background:linear-gradient(135deg,var(--emerald),var(--emerald-700));color:#fff;border-radius:var(--radius-sm);padding:12px;text-align:center}
.date-box strong{display:block;font-family:var(--font-display);font-size:19px}
.date-box span{font-size:13px;color:var(--gold-soft)}
.audio-card audio,td audio{width:min(360px,100%);margin-top:8px}
.audio-recorder-panel{margin:18px 0;padding:18px;border:1px dashed var(--gold);border-radius:var(--radius);background:var(--gold-tint)}
.audio-recorder-panel h3{margin-top:0}
.record-preview{width:min(420px,100%);margin-top:10px}
.recorder-status{margin-bottom:0}

/* ---- Split / tree / collapsibles ---------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.tree-level{border:1px solid var(--line);border-radius:var(--radius-sm);margin:16px 0;padding:14px;background:var(--parchment-2)}
.tree-category{border-left:4px solid var(--gold);margin:14px 0 14px 16px;padding:12px 0 12px 14px}
.tree-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.indent{margin-left:18px}
.resource-group{border:1px solid var(--line);border-radius:var(--radius-sm);margin:14px 0;background:var(--parchment-2);overflow:hidden}
.resource-group>summary{cursor:pointer;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;background:linear-gradient(135deg,var(--emerald-50),var(--gold-tint));color:var(--emerald-700);font-weight:800;list-style:none}
.resource-group>summary::-webkit-details-marker{display:none}
.resource-group table{margin:0;border-radius:0;border:0}
.erp-collapsible summary{cursor:pointer;font-weight:800;color:var(--emerald-700);font-size:1.08rem;list-style:none;display:flex;align-items:center;gap:8px}
.erp-collapsible summary::-webkit-details-marker{display:none}
.erp-collapsible summary::after{content:'Open form';margin-left:auto;font-size:.78rem;background:var(--emerald);color:#fff;border-radius:var(--radius-pill);padding:6px 11px}
.erp-collapsible[open] summary::after{content:'Close form'}

/* ---- Modal --------------------------------------------------------------- */
.erp-modal[hidden]{display:none}
.erp-modal{position:fixed;inset:0;background:rgba(6,42,31,.55);z-index:2000;display:grid;place-items:center;padding:24px;overflow:auto}
.erp-modal-card{width:min(1180px,96vw);max-height:92vh;overflow:auto;background:var(--parchment-2);border-radius:24px;border:2px solid var(--gold);box-shadow:var(--shadow-lg);padding:24px;position:relative}
.modal-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:var(--radius-pill);border:0;background:var(--emerald);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.modal-close:hover{background:var(--emerald-700)}
.modal-open{overflow:hidden}

/* ---- Timetable ----------------------------------------------------------- */
.timetable-board{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:14px;align-items:start;overflow-x:auto;padding:6px 2px 12px}
.timetable-day{min-width:150px;background:linear-gradient(180deg,var(--parchment-2),var(--gold-tint));border:1px solid var(--gold-soft);border-radius:var(--radius-sm);padding:12px;box-shadow:var(--shadow-sm)}
.timetable-day h3{margin:0 0 10px;color:var(--emerald-700);font-size:1rem;border-bottom:2px solid var(--gold-soft);padding-bottom:8px}
.timetable-item{width:100%;text-align:left;border:0;border-left:6px solid var(--emerald);background:#fff;border-radius:12px;margin:0 0 10px;padding:10px 10px 10px 12px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease;display:block;color:var(--emerald-900)}
.timetable-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.timetable-item .tt-time{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.03em;color:var(--gold-deep);background:var(--gold-tint);border-radius:var(--radius-pill);padding:3px 9px;margin-bottom:6px}
.timetable-item strong{display:block;font-size:.98rem;line-height:1.2;margin-bottom:4px;color:var(--emerald-900)}
.timetable-item small{display:block;color:var(--muted);line-height:1.25}
.generated-board .timetable-day{min-width:190px}
.generated-board .timetable-item.record-closed,.generated-board .timetable-item.record-cancelled{opacity:.75;background:linear-gradient(180deg,#f8f5ee,#eee8da)}
.generated-board .timetable-item.record-completed{background:linear-gradient(180deg,#fff,#f3fff5)}
.closure-note{border-radius:11px;background:var(--gold-tint);border:1px solid var(--gold-soft);color:var(--gold-deep);font-weight:800;padding:7px 10px;margin:0 0 10px;font-size:.78rem;line-height:1.25}
.empty-card{grid-column:1/-1;background:var(--parchment-2);border:1px dashed var(--gold);border-radius:var(--radius-sm);padding:18px;color:var(--muted);text-align:center}
.timetable-filter{align-items:end;margin-bottom:12px}
.timetable-filter label{margin-bottom:0}
.timetable-quick{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.timetable-hero{background:linear-gradient(135deg,var(--parchment-2),var(--gold-tint));border:1px solid var(--gold-soft)}
.timetable-date h3 small{display:block;font-size:.74rem;font-weight:600;color:var(--gold-deep);margin-top:3px}

/* ---- Appraisals ---------------------------------------------------------- */
.appraisal-list{display:grid;gap:16px;margin-top:16px}
.appraisal-card{overflow:hidden}
.appraisal-card summary{cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;background:linear-gradient(135deg,var(--emerald-50),var(--gold-tint));font-weight:800;color:var(--emerald-700);list-style:none}
.appraisal-card summary::-webkit-details-marker{display:none}
.appraisal-card form,.appraisal-card .stats{margin:16px}
.best-appraisal{border:2px solid var(--gold);background:radial-gradient(circle at 10% 10%,var(--gold-tint),transparent 38%),#fff}

/* ---- Teacher planning ---------------------------------------------------- */
.teaching-plan-hero{border-top:4px solid var(--gold)}
.teaching-plan-form{align-items:start}
.plan-accordion{grid-column:1/-1;border:1px solid var(--gold-soft);border-radius:var(--radius-sm);background:linear-gradient(150deg,var(--parchment-2),var(--gold-tint));box-shadow:var(--shadow-sm);overflow:hidden;margin:8px 0}
.plan-accordion summary{cursor:pointer;padding:15px 18px;font-weight:800;color:var(--emerald-700);background:var(--gold-tint);list-style:none}
.plan-accordion summary::-webkit-details-marker{display:none}
.plan-accordion summary::before{content:'▸';display:inline-block;margin-right:10px;color:var(--gold-deep);transition:transform .18s ease}
.plan-accordion[open] summary::before{transform:rotate(90deg)}
.plan-accordion .form-grid{padding:16px 18px}
.plan-accordion textarea{min-height:110px}

/* ---- Tutorial ------------------------------------------------------------ */
.tutorial-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.7fr);gap:22px;align-items:center;background:linear-gradient(135deg,var(--parchment-2) 0%,var(--gold-tint) 50%,var(--emerald-50) 100%);border:1px solid var(--gold-soft)}
.tutorial-note{background:linear-gradient(135deg,var(--emerald),var(--emerald-700));color:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);line-height:1.65}
.tutorial-note strong{color:var(--gold-soft)}
.tutorial-index{padding:18px 22px}
.tutorial-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.tutorial-tabs a{display:flex;align-items:center;gap:10px;border:1px solid var(--gold-soft);background:var(--parchment-2);border-radius:var(--radius-sm);padding:14px 16px;color:var(--emerald-700);font-weight:800;box-shadow:var(--shadow-sm)}
.tutorial-tabs a span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--emerald);color:#fff}
.tutorial-grid{display:grid;gap:20px}
.tutorial-card{overflow:hidden}
.tutorial-card-head{display:flex;gap:18px;align-items:center;background:linear-gradient(120deg,var(--emerald),var(--emerald-700));color:#fff;padding:24px 26px;border-bottom:3px solid var(--gold)}
.tutorial-card-head h2{margin:0;color:#fff;font-size:1.6rem}
.tutorial-card-head p{margin:6px 0 0;color:#eef7f0;line-height:1.5}
.tutorial-big-icon{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border-radius:18px;background:var(--gold);font-size:1.8rem}
.tutorial-section{padding:22px 26px;border-top:1px solid var(--gold-soft)}
.tutorial-section h3{margin:0 0 12px;color:var(--emerald-700);font-size:1.16rem}
.tutorial-steps{margin:0;padding-left:22px;display:grid;gap:8px}
.tutorial-steps li{line-height:1.58;color:var(--ink-soft)}
.tutorial-routine{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.tutorial-routine div{border:1px solid var(--gold-soft);background:var(--parchment-2);border-radius:var(--radius-sm);padding:16px}
.tutorial-routine strong{display:block;color:var(--emerald-700);margin-bottom:6px}
.tutorial-routine span{display:block;color:var(--muted);line-height:1.5}

/* ---- Students registry --------------------------------------------------- */
.student-reg-card{border-left:5px solid var(--emerald)}
.student-reg-card h2{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.student-selector-panel{position:sticky;top:12px;z-index:5;background:linear-gradient(135deg,var(--parchment-2),var(--gold-tint))}
.student-select-form{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(320px,1.4fr) auto auto;gap:14px;align-items:end;margin:0}
.student-select-form label{margin:0}
.student-select-form input,.student-select-form select{min-height:48px}
.student-count{align-self:center;justify-self:end;font-weight:800;color:var(--emerald-700);background:var(--emerald-50);border:1px solid var(--emerald-100);border-radius:var(--radius-pill);padding:10px 14px;white-space:nowrap}
.student-fixed-profile{max-width:none}
.fixed-profile-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.fixed-profile-head h2{margin:0}
.student-linked-sections{margin-top:24px;align-items:start}
.enroll-selected-form{margin-bottom:14px;padding:12px;border:1px solid var(--gold-soft);border-radius:var(--radius-sm);background:linear-gradient(150deg,var(--parchment-2),var(--gold-tint))}

/* ---- Reports & role grids ----------------------------------------------- */
.report-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:10px}
.report-check{align-items:flex-start;background:linear-gradient(150deg,#fff,var(--parchment-2));border:1px solid var(--emerald-100);border-radius:var(--radius-sm);padding:12px;box-shadow:var(--shadow-sm)}
.report-check span{display:flex;flex-direction:column;gap:3px}
.report-check small{color:var(--muted);font-size:12px}
.role-check-grid,.department-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.65)}
.role-check-grid .checkline,.department-check-grid .checkline{margin:0;padding:8px 10px;border-radius:11px;background:var(--parchment-2)}
.role-check-grid .checkline input,.department-check-grid .checkline input{margin-right:6px}

/* ---- Footer -------------------------------------------------------------- */
.footer{text-align:center;color:var(--gold-soft);background:var(--emerald-900);padding:26px;font-size:13.5px;border-top:2px solid var(--gold)}

/* ---- Install page -------------------------------------------------------- */
.install-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--emerald-700),var(--emerald))}
.install-card{background:#fff;border-radius:24px;padding:34px;width:min(720px,92vw);box-shadow:var(--shadow-lg)}

/* ---- Leftover "cloud" chrome (defensive — keeps any stray usage on-brand) */
.cloud-dashboard,.cloud-dashboard-shell,.cloud-dashboard-content{background:transparent}
.cloud-dash-top{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:var(--radius);padding:14px 20px;margin:0 0 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--emerald-700);box-shadow:var(--shadow-sm)}
.cloud-dash-top strong{font-family:var(--font-display);font-size:20px;color:var(--emerald-700)}
.dash-clock{font-family:ui-monospace,'Courier New',monospace;font-size:24px;letter-spacing:.06em;color:var(--gold-deep);font-weight:800}
.cloud-top-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cloud-top-actions a{font-weight:700;color:var(--emerald-700)}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .blink-status{animation:none}
}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:1050px){
  .container{width:min(1000px,94vw)}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero::after{width:220px;height:220px}
  .cloud-panels{grid-template-columns:1fr}
  .tutorial-hero{grid-template-columns:1fr}
  .module-icon-menu,.erp-menu,.role-menu{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:11px}
  .student-select-form{grid-template-columns:1fr}
  .student-count{justify-self:start}
  .student-selector-panel{position:static}
  .timetable-board{grid-template-columns:repeat(2,minmax(220px,1fr))}
}
@media(max-width:650px){
  body{font-size:14.5px}
  .topbar{flex-wrap:wrap;gap:10px;padding:11px 16px}
  nav{justify-content:flex-start;width:100%}
  .brand strong{font-size:17px}
  .form-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .grid.two,.grid.three{grid-template-columns:1fr}
  .panel,.dashboard{padding:18px}
  .panel>h1:first-child,.panel>h2:first-child,.dashboard>h1:first-child,.dashboard>h2:first-child,
  .auth-card>h1:first-child,.auth-card>h2:first-child,.application-card>h2:first-child{margin:-18px -18px 16px;padding:15px 18px;font-size:18px}
  table{display:block;overflow-x:auto;white-space:nowrap}
  th{position:static}
  .calendar-card{grid-template-columns:1fr}
  .date-box{text-align:left}
  .cloud-tile-grid,.teacher-grid,.student-grid,.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module-icon-menu,.erp-menu,.role-menu{grid-template-columns:1fr 1fr}
  .timetable-board{grid-template-columns:1fr}
  .actions-cell{min-width:200px}
  .erp-modal{padding:12px}
  .erp-modal-card{padding:18px}
}

/* ---- Print (report & manual pages) -------------------------------------- */
@media print{
  body{background:#fff;color:#000}
  .topbar,.footer,.right-sidebar,.module-icon-menu,.role-menu,.erp-menu,.actions,
  .editor-toolbar,.audio-recorder-panel,.settings-chip{display:none!important}
  .container,.main-column{width:auto;max-width:none;margin:0}
  .app-shell{display:block}
  .panel,.dashboard{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .panel>h1:first-child,.panel>h2:first-child,.dashboard>h1:first-child,.dashboard>h2:first-child{
    background:#fff;color:#000;border-bottom:2px solid #000;margin:0 0 12px;padding:0 0 8px}
  .panel>h1:first-child::before,.panel>h2:first-child::before,
  .dashboard>h1:first-child::before,.dashboard>h2:first-child::before{display:none}
  table,th,td{border:1px solid #999!important}
  th{background:#eee!important;color:#000!important}
  .badge,.status-pill{border:1px solid #999;color:#000;background:#fff}
}

/* v58 — Admin dashboard grouped shortcuts -------------------------------- */
.admin-grouped-grid{grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch}
.cloud-tile-section{
  grid-column:1/-1;
  margin:8px 0 2px;
  padding:14px 18px;
  border-radius:18px;
  border:1px solid var(--gold-soft);
  border-left:6px solid var(--gold);
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(246,236,210,.72));
  box-shadow:var(--shadow-sm);
}
.cloud-tile-section h2{margin:0;color:var(--emerald-700);font-size:18px;font-family:var(--font-display)}
.cloud-tile-section p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.45;max-width:980px}
@media(max-width:1180px){.admin-grouped-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.admin-grouped-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.admin-grouped-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cloud-tile-section{padding:12px 14px}.cloud-tile-section h2{font-size:16px}}

/* v59 — Fixed Admin dashboard section layout ------------------------------ */
.admin-dashboard-sections{display:block}
.admin-dashboard-sections .admin-icon-section{
  margin:22px 0 30px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(198,155,77,.36);
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(246,236,210,.58));
  box-shadow:var(--shadow-sm);
}
.admin-dashboard-sections .admin-icon-header{
  margin:0 0 16px;
  padding:14px 18px;
  border-radius:18px;
  border-left:7px solid var(--gold);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(242,250,246,.78));
}
.admin-dashboard-sections .admin-icon-header h2{
  margin:0;
  color:var(--emerald-700);
  font-size:20px;
  font-family:var(--font-display);
  letter-spacing:.01em;
}
.admin-dashboard-sections .admin-icon-header p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.admin-dashboard-sections .admin-section-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin:0;
}
@media(max-width:1180px){.admin-dashboard-sections .admin-section-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.admin-dashboard-sections .admin-section-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.admin-dashboard-sections .admin-icon-section{padding:12px}.admin-dashboard-sections .admin-section-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-dashboard-sections .admin-icon-header h2{font-size:17px}}

/* ---- v60: Admin role shortcut menu grouped by function ------------------ */
.admin-grouped-role-menu{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:18px;
  background:rgba(255,255,255,.78);
}
.admin-grouped-role-menu .role-menu-section{
  display:block;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,250,238,.78));
  box-shadow:var(--shadow-sm);
}
.admin-grouped-role-menu .role-menu-section h2{
  margin:0 0 6px;
  padding:12px 16px;
  border-radius:14px 14px 8px 8px;
  background:linear-gradient(135deg,var(--emerald-700),var(--emerald));
  color:#fff;
  font-size:18px;
  letter-spacing:.3px;
  border-bottom:3px solid var(--gold);
}
.admin-grouped-role-menu .role-menu-section p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:13px;
}
.admin-grouped-role-menu .role-menu-section-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.admin-grouped-role-menu .role-menu-section-grid a{
  min-height:64px;
}
@media(max-width:1300px){
  .admin-grouped-role-menu .role-menu-section-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:900px){
  .admin-grouped-role-menu .role-menu-section-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:650px){
  .admin-grouped-role-menu{padding:11px;gap:12px}
  .admin-grouped-role-menu .role-menu-section{padding:10px}
  .admin-grouped-role-menu .role-menu-section h2{font-size:16px;padding:10px 12px}
  .admin-grouped-role-menu .role-menu-section-grid{grid-template-columns:1fr 1fr;}
}