:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#183b3b;background:#f5f9f8;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:#08736d}.loading{padding:25vh 1rem;text-align:center}.brand{display:flex;gap:.8rem;align-items:center}.logo{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#08716c;color:white;font-size:1.5rem}.brand strong,.brand small{display:block}.brand small{color:#66817f;margin-top:.2rem}.auth{min-height:100vh;display:grid;place-items:center;padding:1.2rem;background:radial-gradient(circle at 88% 8%,#d3eee9,transparent 40%),#f5f9f8}.auth-card{background:white;width:min(440px,100%);padding:2rem;border:1px solid #dce9e7;border-radius:24px;box-shadow:0 20px 70px #123f3913}.auth h1{font-size:1.65rem;margin:2rem 0 .5rem}.muted{color:#66817f;line-height:1.7}.form{display:grid;gap:1rem}.form label{display:grid;gap:.35rem;font-weight:600;color:#31504f}input,select,textarea{width:100%;border:1px solid #cfdedb;border-radius:11px;background:white;padding:.8rem .9rem;color:#183b3b;min-height:44px}textarea{min-height:95px;resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid #83c6c0;outline-offset:1px}.btn{border:0;border-radius:11px;padding:.75rem 1rem;min-height:44px;font-weight:700;background:#08716c;color:white}.btn.secondary{border:1px solid #bad2cf;background:white;color:#245c58}.btn.warn{background:#ad3d3a}.link-button{border:0;background:transparent;color:#08716c;text-decoration:underline;padding:.5rem}.row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}.center{justify-content:center}.message{padding:.7rem;border-radius:10px;background:#edf8f5;color:#12635e}.error{background:#fff0ee;color:#a23733}.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{background:#103f3e;color:white;padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem}.sidebar .logo{background:#35a79e}.sidebar small{color:#bad9d5}.side-nav{display:grid;gap:.4rem}.side-nav button{border:0;background:transparent;color:#d9eeeb;text-align:right;padding:.8rem;border-radius:10px}.side-nav button.active,.side-nav button:hover{background:#ffffff20;color:white}.side-bottom{margin-top:auto;display:grid;gap:.5rem}.side-bottom small{display:block}.side-bottom button{border:1px solid #ffffff55;background:transparent;color:white;padding:.6rem;border-radius:9px}.workspace{min-width:0}.topbar{background:white;border-bottom:1px solid #e2eeeb;padding:1.2rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}.topbar h1{font-size:1.45rem;margin:0}.topbar .muted{margin:.2rem 0 0}.content{padding:2rem;max-width:1400px;margin:auto}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.card{background:white;border:1px solid #e1ecea;border-radius:18px;padding:1.3rem;box-shadow:0 3px 13px #173c3908}.stat small{color:#67817e}.stat strong{display:block;font-size:2rem;margin-top:.45rem;color:#086d6a}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.8rem 0 1rem}.section-heading h2{margin:0;font-size:1.15rem}.list{display:grid;gap:.7rem}.list-button{width:100%;text-align:right;border:1px solid #e1ecea;border-radius:13px;background:white;padding:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}.list-button:hover{border-color:#64b5ae}.list-button small{display:block;color:#708481;margin-top:.35rem}.pill{display:inline-block;border-radius:100px;padding:.3rem .65rem;background:#e7f5f3;color:#126c66;font-size:.82rem;font-weight:700;white-space:nowrap}.pill.pending_admin,.pill.pending_finance{background:#fff3d5;color:#805c11}.pill.changes_requested,.pill.rejected{background:#fff0ed;color:#a7433c}.pill.completed{background:#e3f4e8;color:#207347}.empty{padding:2rem;text-align:center;color:#6c8581}.bar{display:flex;justify-content:space-between;gap:1rem;align-items:center}.bar h2{margin:.15rem 0}.detail{display:grid;gap:1.2rem}.detail p{line-height:1.7;margin:.4rem 0}.detail section{border-top:1px solid #e1ecea;padding-top:1rem}.detail h3{font-size:1rem;margin:0 0 .5rem}.history{display:grid;gap:.8rem}.history article{border-right:3px solid #6ab9b1;padding-right:.8rem}.history small{color:#6c8581;display:block}.notice{background:#f1faf8;border:1px solid #cfe9e4;border-radius:13px;padding:1rem}.notice.unread{border-color:#48b1a6}dialog{border:0;border-radius:20px;width:min(680px,calc(100% - 1rem));max-height:86vh;overflow:auto;padding:1.4rem;box-shadow:0 22px 80px #071b1b50;color:#183b3b}dialog::backdrop{background:#0d24277a}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-left:0;margin-bottom:1.5rem}.dialog-head h2{margin:0;line-height:1.45}.close{flex:none;width:42px;height:42px;border:1px solid #9fc8c3;background:#eff8f7;color:#245a56;border-radius:11px;font-size:1.5rem;display:grid;place-items:center}.items{display:grid;gap:.7rem}.item-row{display:grid;grid-template-columns:1fr 95px 105px auto;gap:.5rem}.item-row button{border:0;background:#fff0ee;color:#9c3b35;border-radius:9px;padding:.5rem}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.field-grid label{display:grid;gap:.35rem;font-weight:600}.field-grid .full{grid-column:1/-1}#toast{position:fixed;bottom:1rem;left:1rem;z-index:50;max-width:min(400px,90vw)}#toast:not(:empty){background:#164d49;color:white;border-radius:12px;padding:.8rem 1rem;box-shadow:0 10px 25px #1239}.mobile-menu{display:none}@media(max-width:850px){.shell{grid-template-columns:1fr}.sidebar{display:none}.sidebar.open{display:flex;position:fixed;z-index:5;inset:0 auto 0 0;width:min(300px,80vw)}.mobile-menu{display:inline-flex}.topbar{padding:1rem}.topbar .muted{display:none}.content{padding:1rem}.grid{grid-template-columns:1fr 1fr}.topbar .btn{padding:.6rem;font-size:.87rem}.item-row{grid-template-columns:1fr 72px}.item-row input:nth-child(3){grid-column:1}.field-grid{grid-template-columns:1fr}.field-grid .full{grid-column:1}.auth-card{padding:1.5rem}}@media(max-width:390px){.grid{grid-template-columns:1fr}.topbar h1{font-size:1.1rem}}

