*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

/* ============ DESIGN TOKENS — LIGHT ============ */
:root{
  --bg:#F6F7F9;          /* subtle off-white canvas so cards separate */
  --surface:#FFFFFF;     /* cards / modals / dropdowns */
  --surface-2:#FAFBFC;
  --text:#0F172A;        /* strong text */
  --gray:#F1F4F8;        /* subtle fill (row/pill hover) */
  --gray2:#DDE3EC;       /* hairline border — slightly more visible */
  --gray3:#94A3B8;       /* faint text / disabled */
  --gray4:#6B7280;       /* muted text — readable */
  --blue:#4F46E5;        /* primary */
  --blue-dark:#4338CA;
  --blue-light:#EEF1FE;  /* tinted fill */
  --green:#059669;       /* accent / positive text */
  --green-solid:#059669; /* solid green button bg (white text) */
  --red:#E11D48;
  --red-solid:#DC2626;   /* solid red button bg (white text) */
  --red-light:#FFF1F3;
  --warning:#DC2626;     /* over-budget */
  --amber:#D97706;       /* caution / below-expected difference */
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --picker-w:268px;      /* shared width: dropdown panel + its narrow trigger button (theme-independent) */
  --ring:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  --shadow:0 1px 2px rgba(15,23,42,0.04),0 6px 20px rgba(15,23,42,0.06);
  --shadow-card:0 1px 2px rgba(15,23,42,0.04),0 1px 1px rgba(15,23,42,0.02); /* quiet card elevation */
  --shadow-lg:0 16px 40px rgba(15,23,42,0.16);
  --header-bg:rgba(255,255,255,0.72);
  color-scheme:light;
}

/* ============ DESIGN TOKENS — DARK ============ */
[data-theme="dark"]{
  --bg:#0B0E14;
  --surface:#141A23;
  --surface-2:#10151D;
  --text:#E6EAF2;
  --gray:#1B222D;
  --gray2:#29313D;
  --gray3:#5B6675;
  --gray4:#93A1B4;
  --blue:#6366F1;
  --blue-dark:#818CF8;
  --blue-light:#1D2233;
  --green:#34D399;
  --green-solid:#059669;
  --red:#FB7185;
  --red-solid:#DC2626;
  --red-light:#2A1620;
  --warning:#FB7185;     /* over-budget */
  --amber:#FBBF24;       /* caution / below-expected difference */
  --ring:0 0 0 3px color-mix(in srgb, var(--blue) 32%, transparent);
  --shadow:0 1px 2px rgba(0,0,0,0.5),0 10px 28px rgba(0,0,0,0.42);
  --shadow-card:0 1px 2px rgba(0,0,0,0.5),0 10px 28px rgba(0,0,0,0.42); /* unchanged from dark --shadow */
  --shadow-lg:0 20px 48px rgba(0,0,0,0.6);
  --header-bg:rgba(20,26,35,0.72);
  color-scheme:dark;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .3s ease,color .3s ease;
}

/* HEADER */
.app-header{background:var(--surface);padding:14px 16px;border-bottom:1px solid var(--gray2);}
.app-header-top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:620px;margin:0 auto;}
.app-title{font-family:'Orbitron',sans-serif;font-size:28px;font-weight:700;color:var(--text);letter-spacing:0.02em;text-transform:uppercase;}
.app-title-icon{width:64px;height:64px;border-radius:8px;flex-shrink:0;display:block;}
.app-title-wrap{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;}
.app-subtitle{font-size:12px;color:var(--gray4);letter-spacing:0.2px;}
.app-icon{font-size:28px;}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.lang-btn{background:var(--surface);border:1px solid var(--gray2);color:var(--gray4);padding:6px 12px;border-radius:999px;font-size:12px;cursor:pointer;font-weight:600;letter-spacing:0.4px;transition:all .18s ease;}
.lang-btn:hover{background:var(--gray);color:var(--text);border-color:var(--gray3);}
.icon-toggle{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--gray2);color:var(--gray4);border-radius:999px;font-size:15px;cursor:pointer;transition:all .18s ease;line-height:1;padding:0;}
.icon-toggle:hover{background:var(--gray);color:var(--text);border-color:var(--gray3);}
.icon-toggle:focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--ring);color:var(--text);}
.icon-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* language button: globe icon + short label, same height/style as the icon buttons */
.lang-toggle{width:auto;gap:5px;padding:0 11px;font-size:12px;font-weight:600;letter-spacing:0.3px;}
.lang-toggle svg{width:16px;height:16px;}

