/* fonts served from this site (no third-party request): only the arabic + latin parts are needed */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-500-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-600-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-700-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Markazi Text';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/markazi-text-500-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Markazi Text';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/markazi-text-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Markazi Text';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/markazi-text-500-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Markazi Text';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/markazi-text-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Markazi Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/markazi-text-500-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Markazi Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/markazi-text-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ink:#1c2420; --ink-soft:#3a453e; --paper:#f6f4ec; --paper-raised:#ffffff; --paper-sunken:#eeeadd;
  --line:#ddd6c2; --line-strong:#c9c0a4;
  --brass:#a9752e; --brass-ink:#7d5620; --brass-tint:#f1e3c9;
  --forest:#3f6b52; --forest-tint:#dfeae2;
  --stamp-red:#a6402f; --stamp-red-tint:#f4e0db;
  /* the 1-5 classroom evaluation scale: a red-to-green gradient built from the same three brand colors above */
  --eval-1:#a6402f; --eval-2:#a85b2f; --eval-3:#a9752e; --eval-4:#747040; --eval-5:#3f6b52;
  --sidebar-bg:#1e2b23; --sidebar-bg-raised:#26362c; --sidebar-text:#cfd9d1; --sidebar-text-dim:#8fa196; --sidebar-active:#f6f4ec;
  --shadow-1:0 0 0 1px rgba(28,36,32,.06), 0 1px 2px -1px rgba(28,36,32,.08), 0 2px 6px rgba(28,36,32,.05);
  --shadow-2:0 0 0 1px rgba(28,36,32,.08), 0 4px 14px rgba(28,36,32,.12);
  --radius-s:6px; --radius-m:10px; --radius-l:16px;
  --font-display:'Markazi Text','Georgia',serif; --font-body:'IBM Plex Sans Arabic','Tahoma',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef0ea; --ink-soft:#b9c2b8; --paper:#161b17; --paper-raised:#1e2520; --paper-sunken:#121512;
    --line:#31392f; --line-strong:#3e483c; --brass:#d3a15f; --brass-ink:#e8c48c; --brass-tint:#332818;
    --forest:#6fa588; --forest-tint:#1c2b22; --stamp-red:#d97a67; --stamp-red-tint:#332019;
    --eval-1:#d97a67; --eval-2:#d68e63; --eval-3:#d3a15f; --eval-4:#a1a374; --eval-5:#6fa588;
    --sidebar-bg:#10150f; --sidebar-bg-raised:#1a221a; --sidebar-text:#c3cdc2; --sidebar-text-dim:#71806f; --sidebar-active:#f6f4ec;
    --shadow-1:0 0 0 1px rgba(255,255,255,.07); --shadow-2:0 0 0 1px rgba(255,255,255,.09);
  }
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{font-family:var(--font-body); background:var(--paper); color:var(--ink); margin:0; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; letter-spacing:-.01em;}
::selection{background:var(--brass-tint); color:var(--brass-ink);}
button{font-family:inherit;}
input,select,textarea{font-family:inherit; font-size:14px;}
table{border-collapse:collapse; width:100%;}
.num{font-variant-numeric:tabular-nums;}

/* Login page */
.login-shell{min-height:100vh; width:100%; background:radial-gradient(1100px 550px at 15% -10%, var(--brass-tint), transparent), var(--paper); display:flex; align-items:center; justify-content:center; padding:40px 18px;}
.login-card{max-width:400px; width:100%; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-2); padding:32px;}
.brand{display:flex; align-items:center; gap:12px; margin-bottom:24px;}
.brand-mark{width:42px; height:42px; object-fit:contain; flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.brand-name{font-family:var(--font-display); font-size:22px; font-weight:700;}
.brand-sub{font-size:11.5px; color:var(--ink-soft); margin-top:1px;}

/* Shell (sidebar + content) for logged-in pages */
/* 100vh on a phone is the height WITHOUT the browser's address/tool bars, so the bottom of the page (the save button)
   ends up hidden behind them; 100dvh is the height that is really visible right now (it follows the bars and the keyboard). */
body:has(.shell){display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;}
.shell{flex:1 1 auto; min-height:0; display:flex; overflow:hidden;}
.sidebar{width:240px; flex:0 0 240px; height:100%; overflow-y:auto; background:var(--sidebar-bg); color:var(--sidebar-text); display:flex; flex-direction:column; padding:18px 14px; gap:20px;}
.sidebar .brand-name{color:var(--sidebar-active);}
.sidebar .brand-sub{color:var(--sidebar-text-dim);}
.nav-item{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px 8px 0 0; color:var(--sidebar-text); font-size:13.5px; font-weight:600; border-bottom:2px solid var(--brass); background:var(--paper);}
.sidebar-nav{display:flex; flex-direction:column; gap:3px;}
.nav-link{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px; color:var(--sidebar-text-dim); font-size:13.5px; font-weight:600; text-decoration:none;}
.nav-link:hover{color:var(--sidebar-text);}
.nav-link.active{border-radius:8px 8px 0 0; border-bottom:2px solid var(--brass); background:var(--paper); color:var(--ink);}
.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:8px;}
.who{font-weight:600; color:var(--sidebar-active); font-size:13px;}
.role-tag{font-size:11.5px; color:var(--sidebar-text-dim);}
.main{flex:1; min-width:0; height:100%; overflow-y:auto;}
.topbar{padding:18px 30px; border-bottom:1px solid var(--line); background:var(--paper);}
.content{padding:26px 30px 60px; max-width:900px;}
.stack{display:flex; flex-direction:column; gap:18px;}

/* Panels */
.panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow-1); overflow:hidden;}
.panel-head{padding:15px 18px; border-bottom:1px solid var(--line);}
.panel-head h2{font-size:16.5px; font-weight:700;}
.panel-body{padding:18px;}
.panel-body.flush{padding:0;}