/* Keep the school navigation on the right for Arabic layouts. */
.shell { direction: rtl; }
.sidebar { grid-column: 1; }
.workspace { grid-column: 2; }
.password-field { position: relative; }
.password-field input { padding-left: 3.5rem; }
.password-toggle { position: absolute; inset-inline-end: .25rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent; color: #245a56; display: grid; place-items: center; border-radius: 9px; }
.password-toggle:focus-visible { outline: 2px solid #08716c; }
.form label.remember { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.remember input { width: 19px; height: 19px; min-height: 0; padding: 0; flex: none; }
.form small.muted { display: block; margin-top: -.65rem; }
.item-row { grid-template-columns: minmax(0,1fr) 84px 44px; align-items: center; }
.item-row button { height: 44px; font-size: 1.4rem; }
@media (max-width: 850px) {
  .sidebar, .workspace { grid-column: 1; }
  .sidebar.open { inset: 0 0 0 auto; width: min(300px,80vw); }
  .item-row { grid-template-columns: minmax(0,1fr) 68px 44px; }
  .item-row input:nth-child(3) { grid-column: auto; }
}

/* School identity: quiet teal, ink blue and generous spacing. */
:root { color: #183a40; background: #f4f8f8; }
body { background: #f4f8f8; }
.school-emblem { width: 52px; height: 52px; flex: none; object-fit: contain; border-radius: 14px; background: #fff; padding: 3px; }
.brand { gap: .75rem; }
.brand strong { font-size: 1.09rem; letter-spacing: -.02em; }
.brand small { font-size: .8rem; }
.sidebar { background: linear-gradient(162deg,#173f47 0%,#12363d 55%,#142b41 100%); }
.sidebar .school-emblem { width: 54px; height: 54px; box-shadow: 0 8px 22px #061d2455; }
.sidebar .brand small { color: #c8e1de; }
.side-nav button.active { background: #ffffff23; box-shadow: inset -3px 0 0 #8dd0c6; }
.workspace { background: radial-gradient(circle at 85% 0%,#e8f4f2 0%,transparent 34%),#f7faf9; }
.topbar { border-bottom-color:#e1ecec; min-height: 90px; }
.topbar-emblem { display:none; width: 38px; height: 38px; object-fit:contain; }
.topbar h1 { color: #193941; }
.content { padding-top: 2.3rem; }
.card,.list-button { border-color: #dce9e7; box-shadow: 0 6px 24px #0b46470a; }
.stat { position:relative; overflow:hidden; }
.stat::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#1c8983,#9ec9d8,#244967); }
.stat strong { color:#176a69; }
.btn:not(.secondary):not(.warn) { background: #176d6b; }
.btn:not(.secondary):not(.warn):hover { background: #115a5a; }
.btn:focus-visible,.list-button:focus-visible,.side-nav button:focus-visible { outline:3px solid #91c9d4; outline-offset:2px; }
.auth { padding: 2.5rem 1rem; background: radial-gradient(circle at 10% 10%,#dce9f1 0%,transparent 39%),radial-gradient(circle at 91% 65%,#ddf3ed 0%,transparent 43%),#f7faf9; }
.auth-layout { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr); direction:rtl; width:min(970px,100%); border-radius:28px; overflow:hidden; box-shadow:0 28px 85px #102d3830; background:#fff; }
.auth-layout .auth-card { width:auto; max-width:none; border:0; box-shadow:none; border-radius:0; padding:clamp(1.5rem,4vw,3.2rem); }
.auth-eyebrow { margin: 2.6rem 0 0; color:#458b8c; font-size:.83rem; font-weight:750; letter-spacing:.02em; }
.auth-layout .auth-card h1 { margin:.45rem 0 .35rem; color:#153945; }
.auth-layout .form { margin-top:1.5rem; }
.auth-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:560px; overflow:hidden; background:linear-gradient(145deg,#dbece9,#e9f2f7); }
.auth-visual > img { width:100%; height:100%; object-fit:cover; object-position:center; position:absolute; inset:0; }
.auth-visual::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#112f3fda); pointer-events:none; }
.auth-visual-caption { position:absolute; z-index:1; bottom:1.8rem; right:1.8rem; left:1.8rem; color:white; text-shadow:0 2px 12px #0b273c88; }
.auth-visual-caption span { display:block; font-size:.86rem; margin-bottom:.45rem; }
.auth-visual-caption strong { display:block; font-size:1.5rem; line-height:1.5; }
.site-credit { background:#fff; border-top:1px solid #dce9e7; color:#3b5e66; }
.credit-inner { width:min(1320px,100%); margin:auto; padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; }
.credit-school,.credit-designer { display:flex; align-items:center; gap:.7rem; line-height:1.6; }
.credit-school img { width:38px; height:38px; object-fit:contain; }
.credit-school small { display:block; color:#779196; }
.credit-designer { font-size:.85rem; }
.credit-designer b { color:#213e5f; }
.credit-designer img { width:70px; height:70px; object-fit:contain; border-radius:12px; }
@media (max-width:850px) {
  .topbar-emblem { display:block; }
  .auth-layout { grid-template-columns:1fr; width:min(480px,100%); }
  .auth-visual { min-height:210px; }
  .auth-visual-caption { bottom:1rem; right:1rem; left:1rem; }
  .auth-visual-caption strong { font-size:1.08rem; }
  .credit-inner { padding:1rem; }
}
@media (max-width:530px) {
  .auth { padding:1rem; }
  .auth-layout { border-radius:20px; }
  .auth-layout .auth-card { padding:1.45rem; }
  .auth-eyebrow { margin-top:1.5rem; }
  .topbar { gap:.5rem; }
  .topbar .row { gap:.45rem; flex-wrap:nowrap; min-width:0; }
  .topbar .row > div { min-width:0; }
  .topbar h1 { font-size:1.03rem; line-height:1.35; }
  .topbar-emblem { width:33px; height:33px; }
  .topbar .btn { white-space:nowrap; }
  .credit-inner { flex-direction:column; align-items:flex-start; gap:.7rem; }
  .credit-designer { width:100%; justify-content:space-between; }
  .credit-designer img { width:57px; height:57px; }
}