/* case switcher: person icon + active-case name, with a dropdown menu */
.case-switch{position:relative;}
.case-switch-btn{width:auto;gap:5px;padding:0 11px;max-width:130px;font-size:12px;font-weight:600;letter-spacing:0.2px;}
.case-switch-btn svg{width:16px;height:16px;}
.case-switch-btn #case-switch-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.case-switch-btn.open{border-color:var(--blue);color:var(--text);}
.case-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:160px;max-width:240px;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:150;padding:4px;display:none;}
.case-menu.open{display:block;animation:fadeIn .15s ease;}
.case-menu-item{padding:9px 12px;font-size:14px;border-radius:var(--radius-xs);cursor:pointer;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s ease;}
.case-menu-item:hover{background:var(--blue-light);color:var(--blue-dark);}
.case-menu-item.active{background:var(--blue);color:#fff;font-weight:600;}
.case-menu-empty{padding:10px 12px;font-size:13px;color:var(--gray4);}
.case-active-tag{font-size:11px;color:var(--green);font-weight:600;}

/* NAV */
.nav{background:var(--header-bg);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);display:flex;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--gray2);max-width:620px;margin:0 auto;}
.nav-btn{flex:1;padding:11px 4px 9px;border:none;background:none;color:var(--gray4);font-size:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:600;letter-spacing:0.3px;position:relative;transition:color .2s ease;}
.nav-btn::after{content:"";position:absolute;left:50%;bottom:-1px;width:0;height:2px;background:var(--blue);border-radius:2px;transform:translateX(-50%);transition:width .22s ease;}
.nav-btn:hover{color:var(--text);}
.nav-btn.active{color:var(--blue);}
.nav-btn.active::after{width:62%;}
.nav-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;}

.page{display:none;padding:18px 16px 32px;max-width:620px;margin:0 auto;}
.page.active{display:block;animation:fadeIn .28s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.card{background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-card);}
.card-title{font-size:11px;font-weight:700;color:var(--gray4);text-transform:uppercase;letter-spacing:0.09em;margin-bottom:16px;display:flex;align-items:center;gap:7px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;font-weight:600;color:var(--gray4);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em;}

/* EXPORT — two-column layout: Month+Columns left, export buttons stacked right */
.export-grid{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;}
.export-left{min-width:0;}
.export-actions{display:flex;flex-direction:column;gap:8px;}
.export-actions .btn{width:170px;margin-top:0;}
@media(max-width:600px){
  .export-grid{grid-template-columns:1fr;gap:16px;}
  .export-actions .btn{width:100%;}
}

/* EXPORT COLUMN PILLS (real checkboxes hidden; label styled as a toggle pill) */
.col-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.col-pills .col-pill{display:inline-flex;align-items:center;margin:0;padding:7px 14px;border:1px solid var(--gray2);border-radius:999px;background:var(--surface);color:var(--gray4);font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer;user-select:none;transition:background .12s ease,border-color .12s ease,color .12s ease;}
.col-pills .col-pill:hover{border-color:var(--gray3);}
.col-pills .col-pill:has(input:checked){background:var(--blue-light);border-color:var(--blue);color:var(--blue);}
.col-pills .col-pill:focus-within{border-color:var(--blue);box-shadow:var(--ring);}
.col-pills .col-pill input{position:absolute;opacity:0;width:1px;height:1px;}

/* DATE NAV */
/* Date nav: each arrow + the label is its own card-like button; hover matches .stat-card exactly. */
.date-nav{display:flex;align-items:center;gap:7px;}
.date-nav-btn{width:40px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);cursor:pointer;font-size:16px;font-weight:700;color:var(--blue);transition:transform .18s ease,box-shadow .18s ease;}
.date-nav-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.date-nav-btn:focus-visible{outline:none;box-shadow:var(--ring);}
.date-nav-label{flex:1;min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:600;color:var(--text);padding:8px;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;}
.date-nav-label:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.date-nav-label:focus-visible{outline:none;box-shadow:var(--ring);}

/* CUSTOM DATE PICKER (year chips → month grid → day grid) */
.custom-date-field{position:relative;}
.custom-date-btn{width:100%;text-align:left;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius-sm);padding:11px 12px;color:var(--text);font-family:inherit;font-size:15px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.custom-date-btn:hover{border-color:var(--gray3);}
.custom-date-btn:focus{border-color:var(--blue);box-shadow:var(--ring);outline:none;}
.custom-date-btn.is-placeholder{color:var(--gray3);}
/* Shared narrow trigger (Log Period, Export Month, Rate "Effective from"): width matches the
   dropdown panel and text is centered. The field shrink-wraps so the panel centers under it. */
