/* Menara — stylesheet (light/dark otomatis mengikuti sistem) */
:root{
  --bg:#F3F5F7; --surface:#FFFFFF; --surface-raised:#F6F8FA; --border:#DBDBDC;
  --text:#222222; --text-muted:#616161;
  --brand:#26A3DD; --brand-dark:#1A89C9; --brand-light:#70C3E9; --electric:#194BFF; --brand-red:#FF1414;
  --accent:#006AAE; --accent-soft:rgba(38,163,221,0.12);
  --ok:#1A7041; --ok-soft:rgba(30,123,70,0.12);
  --warn:#8F5C04; --warn-soft:rgba(143,92,4,0.13);
  --crit:#C21D28; --crit-soft:rgba(211,32,43,0.10);
  --info:#616161; --info-soft:rgba(97,97,97,0.10);
  --on-solid:#FFFFFF; --border-strong:#8A8F94;
  --shadow:0 1px 2px rgba(20,30,45,0.05), 0 10px 28px rgba(20,30,45,0.06);
  --radius-s:8px; --radius-m:12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0E11; --surface:#14181D; --surface-raised:#1C2127; --border:#2A3037;
    --text:#F3F3F3; --text-muted:#A0A8B0;
    --brand:#26A3DD; --brand-dark:#1A89C9; --brand-light:#70C3E9; --electric:#3D63FF; --brand-red:#FF4B4B;
    --accent:#70C3E9; --accent-soft:rgba(38,163,221,0.16);
    --ok:#3DD68C; --ok-soft:rgba(61,214,140,0.14);
    --warn:#F5B942; --warn-soft:rgba(245,185,66,0.15);
    --crit:#FF5B5F; --crit-soft:rgba(255,91,95,0.16);
    --info:#A0A8B0; --info-soft:rgba(160,168,176,0.14);
    --on-solid:#0B0E11; --border-strong:#66707A;
    --shadow:0 1px 2px rgba(0,0,0,0.35), 0 14px 34px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
    --bg:#0B0E11; --surface:#14181D; --surface-raised:#1C2127; --border:#2A3037;
    --text:#F3F3F3; --text-muted:#A0A8B0;
    --brand:#26A3DD; --brand-dark:#1A89C9; --brand-light:#70C3E9; --electric:#3D63FF; --brand-red:#FF4B4B;
    --accent:#70C3E9; --accent-soft:rgba(38,163,221,0.16);
    --ok:#3DD68C; --ok-soft:rgba(61,214,140,0.14);
    --warn:#F5B942; --warn-soft:rgba(245,185,66,0.15);
    --crit:#FF5B5F; --crit-soft:rgba(255,91,95,0.16);
    --info:#A0A8B0; --info-soft:rgba(160,168,176,0.14);
    --on-solid:#0B0E11; --border-strong:#66707A;
    --shadow:0 1px 2px rgba(0,0,0,0.35), 0 14px 34px rgba(0,0,0,0.4);
}
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{ color-scheme: dark; }

*{ box-sizing:border-box; }
html{ padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Montserrat',ui-sans-serif,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; font-size:15px; }
a{ color:var(--accent); }
h1,h2,h3{ text-wrap:balance; margin:0; }
.mono, code, .stat-value, .tenant-code, .source-badge, .updated, .feed-time, time{ font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; }
.page{ max-width:min(1720px, 96vw); margin-inline:auto; padding-inline:20px; padding-block:18px 40px; }

/* ---------- topbar / nav ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.brand-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand svg{ color:var(--accent); flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; gap:2px; }
.brand-name{ font-size:1.25rem; font-weight:800; letter-spacing:-0.01em; }
.brand-tag{ font-size:0.76rem; color:var(--text-muted); font-weight:500; }
.brand-tagline{ font-size:0.72rem; line-height:1.2; color:var(--text-muted); font-weight:500; letter-spacing:0.01em; }
.brand-tagline b{ color:var(--accent); font-weight:800; }
@media (max-width:420px){ .brand-tagline{ font-size:0.72rem; } }
.nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav a{ text-decoration:none; color:var(--text-muted); font-weight:600; font-size:0.86rem; padding:7px 12px; border-radius:999px; }
.nav a:hover{ background:var(--surface-raised); color:var(--text); }
.nav a.active{ background:var(--accent-soft); color:var(--accent); }
/* Desktop: menu jadi sidebar kiri (mobile/tablet tetap topbar horizontal) */
@media (min-width:901px){
  body.has-sidebar{ padding-left:240px; }
  body.has-sidebar .topbar{ position:fixed; inset:0 auto 0 0; width:240px; flex-direction:column; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap; gap:20px; margin:0; padding:20px 14px; background:var(--surface); border-bottom:0; border-right:1px solid var(--border); overflow-y:auto; z-index:20; }
  body.has-sidebar .nav{ flex:1; flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:2px; }
  body.has-sidebar .nav a{ border-radius:var(--radius-s); padding:9px 12px; }
  body.has-sidebar .nav-user{ margin:auto 0 0; padding:12px 12px 4px; border-top:1px solid var(--border); }
}
.nav-user{ font-size:0.8rem; color:var(--text-muted); margin-left:10px; }
.nav-logout{ font-size:0.8rem !important; }

/* ---------- flash ---------- */
.flash{ padding:10px 14px; border-radius:var(--radius-s); margin-bottom:14px; font-size:0.86rem; font-weight:600; border:1px solid var(--border); background:var(--surface); }
.flash-ok{ color:var(--ok); background:var(--ok-soft); border-color:transparent; }
.flash-err{ color:var(--crit); background:var(--crit-soft); border-color:transparent; }
.flash-info{ color:var(--accent); background:var(--accent-soft); border-color:transparent; }

/* ---------- header row (live pill etc) ---------- */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar h1{ font-size:1.05rem; font-weight:800; }
.toolbar-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.live-pill{ display:inline-flex; align-items:center; gap:7px; font-size:0.78rem; font-weight:700; color:var(--ok); background:var(--ok-soft); padding:5px 12px 5px 10px; border-radius:999px; }
.live-pill.stale{ color:var(--warn); background:var(--warn-soft); }
.pulse-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(42,157,92,0.35);} 70%{ box-shadow:0 0 0 7px rgba(42,157,92,0);} 100%{ box-shadow:0 0 0 0 rgba(42,157,92,0);} }
@media (prefers-reduced-motion:reduce){ .pulse-dot{ animation:none; } }
.sync-time{ font-size:0.78rem; color:var(--text-muted); }
.sync-time time{ color:var(--text); }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:24px; }
.stat-link{ text-decoration:none; color:inherit; } .stat-link:hover{ border-color:var(--accent); }
.tenant-card-head{ text-decoration:none; color:inherit; }
.chip-link{ text-decoration:none; }
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:16px 18px; box-shadow:var(--shadow); border-left:3px solid var(--border); display:flex; flex-direction:column; gap:4px; }
.stat-tile.crit{ border-left-color:var(--crit); } .stat-tile.warn{ border-left-color:var(--warn); } .stat-tile.ok{ border-left-color:var(--ok); }
.stat-value{ font-size:1.6rem; font-weight:600; font-variant-numeric:tabular-nums; }
.stat-label{ font-size:0.78rem; color:var(--text-muted); font-weight:600; }

/* ---------- layout ---------- */
.dashboard-grid{ display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:start; }
.section-title{ font-size:0.95rem; font-weight:700; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.section-title a{ font-size:0.78rem; font-weight:600; text-decoration:none; }
.tenant-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; align-items:stretch; }

/* ---------- tenant card ---------- */
.tenant-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease; }
.tenant-card:hover{ transform:translateY(-2px); }
.tenant-card-head:hover .tenant-name{ color:var(--accent); }
.tenant-card-head{ display:flex; align-items:baseline; gap:8px; }
.tenant-code{ font-size:0.72rem; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:2px 6px; border-radius:5px; letter-spacing:0.02em; }
.tenant-name{ font-size:0.92rem; font-weight:700; }
.service-rows{ display:flex; flex-direction:column; gap:8px; }
.service-row{ display:flex; align-items:center; gap:8px; }
.source-badge{ font-size:0.68rem; font-weight:600; padding:2px 7px; border-radius:5px; border:1px solid var(--border); color:var(--text-muted); min-width:44px; text-align:center; }
.status-chip{ font-size:0.74rem; font-weight:700; padding:2px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.status-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-chip.ok{ color:var(--ok); background:var(--ok-soft); }
.status-chip.warn{ color:var(--warn); background:var(--warn-soft); }
.status-chip.crit{ color:var(--crit); background:var(--crit-soft); }
.status-chip.info{ color:var(--info); background:var(--info-soft); }
.status-chip.off{ color:var(--text-muted); background:var(--surface-raised); }
.updated{ margin-left:auto; font-size:0.7rem; color:var(--text-muted); }
.history-dots{ display:flex; gap:3px; }
.history-dots span{ width:9px; height:9px; border-radius:2px; background:var(--ok-soft); }
.history-dots span.warn{ background:var(--warn); } .history-dots span.crit{ background:var(--crit); }
.poll-error{ font-size:0.7rem; color:var(--crit); }

/* ---------- incident feed ---------- */
.incident-feed{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:16px; box-shadow:var(--shadow); position:sticky; top:calc(16px + env(safe-area-inset-top,0px)); }
.feed-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.feed-item{ display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); }
.feed-item:last-child{ border-bottom:none; padding-bottom:0; } .feed-item:first-child{ padding-top:0; }
.feed-stripe{ width:3px; border-radius:3px; align-self:stretch; flex-shrink:0; background:var(--info); }
.feed-item.crit .feed-stripe{ background:var(--crit); } .feed-item.warn .feed-stripe{ background:var(--warn); } .feed-item.ok .feed-stripe{ background:var(--ok); }
.feed-body{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.feed-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.feed-time{ margin-left:auto; font-size:0.68rem; color:var(--text-muted); }
.feed-service{ font-size:0.84rem; font-weight:700; margin:0; }
.feed-service a{ color:inherit; text-decoration:none; }
.feed-desc{ font-size:0.78rem; color:var(--text-muted); margin:0; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.feed-ack{ font-size:0.7rem; color:var(--ok); }
.empty{ color:var(--text-muted); font-size:0.84rem; padding:12px 0; }

/* ---------- cards / forms / tables ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:18px; box-shadow:var(--shadow); margin-bottom:18px; }
.card h2{ font-size:0.95rem; font-weight:700; margin-bottom:12px; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 16px; }
.form-grid .full{ grid-column:1 / -1; }
.chk-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; }
label{ display:flex; flex-direction:column; gap:5px; font-size:0.78rem; font-weight:600; color:var(--text-muted); }
label.inline{ flex-direction:row; align-items:center; gap:8px; font-weight:600; color:var(--text); }
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{
  font:inherit; font-size:0.9rem; padding:9px 11px; border-radius:var(--radius-s); border:1px solid var(--border-strong);
  background:var(--surface-raised); color:var(--text); width:100%; }
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.help{ font-size:0.72rem; color:var(--text-muted); font-weight:500; }
.btn{ font:inherit; font-size:0.84rem; font-weight:700; padding:9px 14px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface-raised); color:var(--text); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn:hover{ border-color:var(--accent); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-danger{ color:var(--crit); }
.btn-sm{ padding:5px 10px; font-size:0.76rem; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.table-wrap{ overflow-x:auto; }
td.mono, td.nowrap{ white-space:nowrap; }
table{ width:100%; border-collapse:collapse; font-size:0.84rem; }
th,td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
th{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
tr:last-child td{ border-bottom:none; }
.muted{ color:var(--text-muted); }
.small{ font-size:0.76rem; }
.webhook-url{ font-size:0.74rem; word-break:break-all; background:var(--surface-raised); padding:8px 10px; border-radius:var(--radius-s); border:1px dashed var(--border); }
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:14px; }
.filters label{ min-width:140px; }
.badge-role{ font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.event-detail p{ white-space:pre-wrap; font-size:0.88rem; line-height:1.5; }
.kv{ display:grid; grid-template-columns:140px 1fr; gap:6px 12px; font-size:0.84rem; }
.kv dt{ color:var(--text-muted); font-weight:600; } .kv dd{ margin:0; }
.check-result{ display:flex; flex-direction:column; gap:6px; font-size:0.82rem; }
.check-result .ok{ color:var(--ok); } .check-result .err{ color:var(--crit); }

/* ---------- koneksi Jira ---------- */
.conn-strip{ display:flex; align-items:center; gap:12px; padding:10px 14px; margin-bottom:14px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface); font-size:0.84rem; flex-wrap:wrap; }
.conn-strip .conn-dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); flex:none; }
.conn-strip.conn-warn .conn-dot{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); }
.conn-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:200px; }
.conn-actions{ display:flex; gap:6px; }
.connect-card{ border-color:var(--accent); }
.connect-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
.connect-head h2{ margin-bottom:4px; }
.steps{ margin:0 0 16px 18px; padding:0; font-size:0.86rem; line-height:1.55; display:flex; flex-direction:column; gap:8px; }
.steps code{ font-family:var(--mono, "IBM Plex Mono", monospace); font-size:0.8em; background:var(--surface-raised); padding:1px 5px; border-radius:4px; }
.copy-row{ display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.copy-row .webhook-url{ flex:1; min-width:220px; }
.alt-method{ margin-top:16px; border-top:1px dashed var(--border); padding-top:12px; }
.alt-method summary{ cursor:pointer; font-size:0.82rem; font-weight:700; color:var(--text-muted); }
.alt-method form{ margin-top:10px; }

/* ---------- login ---------- */
.login-wrap{ max-width:380px; margin:8vh auto 0; }
.login-wrap .brand-link{ justify-content:center; margin-bottom:22px; }
.login-wrap form{ display:flex; flex-direction:column; gap:12px; }

footer.note{ margin-top:26px; font-size:0.74rem; color:var(--text-muted); }

/* ---------- responsive ---------- */
@media (max-width:960px){ .dashboard-grid{ grid-template-columns:1fr; } .incident-feed{ position:static; } }
@media (max-width:640px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .topbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .nav{ width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .nav a{ white-space:nowrap; }
  .nav-user{ display:none; }
  .kv{ grid-template-columns:1fr; }
}
@media (max-width:420px){ .tenant-list{ grid-template-columns:1fr; } .stat-value{ font-size:1.35rem; } .page{ padding-inline:14px; } }

/* ---------- tabel tiket + pager ---------- */
.ticket-cell{ min-width:260px; }
.ticket-cell a{ font-weight:600; }
.ticket-summary{ display:block; font-size:0.8rem; color:var(--text-muted); margin-top:2px; line-height:1.35; }
.due-over{ color:var(--crit); font-weight:700; }
.due-soon{ color:var(--warn); font-weight:700; }
.pager{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:12px; margin-top:4px; border-top:1px solid var(--border); flex-wrap:wrap; }
.pager-btns{ display:flex; align-items:center; gap:10px; }
.btn.disabled{ opacity:0.4; pointer-events:none; }

/* ---------- panel beban engineer + due date ---------- */
.panels-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.panel{ margin-bottom:0; }
.panel-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.panel-head h2{ margin-bottom:0; }
table.compact th, table.compact td{ padding:7px 6px; }
table.compact th.num, table.compact td.num{ text-align:right; font-variant-numeric:tabular-nums; }
tr.muted td{ color:var(--text-muted); }
.num-link{ text-decoration:none; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface-raised); color:var(--text); }
.num-link.warn{ color:var(--warn); background:var(--warn-soft); }
.num-link.info{ color:var(--info); background:var(--info-soft); }
.num-link.strong{ background:var(--accent-soft); color:var(--accent); }
.num-link:hover{ outline:1px solid var(--accent); }
.due-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; }
.due-item{ display:grid; grid-template-columns:64px 1fr auto; gap:10px; align-items:start; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.84rem; }
.due-item:last-child{ border-bottom:none; }
.due-when{ display:flex; flex-direction:column; font-weight:700; line-height:1.2; }
.due-when small{ font-weight:500; color:var(--text-muted); font-size:0.7rem; }
.due-item.over .due-when{ color:var(--crit); } .due-item.soon .due-when{ color:var(--warn); }
.due-body{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.due-body a{ font-weight:700; }
.due-summary{ flex-basis:100%; color:var(--text-muted); font-size:0.78rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.due-who{ text-align:right; white-space:nowrap; line-height:1.6; }
@media (max-width:860px){ .panels-2{ grid-template-columns:1fr; } }

/* ---------- detail tiket ---------- */
.ticket-grid{ display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
.update-card{ position:sticky; top:16px; }
.update-form{ display:flex; flex-direction:column; gap:12px; }
.update-form label .help{ font-weight:500; }
.pre{ white-space:pre-wrap; font-size:0.88rem; line-height:1.5; }
.comment-form textarea{ width:100%; }
.comment-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.comment{ border-top:1px solid var(--border); padding-top:10px; }
.comment-meta{ font-size:0.82rem; margin-bottom:4px; }
.comment .pre{ margin:0; font-size:0.86rem; }
@media (max-width:900px){ .ticket-grid{ grid-template-columns:1fr; } .update-card{ position:static; } }

/* ---------- halaman Monitoring ---------- */
.mon-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.mon-pick{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mon-select-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; gap:3px; }
.mon-select-label select{ font-size:1rem; font-weight:700; min-width:260px; padding:9px 12px; }
.overall-badge{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:0.86rem; padding:7px 14px; border-radius:999px; }
.overall-badge .dot{ width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.overall-badge.ok{ color:var(--ok); background:var(--ok-soft); } .overall-badge.warn{ color:var(--warn); background:var(--warn-soft); } .overall-badge.crit{ color:var(--crit); background:var(--crit-soft); }
.mon-stats{ grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:10px; margin-bottom:18px; }
.mon-stats .stat-tile{ padding:13px 14px; } .mon-stats .stat-value{ font-size:1.4rem; } .mon-stats .stat-label{ font-size:0.72rem; }
.stat-sub{ font-size:0.9rem; color:var(--text-muted); font-weight:500; }
.timeline30{ display:grid; grid-template-columns:repeat(30,1fr); gap:3px; height:26px; }
.timeline30 span{ border-radius:3px; background:var(--ok-soft); }
.timeline30 span.warn{ background:var(--warn); } .timeline30 span.crit{ background:var(--crit); }
.timeline-axis{ display:flex; justify-content:space-between; margin-top:6px; }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.svc-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface-raised); border-left:3px solid var(--ok); }
.svc-tile.warn{ border-left-color:var(--warn); } .svc-tile.crit{ border-left-color:var(--crit); background:var(--crit-soft); }
.svc-name{ font-size:0.82rem; font-weight:600; line-height:1.25; }
.mon-azure{ grid-template-columns:1fr 1fr; }
.bar-stack{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--surface-raised); }
.bar-stack span{ display:block; height:100%; } .bar-stack .ok{ background:var(--ok); } .bar-stack .warn{ background:var(--warn); } .bar-stack .crit{ background:var(--crit); } .bar-stack .off{ background:var(--border); }
.legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; color:var(--text-muted); } .legend b{ color:var(--text); }
.sw{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; } .sw.ok{ background:var(--ok); } .sw.warn{ background:var(--warn); } .sw.crit{ background:var(--crit); } .sw.off{ background:var(--border); }
.hbars{ display:flex; flex-direction:column; gap:7px; }
.hbar{ display:grid; grid-template-columns:150px 1fr 70px; gap:10px; align-items:center; font-size:0.82rem; }
.hbar-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-weight:600; }
.hbar-track{ height:10px; background:var(--surface-raised); border-radius:999px; overflow:hidden; }
.hbar-fill{ display:block; height:100%; border-radius:999px; } .hbar-fill.accent{ background:var(--accent); } .hbar-fill.warn{ background:var(--warn); } .hbar-fill.crit{ background:var(--crit); }
.hbar-val{ text-align:right; font-size:0.8rem; }
.adv-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:0.84rem; }
.adv-list li{ border-top:1px solid var(--border); padding-top:8px; line-height:1.4; }
.conn-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; font-size:0.84rem; }
.app-config{ border:1px solid var(--border); border-radius:var(--radius-s); padding:12px 14px; margin:6px 0 16px; background:var(--surface-raised); }
.app-config h3{ font-size:0.92rem; margin:0; }
.app-config .panel-head{ margin-bottom:8px; }
.conn-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.conn-item{ padding:8px 0; border-top:1px solid var(--border); }
.conn-item:first-child{ border-top:none; padding-top:2px; }
.conn-label{ min-width:110px; display:inline-block; font-size:0.9rem; }
.perm-note{ margin-top:4px; }
.perm-note summary{ cursor:pointer; }
.perm-note p{ margin:6px 0 0; }
@media (max-width:860px){ .mon-azure{ grid-template-columns:1fr; } .hbar{ grid-template-columns:110px 1fr 60px; } .mon-select-label select{ min-width:0; width:100%; } .timeline30{ height:18px; } }

