:root{--ink:#10262b;--ink2:#1c3a41;--bg:#f4f0e8;--sf:#fffdf8;--tx:#15292d;--mu:#65777a;--bd:#e4ddcf;--br:#c8892b;--brs:#f6e6c8;--tl:#1f7a72;--tls:#dcefec;--ok:#2e8b57;--wn:#c8892b;--er:#c0392b;--in:#2d6cdf;--r:14px;--sh:0 1px 2px #10262b14,0 8px 24px #10262b0d}
[data-t=d]{--bg:#0c1a1d;--sf:#132a2f;--tx:#eee8da;--mu:#93a7a9;--bd:#254047;--brs:#3a2d14;--tls:#153c39}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif}
[dir=rtl] body,[dir=rtl] button,[dir=rtl] input,[dir=rtl] select,[dir=rtl] textarea{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif}
h1,h2,h3{font-family:Fraunces,'IBM Plex Sans Arabic',serif;margin:0;letter-spacing:-.01em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--br);outline-offset:2px}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
aside{background:var(--ink);color:#eadfc8;padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.logo{display:flex;gap:10px;align-items:center;padding:4px 10px 18px;font:800 20px Fraunces,serif}
.logo i{width:34px;height:34px;border-radius:10px;background:var(--br);display:grid;place-items:center;color:var(--ink);font-style:normal;flex:none}
.nv{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;color:#b9c9c8;cursor:pointer;border:0;background:0;text-align:start;width:100%;font-size:14.5px}
.nv:hover{background:#ffffff12}
.nv.on{background:var(--br);color:var(--ink);font-weight:600}
.nv svg{width:19px;height:19px;flex:none}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sb-x,.sb-burger{display:none}
.sb-x{background:0;border:0;color:#b9c9c8;cursor:pointer;padding:6px;margin-inline-end:-6px;border-radius:8px;line-height:0}
.sb-x:hover{background:#ffffff12}
.sb-x svg,.sb-burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sb-backdrop{display:none}
main{padding:0 32px 90px;min-width:0}
.top{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:18px 0;position:sticky;top:0;background:var(--bg);z-index:5;flex-wrap:wrap}
.top .r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip,.btn{border:1px solid var(--bd);background:var(--sf);border-radius:999px;padding:7px 14px;cursor:pointer;font-weight:500;font-size:14px}
.btn{border-radius:10px;padding:9px 16px}
.btn.p{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-t=d] .btn.p{background:var(--br);color:var(--ink)}
.btn.br{background:var(--br);border-color:var(--br);color:var(--ink);font-weight:600}
.btn.dg{background:#fbe6e3;color:var(--er);border-color:#f0c4be}
.btn.big{padding:14px 26px;font-size:17px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.sel{display:inline-flex;background:var(--sf);border:1px solid var(--bd);border-radius:999px;padding:3px}
.sel a,.sel button{border:0;background:0;padding:5px 12px;border-radius:999px;cursor:pointer;display:inline-block}
.sel .on{background:var(--ink);color:#fff}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:6px 0 22px}
.ph h1{font-size:32px;line-height:1.1}
.ph p{margin:6px 0 0;color:var(--mu)}
.bc{font-size:13px;color:var(--mu);margin-bottom:8px}
.bc a{cursor:pointer}
.bc a:hover{text-decoration:underline}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.g2{grid-template-columns:2fr 1fr}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.card h3{font-size:18px;margin-bottom:12px}
.kpi b{display:block;font:800 36px Fraunces,serif;line-height:1}
.kpi span{color:var(--mu);font-size:13px}
.kpi{border-inline-start:5px solid var(--br)}
.hero{background:var(--ink);color:#f3ead6;border-radius:22px;padding:28px;position:relative;overflow:hidden;box-shadow:var(--sh)}
.hero:after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(#c8892b88,transparent 70%)}
.hero small{letter-spacing:.12em;text-transform:uppercase;color:#e2b56d;font-weight:600}
.hero h2{font-size:34px;margin:6px 0 4px}
.hero .m{display:flex;gap:18px;flex-wrap:wrap;color:#c9d5d3;margin:14px 0 22px}
.bd{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;white-space:nowrap}
.bd:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-scheduled{background:#e3ecfc;color:var(--in)}
.s-live{background:#fde3e0;color:var(--er)}
.s-live:before{animation:pl 1.2s infinite}
.s-completed{background:#dff1e6;color:var(--ok)}
.s-cancelled{background:#eee;color:#777;text-decoration:line-through}
.s-rescheduled{background:var(--brs);color:#8a5a0e}
.s-suspended{background:var(--brs);color:#8a5a0e}
.s-draft{background:#eee;color:#666}
.s-archived{background:#eee;color:#666}
.s-active{background:#dff1e6;color:var(--ok)}
.s-inactive{background:#eee;color:#777}
[data-t=d] .bd{filter:brightness(.95)}
@keyframes pl{50%{opacity:.2}}
table{width:100%;border-collapse:collapse}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);text-align:start;padding:8px 10px;border-bottom:1px solid var(--bd)}
[dir=rtl] th{letter-spacing:0}
td{padding:12px 10px;border-bottom:1px solid var(--bd)}
tr.k{cursor:pointer}
tr.k:hover td{background:var(--brs)}
.table-wrap{overflow-x:auto}
.tag{display:inline-block;background:var(--tls);color:var(--tl);border-radius:8px;padding:1px 9px;font-size:12.5px;margin:1px 2px;font-weight:500}
.av{width:34px;height:34px;border-radius:50%;background:var(--brs);color:#8a5a0e;display:inline-grid;place-items:center;font-weight:700;margin-inline-end:10px;vertical-align:middle}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin-bottom:18px;overflow:auto}
.tabs a{border:0;background:0;padding:10px 16px;cursor:pointer;color:var(--mu);border-bottom:3px solid transparent;white-space:nowrap;display:inline-block}
.tabs a.on{color:var(--tx);border-color:var(--br);font-weight:600}
.cs{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--sf);border:1px solid var(--bd);border-radius:12px;margin-bottom:8px}
.cs.drag{opacity:.4}
.cs .n{font:800 22px Fraunces,serif;color:var(--br);width:34px}
.cs .g{cursor:grab;color:var(--mu)}
.cs .t{flex:1}
.cs .t small{color:var(--mu);display:block}
.note{background:var(--brs);border:1px dashed var(--br);border-radius:12px;padding:12px 16px;margin-bottom:16px;color:#6c4708}
[data-t=d] .note{color:#eccf9a}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lb{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);font-weight:600}
[dir=rtl] .lb{letter-spacing:0}
.ct{border-top:5px solid var(--tl)}
.sc{border-top:5px solid var(--br)}
.day{font:800 15px Fraunces,serif;margin:20px 0 8px;color:var(--mu)}
.row{display:flex;gap:14px;align-items:center;padding:14px;background:var(--sf);border:1px solid var(--bd);border-radius:12px;margin-bottom:8px;flex-wrap:wrap}
.row .tm{font:800 20px Fraunces,serif;min-width:150px}
.row .i{flex:1;min-width:180px}
.row .i small{display:block;color:var(--mu)}
.fl{display:grid;gap:14px}
.fl label{font-weight:600;font-size:14px;display:grid;gap:5px}
.fl input,.fl select,.fl textarea{padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);width:100%}
.fl .er input,.fl .er select{border-color:var(--er)}
.fl .em,.text-danger{color:var(--er);font-weight:400;font-size:13px;display:block}
.fl .h{color:var(--mu);font-weight:400;font-size:12.5px}
.validation-summary-errors{background:#fbe6e3;color:var(--er);border:1px solid #f0c4be;border-radius:12px;padding:12px 16px;margin-bottom:16px}
.validation-summary-errors ul{margin:0;padding-inline-start:18px}
.bar{height:8px;background:var(--bd);border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--tl)}
.mo{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50;padding:16px}
.mo>div{background:var(--sf);border-radius:18px;padding:26px;max-width:460px;width:100%}
.mo h3{margin-bottom:8px}
.mo .a{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;z-index:60;box-shadow:var(--sh);max-width:90vw}
[dir=rtl] .toast{transform:translateX(50%)}
.toast.err{background:var(--er)}
.emp{text-align:center;padding:36px;color:var(--mu)}
.lg{min-height:100vh;display:grid;place-items:center;background:var(--ink);padding:16px}
.lg .card{max-width:420px;width:100%}
.lg h1{font-size:36px;color:var(--ink)}
form.inline{display:inline}
.formcard{max-width:640px}
.dt-search{margin-bottom:12px}

/* Optional Cairo application font — UI:EnableCairoFont.
   The flag only renders data-font="c" on <html>; when it is off the attribute is absent and every
   rule below matches nothing, so the IBM Plex Sans / IBM Plex Sans Arabic / Fraunces stack at the
   top of this file stays exactly as it is. Each family is only APPENDED to the existing stack, so
   the academy's own typefaces remain the fallbacks. The `html` qualifier (rather than a bare
   [data-font]) is what lets these beat the `[dir=rtl] body` rule above in both directions. */
html[data-font=c] body,html[data-font=c] button,html[data-font=c] input,html[data-font=c] select,html[data-font=c] textarea{font-family:'Cairo','IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif}
html[data-font=c][dir=rtl] body,html[data-font=c][dir=rtl] button,html[data-font=c][dir=rtl] input,html[data-font=c][dir=rtl] select,html[data-font=c][dir=rtl] textarea{font-family:'Cairo','IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif}
html[data-font=c] h1,html[data-font=c] h2,html[data-font=c] h3{font-family:'Cairo',Fraunces,'IBM Plex Sans Arabic',serif}
html[data-font=c] .logo,html[data-font=c] .kpi b,html[data-font=c] .day,html[data-font=c] .row .tm,html[data-font=c] .cs .n{font-family:'Cairo',Fraunces,'IBM Plex Sans Arabic',serif}

@media(max-width:1000px){.g2,.two{grid-template-columns:1fr}}
/* Below this width the sidebar stops being a grid column and becomes a fixed drawer, so it is
   still a SIDE menu — it slides in over the content instead of stacking underneath it. The
   previous rules here hid <aside> outright and substituted a fixed bottom bar, which is what made
   the menu fall to the bottom of the page; those are gone, and the burger/close/backdrop below take
   over. Direction is read from html[dir] rather than hard-coded, so RTL and LTR both behave. */
@media(max-width:860px){
  html{overflow-x:clip}
  .app{grid-template-columns:1fr}
  main{padding:0 16px 40px}
  aside.sb{position:fixed;inset-block:0;inset-inline-start:0;width:min(280px,82vw);height:100vh;height:100dvh;z-index:50;transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility .22s ease;box-shadow:var(--sh)}
  html[dir=rtl] aside.sb{transform:translateX(100%)}
  body.sb-open aside.sb{transform:translateX(0);visibility:visible}
  body.sb-open{overflow:hidden}
  .sb-x{display:inline-flex}
  .sb-burger{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px}
  /* Only ever an overlay at drawer width. A real element rather than a pseudo-element, so it can be
     clicked, but scoped to this breakpoint so it can never sit over a desktop page. */
  .sb-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#0009;z-index:45}
  .top{gap:8px;padding:14px 0}
  .top>span.chip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card,.hero{padding:16px}
  .ph h1{font-size:26px}
  .ph h2{font-size:21px}
  .btn{padding:9px 13px}
  .lg{padding:12px}
  .lg h1{font-size:30px}
}