/* ANGYANA THEME: brutal (night + day, STRICT layered) */
:root,:root[data-theme="dark"]{--bg:#121316;--bg2:#17181C;--s1:#1C1D22;--panel:#22242A;--panel2:#1F2126;--s3:#2F323A;--s4:#393D46;--line:#4D515C;--line2:#666B7A;--text:#F4F4F6;--body:#CCCFD7;--muted:#9A9FAC;--disabled:#6D717E;--green:#5B8DEF;--green2:#FACC15;--accent-ink:#08111F;--blue:#5AA9E6;--pink:#E06A9B;--amber:#E8B25A;--red:#EF6B6B;--shadow:0 14px 38px rgba(0,0,0,.45);color-scheme:dark}
:root[data-theme="light"]{--bg:#E3E5EA;--bg2:#E9EBEF;--s1:#F2F3F5;--panel:#FCFCFD;--panel2:#F7F8F9;--s3:#EFF0F3;--s4:#FFFFFF;--line:#BABECA;--line2:#989EAF;--text:#22242B;--body:#414653;--muted:#5C6170;--disabled:#8C909C;--green:#1D4ED8;--green2:#1D4ED8;--accent-ink:#FFFFFF;--blue:#1E6FB8;--pink:#B83C6E;--amber:#9A6608;--red:#C0392B;--shadow:0 12px 30px rgba(40,55,75,.10);color-scheme:light}

:root[data-theme] body{background:var(--bg)!important;color:var(--body)!important;line-height:1.55}
:root[data-theme] .app-body:before,:root[data-theme] .dollar-pattern,:root[data-theme] .money-orb,:root[data-theme] .login-body:before{display:none!important}
:root[data-theme] .login-body{background:var(--bg)!important}
/* PERF ANTI-LAG (desktop, terparah saat drag upload + zoom 50%): app.css cuma matikan
   backdrop-filter di HP; di desktop nyala → di-blur ulang tiap repaint. Bunuh total di
   semua tema + dekorasi berat ($ raksasa & prism). Chrome jadi solid — tetap rapi, tanpa biaya. */
:root[data-theme] .topbar,:root[data-theme] .sidebar,:root[data-theme] .notification-panel,:root[data-theme] .notification-toast,:root[data-theme] .mobile-bottom-nav,:root[data-theme] .login-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root[data-theme] .modal::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root[data-theme] .topbar{background:var(--panel)!important}
:root[data-theme] .notification-panel,:root[data-theme] .notification-toast{background:var(--panel)!important}
:root[data-theme] .money-accent,:root[data-theme] .prism-atmosphere,:root[data-theme] .prism-atmosphere-app{display:none!important}
:root[data-theme] .receipt-dropzone{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;transform:none!important;animation:none!important;transition:background-color .12s ease,border-color .12s ease!important}
:root[data-theme] .receipt-dropzone:hover,:root[data-theme] .receipt-dropzone.is-dragover,:root[data-theme] .receipt-dropzone.dragover{filter:none!important;box-shadow:none!important;transform:none!important;backdrop-filter:none!important}
:root[data-theme] h1,:root[data-theme] h2,:root[data-theme] h3,:root[data-theme] .hero-panel h2,:root[data-theme] .topbar-title h1,:root[data-theme] .kpi-card strong,:root[data-theme] .detail-amount strong,:root[data-theme] .mega-number,:root[data-theme] .number-example,:root[data-theme] .gauge strong,:root[data-theme] .hero-number strong{color:var(--text)!important;font-weight:800}
:root[data-theme] .eyebrow{color:var(--muted)!important}
:root[data-theme] .panel-heading p,:root[data-theme] .hero-panel p,:root[data-theme] .help-panel ul,:root[data-theme] .app-footer,:root[data-theme] .block,:root[data-theme] .empty-state,:root[data-theme] .kpi-card div span,:root[data-theme] .user-card-head div span,:root[data-theme] .priority-list small,:root[data-theme] .detail-list dt,:root[data-theme] .metric-list span,:root[data-theme] .timeline-item small{color:var(--muted)!important}
/* L1 chrome */
:root[data-theme] .sidebar{background:var(--s1)!important;border-right:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:none!important}
:root[data-theme] .topbar{background:var(--s1)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:none!important}
/* L2 cards/surfaces — every one bordered */
:root[data-theme] .panel,:root[data-theme] .glass-card,:root[data-theme] .kpi-card,:root[data-theme] .hero-panel,:root[data-theme] .user-card,:root[data-theme] .profile-card,:root[data-theme] .workflow-control-card,:root[data-theme] .workflow-control-hero,:root[data-theme] .analytics-card,:root[data-theme] .ca-balance-panel,:root[data-theme] .request-type-form-panel,:root[data-theme] .request-history-filter,:root[data-theme] .notification-panel,:root[data-theme] .notification-toast,:root[data-theme] .checkout-charge-card,:root[data-theme] .checkout-discount-card,:root[data-theme] .ca-report-guidance,:root[data-theme] .login-card,:root[data-theme] .user-chip{background:var(--panel)!important;border:1.5px solid var(--line)!important;box-shadow:var(--shadow)!important;backdrop-filter:none!important}
:root[data-theme] .kpi-card:hover,:root[data-theme] .user-card:hover{background:var(--s3)!important;border-color:var(--line2)!important}
/* recessed rows */
:root[data-theme] .request-item-row,:root[data-theme] .access-list li,:root[data-theme] .user-meta span,:root[data-theme] .priority-list a,:root[data-theme] .metric-list div{background:var(--bg2)!important;border:1px solid var(--line)!important}
:root[data-theme] .security-card{background:var(--bg2)!important;border:1px solid var(--line)!important;box-shadow:none!important}
/* nav */
:root[data-theme] .nav-item{color:var(--muted)!important;border:1px solid transparent!important;background:transparent!important;box-shadow:none!important}
:root[data-theme] .nav-item:hover{color:var(--text)!important;background:var(--s3)!important;border-color:var(--line)!important}
:root[data-theme] .nav-item.active{color:var(--accent-ink)!important;background:var(--green)!important;border-color:var(--green)!important}
:root[data-theme] .nav-item.active .nav-icon{color:var(--accent-ink)!important}
:root[data-theme] .nav-icon{color:var(--green)!important;background:transparent!important;border:none!important}
:root[data-theme] .nav-section{font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)!important;padding:16px 14px 6px;margin-top:2px}
/* inputs L2 + border */
:root[data-theme] .app-form input,:root[data-theme] .app-form select,:root[data-theme] .app-form textarea,:root[data-theme] .stack-form input,:root[data-theme] .modal-card input,:root[data-theme] .modal-card select,:root[data-theme] .modal-card textarea,:root[data-theme] .search-input{background:var(--bg2)!important;border:1px solid var(--line2)!important;box-shadow:none!important;color:var(--text)!important}
:root[data-theme] .app-form input:focus,:root[data-theme] .app-form select:focus,:root[data-theme] .app-form textarea:focus,:root[data-theme] .stack-form input:focus,:root[data-theme] .modal-card input:focus,:root[data-theme] .search-input:focus{border-color:var(--green)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)!important}
:root[data-theme] .app-form label,:root[data-theme] .stack-form label,:root[data-theme] .modal-card label{color:var(--body)!important;font-weight:700}
/* buttons */
:root[data-theme] .btn{border:1px solid var(--line2)!important;background:var(--panel)!important;color:var(--body)!important;box-shadow:none!important;transition:.15s}
:root[data-theme] .btn:hover{background:var(--s3)!important;color:var(--text)!important;border-color:var(--green)!important;transform:translateY(-1px)}
:root[data-theme] .btn-primary{background:var(--green)!important;color:var(--accent-ink)!important;border:1px solid var(--green)!important;font-weight:800}
:root[data-theme] .btn-primary:hover{filter:brightness(1.06);color:var(--accent-ink)!important}
:root[data-theme] .btn-ghost{background:transparent!important;color:var(--body)!important;border:1px solid var(--line2)!important}
:root[data-theme] .btn-danger{background:transparent!important;color:var(--red)!important;border:1px solid var(--red)!important}
/* tables */
:root[data-theme] .table-wrap{border:1px solid var(--line)!important;box-shadow:none!important;background:var(--panel)!important}
:root[data-theme] .data-table{background:transparent!important}
:root[data-theme] .data-table th{background:var(--s1)!important;color:var(--muted)!important;border-bottom:1px solid var(--line2)!important}
:root[data-theme] .data-table td{color:var(--body)!important;border-bottom:1px solid var(--line)!important}
:root[data-theme] .data-table tr:hover td{background:var(--s3)!important}
:root[data-theme] .request-number,:root[data-theme] .table-link,:root[data-theme] .text-green,:root[data-theme] .detail-amount strong,:root[data-theme] .hero-number strong,:root[data-theme] .priority-list b{color:var(--green)!important}
/* L4 modal */
:root[data-theme] .modal-card{background:var(--s4)!important;color:var(--body)!important;border:1px solid var(--line2)!important;box-shadow:var(--shadow)!important;backdrop-filter:none!important}
:root[data-theme] .modal::backdrop{background:color-mix(in srgb,var(--bg) 70%,transparent)!important}
:root[data-theme] .modal-head button{color:var(--muted)!important}
:root[data-theme] .gauge:before{background:var(--panel)!important;border:1px solid var(--line)!important}
/* badges keep semantic + border */
:root[data-theme] .status-badge,:root[data-theme] .type-badge{border:1px solid var(--line2)!important}
/* logo: full PNG lockup, NO plate, per-mode asset (PNG sudah memuat wordmark) */
:root[data-theme="light"] .logo-night,:root[data-theme="dark"] .logo-day{display:none!important}
:root[data-theme] .sidebar-brand{justify-content:flex-start!important;gap:0!important;align-items:center;padding:8px 6px 16px!important}
:root[data-theme] .sidebar-brand img{flex:0 0 auto!important;width:150px!important;height:auto!important;max-height:none!important;min-width:0!important;padding:0!important;background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;object-fit:contain}
:root[data-theme] .sidebar-brand-copy{display:none!important}
:root[data-theme] .login-logo{width:230px!important;height:auto!important;max-height:none!important;padding:0!important;background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;object-fit:contain}
/* login redesign: clean bordered split-screen */
:root[data-theme] .login-shell{grid-template-columns:1.05fr .95fr!important;gap:0!important;width:min(1060px,calc(100% - 32px))!important;background:var(--panel)!important;border:1.5px solid var(--line)!important;border-radius:24px;overflow:hidden;box-shadow:var(--shadow)!important;align-items:stretch!important}
:root[data-theme] .login-brand{padding:44px 42px!important;background:var(--bg2)!important;border-right:1px solid var(--line)!important;text-align:left!important}
:root[data-theme] .login-headline{display:block!important;font-size:clamp(1.7rem,3.2vw,2.5rem)!important;line-height:1.12!important;color:var(--text)!important;margin:16px 0 12px!important;font-weight:800!important;text-shadow:none!important}
:root[data-theme] .login-headline b{color:var(--green)!important;font-weight:800}
:root[data-theme] .login-subtitle{color:var(--muted)!important;font-size:.9rem!important;line-height:1.6!important;margin:0 0 22px!important}
:root[data-theme] .login-features{display:grid!important;gap:14px}
:root[data-theme] .login-feature{display:grid;grid-template-columns:44px 1fr;gap:13px;align-items:start}
:root[data-theme] .lf-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--bg)!important;border:1px solid var(--line);color:var(--green)!important;font-size:1.1rem}
:root[data-theme] .login-feature strong{display:block;color:var(--text)!important;font-size:.88rem;margin-bottom:2px}
:root[data-theme] .login-feature small{color:var(--muted)!important;font-size:.75rem;line-height:1.5}
:root[data-theme] .login-card{padding:44px 40px!important;background:var(--panel)!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;display:flex;flex-direction:column;justify-content:center}
:root[data-theme] .login-card h2{font-size:1.7rem!important}
:root[data-theme] .login-credit,:root[data-theme] .prism-atmosphere-login,:root[data-theme] .login-points,:root[data-theme] .money-orb,:root[data-theme] .login-company-name{display:none!important}
@media(max-width:820px){
  :root[data-theme] .login-stage{min-height:100svh!important;display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;padding:18px 0!important;box-sizing:border-box}
  :root[data-theme] .login-shell{grid-template-columns:1fr!important;width:min(440px,calc(100% - 28px))!important;margin:0 auto!important}
  :root[data-theme] .login-brand{padding:22px 22px 16px!important;border-right:none!important;border-bottom:1px solid var(--line)!important;text-align:center!important}
  /* brand jadi header ringkas: cukup logo + nama PT, sisanya disembunyikan biar form langsung kelihatan */
  :root[data-theme] .login-headline,:root[data-theme] .login-subtitle,:root[data-theme] .login-features,:root[data-theme] .login-credit{display:none!important}
  :root[data-theme] .login-logo{width:160px!important;display:block;margin:0 auto!important}
  :root[data-theme] .login-company-name{display:block!important;font-size:.62rem!important;letter-spacing:.1em;color:var(--muted)!important;text-align:center!important;margin-top:10px!important}
  :root[data-theme] .login-card{padding:24px 22px 28px!important}
  :root[data-theme] .login-card h2{font-size:1.36rem!important}
}
:root[data-theme] .system-loader-logo{width:188px!important;height:auto!important;background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;object-fit:contain}
/* scroll containment — list/board/table tidak makan page space (UX-oriented) */
:root[data-theme] .table-wrap{max-height:60vh;overflow:auto}
:root[data-theme] .data-table thead th{position:sticky;top:0;z-index:3}
/* STATUS BOARD: kartu rapih, tipografi berjenjang, nominal tak keluar garis */
:root[data-theme] .board-col{display:flex!important;flex-direction:column;min-width:226px;background:var(--bg2)!important;border:1.5px solid var(--line)!important;border-radius:14px;overflow:hidden}
:root[data-theme] .board-col-head{display:flex!important;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px!important;background:var(--s1)!important;border-bottom:1.5px solid var(--line)!important;border-top:3px solid var(--line2)!important;position:sticky;top:0;z-index:2}
:root[data-theme] .board-col-head.tone-warning{border-top-color:var(--amber)!important}
:root[data-theme] .board-col-head.tone-success{border-top-color:var(--green)!important}
:root[data-theme] .board-col-head.tone-cair,:root[data-theme] .board-col-head.tone-executed{border-top-color:var(--blue)!important}
:root[data-theme] .board-col-head.tone-hold{border-top-color:var(--amber)!important}
:root[data-theme] .board-col-head.tone-danger{border-top-color:var(--red)!important}
:root[data-theme] .board-col-head>span:first-child{font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--body)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] .board-count{flex:0 0 auto;min-width:22px;height:20px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;border-radius:999px;background:var(--panel)!important;border:1px solid var(--line2)!important;color:var(--text)!important}
:root[data-theme] .board-cards{display:flex!important;flex-direction:column;gap:9px;max-height:calc(100vh - 300px)!important;overflow-y:auto;overflow-x:hidden;padding:9px}
:root[data-theme] .board-card{display:flex!important;flex-direction:column;gap:3px;padding:11px 12px!important;background:var(--panel)!important;border:1.5px solid var(--line)!important;border-radius:11px;text-decoration:none!important;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
:root[data-theme] .board-card:hover{transform:translateY(-2px);border-color:var(--green)!important;box-shadow:var(--shadow)!important}
:root[data-theme] .board-card>strong{font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--muted)!important;font-variant-numeric:tabular-nums}
:root[data-theme] .board-card>span{font-size:.82rem;font-weight:700;line-height:1.28;color:var(--text)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
:root[data-theme] .board-card>small{font-size:.7rem;color:var(--muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] .board-card>em{margin-top:3px;font-style:normal;font-weight:800;font-size:.9rem;color:var(--green)!important;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.2}
:root[data-theme] .board-card .ca-balance-mini{margin-top:2px;font-style:normal;font-weight:600;font-size:.66rem}
:root[data-theme] .board-empty{padding:18px 8px;text-align:center;color:var(--disabled)!important;font-size:.76rem;font-style:italic}
:root[data-theme] .type-badge.type-po{color:var(--green)!important;border-color:var(--green)!important}
/* desktop: board = kanban horizontal-scroll (mobile ≤900px tetap 2-kolom app.css) */
@media(min-width:901px){
  :root[data-theme] .board-outer{overflow-x:auto;overflow-y:hidden;padding-bottom:8px}
  :root[data-theme] .board-wrap.workflow-board-wrap{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:12px;min-width:100%}
}
/* loader: cukup logo (anti-dobel ANGYANA) + motion bersih dari logo */
:root[data-theme] .system-loader{background:var(--bg)!important}
:root[data-theme] .system-loader [data-loader-title],:root[data-theme] .system-loader [data-loader-subtitle],:root[data-theme] .system-loader-nebula,:root[data-theme] .system-loader-grid,:root[data-theme] .system-loader-particles,:root[data-theme] .loader-diamond,:root[data-theme] .system-loader-orbit{display:none!important}
:root[data-theme] .system-loader-emblem{animation:logoBreath 1.15s ease-in-out infinite}
@keyframes logoBreath{0%,100%{opacity:.55;transform:scale(.965)}50%{opacity:1;transform:scale(1.025)}}
:root[data-theme] .system-loader-progress{background:var(--line)!important;border:none!important}
:root[data-theme] .system-loader-progress i{background:var(--green)!important}
/* login background: compact matte (no image/prism) */
:root[data-theme] .login-body{background:var(--bg)!important}
:root[data-theme] .login-body:before,:root[data-theme] .login-body:after,:root[data-theme] [data-login-background]{background-image:none!important}
/* micro-anim (transform/opacity only) */
@keyframes tFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
:root[data-theme] .hero-panel,:root[data-theme] .kpi-card,:root[data-theme] .dashboard-grid>.panel{animation:tFadeUp .4s cubic-bezier(.22,1,.36,1) both}
:root[data-theme] .kpi-card{transition:transform .16s ease,background .16s ease,border-color .16s ease}
:root[data-theme] .kpi-card:hover{transform:translateY(-3px)}
/* smooth cross-document navigation (MPA View Transitions) — progressive enhancement, diabaikan browser lama */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .16s ease both}
::view-transition-new(root){animation:vtIn .20s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){:root[data-theme] *{animation:none!important;transition:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
/* hard reset: beat app.css scoped light/dark chrome rules (match specificity + later + !important) */
:root[data-theme="light"] body,:root[data-theme="dark"] body{background:var(--bg)!important;color:var(--body)!important}
:root[data-theme="light"] body.app-body,:root[data-theme="dark"] body.app-body,:root[data-theme="light"] body.login-body,:root[data-theme="dark"] body.login-body{background:var(--bg)!important}
:root[data-theme="light"] .topbar-title h1,:root[data-theme="dark"] .topbar-title h1,:root[data-theme="light"] .panel-heading h2,:root[data-theme="dark"] .panel-heading h2,:root[data-theme="light"] .panel-heading h3,:root[data-theme="dark"] .panel-heading h3,:root[data-theme="light"] .hero-panel h2,:root[data-theme="dark"] .hero-panel h2{color:var(--text)!important}
:root[data-theme="light"] .panel-heading p,:root[data-theme="dark"] .panel-heading p,:root[data-theme="light"] .hero-panel p,:root[data-theme="dark"] .hero-panel p{color:var(--muted)!important}
:root[data-theme="light"] .sidebar,:root[data-theme="dark"] .sidebar{background:var(--s1)!important}
:root[data-theme="light"] .topbar,:root[data-theme="dark"] .topbar{background:var(--s1)!important}
:root[data-theme="light"] .data-table th,:root[data-theme="dark"] .data-table th{background:var(--s1)!important;color:var(--muted)!important}
:root[data-theme="light"] .nav-item.active,:root[data-theme="dark"] .nav-item.active{background:var(--green)!important;color:var(--accent-ink)!important}

/* brutal: thick decisive borders */
:root[data-theme] .panel,:root[data-theme] .kpi-card,:root[data-theme] .hero-panel,:root[data-theme] .user-card,:root[data-theme] .card,:root[data-theme] .table-wrap,:root[data-theme] .btn,:root[data-theme] .app-form input,:root[data-theme] .search-input{border-width:2px!important}
:root[data-theme] .nav-item.active{box-shadow:3px 3px 0 var(--line2)!important}