/* ---------- dashboard hero ---------- */
.hero{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 22px; border-radius:var(--radius-m); border:1px solid var(--border); background:linear-gradient(135deg, var(--surface) 0%, var(--accent-soft) 100%); box-shadow:var(--shadow); margin-bottom:18px; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent); }
.hero.ok::before{ background:var(--ok); } .hero.warn::before{ background:var(--warn); } .hero.crit::before{ background:var(--crit); }
.hero.warn{ background:linear-gradient(135deg, var(--surface) 0%, var(--warn-soft) 100%); } .hero.crit{ background:linear-gradient(135deg, var(--surface) 0%, var(--crit-soft) 100%); }
.hero-main{ display:flex; align-items:center; gap:18px; min-width:0; }
.hero-ring{ position:relative; width:76px; height:76px; flex:none; }
.hero-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:var(--border); stroke-width:3.2; }
.ring-fg{ fill:none; stroke:var(--ok); stroke-width:3.2; stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.hero.warn .ring-fg{ stroke:var(--warn); } .hero.crit .ring-fg{ stroke:var(--crit); }
.hero-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:0.86rem; }
.hero-kicker{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:700; }
.hero-title{ font-size:1.35rem; font-weight:800; margin:2px 0 4px; letter-spacing:-0.01em; }
.hero-sub{ margin:0; font-size:0.86rem; color:var(--text-muted); }
.hero-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.hero-legend{ display:flex; gap:10px; font-size:0.76rem; color:var(--text-muted); }
.hero-legend .lg::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.hero-legend .ok::before{ background:var(--ok); } .hero-legend .warn::before{ background:var(--warn); } .hero-legend .crit::before{ background:var(--crit); }
.hero-legend b{ color:var(--text); }
.stat-tile{ position:relative; }
.stat-ico{ position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:8px; background:var(--surface-raised); display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.stat-ico svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.stat-tile.crit .stat-ico{ color:var(--crit); background:var(--crit-soft); } .stat-tile.warn .stat-ico{ color:var(--warn); background:var(--warn-soft); } .stat-tile.ok .stat-ico{ color:var(--ok); background:var(--ok-soft); }
.tenant-card{ border-top:3px solid var(--ok); cursor:pointer; }
.card-foot{ display:flex; justify-content:space-between; align-items:center; }
.detail-link{ color:var(--accent); font-weight:700; }
.tenant-card.lvl-warn{ border-top-color:var(--warn); } .tenant-card.lvl-crit{ border-top-color:var(--crit); box-shadow:0 0 0 1px var(--crit-soft), var(--shadow); }
.tenant-card-head{ flex-wrap:wrap; }
.lvl-pill{ margin-left:auto; font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:999px; }
.lvl-pill.ok{ color:var(--ok); background:var(--ok-soft); } .lvl-pill.warn{ color:var(--warn); background:var(--warn-soft); } .lvl-pill.crit{ color:var(--crit); background:var(--crit-soft); }
.facts{ display:flex; flex-direction:column; gap:4px; font-size:0.76rem; color:var(--text-muted); border-top:1px dashed var(--border); padding-top:8px; }
.fact b{ color:var(--text); font-family:'IBM Plex Mono',monospace; }
.fact.warn b{ color:var(--warn); } .fact.crit b{ color:var(--crit); }
@media (max-width:640px){ .hero-side{ align-items:flex-start; } .hero-title{ font-size:1.1rem; } }

/* ---------- pesan bisa ditutup + auto-poll ---------- */
.flash{ position:relative; padding-right:40px; transition:opacity .18s ease, height .18s ease, margin .18s ease, padding .18s ease; }
.flash-close{ position:absolute; top:6px; right:8px; width:26px; height:26px; line-height:1; font-size:1.15rem; border:0; border-radius:50%; background:transparent; color:inherit; opacity:.55; cursor:pointer; }
.flash-close:hover{ opacity:1; background:rgba(128,128,128,0.15); }
.flash-closing{ opacity:0; height:0 !important; margin:0; padding-block:0; overflow:hidden; }
.auto-poll{ display:inline-flex; flex-direction:row !important; align-items:center; gap:6px; white-space:nowrap; font-size:0.78rem; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px 10px 3px 8px; }
.auto-poll select{ width:auto; font-size:0.78rem; font-weight:700; padding:2px 4px; border:0; background:transparent; color:var(--text); }
.auto-poll select:focus{ outline:2px solid var(--accent); border-radius:4px; }
.auto-poll-ico{ color:var(--accent); font-size:0.9rem; }
#autopoll-next{ font-family:'IBM Plex Mono',monospace; white-space:nowrap; }

/* ---------- detail issue layanan M365 ---------- */
.svc-tile.svc-clickable{ cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit; }
.svc-tile.svc-clickable:hover{ border-color:var(--accent); }
.svc-tile-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; }
.svc-more{ font-size:0.7rem; font-weight:700; color:var(--accent); white-space:nowrap; }
.svc-dialog{ width:min(720px,92vw); max-height:84vh; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); color:var(--text); padding:22px; box-shadow:var(--shadow); }
.svc-dialog::backdrop{ background:rgba(8,12,16,0.55); }
.svc-dialog h2{ font-size:1.05rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding-right:40px; }
.svc-dialog-close{ position:absolute; top:12px; right:14px; margin:0; }
.svc-issue{ border-top:1px solid var(--border); padding-top:12px; margin-top:12px; }
.svc-issue:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.svc-issue h3{ font-size:0.95rem; font-weight:700; margin:6px 0 2px; }
.svc-issue .pre{ font-size:0.84rem; margin:8px 0 0; }
.svc-post{ background:var(--surface-raised); border-radius:var(--radius-s); padding:10px 12px; }

/* ---------- Customer List ---------- */
.filter-actions{ display:flex; gap:8px; align-items:flex-end; }
.view-toggle{ display:inline-flex; align-self:flex-end; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.view-toggle a{ padding:6px 14px; font-size:0.78rem; font-weight:700; color:var(--text-muted); text-decoration:none; }
.view-toggle a.active{ background:var(--accent); color:#fff; }
.cust-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); }
.cust-card{ display:flex; flex-direction:column; gap:10px; }
.cust-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cust-name{ font-size:1.02rem; font-weight:800; line-height:1.25; }
.cust-counts{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cust-cost{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:0.8rem; font-weight:600; color:var(--text-muted); }
.cust-contracts{ list-style:none; display:flex; flex-direction:column; gap:8px; border-top:1px dashed var(--border); padding-top:10px; }
.cust-contracts li{ display:flex; flex-direction:column; gap:3px; }
.cust-row-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cust-svc{ font-size:0.86rem; font-weight:600; line-height:1.3; }
.cust-row-meta{ display:flex; flex-wrap:wrap; gap:4px 10px; font-size:0.72rem; color:var(--text-muted); }
.cust-days{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.cust-days.warn{ color:var(--warn); } .cust-days.crit{ color:var(--crit); }
td.num, th.num{ text-align:right; }
@media (max-width:640px){ .cust-grid{ grid-template-columns:1fr; } }
.cust-total{ font-size:1.05rem !important; font-family:'IBM Plex Mono',monospace; line-height:1.25; word-break:break-word; padding-right:26px; }
.exp-list{ list-style:none; display:flex; flex-direction:column; }
.exp-item{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:9px 0; border-top:1px solid var(--border); font-size:0.82rem; }
.exp-item:first-child{ border-top:0; }
.exp-when{ font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--text-muted); white-space:nowrap; min-width:88px; }
.exp-who{ flex:1 1 240px; min-width:0; }
.exp-item .status-chip{ white-space:nowrap; }
.cust-row-top .status-chip{ white-space:nowrap; flex:none; }
.cust-svc{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
td.nw, th.nw{ white-space:nowrap; }
.page-wide .cust-grid{ grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); }

/* ---------- layar lebar: manfaatkan ruang, jangan biarkan kolom melar ---------- */
@media (min-width:1400px){
  .dashboard-grid{ grid-template-columns:1fr 400px; }
  .ticket-grid{ grid-template-columns:1fr 380px; }
  .tenant-list{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
  .svc-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
  .panels-2{ gap:18px; }
}

/* ---------- Resource Health per resource ---------- */
.rh-list{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.rh-item{ border-left:3px solid var(--border); background:var(--surface-raised); border-radius:var(--radius-s); padding:10px 12px; }
.rh-item.crit{ border-left-color:var(--crit); } .rh-item.warn{ border-left-color:var(--warn); } .rh-item.off{ border-left-color:var(--border); }
.rh-head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.rh-sum{ font-size:0.82rem; line-height:1.5; margin:6px 0 0; }
.rh-more{ margin-top:7px; font-size:0.78rem; }
.rh-more summary{ cursor:pointer; color:var(--accent); font-weight:600; }
.rh-acts, .rh-hist{ list-style:none; display:flex; flex-direction:column; gap:6px; margin:8px 0 0; padding-left:2px; }
.rh-acts li{ line-height:1.5; padding-left:14px; position:relative; }
.rh-acts li::before{ content:'→'; position:absolute; left:0; color:var(--accent); }
.rh-hist li{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; border-top:1px dashed var(--border); padding-top:6px; }
.rh-hist li:first-child{ border-top:0; padding-top:0; }

/* ---------- paginasi isi kartu (maks 10 baris) ---------- */
.card-pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.card-pager-info{ font-family:'IBM Plex Mono',monospace; font-size:0.74rem; color:var(--text-muted); }
.card-pager-btns{ display:flex; gap:8px; }
.card-pager .btn[disabled]{ opacity:.4; cursor:default; }

/* ---------- ringkasan Azure & Microsoft 365 di dashboard ---------- */
.cloud-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; align-items:start; }
.cloud-card{ display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
.cloud-card::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; }
.cloud-card.az::before{ background:linear-gradient(90deg,#0a7bbd,#4fc3f7); }
.cloud-card.ms::before{ background:linear-gradient(90deg,#d13438,#f2a900 35%,#2d9c3f 70%,#0a7bbd); }
.cloud-card.cx::before{ background:linear-gradient(90deg,#7c5cff,#c77cff); }
@media (max-width:1400px){ .cloud-summary{ grid-template-columns:1fr 1fr; } }
.cloud-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.cloud-head h2{ font-size:1.02rem; display:flex; align-items:center; gap:8px; }
.cloud-ico{ font-size:1.05rem; color:var(--accent); }
.cloud-sub{ font-size:0.78rem; color:var(--text-muted); margin:-4px 0 2px; }
.cloud-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; }
.cloud-metric{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--border);
  border-left-width:3px; border-radius:var(--radius-s); background:var(--surface-raised); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease; }
.cloud-metric:hover{ border-color:var(--accent); transform:translateY(-1px); }
.cloud-metric.ok{ border-left-color:var(--ok); } .cloud-metric.warn{ border-left-color:var(--warn); } .cloud-metric.crit{ border-left-color:var(--crit); }
.cloud-num{ font-size:1.5rem; font-weight:800; line-height:1.15; font-family:'IBM Plex Mono',monospace; overflow-wrap:anywhere; white-space:normal; }
.cloud-num small{ font-size:0.8rem; font-weight:600; color:var(--text-muted); }
.cloud-num.money{ font-size:1.15rem; white-space:nowrap; }
.cloud-lbl{ font-size:0.76rem; font-weight:700; }
.cloud-note{ font-size:0.68rem; color:var(--text-muted); }
@media (max-width:900px){ .cloud-summary{ grid-template-columns:1fr; } }

/* ---------- pilar Zero Trust (halaman Zero Trust) ---------- */
.zt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.zt-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:16px 18px;
  box-shadow:var(--shadow); border-left:3px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.zt-card.ok{ border-left-color:var(--ok); } .zt-card.warn{ border-left-color:var(--warn); } .zt-card.crit{ border-left-color:var(--crit); }
.zt-card.gap{ border-left-color:var(--border); opacity:.72; }
.zt-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.zt-card-head h3{ font-size:0.98rem; margin:0; }
.zt-score{ font-family:'IBM Plex Mono',monospace; font-weight:800; font-size:1.35rem; white-space:nowrap; }
.zt-score.ok{ color:var(--ok); } .zt-score.warn{ color:var(--warn); } .zt-score.crit{ color:var(--crit); }
.zt-checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.zt-checks li{ font-size:0.8rem; padding-left:18px; position:relative; }
.zt-checks li.ok::before{ content:'✓'; position:absolute; left:0; color:var(--ok); font-weight:700; }
.zt-checks li.bad::before{ content:'✕'; position:absolute; left:0; color:var(--crit); font-weight:700; }
.zt-grid{ align-items:start; }
.zt-card:has(.zt-detail){ cursor:pointer; }
.zt-detail{ margin-top:12px; border-top:1px dashed var(--border); padding-top:10px; }
.zt-detail summary{ list-style:none; cursor:pointer; font-size:0.78rem; font-weight:700; color:var(--accent); }
.zt-detail summary::-webkit-details-marker{ display:none; }
.zt-detail summary::after{ content:" ▾"; }
.zt-detail[open] summary::after{ content:" ▴"; }
.zt-detail[open] .zt-sec{ animation:nav-pop .2s ease; }
.zt-sec{ margin-top:10px; cursor:default; }
.zt-sec h4{ margin:0 0 4px; font-size:0.78rem; color:var(--text); }
.zt-sec ul{ margin:0; padding-left:16px; display:flex; flex-direction:column; gap:3px; }
.zt-sec li{ font-size:0.76rem; color:var(--text-muted); word-break:break-word; }
@media (max-width:1100px){ .zt-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .zt-grid{ grid-template-columns:1fr; } }

/* ---------- identitas subscription (halaman Azure) ---------- */
.sub-strip{ display:flex; flex-direction:column; align-items:stretch; gap:0;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius-m); padding:10px 14px 2px; margin-bottom:16px; }
.sub-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.sub-ico{ font-size:1.02rem; color:var(--accent); }
.sub-name{ font-size:0.88rem; display:block; }
.sub-side{ display:flex; flex-direction:column; gap:2px; text-align:right; }
@media (max-width:760px){ .sub-side{ text-align:left; } }
.sub-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:9px; }
.sub-head > div{ flex:1; min-width:0; }
.sub-head strong{ font-size:0.84rem; }
.sub-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; margin-top:2px; color:var(--text-muted); font-size:0.71rem; }
.sub-meta span{ display:flex; align-items:center; gap:8px; }
.sub-meta span:not(:last-child)::after{ content:''; width:3px; height:3px; border-radius:50%; background:var(--border); display:inline-block; }
.sub-meta .mono{ font-family:'IBM Plex Mono',monospace; }
.sub-list{ list-style:none; display:flex; flex-direction:column; }
.sub-item{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  padding:7px 0; border-top:1px solid var(--border); }
.sub-item-main{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:0.8rem; }
.sub-item-id{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:0.68rem; color:var(--text-muted); }
.sub-item-id .mono{ font-family:'IBM Plex Mono',monospace; }
.sub-item-id .btn{ padding:2px 8px; font-size:0.68rem; }

@keyframes nav-pop{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ---------- Day-2: owner, catatan, tren, temuan, health ---------- */
.owner-form{ display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center; margin-right:8px; }
.note-list{ list-style:none; margin:8px 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; }
.note-list li{ background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-s); padding:8px 12px; font-size:0.86rem; }
.note-list li.system{ background:transparent; border-style:dashed; color:var(--text-muted); }
.note-form{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.note-form textarea{ width:100%; max-width:640px; }
.trend-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.trend-card{ background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-s); padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.trend-top{ display:flex; justify-content:space-between; align-items:baseline; }
.trend-top strong{ font-family:'IBM Plex Mono',monospace; font-size:1.05rem; }
.trend-top .ok, .spark.ok{ color:var(--ok); } .trend-top .warn, .spark.warn{ color:var(--warn); } .trend-top .crit, .spark.crit{ color:var(--crit); }
.spark{ width:100%; height:auto; max-height:44px; }
.trend-up{ color:var(--ok); } .trend-down{ color:var(--crit); }
.active-range{ font-weight:800; color:var(--text); }
#tren{ margin-bottom:22px; }
.health-ico{ width:34px; text-align:center; font-weight:800; }
.health-ico.ok{ color:var(--ok); } .health-ico.warn{ color:var(--warn); } .health-ico.crit{ color:var(--crit); }
a.stat-tile{ color:inherit; }
.health-banner{ margin-bottom:14px; }
.report{ display:flex; flex-direction:column; gap:16px; }
.report-title{ font-size:1.35rem; margin:2px 0 4px; }
@media print{
  body.has-sidebar{ padding-left:0 !important; }
  .topbar, .no-print, footer.note, .flash{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12px; }
  .page{ max-width:none; padding:0; }
  .card, .stat-tile{ box-shadow:none !important; break-inside:avoid; }
  .report .card{ margin-bottom:10px; }
}
.lang-switch{ display:inline-flex; align-items:center; gap:2px; font-size:0.74rem; font-weight:700; color:var(--text-muted); }
.lang-switch a{ padding:3px 7px !important; border-radius:6px !important; }
.nav .lang-switch{ margin:10px 0 0 10px; }
.lang-switch a.active{ background:var(--accent-soft); color:var(--accent); }
.lang-float{ position:fixed; top:12px; right:14px; z-index:30; }
.lang-float a{ text-decoration:none; color:var(--text-muted); }
@media (min-width:901px){ body.has-sidebar .nav .lang-switch{ margin:12px 0 0 0; padding:0 6px; } }

/* ---------- dashboard v2: hero, KPI, domain panels, "perlu ditindak" ---------- */
.hero{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:14px; padding:18px 22px 16px; }
.hero-top{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-badge{ flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; color:var(--text-muted); background:var(--surface-raised); border:1px solid var(--border); }
.hero.ok .hero-badge{ color:var(--ok); background:var(--ok-soft); border-color:transparent; }
.hero.warn .hero-badge{ color:var(--warn); background:var(--warn-soft); border-color:transparent; }
.hero.crit .hero-badge{ color:var(--crit); background:var(--crit-soft); border-color:transparent; }
.hero-side{ align-items:flex-end; }
.hero-bottom{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.health-bar{ flex:1 1 220px; min-width:160px; height:8px; border-radius:99px; background:var(--surface-raised); border:1px solid var(--border); display:flex; overflow:hidden; }
.health-bar .hb{ display:block; height:100%; width:0; transition:width .4s ease; }
.hb.ok{ background:var(--ok); } .hb.warn{ background:var(--warn); } .hb.crit{ background:var(--crit); }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:16px 0 18px; }
.kpi{ position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 16px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); text-decoration:none; color:inherit; overflow:hidden; }
.kpi::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--border); }
.kpi.ok::before{ background:var(--ok); } .kpi.warn::before{ background:var(--warn); } .kpi.crit::before{ background:var(--crit); }
a.kpi:hover{ border-color:var(--accent); }
.kpi-lbl{ font-size:0.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.kpi-val{ font-family:'IBM Plex Mono',monospace; font-size:2.4rem; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; }
.kpi.crit .kpi-val{ color:var(--crit); } .kpi.warn .kpi-val{ color:var(--warn); }
.kpi-sub{ font-size:0.76rem; color:var(--text-muted); min-height:1.1em; }

.domains{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; align-items:stretch; }
.dom{ padding:14px 16px 8px; display:flex; flex-direction:column; }
.dom-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.dom-head h2{ font-size:0.98rem; font-weight:800; margin:0; }
.dom-sub{ margin:2px 0 0; font-size:0.74rem; color:var(--text-muted); }
.dom .detail-link{ font-size:0.76rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.mlist{ display:flex; flex-direction:column; }
.mrow{ display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid var(--border); text-decoration:none; color:inherit; border-radius:6px; }
.mrow:hover{ background:var(--surface-raised); }
.mrow-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); }
.mrow.warn .mrow-dot{ background:var(--warn); } .mrow.crit .mrow-dot{ background:var(--crit); }
.mrow-text{ display:flex; flex-direction:column; min-width:0; }
.mrow-lbl{ font-size:0.84rem; font-weight:700; }
.mrow-note{ font-size:0.72rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow-val{ font-family:'IBM Plex Mono',monospace; font-size:1.15rem; font-weight:600; font-variant-numeric:tabular-nums; }
.mrow-val small{ font-size:0.75rem; color:var(--text-muted); font-weight:500; }
.mrow.warn .mrow-val{ color:var(--warn); } .mrow.crit .mrow-val{ color:var(--crit); }
.dom-err{ margin:4px 0 8px; font-size:0.76rem; color:var(--crit); }

.dash-main{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.todo{ padding:14px 16px 10px; }
.todo-list{ list-style:none; margin:0; padding:0; }
.todo-list li{ display:grid; grid-template-columns:6px auto 1fr auto; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); font-size:0.86rem; }
.todo-sev{ width:6px; align-self:stretch; border-radius:3px; background:var(--info); }
.todo-list li.crit .todo-sev{ background:var(--crit); } .todo-list li.warn .todo-sev{ background:var(--warn); }
.todo-title{ color:inherit; font-weight:600; text-decoration:none; min-width:0; }
.todo-title:hover{ color:var(--accent); }
.todo-area{ font-size:0.72rem; color:var(--text-muted); white-space:nowrap; }
.todo-empty{ margin:6px 0 8px; font-size:0.86rem; color:var(--ok); font-weight:600; }

@media (max-width:1200px){ .domains{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
  .domains{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .todo-list li{ grid-template-columns:6px 1fr; } .todo-list li .tenant-code, .todo-list li .todo-area{ display:none; }
  .hero-side{ align-items:flex-start; }
}

body.login-body{ margin:0; background:var(--bg); }

 

 

.tenant-link{ text-decoration:none; }
.fnd-row{ cursor:pointer; } .fnd-row:hover{ background:var(--surface-raised); }
.fnd-row.is-done td:not(:last-child){ opacity:.65; }
.fnd-dialog{ border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); color:var(--text); padding:20px 22px; width:min(480px,92vw); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.fnd-dialog::backdrop{ background:rgba(8,14,20,.55); backdrop-filter:blur(2px); }
.fnd-dialog h3{ margin:0 0 4px; font-size:1.05rem; }
.fd-field{ display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:700; color:var(--text-muted); margin:12px 0; }
.fd-field textarea{ width:100%; font:inherit; font-weight:400; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 10px; resize:vertical; }
.fd-jira{ border:1px solid var(--border); border-radius:8px; padding:8px 12px 10px; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:6px 16px; }
.fd-jira legend{ font-size:.78rem; font-weight:700; color:var(--text-muted); padding:0 6px; }
.fd-inline input[type=radio]{ width:auto; margin:0; }
.fd-jira label{ display:inline-flex; align-items:center; gap:6px; font-size:.86rem; }
.fd-jira p{ flex-basis:100%; margin:0; }
.fd-actions{ display:flex; justify-content:flex-end; gap:8px; }
.fd-inline{ display:flex; flex-direction:column; gap:4px; max-width:560px; }
.fd-create{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px; }
.fd-create p{ flex-basis:100%; margin:0; }
.fnd-items{ max-height:360px; overflow:auto; }

/* ---------- lisensi ---------- */
.util-bar{ display:inline-block; vertical-align:middle; width:70px; height:6px; border-radius:99px; background:var(--surface-raised); border:1px solid var(--border); overflow:hidden; }
.util-bar i{ display:block; height:100%; background:var(--info); }
.util-bar.ok i{ background:var(--ok); } .util-bar.warn i{ background:var(--warn); } .util-bar.crit i{ background:var(--crit); }
.warn-text{ color:var(--warn); font-weight:700; } .ok-text{ color:var(--ok); font-weight:700; }
.price-input{ width:90px; text-align:right; font:inherit; font-family:'IBM Plex Mono',monospace; font-size:.82rem; padding:4px 6px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); }
.cur-input{ width:3.2em; text-transform:uppercase; font:inherit; font-size:.78rem; padding:3px 5px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); }
.sku-free td{ opacity:.6; }

/* ---------- cakupan layanan ---------- */
.cov-legend{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.cov-grid th.cov-th{ height:120px; white-space:nowrap; vertical-align:bottom; padding:0 4px 8px; }
.cov-grid th.cov-th span{ display:inline-block; transform:rotate(-55deg); transform-origin:left bottom; width:22px; font-size:.72rem; }
.cov-cell{ text-align:center; }
.cov-dot{ display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:7px; font-size:.82rem; font-weight:800; }
.cov-dot.ok{ color:var(--ok); background:var(--ok-soft); } .cov-dot.warn{ color:var(--warn); background:var(--warn-soft); }
.cov-dot.crit{ color:var(--crit); background:var(--crit-soft); } .cov-dot.off{ color:var(--text-muted); background:var(--surface-raised); }

/* ---------- sumber daya server ---------- */
.res-stats{ margin-bottom:16px; }
.res-bar{ display:block; height:6px; border-radius:99px; background:var(--surface-raised); border:1px solid var(--border); overflow:hidden; margin:4px 0 2px; }
.res-bar i{ display:block; height:100%; background:var(--ok); transition:width .4s ease; }
.res-bar.warn i{ background:var(--warn); } .res-bar.crit i{ background:var(--crit); }

/* ---------- penanda angka di menu ---------- */
.nav a{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.nav-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; line-height:1; color:var(--on-solid); background:var(--info); font-variant-numeric:tabular-nums; }
.nav-badge.crit{ background:var(--crit); animation:badge-pulse 2s ease-in-out infinite; }
.nav-badge.warn{ background:var(--warn); }
@keyframes badge-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(240,85,90,.55); } 50%{ box-shadow:0 0 0 5px rgba(240,85,90,0); } }
@media (prefers-reduced-motion:reduce){ .nav-badge.crit{ animation:none; } }
@media (max-width:900px){ .nav a{ display:inline-flex; } }

/* ---------- m365: tile bisa diklik + panel rincian ---------- */
button.stat-click{ text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%; transition:border-color .15s, box-shadow .15s, transform .12s; }
button.stat-click:hover{ border-color:var(--accent); transform:translateY(-1px); }
button.stat-click:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
button.stat-click.is-open{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow); }
.stat-more{ margin-top:auto; padding-top:6px; font-size:.7rem; font-weight:700; color:var(--accent); }
button.stat-click.is-open .stat-more{ visibility:hidden; }
.stat-detail{ position:relative; margin:-8px 0 20px; padding:16px 18px; border-color:var(--accent); animation:nav-pop .2s ease; }
.stat-detail[hidden], .sd-panel[hidden]{ display:none; }
.stat-detail-close{ position:absolute; top:10px; right:12px; width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); font-size:1.2rem; cursor:pointer; }
.stat-detail-close:hover{ color:var(--text); background:var(--surface-raised); }
.sd-panel h2{ margin:0 36px 6px 0; font-size:1rem; }
.sd-panel .sd-sub{ margin:14px 0 6px; font-size:.82rem; }
.sd-scroll{ max-height:380px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-s); }
.sd-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }

/* ---------- form generate laporan PM ---------- */
.pm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 14px; margin-bottom:10px; }
.pm-grid label, .pm-form label{ display:flex; flex-direction:column; gap:4px; font-size:.78rem; font-weight:700; color:var(--text-muted); }
.pm-grid input, .pm-grid select, .pm-grid textarea{ font:inherit; font-weight:400; font-size:.88rem; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 9px; }
.pm-wide{ grid-column:1 / -1; }
.pm-ch{ border:1px solid var(--border); border-radius:8px; padding:8px 12px 10px; margin:0 0 10px; display:flex; flex-wrap:wrap; gap:6px 18px; }
.pm-ch legend{ font-size:.78rem; font-weight:700; color:var(--text-muted); padding:0 6px; }
.pm-ch label, .pm-form label.pm-inline{ flex-direction:row; align-items:center; gap:6px; font-weight:500; color:var(--text); }
.pm-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:6px; }

/* ---------- MFA ---------- */
.auth-single{ max-width:620px; margin:5vh auto; padding:0 16px; }
.mfa-card{ padding:20px 22px; }
.mfa-steps{ padding-left:18px; line-height:1.55; }
.mfa-qrwrap{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.mfa-qr{ width:190px; height:190px; padding:10px; background:#fff; border:1px solid var(--border); border-radius:10px; }
.mfa-qr svg{ width:100%; height:100%; display:block; }
.mfa-secret{ font-size:1rem; font-weight:600; letter-spacing:.06em; padding:8px 10px; background:var(--surface-raised); border:1px solid var(--border); border-radius:8px; user-select:all; }
.mfa-form{ display:flex; flex-direction:column; gap:10px; margin:10px 0; }
.mfa-form label{ display:flex; flex-direction:column; gap:4px; font-size:.8rem; font-weight:700; color:var(--text-muted); }
.mfa-form input{ font:inherit; font-weight:500; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); }
.mfa-codes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin:10px 0; }
.mfa-codes span{ padding:8px 10px; background:var(--surface-raised); border:1px solid var(--border); border-radius:8px; font-weight:700; letter-spacing:.06em; text-align:center; }
.mfa-kv td.k{ width:35%; }
@media print{ .mfa-card .actions, .mfa-form, h3, .small a{ display:none !important; } }

/* ---------- perbaikan overflow grid: kolom 1fr tidak boleh melebar mengikuti isi (min-content) ---------- */
.panels-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:860px){ .panels-2{ grid-template-columns:minmax(0,1fr); } }
.dashboard-grid{ grid-template-columns:minmax(0,1fr) 360px; }
@media (max-width:960px){ .dashboard-grid{ grid-template-columns:minmax(0,1fr); } }
.ticket-grid{ grid-template-columns:minmax(0,1fr) 340px; }
@media (min-width:1400px){ .dashboard-grid{ grid-template-columns:minmax(0,1fr) 400px; } .ticket-grid{ grid-template-columns:minmax(0,1fr) 380px; } }
@media (max-width:900px){ .ticket-grid{ grid-template-columns:minmax(0,1fr); } }
.due-item{ grid-template-columns:64px minmax(0,1fr) auto; }
.panels-2 > .panel, .dashboard-grid > *, .ticket-grid > *, .dash-main{ min-width:0; }
.card.panel{ overflow-x:auto; }
.due-item, .due-list li{ min-width:0; }
.due-item *{ overflow-wrap:anywhere; }
.page{ min-width:0; }

/* tabel beban engineer: angka di tengah kolom, nama engineer tetap rata kiri */
.wl-table th.num, .wl-table td.num{ text-align:center; width:15%; }
.wl-table .num-link{ display:inline-block; min-width:34px; text-align:center; }
.wl-table .num-link.plain{ background:var(--surface-raised); color:var(--text-muted); font-weight:600; }
.wl-table .num-link.plain.strong{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
.wl-table .num-link.none{ background:transparent; color:var(--text-muted); font-weight:400; }
.wl-table span.num-link:hover{ outline:none; }
.hist-list{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:3px; font-size:.82rem; }
.pid-now{ font-weight:700; }
/* ---- Pengaturan: menu samping per bagian ---- */
.settings-layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start; }
.settings-nav{ position:sticky; top:16px; display:flex; flex-direction:column; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:8px; box-shadow:var(--shadow); }
.settings-nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-s); text-decoration:none; color:var(--text-muted); border:1px solid transparent; transition:background .15s,color .15s; }
.settings-nav a:hover{ background:var(--surface-raised); color:var(--text); }
.settings-nav a.active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); }
.settings-nav .sn-ico{ width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--surface-raised); font-size:1rem; }
.settings-nav a.active .sn-ico{ background:var(--surface); }
.settings-nav .sn-text{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.settings-nav .sn-text strong{ font-size:.88rem; color:inherit; }
.settings-nav .sn-text small{ font-size:.72rem; color:var(--text-muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.settings-body{ min-width:0; }
.settings-body > .card:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .settings-layout{ grid-template-columns:minmax(0,1fr); }
  .settings-nav{ position:static; flex-direction:row; overflow-x:auto; gap:6px; padding:6px; -webkit-overflow-scrolling:touch; }
  .settings-nav a{ flex:none; padding:8px 12px; }
  .settings-nav .sn-text small{ display:none; }
}

/* ---------- sidebar bergaya panel: ikon garis, kelompok, penanda aktif ---------- */
.nav a{ position:relative; }
.nav a .nav-ico{ flex:none; opacity:.85; }
.nav a .nav-label{ flex:1; min-width:0; }
.nav-group{ display:none; }
@media (min-width:901px){
  body.has-sidebar .topbar{ padding:20px 14px; }
  body.has-sidebar .nav{ gap:1px; }
  body.has-sidebar .nav a{ gap:11px; padding:8px 12px; font-size:.87rem; font-weight:600; border-radius:var(--radius-s); transition:background .15s, color .15s; }
  body.has-sidebar .nav a:hover{ background:var(--surface-raised); color:var(--text); }
  body.has-sidebar .nav a:hover .nav-ico{ opacity:1; }
  body.has-sidebar .nav a.active{ background:var(--accent-soft); color:var(--accent); }
  body.has-sidebar .nav a.active .nav-ico{ opacity:1; }
  body.has-sidebar .nav a.active::before{ content:""; position:absolute; left:-14px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
  body.has-sidebar .nav-group{ display:block; font-size:.65rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); opacity:.75; padding:14px 12px 5px; }
  body.has-sidebar .nav-group:first-child{ padding-top:4px; }
}
@media (max-width:900px){ .nav a .nav-ico{ display:none; } }

/* ---- Pengaturan: menu samping bergaya sidebar utama (ikon garis, garis aksen aktif) ---- */
.settings-nav{ padding:10px 10px 10px 0; gap:2px; overflow:hidden; }
.settings-nav a{ position:relative; gap:12px; padding:9px 12px 9px 14px; margin-left:0; border:0; border-radius:0 var(--radius-s) var(--radius-s) 0; }
.settings-nav a:hover{ background:var(--surface-raised); }
.settings-nav a.active{ background:var(--accent-soft); color:var(--accent); border:0; }
.settings-nav a.active::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.settings-nav .sn-ico{ flex:none; width:18px; height:18px; background:none; border-radius:0; opacity:.85; }
.settings-nav a.active .sn-ico{ opacity:1; background:none; }
.settings-nav .sn-text small{ opacity:.85; }
@media (max-width:900px){
  .settings-nav{ padding:6px; }
  .settings-nav a{ border-radius:var(--radius-s); padding:8px 12px; }
  .settings-nav a.active::before{ display:none; }
  .settings-nav .sn-ico{ display:none; }
}

/* ---------- tema: tombol pilihan ---------- */
.theme-switch{ display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--border); border-radius:999px; background:var(--surface-raised); }
.theme-switch button{ all:unset; box-sizing:border-box; width:28px; height:24px; display:inline-grid; place-items:center; border-radius:999px; color:var(--text-muted); cursor:pointer; transition:background .15s,color .15s; }
.theme-switch button:hover{ color:var(--text); }
.theme-switch button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.theme-switch button.active{ background:var(--surface); color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.nav .theme-switch{ margin:10px 0 0 10px; align-self:flex-start; }
.theme-float{ position:fixed; top:12px; right:76px; z-index:30; }

/* ---------- pencarian global: tombol & palet ---------- */
.nav .nav-search{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:9px; cursor:pointer; width:100%; padding:8px 10px; margin:0 0 8px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface-raised); color:var(--text-muted); font-size:.84rem; font-weight:600; }
.nav .nav-search:hover{ border-color:var(--accent); color:var(--text); }
.nav .nav-search:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.nav-search .ns-text{ flex:1; text-align:left; }
.nav-search kbd, .cmdk kbd{ font:600 .66rem/1 'IBM Plex Mono',monospace; padding:3px 5px; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; background:var(--surface); color:var(--text-muted); }
@media (max-width:900px){ .nav .nav-search{ width:auto; margin:0; padding:7px 10px; } .nav-search .ns-text, .nav-search kbd{ display:none; } }
.cmdk{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:11vh 16px 16px; background:rgba(8,12,18,.55); backdrop-filter:blur(3px); }
.cmdk[hidden]{ display:none; }
.cmdk-box{ width:min(640px,100%); max-height:72vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.4); overflow:hidden; animation:cmdk-in .14s ease-out; }
@keyframes cmdk-in{ from{ opacity:0; transform:translateY(-6px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .cmdk-box{ animation:none; } }
.cmdk-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text-muted); }
.cmdk-input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:600 1rem 'Montserrat',system-ui,sans-serif; color:var(--text); }
.cmdk-input::placeholder{ color:var(--text-muted); font-weight:500; }
.cmdk-status{ padding:0 16px; font-size:.8rem; color:var(--text-muted); min-height:0; }
.cmdk-status:not(:empty){ padding:8px 16px; }
.cmdk-list{ list-style:none; margin:0; padding:6px; overflow-y:auto; }
.cmdk-group{ padding:10px 10px 4px; font-size:.65rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
.cmdk-list li[data-i]{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--radius-s); cursor:pointer; color:var(--text); }
.cmdk-list li[data-i].active{ background:var(--accent-soft); color:var(--accent); }
.cmdk-ico{ flex:none; opacity:.8; }
.cmdk-t{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.cmdk-t strong{ font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-t small{ font-size:.75rem; color:var(--text-muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-list li.active .cmdk-t small{ color:inherit; opacity:.8; }
.cmdk-badge{ flex:none; font-size:.66rem; font-weight:800; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:var(--info-soft); color:var(--info); }
.cmdk-badge.crit, .cmdk-badge.incident{ background:var(--crit-soft); color:var(--crit); }
.cmdk-badge.warn, .cmdk-badge.advisory{ background:var(--warn-soft); color:var(--warn); }
.cmdk-badge.resolved, .cmdk-badge.info{ background:var(--ok-soft); color:var(--ok); }
.cmdk-foot{ display:flex; gap:16px; padding:8px 14px; border-top:1px solid var(--border); font-size:.72rem; color:var(--text-muted); }
.cmdk-foot kbd{ margin-right:3px; }
html.cmdk-open{ overflow:hidden; }

/* ---------- dashboard yang bisa disusun ---------- */
.dash{ display:flex; flex-direction:column; gap:20px; }
.dash > section, .dash > .dashboard-grid{ margin-block:0; }
.dash-tools{ order:-1; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:10px; min-height:30px; }
.dash-tools:not(.editing){ opacity:.7; transition:opacity .15s; }
.dash-tools:not(.editing):hover, .dash-tools:not(.editing):focus-within{ opacity:1; }
.dash-tools.editing{ padding:8px 12px; border:1px dashed var(--accent); border-radius:var(--radius-s); background:var(--accent-soft); justify-content:space-between; }
.dash-hint{ flex:1; min-width:200px; font-size:.8rem; color:var(--text); font-weight:600; }
.dash-status{ font-size:.78rem; color:var(--text-muted); min-width:70px; text-align:right; }
html.dash-editing [data-w]:not([data-w="grid"]){ position:relative; outline:2px dashed var(--accent); outline-offset:3px; border-radius:var(--radius-m); }
html.dash-editing .incident-feed{ position:relative; top:auto; }
html.dash-editing [data-w].w-off{ opacity:.42; outline-color:var(--text-muted); }
html.dash-editing [data-w].w-dragging{ opacity:.35; }
html.dash-editing [data-w].w-over{ outline-color:var(--ok); outline-style:solid; }
.w-ctl{ position:absolute; top:8px; right:8px; z-index:5; display:flex; gap:4px; padding:3px; border-radius:9px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); }
.w-ctl button{ all:unset; box-sizing:border-box; min-width:28px; height:26px; padding:0 7px; display:inline-grid; place-items:center; border-radius:7px; font-size:.78rem; font-weight:700; color:var(--text-muted); cursor:pointer; }
.w-ctl button:hover{ background:var(--accent-soft); color:var(--accent); }
.w-ctl button:focus-visible{ outline:2px solid var(--accent); }
.w-ctl .w-drag{ cursor:grab; font-size:1rem; }
.w-ctl .w-eye{ font-size:.72rem; }
@media (prefers-reduced-motion:reduce){ .dash-tools{ transition:none; } }

/* ---------- dashboard: tren, Zero Trust, panel sisi kanan ---------- */
.trends{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; margin-bottom:18px; }
@media (max-width:960px){ .trends{ grid-template-columns:minmax(0,1fr); } }
.trend-card{ margin-bottom:0; display:flex; flex-direction:column; }
.barchart{ width:100%; height:auto; display:block; margin-top:4px; overflow:visible; }
.bc-grid{ stroke:var(--border); stroke-width:1; stroke-dasharray:3 4; }
.bc-axis{ font:500 10px 'IBM Plex Mono',monospace; fill:var(--text-muted); }
.bc-crit{ fill:var(--crit); } .bc-warn{ fill:var(--warn); } .bc-info{ fill:var(--accent); opacity:.85; }
.bc-hit{ fill:transparent; }
.bc-bar:hover .bc-hit{ fill:var(--accent-soft); }
.bc-legend{ display:flex; gap:16px; margin:6px 0 0; font-size:.74rem; color:var(--text-muted); font-weight:600; }
.bc-legend i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:baseline; }
.bc-legend i.bc-crit{ background:var(--crit); } .bc-legend i.bc-warn{ background:var(--warn); } .bc-legend i.bc-info{ background:var(--accent); }
.zt-rows{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:12px; }
.zt-rows li{ display:grid; grid-template-columns:70px minmax(0,1fr) 74px 82px; align-items:center; gap:10px; }
.zt-code{ font-weight:800; font-size:.86rem; text-decoration:none; color:var(--text); }
.zt-bar{ height:8px; border-radius:99px; background:var(--surface-raised); border:1px solid var(--border); overflow:hidden; }
.zt-bar i{ display:block; height:100%; border-radius:99px; background:var(--info); transition:width .5s ease; }
.zt-bar i.ok{ background:var(--ok); } .zt-bar i.warn{ background:var(--warn); } .zt-bar i.crit{ background:var(--crit); }
.zt-score{ font:700 1rem 'IBM Plex Mono',monospace; text-align:right; }
.zt-score small{ font-size:.62rem; color:var(--text-muted); font-weight:500; margin-left:1px; }
.zt-score.ok{ color:var(--ok); } .zt-score.warn{ color:var(--warn); } .zt-score.crit{ color:var(--crit); }
.zt-delta{ font-size:.72rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.zt-delta.up{ color:var(--ok); } .zt-delta.down{ color:var(--crit); }
@media (max-width:520px){ .zt-rows li{ grid-template-columns:56px minmax(0,1fr) 60px; } .zt-delta{ display:none; } }
.dash-side{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.side-card{ margin-bottom:0; padding:16px; }
.side-card .dom-head{ margin-bottom:8px; }
.side-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.side-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--border); }
.side-list li:first-child{ border-top:0; padding-top:2px; }
.sl-main{ min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.sl-main strong{ font-size:.84rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.sl-main a{ text-decoration:none; }
.sl-main small{ font-size:.73rem; color:var(--text-muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-chip{ flex:none; font:700 .7rem 'IBM Plex Mono',monospace; padding:3px 8px; border-radius:999px; background:var(--info-soft); color:var(--info); white-space:nowrap; }
.sl-chip.crit{ background:var(--crit-soft); color:var(--crit); } .sl-chip.warn{ background:var(--warn-soft); color:var(--warn); }
.sys-list li{ justify-content:flex-start; }
.sys-list .sl-main{ flex:1; }
.sys-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--info); }
.sys-dot.ok{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); } .sys-dot.warn{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); } .sys-dot.crit{ background:var(--crit); box-shadow:0 0 0 3px var(--crit-soft); } .sys-dot.off{ background:var(--text-muted); opacity:.5; }
.sys-text{ font-size:.76rem; font-weight:600; color:var(--text-muted); text-align:right; max-width:60%; }
.sys-text.ok{ color:var(--ok); } .sys-text.warn{ color:var(--warn); } .sys-text.crit{ color:var(--crit); }
html.dash-editing .dash-side{ position:relative; }

/* ---------- toast ---------- */
.toasts{ position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); right:16px; z-index:300; display:flex; flex-direction:column; gap:10px; width:min(380px, calc(100vw - 32px)); pointer-events:none; }
.toast{ pointer-events:auto; position:relative; display:flex; align-items:flex-start; gap:10px; padding:12px 12px 14px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:0 14px 40px rgba(10,20,30,.22); overflow:hidden; font-size:.86rem; font-weight:600; line-height:1.4; animation:toast-in .28s cubic-bezier(.2,.9,.3,1.1); }
.toast.out{ animation:toast-out .26s ease-in forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateX(24px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes toast-out{ to{ opacity:0; transform:translateX(24px) scale(.97); } }
.toast-ico{ flex:none; margin-top:1px; }
.toast-msg{ flex:1; min-width:0; overflow-wrap:anywhere; }
.toast-x{ all:unset; cursor:pointer; flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:6px; color:var(--text-muted); font-size:1.15rem; line-height:1; }
.toast-x:hover{ background:var(--surface-raised); color:var(--text); }
.toast-x:focus-visible{ outline:2px solid var(--accent); }
.toast-bar{ position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left; background:currentColor; opacity:.35; animation:toast-bar var(--life,5s) linear forwards; }
.toast.paused .toast-bar{ animation-play-state:paused; }
@keyframes toast-bar{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.toast-ok{ border-left:4px solid var(--ok); } .toast-ok .toast-ico{ color:var(--ok); }
.toast-info{ border-left:4px solid var(--accent); } .toast-info .toast-ico{ color:var(--accent); }
.toast-warn{ border-left:4px solid var(--warn); } .toast-warn .toast-ico{ color:var(--warn); }
.toast-err{ border-left:4px solid var(--crit); } .toast-err .toast-ico{ color:var(--crit); }
@media (prefers-reduced-motion:reduce){ .toast, .toast.out{ animation:none; } .toast-bar{ animation:none; display:none; } }

/* ---------- skeleton loading ---------- */
.sk{ display:inline-block; vertical-align:middle; height:1em; min-width:2.2em; border-radius:6px; background:linear-gradient(90deg, var(--surface-raised) 25%, var(--border) 37%, var(--surface-raised) 63%); background-size:400% 100%; animation:sk-shimmer 1.3s ease-in-out infinite; }
.sk-block{ display:block; border-radius:var(--radius-m); min-height:150px; width:100%; }
@keyframes sk-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.tenant-list .sk-card{ border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); padding:16px; display:flex; flex-direction:column; gap:12px; }
.sk-card .sk{ height:12px; }
@media (prefers-reduced-motion:reduce){ .sk{ animation:none; } }

/* ---------- pusat notifikasi ---------- */
.nav .nav-top{ display:flex; align-items:center; gap:6px; margin:0 0 8px; }
.nav .nav-top .nav-search{ margin:0; flex:1; min-width:0; width:auto; }
.nav-bell{ all:unset; box-sizing:border-box; position:relative; flex:none; width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface-raised); color:var(--text-muted); cursor:pointer; }
.nav-bell:hover{ border-color:var(--accent); color:var(--text); }
.nav-bell:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.bell-badge{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--crit); color:#fff; font:800 .64rem/18px 'Montserrat',sans-serif; text-align:center; box-shadow:0 0 0 2px var(--surface); }
.bell-badge[hidden]{ display:none; }
.inbox{ position:fixed; z-index:150; left:250px; top:14px; width:min(410px, calc(100vw - 24px)); max-height:calc(100vh - 28px); display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.35); overflow:hidden; animation:cmdk-in .16s ease-out; }
.inbox[hidden]{ display:none; }
@media (max-width:900px){ .inbox{ left:12px; right:12px; width:auto; top:60px; max-height:calc(100vh - 76px); } }
.inbox-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.inbox-readall{ all:unset; cursor:pointer; font-size:.76rem; font-weight:700; color:var(--accent); padding:4px 8px; border-radius:6px; }
.inbox-readall:hover{ background:var(--accent-soft); }
.inbox-list{ list-style:none; margin:0; padding:6px; overflow-y:auto; }
.inbox-empty{ padding:26px 12px; text-align:center; color:var(--text-muted); font-size:.85rem; }
.inbox-item a, .inbox-item > div{ display:flex; gap:10px; padding:10px; border-radius:var(--radius-s); text-decoration:none; color:var(--text); cursor:pointer; }
.inbox-item a:hover{ background:var(--surface-raised); }
.ib-dot{ flex:none; width:9px; height:9px; border-radius:50%; margin-top:5px; background:var(--info); }
.inbox-item.sev-crit .ib-dot{ background:var(--crit); } .inbox-item.sev-warn .ib-dot{ background:var(--warn); } .inbox-item.sev-ok .ib-dot{ background:var(--ok); } .inbox-item.sev-info .ib-dot{ background:var(--accent); }
.ib-t{ min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.35; }
.ib-t strong{ font-size:.84rem; font-weight:700; overflow-wrap:anywhere; }
.ib-t small{ font-size:.76rem; color:var(--text-muted); font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ib-t em{ font-style:normal; font-size:.7rem; color:var(--text-muted); opacity:.85; }
.inbox-item.unread > a, .inbox-item.unread > div{ background:var(--accent-soft); }
.inbox-item.unread .ib-t strong::after{ content:" •"; color:var(--accent); }
@media (max-width:900px){ .nav .nav-top{ margin:0; } .nav .nav-top .nav-search{ flex:none; } .bell-badge{ top:-5px; right:-5px; } }

/* ---------- ringkasan harian ---------- */
.summary{ display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; position:relative; overflow:hidden; border-left:4px solid var(--ok); }
.summary.tone-warn{ border-left-color:var(--warn); } .summary.tone-crit{ border-left-color:var(--crit); }
.sum-ico{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.summary.tone-crit .sum-ico{ background:var(--crit-soft); color:var(--crit); } .summary.tone-warn .sum-ico{ background:var(--warn-soft); color:var(--warn); } .summary.tone-ok .sum-ico{ background:var(--ok-soft); color:var(--ok); }
.sum-body{ min-width:0; flex:1; }
.sum-head-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:2px; }
.sum-head-row h2{ font-size:.95rem; font-weight:800; margin:0; }
.sum-badge{ font:800 .62rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:999px; background:var(--info-soft); color:var(--text-muted); }
.sum-badge.ai{ background:var(--accent-soft); color:var(--accent); }
.sum-date{ margin-left:auto; font-size:.74rem; color:var(--text-muted); font-weight:600; }
.sum-headline{ margin:2px 0 8px; font-size:1.12rem; font-weight:800; letter-spacing:-.01em; }
.sum-ai{ margin:0 0 10px; font-size:.92rem; line-height:1.55; color:var(--text); }
.sum-lines{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.sum-lines li{ display:flex; gap:9px; align-items:flex-start; font-size:.84rem; line-height:1.45; color:var(--text-muted); }
.sum-dot{ flex:none; width:8px; height:8px; border-radius:50%; margin-top:6px; background:var(--info); }
.sum-lines li.crit .sum-dot{ background:var(--crit); } .sum-lines li.warn .sum-dot{ background:var(--warn); } .sum-lines li.ok .sum-dot{ background:var(--ok); }
.sum-prio{ margin:10px 0 0; padding:8px 12px; border-radius:var(--radius-s); background:var(--surface-raised); border:1px solid var(--border); font-size:.82rem; font-weight:700; }
@media (max-width:520px){ .summary{ flex-direction:column; } }

/* ---------- Menara Score ---------- */
.score{ margin-bottom:18px; }
.ms-list{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; }
.ms-row{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--border); }
.ms-row:first-child{ border-top:0; }
.ms-ring{ --c:var(--info); width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-raised) 0); position:relative; }
.ms-ring::before{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--surface); }
.ms-ring.tone-ok{ --c:var(--ok); } .ms-ring.tone-warn{ --c:var(--warn); } .ms-ring.tone-crit{ --c:var(--crit); }
.ms-grade{ position:relative; font:800 1.15rem 'Montserrat',sans-serif; color:var(--c); }
.ms-title{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.ms-parts{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 2px; }
.ms-part{ font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--info-soft); color:var(--text-muted); }
.ms-part b{ font-family:'IBM Plex Mono',monospace; margin-left:3px; }
.ms-part.ok{ background:var(--ok-soft); color:var(--ok); } .ms-part.warn{ background:var(--warn-soft); color:var(--warn); } .ms-part.crit{ background:var(--crit-soft); color:var(--crit); }
.ms-drivers{ margin:2px 0 0; }
.ms-num{ text-align:right; white-space:nowrap; }
.ms-num strong{ font:700 1.6rem 'IBM Plex Mono',monospace; }
.ms-num strong.tone-ok{ color:var(--ok); } .ms-num strong.tone-warn{ color:var(--warn); } .ms-num strong.tone-crit{ color:var(--crit); }
.ms-num small{ font-size:.7rem; color:var(--text-muted); }
.ms-delta{ display:block; font-size:.72rem; font-weight:700; color:var(--text-muted); }
.ms-delta.up{ color:var(--ok); } .ms-delta.down{ color:var(--crit); }
.ms-how{ margin-top:6px; border-top:1px solid var(--border); padding-top:8px; }
.ms-how summary{ cursor:pointer; font-size:.78rem; font-weight:700; color:var(--accent); }
@media (max-width:620px){ .ms-row{ grid-template-columns:52px minmax(0,1fr); } .ms-num{ grid-column:2; text-align:left; } }

