*{box-sizing:border-box}body{margin:0;font-family:Sarabun,system-ui,sans-serif;background:#f0f4f8;color:#24364b}button,input,select,textarea{font-family:inherit}button{cursor:pointer} .shell{display:flex;height:100vh;overflow:hidden}.side{width:245px;background:#1e3a5f;color:#fff;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid rgba(255,255,255,.12)}.brand b{display:block}.brand small{display:block;color:#9fb8d8;font-size:11px}.logo,.login-logo{width:38px;height:38px;border-radius:14px;background:#f7b731;color:#1e3a5f;display:grid;place-items:center;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.18)}nav{padding:12px 8px;overflow:auto}.nav{width:100%;border:0;background:transparent;color:#b7c8df;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font-size:13px;text-align:left}.nav.on,.nav:hover{background:rgba(255,255,255,.13);color:#fff}.nav b{flex:1;font-weight:600}.nav em{background:#f7b731;color:#1e3a5f;border-radius:999px;font-size:10px;padding:1px 7px;font-style:normal}main{flex:1;display:flex;flex-direction:column;overflow:hidden}.top{height:58px;background:#fff;border-bottom:1px solid #dfe7f0;display:flex;justify-content:space-between;align-items:center;padding:0 22px}.top b{display:block;color:#1e3a5f}.top span{font-size:12px;color:#7b8da3}.top-actions{display:flex;align-items:center;gap:8px}.userpill{background:#eef3f8;border-radius:12px;padding:7px 10px;color:#31465c!important}.content{padding:22px;overflow:auto;flex:1}.page{max-width:1500px;margin:auto}.title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.title h1{margin:0;color:#1e3a5f;font-size:23px}.title p{margin:4px 0 0;color:#7b8da3;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.primary,.secondary,.ghost,.danger{border:0;border-radius:12px;padding:9px 14px;font-weight:700;font-size:13px}.primary{background:#1e3a5f;color:#fff}.secondary{background:#fff;color:#1e3a5f;border:1px solid #cbd8e6}.ghost{background:transparent;color:#60758b}.danger{background:#dc2626;color:#fff}.ghost.danger{color:#dc2626;background:transparent}.small{padding:5px 9px;font-size:11px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.filters input,.filters select{background:#fff;border:1px solid #d7e0ea;border-radius:12px;padding:9px 10px;font-size:12px;min-width:130px}.filters input:first-child{min-width:240px;flex:1}.compact input:first-child{min-width:120px;flex:0}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0}.card{border-radius:20px;padding:20px;color:#fff;box-shadow:0 12px 28px rgba(30,58,95,.16)}.card small{display:block;opacity:.72;text-transform:uppercase;letter-spacing:.06em;font-size:11px}.card b{display:block;font-size:26px;margin-top:8px}.navy{background:linear-gradient(135deg,#1e3a5f,#2563a6)}.green{background:linear-gradient(135deg,#059669,#10b981)}.amber{background:linear-gradient(135deg,#d97706,#f59e0b)}.violet{background:linear-gradient(135deg,#6d28d9,#8b5cf6)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{background:#fff;border:1px solid #dfe7f0;border-radius:20px;padding:17px;box-shadow:0 4px 14px rgba(30,58,95,.05);margin-bottom:16px}.panel h3{margin:0 0 12px;color:#1e3a5f;font-size:14px;text-transform:uppercase;letter-spacing:.05em}.panel h4{margin:16px 0 8px;color:#1e3a5f}.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.overflow{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{background:#1e3a5f;color:#fff;text-align:left;padding:11px;white-space:nowrap}td{padding:10px 11px;border-bottom:1px solid #edf1f5;vertical-align:middle}tr:nth-child(even)td{background:#f9fbfd}tr:hover td{background:#eef6ff}.right{text-align:right}.strong{font-weight:800}.pos{color:#059669}.neg{color:#dc2626}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800;background:#e6eef7;color:#1e3a5f;margin:1px}.badge.green{background:#dcfce7;color:#166534}.badge.amber{background:#fef3c7;color:#92400e}.badge.red{background:#fee2e2;color:#991b1b}.badge.blue{background:#dbeafe;color:#1d4ed8}.muted{color:#7b8da3;font-size:12px}.warn{color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:10px}.ok{color:#047857;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:12px;padding:10px}.line,.podcard,.custcard,.rolecard{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border-radius:14px;border:1px solid #edf1f5;margin-bottom:8px;cursor:pointer}.line:hover,.custcard:hover,.rolecard:hover{background:#f6f9fc}.line b,.custcard b,.rolecard b{display:block;color:#1e3a5f}.line small,.custcard small,.rolecard small{display:block;color:#8292a6;font-size:11px}.podcard p{margin:4px 0 0;color:#8292a6;font-size:12px}.barrow{display:grid;grid-template-columns:140px 1fr 40px;align-items:center;gap:10px;margin:8px 0;font-size:12px}.barrow div{height:8px;background:#e5edf5;border-radius:999px;overflow:hidden}.barrow i{display:block;height:100%;background:#1e3a5f}.details{display:grid;grid-template-columns:150px 1fr;gap:10px;font-size:13px}.details dt{color:#7b8da3}.details dd{margin:0;text-align:right;font-weight:600}.kpi{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #edf1f5}.steps{display:flex;gap:4px;overflow:auto;margin:12px 0}.steps span{padding:8px 10px;border-radius:999px;background:#e7eef6;color:#708399;font-size:11px;white-space:nowrap}.steps span.on{background:#1e3a5f;color:#fff}.actionbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.timeline{border-left:3px solid #dbe5ef;padding:0 0 12px 12px;margin-bottom:8px}.timeline b{color:#1e3a5f}.timeline small{display:block;color:#7b8da3;font-size:11px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{background:#eef3f8;border-radius:999px;padding:6px 10px;font-size:12px}.routes{max-height:520px}.customergrid{grid-template-columns:350px 1fr}.modal{position:fixed;inset:0;background:rgba(15,23,42,.65);display:flex;align-items:flex-start;justify-content:center;padding:40px 14px;z-index:50;overflow:auto}.modal-card{width:min(720px,100%);background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.32);padding:0 0 18px}.modal-card.wide{width:min(980px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #edf1f5;color:#1e3a5f}.modal-head button{border:0;background:#f1f5f9;border-radius:10px;width:30px;height:30px;font-size:20px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}.formgrid label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;color:#63758b}.formgrid input,.formgrid select,.formgrid textarea{border:1px solid #d6e0ea;border-radius:12px;padding:9px 10px;font-size:13px;text-transform:none;color:#24364b}.formgrid textarea{min-height:70px}.span2{grid-column:span 2}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 18px}.inline-row{display:grid;grid-template-columns:110px 1fr 110px 40px;gap:8px;padding:0 18px 8px}.inline-row input,.inline-row select{border:1px solid #d6e0ea;border-radius:10px;padding:8px}.checkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 14px}.checkgrid label{font-size:12px;background:#f6f9fc;border-radius:12px;padding:8px}.login{min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e3a5f,#2563a6);display:grid;place-items:center;padding:20px}.login-card{width:min(420px,100%);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:28px;padding:32px;color:#fff;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3);backdrop-filter:blur(10px)}.login-logo{margin:0 auto 16px;width:64px;height:64px;font-size:30px}.login h1{margin:0}.login p{color:#c7d9f1}.login form{text-align:left;display:grid;gap:8px;margin-top:20px}.login input{border:0;border-radius:14px;padding:12px;background:#fff}.login small{display:block;margin:14px 0;color:#c7d9f1}.link{border:0;background:transparent;color:#fff;text-decoration:underline}.login .primary{margin-top:8px;background:#f7b731;color:#1e3a5f;width:100%;padding:12px}@media(max-width:900px){.side{width:70px}.brand div:not(.logo),.nav b,.nav em{display:none}.nav{justify-content:center}.top{padding:0 12px}.cards,.grid2{grid-template-columns:1fr}.customergrid{grid-template-columns:1fr}.formgrid,.checkgrid{grid-template-columns:1fr}.span2{grid-column:span 1}.inline-row{grid-template-columns:1fr}.content{padding:14px}table{min-width:850px}.filters input:first-child{min-width:100%;}.top span.userpill{display:none}}
.pod-files{display:grid;gap:8px}.podfile{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border:1px solid #edf1f5;border-radius:14px;padding:10px;background:#fbfdff}.podfile b{color:#1e3a5f}.podfile small{display:block;color:#7b8da3;font-size:11px}.podfile button{justify-self:end}.sales-row{grid-template-columns:1.2fr .9fr .9fr .9fr 40px}.modal-card h4{color:#1e3a5f;margin:14px 0 8px}.formgrid input[readonly]{background:#eef7f0;color:#17603a}.danger.small,.ghost.danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.doclink{font-size:11px}.podcard{cursor:default}.podcard button{flex-shrink:0}.filters input[list]{background:#fff}.routes table td{white-space:normal}.modal-card hr{border:0;border-top:1px solid #edf1f5;margin:14px 0}@media(max-width:900px){.podfile{grid-template-columns:1fr}.sales-row{grid-template-columns:1fr}}
/* v5 refinements */
.cards.mini{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 18px;margin:14px 0}.cards.mini .card{padding:14px}.cards.mini .card b{font-size:18px}.days3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.daybox{border:1px solid #edf1f5;border-radius:16px;padding:12px;background:#fbfdff;min-height:120px}.daybox h4{margin:0 0 10px;color:#1e3a5f;display:flex;justify-content:space-between;gap:8px}.daybox h4 small{font-weight:500;color:#7b8da3}.inline-head{display:grid;gap:8px;padding:0 18px 6px;color:#63758b;font-size:11px;text-transform:uppercase}.pickup-head{grid-template-columns:110px 1fr 110px 40px}.sales-head{grid-template-columns:1.2fr .9fr .9fr .9fr 40px}.barrow.wide{grid-template-columns:260px 1fr 40px}.barrow.wide span small{display:block;color:#7b8da3;font-size:10px;font-weight:400;margin-top:2px}.formgrid input[list]{background:#fff}.modal-card .filters.compact input,.modal-card .filters.compact select{min-width:140px}.modal-card .filters.compact{margin:14px 0}.podfile iframe{width:100%;height:70vh;border:0}@media(max-width:900px){.days3,.cards.mini{grid-template-columns:1fr}.pickup-head,.sales-head{display:none}.barrow.wide{grid-template-columns:1fr}.barrow.wide div{display:none}}


/* V6 custom searchable combo and ledger refinements */
.combo{position:relative;width:100%;}
.combo input{width:100%;}
.combo-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #d7e1ee;border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.22);z-index:99999;max-height:260px;overflow:auto;padding:6px;}
.combo-menu.open{display:block;}
.combo-option{padding:10px 12px;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.combo-option:hover{background:#eef6ff;}
.combo-option b{font-size:13px;color:#24344d;font-weight:700;line-height:1.35;}
.combo-option small{font-size:11px;color:#718096;white-space:nowrap;}
.combo-empty{padding:12px;color:#718096;font-size:12px;}
.card.red{background:linear-gradient(135deg,#dc2626,#ef4444);}
.modal-card.wide{overflow:visible;}
.formgrid{overflow:visible;}
.neg{color:#dc2626!important;}
.pos{color:#059669!important;}
.inline-head.pickup-head,.inline-head.sales-head{font-size:11px;color:#64748b;text-transform:uppercase;}
/* V7 refinements */
.formgrid small{font-size:10px;color:#718096;font-weight:500;text-transform:none;line-height:1.35}.modal-card .filters select{min-width:260px}.ledger-pay{width:16px;height:16px}.panel .barrow.wide span b{white-space:normal}.cards.mini .violet b,.cards.mini .amber b,.cards.mini .green b{font-size:16px}.actionbar .secondary{border-color:#9db3cc}.formgrid label input[type="checkbox"]{width:auto;margin-right:6px}.modal-card.wide{max-width:1120px}


/* V9 report/payment refinements */
.inline-head.v9-sales-head, .inline-row.v9-sales-row { grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr auto; }
.filters.compact label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:#64748b; font-weight:700; }
.report-section-title { margin: 16px 0 8px; color:#0f172a; font-weight:800; }
.badge.amber{background:#fef3c7;color:#92400e;border-color:#fde68a}
.badge.green{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.card.red{background:linear-gradient(135deg,#dc2626,#f97316)}

/* V11 improvements */
.listitem{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #edf1f5;border-radius:14px;margin-bottom:8px;}
.listitem:hover{background:#f6f9fc;}
.listitem b{display:block;color:#1e3a5f;}
.listitem small{display:block;color:#8292a6;font-size:11px;}
tfoot tr{border-top:2px solid #dfe7f0;}
tfoot td{background:#eef4fc!important;font-weight:800;}
.danger.small{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}
.modal-actions .danger{margin-right:auto;}
@media(max-width:900px){tfoot{display:none}}

/* FINAL6 payment/report/route calculator improvements */
.trp-quick-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.trp-quick-filters button,.trp-tabs button{border:1px solid #d8e2ee;background:#fff;border-radius:999px;padding:8px 12px;font-weight:800;color:#41536a;cursor:pointer}.trp-quick-filters button:hover,.trp-tabs button:hover{background:#f2f7fb}.trp-tabs{display:flex;flex-wrap:wrap;gap:6px}.trp-tabs button.on{background:#1e3a5f;color:#fff;border-color:#1e3a5f}.trp-filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.trp-filter-chips .chip{border:1px solid #c9d6e4;background:#eef5fb;border-radius:999px;padding:6px 10px;color:#29415b;font-weight:800;cursor:pointer}.trp-chart-panel{min-height:260px}.trp-bars{display:grid;gap:9px}.trp-bar-row{display:grid;grid-template-columns:minmax(120px,220px) 1fr minmax(85px,130px);gap:10px;align-items:center}.trp-bar-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#334155;font-weight:700}.trp-bar-row div{height:15px;border-radius:999px;background:#eef3f8;overflow:hidden}.trp-bar-row i{display:block;height:100%;border-radius:999px;background:#1e3a5f}.trp-bar-row i.neg{background:#dc2626}.trp-bar-row b{text-align:right;color:#1e3a5f}.trp-bar-row b.neg{color:#dc2626}.trp-month-chart{height:230px;display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:12px;align-items:end;padding:12px 4px 4px}.trp-month{text-align:center;display:flex;flex-direction:column;gap:4px;min-width:0}.trp-month-bars{height:160px;display:flex;align-items:end;justify-content:center;gap:5px;background:linear-gradient(180deg,#fff,#f7fafc);border-radius:12px;padding:8px}.trp-month-bars i,.trp-month-bars em{display:block;width:18px;min-height:3px;border-radius:8px 8px 0 0;background:#1e3a5f}.trp-month-bars em{background:#22c55e}.trp-month-bars em.neg{background:#dc2626}.trp-month b{font-size:11px;color:#334155}.trp-month small{font-size:10px;color:#64748b}.trp-legend{display:flex;gap:18px;justify-content:center;color:#64748b;font-size:12px;margin-top:4px}.trp-legend span{display:flex;gap:6px;align-items:center}.trp-legend i,.trp-legend em{width:13px;height:8px;border-radius:999px;background:#1e3a5f;display:inline-block}.trp-legend em{background:#22c55e}.trp-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.trp-status-pill{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:14px;text-align:center}.trp-status-pill b{font-size:24px;color:#1e3a5f}.trp-status-pill span{display:block;font-weight:800;color:#334155}.trp-status-pill small{color:#64748b}.trp-calc-result{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #7dd3fc;border-radius:16px;padding:20px;margin:0 18px 16px}.trp-result-head{font-size:12px;color:#0369a1;margin-bottom:14px;font-weight:900}.trp-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.trp-result-card{background:#fff;border-radius:14px;padding:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}.trp-result-card small{display:block;color:#64748b;font-weight:800;margin-bottom:5px}.trp-result-card b{display:block;font-size:24px;font-weight:900;color:#1e3a5f}.trp-result-card.cost b{color:#dc2626}.trp-result-card.profit b{color:#059669}.trp-result-card.profit b.neg{color:#dc2626}.trp-result-card em{display:block;font-style:normal;font-size:13px;font-weight:900;color:#059669;margin-top:6px}.trp-result-card span{display:block;font-size:11px;color:#7b8da3;margin-top:4px}.trp-calc-note{margin-top:12px;text-align:center;color:#0369a1;font-size:12px;font-weight:700}.pill.ok{background:#dcfce7;color:#166534}.pill.warn{background:#fef3c7;color:#92400e}
@media(max-width:700px){.trp-bar-row{grid-template-columns:1fr}.trp-bar-row b{text-align:left}.trp-month-chart{grid-template-columns:repeat(3,1fr);height:auto}.trp-month-bars{height:110px}.trp-result-grid{grid-template-columns:1fr}}

/* ===== V06.001 GOLD FINAL BRAND SAFETY ===== */
:root{--trp-gold:#d6a11f;--trp-gold-dark:#a56f00;--trp-gold-soft:#fff4cf;}
.brand b,.top b,.title h1{color:var(--trp-gold-dark)!important;}
.primary,.nav em{background:linear-gradient(135deg,#d6a11f,#f7c948)!important;color:#1e293b!important;}
.logo.has-img,.login-logo.has-img,.brand-logo.has-img{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important;}
.logo.has-img img,.login-logo.has-img img,.brand-logo.has-img img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important;display:block!important;}
.version-badge,.build-badge{background:linear-gradient(135deg,#d6a11f,#f7c948)!important;color:#1e293b!important;}


/* ════════════════════════════════════════════════════════════════
   PHASE-2 BRIDGE — maps Phase-2 module class names onto the
   original V06.042 design vocabulary above. Minimal & additive.
   ════════════════════════════════════════════════════════════════ */

/* --- buttons: my modules use .btn (+ .primary/.ghost/.danger/.small modifiers) --- */
.btn{border:0;border-radius:12px;padding:9px 14px;font-weight:700;font-size:13px;background:#fff;color:#1e3a5f;border:1px solid #cbd8e6;display:inline-flex;align-items:center;gap:6px;line-height:1.2;text-decoration:none}
.btn.primary{background:linear-gradient(135deg,#d6a11f,#f7c948);color:#1e293b;border:0}
.btn.ghost{background:transparent;color:#60758b;border:0}
.btn.danger{background:#dc2626;color:#fff;border:0}
.btn.ghost.danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.btn.small{padding:6px 10px;font-size:11px;border-radius:10px}
.btn.block{width:100%;justify-content:center}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* --- page header: my modules use .page-head + .row-between --- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.page-head h1{margin:0;color:var(--trp-gold-dark);font-size:23px}
.page-head .muted,.page-head p{margin:4px 0 0;color:#7b8da3;font-size:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* --- KPI grid: my modules use .kpi-grid > .kpi > .kpi-val/.kpi-lab --- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0}
.kpi-grid .kpi{border-radius:20px;padding:20px;color:#fff;box-shadow:0 12px 28px rgba(30,58,95,.16);display:block;border:0;background:linear-gradient(135deg,#1e3a5f,#2563a6)}
.kpi-grid .kpi:nth-child(4n+2){background:linear-gradient(135deg,#059669,#10b981)}
.kpi-grid .kpi:nth-child(4n+3){background:linear-gradient(135deg,#d97706,#f59e0b)}
.kpi-grid .kpi:nth-child(4n+4){background:linear-gradient(135deg,#6d28d9,#8b5cf6)}
.kpi-val{display:block;font-size:26px;margin-top:8px;font-weight:800;color:#fff}
.kpi-lab{display:block;opacity:.78;text-transform:uppercase;letter-spacing:.05em;font-size:11px;color:#fff}

/* --- tables: my modules use .table-wrap > table.data --- */
.table-wrap{overflow:auto;width:100%}
table.data{width:100%;border-collapse:collapse;font-size:12px}
table.data th{background:#1e3a5f;color:#fff;text-align:left;padding:11px;white-space:nowrap}
table.data td{padding:10px 11px;border-bottom:1px solid #edf1f5;vertical-align:middle}
table.data tr:nth-child(even) td{background:#f9fbfd}
table.data tbody tr:hover td{background:#eef6ff}
table.data .right{text-align:right}
.rowlink{cursor:pointer}

/* --- status pills: my modules use .st + .st-<status> --- */
.st{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;background:#e6eef7;color:#1e3a5f;white-space:nowrap}
.st-new{background:#e6eef7;color:#1e3a5f}
.st-assigned,.st-picked_up,.st-in_transit{background:#fef3c7;color:#92400e}
.st-delivered,.st-pod_received{background:#dcfce7;color:#166534}
.st-invoiced{background:#dbeafe;color:#1d4ed8}
.st-paid{background:#dcfce7;color:#166534}
.st-closed{background:#e2e8f0;color:#475569}
.st-cancelled{background:#fee2e2;color:#991b1b}

/* --- modal body: old CSS has modal-head/modal-actions; add modal-body + form-grid alias --- */
.modal-body{padding:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;color:#63758b}
.form-grid label.span2{grid-column:span 2}
.form-grid input,.form-grid select,.form-grid textarea{border:1px solid #d6e0ea;border-radius:12px;padding:9px 10px;font-size:13px;text-transform:none;color:#24364b;width:100%;font-family:inherit}
.form-grid input[readonly]{background:#eef7f0;color:#17603a}
.form-grid textarea{min-height:70px}
.form-grid small{font-size:10px;color:#718096;font-weight:500;text-transform:none;line-height:1.35}

/* --- detail list (key/value) --- */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding:0 4px}
.dl{display:block;font-size:11px;color:#7b8da3;font-weight:600;margin-bottom:2px}
.dl-head{font-size:12px;font-weight:800;color:#1e3a5f;text-transform:uppercase;letter-spacing:.04em;margin:14px 0 8px}
.computed-box{background:#f6f9fc;border:1px solid #e3ebf3;border-radius:14px;padding:14px;margin:0 18px 4px}
.computed-box .detail-grid > div{font-size:13px;color:#24364b}

/* --- dashboard bars + 3-day --- */
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bar-row{display:grid;grid-template-columns:140px 1fr 48px;align-items:center;gap:10px;margin:8px 0;font-size:12px}
.bar-label{color:#24364b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:8px;background:#e5edf5;border-radius:999px;overflow:hidden}
.bar-fill{display:block;height:100%;background:#1e3a5f}
.alert-bar{margin:0 0 16px;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:12px 16px;display:flex;justify-content:space-between;cursor:pointer}

/* --- filters: align with old .filters but allow my .filter-date --- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
.filter-date{font-size:12px;color:#7b8da3;display:flex;align-items:center;gap:6px}
.filters input,.filters select{font-family:inherit}

/* --- permission grid --- */
.perm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.perm-check{font-size:12px;background:#f6f9fc;border-radius:12px;padding:8px;display:flex;align-items:center;gap:6px}
.chk-col{display:grid;gap:6px}

/* --- file lists --- */
.file-list{display:grid;gap:8px}
.file-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #edf1f5;border-radius:12px;padding:10px;background:#fbfdff}

/* --- empty + misc --- */
.empty{background:#fff;border:1px dashed #cbd8e6;border-radius:16px;padding:34px;text-align:center;color:#7b8da3}
.brand-ver{display:inline-block;background:linear-gradient(135deg,#d6a11f,#f7c948);color:#1e293b;border-radius:999px;font-size:10px;padding:1px 8px;margin-top:4px;font-weight:700}
.total-row{font-weight:800;background:#eef4fc}
.period{font-size:12px;color:#64748b}
.rate-in{width:90px;border:1px solid #d6e0ea;border-radius:8px;padding:6px 8px;font-family:inherit}

/* --- login (my modules use .login-wrap/.login-card/.login-brand/.login-sub/.login-msg) --- */
.login-wrap{min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e3a5f,#2563a6);display:grid;place-items:center;padding:20px}
.login-card{width:min(420px,100%);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:28px;padding:32px;color:#fff;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3);backdrop-filter:blur(10px)}
.login-brand{font-size:22px;font-weight:800;margin:14px 0 6px}
.login-sub{color:#c7d9f1;font-size:13px;margin-bottom:18px}
.login-card input{border:0;border-radius:14px;padding:12px;background:#fff;color:#24364b;width:100%;margin-bottom:8px;font-family:inherit}
.login-card .btn.primary{margin-top:8px;width:100%;padding:12px;justify-content:center}
.login-msg{color:#fecaca;font-size:12px;margin-top:8px;min-height:16px}

/* --- searchable combo: ensure dropdown not clipped (old CSS has .combo styles already) --- */
.modal-card.wide{overflow:visible}
.form-grid{overflow:visible}
.work-order-modal .modal-card{overflow:visible}

/* --- responsive: keep old behavior, ensure my grids collapse --- */
@media(max-width:900px){
  .kpi-grid,.dash-cols,.detail-grid,.perm-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid label.span2{grid-column:span 1}
  table.data{min-width:760px}
  .bar-row{grid-template-columns:110px 1fr 44px}
}
.login-card label{display:block;text-align:left;font-size:12px;color:#dbe7f7;margin-bottom:4px;font-weight:600}
.login-card .lang-toggle{background:transparent;border:0;color:#c7d9f1;text-decoration:underline;margin-top:12px;font-size:12px;cursor:pointer}

/* --- notification token picker --- */
.token-group{margin-bottom:14px}
.token-group-head{font-size:11px;font-weight:800;text-transform:uppercase;color:#1e3a5f;letter-spacing:.04em;margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid #eef2f7}
.placeholder-grid{display:flex;flex-wrap:wrap;gap:6px}
.ph-chip{background:#eef3f8;color:#1e3a5f;border:0;border-radius:8px;padding:5px 9px;font-size:11px;cursor:pointer;font-family:monospace}
.ph-chip:hover{background:#dce8f5}
.line-preview{background:#1a2433;color:#e8f0fa;border-radius:14px;padding:14px;white-space:pre-wrap;font-size:13px;min-height:120px;font-family:Sarabun,monospace;line-height:1.5}


/* ════════════════════════════════════════════════════════════════
   V10 — dashboard 3-day grid, contractor rows, master-detail,
   tabs, profile cards, AR aging, report CFO additions.
   All additive; reuses the V06.042 palette.
   ════════════════════════════════════════════════════════════════ */

/* --- dashboard: 3-day columns rendered as GRID (was unstyled -> stacked) --- */
.day-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.day-card{border:1px solid #e6edf4;border-radius:16px;padding:14px;background:#fbfdff;min-height:130px}
.day-card.is-today{border-color:#f0c560;background:#fffdf4;box-shadow:0 4px 14px rgba(214,161,31,.12)}
.day-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.day-head b{color:#1e3a5f;font-size:13px}
.day-row{padding:7px 0;border-bottom:1px dashed #eef2f7;font-size:12px}
.day-row:last-child{border-bottom:0}
.day-row b{color:#1e3a5f}
@media(max-width:900px){.day-grid{grid-template-columns:1fr}}

/* --- contractor rows on fleet page now look clickable --- */
.contractor-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #edf1f5;border-radius:14px;margin-bottom:8px;cursor:pointer;transition:background .12s,border-color .12s}
.contractor-row:hover{background:#f4f9ff;border-color:#c9ddf3}
.contractor-row b{color:#1e3a5f;display:block}

/* --- tabs (contractor profile, reports) --- */
.tabbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;border-bottom:2px solid #e9eff6;padding-bottom:0}
.tabbar button{border:0;background:transparent;color:#566c86;font-weight:700;font-size:13px;padding:10px 16px;border-radius:10px 10px 0 0;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabbar button:hover{background:#f2f7fb;color:#1e3a5f}
.tabbar button.on{color:#1e3a5f;border-bottom-color:#d6a11f;background:#fff}

/* --- master/detail (customers, contractors) --- */
.md-grid{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.md-list{display:grid;gap:10px}
.md-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border:1px solid #e6edf4;border-radius:16px;cursor:pointer;background:#fff;transition:background .12s,border-color .12s,box-shadow .12s}
.md-item:hover{background:#f6fafe;border-color:#cadcf1}
.md-item.on{border-color:#d6a11f;box-shadow:0 6px 18px rgba(214,161,31,.14);background:#fffdf6}
.md-item b{display:block;color:#1e3a5f;font-size:15px}
.md-item small{display:block;color:#8292a6;font-size:11px;margin-top:2px}
.md-item .md-arrow{color:#9bb0c7;font-size:18px}
@media(max-width:900px){.md-grid{grid-template-columns:1fr}}

/* --- profile header (vehicle/contractor) --- */
.profile-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.profile-avatar{width:84px;height:84px;border-radius:18px;background:linear-gradient(135deg,#1e3a5f,#2563a6);color:#fff;display:grid;place-items:center;font-size:34px;flex-shrink:0;overflow:hidden}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-meta h2{margin:0;color:#1e3a5f;font-size:20px}
.profile-meta .pm-row{color:#566c86;font-size:13px;margin-top:4px;display:flex;gap:14px;flex-wrap:wrap}
.profile-meta .pm-row b{color:#1e3a5f}

/* --- stat cards row (profile KPIs, lighter than gradient KPIs) --- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.stat-card{border:1px solid #e6edf4;border-radius:16px;padding:16px;background:#fbfdff}
.stat-card small{display:block;color:#64758c;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.stat-card b{display:block;font-size:22px;color:#1e3a5f;margin-top:5px}
.stat-card.good b{color:#059669}
.stat-card.warn b{color:#d97706}
.stat-card.bad b{color:#dc2626}

/* --- doc chips --- */
.doc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.doc-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}
.doc-chip.has{background:#dcfce7;color:#166534}
.doc-chip.missing{background:#fee2e2;color:#991b1b}

/* --- AR / payable aging cells --- */
.age-pill{display:inline-block;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}
.age-0{background:#dcfce7;color:#166534}
.age-30{background:#fef9c3;color:#854d0e}
.age-60{background:#fed7aa;color:#9a3412}
.age-90{background:#fee2e2;color:#991b1b}

/* --- report sub-cards / comparison --- */
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:6px 0 4px}
.cmp-card{border:1px solid #e6edf4;border-radius:16px;padding:16px;background:#fff}
.cmp-card small{display:block;color:#64758c;font-size:11px;font-weight:700;text-transform:uppercase}
.cmp-card b{display:block;font-size:20px;color:#1e3a5f;margin-top:5px}
.cmp-card .delta{font-size:12px;font-weight:700;margin-top:4px}
.cmp-card .delta.up{color:#059669}
.cmp-card .delta.down{color:#dc2626}

/* --- mini select chip group --- */
.seg{display:inline-flex;border:1px solid #d8e2ee;border-radius:10px;overflow:hidden}
.seg button{border:0;background:#fff;color:#51637c;font-weight:700;font-size:12px;padding:7px 12px;cursor:pointer}
.seg button.on{background:#1e3a5f;color:#fff}

/* --- inline editable route/sales rows in customer detail --- */
.mini-table{width:100%;border-collapse:collapse;font-size:12px}
.mini-table th{background:#f1f5fa;color:#41536a;text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase}
.mini-table td{padding:8px 10px;border-bottom:1px solid #eef2f7}
.mini-table tr:hover td{background:#f8fbff}

/* status select inline on order rows */
.status-select{border:1px solid #d6e0ea;border-radius:10px;padding:5px 8px;font-size:11px;font-family:inherit;background:#fff;color:#24364b;font-weight:700;cursor:pointer}
.status-select:hover{border-color:#9db3cc}

.warn-text{color:#b45309;font-size:12px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:8px}

/* ===== V11: pagination, export picker ===== */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 6px 4px; flex-wrap:wrap; }
.pager-info { color:#64748b; font-size:13px; }
.pager-controls { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pager-controls select { padding:4px 8px; border:1px solid var(--border,#d8dee9); border-radius:7px; }
.pager-controls button[disabled] { opacity:.4; cursor:not-allowed; }