/* Operra — Every Property, In Sync. */
:root{
  --navy:#101D2B; --navy-2:#1B2A3B; --navy-3:#2A3A4D;
  --lime:#D4F36A; --lime-soft:#F1FAD2; --lime-ink:#5B7A00;
  --white:#FFFFFF; --soft:#F5F6F2; --bg:#EEF0EA;
  --slate:#81909D; --muted:#5E6B78; --line:#E4E7DF; --line-2:#EEF0EA;
  --ok:#1F8A5B; --ok-soft:#E3F4EB; --warn:#A45F00; --warn-soft:#FFF1D9; --red:#C2362F; --red-soft:#FCE6E4;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(16,29,43,.04),0 8px 24px rgba(16,29,43,.05);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--navy);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--navy)}
h1,h2,h3{margin:0;letter-spacing:-.01em}
h1{font-size:22px;font-weight:700}
h2{font-size:17px;font-weight:700}
h3{font-size:15px;font-weight:700}
p{margin:0 0 10px}
small,.small{font-size:12.5px;color:var(--muted)}
.muted{color:var(--muted)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Logo */
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{width:40px;height:40px;border-radius:12px;background:var(--lime);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:17px;letter-spacing:-.04em;flex:none}
.logo-word{font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--navy)}
.logo small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:-2px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Auth / welcome */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-brand{background:var(--navy);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-brand .logo-word{color:#fff}
.auth-brand h1{font-size:40px;line-height:1.1;margin-top:auto;max-width:560px}
.auth-brand p{color:#C3CCD5;font-size:17px;max-width:420px;margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{padding:10px 16px;border-radius:12px;background:var(--navy-3);color:#fff;font-size:14.5px;font-weight:500}
.chip.lime{background:var(--lime);color:var(--navy)}
.auth-brand .orb{position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;border:56px solid rgba(212,243,106,.08)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--soft)}
.auth-card{width:100%;max-width:420px}
.auth-card .card{padding:28px}
.welcome{max-width:520px;margin:0 auto;padding:40px 16px 60px}
.welcome .card{margin-top:16px}

/* Shell */
.shell{display:grid;grid-template-columns:268px 1fr;min-height:100vh;gap:0}
.sidebar{position:sticky;top:0;height:100vh;padding:16px 0 16px 16px}
.sidebar-inner{height:100%;background:var(--white);border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;padding:18px 14px;overflow:auto}
.sidebar .logo{padding:2px 6px 16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.org-select{margin:8px 4px 4px}
.org-select label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 4px 2px;display:block}
.nav button{position:relative;width:100%;display:flex;align-items:center;gap:11px;border:0;background:none;padding:10px 10px;border-radius:12px;font-weight:500;font-size:14.5px;color:var(--navy-2);cursor:pointer;text-align:left}
.nav button svg{width:20px;height:20px;flex:none;color:var(--muted)}
.nav button:hover{background:var(--soft)}
.nav button.active{background:var(--lime-soft);font-weight:700;color:var(--navy)}
.nav button.active svg{color:var(--navy)}
.nav button.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--lime-ink)}
.nav .count{margin-left:auto;font-size:11.5px;font-weight:700;background:var(--lime);color:var(--navy);border-radius:999px;padding:1px 8px}
.sidebar-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.user-line{display:flex;align-items:center;gap:10px;padding:6px 6px 12px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--lime);display:grid;place-items:center;font-weight:700;flex:none}
.user-line strong{font-size:14px;display:block;line-height:1.2}

.content{padding:16px 24px 40px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:14px 18px;margin-bottom:18px}
.topbar .greet small{display:block}
.topbar .greet strong{font-size:17px}
.role-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;background:var(--lime-soft);color:var(--lime-ink);padding:2px 9px;border-radius:999px;margin-left:8px;vertical-align:2px}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn svg{width:19px;height:19px}
.icon-btn .dot{position:absolute;top:7px;right:8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;height:40px}
.lang-switch button{border:0;background:var(--white);padding:0 11px;font-weight:600;font-size:13px;cursor:pointer;color:var(--muted)}
.lang-switch button.on{background:var(--navy);color:#fff}
.date-pill{font-size:13px;color:var(--muted);padding:0 6px;white-space:nowrap}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 2px 14px;flex-wrap:wrap}
.page-head p{margin:2px 0 0;color:var(--muted);font-size:13.5px}

/* Cards & grid */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px;min-width:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.grid>.card{margin-bottom:0}
.stack>*+*{margin-top:18px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{justify-content:space-between}

/* Hero (clock card) */
.hero{background:var(--navy);color:#fff;border-radius:var(--radius);padding:24px;position:relative;overflow:hidden;border:0}
.hero::after{content:"";position:absolute;right:-70px;bottom:-90px;width:240px;height:240px;border-radius:50%;border:40px solid rgba(212,243,106,.09)}
.hero .eyebrow{color:var(--lime)}
.hero h2{font-size:26px;margin:8px 0 4px;font-weight:700}
.hero p{color:#C3CCD5;margin:0}
.hero .status{display:inline-flex;align-items:center;gap:8px;background:var(--navy-3);padding:6px 12px;border-radius:999px;font-size:13px;margin-top:14px}
.hero .status i{width:8px;height:8px;border-radius:50%;background:var(--slate)}
.hero .status.on i{background:var(--lime);box-shadow:0 0 0 4px rgba(212,243,106,.2)}
.hero .actions{margin-top:20px;position:relative;z-index:1}
.eyebrow{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .label{font-size:13px;color:var(--muted);font-weight:500}
.stat .num{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:999px;background:var(--line-2);overflow:hidden;margin-top:10px}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--navy)}
.bar.lime>i{background:#B6D93F}

/* Quick links */
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.quick button{border:1px solid var(--line);background:var(--white);border-radius:14px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600;font-size:13px;cursor:pointer;color:var(--navy)}
.quick button:hover{border-color:var(--navy);background:var(--soft)}
.quick .ic{width:38px;height:38px;border-radius:11px;background:var(--soft);display:grid;place-items:center}
.quick .ic svg{width:19px;height:19px}
.quick button.accent{border-color:#C5E556;background:var(--lime-soft)}
.quick button.accent .ic{background:var(--lime)}

/* Lists */
.list-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.list-item:first-child{border-top:0}
.list-item .grow{flex:1;min-width:0}
.list-item strong{font-size:14px}
.mini-avatar{width:32px;height:32px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.timeline-item{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line-2)}
.timeline-item:first-child{border-top:0}
.timeline-item .tdot{width:10px;height:10px;border-radius:50%;background:var(--lime);border:2px solid var(--navy);margin-top:5px;flex:none}
.property-item{padding:14px;border:1px solid var(--line);border-radius:14px;margin-top:10px}
.property-item small{display:block}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--white);border-radius:12px;padding:10px 16px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;color:var(--navy);min-height:42px;white-space:nowrap}
.btn:hover{border-color:var(--slate)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-2)}
.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.btn.lime:hover{background:#C9EC55}
.btn.ghost-dark{background:var(--navy-3);border-color:var(--navy-3);color:#fff}
.btn.danger{color:var(--red);border-color:#F1C7C4}
.btn.small{padding:6px 11px;font-size:13px;min-height:34px;border-radius:10px}
.btn.full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.big{min-height:52px;font-size:15.5px;padding:12px 22px;border-radius:14px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:9px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--white);color:var(--navy);box-shadow:0 1px 3px rgba(16,29,43,.1)}

/* Forms */
label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px;color:var(--navy-2)}
input,select,textarea{width:100%;border:1px solid var(--line);background:var(--white);border-radius:12px;padding:10px 12px;min-height:44px;font-size:15px}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(212,243,106,.6)}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--navy);flex:none;margin:0}
input[type=color]{padding:4px;height:44px}
.inline-label{display:flex;align-items:center;gap:9px;font-weight:500;margin:12px 0 0}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.days-row{display:flex;flex-wrap:wrap;gap:6px}
.days-row label{margin:0;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-weight:500}

/* Feedback */
.hint{font-size:13px;color:var(--muted);background:var(--soft);border-radius:12px;padding:10px 12px;margin-top:12px}
.notice{font-size:13.5px;background:var(--warn-soft);color:#6B3F00;border-radius:12px;padding:11px 13px;margin:10px 0}
.success-box{font-size:13.5px;background:var(--ok-soft);color:#13573A;border-radius:12px;padding:11px 13px;margin:10px 0}
.error-box{font-size:13.5px;background:var(--red-soft);color:#7E1F1A;border-radius:12px;padding:11px 13px;margin:10px 0}
.empty{text-align:center;color:var(--muted);padding:26px 10px;font-size:14px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--soft);border:1px solid var(--line);color:var(--navy-2);white-space:nowrap}
.badge.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.badge.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.badge.red{background:var(--red-soft);border-color:transparent;color:var(--red)}
.badge.lime{background:var(--lime);border-color:transparent;color:var(--navy)}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--soft);border:1px dashed var(--slate);padding:8px 12px;border-radius:10px;font-size:13px;word-break:break-all}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;display:none;z-index:100;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(16,29,43,.25)}

/* Tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:last-child td{border-bottom:0}
td .btn+.btn{margin-left:6px}
.num-cell{font-variant-numeric:tabular-nums}

/* Calendar */
.calendar-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;max-height:70vh}
table.calendar{border-collapse:separate;border-spacing:0;font-size:12.5px;width:max-content;min-width:100%}
.calendar th,.calendar td{padding:4px;border-bottom:1px solid var(--line-2);text-align:center}
.calendar thead th{position:sticky;top:0;background:var(--white);z-index:2;font-size:11.5px;line-height:1.2}
.calendar thead th.wk{color:var(--red)}
.calendar th.name,.calendar td.name{position:sticky;left:0;background:var(--white);z-index:1;text-align:left;min-width:150px;max-width:170px;padding:6px 10px;border-right:1px solid var(--line)}
.calendar thead th.name{z-index:3}
.calendar td.name strong,.calendar td.name small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar td.name strong{font-size:13px}
.calendar th.today{background:var(--lime-soft)}
.day-cell{width:42px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--white);font-size:11.5px;font-weight:600;cursor:pointer;color:var(--muted);padding:0}
.day-cell.filled{background:color-mix(in srgb,var(--shift-color,var(--slate)) 16%,white);border-color:color-mix(in srgb,var(--shift-color,var(--slate)) 45%,white);color:var(--navy)}
.day-cell.leave{--shift-color:#7A5AF8}
.day-cell.off{--shift-color:#81909D}
.day-cell.sick,.day-cell.permit{--shift-color:#E0892B}
.day-cell.draft{border-style:dashed;border-width:1.5px}
.day-cell:disabled{cursor:default}
.schedule-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--muted);margin:4px 0 14px}
.schedule-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.shift-list .day{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line-2)}
.shift-list .day:first-child{border-top:0}
.date-box{width:52px;text-align:center;border-radius:12px;background:var(--soft);padding:6px 0;flex:none}
.date-box b{display:block;font-size:19px;line-height:1.1}
.date-box span{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:600}
.date-box.today{background:var(--lime)}
.date-box.today span{color:var(--navy)}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:6px}

/* Modal */
dialog{border:0;border-radius:22px;padding:0;width:min(560px,calc(100% - 24px));max-height:calc(100vh - 32px);box-shadow:0 30px 80px rgba(16,29,43,.3);color:var(--navy)}
dialog::backdrop{background:rgba(16,29,43,.45)}
#modal-content{padding:24px;overflow:auto;max-height:calc(100vh - 32px)}
#modal-content h2{padding-right:40px;margin-bottom:6px}
.modal-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--white);font-size:20px;cursor:pointer;line-height:1}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}
video,.photo-preview{width:100%;max-height:340px;object-fit:cover;border-radius:16px;background:var(--navy);display:block;aspect-ratio:1/1}
video{transform:scaleX(-1)}
.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px}
.kv div{background:var(--soft);border-radius:12px;padding:10px 12px;font-size:14px}
.kv div span{display:block;font-size:12px;color:var(--muted);font-weight:600}

/* Notifications panel */
.notif-panel{position:fixed;top:78px;right:24px;width:min(380px,calc(100% - 32px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(16,29,43,.18);z-index:60;max-height:70vh;overflow:auto;padding:14px}
.notif-item{padding:10px 8px;border-top:1px solid var(--line-2);font-size:13.5px}
.notif-item:first-of-type{border-top:0}
.notif-item.unread{background:var(--lime-soft);border-radius:10px}

/* Mobile */
.mobile-only{display:none}
.bottom-nav{display:none}
.drawer-backdrop{display:none}
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-main{grid-template-columns:1fr}
}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-brand{padding:28px 20px 30px;min-height:auto}
  .auth-brand h1{font-size:28px;margin-top:36px}
  .auth-brand p{font-size:15px}
  .chips{margin-top:18px}
  .chip{font-size:13px;padding:8px 12px}
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:80;padding:0;transform:translateX(-102%);transition:transform .22s ease}
  .sidebar-inner{border-radius:0 22px 22px 0;border-left:0}
  .shell.drawer-open .sidebar{transform:none}
  .shell.drawer-open .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(16,29,43,.45);z-index:70}
  .content{padding:12px 16px 96px}
  .topbar{padding:10px 12px;border-radius:18px;margin-bottom:14px}
  .topbar .greet strong{font-size:15px}
  .date-pill,.desktop-only{display:none}
  .mobile-only{display:grid}
  .grid-2{grid-template-columns:1fr}
  .stats{gap:10px}
  .stat{padding:14px}
  .stat .num{font-size:26px}
  .card{padding:16px;border-radius:16px}
  .hero{padding:20px}
  .hero h2{font-size:22px}
  .field-grid{grid-template-columns:1fr}
  .calendar th.name,.calendar td.name{min-width:104px;max-width:112px;padding:6px 8px}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:50}
  .bottom-nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--muted);padding:4px 0;cursor:pointer}
  .bottom-nav button svg{width:22px;height:22px}
  .bottom-nav button.active{color:var(--navy)}
  .bottom-nav button.active .bn-ic{background:var(--lime)}
  .bn-ic{width:44px;height:28px;border-radius:999px;display:grid;place-items:center}
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:92vh}
  #modal-content{max-height:92vh;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
  .notif-panel{top:70px;right:16px}
  #toast{bottom:90px}
  .table-wrap table{font-size:13.5px}
  .evidence-grid,.kv{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .lang-switch button{padding:0 8px}
  .top-actions{gap:6px}
  .icon-btn{width:38px;height:38px}
}

/* Face verification */
.cam-wrap{position:relative}
.face-overlay{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(16,29,43,.82);color:#fff;font-weight:700;text-align:center;padding:10px 12px;border-radius:12px;font-size:15px}
.face-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.face-steps span{font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--muted)}
.face-steps span.now{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.face-steps span.done{background:var(--ok-soft);border-color:transparent;color:var(--ok)}

/* Push banner */
.push-banner{display:flex;align-items:center;gap:12px;background:var(--lime-soft);border:1px solid #C5E556;border-radius:var(--radius);padding:12px 14px;margin-bottom:14px}
.push-banner svg{width:22px;height:22px}
.push-banner .grow{flex:1;min-width:0}

/* Shift swap */
.swap-item{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:10px}
.swap-item:first-of-type{margin-top:0}
.swap-table{font-size:13px;margin-top:8px}
.swap-table td,.swap-table th{padding:6px 8px}
.swap-cand{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0;font-weight:500;cursor:pointer}
.swap-cand input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--navy)}
.swap-cand small{display:block;color:var(--muted)}
.swap-cand:has(input:checked){border-color:var(--navy);background:var(--lime-soft)}
.shift-list .day .btn{flex:none}