/* ---------- kepatuhan & katalog pemeriksaan ---------- */
.chk-top{ display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:18px; margin-bottom:18px; align-items:stretch; }
@media (max-width:900px){ .chk-top{ grid-template-columns:minmax(0,1fr); } }
.chk-score{ margin-bottom:0; text-align:center; }
.chk-score h2{ text-align:left; }
.chk-ring{ --c:var(--info); width:128px; height:128px; margin:10px auto; border-radius:50%; display:grid; place-content:center; background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-raised) 0); position:relative; }
.chk-ring::before{ content:""; position:absolute; inset:11px; border-radius:50%; background:var(--surface); }
.chk-ring strong, .chk-ring small{ position:relative; text-align:center; }
.chk-ring strong{ font:700 2.1rem 'IBM Plex Mono',monospace; color:var(--c); line-height:1; }
.chk-ring small{ font-size:.7rem; color:var(--text-muted); }
.chk-ring.tone-ok{ --c:var(--ok); } .chk-ring.tone-warn{ --c:var(--warn); } .chk-ring.tone-crit{ --c:var(--crit); }
.chk-counts{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.chk-counts a{ text-decoration:none; }
.sev-pill{ display:inline-block; font:800 .66rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:999px; background:var(--info-soft); color:var(--info); text-decoration:none; }
.sev-pill.crit{ background:var(--crit-soft); color:var(--crit); } .sev-pill.warn{ background:var(--warn-soft); color:var(--warn); }
.chk-fws{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.chk-fw{ --c:var(--info); display:flex; flex-direction:column; gap:4px; margin-bottom:0; padding:14px; text-decoration:none; color:var(--text); transition:border-color .15s, transform .12s; }
.chk-fw:hover{ border-color:var(--accent); transform:translateY(-1px); }
.chk-fw.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow); }
.chk-fw.tone-ok{ --c:var(--ok); } .chk-fw.tone-warn{ --c:var(--warn); } .chk-fw.tone-crit{ --c:var(--crit); }
.fw-name{ font-size:.78rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.fw-pct{ font:700 1.7rem 'IBM Plex Mono',monospace; color:var(--c); line-height:1.1; }
.fw-bar{ height:6px; border-radius:99px; background:var(--surface-raised); border:1px solid var(--border); overflow:hidden; }
.fw-bar i{ display:block; height:100%; background:var(--c); border-radius:99px; }
.fw-sub{ font-size:.72rem; color:var(--text-muted); font-weight:600; }
.chk-list{ display:flex; flex-direction:column; gap:10px; }
.chk{ padding:0; margin-bottom:0; border-left:4px solid var(--border); }
.chk-fail{ border-left-color:var(--crit); } .chk-pass{ border-left-color:var(--ok); } .chk-na{ border-left-color:var(--text-muted); }
.chk summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:62px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px 16px; }
.chk summary::-webkit-details-marker{ display:none; }
.chk summary:hover{ background:var(--surface-raised); }
.chk-id{ font-weight:700; font-size:.8rem; color:var(--text-muted); }
.chk-title{ min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.chk-title strong{ font-size:.9rem; }
.chk-title small{ color:var(--text-muted); font-size:.78rem; font-weight:500; }
.chk-body{ padding:4px 18px 16px 18px; border-top:1px solid var(--border); }
.chk-body h3{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin:12px 0 4px; }
.chk-body p{ margin:0; font-size:.86rem; line-height:1.5; }
.chk-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .chk-cols{ grid-template-columns:1fr; } .chk summary{ grid-template-columns:52px minmax(0,1fr); } .chk summary .sev-pill, .chk summary .status-chip{ justify-self:start; } }
.chk-aff{ margin:0; padding-left:18px; font-size:.82rem; color:var(--text-muted); columns:2; column-gap:24px; }
.chk-map{ display:flex; flex-wrap:wrap; gap:6px; }
.fw-chip{ font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); text-decoration:none; }
.fw-chip b{ font-weight:800; }
.fw-chip:hover{ filter:brightness(1.1); }
.chk-ref{ font:700 .7rem 'IBM Plex Mono',monospace; padding:2px 7px; border-radius:6px; text-decoration:none; background:var(--info-soft); color:var(--info); margin-right:3px; }
.chk-ref.pass{ background:var(--ok-soft); color:var(--ok); } .chk-ref.fail{ background:var(--crit-soft); color:var(--crit); }
.inline-form{ margin:0; }

/* ---------- kepatuhan: panel izin ---------- */
.chk-perm{ padding:0; margin-bottom:18px; border-left:4px solid var(--warn); }
.chk-perm summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; }
.chk-perm summary::-webkit-details-marker{ display:none; }
.chk-perm-body{ padding:0 18px 16px; border-top:1px solid var(--border); }
.chk-steps{ margin:8px 0 0; padding-left:20px; line-height:1.6; }
.chk-tenant select{ min-width:220px; }
.chk-current{ margin:0 0 10px; font-size:.84rem; color:var(--text-muted); }
.chk-current strong{ color:var(--text); }
.chk-tenants{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.chk-tenant-pill{ --c:var(--info); display:flex; align-items:baseline; gap:8px; padding:7px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); text-decoration:none; color:var(--text); font-size:.82rem; }
.chk-tenant-pill:hover{ border-color:var(--accent); }
.chk-tenant-pill.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); background:var(--accent-soft); }
.chk-tenant-pill .tp-score{ font:700 .95rem 'IBM Plex Mono',monospace; color:var(--c); }
.chk-tenant-pill.tone-ok{ --c:var(--ok); } .chk-tenant-pill.tone-warn{ --c:var(--warn); } .chk-tenant-pill.tone-crit{ --c:var(--crit); }
.chk-tenant-pill small{ color:var(--text-muted); font-size:.72rem; }

/* =====================================================================
   Tema identitas (Logicalis-inspired): biru cyan #26A3DD + biru elektrik #194BFF, Montserrat, bersih & kontras tinggi.
   Lapisan ini hanya menyempurnakan komponen yang sudah ada (bisa dicabut tanpa merusak fungsi).
   ===================================================================== */
