:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;background:#f4f6f8}*{box-sizing:border-box}body{margin:0}.topbar{height:64px;background:#fff;border-bottom:1px solid #e5e9ef;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0}.brand{font-weight:800}.topbar nav{display:flex;align-items:center;gap:20px}.topbar a,.linkbtn{color:#344054;text-decoration:none;font:inherit}.linkbtn{border:0;background:none;cursor:pointer}.inline{display:inline}.container{max-width:1180px;margin:0 auto;padding:28px}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h1,h2{margin:0 0 10px}h1{font-size:28px}h2{font-size:18px}.muted{color:#667085}.card{background:#fff;border:1px solid #e4e7ec;border-radius:14px;padding:20px;box-shadow:0 1px 2px rgba(16,24,40,.04);margin-bottom:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat span{display:block;color:#667085}.stat strong{display:block;font-size:28px;margin-top:8px}.card-head{display:flex;align-items:center;justify-content:space-between}.job-list{display:flex;flex-direction:column}.job-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid #eaecf0;color:inherit;text-decoration:none}.job-row small{display:block;color:#667085;margin-top:4px}.badge{background:#eef2f6;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}.badge.large{font-size:13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #eaecf0;white-space:nowrap}th{font-size:12px;text-transform:uppercase;color:#667085}td a{color:#175cd3;text-decoration:none}.grid2{display:grid;grid-template-columns:2fr 1fr;gap:20px}.details{display:grid;grid-template-columns:130px 1fr;gap:12px;margin:0}.details dt{color:#667085}.details dd{margin:0;font-weight:600}.crew{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #eaecf0}.login-wrap{min-height:75vh;display:grid;place-items:center}.login-card{width:min(420px,100%)}label{display:block;font-weight:600;margin:16px 0 7px}input{width:100%;padding:12px;border:1px solid #d0d5dd;border-radius:9px;font:inherit}.primary{border:0;border-radius:9px;background:#175cd3;color:#fff;padding:10px 14px;font-weight:700;cursor:pointer}.full{width:100%;margin-top:18px;padding:12px}.alert{padding:11px;border-radius:8px}.error{background:#fef3f2;color:#b42318}@media(max-width:720px){.topbar{padding:0 16px}.topbar nav{gap:10px;font-size:13px}.container{padding:18px}.stats,.grid2{grid-template-columns:1fr}.details{grid-template-columns:100px 1fr}}