.custom-date-btn.picker-narrow{width:var(--picker-w);max-width:100%;text-align:center;}
.custom-date-field:has(.picker-narrow){display:inline-block;}
.custom-date-dropdown{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 6px);width:var(--picker-w);max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:150;padding:10px;display:none;}
.custom-date-dropdown.open{display:block;}
.cal-pick-section{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
.cal-pick-years{max-height:64px;overflow-y:auto;}
.cal-pick-months{display:grid;grid-template-columns:repeat(4,1fr);}
.cal-pick-year,.cal-pick-month{background:var(--surface);border:1px solid var(--gray2);color:var(--gray4);border-radius:var(--radius-xs);padding:5px 6px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s ease;}
.cal-pick-year{flex:1 0 auto;text-align:center;}
.cal-pick-year:hover,.cal-pick-month:hover{border-color:var(--blue);color:var(--text);}
.cal-pick-year.active,.cal-pick-month.active{background:var(--blue-light);color:var(--blue);border-color:var(--blue);}
/* "more years" chevron button — matches a year chip's height/border */
.cal-pick-more{flex:0 0 auto;align-self:flex-start;background:var(--surface);border:1px solid var(--gray2);color:var(--gray4);border-radius:var(--radius-xs);padding:5px 8px;min-height:24px;font-size:11px;font-weight:700;line-height:1;font-family:inherit;cursor:pointer;transition:all .15s ease;}
.cal-pick-more:hover{border-color:var(--blue);color:var(--blue);}
.cal-pick-more:focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--ring);}
.cal-pick-more.active{background:var(--blue-light);color:var(--blue);border-color:var(--blue);}
/* expanded year popover: scrollable grid of a wide range */
.cal-pick-ypanel{max-height:280px;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px;padding:6px;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);}
.cal-pick-yopt{background:var(--surface);border:1px solid var(--gray2);color:var(--gray4);border-radius:var(--radius-xs);padding:7px 4px;min-height:32px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s ease;}
.cal-pick-yopt:hover{border-color:var(--blue);color:var(--text);}
.cal-pick-yopt.active{background:var(--blue-light);color:var(--blue);border-color:var(--blue);font-weight:700;}
/* extra bottom padding leaves room for the data dot below the month label */
.cal-pick-month{position:relative;padding-bottom:12px;}
.cal-pick-month.has-data::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--blue);}
.cal-pick-weekdays,.cal-pick-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-pick-wd{text-align:center;font-size:9px;color:var(--gray3);text-transform:uppercase;padding:2px 0;}
.cal-pick-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);color:var(--gray4);font-size:11px;font-family:inherit;cursor:pointer;position:relative;transition:all .15s ease;}
.cal-pick-day:hover:not(.is-empty){border-color:var(--blue);color:var(--text);background:var(--blue-light);}
.cal-pick-day.is-empty{cursor:default;}
.cal-pick-day.is-today{border-color:var(--blue);color:var(--blue);font-weight:700;}
.cal-pick-day.is-selected{background:var(--blue-light);border-color:var(--blue);color:var(--text);font-weight:700;}
.cal-pick-day.has-data::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--blue);}



/* INPUTS (native) */
input[type=date],input[type=text],input[type=number],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--gray2);border-radius:var(--radius-sm);
  font-size:15px;font-family:inherit;color:var(--text);background:var(--surface);outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
input[type=date]:focus,input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:var(--ring);}
input::placeholder{color:var(--gray3);}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue);cursor:pointer;}

/* AUTOCOMPLETE */
.ac-wrap{position:relative;}
.ac-input{width:100%;padding:11px 12px;border:1px solid var(--gray2);border-radius:var(--radius-sm);font-size:15px;color:var(--text);background:var(--surface);outline:none;transition:border-color .18s ease,box-shadow .18s ease;}
.ac-input:focus{border-color:var(--blue);box-shadow:var(--ring);}
.ac-input.chosen{background:var(--blue-light);border-color:var(--blue);font-weight:600;color:var(--blue-dark);}
.ac-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius-sm);z-index:999;max-height:240px;overflow-y:auto;box-shadow:var(--shadow-lg);display:none;padding:4px;}
.ac-drop.open{display:block;animation:fadeIn .15s ease;}
.ac-item{padding:9px 12px;font-size:14px;cursor:pointer;color:var(--text);border-radius:var(--radius-xs);transition:background .12s ease;}
.ac-item.hi,.ac-item:hover{background:var(--blue-light);color:var(--blue-dark);}
.ac-item mark{background:none;color:var(--blue);font-weight:700;}
.ac-item-sub{font-size:11px;color:var(--gray4);margin-top:2px;}
.ac-empty{padding:12px 14px;font-size:13px;color:var(--gray4);}