/* Decision modal */
.decision-head{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--soft);border-radius:16px;margin-top:6px}
.mini-avatar.big{width:44px;height:44px;font-size:16px;background:var(--navy);color:var(--lime);border:0}
.decision-name{font-weight:700;font-size:16px;line-height:1.25}
.kind-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.tone-slate{background:#E9ECEF;color:#3D4955}.tone-violet{background:#EEE9FE;color:#5B3FD0}.tone-amber{background:var(--warn-soft);color:var(--warn)}.tone-blue{background:#E4EEFB;color:#245BA8}.tone-lime{background:var(--lime);color:var(--navy)}
.reason-box{border-left:4px solid var(--lime-ink);background:#FAFBF7;border-radius:0 12px 12px 0;padding:10px 14px;margin-top:14px}
.reason-box p{margin:4px 0 0;font-size:15px}
.impact{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:14px}
.impact-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line-2);font-size:14px}
.impact .eyebrow+.impact-row{border-top:0;margin-top:4px}
.impact-row>span:last-child{text-align:right}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.choice{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:14px;padding:12px;margin:0;cursor:pointer;font-weight:500}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice small{display:block;color:var(--muted);font-weight:500}
.choice-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--soft);flex:none}
.choice.approve:has(input:checked){border-color:var(--ok);background:var(--ok-soft)}
.choice.approve:has(input:checked) .choice-ic{background:var(--ok);color:#fff}
.choice.reject:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.choice.reject:has(input:checked) .choice-ic{background:var(--red);color:#fff}
.quick-notes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--navy-2)}
.qn:hover{border-color:var(--navy)}
.approve-btn{background:var(--ok);border-color:var(--ok);color:#fff}
.reject-btn{background:var(--red);border-color:var(--red);color:#fff}
@media (max-width:420px){.choice-grid{grid-template-columns:1fr}}

/* v2.5.2 */
dialog #toast{position:fixed;bottom:24px}
.modal-error{margin:14px 0 0}
textarea.attention{border-color:var(--warn);box-shadow:0 0 0 3px rgba(164,95,0,.15)}
@media (max-width:600px){.push-banner{flex-wrap:wrap}.push-banner .grow{flex-basis:calc(100% - 80px)}.push-banner #push-enable-banner{flex:1}}

/* v2.7 foto cek pendaftaran wajah */
.face-thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:var(--line)}

/* v2.9 transisi halus */
#app{opacity:0}
body.app-ready #app{opacity:1;transition:opacity .4s ease}
.page-in{animation:pageIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#loadbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;background:linear-gradient(90deg,var(--lime),#9BC53D);border-radius:0 3px 3px 0;opacity:0;pointer-events:none;box-shadow:0 0 8px rgba(155,197,61,.6)}
#loadbar.on{opacity:1;width:82%;transition:width 6s cubic-bezier(.1,.7,.2,1),opacity .2s}
#loadbar.done{opacity:0;width:100%;transition:width .2s ease,opacity .35s ease .15s}
dialog#modal[open]{animation:modalIn .26s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page-in,dialog#modal[open]{animation:none}#loadbar{transition:none!important}}

/* v3.0 pengeluaran & kas kecil */
.money-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden}
.money-input span{padding:0 4px 0 12px;color:var(--muted);font-weight:600}
.money-input input{border:0!important;box-shadow:none!important;background:transparent;font-weight:700;font-variant-numeric:tabular-nums}
.cat-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.cat-chip i{width:10px;height:10px;border-radius:3px;flex:none}
.hbars{display:grid;gap:12px;margin-top:12px}
.hbar-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.hbar-track{height:8px;border-radius:999px;background:var(--line-2);margin-top:5px;overflow:hidden}
.hbar-track i{display:block;height:100%;border-radius:999px}
.hbar small{display:block;text-align:right;margin-top:2px}
.petty-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.petty-tabs button{position:relative;border:1px solid var(--line);background:var(--white);border-radius:14px;padding:9px 14px;text-align:left;font:inherit;font-weight:700;color:var(--navy);cursor:pointer;white-space:nowrap}
.petty-tabs button small{display:block;font-weight:500}
.petty-tabs button.on{background:var(--navy);color:var(--white);border-color:var(--navy)}
.petty-tabs button.on small{color:#B9C4CF}
.dot-badge{position:absolute;top:-6px;right:-6px;background:var(--warn);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.petty-card .petty-amount{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.petty-card.low .petty-amount{color:var(--red)}
.petty-mini{display:flex;justify-content:space-between;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:6px}
.petty-mini span{color:var(--muted);font-size:13px}
.num-cell .neg{color:var(--navy)}
.num-cell .pos{color:var(--ok)}
.num-cell{white-space:nowrap}

/* v3.1 foto nota */
.receipt-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px;border:1.5px dashed var(--line);border-radius:14px;background:var(--soft)}
.receipt-box.missing{border-color:var(--red);background:var(--red-soft)}
.receipt-preview{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.req{color:var(--red);font-weight:700}
.receipt-view img{display:block;max-width:100%;max-height:70vh;margin:6px auto 0;border-radius:12px;border:1px solid var(--line)}
.receipt-btn{padding-inline:9px}

/* v3.2 housekeeping */
.hk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hk-stat{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:12px 14px;border-left:5px solid var(--slate)}
.hk-stat span{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
.hk-stat strong{font-size:26px;letter-spacing:-.02em}
.st-ready{--st:#1F8A5B;--st-soft:#E3F4EB}.st-occupied{--st:#245BA8;--st-soft:#E4EEFB}.st-dirty{--st:#C2362F;--st-soft:#FCE6E4}.st-cleaning{--st:#A45F00;--st-soft:#FFF1D9}
.hk-stat.st-ready,.hk-stat.st-occupied,.hk-stat.st-dirty,.hk-stat.st-cleaning{border-left-color:var(--st)}
.hk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:12px}
.hk-room{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line);border-top:5px solid var(--st);background:var(--st-soft);border-radius:14px;padding:10px 12px;font:inherit;color:var(--navy);cursor:pointer;min-height:96px}
.hk-room:hover{filter:brightness(.98)}
.hk-room-name{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hk-room-st{font-size:12px;font-weight:700;color:var(--st);margin-top:2px}
.hk-room-who{color:var(--navy-2)!important;font-weight:600}
.hk-tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:12px}
.hk-task{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--white)}
.hk-task.in_progress{border-color:#E8B66B;background:#FFFAF0}
.hk-task-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.hk-room-head{border-left:5px solid var(--st);background:var(--st-soft);border-radius:12px;padding:10px 14px}
.hk-room-head small{display:block;color:var(--muted)}
.hk-checklist{display:grid;gap:8px;margin-top:8px}
.hk-check{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--white);cursor:pointer;font-weight:600}
.hk-check input{width:22px;height:22px;flex:none;accent-color:#1F8A5B}
.hk-check:has(input:checked){background:var(--ok-soft);border-color:transparent}
.hk-progress{height:6px;border-radius:999px;background:var(--line-2);margin-top:10px;overflow:hidden}
.hk-progress i{display:block;height:100%;background:#1F8A5B;transition:width .25s}
.hk-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.hk-photo{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:10px;border:1.5px dashed var(--line);border-radius:14px;background:var(--soft)}
.hk-photo.missing{border-color:var(--red);background:var(--red-soft)}
.hk-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.hk-photo-view{display:grid;gap:12px}
.hk-photo-view img{width:100%;border-radius:12px;border:1px solid var(--line)}
.hk-photo-view figcaption{font-weight:700;margin-bottom:4px}
.module-box{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.module-box .inline-label{margin-top:6px}
.module-sub{margin-left:26px;font-size:13.5px}
@media (max-width:640px){.hk-stats{grid-template-columns:repeat(2,1fr)}.hk-photos{grid-template-columns:1fr 1fr}}

/* v3.3 ringkasan hari ini */
.dash{margin-bottom:22px}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dash-head h2{font-size:24px;margin:2px 0 0;letter-spacing:-.02em}
.dash-alerts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.dash-alerts > span{display:contents}
.dash-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:7px 13px;font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer}
.dash-chip b{background:var(--navy);color:#fff;border-radius:999px;padding:0 7px;font-size:12px;line-height:19px}
.dash-chip.red{background:var(--red-soft);border-color:transparent;color:var(--red)}.dash-chip.red b{background:var(--red)}
.dash-chip.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}.dash-chip.warn b{background:var(--warn)}
.dash-chip.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok);cursor:default}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.dash-card h2{margin:0}
.dash-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dash-pill{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--soft)}
.dash-pill b{margin-left:2px}
.dash-pill.g-late{background:var(--red-soft);color:var(--red)}.dash-pill.g-on{background:var(--ok-soft);color:var(--ok)}.dash-pill.g-soon{background:#E9ECEF;color:#3D4955}.dash-pill.g-out{background:#E4EEFB;color:#245BA8}.dash-pill.g-away{background:#EEE9FE;color:#5B3FD0}
.dash-prop-label{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px}
.dash-prop-label small{font-weight:600;text-transform:none;letter-spacing:0}
.dash-person{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;border-left:4px solid transparent;margin-bottom:6px;background:var(--soft)}
.dash-person small{display:block}
.dash-person.g-late{border-left-color:var(--red);background:var(--red-soft)}
.dash-person.g-on{border-left-color:var(--ok)}
.dash-person.g-out{opacity:.75}
.dash-person.g-away{opacity:.6}
.dash-right{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.dash-row{padding:10px 0;border-top:1px solid var(--line-2);cursor:pointer}
.dash-row:first-of-type{border-top:0}
.dash-row-top{display:flex;justify-content:space-between;gap:10px;font-weight:700}
.dash-row .bar{margin:6px 0 4px}
.dash-stack{display:flex;height:10px;border-radius:999px;overflow:hidden;margin:7px 0 6px;background:var(--line-2)}
.dash-stack i{display:block;background:var(--st)}
.dash-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;margin-bottom:4px}
.dash-legend span{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.dash-legend i{width:9px;height:9px;border-radius:3px;background:var(--st);display:inline-block}
.neg{color:var(--red)}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}

/* v3.4 filter properti global */
.scope-select{width:auto;max-width:230px;padding:8px 32px 8px 12px;border-radius:999px;font-weight:700;font-size:13.5px;background-color:var(--white)}
.scope-select.on{background-color:var(--lime);border-color:var(--lime);color:var(--navy)}
@media (max-width:640px){.scope-select{max-width:132px;font-size:12.5px;padding:7px 26px 7px 10px}}
.scope-row{margin:-6px 0 14px}
.scope-row .scope-select{max-width:100%;width:100%}
@media (max-width:640px){.scope-select{font-size:14px;padding:10px 32px 10px 14px}}
/* ---------- v3.5 Pengumuman & Tugas rutin ---------- */
.tone-redx{background:var(--red-soft);color:var(--red)}
.ann-banner{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-left:5px solid var(--lime-ink,#5B7A00);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.ann-banner-ic{font-size:24px;line-height:1}
.ann-banner small{color:var(--muted);display:block}
.ann-banner strong{display:block;font-size:16px;margin-top:2px}
.ann-banner p{margin:6px 0 0;color:var(--slate);font-size:14px}
.ann-banner-act{display:flex;flex-direction:column;gap:6px;align-items:stretch;flex:none}
.ann-list{display:grid;gap:14px}
.ann-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.ann-card.unread{border-color:var(--lime-ink,#5B7A00);box-shadow:0 0 0 3px var(--lime-soft,#EEF9C9)}
.ann-card.pinned{background:linear-gradient(180deg,#FFFCF3,var(--white) 60%)}
.ann-card.expired{opacity:.6}
.ann-card h3{margin:8px 0 6px;font-size:18px}
.ann-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ann-body{margin:0 0 8px;color:var(--slate);line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.ann-ok{color:var(--ok);font-weight:600;font-size:13.5px}
.ann-readers .list-item{gap:10px}
.avatar.sm{width:30px;height:30px;font-size:12px}
.danger-text{color:var(--red)!important}
.tk-task.late{border-color:var(--red);background:var(--red-soft)}
.tk-flags{margin-top:6px;color:var(--muted)}
.tk-assign{width:auto;min-width:0;max-width:190px;padding:7px 10px;font-size:13px}
.tk-done-ic{width:26px;height:26px;border-radius:999px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-weight:800;flex:none}
.hk-stat.st-late{border-left-color:var(--red)}.hk-stat.st-late strong{color:var(--red)}
.tk-days{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tk-days label{cursor:pointer}
.tk-days input{position:absolute;opacity:0;pointer-events:none}
.tk-days span{display:inline-block;min-width:46px;text-align:center;border:1px solid var(--line);border-radius:10px;padding:8px 6px;font-weight:700;font-size:13px;background:var(--white)}
.tk-days input:checked+span{background:var(--navy);color:var(--white);border-color:var(--navy)}
.tk-days input:focus-visible+span{outline:2px solid var(--lime-ink,#5B7A00)}
.tk-photo-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.tk-photo-labels .hint{grid-column:1/-1}
.req{color:var(--red)}
@media (max-width:640px){.ann-banner{flex-wrap:wrap}.ann-banner-act{flex-direction:row;width:100%}.ann-banner-act .btn{flex:1}.tk-photo-labels{grid-template-columns:1fr}.tk-stats{grid-template-columns:repeat(2,1fr)}}
/* v3.5 — warna tipe kamar */
.hk-type{display:inline-flex;align-items:center;gap:5px;max-width:100%;margin-top:3px;padding:2px 8px 2px 7px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.5;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-type::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--tc);flex:none}
.hk-type-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:4px}
.hk-type-legend .hk-type{font-size:12.5px;margin:0}
.hk-type-legend small{margin-left:-8px;color:var(--muted);font-weight:700}
.dash-empty{background:var(--soft);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:14px;margin-top:8px}
.hk-room .hk-type{white-space:normal;line-height:1.25;padding:3px 8px 3px 7px}
.ann-banner .grow{flex:1;min-width:0}
/* ---------- v3.6 Housekeeping: riwayat, rekap, timer ---------- */
.hk-tabs{margin:0 0 14px}
.hk-timer{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12.5px;font-weight:700;color:#A15C00;background:var(--warn-soft);border-radius:999px;padding:2px 9px}
.hk-room .hk-timer{font-size:11.5px;padding:1px 7px;margin-top:4px}
.hk-room-tasks{display:grid;gap:8px;margin-top:12px}
.hk-rt{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--white)}
.hk-rt.in_progress{border-color:#E8B66B;background:#FFFAF0}
.hk-rt.done{background:var(--soft)}
.hk-rt-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.hk-rt-top small{display:block;color:var(--muted)}
.hk-rt-top > div:last-child{text-align:right}
.hk-room-hist{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.hk-hist-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2)}
.hk-hist-row:last-child{border-bottom:0}
.hk-hist-row small{display:block;color:var(--muted)}
.hk-hist-date{flex:none;width:52px;font-weight:800;font-size:13px}
.dnd-choices{display:grid;gap:10px;margin-top:12px}
.dnd-choice{display:flex;flex-direction:column;gap:3px;text-align:left;border:1.5px solid var(--line);background:var(--white);border-radius:14px;padding:14px 16px;font:inherit;color:var(--navy);cursor:pointer}
.dnd-choice strong{font-size:15.5px}
.dnd-choice small{color:var(--muted)}
.dnd-choice:hover:not(:disabled){border-color:var(--navy);background:var(--soft)}
.dnd-choice:disabled{opacity:.55;cursor:not-allowed}
.hk-hist-filters .seg{flex-wrap:wrap}
.hk-hist-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:6px}
.hk-hist-stats .hk-stat small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.hk-hist-stats .hk-stat{border-left-color:var(--navy)}
table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hk-recap tr.total td{font-weight:800;background:var(--lime-soft,#EEF9C9);border-top:2px solid var(--navy)}
.hk-hist tr.skipped td{color:var(--muted)}
.hk-hist .hk-type{margin-top:2px}
.module-photo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0}
.module-photo span{font-size:13.5px}
.module-select{width:auto;min-width:110px;padding:6px 10px;font-size:13px}
.hk-hist-cards{display:none}
@media (max-width:700px){
 .hk-hist-wrap{display:none}
 .hk-hist-cards{display:grid;gap:8px}
 .hk-hc{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--white)}
 .hk-hc.skipped{background:var(--soft);opacity:.85}
 .hk-hc-top{display:flex;align-items:center;gap:8px}
 .hk-hc-top .hk-type{margin:0}
 .hk-hc-top .hk-hist-date{width:auto;color:var(--muted);font-weight:700}
 .hk-hc-mid{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
 .hk-hc-mid small{color:var(--muted)}
 .hk-hc > small{display:block;margin-top:4px}
 .hk-recap th,.hk-recap td{padding:8px 6px;font-size:13px}
}
.hk-hc-top .grow{flex:1}
.hk-detail-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hk-detail-list{display:grid;gap:6px;margin-top:8px}
.hk-detail-list > div{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;font-weight:600;font-size:14px}
.hk-detail-list > div span{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.hk-detail-list .ok{background:var(--ok-soft)}.hk-detail-list .ok span{background:var(--ok);color:#fff}
.hk-detail-list .no{background:var(--red-soft)}.hk-detail-list .no span{background:var(--red);color:#fff}
/* v3.7 label foto tugas (maks. 10) */
.tk-photo-labels{display:block}
.tk-pl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:8px}
.tk-pl-row{display:flex;align-items:center;gap:6px}
.tk-pl-row b{width:22px;height:22px;border-radius:999px;background:var(--navy);color:#fff;font-size:11.5px;display:grid;place-items:center;flex:none}
.tk-pl-row input{flex:1;min-width:0}
.tk-pl-row .btn{flex:none;padding:6px 9px}
/* v3.7 checklist wajib/opsional */
.cl-editor{display:grid;gap:8px;margin-top:6px}
.cl-list{display:grid;gap:6px}
.cl-row{display:flex;gap:6px;align-items:center}
.cl-row input{flex:1;min-width:0}
.cl-opt{flex:none;border:1px solid var(--line);background:var(--navy);color:#fff;border-radius:999px;padding:6px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;min-width:74px}
.cl-opt.on{background:var(--white);color:var(--muted);border-style:dashed}
.cl-row .btn{flex:none;padding:6px 9px}
.cl-editor > .btn{justify-self:start}
.hk-check.opt{border-style:dashed}
.hk-check em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:2px 8px}
.hk-detail-list em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted)}
.hk-detail-list .skip{background:var(--soft);color:var(--muted)}.hk-detail-list .skip span{background:#C9CFD4;color:#fff}
.copy-opt{cursor:pointer}.copy-opt span{display:flex;align-items:center;gap:8px}
.copy-opt:has(input:checked){border-color:var(--navy);background:var(--soft)}
.copy-opt input{width:18px!important;height:18px;flex:none;margin:0;accent-color:var(--navy)}.copy-opt span{justify-content:flex-start}
/* v3.8 Tes absen */
.test-banner{background:#EEE9FE;color:#4B32B8;border-radius:12px;padding:10px 14px;font-size:13.5px;font-weight:600;margin-bottom:12px}
.test-verdict{display:flex;gap:12px;align-items:center;border-radius:14px;padding:14px 16px;font-size:15px;margin-bottom:6px}
.test-verdict span{font-size:24px}
.test-verdict.ok{background:var(--ok-soft);color:#14613F}.test-verdict.warn{background:var(--warn-soft);color:#7A4A00}.test-verdict.bad{background:var(--red-soft);color:var(--red)}
.test-eyebrow{display:block;margin:16px 0 6px}
.test-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;margin-bottom:6px;background:var(--soft)}
.test-row > span{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;color:#fff;margin-top:1px}
.test-row.ok > span{background:var(--ok)}.test-row.bad > span{background:var(--red)}.test-row.info > span{background:#8A96A3}
.test-row.bad{background:var(--red-soft)}
.test-row small{display:block;color:var(--muted);margin-top:2px}
/* v3.9 Animasi pemindai wajah */
.cam-wrap{overflow:hidden;border-radius:16px}
.face-scan{position:absolute;inset:0;pointer-events:none;z-index:2}
.fs-guide{position:absolute;left:50%;top:46%;width:52%;aspect-ratio:3/4;transform:translate(-50%,-50%);border:2px dashed rgba(212,243,106,.75);border-radius:50% 50% 46% 46%;transition:opacity .3s;animation:fsBreath 2.2s ease-in-out infinite}
.face-scan.has-face .fs-guide{animation:none;opacity:0;visibility:hidden}
.fs-track{position:absolute;left:0;top:0;width:40%;height:50%;opacity:0;transition:transform .14s linear,width .14s linear,height .14s linear,opacity .25s;border-radius:18px;
  background:radial-gradient(ellipse at center,rgba(212,243,106,.06),rgba(212,243,106,0) 70%)}
.face-scan.has-face .fs-track{opacity:1}
.fs-c{position:absolute;width:22%;height:22%;border:3px solid #D4F36A;filter:drop-shadow(0 0 6px rgba(212,243,106,.7))}
.fs-c.tl{left:0;top:0;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.fs-c.tr{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.fs-c.bl{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 14px}
.fs-c.br{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 14px 0}
.fs-line{position:absolute;left:6%;right:6%;height:3px;top:0;border-radius:3px;background:linear-gradient(90deg,transparent,#D4F36A,transparent);box-shadow:0 0 14px 3px rgba(212,243,106,.55);opacity:0}
.fs-mesh{position:absolute;inset:8%;border-radius:40%;opacity:0;background-image:radial-gradient(rgba(212,243,106,.55) 1px,transparent 1.6px);background-size:12px 12px;-webkit-mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%)}
.face-scan.scanning .fs-line{opacity:1;animation:fsScan 1.6s cubic-bezier(.45,0,.55,1) infinite}
.face-scan.scanning .fs-mesh{animation:fsMesh 1.6s ease-in-out infinite}
.fs-ok{position:absolute;left:50%;top:46%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:999px;background:#1F8A5B;color:#fff;font-size:38px;font-weight:800;display:grid;place-items:center;opacity:0;transform:scale(.4)}
.face-scan.done .fs-c{border-color:#3DDC97;filter:drop-shadow(0 0 8px rgba(61,220,151,.8))}
.face-scan.done .fs-ok{animation:fsPop .45s cubic-bezier(.2,1.5,.4,1) forwards}
.face-scan.done::after{content:"";position:absolute;inset:0;background:rgba(31,138,91,.18);animation:fsFlash .6s ease-out}
.face-scan.fail .fs-c{border-color:#F06A5D;filter:drop-shadow(0 0 8px rgba(240,106,93,.8))}
.face-scan.fail .fs-track{animation:fsShake .4s}
@keyframes fsScan{0%{top:4%}50%{top:calc(96% - 3px)}100%{top:4%}}
@keyframes fsMesh{0%,100%{opacity:.15}50%{opacity:.5}}
@keyframes fsBreath{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes fsPop{to{opacity:1;transform:scale(1)}}
@keyframes fsFlash{from{opacity:1}to{opacity:0}}
@keyframes fsShake{0%,100%{margin-left:0}25%{margin-left:-6px}75%{margin-left:6px}}
.cam-wrap .face-overlay{z-index:3}
@media (prefers-reduced-motion:reduce){.face-scan *{animation:none!important;transition:none!important}.face-scan.scanning .fs-line{opacity:.8;top:50%}}
.face-debug{font-size:11.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;margin-top:4px}
/* v3.12 — staf harian (DW) */
.badge.dw{background:#E8E1FB;border-color:transparent;color:#5B3CC4;font-size:10.5px;padding:1px 7px;letter-spacing:.03em}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:820px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
tr.muted-row td{color:var(--muted);background:rgba(0,0,0,.015)}
.calendar tr.dw-row td.name{background:linear-gradient(90deg,#F4F0FE,transparent)}
.dw-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.dw-sum>div{background:var(--soft);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.dw-sum span{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.dw-sum b{font-size:16px;color:var(--navy)}
.dw-sum .dw-total{background:var(--lime)}
.dw-sum .dw-total span{color:var(--navy-2)}
.dw-card.is-paid{border-color:var(--ok-soft)}
@media (max-width:620px){.dw-sum{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Fase 1: paket klien & panel Tim Oumah */
.plan-banner{margin:0 0 16px}
.pf-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 14px;margin-top:4px}
.link-btn{background:none;border:0;padding:0 0 0 4px;color:inherit;font:inherit;cursor:pointer;opacity:.6}
.link-btn:hover{opacity:1}

/* Gaji: daftar periode */
.salary-runs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.salary-run{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--white);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.salary-run:hover{border-color:var(--slate);background:var(--soft)}
.salary-run.on{border-color:#C5E556;background:var(--lime-soft)}
.salary-run:focus-visible{outline:2px solid var(--lime-ink);outline-offset:2px}
.salary-run-meta{display:flex;flex-wrap:wrap;gap:6px}
/* Fase 3 — Kamar */
.st-inspected{--st:#6B4FB8;--st-soft:#EEE9FA}.st-ooo{--st:#5B6472;--st-soft:#ECEEF1}
.hk-stat.st-inspected,.hk-stat.st-ooo{border-left-color:var(--st)}
.hk-room.is-ooo{background:repeating-linear-gradient(135deg,#ECEEF1 0 10px,#E2E5EA 10px 20px);border-top-color:#5B6472}
.badge.ooo-badge{background:#5B6472;color:#fff;margin-top:4px}
.btn.st-btn{border-left:4px solid var(--st)}
.rm-report{padding:10px 0;border-bottom:1px solid var(--line);gap:10px;align-items:flex-start}
.rm-report:last-child{border-bottom:0}
.rm-photo-pick{margin-top:12px}.rm-photo-pick .photo-preview{display:block;margin-top:8px}

/* Fase 4a — Harga kamar (rates.js) */
.rt-nav{gap:8px;flex-wrap:wrap;margin-bottom:12px}
.rt-nav input[type=date]{width:auto;margin:0}
.rt-cal td{padding:3px}
.rt-cal tr.rt-avail td{background:var(--soft);font-weight:700;color:var(--navy)}
.rt-cal tr.rt-avail td.name{background:var(--soft)}
.rt-cal td.rt-full{color:var(--red);background:color-mix(in srgb,var(--red) 10%,white)}
.rt-cell{width:46px;min-height:36px;border-radius:8px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:11.5px;font-weight:600;color:var(--navy);cursor:pointer;padding:2px 0;line-height:1.15}
.rt-cell small{display:block;font-size:9.5px;font-weight:600;color:var(--muted)}
.rt-cell:disabled{cursor:default;opacity:1}
.rt-cell.custom{background:var(--lime-soft);border-color:color-mix(in srgb,var(--navy) 25%,white)}
.rt-cell.stop{background:color-mix(in srgb,var(--red) 12%,white);border-color:color-mix(in srgb,var(--red) 40%,white)}
.rt-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.rt-pend{list-style:none;margin:8px 0 0;padding:0}.rt-pend li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.rt-dot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle}
.rt-dot.custom{background:var(--lime-soft);border:1px solid var(--line)}
.rt-cell .rt-dpm{display:block;font-size:10px;line-height:1.1;color:var(--muted)}
.rt-cell.dpm-up span:first-child{color:var(--red);font-weight:600}
.rt-cell.dpm-down span:first-child{color:var(--ok);font-weight:600}
.rt-dot.dpm{background:var(--red)}
.dpm-kind{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.dpm-kind:first-of-type{border-top:0;padding-top:0}
.dpm-list{list-style:none;padding:0;margin:6px 0}
.dpm-list li{padding:8px 0;border-bottom:1px solid var(--line);gap:8px}
.dpm-list li:last-child{border-bottom:0}
#dpm-sim h4{margin:14px 0 6px}
#dpm-sim td.num{white-space:nowrap;text-align:right}
.rt-pick{display:grid;gap:8px;margin-bottom:6px}
.rt-pick .inline-label{margin-left:8px}
.rt-wd{display:flex;flex-wrap:wrap;gap:4px 12px}
.rt-type-head{align-items:flex-start;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.rt-from{text-align:right;white-space:nowrap}
.rt-plan{width:100%;gap:12px;text-align:left;border:0;border-bottom:1px solid var(--line-2);background:none;padding:12px 2px;font:inherit;color:inherit;cursor:pointer}
.rt-plan:last-child{border-bottom:0}
.rt-plan:disabled{cursor:default}
.rt-plan.off{opacity:.55}
.rt-price{text-align:right;white-space:nowrap}
.rt-price small{display:block;color:var(--muted)}

/* Fase 4a — Booking (bookings.js) */
.bk-filter{gap:0 12px}
.bk-row{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-bottom:1px solid var(--line-2);background:none;padding:12px 2px;font:inherit;color:inherit;cursor:pointer}
.bk-row:hover{background:var(--soft)}
.bk-row.off{opacity:.55}
.bk-row.over{box-shadow:inset 4px 0 0 var(--red);padding-left:12px}
.bk-row .grow{flex:1;min-width:0}
.bk-right{text-align:right;white-space:nowrap}
.bk-right .badge{margin-left:4px}
.bk-room{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:12px}
.bk-room label{margin-top:8px}
.bk-quote{margin-top:8px}
.bk-total{margin-top:14px;font-size:15px}
.bk-room-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.bk-room-line .grow{flex:1;min-width:0}
.bk-room-line select{width:auto;min-width:120px}
@media (max-width:600px){.bk-row{flex-wrap:wrap}.bk-right{text-align:left}}
.bk-form .bk-sec{font-size:15px;margin:22px 0 2px;padding-top:16px;border-top:1px solid var(--line)}
.bk-form .bk-sec:first-child{margin-top:4px;padding-top:0;border-top:0}
.bk-form .req{color:var(--red)}
.bk-phone{display:flex;gap:8px}
.bk-phone select{width:96px;flex:none}
.bk-pay{display:grid;gap:8px}
.bk-pay-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0;cursor:pointer;font-weight:400}
.bk-pay-opt:has(input:checked){border-color:var(--navy);background:var(--soft)}
.bk-pay-opt input{margin-top:3px;width:18px;height:18px;min-height:0;flex:none;accent-color:var(--navy)}
.bk-pay-opt span{flex:1;min-width:0}
.bk-pay-opt strong{display:block;font-size:14.5px}
.bk-pay-opt small{display:block;margin-top:2px}
.bk-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-actions .btn{width:100%;min-height:46px}

/* Fase 4a — Booking chart (kamar × tanggal) */
.bc-nav{gap:8px;flex-wrap:wrap}
.bc-nav input[type=date]{width:auto;margin:0}
.bc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px 4px}
.bc{--bc-w:46px;--bc-name:120px;width:max-content;min-width:100%}
.bc-row{display:flex;min-height:40px;border-bottom:1px solid var(--line-2)}
.bc-name{position:sticky;left:0;z-index:3;flex:none;width:var(--bc-name);background:var(--white);padding:8px 10px;border-right:1px solid var(--line);font-weight:600;font-size:13.5px;display:flex;flex-direction:column;justify-content:center}
.bc-name small{font-weight:500}
.bc-grid{display:grid;grid-auto-rows:40px;position:relative}
.bc-grid > *{grid-row:1}
.bc-cell{border-left:1px solid var(--line-2);cursor:pointer}
.bc-cell:hover{background:var(--lime-soft)}
.bc-cell.wk{background:color-mix(in srgb,var(--soft) 70%,white)}
.bc-cell.today,.bc-day.today{background:var(--lime-soft)}
.bc-head{position:sticky;top:0;z-index:4;background:var(--white)}
.bc-head .bc-grid{grid-auto-rows:44px}
.bc-day{text-align:center;font-size:12px;line-height:1.15;padding-top:5px;border-left:1px solid var(--line-2)}
.bc-day small{display:block;color:var(--muted)}
.bc-day.wk small{color:var(--red)}
.bc-type{background:var(--soft)}
.bc-type .bc-name{background:var(--soft)}
.bc-av{text-align:center;font-weight:700;font-size:13px;align-self:center}
.bc-av.full{color:var(--red)}
.bc-loose .bc-name{color:var(--warn)}
.bc-block{z-index:2;margin:5px 2px;border-radius:9px;border:0;padding:2px 8px;text-align:left;font:inherit;font-size:12px;line-height:1.2;overflow:hidden;white-space:nowrap;cursor:pointer;
  background:#DCE8FB;color:#173B74;display:flex;flex-direction:column;justify-content:center;min-width:0}
.bc-block span{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.bc-block small{font-size:10.5px;opacity:.8;overflow:hidden;text-overflow:ellipsis}
.bc-block.st-in_house{background:var(--lime);color:var(--navy)}
.bc-block.st-checked_out{background:#E6E8EB;color:var(--muted)}
.bc-block.over{box-shadow:inset 0 0 0 2px var(--red)}
.bc-block.cutl{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.bc-block.cutr{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.bc-ooo{background:repeating-linear-gradient(135deg,#E3E5E8 0 6px,#EEF0F2 6px 12px);color:var(--muted);cursor:default}
.bc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.bc-legend i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle;background:#DCE8FB}
.bc-legend i.st-in_house{background:var(--lime)}.bc-legend i.st-checked_out{background:#E6E8EB}
.bc-legend i.bc-ooo{background:repeating-linear-gradient(135deg,#E3E5E8 0 3px,#EEF0F2 3px 6px)}.bc-legend i.over{background:#fff;box-shadow:inset 0 0 0 2px var(--red)}
@media (max-width:600px){.bc{--bc-w:40px;--bc-name:84px}}
/* Fase 4a — Tamu hari ini & aksi menginap */
.bt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bt-col h3{font-size:14.5px}
.bt-line{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line-2)}
.bt-line .grow{flex:1;min-width:0}
.bk-stay{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:0 0 10px;border-bottom:1px solid var(--line-2)}
.bk-stay .badge{margin-right:auto}
@media (max-width:900px){.bt-grid{grid-template-columns:1fr;gap:6px}}
.arr-flag{display:block;margin-top:6px;font-size:11px;font-weight:700;line-height:1.25;border-radius:8px;padding:3px 6px;background:#DCE8FB;color:#173B74;white-space:normal;text-align:left}
.arr-flag.late{background:var(--red-soft);color:var(--red)}
.arr-flag.departure{background:var(--warn-soft);color:var(--warn)}
.bk-pay-void{opacity:.55}.bk-pay-void strong{text-decoration:line-through}
/* Kartu detail reservasi saat hover (booking chart & daftar) */
.bk-hover{position:fixed;z-index:60;width:min(320px,calc(100vw - 16px));background:var(--white);color:var(--navy);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 32px rgba(19,32,43,.18);padding:12px 14px;font-size:13px;line-height:1.45;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .14s ease-out,transform .14s ease-out;visibility:hidden}
.bk-hover.on{opacity:1;transform:none;visibility:visible}
.bk-hover .hv-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.bk-hover .hv-head strong{font-size:14.5px}
.bk-hover .hv-warn{background:var(--red-soft);color:var(--red);border-radius:8px;padding:4px 8px;font-weight:600;font-size:12px;margin-bottom:8px}
.bk-hover .hv-dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0}
.bk-hover dt{color:var(--muted);font-size:12px;padding-top:1px;white-space:nowrap}
.bk-hover dd{margin:0;min-width:0;overflow-wrap:anywhere}
.bk-hover .hv-foot{border-top:1px solid var(--line);margin-top:10px;padding-top:7px}
.bc-block:hover,.bc-block:focus-visible{filter:brightness(.95);outline:2px solid var(--navy);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.bk-hover{transition:none;transform:none}}
/* Menu samping: kelompok berkategori + bisa dilipat */
.sidebar-inner{padding:16px 12px;scrollbar-width:thin}
.sidebar .logo{padding:2px 8px 14px;margin-bottom:4px}
.nav-group{margin-top:10px}
.nav-group+.nav-group{padding-top:10px;border-top:1px solid var(--line-2)}
.nav-label{width:100%;display:flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;padding:4px 10px 6px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);text-align:left;border-radius:8px}
.nav-label:hover{color:var(--navy-2)}
.nav-label svg{width:14px;height:14px;margin-left:auto;transition:transform .18s ease}
.nav-group.closed .nav-label svg{transform:rotate(-90deg)}
.nav-group.closed .nav{display:none}
.grp-count{display:none;font-size:10.5px;font-weight:700;letter-spacing:0;background:var(--lime);color:var(--navy);border-radius:999px;padding:0 7px;line-height:17px}
.nav-group.closed .grp-count{display:inline-block}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{padding:8px 10px;font-size:14px;border-radius:10px;gap:12px}
.nav button svg{width:19px;height:19px}
.nav button.active::before{left:-12px}
.nav button[data-page="platform"]{color:var(--lime-ink)}
.nav button[data-page="platform"] svg{color:var(--lime-ink)}

.shell{transition:grid-template-columns .22s ease}
@media (min-width:901px){
  .shell.nav-collapsed{grid-template-columns:92px 1fr}
  .shell.nav-collapsed .sidebar-inner{overflow-x:hidden}
  .shell.nav-collapsed .logo{justify-content:center;padding:2px 0 14px}
  .shell.nav-collapsed .logo>div,.shell.nav-collapsed .org-select,.shell.nav-collapsed .nav-label,
  .shell.nav-collapsed .nav button>span:not(.count),.shell.nav-collapsed .user-line>div:last-child,.shell.nav-collapsed #pf-close{display:none}
  .shell.nav-collapsed .nav-group.closed .nav{display:flex}
  .shell.nav-collapsed .nav button{justify-content:center;padding:10px 0}
  .shell.nav-collapsed .nav .count{position:absolute;top:2px;right:6px;margin:0;font-size:10px;padding:0 5px;line-height:15px}
  .shell.nav-collapsed .user-line{justify-content:center;padding:6px 0 12px}
  .shell.nav-collapsed #logout{font-size:0;gap:0;padding-left:0;padding-right:0;justify-content:center}
}

/* ---- Desain: jadwal & absensi lebih rapi di HP (perbaikan/desain-prioritas-tinggi) ---- */
/* Hari ini = navy, supaya tidak tertukar dengan warna shift (mis. lime) */
.calendar thead th.today{background:var(--navy);color:#fff}
.calendar thead th.today small{color:var(--lime)}
/* Kolom nama diberi bayangan agar jelas sel di bawahnya sedang tergulir */
.calendar th.name,.calendar td.name{box-shadow:6px 0 8px -6px rgba(16,29,43,.18)}
/* Teks sel memakai warna shift yang digelapkan: kode lebih mudah dibedakan */
.day-cell.filled{color:color-mix(in srgb,var(--shift-color,var(--slate)) 55%,var(--navy));font-weight:700}
.legend-code{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 5px;margin-right:6px;border-radius:6px;font-size:11px;font-weight:700;
  background:color-mix(in srgb,var(--shift-color,var(--slate)) 16%,white);border:1px solid color-mix(in srgb,var(--shift-color,var(--slate)) 45%,white);
  color:color-mix(in srgb,var(--shift-color,var(--slate)) 55%,var(--navy))}
.schedule-legend span{display:inline-flex;align-items:center}

/* Menu "Lainnya" di toolbar jadwal: di desktop terbuka sebaris, di HP jadi daftar lipat */
.more-menu{position:relative}
.more-menu>summary{list-style:none}
.more-menu>summary::-webkit-details-marker{display:none}
.more-pop{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:901px){
  .cal-toolbar .more-menu{display:contents}
  .cal-toolbar .more-menu>summary{display:none}
}
@media (max-width:900px){
  .more-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;flex-direction:column;align-items:stretch;min-width:220px;padding:8px;
    background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(16,29,43,.14)}
  .more-pop .btn{justify-content:flex-start;border-color:transparent}
  .more-pop .btn:hover{background:var(--soft)}
  .cal-toolbar>#bulk-schedule{flex:1 1 100%}
  .cal-toolbar>#publish-month{flex:1}
}

/* Pilihan warna shift */
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatch-pick{width:30px;height:30px;border-radius:9px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.swatch-pick.on{border-color:var(--navy);box-shadow:inset 0 0 0 2px #fff}
.swatches input[type=color]{width:44px;min-height:34px;height:34px;padding:2px;border-radius:9px}

@media (max-width:640px){
  /* Jadwal: 6–7 hari muat di layar HP */
  .calendar th.name,.calendar td.name{min-width:88px;max-width:92px;padding:6px 6px}
  .calendar td.name strong{font-size:12.5px}
  .calendar td.name small{font-size:11px}
  .calendar th,.calendar td{padding:2px}
  .day-cell{width:32px;height:34px;border-radius:8px;font-size:11px}

  /* Kehadiran tim: setiap baris jadi kartu */
  .table-wrap:has(.att-table){overflow:visible;margin:0;padding:0}
  .att-table,.att-table tbody{display:block}
  .att-table thead{display:none}
  .att-table tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"staff inout" "date inout" "note note" "act act";gap:2px 12px;
    padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
  .att-table td{border:0;padding:0}
  .att-table td:nth-child(1){grid-area:staff}
  .att-table td:nth-child(2){grid-area:date}
  .att-table td:nth-child(3){grid-area:inout;text-align:right;font-weight:600}
  .att-table td:nth-child(4){grid-area:note;margin-top:6px}
  .att-table td:nth-child(5){grid-area:act;margin-top:8px;display:flex;gap:8px}
  .att-table td:nth-child(5) .btn{flex:1}
  .att-table td:nth-child(4) small:empty{display:none}
  .att-table td.empty{grid-column:1/-1}
}

/* ---- Desain staging: booking chart, ringkasan, harga (perbaikan/desain-staging) ---- */
/* Booking chart mengisi lebar kartu; hari ini navy (lime = tamu menginap) */
.bc-row .bc-grid{flex:1 1 auto}
.bc-day.today{background:var(--navy);color:#fff}
.bc-day.today small{color:var(--lime)}
.bc-cell.today{background:color-mix(in srgb,var(--navy) 6%,white)}
/* Blok sempit (1 malam di layar kecil): tampilkan inisial saja, nama lengkap di aria-label/hover */
.bc-block{container-type:inline-size}
.bc-ini{display:none;font-size:11.5px;font-weight:800;text-align:center}
@container (max-width:44px){
  .bc-block>span,.bc-block>small{display:none}
  .bc-ini{display:block}
}
/* Harga: plan nonaktif dilipat, titik stop sell */
.rt-inactive{margin-top:8px}
.rt-inactive summary{cursor:pointer;color:var(--muted);padding:6px 2px}
.rt-dot.stop{background:color-mix(in srgb,var(--red) 30%,white);border:1px solid color-mix(in srgb,var(--red) 50%,white)}
.rt-nav input[type=date]{min-height:34px;padding:5px 10px;font-size:13.5px}
/* Chip ringkasan: titik warna menggantikan emoji */
.dash-chip.red::before,.dash-chip.warn::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
@media (max-width:640px){
  /* Kehadiran di ringkasan: status pindah ke bawah nama, nama tidak terlipat */
  .dash-person{flex-wrap:wrap;row-gap:6px}
  .dash-person .grow{flex:1 1 calc(100% - 44px);min-width:0}
  .dash-right{flex-basis:100%;justify-content:flex-start;padding-left:40px}
  /* Kalender harga: lebih banyak hari terlihat */
  .rt-cell{width:40px;font-size:11px}
}

/* ---- Papan kamar: tenang bila normal, mencolok bila perlu tindakan ---- */
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--soft);color:var(--navy)}
.st-arrival{--st:#245BA8;--st-soft:#E4EEFB}
.rm-filters{display:flex;flex-wrap:wrap;gap:8px}
.rm-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:7px 13px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.rm-chip b{color:var(--navy)}
.rm-chip i{width:8px;height:8px;border-radius:50%;background:var(--st,var(--slate))}
.rm-chip.st-ready i{background:#B5C2B9}
.rm-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}.rm-chip.on b{color:#fff}
.rm-bar{display:flex;gap:2px;height:6px;border-radius:999px;overflow:hidden;margin:12px 0 2px}
.rm-bar i{background:var(--st)}
.rm-bar i.st-ready{background:#D3DBD5}
.rm-type-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rm-type-head h2{margin:0;font-size:17px}
.rm-type-head small{color:var(--muted)}
.rm-need{color:var(--red);font-weight:600}
.rm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin-top:12px}
.rm-tile{display:flex;flex-direction:column;align-items:stretch;gap:4px;text-align:left;min-height:72px;border:1px solid var(--line);background:var(--white);border-radius:12px;padding:10px 12px;font:inherit;color:var(--navy);cursor:pointer}
.rm-tile:hover{border-color:var(--slate)}
.rm-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.rm-name{font-size:16px;font-weight:800;letter-spacing:-.01em}
.rm-st{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.rm-st i{width:7px;height:7px;border-radius:50%;background:var(--st)}
.rm-tile.st-ready .rm-st i{background:#B5C2B9}
.rm-info{font-size:12px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.rm-info:empty{display:none}
.rm-note{font-size:11.5px;color:var(--muted)}.rm-note.warn{color:var(--warn);font-weight:600}
/* Perlu tindakan: berwarna */
.rm-tile.st-dirty,.rm-tile.st-cleaning{background:var(--st-soft);border-color:color-mix(in srgb,var(--st) 30%,white)}
.rm-tile.st-dirty .rm-st,.rm-tile.st-cleaning .rm-st{color:var(--st)}
.rm-tile.st-ooo{background:repeating-linear-gradient(135deg,#F1F2F4 0 8px,#E8EAEE 8px 16px);border-color:#D5D9DF}
/* Tamu: tiba hari ini = garis biru, pulang hari ini = garis oranye */
.rm-tile.g-arrival{border:1.5px solid #245BA8;box-shadow:inset 3px 0 0 #245BA8}
.rm-tile.g-arrival .rm-info b{color:#245BA8}
.rm-tile.g-late .rm-info b{color:var(--red)}
.rm-tile.g-departure .rm-info b{color:var(--warn)}
.rm-tile.g-in_house .rm-info{color:var(--navy-2)}
@media (max-width:640px){
  .rm-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .rm-tile{min-height:64px;padding:9px 10px}
  .rm-top{flex-direction:column;align-items:flex-start;gap:1px}
  .rm-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
  .rm-filters::-webkit-scrollbar{display:none}
  .rm-chip{flex:none}
  .rm-name{font-size:15px}
}
.rm-guest{display:block}
.rm-info .rm-guest:not(:first-child){margin-top:2px}
.rm-tile.g-arrival .rm-guest b{color:#245BA8}.rm-tile.g-departure .rm-guest b{color:var(--warn)}.rm-tile.g-late .rm-guest b{color:var(--red)}
.rm-note.who{color:var(--navy-2);font-weight:600}
/* Status pindah ke bawah nama bila ubin sempit (mis. "Dibersihkan") */
.rm-tile{container-type:inline-size}
@container (max-width:175px){.rm-top{flex-direction:column;align-items:flex-start;gap:1px}}
.bt-more summary{cursor:pointer;color:var(--muted);padding:8px 0 2px;border-top:1px solid var(--line-2)}
.bt-more[open] summary{display:none}

/* ---- Tugas: ringkasan progres + bagian kosong ringkas ---- */
.tk-sum{padding:16px 18px}
.tk-sum-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tk-sum-num{font-size:26px;font-weight:800;letter-spacing:-.02em}
.tk-sum-num small{font-size:16px;color:var(--muted);font-weight:700}
.tk-sum-chips{display:flex;gap:8px;flex-wrap:wrap}
.tk-sum-chips .rm-chip{cursor:default}
.rm-chip.st-ready-ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}.rm-chip.st-ready-ok i{background:var(--ok)}
.tk-progress{height:6px;border-radius:999px;background:var(--line-2);overflow:hidden;margin-top:12px}
.tk-progress i{display:block;height:100%;background:var(--ok);border-radius:999px}
.tk-sec{margin-top:14px}
.tk-sec .card-head small{display:block;margin-top:2px}

/* ---- Pilihan properti di header: panah tidak mepet, nama tidak terpotong kasar ---- */
.scope-select{-webkit-appearance:none;appearance:none;max-width:280px;padding-right:40px!important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101D2B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px}
@media (max-width:640px){.scope-select{padding-right:38px!important;background-position:right 14px center}}

/* ---- Laporan (reports.js) ---- */
.rp-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rp-range input[type=date]{width:auto;min-height:36px;padding:6px 10px;font-size:13.5px}
.rp-tabs{margin-bottom:12px}
.rp-hero{padding:18px}
.rp-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.rp-kpi{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.rp-kpi span{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.rp-kpi strong{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-kpi small{display:block;font-size:11.5px;color:var(--muted)}
.rp-kpi.main{background:var(--lime-soft);border-color:color-mix(in srgb,var(--lime) 60%,white)}
.rp-kpi.main strong{font-size:26px}
.rp-chart-head{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 8px}
.rp-chart{display:flex;align-items:flex-end;gap:3px;height:140px;padding-bottom:18px;position:relative}
.rp-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.rp-col i{display:block;background:color-mix(in srgb,var(--navy) 80%,white);border-radius:4px 4px 0 0;min-height:2px}
.rp-col.today i{background:var(--lime-ink)}
.rp-col small{position:absolute;bottom:-17px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--muted)}
.rp-two{margin-top:14px}
.rp-two .card h2{margin-bottom:8px}
.rp-list{display:grid}
.rp-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.rp-row:last-child{border-bottom:0}
.rp-row span{color:var(--muted)}
.rp-row.warn b{color:var(--warn)}.rp-row.red b,.rp-red{color:var(--red)}
.rp-table{font-size:13.5px}
.rp-table th.num,.rp-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-table tfoot td{font-weight:800;border-top:2px solid var(--line);background:var(--soft)}
.rp-share{white-space:nowrap;font-size:12.5px;color:var(--muted)}
.rp-share span{display:inline-block;width:70px;height:6px;border-radius:999px;background:var(--line-2);overflow:hidden;vertical-align:middle;margin-right:6px}
.rp-share i{display:block;height:100%;background:var(--navy)}
.rp-lock{color:var(--lime-ink);font-weight:800}
.rp-gh{display:flex;align-items:center;gap:8px;margin:16px 0 6px;font-size:15px}
@media (max-width:1100px){.rp-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .rp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rp-kpi.main{grid-column:1/-1}
  .rp-controls .rm-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px;width:calc(100% + 32px)}
  .rp-controls .rm-chip{flex:none}
  .rp-tabs{display:flex;overflow-x:auto;max-width:100%}
  .rp-tabs button{flex:none}
}
.rp-col em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);text-align:center;margin-bottom:3px}
#rp-props .petty-tabs button{white-space:nowrap}
.rp-date{white-space:nowrap}
/* Laporan R2: naik/turun di perbandingan & pace */
.rp-up{color:var(--ok)}.rp-down{color:var(--red)}
.rp-row.rp-up b{color:var(--ok)}.rp-row.rp-down b{color:var(--red)}
.rp-cmp th small{font-weight:500;font-size:11px}
/* Laporan R3: laba-rugi */
.rp-kpi.loss{background:var(--red-soft);border-color:#F1C7C4}.rp-kpi.loss strong{color:var(--red);font-size:26px}
.rp-pnl .rp-gh{margin:12px 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.rp-pnl .rp-row.sub{padding:6px 0 6px 18px;font-size:13px}.rp-pnl .rp-row.sub b{font-weight:600}
.rp-pnl .rp-row.total{border-top:2px solid var(--line);font-weight:800}.rp-pnl .rp-row.total span{color:inherit}
.rp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
@media (max-width:640px){.rp-kpi.loss{grid-column:1/-1}}

/* Harga per malam (bookings.js) */
.bk-split { display: flex; gap: 6px; align-items: center; }
.bk-split input { flex: 1; min-width: 0; }
.bk-nights { margin-top: 6px; }
.bk-nights summary { cursor: pointer; }
.bk-night-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-top: 6px; }
.bk-night { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.bk-night input { width: 100%; }

/* Detail booking: kartu kamar & jarak antar bagian seragam */
.bk-h { font-size: 16px; margin: 24px 0 10px; }
.bk-after { margin-top: 10px; }
.bk-rooms { display: flex; flex-direction: column; gap: 10px; }
.bk-room-card { border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; }
.bk-rc-head { display: flex; align-items: center; gap: 10px; }
.bk-rc-head .grow { flex: 1; min-width: 0; }
.bk-rc-head select { width: auto; min-width: 120px; }
.bk-rc-meta { margin-top: 4px; }
.bk-room-card .bk-nights { margin-top: 8px; }
.bk-room-card .bk-stay { gap: 8px; margin-top: 12px; padding: 12px 0 0; border-bottom: 0; border-top: 1px solid var(--line-2); }
.bk-history { margin-top: 20px; }
.bk-history > div { margin-top: 6px; }
.bk-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.bk-sum > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--line-2); }
.bk-sum span { font-size: 12px; color: var(--muted); }
.bk-sum strong { font-size: 15px; white-space: nowrap; }
.bk-sum .due strong { color: var(--red); }
@media (max-width: 640px) {
  .bk-room-card .bk-stay .badge:first-child { flex: 0 0 auto; margin-right: 100%; }   /* label tetap selebar teks, tombol pindah ke baris berikutnya */
  .bk-room-card .bk-stay .btn { flex: 1 1 auto; }
  .bk-sum strong { font-size: 14px; }
}

/* Channex (channex.js) */
.cx-status .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.cx-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--line-2); }
.cx-grid .cx-bad { color: var(--red); }
.cx-err { margin-top: 10px; white-space: pre-wrap; }
.cx-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
@media (max-width: 640px) { .cx-pair { grid-template-columns: 1fr; gap: 6px; } }

/* Masalah booking OTA (Channex rencana B) */
.bc-block.issue { outline: 2px dashed var(--red); outline-offset: -2px; }
.cx-issue { margin-top: 10px; border-color: var(--red); }
.cx-issue .bk-after { margin-top: 8px; }

/* Oumah Console & pilih ruang */
.space-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:18px}
.space-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--navy)}
.space-card strong{display:flex;align-items:center;gap:8px;font-size:16px}
.space-card small{color:var(--muted)}
.space-card:hover,.space-card:focus-visible{border-color:var(--navy-3)}
.space-card.console{background:var(--navy);color:var(--white);border-color:var(--navy)}
.space-card.console small{color:var(--lime)}
.console-shell .sidebar-inner{background:var(--navy);border-color:var(--navy);color:var(--white)}
.console-shell .sidebar .logo{border-bottom-color:var(--navy-3)}
.console-shell .sidebar .logo-word,.console-shell .sidebar .logo small,.console-shell .user-line strong{color:var(--white)}
.console-shell .user-line small{color:var(--lime)}
.console-shell .nav button{color:#C9D2DA}
.console-shell .nav button.active{background:var(--navy-2);color:var(--lime)}
.console-shell .nav button.active::before{background:var(--lime)}
.console-shell .sidebar-bottom{border-top-color:var(--navy-3)}
.console-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;background:var(--navy);color:var(--lime);padding:4px 10px;border-radius:999px}
.team-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--navy);color:var(--white);padding:10px 14px;border-radius:14px;margin-bottom:12px;font-size:14px}
.team-bar span{display:inline-flex;align-items:center;gap:6px}
.team-bar svg{width:18px;height:18px}
.space-card svg{width:22px;height:22px;flex:none}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat-tile{padding:16px 18px}
.stat-tile small{display:block;color:var(--muted);font-size:13px}
.stat-tile strong{display:block;font-size:28px;margin-top:4px}
.stat-tile.warn strong{color:var(--warn)}
.stat-tile.red strong{color:var(--red)}
@media (max-width:900px){.stat-grid{grid-template-columns:1fr 1fr}}
.console-shell .nav button svg,.console-shell .nav button.active svg{color:inherit;stroke:currentColor}
.team-bar.onboarding{background:var(--lime-soft);color:var(--navy);border:1px solid var(--lime)}
.ob-steps{list-style:none;margin:0;padding:0}
.ob-step{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ob-step:last-child{border-bottom:0}
.ob-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--soft);color:var(--muted);flex:none}
.ob-step.done .ob-num{background:var(--lime);color:var(--navy)}
.ob-body{flex:1;min-width:0}
.ob-body strong{display:block}
.ob-body small{color:var(--muted)}
.ob-actions:not(:empty){margin-top:8px}

/* Inbox OTA */
.ib-wrap{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:12px;align-items:start}
.ib-list{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow-y:auto}
.ib-thread{display:block;width:100%;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;font:inherit;color:inherit}
.ib-thread.on{border-color:var(--navy);box-shadow:var(--shadow)}
.ib-thread.unread strong{font-weight:800}
.ib-meta{display:flex;align-items:center;gap:6px;margin:4px 0 2px;flex-wrap:wrap}
.ib-dot{margin-left:auto;background:var(--navy);color:var(--white);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.ib-preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-conv{display:flex;flex-direction:column;min-height:360px;max-height:70vh}
.ib-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ib-back{display:none}
.ib-msgs{flex:1;overflow-y:auto;padding:12px 2px;display:flex;flex-direction:column;gap:10px}
.ib-msg{display:flex;flex-direction:column;max-width:80%}
.ib-msg.in{align-self:flex-start}
.ib-msg.out{align-self:flex-end;align-items:flex-end}
.ib-msg.system{align-self:center;align-items:center}
.ib-bubble{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.ib-msg.out .ib-bubble{background:var(--lime-soft);border-color:var(--lime)}
.ib-msg.system .ib-bubble{background:transparent;font-size:13px;color:var(--muted)}
.ib-reply{display:flex;gap:8px;align-items:flex-end;padding-top:10px;border-top:1px solid var(--line)}
.ib-reply textarea{flex:1;resize:vertical;min-height:44px}
@media (max-width:760px){
  .ib-wrap{grid-template-columns:1fr}
  .ib-wrap .ib-conv{display:none}
  .ib-wrap.open .ib-list{display:none}
  .ib-wrap.open .ib-conv{display:flex;max-height:none}
  .ib-back{display:inline-flex}
  .ib-msg{max-width:92%}
}
.ib-att{display:block;margin-top:4px;white-space:normal}
/* Ringkasan: angka uang booking */
.dash-money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 4px}
.dash-money div{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:6px 9px;min-width:0}
.dash-money span{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
.dash-money b{font-size:14px;white-space:nowrap}
/* Ringkasan: donat okupansi & batang 7 hari */
.dash-bk-top{display:flex;align-items:center;gap:14px}
.dash-bk-info{flex:1;min-width:0}
.dash-bk-info .dash-legend{margin:4px 0 2px}
.dash-donut{width:68px;height:68px;flex:none;transform:rotate(-90deg)}
.dash-donut circle{fill:none;stroke-width:4.2}
.dash-donut .free{stroke:var(--line)}
.dash-donut .occ{stroke:var(--navy)}
.dash-donut .ooo{stroke:var(--warn)}
.dash-donut text{transform:rotate(90deg);transform-origin:18px 18px;font-size:8.5px;font-weight:800;fill:var(--navy)}
.dash-legend .st-occupied i{background:var(--navy)}
.dash-legend .st-free i{background:var(--line)}
.dash-legend .st-ooo i{background:var(--warn)}
.dash-next7{margin-top:12px}
.dash-next7-head{font-size:12px;color:var(--muted);margin-bottom:2px}
.dash-bars{display:flex;align-items:flex-end;gap:6px;height:118px;padding:0 0 18px}
.dash-bar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.dash-bar i{display:block;background:color-mix(in srgb,var(--navy) 80%,white);border-radius:5px 5px 0 0;min-height:2px}
.dash-bar.low i{background:color-mix(in srgb,var(--warn) 55%,white)}
.dash-bar.today i{background:var(--lime-ink)}
.dash-bar em{display:block;text-align:center;font-style:normal;font-size:10.5px;font-weight:700;color:var(--navy-2);line-height:14px;margin-bottom:2px}
.dash-bar small{position:absolute;bottom:-17px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
/* Ringkasan: kolom tanpa ruang kosong — kartu terakhir tiap kolom memanjang */
.cols-fill{align-items:stretch}
.cols-fill>.stack{display:flex;flex-direction:column}
.cols-fill .dash-fill{flex:1 1 auto}
/* Asisten AI */
.ai-meter{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ai-meter .bar{margin-top:8px}
.ai-draft{width:100%;font:inherit;line-height:1.5}
.ai-answer{white-space:pre-wrap;line-height:1.55}
.ai-out{margin-top:12px}
.ai-facts{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.ai-facts summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--navy-2)}
.ai-fact{margin-top:10px;font-size:13.5px}
.ai-type{margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.ai-type .small{margin-top:3px}
.ai-cal{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ai-cal span{display:flex;flex-direction:column;align-items:center;min-width:44px;padding:4px 6px;border-radius:8px;background:var(--line-2);font-size:11px}
.ai-cal span b{font-size:13px}
.ai-cal span.full{background:#FBE3E1;color:var(--red)}
.ai-team{margin-top:12px;border-style:dashed}
.ai-topup{display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:center;margin-top:8px}
@media (max-width:640px){.ai-topup{grid-template-columns:90px 1fr}.ai-topup button{grid-column:1/-1}}
/* Booking Engine — pengaturan (web/engine.js) */
.eng h3{margin:22px 0 8px;font-size:17px}
.eng label{display:block}
.eng-two{display:grid;gap:12px}
@media(min-width:720px){.eng-two{grid-template-columns:1fr 1fr}}
.eng-pair{display:grid;gap:8px}
@media(min-width:720px){.eng-pair{grid-template-columns:1fr 1fr}}
.eng-pair label{font-size:12px;color:var(--muted);font-weight:500}
.eng-chips{display:flex;flex-wrap:wrap;gap:8px}
.eng-chip{display:inline-flex!important;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer;background:var(--white)}
.eng-chip:has(input:checked){background:var(--lime-soft);border-color:var(--lime-ink)}
.eng-cover{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--soft);overflow:hidden;display:grid;place-items:center;margin-bottom:8px}
.eng-cover img{width:100%;height:100%;object-fit:cover}
.eng-logo{height:64px;display:flex;align-items:center;margin-bottom:8px}
.eng-logo img{max-height:64px;max-width:180px;object-fit:contain}
.eng-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:8px 0 12px}
.eng-thumbs figure{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--soft)}
.eng-thumbs img{width:100%;height:100%;object-fit:cover}
.eng-thumbs figure button{position:absolute;top:4px;right:4px;padding:2px 8px}
.eng-add{display:grid!important;place-items:center;aspect-ratio:4/3;border:1px dashed var(--slate);border-radius:var(--radius-sm);cursor:pointer;font-size:14px;color:var(--muted)}
.eng-plan-type{font-weight:600;margin:14px 0 4px}
.eng-plan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line-2)}