:root{
  --orange:#F5911E; --orange-l:#f6a94b; --green:#22C55E; --green-d:#16a34a;
  --ink:#1f2937; --ink-6:rgba(31,41,55,.6); --ink-5:rgba(31,41,55,.5); --ink-45:rgba(31,41,55,.45);
  --line:rgba(31,41,55,.1); --glass:rgba(255,255,255,.55); --glass-brd:rgba(255,255,255,.7);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:#e6efe0;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--green-d);text-decoration:none}
a:hover{color:#15803d}
input::placeholder,textarea::placeholder{color:var(--ink-45)}
select,input,textarea{font-family:inherit}
table{border-collapse:collapse;width:100%}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(31,41,55,.16);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(31,41,55,.28)}
@keyframes floatBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,-42px) scale(1.1)}}
@keyframes floatBlob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-42px,32px) scale(1.14)}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes pulseAmber{0%{box-shadow:0 0 0 0 rgba(245,145,30,.5)}70%{box-shadow:0 0 0 8px rgba(245,145,30,0)}100%{box-shadow:0 0 0 0 rgba(245,145,30,0)}}
@keyframes pulseRed{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(320%) skewX(-20deg)}}

/* ===== SHELL ===== */
.app-shell{display:flex;flex-direction:column;height:100vh;width:100%;overflow:hidden;position:relative;
  background:radial-gradient(1200px 720px at 8% -5%, rgba(255,214,150,.85), transparent 52%),
    radial-gradient(1150px 820px at 96% 108%, rgba(120,200,120,.9), transparent 55%),
    radial-gradient(900px 620px at 62% 40%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(150deg,#dcebd3 0%,#eaf2e6 45%,#f3f0e6 100%)}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.blob1{top:-140px;left:6%;width:420px;height:420px;background:radial-gradient(circle,rgba(245,145,30,.4),transparent 70%);filter:blur(30px);animation:floatBlob 17s ease-in-out infinite}
.blob2{bottom:-160px;right:4%;width:480px;height:480px;background:radial-gradient(circle,rgba(34,197,94,.42),transparent 70%);filter:blur(34px);animation:floatBlob2 21s ease-in-out infinite}
.blob3{top:30%;left:44%;width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%);filter:blur(30px)}

/* ===== TOP NAV (satu-satunya bar chrome) ===== */
/* Slot kiri memuat logo + breadcrumb & judul halaman — dulu nama brand, dan
   dulu pula ada context bar kedua di bawahnya. Keduanya kini satu baris. */
.topnav{position:relative;z-index:30;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 22px 10px 18px;background:rgba(255,255,255,.52);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 6px 24px rgba(70,90,60,.08)}
.brand{display:flex;align-items:center;gap:12px;padding-right:14px;min-width:0;flex:0 1 auto}
/* Logo resmi berbentuk lockup horizontal — beri wadah memanjang agar wordmark tetap terbaca. */
.brand-logo{height:38px;border-radius:11px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;padding:5px 9px;flex-shrink:0;box-shadow:0 5px 15px rgba(70,90,60,.16)}
.brand-logo img{height:100%;width:auto;object-fit:contain;display:block}
.brand-txt{min-width:0}
.nav{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:3px 2px;flex-wrap:wrap;min-width:0}
/* Status WA + avatar, menempel di kanan menu Admin. */
.chrome-acts{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav-group{position:relative;flex-shrink:0}
.nav-btn{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:11px;border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-6);background:transparent;transition:background .16s,color .16s}
.nav-btn:hover{background:rgba(31,41,55,.06)}
.nav-btn .ni{display:flex;flex-shrink:0;color:var(--ink-5)}
.nav-btn.on{color:var(--ink)}
.nav-btn.on .ni{color:var(--orange)}
.nav-btn.active-parent{background:rgba(245,145,30,.16)}
.nav-btn.open{background:rgba(31,41,55,.08)}
.caret{transition:transform .16s}
.nav-btn.open .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:36;min-width:238px;padding:8px;border-radius:16px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 24px 50px rgba(60,80,50,.24);animation:dropIn .16s ease both}
.drop-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;cursor:pointer;font-size:13px;font-weight:600;color:rgba(31,41,55,.8);transition:background .16s,color .16s}
.drop-item:hover{background:rgba(31,41,55,.06);color:var(--ink)}
.drop-item .ni{display:flex;flex-shrink:0;color:var(--ink-5)}
.drop-item.active{color:#9a5b0a;background:linear-gradient(90deg,rgba(245,145,30,.18),rgba(245,145,30,.04))}
.drop-item.active .ni{color:var(--orange)}
.drop-item .dname{flex:1;white-space:nowrap}
.badge-num{background:var(--orange);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:9px;padding:0 5px}
.nav-scrim{position:fixed;inset:0;z-index:29}

/* ===== IDENTITAS HALAMAN (di dalam top nav) ===== */
.crumb{font-size:10.5px;color:var(--ink-45);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-title{margin:1px 0 0;font-size:17.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-title .hl{color:var(--orange)}
.wa-pill{display:flex;align-items:center;gap:9px;border-radius:12px;padding:8px 13px;cursor:pointer;border:1px solid transparent}
.wa-pill:hover{filter:brightness(.97)}
.wa-pill .wd{width:9px;height:9px;border-radius:50%}
.wa-pill .wt{font-size:12.5px;font-weight:700}
/* ===== LONCENG NOTIFIKASI (kiri avatar) ===== */
.notif-wrap{position:relative;display:flex;align-items:center}
.notif-btn{position:relative;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;color:var(--ink-6);border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.5);transition:background .16s,color .16s}
.notif-btn:hover{background:rgba(255,255,255,.85);color:var(--ink)}
.notif-btn.open{background:rgba(31,41,55,.08);color:var(--ink)}
/* Menyala oranye saat ada yang belum dibaca — lonceng diam terlihat sama
   dengan tombol biasa, dan memang seharusnya begitu. */
.notif-btn.has{color:var(--orange)}
.notif-dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--orange);border:2px solid rgba(255,255,255,.9);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
/* Wajib: `display:flex` di atas mengalahkan aturan [hidden] bawaan browser,
   jadi tanpa baris ini angka merahnya tidak pernah bisa disembunyikan. */
.notif-dot[hidden]{display:none}
.notif-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:352px;max-width:calc(100vw - 32px);border-radius:16px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 24px 50px rgba(60,80,50,.24);animation:dropIn .16s ease both;overflow:hidden}
.nm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px 11px;border-bottom:1px solid rgba(31,41,55,.08)}
.nm-title{font-size:14px;font-weight:800;color:var(--ink)}
.nm-sub{font-size:11px;color:var(--ink-5);margin-top:1px}
.nm-all{border:0;background:transparent;padding:6px 8px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--green-d);white-space:nowrap}
.nm-all:hover{background:rgba(34,197,94,.1)}
.nm-all[disabled]{color:var(--ink-45);cursor:default;background:transparent}
/* Daftarnya bergulir sendiri: header & tombol "tandai semua" harus tetap
   terjangkau walau notifikasinya banyak. */
.nm-list{max-height:min(420px,60vh);overflow-y:auto;padding:6px}
.nm-item{display:flex;gap:11px;width:100%;text-align:left;padding:10px 11px;border:0;border-radius:12px;background:transparent;font-family:inherit;color:inherit;transition:background .16s}
.nm-item:hover{background:rgba(31,41,55,.05)}
button.nm-item{cursor:pointer}
button.nm-item[disabled]{cursor:default}
.nm-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(31,41,55,.06);color:var(--ink-5)}
/* Belum dibaca ditandai dua kali — latar hangat DAN titik oranye — supaya
   tetap terbaca oleh mata yang sulit membedakan warna. */