:root{ --ease:cubic-bezier(.2,.7,.2,1); --ring:0 0 0 3px var(--accent-soft); --grad-brand:linear-gradient(135deg,#194BFF 0%,#26A3DD 100%); }
html{ scroll-behavior:smooth; }
body{ letter-spacing:-.003em; line-height:1.5; text-rendering:optimizeLegibility; }
/* animasi masuk HANYA pada konten (bukan body/.page): transform pada leluhur membuat sidebar fixed ikut setinggi konten dan terpotong */
.page>*:not(.topbar){ animation:page-in .28s var(--ease) both; }
@keyframes page-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
::selection{ background:rgba(38,163,221,.28); color:inherit; }
h1,h2,h3{ letter-spacing:-.012em; }

/* angka & metrik: Montserrat tabular (bukan monospace) agar terasa satu keluarga dengan judul */
.stat-value,.kpi-val,.mrow-val,.hero-pct,.cloud-num,.zt-score,.trend-top strong,.fw-pct,.tp-score,.card-pager-info{
  font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif !important; font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.02em; }

/* fokus yang jelas dan konsisten */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--brand); outline-offset:2px; box-shadow:var(--ring); border-radius:var(--radius-s); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=search],select,textarea{
  background:var(--surface); border-radius:10px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
input::placeholder,textarea::placeholder{ color:var(--text-muted); opacity:.7; }

/* tombol */
.btn{ border-radius:10px; font-weight:700; letter-spacing:.005em; background:var(--surface); transition:transform .12s var(--ease), box-shadow .15s var(--ease), border-color .15s, background-color .15s, color .15s; }
.btn:hover{ border-color:var(--brand); color:var(--accent); background:var(--accent-soft); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn-primary{ background:var(--electric); border-color:var(--electric); color:#fff; box-shadow:0 6px 16px -8px var(--electric); }
.btn-primary:hover{ background:var(--electric); border-color:var(--electric); color:#fff; filter:brightness(1.08); box-shadow:0 10px 22px -10px var(--electric); }
.btn-danger{ color:var(--crit); } .btn-danger:hover{ border-color:var(--crit); background:var(--crit-soft); color:var(--crit); }
.btn[disabled],.btn.disabled{ opacity:.45; transform:none; box-shadow:none; }

/* kartu */
.card,.stat-tile,.tenant-card,.incident-feed{ border-color:var(--border); transition:box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.card:hover,.tenant-card:hover{ border-color:color-mix(in srgb, var(--brand) 38%, var(--border)); }
.card h2,.section-title{ font-weight:800; letter-spacing:-.01em; }
.stat-tile{ border-left-width:4px; }
.stat-tile.ok{ border-left-color:var(--ok); } .stat-tile.warn{ border-left-color:var(--warn); } .stat-tile.crit{ border-left-color:var(--crit); }
.stat-link:hover,button.stat-click:hover{ border-color:var(--brand); box-shadow:0 12px 28px -14px rgba(25,75,255,.35); }

/* judul halaman: aksen garis biru khas */
.toolbar h1{ font-size:1.3rem; font-weight:800; letter-spacing:-.02em; position:relative; padding-bottom:9px; }
.toolbar h1::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:3px; background:var(--grad-brand); }
.toolbar h1 a{ color:inherit; }

/* sidebar & navigasi */
.brand svg{ background:var(--grad-brand); color:#fff; border-radius:10px; padding:5px; width:36px; height:36px; box-shadow:0 6px 16px -8px var(--electric); }
.brand-name{ font-weight:800; letter-spacing:-.02em; }
.brand-tagline b{ color:var(--brand); }
.nav a{ position:relative; font-weight:600; transition:background-color .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease); }
.nav a:hover{ background:var(--accent-soft); color:var(--accent); }
.nav a.active{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
@media (min-width:901px){
  body.has-sidebar .topbar{ background:var(--surface); border-right:1px solid var(--border); box-shadow:1px 0 0 rgba(20,30,45,.02); }
  body.has-sidebar .nav a.active::before{ content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0; background:var(--grad-brand); }
  body.has-sidebar .nav a:hover{ padding-left:15px; }
}
.nav-group{ font-weight:800; letter-spacing:.08em; }

/* tabel */
th{ font-weight:700; letter-spacing:.06em; color:var(--text-muted); }
tbody tr{ transition:background-color .12s var(--ease); }
tbody tr:hover{ background:color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.table-wrap,.card.panel{ scrollbar-width:thin; }

/* chip & lencana */
.status-chip{ font-weight:700; letter-spacing:.01em; }
.tenant-code{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
.flash{ border-radius:12px; border-left:4px solid var(--border); }
.flash-ok{ border-left-color:var(--ok); } .flash-err{ border-left-color:var(--crit); } .flash-info{ border-left-color:var(--brand); }

/* link & detail/summary */
a{ text-underline-offset:3px; }
summary{ cursor:pointer; transition:color .15s; } summary:hover{ color:var(--accent); }
details[open]>summary{ margin-bottom:6px; }

/* skeleton dan scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--text-muted) 35%, transparent); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--brand) 55%, transparent); background-clip:padding-box; border:2px solid transparent; }
*{ scrollbar-color:color-mix(in srgb, var(--text-muted) 40%, transparent) transparent; }

/* login */

/* gerak dikurangi */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
/* responsif: kartu & tabel lebih lega di HP */
@media (max-width:600px){
  .toolbar h1{ font-size:1.15rem; } .page{ padding-inline:14px; }
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .btn{ min-height:38px; }
}

/* ---------- panel "kontrol tidak berlaku" ---------- */
.na-panel{ padding:0; overflow:hidden; border-left:4px solid var(--brand); margin:4px 0 18px; }
.na-panel>summary{ list-style:none; display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; }
.na-panel>summary::-webkit-details-marker{ display:none; }
.na-panel[open]>summary{ border-bottom:1px solid var(--border); margin-bottom:0; }
.na-ico{ flex:0 0 32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font:800 .95rem 'Montserrat',sans-serif; font-style:italic; }
.na-head{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.na-head strong{ font-size:1.02rem; font-weight:800; letter-spacing:-.01em; }
.na-head small{ font-size:.82rem; color:var(--text-muted); font-weight:500; line-height:1.4; }
.na-caret{ flex:0 0 10px; height:10px; border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(45deg); transition:transform .2s var(--ease); margin-right:4px; }
.na-panel[open] .na-caret{ transform:rotate(-135deg); }
.na-group{ padding:14px 20px 6px; }
.na-group+.na-group{ border-top:1px dashed var(--border); }
.na-group h3{ display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
.na-count{ font-style:normal; font-size:.72rem; font-weight:800; padding:1px 8px; border-radius:999px; background:var(--surface-raised); color:var(--text-muted); border:1px solid var(--border); }
.na-list{ list-style:none; margin:0; padding:0; }
.na-item{ display:grid; grid-template-columns:minmax(220px,38%) minmax(0,1fr); gap:6px 24px; align-items:start; padding:11px 0; border-top:1px solid var(--border); }
.na-item:first-child{ border-top:0; }
.na-ctl{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
.na-id{ flex:0 0 auto; font:700 .76rem 'IBM Plex Mono',ui-monospace,monospace; padding:3px 8px; border-radius:6px; background:var(--accent-soft); color:var(--accent); white-space:nowrap; }
.na-name{ font-size:.9rem; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.na-why{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.na-line{ display:flex; align-items:flex-start; gap:8px; }
.na-chk{ flex:0 0 auto; font:700 .7rem 'IBM Plex Mono',ui-monospace,monospace; padding:2px 7px; border-radius:6px; border:1px solid var(--border); color:var(--text-muted); white-space:nowrap; }
.na-txt{ font-size:.84rem; color:var(--text-muted); line-height:1.45; }
@media (max-width:700px){
  .na-panel>summary{ padding:14px 16px; } .na-group{ padding:12px 16px 4px; }
  .na-item{ grid-template-columns:minmax(0,1fr); gap:8px; padding:12px 0; }
  .na-why{ padding-left:2px; }
}

/* ---------- submenu: flyout di sidebar + strip tab di halaman ---------- */
.nav-flyout{ display:none; }
.nav-chev{ flex:none; width:7px; height:7px; border-right:2px solid var(--text-muted); border-top:2px solid var(--text-muted); transform:rotate(45deg); opacity:.55; margin-left:2px; transition:transform .15s var(--ease), opacity .15s; }
@media (min-width:901px){
  .nav-item.has-sub{ position:relative; }
  .nav-item.has-sub>a{ display:flex; align-items:center; }
  .nav-item.has-sub:hover .nav-chev,.nav-item.has-sub.open .nav-chev{ opacity:1; transform:rotate(45deg) translate(2px,-2px); }
  .nav-flyout{ position:fixed; left:222px; top:0; z-index:70; padding-left:16px; min-width:250px; opacity:0; visibility:hidden; transform:translateX(-6px); transition:opacity .14s var(--ease), transform .14s var(--ease), visibility .14s; pointer-events:none; display:block; }
  .nav-item.has-sub.open>.nav-flyout{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nf-box{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:0 18px 44px -12px rgba(15,25,40,.28), 0 2px 6px rgba(15,25,40,.06); display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 24px); overflow-y:auto; }
  .nf-title{ font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); padding:8px 12px 6px; }
  .nf-sep{ font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); opacity:.8; padding:10px 12px 4px; border-top:1px dashed var(--border); margin-top:4px; }
  .nav .nf-link{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:.87rem; font-weight:600; color:var(--text); text-decoration:none; transition:background .12s, color .12s, padding-left .12s; }
  .nav .nf-link::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--border); transition:background .12s, transform .12s; flex:none; }
  .nav .nf-link:hover{ background:var(--accent-soft); color:var(--accent); padding-left:15px; }
  .nav .nf-link:hover::before,.nav .nf-link.active::before{ background:var(--brand); transform:scale(1.25); }
  .nav .nf-link.active{ background:var(--accent-soft); color:var(--accent); font-weight:700; }
  body.has-sidebar .nav .nf-link.active::after{ content:none; }
}
@media (max-width:900px){ .nav-flyout,.nav-chev{ display:none !important; } }
.subtabs{ display:flex; align-items:flex-end; gap:2px; margin:-4px 0 18px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.subtabs::-webkit-scrollbar{ display:none; }
.subtab{ flex:none; position:relative; padding:10px 14px; font-size:.86rem; font-weight:700; color:var(--text-muted); text-decoration:none; border-radius:10px 10px 0 0; transition:color .15s, background-color .15s; white-space:nowrap; }
.subtab:hover{ color:var(--accent); background:var(--accent-soft); }
.subtab.active{ color:var(--accent); }
.subtab.active::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--grad-brand); }
.subtab-sep{ flex:none; align-self:center; font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); opacity:.7; padding:0 10px 0 16px; border-left:1px solid var(--border); margin-left:8px; }

/* ---------- Kepatuhan: ringkasan, sorotan, halaman kerangka ---------- */
.chk-hl{ padding:16px 20px; }
.chk-hl-list{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; }
.chk-hl-list li+li{ border-top:1px solid var(--border); }
.chk-hl-list a{ display:flex; align-items:center; gap:14px; padding:11px 4px; text-decoration:none; color:inherit; border-radius:8px; transition:background .12s, padding-left .15s var(--ease); }
.chk-hl-list a:hover{ background:var(--accent-soft); padding-left:10px; }
.chk-hl-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.chk-hl-t strong{ font-size:.9rem; font-weight:700; } .chk-hl-t small{ font-size:.8rem; color:var(--text-muted); }
.chk-fwhead{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; padding:20px 24px; border-left:4px solid var(--brand); }
.chk-fwhead .fwh-main{ flex:1 1 320px; min-width:0; } .chk-fwhead h2{ font-size:1.15rem; font-weight:800; margin:4px 0 6px; }
.chk-fwhead .fwh-stat{ flex:0 0 240px; display:flex; flex-direction:column; gap:8px; }
.chk-fwhead .fw-pct{ font-size:2rem; }
.chk-fwhead.tone-ok{ border-left-color:var(--ok); } .chk-fwhead.tone-warn{ border-left-color:var(--warn); } .chk-fwhead.tone-crit{ border-left-color:var(--crit); }
.ctl-checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.ctl-checks a{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px; text-decoration:none; color:inherit; transition:background .12s; }
.ctl-checks a:hover{ background:var(--accent-soft); }
.ctl-checks .cc-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ctl-checks .cc-t strong{ font-size:.86rem; font-weight:700; } .ctl-checks .cc-t small{ font-size:.78rem; color:var(--text-muted); }
@media (max-width:700px){ .chk-fwhead{ padding:16px; gap:14px; } .chk-fwhead .fwh-stat{ flex-basis:100%; } .chk-hl{ padding:12px 14px; } }
.btn.is-loading{ position:relative; padding-left:30px; opacity:.85; cursor:progress; }
.btn.is-loading::before{ content:""; position:absolute; left:10px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.fw-sub2{ display:block; margin-top:2px; opacity:.85; }

/* ---------- "segera hadir" ---------- */
.soon-badge{ font-style:normal; font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); margin-left:auto; white-space:nowrap; }
.subtab .soon-badge{ margin-left:6px; }
.soon-card{ max-width:620px; margin:30px auto; padding:36px 32px; text-align:center; border-top:4px solid transparent; border-image:var(--grad-brand) 1; }
.soon-ico{ font-size:2.4rem; line-height:1; margin-bottom:10px; }
.soon-tag{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent); margin-bottom:12px; }
.soon-card h2{ font-size:1.3rem; font-weight:800; margin-bottom:6px; }
.soon-card p{ color:var(--text-muted); margin:0 0 14px; }
.soon-list{ list-style:none; margin:0 0 20px; padding:0; display:inline-flex; flex-direction:column; gap:8px; text-align:left; font-size:.9rem; }
.soon-list li{ position:relative; padding-left:22px; } .soon-list li::before{ content:""; position:absolute; left:0; top:.45em; width:8px; height:8px; border-radius:50%; background:var(--brand); }

/* perbaikan: kartu "segera hadir" (border-image menghilangkan sudut membulat) + sidebar di jendela pendek */
.soon-card{ border-image:none; border:1px solid var(--border); border-radius:var(--radius-m); position:relative; overflow:hidden; }
.soon-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad-brand); }
@media (min-width:901px) and (max-height:820px){
  body.has-sidebar .topbar{ gap:12px; padding:14px 12px; }
  body.has-sidebar .brand-tag,.brand-tagline{ display:none; }
  body.has-sidebar .nav a{ padding-top:6px; padding-bottom:6px; font-size:.84rem; }
  body.has-sidebar .nav-group{ padding:9px 12px 3px; }
  body.has-sidebar .nav-user{ padding-top:8px; }
}
/* penanda ada menu lagi di bawah saat sidebar bisa digulir */
@media (min-width:901px){
  body.has-sidebar .topbar{ scrollbar-width:thin; overscroll-behavior:contain; background:linear-gradient(var(--surface) 30%, transparent) top / 100% 24px no-repeat local, linear-gradient(transparent, rgba(20,30,45,.10)) bottom / 100% 14px no-repeat scroll, var(--surface); }
}

/* ---------- Kepatuhan: perubahan konfigurasi ---------- */
.drift-stat{ flex:1 1 170px; padding:14px 18px; margin:0; display:flex; flex-direction:column; gap:2px; }
.drift-stat small{ font-size:.66rem; font-weight:800; letter-spacing:.08em; color:var(--text-muted); }
.drift-stat strong{ font:800 1.9rem 'Montserrat',sans-serif; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.drift-stat.worse{ border-left:4px solid var(--crit); } .drift-stat.worse strong{ color:var(--crit); }
.drift-stat.better{ border-left:4px solid var(--ok); } .drift-stat.better strong{ color:var(--ok); }
.drift-day{ font-size:.78rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin:18px 0 8px; }
.drift-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.drift-item{ display:flex; gap:14px; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--radius-m); }
.drift-item.is-worse{ border-left-color:var(--crit); } .drift-item.is-better{ border-left-color:var(--ok); }
.drift-time{ flex:0 0 46px; font-size:.78rem; color:var(--text-muted); padding-top:2px; }
.drift-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.drift-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.drift-head strong{ font-size:.9rem; font-weight:700; }
.drift-arrow{ color:var(--text-muted); font-weight:700; }
.drift-diff{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.drift-diff>div{ background:var(--surface-raised); border-radius:9px; padding:8px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.drift-diff small{ font-size:.64rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.drift-diff span{ font-size:.84rem; overflow-wrap:anywhere; }
@media (max-width:700px){ .drift-item{ flex-direction:column; gap:6px; padding:12px; } .drift-diff{ grid-template-columns:1fr; } }

/* ---------- atribusi pelaku & aktivitas admin ---------- */
.drift-who{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:8px 12px; border-radius:9px; background:var(--surface-raised); border-left:3px solid var(--border); }
.drift-who>small{ font-size:.64rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-right:4px; }
.drift-who.who-high{ border-left-color:var(--ok); } .drift-who.who-medium{ border-left-color:var(--brand); } .drift-who.who-low{ border-left-color:var(--warn); }
.who-note{ font-size:.78rem; color:var(--text-muted); font-weight:600; }
.who-chip{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; padding:3px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:.82rem; }
.who-chip em{ font-style:normal; color:var(--text-muted); } .who-ip{ font-size:.72rem; color:var(--text-muted); }
.who-change{ flex-basis:100%; font-size:.74rem; color:var(--text-muted); overflow-wrap:anywhere; }
.who-conf{ margin-left:auto; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.who-tag{ font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.act-bar{ display:flex; align-items:center; gap:12px; padding:4px 0; text-decoration:none; color:inherit; border-radius:6px; }
.act-bar:hover{ background:var(--accent-soft); }
.act-bar .ab-name{ flex:0 0 38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ab-track{ flex:1; height:8px; border-radius:6px; background:var(--surface-raised); overflow:hidden; } .ab-track i{ display:block; height:100%; background:var(--grad-brand); border-radius:6px; }
.act-change{ display:block; margin-top:3px; overflow-wrap:anywhere; max-width:560px; }

/* ---------- Versi & Pembaruan ---------- */
.nav-badge.new{ background:var(--grad-brand); color:#fff; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; min-width:0; border-radius:999px; }
.ver-now{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; padding:18px 22px; border-left:4px solid var(--brand); }
.ver-now-main{ display:flex; flex-direction:column; gap:2px; }
.ver-label{ font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.ver-big{ font:800 1.9rem 'Montserrat',sans-serif; letter-spacing:-.02em; }
.ver-note{ margin:0; flex:1 1 280px; }
.ver-filters{ align-items:center; margin:6px 0 12px; }
.ver-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.rel{ padding:16px 20px; }
.rel.is-current{ border-left:4px solid var(--ok); }
.rel-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.rel-head h2{ font:800 1.15rem 'Montserrat',sans-serif; margin:0; letter-spacing:-.01em; }
.rel-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.rel-list li{ display:flex; gap:12px; align-items:flex-start; }
.rel-type{ flex:0 0 92px; text-align:center; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; margin-top:1px; }
.rel-type.t-new{ background:var(--ok-soft); color:var(--ok); } .rel-type.t-improve{ background:var(--accent-soft); color:var(--accent); } .rel-type.t-fix{ background:var(--warn-soft); color:var(--warn); }
.rel-text{ font-size:.9rem; line-height:1.5; min-width:0; overflow-wrap:anywhere; }
@media (max-width:600px){ .rel-list li{ flex-direction:column; gap:4px; } .rel-type{ flex:0 0 auto; align-self:flex-start; } }

/* ---------- temuan proaktif: katalog policy ---------- */
.fp-tools{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin:0 0 6px; }
.fp-tools form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fp-tools label.inline{ display:inline-flex; align-items:center; gap:8px; margin:0; white-space:nowrap; }
.fp-tools select{ width:auto; }
.fp-group-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin:22px 0 10px; }
.fp-group-head h2{ margin:0; font-size:1rem; }
.fp-group-head h2 .small{ font-weight:600; margin-left:6px; }
.fp-group-actions{ display:flex; gap:8px; }
.fp-pol{ padding:0; margin-bottom:0; border-left:4px solid var(--ok); }
.fp-pol.is-off{ border-left-color:var(--border); }
.fp-pol.is-off .chk-title strong{ color:var(--text-muted); }
.fp-head{ display:grid; grid-template-columns:62px minmax(0,1fr) auto auto auto; grid-template-areas:"id title sev hit sw"; align-items:center; gap:12px; padding:12px 16px; }
.fp-head .chk-id{ grid-area:id; } .fp-head .chk-title{ grid-area:title; } .fp-head .sev-pill{ grid-area:sev; } .fp-head .fp-hit{ grid-area:hit; } .fp-head .fp-sw{ grid-area:sw; margin:0; }
.fp-hit{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; min-width:150px; }
.fp-hit small{ font-size:.72rem; color:var(--text-muted); white-space:nowrap; }
.fp-tag{ display:inline-block; font:700 .62rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.04em; padding:1px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.fp-switch{ display:inline-flex; align-items:center; gap:8px; min-width:104px; padding:0; border:0; background:none; font:700 .74rem 'Montserrat',sans-serif; color:var(--text-muted); cursor:pointer; }
.fp-switch i{ position:relative; flex:none; width:34px; height:20px; border-radius:999px; background:var(--border); transition:background .15s; }
.fp-switch i::after{ content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; }
.fp-switch.on{ color:var(--ok); } .fp-switch.on i{ background:var(--ok); } .fp-switch.on i::after{ transform:translateX(14px); }
.fp-switch:disabled{ cursor:default; opacity:.65; }
.fp-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.fp-more{ border-top:1px solid var(--border); }
.fp-more > summary{ list-style:none; cursor:pointer; padding:7px 16px; font-size:.75rem; font-weight:700; color:var(--text-muted); }
.fp-more > summary::-webkit-details-marker{ display:none; }
.fp-more > summary::before{ content:"▸ "; } .fp-more[open] > summary::before{ content:"▾ "; }
.fp-more > summary:hover{ color:var(--text); }
.fp-more .chk-body{ border-top:0; padding-top:0; }
.fp-list{ margin:0; padding-left:18px; font-size:.82rem; line-height:1.6; }
@media (max-width:760px){
  .fp-head{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id sw" "title title" "hit sev"; gap:8px 12px; }
  .fp-hit{ align-items:flex-start; min-width:0; }
  .fp-head .sev-pill{ justify-self:end; align-self:start; }
  .fp-switch{ min-width:0; }
  .fp-switch span{ display:none; }
}

/* ---------- Risk Board ---------- */
.rb-toolbar{ align-items:flex-end; }
.rb-lead{ margin:4px 0 0; color:var(--text-muted); font-size:.9rem; }
.rb-live{ display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; color:var(--text-muted); padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.rb-live i{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 var(--ok); animation:rb-pulse 2s infinite; }
@keyframes rb-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70%{ box-shadow:0 0 0 9px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce){ .rb-live i{ animation:none; } .rb-row, .rb-kpi, .rb-area{ transition:none !important; } }
:where(.rb-ring, .rb-row, .rb-bar, .rb-comp li, .rb-port, .rb-gauge-card, .rb-fixes, .rb-trend, .rb-gauge){ --c:var(--info); --cs:var(--info-soft); }
.tone-ok, .z-ok{ --c:var(--ok); --cs:var(--ok-soft); } .tone-warn, .z-warn{ --c:var(--warn); --cs:var(--warn-soft); } .tone-crit, .z-crit{ --c:var(--crit); --cs:var(--crit-soft); }
.rb-eyebrow{ display:block; margin:0 0 10px; font:800 .68rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); }
.rb-sec-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px 20px; flex-wrap:wrap; margin-bottom:14px; }
.rb-sec-head h2{ margin:0; font-size:1.05rem; }
.rb-sec-head p{ margin:3px 0 0; font-size:.8rem; color:var(--text-muted); }
.rb-cap{ margin:8px 0 0; font-size:.74rem; color:var(--text-muted); }
.rb-empty{ margin:0; padding:18px; text-align:center; font-weight:600; color:var(--text-muted); background:var(--surface-raised); border-radius:var(--radius-s); }

/* hero */
.rb-hero{ display:grid; grid-template-columns:minmax(250px,1fr) minmax(280px,1.1fr) minmax(320px,1.35fr); gap:18px; margin-bottom:18px; }
.rb-hero > .card{ margin-bottom:0; }
.rb-port{ position:relative; overflow:hidden; background:radial-gradient(120% 90% at 0% 0%, var(--cs) 0%, transparent 60%), var(--surface); }
.rb-port-main{ display:flex; align-items:center; gap:18px; margin:4px 0 18px; }
.rb-port-big{ margin:0; font:800 1.5rem 'Montserrat',sans-serif; color:var(--c); }
.rb-port-sub{ margin:2px 0 0; font-size:.8rem; color:var(--text-muted); }
.rb-ring{ flex:none; position:relative; width:62px; height:62px; border-radius:50%; display:grid; place-content:center; text-align:center; text-decoration:none;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-raised) 0); }
.rb-ring::before{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--surface); }
.rb-ring strong, .rb-ring small{ position:relative; line-height:1; }
.rb-ring strong{ font:700 1.2rem 'IBM Plex Mono',monospace; color:var(--c); }
.rb-ring small{ margin-top:2px; font:800 .62rem 'Montserrat',sans-serif; color:var(--text-muted); }
.rb-ring.xl{ width:132px; height:132px; filter:drop-shadow(0 6px 18px var(--cs)); }
.rb-ring.xl::before{ inset:12px; }
.rb-ring.xl strong{ font-size:2.6rem; }
.rb-ring.xl small{ font-size:.85rem; margin-top:4px; }
.rb-dist{ display:flex; height:10px; border-radius:999px; overflow:hidden; gap:3px; background:var(--surface-raised); }
.rb-dist span{ background:var(--c); }
.rb-dist-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:.76rem; }
.rb-dist-legend a{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); text-decoration:none; font-weight:600; }
.rb-dist-legend a:hover{ color:var(--text); }
.rb-dist-legend i{ width:9px; height:9px; border-radius:3px; background:var(--c); }
.rb-dist-legend b{ font-family:'IBM Plex Mono',monospace; color:var(--text); }

.rb-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rb-kpi{ --c:var(--text); margin:0; padding:14px 16px; display:flex; flex-direction:column; gap:3px; text-decoration:none; color:var(--text); position:relative; overflow:hidden; transition:transform .15s ease, border-color .15s ease; }
.rb-kpi.ok{ --c:var(--ok); } .rb-kpi.warn{ --c:var(--warn); } .rb-kpi.crit{ --c:var(--crit); }
.rb-kpi::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--c); opacity:.85; }
a.rb-kpi:hover{ transform:translateY(-2px); border-color:var(--c); }
.rb-kpi-v{ font:700 1.9rem 'IBM Plex Mono',monospace; line-height:1.1; color:var(--c); }
.rb-kpi-v.crit{ color:var(--crit); } .rb-kpi-v.warn{ color:var(--warn); } .rb-kpi-v.ok{ color:var(--ok); }
.rb-kpi-l{ font-weight:700; font-size:.84rem; }
.rb-kpi-s{ font-size:.72rem; color:var(--text-muted); }

/* matriks risiko */
.rb-matrix{ width:100%; height:auto; display:block; }
.rb-quad{ fill:var(--cs); }
.rb-quad-l{ fill:var(--c); font:800 9.5px 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.06em; opacity:.85; }
.rb-axisline{ stroke:var(--border); stroke-width:1.2; stroke-dasharray:4 4; }
.rb-axis{ fill:var(--text-muted); font:600 10.5px 'Montserrat',sans-serif; }
.rb-axis-t{ font-weight:800; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; }
.rb-bub circle{ fill:var(--c); fill-opacity:.82; stroke:var(--surface); stroke-width:3; filter:drop-shadow(0 3px 8px var(--cs)); transition:fill-opacity .15s; }
.rb-bub.no-trend circle{ fill-opacity:.35; stroke:var(--c); stroke-dasharray:3 3; stroke-width:2; }
.rb-bub:hover circle{ fill-opacity:1; }
.rb-bub text{ fill:var(--text); font:700 10px 'Montserrat',sans-serif; }

/* kemenangan terbesar */
.rb-wins{ background:linear-gradient(135deg, var(--accent-soft), transparent 55%), var(--surface); }
.rb-win-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.rb-win-list li{ display:grid; grid-template-columns:30px auto minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface); }
.rb-win-n, .rb-fix-n{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--surface); font:800 .8rem 'Montserrat',sans-serif; }
.rb-win-t{ font-weight:600; font-size:.88rem; text-decoration:none; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-win-t:hover{ color:var(--accent); }
.rb-gain{ font:700 .8rem 'IBM Plex Mono',monospace; color:var(--ok); background:var(--ok-soft); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.rb-gain.big{ font-size:1rem; padding:6px 14px; }

/* filter */
.rb-filterbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:4px 0 12px; }
.rb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rb-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-muted); text-decoration:none; font-size:.8rem; font-weight:700; }
.rb-chip i{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.rb-chip b{ font-family:'IBM Plex Mono',monospace; color:var(--text); }
.rb-chip:hover{ border-color:var(--accent); }
.rb-chip.active{ border-color:var(--accent); background:var(--accent-soft); color:var(--text); box-shadow:0 0 0 2px var(--accent-soft); }

/* papan customer */
.rb-board{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.rb-row{ margin:0; display:grid; grid-template-columns:34px 62px minmax(220px,1.5fr) minmax(250px,1.25fr) 150px minmax(190px,1fr); align-items:center; gap:18px; padding:16px 18px; border-left:4px solid var(--c);
  background:linear-gradient(90deg, var(--cs), transparent 22%), var(--surface); transition:transform .15s ease, box-shadow .15s ease; }
.rb-row:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(20,30,45,.06), 0 16px 34px rgba(20,30,45,.1); }
.rb-rank{ font:800 .9rem 'Montserrat',sans-serif; color:var(--text-muted); }
.rb-main{ min-width:0; }
.rb-name{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.rb-name a{ color:var(--text); text-decoration:none; font-size:1rem; }
.rb-name a:hover{ color:var(--accent); }
.rb-name .muted{ font-size:.8rem; }
.rb-level{ font:800 .62rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:999px; background:var(--cs); color:var(--c); }
.rb-why{ margin:6px 0 10px; font-size:.78rem; line-height:1.45; color:var(--text-muted); }
.rb-why.big{ font-size:.95rem; color:var(--text); margin:0 0 16px; }
.rb-bars{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:5px 14px; }
.rb-bar{ display:grid; grid-template-columns:76px minmax(0,1fr) 26px; align-items:center; gap:8px; font-size:.7rem; }
.rb-bar em{ font-style:normal; font-weight:700; color:var(--text-muted); }
.rb-bar i{ height:6px; border-radius:999px; background:var(--surface-raised); overflow:hidden; }
.rb-bar i b{ display:block; height:100%; border-radius:999px; background:var(--c); }
.rb-bar strong{ font:700 .72rem 'IBM Plex Mono',monospace; text-align:right; color:var(--c); }
.rb-bar.na{ opacity:.5; }
.rb-heat{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.rb-cell{ display:flex; flex-direction:column; justify-content:center; gap:1px; min-height:46px; padding:5px 8px; border-radius:8px; text-decoration:none; color:var(--text); background:var(--surface-raised); border:1px solid transparent; transition:transform .12s ease; }
.rb-cell:hover{ transform:scale(1.04); }
.rb-cell b{ font:700 .95rem 'IBM Plex Mono',monospace; line-height:1.1; }
.rb-cell small{ font-size:.6rem; font-weight:700; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-cell.sev-crit, .rb-hm-cell.sev-crit, .rb-area.sev-crit{ background:var(--crit-soft); border-color:color-mix(in srgb, var(--crit) 35%, transparent); color:var(--crit); }
.rb-cell.sev-warn, .rb-hm-cell.sev-warn, .rb-area.sev-warn{ background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 35%, transparent); color:var(--warn); }
.rb-cell.sev-info, .rb-hm-cell.sev-info, .rb-area.sev-info{ background:var(--accent-soft); color:var(--accent); }
.rb-cell.clean, .rb-hm-cell.clean, .rb-area.clean{ background:var(--ok-soft); color:var(--ok); }
.rb-trendcol{ display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.rb-notrend{ font-size:.72rem; color:var(--text-muted); font-style:italic; text-align:center; padding:12px 0; border:1px dashed var(--border); border-radius:8px; }
.rb-delta{ font:700 .74rem 'IBM Plex Mono',monospace; color:var(--text-muted); text-align:center; }
.rb-delta.up{ color:var(--ok); } .rb-delta.down{ color:var(--crit); }
.rb-next{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px 12px; border-radius:var(--radius-s); background:var(--surface-raised); min-width:0; }
.rb-next .rb-eyebrow{ margin:0; }
.rb-next a{ font-weight:700; font-size:.82rem; color:var(--text); text-decoration:none; line-height:1.35; }
.rb-next a:hover{ color:var(--accent); }

/* peta panas portofolio */
.rb-hm{ width:100%; border-collapse:separate; border-spacing:4px; table-layout:fixed; min-width:640px; }
.rb-hm th:first-child{ width:120px; } .rb-hm th:nth-child(2), .rb-hm th:last-child{ width:64px; }
.rb-hm th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); text-align:center; padding:4px; }
.rb-hm th:first-child{ text-align:left; }
.rb-hm td{ padding:0; border:0; text-align:center; }
.rb-hm td:first-child{ text-align:left; }
.rb-hm-cell{ display:block; min-width:44px; padding:9px 4px; border-radius:8px; font:700 .9rem 'IBM Plex Mono',monospace; text-decoration:none; border:1px solid transparent; }
.rb-num{ font:700 1rem 'IBM Plex Mono',monospace; color:var(--c); }
.rb-hm-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:10px; font-size:.74rem; color:var(--text-muted); }
.rb-hm-legend span{ width:12px; height:12px; border-radius:4px; margin-right:-8px; }
.rb-hm-legend .sev-crit{ background:var(--crit); } .rb-hm-legend .sev-warn{ background:var(--warn); } .rb-hm-legend .sev-info{ background:var(--accent); } .rb-hm-legend .clean{ background:var(--ok); }

/* rincian skor */
.rb-score-hero{ display:grid; grid-template-columns:minmax(300px,420px) minmax(0,1fr); gap:18px; margin-bottom:18px; }
.rb-score-hero > .card{ margin:0; }
.rb-gauge-card{ text-align:center; background:radial-gradient(90% 70% at 50% 100%, var(--cs) 0%, transparent 65%), var(--surface); }
.rb-gauge{ width:100%; max-width:360px; height:auto; display:block; margin:0 auto; }
.rb-g-zone{ fill:none; stroke-width:9; stroke-linecap:round; }
.rb-g-zone.z-crit{ stroke:var(--crit); opacity:.35; } .rb-g-zone.z-warn{ stroke:var(--warn); opacity:.35; } .rb-g-zone.z-ok{ stroke:var(--ok); opacity:.35; }
.rb-g-track{ fill:none; stroke:var(--surface-raised); stroke-width:18; stroke-linecap:round; }
.rb-g-value{ fill:none; stroke:var(--c); stroke-width:18; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--cs)); }
.rb-g-tick{ fill:var(--text-muted); font:700 10px 'IBM Plex Mono',monospace; }
.rb-g-needle{ stroke:var(--text); stroke-width:3; stroke-linecap:round; }
.rb-g-hub{ fill:var(--text); }
.rb-g-score{ fill:var(--c); font:700 52px 'IBM Plex Mono',monospace; }
.rb-g-grade{ fill:var(--text-muted); font:800 12px 'Montserrat',sans-serif; letter-spacing:.12em; }
.rb-gauge-meta{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:4px; }
.rb-gauge-meta .rb-delta{ font-size:.85rem; }
.rb-glance-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.rb-glance-grid > *{ display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:var(--radius-s); background:var(--surface-raised); text-decoration:none; color:var(--text-muted); font-size:.74rem; font-weight:600; }
.rb-glance-grid a:hover{ outline:1px solid var(--accent); }
.rb-glance-grid .rb-kpi-v{ color:var(--text); }
.rb-trend{ width:100%; height:auto; display:block; }
.rb-band{ opacity:.55; } .rb-band.z-ok{ fill:var(--ok-soft); } .rb-band.z-warn{ fill:var(--warn-soft); } .rb-band.z-crit{ fill:var(--crit-soft); }
.rb-grid{ stroke:var(--border); stroke-width:1; stroke-dasharray:3 4; }
.rb-trend{ color:var(--c); }
.rb-line{ fill:none; stroke:var(--c); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.rb-dot{ fill:var(--surface); stroke:var(--c); stroke-width:2; }
.rb-dot.last{ fill:var(--c); stroke:var(--surface); stroke-width:3; filter:drop-shadow(0 0 6px var(--cs)); }
.rb-last{ fill:var(--c); font:700 14px 'IBM Plex Mono',monospace; }
.rb-fixes{ position:relative; border:1px solid transparent; background:linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--accent), var(--c), var(--ok)) border-box; }
.rb-proj{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-proj span{ font:700 2.2rem 'IBM Plex Mono',monospace; line-height:1; }
.rb-proj-from{ color:var(--c); opacity:.7; } .rb-proj-to{ color:var(--c); }
.rb-proj-arrow{ color:var(--text-muted); font-size:1.6rem !important; }
.rb-proj small{ flex-basis:100%; text-align:right; font-size:.72rem; font-weight:700; color:var(--text-muted); }
.rb-fix-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rb-fix-list li{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius-s); background:var(--surface-raised); }
.rb-fix-n{ width:34px; height:34px; font-size:.95rem; }
.rb-fix-body{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.rb-fix-body a{ font-weight:700; color:var(--text); text-decoration:none; }
.rb-fix-body a:hover{ color:var(--accent); }
.rb-more{ margin-top:12px; font-size:.84rem; }
.rb-more summary{ cursor:pointer; font-weight:700; color:var(--text-muted); }
.rb-more ul{ margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.rb-split{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; }
.rb-split > .card{ margin-bottom:18px; }
.rb-wf{ width:100%; height:auto; display:block; }
.rb-wf-bar.base{ fill:var(--info-soft); stroke:var(--border); }
.rb-wf-bar.loss{ fill:var(--crit); opacity:.78; }
.rb-wf-bar.final{ fill:var(--c); filter:drop-shadow(0 4px 10px var(--cs)); }
.rb-wf-val{ fill:var(--text); font:700 12px 'IBM Plex Mono',monospace; }
.rb-wf-val.loss{ fill:var(--crit); }
.rb-wf-link{ stroke:var(--text-muted); stroke-width:1; stroke-dasharray:3 3; opacity:.6; }
.rb-comp{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.rb-comp li.na{ opacity:.55; }
.rb-comp-top{ display:flex; align-items:baseline; gap:10px; }
.rb-comp-top a{ color:var(--text); text-decoration:none; } .rb-comp-top a:hover{ color:var(--accent); }
.rb-comp-v{ margin-left:auto; font:700 1.15rem 'IBM Plex Mono',monospace; color:var(--c); }
.rb-comp-v small{ font-size:.68rem; color:var(--text-muted); }
.rb-comp-bar{ display:block; height:8px; margin:6px 0 4px; border-radius:999px; background:var(--surface-raised); overflow:hidden; }
.rb-comp-bar b{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, transparent), var(--c)); }
.rb-comp p{ margin:0; }
.rb-areas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(165px,1fr)); gap:10px; }
.rb-area{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:var(--radius-m); border:1px solid transparent; text-decoration:none; transition:transform .15s ease; }
.rb-area:hover{ transform:translateY(-2px); }
.rb-area-n{ font:700 1.7rem 'IBM Plex Mono',monospace; line-height:1; }
.rb-area strong{ color:var(--text); font-size:.86rem; }
.rb-area small{ color:var(--text-muted); font-size:.74rem; line-height:1.35; }
.rb-how{ padding:12px 18px; }
.rb-how summary{ cursor:pointer; font-weight:700; font-size:.86rem; }
.rb-how p{ margin:8px 0 0; }

