/* AC Nusantara: extensions to the shared Nusantara design system. */
:root { --brand:#176b87; --brand-strong:#105166; --brand-soft:#e0f1f4; --ring:rgba(23,107,135,.22); --viz-series-1:#176b87; }
:root[data-theme="dark"] { --brand:#4db6cb; --brand-strong:#7ad0df; --brand-soft:#173842; --ring:rgba(77,182,203,.28); --viz-series-1:#4db6cb; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand:#4db6cb;--brand-strong:#7ad0df;--brand-soft:#173842;--ring:rgba(77,182,203,.28);--viz-series-1:#4db6cb}}
.sidebar-brand .brand-mark { background:linear-gradient(135deg,#176b87,#d58535); }
.topbar-user { gap:8px; }.metric-grid { grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); }
.main,.content,.grid,.grid>*,.grid-2-1>*,.card{min-width:0}
.crud-actions{white-space:nowrap}.crud-actions .btn{margin-right:4px}.crud-actions .btn:last-child{margin-right:0}
/* Topbar dan menu akun mengikuti shell APPNET aktif. */
body{overflow-x:clip}.sidebar{isolation:isolate}.sidebar-nav{display:block;visibility:visible;opacity:1;flex:1 1 0;min-height:0}.topbar .topbar-search{display:none}
.acct-wrap{position:relative;flex-shrink:0}.acct-wrap .topbar-user{display:block;margin-left:8px;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0}.acct-wrap .topbar-user:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.acct-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:80;width:min(240px,calc(100vw - 24px));padding:10px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:opacity .15s,transform .15s,visibility .15s}.acct-wrap.open .acct-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}.acct-menu::before{content:"";position:absolute;top:-5px;right:14px;width:9px;height:9px;background:var(--surface);border-left:1px solid var(--border-soft);border-top:1px solid var(--border-soft);transform:rotate(45deg)}.acct-wrap.open .avatar{box-shadow:0 0 0 3px var(--ring)}.acct-head{display:flex;align-items:center;gap:10px;padding:5px 5px 12px;border-bottom:1px solid var(--border-soft);margin-bottom:6px}.acct-info{min-width:0}.acct-name{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acct-role{font-size:11.5px;color:var(--muted)}.acct-actions{display:grid;gap:2px}.acct-menu a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--ink-2);font-size:13.5px;font-weight:500;text-decoration:none}.acct-menu a:hover{background:var(--surface-2);color:var(--ink)}.acct-menu a.acct-logout:hover{background:var(--st-crit-soft);color:var(--st-crit)}.acct-menu a .lucide{width:17px;height:17px;color:var(--muted)}.acct-menu a.acct-logout .lucide{color:var(--st-crit)}
.wa-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.wa-status>span:last-of-type{color:var(--ink-2);font-size:13px}.wa-state{display:inline-flex;align-items:center;gap:6px;font-weight:650}.wa-state.good{color:var(--st-good)}.wa-state.warn{color:var(--st-warn)}.wa-state.crit{color:var(--st-crit)}.wa-qr .modal-body{text-align:center}.wa-qr img{display:block;width:min(280px,100%);aspect-ratio:1;object-fit:contain;margin:14px auto;border:1px solid var(--border-soft);border-radius:12px;padding:10px;background:#fff}
.section-note { font-size:12px;color:var(--muted);margin:0 0 14px }.page-head .actions {display:flex;gap:8px;flex-wrap:wrap}
.schedule { display:grid;grid-template-columns:90px 1fr;gap:0;border-top:1px solid var(--border-soft) }.schedule-time{padding:16px;color:var(--muted);font-weight:650;font-size:12px;border-bottom:1px solid var(--border-soft)}
.schedule-item{padding:11px 0;border-bottom:1px solid var(--border-soft)}.schedule-item>div{border-left:3px solid var(--brand);padding:5px 12px;background:var(--brand-soft);border-radius:0 9px 9px 0}.schedule-item b{font-size:13px}.schedule-item small{display:block;color:var(--ink-2);margin-top:2px}
.kanban {display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;overflow-x:auto}.kanban-col{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px;padding:12px;min-height:220px}.kanban-title{font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;display:flex;justify-content:space-between;margin-bottom:10px}.job-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:12px;margin-top:9px;box-shadow:var(--shadow-sm)}.job-card b{display:block;font-size:13px}.job-card small{color:var(--muted);display:block;margin-top:3px}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,20,25,.46);z-index:100;display:grid;place-items:center;padding:18px;overflow-y:auto}.modal{width:min(680px,100%);max-height:calc(100dvh - 36px);min-width:0;overflow:auto;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);animation:modal-in .2s ease-out}.modal-head{padding:18px 20px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between}.modal-head h2{font-size:17px}.modal-body{padding:20px;max-height:calc(68dvh - 90px);overflow-y:auto}.modal-foot{padding:14px 20px;border-top:1px solid var(--border-soft);display:flex;justify-content:flex-end;gap:8px}.modal-close{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}.modal-close:hover{background:var(--surface-2);color:var(--ink)}body.modal-open{overflow:hidden}@keyframes modal-in{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}.settings-form .card-head{align-items:center}.settings-foot{align-items:center}.toast{position:fixed;right:22px;bottom:22px;background:var(--ink);color:var(--surface);padding:12px 16px;border-radius:10px;box-shadow:var(--shadow-md);font-size:13px;z-index:120;animation:toast .2s ease-out}@keyframes toast{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.empty{padding:36px;text-align:center;color:var(--muted)}.empty .lucide{font-size:28px;margin-bottom:8px}.mini-list{display:grid;gap:12px}.mini-list div{display:flex;gap:10px;align-items:flex-start}.mini-list .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);margin-top:6px;flex:0 0 auto}.mini-list small{display:block;color:var(--muted)}
/* Responsif mengikuti shell aktif APPNET v2: sidebar menjadi drawer dan
   konten/table tetap berada pada viewport sempit tanpa melebar ke halaman. */