.toggle-wrap{display:flex;gap:8px;margin-bottom:14px;}
.toggle-btn{flex:1;padding:10px;border:1px solid var(--gray2);border-radius:var(--radius-sm);background:var(--surface);font-size:13px;font-weight:600;color:var(--gray4);cursor:pointer;transition:all .18s ease;}
.toggle-btn:hover{border-color:var(--gray3);color:var(--text);}
.toggle-btn.active{border-color:var(--blue);background:var(--blue-light);color:var(--blue);}

.result-box{background:var(--blue-light);border:1px solid color-mix(in srgb,var(--blue) 30%,transparent);border-radius:var(--radius-sm);padding:18px;margin:14px 0;display:none;}
.result-box.open{display:block;animation:fadeIn .25s ease;}
.res-mi{font-size:40px;font-weight:800;color:var(--blue);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.res-km{font-size:13px;color:var(--gray4);margin-top:4px;}
.res-legs{margin-top:14px;border-top:1px solid color-mix(in srgb,var(--blue) 22%,transparent);padding-top:12px;}
.leg-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--gray4);}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.leg-mi2{margin-left:auto;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;}
.calc-note{font-size:11px;color:var(--green);margin-top:8px;font-weight:600;}

.btn{width:100%;padding:12px 14px;border:1px solid transparent;border-radius:var(--radius-sm);font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .12s ease,background .18s ease,box-shadow .18s ease,opacity .18s ease;letter-spacing:0.1px;}
.btn:active{transform:scale(0.985);}
.btn:disabled{opacity:0.6;cursor:default;}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(15,23,42,0.12);}
.btn-blue:hover{background:var(--blue-dark);}
.btn-green{background:var(--green-solid);color:#fff;margin-top:8px;box-shadow:0 1px 2px rgba(15,23,42,0.12);}
.btn-green:hover{filter:brightness(1.06);}
.btn-outline{background:var(--surface);color:var(--blue);border:1px solid var(--gray2);}
.btn-outline:hover{border-color:var(--blue);background:var(--blue-light);}
.btn-red{background:var(--red-solid);color:#fff;}
.btn-red:hover{filter:brightness(1.06);}
/* Unified export buttons (PDF/Excel/CSV): card-like, hover matches .stat-card / .date-nav-btn */
.export-btn{background:var(--surface);color:var(--text);border:1px solid var(--gray2);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);font-weight:600;transition:transform .18s ease,box-shadow .18s ease;}
.export-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.export-btn:focus-visible{outline:none;box-shadow:var(--ring);}
.btn-sm{padding:8px 14px;font-size:13px;width:auto;border-radius:var(--radius-xs);}
.btn-icon{background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--radius-xs);font-size:15px;color:var(--gray4);transition:all .15s ease;}
.btn-icon:hover{background:var(--gray);color:var(--text);}
.btn-icon.del:hover{background:var(--red-light);color:var(--red);}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px;}
.stat-card{background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-card);text-align:center;transition:transform .18s ease,box-shadow .18s ease;}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.stat-n{font-size:28px;font-weight:800;color:var(--blue);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.stat-l{font-size:10px;color:var(--gray4);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;}

/* LOG — year/month multi-select tree picker */
.log-filter{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.log-filter-label{font-size:11px;font-weight:600;color:var(--gray4);text-transform:uppercase;letter-spacing:0.05em;}
.trip-group{margin-bottom:14px;}
.trip-group:last-child{margin-bottom:0;}

.mhdr{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--blue);color:#fff;border-radius:var(--radius) var(--radius) 0 0;font-weight:600;font-size:14px;}
.trip-row{background:var(--surface);border-left:1px solid var(--gray2);border-right:1px solid var(--gray2);border-bottom:1px solid var(--gray2);padding:11px 16px;display:flex;align-items:center;gap:10px;transition:background .15s ease;}
.trip-row:hover{background:var(--gray);}
.trip-row:last-child{border-radius:0 0 var(--radius) var(--radius);}
.trip-date{font-size:12px;font-weight:700;color:var(--gray4);min-width:54px;}
.trip-mi{font-weight:800;font-size:14px;color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums;}
.trip-via{font-size:11px;color:var(--gray4);}

/* PLACES TABLE */
.places-table{width:100%;border-collapse:collapse;font-size:13px;}
.places-table th{background:var(--gray);color:var(--gray4);padding:10px 12px;text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--gray2);}
.places-table th:first-child{border-radius:var(--radius-xs) 0 0 0;}
.places-table th:last-child{border-radius:0 var(--radius-xs) 0 0;}
.places-table td{padding:10px 12px;border-bottom:1px solid var(--gray2);vertical-align:middle;}
.places-table tr:last-child td{border-bottom:none;}
.places-table tr:hover td{background:var(--blue-light);}
.place-name{font-weight:600;color:var(--text);}
.place-addr{font-size:12px;color:var(--gray4);margin-top:2px;}
.places-search{width:100%;padding:10px 12px;border:1px solid var(--gray2);border-radius:var(--radius-sm);font-size:14px;color:var(--text);background:var(--surface);outline:none;margin-bottom:14px;transition:border-color .18s ease,box-shadow .18s ease;}
.places-search:focus{border-color:var(--blue);box-shadow:var(--ring);}

/* MODAL */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(15,23,42,0.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:200;align-items:flex-end;justify-content:center;}
.modal-ov.open{display:flex;animation:fadeIn .2s ease;}
.modal{background:var(--surface);border:1px solid var(--gray2);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;padding:22px;width:100%;max-width:620px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp .26s cubic-bezier(.16,1,.3,1);}
@keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:none;opacity:1;}}
.modal-hdr{font-size:17px;font-weight:700;letter-spacing:-0.01em;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;}
.modal-x{background:none;border:none;font-size:26px;cursor:pointer;color:var(--gray4);line-height:1;transition:color .15s ease;}
.modal-x:hover{color:var(--text);}

