:root{--navy:#0f1f46;--navy2:#19366f;--bg:#f3f6fb;--card:#fff;--text:#10203c;--muted:#6d7890;--line:#dfe5ef;--green:#128a43;--red:#cf2e2e;--gold:#b58100;--shadow:0 14px 35px rgba(15,31,70,.1)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}body{padding-bottom:90px}button,input,select{font:inherit}.app-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 18px 14px;color:#fff;background:linear-gradient(135deg,var(--navy),var(--navy2));box-shadow:0 8px 24px #0002}.app-header h1{margin:2px 0 0;font-size:24px}.brand-kicker,.section-kicker{font-size:11px;font-weight:900;letter-spacing:.13em;opacity:.65}.app-shell{max-width:1180px;margin:auto;padding:18px}.view{display:none}.view.active{display:block}.period-tabs{display:flex;gap:8px;overflow:auto;margin-bottom:14px}.period-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font-weight:800;color:var(--muted)}.period-tabs button.active{background:var(--navy);color:#fff}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}.hero-card,.score-card,.panel,.stats-grid article,.trip-card,.week-card,.route-row,.maintenance-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.hero-card{padding:24px;color:#fff;background:linear-gradient(135deg,#10224c,#1b3677)}.hero-value{font-size:44px;font-weight:900;margin:8px 0}.hero-meta{display:flex;justify-content:space-between;opacity:.82}.score-card{padding:22px}.score-title{color:var(--muted);font-size:13px}.score-value{font-size:38px;font-weight:900;margin:10px 0}.score-text{color:var(--muted)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.stats-grid article{padding:16px}.stats-grid span{display:block;color:var(--muted);font-size:13px}.stats-grid strong{display:block;font-size:22px;margin:7px 0}.stats-grid small{color:var(--muted)}.panel{padding:18px;margin:14px 0}.panel-head,.section-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel h2,.section-title-row h2{margin:3px 0 0}.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:850;cursor:pointer}.btn-primary{background:#fff;color:var(--navy)}.section-title-row .btn-primary,.btn-wide.btn-primary{background:var(--navy);color:#fff}.btn-secondary{background:#edf2f9;color:var(--navy)}.btn-danger{background:#fff0f0;color:var(--red)}.btn-wide{width:100%;display:block;text-align:center;margin-top:10px}.file-label input{display:none}canvas{width:100%;height:auto;display:block}.empty-state{text-align:center;color:var(--muted);padding:28px}.expense-bars{display:grid;gap:12px}.expense-row{display:grid;grid-template-columns:140px 1fr 100px;gap:10px;align-items:center}.bar-track{height:12px;background:#eef2f8;border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#244a9a,#128a43)}.expense-row b{text-align:right}.trip-cards,.maintenance-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.trip-card,.maintenance-card{padding:16px}.card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.card-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.card-meta span{color:var(--muted);font-size:12px}.card-meta b{display:block;color:var(--text);font-size:15px;margin-top:3px}.positive{color:var(--green)!important}.negative{color:var(--red)!important}.toolbar{display:grid;grid-template-columns:1fr 220px;gap:10px;margin-bottom:14px}.toolbar input,.toolbar select,.settings-grid input,.form-grid input,.form-grid select{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;color:var(--text)}.route-ranking{display:grid;gap:10px}.route-row{padding:14px;box-shadow:none}.route-main{display:flex;justify-content:space-between;gap:14px}.route-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;color:var(--muted);font-size:12px}.route-sub b{display:block;color:var(--text);font-size:14px}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.settings-grid label{font-weight:700}.settings-grid label span,.form-grid label span{display:block;margin-bottom:6px}.settings-section-title{grid-column:1/-1;font-weight:900}.toggle-row{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.toggle-row small{display:block;color:var(--muted);font-weight:400}.toggle-row input{width:24px;height:24px}.weekly-total{grid-column:1/-1;display:flex;justify-content:space-between;padding:15px;background:#fff6d9;border-radius:14px}.settings-grid .btn-wide{grid-column:1/-1}.bottom-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{border:0;background:transparent;padding:15px 2px;color:var(--muted);font-size:11px}.bottom-nav button.active{color:var(--green);font-weight:900}dialog{width:min(760px,calc(100% - 24px));border:0;border-radius:22px;padding:0;box-shadow:0 30px 90px #0005}dialog::backdrop{background:#04101faa}dialog form{padding:20px}.dialog-head{display:flex;justify-content:space-between;align-items:center}.icon-button{border:0;background:#edf2f9;border-radius:50%;width:40px;height:40px;font-size:26px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-grid label{font-weight:700}.trip-preview{margin:14px 0;padding:14px;border-radius:14px;background:#eef4ff;line-height:1.7}.trip-actions{display:flex;gap:8px;flex-wrap:wrap}.hidden{display:none!important}.calendar-controls{display:flex;justify-content:center;gap:16px;align-items:center;margin-bottom:14px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.calendar-cell{min-height:110px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}.calendar-cell .day{font-weight:900}.calendar-trip{margin-top:6px;padding:5px;border-radius:8px;background:#eef4ff;font-size:11px}.calendar-head{font-weight:900;text-align:center;color:var(--muted)}.alerts{display:grid;gap:10px;margin-bottom:12px}.alert{padding:12px;border-radius:12px;background:#fff6d9;color:#755300}.maintenance-card .due{margin-top:8px;font-size:13px;color:var(--muted)}
@media(max-width:820px){.dashboard-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.trip-cards,.maintenance-list{grid-template-columns:1fr}.calendar-cell{min-height:90px}}
@media(max-width:620px){.app-shell{padding:12px}.toolbar,.settings-grid,.form-grid{grid-template-columns:1fr}.toggle-row,.settings-section-title,.weekly-total,.settings-grid .btn-wide{grid-column:1}.expense-row{grid-template-columns:105px 1fr 80px}.hero-value{font-size:36px}.bottom-nav button{font-size:9px}.calendar-cell{min-height:75px;padding:5px}.calendar-trip{font-size:9px}}
@media print{.app-header,.bottom-nav,.period-tabs,.btn{display:none!important}.view{display:none!important}#dashboardView{display:block!important}.app-shell{max-width:none;padding:0}.panel,.hero-card,.score-card,.stats-grid article{box-shadow:none}}

.version{font-size:11px;opacity:.65;vertical-align:middle}
.maintenance-actions{display:flex;justify-content:flex-end;margin-top:10px}
.mini-danger{border:0;background:#fff0f0;color:var(--red);border-radius:9px;padding:7px 10px;font-weight:800}
.validation-note{color:var(--red);font-size:13px;margin-top:8px}

.period-control{display:grid;grid-template-columns:46px 1fr 46px;gap:10px;align-items:center;margin-bottom:6px}
.period-control .period-tabs{margin:0}
.period-arrow{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;width:46px;height:46px;font-size:22px;font-weight:900}
.period-arrow:disabled{opacity:.35;cursor:default}
.period-range-label{text-align:center;color:var(--muted);font-weight:800;margin:2px 0 14px}
@media(max-width:620px){.period-control{grid-template-columns:42px 1fr 42px;gap:6px}.period-arrow{width:42px;height:42px}.period-tabs button{padding:9px 11px}}

.financial-breakdown-panel{margin-top:14px}
.financial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.finance-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:none}
.finance-card span{display:block;color:var(--muted);font-size:13px}
.finance-card strong{display:block;font-size:22px;margin:7px 0}
.finance-card small{color:var(--muted)}
.finance-card.income{background:#eef8f2;border-color:#cfe8d8}
.finance-card.expense{background:#fff7f7;border-color:#f1d9d9}
.finance-card.result{font-weight:800}
.finance-card.operating{background:#eef4ff;border-color:#cedcf5}
.finance-card.after-mandatory{background:#fff8df;border-color:#eadcae}
.finance-card.net{background:#eaf7ee;border-color:#c7e5d0}
.finance-card.info{background:#f7f9fc}
.equation-card{margin-top:16px;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fbfcfe}
.equation-card>div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.equation-card>div:last-child{border-bottom:0}
.equation-minus b{color:var(--red)}
.equation-result{font-weight:800;background:#f5f8fd;margin:0 -8px;padding-left:8px!important;padding-right:8px!important}
.equation-final{font-weight:900;font-size:18px;background:#eaf7ee;margin:0 -8px -6px;padding:14px 8px!important;border-radius:10px}
@media(max-width:820px){.financial-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.financial-grid{grid-template-columns:1fr}}

.actual-expense-note{grid-column:1/-1;background:#eaf7ee;border:1px solid #c7e5d0;border-radius:12px;padding:12px;color:#245d38}
.legacy-estimate{opacity:.72}
.expense-list{display:grid;gap:10px}
.expense-entry{display:grid;grid-template-columns:110px 1fr 140px 50px;gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff}
.expense-entry .expense-kind{font-weight:900}
.expense-entry .expense-meta{color:var(--muted);font-size:13px}
.expense-entry .expense-amount{text-align:right;font-size:18px;font-weight:900}
.expense-entry.fuel{border-left:5px solid #244a9a}
.expense-entry.def{border-left:5px solid #128a43}
.expense-edit{border:0;background:#edf2f9;color:var(--navy);border-radius:9px;width:40px;height:40px;font-weight:900}
.expense-week-preview{margin:14px 0;padding:12px;background:#eef4ff;border-radius:12px}
.migrated-badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#fff6d9;color:#755300;font-size:10px;font-weight:800}
.bottom-nav{grid-template-columns:repeat(7,1fr)}
@media(max-width:700px){.expense-entry{grid-template-columns:90px 1fr 95px 42px;gap:7px}.bottom-nav button{font-size:8px}}



#expenseDialog{
  width:min(560px,calc(100% - 28px));
  max-height:92vh;
  overflow:auto;
}
#expenseDialog form{padding:22px}
#expenseDialog .dialog-head{margin-bottom:18px}
.expense-form-fields{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:15px;
}
.expense-form-fields label{
  display:block;
  min-width:0;
  font-weight:750;
}
.expense-form-fields label>span{
  display:block;
  margin-bottom:7px;
  line-height:1.25;
}
.expense-form-fields input,
.expense-form-fields select,
.expense-form-fields textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:52px;
  margin:0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font:inherit;
  appearance:auto;
  -webkit-appearance:auto;
}
.expense-form-fields textarea{
  min-height:76px;
  resize:vertical;
}
#expenseDate{
  -webkit-min-logical-width:0;
}
#expenseDialog .expense-week-preview{
  margin:16px 0 12px;
  padding:13px 14px;
  font-size:15px;
  line-height:1.35;
}
#expenseDialog .btn-wide{
  min-height:54px;
}
@media(max-width:620px){
  #expenseDialog{
    width:calc(100% - 18px);
    max-height:94vh;
  }
  #expenseDialog form{padding:17px}
}

#exportExcel{background:var(--green);color:#fff}

.header-actions{display:flex;gap:10px;align-items:center}
.btn-header-secondary{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
.expense-page-actions{display:flex;gap:10px;flex-wrap:wrap}
#ocrDialog{width:min(760px,calc(100% - 24px));max-height:92vh;overflow:auto}
#ocrDialog form{padding:22px}
.ocr-file-label input{display:none}
.ocr-upload-box{padding:16px;border:1px dashed #b8c4d8;border-radius:14px;background:#f7f9fd;text-align:center}
.ocr-upload-box p{margin:10px 0 0;color:var(--muted);font-size:13px}
.ocr-progress{margin:16px 0}
.ocr-progress-track{height:10px;background:#e7ecf4;border-radius:999px;overflow:hidden}
.ocr-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#244a9a,#128a43);transition:width .2s}
#ocrProgressText{margin-top:8px;color:var(--muted);font-size:13px}
.ocr-results{display:grid;gap:10px;margin-top:15px}
.ocr-result-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.ocr-result-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ocr-result-grid{display:grid;grid-template-columns:120px 1fr 140px;gap:8px}
.ocr-result-grid input,.ocr-result-grid select{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px}
.ocr-warning{padding:10px;border-radius:10px;background:#fff6d9;color:#755300;font-size:13px;margin-top:8px}
.ocr-duplicate{opacity:.55}
@media(max-width:700px){
  .header-actions{gap:6px}
  .header-actions .btn{padding:10px 12px}
  .ocr-result-grid{grid-template-columns:1fr}
  .expense-page-actions{width:100%}
  .expense-page-actions .btn{flex:1}
}

/* Compact, readable calculation preview used in every trip mode. */
#tripPreview.trip-preview{display:block!important;padding:0!important;border:0!important;background:transparent!important}
.trip-preview-card{overflow:hidden;border:1px solid var(--app-border);border-radius:16px;background:#fff}
.trip-preview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:18px 20px;background:#f8fafc;border-bottom:1px solid var(--app-border)}
.trip-preview-head span,.trip-preview-metric span{display:block;color:var(--app-muted);font-size:12px;font-weight:750;line-height:1.35}
.trip-preview-head strong{font-size:28px;line-height:1.05;text-align:right;white-space:nowrap}
.trip-preview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.trip-preview-metric{min-width:0;padding:15px 18px;border-right:1px solid var(--app-border);border-bottom:1px solid var(--app-border)}
.trip-preview-metric:nth-child(4n){border-right:0}
.trip-preview-metric b{display:block;margin-top:7px;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.trip-preview-note{margin:0!important;padding:13px 18px!important;color:var(--app-muted);font-size:12px;line-height:1.5;background:#fbfdff}
@media(max-width:900px){.trip-preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.trip-preview-metric:nth-child(4n){border-right:1px solid var(--app-border)}.trip-preview-metric:nth-child(2n){border-right:0}}
@media(max-width:520px){.trip-preview-head{align-items:flex-start;flex-direction:column}.trip-preview-head strong{text-align:left}.trip-preview-metrics{grid-template-columns:1fr}.trip-preview-metric,.trip-preview-metric:nth-child(4n),.trip-preview-metric:nth-child(2n){border-right:0}}

.expense-ocr-button{
  margin:0 0 16px;
  background:#edf2f9;
  color:var(--navy);
  border:1px solid #d9e2f0;
}
#expenseDialog .expense-form-fields{
  width:100%;
}
#expenseDialog .expense-form-fields label{
  width:100%;
  overflow:visible;
}

@media(max-width:700px){
  #expenseDialog{
    top:env(safe-area-inset-top);
    margin-top:8px;
    max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  }
  #expenseDialog form{
    padding:16px;
  }
  #expenseDialog .dialog-head{
    gap:10px;
    margin-bottom:12px;
  }
  #expenseDialog .dialog-head h2{
    font-size:26px;
  }
}

.recovery-note{
  grid-column:1/-1;
  padding:12px 14px;
  margin-bottom:8px;
  border:1px solid #c7e5d0;
  border-radius:12px;
  background:#eaf7ee;
  color:#245d38;
}

.fleet-filter-bar{display:flex;gap:6px;align-items:center;margin-left:auto}
.fleet-filter-bar select{max-width:150px;min-height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:7px 9px}
.fleet-help{color:var(--muted);margin-top:-8px}
.privacy-toggle{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}
.privacy-toggle input{width:22px;height:22px;flex:0 0 auto;margin-top:2px}
.privacy-toggle span{display:grid;gap:6px}.privacy-toggle small{color:var(--muted);line-height:1.45}
.profile-inline-action{display:flex;align-items:end}.profile-inline-action .btn{width:100%}
.fleet-management-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fleet-manager{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fbfcfe}
.fleet-manager-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.fleet-manager-head h3{margin:0}
.fleet-manager-head button{border:0;border-radius:8px;padding:8px 10px;background:var(--navy);color:#fff;font-weight:750}
.entity-list{display:grid;gap:8px}
.entity-card{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}
.entity-card strong,.entity-card small{display:block}
.entity-card small{color:var(--muted);margin-top:2px}
.entity-card button{border:0;border-radius:8px;padding:7px 9px;background:#edf2f9;color:var(--navy);font-weight:750}
.trip-entity-line{color:var(--muted);font-size:12px;margin-top:5px}
@media(max-width:1000px){.fleet-filter-bar{order:3;width:100%;overflow:auto}.app-header{flex-wrap:wrap}.fleet-filter-bar select{min-width:145px}}
@media(max-width:700px){.fleet-management-grid{grid-template-columns:1fr}.fleet-filter-bar{padding-bottom:2px}.fleet-filter-bar select{min-width:130px}}

/* v7.1 — load workflow, route estimate, plan/actual and workspace access */
.trip-page-actions,.mileage-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mileage-actions{margin:14px 0;color:var(--muted);font-size:13px}
.mileage-actions span{flex:1;min-width:220px}
#loadImportDialog{width:min(840px,calc(100% - 24px));max-height:94vh;overflow:auto}
#loadImportDialog form{padding:22px}
.dialog-help{color:var(--muted);line-height:1.5}
#dispatcherText{width:100%;min-height:150px;padding:14px;border:1px solid var(--line);border-radius:13px;resize:vertical}
.load-review{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.review-banner{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;padding:13px 14px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#1e3a8a}
.review-banner span{font-size:13px}
.load-decision{margin:16px 0;padding:18px;border:1px solid var(--line);border-radius:15px;background:#f8fafc}
.load-decision.good{border-color:#bbf7d0;background:#f0fdf4}.load-decision.warn{border-color:#fde68a;background:#fffbeb}.load-decision.bad{border-color:#fecaca;background:#fef2f2}
.load-decision>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}.load-decision>div:first-child span{font-size:11px;font-weight:850;letter-spacing:.12em;color:var(--muted)}
.load-decision>div:first-child strong{font-size:22px}.load-decision.good>div:first-child strong{color:var(--green)}.load-decision.warn>div:first-child strong{color:var(--amber)}.load-decision.bad>div:first-child strong{color:var(--red)}
.load-decision-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}.load-decision-grid span{color:var(--muted);font-size:12px}.load-decision-grid b{display:block;margin-top:5px;color:var(--text);font-size:16px}
.osm-attribution{font-size:11px;color:var(--muted);line-height:1.4}
.preview-decision{display:flex!important;justify-content:space-between;gap:12px;margin:-4px -4px 10px;padding:12px;border-radius:10px}.preview-decision.good{background:#dcfce7;color:#166534}.preview-decision.warn{background:#fef3c7;color:#92400e}.preview-decision.bad{background:#fee2e2;color:#991b1b}.preview-decision.neutral{background:#f1f5f9;color:#475569}
.trip-status{display:inline-flex!important;width:max-content;padding:4px 8px;border-radius:999px;background:#f1f5f9;color:#475569!important;font-size:10px!important;font-weight:850}.trip-status.status-paid,.trip-status.status-delivered{background:#dcfce7;color:#166534!important}.trip-status.status-declined,.trip-status.status-cancelled{background:#fee2e2;color:#991b1b!important}.trip-status.status-booked,.trip-status.status-toPickup,.trip-status.status-loaded{background:#dbeafe;color:#1e40af!important}
.plan-actual-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.plan-actual-summary article{padding:16px;border:1px solid var(--line);border-radius:13px;background:#f8fafc}.plan-actual-summary span,.plan-actual-summary small{display:block;color:var(--muted)}.plan-actual-summary strong{display:block;margin:7px 0;font-size:18px}
.plan-actual-list{display:grid;gap:8px;margin-top:12px}.plan-actual-list button{display:flex;justify-content:space-between;gap:14px;width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left}.plan-actual-list span:last-child{text-align:right}.plan-actual-list b,.plan-actual-list small{display:block}.plan-actual-list small{margin-top:4px;color:var(--muted)}
.cloud-account-row label span{display:block;color:var(--muted);font-size:12px}.cloud-account-row select{min-width:210px;margin-top:5px;padding:9px;border:1px solid var(--line);border-radius:10px;background:#fff}
.member-add-row{display:grid;grid-template-columns:1fr 180px auto;gap:9px;margin:14px 0}.member-add-row input,.member-add-row select{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.member-message{min-height:20px;margin-bottom:8px;color:var(--muted);font-size:13px}.member-message.error{color:var(--red)}.member-message.success{color:var(--green)}
.members-list{display:grid;gap:8px}.member-card{display:grid;grid-template-columns:1fr 180px auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:11px;background:#fff}.member-card strong,.member-card small{display:block}.member-card small{margin-top:3px;color:var(--muted)}.member-card select{padding:9px;border:1px solid var(--line);border-radius:9px;background:#fff}.member-remove{padding:9px 10px;border:0;border-radius:9px;background:var(--red-soft);color:var(--red);font-weight:750}
body[data-workspace-role="viewer"] #quickAddTop,body[data-workspace-role="viewer"] #quickExpenseTop,body[data-workspace-role="viewer"] #quickImportLoadTop,body[data-workspace-role="viewer"] #quickAdd,body[data-workspace-role="viewer"] #addExpense,body[data-workspace-role="viewer"] #importExpenseScreens,body[data-workspace-role="viewer"] #addMaintenance,body[data-workspace-role="viewer"] [data-add-entity],body[data-workspace-role="viewer"] #saveLoadSettings,body[data-workspace-role="viewer"] #clearAll{display:none!important}
@media(max-width:760px){.load-decision-grid{grid-template-columns:repeat(2,1fr)}.plan-actual-summary{grid-template-columns:1fr}.member-add-row,.member-card{grid-template-columns:1fr}.review-banner{display:block}.review-banner span{display:block;margin-top:5px}.plan-actual-list button{display:block}.plan-actual-list span:last-child{margin-top:9px;text-align:left}}


/* ==========================================================
   v5.0 — MINIMAL COMMERCIAL DESIGN SYSTEM
   Visual-only redesign. Business logic remains unchanged.
   ========================================================== */

:root{
  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-soft:#fafbfc;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line-strong:#d1d5db;
  --navy:#111827;
  --blue:#2563eb;
  --blue-soft:#eff6ff;
  --green:#16a34a;
  --green-soft:#ecfdf3;
  --red:#dc2626;
  --red-soft:#fef2f2;
  --amber:#d97706;
  --amber-soft:#fffbeb;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(17,24,39,.03),0 8px 28px rgba(17,24,39,.045);
  --shadow-hover:0 14px 38px rgba(17,24,39,.08);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.18);
  outline-offset:1px;
}

/* Header */
.app-header{
  position:sticky;
  top:0;
  z-index:40;
  display:grid;
  grid-template-columns:auto minmax(300px,1fr) auto;
  gap:20px;
  align-items:center;
  min-height:78px;
  padding:13px max(22px,calc((100vw - 1440px)/2));
  background:rgba(255,255,255,.92);
  color:var(--text);
  border-bottom:1px solid rgba(229,231,235,.9);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}
.brand-kicker{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}
.app-header h1{
  margin:3px 0 0;
  color:var(--text);
  font-size:21px;
  font-weight:820;
  letter-spacing:-.04em;
}
.version{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:3px 7px;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-size:9px;
  font-weight:800;
  vertical-align:middle;
}
.fleet-filter-bar{
  display:flex;
  justify-content:center;
  gap:7px;
  min-width:0;
  margin:0;
}
.fleet-filter-bar select{
  width:auto;
  max-width:175px;
  min-width:118px;
  min-height:42px;
  padding:9px 32px 9px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background-color:var(--surface-soft);
  color:#374151;
  font-size:12px;
  font-weight:650;
}
.header-actions{gap:8px}
.btn{
  min-height:42px;
  padding:10px 15px;
  border:1px solid transparent;
  border-radius:11px;
  font-weight:760;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--text);
  color:#fff;
  box-shadow:0 4px 12px rgba(17,24,39,.12);
}
.btn-primary:hover{background:#000;box-shadow:0 7px 18px rgba(17,24,39,.16)}
.btn-secondary,.btn-header-secondary{
  border-color:var(--line);
  background:#fff;
  color:var(--text);
}
.btn-secondary:hover,.btn-header-secondary:hover{border-color:var(--line-strong);background:#f9fafb}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:#fecaca}

/* App frame */
.app-shell{
  width:min(1440px,100%);
  min-height:calc(100vh - 78px);
  margin:0 auto;
  padding:28px 24px 118px;
}
.view{animation:viewIn .22s ease}
@keyframes viewIn{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
.section-kicker{
  display:block;
  color:#94a3b8;
  font-size:10px;
  font-weight:820;
  letter-spacing:.16em;
}
.section-title-row,.panel-head{
  align-items:flex-end;
  gap:20px;
}
.section-title-row{
  margin-bottom:20px;
}
.section-title-row h2,.panel-head h2{
  margin:5px 0 0;
  color:var(--text);
  font-size:29px;
  font-weight:820;
  letter-spacing:-.045em;
}

/* Period selector */
.period-control{
  grid-template-columns:42px minmax(0,420px) 42px;
  justify-content:center;
  margin:0 auto 7px;
}
.period-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:4px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#eceff3;
}
.period-tabs button{
  min-height:38px;
  padding:8px 14px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#6b7280;
  font-size:13px;
  font-weight:750;
}
.period-tabs button.active{
  background:#fff;
  color:var(--text);
  box-shadow:0 1px 5px rgba(17,24,39,.08);
}
.period-arrow{
  width:42px;height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
}
.period-range-label{margin-bottom:18px;color:#94a3b8;font-size:12px}

/* Dashboard */
.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,2.15fr) minmax(250px,.85fr);
  gap:14px;
}
.hero-card,.score-card,.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.hero-card{
  position:relative;
  min-height:236px;
  padding:34px 36px;
  overflow:hidden;
}
.hero-card::after{
  content:"";
  position:absolute;
  right:-55px;
  bottom:-90px;
  width:260px;height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.09),transparent 68%);
  pointer-events:none;
}
.hero-label{color:var(--muted);font-size:14px;font-weight:650}
.hero-value{
  margin:19px 0 12px;
  color:var(--text);
  font-size:clamp(54px,7vw,88px);
  font-weight:830;
  line-height:.9;
  letter-spacing:-.075em;
}
.hero-meta{gap:20px;color:#64748b;font-size:13px}
.score-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px;
}
.score-title{color:var(--muted);font-size:13px}
.score-value{
  margin:13px 0 8px;
  color:var(--text);
  font-size:50px;
  font-weight:830;
  letter-spacing:-.06em;
}
.score-text{color:#64748b;font-size:13px}

.panel{
  margin-top:14px;
  padding:24px;
}
.financial-breakdown-panel{margin-top:14px}
.financial-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--line);
}
.finance-card{
  min-height:121px;
  padding:17px 18px;
  border:0;
  border-radius:0;
  background:#fff!important;
}
.finance-card span{font-size:12px}
.finance-card strong{
  margin:9px 0 5px;
  color:var(--text);
  font-size:24px;
  letter-spacing:-.035em;
}
.finance-card small{font-size:11px}
.finance-card.result{background:#fbfdff!important}
.finance-card.net{
  background:var(--text)!important;
  color:#fff;
}
.finance-card.net span,.finance-card.net small{color:#cbd5e1}
.finance-card.net strong{color:#fff}
.finance-card.operating strong,.finance-card.income strong{color:var(--green)}
.finance-card.expense strong{color:#374151}
.equation-card{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  margin-top:14px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
}
.equation-card>div{
  display:flex;
  min-height:82px;
  flex-direction:column;
  justify-content:center;
  padding:13px 15px!important;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.equation-card>div:nth-child(5n){border-right:0}
.equation-card span{color:var(--muted);font-size:11px}
.equation-card b{margin-top:6px;font-size:16px}
.equation-result,.equation-final{
  margin:0!important;
  border-radius:0!important;
  background:#f8fafc!important;
}
.equation-final{background:var(--green-soft)!important}

/* Generic cards and content */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--line);
}
.stats-grid article{
  min-height:126px;
  padding:20px;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.stats-grid article span,.stats-grid article small{color:var(--muted);font-size:12px}
.stats-grid article strong{
  margin:10px 0 7px;
  color:var(--text);
  font-size:27px;
  letter-spacing:-.04em;
}
.toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:10px;
  margin-bottom:14px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.toolbar input,.toolbar select,
form input,form select,form textarea{
  min-height:48px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fafbfc;
  color:var(--text);
}
.toolbar input,.toolbar select{padding:10px 13px}
.toolbar input:focus,.toolbar select:focus,
form input:focus,form select:focus,form textarea:focus{
  border-color:#93b4fb;
  background:#fff;
}

/* Trips */
.trip-cards{display:grid;gap:12px}
.commercial-trip-card{
  position:relative;
  overflow:hidden;
  padding:0;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 2px rgba(17,24,39,.025);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.commercial-trip-card:hover{
  transform:translateY(-2px);
  border-color:#cfd5dd;
  box-shadow:var(--shadow-hover);
}
.trip-profit-rail{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--green);
}
.commercial-trip-card.medium .trip-profit-rail{background:var(--amber)}
.commercial-trip-card.low .trip-profit-rail{background:var(--red)}
.commercial-trip-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:20px;
  align-items:center;
  padding:20px 22px 17px 25px;
}
.commercial-route{
  display:grid;
  grid-template-columns:auto 22px auto;
  align-items:center;
  justify-content:start;
  gap:7px;
}
.trip-date-label{
  grid-column:1/-1;
  color:#94a3b8;
  font-size:11px;
  font-weight:700;
}
.commercial-route strong{font-size:18px;letter-spacing:-.025em}
.route-arrow{color:#94a3b8;font-weight:900}
.commercial-gross{text-align:right}
.commercial-gross span,.commercial-gross small{display:block;color:var(--muted);font-size:11px}
.commercial-gross strong{
  display:block;
  margin:4px 0 3px;
  font-size:25px;
  letter-spacing:-.045em;
}
.commercial-trip-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-left:4px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#f8fafc;
}
.commercial-trip-stats>div{padding:13px 20px;border-right:1px solid var(--line)}
.commercial-trip-stats>div:last-child{border-right:0}
.commercial-trip-stats span,.commercial-trip-stats small{display:block;color:var(--muted);font-size:10px}
.commercial-trip-stats b{display:inline-block;margin:4px 4px 0 0;font-size:16px}
.commercial-trip-footer{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 22px 11px 25px;
  color:#64748b;
  font-size:11px;
}
.commercial-trip-footer span{padding-right:14px;border-right:1px solid var(--line)}
.commercial-trip-footer b{margin-left:auto;color:var(--text)}

/* Expenses */
.expense-page-actions{gap:8px}
.expense-list{gap:9px}
.expense-entry{
  grid-template-columns:115px minmax(0,1fr) 140px 44px;
  gap:14px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  border-radius:13px;
  background:#fff;
}
.expense-entry .expense-amount{font-size:19px}
.expense-edit{
  border:1px solid var(--line);
  background:#f8fafc;
  color:var(--text);
}
.expense-week-preview{background:var(--blue-soft);color:#1e3a8a}

/* Calendar */
.calendar-controls{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.calendar-controls strong{text-align:center;font-size:17px}
.calendar-grid{
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--line);
}
.calendar-head{
  min-height:42px;
  border:0;
  background:#f8fafc;
  color:#64748b;
  font-size:11px;
}
.calendar-cell{
  min-height:112px;
  padding:9px;
  border:0;
  border-radius:0;
  background:#fff;
}
.calendar-day{color:#64748b;font-size:12px}
.calendar-trip{
  padding:6px 7px;
  border:0;
  border-radius:7px;
  background:var(--blue-soft);
  color:#1e40af;
  font-size:10px;
}

/* Analytics, service, fleet */
.route-ranking{display:grid;gap:8px}
.route-row,.maintenance-card,.entity-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}
.route-row{padding:15px 17px}
.maintenance-card{padding:17px}
.maintenance-alerts .alert{
  border:1px solid #fde68a;
  border-radius:12px;
  background:var(--amber-soft);
  color:#92400e;
}
.fleet-help{margin:0 0 17px}
.fleet-management-grid{gap:12px}
.fleet-manager{
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fafbfc;
}
.fleet-manager-head h3{font-size:15px}
.fleet-manager-head button{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--text);
}
.entity-card{padding:11px 12px}
.entity-card button{
  border:1px solid var(--line);
  background:#f8fafc;
  color:var(--text);
}

/* Settings */
.settings-grid,.settings-page form{gap:13px}
.settings-section-title{
  margin-top:21px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.weekly-total{
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
}
.actual-expense-note,.recovery-note{
  border:1px solid #bbf7d0;
  background:var(--green-soft);
  color:#166534;
}

/* Dialogs */
dialog{
  padding:0;
  border:0;
  border-radius:20px;
  box-shadow:0 30px 90px rgba(15,23,42,.24);
}
dialog::backdrop{
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
dialog form{padding:24px}
.dialog-head{margin-bottom:18px}
.dialog-head h2{font-size:27px;letter-spacing:-.04em}
.icon-button{
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fafc;
  color:var(--text);
}
.trip-preview,.expense-week-preview{
  border:1px solid #dbeafe;
  border-radius:12px;
}

/* Bottom navigation */
.bottom-nav{
  position:fixed;
  z-index:50;
  left:50%;
  bottom:max(12px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(7,76px);
  width:auto;
  padding:6px;
  border:1px solid rgba(229,231,235,.92);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 50px rgba(15,23,42,.14);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}
.bottom-nav button{
  display:flex;
  min-height:58px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:6px 4px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#64748b;
  font-size:9px;
  font-weight:720;
}
.bottom-nav button.active{
  background:#f1f5f9;
  color:var(--text);
}
.nav-icon{
  display:block;
  height:20px;
  font-size:18px;
  line-height:20px;
  font-weight:700;
}

/* Responsive tablet/mobile */
@media(max-width:1100px){
  .app-header{
    grid-template-columns:1fr auto;
    padding:12px 18px;
  }
  .fleet-filter-bar{
    grid-column:1/-1;
    order:3;
    justify-content:flex-start;
    width:100%;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .fleet-filter-bar select{flex:0 0 150px;max-width:none}
  .financial-grid{grid-template-columns:repeat(3,1fr)}
  .equation-card{grid-template-columns:repeat(2,1fr)}
  .equation-card>div:nth-child(5n){border-right:1px solid var(--line)}
  .equation-card>div:nth-child(2n){border-right:0}
}
@media(max-width:820px){
  .app-shell{padding:22px 16px 112px}
  .dashboard-grid{grid-template-columns:1fr}
  .score-card{min-height:145px}
  .financial-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .bottom-nav{grid-template-columns:repeat(7,64px)}
  .hero-card{min-height:210px;padding:28px}
}
@media(max-width:620px){
  .app-header{min-height:70px}
  .brand-kicker{display:none}
  .app-header h1{font-size:18px}
  .header-actions .btn{padding:9px 11px;font-size:12px}
  .app-shell{padding:17px 11px 104px}
  .section-title-row{align-items:flex-start;flex-direction:column}
  .section-title-row h2,.panel-head h2{font-size:25px}
  .panel{padding:17px;border-radius:15px}
  .hero-card{min-height:184px;padding:23px}
  .hero-value{font-size:56px}
  .period-control{grid-template-columns:38px 1fr 38px}
  .period-arrow{width:38px;height:38px}
  .period-tabs button{padding:7px 8px;font-size:11px}
  .financial-grid{grid-template-columns:1fr 1fr}
  .finance-card{min-height:112px;padding:14px}
  .finance-card strong{font-size:20px}
  .equation-card{grid-template-columns:1fr}
  .equation-card>div{border-right:0!important}
  .toolbar{grid-template-columns:1fr}
  .commercial-trip-head{grid-template-columns:1fr;padding:18px 17px 15px 21px}
  .commercial-gross{text-align:left}
  .commercial-trip-stats{grid-template-columns:1fr 1fr 1fr}
  .commercial-trip-stats>div{padding:11px 9px}
  .commercial-trip-footer{padding:10px 15px 10px 21px;gap:8px}
  .commercial-trip-footer span:nth-child(3){display:none}
  .bottom-nav{
    bottom:0;
    width:100%;
    grid-template-columns:repeat(7,1fr);
    padding:4px 4px max(4px,env(safe-area-inset-bottom));
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:16px 16px 0 0;
  }
  .bottom-nav button{min-height:54px;font-size:8px}
  .nav-icon{font-size:17px}
  .expense-entry{grid-template-columns:82px 1fr 88px 40px}
}
@media(max-width:430px){
  .header-actions .btn-header-secondary{display:none}
  .financial-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .commercial-trip-stats{grid-template-columns:1fr 1fr}
  .commercial-trip-stats>div:nth-child(3){grid-column:1/-1}
  .bottom-nav button span:last-child{display:none}
  .bottom-nav button{min-height:48px}
}
@media print{
  .app-header,.bottom-nav,.period-control,.btn{display:none!important}
  body,.app-shell{background:#fff}
  .panel,.hero-card,.score-card{box-shadow:none}
}

/* v5.1 — settings architecture cleanup */
.clean-settings-panel{
  padding:24px;
}
.clean-settings-intro{
  max-width:900px;
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.55;
}
.settings-location-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--line);
}
.settings-location-grid article{
  min-height:112px;
  padding:17px;
  background:#fff;
}
.settings-location-grid span{
  display:block;
  margin-bottom:9px;
  color:var(--muted);
  font-size:12px;
}
.settings-location-grid strong{
  display:block;
  font-size:14px;
  line-height:1.45;
}
.migration-status{
  margin-top:16px;
  padding:13px 15px;
  border:1px solid #bbf7d0;
  border-radius:12px;
  background:#ecfdf3;
  color:#166534;
  line-height:1.45;
}
@media(max-width:900px){
  .settings-location-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .settings-location-grid{grid-template-columns:1fr}
}

/* v5.2 — IFTA and variable Tolls */
.section-description{margin:6px 0 0;color:var(--muted);font-size:14px}
.expense-summary-grid{grid-template-columns:repeat(4,1fr)}
.expense-category-filters{display:flex;gap:5px;padding:4px;border:1px solid var(--line);border-radius:11px;background:#f3f4f6}
.expense-category-filters button{border:0;border-radius:8px;padding:8px 11px;background:transparent;color:var(--muted);font-size:11px;font-weight:750}
.expense-category-filters button.active{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(17,24,39,.08)}
.expense-entry.tolls{border-left-color:#7c3aed}
.expense-category-main{display:block;margin-bottom:14px}.expense-category-main span{display:block;margin-bottom:7px;color:var(--muted);font-size:13px;font-weight:700}
.expense-category-main select{width:100%;min-height:50px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fafbfc}

.expense-amount.positive{color:var(--green)!important}
@media(max-width:1050px){.expense-summary-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.expense-summary-grid{grid-template-columns:1fr 1fr}.expense-journal-head{align-items:flex-start;flex-direction:column}.expense-category-filters{width:100%;overflow:auto}}
@media(max-width:430px){.expense-summary-grid{grid-template-columns:1fr}}


/* ================================================================
   OWNER PROFIT PRO v6.0 — PRODUCTION DESIGN SYSTEM
   ================================================================ */
:root{
  --app-bg:#f4f6f8;
  --app-surface:#ffffff;
  --app-surface-2:#f8fafc;
  --app-text:#0f172a;
  --app-muted:#64748b;
  --app-border:#e2e8f0;
  --app-accent:#1d4ed8;
  --app-accent-soft:#eff6ff;
  --app-success:#15803d;
  --app-danger:#dc2626;
  --app-warning:#b45309;
  --app-radius:16px;
  --app-shadow:0 1px 2px rgba(15,23,42,.03),0 10px 32px rgba(15,23,42,.055);
}
body{background:var(--app-bg);color:var(--app-text)}
.app-header{
  min-height:74px;
  border-bottom:1px solid rgba(226,232,240,.92);
  background:rgba(255,255,255,.94);
}
.app-header h1{font-size:22px;letter-spacing:-.045em}
.version{background:#eef2ff;color:#3730a3}
.app-shell{max-width:1480px}
.view>.section-title-row:first-child,
.view>.panel-head:first-child{margin-top:2px}
.section-title-row h2,.panel-head h2{font-size:30px;line-height:1.1}
.section-description{max-width:760px;line-height:1.55}
.panel,.hero-card,.score-card,.commercial-trip-card,.maintenance-card,.fleet-manager{
  border-color:var(--app-border);
  box-shadow:var(--app-shadow);
}
.panel{padding:26px}
.hero-card{
  min-height:250px;
  background:linear-gradient(145deg,#fff 0%,#f8fbff 100%);
}
.hero-value{font-size:clamp(58px,7vw,92px)}
.finance-card,.stats-grid article{transition:transform .16s ease,box-shadow .16s ease}
.finance-card:hover,.stats-grid article:hover{transform:translateY(-1px)}
.btn{letter-spacing:-.01em}
.btn-primary{background:#0f172a}
.btn-primary:hover{background:#1e293b}
.btn-secondary,.btn-header-secondary{background:#fff}
.toolbar{box-shadow:0 1px 3px rgba(15,23,42,.025)}
.commercial-trip-card{cursor:pointer}
.commercial-trip-footer b{color:var(--app-accent)}
.expense-entry{box-shadow:0 1px 2px rgba(15,23,42,.025)}
.expense-entry.tolls{border-left-color:#7c3aed}
.calendar-cell{transition:background .14s ease}
.calendar-cell:hover{background:#f8fafc}
.calendar-trip{background:#eef2ff;color:#3730a3}
.route-row{transition:border-color .15s ease,transform .15s ease}
.route-row:hover{border-color:#cbd5e1;transform:translateY(-1px)}
.settings-location-grid article{background:#fff}
.dialog-head{position:sticky;top:0;z-index:2;background:#fff;padding-top:2px}
dialog form{max-height:min(88vh,900px);overflow:auto;overscroll-behavior:contain;scroll-padding-bottom:96px}
body:has(dialog[open]) .bottom-nav{visibility:hidden}
.empty-state{
  padding:44px 20px;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:#fafbfc;
  color:#64748b;
  text-align:center;
}
.bottom-nav button{transition:background .15s ease,color .15s ease,transform .15s ease}
.bottom-nav button:hover{transform:translateY(-1px)}
.bottom-nav button.active{background:#eef2ff;color:#1e3a8a}
.ocr-result-card{border:1px solid var(--app-border);border-radius:14px;background:#fff}
.ocr-duplicate{border-color:#fecaca;background:#fff7f7}
@media(max-width:820px){
  .app-header{padding-left:14px;padding-right:14px}
  .panel{padding:18px}
  .section-title-row h2,.panel-head h2{font-size:26px}
}
@media(max-width:620px){
  .app-header h1{font-size:17px}
  .hero-card{min-height:190px}
  .hero-value{font-size:52px}
  .section-title-row{gap:12px}
}


/* v6.0.3 — исправление карточки рейса на iPad/Safari */
#tripDialog{
  width:min(920px,calc(100% - 28px));
}
#tripDialog form{
  padding:24px 28px 28px;
  overflow-x:hidden;
}
#tripDialog .form-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:16px;
  row-gap:14px;
}
#tripDialog .form-grid label{
  min-width:0;
  width:100%;
}
#tripDialog .form-grid input,
#tripDialog .form-grid select{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:54px;
  box-sizing:border-box;
  font-size:16px;
  line-height:1.2;
}
#tripDialog .form-grid input[type="date"]{
  position:static;
  inset:auto;
  opacity:1;
  appearance:auto;
  -webkit-appearance:auto;
  padding:12px 14px;
  overflow:hidden;
}
#tripDialog .form-grid input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
  min-width:0;
}
#tripDialog .form-grid input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:auto;
}
@media(max-width:720px){
  #tripDialog form{padding:18px}
  #tripDialog .form-grid{grid-template-columns:1fr}
}


/* ================================================================
   v6.0.4 — DATE CONTROL + DRIVER FINANCIAL LAYOUT
   ================================================================ */

/* Контейнер нативной даты рейса. */
#tripDialog .trip-date-field{
  min-width:0;
}
#tripDialog .form-grid{
  column-gap:18px;
  row-gap:18px;
}
#tripDialog .form-grid label>span{
  margin-bottom:8px;
}

/* Зарплата водителя вынесена из основной сетки. */
.driver-summary-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:78px;
  margin:0 0 12px;
  padding:16px 20px;
  border:1px solid #fed7aa;
  border-radius:14px;
  background:linear-gradient(135deg,#fffaf2,#fff7ed);
}
.driver-summary-label{
  min-width:0;
}
.driver-summary-label span{
  display:block;
  color:#9a3412;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.driver-summary-label small{
  display:block;
  margin-top:5px;
  color:#78716c;
  font-size:12px;
}
.driver-summary-card strong{
  flex:0 0 auto;
  color:#c2410c;
  font-size:28px;
  letter-spacing:-.035em;
}

/* Основная финансовая сетка больше не меняет геометрию при включении водителя. */
.financial-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* Компактное и аккуратное превью нового рейса. */
#tripPreview.trip-preview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--app-border,#e2e8f0);
  border-radius:12px;
  background:var(--app-border,#e2e8f0);
  line-height:1.35;
}
#tripPreview>div{
  min-width:0;
  padding:12px 14px;
  background:#f8fafc;
}
#tripPreview span{
  display:block;
  color:#64748b;
  font-size:11px;
}
#tripPreview b{
  display:block;
  margin-top:4px;
  color:#0f172a;
  font-size:15px;
}
#tripPreview p{
  grid-column:1/-1;
  margin:0;
  padding:10px 14px;
  background:#eff6ff;
  color:#475569;
  font-size:11px;
}

@media(max-width:900px){
  .financial-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #tripPreview.trip-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .driver-summary-card{align-items:flex-start;flex-direction:column;gap:8px}
  .driver-summary-card strong{font-size:25px}
  .financial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .financial-grid{grid-template-columns:1fr}
  #tripPreview.trip-preview{grid-template-columns:1fr}
}

/* ================================================================
   v7.0 — AUTHENTICATION + CLOUD SYNC
   ================================================================ */

.auth-gate{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  min-height:100dvh;
  padding:24px;
  background:
    radial-gradient(circle at 15% 10%,rgba(44,104,255,.12),transparent 32%),
    linear-gradient(160deg,#f7faff 0%,#eef3fa 100%);
}
.auth-gate.hidden{display:none}
.auth-card{
  width:min(440px,100%);
  padding:34px;
  border:1px solid rgba(20,38,80,.1);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 70px rgba(20,38,80,.16);
}
.auth-brand-mark{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin-bottom:20px;
  border-radius:16px;
  background:#142650;
  color:#fff;
  font-size:18px;
  font-weight:900;
  letter-spacing:.04em;
}
.auth-card h2{margin:6px 0 8px;font-size:30px;letter-spacing:-.035em}
.auth-description{margin:0 0 24px;color:#64748b;line-height:1.55}
.auth-form{display:grid;gap:14px}
.auth-form label{display:grid;gap:7px;color:#334155;font-size:14px;font-weight:700}
.auth-form input{
  width:100%;
  min-height:54px;
  padding:12px 14px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font:inherit;
  font-size:16px;
}
.auth-form input:focus{outline:3px solid rgba(37,99,235,.16);border-color:#2563eb}
.auth-link-button{
  justify-self:center;
  padding:6px 10px;
  border:0;
  background:transparent;
  color:#2563eb;
  font:inherit;
  font-size:14px;
  font-weight:750;
  cursor:pointer;
}
.auth-link-button:hover{text-decoration:underline}
.auth-loading{display:flex;align-items:center;gap:12px;padding:18px 0;color:#334155}
.auth-spinner{
  width:22px;
  height:22px;
  border:3px solid #dbe5f2;
  border-top-color:#2563eb;
  border-radius:50%;
  animation:auth-spin .8s linear infinite;
}
@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-message{
  margin:16px 0 0;
  padding:12px 14px;
  border-radius:11px;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:14px;
  line-height:1.45;
}
.auth-message.error{background:#fff1f2;color:#9f1239}
.auth-message.success{background:#ecfdf5;color:#166534}
.auth-success-screen{text-align:center}
.auth-success-screen.hidden{display:none}
.auth-success-icon{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  margin:4px auto 18px;
  border-radius:22px;
  background:#dcfce7;
  color:#166534;
  font-size:34px;
  font-weight:900;
}
.auth-success-screen h3{margin:0 0 10px;color:#0f172a;font-size:28px;letter-spacing:-.03em}
.auth-success-screen p{margin:0 0 22px;color:#64748b;font-size:16px;line-height:1.55}
.auth-card.signup-success-mode>.auth-brand-mark,
.auth-card.signup-success-mode>.brand-kicker,
.auth-card.signup-success-mode>#authTitle,
.auth-card.signup-success-mode>#authDescription{display:none}

.onboarding-gate{
  position:fixed;
  inset:0;
  z-index:10001;
  overflow:auto;
  padding:24px;
  background:
    radial-gradient(circle at 88% 8%,rgba(37,99,235,.14),transparent 30%),
    linear-gradient(160deg,#f7faff 0%,#edf3fb 100%);
}
.onboarding-gate.hidden{display:none}
.onboarding-card{
  width:min(660px,100%);
  margin:clamp(12px,5vh,54px) auto;
  padding:32px;
  border:1px solid rgba(20,38,80,.1);
  border-radius:26px;
  background:#fff;
  box-shadow:0 24px 70px rgba(20,38,80,.16);
}
.onboarding-brand-row{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.onboarding-brand-row .auth-brand-mark{flex:0 0 auto;margin:0}
.onboarding-brand-row span{display:block;margin-bottom:3px;color:#64748b;font-size:12px;font-weight:850;letter-spacing:.1em}
.onboarding-brand-row strong{display:block;color:#0f172a;font-size:19px}
.onboarding-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:30px}
.onboarding-progress span{height:6px;border-radius:99px;background:#dbe4f0;transition:background .2s ease}
.onboarding-progress span.active{background:#244a9a}
.onboarding-step{display:none}
.onboarding-step.active{display:block}
.onboarding-step h2{margin:7px 0 8px;color:#0f172a;font-size:clamp(27px,5vw,36px);letter-spacing:-.04em;line-height:1.08}
.onboarding-step>p{margin:0 0 22px;color:#64748b;font-size:16px;line-height:1.5}
.onboarding-choice-list{display:grid;gap:12px}
.onboarding-choice-list label{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:13px;
  min-height:78px;
  padding:16px;
  border:1.5px solid #dbe3ee;
  border-radius:16px;
  background:#fff;
  cursor:pointer;
}
.onboarding-choice-list label:has(input:checked){border-color:#244a9a;background:#f3f7ff;box-shadow:0 0 0 3px rgba(36,74,154,.09)}
.onboarding-choice-list input{width:20px;height:20px;margin:2px 0 0;accent-color:#244a9a}
.onboarding-choice-list span{display:grid;gap:5px}
.onboarding-choice-list strong{color:#0f172a;font-size:16px}
.onboarding-choice-list small{color:#64748b;font-size:14px;line-height:1.35}
.onboarding-fields,.onboarding-owner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.onboarding-fields>label,.onboarding-owner-grid>label{display:grid;gap:7px;color:#334155;font-size:14px;font-weight:750}
.onboarding-fields label>span small{color:#94a3b8;font-weight:600}
.onboarding-fields input,.onboarding-fields select{
  width:100%;
  min-height:54px;
  padding:11px 13px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font:inherit;
  font-size:16px;
}
.onboarding-fields input:focus,.onboarding-fields select:focus{outline:3px solid rgba(37,99,235,.14);border-color:#2563eb}
.onboarding-owner-grid{grid-column:1/-1}
.onboarding-note{margin:18px 0 0!important;padding:13px 15px;border-radius:12px;background:#eff6ff;color:#1e3a8a!important;font-size:14px!important}
.onboarding-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:26px}
.onboarding-actions .btn{min-height:50px}
.onboarding-actions .btn-primary{min-width:180px}
body.onboarding-active .app-header,
body.onboarding-active .app-shell,
body.onboarding-active .bottom-nav{visibility:hidden}

.cloud-status{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.cloud-status.saved{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
.cloud-status.saving{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.cloud-status.offline{border-color:#fed7aa;background:#fff7ed;color:#9a3412}
.cloud-status.error{border-color:#fecdd3;background:#fff1f2;color:#9f1239}
.cloud-account-panel{margin-bottom:20px}
.cloud-account-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.cloud-account-row>div{
  min-width:0;
  padding:15px 16px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}
.cloud-account-row span{display:block;margin-bottom:5px;color:#64748b;font-size:12px;font-weight:700}
.cloud-account-row strong{display:block;overflow:hidden;color:#0f172a;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.cloud-account-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.cloud-account-actions .btn{min-height:44px}
.account-delete-link{margin:10px 0 0;padding-left:0;color:#b91c1c}
.delete-account-confirm{display:grid;gap:8px;color:#334155;font-weight:700}
.delete-account-confirm input{width:100%;min-height:52px;padding:12px 14px;border:1px solid #cbd5e1;border-radius:12px;font:inherit}
.delete-account-confirm input:focus{outline:3px solid rgba(220,38,38,.12);border-color:#dc2626}
body.cloud-booting .app-header,
body.cloud-booting .app-shell,
body.cloud-booting .bottom-nav{visibility:hidden}

/* v7.8 — private owner dashboard */
.app-admin-panel{border-color:#c7d2fe;background:linear-gradient(180deg,#f8faff,#fff 180px)}
.admin-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 16px}
.admin-summary-grid article{padding:14px;border:1px solid #dbe4f0;border-radius:14px;background:#fff}
.admin-summary-grid span{display:block;color:#64748b;font-size:12px;font-weight:750}
.admin-summary-grid strong{display:block;margin-top:5px;color:#0f172a;font-size:25px}
.admin-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:12px;align-items:center;margin-bottom:12px}
.admin-toolbar input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.admin-users-list{display:grid;gap:10px}
.admin-user-card{display:grid;grid-template-columns:1fr auto;gap:10px 16px;padding:15px;border:1px solid #dbe4f0;border-radius:16px;background:#fff}
.admin-user-card.blocked{border-color:#fecaca;background:#fff8f8}
.admin-user-main{display:flex;gap:9px;align-items:center;flex-wrap:wrap;min-width:0}
.admin-user-main strong{overflow-wrap:anywhere}
.admin-user-state{padding:4px 8px;border-radius:99px;font-size:11px;font-weight:850}
.admin-user-state.confirmed{background:#dcfce7;color:#166534}
.admin-user-state.pending{background:#fef3c7;color:#92400e}
.admin-user-meta{grid-column:1;display:flex;gap:6px 14px;flex-wrap:wrap;color:#64748b;font-size:12px}
.admin-user-meta b{color:#334155}
.admin-block-reason{grid-column:1;margin:0;color:#991b1b;font-size:13px}
.admin-block-toggle{grid-column:2;grid-row:1/4;align-self:center;min-width:145px}

/* v7.9 — owner finance, idle costs and real reserve */
.finance-card.cashflow{background:#eefbf4;border-color:#bbdfc9}
.finance-card.cashflow strong{color:#12633a}
.finance-settings-grid input[readonly]{background:#f1f5f9;color:#475569}
.finance-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.finance-summary>div{padding:13px;border:1px solid #dbe4f0;border-radius:14px;background:#f8fafc}
.finance-summary span,.finance-summary b{display:block}.finance-summary span{color:#64748b;font-size:12px}.finance-summary b{margin-top:5px;color:#0f172a;font-size:18px}
.finance-list{display:grid;gap:10px}
.finance-list-card{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border:1px solid #dbe4f0;border-radius:14px;background:#fff;color:#0f172a;text-align:left}
button.finance-list-card{cursor:pointer}.finance-list-card span{min-width:0}.finance-list-card b,.finance-list-card small{display:block}.finance-list-card small{margin-top:5px;color:#64748b}.finance-list-card em{flex:0 0 auto;padding:5px 8px;border-radius:99px;font-size:11px;font-style:normal;font-weight:850}.finance-list-card .idle-on{background:#dcfce7;color:#166534}.finance-list-card .idle-off{background:#fef3c7;color:#92400e}.finance-list-card.automatic{background:#f8fafc}
.reserve-ledger-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.reserve-ledger-summary article{padding:13px;border:1px solid #dbe4f0;border-radius:14px;background:#f8fafc}.reserve-ledger-summary span,.reserve-ledger-summary strong{display:block}.reserve-ledger-summary span{color:#64748b;font-size:12px}.reserve-ledger-summary strong{margin-top:6px;font-size:19px}.reserve-ledger-summary .reserve-balance{background:#0f172a;color:#fff}.reserve-ledger-summary .reserve-balance span{color:#cbd5e1}

@media(max-width:700px){
  .admin-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-toolbar{grid-template-columns:1fr}
  .admin-user-card{grid-template-columns:1fr}
  .admin-block-toggle{grid-column:1;grid-row:auto;width:100%}
  .finance-summary{grid-template-columns:1fr}
  .reserve-ledger-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reserve-ledger-summary .reserve-balance{grid-column:1/-1}
  .finance-list-card{align-items:flex-start;flex-direction:column}
}

@media(max-width:700px){
  .auth-gate{align-items:end;padding:0}
  .auth-card{width:100%;padding:28px 22px calc(28px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}
  .auth-card h2{font-size:27px}
  .cloud-status{order:0;width:auto;max-width:138px;justify-content:center;overflow:hidden;text-overflow:ellipsis}
  .cloud-account-row{grid-template-columns:1fr}
  .cloud-account-actions{display:grid;grid-template-columns:1fr}
  .onboarding-gate{padding:0;background:#f4f7fb}
  .onboarding-card{min-height:100dvh;margin:0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none}
  .onboarding-fields,.onboarding-owner-grid{grid-template-columns:1fr}
  .onboarding-actions{position:sticky;bottom:0;margin:24px -4px 0;padding:12px 4px 4px;background:linear-gradient(transparent,#fff 18%)}
  .onboarding-actions .btn{flex:1;min-width:0}
}

/* v7.2 — mobile header, unified add flow and invoice OCR */
@media(max-width:1100px){
  .app-header>div:first-child{grid-column:1;grid-row:1;min-width:0}
  .header-actions{grid-column:2;grid-row:1;justify-self:end}
  .fleet-filter-bar{grid-column:1/-1;grid-row:2;order:initial}
}
@media(max-width:430px){
  .app-header{gap:10px 8px;padding:10px 12px}
  .app-header h1{font-size:17px;white-space:nowrap}
  .version{display:block;width:max-content;margin:3px 0 0}
  .header-actions{gap:6px}
  .cloud-status{max-width:104px;padding:6px 8px;font-size:11px}
  .fleet-filter-bar select{flex-basis:132px}
}
.choice-dialog{width:min(620px,calc(100% - 24px))}
.choice-dialog form{padding:22px}
.create-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.create-choice-card{min-height:150px;padding:22px;border:1px solid var(--app-border);border-radius:15px;background:#fff;color:var(--app-text);text-align:left}
.create-choice-card:first-child{background:#eff6ff;border-color:#bfdbfe}
.create-choice-card:nth-child(2){background:#ecfdf5;border-color:#a7f3d0}
.create-choice-card strong,.create-choice-card span{display:block}
.create-choice-card strong{font-size:18px;line-height:1.25}
.create-choice-card span{margin-top:10px;color:var(--app-muted);font-size:14px;line-height:1.45}
.choice-count{display:inline-flex!important;min-width:24px;height:24px;margin-left:6px;padding:0 7px;align-items:center;justify-content:center;border-radius:999px;background:#128a43;color:#fff;font-size:12px;font-style:normal;vertical-align:middle}
.wide-field{grid-column:1/-1}
#tripDialog .form-grid textarea,#loadImportDialog .form-grid textarea{width:100%;border:1px solid var(--app-border);border-radius:12px;background:#fff;padding:12px;color:var(--app-text);font:inherit;resize:vertical}
.load-review-warnings{margin:12px 0;padding:12px 14px;border:1px solid #f6c453;border-radius:12px;background:#fff8df;color:#6f4a00;font-size:13px;line-height:1.5}
.load-review-error{margin:12px 0;padding:12px 14px;border:1px solid #fecaca;border-radius:12px;background:#fff1f2;color:#9f1239;font-size:14px;font-weight:750;line-height:1.45}
.load-review-warnings ul{margin:6px 0 0;padding-left:20px}
.rate-breakdown{margin:12px 0;padding:12px 14px;border-radius:12px;background:#f4f7fb;color:#334155}
.rate-breakdown strong{display:block;margin-bottom:7px}
.rate-breakdown-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.telegram-status-row{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:12px}
.telegram-status-row>div{padding:12px 14px;border:1px solid var(--app-border);border-radius:12px;background:#f8fafc}
.telegram-status-row span{display:block;color:var(--app-muted);font-size:12px}
.telegram-status-row strong{display:block;margin-top:5px}
.telegram-drafts{display:grid;gap:9px;margin-top:12px}
.telegram-draft-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--app-border);border-radius:12px;background:#fff}
.telegram-draft-card strong,.telegram-draft-card span{display:block}
.telegram-draft-card span{margin-top:4px;color:var(--app-muted);font-size:12px}
.telegram-draft-card button{white-space:nowrap}
.trip-route-address{display:block;max-width:420px;color:var(--app-muted);font-size:11px;font-weight:600;line-height:1.35}
.expense-entry.other{border-left-color:#d97706}
.service-ocr-box{margin:14px 0 18px;padding:14px;border:1px solid var(--app-border);border-radius:14px;background:#f8fafc}
.service-ocr-box .btn{margin-top:8px}
.header-actions{margin-left:auto;justify-content:flex-end}
.field-help{display:block;margin-top:6px;color:var(--app-muted);font-size:12px;font-weight:500;line-height:1.35}
#maintenanceDialog .form-grid input[type="date"]{
  display:block;width:100%;min-width:0;min-height:52px;padding:12px 14px;
  border:1px solid var(--app-border);border-radius:12px;background:#fff;color:var(--app-text);
  -webkit-appearance:none;appearance:none;
}
#maintenanceDialog .form-grid input[type="date"]::-webkit-date-and-time-value{text-align:left}
#tripDialog .form-grid{align-items:end}
@media(min-width:721px){#tripDialog .form-grid label>span{display:flex;align-items:flex-end;min-height:2.5em}}
@media(max-width:620px){
  .app-header>div:first-child{max-width:42%}
  .header-actions{width:auto;margin-left:auto;justify-content:flex-end}
  .create-choice-grid{grid-template-columns:1fr}
  .create-choice-card{min-height:0;padding:18px}
}
@media(max-width:430px){
  .header-actions{display:grid;grid-template-columns:auto auto;gap:5px 6px;justify-items:end}
  .header-actions .cloud-status{grid-column:1/-1;justify-self:end}
  .header-actions .btn-header-secondary{display:block!important}
}

@media(min-width:821px) and (orientation:landscape){
  body{padding-right:94px}
  .app-header{right:94px}
  .bottom-nav{
    top:50%;right:10px;bottom:auto;left:auto;
    width:74px;grid-template-columns:1fr;
    transform:translateY(-50%);
  }
  .bottom-nav button{min-height:50px}
}

/* ================================================================
   v8.2 — tablet-safe forms, clean previews and Telegram inbox
   ================================================================ */
.bottom-nav{grid-template-columns:repeat(7,minmax(0,1fr))}
.form-grid>*,.settings-grid>*,.load-decision-grid>*,#tripPreview>*{min-width:0;max-width:100%}
.form-grid input,.form-grid select,.form-grid textarea,
.settings-grid input,.settings-grid select,.settings-grid textarea{
  min-width:0;max-width:100%;width:100%;overflow:hidden;
}
.form-grid label>span,.settings-grid label>span{overflow-wrap:anywhere}
.load-decision-grid b,#tripPreview b,#tripPreview p{overflow-wrap:anywhere;word-break:normal}
.trip-page-actions,.telegram-inbox-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trip-page-actions .choice-count{margin-top:0}
.telegram-inbox-dialog{width:min(820px,calc(100% - 28px))}
.telegram-inbox-dialog form{padding:24px}
.telegram-inbox-actions{justify-content:space-between;margin:12px 0}
.delete-retain-toggle{margin:16px 0;padding:14px;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc}

@media(max-width:1180px){
  #loadImportDialog,#tripDialog{width:min(860px,calc(100% - 28px))}
  dialog .form-grid,.finance-settings-grid{grid-template-columns:1fr}
  #tripDialog .form-grid label>span{min-height:0}
  .load-decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tripPreview.trip-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finance-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
  .telegram-status-row,.load-decision-grid,#tripPreview.trip-preview,.finance-summary{grid-template-columns:1fr}
  .telegram-draft-card{grid-template-columns:1fr}
  .telegram-draft-card>div:last-child{display:flex;gap:8px;flex-wrap:wrap}
  .trip-page-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .trip-page-actions .btn{min-width:0;padding:11px 8px}
}
@media(min-width:821px) and (orientation:landscape){.bottom-nav{grid-template-columns:1fr}}

/* ================================================================
   v8.3 — bottom tablet navigation and proportionate forms
   ================================================================ */
body{padding-right:0!important;padding-bottom:106px}
.app-header{right:auto!important}
@media(min-width:821px) and (orientation:landscape){
  .bottom-nav{
    top:auto;
    right:auto;
    bottom:max(12px,env(safe-area-inset-bottom));
    left:50%;
    width:min(760px,calc(100% - 24px));
    grid-template-columns:repeat(7,minmax(0,1fr));
    transform:translateX(-50%);
  }
}
#settingsView{max-width:980px;margin-inline:auto}
#settingsView>.panel{width:100%;margin:14px auto}
.settings-grid,.finance-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.settings-grid label,.form-grid label{align-self:start;min-width:0}
.settings-grid input,.settings-grid select,.settings-grid textarea,
.form-grid input,.form-grid select,.form-grid textarea{min-height:50px}
.finance-settings-grid input[readonly]{cursor:not-allowed}
.telegram-setup-steps{display:grid;gap:9px;margin:4px 0 14px;padding-left:24px;color:#334155;font-size:14px;line-height:1.45}
.telegram-setup-steps li::marker{color:#1e3a8a;font-weight:850}
.telegram-privacy-note{margin:0 0 16px;padding:12px 14px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#1e3a8a;font-size:13px;line-height:1.45}
.dashboard-grid>*,.hero-card,.hero-meta{min-width:0}
.hero-card{overflow:hidden}
.hero-meta{flex-wrap:wrap;gap:8px 18px}
dialog{max-height:calc(100dvh - 32px);overflow:hidden;margin:auto}
dialog form{overflow:auto;overscroll-behavior:contain}

@media(min-width:701px) and (max-width:1180px){
  dialog .form-grid,#tripDialog .form-grid,#loadImportDialog .form-grid,.finance-settings-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  dialog{width:min(900px,calc(100% - 40px))}
  dialog form{padding:24px;max-height:calc(100dvh - 40px)}
}
@media(max-width:700px){
  body{padding-bottom:82px}
  #settingsView{max-width:none}
  .settings-grid,.finance-settings-grid,dialog .form-grid,#tripDialog .form-grid,#loadImportDialog .form-grid{grid-template-columns:1fr}
  .bottom-nav{bottom:0;width:100%;border-radius:16px 16px 0 0}
}

/* ================================================================
   v8.4 — readable trip cards and native iPad date fields
   ================================================================ */
.commercial-route{
  width:100%;
  grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  justify-content:stretch;
  gap:10px;
}
.commercial-route-stop{min-width:0}
.commercial-route-stop strong,.commercial-route-stop small{display:block;min-width:0;overflow-wrap:anywhere;line-height:1.28}
.commercial-route-stop small{margin-top:5px;color:#64748b;font-size:12px}
.route-arrow{text-align:center}
.commercial-trip-footer{flex-wrap:wrap}
#tripDialog .trip-date-control{
  display:block;
  height:auto;
  min-height:0;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent;
}
#tripDialog .trip-date-control input[type="date"]{
  position:static!important;
  inset:auto!important;
  z-index:auto;
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  padding:12px 14px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:#fff!important;
  opacity:1!important;
  appearance:auto!important;
  -webkit-appearance:auto!important;
  color:var(--text)!important;
}
#tripDialog .trip-date-control input[type="date"]::-webkit-date-and-time-value{visibility:visible!important;text-align:left}
#tripDialog .trip-date-control input[type="date"]::-webkit-calendar-picker-indicator{position:static;width:auto;height:auto;margin-left:auto;opacity:1}
@media(max-width:1180px){
  .trip-cards{grid-template-columns:1fr}
}
@media(max-width:620px){
  .commercial-route{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:6px}
  .commercial-route-stop strong{font-size:16px}
  .commercial-route-stop small{font-size:11px}
}

/* ================================================================
   v8.5 — sequential tablet forms and OCR-clean facility names
   ================================================================ */
.semantic-form-grid{align-items:start!important}
.semantic-form-grid .form-section-heading{
  grid-column:1/-1;
  margin:14px 0 0;
  padding-top:16px;
  border-top:1px solid var(--app-border);
  color:var(--app-text);
  font-size:16px;
  line-height:1.25;
}
.semantic-form-grid .form-section-heading:first-child{margin-top:0;padding-top:0;border-top:0}
.semantic-form-grid .wide-field{grid-column:1/-1}
.semantic-form-grid label{display:flex;min-width:0;flex-direction:column;align-self:start!important}
.semantic-form-grid label>span{display:block!important;min-height:0!important;margin-bottom:7px;line-height:1.3}
.semantic-form-grid input,.semantic-form-grid select,.semantic-form-grid textarea{
  display:block;
  box-sizing:border-box;
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
}
dialog input[type="date"],dialog input[type="time"]{
  min-height:52px;
  text-align:left;
  appearance:auto!important;
  -webkit-appearance:auto!important;
}
dialog input[type="date"]::-webkit-date-and-time-value,
dialog input[type="time"]::-webkit-date-and-time-value{text-align:left!important}
.commercial-route-stop{overflow:hidden}
.commercial-route-stop strong,.commercial-route-stop small{white-space:normal;word-break:normal;overflow-wrap:anywhere}

@media(max-width:1180px){
  #tripDialog,#loadImportDialog{width:min(820px,calc(100% - 32px))}
  dialog .form-grid,#tripDialog .form-grid,#loadImportDialog .form-grid,
  .settings-grid,.finance-settings-grid,.onboarding-fields,.onboarding-owner-grid,
  .expense-form-fields,.member-add-row{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .semantic-form-grid .wide-field,.form-grid .wide-field,
  .settings-section-title,.toggle-row,.weekly-total,.settings-grid .btn-wide{
    grid-column:1!important;
  }
  #tripDialog .form-grid label>span{min-height:0!important}
}

@media(max-width:700px){
  #tripDialog,#loadImportDialog{width:calc(100% - 20px)}
  dialog form{padding:18px}
}

/* ================================================================
   v9.0 — final responsive form system
   ================================================================ */
.auth-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:18px 0 14px;padding:5px;border-radius:14px;background:#eef2f7}
.auth-mode-tabs button{min-height:44px;border:0;border-radius:10px;background:transparent;color:#64748b;font-weight:800}
.auth-mode-tabs button.active{background:#fff;color:#0f172a;box-shadow:0 2px 8px #0f172a18}
.compact-period-control{margin:4px auto 6px;max-width:760px}
.compact-period-control .period-tabs{margin:0}
.car-hauler-fields{padding:16px;border:1px solid var(--app-border);border-radius:16px;background:#f8fafc}
.car-hauler-head,.car-hauler-vehicle-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.car-hauler-vehicle-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.car-hauler-vin-status{min-height:18px;margin:10px 0 0;color:var(--app-muted);font-size:12px;line-height:1.45}
.car-hauler-head small{display:block;margin-top:5px;color:var(--app-muted);font-weight:500}
.car-hauler-settings,.car-hauler-vehicle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.car-hauler-vehicles{display:grid;gap:12px;margin-top:14px}
.car-hauler-vehicle{padding:14px;border:1px solid var(--app-border);border-radius:14px;background:#fff}
.car-hauler-vehicle-grid .wide-field{grid-column:1/-1}
.admin-toolbar{margin:14px 0}.admin-toolbar input{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--app-border);border-radius:12px}
#adminUsersDialog{width:min(900px,calc(100% - 32px))}
.admin-user-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}.admin-user-actions .auth-link-button{color:var(--red)}
.review-car-hauler-summary{display:grid;gap:7px;margin:14px 0;padding:14px 16px;border:1px solid #93c5fd;border-radius:14px;background:#eff6ff;color:#1e3a8a;line-height:1.45}
.review-car-hauler-summary span{overflow-wrap:anywhere}.review-car-hauler-summary small{color:#475569}
.car-hauler-order-details{margin-top:14px;border-top:1px solid var(--app-border);padding-top:12px}
.car-hauler-order-details summary{cursor:pointer;color:#1d4ed8;font-weight:800;line-height:1.4}
.car-hauler-check{display:flex!important;min-height:52px;flex-direction:row!important;align-items:center!important;gap:10px;padding:12px 14px;border:1px solid var(--app-border);border-radius:12px;background:#f8fafc}
.car-hauler-check input{width:20px!important;min-height:20px!important;flex:0 0 20px}.car-hauler-check span{margin:0!important}
.car-hauler-vehicle input,.car-hauler-vehicle select{font-size:16px;line-height:1.25;text-overflow:ellipsis}

dialog .semantic-form-grid,.settings-grid,.finance-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
dialog .semantic-form-grid .wide-field,.settings-grid .wide-field,.finance-settings-grid .wide-field{grid-column:1/-1!important}
dialog input,dialog select,dialog textarea{min-width:0!important;max-width:100%!important;width:100%!important}
dialog input[type="date"],dialog input[type="time"],#tripDialog .trip-date-control input[type="date"]{
  position:static!important;display:block!important;height:54px!important;min-height:54px!important;padding:12px 14px!important;
  border:1px solid var(--app-border)!important;border-radius:12px!important;background:#fff!important;color:var(--app-text)!important;
  appearance:auto!important;-webkit-appearance:auto!important;text-align:left!important;line-height:1.2!important;font-size:16px!important;letter-spacing:0!important;
}
dialog input[type="date"]::-webkit-date-and-time-value,dialog input[type="time"]::-webkit-date-and-time-value{display:block!important;width:100%!important;min-width:0!important;text-align:left!important}
.commercial-route-stop strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.commercial-route-stop small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

@media(min-width:701px) and (max-width:1180px){
  #tripDialog,#loadImportDialog{width:min(940px,calc(100% - 32px))}
  dialog .semantic-form-grid,.settings-grid,.finance-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(min-width:701px) and (max-width:1400px){
  #tripDialog,#loadImportDialog{width:min(860px,calc(100% - 32px))}
  #tripDialog .semantic-form-grid,#loadImportDialog .semantic-form-grid{grid-template-columns:minmax(0,1fr)!important}
  #tripDialog .semantic-form-grid .wide-field,#loadImportDialog .semantic-form-grid .wide-field{grid-column:1!important}
}
@media(max-width:700px){
  dialog .semantic-form-grid,.settings-grid,.finance-settings-grid,.car-hauler-settings,.car-hauler-vehicle-grid{grid-template-columns:minmax(0,1fr)!important}
  dialog .semantic-form-grid .wide-field,.car-hauler-vehicle-grid .wide-field{grid-column:1!important}
  .car-hauler-head{align-items:flex-start;flex-direction:column}.car-hauler-head .btn{width:100%}
}