/* Forms */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:12px; font-weight:600; color:var(--ink-soft);}
input[type=text],input[type=password],input[type=tel],input[type=date],select,textarea{background:var(--paper-sunken); border:1px solid var(--line); border-radius:7px; padding:10px 12px; color:var(--ink); width:100%;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-tint);}
/* the eye on password boxes (js/pw-eye.js) and the "save my login" box on the login page */
.pw-wrap{position:relative; display:block; width:100%;}
.pw-wrap input{padding-inline-end:44px;}
.pw-eye{position:absolute; inset-block:0; inset-inline-end:2px; width:40px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; color:var(--ink-soft); cursor:pointer; border-radius:7px;}
.pw-eye:hover{color:var(--brass-ink);}
.pw-eye:focus-visible{outline:2px solid var(--brass); outline-offset:-2px;}
.remember{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; margin:2px 0 16px;}
.remember input{width:auto; margin:0; accent-color:var(--brass);}
textarea{resize:vertical; min-height:70px;}
.error{color:var(--stamp-red); font-size:12.5px; font-weight:500; margin-bottom:12px; display:none;}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:7px; justify-content:center; padding:10px 18px; border-radius:8px; border:1px solid transparent; font-size:13.5px; font-weight:600; cursor:pointer; transition:transform .1s cubic-bezier(.23,1,.32,1), background .12s;}
.btn:active{transform:scale(.97);}
.btn-block{width:100%; padding:12px;}
.btn-primary{background:var(--forest); color:#fdfdf8;} .btn-primary:hover{background:#365c46;}
.btn-brass{background:var(--brass); color:#fff8ea;} .btn-brass:hover{background:var(--brass-ink);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);} .btn-ghost:hover{background:var(--paper-sunken);}

/* Ledger table */
.ledger{width:100%;}
.ledger thead th{text-align:start; font-size:10.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.04em; padding:10px 13px; border-bottom:1px solid var(--line-strong); background:var(--paper-sunken);}
.ledger tbody td{padding:11px 13px; border-bottom:1px solid var(--line); font-size:13px;}
.referral-open{color:var(--brass-ink); font-size:14.5px; text-decoration:none;}
.referral-open:hover{text-decoration:underline;}

.schedule-cell-empty{width:100%; min-height:52px; border:1.5px dashed var(--line-strong); border-radius:8px; background:transparent; color:var(--ink-soft); font-size:20px; font-weight:700; cursor:pointer; transition:background .12s, border-color .12s;}
.schedule-cell-empty:hover{background:var(--paper-sunken); border-color:var(--brass); color:var(--brass);}
.schedule-cell-filled{width:100%; min-height:52px; padding:6px 8px; border:1.5px solid var(--forest); border-radius:8px; background:var(--forest-tint); color:var(--ink); font-family:inherit; font-size:12.5px; cursor:pointer; text-align:center;}
.schedule-cell-filled:hover{background:var(--stamp-red-tint); border-color:var(--stamp-red);}
.ledger tbody tr:hover{background:var(--brass-tint);}
.ledger tbody tr:last-child td{border-bottom:none;}
.empty{padding:30px; text-align:center; color:var(--ink-soft); font-size:13px;}

/* Stamp badge */
.stamp{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 10px 4px 8px; border-radius:999px; border:1.5px solid currentColor; transform:rotate(-3deg); box-shadow:inset 0 0 0 1.5px currentColor;}
.stamp::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor;}
.stamp.ok{color:var(--forest); background:var(--forest-tint);}
.stamp.bad{color:var(--stamp-red); background:var(--stamp-red-tint);}
.stamp.pending{color:var(--brass-ink); background:var(--brass-tint); transform:rotate(0deg);}
.stamp.neutral{color:var(--ink-soft); background:var(--paper-sunken); transform:rotate(0deg); border-style:dashed;}

/* attendance-taking as one-tap buttons: green = present (the default), red = absent, a second tap flips it back */
.attendance-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;}
.attendance-item{display:flex; flex-direction:column;}
.attendance-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:86px; padding:8px; border-radius:10px; border:none; cursor:pointer; font-family:inherit; background:var(--forest); color:#fff; transition:background .15s, transform .08s;}
.attendance-btn:active{transform:scale(.97);}
/* every card is the same height: a long name is clamped to two lines with an ellipsis instead of growing the button */
.attendance-btn .attendance-name{font-weight:700; font-size:15.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word; max-width:100%;}
.attendance-btn .attendance-state{font-size:13px; font-weight:600; opacity:.95; flex:none;}
.attendance-btn.is-absent{background:var(--stamp-red);}
.attendance-btn.is-tardy{background:var(--brass);}
.attendance-btn:disabled{opacity:.55; cursor:not-allowed;}
.attendance-btn:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}
.attendance-lock-note{font-size:11px; color:var(--ink-soft); text-align:center; margin-top:4px; line-height:1.5;}

/* note recording: a note type is a colored square tile (green = positive points, red = negative, neutral = zero).
   Every tile is the exact same size regardless of the name's length (clamped to 3 lines), laid out as a dense
   grid so a long list of note types reads as one tidy sheet instead of a ragged row of differently-sized pills. */
.note-pill-group{margin-bottom:10px;}
.note-pill-group-label{font-size:11.5px; font-weight:700; color:var(--ink-soft); margin:0 0 5px;}
.note-pills{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:9px;}
/* a tile that also shows dots (group mode's note-type count): the dots sit below the card itself, never inside its
   border, the same way individual mode's dots sit below the student name button rather than crowding its text */