/* EXPORT — pdf preview kept light to mimic printed paper */
/* The preview itself stays at the modal's fixed width (no horizontal scroll) so the footer
   buttons never shift. Only the inner .pdf-scroll scrolls when the table is wider. */
.pdf-preview{position:relative;background:#fff;color:#1A1A2E;border:1px solid var(--gray2);border-radius:var(--radius-sm);padding:18px;margin-top:14px;display:none;overflow:hidden;}
.pdf-preview.open{display:block;}
.pdf-scroll{overflow-x:auto;max-width:100%;}
.pdf-actions{max-width:100%;}
/* drag-to-resize column handles on the preview table header */
.pdf-table thead th{position:relative;}
.pdf-col-resize{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;user-select:none;touch-action:none;}
.pdf-col-resize::after{content:'';position:absolute;top:22%;right:3px;width:1px;height:56%;background:transparent;transition:background .15s ease;}
.pdf-col-resize:hover::after{background:var(--gray3);}
.pdf-resize-guide{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);pointer-events:none;z-index:10;}
/* Official expense-report look: deep-indigo header, zebra body rows, hairline row borders.
   Fixed light palette (not themed) so the printable/downloaded document always reads as paper.
   print-color-adjust:exact keeps backgrounds for browser Print; html2canvas captures them directly. */
/* margin:0 auto centers the fixed-width table so left/right whitespace stays balanced
   (matches the cell padding on both ends) in the preview and the html2canvas capture. */
