/* Brand palette: #780000 deep red · #C1121F red · #FDF0D5 cream · #003049 navy · #669BBC light blue */
:root{
  --primary:#C1121F; --deep:#780000; --secondary:#003049; --accent:#669BBC; --cream:#FDF0D5;
  --on-primary:#FDF0D5;                 /* text on red / navy buttons */
  --ptext:var(--primary);               /* accent-coloured text (numbers, active tab, links) */
  --bg:#FDF0D5; --card:#FFF8E7; --text:#003049; --muted:#4C6973; --border:#E3D3AE;
  --ok:#669BBC; --err:#C1121F;
}
[data-mode=dark]{--bg:#00263A;--card:#003049;--text:#FDF0D5;--muted:#669BBC;--border:#1A4B66;--ptext:var(--accent)}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--ptext)}
.shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--secondary);color:var(--cream);padding:18px 0;flex-shrink:0}
.brand{padding:0 20px 16px;font-size:19px;font-weight:700;border-bottom:1px solid rgba(253,240,213,.18);margin-bottom:8px}
.sidebar a{display:block;padding:11px 20px;color:rgba(253,240,213,.8);text-decoration:none;font-size:14px;border-inline-start:3px solid transparent}
.sidebar a:hover,.sidebar a.active{background:rgba(253,240,213,.1);color:var(--cream);border-inline-start-color:var(--primary)}
.sidebar a.active{font-weight:700}
.main{flex:1;padding:24px 28px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
h1{font-size:22px;margin:0}h3,h4{color:var(--text)}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px;margin-bottom:18px;overflow-x:auto}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:800px){.g4,.g2{grid-template-columns:1fr}.shell{flex-direction:column}.sidebar{width:100%}}
.stat{text-align:center;border-top:4px solid var(--primary)}
.stat b{display:block;font-size:28px;color:var(--ptext)}
.stat span,.muted{color:var(--muted);font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;text-align:start;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-size:12px;text-transform:uppercase}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:6px;font-size:14px;background:var(--card);color:var(--text);margin-bottom:12px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[type=color]{height:38px;padding:2px}input[type=checkbox]{width:auto}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px}
button{padding:8px 15px;border-radius:6px;border:0;cursor:pointer;font-size:14px;font-weight:600;background:var(--primary);color:var(--on-primary)}
button:hover{background:var(--deep)}
button.sec{background:transparent;color:var(--text);border:1px solid var(--border)}
button.sec:hover{background:var(--border)}
button.danger{background:var(--deep)}button.danger:hover{background:#5a0000}
.badge{padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;background:rgba(0,48,73,.1);color:var(--text)}
.badge.active{background:rgba(102,155,188,.3);color:var(--text)}
.badge.inactive,.badge.blocked{background:rgba(193,18,31,.14);color:var(--deep)}
[data-mode=dark] .badge.inactive,[data-mode=dark] .badge.blocked{color:var(--cream);background:rgba(193,18,31,.45)}
.hidden{display:none!important}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tabs button{background:none;color:var(--muted);border-radius:0}
.tabs button.on{color:var(--ptext);border-bottom:2px solid var(--primary)}
.toast{position:fixed;bottom:20px;inset-inline-end:20px;background:var(--secondary);color:var(--cream);border-inline-start:4px solid var(--primary);padding:11px 16px;border-radius:8px;z-index:99;font-size:14px}
.center{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--secondary),var(--deep))}
.login{width:380px}
pre,code{background:rgba(0,48,73,.08);padding:2px 5px;border-radius:4px}
td.row{display:table-cell;white-space:nowrap}      /* keeps the row divider unbroken under button groups */
td.row>button{margin-inline-end:8px}
.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--muted);margin-inline-end:7px;vertical-align:-1px} /* ring keeps navy/dark dots visible on dark cards */
.tabs button:hover{background:rgba(0,48,73,.07);color:var(--text)}   /* generic button:hover would turn tabs deep red */
.tabs button.on:hover{color:var(--ptext)}
table select{width:auto;min-width:130px;margin-bottom:0;padding:6px 8px}   /* role dropdown in the admins table: show 'super_admin' fully */
/* ---- shared additions ---- */
.ok-txt{color:#2E7D32;font-weight:700}.err-txt{color:var(--err)}.warn-txt{color:var(--muted)}
[data-mode=dark] .ok-txt{color:#8FD19E}[data-mode=dark] .err-txt{color:#FF8A8A}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.panel-head h3{margin:0}
.linkbtn{background:none;border:0;padding:0;color:var(--ptext);text-decoration:underline;font-weight:600;cursor:pointer}.linkbtn:hover{background:none;color:var(--ptext)}
.thumb{width:96px;height:44px;border-radius:6px;background:var(--secondary) center/cover no-repeat;position:relative;overflow:hidden;flex-shrink:0}
.thumb i{position:absolute;inset:0}
.pill{display:inline-block;padding:1px 8px;border-radius:12px;font-size:11px;font-weight:700;background:rgba(0,48,73,.1)}
.pill.today{background:var(--primary);color:var(--on-primary)}
.sticky-save{position:sticky;bottom:0;background:var(--bg);padding:12px 0;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;z-index:2}
input[type=range]{padding:0;margin:6px 0 12px;accent-color:var(--primary)}
textarea[dir=rtl],input[dir=rtl]{font-family:"Segoe UI",Tahoma,sans-serif}
.slot{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.slot:last-child{border:0}
.slot .prev{width:150px;height:52px;border:1px dashed var(--border);border-radius:8px;display:grid;place-items:center;overflow:hidden;background:#fff;flex-shrink:0}
.slot .prev img{max-width:100%;max-height:100%}.slot .grow{flex:1;min-width:0}
/* ---- API pulse ---- */
.side-pulse{display:flex!important;align-items:center;gap:9px;margin:14px 12px 0;padding:9px 10px!important;border-radius:8px;background:rgba(253,240,213,.07);font-size:12.5px!important;border-inline-start:0!important}
.side-pulse .dot,.pulse-dot{width:9px;height:9px;border-radius:50%;background:#9AA5AD;position:relative;flex-shrink:0;display:inline-block}
.side-pulse.live .dot,.pulse-dot.live{background:#5CC98A}
.side-pulse.live .dot::after,.pulse-dot.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#5CC98A;animation:ping 2s ease-out infinite}
.side-pulse.down .dot,.pulse-dot.down{background:#FF6B6B}.pulse-dot.warn{background:#F2B33D}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.side-pulse.live .dot::after,.pulse-dot.live::after{animation:none}}
.conn{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.conn .box{border:1px solid var(--border);border-radius:9px;padding:12px}.conn .box h4{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-size:14px}
.conn .box p{margin:3px 0;font-size:13px;color:var(--muted)}.conn .box b{color:var(--text);font-weight:600}
.hint{margin-top:10px;padding:10px 12px;border-radius:8px;background:rgba(193,18,31,.08);border-inline-start:3px solid var(--primary);font-size:13px}
[data-mode=dark] .hint{background:rgba(193,18,31,.25)}