/* Nimbus9 clone — design tokens measured from the reference app
   (getComputedStyle on web.nimbus9.tech). */
:root{
  --bg:#f4f8fb;                 /* body background rgb(244,248,251) */
  --card:#ffffff;
  --text:#212529;              /* rgba(0,0,0,.87) */
  --text-strong:#212529;
  --muted:#8a97a8;
  --muted-2:#9aa7b6;
  --line:#eef2f7;
  --teal:#8b7cc8;             /* active sidebar item (GENESIS: soft violet) */
  --brand:#5b4a9b;            /* GENESIS: deep violet */
  --accent:#6d5ce7;           /* primary (GENESIS: violet) */
  --thead:#e9e4fb;            /* table header background (lavender) */
  --field:#f4f8fb;            /* filled input background */
  /* KPI card colors (measured) */
  --kpi-blue:#0599ff; --kpi-green:#38d298; --kpi-orange:#ff7d6b; --kpi-purple:#545ed7;
  --sidebar-w:200px; --topbar-h:68px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#cbd8e6;border-radius:4px}

/* ---------------- Login ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ece5f8,#dcd2f0 55%,#f3e8d3)}
.login-card{background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(20,50,90,.14);width:380px;padding:34px}
.login-card h1{font-size:20px;margin:0 0 4px;color:var(--brand);font-weight:700}
.login-card p{margin:0 0 22px;color:var(--muted);font-size:13px}
.brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brand-logo .mark{width:32px;height:32px}
.mark svg{width:100%;height:100%;display:block}
.brand-logo .name{font-weight:800;font-size:20px;color:var(--brand)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field .inp{display:flex;align-items:center;border:1px solid #e3e9f1;border-radius:8px;overflow:hidden;background:#fff}
.field .inp .pfx{padding:0 10px;color:var(--muted);background:#f4f8fb;align-self:stretch;display:grid;place-items:center;font-size:13px}
.field input{border:0;outline:0;padding:10px 12px;width:100%;font-size:14px;background:transparent}
.inp .pw-toggle{border:0;background:transparent;padding:0 10px;cursor:pointer;font-size:15px;color:var(--muted);align-self:stretch}
.btn{border:0;border-radius:8px;padding:11px 16px;font-weight:600;font-size:14px}
.btn-primary{background:var(--accent);color:#fff;width:100%}
.btn-primary:hover{filter:brightness(.96)}
.hint{font-size:12px;color:var(--muted);margin-top:16px;text-align:center;line-height:1.7}
.err{color:#d64545;font-size:13px;margin:6px 0 0}

/* ---------------- App shell ---------------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:#fff;height:100vh;position:sticky;top:0;overflow-y:auto;display:flex;flex-direction:column}
.side-head{padding:16px 16px 8px}
.side-head .name{font-weight:800;font-size:20px;color:var(--brand);display:flex;align-items:center;gap:8px}
.side-head .mark{width:26px;height:26px;display:inline-block}
.side-bldg{padding:4px 16px 12px}
.side-bldg b{display:block;font-size:14px;font-weight:600;color:#000;line-height:1.35}
.side-bldg span{font-size:12px;color:var(--muted)}
.menu{padding:6px 8px 40px}
.menu .item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;color:rgba(0,0,0,.75);font-size:14px;font-weight:500;cursor:pointer;user-select:none;min-height:38px}
.menu .item .ico{width:20px;height:20px;display:grid;place-items:center;font-size:15px;opacity:.85}
.menu .item .chev{margin-left:auto;font-size:10px;color:var(--muted);transition:transform .15s}
.menu .item:hover{background:#f2f7fb}
.menu .item.active{background:var(--teal);color:#fff}
.menu .item.active .ico{opacity:1;filter:brightness(3)}
.menu .item.open{color:var(--teal);font-weight:600}
.menu .item.open .chev{transform:rotate(90deg)}
.submenu{margin:2px 0 4px}
.submenu .sub{display:block;padding:8px 10px 8px 40px;font-size:13.5px;color:rgba(0,0,0,.7);border-radius:6px;cursor:pointer;min-height:34px;line-height:1.4}
.submenu .sub:hover{background:#f2f7fb}
.submenu .sub.active{color:var(--accent);font-weight:600;background:#efeafd}

/* ---------------- Topbar ---------------- */
/* min-width:0 — without it this grid column refuses to shrink below the widest
   table's min-content width, so a 16-column list dragged the whole page
   sideways instead of scrolling inside #tableWrap. */
.main{display:flex;flex-direction:column;min-height:100vh;min-width:0}
.topbar{height:var(--topbar-h);background:#fff;display:flex;align-items:center;gap:18px;padding:0 24px;position:sticky;top:0;z-index:20}
.topbar .ham{font-size:20px;color:#4a5a6b;background:none;border:0;padding:4px}
.topbar .spacer{flex:1}
.topbar .bell{position:relative;font-size:17px;color:#5a6b7d;cursor:pointer}
.topbar .badge{position:absolute;top:-7px;right:-9px;background:#f4b740;color:#fff;border-radius:10px;font-size:10px;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px;font-weight:700}

.topbar .lang{display:flex;align-items:center;gap:6px;font-size:14px;color:#333}
.topbar .user{font-weight:600;font-size:14px}
.topbar .avatar{width:40px;height:40px;border-radius:50%;background:#e6edf5;display:grid;place-items:center;color:#9aa7b6;overflow:hidden}

/* ---------------- Content ---------------- */
.content{padding:20px 24px 40px;flex:1}
.page-title{font-size:20px;font-weight:700;margin:0 0 16px;color:var(--text-strong)}
.panel{background:var(--card);border-radius:16px;padding:24px;margin-bottom:18px}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px}
.kpi{border-radius:8px;padding:24px;color:#fff;min-height:178px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}
.kpi.blue{background:var(--kpi-blue)} .kpi.green{background:var(--kpi-green)}
.kpi.orange{background:var(--kpi-orange)} .kpi.purple{background:var(--kpi-purple)}
.kpi::after{content:"";position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.10)}

.kpi .t{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;max-width:60%}
.kpi .v{font-size:26px;font-weight:800;margin-top:10px}
.kpi .pill{display:inline-block;background:rgba(255,255,255,.28);border-radius:16px;padding:2px 9px;font-size:11px;font-weight:700;margin-left:8px;vertical-align:middle}
.kpi .s{font-size:13px;opacity:.95;max-width:70%}

/* widgets row */
.widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
.widget h3{margin:0 0 10px;font-size:16px;font-weight:700}

.metric-row{display:flex;gap:22px;margin-top:8px}
.metric-row .m{font-size:12px;color:var(--muted)}
.metric-row .m b{display:block;font-size:20px;color:var(--accent);margin-top:4px;font-weight:700}

/* dept status */
.dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dept{border:1px solid var(--line);border-radius:12px;padding:16px}
.dept .h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-bottom:12px;letter-spacing:.2px}
.dept .row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:#5a6b7d}
.dept .row b{color:var(--text)}

/* toolbar + table */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .grow{flex:1}
.search{width:340px;max-width:100%;display:flex;align-items:center;gap:8px;background:var(--field);border-radius:8px;padding:9px 14px}
.search input{border:0;outline:0;width:100%;font-size:14px;background:transparent}
.search .mag{color:var(--muted);font-size:15px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--accent);color:var(--accent);background:#fff;border-radius:8px;font-size:16px}
.icon-btn:hover{background:#f0f8ff}
.icon-btn.solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.icon-btn.green{border-color:#38b48b;color:#38b48b}
table.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
table.grid thead th{background:var(--thead);text-align:left;padding:14px 12px;font-weight:600;color:#1b2b3b;white-space:nowrap;font-size:12px}
table.grid thead th:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
table.grid thead th:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}
table.grid tbody td{padding:16px 12px;border-bottom:1px solid var(--line);color:rgba(0,0,0,.8);font-size:12px;vertical-align:middle}
table.grid tbody tr:hover{background:#f8fbff}
.tag{display:inline-block;padding:4px 12px;border-radius:16px;font-size:11px;font-weight:700;letter-spacing:.2px}
.tag.UNPAID,.tag.NEW,.tag.WAITING,.tag.PENDING,.tag.IN_PROGRESS,.tag.WAITING_CHIEF,.tag.WAITING_BM,.tag.EXPIRING{background:#fff2d6;color:#a9791a}
.tag.PAID,.tag.FINISHED,.tag.COMPLETED,.tag.CHECKED_OUT,.tag.DONE,.tag.APPROVED,.tag.PICKED_UP,.tag.ACTIVE,.tag.PERMANENT,.tag.OCCUPIED{background:#d6f5e6;color:#1c8a5f}
.tag.PAID_HALF,.tag.PURCHASING,.tag.BOOKED,.tag.PUBLIC{background:#e4dcfa;color:#3760c9}
.tag.CANCELED,.tag.CANCELLED,.tag.REJECTED,.tag.INACTIVE,.tag.VACANT{background:#fddede;color:#c23b3b}
.link{color:var(--accent);font-weight:600;cursor:pointer;background:none;border:0;padding:0;font-size:12px}
.link:hover{text-decoration:underline}
.totbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:0 0 16px}
.totbox{border:1px dashed #cdd8e5;border-radius:8px;padding:12px 16px;font-size:12.5px;color:#5a6b7d;line-height:1.9}
.totbox b{color:var(--text)}

/* empty state */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 0;color:var(--muted)}
.empty svg{opacity:.55;margin-bottom:14px}
.empty b{font-size:15px;color:#6a7889;font-weight:700}

/* skeleton loading */
.skel{background:linear-gradient(90deg,#eef3f8 25%,#e3ebf3 37%,#eef3f8 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:6px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skel-row{height:16px;margin:14px 0}

/* pager */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.pager .pp{display:flex;align-items:center;gap:6px}

.pager button{border:1px solid #dde6ef;background:#fff;border-radius:6px;width:30px;height:30px}
.pager button:disabled{opacity:.4}

/* modal (access gate + forms) */
.modal-back{position:fixed;inset:0;background:rgba(20,35,60,.45);display:grid;place-items:center;z-index:60;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:16px;width:430px;max-width:92vw;padding:28px;position:relative}
.modal.wide{width:560px}
.modal .x{position:absolute;top:14px;right:16px;border:1px solid #f0c4c4;background:#fff;color:#e5484d;font-size:14px;cursor:pointer;width:28px;height:28px;border-radius:50%}
.modal h2{margin:8px 0 4px;font-size:20px;text-align:center;font-weight:700}
.modal .lock{width:118px;height:118px;border-radius:14px;background:#e9f3fb;display:grid;place-items:center;margin:4px auto 14px;font-size:46px}
.modal .sub{color:var(--muted);font-size:13px;text-align:center;margin-bottom:20px}
.modal h3{margin:0 0 14px;font-size:17px}

/* toast */
.toast-wrap{position:fixed;top:18px;right:18px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{background:#fff;border-left:4px solid var(--accent);border-radius:8px;box-shadow:0 8px 24px rgba(20,50,90,.16);padding:12px 16px;font-size:13px;min-width:240px;animation:slide .2s ease}
.toast.success{border-left-color:#38b48b}
.toast.error{border-left-color:#e5484d}
@keyframes slide{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* legend */
.legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:12px;color:#5a6b7d;margin:10px 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* responsive */
@media(max-width:1180px){.kpis{grid-template-columns:repeat(2,1fr)}.widgets,.dept-grid{grid-template-columns:1fr}}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:50;width:var(--sidebar-w);box-shadow:2px 0 16px rgba(0,0,0,.12);transform:translateX(-100%);transition:transform .2s}
  .sidebar.show{transform:none}
  .content{padding:16px}
}
/* round avatars used across tables (users, work activity, receptionist, findings) */
.av{width:34px;height:34px;border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;background:#e6e2f6;vertical-align:middle}
.av-fallback{color:#9c93c4;font-size:16px}
.thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#ece8f8;display:inline-grid;place-items:center;color:#9c93c4}

/* ---------------- Field findings dashboard ---------------- */
.sec-title{margin:0 0 16px;font-size:14px;font-weight:800;letter-spacing:.4px;color:var(--brand)}
.ffcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:22px}
.ffcard{border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:14px 16px;background:#fff}
.ffcard .t{font-size:11px;font-weight:800;letter-spacing:.3px;line-height:1.3;min-height:28px}
.ffcard .v{font-size:28px;font-weight:800;margin-top:6px;line-height:1}
.ffcard .u{font-size:11px;color:var(--muted)}
.ffcard .s{font-size:11px;color:var(--muted-2);margin-top:6px}
.ffcard.c-all{border-left-color:#6d5ce7} .ffcard.c-all .t{color:#6d5ce7}
.ffcard.c-month{border-left-color:#545ed7} .ffcard.c-month .t{color:#545ed7}
.ffcard.c-open{border-left-color:#ff9f43} .ffcard.c-open .t{color:#e8862a}
.ffcard.c-prog{border-left-color:#54a0ff} .ffcard.c-prog .t{color:#2f7fe0}
.ffcard.c-fin{border-left-color:#38d298} .ffcard.c-fin .t{color:#1c9d6d}
.ffcard.c-finm{border-left-color:#1c9d6d} .ffcard.c-finm .t{color:#1c9d6d}
.ffcard.c-wait{border-left-color:#e8b93a} .ffcard.c-wait .t{color:#b98f16}
.chart-title{margin:4px 0 12px;font-size:13px;font-weight:700;color:var(--text)}
.chart{overflow-x:auto}
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font-size:11px;color:var(--muted)}
.chart-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}
.chart-plot{display:flex;align-items:flex-end;gap:10px;min-width:600px;border-bottom:1px solid var(--line)}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.chart-col .bars{display:flex;align-items:flex-end;gap:2px;height:190px}
.chart-col .bar{width:7px;border-radius:2px 2px 0 0;min-height:2px}
.chart-col .mlabel{font-size:10px;color:var(--muted)}
.dur{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted);white-space:nowrap}
.dur b{color:var(--text)}
.dur .sla{font-weight:700}
.dur .sla.good{color:#1c9d6d} .dur .sla.bad{color:#d64545}
.ver-row{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:nowrap}
.ver{font-size:10px;color:var(--muted-2);white-space:nowrap}
.ver-btn{border:1px solid var(--line);background:#fff;border-radius:6px;font-size:10px;padding:2px 6px;color:var(--muted);white-space:nowrap}
.ver-btn:hover{border-color:var(--accent);color:var(--accent)}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 20px}
.cp-logos{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap}
.logo-slot .lbl{font-size:12px;color:var(--muted);margin-bottom:6px}
.logo-slot .drop{width:180px;height:96px;border:1.5px dashed #d8d2ee;border-radius:10px;display:grid;place-items:center;color:var(--muted-2);font-size:12px;cursor:pointer;background:#faf8ff}
.logo-slot .drop:hover{border-color:var(--accent);color:var(--accent)}

/* Wide tables scroll inside their own container — the page body must never
   widen or shift sideways because of one table (mobile-first rule). */
#tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#tableWrap>table.grid{min-width:max-content}
.panel{overflow:hidden}
.panel>#tableWrap{margin:0 -4px;padding:0 4px}

/* In-page tabs (departments, ITEM/HISTORY, LOG/SETTINGS …) — Nimbus9 style:
   an underlined tab strip, not a button row. */
.mini-tabs{display:flex;gap:0;border-bottom:2px solid var(--line);margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mini-tabs button{border:0;background:transparent;padding:11px 20px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px}
.mini-tabs button:hover{color:var(--accent)}
.mini-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------------- Overview extras ---------------- */
.ov-filter{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:nowrap}
.ov-filter .inp{background:#fff}
.ov-filter select,.ov-filter input{border:0;outline:0;padding:9px 10px;width:100%;font-size:13px;background:transparent;font-family:inherit}
.kpi .badge-ico{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:18px}
.kpi[data-go]{cursor:pointer;transition:transform .12s,box-shadow .12s}
.kpi[data-go]:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,40,120,.18)}
.dept .h{justify-content:space-between}
.dept-score{margin-left:auto;display:inline-flex}
.donut{display:block}
.showall{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--accent)}
a.link{color:var(--accent);cursor:pointer}
.topbar .avatar{border:0;cursor:pointer}
button.bell{border:0;background:transparent;padding:0}
.usermenu{position:absolute;top:58px;right:24px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(40,30,80,.14);min-width:210px;padding:6px;z-index:60}
.um-head{font-size:11px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);word-break:break-all}
.um-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:7px;font-size:13px;color:var(--text)}
.um-item:hover{background:#f4f1fd;color:var(--accent)}
.um-item.danger:hover{background:#fdeceb;color:#c23b3b}
/* sidebar entries are now <a>/<button>: normalise their native styling */
.menu .item{width:100%;text-align:left;border:0;background:transparent;font-family:inherit;text-decoration:none}
.menu .item:focus-visible,.submenu .sub:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.submenu .sub{text-decoration:none}
.is-loading{background:linear-gradient(90deg,#efecfa 25%,#e4dff5 37%,#efecfa 63%);background-size:400% 100%;animation:shimmer 1.2s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
img.thumb,img.av{cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(20,12,40,.82);display:grid;place-items:center;z-index:200;padding:24px}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-x{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:8px;width:38px;height:38px;font-size:16px}
.syncpre{background:#faf8ff;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:11px;overflow-x:auto;margin:0}

/* facility cards + booking grid */
.fac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.fac-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fac-photo{height:150px;background:#efeafd;display:grid;place-items:center;font-size:38px}
.fac-photo img{width:100%;height:100%;object-fit:cover}
.fac-body{padding:14px 16px}
.fac-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.fac-sub{font-size:11px;color:var(--muted);margin-bottom:8px}
.fac-desc{font-size:12px;color:#5a5470;margin:0 0 10px;line-height:1.5}
.fac-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px;font-size:11px;color:var(--muted)}
.fac-meta b{display:block;color:var(--text);font-size:12px}
td.slot{text-align:center;color:var(--muted-2)}
td.slot.taken{background:#efeafd;color:var(--accent);font-weight:700}
/* overview: operational widgets on the left, reminders/consumption on a right rail */
@media (min-width: 1100px){
  .widgets{grid-template-columns:repeat(3,1fr)}
}
svg.av{border-radius:50%}
.chart-empty{font-size:12px;color:var(--muted-2);margin-bottom:8px}
.icon-btn.has-filter{border-color:var(--accent);color:var(--accent);background:#efeafd;font-weight:700}
.fresh-bar{padding:8px 24px;font-size:12px;border-bottom:1px solid var(--line);background:#f4f1fd;color:var(--brand)}
.fresh-bar.warn{background:#fff7e6;color:#8a6314;border-bottom-color:#f3e2bd}
.bm-stat{display:flex;align-items:center;gap:14px;min-height:auto;padding:18px 20px}
.bm-ico{width:44px;height:44px;border-radius:12px;background:#efeafd;display:grid;place-items:center;font-size:20px;flex:none}
.bm-stat .t{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--accent)}
.bm-stat .v{font-size:24px;font-weight:800;line-height:1.1}
.bm-stat .s{font-size:11px;color:var(--muted)}
.off-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.off-meta{font-size:11px;color:var(--muted);white-space:nowrap}
.feed-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.feed-meta{color:var(--muted);font-size:11px;margin-top:2px}
/* nested sub-groups (Report ·, Master ·, Tenant Office ·, General ·) */
.subgroup{margin:1px 0}
.submenu .sub.grp{display:flex;align-items:center;width:100%;text-align:left;border:0;background:transparent;font-family:inherit;font-weight:600;color:rgba(0,0,0,.62)}
.submenu .sub.grp .chev{margin-left:auto;font-size:9px;color:var(--muted);transition:transform .15s}
.submenu .sub.grp.open{color:var(--accent)}
.submenu .sub.grp.open .chev{transform:rotate(90deg)}
.submenu .sub.deep{padding-left:56px;font-size:13px}
.tag.GENESIS{background:#efeafd;color:var(--accent);font-weight:700}

/* sticky table header — the header stays readable while scrolling long lists */
#tableWrap{max-height:70vh;overflow:auto}
table.grid thead th{position:sticky;top:0;z-index:5}

/* complaint detail */
.cd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 18px;border-top:1px solid var(--line);padding-top:12px}
.dl-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;border-bottom:1px solid var(--line)}
.dl-row span{color:var(--muted)}
.cd-photos{display:flex;gap:24px;margin-top:16px}
.cd-photos .lbl{font-size:11px;font-weight:800;color:var(--muted);margin-bottom:6px}
.cd-photos .thumb,.cd-photos img{width:150px;height:150px;border-radius:10px}
.timeline{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.timeline:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 18px 6px}
.tl-dot{position:absolute;left:-21px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 2px var(--line)}
.tl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.tl-meta{font-size:11px;color:var(--muted)}
.timeline img,.timeline .thumb{width:120px;height:120px;border-radius:8px}

/* drill-down affordances */
.ffcard.clickable{cursor:pointer;transition:transform .12s,box-shadow .12s}
.ffcard.clickable:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(60,40,120,.14)}
.dur.clickable{cursor:pointer;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.dur.clickable:hover{background:#efeafd}
.aging{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-10px 0 20px;font-size:12px;color:var(--muted)}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 12px;font-size:12px;color:var(--accent);font-weight:600}
.chip:hover{border-color:var(--accent);background:#efeafd}

/* benchmark bars */
.bar-track{height:8px;background:#efeafd;border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent)}

/* occupancy summary stats — light cards, unlike the coloured overview KPIs */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fbfaff}
.stat .t{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.stat .v{font-size:24px;font-weight:800;color:var(--accent);margin-top:4px}
.stat .s{font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:860px){.stat-row{grid-template-columns:repeat(2,1fr)}}

/* standalone count pill (outside the KPI cards) */
h3 > .pill{display:inline-block;background:#efeafd;color:var(--accent);border-radius:16px;padding:2px 10px;font-size:12px;font-weight:700;margin-left:6px;vertical-align:middle}

/* GENESIS annotation block on the complaint detail page */
.ov-box{margin-top:14px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;background:#fbfaff}

/* explanatory strip above a read-only list */
.note-panel{font-size:13px;color:var(--muted);line-height:1.6}
.note-panel a{color:var(--accent);font-weight:600}

/* checklist matrix: one column per day, colour-coded by score */
table.matrix th, table.matrix td{text-align:center;padding:6px 8px;white-space:nowrap}
table.matrix td:first-child, table.matrix th:first-child{text-align:left}
td.mt{font-weight:700}
td.mt.ok{background:#e8f6ef;color:#1c8a5f}
td.mt.mid{background:#fdf3e2;color:#a5761c}
td.mt.low{background:#fdecec;color:#c23b3b}
td.mt-empty{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 4px,#f2f2f5 4px,#f2f2f5 8px)}

.widget-note{font-size:11px;color:var(--muted-2);margin:-4px 0 10px}

/* --------------------------------------------------------------------------
 * Warna per department di Overview (permintaan tim 18 Agustus 2026).
 * Sebelumnya semua kartu department tampil abu-abu seragam sehingga sulit
 * dibedakan sekilas. Warna hanya dipakai di garis atas, ikon, dan judul —
 * badan kartu tetap putih supaya angkanya tetap gampang dibaca.
 * -------------------------------------------------------------------------- */
.dept{position:relative;overflow:hidden;border-top:3px solid var(--dept, #9aa6b5)}
.dept .h{color:var(--dept, inherit)}
.dept .dept-ico{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;background:var(--dept-soft,#eef1f5);font-size:14px}
.dept[data-dept="SECURITY"]       {--dept:#2f6fd0;--dept-soft:#e6eefb}
.dept[data-dept="CLEANING"]       {--dept:#1c8a5f;--dept-soft:#e3f5ec}
.dept[data-dept="ENGINEERING"]    {--dept:#c2761a;--dept-soft:#fbf0e0}
.dept[data-dept="PEST_CONTROL"]   {--dept:#8a5bd6;--dept-soft:#f0eafc}
.dept[data-dept="HSE"]            {--dept:#c23b3b;--dept-soft:#fbe8e8}
.dept[data-dept="PARKIR"]         {--dept:#0f7f8c;--dept-soft:#e2f4f6}
.dept[data-dept="TENANT_RELATION"]{--dept:#b0407f;--dept-soft:#fae7f1}
/* Department yang belum ada datanya tetap ditampilkan, tapi diredupkan supaya
   jelas bedanya antara "belum dipakai" dan "dipakai tapi nilainya nol". */
.dept.dept-kosong{opacity:.72;border-top-style:dashed}
.dept .dept-kosong-note{margin-top:8px;font-size:11.5px;color:#8a97a8;line-height:1.5}
@media (max-width:900px){.dept-grid{grid-template-columns:1fr}}

.pdf-chip{white-space:nowrap;font-weight:600}

/* keadaan gagal memuat — sengaja beda dari keadaan kosong */
.err-state b{color:#c23b3b}

/* baris navigasi universal: tombol kembali + jejak lokasi */
.nav-bar{display:flex;align-items:center;gap:8px;padding:8px 24px 0;font-size:12px;color:var(--muted);flex-wrap:nowrap;min-width:0}
.nav-back{background:#efeafd;color:var(--accent);border:0;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.nav-back:hover{background:#e3dbfb}
.nav-home{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.nav-sep{color:var(--muted-2)}
.nav-now{font-weight:600;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.nav-bar{padding:8px 14px 0}.nav-home,.nav-sep{display:none}}

/* Di HP, kotak cari melebar penuh dan mendorong tombol ke baris kedua.
   Biarkan ia menyusut supaya cari + tombol tetap satu baris. */
@media(max-width:600px){
  .toolbar .search{width:auto;flex:1 1 auto;min-width:0}
  .topbar .user{display:none}
}

.dept.clickable{cursor:pointer;transition:transform .12s,box-shadow .12s}
.dept.clickable:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(60,40,120,.14)}


/* Saat dicetak: sisakan lembar stikernya saja. */

/* ---- stiker QR lokasi -----------------------------------------------------
   Ukuran dalam MILIMETER, bukan piksel: yang dicetak harus benar-benar 5x7 cm
   di kertas, sama dengan stiker yang sudah tertempel di gedung. Desainnya
   meniru yang lama — kotak putih berisi QR di atas, pita gelap berisi nama
   apartemen di bawah. */
:root{ --stiker-teal:#1b5c6e; }
.qr-sheet{display:flex;flex-wrap:wrap;gap:4mm;align-content:flex-start}
/* Ukuran & warna datang dari template yang disimpan di server (lihat
   qrTemplate di server/supastore.js); nilai di sini cuma cadangan kalau
   templatenya gagal dimuat, supaya halaman tidak pernah tampil tanpa bentuk. */
.stiker{
  /* flex-shrink:0 wajib. Tanpa ini stiker ikut menyusut saat berjejer di
     lembar, jadi ukuran cetaknya bukan lagi ukuran yang diminta — dan itu
     baru ketahuan setelah kertas stikernya terpakai dan hasilnya tidak pas
     dengan potongan yang sudah disiapkan. */
  flex:0 0 auto;
  width:var(--st-w,50mm);height:var(--st-h,70mm);box-sizing:border-box;
  background:var(--st-bg,var(--stiker-teal));border-radius:4mm;
  padding:3mm;display:flex;flex-direction:column;gap:2mm;
  break-inside:avoid;page-break-inside:avoid;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.stiker-atas{
  background:#fff;border-radius:3mm;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2mm 1.5mm;text-align:center;overflow:hidden;
}
.stiker-qr svg{display:block}
.stiker-logo{max-height:var(--st-logo,10mm);max-width:80%;object-fit:contain;margin-bottom:1mm}
.stiker-kode{margin-top:.8mm;font-size:2.2mm;color:#666;letter-spacing:.04em}
.stiker-nama{
  margin-top:1.5mm;font-size:var(--st-nama,2.6mm);line-height:1.25;font-weight:700;
  color:#111;text-transform:uppercase;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.stiker-lantai{margin-top:.8mm;font-size:2.3mm;color:#444;text-transform:uppercase}
.stiker-bawah{
  color:var(--st-fg,#fff);font-size:2.6mm;line-height:1.35;letter-spacing:.02em;
  text-transform:uppercase;padding:0 .5mm;
}

@media print{
  .sidebar,.topbar,.fresh-bar,.nav-bar,.no-print,.toast-wrap{display:none !important}
  .app{display:block}
  .content{padding:0}
  .page-title{display:none}
  body{background:#fff}
  /* Lembar A3, sesuai kertas stiker vinyl yang dipakai tim. */
  @page{size:A3;margin:8mm}
  .qr-sheet{gap:3mm}
}

/* ---- poster QR check-in tamu (9 x 16 cm) ----
   Ukuran dalam milimeter supaya hasil cetaknya benar-benar sebesar itu. */
.poster-tamu{
  flex:0 0 auto;
  width:90mm;height:160mm;box-sizing:border-box;
  background:var(--pt-bg,var(--stiker-teal));color:var(--pt-fg,#fff);border-radius:4mm;
  padding:8mm 7mm;display:flex;flex-direction:column;gap:3mm;
  break-inside:avoid;page-break-inside:avoid;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.poster-logo{max-height:var(--pt-logo,14mm);max-width:60%;object-fit:contain;align-self:center}
.poster-atas{display:flex;align-items:flex-start;justify-content:space-between;gap:3mm}
.poster-judul{font-size:6mm;font-weight:800;line-height:1.15;white-space:pre-line}
.poster-teks{white-space:pre-line}
.poster-chip{background:var(--pt-fg,#fff);color:var(--pt-bg,var(--stiker-teal));border-radius:999px;padding:1.5mm 4mm;font-size:3mm;font-weight:800;white-space:nowrap}
.poster-teks{font-size:2.9mm;line-height:1.45}
.poster-teks.en{opacity:.85}
.poster-teks.kecil{font-size:2.6mm;opacity:.85}
.poster-qr{background:#fff;border-radius:2mm;padding:4mm;align-self:center;line-height:0}
.poster-qr svg{display:block}
.poster-kaki{margin-top:auto;font-size:3.2mm;font-weight:700;letter-spacing:.03em;text-transform:uppercase}

/* ---- editor template stiker ---- */
.ts-wrap{display:flex;gap:18px;align-items:flex-start;max-height:60vh;overflow:auto}
.ts-form{flex:1;min-width:0}
.ts-pratinjau{flex:0 0 auto;position:sticky;top:0}
.ts-cek{display:flex;flex-wrap:wrap;gap:6px 14px;padding:4px 0}
.ts-cek-item{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.ts-logo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ts-logo input[type=file]{font-size:12px;max-width:100%}
@media (max-width:760px){
  /* Di HP pratinjau pindah ke bawah form, bukan di sampingnya: dua kolom di
     layar sempit membuat keduanya terlalu kecil untuk dipakai. */
  .ts-wrap{flex-direction:column-reverse}
  .ts-pratinjau{position:static;align-self:center}
}

/* ---- daftar petugas pada form jadwal ---- */
.jb-petugas{max-height:200px;overflow:auto;border:1px solid var(--line,#dfe6ee);border-radius:8px;padding:6px 10px}
.jb-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px}
.jb-dept{color:#7a8b9c;font-size:11px}

/* ============================ navigasi bawah (mobile) ============================
   Tampil di layar HP (<=760px) ATAU saat html.force-mobile (mgenesis.*, ?mobile=1).

   Bar ini SENGAJA bukan position:fixed. Di iPhone (Safari) bar fixed + tinggi
   halaman 100vh bikin bar nyangkut di atas layar dan terpotong (dilaporkan
   tim 22 Sep). Sekarang bentuknya "app shell": layar setinggi jendela, isi
   halaman (.content) yang bergulir sendiri, bar bawah cuma anak terakhir di
   kolom — tidak bergantung pada perilaku fixed sama sekali. */
.mobtab{display:none}
.mobtab-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:#8a94a6; font-size:10px; font-weight:600; text-decoration:none; padding:4px 0;
}
.mobtab-ico{font-size:20px; line-height:1}
.mobtab-item.active{color:var(--accent)}
/* Tombol tengah (Scan Checklist) dibikin menonjol -- fitur yang paling
   sering dipakai staf lapangan, bukan ikon sebaris rata dengan yang lain. */
.mobtab-item.main{flex:0 0 auto; width:64px; margin-top:-26px}
.mobtab-item.main .mobtab-ico{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:26px;
  box-shadow:0 6px 16px rgba(109,92,231,.45); border:4px solid #fff;
}
.mobtab-item.main span:last-child{color:var(--accent); font-weight:700}
@media (max-width:760px){
  html,body{height:100%}
  .app{display:block; height:100vh; height:100dvh; overflow:hidden}
  .main{height:100%; min-height:0; overflow:visible}
  .main > :not(.content){flex:none}
  .main .content{flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch; padding-bottom:20px}
  .mobtab{
    display:flex; flex:none; position:relative; z-index:40;
    background:#fff; border-top:1px solid var(--line,#e3e9f1);
    padding:6px 0 calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(20,20,40,.06);
  }
}
@media print{ .app{height:auto!important;overflow:visible!important} .main .content{overflow:visible!important} }

/* ============================ home & profile ala mobile ============================ */
.mob-hero{
  position:relative; border-radius:14px; overflow:hidden; padding:20px 18px;
  color:#fff; min-height:140px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(180deg,rgba(10,30,40,.35),rgba(10,30,40,.75)), var(--stiker-teal,#1b5c6e);
  background-size:cover; background-position:center; margin-bottom:16px;
}
.mob-hero .bldg{display:inline-block;background:rgba(255,255,255,.85);color:#1b5c6e;font-weight:700;font-size:12px;
  padding:4px 10px;border-radius:999px;margin-bottom:10px;width:fit-content}
.mob-hero .nama{font-size:20px;font-weight:800}
.mob-hero .peran{font-size:12px;font-style:italic;opacity:.9}
.mob-progress{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line,#e3e9f1);
  border-radius:12px;padding:14px;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.mob-progress .stat{text-align:center}
.mob-progress .stat b{display:block;font-size:16px;color:var(--accent)}
.mob-progress .stat span{font-size:11px;color:#8a94a6}
.mob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;margin-bottom:18px}
.mob-tile{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--text)}
.mob-tile-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px}
.mob-tile span{font-size:11px;text-align:center;line-height:1.25;font-weight:600}
.mob-section-title{font-weight:800;font-size:14px;margin:18px 0 8px}
.mob-profile-head{display:flex;align-items:center;gap:14px;padding:18px 0}
.mob-profile-head .av{width:56px;height:56px}
.mob-list{border:1px solid var(--line,#e3e9f1);border-radius:12px;overflow:hidden;margin-bottom:16px}
.mob-list a, .mob-list button.mob-row{display:flex;align-items:center;gap:12px;padding:13px 14px;
  border:0;background:#fff;width:100%;text-align:left;font-size:14px;color:var(--text);
  text-decoration:none;border-bottom:1px solid #f0f2f5}
.mob-list a:last-child, .mob-list button.mob-row:last-child{border-bottom:0}
.mob-list .chev{margin-left:auto;color:#c3c9d3}

/* ============================ paksa tampilan mobile (mgenesis.*, ?mobile=1) ============================
   Mengulang PERSIS aturan @media mobile di atas tanpa syarat lebar layar,
   plus bingkai selebar HP di tengah supaya di laptop terlihat seperti HP. */
html.force-mobile,html.force-mobile body{height:100%;background:#e9ecf1}
html.force-mobile .app{display:block; height:100vh; height:100dvh; overflow:hidden}
html.force-mobile .sidebar{position:fixed;z-index:50;width:var(--sidebar-w);box-shadow:2px 0 16px rgba(0,0,0,.12);transform:translateX(-100%);transition:transform .2s}
html.force-mobile .sidebar.show{transform:none}
html.force-mobile .main{height:100%; min-height:0; overflow:visible; max-width:480px; margin:0 auto; background:var(--bg,#f4f8fb); box-shadow:0 0 24px rgba(20,20,40,.12)}
html.force-mobile .main > :not(.content){flex:none}
  .main .content{flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px 16px 20px}
html.force-mobile .nav-bar{padding:8px 14px 0}
html.force-mobile .nav-home, html.force-mobile .nav-sep{display:none}
html.force-mobile .toolbar .search{width:auto;flex:1 1 auto;min-width:0}
html.force-mobile .topbar .user{display:none}
html.force-mobile .mobtab{
  display:flex; flex:none; position:relative; z-index:40;
  background:#fff; border-top:1px solid var(--line,#e3e9f1);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(20,20,40,.06);
}