.pdf-table{width:100%;margin-left:auto;margin-right:auto;border-collapse:collapse;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:11.5px;color:#1F2937;font-variant-numeric:tabular-nums;-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact;}
.pdf-table th,.pdf-table td{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact;}
.pdf-table thead th{background:#3730A3;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;text-align:center;padding:10px 12px;border:none;}
.pdf-table tbody td{padding:8px 12px;border:none;border-bottom:1px solid #E5E9F0;color:#1F2937;}
.pdf-table tbody tr:nth-child(even) td{background:#F5F7FB;}
.pdf-table tbody tr.tot td{background:#EEF2FF;color:#312E81;font-weight:700;border-top:2px solid #3730A3;border-bottom:none;}

/* USER */
.user-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--gray2);}
.user-row:last-child{border-bottom:none;}
.user-badge{width:36px;height:36px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}
.user-active{font-size:11px;color:var(--green);font-weight:600;}

/* RATE HISTORY ROWS */
.rate-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--gray2);}
.rate-row:last-child{border-bottom:none;}
.rate-row-info{flex:1;}
.rate-row-amt{font-size:16px;font-weight:700;color:var(--green);}
.rate-row-unit{font-size:11px;font-weight:600;color:var(--gray4);margin-left:2px;}
.rate-row-date{font-size:12px;color:var(--gray4);margin-top:2px;}

/* PAYMENT / BUDGET LIST ROWS (shared) */
.pay-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--gray2);}
.pay-row:last-child{border-bottom:none;}
.pay-row-info{flex:1;min-width:0;}
.pay-row-month{font-weight:600;font-size:14px;color:var(--text);}
.pay-row-sub{font-size:12px;color:var(--gray4);margin-top:2px;}
.pay-row-amt{font-size:16px;font-weight:700;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* BUDGET PROGRESS CARD (Log tab) */
.budget-card{transition:transform .18s ease,box-shadow .18s ease;}
.budget-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.bgt-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;}
.bgt-name{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.01em;}
.bgt-range{font-size:12px;color:var(--gray4);white-space:nowrap;}
.bgt-stats{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;}
.bgt-stat-l{font-size:10px;font-weight:600;color:var(--gray4);text-transform:uppercase;letter-spacing:0.06em;}
.bgt-stat-v{font-size:17px;font-weight:800;color:var(--text);margin-top:3px;font-variant-numeric:tabular-nums;}
.bgt-bar{height:10px;background:var(--gray2);border-radius:999px;overflow:hidden;}
.bgt-fill{height:100%;background:var(--blue);border-radius:999px;transition:width .35s ease;}
.bgt-fill.over{background:var(--warning);}
.bgt-pct{font-size:12px;font-weight:600;color:var(--gray4);margin-top:8px;text-align:right;}
.budget-empty{font-size:13px;color:var(--gray4);background:var(--surface);border:1px dashed var(--gray2);border-radius:var(--radius-sm);padding:14px 16px;text-align:center;margin-bottom:14px;}

/* SAME-DAY TRIPS PREVIEW (Add tab) — compact rows with a subtle left accent */
.sameday-count{font-size:11px;font-weight:600;color:var(--gray4);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;}
.sameday-row{display:flex;align-items:center;gap:10px;padding:7px 0 7px 10px;border-left:2px solid var(--blue);border-bottom:1px solid var(--gray2);}
.sameday-row:last-child{border-bottom:none;}
.sameday-route{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sameday-mi{font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums;}
.sameday-empty{font-size:13px;color:var(--gray4);padding:4px 0;}

.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:middle;margin-right:6px;}
.spinner-lg{width:32px;height:32px;border:3px solid var(--gray2);border-top-color:var(--blue);}
@keyframes sp{to{transform:rotate(360deg);}}
.loading{text-align:center;padding:40px;color:var(--gray4);}
.empty{text-align:center;padding:40px 20px;color:var(--gray4);}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:11px 20px;border-radius:999px;font-size:14px;font-weight:500;z-index:400;opacity:0;transition:opacity .3s ease;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-lg);}
.toast.show{opacity:1;}

/* FOOTER */
.app-footer{max-width:620px;margin:0 auto;padding:20px 16px 28px;border-top:1px solid var(--gray2);text-align:center;font-size:12px;color:var(--gray4);letter-spacing:0.2px;}

/* PIN GATE — full-screen, theme-aware; shown from first paint to avoid app flash */
.pin-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);transition:opacity .3s ease;}
.pin-overlay.hide{opacity:0;pointer-events:none;}
.pin-card{background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:32px 26px;width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.pin-icon{width:64px;height:64px;border-radius:14px;display:block;}
.pin-app-title{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text);}
.pin-loading{padding:18px 0;}
.pin-entry{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}
.pin-heading{font-size:13px;font-weight:600;color:var(--gray4);text-transform:uppercase;letter-spacing:0.06em;}
.pin-error{font-size:13px;font-weight:600;color:var(--red);}
/* PIN numpad: dot display + 3×4 keypad */
.pin-dots{display:flex;gap:12px;justify-content:center;align-items:center;min-height:14px;}
.pin-dot{width:14px;height:14px;border-radius:50%;background:var(--gray2);transition:background .15s ease,transform .15s ease;}
.pin-dot.filled{background:var(--blue);transform:scale(1.08);}
.pin-dots.shake{animation:pinShake .4s ease;}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;}
.pin-key{height:64px;min-height:56px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;font-family:inherit;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);color:var(--text);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
.pin-key:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.pin-key:active{transform:scale(0.95);}
.pin-key:focus-visible{outline:none;box-shadow:var(--ring);}
.pin-key-back{color:var(--gray4);}
.pin-key-ok{background:var(--blue);color:#fff;border-color:var(--blue);}
.pin-key-ok:hover{background:var(--blue-dark);}
@keyframes pinShake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-5px);}40%,60%{transform:translateX(5px);}}