@media (max-width:1280px){
  .rb-hero{ grid-template-columns:1fr 1fr; }
  .rb-matrix-card{ grid-column:1 / -1; }
  .rb-row{ grid-template-columns:34px 62px minmax(0,1fr) minmax(220px,1fr); }
  .rb-trendcol{ grid-column:3; } .rb-next{ grid-column:4; }
}
@media (max-width:900px){
  .rb-hero, .rb-score-hero, .rb-split{ grid-template-columns:1fr; }
  .rb-row{ grid-template-columns:62px minmax(0,1fr); gap:12px 14px; }
  .rb-rank{ display:none; }
  .rb-heat, .rb-trendcol, .rb-next{ grid-column:1 / -1; }
  .rb-glance-grid{ grid-template-columns:1fr 1fr; }
  .rb-win-list li{ grid-template-columns:28px minmax(0,1fr) auto; }
  .rb-win-list li .tenant-code, .rb-win-list li .sev-pill{ display:none; }
  .rb-win-t{ white-space:normal; }
}
@media (max-width:520px){
  .rb-bars{ grid-template-columns:1fr; }
  .rb-ring.xl{ width:108px; height:108px; } .rb-ring.xl strong{ font-size:2.1rem; }
  .rb-fix-list li{ grid-template-columns:30px minmax(0,1fr); } .rb-fix-list .rb-gain{ grid-column:2; justify-self:start; }
}

/* ---------- pengaturan: asisten AI ---------- */
#ai .ai-only-anthropic[hidden], #ai .ai-only-openrouter[hidden]{ display:none; }

/* ---------- perbaikan a11y dari review UI/UX (2026-10-08) ---------- */
.skip-link{ position:absolute; left:-9999px; top:8px; z-index:1000; padding:8px 14px; border-radius:var(--radius-s); background:var(--surface); color:var(--text); border:2px solid var(--accent); font-weight:700; font-size:.84rem; text-decoration:none; }
.skip-link:focus{ left:12px; }
main#main:focus{ outline:none; }
@media (max-width:900px){
  /* target sentuh >= 44px: perbesar area klik, bukan ukuran font */
  .nav a{ min-height:44px; align-items:center; }
  .theme-switch button{ width:44px; height:44px; }
  .lang-switch a{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px !important; }
  .btn-sm{ min-height:44px; }
}

/* ---------- dashboard: blok risiko portofolio (memakai gaya .rb-* dari Papan Risiko) ---------- */
.dash-portfolio{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr); gap:18px; margin:0 0 18px; align-items:stretch; }
.dash-portfolio > .card{ margin-bottom:0; display:flex; flex-direction:column; min-width:0; }
.dash-portfolio .rb-matrix{ width:100%; height:auto; }
@media (max-width:1200px){ .dash-portfolio{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .dash-portfolio .rb-matrix-card{ grid-column:1 / -1; } }
@media (max-width:900px){ .dash-portfolio{ grid-template-columns:minmax(0,1fr); } }
.dash-portfolio .rb-win-t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.rb-bub text{ paint-order:stroke; stroke:var(--surface); stroke-width:3px; stroke-linejoin:round; }
.dp-cust{ list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.dp-cust li{ --c:var(--info); display:grid; grid-template-columns:auto minmax(0,1fr) 2.2em auto; align-items:center; gap:10px; font-size:.82rem; }
.dp-cust li.tone-crit{ --c:var(--crit); } .dp-cust li.tone-warn{ --c:var(--warn); } .dp-cust li.tone-ok{ --c:var(--ok); }
.dp-bar{ height:8px; border-radius:999px; background:var(--surface-raised); overflow:hidden; }
.dp-bar i{ display:block; height:100%; background:var(--c); border-radius:999px; }
.dp-cust strong{ text-align:right; font-variant-numeric:tabular-nums; color:var(--c); }
.dp-delta{ min-width:3.4em; text-align:right; font-size:.74rem; font-weight:700; color:var(--text-muted); }
.dp-delta.up{ color:var(--ok); } .dp-delta.down{ color:var(--crit); }

/* ---------- hero dashboard: angka insiden besar, sparkline, portofolio, CTA ---------- */
.hero-top{ align-items:center; }
.hero-stat{ flex:none; min-width:1.3em; font:800 3.4rem/1 'Montserrat',sans-serif; font-variant-numeric:tabular-nums; color:var(--text-muted); text-align:center; }
.hero.ok .hero-stat{ color:var(--ok); } .hero.warn .hero-stat{ color:var(--warn); } .hero.crit .hero-stat{ color:var(--crit); }
.hero-text{ min-width:0; }
.hero-cta{ margin-top:10px; font-size:.9rem; padding:10px 18px; }
.hero-mid{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; color:var(--accent); }
.hero-mid-lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; }
.hero-port{ display:flex; align-items:center; gap:14px; padding:10px 16px; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); text-decoration:none; color:inherit; }
.hero-port:hover{ border-color:var(--accent); }
.hero-port-t{ display:flex; flex-direction:column; gap:2px; }
.hero-port-l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; }
.hero-port-t b{ font-size:1.15rem; }
.hero .health-bar{ height:12px; }
.hero-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding-top:10px; border-top:1px solid var(--border); }
.sum-prio{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:640px){ .hero-stat{ font-size:2.6rem; } .hero-mid{ display:none; } }

