/* V20.2 · one-screen Textbook-style finance prototype */
:root{--ss-purple:#7655ca;--ss-ink:#303951;--ss-muted:#8d97a9;--ss-line:#e8eaf1;--ss-warn:#b47438}
html,body{min-height:100%;background:#f7f8fc;color:var(--ss-ink)}
body.ss-drawer-open{overflow:hidden}
.ss-app{min-height:100vh}
.ss-topbar{height:58px;background:#fff;border-bottom:1px solid var(--ss-line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(17px,3vw,36px);gap:12px}
.ss-top-left{display:flex;align-items:center;gap:11px;min-width:0}
.ss-mark{display:grid;place-items:center;width:30px;height:30px;background:#7654c9;border-radius:8px;color:#fff;font-weight:900;font-size:17px}
.ss-brand-text{line-height:1.15}
.ss-brand-text b{display:block;font-size:15px;letter-spacing:-.2px}
.ss-brand-text small{display:block;color:#9199aa;font-weight:700;font-size:9px;letter-spacing:.5px;margin-top:4px}
.ss-divider{height:22px;width:1px;background:#e9e8f1;margin:0 7px}
.ss-crumb{font-size:11px;color:#9099ac;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-crumb b{color:#5d607a}
.ss-tag-demo{background:#f3f0fd;color:#6c58b4;border-radius:50px;padding:6px 10px;font-size:10px;font-weight:850;white-space:nowrap}
.ss-main{max-width:1600px;margin:0 auto;padding:26px clamp(16px,3vw,36px) 38px;min-width:0}
.ss-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px}
.ss-eyebrow{color:#806fc5;font-size:10px;letter-spacing:.6px;font-weight:850}
.ss-heading h1{margin:4px 0 4px;color:#303951;font-size:25px;line-height:1.3;letter-spacing:-.6px;font-weight:850}
.ss-heading h1 span{display:inline-block;vertical-align:middle;padding:4px 7px;margin-left:3px;background:#f1eeff;color:#7559c4;font-size:10px;letter-spacing:0;border-radius:5px}
.ss-heading p{color:#8e97a8;font-size:11px;line-height:1.6}
.ss-heading-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ss-btn{appearance:none;border:1px solid transparent;border-radius:8px;min-height:35px;padding:8px 12px;font-size:11px;font-weight:800;white-space:nowrap;line-height:1.2;transition:background .14s,border-color .14s}
.ss-btn.primary{color:#fff;background:#7758c8;border-color:#7758c8;box-shadow:0 2px 5px #6a51af16}
.ss-btn.primary:hover{background:#6648b7;border-color:#6648b7}
.ss-btn.outline,.ss-btn.light{color:#654eae;background:#fff;border-color:#d8d0ed}
.ss-btn.light{background:#f8f6ff}
.ss-btn.outline:hover,.ss-btn.light:hover{background:#efeaff}
.ss-btn.danger-outline{background:#fff6f7;color:#b94b60;border-color:#f1d9dd}
.ss-btn.full{width:100%;margin-top:9px}
.ss-link{border:0;background:transparent;padding:3px 4px;color:#7454c6;font-size:11px;font-weight:750;cursor:pointer}
.ss-link:hover{text-decoration:underline}
.ss-link.danger{color:#b85464}
.ss-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:15px}
.ss-kpi{background:#fff;border:1px solid var(--ss-line);padding:13px 15px;border-radius:11px;min-width:0;box-shadow:0 3px 14px #30305008}
.ss-kpi>span{font-size:10px;color:#8f98a9;font-weight:750;display:block;margin-bottom:5px}
.ss-kpi>strong{color:#303951;font-size:18px;font-weight:850;letter-spacing:-.4px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ss-kpi>small{display:block;color:#adb2bf;font-size:9px;margin-top:5px}
.ss-kpi.balance>strong{color:#b6783c}
.ss-panel{background:white;border:1px solid var(--ss-line);border-radius:12px;box-shadow:0 4px 16px #28304009;overflow:hidden}
.ss-panel-head{padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #eff0f5}
.ss-panel-head>b{font-size:14px;font-weight:850;color:#373c56}
.ss-panel-head-right{display:flex;gap:12px;align-items:center;color:#a0a7b6;font-size:10px}
.ss-filter-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(130px,1fr) minmax(145px,1.2fr) minmax(130px,1fr) minmax(188px,1.5fr);gap:8px;padding:10px 14px 12px}
.ss-filter-row>label{font-size:10px;font-weight:850;color:#8d96a8;display:grid;align-content:end;gap:5px;min-width:0}
.ss-filter-row select,.ss-filter-row input{height:35px;width:100%;min-width:0;border:1px solid #dfe3ed;border-radius:7px;padding:7px 9px;background:#fff;font-size:11px;color:#4a556f;outline:none}
.ss-filter-row input:focus,.ss-filter-row select:focus{border-color:#9c89d9;box-shadow:0 0 0 3px #7653c51a}
.ss-table-caption{background:#fbfbfe;padding:7px 14px;border-block:1px solid #eff0f5;color:#8c96a8;font-size:10px;display:flex;justify-content:space-between;gap:12px}
.ss-table-caption span:last-child{color:#8068c5}
.ss-table-scroll{overflow:auto;max-width:100%;max-height:min(62vh,625px);scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ss-table{border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:1214px;width:100%;font-size:11px}
.ss-table th,.ss-table td{border-right:1px solid #eceef4;border-bottom:1px solid #eceef4;padding:10px 10px;min-height:48px;vertical-align:middle;background:#fff;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-table th{font-size:10px;color:#7d889d;background:#f7f8fc;position:sticky;top:0;z-index:10;height:38px;font-weight:850}
.ss-table th.number,.ss-table td.number{text-align:right;font-variant-numeric:tabular-nums}
.ss-table td.number b{font-weight:850}
.ss-table td small{display:block;font-size:9px;color:#a0a7b5;margin-top:3px}
.ss-table .ss-sticky-col{position:sticky;left:0;z-index:3;background:#fcfbff;font-weight:800;white-space:normal}
.ss-table .ss-books-col{position:sticky;left:95px;z-index:2;background:#fcfbff;box-shadow:5px 0 8px -8px #37314c}
.ss-table .ss-books-col span{display:block;white-space:normal;line-height:1.35;color:#6d5abe;font-size:10px;font-weight:750}
.ss-table thead th:first-child{left:0;z-index:16;background:#f0edfb;color:#6656a8}
.ss-table thead th:nth-child(2){left:95px;z-index:15;background:#f0edfb;color:#6656a8}
.ss-table .ss-company{font-size:11px;color:#333d55;display:block;overflow:hidden;text-overflow:ellipsis}
.ss-table tr.ss-record{cursor:pointer}
.ss-table tr.ss-record:hover td,.ss-table tr.ss-record:hover .ss-sticky-col,.ss-table tr.ss-record:hover .ss-books-col{background:#faf9ff}
.ss-table tr.ss-record.active td,.ss-table tr.ss-record.active .ss-sticky-col,.ss-table tr.ss-record.active .ss-books-col{background:#f4f1ff}
.ss-status{display:inline-block;vertical-align:middle;padding:5px 8px;border-radius:80px;font-size:9px;font-weight:850}
.ss-status.paid{background:#e8f8ed;color:#2c855e}
.ss-status.partial{background:#fff1de;color:#ac772d}
.ss-status.unpaid{background:#f0f2f5;color:#8791a2}
.ss-arrow{float:right;margin:1px 3px 0 0;color:#8e79c7;font-size:14px}
.ss-due{color:#b57639}
.ss-table tr.ss-detail-row>td{padding:0!important;overflow:visible;white-space:normal;border:0;background:#f6f5fb}
.ss-expansion{position:sticky;left:0;width:min(1100px,calc(100vw - 70px));max-width:100%;margin:10px 12px 13px;padding:13px 15px;border-radius:10px;border:1px solid #dedbec;background:#fff}
.ss-expanded-head{display:flex;justify-content:space-between;align-items:start;gap:10px;flex-wrap:wrap;margin-bottom:13px}
.ss-expanded-head strong{font-size:13px;display:block}
.ss-expanded-head span{font-size:10px;color:#a0a7b5;display:block;margin-top:4px}
.ss-exp-actions{display:flex;gap:6px;flex-wrap:wrap}
.ss-expanded-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(285px,.84fr);gap:16px}
.ss-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ss-facts>div{background:#fafafd;border:1px solid #f0eff6;padding:8px 9px;border-radius:7px;min-width:0}
.ss-facts small{display:block;color:#99a1b2;font-size:9px;margin-bottom:5px}
.ss-facts b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-trip-summary{margin-top:14px}
.ss-trip-summary>b{display:block;font-size:11px;margin-bottom:7px}
.ss-trip-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed #eaebf0;color:#647088;font-size:10px}
.ss-trip-row span:last-child{color:#98a1b0}
.ss-books,.ss-note{font-size:11px;color:#677187;margin-top:12px}
.ss-books small{display:block;font-size:9px;color:#a0a5b4}
.ss-books span{color:#6655b3;font-weight:700}
.ss-note{background:#fafafd;border-radius:6px;padding:8px}
.ss-batch{background:#f8f6ff;border:1px solid #efebfa;color:#7160a6;border-radius:8px;padding:9px;font-size:10px;margin-top:11px}
.ss-batch small{display:block;margin-top:5px;color:#9e96be}
.ss-payment-head{display:flex;align-items:center;justify-content:space-between;margin:17px 0 8px;font-size:11px}
.ss-payment-head span{font-size:10px;color:#a0a7b4}
.ss-payment-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 0;border-bottom:1px solid #edeef3}
.ss-payment-row b{font-size:12px;margin-right:9px}
.ss-payment-row span{font-size:10px;color:#99a2b0}
.ss-emptypay{border:1px dashed #e4e3ec;text-align:center;border-radius:7px;padding:13px;color:#9ca4b1;font-size:11px}
.ss-paybox{background:#fbfbfd;border:1px solid #ececf3;border-radius:9px;padding:13px;min-width:0}
.ss-pay-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ss-pay-figures small{font-size:9px;display:block;color:#a0a7b5;margin-bottom:5px}
.ss-pay-figures b{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ss-pay-figures .due{color:#b7773c}
.ss-progress{height:5px;background:#eae7f3;border-radius:99px;overflow:hidden;margin:12px 0}
.ss-progress div{height:100%;background:#7659c9}
.ss-paycaption{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:850;margin:13px 0}
.ss-paycaption small{color:#9aa2b4;font-size:10px}
.ss-pay-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ss-pay-fields label{display:grid;gap:5px;font-size:10px;color:#7f889e;font-weight:800;min-width:0}
.ss-pay-fields .wide{grid-column:1/-1}
.ss-pay-fields input{width:100%;min-width:0;background:#fff;padding:9px;font-size:11px;border:1px solid #dfe2ec;border-radius:7px;color:#37415a}
.ss-checkline{display:flex;align-items:center;gap:8px;color:#7c8498;font-size:11px;margin-top:11px}
.ss-checkline input{accent-color:#7655ca}
.ss-caveat{display:block;font-size:9px;color:#9ca4b4;margin-top:9px;line-height:1.5}
.ss-panel-footer{padding:11px 14px;border-top:1px solid #eceef4;background:#fafbff;color:#a0a7b6;font-size:10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.ss-panel-footer summary{cursor:pointer;color:#6651b1;font-weight:800}
.ss-batch-list{padding:10px 0;min-width:390px}
.ss-batch-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0}
.ss-batch-list b{color:#47506c}
.ss-page-foot{display:flex;justify-content:space-between;gap:12px;margin-top:11px;align-items:center;color:#abb2c1;font-size:10px}
#drawer-root{isolation:isolate}
.ss-backdrop{position:fixed;inset:0;background:#15163168;z-index:30}
.ss-drawer{position:fixed;right:0;top:0;bottom:0;width:min(550px,100vw);display:flex;flex-direction:column;z-index:31;background:white;box-shadow:-14px 0 40px #17193426}
.ss-drawer-head{padding:19px 22px 14px;border-bottom:1px solid #eff0f5;display:flex;justify-content:space-between;align-items:start;gap:12px}
.ss-drawer-head h2{font-size:20px;color:#333750;letter-spacing:-.4px;margin:5px 0}
.ss-drawer-head p{font-size:11px;color:#929bab}
.ss-close{font-size:24px;color:#8f95a4;background:#f6f6fa;border:0;border-radius:7px;width:32px;height:32px}
.ss-drawer-scroll{overflow:auto;flex:1;padding:0 22px 20px;overscroll-behavior:contain}
.ss-type-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0}
.ss-type-switch button,.ss-price-modes button{border:1px solid #e0e0ed;background:#fff;border-radius:8px;padding:10px;font-size:11px;font-weight:770;color:#6b7489}
.ss-type-switch .active,.ss-price-modes .active{background:#f1edff;border-color:#ae9de7;color:#664db7}
.ss-section{padding:16px 0;border-top:1px solid #eeeef4}
.ss-section h3{font-size:13px;color:#353a56;font-weight:850;margin-bottom:13px;display:flex;justify-content:space-between}
.ss-section h3 small{font-size:10px;color:#7459bd}
.ss-section-hint{font-size:11px;color:#919aad;line-height:1.55;margin:-5px 0 12px}
.ss-drawer .ss-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ss-drawer .field{min-width:0}
.ss-drawer .field.wide{grid-column:1/-1}
.ss-drawer .field>label{font-size:10px;font-weight:800;color:#707a8e;display:block;margin-bottom:6px}
.ss-drawer .field>small{display:block;font-size:9px;color:#a0a7b5;margin-top:4px;line-height:1.4}
.ss-drawer .field input:not([type=checkbox]),.ss-drawer .field select,.ss-drawer .field textarea{border:1px solid #dfe2ed;width:100%;min-height:36px;border-radius:7px;padding:9px 10px;font-size:12px;color:#3a4560}
.ss-drawer .chips{gap:6px}
.ss-drawer .chip{border-radius:7px;padding:7px 9px;font-size:11px}
.ss-drawer .chip input{min-width:16px;min-height:16px}
.ss-drawer .vehicle-row{padding:11px;border-radius:8px;margin-bottom:8px}
.ss-drawer .vehicle-top{margin-bottom:9px}
.ss-drawer .vehicle-top strong{font-size:11px}
.ss-drawer .row-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ss-drawer .vehicle-row .field:last-child{margin-top:7px}
.ss-addrows{display:flex;gap:7px;flex-wrap:wrap}
.ss-price-modes{display:flex;gap:6px;margin-bottom:13px;flex-wrap:wrap}
.ss-price-modes button{padding:9px}
.ss-section>.field{margin-top:8px}
.ss-hint-purple{background:#f8f5ff;border-radius:7px;margin-top:12px;padding:10px;color:#7561b1;font-size:10px;line-height:1.6}
.ss-more{padding:14px 0;border-top:1px solid #efeff5}
.ss-more summary{font-size:11px;font-weight:750;color:#7964b4;cursor:pointer;margin-bottom:8px}
.ss-more .ss-form-grid{margin-top:10px}
.ss-more textarea{width:100%;min-height:68px;padding:9px;border:1px solid #dfe2ed;border-radius:7px;font-size:12px}
.ss-drawer-foot{padding:14px 21px;border-top:1px solid #eaeaf2;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 -5px 20px #11122c09}
.ss-drawer-foot small{display:block;font-size:10px;color:#8f98a9;margin-bottom:4px}
.ss-drawer-foot strong{font-size:20px;color:#674cbe;font-variant-numeric:tabular-nums}
.ss-drawer-buttons{display:flex;gap:7px}
.ss-empty{padding:28px;text-align:center;color:#929aae;font-size:12px}
#modal-root .overlay{z-index:50}
#modal-root .dialog{z-index:51}
@media(max-width:1120px){
 .ss-filter-row{grid-template-columns:repeat(3,minmax(0,1fr))}.ss-search{grid-column:span 2}
 .ss-expansion{width:min(970px,calc(100vw - 52px))}.ss-expanded-grid{grid-template-columns:1fr}
}
@media(max-width:670px){
 .ss-topbar{height:52px;padding:0 14px}.ss-brand-text b{font-size:13px}.ss-brand-text small{font-size:8px}.ss-crumb{font-size:10px}.ss-divider{margin:0 1px}
 .ss-main{padding:17px 12px 35px}
 .ss-heading{align-items:start;flex-direction:column;gap:12px}
 .ss-heading h1{font-size:22px}.ss-heading p{font-size:11px}
 .ss-heading-actions{width:100%;justify-content:stretch}.ss-heading-actions .ss-btn{flex:1}
 .ss-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.ss-kpi{padding:11px 12px}.ss-kpi strong{font-size:17px}
 .ss-panel-head{padding:11px 12px}
 .ss-filter-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}
 .ss-search{grid-column:1/-1}
 .ss-filter-row input,.ss-filter-row select{font-size:14px;height:37px}
 .ss-table-caption{padding:7px 10px;line-height:1.5}
 .ss-table-caption span:last-child{display:none}
 .ss-table-scroll{max-height:none}
 .ss-table{min-width:1090px}
 .ss-table th,.ss-table td{padding:10px 8px}
 .ss-expansion{width:calc(100vw - 42px);margin:9px 9px 11px;padding:11px}
 .ss-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.ss-expanded-grid{display:block}
 .ss-paybox{margin-top:15px}
 .ss-batch-list{min-width:240px}
 .ss-drawer{width:100vw}
 .ss-drawer-head{padding:15px 17px 12px}
 .ss-drawer-scroll{padding:0 17px 22px}
 .ss-drawer-foot{padding:12px 16px}
 .ss-drawer-foot strong{font-size:18px}
 .ss-drawer .field input:not([type=checkbox]),.ss-drawer .field select,.ss-drawer .field textarea,.ss-pay-fields input{font-size:16px}
}
@media(max-width:365px){.ss-drawer .ss-form-grid{grid-template-columns:1fr}.ss-drawer .field.wide{grid-column:1}.ss-drawer-foot{gap:7px}.ss-drawer-foot strong{font-size:16px}.ss-btn{padding:8px 9px}}