/* AYAM GEPUK ARTISAN — SOA v9.0 (read-only finance dashboard) */
/* Isolated to .soa-v9. Does not alter ordering, user permissions or shared controls. */
.soa-v9{--soa-ink:#181818;--soa-gold:#ffc914;--soa-muted:#717171;--soa-border:#e6e5df;--soa-soft:#f8f8f6;min-width:0;padding-bottom:25px}
.soa-v9 .page-head{gap:14px;align-items:flex-start}
.soa-v9 .page-head h1{letter-spacing:-.8px}
.soa-v9 .page-head .actions{flex-wrap:wrap;gap:7px}
.soa-v9 .page-head .actions .btn{white-space:nowrap}
.soa-v9 .soa-hero-v9{position:relative;overflow:hidden;background:linear-gradient(108deg,#131313 0%,#29231b 68%,#5d4717 100%);border-radius:18px;padding:26px 29px;margin-bottom:16px;box-shadow:0 12px 25px #00000013}
.soa-v9 .soa-hero-v9:after{content:"";position:absolute;width:330px;height:330px;right:-170px;top:-150px;border:1px solid #ebba2848;border-radius:50%;pointer-events:none}
.soa-v9 .soa-hero-v9 h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.7px;margin:8px 0 11px}
.soa-v9 .soa-hero-v9 p{max-width:790px;font-size:12px;line-height:1.65}
.soa-v9 .soa-hero-v9 .soa-hero-icon{background:#f7cc1824;border:1px solid #f7d35667}
.soa-v9 .soa-panel{border:1px solid var(--soa-border);border-radius:16px;box-shadow:0 5px 15px #00000006}
.soa-v9 .soa-panel-header h3{font-size:16px;font-weight:850;color:#171717}
.soa-v9 .soa-panel-header small{font-size:11px;line-height:1.5}
.soa-v9 .soa-filter-v9{padding:19px 21px!important;background:#fff;margin-bottom:12px}
.soa-v9 .soa-filter-grid-v9{grid-template-columns:minmax(155px,1.03fr) minmax(185px,1.35fr) minmax(170px,1.25fr) minmax(134px,.85fr) minmax(134px,.85fr);gap:11px}
.soa-v9 .soa-filter-grid-v9 .form-field{min-width:0;font-size:10px;font-weight:800;letter-spacing:.25px}
.soa-v9 .soa-filter-grid-v9 input,.soa-v9 .soa-filter-grid-v9 select{width:100%;min-width:0;max-width:100%;height:43px;border-radius:10px;text-overflow:ellipsis;background:#fff}
.soa-v9 .soa-presets{margin-top:15px;padding-top:12px}
.soa-v9 .soa-presets .btn{border-radius:9px;padding:8px 12px}
.soa-v9 .soa-current-context{background:#fff8df;margin:12px 0 17px;box-shadow:none}
.soa-v9 .soa-dashboard-label{margin:18px 1px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.soa-v9 .soa-dashboard-label h2{margin:0 0 4px;font-size:20px;font-weight:900;color:#191919;letter-spacing:-.35px}
.soa-v9 .soa-dashboard-label p{margin:0;color:#777;font-size:11px}
.soa-v9 .soa-data-badge{display:inline-flex;align-items:center;gap:6px;background:#f6f5f1;border:1px solid #e9e7e1;border-radius:100px;padding:6px 10px;color:#6b5b32;font-size:10px;letter-spacing:.1px;font-weight:750;white-space:nowrap}
.soa-v9 .soa-data-badge .i{width:13px;height:13px}
.soa-v9 .soa-kpi-grid-v9{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.soa-v9 .soa-kpi-v9{cursor:pointer;position:relative;min-height:151px;display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:11px;padding:16px 18px!important;border:1px solid var(--soa-border)!important;border-radius:16px;box-shadow:0 6px 14px #00000008;background:#fff;transition:border-color .15s,transform .15s,box-shadow .15s;font-family:inherit}
.soa-v9 .soa-kpi-v9:hover{border-color:#e0bd43!important;transform:translateY(-1px);box-shadow:0 8px 20px #00000010}
.soa-v9 .soa-kpi-v9:focus-visible{outline:3px solid #c49a0a;outline-offset:3px}
.soa-v9 .soa-kpi-v9 .soa-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.soa-v9 .soa-kpi-v9 .soa-kpi-top small{font-size:11px;color:#555;font-weight:800;letter-spacing:.1px}
.soa-v9 .soa-kpi-v9 .soa-kpi-symbol{width:33px;height:33px;min-width:33px;display:grid;place-items:center;border-radius:9px;background:#fbf5df;color:#a48112;margin:0}
.soa-v9 .soa-kpi-v9 .soa-kpi-symbol .i{width:17px;height:17px}
.soa-v9 .soa-kpi-v9 strong{font-size:clamp(22px,2.3vw,28px);font-weight:900;color:#141414;line-height:1.15;letter-spacing:-.8px}
.soa-v9 .soa-kpi-v9>span:not(.soa-kpi-symbol){margin-top:auto;color:#7c755c;font-size:10px;line-height:1.4}
.soa-v9 .soa-kpi-v9 .soa-kpi-drill{position:absolute;right:17px;bottom:15px;visibility:hidden;opacity:0;background:#fff;color:#634b00!important;padding:3px 5px;transition:opacity .12s}
.soa-v9 .soa-kpi-v9:hover .soa-kpi-drill,.soa-v9 .soa-kpi-v9:focus .soa-kpi-drill{visibility:visible;opacity:1}
.soa-v9 .soa-tone-paid .soa-kpi-symbol{background:#e5f8ef;color:#10804b}
.soa-v9 .soa-tone-overdue .soa-kpi-symbol{background:#fff0ed;color:#c03421}
.soa-v9 .soa-tone-soon .soa-kpi-symbol{background:#fff4d6;color:#b97700}
.soa-v9 .soa-tone-nodue .soa-kpi-symbol{background:#f3f0ff;color:#6d56a6}
.soa-v9 .soa-grid-v9{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:13px}
.soa-v9 .soa-grid-v9 .soa-panel{min-width:0;padding:21px 22px!important}
.soa-v9 .soa-grid-v9 .soa-panel-header{align-items:flex-start;margin-bottom:15px}
.soa-v9 .soa-aging-list{display:grid;gap:13px}
.soa-v9 .soa-aging-row{min-width:0}
.soa-v9 .soa-aging-row-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;margin-bottom:7px;color:#666}
.soa-v9 .soa-aging-row-head>span{display:flex;align-items:center;gap:8px}
.soa-v9 .soa-aging-row-head strong{color:#232323;font-size:12px;white-space:nowrap}
.soa-v9 .soa-age-dot{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#acacac}
.soa-v9 .soa-aging-track{background:#eeefed;border-radius:20px;height:8px;overflow:hidden}
.soa-v9 .soa-aging-fill{height:100%;min-width:0;border-radius:20px;transition:width .2s ease;background:#8b8b8b}
.soa-v9 .soa-age-dot.fresh,.soa-v9 .soa-aging-fill.fresh{background:#1ca27e}
.soa-v9 .soa-age-dot.young,.soa-v9 .soa-aging-fill.young{background:#e5ac17}
.soa-v9 .soa-age-dot.mid,.soa-v9 .soa-aging-fill.mid{background:#e28f25}
.soa-v9 .soa-age-dot.late,.soa-v9 .soa-aging-fill.late{background:#e36a4b}
.soa-v9 .soa-age-dot.critical,.soa-v9 .soa-aging-fill.critical{background:#c33737}
.soa-v9 .soa-age-dot.nodue,.soa-v9 .soa-aging-fill.nodue{background:#8770b9}
.soa-v9 .soa-grid-v9 .soa-summary-lines{gap:0}
.soa-v9 .soa-grid-v9 .soa-summary-lines>div{padding:12px 0;border-bottom:1px solid #ededeb;font-size:11px;gap:12px}
.soa-v9 .soa-grid-v9 .soa-summary-lines .soa-summary-total{background:#fff3c0;padding:15px 12px;border:1px solid #e8cf5d;border-radius:9px;display:flex;gap:6px;margin:9px 0 2px}
.soa-v9 .soa-grid-v9 .soa-summary-lines .soa-summary-total strong{font-size:17px}
.soa-v9 .soa-reconcile-check{display:flex;align-items:center;gap:6px;color:#287254;font-size:11px;font-weight:700;margin-top:13px}
.soa-v9 .soa-reconcile-check .i{width:15px;height:15px}
.soa-v9 .soa-caption{font-size:11px;line-height:1.58;color:#808080;margin:12px 0 0}
.soa-v9 .soa-status-panel{padding:18px 22px!important;margin-top:0}
.soa-v9 .soa-status-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:10px}
.soa-v9 .soa-status-head h3{font-size:15px;color:#151515;margin:0 0 5px}
.soa-v9 .soa-status-head small{font-size:11px;color:#777}
.soa-v9 .soa-status-head strong{font-size:23px;white-space:nowrap}
.soa-v9 .soa-status-head strong span{font-size:10px;color:#6a6a6a;font-weight:600}
.soa-v9 .soa-status-progress{border-radius:20px;height:11px;overflow:hidden;background:#eee}
.soa-v9 .soa-status-progress>div{height:100%;border-radius:20px;background:linear-gradient(90deg,#f3bd13,#fbd33e)}
.soa-v9 .soa-status-meta{display:flex;justify-content:space-between;gap:10px;color:#777;font-size:10px;margin-top:9px}
.soa-v9 .soa-company-panel{padding:20px 22px!important}
.soa-v9 .soa-company-panel .soa-panel-header{align-items:center}
.soa-v9 .soa-account-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:15px}
.soa-v9 .soa-account-card{min-width:0;border:1px solid #e9e7e2;background:#fdfdfc;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:11px}
.soa-v9 .soa-account-card>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.soa-v9 .soa-account-card>div:first-child>div{min-width:0}
.soa-v9 .soa-account-card b{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soa-v9 .soa-account-card small{font-size:10px;color:#777}
.soa-v9 .soa-account-card strong{font-size:18px;color:#222}
.soa-v9 .soa-account-initial{height:30px;width:30px;flex:0 0 30px;border-radius:8px;background:#ffe581;display:grid;place-items:center;font-size:12px;font-weight:900}
.soa-v9 .soa-account-mini{height:6px;background:#eceae5;border-radius:15px;overflow:hidden}
.soa-v9 .soa-account-mini>div{background:#e9b928;height:100%;border-radius:15px}
.soa-v9 .soa-account-card>button{border:0;background:transparent;text-align:left;font:inherit;color:#795900;font-size:10px;font-weight:800;padding:0;cursor:pointer;display:flex;align-items:center;gap:4px}
.soa-v9 .soa-account-card>button .i{height:13px;width:13px}
.soa-v9 .soa-table-shell{overflow:auto;max-width:100%;max-height:520px;border:1px solid #e9e9e8;border-radius:10px;overscroll-behavior-x:contain}
.soa-v9 .soa-table-shell .table-wrap{overflow:visible}
.soa-v9 .soa-table-shell table{min-width:960px;border-collapse:separate;border-spacing:0}
.soa-v9 .soa-table-shell th{position:sticky;top:0;z-index:3;background:#f7f7f4;white-space:nowrap;font-size:10px}
.soa-v9 .soa-table-shell td{font-size:11px;white-space:nowrap;background:#fff}
.soa-v9 .soa-table-shell th:first-child,.soa-v9 .soa-table-shell td:first-child{position:sticky;left:0;z-index:2;background:#fff;box-shadow:2px 0 4px #00000006}
.soa-v9 .soa-table-shell th:first-child{z-index:4;background:#f7f7f4}
.soa-v9 .soa-register-panel{padding:20px 22px!important;scroll-margin-top:88px}
.soa-v9 .soa-filter-v9{scroll-margin-top:88px}
.soa-v9 .soa-register-panel .soa-panel-header{align-items:center}
.soa-v9 .soa-reg-controls{display:grid;grid-template-columns:minmax(230px,2.3fr) minmax(145px,1.15fr) minmax(150px,1fr) minmax(75px,.5fr);gap:10px;align-items:end}
.soa-v9 .soa-reg-controls .form-field{margin:0;min-width:0;font-size:10px;font-weight:800;letter-spacing:.1px}
.soa-v9 .soa-reg-controls .form-field:first-child,.soa-v9 .soa-reg-controls .form-field:last-child{flex:unset}
.soa-v9 .soa-reg-controls input,.soa-v9 .soa-reg-controls select{min-width:0;width:100%;height:40px;border-radius:9px}
.soa-v9 .soa-row-actions{display:flex;gap:5px;min-width:max-content}
.soa-v9 .soa-due-hint{font-size:10px;color:#888;margin-top:4px}
.soa-v9 .soa-page{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:11px}
.soa-v9 .soa-page .soa-page-count{margin-right:auto;color:#888}
.soa-v9 .soa-no-data{padding:28px 15px;text-align:center;color:#777}
.soa-v9 .soa-guidance-v9{border:1px solid #e4d39a!important;border-radius:13px}
.soa-v9 .soa-guidance-v9 p{max-width:1100px}
@media(max-width:1350px){.soa-v9 .soa-filter-grid-v9{grid-template-columns:repeat(3,minmax(0,1fr))}.soa-v9 .soa-account-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){.soa-v9 .soa-kpi-grid-v9{grid-template-columns:repeat(2,minmax(0,1fr))}.soa-v9 .soa-grid-v9{grid-template-columns:1fr}.soa-v9 .soa-reg-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.soa-v9 .page-head .actions{justify-content:flex-start}.soa-v9 .page-head .actions .btn{font-size:11px}.soa-v9 .soa-hero-v9{padding:22px 18px}.soa-v9 .soa-filter-grid-v9{grid-template-columns:1fr}.soa-v9 .soa-filter-v9,.soa-v9 .soa-register-panel,.soa-v9 .soa-company-panel,.soa-v9 .soa-grid-v9 .soa-panel{padding:14px!important}.soa-v9 .soa-kpi-grid-v9{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.soa-v9 .soa-kpi-v9{min-height:133px;padding:11px!important;gap:8px}.soa-v9 .soa-kpi-v9 strong{font-size:18px;letter-spacing:-.35px}.soa-v9 .soa-kpi-v9 .soa-kpi-symbol{height:26px;width:26px;min-width:26px}.soa-v9 .soa-kpi-v9 .soa-kpi-symbol .i{width:14px;height:14px}.soa-v9 .soa-kpi-v9 .soa-kpi-top small{font-size:10px}.soa-v9 .soa-kpi-v9>span{font-size:9px!important}.soa-v9 .soa-reg-controls{grid-template-columns:1fr}.soa-v9 .soa-reg-controls .form-field{width:100%}.soa-v9 .soa-account-cards{grid-template-columns:1fr}.soa-v9 .soa-dashboard-label{align-items:flex-start;flex-direction:column}.soa-v9 .soa-status-head{align-items:flex-start;flex-direction:column}.soa-v9 .soa-status-meta{flex-wrap:wrap}.soa-v9 .soa-page-count{width:100%}}
@media print{.soa-v9 .soa-dashboard-label,.soa-v9 .soa-status-panel,.soa-v9 .soa-hero-v9,.soa-v9 .soa-filter-v9{display:none!important}#soa-printable{display:block!important}}