/* StayInn design system v2 - tokens taken from stayinn.com (navy #08224f logo ground, sage green #5ca58f / #6ea391 mark, Figtree + Tajawal). */
:root{--si-navy:#08224f;--si-navy-2:#0e2f66;--si-green:#5ca58f;--si-green-2:#6ea391;--si-green-50:#eef6f2;--si-sand:#f7f4ee;
 --brand:#5ca58f;--brand-d:#3f7d6a;--brand-50:#eef6f2;--brand-100:#dcefe7;--brand-900:#08224f;
 --ink:#0b1630;--ink2:#2a3550;--muted:#5d6782;--line:#e3e7ef;--bg:#f6f7f9;--surface:#fff;--surface2:#eef1f6;--soft:#eef6f2;--shadow:rgba(8,34,79,.06);
 --ok:#16794f;--ok-bg:#e3f5ec;--warn:#8a5a00;--warn-bg:#fff4d6;--bad:#b42318;--bad-bg:#fde8e7;--info:#0e4fb3;--info-bg:#e6efff;
 --radius:14px;--r-sm:10px;--sb:252px;--fs:15px;--focus:0 0 0 3px rgba(92,165,143,.45)}
:root[data-theme=dark]{--ink:#eef1f7;--ink2:#cdd3e1;--muted:#97a0b7;--line:#25304a;--bg:#070f22;--surface:#0d1730;--surface2:#16213d;--soft:#13261f;--brand-50:#11251f;--brand-100:#173a30;--shadow:rgba(0,0,0,.4)}
html{font-size:var(--fs)}body.si{font-family:Figtree,Tajawal,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
[dir=rtl] body.si{font-family:Tajawal,Figtree,system-ui,sans-serif}
body.si :focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
body.si h1,body.si h2{letter-spacing:-.02em;font-weight:700}body.si h2{font-size:22px}
/* shell */
#si-sb{position:fixed;inset-block:0;inset-inline-start:0;width:var(--sb);background:var(--si-navy);color:#dbe4f5;display:flex;flex-direction:column;z-index:30;overflow:auto}
#si-sb .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 10px;color:#fff;text-decoration:none;font-weight:700;font-size:17px}
#si-sb .brand img{width:34px;height:34px;border-radius:9px}
#si-sb h6{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8ea3c9;margin:18px 18px 6px;font-weight:600}
#si-sb a.it{display:flex;gap:10px;align-items:center;margin:1px 10px;padding:8px 10px;border-radius:10px;color:#dbe4f5;text-decoration:none;font-size:14px}
#si-sb a.it:hover{background:rgba(255,255,255,.07)}#si-sb a.it.on{background:var(--si-green);color:#fff;font-weight:600}
#si-sb a.it i{font-style:normal;width:20px;text-align:center;opacity:.9}
#si-sb .foot{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#a9b8d6;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#si-sb .foot button{background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:999px;padding:6px 12px;font:inherit;cursor:pointer}
body.si.has-sb{padding-inline-start:var(--sb)}
body.si.has-sb>header{position:sticky;top:0;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(8px);z-index:20}
body.si.has-sb>header>img,body.si.has-sb>header>b,body.si.has-sb #nav:not(aside),body.si.has-sb #bnav,body.si.has-sb #more{display:none!important}
#si-top{display:none}
#si-backdrop{display:none}
@media(max-width:900px){body.si.has-sb{padding-inline-start:0}#si-sb{top:56px;bottom:0;height:calc(100dvh - 56px);inset-block:auto 0;transform:translateX(-100%);transition:transform .2s;z-index:30}[dir=rtl] #si-sb{transform:translateX(100%)}
 body.si.sb-open #si-sb{transform:none}
 #si-top{display:flex;position:sticky;top:0;z-index:35;min-height:56px;align-items:center;gap:10px;background:var(--si-navy);color:#fff;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
 #si-top button{position:relative;z-index:36;background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:10px;padding:8px 11px;font-size:18px}#si-top img{width:28px;height:28px;border-radius:7px}
 #si-backdrop{display:block;position:fixed;inset:56px 0 0 0;z-index:29;border:0;padding:0;margin:0;background:rgba(8,34,79,.45);opacity:0;pointer-events:none;transition:opacity .2s}
 body.si.sb-open #si-backdrop{opacity:1;pointer-events:auto}
 body.si.has-sb>header{top:56px}
 body.si:not(.sb-open) #si-sb[inert]{visibility:hidden}}
/* components */
body.si .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px var(--shadow)}
body.si .stat{color:var(--si-navy);font-weight:700;letter-spacing:-.02em}:root[data-theme=dark] body.si .stat{color:#fff}
body.si .btn{background:var(--si-green);border-radius:999px}body.si .btn:hover{background:var(--brand-d)}body.si .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
body.si table{font-size:14px}body.si th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;white-space:nowrap}
body.si tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface2) 35%,transparent)}
body.si td.num,body.si th.num{text-align:end;font-variant-numeric:tabular-nums}
.pill,.si-pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;background:var(--surface2);color:var(--ink2)}
.si-pill.ok{background:var(--ok-bg);color:var(--ok)}.si-pill.warn{background:var(--warn-bg);color:var(--warn)}.si-pill.bad{background:var(--bad-bg);color:var(--bad)}.si-pill.info{background:var(--info-bg);color:var(--info)}
.si-state{padding:36px 18px;text-align:center;color:var(--muted)}.si-state b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.si-skel{background:linear-gradient(90deg,var(--surface2),var(--line),var(--surface2));background-size:200% 100%;animation:si-sk 1.2s infinite;border-radius:8px;height:14px;margin:8px 0}@keyframes si-sk{to{background-position:-200% 0}}
.si-tt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}.si-tt input{flex:1;min-width:180px}.si-pg{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:8px;font-size:13px;color:var(--muted)}
.si-pg button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 10px;cursor:pointer}.si-pg button:disabled{opacity:.4;cursor:default}
th.si-sort{cursor:pointer;user-select:none}th.si-sort:after{content:' ↕';opacity:.35}th.si-sort[aria-sort=ascending]:after{content:' ↑';opacity:1}th.si-sort[aria-sort=descending]:after{content:' ↓';opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* labels: no forced Title Case; first letter only */
body.si .lbl{text-transform:none!important}body.si div.lbl::first-letter{text-transform:uppercase}
/* Governance & Marketing inside the new layout: their section menu becomes a tab bar */
body.si.has-sb .lay{display:block!important;grid-template-columns:none!important}
body.si.has-sb .lay>aside#nav{position:sticky;top:57px;z-index:15;display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:4px;width:auto!important;height:auto!important;max-height:none!important;
 background:var(--surface)!important;border:0!important;border-bottom:1px solid var(--line)!important;padding:6px clamp(10px,2vw,24px)!important;transform:none!important;box-shadow:none!important;inset:auto!important}
