:root{--pr:#0f5b4d;--ac:#c8932e;--bg:#edf3f0;--s:#fff;--ink:#14302b;--mu:#5d716e;--ln:#d5dfdc;--rd:#b3412f}
[data-theme=blue]{--pr:#1c3f73;--ac:#2b9fd9;--bg:#edf1f7;--ink:#14233b}
[data-theme=maroon]{--pr:#6e1f2f;--ac:#b9822a;--bg:#f4eeee;--ink:#341519}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 "Segoe UI",Tahoma,"Noto Naskh Arabic",sans-serif}
h1,h2,h3{font-family:Georgia,"Noto Naskh Arabic",serif;margin:0 0 .5rem}
.app{display:flex;min-height:100vh}nav{width:215px;background:var(--pr);color:#fff;padding:16px 10px;flex-shrink:0}
nav h1{font-size:21px;padding:0 8px 10px;border-bottom:2px solid var(--ac);margin-bottom:10px}
nav a{display:block;color:#fff;text-decoration:none;padding:8px 12px;border-radius:6px;opacity:.85}
nav a.on,nav a:hover{background:rgba(255,255,255,.17);opacity:1}
.tools{margin-top:20px;padding:0 12px;font-size:13px}.tools a{display:inline-block;padding:2px 4px}
.dot{width:18px;height:18px;border-radius:50%;border:2px solid #fff;margin:6px 4px 6px 0!important;padding:0!important}
.dot.green{background:#0f5b4d}.dot.blue{background:#1c3f73}.dot.maroon{background:#6e1f2f}
main{flex:1;padding:20px;min-width:0}.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.bar h2{flex:1;margin:0;font-size:24px}.card{background:var(--s);border:1px solid var(--ln);border-radius:8px;padding:14px;margin-bottom:14px}
.b{display:inline-block;background:var(--pr);color:#fff;border:0;padding:8px 14px;border-radius:6px;cursor:pointer;text-decoration:none;font:inherit}
.b.alt{background:transparent;color:var(--ink);border:1px solid var(--ln)}.b.rd{background:var(--rd)}.b.sm{padding:3px 9px;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.stat b{display:block;font-size:22px;font-family:Georgia,serif;color:var(--pr)}.stat span{color:var(--mu);font-size:13px}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:start;padding:7px 10px;border-bottom:1px solid var(--ln);white-space:nowrap}
th{color:var(--mu);font-size:13px}th.n,td.n{text-align:end}.mu{color:var(--mu)}.err{color:var(--rd)}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--ln);border-radius:6px;padding:7px 9px}
.bar input,.bar select{width:auto}label{display:block;font-size:13px;color:var(--mu);margin:10px 0 2px}
.form{max-width:520px}.login{max-width:350px;margin:10vh auto;padding:18px}.note{border-inline-start:3px solid var(--ac);background:var(--bg);padding:8px 12px;margin-bottom:12px;color:var(--mu);font-size:13px}
.doc{display:inline-block;margin-inline-end:8px;color:var(--pr)}a{color:var(--pr)}
@media(max-width:760px){.app{flex-direction:column}nav{width:auto;display:flex;flex-wrap:wrap}nav h1{width:100%}main{padding:12px}}
@media print{.noprint,nav{display:none!important}body{background:#fff}.card{border:0}}