:root{
  --ink:#12302F; --ink-2:#4F6B68; --ink-3:#7C9694; --line:#D5E1DF; --line-2:#E6EEEC; --bg:#F4F7F6; --card:#fff;
  --deep:#0B3B3A; --deep-2:#0F4A48; --teal:#14625F; --teal-2:#0E6F6D; --mint:#DDF1EE; --mint-2:#BFE3DE;
  --sun:#E8A33D; --amber-bg:#FBEBCB; --amber:#7A4A05; --red:#8E2A20; --red-bg:#F8DDD9; --green:#116B4B; --green-bg:#D9F2E6;
  --rail:72px; --side:284px; --r:14px;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif; --mono:var(--sans);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--teal-2);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font-family:var(--mono);font-size:.92em}
/* easing: kurva ease-out kuat untuk semua gerak UI */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
h1,h2,h3{text-wrap:balance}
small{font-size:12px}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh;transition:grid-template-columns .22s ease}
.shell.collapsed{grid-template-columns:var(--rail) 1fr}
.side{background:var(--deep);color:#CFE6E2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;z-index:30}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 18px;min-height:76px}
.brand-mark{display:block;width:48px;height:48px;border-radius:12px;background:#fff;overflow:hidden;flex:none}
.brand-mark img{display:block;width:100%;height:100%}
.brand-text{white-space:nowrap;overflow:hidden}
.brand-text b{display:block;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em}
.brand-text span{font-size:11.5px;color:#8FBDB8}
.nav{flex:1;overflow-y:auto;padding:6px 12px 12px;display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:12px;color:#7FAAA5;padding:16px 10px 6px;white-space:nowrap;overflow:hidden}
.nav a{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:11px;color:#CFE6E2;font-weight:500;white-space:nowrap;position:relative;transition:background .15s}
@media (hover:hover) and (pointer:fine){.nav a:hover{background:rgba(255,255,255,.07)}}
.nav a[aria-current=page]{background:var(--teal);color:#fff;font-weight:600}
.nav a[aria-current=page]::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--sun)}
.nav .txt{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-parent{display:flex;align-items:center;gap:12px;width:100%;height:42px;padding:0 12px;border:0;border-radius:11px;background:transparent;color:#CFE6E2;font:inherit;font-weight:500;white-space:nowrap;text-align:left;cursor:pointer;transition:background .15s}
@media (hover:hover) and (pointer:fine){.nav-parent:hover{background:rgba(255,255,255,.07)}}
.nav-parent.has-current{color:#fff;font-weight:600}
.nav-parent .caret{display:grid;place-items:center;transition:transform .15s}
.nav-parent .caret svg{width:16px;height:16px;transform:rotate(-90deg)}
.nav-parent[aria-expanded=true] .caret{transform:rotate(180deg)}
.nav-parent:focus-visible,.nav a:focus-visible{outline:2px solid var(--sun);outline-offset:-2px}
.sub-nav{list-style:none;margin:2px 0 4px;padding:0 0 0 18px;display:flex;flex-direction:column;gap:2px;position:relative}
.sub-nav[hidden]{display:none}
.sub-nav::before{content:"";position:absolute;left:23px;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.12)}
.sub-nav a{height:38px;padding:0 10px 0 20px;font-size:14px;gap:10px}
.sub-nav .dot-i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;flex:none;margin-left:-6px}
.sub-nav a[aria-current=page]::before{left:-23px}
.sub-nav a[aria-current=page] .dot-i{opacity:1;background:var(--sun)}
.collapsed .nav-parent{justify-content:center;padding:0}
.collapsed .nav-parent .caret,.collapsed .sub-nav{display:none}
.soon{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.1);color:#9CC9C4}
.collapsed .nav-label,.collapsed .brand-text,.collapsed .soon,.collapsed .txt{display:none}
.collapsed .nav a{justify-content:center;padding:0}
.collapsed .brand{justify-content:center;padding-inline:0}
.collapsed .nav a[aria-current=page]::before{left:-12px}
.side-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.collapse-btn{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border:0;background:transparent;color:#9CC9C4;border-radius:10px;font-weight:500}
@media (hover:hover) and (pointer:fine){.collapse-btn:hover{background:rgba(255,255,255,.07);color:#fff}}
.collapsed .collapse-btn{justify-content:center;padding:0}.collapsed .collapse-btn span{display:none}
.collapsed .collapse-btn svg{transform:rotate(180deg)}

.main{min-width:0;display:flex;flex-direction:column}
.top{height:68px;display:flex;align-items:center;gap:14px;padding:0 28px;position:sticky;top:0;background:rgba(244,247,246,.88);backdrop-filter:blur(10px);z-index:20;border-bottom:1px solid var(--line-2)}
.top h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.menu-btn{display:none}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;position:relative;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--mint);color:var(--teal)}}
.dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
.user-btn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 14px 4px 4px;height:42px}
@media (hover:hover) and (pointer:fine){.user-btn:hover{background:var(--mint)}}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(150deg,var(--teal-2),var(--deep));color:#fff;font-weight:700;display:grid;place-items:center;font-size:13px}
.user-btn .who{text-align:left;line-height:1.15}.user-btn .who b{display:block;font-size:13px}.user-btn .who small{color:var(--ink-2);font-size:11.5px}
.pop{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px rgba(11,59,58,.16);min-width:260px;z-index:50;overflow:hidden}
.pop-wrap{position:relative}
.pop h3{margin:0;padding:14px 16px 10px;font-size:14px}
.pop-item{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line-2);width:100%;text-align:left;background:#fff;border-left:0;border-right:0;border-bottom:0;align-items:center}
@media (hover:hover) and (pointer:fine){button.pop-item:hover{background:var(--bg)}}
.notif{align-items:flex-start;flex-direction:column;gap:2px}
.notif.unread{background:#F3FAF8}.notif.unread b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal-2);margin-right:8px}
.notif small{color:var(--ink-2)}
.pop.notifs{width:min(380px,92vw);max-height:70vh;overflow:auto}
.content{padding:26px 28px 56px;max-width:1280px;width:100%}
.scrim{display:none}

/* ---------- horizon hero ---------- */
.horizon{position:relative;border-radius:22px;overflow:hidden;min-height:196px;color:#fff;isolation:isolate;background:linear-gradient(180deg,var(--sky-a),var(--sky-b) 62%,var(--sky-c))}
.horizon .sun{position:absolute;width:62px;height:62px;border-radius:50%;left:var(--sx);top:var(--sy);background:var(--sun-color);box-shadow:0 0 0 14px var(--sun-halo),0 0 60px 20px var(--sun-halo);transform:translate(-50%,-50%);z-index:-1}
.horizon svg.land{position:absolute;inset:auto 0 0 0;width:100%;height:78%;z-index:-1}
.horizon .rinjani{fill:var(--mount)}.horizon .hills{fill:var(--hill)}.horizon .sea{fill:var(--sea)}.horizon .wave{stroke:var(--wave);fill:none;stroke-width:1.5;stroke-linecap:round}
.horizon .copy{padding:28px 32px 34px;max-width:680px;text-shadow:0 1px 18px rgba(0,0,0,.22)}
.horizon h2{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.horizon p{margin:0;font-size:14.5px;opacity:.94}
.horizon .clock{position:absolute;right:28px;top:22px;text-align:right;text-shadow:0 1px 14px rgba(0,0,0,.25)}
.horizon .clock b{display:block;font-size:26px;font-weight:700;font-family:var(--mono);letter-spacing:-.02em}.horizon .clock span{font-size:12.5px;opacity:.92}
.t-dawn{--sky-a:#5B5F97;--sky-b:#E58E73;--sky-c:#F6C77E;--sun-color:#FFD58A;--sun-halo:rgba(255,200,120,.25);--mount:#2A2F55;--hill:#1E4A55;--sea:#0F3F4A;--wave:rgba(255,220,170,.4)}
.t-day{--sky-a:#1B7C9B;--sky-b:#5CC0C9;--sky-c:#CFEFE6;--sun-color:#FFE08A;--sun-halo:rgba(255,240,170,.28);--mount:#1B4A4F;--hill:#14625F;--sea:#0E6F6D;--wave:rgba(255,255,255,.45)}
.t-dusk{--sky-a:#3B3A74;--sky-b:#D9667A;--sky-c:#F2A65A;--sun-color:#FFB45C;--sun-halo:rgba(255,150,80,.3);--mount:#241F43;--hill:#17414B;--sea:#0C3340;--wave:rgba(255,190,130,.45)}
.t-night{--sky-a:#0A1633;--sky-b:#143554;--sky-c:#1E5560;--sun-color:#EAF1F7;--sun-halo:rgba(200,225,255,.14);--mount:#07101F;--hill:#0C2B3A;--sea:#071F2E;--wave:rgba(160,200,230,.3)}
.hero-enter{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-enter .sun{animation:sunrise 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sunrise{from{transform:translate(-50%,40%)}to{transform:translate(-50%,-50%)}}

/* ---------- home ---------- */
.strip{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--r);margin:18px 0}
.strip a,.strip div.fig{flex:1 1 180px;padding:18px 22px;border-right:1px solid var(--line-2);display:flex;flex-direction:column;gap:2px}
.strip>*:last-child{border-right:0}
@media (hover:hover) and (pointer:fine){.strip a:hover{background:#F6FBFA}}
.strip .n{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.strip .l{color:var(--ink-2);font-size:13px}.strip .h{font-size:12.5px;color:var(--ink-3)}
.strip .warn .n{color:var(--amber)}
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.panel h3{margin:0 0 4px;font-size:16px;font-weight:700}
.panel .sub{color:var(--ink-2);font-size:13px;margin:0 0 14px}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:12px 1fr auto;gap:12px;padding:11px 0;border-top:1px solid var(--line-2);align-items:start}
.feed li:first-child{border-top:0}
.feed .pip{width:10px;height:10px;border-radius:50%;background:var(--teal-2);margin-top:6px}
.feed .pip.failure,.feed .pip.denied{background:var(--red)}
.feed small{color:var(--ink-3);white-space:nowrap}
.mods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mods li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2)}
.mods li.planned{border-style:dashed;color:var(--ink-2);background:repeating-linear-gradient(135deg,#fff,#fff 8px,#F7FAF9 8px,#F7FAF9 16px)}
.mods .nm{flex:1;font-weight:600}
.pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--mint);color:var(--teal);white-space:nowrap}
.pill.warn{background:var(--amber-bg);color:var(--amber)}.pill.bad{background:var(--red-bg);color:var(--red)}.pill.ok{background:var(--green-bg);color:var(--green)}.pill.mute{background:#EDF2F1;color:var(--ink-2)}

/* ---------- pages ---------- */
.page-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.page-head h2{margin:0;font-size:24px;letter-spacing:-.02em}.page-head p{margin:4px 0 0;color:var(--ink-2);max-width:62ch}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.btn{height:40px;padding:0 18px;border-radius:11px;border:1px solid var(--line);background:#fff;font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--mint)}}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}@media (hover:hover) and (pointer:fine){.btn.primary:hover{background:var(--teal-2)}}
.btn.danger{color:var(--red);border-color:#E7B8B2}@media (hover:hover) and (pointer:fine){.btn.danger:hover{background:var(--red-bg)}}
.btn.sm{height:36px;padding:0 12px;font-size:13px;border-radius:9px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{height:42px;border:1px solid #B9CCC9;border-radius:10px;padding:0 12px;background:#fff;font-size:14px;font-weight:400;width:100%}
.field textarea{height:84px;padding:10px 12px;resize:vertical}
.field input:disabled{background:#EFF4F3;color:var(--ink-2)}
.field .hint{font-weight:400;color:var(--ink-3)}
.field.err input{border-color:var(--red)}.field .msg{color:var(--red);font-weight:500}
.search{max-width:280px;flex:1 1 200px}
.seg{display:inline-flex;background:#E8EFEE;border-radius:11px;padding:3px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:8px;font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,59,58,.14)}
.tbl-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:auto}
table{border-collapse:collapse;width:100%;min-width:620px}
th{text-align:left;font-size:12.5px;color:var(--ink-2);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--line);background:#FAFCFB;white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
@media (hover:hover) and (pointer:fine){tbody tr:hover td{background:#FAFDFC}}
tr.off td{color:var(--ink-3)}
.code{font-family:var(--mono);font-weight:500;background:var(--mint);color:var(--teal);padding:3px 9px;border-radius:7px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.empty{padding:48px 24px;text-align:center;color:var(--ink-2)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.pager{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;color:var(--ink-2)}

/* drawer + modal */
.layer{position:fixed;inset:0;background:rgba(7,38,37,.45);z-index:80;display:flex;justify-content:flex-end;animation:fade .18s var(--ease-out) both}
.layer.center{justify-content:center;align-items:center}
.drawer{width:min(480px,100vw);height:100%;background:#fff;display:flex;flex-direction:column;animation:slide .24s cubic-bezier(.2,.7,.2,1) both}
.drawer header,.modal header{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.drawer header h3,.modal header h3{margin:0;font-size:18px}
.drawer .body{padding:22px 24px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:16px}
.drawer footer,.modal footer{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.modal{background:#fff;border-radius:18px;width:min(440px,92vw);animation:rise .2s ease both}
.modal .body{padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.section-title{font-size:13px;font-weight:700;margin:6px 0 -4px}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-2);border-radius:11px;cursor:pointer}
@media (hover:hover) and (pointer:fine){.check:hover{background:#F6FBFA}}.check input{margin-top:3px;accent-color:var(--teal)}
.check small{display:block;color:var(--ink-2)}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes slide{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}

/* roles */
.roles-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px}
.role-list{display:flex;flex-direction:column;gap:6px}
.role-item{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:2px}
.role-item[aria-pressed=true]{border-color:var(--teal);background:var(--mint);box-shadow:inset 3px 0 0 var(--teal)}
.role-item small{color:var(--ink-2)}
.perm-mod{border-top:1px solid var(--line-2);padding:14px 0}.perm-mod:first-of-type{border-top:0}
.perm-mod h4{margin:0 0 8px;font-size:14px;text-transform:capitalize}
.perm-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.perm-row .d{flex:1}.perm-row .d small{color:var(--ink-3);display:block}
.switch{position:relative;width:40px;height:23px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:#C7D6D4;transition:background .15s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+i{background:var(--teal)}.switch input:checked+i::after{transform:translateX(17px)}
.switch input:disabled{cursor:not-allowed}.switch input:disabled+i{opacity:.55}
.savebar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);margin:10px -22px -20px;padding:14px 22px;display:flex;gap:10px;justify-content:space-between;align-items:center;border-radius:0 0 var(--r) var(--r)}

/* audit */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
pre.diff{margin:0;background:#0F2423;color:#CDE8E4;border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:12px;overflow:auto;max-height:260px;white-space:pre-wrap}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px 0}
.detail-grid h5{margin:0 0 6px;font-size:12px;color:var(--ink-2)}
.meta{color:var(--ink-3);font-size:12px;margin-top:8px}
.setting{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line-2)}
.setting:first-of-type{border-top:0}
.setting small{color:var(--ink-3);display:block}

/* soon page */
.soon-page{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}
.soon-page ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2)}.soon-page li{margin:4px 0}
.notice{border:1px dashed #D3B574;background:var(--amber-bg);color:var(--amber);padding:12px 16px;border-radius:12px;font-weight:500}

/* toasts */
#toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:120}
.toast{background:var(--deep);color:#fff;padding:12px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:360px;animation:rise .2s ease both;font-weight:500}
.toast.bad{background:var(--red)}

.form-error{background:var(--red-bg);color:var(--red);padding:10px 14px;border-radius:10px;font-weight:500}

@media (max-width:1000px){.cols,.roles-grid,.soon-page{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.setting{grid-template-columns:1fr}}
@media (max-width:820px){
  .shell,.shell.collapsed{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:var(--side);transform:translateX(-100%);transition:transform .22s ease}
  .shell.open .side{transform:none}
  .shell.open .scrim{display:block;position:fixed;inset:0;background:rgba(7,38,37,.45);z-index:25}
  .shell.collapsed .nav-label,.shell.collapsed .brand-text,.shell.collapsed .soon,.shell.collapsed .txt{display:revert}
  .shell.collapsed .nav a{justify-content:flex-start;padding:0 12px}
  .shell.collapsed .nav-parent{justify-content:flex-start;padding:0 12px}
  .shell.collapsed .nav-parent .caret{display:grid}
  .shell.collapsed .sub-nav{display:flex}
  .shell.collapsed .sub-nav[hidden]{display:none}
  .shell.collapsed .brand{justify-content:flex-start;padding-inline:18px}
  .collapse-btn{display:none}.menu-btn{display:grid}
  .top{padding:0 16px;gap:10px}.top h1{font-size:15px}.content{padding:18px 16px 48px}.user-btn .who{display:none}.user-btn{padding:4px}
  .horizon h2{font-size:24px}.horizon .clock{display:none}
}
/* kurangi gerak: geser dan skala dihapus, fade dan perubahan warna tetap */
@media (prefers-reduced-motion:reduce){
  @keyframes rise{from{opacity:0}to{opacity:1}}@keyframes slide{from{opacity:0}to{opacity:1}}@keyframes slideOut{from{opacity:1}to{opacity:0}}@keyframes dropOut{from{opacity:1}to{opacity:0}}@keyframes popIn{from{opacity:0}to{opacity:1}}
  .hero-enter .sun{animation:none}
  .btn:active,.icon-btn:active,.strip a:active{transform:none}
  .shell,.side,.nav-parent .caret{transition:none!important}
  *{transition-property:opacity,background-color,color,border-color,box-shadow!important}
}

.stack{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.panel .notice{margin:10px 0}

.print-head{display:none}
.perm-mod h4{text-transform:none}
@media (max-width:820px){.strip a,.strip div.fig{flex:1 1 45%;border-bottom:1px solid var(--line-2)}.strip .n{font-size:28px}}

/* ---------- Booking & Reservation / Daily Program ---------- */
.stack-gap{margin-top:18px}
.drawer.wide{width:min(820px,100vw)}
.form-stack{display:flex;flex-direction:column;gap:16px}
.fgrid{display:grid;gap:14px;align-items:start}
.fgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fgrid.pax{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.lines{display:flex;flex-direction:column;gap:12px}
.line-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;background:#FAFCFB;display:flex;flex-direction:column;gap:12px}
.line-head{display:flex;align-items:center;justify-content:space-between}
.line-head b{font-size:13.5px}
.datefield .df{position:relative;display:block}
.datefield .df input[type=text]{padding-right:44px}
.datefield .pick{position:absolute;right:4px;top:4px;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);display:grid;place-items:center}
@media (hover:hover) and (pointer:fine){.datefield .pick:hover{background:var(--mint);color:var(--teal)}}
.native-date{position:absolute;right:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.form-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.form-foot .code{margin-left:4px}
.chip-next{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px;color:var(--ink-2);font-weight:600;font-size:13px}
.logbook-head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:space-between;margin:26px 0 10px}
.logbook-head h3{margin:0;font-size:18px}.logbook-head .sub{margin:2px 0 0;color:var(--ink-2);font-size:13px}
.panel+.logbook-head{margin-top:28px}
tr.clickable{cursor:pointer}
.linklike{border:0;background:transparent;padding:7px 4px;margin:-7px -4px}
.svc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.svc small{color:var(--ink-3)}
.tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;padding:1px 8px;border-radius:99px;background:var(--amber-bg);color:var(--amber);vertical-align:middle}
.tag.today{background:var(--mint);color:var(--teal)}
.reff-big{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.01em;color:var(--teal);background:var(--mint);border-radius:14px;padding:16px 18px;text-align:center;user-select:all}
.reff-big.sm{font-size:18px;padding:8px 14px;text-align:left}
.detail-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.kv{display:flex;flex-direction:column;gap:1px}
.kv span{font-size:12px;color:var(--ink-2)}.kv b{font-weight:600;overflow-wrap:anywhere}
.svc-card{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.svc-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.day-block{margin-bottom:22px}
.day-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px}
.day-head h3{margin:0;font-size:16px}
.strike{text-decoration:line-through;color:var(--ink-3)}
.amend-row td{background:var(--amber-bg);padding:10px 16px}
.amend{display:flex;gap:12px;align-items:center;justify-content:space-between;color:var(--amber)}
.amend small{color:var(--amber);opacity:.8}
.meta{color:var(--ink-3);font-size:12px}
.field.wide2{grid-column:auto}
@media (max-width:820px){.fgrid.c3,.fgrid.pax,.fgrid.c2,.kv-grid{grid-template-columns:1fr}.reff-big{font-size:22px}}
@media print{
  .print-head{display:flex;align-items:center;gap:16px;padding:0 0 12px;margin-bottom:14px;border-bottom:2px solid #E8A33D}.print-logo{height:54px;width:auto}.print-head b{display:block;font-size:14px}.print-head span{font-size:11px;color:#555}
  .side,.top,.scrim,.no-print,.pager,#toasts,.row-actions{display:none!important}
  .shell,.shell.collapsed{display:block}.content{padding:0;max-width:none}
  body{background:#fff}.tbl-wrap{border:0}.logbook-head .btn{display:none}
  table{min-width:0;font-size:11px}th,td{padding:6px 8px}
}

.toolbar select{height:42px;border:1px solid #B9CCC9;border-radius:10px;padding:0 34px 0 12px;background:#fff;font-size:14px;max-width:220px}
.toolbar .field.search{max-width:360px;flex:1 1 260px}
.toolbar .datefield{min-width:170px}
.toolbar .datefield .hint{display:none}

/* ---------- Daily Program: assignment (Operation) ---------- */
.dp-table{min-width:980px}
.dp-table .sel{width:36px;padding-inline:12px 0}
.dp-table input[type=checkbox],.check-inline input{width:17px;height:17px;accent-color:var(--teal)}
.dp-table td{vertical-align:top}
.dp-table .pax{margin-top:2px}
.res-list{display:flex;flex-direction:column;gap:3px}
.res{font-weight:600;font-size:13px}
.res.vehicle{color:var(--ink-2);font-weight:500}
.meta.none{margin:0}
.field-note{color:var(--ink-2)}
.bulk-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:12px;padding:10px 14px;margin-bottom:14px;box-shadow:0 4px 14px rgba(11,59,58,.1)}
.bulk-bar[hidden]{display:none}
.bulk-list{margin:12px 0 4px;padding-left:20px;color:var(--ink-2)}
.check-inline{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink-2);cursor:pointer}
.pick{display:flex;flex-direction:column;gap:8px}
.pick-chips{min-height:0}
.chip{display:inline-flex;align-items:center;gap:6px;background:#E3F0EE;color:var(--ink);border-radius:99px;padding:4px 6px 4px 12px;font-weight:600;font-size:13px}
.chip button{display:grid;place-items:center;width:20px;height:20px;border:0;border-radius:50%;background:rgba(11,59,58,.12);color:var(--ink);padding:0}
@media (hover:hover) and (pointer:fine){.chip button:hover{background:rgba(11,59,58,.25)}}
.chip button .i{width:12px;height:12px}
.kv-grid.summary{background:#F3F8F7;border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;margin-bottom:18px}
@media print{.sel,.dp-table .sel{display:none!important}.dp-table{min-width:0}}
.field[hidden]{display:none}

.month-pick{display:flex;gap:8px;align-items:center}
.month-pick[hidden]{display:none}

.btn[hidden]{display:none}

/* Daily Program Driver: source labels and Operation's own entries */
.tag.src{background:#EEF3F2;color:#35514F}
.tag.src.opt{background:#FFF3DC;color:#8A5A0B}
.tag.src.entry{background:#E3F0EE;color:#0B5A56}
.kind-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.kind-row{display:flex;gap:8px;align-items:center}.kind-row input:not([type=checkbox]){flex:1}

/* ---- Finance (Phase 8) ---- */
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel+.panel{margin-top:16px}
.panel h4{margin:16px 0 8px;font-size:14px}
.panel .kv{margin-bottom:8px}
.drawer .body .kv{margin-bottom:8px}
td.sel,th.sel{width:36px;padding-inline:12px 0}
td.sel input,th.sel input{width:17px;height:17px;accent-color:var(--teal)}
.toolbar .field input[type=month],.toolbar .field input[type=search]{height:42px}
.toolbar .seg{margin-right:6px}
.inv-lines{display:flex;flex-direction:column;gap:12px;margin:10px 0}
.inv-line{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;background:#FAFCFB;min-width:0}
.inv-line-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.inv-line-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.6fr)) minmax(0,1.1fr) minmax(0,.6fr) minmax(0,1fr);gap:12px;margin-top:10px;align-items:start}
.inv-line-grid.ext{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.5fr) minmax(0,.7fr) minmax(0,1fr)}
.inv-line-grid.grp{grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1.6fr)}
.inv-line-grid.gpc{grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,.5fr) minmax(0,1fr) minmax(0,1fr)}
.inv-line-grid.dur{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.55fr)) minmax(0,1fr) minmax(0,.55fr) minmax(0,.7fr) minmax(0,1fr)}
.inv-line-grid .amt{height:42px;display:flex;align-items:center;justify-content:flex-end;font-size:15px;padding:0 4px;font-variant-numeric:tabular-nums}
.inv-totals{margin:14px 0 0 auto;max-width:460px;display:flex;flex-direction:column;gap:8px}
.inv-totals .trow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr);gap:12px;align-items:center}
.inv-totals .trow b,.inv-totals .trow input{text-align:right;font-variant-numeric:tabular-nums}
.inv-totals .trow input{height:38px;border:1px solid #B9CCC9;border-radius:10px;padding:0 12px;width:100%}
.inv-totals .trow.strong b{font-size:16px}
.inv-totals .trow.head{font-size:12px;color:var(--ink-2);font-weight:600}
.inv-totals .trow.head span:nth-child(2),.inv-totals .usd{text-align:right;color:var(--ink-2)}
.inv-totals .msg{color:var(--red);margin:0}
.fmt-list{display:flex;flex-direction:column;gap:8px}
.fmt-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;min-width:0}
.fmt-row.off{background:#F3F6F5;color:var(--ink-3)}
.fmt-row b{overflow-wrap:anywhere}
.upload{display:flex;flex-direction:column;gap:8px;min-width:0}
.img-slot{height:110px;border:1px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
.img-slot img{max-width:100%;max-height:100%;object-fit:contain}
.code-big{font-family:var(--mono);font-size:20px;font-weight:600;padding-top:6px}
@media (max-width:820px){.inv-line-grid,.inv-line-grid.ext,.inv-line-grid.dur,.inv-line-grid.grp,.inv-line-grid.gpc{grid-template-columns:repeat(2,minmax(0,1fr))}.fmt-row{grid-template-columns:1fr}}
.tag.src.ext{background:#E9E3F6;color:#4A3A86}

/* Sidebar: when every submenu is open the menu scrolls instead of squeezing items together */
.nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.nav>*,.nav a,.nav-parent,.sub-nav,.nav-group,.nav-label{flex-shrink:0}
.nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}

/* ---- Notifikasi Email & WA ---- */
.chan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.chan{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.chan-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chan-test{display:flex;gap:8px;align-items:flex-end}.chan-test .field{flex:1;min-width:0}
.chan details summary{cursor:pointer;color:var(--teal);font-weight:600;font-size:13px}
.chan ul.env{margin:6px 0 0;padding-left:18px;font-size:12.5px}.chan ul.env code{font-family:var(--mono);overflow-wrap:anywhere}
table.rules th.c,table.rules td.c{text-align:center;width:96px}
table.rules td.c input{width:17px;height:17px;accent-color:var(--teal)}
tr.ev-head td{background:#F3F8F7;border-top:1px solid var(--line)}
.ev-title{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel .seg{margin-bottom:12px}
@media (max-width:820px){.chan-grid{grid-template-columns:1fr}}
/* Phase 10 · Product rate table inputs */
.mt2{margin-top:2rem}
.in-price{width:9rem;text-align:right}.in-w4{width:4.5rem}.in-w6{width:6rem}.in-w8{width:8rem}
.tbl-wrap td input.in-price,.tbl-wrap td input.in-w4,.tbl-wrap td input.in-w6,.tbl-wrap td input.in-w8{padding:.35rem .5rem}
.rate-tbl td:first-child{min-width:22rem}.pax-pair{display:inline-flex;gap:.3rem;align-items:center;white-space:nowrap}
.tbl-wrap .code{white-space:nowrap}

/* ---------- partner strip (Home) ---------- */
.partners{margin:4px 0 22px}
.partners-head{display:flex;justify-content:center;margin:0 2px 12px}
.partners-head h3{margin:0;font-size:16px;font-weight:700;font-style:normal;text-align:center}
.partners-head .sub{margin:0;color:var(--ink-2);font-size:13px}
.marquee{overflow:hidden;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:18px;width:max-content;animation:marquee var(--dur,40s) linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
.partner-card{margin:0;flex:0 0 210px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.partner-logo{width:210px;height:150px;background:#fff;border:1px solid var(--line-2);border-radius:20px;display:flex;align-items:center;justify-content:center;padding:26px;box-shadow:0 1px 2px rgba(18,48,47,.04),0 10px 24px -18px rgba(18,48,47,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.partner-logo img{max-width:100%;max-height:100%;object-fit:contain;filter:saturate(.95)}
@media (hover:hover) and (pointer:fine){.partner-card:hover .partner-logo{transform:translateY(-4px);box-shadow:0 1px 2px rgba(18,48,47,.05),0 18px 30px -18px rgba(18,48,47,.45)}}
.partner-card figcaption b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.partner-card figcaption span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.empty-partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:18px 22px}
.empty-partners h3{margin:0 0 2px;font-size:15px}.empty-partners .sub{margin:0;color:var(--ink-2);font-size:13px}
@media (max-width:820px){.partner-card{flex-basis:160px}.partner-logo{width:160px;height:118px;padding:18px;border-radius:16px}}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.marquee-track [aria-hidden=true]{display:none}}

/* agent logo in master data */
.logo-cell{width:64px}
.agent-logo-sm{width:44px;height:32px;object-fit:contain;display:block;border-radius:6px;background:#fff}
.agent-logo-sm.none{display:flex;align-items:center;justify-content:center;background:var(--mint);color:var(--teal);font-weight:700;font-size:13px}
.logo-field{display:flex;gap:16px;align-items:flex-start;padding:14px;border:1px solid var(--line-2);border-radius:14px;background:#FAFCFB}
.logo-field .stack{margin-top:0;gap:6px;flex:1}.logo-field .meta{margin:0}
.logo-slot{flex:0 0 120px;height:90px;border-radius:12px;background:#fff;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;padding:12px;text-align:center}
.logo-slot img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- motion: page change, panels ---------- */
.page-in{animation:fade 160ms var(--ease-out) both}
.page-in .strip>*{animation:fade 180ms var(--ease-out) both}
.page-in .strip>*:nth-child(2){animation-delay:30ms}.page-in .strip>*:nth-child(3){animation-delay:60ms}
.page-in .strip>*:nth-child(4){animation-delay:90ms}.page-in .strip>*:nth-child(5){animation-delay:120ms}.page-in .strip>*:nth-child(n+6){animation-delay:150ms}
.page-in .partners{animation:fade 180ms 90ms var(--ease-out) both}
.content.loading{opacity:.55;transition:opacity .15s}
.layer.closing{animation:fadeOut .18s ease both}
.layer.closing .drawer{animation:slideOut .2s cubic-bezier(.4,0,.6,1) both}
.layer.closing .modal{animation:dropOut .16s ease both}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes slideOut{from{transform:none;opacity:1}to{transform:translateX(40px);opacity:0}}
@keyframes dropOut{from{transform:none;opacity:1}to{transform:translateY(8px) scale(.98);opacity:0}}
.modal{animation:popIn .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.sub-nav:not([hidden]){animation:rise 160ms var(--ease-out) both}
.btn,.icon-btn,.nav a,.strip a{transition:background-color .15s,border-color .15s,box-shadow .15s,transform 160ms var(--ease-out)}
.btn:active,.icon-btn:active,.strip a:active{transform:scale(.97)}
.setting input,.setting select{height:42px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;color:var(--ink);background:var(--card,#fff)}
.setting input:focus,.setting select:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.setting input:disabled{background:#EFF4F3;color:var(--ink-2)}
/* layar sentuh: target minimal 44px */
@media (pointer:coarse){.btn,.btn.sm,.field input,.field select,.setting input,.setting select,.seg button{min-height:44px}}

/* ---------- agenda: Home widget + calendar page ---------- */
:root{--ag-group:#14625F;--ag-cruise:#1E5FAF;--ag-mice:#9A5B00;--ag-special:#7A3DB8;--ag-peak:#B4452F}
.ag-t-group{background:var(--ag-group)}.ag-t-cruise{background:var(--ag-cruise)}.ag-t-mice{background:var(--ag-mice)}.ag-t-special{background:var(--ag-special)}.ag-t-peak{background:var(--ag-peak)}
.ag-bg-group{background:var(--ag-group)}.ag-bg-cruise{background:var(--ag-cruise)}.ag-bg-mice{background:var(--ag-mice)}.ag-bg-special{background:var(--ag-special)}.ag-bg-peak{background:var(--ag-peak)}
.col-stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.col-stack>.panel+.panel{margin-top:0}
.ag-badge{flex:0 0 46px;height:50px;border-radius:12px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.ag-badge small{font-size:10px;font-weight:700;letter-spacing:.08em;opacity:.85}.ag-badge b{font-size:18px}
.ag-item-copy{display:flex;flex-direction:column;min-width:0;flex:1;text-align:left}
.ag-item-copy b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-item-copy span,.ag-item-copy em{font-size:12.5px;color:var(--ink-2);font-style:normal}
.ag-h{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:#EDF2F1;color:var(--ink-2);white-space:nowrap}
.ag-h.soon{background:var(--amber-bg);color:var(--amber)}
.ag-chip{display:inline-block;font-size:11.5px;font-weight:700;color:#fff;padding:3px 10px;border-radius:99px}

.ag-widget .ag-w-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.ag-widget .ag-w-head h3{margin:0}.ag-widget .ag-w-head .sub{margin:0}
.ag-w-next{display:flex;justify-content:space-between;align-items:center;gap:14px;border-radius:14px;color:#fff;padding:16px 18px;margin-bottom:10px;background-image:linear-gradient(135deg,rgba(255,255,255,.14),rgba(0,0,0,.18))}
.ag-w-next>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.ag-w-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.ag-w-next strong{font-size:17px;line-height:1.25}.ag-w-when{font-size:12.5px;opacity:.9}
.ag-w-count{text-align:right;flex:0 0 auto}.ag-w-count b{display:block;font-size:34px;line-height:1;font-weight:800}.ag-w-count small{font-size:11.5px;opacity:.9}
.ag-w-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column}
.ag-w-list li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line-2)}
.ag-w-open{width:100%;justify-content:center;margin-top:6px}.ag-widget .empty{padding:20px 12px}

.ag-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:18px;align-items:start}
.ag-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.ag-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-radius:var(--r);padding:22px 24px;color:#fff;background:linear-gradient(135deg,var(--deep),var(--teal-2))}
.ag-hero-copy{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 240px}
.ag-hero-copy h3{margin:0;font-size:22px;line-height:1.2}.ag-hero-copy p{margin:0;opacity:.85;font-size:13.5px}
.ag-hero-empty{display:flex;flex-direction:column;gap:4px}.ag-hero-empty span{opacity:.85;font-size:13.5px}
.ag-counts{display:flex;gap:10px}
.ag-count{width:78px;padding:10px 0 8px;border-radius:12px;background:rgba(255,255,255,.14);text-align:center;display:flex;flex-direction:column;gap:2px}
.ag-count b{font-size:30px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}.ag-count span{font-size:10.5px;letter-spacing:.1em;opacity:.8}

.ag-cal,.ag-day,.ag-side{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.ag-day:empty{display:none}
.ag-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ag-cal-head h3{margin:0;font-size:17px}
.ag-cal-head .row-actions{align-items:center}
.ag-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ag-dow span{text-align:center;font-size:11.5px;font-weight:700;color:var(--ink-3);padding:4px 0}
.ag-cell{min-height:56px;border-radius:10px;border:1px solid transparent;background:#F8FAF9;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:7px 2px;font:inherit;color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s}
.ag-cell.blank{background:transparent;cursor:default}
@media (hover:hover) and (pointer:fine){.ag-cell:not(.blank):hover{background:var(--mint)}}
.ag-cell .n{font-size:13.5px;font-weight:600}
.ag-cell.today{border-color:var(--teal)}.ag-cell.today .n{color:var(--teal);font-weight:800}
.ag-cell.sel{background:var(--mint-2);border-color:var(--teal)}
.ag-cell .dots{display:flex;gap:3px;min-height:7px}.ag-cell .dots i,.ag-legend i,.ag-day-list>li>i{display:inline-block;width:7px;height:7px;border-radius:50%}
.ag-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12px;color:var(--ink-2)}.ag-legend span{display:inline-flex;align-items:center;gap:6px}

.ag-day-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.ag-day-head h4{margin:0;font-size:15px}
.ag-day-list{list-style:none;margin:0;padding:0}
.ag-day-list>li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-2)}
.ag-day-list>li>i{margin-top:7px;flex:0 0 auto}.ag-day-list>li>div:nth-child(2){flex:1;min-width:0}
.ag-day-list .meta{margin-top:2px}.ag-note{font-size:13px;color:var(--ink-2);margin-top:4px;white-space:pre-wrap}

.ag-side h3{margin:0 0 10px;font-size:16px}
.ag-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 8px;margin:0 -8px;border:0;border-radius:12px;background:transparent;font:inherit;color:inherit;cursor:pointer;transition:background-color .15s}
@media (hover:hover) and (pointer:fine){.ag-item:hover,.ag-item.sel{background:var(--mint)}}
.ag-item+.ag-item{margin-top:2px}.ag-side .empty{padding:24px 8px}

@media (max-width:1000px){.ag-layout{grid-template-columns:1fr}}
@media (max-width:560px){
  .ag-hero{padding:18px}.ag-counts{width:100%}.ag-count{flex:1;width:auto}
  .ag-cal,.ag-day,.ag-side{padding:14px}.ag-cell{min-height:46px;padding:5px 0}
  .ag-w-next{flex-direction:column;align-items:flex-start}.ag-w-count{text-align:left}
}
@media (prefers-reduced-motion:reduce){.ag-cell,.ag-item{transition:none}}
.ag-hero-copy .ag-chip{align-self:flex-start}

td.nowrap{white-space:nowrap}

/* Admin Center · Reset Data */
.reset-opt{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.reset-opt:last-child{border-bottom:0}
.reset-opt input[type=checkbox]{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--teal)}
.reset-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.reset-txt .meta{font-size:12.5px;color:var(--ink-2)}
.reset-lock{font-size:12.5px;color:var(--red)}
.reset-n{font-variant-numeric:tabular-nums;white-space:nowrap}
.reset-all{border-bottom:1px solid var(--line)}
.reset-sum{background:var(--red-bg);border:1px solid #E7B8B2;border-radius:12px;padding:14px 16px;margin:16px 0;font-size:14px}
.reset-sum .meta{margin-top:4px;font-size:12.5px;color:var(--ink-2)}
.reset-confirm{height:42px;border:1px solid var(--line);border-radius:11px;padding:0 14px;font-size:15px;width:100%;box-sizing:border-box;background:#fff}
.reset-actions{display:flex;justify-content:flex-end;margin-top:14px}

.npwp-opt{margin:14px 0;padding:12px 14px;border:1px solid var(--warn,#F2A33A);border-radius:10px;background:#FFF8EC}.npwp-opt .check-inline{font-weight:600}.npwp-opt .meta{margin:6px 0 0}
.tour-pill{margin-left:8px}

/* ---- Biaya, Laporan Keuangan, panel Biaya & Margin ---- */
.ctiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ctiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ctile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.ctile small{display:block;color:var(--ink-2);font-size:12px;margin-bottom:4px}
.ctile b{display:block;font-size:clamp(15px,1.5vw,20px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctile em{font-style:normal;font-size:12px;color:var(--ink-3)}
.ctile.good b{color:var(--green)}.ctile.bad b{color:var(--red)}.ctile.warn b{color:var(--amber)}
.cost-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-end;margin-bottom:8px}
.cost-panel{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.cost-panel .ctile b{font-size:clamp(13px,1.2vw,16px)}
.cost-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.cost-head h4{margin:0}
.cost-meta{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin:14px 0}
.cell{height:34px;border:1px solid #B9CCC9;border-radius:8px;background:#fff;padding:0 10px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);width:140px;max-width:100%;font:inherit}
.cell.l{text-align:left;width:100%;min-width:120px}
.cell:disabled{background:#EFF4F3;color:var(--ink-2);border-color:var(--line-2)}
tr.sec td{background:var(--line-2);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--ink-2)}
tr.tot td{font-weight:700;border-top:2px solid var(--line)}
tr.hl td{background:var(--mint);font-weight:700}
.pos{color:var(--green)}.neg{color:var(--red)}
.two-col{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:16px;align-items:start}
.bars{display:flex;flex-direction:column;gap:12px}.bars .r1{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.track{height:9px;background:var(--line-2);border-radius:99px;overflow:hidden;margin:5px 0}.track i{display:block;height:100%;background:var(--teal);border-radius:99px}
.track i.w5{width:5%}.track i.w10{width:10%}.track i.w15{width:15%}.track i.w20{width:20%}.track i.w25{width:25%}.track i.w30{width:30%}.track i.w35{width:35%}.track i.w40{width:40%}.track i.w45{width:45%}.track i.w50{width:50%}.track i.w55{width:55%}.track i.w60{width:60%}.track i.w65{width:65%}.track i.w70{width:70%}.track i.w75{width:75%}.track i.w80{width:80%}.track i.w85{width:85%}.track i.w90{width:90%}.track i.w95{width:95%}.track i.w100{width:100%}
@media (max-width:1100px){.ctiles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:1400px){.two-col{grid-template-columns:1fr}}
@media (max-width:820px){.ctiles.three,.cost-meta{grid-template-columns:1fr}}

/* drawer/modal terbuka: halaman di belakang tidak ikut bergulir */
body.layer-open{overflow:hidden}
.layer{overscroll-behavior:contain}.drawer .body,.modal .body{overscroll-behavior:contain}

/* ---- token tambahan untuk dock & mode gelap (terang = nilai tema biru) ---- */
:root{--surface:#fff;--surface-2:#F4F7F6;--tint:#DDF1EE;--warn-bg:#FBEBCB;--bad-bg:#F8DDD9;--active-bg:#DDF1EE;--plate:rgba(255,255,255,.78);--top-bg:rgba(255,255,255,.9);--scrim:rgba(7,38,37,.45);--tip-bg:#0B3B3A;--tip-ink:#fff;--field:#fff}

/* grid dua kolom: anak boleh mengecil, di HP satu kolom (tabel menggulung di panelnya sendiri) */
.two-col>*,.cols>*,.roles-grid>*,.detail-grid>*{min-width:0}
@media (max-width:980px){.two-col,.two-col.keep,.roles-grid{grid-template-columns:minmax(0,1fr)!important}}

/* Laba Rugi tahunan: tabel 12 bulan lebar, kolom keterangan menempel saat digeser */
table.yr{min-width:1500px}table.yr th:first-child,table.yr td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);min-width:230px}
.toolbar select[aria-label="Filter penanggung jawab"]{min-width:240px}