body.si.has-sb .lay>aside#nav h4{display:none}
body.si.has-sb .lay>aside#nav a{white-space:nowrap;padding:8px 12px!important;border-radius:999px;font-size:14px;margin:0!important;border:0!important}
body.si.has-sb .lay>aside#nav a.on{background:var(--si-green)!important;color:#fff!important}
body.si.has-sb>header #menu{display:none!important}
@media(max-width:900px){body.si.has-sb .lay>aside#nav{top:104px}}

/* ===== Installable app + phone layout (staff shell only: body.si.has-sb) ===== */
[data-pwa-install][hidden],#si-bnav[hidden]{display:none!important}
#si-sb .foot [data-pwa-install]{background:var(--si-green);color:#fff}
#si-bnav{display:none}
.si-pwa-sheet{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:80;max-width:460px;margin-inline:auto;background:var(--surface,#fff);color:var(--ink,#111827);border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:14px 16px;box-shadow:0 18px 40px -18px rgba(8,34,79,.45)}
.si-pwa-sheet strong{display:block;margin-bottom:4px}.si-pwa-sheet p{margin:0 0 10px;font-size:14px;color:var(--muted,#4b5563)}
.si-pwa-actions{display:flex;gap:8px;flex-wrap:wrap}.si-pwa-sheet .btn{min-height:44px}
@media(max-width:900px){
 body.si.has-sb{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 #si-top .si-top-install{margin-inline-start:auto;font-size:13px;font-weight:600;padding:8px 12px;min-height:44px}
 #si-top button{min-width:44px;min-height:44px}
 #si-sb a.it{padding:12px 10px;min-height:44px}
 #si-sb .foot button,#si-sb .foot a{min-height:44px;display:inline-flex;align-items:center}
 body.si.has-bnav #si-bnav{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--surface,#fff);border-top:1px solid var(--line,#e5e7eb);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 18px -14px rgba(8,34,79,.4)}
 #si-bnav a,#si-bnav button{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 11px/1.2 inherit;color:var(--muted,#4b5563);text-decoration:none;background:none;border:0;cursor:pointer;padding:6px 2px}
 #si-bnav i{font-style:normal;font-size:20px;line-height:1}
 #si-bnav a.on{color:var(--brand-d,#477062)}
 body.si.has-bnav{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
 body.si.has-bnav .si-pwa-sheet{bottom:calc(76px + env(safe-area-inset-bottom))}
 body.si.has-bnav #si-sb{bottom:calc(56px + env(safe-area-inset-bottom));height:auto}
 body.si.has-bnav #stayinn-assistant .sia-fab{bottom:calc(72px + env(safe-area-inset-bottom))!important}
}
@media(max-width:760px){
 body.si.has-sb{overflow-x:clip}
 body.si.has-sb main,body.si.has-sb .wf-page{max-width:100vw}
 body.si.has-sb img,body.si.has-sb video{max-width:100%;height:auto}
 body.si.has-sb :where(button,.btn,a.btn,select,summary,input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range])):not(.si-tiny){min-height:44px}
 body.si.has-sb :where(button,.btn,a.btn):not(.si-tiny){min-width:44px}
 body.si.has-sb input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]):not([type=color]),body.si.has-sb select:not([multiple]){min-height:44px!important}
 body.si.has-sb a.btn{display:inline-flex;align-items:center;justify-content:center}
 body.si.has-sb summary{display:flex;align-items:center}
 body.si.has-sb input,body.si.has-sb select,body.si.has-sb textarea{font-size:16px;max-width:100%}
 body.si.has-sb .bar{flex-wrap:wrap}
 body.si.has-sb .lay>aside#nav a{min-height:44px;display:inline-flex;align-items:center}
 body.si.has-sb .kpis,body.si.has-sb .grid{min-width:0}
 /* tables become labelled cards */
 body.si.has-sb table.si-cards{border:0;min-width:0!important;width:100%}
 body.si.has-sb table.si-cards thead,body.si.has-sb table.si-cards tr:has(> th:not([data-label])):not(:has(td)){display:none}
 body.si.has-sb table.si-cards,body.si.has-sb table.si-cards tbody,body.si.has-sb table.si-cards tr,body.si.has-sb table.si-cards td{display:block;width:100%}
 body.si.has-sb table.si-cards tr{background:var(--surface,#fff);border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:6px 10px;margin:0 0 10px}
 body.si.has-sb table.si-cards td{border:0!important;padding:6px 0!important;position:relative;text-align:start;overflow-wrap:anywhere;white-space:normal!important;max-width:none}
 body.si.has-sb table.si-cards td[data-label]{padding-inline-start:40%!important;min-height:28px}
 body.si.has-sb table.si-cards td[data-label]::before{content:attr(data-label);position:absolute;inset-inline-start:0;top:6px;width:37%;color:var(--muted,#4b5563);font-size:12px;font-weight:600;overflow-wrap:anywhere}
 body.si.has-sb table.si-cards td:empty{display:none}
 body.si.has-sb .table-wrap,body.si.has-sb .wf-table-wrap{overflow:visible}
}