@media(max-width:992px){
  body.sb-open{overflow:hidden}
  .sidebar{box-shadow:var(--shadow-md)}
  .sidebar-nav{padding-bottom:64px}
  .kanban{grid-template-columns:repeat(4,260px)}
  .topbar-user .user-copy{display:none}
}
@media(max-width:640px){
  :root{--topbar-h:58px}
  .content{padding:16px 12px 32px}
  body{overflow-x:hidden}
  .topbar{width:calc(100% - 24px);height:58px}
  body.win-scrolled .topbar{padding-inline:8px}
  .topbar-right{gap:0}
  .icon-btn{width:38px;height:38px}
  .page-head{gap:12px;margin-bottom:16px}
  .page-head h1{font-size:20px}
  .page-head .actions{width:100%}
  .page-head .actions .btn{flex:1;justify-content:center;min-height:42px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .metric-grid .tile:last-child{grid-column:1/-1}
  .tile{padding:14px}
  .tile-icon{width:36px;height:36px;font-size:17px}
  .tile-value{font-size:22px}
  .tile-label{font-size:10px;line-height:1.3}
  .tile-foot{min-height:30px;align-items:flex-start;font-size:11px}
  .card-head{padding:13px 14px}
  .card-head h3{font-size:14px}
  .card-body{padding:14px}
  .table-wrap .table{min-width:680px}
  .table thead th,.table tbody td{padding:10px 12px}
  .modal-backdrop{align-items:end;padding:0}
  .modal{width:100%;max-height:92dvh;border-radius:18px 18px 0 0}
  .modal-head,.modal-body,.modal-foot{padding-inline:16px}
  .modal-body{max-height:calc(72dvh - 88px)}
  .modal-foot .btn{flex:1;justify-content:center}
  .settings-form .card-head{align-items:stretch;flex-direction:column}
  .settings-form .card-head .btn{width:100%}
  .settings-foot{align-items:stretch;flex-direction:column}
  .toast{left:12px;right:12px;bottom:12px;text-align:center}
  .footer{padding:14px 12px;flex-direction:column;align-items:center;text-align:center}
}