.success{background:#ecfdf3;color:#027a48}.override-form{display:grid;grid-template-columns:110px minmax(180px,1fr) auto;gap:8px;align-items:center;min-width:440px}.override-form input{margin:0;padding:8px}.override-tag{display:inline-block;margin-top:4px;padding:3px 7px;border-radius:999px;background:#fff4e5;color:#b54708;font-size:11px;font-weight:700}@media(max-width:720px){.override-form{grid-template-columns:1fr;min-width:260px}}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}.form-grid .span-2{grid-column:1/-1}select,textarea{width:100%;padding:12px;border:1px solid #d0d5dd;border-radius:9px;font:inherit;background:#fff;color:#172033}textarea{resize:vertical}.field-help{display:block;color:#667085;font-size:12px;line-height:1.4;margin-top:6px}.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid #eaecf0}.secondary-btn{display:inline-block;padding:10px 14px;border:1px solid #d0d5dd;border-radius:9px;color:#344054;text-decoration:none;font-weight:700;background:#fff}.text-button{text-decoration:none;display:inline-block}@media(max-width:720px){.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.form-actions>*{flex:1;text-align:center}}

/* Centralized logistics job entry */
.central-job-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:20px;align-items:start}.rate-preview-card{position:sticky;top:20px}.preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.preview-heading h2{margin:0 0 4px}.preview-badge{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px;white-space:nowrap}.preview-badge.neutral{background:#f2f4f7;color:#475467}.preview-badge.success{background:#ecfdf3;color:#027a48}.preview-badge.error{background:#fef3f2;color:#b42318}.preview-empty{margin-top:18px;padding:16px;border:1px dashed #d0d5dd;border-radius:10px;color:#667085;background:#fcfcfd}.preview-rate-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:20px}.preview-divider{padding-top:18px;border-top:1px solid #eaecf0}.rate-amount{font-size:22px;font-weight:800;white-space:nowrap}.preview-meta{font-size:12px;color:#667085;margin-top:5px}.preview-total{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid #eaecf0;font-size:16px}.preview-note{font-size:12px;line-height:1.5;color:#667085;margin-top:14px;padding:12px;background:#f9fafb;border-radius:8px}button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:980px){.central-job-layout{grid-template-columns:1fr}.rate-preview-card{position:static}}

/* Role-aware commission visibility and approvals */
.rate-detail-panel{margin-top:18px;padding:16px;border:1px solid #eaecf0;border-radius:10px;background:#fcfcfd}.rate-detail-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.rate-detail-grid{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:16px 0 0}.rate-detail-grid dt{color:#667085}.rate-detail-grid dd{margin:0;font-weight:600;color:#344054}.employee-commission-list{display:grid;gap:12px}.employee-commission-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border:1px solid #eaecf0;border-radius:10px}.employee-final-amount{font-size:24px;font-weight:800;white-space:nowrap}.approval-actions{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.reject-form{display:flex;gap:8px;flex:1;min-width:280px}.reject-form input{flex:1}.danger-btn{border:0;border-radius:9px;padding:10px 14px;font-weight:800;background:#b42318;color:white;cursor:pointer}.approval-card{border-left:4px solid #12b76a}@media(max-width:720px){.rate-detail-grid{grid-template-columns:1fr}.employee-commission-row{align-items:flex-start}.approval-actions,.reject-form{flex-direction:column}.reject-form{min-width:0;width:100%}.reject-form>*{width:100%}}

/* ================================================================
   Mobile trip lifecycle
   ================================================================ */
.mobile-shell{max-width:760px;margin:0 auto;padding-bottom:88px}
.mobile-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.mobile-hero h1{margin:3px 0 5px;font-size:28px}
.mobile-hero p{margin:0;color:#667085}
.mobile-eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;color:#475467}
.mobile-new-trip{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;border-radius:12px;padding:11px 14px;background:#101828;color:#fff;white-space:nowrap}
.mobile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}
.mobile-stat{border:1px solid #eaecf0;border-radius:14px;padding:14px;background:#fff}
.mobile-stat strong{display:block;font-size:21px;line-height:1.2;color:#101828}
.mobile-stat span{display:block;margin-top:5px;font-size:12px;color:#667085}
.mobile-section{margin:20px 0}
.mobile-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mobile-section-head h2{margin:0;font-size:19px}
.mobile-trip-card{background:#fff;border:1px solid #eaecf0;border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.mobile-trip-card.compact{padding:14px 16px}
.mobile-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mobile-card-top strong{font-size:17px}
.mobile-job-no{font-size:12px;color:#667085;margin-bottom:3px}
.mobile-status{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.02em;white-space:nowrap;background:#f2f4f7;color:#344054}
.status-assigned,.status-created{background:#eff8ff;color:#175cd3}
.status-in-progress{background:#fff6ed;color:#b54708}
.status-pending-approval{background:#f4f3ff;color:#5925dc}
.status-approved{background:#ecfdf3;color:#027a48}
.status-rejected{background:#fef3f2;color:#b42318}
.mobile-trip-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}
.mobile-trip-grid div{background:#f9fafb;border-radius:10px;padding:10px}
.mobile-trip-grid span,.mobile-route span{display:block;font-size:11px;color:#667085}
.mobile-trip-grid strong{display:block;margin-top:3px;font-size:13px}
.mobile-route{display:grid;grid-template-columns:auto 1fr auto auto 1fr;gap:8px;align-items:center;border-top:1px solid #f2f4f7;border-bottom:1px solid #f2f4f7;padding:12px 0;margin-bottom:14px}
.mobile-route strong{font-size:13px}
.mobile-arrow{font-size:18px!important;color:#98a2b3!important}
.mobile-complete-form{display:grid;gap:12px;margin-top:12px}
.mobile-complete-form label{font-size:12px;font-weight:700;color:#344054}
.mobile-complete-form input,.mobile-complete-form textarea{margin-top:6px;width:100%}
.mobile-quantity{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.mobile-quantity span{margin-top:6px;display:flex;align-items:center;justify-content:center;background:#f2f4f7;border-radius:9px;padding:0 13px;font-weight:800;color:#344054;height:44px}
.mobile-action{width:100%;min-height:48px;font-size:15px;font-weight:900;border-radius:12px}
.mobile-own-commission{display:flex;justify-content:space-between;align-items:center;background:#ecfdf3;border-radius:12px;padding:13px;margin-top:12px}
.mobile-own-commission span{color:#027a48;font-size:12px;font-weight:700}
.mobile-own-commission strong{font-size:21px;color:#05603a}
.mobile-pending-line{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;color:#667085;font-size:12px}
.mobile-pending-line strong{font-size:18px;color:#101828;white-space:nowrap}
.mobile-rejected{background:#fef3f2;border:1px solid #fecdca;color:#912018;padding:11px;border-radius:10px;margin-bottom:12px;font-size:12px}
.mobile-rejected strong{display:block;margin-bottom:3px}
.mobile-empty{text-align:center;color:#667085;border:1px dashed #d0d5dd;border-radius:14px;padding:22px}
.mobile-bottom-nav{display:none}

/* ================================================================
   Supervisor approval dashboard
   ================================================================ */
.approval-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.approval-summary-card{background:#fff;border:1px solid #eaecf0;border-radius:14px;padding:16px}
.approval-summary-card span{display:block;color:#667085;font-size:12px}
.approval-summary-card strong{display:block;margin-top:5px;font-size:25px;color:#101828}
.approval-filter{display:flex;align-items:end;gap:12px}
.approval-filter>div{min-width:220px}
.approval-job-card{background:#fff;border:1px solid #eaecf0;border-radius:16px;padding:20px;margin:16px 0;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.approval-job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.approval-job-head h2{margin:3px 0}
.approval-job-no{font-size:12px;color:#667085}
.approval-job-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}
.approval-job-facts>div{background:#f9fafb;padding:11px;border-radius:10px}
.approval-job-facts span,.approval-rate-detail span{display:block;color:#667085;font-size:11px}
.approval-job-facts strong,.approval-rate-detail strong{display:block;margin-top:3px;font-size:13px}
.approval-crew{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.approval-crew h3{margin:0 8px 0 0;font-size:14px}
.approval-crew span{font-size:12px;background:#f2f4f7;border-radius:999px;padding:6px 9px}
.approval-rate-list{display:grid;gap:12px}
.approval-rate-row{border:1px solid #e4e7ec;border-radius:12px;padding:14px}
.approval-rate-person{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.approval-rate-person span{font-size:11px;font-weight:800;background:#eff8ff;color:#175cd3;border-radius:999px;padding:5px 8px}
.approval-rate-detail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.approval-rate-detail>div{background:#f9fafb;border-radius:9px;padding:9px}
.approval-rate-detail .approval-formula{grid-column:span 2}
.approval-final{font-size:17px!important;color:#027a48}
.approval-rule{margin-top:10px;color:#667085;font-size:11px}
.approval-dashboard-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #eaecf0}
.approval-dashboard-actions form{margin:0}
.approve-big{min-height:42px}
.approval-reject{display:flex;gap:8px;flex:1;min-width:320px}
.approval-reject input{flex:1}
.approval-empty{text-align:center;padding:38px}

@media(max-width:760px){
  .mobile-shell{padding:0 0 86px}
  .mobile-hero{align-items:center}
  .mobile-new-trip{padding:10px 12px}
  .mobile-stats{grid-template-columns:1fr 1fr}
  .mobile-stat:last-child{grid-column:1/-1}
  .mobile-trip-grid{grid-template-columns:1fr 1fr}
  .mobile-route{grid-template-columns:1fr;gap:3px}
  .mobile-arrow{transform:rotate(90deg);justify-self:start}
  .mobile-bottom-nav{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:#101828;border-radius:15px;padding:6px;box-shadow:0 8px 30px rgba(16,24,40,.25)}
  .mobile-bottom-nav a{color:#d0d5dd;text-decoration:none;text-align:center;border-radius:10px;padding:11px;font-size:12px;font-weight:800}
  .mobile-bottom-nav a.active{background:#fff;color:#101828}
  .approval-summary-grid{grid-template-columns:1fr 1fr}
  .approval-summary-card:last-child{grid-column:1/-1}
  .approval-job-facts{grid-template-columns:1fr 1fr}
  .approval-rate-detail{grid-template-columns:1fr 1fr}
  .approval-rate-detail .approval-formula{grid-column:1/-1}
  .approval-dashboard-actions{flex-direction:column;align-items:stretch}
  .approval-dashboard-actions>*{width:100%}
  .approval-dashboard-actions form button,.approval-dashboard-actions a{width:100%;text-align:center;box-sizing:border-box}
  .approval-reject{min-width:0;display:grid;grid-template-columns:1fr}
  .approval-filter{align-items:stretch;flex-direction:column}
  .approval-filter>div,.approval-filter button{width:100%}
}