.nm-item.unread{background:rgba(245,145,30,.09)}
.nm-item.unread:hover{background:rgba(245,145,30,.15)}
.nm-item.unread .nm-ico{background:rgba(245,145,30,.16);color:var(--orange)}
.nm-body{flex:1;min-width:0}
.nm-t{display:flex;align-items:flex-start;gap:7px}
.nm-t b{flex:1;font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.nm-new{flex-shrink:0;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--orange)}
.nm-d{display:block;font-size:11.5px;color:var(--ink-6);margin-top:2px;line-height:1.4;overflow-wrap:anywhere}
.nm-w{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-45);margin-top:5px}
.nm-w .badge{font-size:9.5px;padding:2px 8px}
.nm-empty{padding:30px 18px;text-align:center}
.nm-empty .ni{display:flex;justify-content:center;color:var(--ink-45);margin-bottom:9px}
.nm-empty-t{font-size:12.5px;font-weight:700;color:var(--ink-6)}
.nm-empty-d{font-size:11.5px;color:var(--ink-45);margin-top:3px}

/* Isinya ikon kotak-empat (ICONS.grid), bukan inisial — lihat app.js. */
.avatar{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--green),var(--green-d));display:flex;align-items:center;justify-content:center;color:#fff;border:0;padding:0;cursor:pointer;font-family:inherit;transition:filter .16s,box-shadow .16s}
.avatar:hover{filter:brightness(1.06);box-shadow:0 6px 16px rgba(34,197,94,.34)}
.avatar-wrap{position:relative;display:flex;align-items:center;gap:10px;padding-left:6px;border-left:1px solid var(--line)}
.user-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;min-width:196px;max-width:280px;padding:7px;border-radius:14px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 20px 44px rgba(60,80,50,.24);animation:dropIn .16s ease both}
/* Siapa yang sedang login. Tombol akun hanya ikon kotak-empat, jadi di sinilah
   satu-satunya tempat nama & role itu terbaca. Nama panjang dibiarkan patah
   ketimbang meluber keluar menu. */