/* ============ DASHBOARD ============ */
/* Cycle arrows live inside the Budget Progress card header: ‹ name › */
.bgt-cycle-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.bgt-cyc-center{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;gap:2px;}
.bgt-cyc-center .bgt-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bgt-cyc-center .bgt-range{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bgt-cyc-arrow{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);cursor:pointer;font-size:20px;font-weight:700;line-height:1;color:var(--blue);transition:transform .18s ease,box-shadow .18s ease;}
.bgt-cyc-arrow:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.bgt-cyc-arrow:focus-visible{outline:none;box-shadow:var(--ring);}
.bgt-cyc-arrow:disabled{opacity:.35;cursor:default;color:var(--gray3);}

/* Full-width month selector between the Budget card and the stats; centered button text, label on the left */
.dash-month-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.dash-month-field{flex:1;min-width:0;position:relative;}
.dash-month-btn{width:100%;text-align:center;}

/* Section 3 — KPI cards (reuse .stat-card look, 2-up grid) */
.dash-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px;}
.dash-kpi .stat-n.kpi-good{color:var(--green);}
.dash-kpi .stat-n.kpi-amber{color:var(--amber);}
.dash-kpi .stat-n.kpi-muted{color:var(--gray3);}

/* Sections 4 & 5 — hand-rolled SVG charts */
/* gap + margin-right: gap handles modern browsers, margin-right is a fallback so the two
   legend series never collapse into "ExpectedActual"; nowrap keeps each label intact. */
.dash-chart-legend{display:flex;gap:20px;margin-bottom:12px;flex-wrap:wrap;align-items:center;}
.dash-legend-item{display:inline-flex;align-items:center;gap:7px;margin-right:8px;font-size:11px;font-weight:600;color:var(--gray4);white-space:nowrap;}
.dash-legend-item:last-child{margin-right:0;}
.dash-legend-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
.dash-chart{width:100%;display:block;overflow:visible;}
.dash-bar{cursor:pointer;transition:opacity .15s ease;}
.dash-bar:hover{opacity:.78;}
/* x-axis labels are positioned per-slot in the SVG (so they're inherently spaced); keep the
   font compact so short month labels like "Nov"/"Dec" never visually touch. */
.dash-axis-label{font-size:9px;font-weight:600;fill:var(--gray4);}
.dash-grid-line{stroke:var(--gray2);stroke-width:1;}
.dash-trend-line{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.dash-trend-dot{fill:var(--blue);cursor:pointer;transition:r .15s ease;}
.dash-trend-dot:hover{r:5;}
.dash-chart-empty{font-size:13px;color:var(--gray4);text-align:center;padding:24px 0;}

/* shared floating tooltip for chart hover/tap */
.dash-tip{position:fixed;z-index:500;background:var(--text);color:var(--bg);padding:7px 10px;border-radius:var(--radius-xs);font-size:12px;font-weight:600;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-lg);display:none;}
.dash-tip.show{display:block;}
.dash-tip .dash-tip-sub{font-size:11px;font-weight:500;opacity:.85;margin-top:1px;}

/* Section 6 — mini insight chips (reuse stat-card hover) */
/* minmax(0,1fr) (not 1fr → minmax(auto,1fr)) lets tracks shrink below content width;
   min-width:0 + overflow:hidden on the chip keep a long route summary from forcing the
   row wider than the card and scrolling the page sideways on mobile. */
