/* =====================================================================
   SQ Portal (EMI-SOL-001) Demo Layer styles — toast zone, success toast,
   RoleHandoffToast buttons, DemoRoleSwitcher dropdown, demo confirm modal.
   Self-contained addendum: loads AFTER sq-portal.css and only defines
   demo-layer classes (no overrides of design-system rules).
   Tokens use var(--sqp-*, fallback) so this file works even if a token
   is missing from sq-portal.css.
   ===================================================================== */

/* ---------------- Toast ---------------- */
.toast-zone{position:fixed;top:16px;right:16px;z-index:400;display:flex;flex-direction:column;gap:10px;max-width:380px}
.toast{background:#F0FAF1;border:1px solid #BBE5BF;border-radius:8px;padding:12px 14px;display:flex;gap:10px;box-shadow:0 8px 24px rgba(16,24,40,.12);animation:sqpTIn .2s ease}
@keyframes sqpTIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.toast .tic{color:var(--sqp-success,#16A34A);font-size:16px;margin-top:2px}
.toast .tt{font-weight:700;font-size:14px;color:var(--sqp-text,#2D2E31)}
.toast .td{font-size:13px;color:var(--sqp-text,#2D2E31);margin-top:2px}
.toast .tnext{font-size:12.5px;color:var(--sqp-text-secondary,#6B7280);margin-top:4px}
.toast .tbtns{display:flex;gap:8px;margin-top:10px}
.toast .tx{cursor:pointer;color:var(--sqp-text-secondary,#6B7280)}
[data-theme="dark"] .toast{background:#12291b;border-color:#1f4d2f}
[data-theme="dark"] .toast .tt,[data-theme="dark"] .toast .td{color:#E6EDF3}

/* Small/ghost/red button variants used by the demo layer (safe if
   sq-portal.css already defines .btn-primary / .btn-secondary). */
.btn-sm{padding:5px 12px !important;font-size:12.5px !important}
.btn-ghost{background:transparent;border:1px solid transparent;color:var(--sqp-text-secondary,#6B7280)}
.btn-ghost:hover{background:rgba(0,0,0,.05)}
[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-red{background:var(--sqp-danger,#DC2626);border:1px solid var(--sqp-danger,#DC2626);color:#fff}
.btn-red:hover{filter:brightness(.95)}

/* ---------------- DemoRoleSwitcher / notifications dropdown ---------------- */
.dsw{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--sqp-border,#E5E7EB);border-radius:10px;box-shadow:0 12px 32px rgba(16,24,40,.16);width:280px;z-index:420;padding:8px}
.dsw .dsw-t{font-size:11px;font-weight:700;color:var(--sqp-text-secondary,#6B7280);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px 4px}
.dsw .dp{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer}
.dsw .dp:hover{background:var(--sqp-bg-page,#F0F2F5)}
.dsw .dp .ava{width:28px;height:28px;border-radius:50%;background:var(--sqp-primary-light,#E8F0FE);color:var(--sqp-primary,#005EFF);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dsw .dp .ava-danger{background:var(--sqp-danger-bg,#FEE2E2);color:var(--sqp-danger,#DC2626)}
.dsw .dp .nm{font-size:13.5px;font-weight:600;color:var(--sqp-text,#2D2E31)}
.dsw .dp .rl{font-size:11.5px;color:var(--sqp-text-secondary,#6B7280)}
.dsw .dp .ck{margin-left:auto;color:var(--sqp-success,#16A34A)}
.dsw hr{border:none;border-top:1px solid var(--sqp-border,#E5E7EB);margin:6px 0}
.dsw .danger{color:var(--sqp-danger,#DC2626)}
[data-theme="dark"] .dsw{background:#161B22;border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .dsw .dp:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] .dsw .dp .nm{color:#E6EDF3}

/* ---------------- Demo confirm modal (.dmodal-*, distinct from
   sq-portal.css .modal used by solution pages) ---------------- */
.dmodal-ov{position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.dmodal{background:#fff;border-radius:12px;width:440px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(16,24,40,.3);animation:sqpTIn .18s ease}
.dmodal-wide{width:640px}
.dmodal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--sqp-border,#E5E7EB);font-weight:700;font-size:15px;color:var(--sqp-text,#2D2E31)}
.dmodal-x{cursor:pointer;color:var(--sqp-text-secondary,#6B7280)}
.dmodal-b{padding:18px 20px;font-size:13.5px;color:var(--sqp-text,#2D2E31);overflow-y:auto}
.dmodal-b p{margin:0 0 8px}
.dmodal-f{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--sqp-border,#E5E7EB)}
.dmodal-err{margin-top:10px;font-size:12.5px;color:var(--sqp-danger,#DC2626)}
[data-theme="dark"] .dmodal{background:#161B22}
[data-theme="dark"] .dmodal-h,[data-theme="dark"] .dmodal-b{color:#E6EDF3}
[data-theme="dark"] .dmodal-h,[data-theme="dark"] .dmodal-f{border-color:rgba(255,255,255,.1)}

/* ── CM Multi-Activity (v5.6) ─────────────────────────────── */
.cma-wrap  { display:flex; flex-direction:column; gap:12px; }
.cma-head  { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cma-sum   { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:20px; }
.cma-sum-empty { background:#F3F4F6; color:#6B7280; }
.cma-sum-part  { background:#FFFBEB; color:#B45309; border:1px solid rgba(245,158,11,.3); }
.cma-sum-ok    { background:#ECFDF5; color:var(--sqp-success-text,#166534); border:1px solid rgba(62,182,69,.3); }
.cma-list  { display:flex; flex-direction:column; gap:12px; }
.cma-card  { border:1.5px solid var(--sqp-border,#E5E7EB); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; background:var(--sqp-bg-card,#fff); transition:border-color .15s; }
.cma-card.cma-ok { border-color:rgba(62,182,69,.45); }
.cma-hdr   { display:flex; align-items:center; gap:10px; }
.cma-title { font-size:12.5px; font-weight:800; color:var(--sqp-navy,#1E4480); display:inline-flex; align-items:center; gap:7px; }
.cma-state { margin-left:auto; font-size:10.5px; font-weight:700; color:#9CA3AF; display:inline-flex; align-items:center; gap:5px; }
.cma-ok .cma-state { color:var(--sqp-success-text,#166534); }
.cma-del   { border:none; background:transparent; color:#9CA3AF; cursor:pointer; font-size:13px; padding:4px 6px; border-radius:6px; }
.cma-del:hover { background:#FEF2F2; color:var(--sqp-critical,#E90229); }
.cma-add   { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:8px; border:1.5px dashed var(--sqp-primary,#005EFF); background:var(--sqp-primary-light,#EFF6FF); color:var(--sqp-primary,#005EFF); font-size:12px; font-weight:700; cursor:pointer; }
.cma-add:hover { background:var(--sqp-primary,#005EFF); color:#fff; }
.cma-upload{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px; border:1.5px dashed var(--sqp-border,#D1D5DB); background:transparent; color:var(--sqp-text-secondary,#6B7280); font-size:11.5px; font-weight:600; cursor:pointer; width:100%; justify-content:center; }
.cma-upload:hover { border-color:var(--sqp-primary,#005EFF); color:var(--sqp-primary,#005EFF); }
[data-theme="dark"] .cma-card { background:#161B22; border-color:rgba(255,255,255,.09); }
[data-theme="dark"] .cma-sum-empty { background:rgba(255,255,255,.06); color:#8B949E; }

/* ── Dark-mode completeness (v5.8) ────────────────────────── */
[data-theme="dark"] .toast{background:#0F2417;border-color:rgba(62,182,69,.35);box-shadow:0 8px 24px rgba(0,0,0,.5)}
[data-theme="dark"] .toast .tnext{color:#8B949E}
[data-theme="dark"] .toast .tx{color:#8B949E}
[data-theme="dark"] .dsw{box-shadow:0 12px 32px rgba(0,0,0,.55)}
[data-theme="dark"] .dsw .dp .rl{color:#8B949E}
[data-theme="dark"] .dsw .dsw-t{color:#8B949E}
[data-theme="dark"] .dsw hr{border-top-color:rgba(255,255,255,.1)}
[data-theme="dark"] .dmodal{box-shadow:0 20px 60px rgba(0,0,0,.6)}
[data-theme="dark"] .dmodal-x{color:#8B949E}
[data-theme="dark"] .cma-title{color:#93C5FD}
[data-theme="dark"] .cma-sum-part{background:rgba(245,158,11,.1);color:#FCD34D;border-color:rgba(245,158,11,.3)}
[data-theme="dark"] .cma-sum-ok{background:rgba(62,182,69,.1);color:#4ADE80;border-color:rgba(62,182,69,.3)}
[data-theme="dark"] .cma-state{color:#8B949E}
[data-theme="dark"] .cma-ok .cma-state{color:#4ADE80}
[data-theme="dark"] .cma-del:hover{background:rgba(233,2,41,.12);color:#F87171}
[data-theme="dark"] .cma-add{background:rgba(0,94,255,.1);border-color:rgba(96,165,250,.5);color:#93C5FD}
[data-theme="dark"] .cma-add:hover{background:#2563EB;color:#fff}
[data-theme="dark"] .cma-upload{border-color:rgba(255,255,255,.18);color:#8B949E}
[data-theme="dark"] .cma-upload:hover{border-color:#60A5FA;color:#93C5FD}

/* ── Demo-layer modal form (.dmf-*) — self-contained, tidak bergantung
     class .fg/.fl/.fi milik halaman (v5.10) ─────────────────────── */
.dmf{display:flex;flex-direction:column;gap:16px}
.dmf-sub{font-size:12.5px;color:var(--sqp-text-secondary,#6B7280);margin:-4px 0 2px;line-height:1.5}
.dmf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dmf-g{display:flex;flex-direction:column;gap:6px;min-width:0}
.dmf-l{font-size:11.5px;font-weight:700;color:var(--sqp-text,#2D2E31);letter-spacing:.01em;display:flex;align-items:center;gap:4px}
.dmf-l .req{color:var(--sqp-critical,#E90229)}
.dmf-wrap{position:relative;display:flex;align-items:center}
.dmf-ic{position:absolute;left:12px;font-size:13px;color:var(--sqp-text-disabled,#9CA3AF);pointer-events:none;z-index:1}
.dmf-in{width:100%;height:40px;padding:0 12px 0 36px;border:1.5px solid var(--sqp-border,#D1D5DB);border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;color:var(--sqp-text,#2D2E31);background:var(--sqp-bg-card,#fff);outline:none;transition:border-color .15s,box-shadow .15s}
.dmf-in:hover{border-color:var(--sqp-text-secondary,#9CA3AF)}
.dmf-in:focus{border-color:var(--sqp-primary,#005EFF);box-shadow:0 0 0 3px rgba(0,94,255,.12)}
select.dmf-in{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
input[type="date"].dmf-in{padding-right:12px;cursor:pointer}
.dmf-hint{font-size:10.5px;color:var(--sqp-text-disabled,#9CA3AF)}
[data-theme="dark"] .dmf-l{color:#E6EDF3}
[data-theme="dark"] .dmf-sub{color:#8B949E}
[data-theme="dark"] .dmf-in{background:#0D1117;border-color:rgba(255,255,255,.14);color:#E6EDF3}
[data-theme="dark"] .dmf-in:hover{border-color:rgba(255,255,255,.3)}
[data-theme="dark"] .dmf-in:focus{border-color:#60A5FA;box-shadow:0 0 0 3px rgba(96,165,250,.15)}
[data-theme="dark"] select.dmf-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B949E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
[data-theme="dark"] input[type="date"].dmf-in{color-scheme:dark}

/* ── Checklist Library (v5.11) ────────────────────────────── */
.clf-card{border:1.5px solid var(--sqp-border,#E5E7EB);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:var(--sqp-bg-card,#fff)}
.clf-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.clv-row{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px dashed var(--sqp-border,#E5E7EB);font-size:12px;flex-wrap:wrap}
.clv-ver{font-family:'DM Mono',monospace;font-weight:700;color:var(--sqp-navy,#1E4480);min-width:38px}
.clv-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px}
.clv-active{background:#ECFDF5;color:var(--sqp-success-text,#166534)}
.clv-arch{background:#F3F4F6;color:#6B7280}
.clv-meta{color:var(--sqp-text-secondary,#6B7280);font-size:11px}
.clv-note{flex:1;min-width:120px;color:var(--sqp-text-disabled,#9CA3AF);font-size:11px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clv-acts{display:flex;gap:6px;margin-left:auto}
.clv-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;border:1px solid var(--sqp-border,#D1D5DB);background:transparent;color:var(--sqp-text-secondary,#6B7280);font-size:11px;font-weight:600;cursor:pointer}
.clv-btn:hover{border-color:var(--sqp-primary,#005EFF);color:var(--sqp-primary,#005EFF)}
.clv-btn-p{border-color:rgba(0,94,255,.35);color:var(--sqp-primary,#005EFF);background:var(--sqp-primary-light,#EFF6FF)}
.clf-cat{font-size:11.5px;font-weight:800;color:var(--sqp-navy,#1E4480);margin:12px 0 6px;display:flex;align-items:center;gap:7px}
.clf-item{display:flex;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--sqp-border,#E5E7EB)}
.clf-code{font-family:'DM Mono',monospace;font-size:11px;font-weight:700;color:var(--sqp-primary,#005EFF);min-width:56px}
.clf-ta{height:auto !important;padding:10px 12px !important;font-family:'DM Mono',monospace;font-size:11.5px;line-height:1.7;resize:vertical}
.chk-verchip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:14px;background:var(--sqp-primary-light,#EFF6FF);color:var(--sqp-primary,#005EFF);margin-left:8px;vertical-align:middle}
[data-theme="dark"] .clf-card{background:#161B22;border-color:rgba(255,255,255,.09)}
[data-theme="dark"] .clv-row{border-top-color:rgba(255,255,255,.08)}
[data-theme="dark"] .clv-ver,[data-theme="dark"] .clf-cat{color:#93C5FD}
[data-theme="dark"] .clv-active{background:rgba(62,182,69,.12);color:#4ADE80}
[data-theme="dark"] .clv-arch{background:rgba(255,255,255,.06);color:#8B949E}
[data-theme="dark"] .clv-btn{border-color:rgba(255,255,255,.15);color:#8B949E}
[data-theme="dark"] .clv-btn-p{background:rgba(0,94,255,.12);border-color:rgba(96,165,250,.4);color:#93C5FD}
[data-theme="dark"] .clf-item{border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .chk-verchip{background:rgba(0,94,255,.12);color:#93C5FD}

/* ── Checklist Builder + Management Page (v5.12) ──────────── */
.ckl-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ckb-hdr{display:grid;grid-template-columns:72px 180px 1fr 30px;gap:8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--sqp-text-disabled,#9CA3AF);padding:0 2px 4px}
.ckb-row{display:grid;grid-template-columns:72px 180px 1fr 30px;gap:8px;align-items:center;margin-bottom:8px}
.ckb-code{font-family:'DM Mono',monospace;font-size:11px;font-weight:700;color:var(--sqp-primary,#005EFF);background:var(--sqp-primary-light,#EFF6FF);border-radius:6px;padding:0 8px;height:40px;display:flex;align-items:center;justify-content:center}
.ckb-row .dmf-in{padding-left:12px}
.ckb-del{border:none;background:transparent;color:#9CA3AF;cursor:pointer;font-size:13px;height:40px;border-radius:6px}
.ckb-del:hover{background:#FEF2F2;color:var(--sqp-critical,#E90229)}
.clf-off{opacity:.55}
.ckp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.ckp-title{font-size:20px;font-weight:800;color:var(--sqp-text,#2D2E31);display:flex;align-items:center;gap:10px;margin:0}
.ckp-title i{color:var(--sqp-primary,#005EFF)}
.ckp-sub{font-size:12.5px;color:var(--sqp-text-secondary,#6B7280);margin-top:4px}
.ckp-filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ckp-fchip{padding:6px 14px;border-radius:18px;border:1.5px solid var(--sqp-border,#D1D5DB);background:var(--sqp-bg-card,#fff);color:var(--sqp-text-secondary,#6B7280);font-size:12px;font-weight:600;cursor:pointer}
.ckp-fchip.sel{background:var(--sqp-primary,#005EFF);border-color:var(--sqp-primary,#005EFF);color:#fff}
.ckp-grid{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.ckp-grid{grid-template-columns:1fr}}
.ckp-list{display:flex;flex-direction:column;gap:10px}
.ckp-card{border:1.5px solid var(--sqp-border,#E5E7EB);border-radius:10px;padding:12px 14px;background:var(--sqp-bg-card,#fff);cursor:pointer;transition:border-color .15s}
.ckp-card:hover{border-color:var(--sqp-text-secondary,#9CA3AF)}
.ckp-card.sel{border-color:var(--sqp-primary,#005EFF);box-shadow:0 0 0 3px rgba(0,94,255,.1)}
.ckp-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.ckp-card-name{font-size:13.5px;font-weight:700;color:var(--sqp-text,#2D2E31)}
.ckp-card-meta{font-size:11px;color:var(--sqp-text-secondary,#6B7280);margin-top:3px}
.ckp-detail{border:1.5px solid var(--sqp-border,#E5E7EB);border-radius:12px;padding:16px 18px;background:var(--sqp-bg-card,#fff);min-height:200px}
.ckp-det-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ckp-det-name{font-size:16px;font-weight:800;color:var(--sqp-text,#2D2E31)}
.ckp-det-acts{display:flex;gap:8px;flex-wrap:wrap}
.ckp-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--sqp-text-disabled,#9CA3AF);margin:16px 0 6px;padding-top:12px;border-top:1px solid var(--sqp-border,#E5E7EB)}
[data-theme="dark"] .ckb-code{background:rgba(0,94,255,.12);color:#93C5FD}
[data-theme="dark"] .ckb-del:hover{background:rgba(233,2,41,.12);color:#F87171}
[data-theme="dark"] .ckp-title,[data-theme="dark"] .ckp-card-name,[data-theme="dark"] .ckp-det-name{color:#E6EDF3}
[data-theme="dark"] .ckp-fchip{background:#161B22;border-color:rgba(255,255,255,.14);color:#8B949E}
[data-theme="dark"] .ckp-fchip.sel{background:#2563EB;border-color:#2563EB;color:#fff}
[data-theme="dark"] .ckp-card,[data-theme="dark"] .ckp-detail{background:#161B22;border-color:rgba(255,255,255,.09)}
[data-theme="dark"] .ckp-card.sel{border-color:#60A5FA;box-shadow:0 0 0 3px rgba(96,165,250,.12)}
[data-theme="dark"] .ckp-sec{border-top-color:rgba(255,255,255,.08)}

/* ── Audit Completed Summary (v5.13) ─────────────────────── */
.aud-sum{padding:18px 20px;margin-bottom:16px}
.aud-sum-hdr{display:flex;gap:18px;align-items:flex-start}
.aud-sum-score{font-size:44px;font-weight:800;font-family:'DM Mono',monospace;line-height:1;min-width:84px;text-align:center;padding:10px 0;border-radius:12px;background:var(--sqp-bg-page,#F0F2F5)}
.aud-sum-title{font-size:15px;font-weight:800;color:var(--sqp-text,#2D2E31)}
.aud-sum-meta{font-size:11.5px;color:var(--sqp-text-secondary,#6B7280);margin-top:3px}
.aud-sum-chips{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.aud-sum-find{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--sqp-border,#E5E7EB);font-size:12px;flex-wrap:wrap}
.aud-sum-note{flex:1;min-width:160px;color:var(--sqp-text,#2D2E31)}
.aud-sum-acts{display:flex;gap:10px;margin-top:14px}
.fu-wait{background:#FFFBEB;color:#B45309;border:1px solid rgba(245,158,11,.3)}
.fu-sub{background:#EFF6FF;color:#1D4ED8;border:1px solid rgba(0,94,255,.25)}
.fu-ok{background:#ECFDF5;color:var(--sqp-success-text,#166534);border:1px solid rgba(62,182,69,.3)}
.fu-maj{background:#FEF2F2;color:#B91C1C;border:1px solid rgba(233,2,41,.25)}
.fu-min{background:#FFF7ED;color:#C2410C;border:1px solid rgba(245,158,11,.3)}
.ckp-del-btn:hover{border-color:var(--sqp-critical,#E90229) !important;color:var(--sqp-critical,#E90229) !important}
[data-theme="dark"] .aud-sum-score{background:rgba(255,255,255,.06)}
[data-theme="dark"] .aud-sum-title,[data-theme="dark"] .aud-sum-note{color:#E6EDF3}
[data-theme="dark"] .aud-sum-find{border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .fu-wait{background:rgba(245,158,11,.1);color:#FCD34D}
[data-theme="dark"] .fu-sub{background:rgba(0,94,255,.12);color:#93C5FD}
[data-theme="dark"] .fu-ok{background:rgba(62,182,69,.1);color:#4ADE80}
[data-theme="dark"] .fu-maj{background:rgba(233,2,41,.12);color:#F87171}
[data-theme="dark"] .fu-min{background:rgba(245,158,11,.08);color:#FDBA74}

/* ── Sidebar sub-pages indent + active visibility (v5.14) ──── */
/* Sub pages (SPPR Management / Supplier Audit / Supplier Management /
   Administration) menjorok ke kanan saat sidebar expanded, dengan
   garis pemandu; state collapsed tidak berubah (ikon tetap center). */
#sidebar.expanded .nav-subgroup{margin-left:15px;padding-left:9px;border-left:2px solid var(--sqp-border,#E5E7EB)}
#sidebar.expanded .nav-subgroup .nav-item{margin:2px 0;padding:8px 10px;font-size:13.5px}
#sidebar.expanded .nav-subgroup .nav-item .nav-icon{width:18px;height:18px;font-size:12px}
/* Active di level sub: pill primary penuh + tick penghubung ke garis
   pemandu supaya selalu terlihat jelas */
#sidebar.expanded .nav-subgroup .nav-item.active{background:var(--sqp-primary,#005EFF);color:#fff;font-weight:700;box-shadow:var(--shadow-active,0 2px 8px rgba(0,94,255,.35));position:relative;overflow:visible}
#sidebar.expanded .nav-subgroup .nav-item.active::before{content:'';position:absolute;left:-11px;top:50%;transform:translateY(-50%);width:9px;height:2.5px;background:var(--sqp-primary,#005EFF);border-radius:2px}
#sidebar.expanded .nav-subgroup .nav-item.active .nav-label{color:#fff}
/* Hover sub item sedikit berbeda dari level grup */
#sidebar.expanded .nav-subgroup .nav-item:not(.active):hover{background:var(--sqp-primary-light,#EFF6FF);color:var(--sqp-primary,#005EFF)}
#sidebar.expanded .nav-subgroup .nav-item:not(.active):hover .nav-icon{color:var(--sqp-primary,#005EFF)}
/* Dark mode */
[data-theme="dark"] #sidebar.expanded .nav-subgroup{border-left-color:rgba(255,255,255,.12)}
[data-theme="dark"] #sidebar.expanded .nav-subgroup .nav-item.active{background:rgba(96,165,250,.22);color:#BFDBFE;box-shadow:inset 0 0 0 1px rgba(96,165,250,.35)}
[data-theme="dark"] #sidebar.expanded .nav-subgroup .nav-item.active::before{background:#60A5FA}
[data-theme="dark"] #sidebar.expanded .nav-subgroup .nav-item.active .nav-label{color:#BFDBFE}
[data-theme="dark"] #sidebar.expanded .nav-subgroup .nav-item:not(.active):hover{background:rgba(96,165,250,.1);color:#93C5FD}

/* ── v5.15: nav active sync + dark polish ─────────────────── */
/* Group yang memuat halaman aktif: teks/ikon primary (bukan pill penuh
   — pill penuh hanya milik sub-page aktif) */
#sidebar.expanded .nav-group-toggle.group-has-active{color:var(--sqp-primary,#005EFF);font-weight:700}
#sidebar.expanded .nav-group-toggle.group-has-active .nav-icon{color:var(--sqp-primary,#005EFF)}
#sidebar:not(.expanded) .nav-group-toggle.group-has-active{color:var(--sqp-primary,#005EFF)}
#sidebar:not(.expanded) .nav-group-toggle.group-has-active .nav-icon{color:var(--sqp-primary,#005EFF)}
[data-theme="dark"] .nav-group-toggle.group-has-active,
[data-theme="dark"] .nav-group-toggle.group-has-active .nav-icon{color:#93C5FD !important}
/* Dark polish: input date native yang masih putih */
[data-theme="dark"] input[type="date"]:not(.dmf-in){background:var(--sqp-bg-card,#161B22);color:#E6EDF3;border-color:var(--sqp-border,rgba(255,255,255,.14));color-scheme:dark}
/* Chip ringkasan filter (Menampilkan N ...) */
[data-theme="dark"] .fb-summary{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#8B949E}
[data-theme="dark"] .fb-summary b{color:#93C5FD}
/* Baris temuan overdue (inline #FEF8F8 di Audit Findings) */
[data-theme="dark"] #row-F-002-006{background:rgba(233,2,41,.09) !important}
/* Segmented list/calendar toggle di Audit Schedule */
[data-theme="dark"] .vt-btn{background:rgba(255,255,255,.04);color:#8B949E}
[data-theme="dark"] .vt-btn.active{background:var(--sqp-primary,#2563EB);color:#fff}
[data-theme="dark"] .vt-btn:hover:not(.active){background:rgba(96,165,250,.12);color:#93C5FD}

/* ── v5.16: DARK NORMALIZATION GLOBAL ─────────────────────────
   Sweep otomatis menemukan 157 latar pastel/terang hardcoded (inline &
   class) tanpa varian dark di 30+ halaman. Dua mekanisme:
   1) Attribute-selector kill-switch utk INLINE pastel (ikon chip
      sc-hdr-ic/mk-ic/ni-ic/dll, row highlight, badge) → translusen
      bernuansa sama; !important mengalahkan inline style.
   2) Varian dark utk class status semantik yang belum punya. */
[data-theme="dark"] #main-content{background:var(--sqp-bg-page,#0D1117)}
/* biru */
[data-theme="dark"] [style*="#EFF6FF" i],[data-theme="dark"] [style*="#DBEAFE" i],
[data-theme="dark"] [style*="#F0F5FF" i],[data-theme="dark"] [style*="#E8F0FE" i]{background:rgba(0,94,255,.14)!important}
/* hijau */
[data-theme="dark"] [style*="#ECFDF5" i],[data-theme="dark"] [style*="#E8F7E9" i],
[data-theme="dark"] [style*="#D1FAE5" i]{background:rgba(62,182,69,.14)!important}
/* merah */
[data-theme="dark"] [style*="#FEE2E2" i],[data-theme="dark"] [style*="#FEF2F2" i],
[data-theme="dark"] [style*="#FEF8F8" i]{background:rgba(233,2,41,.13)!important}
/* amber */
[data-theme="dark"] [style*="#FEF3C7" i],[data-theme="dark"] [style*="#FFFBEB" i],
[data-theme="dark"] [style*="#FFF7ED" i],[data-theme="dark"] [style*="#FFEDD5" i]{background:rgba(245,158,11,.13)!important}
/* ungu */
[data-theme="dark"] [style*="#EDE9FE" i]{background:rgba(124,58,237,.18)!important}
/* abu netral */
[data-theme="dark"] [style*="#F3F4F6" i],[data-theme="dark"] [style*="#F0F2F5" i],
[data-theme="dark"] [style*="#F9FAFB" i]{background:rgba(255,255,255,.07)!important}
/* teks gelap di dalam chip inline pastel agar tetap terbaca */
[data-theme="dark"] [style*="#EFF6FF" i] i,[data-theme="dark"] [style*="#EDE9FE" i] i{filter:brightness(1.6)}
/* class status semantik tanpa varian dark (G2/G3/G4/login) */
[data-theme="dark"] .zone-crit,[data-theme="dark"] .pcd-c,[data-theme="dark"] .fs-rm,
[data-theme="dark"] .crit-badge,[data-theme="dark"] .ct-yes,[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-critical{background:rgba(233,2,41,.13)!important;border-color:rgba(233,2,41,.35)!important;color:#F87171!important}
[data-theme="dark"] .zone-poor{background:rgba(245,158,11,.13)!important;color:#FDBA74!important}
[data-theme="dark"] .zone-excel{background:rgba(0,94,255,.14)!important;color:#93C5FD!important}
[data-theme="dark"] .ct-no,[data-theme="dark"] .rb-done{background:rgba(62,182,69,.14)!important;color:#4ADE80!important}
[data-theme="dark"] .ct-empty,[data-theme="dark"] .kpi-trend.flat{background:rgba(255,255,255,.07)!important;color:#8B949E!important}
/* login (right panel & kontrol) */
[data-theme="dark"] .right-panel{background:var(--sqp-bg-card,#161B22)!important}
[data-theme="dark"] .otp-digit,[data-theme="dark"] .role-btn{background:var(--sqp-bg-card,#161B22)!important;border-color:rgba(255,255,255,.14)!important;color:#E6EDF3}
[data-theme="dark"] .ri-iq{background:rgba(0,94,255,.14)!important}

/* ── v5.18: FLOW GUIDE (tombol ? panduan alur per halaman) ── */
.fgd-btn{position:fixed;bottom:18px;right:18px;width:42px;height:42px;border-radius:50%;background:var(--sqp-primary,#005EFF);color:#fff;border:none;cursor:pointer;font-size:17px;font-weight:800;box-shadow:0 4px 14px rgba(0,94,255,.35);z-index:380;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.fgd-btn:hover{transform:scale(1.08)}
.fgd-panel{position:fixed;bottom:70px;right:18px;width:346px;max-height:72vh;overflow:auto;background:var(--sqp-bg-card,#fff);border:1px solid var(--sqp-border,#E5E7EB);border-radius:14px;box-shadow:0 12px 34px rgba(16,24,40,.22);z-index:381;padding:16px;display:none}
.fgd-panel.open{display:block;animation:fgdIn .18s ease}
@keyframes fgdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fgd-title{font-size:14px;font-weight:800;color:var(--sqp-text,#2D2E31);display:flex;align-items:center;gap:8px;margin-bottom:4px}
.fgd-intro{font-size:11.5px;color:var(--sqp-text-secondary,#6B7280);line-height:1.5;margin-bottom:12px}
.fgd-step{display:flex;gap:10px;padding:8px 9px;border-radius:9px;align-items:flex-start;margin-bottom:3px}
.fgd-step.cur{background:rgba(0,94,255,.08);outline:1.5px solid rgba(0,94,255,.35)}
.fgd-num{width:20px;height:20px;border-radius:50%;background:var(--sqp-bg-page,#F0F2F5);color:var(--sqp-text-secondary,#6B7280);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.fgd-step.cur .fgd-num{background:var(--sqp-primary,#005EFF);color:#fff}
.fgd-role{font-size:9px;font-weight:800;padding:1.5px 7px;border-radius:9px;display:inline-block;margin-bottom:2px;letter-spacing:.2px}
.fgd-r-iq{background:rgba(0,94,255,.13);color:#2563EB}.fgd-r-supplier{background:rgba(62,182,69,.15);color:#15803D}
.fgd-r-sq{background:rgba(124,58,237,.14);color:#7C3AED}.fgd-r-qa{background:rgba(245,158,11,.16);color:#B45309}
.fgd-r-admin{background:rgba(107,114,128,.15);color:#4B5563}
.fgd-t{font-size:12px;font-weight:600;color:var(--sqp-text,#2D2E31);line-height:1.35}
.fgd-pg{font-size:10px;color:var(--sqp-text-disabled,#9CA3AF);font-family:'DM Mono',monospace}
.fgd-here{font-size:9px;font-weight:800;color:var(--sqp-primary,#005EFF);margin-left:5px}
.fgd-foot{display:flex;gap:8px;margin-top:12px}
.fgd-start{flex:1;background:var(--sqp-primary,#005EFF);color:#fff;border:none;border-radius:8px;padding:9px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.fgd-close{background:none;border:1px solid var(--sqp-border,#E5E7EB);border-radius:8px;padding:9px 12px;font-size:11.5px;cursor:pointer;color:var(--sqp-text-secondary,#6B7280);font-family:inherit}
[data-theme="dark"] .fgd-panel{background:var(--sqp-bg-card,#161B22);border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .fgd-num{background:rgba(255,255,255,.08);color:#8B949E}
[data-theme="dark"] .fgd-step.cur{background:rgba(0,94,255,.16)}
[data-theme="dark"] .fgd-close{border-color:rgba(255,255,255,.15);color:#8B949E}

/* ── v5.19: FLOW STATUS BANNER (runtut indicator per halaman) ── */
.flb{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:11px;margin-bottom:14px;font-size:12.5px;border:1.5px solid;line-height:1.4}
.flb>i{font-size:16px;flex:none}
.flb>div{flex:1}
.flb b{display:block;font-size:12.5px;margin-bottom:1px}
.flb span{font-size:11.5px;opacity:.85}
.flb-info{background:rgba(0,94,255,.07);border-color:rgba(0,94,255,.3);color:#1D4ED8}
.flb-wait{background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.35);color:#B45309}
.flb-ok{background:rgba(62,182,69,.09);border-color:rgba(62,182,69,.35);color:#15803D}
.flb-crit{background:rgba(233,2,41,.07);border-color:rgba(233,2,41,.3);color:#B91C1C}
[data-theme="dark"] .flb-info{background:rgba(0,94,255,.14);color:#93C5FD}
[data-theme="dark"] .flb-wait{background:rgba(245,158,11,.13);color:#FCD34D}
[data-theme="dark"] .flb-ok{background:rgba(62,182,69,.13);color:#4ADE80}
[data-theme="dark"] .flb-crit{background:rgba(233,2,41,.13);color:#F87171}