.um-head{display:flex;flex-direction:column;gap:2px;padding:9px 12px 11px;margin-bottom:5px;border-bottom:1px solid var(--line)}
.um-head b{font-size:13px;font-weight:800;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.um-head em{font-size:11px;font-style:normal;font-weight:600;color:var(--ink-5)}
.um-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:#dc2626;transition:background .16s}
.um-item:hover{background:rgba(239,68,68,.08)}
.um-item .ni{display:flex;color:#dc2626}

/* ===== FLOATING TOGGLE ===== */
.floating-toggle{position:absolute;bottom:22px;left:22px;z-index:45;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--ink);opacity:.28;transition:opacity .22s,transform .22s,box-shadow .22s;box-shadow:0 8px 22px rgba(70,90,60,.18)}
.floating-toggle:hover{opacity:1;transform:scale(1.06);box-shadow:0 12px 30px rgba(70,90,60,.3)}
.app-shell.chrome-hidden .topnav{display:none}

/* ===== CONTENT ===== */
.hx-content{position:relative;z-index:2;flex:1;overflow-y:auto;padding:22px 26px 40px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;animation:riseIn .4s ease both}
.page-head h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.page-head .ph-sub{font-size:12.5px;color:var(--ink-6);margin-top:4px}
.panel{border-radius:22px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 16px 40px rgba(70,90,60,.14);padding:20px 22px}
.grid-2{display:grid;gap:16px}
.section-title{font-size:15px;font-weight:800;color:var(--ink)}
.section-sub{font-size:11.5px;color:var(--ink-5);margin-top:2px}

/* buttons */
.btn-primary{display:inline-flex;align-items:center;gap:8px;border:0;background:linear-gradient(135deg,var(--orange),var(--orange-l));color:#fff;font-family:inherit;font-weight:800;font-size:13px;padding:12px 20px;border-radius:13px;cursor:pointer;box-shadow:0 8px 20px rgba(245,145,30,.35)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-green{border:0;background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;font-family:inherit;font-weight:800;font-size:13px;padding:11px 18px;border-radius:11px;cursor:pointer;box-shadow:0 8px 18px rgba(34,197,94,.3)}
.btn-green:hover{filter:brightness(1.05)}
.btn-ghost{border:1px solid rgba(31,41,55,.16);background:transparent;color:rgba(31,41,55,.7);font-family:inherit;font-weight:700;font-size:13px;padding:11px 20px;border-radius:12px;cursor:pointer}
.btn-red{border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#dc2626;font-family:inherit;font-weight:800;font-size:13.5px;padding:13px;border-radius:13px;cursor:pointer}

/* stat tiles */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px}
.stat-card{border-radius:22px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 16px 40px rgba(70,90,60,.14);padding:18px 20px;transition:transform .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(70,90,60,.2)}
.stat-chip{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.stat-num{font-size:33px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stat-label{font-size:12px;color:var(--ink-5);margin-top:5px;font-weight:600}
.stat-delta{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px}
.stat-subs{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.stat-subs .sub{flex:1}
.stat-subs .sv{font-size:15px;font-weight:800;color:var(--ink)}
.stat-subs .sl{font-size:10.5px;color:var(--ink-45);margin-top:2px}
.mini-stat{border-radius:22px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(22px);padding:18px 20px}
.mini-stat .ms-l{font-size:12px;color:var(--ink-5);font-weight:600}
.mini-stat .ms-v{font-size:30px;font-weight:800;margin-top:6px;letter-spacing:-.02em}

/* filters / forms */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end}
.field label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-6);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border-radius:11px;border:1px solid rgba(31,41,55,.14);background:rgba(255,255,255,.7);color:var(--ink);font-size:13px;outline:none}
.field textarea{min-height:74px;resize:vertical}
.upload{border:1.5px dashed rgba(31,41,55,.2);border-radius:11px;padding:16px;text-align:center;font-size:12px;color:var(--ink-5);background:rgba(255,255,255,.4)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.col-full{grid-column:1/-1}

/* asset cards */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.asset-card{border-radius:22px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 16px 40px rgba(70,90,60,.14);overflow:hidden;transition:transform .2s,box-shadow .2s}
.asset-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(70,90,60,.2)}
.asset-photo{position:relative;height:130px;background:repeating-linear-gradient(45deg,#e6ede0,#e6ede0 9px,#dce6d4 9px,#dce6d4 18px);display:flex;align-items:center;justify-content:center}
.asset-photo .ap-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-45)}
.asset-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.asset-photo .ap-initials{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff;background:linear-gradient(135deg,var(--green),var(--green-d));
  box-shadow:0 8px 20px rgba(34,197,94,.32)}
/* Gradasi tipis agar badge status tetap terbaca di atas foto terang. */
.asset-photo.has-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,41,55,.3),rgba(31,41,55,0) 48%)}
.asset-badge{position:absolute;top:10px;right:10px;z-index:2}
/* Di atas foto, badge butuh dasar solid — latar bertint saja hilang tertelan gambar. */
.asset-photo.has-photo .badge{background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(31,41,55,.3)}
.asset-body{padding:15px 16px 16px}
.asset-title{font-size:14.5px;font-weight:800;color:var(--ink)}
.asset-meta{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.asset-meta .mrow{display:flex;justify-content:space-between;font-size:12px}
.asset-meta .mk{color:var(--ink-5)}
.asset-meta .mv{color:var(--ink);font-weight:600}
.asset-card .btn-choose{width:100%;margin-top:14px;border:0;background:linear-gradient(135deg,var(--orange),var(--orange-l));color:#fff;font-family:inherit;font-weight:800;font-size:12.5px;padding:10px;border-radius:11px;cursor:pointer}
.asset-card .btn-choose:hover{filter:brightness(1.05)}

/* table */
.table-panel{border-radius:22px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 16px 40px rgba(70,90,60,.14);overflow:hidden}
.table-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px}
.table-meta{font-size:11.5px;color:var(--ink-5)}
.table-wrap{overflow-x:auto}
table thead tr{border-top:1px solid rgba(31,41,55,.08);border-bottom:1px solid rgba(31,41,55,.08)}
table th{text-align:left;padding:11px 16px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-5);white-space:nowrap}
table td{padding:12px 16px;font-size:12.5px;color:var(--ink);white-space:nowrap;vertical-align:middle}
table tbody tr{border-bottom:1px solid rgba(31,41,55,.06)}
table tbody tr:hover{background:rgba(255,255,255,.4)}
.mono{font-family:'JetBrains Mono',monospace}
.b{font-weight:700}
.muted{color:var(--ink-5)}
.cellphoto{width:46px;height:34px;border-radius:8px;overflow:hidden;flex-shrink:0;background:repeating-linear-gradient(45deg,#e6ede0,#e6ede0 6px,#dce6d4 6px,#dce6d4 12px)}
.cellphoto img{width:100%;height:100%;object-fit:cover;display:block}
/* Logo merk: tampil utuh di atas dasar putih, bukan di-crop. */
.cellphoto.contain{background:#fff;border:1px solid rgba(31,41,55,.08);padding:3px}
.cellphoto.contain img{object-fit:contain}
.cellphoto.is-initials{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--green),var(--green-d))}
.avatar-cell{display:flex;align-items:center;gap:9px}
.avatar-sm{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--green),var(--green-d))}
.avatar-sm.orange{background:linear-gradient(135deg,var(--orange),var(--orange-l))}
.acts{display:flex;gap:6px}
.act{width:30px;height:30px;border-radius:9px;border:1px solid rgba(31,41,55,.1);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.5);color:var(--ink-6)}
.act:hover{filter:brightness(.96)}
.act-g{color:#15803d;background:rgba(34,197,94,.14)}
.act-r{color:#dc2626;background:rgba(239,68,68,.1)}
.act-b{color:#0369a1;background:rgba(56,189,248,.14)}
.act-o{color:#c2710c;background:rgba(245,145,30,.14)}

/* badges */
.badge{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;display:inline-block;white-space:nowrap}
.bd-g{color:#15803d;background:rgba(34,197,94,.16)}
.bd-b{color:#0369a1;background:rgba(56,189,248,.18)}
.bd-o{color:#c2710c;background:rgba(245,145,30,.16)}
.bd-a{color:#b45309;background:rgba(245,158,11,.18)}
.bd-r{color:#dc2626;background:rgba(239,68,68,.14)}
.bd-n{color:var(--ink-6);background:rgba(31,41,55,.08)}

/* dashboard extras */
.wa-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;flex-wrap:wrap;animation:riseIn .5s ease both;margin-bottom:20px}
.wa-ico{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--green),var(--green-d));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 22px rgba(34,197,94,.35)}
.wa-sheen{position:relative;overflow:hidden}
.wa-sheen span.sh{position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:sheen 3.4s ease infinite}
.legend{display:flex;gap:14px}
.legend .lg{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(31,41,55,.65)}
.legend .sq{width:10px;height:10px;border-radius:3px}
.sched-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:15px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65)}
.sched-row:hover{background:rgba(255,255,255,.8)}
.sched-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.live{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green-d)}
.live .lp{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulseDot 1.8s infinite}
.gauge{position:relative;width:52px;height:52px;border-radius:50%;flex-shrink:0}
.gauge .inner{position:absolute;inset:5px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.humbar{flex:1;height:6px;border-radius:4px;background:rgba(31,41,55,.1);overflow:hidden}
.humbar>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#0ea5e9,var(--green))}
.slabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-45)}

/* ===== PETA (OpenLayers + basemap OpenStreetMap) =====
   Menggantikan kisi placeholder yang dulu dipakai halaman GPS: petanya kini
   sungguhan, bisa di-zoom dan digeser. Dipakai GPS Tracking & Lokasi Driver. */
.ol-box{position:relative;min-height:420px;border-radius:22px;overflow:hidden;
  border:1px solid var(--glass-brd);box-shadow:0 16px 40px rgba(70,90,60,.1);background:#e7eee1}
.ol-map{position:absolute;inset:0}
/* Kotak abu kosong tidak menjelaskan apa-apa; katakan saja apa yang terjadi. */
.ol-empty,.ol-map.ol-off .ol-msg{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:2;
  max-width:88%;padding:9px 15px;border-radius:20px;text-align:center;
  font-size:11.5px;font-weight:600;color:var(--ink-6);
  background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(70,90,60,.16)}
.ol-map.ol-off{display:flex;align-items:center;justify-content:center}
.ol-map.ol-off .ol-msg{position:static;transform:none}

/* Keterangan yang mengikuti kursor di atas pin. */
.ol-tip{display:none;min-width:150px;max-width:230px;padding:8px 11px;border-radius:11px;
  font-size:11px;line-height:1.45;color:var(--ink);pointer-events:none;
  background:rgba(255,255,255,.97);box-shadow:0 8px 22px rgba(70,90,60,.22)}
.ol-tip b{display:block;font-size:12px;font-weight:800}
.ol-tip span{display:block;color:var(--ink-6)}
.ol-tip em{display:block;margin-top:2px;font-style:normal;font-size:10px;color:var(--ink-45)}

/* Tombol zoom & atribusi OSM disesuaikan dengan sistem kaca. */
.ol-box .ol-zoom{top:12px;left:12px;gap:4px;display:flex;flex-direction:column}
.ol-box .ol-control button{width:30px;height:30px;border-radius:9px;font-size:17px;font-weight:700;
  background:rgba(255,255,255,.92);color:var(--ink-6);box-shadow:0 3px 10px rgba(70,90,60,.18)}
.ol-box .ol-control button:hover,.ol-box .ol-control button:focus{background:#fff;color:var(--orange)}
.ol-box .ol-attribution{border-radius:11px 0 0 0;background:rgba(255,255,255,.86);font-size:10px}
.ol-box .ol-attribution ul{color:var(--ink-45);text-shadow:none}

/* endpoint code */
.endpoint{font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.7;background:#0f1b12;color:#a7f3c8;border-radius:14px;padding:16px 18px;overflow-x:auto}
.endpoint .m{color:#F5911E}
.endpoint .h{color:#7c9a86}
.endpoint .bd{color:#e6efe0}

@media (max-width:1024px){ .grid-2.cols{grid-template-columns:1fr !important} }
@media (max-width:1100px){
  /* Satu bar memuat identitas halaman + 8 grup menu + 4 tombol; begitu sempit,
     pecah jadi dua baris: identitas di atas, menu & tombol di bawahnya. */
  .topnav{flex-wrap:wrap;gap:9px;padding:10px 18px}
  .brand{flex:1 1 100%;padding-right:0}
  .nav{order:2;justify-content:flex-start}
  .chrome-acts{order:3;margin-left:auto}
}
@media (max-width:760px){
  .topnav{padding:10px 14px}
  .hx-content{padding:16px 14px 40px}
}
@media (max-width:460px){ .ctx-title{font-size:16px} }

/* ===== FLASH BANNERS ===== */
.flash{display:flex;align-items:center;gap:10px;padding:12px 16px;margin-bottom:18px;border-radius:14px;font-size:13px;font-weight:600;animation:riseIn .35s ease both}
.flash svg{flex-shrink:0}
.flash-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#15803d}
.flash-err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.32);color:#b91c1c}
.flash-warn{background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.4);color:#b45309}

/* ===== DIALOG (glass modal untuk form Tambah/Edit) ===== */
dialog.hx-dialog{border:0;padding:0;background:transparent;max-width:min(600px,94vw);width:100%;color:var(--ink)}
dialog.hx-dialog::backdrop{background:rgba(31,41,55,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dialog-card{border-radius:22px;border:1px solid var(--glass-brd);background:rgba(255,255,255,.86);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);box-shadow:0 26px 60px rgba(60,80,50,.28);overflow:hidden}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.dialog-head h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.dialog-x{width:34px;height:34px;border-radius:10px;border:0;background:rgba(31,41,55,.06);color:var(--ink-6);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.dialog-x:hover{background:rgba(31,41,55,.12)}
.dialog-body{padding:20px 22px}
.dialog-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line);background:rgba(255,255,255,.4)}

/* Isi dialog "Lihat Detail" — dua kolom label/nilai, melipat jadi satu kolom
   di layar sempit. Daftarnya bergulir sendiri supaya kepala & kaki dialog
   tetap terlihat pada reservasi yang pesertanya banyak. */
.detail-list{margin:0;display:grid;grid-template-columns:minmax(96px,148px) 1fr;gap:1px 16px;
  max-height:min(56vh,460px);overflow-y:auto}
.detail-list dt{font-size:11.5px;font-weight:700;color:var(--ink-5);padding:8px 0;line-height:1.5}
.detail-list dd{margin:0;font-size:13px;font-weight:600;color:var(--ink);padding:8px 0;line-height:1.5;
  overflow-wrap:anywhere;border-bottom:1px solid rgba(31,41,55,.06)}
.detail-list dt+dd{border-bottom:1px solid rgba(31,41,55,.06)}
.detail-list dt:last-of-type,.detail-list dd:last-of-type{border-bottom:0}
.detail-list .dl-empty{grid-column:1/-1;font-weight:500;color:var(--ink-5);border-bottom:0}
@media (max-width:560px){
  .detail-list{grid-template-columns:1fr;gap:0}
  .detail-list dt{padding-bottom:0}
  .detail-list dd{padding-top:2px}
}

/* ===== TOAST ===== */
@keyframes toastIn{from{opacity:0;transform:translateX(22px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}
/* Kanan-bawah: bebas dari top nav & context bar (floating toggle ada di kiri-bawah). */
.toast-wrap{position:fixed;z-index:9999;bottom:22px;right:20px;display:flex;flex-direction:column;gap:10px;max-width:min(400px,calc(100vw - 40px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:11px;padding:14px 14px 14px 15px;border-radius:15px;
  font-size:12.8px;font-weight:600;line-height:1.55;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 14px 36px rgba(60,80,50,.22);animation:toastIn .28s cubic-bezier(.2,.9,.3,1.2) both}
.toast.out{opacity:0;transform:translateX(22px);transition:opacity .3s ease,transform .3s ease}
.toast-error{background:rgba(255,241,241,.92);border:1px solid rgba(239,68,68,.36);color:#b91c1c}
.toast-ok{background:rgba(240,253,244,.92);border:1px solid rgba(34,197,94,.36);color:#15803d}
.toast .tc-ico{flex-shrink:0;margin-top:1px;display:flex}
.toast .tc-msg{flex:1;min-width:0}
.toast .tc-x{flex-shrink:0;width:22px;height:22px;border:0;border-radius:7px;background:transparent;color:inherit;opacity:.5;
  cursor:pointer;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center}
.toast .tc-x:hover{opacity:1;background:rgba(31,41,55,.08)}

/* ===== WA: QR tidak tersedia ===== */
.wa-qr-off{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;
  width:100%;max-width:280px;padding:26px 22px;border-radius:18px;
  background:rgba(255,244,244,.62);border:1px dashed rgba(239,68,68,.42)}
.wa-qr-off .wq-ico{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:rgba(239,68,68,.12);color:#dc2626}
.wa-qr-off .wq-title{font-size:13.5px;font-weight:800;color:#b91c1c;letter-spacing:-.01em}
.wa-qr-off .wq-desc{font-size:11.8px;line-height:1.65;color:var(--ink-6)}

/* ===== PESERTA RESERVASI RUANGAN ===== */
.lbl-hint{font-weight:500;color:var(--ink-45);text-transform:none;letter-spacing:0}
/* Kotak cari + penghitung pilihan di atas daftar peserta. */
.picker-bar{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.picker-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 11px;height:36px;border-radius:11px;
  border:1px solid rgba(31,41,55,.14);background:rgba(255,255,255,.7)}
.picker-search svg{flex-shrink:0}
.picker-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:12.5px;color:var(--ink)}
.picker-search input::-webkit-search-cancel-button{cursor:pointer}
.picked{flex-shrink:0;padding:6px 11px;border-radius:20px;font-size:11px;font-weight:700;
  color:var(--ink-45);background:rgba(31,41,55,.07)}
.picked.on{color:#c2710c;background:rgba(245,145,30,.18)}

/* Tabel pilih peserta di dialog reservasi — checkbox asli disembunyikan,
   .pk-mark yang digambar (selektor sibling, tanpa bergantung pada :has()). */
.picker{max-height:212px;overflow-y:auto;border-radius:13px;
  border:1px solid rgba(31,41,55,.14);background:rgba(255,255,255,.55)}
.picker thead th{position:sticky;top:0;z-index:1;padding:5px 14px;font-size:10px;
  background:rgba(246,248,244,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* Checkbox "pilih semua" tidak boleh menambah tinggi header. */
.picker thead .pk-box{padding:0}
.picker td{padding:0;border-bottom:1px solid rgba(31,41,55,.055)}
.picker tbody tr:last-child td{border-bottom:0}
.picker .pk-c{width:44px;padding-left:14px;padding-right:0}
.picker thead .pk-c{padding-left:14px}

.pick{transition:background .16s}
.pick:hover{background:rgba(255,255,255,.85)}
.pick:has(input:checked){background:rgba(245,145,30,.12)}
.pk-box{position:relative;display:inline-flex;align-items:center;padding:6px 0;cursor:pointer}
.pk-cell{display:flex;align-items:center;padding:6px 14px 6px 10px;cursor:pointer;min-width:0}
.pk-cell .b{font-size:12.3px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-role{font-size:11.5px;color:var(--ink-6);white-space:nowrap}
.pk-box input{position:absolute;opacity:0;width:0;height:0}
.pk-mark{width:19px;height:19px;flex-shrink:0;border-radius:6px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(31,41,55,.22);background:#fff;color:transparent;transition:background .16s,border-color .16s,color .16s}
.pk-mark .dash{display:none}
.pk-box input:checked~.pk-mark,.pk-box input:indeterminate~.pk-mark{background:var(--orange);border-color:var(--orange);color:#fff}
/* Sebagian tercentang → tampilkan garis, bukan centang. */
.pk-box input:indeterminate~.pk-mark path:not(.dash){display:none}
.pk-box input:indeterminate~.pk-mark .dash{display:inline}
.pk-box input:focus-visible~.pk-mark{outline:2px solid var(--orange);outline-offset:2px}
/* Pemilih driver memakai radio (satu saja) — tandanya dibulatkan. */
.pk-box input[type=radio]~.pk-mark{border-radius:50%}

/* Baris driver yang jamnya sudah terisi: diredupkan dan tidak bisa dipilih. */
.pick.busy{background:rgba(239,68,68,.055)}
.pick.busy .pk-cell .b{color:var(--ink-5)}
.pick.busy .pk-box,.pick.busy .pk-cell{cursor:not-allowed}
.pick.busy .pk-mark{opacity:.4}
/* Kolom status driver: satu baris, sama seperti kolom Role pada pemilih
   peserta. Padding tegaknya disetel 4px supaya badge (19px) menghasilkan
   tinggi baris yang persis sama dengan baris berisi teks biasa. */
.pick [data-driver-state]{gap:7px;padding-top:4px;padding-bottom:4px}
.pick [data-driver-state] .badge{flex-shrink:0}
.drv-when{min-width:0;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:10px;
  color:var(--ink-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-empty{padding:18px 14px;text-align:center;font-size:12px;color:var(--ink-45);white-space:normal}

/* Tumpukan avatar peserta di tabel riwayat. */
.avstack{display:flex;align-items:center}
.avstack .avatar-sm{width:27px;height:27px;border-radius:9px;font-size:10.5px;border:2px solid rgba(255,255,255,.9)}
.avstack .avatar-sm+.avatar-sm{margin-left:-9px}
.avstack .avatar-sm.more{background:rgba(31,41,55,.42)}
.invited-by{margin-top:2px;font-size:10.5px;color:var(--ink-45)}
.row-sub{margin-top:2px;font-size:11px;color:var(--ink-6)}
/* Penanda "ada keterangan" — isinya muncul sebagai tooltip. */
.note-dot{display:inline-flex;align-items:center;margin-left:6px;color:var(--ink-45);cursor:help;vertical-align:-1px}
.note-dot:hover{color:var(--orange)}

/* ===== SIDE MENU HALAMAN RESERVASI RUANGAN ===== */
.bk-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:18px;align-items:start}
.bk-side{position:sticky;top:0;display:flex;flex-direction:column;gap:12px}
.bk-new{width:100%;justify-content:center;padding:13px 16px}
.bk-menu{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:20px;
  border:1px solid var(--glass-brd);background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 16px 40px rgba(70,90,60,.14)}
.bk-item{position:relative;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;
  text-decoration:none;color:var(--ink-6);transition:background .18s,color .18s}
.bk-item:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.bk-ico{width:34px;height:34px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(31,41,55,.06);color:var(--ink-5);transition:background .18s,color .18s}
.bk-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.bk-txt b{font-size:12.8px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-txt em{font-size:10.5px;font-style:normal;color:var(--ink-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-item.on{background:linear-gradient(135deg,rgba(245,145,30,.16),rgba(245,145,30,.07))}
.bk-item.on::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--orange)}
.bk-item.on .bk-ico{background:linear-gradient(135deg,var(--orange),var(--orange-l));color:#fff;box-shadow:0 6px 14px rgba(245,145,30,.32)}
.bk-item.on .bk-txt b{color:var(--ink)}

/* tombol Jadwal + Pilih Ruangan pada kartu ruangan */
.asset-acts{display:flex;gap:8px;margin-top:14px}
.asset-acts .btn-choose{flex:1;margin-top:0}
.asset-acts .btn-cal{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:10px 12px;border-radius:11px;
  font-size:12.5px;font-weight:700;text-decoration:none}

@media (max-width:900px){
  /* Layar sempit: side menu jadi deretan pill horizontal di atas konten. */
  .bk-layout{grid-template-columns:minmax(0,1fr)}
  .bk-side{position:static}
  .bk-menu{flex-direction:row;overflow-x:auto;border-radius:16px}
  .bk-item{flex-shrink:0}
  .bk-item.on::before{display:none}
  .bk-txt em{display:none}
}

/* ===== KALENDER RESERVASI RUANG MEETING ===== */
.cal-panel{padding:18px 20px;scroll-margin-top:78px}

/* toolbar */
.cal-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cal-nav{display:flex;align-items:center;gap:7px}
.cal-arrow{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.55);color:var(--ink-6);text-decoration:none;transition:background .18s,color .18s}
.cal-arrow:hover{background:#fff;color:var(--orange)}
.cal-today{padding:0 14px;height:34px;display:inline-flex;align-items:center;border-radius:11px;font-size:12px;font-weight:700;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.55);color:var(--ink-6);text-decoration:none}
.cal-today:hover{background:#fff;color:var(--orange)}
.cal-title{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.015em}
.cal-filter select{height:34px;padding:0 12px;border-radius:11px;border:1px solid rgba(31,41,55,.14);
  background:rgba(255,255,255,.7);color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:600;outline:none;cursor:pointer}
.cal-seg{display:inline-flex;gap:3px;padding:3px;border-radius:13px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7)}
.cal-seg a{padding:7px 15px;border-radius:10px;font-size:12px;font-weight:700;color:var(--ink-6);text-decoration:none;transition:background .18s,color .18s}
.cal-seg a:hover{color:var(--ink)}
.cal-seg a.on{background:linear-gradient(135deg,var(--orange),var(--orange-l));color:#fff;box-shadow:0 6px 14px rgba(245,145,30,.32)}

.cal-empty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:11px 15px;border-radius:13px;
  font-size:12.5px;color:var(--ink-6);background:rgba(245,145,30,.09);border:1px dashed rgba(245,145,30,.35)}
.cal-empty a{color:#c2710c;font-weight:700;text-decoration:none}
.cal-empty a:hover{text-decoration:underline}

/* ── tampilan minggu ── */
.cal-scroll{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.42)}
.cal-week{display:grid;grid-template-columns:58px repeat(7,minmax(104px,1fr));min-width:760px}
.cal-corner{border-bottom:1px solid var(--line)}
.cal-dhead{display:flex;align-items:baseline;justify-content:center;gap:7px;padding:11px 6px;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal-dhead .dw{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.cal-dhead .dn{font-size:16px;font-weight:800;color:var(--ink)}
.cal-dhead.on{background:rgba(245,145,30,.11)}
.cal-dhead.on .dw{color:#c2710c}
.cal-dhead.on .dn{color:var(--orange)}

.cal-gutter .cal-hr{height:52px;position:relative}
.cal-gutter .cal-hr span{position:absolute;top:-7px;right:9px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-45)}
.cal-gutter .cal-hr:first-child span{top:3px}

.cal-col{position:relative;border-left:1px solid var(--line)}
.cal-col.today{background:rgba(245,145,30,.055)}
.cal-col.past{background:rgba(31,41,55,.022)}
.cal-slot{height:52px;border-top:1px solid var(--line);cursor:pointer;transition:background .15s,box-shadow .15s}
.cal-col .cal-slot:first-child{border-top:0}
.cal-slot:hover{background:rgba(245,145,30,.14);box-shadow:inset 0 0 0 1px rgba(245,145,30,.35)}

.cal-ev{position:absolute;z-index:2;display:flex;flex-direction:column;gap:1px;overflow:hidden;
  padding:4px 7px;border-radius:9px;border-left:3px solid currentColor;line-height:1.25;
  box-shadow:0 3px 10px rgba(70,90,60,.14);transition:transform .16s,box-shadow .16s}
.cal-ev:hover{z-index:3;transform:scale(1.015);box-shadow:0 7px 18px rgba(70,90,60,.24)}
.cal-ev .ev-time{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;opacity:.85}
.cal-ev .ev-title{font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.cal-ev .ev-room{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75}

.cal-now{position:absolute;left:0;right:0;z-index:4;height:2px;background:#dc2626;pointer-events:none}
.cal-now span{position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 3px rgba(239,68,68,.22)}

/* ── tampilan bulan ── */
.cal-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal-wd{padding-bottom:2px;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.cal-day{display:flex;flex-direction:column;gap:6px;min-height:106px;padding:8px 9px;border-radius:15px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.68);transition:box-shadow .18s,transform .18s}
.cal-day:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(70,90,60,.14)}
.cal-day.out{opacity:.42}
.cal-day.today{border-color:rgba(245,145,30,.6);box-shadow:0 0 0 2px rgba(245,145,30,.16)}
.cd-head{display:flex;align-items:center;justify-content:space-between}
.cd-num{font-size:13px;font-weight:800;color:var(--ink);text-decoration:none}
.cd-num:hover{color:var(--orange)}
.cal-day.today .cd-num{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--orange-l));color:#fff}
.cd-add{width:21px;height:21px;border-radius:7px;border:0;cursor:pointer;font-size:15px;line-height:1;
  background:rgba(31,41,55,.06);color:var(--ink-5);opacity:0;transition:opacity .18s,background .18s}
.cal-day:hover .cd-add{opacity:1}
.cd-add:hover{background:var(--orange);color:#fff}
/* Perangkat sentuh tidak punya hover — tombol tambah dibuat tetap terlihat. */
@media (hover:none){ .cd-add{opacity:.55} }
.cd-list{display:flex;flex-direction:column;gap:4px;min-width:0}
.cd-chip{display:block;padding:3px 7px;border-radius:7px;font-size:10.5px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid currentColor}
.cd-chip b{font-family:'JetBrains Mono',monospace;font-weight:600}
.cd-more{font-size:10px;font-weight:700;color:var(--ink-5);text-decoration:none;padding-left:3px}
.cd-more:hover{color:var(--orange)}

/* nada warna blok — mengikuti peta badge status */
.ev-g{background:rgba(34,197,94,.17);color:#15803d}
.ev-b{background:rgba(56,189,248,.2);color:#0369a1}
.ev-o{background:rgba(245,145,30,.2);color:#c2710c}
.ev-a{background:rgba(245,158,11,.19);color:#b45309}
.ev-r{background:rgba(239,68,68,.16);color:#dc2626}
.ev-n{background:rgba(31,41,55,.09);color:rgba(31,41,55,.6)}

.cal-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.cal-legend .lgd{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-6)}
.cal-legend .lgd i{display:inline-block;width:12px;height:12px;border-radius:4px;border-left:3px solid currentColor}
.cal-legend .lgd-note{margin-left:auto;font-size:10.5px;color:var(--ink-45)}

@media (max-width:820px){
  .cal-month{gap:5px}
  .cal-day{min-height:88px;padding:6px}
  .cal-legend .lgd-note{margin-left:0}
}

/* ===== FEATURE MANAGEMENT ===== */
/* Saklar on/off — checkbox asli disembunyikan, .track yang digambar. */
.switch{position:relative;display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}
.switch input{position:absolute;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch .track{width:48px;height:27px;border-radius:20px;background:rgba(31,41,55,.2);border:1px solid rgba(31,41,55,.08);
  transition:background .22s;display:block;position:relative}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(31,41,55,.3);transition:transform .22s cubic-bezier(.2,.9,.3,1.2)}
.switch input:checked+.track{background:linear-gradient(135deg,var(--green),var(--green-d));border-color:transparent}
.switch input:checked+.track::after{transform:translateX(21px)}
.switch input:focus-visible+.track{outline:2px solid var(--orange);outline-offset:3px}

.feat-intro{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin-bottom:22px;animation:riseIn .5s ease both}
.feat-intro-ico{width:52px;height:52px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--orange),var(--orange-l));color:#fff;box-shadow:0 10px 24px rgba(245,145,30,.35)}
.feat-tally{display:flex;gap:26px;padding-left:22px;border-left:1px solid var(--line)}
.feat-tally .ft-num{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.feat-tally .ft-lbl{font-size:10.5px;color:var(--ink-45);margin-top:4px;font-weight:600}

.feat-group{margin-bottom:24px}
.feat-group .slabel{margin-bottom:11px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.feat-card{border-radius:22px;border:1px solid var(--glass-brd);background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 16px 40px rgba(70,90,60,.14);padding:18px 20px;display:flex;flex-direction:column;gap:13px;
  transition:transform .2s,box-shadow .2s,opacity .2s}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(70,90,60,.2)}
.feat-card.off{opacity:.66}
.feat-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feat-name{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.feat-desc{font-size:11.8px;line-height:1.6;color:var(--ink-6);margin-top:4px}
.feat-foot{display:flex;align-items:center;gap:9px}
.feat-key{font-size:10.5px;color:var(--ink-45)}
.feat-menus{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.feat-menu{font-size:10.5px;font-weight:600;color:var(--ink-6);background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:4px 10px}

/* ===== MONITOR RUANG MEETING (layar di depan pintu) ===== */
/* Nada warna per keadaan ruangan — diwariskan ke seluruh isi panel. */
.mon-used{--tone:#dc2626;--tone-soft:rgba(239,68,68,.14);--tone-dot:#EF4444;--tone-anim:pulseRed 1.8s infinite}
.mon-soon{--tone:#c2710c;--tone-soft:rgba(245,145,30,.16);--tone-dot:#F5911E;--tone-anim:pulseAmber 1.8s infinite}
.mon-free{--tone:#15803d;--tone-soft:rgba(34,197,94,.16);--tone-dot:#22C55E;--tone-anim:pulseDot 1.8s infinite}

/* pemilih ruangan — dipakai saat memasang layar, hilang di mode kiosk */
.mon-rooms{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.mon-rooms>.slabel{margin-right:2px}
.mon-room{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:14px;text-decoration:none;
  font-size:12.5px;font-weight:700;color:var(--ink-6);background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
  transition:background .18s,color .18s}
.mon-room:hover{background:#fff;color:var(--ink)}
.mon-room i{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--tone-dot);animation:var(--tone-anim)}
.mon-room.on{color:var(--ink);border-color:rgba(245,145,30,.45);
  background:linear-gradient(135deg,rgba(245,145,30,.18),rgba(245,145,30,.06))}
.mon-rooms-hint{margin-left:auto;font-size:11px;color:var(--ink-45)}
.app-shell.chrome-hidden .mon-rooms{display:none}

/* ── panel utama: sedang dipakai siapa ── */
/* Tanpa animasi masuk di mana pun: isi layar disegarkan berkala, dan panel
   yang "naik" tiap penyegaran membuat tampilan di depan pintu bergerak-gerak. */
.mon-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.mon-now{padding:24px 26px;display:flex;flex-direction:column;gap:22px}
.mon-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mon-room-name{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.mon-room-meta{font-size:13px;color:var(--ink-6);margin-top:6px}
.mon-state{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;padding:10px 18px;border-radius:22px;
  font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--tone);background:var(--tone-soft)}
.mon-state i{width:10px;height:10px;border-radius:50%;background:var(--tone-dot);animation:var(--tone-anim)}

.mon-agenda{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
/* Cincin sisa waktu — sudutnya (--deg) disegarkan app.js tiap detik. */
.mon-ring{position:relative;width:158px;height:158px;flex-shrink:0;border-radius:50%;
  background:conic-gradient(var(--tone,var(--orange)) var(--deg,0deg), rgba(31,41,55,.1) 0)}
.mon-ring .rc{position:absolute;inset:14px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:0 8px}
.mon-ring .rc b{font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.mon-ring .rc span{font-size:11px;color:var(--ink-5)}
/* Pengganti cincin saat ruangan belum terpakai: hitung mundur / tanda bebas. */
.mon-lead{width:158px;height:158px;flex-shrink:0;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;text-align:center;padding:0 14px;
  color:var(--tone);background:var(--tone-soft)}
.mon-lead b{font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.mon-lead .mono{font-size:11.5px;color:var(--ink-6)}
.mon-lead.ok b{color:var(--tone)}

.mon-ag{flex:1;min-width:240px}
.mon-ag-title{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin-top:7px}
.mon-people{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.mon-person{display:flex;flex-direction:column;min-width:0}
.mon-person b{font-size:14px;font-weight:800;color:var(--ink)}
.mon-person em{font-size:10.5px;font-style:normal;color:var(--ink-45)}
.mon-plus{font-size:11px;font-weight:700;color:var(--ink-6);background:rgba(31,41,55,.07);border-radius:20px;padding:4px 10px}
.mon-ag-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.mon-range{font-size:16px;font-weight:600;color:var(--tone)}
.mon-free-note{font-size:11.5px;color:var(--ink-6)}
.mon-notes{margin-top:12px;padding:10px 13px;border-radius:12px;font-size:12.5px;line-height:1.6;color:var(--ink-6);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7)}

/* ── panel samping: jam, suhu, pintasan ── */
.mon-side{display:flex;flex-direction:column;gap:18px;justify-content:center}
.mon-clock{text-align:center}
.mon-time{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.mon-date{font-size:12.5px;color:var(--ink-6);margin-top:7px}
.mon-metrics{display:flex;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.mon-metric{flex:1;text-align:center}
.mon-metric b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:5px}
.mon-sensor-note{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-5);text-align:center}
.mon-quick{margin-top:auto;padding:14px;font-size:14px;border-radius:14px;text-align:center;text-decoration:none;color:#fff}

/* ── dua panel jadwal ── */
.mon-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.mon-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}

.mon-list{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow-y:auto}
.mon-row{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:15px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65)}
.mon-row.now{background:linear-gradient(135deg,rgba(245,145,30,.16),rgba(245,145,30,.05));border-color:rgba(245,145,30,.4)}
.mon-row.past{opacity:.5}
.mon-row-time{flex-shrink:0;display:flex;flex-direction:column;width:52px;font-size:14px;font-weight:600;color:var(--ink)}
.mon-row-time em{font-style:normal;font-size:11px;color:var(--ink-45)}
.mon-row-body{flex:1;min-width:0}
.mon-row-body>b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-row-who{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12px;color:var(--ink-6);min-width:0}
.mon-row-who .avatar-sm{width:24px;height:24px;border-radius:8px;font-size:10px}
.mon-row-who>span:not(.avatar-sm):not(.mon-plus){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lebar dipatok: hitung mundur yang memanjang-memendek tiap menit tidak boleh
   ikut menggeser isi barisnya. */
.mon-row-tail{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:96px}
.mon-in{font-size:10.5px;color:var(--ink-45);white-space:nowrap;font-variant-numeric:tabular-nums}
.mon-in b{font-weight:800;color:var(--ink-6)}
.mon-empty{padding:26px 14px;text-align:center;font-size:12.5px;color:var(--ink-45)}

.mon-days{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow-y:auto}
.mon-day{display:flex;gap:14px;padding:10px 13px;border-radius:15px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65)}
.mon-day.free{opacity:.55}
.mon-day-date{flex-shrink:0;width:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.15;text-align:center}
.mon-day-date .dw{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.mon-day-date .dn{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.mon-day-date .dm{font-size:10px;color:var(--ink-45)}
.mon-day-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.mon-item{display:flex;align-items:baseline;gap:9px;min-width:0;font-size:12px}
.mon-item>b{flex-shrink:0;font-size:11.5px;font-weight:600;color:#c2710c}
.mon-item .mi-t{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-item .mi-u{flex-shrink:0;font-size:11px;color:var(--ink-5)}
.mon-item-free{font-size:11.5px;color:var(--ink-45)}
.mon-more{font-size:10.5px;font-weight:700;color:var(--ink-45)}

/* Mode kiosk (chrome disembunyikan): terbaca dari beberapa meter. */
.app-shell.chrome-hidden .mon-room-name{font-size:42px}
.app-shell.chrome-hidden .mon-ag-title{font-size:30px}
.app-shell.chrome-hidden .mon-time{font-size:66px}
.app-shell.chrome-hidden .mon-ring,.app-shell.chrome-hidden .mon-lead{width:186px;height:186px}
.app-shell.chrome-hidden .mon-ring .rc b,.app-shell.chrome-hidden .mon-lead b{font-size:30px}

/* ── Pas selayar: tinggi & lebar mengikuti monitor, tanpa gulir sama sekali ──
   Layar ini menempel di depan pintu dan tidak pernah digulir siapa pun, jadi
   isinya harus muat sekali lihat. Tingginya dibagi begini: pemilih ruangan &
   panel utama seukuran isinya, lalu SELURUH sisa ruang jatuh ke dua panel
   jadwal — merekalah yang memanjang/memendek mengikuti layar, bukan dipatok
   430px seperti sebelumnya. Patokan piksel itulah yang dulu membuat halaman
   melebihi layar dan memunculkan gulir.

   Hanya berlaku pada layar selebar monitor. Di bawah 1080px tata letaknya
   menumpuk jadi satu kolom (@media di bawah) dan memang mustahil muat tanpa
   menyembunyikan agenda — di sana halaman sengaja dibiarkan bergulir seperti
   semula, sebab agenda yang hilang diam-diam lebih buruk daripada gulir. */
@media (min-width:1081px){
  body[data-route="monitor-display"] .app-shell{height:100dvh}
  body[data-route="monitor-display"] .hx-content{
    display:flex;flex-direction:column;gap:14px;padding:16px 20px;overflow:hidden}
  /* Seukuran isinya, tidak ikut menyusut. Margin lama diganti gap di atas. */
  body[data-route="monitor-display"] .flash,
  body[data-route="monitor-display"] .mon-rooms,
  body[data-route="monitor-display"] .mon-hero{margin-bottom:0;flex:0 0 auto}
  body[data-route="monitor-display"] .mon-cols{flex:1 1 auto;min-height:0}
  body[data-route="monitor-display"] .mon-cols>.panel{display:flex;flex-direction:column;min-height:0}
  body[data-route="monitor-display"] .mon-panel-head{flex:0 0 auto}
  /* min-height:0 wajib. Tanpa itu anak flex menolak menyusut di bawah tinggi
     isinya, dan daftar yang panjang justru mendorong panelnya melewati layar
     lagi — persis masalah yang sedang dibereskan. */
  body[data-route="monitor-display"] .mon-list,
  body[data-route="monitor-display"] .mon-days{max-height:none;flex:1 1 auto;min-height:0}
}

/* Layar pendek — laptop, atau jendela peramban yang masih memakai tab & bilah
   alamat. Elemen paling boros tinggi dikecilkan supaya dua panel jadwal tetap
   kebagian ruang. Mode kiosk sengaja tidak ikut dikecilkan: aturannya di atas
   lebih spesifik, dan di sana topnav & pemilih ruangan sudah hilang. */
@media (min-width:1081px) and (max-height:900px){
  body[data-route="monitor-display"] .mon-now{padding:18px 22px;gap:16px}
  body[data-route="monitor-display"] .mon-agenda{gap:18px}
  body[data-route="monitor-display"] .mon-ring,
  body[data-route="monitor-display"] .mon-lead{width:124px;height:124px}
  body[data-route="monitor-display"] .mon-ring .rc b,
  body[data-route="monitor-display"] .mon-lead b{font-size:20px}
  body[data-route="monitor-display"] .mon-room-name{font-size:26px}
  body[data-route="monitor-display"] .mon-ag-title{font-size:19px}
  body[data-route="monitor-display"] .mon-time{font-size:40px}
  body[data-route="monitor-display"] .mon-metric b{font-size:26px}
}

@media (max-width:1080px){
  .mon-hero,.mon-cols{grid-template-columns:minmax(0,1fr)}
  .mon-side{gap:14px}
  .mon-quick{margin-top:4px}
}
@media (max-width:560px){
  .mon-room-name{font-size:25px}
  .mon-ag-title{font-size:19px}
  .mon-ring,.mon-lead{width:128px;height:128px}
  .mon-time{font-size:42px}
}

/* ===== JADWAL MENGEMUDI (beranda Driver) =====
   Ditulis mobile-first: driver membukanya dari ponsel sambil memegang kunci
   mobil. Aturan @media di bawah hanya MELEBARKAN untuk layar besar. */

/* Kolom, dinyatakan tegas. Isinya lima blok yang HARUS bertumpuk ke bawah;
   dibiarkan sebagai blok biasa, satu konteks tata letak dari luar sudah cukup
   membuatnya berjajar ke samping dan saling menimpa di layar sempit. */
.drv-hero{display:flex;flex-direction:column;padding:18px;border-radius:22px;margin-bottom:14px;
  background:var(--glass);border:1px solid var(--glass-brd);box-shadow:0 16px 40px rgba(70,90,60,.14);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}
/* Anak flex tidak boleh lebih lebar dari kartunya, seberapa panjang pun isinya. */
.drv-hero>*{min-width:0;max-width:100%}
.drv-hero.live{border-color:rgba(245,145,30,.5);box-shadow:0 0 0 2px rgba(245,145,30,.14),0 16px 40px rgba(70,90,60,.14)}
.drv-hero-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.drv-hero-tag{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-45)}
.drv-hero.live .drv-hero-tag{color:#c2710c}

.drv-hero-car{display:flex;align-items:center;gap:11px;color:var(--orange)}
.drv-hero-car>div{min-width:0}
.drv-hero-car b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drv-hero-car .mono{font-size:12px;color:var(--ink-5)}

.drv-hero-when{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.drv-hero-when b{font-size:13.5px;font-weight:700;color:var(--ink)}
/* Jam tidak boleh patah jadi dua baris ("19:00–" / "22:00"). */
.drv-hero-when .mono{font-size:17px;font-weight:600;color:var(--orange);white-space:nowrap}

.drv-meta{display:flex;flex-direction:column;gap:7px;margin:12px 0 0}
.drv-meta div{display:flex;gap:10px;font-size:12.5px;min-width:0}
.drv-meta dt{flex-shrink:0;width:74px;color:var(--ink-45)}
/* Nama panjang, agenda panjang, atau alamat email harus PATAH, bukan meluber
   menimpa kolom sebelahnya. */
.drv-meta dd{margin:0;min-width:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.drv-meta a{color:var(--green-d);text-decoration:none;font-weight:700}

/* Tombol Mulai / Selesai mengemudi — selebar kartu supaya mudah ditekan
   dengan ibu jari sambil berdiri di parkiran. */
.drv-act{margin-top:14px}
.drv-act button{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 18px;font-size:14px;border-radius:13px}
.drv-note{margin-top:14px;padding:10px 13px;border-radius:11px;font-size:12px;line-height:1.5;
  color:#b45309;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.28)}

.drv-hero-none{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 4px;text-align:center;color:var(--ink-45)}
.drv-hero-none b{font-size:15px;color:var(--ink-6)}
.drv-hero-none span{font-size:12px;max-width:34ch}

.drv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.drv-stats>div{padding:12px 10px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.68)}
.drv-stats b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.drv-stats span{font-size:10.5px;font-weight:600;color:var(--ink-45)}
.drv-stats .warn b{color:#dc2626}

.drv-panel{padding:14px;margin-bottom:16px}
.drv-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.drv-bar .cal-title{flex:1;min-width:0;font-size:15px}

/* Kisi bulan versi padat — hanya titik berwarna, bukan chip beragenda:
   di lebar ponsel teks agenda mustahil terbaca. */
.drv-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.drv-wd{padding-bottom:3px;text-align:center;font-size:9.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-45)}
.drv-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:44px;border-radius:11px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.68)}
.drv-day.out{opacity:.38}
.drv-day.today{border-color:rgba(245,145,30,.6);box-shadow:0 0 0 2px rgba(245,145,30,.16)}
.drv-dnum{font-size:12px;font-weight:700;color:var(--ink)}
.drv-day.today .drv-dnum{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange-l));color:#fff}
.drv-dots{display:flex;gap:3px;height:6px}
.drv-dots i{width:6px;height:6px;border-radius:50%;background:currentColor}

.drv-agenda{margin-bottom:8px}
.drv-group{display:flex;gap:11px;padding:11px;border-radius:18px;margin-bottom:9px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.68)}
.drv-group.today{border-color:rgba(245,145,30,.45);background:linear-gradient(135deg,rgba(245,145,30,.1),rgba(255,255,255,.5))}
.drv-date{flex-shrink:0;width:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.drv-date b{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.drv-date span{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-45)}
.drv-jobs{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.drv-job{min-width:0;padding-left:11px;border-left:2px solid rgba(245,145,30,.35)}
.drv-job-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.drv-job-time{font-size:11.5px;font-weight:600;color:#c2710c}
.drv-job>b{display:block;font-size:13px;font-weight:800;color:var(--ink)}
.drv-job>b .mono{font-weight:600;font-size:11px;color:var(--ink-5)}
.drv-job-sub{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-6);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.drv-empty{padding:26px 14px;text-align:center;font-size:12.5px;color:var(--ink-45);
  border-radius:18px;background:rgba(255,255,255,.42);border:1px dashed rgba(31,41,55,.14)}

@media (min-width:640px){
  .drv-hero{padding:22px 24px}
  .drv-hero-car b{font-size:22px}
  .drv-stats>div{padding:14px 12px}
  .drv-panel{padding:18px 20px}
  .drv-cal{gap:7px}
  .drv-day{min-height:62px}
  .drv-group{padding:14px 16px;gap:15px}
  .drv-date{width:44px}
}

/* Dua kolom meta baru muat setelah kartunya benar-benar lebar: tiap kolom
   berisi label 74px + nilainya, jadi di bawah ini keduanya saling menghimpit.
   Tombolnya pun baru menyusut setelah ada ruang di sampingnya. */
@media (min-width:860px){
  .drv-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
  .drv-act button{width:auto;min-width:230px}
}

/* ===== LOKASI DRIVER =====
   Dua sisi dari hal yang sama: baris keadaan di halaman Driver (yang mengirim)
   dan halaman Monitoring (yang membaca). */

/* Baris keadaan pada beranda Driver. */
.drv-loc{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
  padding:9px 13px;border-radius:13px;font-size:11.5px;font-weight:600;line-height:1.45;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65);color:var(--ink-6)}
.drv-loc .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:rgba(31,41,55,.3)}
.drv-loc.on{color:#15803d;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3)}
.drv-loc.on .dot{background:var(--green);animation:pulseDot 1.8s infinite}
.drv-loc.off{color:#dc2626;background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.drv-loc.off .dot{background:#EF4444}
.drv-loc em{margin-left:auto;font-style:normal;font-size:10px;color:var(--ink-45)}

/* Daftar driver di sebelah peta. Pin di petanya digambar OpenLayers (app.js →
   pinSvg): ikon mobil vs ikon orang, bukan sekadar dua warna. */
.dl-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65)}
.dl-row.on{border-color:rgba(245,145,30,.4);background:rgba(245,145,30,.08)}
.dl-badge{width:32px;height:32px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff}
.dl-badge.on{background:linear-gradient(135deg,var(--orange),var(--orange-l))}
.dl-badge.off{background:rgba(31,41,55,.32)}
.dl-name{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-sub{font-size:10.5px;color:var(--ink-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-when{flex-shrink:0;text-align:right;line-height:1.35}
.dl-when b{display:block;font-size:11.5px;font-weight:700}
.dl-when span{font-size:10px;color:var(--ink-45)}
.dl-when.fresh b{color:#15803d}
.dl-when.stale b{color:#b45309}
.dl-when.none b{color:var(--ink-45)}

.dl-list{display:flex;flex-direction:column;gap:10px}
.dl-legend{display:flex;flex-direction:column;gap:6px;margin-top:2px;padding-top:11px;
  border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-45);line-height:1.5}
.dl-legend>span{display:flex;align-items:center;gap:7px}
/* Baris terakhir hanya kalimat, tanpa ikon. Sebagai flex, <b> di tengahnya
   jadi kolom tersendiri dan kalimatnya terpecah tiga; biarkan mengalir biasa. */
.dl-legend>span:last-child{display:block}
.dl-legend i{width:21px;height:21px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff}
.dl-legend i.on{background:linear-gradient(135deg,var(--orange),var(--orange-l))}
.dl-legend i.off{background:rgba(31,41,55,.32)}

/* ── Pas selayar: peta & panel setinggi layar, tanpa gulir halaman ──────────
   Halaman pantau yang ditinggal terbuka di layar besar. Peta setinggi 420px
   di tengah halaman yang bergulir tidak ada gunanya di sana — yang berguna
   adalah peta seluas mungkin. Pembagiannya: empat angka seukuran isinya,
   sisa ruang seluruhnya jatuh ke baris peta + daftar driver.

   Sama seperti Monitor Ruang Meeting, ini hanya berlaku pada layar selebar
   monitor; di bawah 1081px kolomnya menumpuk dan halaman dibiarkan bergulir
   seperti semula. */
@media (min-width:1081px){
  body[data-route="driver-location"] .app-shell{height:100dvh}
  body[data-route="driver-location"] .hx-content{
    display:flex;flex-direction:column;gap:14px;padding:16px 20px;overflow:hidden}
  body[data-route="driver-location"] .flash,
  body[data-route="driver-location"] .grid-auto{margin-bottom:0 !important;flex:0 0 auto}

  /* Barisnya harus benar-benar setinggi sisa ruang: tanpa grid-template-rows,
     baris implisitnya `auto` dan hanya setinggi isi. */
  body[data-route="driver-location"] .grid-2.cols{
    flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}

  /* min-height bawaan 420px justru menghalangi penyusutan di layar pendek. */
  body[data-route="driver-location"] .ol-box{min-height:0;height:100%}
  body[data-route="driver-location"] .grid-2.cols>.panel{min-height:0;overflow:hidden}
  /* Hanya daftarnya yang bergulir; kepala panel & legenda tetap terlihat. */
  body[data-route="driver-location"] .dl-list{flex:1 1 auto;min-height:0;overflow-y:auto}
  body[data-route="driver-location"] .table-head,
  body[data-route="driver-location"] .dl-legend{flex:0 0 auto}
}