.dash-insights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.dash-chip{min-width:0;max-width:100%;overflow:hidden;background:var(--surface);border:1px solid var(--gray2);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease;}
.dash-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.dash-chip-l{font-size:10px;color:var(--gray4);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-chip-n{font-size:22px;font-weight:800;color:var(--blue);margin-top:6px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-chip-sub{font-size:11px;color:var(--gray4);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-chip-n.up{color:var(--green);}
.dash-chip-n.down{color:var(--amber);}

/* ============ MOBILE HEADER — three rows (Feature A) ============ */
/* ≤640px: Row 1 title, Row 2 the four icon toggles, Row 3 nav (already the next element).
   Desktop (≥641px) keeps the original single-row header untouched. */
@media(max-width:640px){
  .app-header-top{flex-direction:column;align-items:center;gap:10px;}
  .app-title-wrap{justify-content:center;}
  .app-title{font-size:22px;}
  .app-title-icon{width:64px;height:64px;}
  .header-actions{justify-content:center;flex-wrap:wrap;gap:8px;width:100%;}
  .case-switch-btn{max-width:120px;}
}
@media(max-width:400px){
  .app-title{font-size:18px;}
  .app-title-icon{width:28px;height:28px;}
  .case-switch-btn{max-width:92px;}
}

/* DESKTOP — center modals with full radius */
@media(min-width:680px){
  .modal-ov{align-items:center;padding:20px;}
  .modal{border:1px solid var(--gray2);border-radius:var(--radius);animation:slideUp .26s cubic-bezier(.16,1,.3,1);}
}

/* ===== SWAP FROM/TO (Add page) ===== */
.swap-row{display:flex;justify-content:flex-end;margin:-8px 4px -8px 0;position:relative;z-index:1;}
.swap-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--gray2);background:var(--surface);color:var(--blue);font-size:16px;line-height:1;cursor:pointer;transition:all .15s ease;}
.swap-btn:hover{background:var(--blue-light);border-color:var(--blue);transform:rotate(180deg);}

/* ===== MI/KM UNIT TOGGLE ===== */
.unit-toggle{display:inline-flex;border:1px solid var(--gray2);border-radius:999px;overflow:hidden;flex-shrink:0;}
.unit-seg{border:none;background:none;padding:4px 11px;font-size:11px;font-weight:700;color:var(--gray4);cursor:pointer;transition:all .15s ease;}
.unit-seg.active{background:var(--blue);color:#fff;}

/* ===== RECENT CALCULATIONS ===== */
.hist-row{cursor:pointer;transition:background .15s ease;}
.hist-row:hover{background:var(--gray);}

/* ===== GOOGLE SIGN-IN / ACCESS-DENIED VIEWS (pin overlay) ===== */
.pin-signin{display:none;flex-direction:column;align-items:center;gap:14px;padding-top:6px;}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface);color:var(--text);border:1px solid var(--gray2);border-radius:var(--radius-sm);padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease;}
.google-btn:hover{border-color:var(--blue);background:var(--blue-light);}
.google-btn:disabled{opacity:.6;cursor:default;}
.pin-denied-email{font-size:13px;font-weight:700;color:var(--red);word-break:break-all;}
.pin-note{font-size:12px;color:var(--gray4);max-width:240px;text-align:center;line-height:1.5;}

/* ===== PLACE SEARCH (location modal) ===== */
.loc-search-row{display:flex;gap:8px;}
.loc-search-row input{flex:1;min-width:0;}
.loc-search-btn{flex-shrink:0;white-space:nowrap;width:auto;}
.loc-search-results{margin-top:8px;border:1px solid var(--gray2);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);}
.loc-search-results:empty{display:none;}
.loc-result{padding:9px 12px;border-bottom:1px solid var(--gray2);cursor:pointer;}
.loc-result:last-child{border-bottom:none;}
.loc-result:hover{background:var(--blue-light);}
.loc-result-name{font-size:13px;font-weight:600;}
.loc-result-addr{font-size:11px;color:var(--gray4);margin-top:2px;}
.loc-result-empty{padding:10px 12px;font-size:12px;color:var(--gray4);}

/* ===== PLACE SEARCH (trip-form autocomplete dropdowns) ===== */
.ac-google{padding:10px 12px;font-size:13px;color:var(--blue);font-weight:600;cursor:pointer;border-top:1px dashed var(--gray2);}
.ac-google:hover{background:var(--blue-light);}
.ac-gitem{position:relative;padding-right:44px;}
.ac-gtag{font-size:9px;font-weight:800;color:#fff;background:var(--blue);border-radius:4px;padding:1px 4px;vertical-align:2px;margin-left:6px;}
.ac-save{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1px solid var(--gray2);background:var(--surface);color:var(--green);font-size:16px;line-height:1;cursor:pointer;transition:all .15s ease;}
.ac-save:hover{border-color:var(--green);background:var(--gray);}