/* ==========================================================
   Taekwondo Center — visual system
   Palette taken from the competition mat: chung blue, hong red,
   dan gold, and the deep charcoal of the dojang floor edge.
   ========================================================== */

:root{
  --mat:#0E1116;            /* sidebar / header rail */
  --mat-2:#161B23;
  --chung:#1D5FA9;          /* blue corner  — primary action */
  --chung-soft:#E7EFF9;
  --hong:#C4342E;           /* red corner   — destructive     */
  --hong-soft:#FBEAE9;
  --gold:#C9A227;           /* dan grade                       */
  --green:#2E9E4F;
  --amber:#E08A1E;

  --paper:#F3F4F7;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --line:#E2E5EB;
  --ink:#12161C;
  --ink-2:#3D4553;
  --muted:#727C8B;

  --r:6px;
  --shadow:0 1px 2px rgba(18,22,28,.05), 0 8px 24px -16px rgba(18,22,28,.25);
  --side:252px;

  --font-display:"Noto Kufi Arabic","Cairo",system-ui,sans-serif;
  --font-body:"Cairo","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

html[data-theme="dark"]{
  --paper:#0D1015;
  --surface:#151A21;
  --surface-2:#1A2029;
  --line:#28303B;
  --ink:#E8ECF2;
  --ink-2:#C2CAD5;
  --muted:#8B96A5;
  --chung-soft:#15263B;
  --hong-soft:#331B1A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:14.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.3; margin:0}
a{color:var(--chung); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--chung); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- numerals & data ---------- */
.num,td.num,.stat-value,.money{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* ==========================================================
   SIGNATURE: the belt bar.
   Every student, row and rank in the system is marked with the
   real belt colours — solid for a full grade, split for a tip.
   ========================================================== */
.belt-bar{
  display:inline-block; width:7px; height:24px; border-radius:2px;
  background:linear-gradient(to bottom, var(--b1,#fff) 0 50%, var(--b2,#fff) 50% 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
  flex:0 0 auto;
}
.belt-bar.wide{width:100%; height:9px; border-radius:2px;
  background:linear-gradient(to left, var(--b1,#fff) 0 50%, var(--b2,#fff) 50% 100%)}
[dir="ltr"] .belt-bar.wide{background:linear-gradient(to right, var(--b1,#fff) 0 50%, var(--b2,#fff) 50% 100%)}
.belt-chip{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.belt-chip span:last-child{font-size:13px}

/* the rank ladder on a student's page */
.ladder{display:flex; gap:3px; align-items:flex-end; padding:14px 0 6px}
.ladder i{display:block; width:16px; border-radius:2px; background:linear-gradient(to bottom,var(--b1) 0 50%,var(--b2) 50% 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); opacity:.32; height:22px; transition:height .2s}
.ladder i.done{opacity:.85}
.ladder i.now{opacity:1; height:44px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px var(--chung)}

/* ==========================================================
   SHELL
   ========================================================== */
.layout{display:block}
.sidebar{
  position:fixed; inset-block:0; inset-inline-end:0; width:var(--side);
  background:var(--mat); color:#C9D2DE; display:flex; flex-direction:column;
  border-inline-start:1px solid #000; z-index:40;
}
.brand{display:flex; align-items:center; gap:10px; padding:18px 18px 16px; border-bottom:1px solid #21272F}
.brand-mark{
  width:34px; height:34px; border-radius:4px; background:var(--mat-2);
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px #2C3441;
  font-family:var(--font-display); color:var(--gold); font-size:15px; font-weight:800;
}
.brand b{font-family:var(--font-display); color:#fff; font-size:15px; display:block; line-height:1.25}
.brand small{color:#7C889A; font-size:11px; letter-spacing:.06em}

.nav{padding:10px 10px 20px; overflow-y:auto; flex:1}
.nav-group{margin-top:14px; padding:0 10px 6px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#5D6979; font-family:var(--font-mono)}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:5px;
  color:#B4BECC; font-size:14px; text-decoration:none; margin-bottom:1px;
}
.nav a:hover{background:#1A212B; color:#fff; text-decoration:none}
.nav a.active{background:var(--chung); color:#fff; font-weight:600}
.nav a svg{width:17px; height:17px; flex:0 0 auto; opacity:.85}
.nav a.active svg{opacity:1}

.side-foot{padding:12px 14px; border-top:1px solid #21272F; font-size:12px; color:#7C889A}

.main{margin-inline-end:var(--side); min-height:100vh; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:30; background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 22px; display:flex; align-items:center; gap:14px;
}
.topbar h1{font-size:19px}
.topbar .spacer{flex:1}
.page{padding:22px; flex:1}

.icon-btn{
  width:34px; height:34px; border-radius:5px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); display:grid; place-items:center; cursor:pointer; font-size:15px; text-decoration:none;
}
.icon-btn:hover{background:var(--surface-2); text-decoration:none}
.userchip{display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px; border:1px solid var(--line);
  border-radius:20px; background:var(--surface)}
.avatar{width:28px; height:28px; border-radius:50%; background:var(--chung); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:700; overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover}

/* ==========================================================
   COMPONENTS
   ========================================================== */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card + .card{margin-top:18px}
.card-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.card-head h2,.card-head h3{font-size:15.5px}
.card-head .spacer{flex:1}
.pad{padding:18px}
.center{text-align:center}
.muted{color:var(--muted)}
.big-icon{font-size:34px; color:var(--muted); margin-bottom:6px}

.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* stat tile */
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; position:relative; overflow:hidden}
.stat .eyebrow{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.stat-value{font-size:27px; font-weight:600; margin-top:4px; line-height:1.15}
.stat .sub{font-size:12.5px; color:var(--muted); margin-top:2px}
.stat::after{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--chung)}
.stat.red::after{background:var(--hong)} .stat.green::after{background:var(--green)}
.stat.gold::after{background:var(--gold)} .stat.amber::after{background:var(--amber)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:5px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn-primary{background:var(--chung); border-color:var(--chung); color:#fff}
.btn-primary:hover{background:#17508F; color:#fff}
.btn-danger{background:var(--hong); border-color:var(--hong); color:#fff}
.btn-danger:hover{background:#A82B26; color:#fff}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-2); padding:6px 9px}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:5px 10px; font-size:13px}
.btn-block{width:100%; justify-content:center}

/* forms */
.field{margin-bottom:14px}
.field > label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px}
.field .hint{font-size:11.5px; color:var(--muted); margin-top:4px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],
input[type=search],input[type=file],select,textarea{
  width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:5px;
  background:var(--surface); color:var(--ink); font-family:var(--font-body); font-size:14px;
}
input[type=date],input[type=time],input[type=number]{font-family:var(--font-mono); font-size:13.5px}
input:focus,select:focus,textarea:focus{border-color:var(--chung); outline:none; box-shadow:0 0 0 3px var(--chung-soft)}
input[readonly]{background:var(--surface-2); color:var(--muted)}
textarea{min-height:80px; resize:vertical}
fieldset{border:1px solid var(--line); border-radius:var(--r); padding:14px 16px 4px; margin:0 0 18px}
legend{font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--chung); padding:0 8px}
.row{display:grid; gap:0 16px}
.r2{grid-template-columns:repeat(2,1fr)} .r3{grid-template-columns:repeat(3,1fr)} .r4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.r2,.r3,.r4{grid-template-columns:1fr}}
.form-actions{display:flex; gap:10px; padding-top:6px}
.check{display:flex; align-items:center; gap:8px; font-size:14px}
.check input{width:auto}

/* toolbar */
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:14px 18px; border-bottom:1px solid var(--line)}
.toolbar .field{margin:0; min-width:150px}
.toolbar .spacer{flex:1}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.8px}
th,td{padding:10px 12px; text-align:start; border-bottom:1px solid var(--line); vertical-align:middle}
thead th{
  background:var(--surface-2); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-family:var(--font-mono); font-weight:500; white-space:nowrap;
}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
td .row-actions{display:flex; gap:4px; justify-content:flex-end}
.thumb{width:34px; height:34px; border-radius:4px; object-fit:cover; background:var(--surface-2); border:1px solid var(--line)}

/* badges */
.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line)}
.badge.blue{background:var(--chung-soft); color:var(--chung); border-color:transparent}
.badge.red{background:var(--hong-soft); color:var(--hong); border-color:transparent}
.badge.green{background:rgba(46,158,79,.13); color:var(--green); border-color:transparent}
.badge.amber{background:rgba(224,138,30,.14); color:var(--amber); border-color:transparent}
.badge.gold{background:rgba(201,162,39,.15); color:#9A7A14; border-color:transparent}

/* alerts */
.alert{padding:11px 15px; border-radius:5px; margin-bottom:16px; font-size:14px; border:1px solid transparent}
.alert.ok{background:rgba(46,158,79,.12); color:#1E7A3C; border-color:rgba(46,158,79,.3)}
.alert.err{background:var(--hong-soft); color:var(--hong); border-color:rgba(196,52,46,.3)}
html[data-theme="dark"] .alert.ok{color:#6BD08F}

/* attendance marker */
.att-set{display:flex; gap:4px}
.att-set label{cursor:pointer}
.att-set input{position:absolute; opacity:0; width:0}
.att-set span{display:grid; place-items:center; width:34px; height:30px; border:1px solid var(--line);
  border-radius:5px; font-size:12px; font-weight:700; color:var(--muted); background:var(--surface)}
.att-set input:checked + span.p{background:var(--green); border-color:var(--green); color:#fff}
.att-set input:checked + span.a{background:var(--hong); border-color:var(--hong); color:#fff}
.att-set input:checked + span.l{background:var(--amber); border-color:var(--amber); color:#fff}
.att-set input:checked + span.e{background:var(--chung); border-color:var(--chung); color:#fff}
.att-set input:focus-visible + span{outline:2px solid var(--chung); outline-offset:2px}

/* mini bar chart used in reports + dashboard */
.bars{display:flex; align-items:flex-end; gap:8px; height:150px; padding:10px 4px 0}
.bars .b{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%}
.bars .b i{display:block; width:100%; background:var(--chung); border-radius:3px 3px 0 0; min-height:2px}
.bars .b.exp i{background:var(--hong)}
.bars .b em{font-style:normal; font-size:10.5px; color:var(--muted); font-family:var(--font-mono)}

/* login */
.login-wrap{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}
@media(max-width:900px){.login-wrap{grid-template-columns:1fr}.login-art{display:none}}
.login-art{background:var(--mat); color:#fff; padding:56px 48px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden}
.login-art h2{font-size:34px; line-height:1.25; max-width:15ch}
.login-art p{color:#96A2B2; max-width:38ch; margin-top:14px}
.login-art .stripes{display:flex; gap:5px; margin-top:34px}
.login-art .stripes i{width:22px; height:52px; border-radius:2px;
  background:linear-gradient(to bottom,var(--b1) 0 50%,var(--b2) 50% 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.login-form{display:flex; align-items:center; justify-content:center; padding:40px}
.login-box{width:100%; max-width:360px}
.login-box h1{font-size:23px; margin-bottom:4px}

/* invoice / print */
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main{margin:0}
  .page{padding:0}
  .card{border:none; box-shadow:none}
  body{background:#fff}
}
.invoice{max-width:760px; margin:0 auto; background:#fff; color:#12161C}
.invoice-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  border-bottom:2px solid var(--mat); padding-bottom:14px; margin-bottom:20px}
.invoice-total{font-family:var(--font-mono); font-size:24px; font-weight:600}

/* responsive shell */
@media(max-width:960px){
  .sidebar{transform:translateX(100%); transition:transform .2s}
  [dir="ltr"] .sidebar{transform:translateX(-100%)}
  body.nav-open .sidebar{transform:none}
  .main{margin-inline-end:0}
  .page{padding:14px}
  .topbar{padding:10px 14px}
}
.nav-toggle{display:none}
@media(max-width:960px){.nav-toggle{display:grid}}
.scrim{display:none}
body.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:35}

/* ==========================================================
   NOTIFICATIONS
   ========================================================== */
.nav-count{margin-inline-start:auto;background:var(--hong);color:#fff;font-family:var(--font-mono);
  font-size:11px;font-weight:600;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.nav a.active .nav-count{background:rgba(0,0,0,.28)}

.bell-wrap{position:relative}
.bell-wrap .icon-btn{position:relative}
.bell-wrap .icon-btn svg{width:17px;height:17px}
.bell-dot{position:absolute;inset-block-start:-5px;inset-inline-end:-5px;background:var(--hong);color:#fff;
  font-family:var(--font-mono);font-size:10px;font-weight:600;line-height:1;padding:3px 5px;border-radius:9px;
  box-shadow:0 0 0 2px var(--surface)}
.bell-menu{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;width:340px;max-width:92vw;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 44px -18px rgba(0,0,0,.45);
  z-index:50;overflow:hidden}
.bell-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.bell-list{max-height:min(56vh,420px);overflow-y:auto}
.bell-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink);
  text-decoration:none;align-items:flex-start}
.bell-item:last-child{border-bottom:none}
.bell-item:hover{background:var(--surface-2);text-decoration:none}
.bell-item.unread{background:var(--chung-soft)}
.bell-item.unread:hover{filter:brightness(.97)}
.bell-ico{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;font-size:14px;flex:0 0 auto;
  background:var(--surface-2);border:1px solid var(--line)}
.bell-ico.red{background:var(--hong-soft);border-color:transparent;color:var(--hong)}
.bell-ico.amber{background:rgba(224,138,30,.16);border-color:transparent;color:var(--amber)}
.bell-ico.blue{background:var(--chung-soft);border-color:transparent;color:var(--chung)}
.bell-txt{min-width:0}
.bell-txt b{display:block;font-size:13.4px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bell-txt small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.bell-foot{display:block;padding:10px;text-align:center;font-size:13px;border-top:1px solid var(--line);
  background:var(--surface-2)}

/* alert rows on the notifications page */
.alert-row{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);align-items:flex-start}
.alert-row:last-child{border-bottom:none}
.alert-row.unread{background:var(--chung-soft)}
.alert-row .grow{flex:1;min-width:0}
.alert-row h4{font-size:14.5px;margin:0 0 2px}
.alert-row p{margin:0;font-size:13px;color:var(--muted)}
.alert-row .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* footer + legal pages */
.app-foot{display:flex;gap:8px;justify-content:center;align-items:center;padding:16px;
  color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);flex-wrap:wrap}
.app-foot .dot{opacity:.5}
.legal-wrap{max-width:820px;margin:0 auto;padding:26px 0}
.legal-body{white-space:pre-wrap;line-height:1.9;font-size:14.5px}
.legal-body h2{font-size:17px;margin:22px 0 8px}
.public-top{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);
  background:var(--surface);position:sticky;top:0;z-index:10}