/* =========================================================
   KALEM INTERNATIONAL SCHOOL — Admin theme
   Clean, light, widget-driven layout (white sidebar, white
   cards on a soft gray canvas, plain KPI numbers, donut/
   legend widgets) — built on the school's own maroon / gold
   / teal palette rather than default SaaS blue.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#f4f5f8;
  --line:#e7e9ee;
  --ink:#1f2430;
  --ink-soft:#828a99;
  --card:#ffffff;

  --maroon:#7a2140;
  --maroon-deep:#5c1830;
  --maroon-tint:#f7e9ee;
  --teal:#0e8f8a;
  --teal-tint:#e4f6f4;
  --gold:#c98a2c;
  --gold-tint:#faf1e0;
  --slate:#5b6472;
  --slate-tint:#eef0f3;

  --danger:#d64545;
  --success:#1a9c6a;

  --sidebar-w:250px;
  --topbar-h:68px;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.03), 0 2px 10px rgba(16,24,40,.05);
}

*{box-sizing:border-box;}

html,body{
  background:var(--bg) !important;
  color:var(--ink) !important;
  font-family:"Plus Jakarta Sans",-apple-system,Arial,sans-serif !important;
  font-size:14px !important;
  margin:0;padding:0;width:100%;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;}
a{color:var(--maroon);text-decoration:none;}
a:hover,a:focus{color:var(--teal);}
a:visited{color:var(--maroon);}
font{color:inherit;font-family:inherit;font-size:inherit;}
h1,h2,h3,h4,h5,h6{color:var(--ink);font-weight:700;letter-spacing:-.01em;}
hr{border:none;border-top:1px solid var(--line);margin:20px 0;}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;}

/* ---------- App shell ---------- */
.app-shell{display:flex;min-height:100vh;width:100%;}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:#fff;border-right:1px solid var(--line);overflow-y:auto;z-index:40;
  transition:transform .2s ease;
}
.sidebar::-webkit-scrollbar{width:5px;}
.sidebar::-webkit-scrollbar-thumb{background:#e2e5ea;border-radius:6px;}

.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;}
.sidebar-brand img{height:32px;width:32px;border-radius:9px;object-fit:cover;}
.sidebar-brand .name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2;}
.sidebar-brand .tagline{font-size:10.5px;color:var(--ink-soft);letter-spacing:.02em;}

.sidebar-section{padding:16px 18px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#b6bcc7;}

.sidebar-nav{list-style:none;margin:0;padding:2px 10px 20px;}
.sidebar-nav li{margin:1px 0;}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);
  color:#4b5261;font-size:13.5px;font-weight:500;
}
.sidebar-nav a i{width:16px;text-align:center;color:#9aa1ad;font-size:13px;}
.sidebar-nav a:hover{background:var(--slate-tint);color:var(--ink);}
.sidebar-nav a.active{background:var(--maroon-tint);color:var(--maroon-deep);font-weight:700;}
.sidebar-nav a.active i{color:var(--maroon);}

/* ---------- Topbar ---------- */
.main-content{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;}

.topbar{
  min-height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:12px 26px;position:sticky;top:0;z-index:30;
}
.topbar .crumb{font-size:16.5px;font-weight:700;color:var(--ink);}
.topbar .crumb small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}

.topbar-right{display:flex;align-items:center;gap:12px;}
.user-chip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:30px;background:var(--bg);}
.user-chip .avatar{
  width:30px;height:30px;border-radius:50%;background:var(--maroon);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;
}
.user-chip .who{line-height:1.15;}
.user-chip .who .n{font-size:12.5px;font-weight:700;color:var(--ink);}
.user-chip .who .r{font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}