/* ---------- dashboard: tren KPI, prioritas, bar panel domain ---------- */
.kpi-trend{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; min-height:20px; color:var(--text-muted); }
.kpi-delta{ font-size:.72rem; font-weight:700; }
.kpi-delta.bad{ color:var(--crit); } .kpi-delta.good{ color:var(--ok); }
.kpi-spark{ flex:none; color:var(--accent); }
.sum-prio-h{ margin:14px 0 8px; font:800 .72rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); }
.dash-prio{ margin-bottom:10px; }
.dash-prio .rb-win-t{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.sum-more{ margin-top:6px; }
.sum-more > summary{ cursor:pointer; font-size:.82rem; font-weight:700; color:var(--accent); padding:6px 0; }
.mrow-bar{ display:block; margin-top:5px; height:6px; border-radius:999px; background:var(--surface-raised); overflow:hidden; }
.mrow-bar i{ display:block; height:100%; border-radius:999px; background:var(--ok); }
.mrow.warn .mrow-bar i{ background:var(--warn); } .mrow.crit .mrow-bar i{ background:var(--crit); }
.stale-note{ font-size:.78rem; font-weight:700; color:var(--warn); background:var(--warn-soft); padding:4px 10px; border-radius:999px; }
.stale-note[hidden]{ display:none; }

/* ---------- hero = temuan proaktif ---------- */
.hero-sub b{ color:var(--text); }
.hb.info{ background:var(--info); }
.hero-legend .info::before{ background:var(--info); }
.hero-mid{ flex:1 1 280px; max-width:420px; }
.area-list{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; width:100%; }
.area-list li{ --c:var(--info); display:grid; grid-template-columns:6.5em minmax(0,1fr) 2.2em; align-items:center; gap:10px; font-size:.82rem; }
.area-list li.sev-crit{ --c:var(--crit); } .area-list li.sev-warn{ --c:var(--warn); }
.ah-l{ color:var(--text-muted); font-weight:600; }
.ah-bar{ height:9px; border-radius:999px; background:var(--surface-raised); overflow:hidden; }
.ah-bar i{ display:block; height:100%; background:var(--c); border-radius:999px; }
.area-list b{ text-align:right; font-variant-numeric:tabular-nums; color:var(--c); }
.hero-stat{ font-size:4rem; }
.kpi-lbl{ min-height:2.4em; display:block; }
.dash-wins li{ grid-template-columns:30px auto minmax(0,1fr); row-gap:4px; }
.dash-wins li > .sev-pill{ grid-column:2; justify-self:start; }
.dash-wins li > .rb-gain{ grid-column:3; justify-self:start; }
.dash-wins .rb-win-t, .dash-prio .rb-win-t{ -webkit-line-clamp:3; }
.dash-prio li{ grid-template-columns:30px auto minmax(0,1fr); row-gap:4px; }
.dash-prio li > .sev-pill{ grid-column:2; justify-self:start; }
.dash-prio li > .rb-gain{ grid-column:3; justify-self:start; }
.dp-cust{ gap:10px; }
@media (max-width:1200px){ .dash-portfolio{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

@media (max-width:640px){ .hero-stat{ font-size:2.8rem; } .hero-mid{ display:flex; max-width:none; } }

/* ---------- hero v4: ringkasan severity + cincin + tabel area x customer ---------- */
.hero .hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:start; }
.hero-left{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.hero-head{ display:flex; align-items:center; gap:16px; }
.hero-head .hero-title{ margin:0; }
.sev-row{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.84rem; color:var(--text-muted); }
.sev-row b{ font-size:1.25rem; font-variant-numeric:tabular-nums; color:var(--text); margin-right:2px; }
.hero-legend .lg, .sev-row .lg, .ha-leg .lg{ display:inline-flex; align-items:baseline; gap:4px; }
.sev-row .lg::before, .ha-leg .lg::before{ content:""; align-self:center; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; }
.sev-row .crit::before, .ha-leg .crit::before{ background:var(--crit); } .sev-row .warn::before, .ha-leg .warn::before{ background:var(--warn); }
.sev-row .info::before, .ha-leg .info::before{ background:var(--accent); } .sev-row .total::before{ display:none; }
.hb.info{ background:var(--accent); }
.hero-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.hero-cta-row .hero-cta{ margin:0; }
.hero-top-t{ font-size:.84rem; color:var(--text-muted); min-width:0; }
.hero-top-t b{ color:var(--text); }
.hero-port{ flex-direction:column; align-items:center; gap:6px; text-align:center; min-width:190px; }
.hero-port-lvl{ font-size:1.15rem; }
.hero-port-low{ font-size:.78rem; color:var(--text-muted); }
.hero-port-low i{ font-style:normal; font-weight:700; } .hero-port-low i.up{ color:var(--ok); } .hero-port-low i.down{ color:var(--crit); }
.hero-areas{ border-top:1px solid var(--border); padding-top:12px; }
.ha-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.ha-leg{ display:inline-flex; gap:14px; font-size:.74rem; color:var(--text-muted); }
.ha-list{ list-style:none; margin:0; padding:0; --cols:var(--cc,2); }
.ha-hd, .ha-row{ display:grid; grid-template-columns:7em minmax(90px,1fr) calc(var(--cols) * 4.2em) 3em; align-items:center; gap:12px; padding:6px 8px; }
.ha-hd{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; }
.ha-row{ text-decoration:none; color:inherit; border-radius:6px; font-size:.84rem; }
.ha-row:hover{ background:var(--surface-raised); }
.ha-row:focus-visible{ outline:3px solid var(--accent); outline-offset:1px; }
.ha-row.dim{ opacity:.55; }
.ha-name{ font-weight:600; }
.ha-bar{ display:flex; height:9px; border-radius:999px; overflow:hidden; background:var(--surface-raised); }
.ha-bar i.crit{ background:var(--crit); } .ha-bar i.warn{ background:var(--warn); } .ha-bar i.info{ background:var(--accent); }
.ha-cs{ display:grid; grid-template-columns:repeat(var(--cols), 1fr); text-align:right; font-variant-numeric:tabular-nums; color:var(--text-muted); }
.ha-t{ text-align:right; font-variant-numeric:tabular-nums; }
.chip-area{ font-size:.82rem; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
@media (max-width:900px){
  .hero .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-port{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .ha-hd{ display:none; }
  .ha-row{ grid-template-columns:1fr auto; grid-template-areas:"name tot" "bar bar" "cs cs"; row-gap:6px; padding:10px 8px; }
  .ha-row .ha-name{ grid-area:name; } .ha-row .ha-t{ grid-area:tot; } .ha-row .ha-bar{ grid-area:bar; }
  .ha-row .ha-cs{ grid-area:cs; grid-template-columns:repeat(var(--cols), auto); justify-content:start; gap:14px; text-align:left; }
}

/* ---------- hero v4.1: patokan ukuran (tinggi <= 340px, 3 kolom, bar 12px selebar kolom kiri) ---------- */
.hero{ padding:14px 20px 12px; gap:10px; }
.hero .hero-grid{ grid-template-columns:minmax(340px,1fr) minmax(430px,1.25fr) auto; gap:24px; align-items:start; }
.hero .hero-left{ gap:9px; }
.hero .hero-left .health-bar{ flex:none; width:100%; min-width:0; height:12px; border-radius:999px; }
.hero .hero-stat{ font-size:3.75rem; min-width:1.2em; }
.hero .hero-head .hero-title{ font-size:1.3rem; white-space:nowrap; }
.hero .sev-row{ gap:4px 18px; } .hero .sev-row b{ color:var(--text); }
.hero .hero-port{ padding:8px 14px; gap:4px; min-width:170px; }
.hero .hero-port .rb-ring.xl{ width:112px; height:112px; }
.hero .hero-port .rb-ring.xl::before{ inset:10px; }
.hero .hero-port .rb-ring.xl strong{ font-size:2.2rem; }
.hero .hero-areas{ border-top:0; padding-top:0; min-width:0; }
.hero .ha-head{ margin-bottom:2px; }
.hero .ha-list{ --cols:var(--cc,2); }
.hero .ha-hd, .hero .ha-row{ display:grid; grid-template-columns:5.2em minmax(70px,420px) repeat(var(--cols), 6.5em) 2.6em; justify-content:start; align-items:center; gap:12px; padding:3px 6px; }
.hero .ha-hd{ font-size:.68rem; }
.hero .ha-cs{ display:contents; }
.hero .ha-cs > span{ text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; color:var(--text); font-variant-numeric:tabular-nums; }
.hero .ha-hd .ha-cs > span{ color:var(--text-muted); }
.hero .ha-row{ font-size:.8rem; }
.hero .ha-row.dim .ha-cs > span, .hero .ha-row.dim .ha-name{ color:var(--text-muted); }
.hero .ha-t{ text-align:right; color:var(--text); }
.hero .hero-meta{ padding-top:8px; }
@media (max-width:1100px){ .hero .hero-grid{ grid-template-columns:minmax(0,1fr) auto; } .hero .hero-areas{ grid-column:1 / -1; } }
@media (max-width:900px){
  .hero .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .hero .hero-head .hero-title{ white-space:normal; }
  .hero .ha-hd{ display:none; }
  .hero .ha-row{ grid-template-columns:1fr auto; grid-template-areas:"name tot" "bar bar" "cs cs"; row-gap:6px; padding:8px 6px; }
  .hero .ha-row .ha-name{ grid-area:name; } .hero .ha-row .ha-t{ grid-area:tot; } .hero .ha-row .ha-bar{ grid-area:bar; }
  .hero .ha-cs{ display:flex; grid-area:cs; gap:16px; justify-content:flex-start; }
  .hero .ha-cs > span{ text-align:left; }
}

.hero .hero-left{ order:1; } .hero .hero-areas{ order:2; } .hero .hero-port{ order:3; }
@media (max-width:1100px){ .hero .hero-port{ order:2; } .hero .hero-areas{ order:3; } }

/* ---------- dashboard mobile: perbaikan tata letak (kartu portofolio satu kolom, baris prioritas/wins tidak meluap) ---------- */
/* aturan ini sengaja di akhir berkas: harus menang atas aturan 2 kolom (<=1200px) yang ditulis sebelumnya */
@media (max-width:900px){
  .dash-portfolio{ grid-template-columns:minmax(0,1fr); }
  .dash-portfolio > .card{ min-width:0; }
}
@media (max-width:900px){
  /* baris: [nomor | judul (sampai ujung)] lalu [tenant | severity | +pts]; semua ditempatkan eksplisit supaya tidak bergantung auto-placement */
  .dash-prio li, .dash-wins li{ grid-template-columns:28px auto auto minmax(0,1fr); column-gap:8px; row-gap:6px; align-items:center; }
  .dash-prio li > .rb-win-n, .dash-wins li > .rb-win-n{ grid-row:1; grid-column:1; align-self:start; }
  .dash-prio li > .rb-win-t, .dash-wins li > .rb-win-t{ grid-row:1; grid-column:2 / -1; min-width:0; }
  .dash-prio li > .tenant-code, .dash-wins li > .tenant-code{ grid-row:2; grid-column:2; display:inline-flex; }
  .dash-prio li > .sev-pill, .dash-wins li > .sev-pill{ grid-row:2; grid-column:3; justify-self:start; display:inline-flex; }
  .dash-prio li > .rb-gain, .dash-wins li > .rb-gain{ grid-row:2; grid-column:4; justify-self:start; }
  .dash-prio li, .dash-wins li{ padding:10px; }
  /* daftar customer berisiko: kolom tidak boleh mendorong keluar kartu */
  .dp-cust li{ grid-template-columns:minmax(0,auto) minmax(40px,1fr) 2.4em auto; gap:8px; }
  .dp-cust .tenant-code{ max-width:8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dp-delta{ min-width:0; white-space:nowrap; }
  .rb-port-sub{ overflow-wrap:anywhere; }
}

/* ---------- admin: organisasi customer ---------- */
.org-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.plain-list{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:8px 14px; }

/* ---------- band: ringkasan postur (pratinjau ?hero=1) ---------- */
.band{ display:grid; grid-template-columns:minmax(260px,1.1fr) repeat(3,minmax(104px,.42fr)) minmax(380px,1.9fr); gap:16px; margin:0 0 20px; align-items:stretch; }
.band-card{ position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); color:inherit; text-decoration:none; }
a.band-card:hover{ border-color:var(--c,var(--accent)); }
a.band-card:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.band-lbl{ font:800 .72rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); }
.band-sub{ font-size:.8rem; color:var(--text-muted); line-height:1.35; }
.band-health{ background:linear-gradient(135deg,var(--cs),transparent 62%),var(--surface); }
.band-health-main{ display:flex; align-items:center; gap:16px; }
.band .rb-ring.xl{ width:104px; height:104px; } .band .rb-ring.xl::before{ inset:10px; } .band .rb-ring.xl strong{ font-size:2.1rem; }
.band-health-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.band-level{ font-size:1.25rem; font-weight:800; color:var(--c); }
.band-spark{ color:var(--c); line-height:0; }
.band-delta{ font:700 .8rem 'IBM Plex Mono',monospace; } .band-delta.up{ color:var(--ok); } .band-delta.down{ color:var(--crit); } .band-delta span{ font:600 .74rem 'Montserrat',sans-serif; color:var(--text-muted); }
.band-low{ font-size:.82rem; color:var(--text-muted); } .band-low b{ color:var(--text); } .band-low i{ font:700 .78rem 'IBM Plex Mono',monospace; font-style:normal; } .band-low i.up{ color:var(--ok); } .band-low i.down{ color:var(--crit); }
.band-stat{ justify-content:space-between; border-bottom:4px solid var(--c); }
.band-foot{ display:flex; flex-direction:column; gap:6px; }
.band-bar{ display:block; height:6px; border-radius:99px; background:var(--surface-raised); overflow:hidden; } .band-bar i{ display:block; height:100%; border-radius:99px; background:var(--c); }
.band-stat.crit{ --c:var(--crit); } .band-stat.warn{ --c:var(--warn); } .band-stat.info{ --c:var(--accent); }
.band-num{ font:800 3.4rem/1 'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; color:var(--c); }
.band-fix{ gap:8px; }
.band-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.band-list a{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius-s); background:var(--surface-raised); color:inherit; text-decoration:none; font-size:.84rem; font-weight:600; }
.band-list a:hover{ background:var(--accent-soft); } .band-list a:focus-visible{ outline:3px solid var(--accent); outline-offset:1px; }
.band-n{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--on-solid,#fff); font:800 .72rem 'Montserrat',sans-serif; }
.band-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.band-gain{ font:700 .76rem 'IBM Plex Mono',monospace; color:var(--ok); background:var(--ok-soft); padding:2px 8px; border-radius:999px; white-space:nowrap; }
.band-cta{ align-self:flex-start; margin-top:auto; white-space:nowrap; }
@media (max-width:1280px){ .band{ grid-template-columns:repeat(6,minmax(0,1fr)); } .band-health{ grid-area:1 / 1 / 2 / 4; } .band-fix{ grid-area:1 / 4 / 2 / 7; } .band-stat{ grid-column:span 2; } }
@media (max-width:640px){ .band{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .band-health, .band-fix{ grid-column:1 / -1; grid-row:auto; } .band-stat{ grid-column:auto; } .band-card{ padding:14px; } .band-num{ font-size:2.4rem; } .band-stat .band-sub{ font-size:.72rem; } .band-health-main{ gap:12px; } .band-list a{ grid-template-columns:auto minmax(0,1fr) auto; } .band-list .tenant-code{ display:none; } .band-cta{ align-self:stretch; text-align:center; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } }
@media (prefers-reduced-motion:reduce){ a.band-card{ transition:none; } }
/* skor parsial (Zero Trust) + judul halaman monitoring */
.zt-partial .stat-value{ color:var(--text); } .zt-partial-tag{ font:800 .5em 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--surface-raised); border:1px solid var(--border); border-radius:999px; padding:2px 8px; vertical-align:middle; }
.toolbar + .mon-head{ margin-top:-4px; }

/* ---------- mobile: cegah overflow horizontal (grid tidak boleh lebih lebar dari layar) ---------- */
.stats > *, .mon-stats > *{ min-width:0; } .stat-tile{ overflow-wrap:anywhere; }
.cust-grid{ grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr)); }
.page-wide .cust-grid{ grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr)); }
.cust-card, .cust-card > *, .cust-head > *, .cust-row-top > *{ min-width:0; } .cust-head, .cust-row-top{ flex-wrap:wrap; } .cust-contracts li{ overflow-wrap:anywhere; }
@media (max-width:640px){ .stats, .mon-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- navigasi mobile: tombol menu (<=900px) ---------- */
.nav-toggle{ display:none; }
@media (max-width:900px){
  .topbar{ position:relative; }
  .brand-tag, .brand-tagline{ display:none; }
  .nav-toggle{ position:absolute; top:0; right:0; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-s); border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
  .nav-toggle:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
  .nav-toggle .ico-close{ display:none; } .nav-toggle[aria-expanded="true"] .ico-open{ display:none; } .nav-toggle[aria-expanded="true"] .ico-close{ display:block; }
  .nav{ width:100%; }
  .nav:not(.is-open) > :not(.nav-top){ display:none !important; } /* tertutup: hanya cari + lonceng; satu aturan terlingkup menggantikan display tiap item */
  .nav.is-open{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; overflow:visible; gap:2px; }
  .nav.is-open > a{ min-height:44px; display:flex; align-items:center; }
}

/* ---------- tombol: satu aksi primer per layar; aksi baris sekunder, glow lebih halus ---------- */
.btn-primary{ box-shadow:0 2px 8px -4px var(--electric); } .btn-primary:hover{ box-shadow:0 4px 12px -6px var(--electric); }
/* ---------- Microsoft 365: layanan bermasalah dulu, yang normal dilipat ---------- */
.svc-ok{ margin-top:14px; border-top:1px solid var(--border); }
.svc-ok > summary{ cursor:pointer; display:flex; align-items:center; min-height:44px; font-weight:700; font-size:.86rem; color:var(--text-muted); }
.svc-ok > summary:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.svc-grid-compact{ margin-top:6px; } .svc-grid-compact .svc-tile{ flex-direction:row; align-items:center; justify-content:space-between; padding:6px 10px; }
.svc-allok{ margin:0 0 10px; color:var(--ok); font-weight:700; }
@media (max-width:640px){ .svc-grid-compact{ grid-template-columns:1fr; } }
/* ---------- ukuran target dan teks: chip padat min 24px (WCAG AA), kontrol berdiri sendiri 44px di sentuh, teks min .72rem ---------- */
a.fw-chip, a.chip-link, a.detail-link, a.tenant-code, a.status-chip{ display:inline-flex; align-items:center; min-height:24px; }
button.fp-switch{ position:relative; } button.fp-switch::after{ content:""; position:absolute; inset:-9px -6px; }
@media (pointer:coarse){ a.chip-link, a.detail-link, a.tenant-code{ min-height:32px; } .btn-sm{ min-height:44px; } }
.sev-pill, .source-badge, .lvl-pill, .nav-group, .sum-badge, .soon-badge, .rb-level, .rb-eyebrow, .subtab-sep, th{ font-size:.72rem; }
.rb-ring small{ font-size:.7rem; }
.svc-ok > summary{ list-style:none; } .svc-ok > summary::-webkit-details-marker{ display:none; }
.svc-ok > summary::before{ content:""; width:7px; height:7px; margin-right:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s; }
.svc-ok[open] > summary::before{ transform:rotate(45deg); }
@media (prefers-reduced-motion:reduce){ .svc-ok > summary::before{ transition:none; } }
body.has-sidebar .nav .nav-group, .nav .soon-badge, .nav kbd, kbd{ font-size:.72rem; }
td > a:only-child, td > a.mono{ display:inline-flex; align-items:center; min-height:24px; }

/* ---------- login mobile: tombol bahasa/tema tidak menimpa judul, panel brand ringkas ---------- */

.band{ position:relative; }

/* ---------- ikon SVG, breadcrumb/judul temuan, kolom atas, kolom cari, sparkline KPI ---------- */
.ico{ flex:none; vertical-align:-3px; }
.crumb{ margin:0 0 10px; } .crumb a{ color:var(--text-muted); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; min-height:24px; } .crumb a:hover{ color:var(--text); }
.fd-title{ margin:0 0 10px; font-size:1.3rem; line-height:1.3; letter-spacing:-.01em; }
.fd-jump{ float:right; } .fd-jump::after{ content:" ↓"; }
.panels-top{ align-items:start; }
input[type=search]{ font:inherit; font-size:.9rem; min-height:40px; padding:8px 12px; color:var(--text); background:var(--surface); border:1px solid var(--border-strong,var(--border)); border-radius:var(--radius-s); }
.kpi-trend .kpi-spark{ width:64px; max-width:45%; height:20px; }
.band [hidden]{ display:none; }

/* ---------- Portal (Organizations): daftar server, menu aksi, aktivasi ---------- */
.srv-list{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--border); }
.srv{ display:grid; grid-template-columns:minmax(170px,1.1fr) minmax(190px,1.4fr) minmax(150px,.8fr) minmax(210px,1.3fr) auto; gap:12px 20px; align-items:start; padding:16px 4px; border-bottom:1px solid var(--border); }
.srv > *{ min-width:0; }
.srv-lbl{ display:block; margin-bottom:4px; font:800 .72rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.srv-name{ display:block; font-weight:800; overflow-wrap:anywhere; } .srv-kind, .srv-notes{ display:block; font-size:.8rem; color:var(--text-muted); } .srv-notes{ margin-top:4px; }
.srv-cap .mono{ font-weight:700; } .srv-bar{ display:block; height:6px; margin:6px 0; border-radius:99px; background:var(--surface-raised); overflow:hidden; } .srv-bar i{ display:block; height:100%; background:var(--accent); } .srv-bar.full i{ background:var(--warn); }
.srv-st + .srv-st{ margin-top:10px; } .srv-line{ display:block; margin-top:3px; }
.srv-actions{ position:relative; display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; } .srv-actions > form{ margin:0; }
.act-menu{ position:relative; } .act-menu > summary{ list-style:none; cursor:pointer; } .act-menu > summary::-webkit-details-marker{ display:none; }
.act-menu > summary::after{ content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.act-menu-list{ position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:270px; max-width:min(92vw,340px); display:flex; flex-direction:column; gap:2px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); }
.act-menu-list form{ display:block; margin:0; }
.act-item{ display:flex; align-items:center; width:100%; min-height:40px; padding:8px 12px; border:0; border-radius:var(--radius-s); background:transparent; color:var(--text); font:600 .88rem 'Montserrat',sans-serif; text-align:left; text-decoration:none; cursor:pointer; }
.act-item:hover, .act-item:focus-visible{ background:var(--surface-raised); outline:none; } .act-item:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent); }
.act-danger{ color:var(--crit); } .act-sep{ height:1px; margin:4px 2px; background:var(--border); }
.act-check{ display:flex; gap:10px; align-items:flex-start; padding:6px 12px 2px; font-size:.8rem; color:var(--text-muted); } .act-check input{ width:18px; height:18px; margin-top:2px; flex:none; }
.pa-connect > summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; } .pa-connect > summary::-webkit-details-marker{ display:none; }
.pa-connect > summary h2{ margin:0; } .pa-connect[open] > summary{ margin-bottom:10px; } .pa-connect[open] > summary .btn{ display:none; }
.pa-menus{ margin:0; min-width:0; padding:10px 14px 12px; border:1px solid var(--border); border-radius:var(--radius-m); } .pa-menus legend{ padding:0 6px; }
.pa-menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2px 18px; }
.pa-menus label.pa-menu{ display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 6px; border-radius:var(--radius-s); cursor:pointer; } .pa-menus label.pa-menu:hover{ background:var(--surface-raised); } .pa-menu input{ width:20px; height:20px; flex:none; }
.pa-menus.is-locked label.pa-menu{ opacity:.65; cursor:default; } .pa-menus.is-locked label.pa-menu:hover{ background:transparent; } .pa-menus-note{ margin:8px 0 0; display:none; } .pa-menus.is-locked .pa-menus-note{ display:block; }
.pa-log{ white-space:pre-wrap; max-height:320px; overflow:auto; } .pa-err{ color:var(--crit); } .pa-inline{ display:inline; } .pa-top{ margin-top:12px; } .pa-top6{ margin-top:6px; }
.pa-address{ display:grid; gap:12px; max-width:640px; } .pa-address .pa-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pa-address input{ width:100%; }
@media (max-width:1100px){ .srv{ grid-template-columns:repeat(2,minmax(0,1fr)); } .srv-actions{ grid-column:1 / -1; } }
@media (max-width:640px){
  .srv{ grid-template-columns:minmax(0,1fr); padding:16px 0; }
  .srv-actions{ flex-direction:column; align-items:stretch; } .srv-actions > form .btn, .act-menu > summary{ width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; }
  .act-menu-list{ position:static; margin-top:6px; max-width:none; box-shadow:none; }
}
.act-menu-list label.act-check{ flex-direction:row; align-items:flex-start; }
.flash-warn{ color:var(--warn); background:var(--warn-soft); border-color:transparent; }
@media (min-width:900px){ #portal-aktivasi .form-grid{ grid-template-columns:minmax(260px,1.3fr) minmax(240px,1.1fr) minmax(170px,.7fr); } #portal-aktivasi .form-grid .full{ grid-column:1 / -1; } }

/* ===================================================================================================
   UI v2 (task: redesain core, referensi ThreatLens): bilah menu di atas menggantikan sidebar (≥901px).
   Di ≤900px tetap menu hamburger. Dropdown: Operasional, Lainnya, dan menu akun (avatar).
   =================================================================================================== */
@media (min-width:901px){
  body.has-sidebar{ padding-left:0; }
  body.has-sidebar .topbar{ position:sticky; top:12px; inset:auto; width:auto; height:auto; z-index:60; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap:nowrap; gap:18px; margin:0 0 18px; padding:10px 14px 10px 18px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:visible; }
  body.has-sidebar .brand{ flex:none; }
  body.has-sidebar .brand-link{ gap:10px; }
  body.has-sidebar .brand-tag, body.has-sidebar .brand-tagline{ display:none; }
  body.has-sidebar .nav{ flex:1; flex-direction:row; align-items:center; flex-wrap:nowrap; gap:2px; min-width:0; }
  body.has-sidebar .nav > a, body.has-sidebar .nav > .nav-item > a{ flex:none; padding:8px 13px; border-radius:9px; font-size:.86rem; font-weight:600; white-space:nowrap; gap:8px; }
  body.has-sidebar .nav > a .nav-ico, body.has-sidebar .nav-dd-btn .nav-ico{ display:none; }
  body.has-sidebar .nav > a:hover{ padding-left:13px; }
  body.has-sidebar .nav > a.active, body.has-sidebar .nav-dd-btn.active{ background:var(--text); color:var(--surface); }
  body.has-sidebar .nav > a.active::before{ display:none; }
  body.has-sidebar .nav > .nav-group{ display:none; }
  body.has-sidebar .nav-chev, body.has-sidebar .nav-flyout{ display:none !important; }
  body.has-sidebar .nav-top{ order:90; margin:0 0 0 auto; flex:none; gap:8px; }
  body.has-sidebar .nav-top .nav-search{ width:210px; flex:none; }
  body.has-sidebar .nav-me{ order:99; }
  body.has-sidebar .nav-dd{ position:relative; flex:none; }
  .nav-dd-btn{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; cursor:pointer; padding:8px 13px; border-radius:9px; font:600 .86rem 'Montserrat',sans-serif; color:var(--text-muted); white-space:nowrap; }
  .nav-dd-btn:hover, .nav-dd.open > .nav-dd-btn{ background:var(--surface-raised); color:var(--text); }
  .nav-dd-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .nav-dd-btn.active:hover, .nav-dd.open > .nav-dd-btn.active{ background:var(--text); color:var(--surface); }
  .dd-chev{ opacity:.7; transition:transform .15s var(--ease); } .nav-dd.open .dd-chev{ transform:rotate(180deg); }
  .nav-dd-btn .nav-badge{ margin-left:2px; }
  .nav-dd-panel{ position:absolute; top:calc(100% + 8px); left:0; z-index:80; min-width:236px; padding:8px; display:none; flex-direction:column; gap:1px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 50px rgba(15,25,45,.18); }
  .nav-dd.open > .nav-dd-panel, .nav-dd:focus-within > .nav-dd-panel{ display:flex; }
  @media (hover:hover){ .nav-dd:hover > .nav-dd-panel{ display:flex; } }
  .nav-dd-right{ left:auto; right:0; }
  .nav-dd-panel > a, .nav-dd-panel .nav-item > a{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:.86rem; font-weight:600; color:var(--text); text-decoration:none; white-space:nowrap; }
  .nav-dd-panel > a:hover, .nav-dd-panel .nav-item > a:hover{ background:var(--surface-raised); padding-left:12px; }
  .nav-dd-panel > a.active, .nav-dd-panel .nav-item > a.active{ background:var(--accent-soft); color:var(--accent); }
  .nav-dd-panel > a.active::before, .nav-dd-panel .nav-item > a.active::before{ display:none; }
  .nav-dd-panel .nav-ico{ display:block; opacity:.8; }
  .nav-dd-panel .nav-group{ display:block; padding:10px 12px 4px; font-size:.64rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
  .nav-dd-panel .nav-group:first-child{ padding-top:4px; }
  .nav-dd-panel .nav-badge, .nav-dd-panel .soon-badge{ margin-left:auto; }
  .nav-me .nav-user{ display:block; padding:8px 12px 10px; margin:0; border:0; border-bottom:1px solid var(--border); font-weight:700; color:var(--text); }
  .nav-me .lang-switch{ margin:8px 0 0; padding:0 6px; } .nav-me .theme-switch{ margin:8px 6px 4px; }
  .nav-me .nav-logout{ margin-top:6px; border-top:1px solid var(--border); border-radius:0 0 9px 9px !important; }
  .nav-avatar{ width:38px; height:38px; padding:0 !important; justify-content:center; border-radius:50% !important; background:linear-gradient(135deg,#194BFF,#26A3DD); color:#fff !important; font-weight:800; }
  .nav-avatar:hover, .nav-me.open > .nav-avatar{ background:linear-gradient(135deg,#194BFF,#26A3DD) !important; color:#fff !important; filter:brightness(1.08); }
}
@media (max-width:900px){
  .nav-dd{ display:contents; }
  .nav-dd-btn, .dd-chev{ display:none !important; }
  .nav-dd-panel{ display:contents; position:static; }
}

/* ---- UI v2: komponen datar & padat + dashboard 12 kolom (tepi kartu sejajar) ---- */
@media (min-width:901px){
  body.has-sidebar .nav > .nav-item{ flex:none; position:relative; }
  body.has-sidebar .nav > .nav-item > a .nav-ico{ display:none; }
  body.has-sidebar .nav > .nav-item > a:hover{ padding-left:13px; }
  body.has-sidebar .nav > .nav-item > a.active{ background:var(--text); color:var(--surface); }
  body.has-sidebar .nav > .nav-item > a.active::before{ display:none; }
}
.card,.band-card,.kpi,.hero,.dom,.side-card,.sk-card{ border-radius:12px; box-shadow:none; }
.dom-head h2,.card > header h2,.section-title > span:first-child,.sum-head-row h2,.card > h2{ font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.dash{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:stretch; }
.dash > *{ grid-column:1 / -1; min-width:0; margin:0 !important; }
.dash > .domains,.dash > .trends,.dash > .dash-portfolio,.dash > .band,.dash > .dashboard-grid{ gap:16px; }
/* baris posture: kesehatan 4 | critical 3 | attention 3 | info 2 */
.band{ grid-template-columns:repeat(12,minmax(0,1fr)); margin:0; }
.band > .band-health{ grid-column:span 4; }
.band > .band-stat.crit,.band > .band-stat.warn{ grid-column:span 3; }
.band > .band-stat.info{ grid-column:span 2; }
.band > .band-fix{ display:none; }
.band-card{ padding:18px 20px; }
.band-health{ background:#0D2557 !important; color:#fff; border-color:#0D2557; min-height:168px; }
.band-health .band-lbl{ color:#A9BCEB; }
.band-health:hover{ border-color:#26A3DD; }
.band .rb-ring.xl{ width:auto; height:auto; background:none !important; display:block; text-align:left; filter:none; border-radius:0; }
.band .rb-ring.xl::before{ display:none; }
.band .rb-ring.xl strong{ display:inline; font:800 3.4rem/1 'Montserrat',sans-serif; letter-spacing:-.03em; color:#fff; }
.band .rb-ring.xl small{ display:inline; margin-left:6px; font:700 1.1rem 'Montserrat',sans-serif; color:#BFD0F5; }
.band .rb-ring.xl small::before{ content:"/100 · "; font-weight:500; opacity:.85; }
.band-health-main{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.band-health-txt{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
.band-level{ background:#fff; color:var(--crit); border-radius:6px; padding:2px 10px; font-size:.78rem; }
.band-health.tone-ok .band-level{ color:var(--ok); } .band-health.tone-warn .band-level{ color:var(--warn); }
.band-health .band-delta{ color:#7CE0B2; } .band-health .band-delta.down{ color:#FFA8AC; } .band-health .band-delta span{ color:#BFD0F5; }
.band-health .band-spark{ position:absolute; right:14px; bottom:14px; color:#4CC9F0; opacity:.95; }
.band-health .band-low{ color:#BFD0F5; } .band-health .band-low b{ color:#fff; }
.band-stat{ border-bottom:1px solid var(--border); }
.band-stat .band-num{ font-size:2.6rem; }
/* KPI jadi satu strip bersekat */
.kpis{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.kpis .kpi{ border:0; border-right:1px solid var(--border); border-radius:0; background:transparent; padding:16px 20px; }
.kpis .kpi:last-child{ border-right:0; }
.kpis .kpi::before{ display:none; }
.kpi-lbl{ font-size:.7rem; letter-spacing:.07em; }
/* grid 12 kolom di dalam widget */
.dash-portfolio{ grid-template-columns:repeat(12,minmax(0,1fr)); margin:0; }
.dash-portfolio > .card{ grid-column:span 4; }
.trends{ grid-template-columns:repeat(12,minmax(0,1fr)); margin:0; }
.trends > *:first-child{ grid-column:span 8; } .trends > *:nth-child(2){ grid-column:span 4; }
.domains{ margin:0; }
.dashboard-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; margin:0; }
.dashboard-grid > .dash-main{ grid-column:span 8; } .dashboard-grid > .dash-side{ grid-column:span 4; }
.card.summary{ border-radius:12px; }
.sum-ico{ display:none; }
@media (max-width:1100px){
  .band > .band-health{ grid-column:1 / -1; } .band > .band-stat{ grid-column:span 4 !important; }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } .kpis .kpi{ border-bottom:1px solid var(--border); }
  .dash-portfolio > .card,.trends > *,.dashboard-grid > *{ grid-column:1 / -1 !important; }
  .domains{ grid-template-columns:1fr; }
}
.kpi-lbl{ min-height:2.5em; }
.hero,.hero.ok,.hero.warn,.hero.crit{ background:var(--surface); }
.hero::before{ display:none; }
.hero .hero-port{ display:none; }
/* bilah atas yang menyesuaikan lebar layar: ringkas dulu, lalu dua baris di layar sempit */
@media (min-width:901px) and (max-width:1500px){
  body.has-sidebar .nav-top .nav-search{ width:38px; padding:0; justify-content:center; }
  body.has-sidebar .nav-top .nav-search .ns-text, body.has-sidebar .nav-top .nav-search kbd{ display:none; }
}
@media (min-width:901px) and (max-width:1320px){
  body.has-sidebar .topbar{ gap:12px; padding-left:14px; }
  body.has-sidebar .nav > a, body.has-sidebar .nav > .nav-item > a, .nav-dd-btn{ padding:8px 10px; font-size:.82rem; }
  body.has-sidebar .nav > a:hover, body.has-sidebar .nav > .nav-item > a:hover{ padding-left:10px; }
}
@media (min-width:901px) and (max-width:1160px){
  body.has-sidebar .topbar{ flex-wrap:wrap; row-gap:8px; }
  body.has-sidebar .nav{ display:contents; }
  body.has-sidebar .topbar::after{ content:""; order:5; flex-basis:100%; height:0; }
  body.has-sidebar .nav > a, body.has-sidebar .nav > .nav-item, body.has-sidebar .nav > .nav-dd:not(.nav-me){ order:10; }
  body.has-sidebar .nav > .nav-top{ order:2; margin-left:auto; }
  body.has-sidebar .nav > .nav-me{ order:3; }
}

/* ---- menu Lainnya (3 kolom), panel notifikasi, menu akun ---- */
@media (min-width:901px){
  .nav-dd-panel.nav-mega{ min-width:640px; padding:14px 14px 12px; gap:2px 14px; grid-template-columns:repeat(3,minmax(190px,1fr)); }
  .nav-dd.open > .nav-dd-panel.nav-mega, .nav-dd:focus-within > .nav-dd-panel.nav-mega{ display:grid; }
  @media (hover:hover){ .nav-dd:hover > .nav-dd-panel.nav-mega{ display:grid; } }
  .nav-mega .nav-col{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .nav-mega .nav-group{ padding:2px 12px 6px; }
  .inbox{ border-radius:14px; width:min(420px, calc(100vw - 24px)); box-shadow:0 18px 50px rgba(15,25,45,.2); }
  .nav-me .nav-dd-panel, .nav-dd-panel.nav-dd-right.nav-me-panel{ min-width:300px; }
  .nav-me > .nav-dd-panel{ min-width:300px; padding:0; overflow:hidden; }
  .nav-me .nav-user{ display:none; }
  .me-head{ display:flex; align-items:center; gap:12px; padding:16px 16px 14px; background:var(--surface-raised); border-bottom:1px solid var(--border); }
  .me-av{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.05rem; color:#fff; background:linear-gradient(135deg,#194BFF,#26A3DD); }
  .me-id{ min-width:0; display:flex; flex-direction:column; flex:1; }
  .me-name{ font-weight:800; font-size:.95rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .me-mail{ color:var(--text-muted); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .me-role{ flex:none; font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:3px 8px; }
  .me-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--border); }
  .me-lbl{ font-size:.78rem; font-weight:700; color:var(--text-muted); }
  .nav-me .lang-switch{ margin:0 !important; padding:3px !important; background:var(--surface-raised); border-radius:10px; gap:2px; }
  .nav-me .lang-switch a{ padding:5px 14px !important; border-radius:8px !important; font-weight:700; color:var(--text-muted); text-decoration:none; }
  .nav-me .lang-switch a.active{ background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(15,25,45,.14); }
  .nav-me .lang-switch > span{ display:none; }
  .nav-me .theme-switch{ margin:0 !important; }
  .me-link{ display:flex !important; align-items:center; padding:12px 16px !important; border-radius:0 !important; font-weight:600; color:var(--text) !important; border-bottom:1px solid var(--border); text-decoration:none; }
  .me-link:hover{ background:var(--surface-raised) !important; padding-left:16px !important; }
  .nav-me .me-out{ display:flex !important; justify-content:center; margin:0 !important; padding:13px 16px !important; border:0 !important; border-radius:0 !important; font-weight:800 !important; color:var(--crit) !important; background:transparent; font-size:.86rem !important; }
  .nav-me .me-out:hover{ background:var(--crit-soft) !important; padding-left:16px !important; }
}
@media (max-width:900px){
  .nav-mega .nav-col{ display:contents; }
  .me-head, .me-lbl{ display:none; }
  .me-row{ display:contents; }
}
@media (min-width:901px){
  body.has-sidebar .nav-top .nav-search{ height:38px; }
  .nav-me .lang-switch a::before{ display:none !important; }
  .nav-dd-panel.nav-mega{ min-width:700px; grid-template-columns:repeat(3,minmax(210px,1fr)); }
}

/* Account menu: Admin group (moved from the old "Other" menu) */
.nav-me .me-admin{ display:flex; flex-direction:column; gap:1px; padding:8px; border-bottom:1px solid var(--border); }
.nav-me .me-admin .nav-group{ padding:4px 8px 6px; }
@media (min-width:901px){ .nav-dd-panel.nav-mega{ min-width:0; width:max-content; max-width:calc(100vw - 32px); } }

/* NOC ticket requests (task 029) */
.noc-form{ display:flex; flex-direction:column; gap:12px; }
.noc-form label{ display:flex; flex-direction:column; gap:4px; font-size:.85rem; font-weight:600; }
.noc-form label.noc-check{ flex-direction:row; align-items:center; gap:8px; font-weight:500; }
.noc-form input[type="text"], .noc-form input[type="email"], .noc-form input[type="number"], .noc-form input[type="date"], .noc-form select, .noc-form textarea{ width:100%; }
.noc-grid2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.noc-types{ border:0; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap; }
.noc-types legend{ font-size:.85rem; font-weight:600; margin-bottom:6px; padding:0; }
.noc-form .noc-types label{ flex-direction:row; align-items:center; gap:6px; padding:8px 14px; min-height:40px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface); cursor:pointer; }
.noc-form .noc-types label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.noc-override{ display:grid; gap:8px; padding:10px 12px; border:1px dashed var(--border); border-radius:var(--radius-s); }
.noc-dialog{ width:min(720px, calc(100vw - 24px)); padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); }
.noc-dialog::backdrop{ background:rgba(0, 0, 0, .45); }
.noc-mail{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0 0 12px; }
.noc-mail dt{ font-weight:700; color:var(--text-muted); }
.noc-mail dd{ margin:0; overflow-wrap:anywhere; }
.noc-body{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; max-height:40vh; overflow:auto; padding:12px; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-s); font:inherit; font-size:.88rem; }
.noc-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0 0; }
.noc-inline{ display:flex; gap:6px; align-items:center; }
.noc-inline input{ width:140px; }
.noc-row-actions{ white-space:nowrap; }
.noc-cancel summary{ display:inline-block; list-style:none; cursor:pointer; }
.noc-cancel summary::-webkit-details-marker{ display:none; }
.noc-cancel form{ display:flex; gap:6px; margin-top:6px; }
@media (max-width:700px){ .noc-grid2{ grid-template-columns:1fr; } }

.noc-pidhead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; }
.noc-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
td.noc-chips{ display:table-cell; }
td.noc-chips .status-chip{ margin:0 6px 4px 0; }
.noc-tickets{ margin-top:12px; }
.noc-tickets summary{ cursor:pointer; font-weight:700; font-size:.85rem; }

/* Open in portal menu (task 030) */
.pl-menu{ position:relative; display:inline-block; }
.pl-menu > summary{ list-style:none; cursor:pointer; }
.pl-menu > summary::-webkit-details-marker{ display:none; }
.pl-pop{ position:absolute; z-index:70; top:calc(100% + 6px); left:0; min-width:240px; padding:6px; display:flex; flex-direction:column; gap:1px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:0 18px 40px -16px rgba(16, 24, 40, .35); }
.pl-pop a{ padding:9px 12px; border-radius:8px; font-size:.86rem; font-weight:600; color:var(--text); text-decoration:none; }
.pl-pop a:hover, .pl-pop a:focus-visible{ background:var(--surface-raised); outline:none; }
.pl-head{ padding:6px 12px 4px; font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
.pl-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pl-obj{ margin-left:8px; font-size:.78rem; white-space:nowrap; }

/* Arriving from the sign-in success screen: the veil is white like the sign-in page and holds until the page has finished loading (ui.js adds .go), then melts away while the page rises in a little slower than usual. Without JS it lifts by itself after a pause. */
.enter-veil{ position:fixed; inset:0; z-index:9999; background:#fff; pointer-events:none; animation:veil-out 1s 2.5s cubic-bezier(.4, 0, .2, 1) forwards; }
.enter-veil.go{ animation-delay:.15s; }
@keyframes veil-out{ to{ opacity:0; visibility:hidden; } }
.enter-veil + .page > *:not(.topbar){ animation:page-in .8s .25s var(--ease) both; }
@media (prefers-reduced-motion:reduce){ .enter-veil, .enter-veil.go{ animation-duration:.01s; animation-delay:0s; } .enter-veil + .page > *:not(.topbar){ animation:none; } }

/* Risk Board: the customer rows come first; under them the risk matrix and the biggest wins sit side by side */
.rb-lower{ display:grid; grid-template-columns:minmax(320px, 480px) minmax(0, 1fr); gap:18px; margin:18px 0; align-items:start; }
.rb-lower > .card{ margin-bottom:0; }
@media (max-width:980px){ .rb-lower{ grid-template-columns:minmax(0, 1fr); } }