.note-pill-wrap{display:flex; flex-direction:column;}
.note-pill{display:flex; align-items:center; justify-content:center; height:78px; padding:8px; border-radius:9px; border:2px solid var(--line); cursor:pointer; font-family:inherit; background:var(--paper-sunken); color:var(--ink); transition:transform .08s, background .15s, color .15s;}
.note-pill:active{transform:scale(.96);}
.note-pill-text{font-weight:700; font-size:15px; line-height:1.3; text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word; max-width:100%;}
.note-pill.positive{border-color:var(--forest); color:var(--forest);}
.note-pill.negative{border-color:var(--stamp-red); color:var(--stamp-red);}
.note-pill.selected.positive{background:var(--forest); color:#fff;}
.note-pill.selected.negative{background:var(--stamp-red); color:#fff;}
.note-pill.selected:not(.positive):not(.negative){background:var(--ink-soft); color:var(--paper);}
.note-pill:disabled{opacity:.5; cursor:not-allowed;}

/* if a very long list still needs to scroll on a small screen, at least make the scrollbar itself slim and
   part of the design instead of the browser's bulky default one - styled on .modal-body now, see the "Modal"
   section below for why only the body scrolls */
.modal-body{scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;}
.modal-body::-webkit-scrollbar{width:8px;}
.modal-body::-webkit-scrollbar-track{background:transparent;}
.modal-body::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:999px;}

/* the neutral gray student button, used before anything is chosen for them; turns the chosen note's color once picked */
.note-student-btn{display:flex; align-items:center; justify-content:center; text-align:center; height:64px; padding:8px; border-radius:10px; border:1.5px solid var(--line); cursor:pointer; font-family:inherit; font-weight:700; font-size:14px; line-height:1.3; background:var(--paper-sunken); color:var(--ink); transition:background .15s, transform .08s;}
.note-student-btn:active{transform:scale(.97);}
.note-student-btn.chosen-positive{background:var(--forest); color:#fff; border-color:var(--forest);}
.note-student-btn.chosen-negative{background:var(--stamp-red); color:#fff; border-color:var(--stamp-red);}
.note-student-btn:disabled{opacity:.5; cursor:not-allowed;}
.note-student-btn:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}

/* individual mode: a small badge under each student's name button, showing how many notes (green/red dots) were
   recorded this visit - the button itself opens the picker modal, so it stays neutral regardless of what's recorded */
.note-dots{display:flex; gap:3px; align-items:center; justify-content:center; margin-top:5px; min-height:8px;}
.note-dot{width:8px; height:8px; border-radius:50%; background:var(--forest);}
.note-dot.negative{background:var(--stamp-red);}

/* the per-student note picker modal (individual mode) and the per-note student picker modal (group mode):
   both need the same wide, tall treatment so their grid of tiles fits without a long scroll */
#note-picker-modal .modal, #group-student-modal .modal, #classroom-picker-modal .modal, #student-picker-modal .modal, #refer-group-student-modal .modal{max-width:800px; max-height:94vh;}
/* inside that modal the student tiles pack tighter than the full-page attendance grid, so even a large
   classroom fits in a couple of screens' worth of rows without a tall scrollbar */
#group-student-modal .attendance-grid, #refer-group-student-modal .attendance-grid{grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:8px;}
#group-student-modal .note-student-btn, #refer-group-student-modal .note-student-btn{height:56px; font-size:13px;}

/* classroom evaluation: one row per criterion, with a 1-5 rating drawn as a red-to-green gradient of
   buttons - every button shows its own step's color as an outline, and the chosen one fills solid, so
   the whole row reads at a glance the same way a traffic-light or a heat-map does */
.eval-criteria-list{display:flex; flex-direction:column;}
/* the whole row is ONE button: tap the name, tap the numbers, tap the empty space between them - anywhere
   advances the score by one step (5 wraps back to 1). Only the current number is lit, in that step's color
   from the red-to-green scale; the other four stay plain gray, so a single tap sequence "walks" the color
   across the row instead of you having to aim for one of five small targets. */
.eval-criterion{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .12s;}
.eval-criterion:last-child{border-bottom:none;}
.eval-criterion:hover{background:var(--paper-sunken);}
.eval-criterion:active{background:var(--paper-sunken);}
.eval-criterion:focus-visible{outline:3px solid var(--brass); outline-offset:-3px;}
.eval-criterion-name{font-weight:700; flex:1 1 200px; min-width:160px; pointer-events:none;}
.eval-scores{display:flex; gap:6px;}
.eval-score-btn{width:44px; height:44px; border-radius:10px; border:2px solid var(--line-strong); background:transparent; color:var(--ink-soft); font-family:inherit; font-weight:800; font-size:16px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s, color .15s, border-color .15s;}
.eval-score-btn.selected{background:var(--c); color:#fff; border-color:var(--c);}
.eval-score-btn.score-1{--c:var(--eval-1);}
.eval-score-btn.score-2{--c:var(--eval-2);}
.eval-score-btn.score-3{--c:var(--eval-3);}
.eval-score-btn.score-4{--c:var(--eval-4);}
.eval-score-btn.score-5{--c:var(--eval-5);}

.hr{height:1px; background:var(--line); border:none; margin:6px 0 16px;}

/* Modal - a fixed head and foot with only the body scrolling, so a long list of tiles never buries the save
   button below the fold: on a short phone screen the old "the whole modal scrolls as one block" layout could
   put "حفظ" past the visible area with no hint that more content (and the button) was still below. */
.modal-veil{position:fixed; inset:0; background:rgba(10,12,10,.5); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal{background:var(--paper-raised); border-radius:var(--radius-l); box-shadow:var(--shadow-2); width:100%; max-width:440px; max-height:88vh; max-height:88dvh; display:flex; flex-direction:column; overflow:hidden;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 19px; border-bottom:1px solid var(--line); flex:0 0 auto;}
.modal-head h3{font-size:16px; font-weight:700; font-family:var(--font-display);}
.modal-body{padding:19px; flex:1 1 auto; min-height:0; overflow:auto;}
.modal-foot{display:flex; justify-content:center; gap:10px; padding:14px 19px; border-top:1px solid var(--line); flex-wrap:wrap; flex:0 0 auto;}
.modal-foot .btn{min-height:52px; padding:12px 32px; font-size:16px; font-weight:700;}
.modal-foot-center{justify-content:center;}
.iconbtn{background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:18px; line-height:1; padding:2px 6px; border-radius:6px;}
.iconbtn:hover{background:var(--paper-sunken); color:var(--ink);}
.row-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.btn-sm{padding:6px 11px; font-size:12px; min-height:auto;}
.btn-danger{background:transparent; color:var(--stamp-red); border-color:var(--stamp-red);} .btn-danger:hover{background:var(--stamp-red-tint);}
.banner{background:var(--brass-tint); color:var(--brass-ink); border-bottom:1px solid var(--brass); padding:10px 30px; font-size:13px; display:flex; align-items:center; justify-content:space-between;}

/* Grouped collapsible sidebar nav (matches the approved prototype) */
.navleaf{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px 8px 0 0; color:var(--sidebar-text); text-decoration:none; cursor:pointer; border-bottom:2px solid transparent;}
.navleaf:hover{background:rgba(255,255,255,.05); color:var(--sidebar-active);}
.navleaf.active{background:var(--paper); color:var(--ink); border-bottom:2px solid var(--brass);}
.navgroup{border-radius:8px 8px 0 0; overflow:hidden;}
.navhead{display:flex; align-items:center; gap:9px; padding:8px 10px; color:var(--sidebar-text); cursor:pointer; user-select:none; font-size:13px; border-bottom:2px solid transparent;}
.navhead:hover{background:rgba(255,255,255,.05); color:var(--sidebar-active);}
.navhead .chev{margin-inline-start:auto; transition:transform .15s cubic-bezier(.23,1,.32,1); opacity:.6;}
.navgroup.open .navhead .chev{transform:rotate(90deg);}
.navgroup.has-active .navhead{color:var(--sidebar-active);}
.navgroup.has-active .navhead svg{opacity:1; color:var(--brass);}
.navchildren{display:none; flex-direction:column; padding:2px 0 4px 0;}
.navgroup.open .navchildren{display:flex;}
.navchild{padding:7px 14px 7px 30px; font-size:12.5px; color:var(--sidebar-text-dim); text-decoration:none; cursor:pointer; border-radius:6px; margin:0 4px; display:block;}
.navchild:hover{background:rgba(255,255,255,.06); color:var(--sidebar-active);}
.navchild.active{background:var(--paper); color:var(--ink); font-weight:600;}
.navchild-important{font-size:14.5px; font-weight:700; color:var(--sidebar-text);}
.navchild-important.active{color:var(--ink);}

/* KPI cards + dashboard grid */
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:13px;}
/* when the exact tile count is known and small, force one row instead of letting auto-fit wrap a lone
   tile onto its own oversized row (e.g. 5 KPIs on تقرير الطالب) */
.kpi-row-tight{grid-template-columns:repeat(5, 1fr);}
.kpi{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); padding:15px 17px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:5px;}
.kpi.clickable{cursor:pointer; transition:transform .15s cubic-bezier(.23,1,.32,1), box-shadow .15s;}
.kpi.clickable:hover{transform:translateY(-2px); box-shadow:var(--shadow-2);}
.kpi-label{font-size:11px; color:var(--ink-soft); font-weight:500; letter-spacing:.03em;}
.kpi-value{font-family:var(--font-display); font-size:32px; font-weight:700; line-height:1;}
.kpi-value.accent{color:var(--brass-ink);} .kpi-value.warn{color:var(--stamp-red);} .kpi-value.good{color:var(--forest);}
.kpi-foot{font-size:11px; color:var(--ink-soft);}
.dash-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:16px;}
@media (max-width:900px){ .dash-grid{grid-template-columns:1fr;} }

/* Pill tabs (message category, provider auth method) */
.pill-tabs{display:flex; gap:6px; background:var(--paper-sunken); padding:4px; border-radius:999px; width:fit-content; flex-wrap:wrap;}
.pill-tab{padding:7px 14px; border-radius:999px; font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.pill-tab.active{background:var(--paper-raised); color:var(--ink); box-shadow:var(--shadow-1);}

/* SMS preview bubble */
.sms-frame{background:var(--ink); border-radius:20px; padding:16px 14px 20px; max-width:270px; box-shadow:var(--shadow-2);}
.sms-provider-chip{display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.08); color:#cfd9d1; font-size:10px; padding:3px 9px; border-radius:999px; margin-bottom:10px;}
.sms-bubble{background:var(--forest); color:#fdfdf8; border-radius:16px 16px 4px 16px; padding:11px 14px; font-size:12.5px; line-height:1.7;}

/* Template variable chips */
.var-chip{display:inline-block; background:var(--brass-tint); color:var(--brass-ink); border:1px solid var(--brass); border-radius:5px; padding:0 6px; font-size:12px; font-weight:600; font-family:ui-monospace,'IBM Plex Mono',monospace;}
.var-chip.fill{background:var(--forest-tint); color:var(--forest); border-color:var(--forest);}

/* Note boxes, permission grid */
.note-box{background:var(--brass-tint); border:1px solid var(--brass); color:var(--brass-ink); border-radius:8px; padding:11px 14px; font-size:12px; line-height:1.7;}
.perm-grid td, .perm-grid th{text-align:center;}
.perm-grid td:first-child, .perm-grid th:first-child{text-align:start;}
.check-yes{color:var(--forest); font-weight:800;} .check-no{color:var(--line-strong); font-weight:800;}
.checkline{display:flex; align-items:center; gap:8px; font-size:12.5px;}
.chiprow{display:flex; gap:6px; flex-wrap:wrap;}
.muted{color:var(--ink-soft); font-size:11.5px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media (max-width:760px){ .form-grid,.form-grid3{grid-template-columns:1fr;} }

.progress-wrap{display:none; align-items:center; gap:10px; margin-top:10px;}
.progress-wrap.active{display:flex;}
.progress-track{flex:1; height:8px; border-radius:999px; background:var(--paper-sunken); overflow:hidden; position:relative;}
.progress-bar{position:absolute; top:0; left:0; height:100%; width:40%; background:var(--brass); border-radius:999px; animation:progress-slide 1.1s ease-in-out infinite;}
.progress-text{font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
@keyframes progress-slide{
  0%{ left:-40%; }
  50%{ left:60%; }
  100%{ left:100%; }
}
.badge{margin-inline-start:auto; background:var(--stamp-red); color:#fff; font-size:10px; font-weight:600; min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px;}

/* Mobile nav: sidebar becomes an off-canvas drawer below the tablet breakpoint */
.mobile-nav-toggle{display:none;}
.sidebar-backdrop{display:none;}

@media (max-width:860px){
  .mobile-nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:38px; height:38px; margin-inline-end:10px; padding:0;
    background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:8px;
    color:var(--ink); cursor:pointer;
  }
  .mobile-nav-toggle:active{transform:scale(.94);}
  .topbar{display:flex; align-items:center; padding:14px 16px;}
  .topbar h1{font-size:16px !important;}
  /* room under the last button so it never sits against the browser's bottom bar or the keyboard */
  .content{padding:16px 16px calc(120px + env(safe-area-inset-bottom));}
  .panel-body{padding:14px;}
  .kpi-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .kpi-row-tight{grid-template-columns:repeat(2, 1fr);}

  .sidebar{
    position:fixed; inset-block:0; inset-inline-end:0; z-index:60; width:250px; flex:0 0 250px;
    transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.23,1,.32,1);
    box-shadow:var(--shadow-2);
  }
  .sidebar.open{transform:translateX(0);}
  /* left-to-right (English): the menu slides in from the left edge instead of the right */
  [dir="ltr"] .sidebar{inset-inline-end:auto; inset-inline-start:0; transform:translateX(-100%);}
  [dir="ltr"] .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; z-index:55; background:rgba(10,12,10,.45);
    opacity:0; pointer-events:none; transition:opacity .22s cubic-bezier(.23,1,.32,1);
  }
  .sidebar-backdrop.open{opacity:1; pointer-events:auto;}
}

@media (max-width:600px){
  .kpi-value{font-size:26px;}
  .modal-veil{padding:12px;}
}

/* Any table wrapped this way (the ledger pattern used across every list page)
   scrolls horizontally instead of breaking the layout on a narrow screen */
.panel-body.flush{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* Login demo accounts list */
.demo-grid{display:flex; flex-direction:column; gap:8px;}
.demo-row{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:10px 14px; box-shadow:var(--shadow-1); cursor:pointer;}
.demo-row .who{font-size:13px; font-weight:600;}
.demo-row .cred{font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums;}

/* === REPORT PRINT/EXPORT (experimental - delete this block and js/report-export.js to remove) === */
.report-actions{display:flex; gap:8px; margin-inline-start:auto;}
@media print{
  :root, :root:not([data-theme="light"]){
    --ink:#000; --ink-soft:#333; --paper:#fff; --paper-raised:#fff; --paper-sunken:#f2f2f2;
    --line:#bbb; --line-strong:#888; --shadow-1:none; --shadow-2:none;
  }
  html, body, body:has(.shell){height:auto !important; overflow:visible !important; display:block !important; background:#fff !important;}
  .shell, .main{display:block !important; height:auto !important; overflow:visible !important;}
  .sidebar, .banner, #impersonation-banner, .report-actions, .no-print, button, .modal-veil{display:none !important;}
  .content{max-width:none !important; padding:0 !important;}
  .panel{box-shadow:none !important;}
  .panel-head{break-after:avoid;}
  thead{display:table-header-group;}
  tr{break-inside:avoid;}
}
@media print{
  body.print-only-schedule .content > .panel:not(#schedule-panel){display:none !important;}
}

/* ---- drop-downs on touch screens: a button that opens a bottom sheet (see js/mobile-select.js) ---- */
.msel-native{position:absolute !important; opacity:0; width:1px !important; height:1px !important; pointer-events:none; margin:0 !important; padding:0 !important; border:0 !important;}
.msel-btn{display:block; width:100%; min-height:44px; text-align:start; font:inherit; font-size:14px; background:var(--paper-sunken); border:1px solid var(--line); border-radius:7px; padding:10px 34px 10px 12px; color:var(--ink); cursor:pointer; position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msel-btn::after{content:''; position:absolute; inset-inline-end:12px; top:50%; width:7px; height:7px; border-inline-end:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:translateY(-70%) rotate(45deg);}
.msel-btn:disabled{opacity:.5; cursor:not-allowed;}
.msel-btn.msel-empty{color:var(--ink-soft);}
.msel-open{overflow:hidden;}
.msel-veil{position:fixed; inset:0; z-index:300; background:rgba(10,12,10,.5); display:flex; align-items:flex-end; justify-content:center;}
.msel-sheet{width:100%; max-width:560px; max-height:72vh; max-height:72dvh; background:var(--paper-raised); border-radius:16px 16px 0 0; box-shadow:var(--shadow-2); display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom);}
.msel-title{padding:14px 18px 10px; font-weight:700; border-bottom:1px solid var(--line); flex:none;}
.msel-list{overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
.msel-group{padding:8px 18px; font-size:12px; font-weight:700; color:var(--ink-soft); background:var(--paper-sunken); position:sticky; top:0;}
.msel-item{display:block; width:100%; min-height:48px; text-align:start; padding:12px 18px; border:0; border-bottom:1px solid var(--line); background:none; font:inherit; font-size:15px; color:var(--ink); cursor:pointer;}
.msel-item:active{background:var(--brass-tint);}
.msel-item.msel-selected{font-weight:700; background:var(--brass-tint);}
.msel-item:disabled{opacity:.4;}

/* a lone submit/save button at the bottom of a single-column form (no other action beside it) sits
   centered under the fields, not stuck to one edge - the standing convention going forward */
.form-submit-center{text-align:center; margin-top:16px;}
.form-submit-center .btn{min-height:52px; padding:12px 32px; font-size:16px; font-weight:700;}

/* a permanent two-way switch (see js/notes-record.js): both choices sit side by side at all times, no
   modal - tapping either one just moves the color from one button to the other */
.mode-switch{display:flex; gap:10px; margin-bottom:14px;}
.mode-switch-btn{flex:1; min-height:52px; border-radius:10px; border:2px solid var(--line-strong); background:var(--paper-sunken); color:var(--ink); font-family:inherit; font-weight:700; font-size:16px; cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .08s;}
.mode-switch-btn:active{transform:scale(.99);}
.mode-switch-btn.active{background:var(--brass); color:#fff; border-color:var(--brass);}
.mode-switch-btn:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}

/* a tile-picker field button (see js/absence-record.js): centered, bold, no side arrow - a real button,
   not a plain field pretending to be one, since it opens the same colorful tile-grid modal as notes */
.tile-pick-btn{display:block; width:100%; min-height:52px; text-align:center; font:inherit; font-size:16px; font-weight:700; background:var(--paper-sunken); border:2px solid var(--line-strong); border-radius:10px; padding:12px 16px; color:var(--ink); cursor:pointer; transition:background .15s, border-color .15s, transform .08s;}
.tile-pick-btn:hover{border-color:var(--brass);}
.tile-pick-btn:active{transform:scale(.985);}
.tile-pick-btn.is-empty{color:var(--ink-soft); font-weight:600;}
.tile-pick-btn:disabled{opacity:.5; cursor:not-allowed;}
.tile-pick-btn:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}

/* sending in the background: progress bar and the "why it did not go" box (sms-compose) */
.progress{height:10px; border-radius:999px; background:var(--paper-sunken); overflow:hidden; margin:8px 0;}
.progress-bar{height:100%; background:var(--forest); transition:width .4s;}
.send-alert{margin-top:10px; padding:10px 12px; border:1.5px solid var(--stamp-red); background:var(--stamp-red-tint); color:var(--stamp-red); border-radius:var(--radius-s); font-size:13px; font-weight:600; line-height:1.7;}

/* the language button (Arabic / English) */
.lang-toggle{width:100%; margin-bottom:6px;}
.lang-toggle-corner{width:auto; position:absolute; top:12px; inset-inline-end:12px; margin:0; padding:4px 12px; font-size:12px;}
.lang-toggle-fixed{position:fixed; z-index:80;}
.login-card{position:relative;}

/* ============================================================== analytics home page (js/analytics.js + js/charts.js) */
.content.content-wide{max-width:1320px;}
.an-hero{position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:26px 28px; border-radius:var(--radius-l); overflow:hidden;
  background:radial-gradient(900px 300px at 100% 0%, rgba(169,117,46,.35), transparent 60%), radial-gradient(700px 300px at 0% 100%, rgba(63,107,82,.45), transparent 60%), var(--sidebar-bg);
  color:#f6f4ec; box-shadow:var(--shadow-2);}
.an-hero::after{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:28px 28px; pointer-events:none;}
.an-hero > *{position:relative; z-index:1;}
.an-hero h1{font-size:34px; font-weight:700; color:#fff;}
.an-hero p{margin:6px 0 0; font-size:13px; color:#cfd9d1;}
.an-range{display:flex; gap:4px; padding:4px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:999px;}
.an-range-btn{border:none; background:transparent; color:#dfe7e0; font:inherit; font-weight:700; font-size:13.5px; padding:8px 16px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s;}
.an-range-btn:hover{color:#fff;}
.an-range-btn.active{background:var(--brass); color:#fff; box-shadow:0 2px 10px rgba(169,117,46,.45);}
.an-hero-controls{display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.an-custom{display:none; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.an-custom.open{display:flex;}
.an-custom label{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#dfe7e0;}
.an-custom input[type="date"]{font:inherit; font-size:13px; padding:7px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; color-scheme:dark;}
.an-custom-apply{border:none; font:inherit; font-weight:700; font-size:13.5px; padding:8px 18px; border-radius:999px; background:var(--brass); color:#fff; cursor:pointer;}
.an-custom-apply:hover{filter:brightness(1.08);}
.an-custom-error{flex-basis:100%; text-align:end; font-size:12px; font-weight:700; color:#f3b0a2; min-height:0;}
.an-custom-error:empty{display:none;}
.an-loading .an-kpis, .an-loading .an-section, .an-loading .an-insights{opacity:.55; transition:opacity .2s;}
.an-skeleton{height:420px; border-radius:var(--radius-l); background:linear-gradient(90deg, var(--paper-sunken), var(--paper-raised), var(--paper-sunken)); background-size:200% 100%; animation:an-shimmer 1.2s linear infinite;}
@keyframes an-shimmer{from{background-position:200% 0;} to{background-position:-200% 0;}}

.an-kpis{display:grid; grid-template-columns:1.35fr repeat(4, 1fr); gap:14px; margin-top:16px;}
.an-kpi{position:relative; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l); padding:16px 18px 12px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:6px; overflow:hidden; animation:an-rise .5s cubic-bezier(.23,1,.32,1) both;}
.an-kpi:nth-child(2){animation-delay:.05s;} .an-kpi:nth-child(3){animation-delay:.1s;} .an-kpi:nth-child(4){animation-delay:.15s;} .an-kpi:nth-child(5){animation-delay:.2s;}
.an-kpi-hero{flex-direction:row; align-items:center; gap:16px; background:linear-gradient(135deg, var(--forest-tint), var(--paper-raised));}
.an-kpi-ring{position:relative; flex:0 0 auto;}
.an-kpi-ring span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--forest);}
.an-kpi-label{font-size:12px; font-weight:700; color:var(--ink-soft);}
.an-kpi-value{font-family:var(--font-display); font-size:38px; font-weight:700; line-height:1;}
.an-kpi-value small{font-size:20px; margin-inline-start:2px;}
.an-kpi-foot{font-size:11.5px; color:var(--ink-soft); margin-top:auto;}
.an-kpi .spark{width:100%; height:34px; display:block;}
.spark-line{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.an-trend{align-self:flex-start; display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--paper-sunken); color:var(--ink-soft);}
.an-trend.good{background:var(--forest-tint); color:var(--forest);}
.an-trend.bad{background:var(--stamp-red-tint); color:var(--stamp-red);}
.an-kpi-hero .an-trend{margin-top:6px;}

.an-insights{margin-top:16px; border-radius:var(--radius-l); border:1px solid var(--line); background:var(--paper-raised); box-shadow:var(--shadow-1); padding:16px 20px;}
.an-insights-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.an-insights-head h3{font-size:19px;}
.an-insights-head span{font-size:11.5px; color:var(--ink-soft);}
.an-insights ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:4px 22px;}
.an-insights li{position:relative; padding:8px 18px 8px 0; font-size:13.5px; line-height:1.7; border-bottom:1px dashed var(--line);}
.an-insights li::before{content:""; position:absolute; right:0; top:15px; width:8px; height:8px; border-radius:50%; background:var(--ink-soft);}
.an-insights li.bad::before{background:var(--stamp-red); box-shadow:0 0 0 3px var(--stamp-red-tint);}
.an-insights li.good::before{background:var(--forest); box-shadow:0 0 0 3px var(--forest-tint);}
.an-insights li.info::before{background:var(--brass); box-shadow:0 0 0 3px var(--brass-tint);}

.an-section{margin-top:30px;}
.an-section-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--line);}
.an-section-head h2{font-size:24px; position:relative; padding-inline-start:14px;}
.an-section-head h2::before{content:""; position:absolute; right:0; top:15%; bottom:15%; width:4px; border-radius:4px; background:var(--brass);}
.an-section-head p{margin:0; font-size:12.5px; color:var(--ink-soft);}
.an-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px;}
.an-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-1); padding:16px 18px; min-width:0; animation:an-rise .55s cubic-bezier(.23,1,.32,1) both;}
.an-card.span-2{grid-column:span 2;}
.an-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px;}
.an-card-head h3{font-size:17px;}
.an-card-note{font-size:11px; color:var(--ink-soft);}
@keyframes an-rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

.chart{width:100%; height:auto; display:block; overflow:visible;}
.chart-empty{padding:34px 10px; text-align:center; color:var(--ink-soft); font-size:13px; background:var(--paper-sunken); border-radius:var(--radius-m);}
.ch-grid{stroke:var(--line); stroke-width:1; stroke-dasharray:3 4;}
.ch-axis{font-size:11px; fill:var(--ink-soft); font-family:var(--font-body);}
.ch-axis-hl{fill:var(--stamp-red); font-weight:700;}
.ch-val{font-size:11.5px; font-weight:700; fill:var(--ink); font-family:var(--font-body);}
.ch-line{fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:an-draw 1.1s cubic-bezier(.23,1,.32,1) forwards;}
.ch-area{animation:an-fade .9s ease both;}
.ch-avg{stroke:var(--ink-soft); stroke-width:1.2; stroke-dasharray:6 5; opacity:.7;}
.ch-avg-label{font-size:11px; fill:var(--ink-soft); font-weight:700; font-family:var(--font-body);}
.ch-dot{stroke-width:2;}
.ch-peak-halo{opacity:.18; animation:an-pulse 2s ease-in-out infinite; transform-box:fill-box; transform-origin:center;}
.ch-hit{fill:transparent; cursor:pointer;}
.ch-hit:hover{fill:rgba(128,128,128,.07);}
.ch-bar{transform-box:fill-box; transform-origin:bottom; animation:an-grow .7s cubic-bezier(.23,1,.32,1) both;}
.ch-bar-g:hover .ch-bar{filter:brightness(1.12);}
@keyframes an-draw{to{stroke-dashoffset:0;}}
@keyframes an-fade{from{opacity:0;} to{opacity:1;}}
@keyframes an-grow{from{transform:scaleY(0);} to{transform:scaleY(1);}}
@keyframes an-pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.6);}}

.hbars{display:flex; flex-direction:column; gap:9px;}
.hbar-row{display:grid; grid-template-columns:minmax(90px, 34%) 1fr auto; align-items:center; gap:10px; cursor:default;}
.hbar-label{display:flex; flex-direction:column; min-width:0;}
.hbar-label span{font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hbar-label small{font-size:11px; color:var(--ink-soft);}
.hbar-track{height:12px; border-radius:999px; background:var(--paper-sunken); overflow:hidden;}
.hbar-fill{height:100%; border-radius:999px; transform-origin:right; animation:an-grow-x .8s cubic-bezier(.23,1,.32,1) both;}
.hbar-value{font-size:13px; font-weight:700; min-width:34px; text-align:left;}
@keyframes an-grow-x{from{transform:scaleX(0);} to{transform:scaleX(1);}}

.donut-wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;}
.donut{flex:0 0 auto;}
.ch-donut-track{fill:none; stroke:var(--paper-sunken); stroke-width:22;}
.ch-donut-seg{fill:none; stroke-width:22; cursor:pointer; transition:stroke-width .15s; animation:an-fade .6s ease both;}
.ch-donut-seg:hover{stroke-width:27;}
.ch-donut-value{font-family:var(--font-display); font-size:32px; font-weight:700; fill:var(--ink);}
.ch-donut-label{font-size:11px; fill:var(--ink-soft); font-family:var(--font-body);}
.ch-legend{display:flex; flex-direction:column; gap:7px; min-width:170px; flex:1;}
.ch-legend-row{display:flex; align-items:center; gap:8px; font-size:13px;}
.ch-swatch{width:11px; height:11px; border-radius:3px; flex:0 0 auto;}
.ch-legend-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ch-legend-val{display:flex; align-items:baseline; gap:8px;}
.ch-legend-val b{font-weight:700;}
.ch-legend-val small{font-weight:500; color:var(--ink-soft); min-width:44px; padding:1px 6px; border-radius:999px; background:var(--paper-sunken); text-align:center;}

.ring-track{fill:none; stroke:var(--paper-sunken);}
.ring-fill{fill:none; stroke-linecap:round; animation:an-fade .8s ease both;}

.heatmap{display:grid; gap:4px; align-items:center;}
.hm-col{text-align:center; font-size:11px; font-weight:700; color:var(--ink-soft);}
.hm-row{font-size:12px; font-weight:700; padding-inline-end:6px; white-space:nowrap;}
.hm-cell{min-height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; cursor:default; transition:transform .1s;}
.hm-cell:hover{transform:scale(1.08);}
.hm-zero{background:var(--paper-sunken);}

.an-compare{display:flex; flex-direction:column; gap:14px;}
.an-compare-legend{display:flex; gap:18px; font-size:12.5px; font-weight:700; flex-wrap:wrap;}
.an-compare-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:6px;}
.an-compare-metric{display:flex; flex-direction:column; gap:5px;}
.an-compare-title{display:flex; justify-content:space-between; font-size:13px; font-weight:700;}
.an-compare-title b{color:var(--stamp-red); font-size:12px; background:var(--stamp-red-tint); padding:1px 8px; border-radius:999px;}
.an-compare-bar{display:flex; align-items:center; gap:8px; height:14px;}
.an-compare-bar > div{height:100%; border-radius:999px; min-width:2px; transform-origin:right; animation:an-grow-x .8s cubic-bezier(.23,1,.32,1) both;}
.an-compare-bar span{font-size:12px; font-weight:700;}

.an-share{display:flex; align-items:center; gap:18px; justify-content:center; padding:10px 0;}
.an-share div{display:flex; flex-direction:column; gap:3px;}
.an-share b{font-family:var(--font-display); font-size:40px; color:var(--stamp-red); line-height:1;}
.an-share span{font-size:13px; font-weight:700;}
.an-share small{font-size:11.5px; color:var(--ink-soft);}

.an-split{margin-bottom:16px;}
.an-split-bar{display:flex; height:18px; border-radius:999px; overflow:hidden; background:var(--paper-sunken);}
.an-split-bar div{height:100%;}
.an-split-legend{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:8px; font-size:12.5px;}

.an-table-wrap{overflow-x:auto;}
.an-table{width:100%; border-collapse:collapse; font-size:13px;}
.an-table th{text-align:start; font-size:11.5px; color:var(--ink-soft); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
.an-table td{padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
.an-table tbody tr:hover{background:var(--paper-sunken);}
.an-cell-bar{display:flex; align-items:center; gap:8px; min-width:120px;}
.an-cell-bar div{height:8px; border-radius:999px; min-width:2px; max-width:70%;}
.an-cell-bar span{font-weight:700; font-size:12.5px;}

/* بيانات الفصول: the classroom name + its student count as one clear button that opens the classroom's students */
.classroom-open-btn{display:flex; align-items:center; gap:14px; width:100%; min-width:230px; min-height:40px; padding:7px 14px; border-radius:10px;
  border:1.5px solid var(--line-strong); background:var(--paper-sunken); color:var(--ink); font:inherit; cursor:pointer; text-align:start;
  transition:border-color .15s, background .15s, transform .08s;}
.classroom-open-btn:hover{border-color:var(--brass); background:var(--brass-tint);}
.classroom-open-btn:active{transform:scale(.985);}
.classroom-open-btn:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}
.classroom-open-name{font-weight:700; font-size:14px;}
.classroom-open-count{font-weight:700; font-size:12.5px; padding:2px 10px; border-radius:999px; background:var(--forest-tint); color:var(--forest);}
.classroom-open-go{margin-inline-start:auto; font-size:12px; font-weight:700; color:var(--brass-ink);}

/* today's absence list on the home page: a busy day scrolls inside its own box instead of pushing everything below
   it (the analytics) far down the page; the column titles stay visible while scrolling */
.dash-scroll{max-height:420px; overflow:auto;}
.dash-scroll thead th{position:sticky; top:0; z-index:1;}
.chart-tip{position:fixed; z-index:200; display:none; pointer-events:none; background:var(--sidebar-bg); color:#fff; font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.25); max-width:280px; line-height:1.6;}

@media (max-width:1100px){ .an-kpis{grid-template-columns:repeat(2, 1fr);} .an-kpi-hero{grid-column:span 2;} }
@media (max-width:760px){
  .an-hero{padding:20px 18px;} .an-hero h1{font-size:28px;}
  .an-hero-controls{align-items:stretch; width:100%;}
  .an-range{flex-wrap:wrap; justify-content:center; border-radius:18px;}
  .an-range-btn{padding:8px 12px;}
  .an-custom{justify-content:center;}
  .an-kpis{gap:10px;}
  .an-kpi-value{font-size:30px;}
  .an-grid{grid-template-columns:1fr;} .an-card.span-2{grid-column:auto;}
  .an-insights ul{grid-template-columns:1fr;}
  .hbar-row{grid-template-columns:minmax(80px, 38%) 1fr auto;}
  .hm-cell{min-height:26px; font-size:11px;}
  .ch-axis, .ch-avg-label, .ch-val{font-size:14px;}
}
@media (prefers-reduced-motion: reduce){
  .an-kpi, .an-card, .ch-line, .ch-area, .ch-bar, .hbar-fill, .ch-donut-seg, .ring-fill, .an-compare-bar > div, .ch-peak-halo{animation:none !important;}
  .ch-line{stroke-dashoffset:0;}
}