.btn-logout{
  background:#fff;border:1px solid var(--line);color:var(--danger)!important;
  padding:7px 14px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;
}
.btn-logout:hover{background:var(--danger);border-color:var(--danger);color:#fff!important;}
.menu-toggle{display:none;background:none;border:none;font-size:20px;color:var(--ink);cursor:pointer;}

/* ---------- Page area ---------- */
.page-wrap{padding:22px 26px 42px;flex:1;max-width:1220px;}
.page-head{margin-bottom:18px;}
.page-head h1{font-size:20px;margin:0 0 3px;}
.page-head p{margin:0;color:var(--ink-soft);font-size:12.5px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Many legacy tables carry fixed pixel widths (width="780" etc). Rather than
   fight every one individually, let any table wider than its card scroll
   horizontally inside the card instead of breaking the page layout. */
.card table{max-width:none;}
.scroll-hint{display:none;font-size:11px;color:var(--ink-soft);margin:-10px 0 12px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.card-head h3{font-size:14.5px;margin:0;font-weight:700;}
.card-head .tag{font-size:10.5px;font-weight:600;color:var(--ink-soft);background:var(--slate-tint);
  padding:3px 9px;border-radius:20px;}

/* Row of plain KPI boxes, InLoox-style: number over label, no icon clutter */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px;}
.kpi-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;}
.kpi-box .val{font-size:26px;font-weight:800;color:var(--ink);line-height:1;}
.kpi-box .lbl{font-size:11.5px;color:var(--ink-soft);margin-top:8px;font-weight:600;}

.widget-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start;}
@media (max-width:1000px){.widget-grid{grid-template-columns:1fr;}}

/* Quick-link list rows (replaces icon-tile grid) */
.link-list{display:flex;flex-direction:column;}
.link-list a{
  display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--ink)!important;
}
.link-list a:last-child{border-bottom:none;}
.link-list a:hover{color:var(--maroon)!important;}
.link-list a .ico{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;flex:0 0 auto;
}
.link-list a .go{margin-left:auto;color:var(--ink-soft);font-size:12px;}

/* Donut chart (pure CSS, real data via conic-gradient inline style) */
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.donut{width:130px;height:130px;border-radius:50%;flex:0 0 auto;position:relative;}
.donut::after{content:'';position:absolute;inset:18px;background:#fff;border-radius:50%;}
.donut-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;z-index:2;}
.donut-center .n{font-size:19px;font-weight:800;}
.donut-center .l{font-size:9.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
.legend{display:flex;flex-direction:column;gap:9px;}
.legend .row{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.legend .dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto;}
.legend .n{margin-left:auto;font-weight:700;font-family:"IBM Plex Mono",monospace;}

/* ---------- Generic legacy table reskin (applies site-wide) ---------- */
table{border-collapse:collapse;background:var(--card);}
table[align="center"]{margin:0 auto 18px;}
th,td{padding:10px 12px;border:1px solid var(--line);background-color:transparent;font-size:13px;}
th{background:var(--bg);font-weight:700;color:var(--ink);text-align:center;}
tr:hover td{background:#fbfbfd;}
th > a:only-child, td > a:only-child{display:block;padding:2px 2px;color:var(--maroon);font-weight:600;}
th > a:only-child:hover, td > a:only-child:hover{color:var(--teal);}

input[type=text],input[type=password],input[type=number],input[type=date],
input[type=email],select,textarea{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;font-size:13.5px;
  background:#fff;color:var(--ink);width:auto;font-family:inherit;
}
input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--maroon);box-shadow:0 0 0 3px rgba(122,33,64,.12);
}
input[type=submit],input[type=button],button{
  background:var(--maroon);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;
}
input[type=submit]:hover,input[type=button]:hover,button:hover{background:var(--maroon-deep);}

.footer-bar{padding:13px 26px;background:#fff;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-soft);text-align:center;}
.footer-bar b{color:var(--ink);}

/* Score entry auto-save status */
.autosave-status{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:20px;background:var(--slate-tint);color:var(--ink-soft);
}
.autosave-status.dirty{background:var(--gold-tint);color:#8a6114;}
.autosave-status.saving{background:var(--teal-tint);color:var(--teal);}
.autosave-status.saved{background:#e8f7ee;color:var(--success);}
.autosave-status.error{background:#fdecec;color:var(--danger);}

@media (max-width: 900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(0,0,0,.35);}
  .main-content{margin-left:0;}
  .menu-toggle{display:block;}
  .page-wrap{padding:16px 14px 34px;}
  .card{padding:16px 14px;}
  .topbar{padding:10px 14px;}
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:10px;}
  .kpi-box{padding:14px 14px;}
  .kpi-box .val{font-size:22px;}
  .user-chip .who{display:none;}
  .scroll-hint{display:block;}
}
@media (max-width: 480px){
  .kpi-row{grid-template-columns:1fr 1fr;}
  .topbar .crumb{font-size:14.5px;}
}