/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page: #171d19;
  --sidebar: #202723;
  --surface: #202723;
  --surface-raised: #29312c;
  --surface-hover: #303934;
  --chart-surface: #edf1ed;
  --text: #edf1ed;
  --text-muted: #a9b3ac;
  --text-chart: #354239;
  --text-chart-muted: #59675e;
  --border: #3b453e;
  --chart-border: #d2dbd3;
  --chart-grid: #c8d2ca;
  --accent: #76b89d;
  --accent-strong: #205f4c;
  --focus: #e29b36;
  --danger: #e49a91;
  color: var(--text);
  background: var(--page);
  font-synthesis: none;
}

body { margin: 0; line-height: 1.5; color: var(--text); background: var(--page); }
main { width: min(100% - 2rem, 64rem); margin: 0 auto; padding: 2rem 0 4rem; }
h1, h2 { line-height: 1.2; }
h1 { margin: 1.5rem 0 1rem; }
.app-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.app-shell:has(> .app-sidebar > .sidebar-menu-toggle[aria-expanded="false"]) { grid-template-columns: 3.75rem minmax(0, 1fr); }
.app-sidebar { box-sizing: border-box; padding: 1.25rem .9rem; border-right: 1px solid var(--border); background: var(--sidebar); }
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) { padding: .75rem .45rem; }
.sidebar-menu-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: .5rem .6rem; border: 0; border-radius: 0; background: transparent; color: var(--accent); font-size: 1.1rem; font-weight: 750; text-align: left; cursor: pointer; }
.sidebar-menu-icon::before { content: "‹"; }
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) > .sidebar-menu-toggle { justify-content: center; padding: .5rem 0; }
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) > .sidebar-menu-toggle > span:first-child { display: none; }
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-menu-icon::before { content: "☰"; }
.sidebar-navigation-panel { display: contents; }
.sidebar-navigation-panel > nav { margin-top: .75rem; }
.sidebar-section { margin: .5rem 0; }
.sidebar-section h2 { margin: 0; padding: .45rem .6rem; color: var(--text-muted); font-size: .78rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.sidebar-section ul { margin: .2rem 0 .7rem; padding: 0; list-style: none; }
.sidebar-section a {
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 1px solid transparent;
  border-radius: .45rem;
  color: var(--accent);
  padding: .5rem .65rem;
  text-decoration: none;
}
.sidebar-link-icon { display: inline-flex; flex: 0 0 1.35rem; align-items: center; justify-content: center; }
.sidebar-link-icon svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sidebar-section a:hover { background: var(--surface-hover); }
.sidebar-section a.is-current {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
  font-weight: 700;
}
.sidebar-logout-button { display: flex; width: 100%; align-items: center; gap: .65rem; border: 1px solid transparent; border-radius: .45rem; background: transparent; color: var(--accent); padding: .5rem .65rem; text-align: left; cursor: pointer; }
.sidebar-logout-button:hover { background: var(--surface-hover); }
.sidebar-account form { margin: 0; }
.sidebar-account button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sidebar-section a:focus-visible, .sidebar-menu-toggle:focus-visible, .sidebar-section summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-navigation-panel > nav {
  margin-top: 1rem;
  padding-top: .45rem;
  border-top: 1px solid var(--border);
}
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-section[aria-labelledby="basic-data-nav-heading"],
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-account {
  padding-top: .45rem;
  border-top: 1px solid var(--border);
}
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-section h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-section ul { margin: .35rem 0; }
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-section a,
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-account .sidebar-logout-button { justify-content: center; gap: 0; padding: .6rem .35rem; }
.app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) .sidebar-link-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
.app-content { min-width: 0; }
a { color: var(--accent); }
a:hover { color: #a5d7bf; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

button, input[type="submit"], .button-link {
  display: inline-block;
  border: 1px solid var(--accent-strong);
  border-radius: .4rem;
  background: var(--accent-strong);
  color: #fff;
  padding: .55rem .85rem;
  text-decoration: none;
  cursor: pointer;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="month"], input[type="color"], select, textarea {
  width: min(100%, 30rem);
  box-sizing: border-box;
  border: 1px solid #556159;
  border-radius: .35rem;
  background: var(--surface-raised);
  color: var(--text);
  padding: .6rem .7rem;
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23aeb9b2' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: .75rem auto;
}

.choice-field { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
.choice-field legend { margin-bottom: .4rem; }
.choice-button-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-button-group input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.choice-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  box-sizing: border-box;
  padding: .45rem .8rem;
  border: 1px solid #556159;
  border-radius: .4rem;
  background: var(--surface-raised);
  color: var(--accent);
  cursor: pointer;
}
.choice-button-group input[type="radio"]:checked + .choice-button { border: 3px solid var(--choice-color, var(--accent)); background: var(--surface-raised); color: var(--text); font-weight: 700; }
.choice-button-group input[type="radio"]:focus-visible + .choice-button { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-button:hover { border-color: var(--accent); }
.field--compact input[type="date"] { width: min(100%, 16rem); box-sizing: border-box; }
.field--compact input[type="number"] { width: min(100%, 12rem); box-sizing: border-box; }
.date-shortcuts { display: flex; gap: .5rem; margin-top: .5rem; }
.date-shortcut { border-color: var(--border); background: var(--surface-raised); color: var(--accent); padding: .35rem .65rem; }
.date-shortcut:hover { border-color: var(--accent); background: var(--surface-hover); }

input[type="color"] { width: 4rem; height: 2.75rem; }
.color-picker-disclosure { position: relative; width: fit-content; }
.color-picker-trigger { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; box-sizing: border-box; padding: .4rem .65rem; border: 1px solid var(--border); border-radius: .45rem; background: var(--surface-raised); color: var(--text); cursor: pointer; list-style: none; }
.color-picker-trigger::-webkit-details-marker { display: none; }
.color-picker-trigger::marker { content: ""; }
.color-picker-current-swatch { display: inline-block; width: 1.65rem; height: 1.65rem; border: 2px solid var(--border); border-radius: .35rem; background: var(--swatch-color); }
.color-picker-current-value { color: var(--text-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.color-picker-disclosure[open] .color-picker-trigger,
.color-picker-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-picker-popover { position: absolute; z-index: 20; top: calc(100% + .5rem); left: 0; width: min(30rem, calc(100vw - 3rem)); box-sizing: border-box; padding: .85rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface-raised); box-shadow: 0 .75rem 1.75rem rgb(0 0 0 / 35%); }
.color-picker-options { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .4rem; }
.color-preset { aspect-ratio: 1; width: 100%; padding: 0; border: 2px solid var(--border); border-radius: .4rem; background: var(--swatch-color); cursor: pointer; }
.color-preset[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.color-preset:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.color-picker-custom { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--border); color: var(--text-muted); }
.color-picker .color-picker-custom input[type="color"] { box-sizing: border-box; width: 2.5rem; height: 2.5rem; padding: .2rem; border: 1px solid var(--border); border-radius: .4rem; background: var(--surface-raised); cursor: pointer; }
section { margin: 2rem 0; }
.table-scroll { overflow-x: auto; border: 1px solid var(--chart-border); border-radius: .5rem; background: var(--chart-surface); color: var(--text-chart); }
.entry-table-scroll { box-sizing: border-box; width: fit-content; max-width: 100%; }
table.entry-table { width: max-content; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
table.entry-table thead th:first-child, table.entry-table tbody th.reading-date-group { box-sizing: border-box; width: 4rem; min-width: 4rem; padding-right: .35rem; padding-left: .35rem; }
table.entry-table .vehicle-column-heading { box-sizing: border-box; width: 8.25rem; min-width: 8.25rem; padding-right: .35rem; padding-left: .35rem; }
table.entry-table tbody td:not(.reading-weekday) { padding-right: .35rem; padding-left: .35rem; }
table.entry-table thead th:first-child { position: sticky; z-index: 3; left: 0; background: var(--chart-surface); }
table.entry-table tbody .reading-date-group { position: sticky; z-index: 2; left: 0; box-shadow: 1px 0 0 var(--chart-border); }
.date-group-start > * { border-top: 2px solid var(--chart-border); }
.date-group-start:first-child > * { border-top: 0; }
.reading-date-group { vertical-align: top; white-space: nowrap; background: #dfe7e1; }
.daily-mileage-top-rank { color: var(--vehicle-color); font-weight: 750; }
.inline-odometer-form { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.inline-odometer-form input[type="number"] {
  width: 4.4rem;
  height: 1.5rem;
  max-width: 100%;
  padding: 0 .3rem;
  border: 1px solid transparent;
  border-radius: .3rem;
  color: var(--text-chart);
  background: transparent;
  font: inherit;
  line-height: 1.2;
  text-decoration: underline;
}
.inline-odometer-form input[type="number"]:hover { border-color: #84968a; background: var(--chart-surface); }
.inline-odometer-form input[type="number"]:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; background: var(--chart-surface); }
.inline-validation-error { display: block; max-width: 14rem; color: var(--danger); font-size: .85em; white-space: normal; }
.row-options { position: relative; }
.row-options > summary { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--accent); font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer; list-style: none; }
.row-options > summary::-webkit-details-marker { display: none; }
.row-options > summary:hover, .row-options > summary:focus-visible { background: var(--surface-hover); }
.row-options-menu { position: absolute; z-index: 2; top: calc(100% + .25rem); right: 0; display: grid; min-width: 8rem; gap: .25rem; padding: .45rem; border: 1px solid var(--border); border-radius: .4rem; background: var(--surface-raised); box-shadow: 0 .3rem .8rem #0008; }
.row-options-menu > a { padding: .4rem .55rem; }
.row-options-menu form { margin: 0; }
.row-options-menu button { width: 100%; border-color: #8c3831; background: transparent; color: var(--danger); padding: .35rem .55rem; text-align: left; }
table { width: 100%; border-collapse: collapse; color: var(--text-chart); }
th, td { padding: .8rem; text-align: left; border-bottom: 1px solid var(--chart-border); }
thead { background: #dfe7e1; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

.vehicle-swatch {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--vehicle-color);
  vertical-align: baseline;
}
.driver-swatch {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--driver-color);
  vertical-align: baseline;
}

.actions { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.actions form { display: inline; margin: 0; }
.actions button { border-color: #8c3831; background: transparent; color: var(--danger); padding: .3rem .55rem; }
.table-scroll a { color: var(--accent-strong); }
.table-scroll a:hover { color: #174737; }
.table-scroll .actions button { border-color: #b42318; color: #8c2822; }
.field { display: grid; gap: .35rem; margin: 1rem 0; }
.form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.error-summary, [role="alert"] { color: var(--danger); }
[role="status"] { color: var(--accent); }
.month-navigation { margin: 1.5rem 0; }
.month-navigation-heading { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.month-step-button { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1.35rem; font-weight: 500; line-height: 1; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.month-step-button:hover { border-color: var(--border); background: var(--surface-hover); color: var(--accent); }
.month-step-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--accent); }
.month-navigation-heading form { display: grid; width: min(100%, 13.33rem); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.month-navigation-heading form.year-navigation-form { width: min(100%, 8rem); grid-template-columns: minmax(0, 1fr); }
.month-current-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: calc(2 * .48rem + 1.2em + 2px); border: 1px solid transparent; border-radius: .4rem; background: var(--surface-raised); color: var(--text); padding: .45rem .75rem; font-weight: 700; text-decoration: none; }
.month-current-button:hover { background: var(--surface-hover); color: var(--text); }
.month-navigation-heading input[type="month"] { width: 100%; min-width: 0; font: inherit; border: 1px solid #556159; border-radius: .35rem; background: var(--surface-raised); color: var(--text); padding: .48rem .55rem; }
.entry-view-tabs { display: flex; gap: .5rem; margin: 1.5rem 0 .75rem; border-bottom: 1px solid var(--border); }
turbo-frame#entry-view-frame { display: block; }
.entry-view-tabs a { display: inline-block; padding: .65rem .9rem; border-radius: .4rem .4rem 0 0; color: var(--accent); text-decoration: none; }
.entry-view-tabs a.is-current { background: var(--accent-strong); color: #fff; font-weight: 700; }
.statistics-period-tabs { display: flex; gap: .5rem; margin: .75rem 0 1.5rem; border-bottom: 1px solid var(--border); }
.statistics-period-tabs a { display: inline-block; padding: .65rem .9rem; border-radius: .4rem .4rem 0 0; color: var(--accent); text-decoration: none; }
.statistics-period-tabs a.is-current { background: var(--accent-strong); color: #fff; font-weight: 700; }
.entry-action-button { font-weight: 700; }
.vehicle-column-heading { white-space: nowrap; }
.odometer-cell-controls { display: flex; align-items: center; gap: .3rem; }
.matrix-reading-trigger, .reading-modal-close { display: inline-grid; width: 2rem; height: 2rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.matrix-reading-trigger { width: 1.5rem; height: 1.5rem; }
.matrix-reading-trigger:hover, .matrix-reading-trigger:focus-visible, .reading-modal-close:hover, .reading-modal-close:focus-visible { background: var(--surface-hover); }
.reading-modal { width: min(42rem, calc(100vw - 2rem)); max-width: none; max-height: min(80vh, 48rem); padding: 1.25rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface-raised); color: var(--text); box-shadow: 0 1rem 3rem #0008; }
.reading-modal::backdrop { background: #050806bb; }
.reading-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.reading-modal-header h2 { margin: 0; font-size: 1.35rem; }
.reading-modal .table-scroll { max-height: 60vh; overflow: auto; }
.reading-modal .actions { gap: .5rem; }
.reading-modal .actions button { padding: .3rem .5rem; }
.month-to-date-value { white-space: nowrap; }
.mtd-comparison { margin-left: .3rem; font-size: .9em; }
.mtd-comparison--positive { color: #267443; }
.mtd-comparison--negative { color: #b42318; }
.mtd-comparison--unchanged { color: var(--text-muted); }
.monthly-summary-sections { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
.monthly-summary-group { min-width: 0; }
.monthly-summary-sections section { margin: 0; }
.monthly-summary-group h3 { margin: .25rem 0 .5rem; }
.monthly-summary-family-total { margin: .5rem 0 1rem; }
.monthly-summary-daily-chart { margin: 1rem 0 1.25rem; }
.monthly-summary-daily-chart h3 { margin: 0 0 .5rem; }
.year-summary-section { margin-top: 2rem; }
.monthly-summary-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.monthly-summary-chart-grid .summary-breakdown-section { margin: 0; }
.total-period-form { display: grid; justify-items: stretch; gap: .7rem; margin: .75rem 0 .25rem; }
.total-period-fieldset { display: grid; gap: .65rem; margin: 0; padding: 0; border: 0; }
.total-period-fieldset legend { margin-bottom: .25rem; padding: 0; color: var(--text-muted); font-size: .9rem; }
.total-period-selector { display: flex; gap: .35rem; margin: 0; padding: 0 0 .5rem; }
.total-period-selector label { position: relative; padding: .45rem .75rem; border-radius: .4rem; color: var(--text-muted); cursor: pointer; }
.total-period-selector label:has(input:checked) { background: var(--surface-raised); color: var(--text); font-weight: 700; }
.total-period-selector label:hover { background: var(--surface-hover); color: var(--text); }
.total-period-selector label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.total-period-selector input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.total-period-date-fields { display: flex; }
.total-period-input--from { display: flex; align-items: center; gap: .5rem; }
.total-period-input--range { display: grid; grid-template-columns: auto minmax(0, 12rem) auto minmax(0, 12rem); align-items: center; column-gap: .5rem; }
.total-period-range-field { display: contents; }
.total-period-form:has(#total_period_beginning:checked) .total-period-date-fields,
.total-period-form:has(#total_period_beginning:checked) .total-period-input--from,
.total-period-form:has(#total_period_beginning:checked) .total-period-input--range,
.total-period-form:has(#total_period_from_date:checked) .total-period-input--range,
.total-period-form:has(#total_period_range:checked) .total-period-input--from { display: none; }
.total-period-form input[type="date"] { max-width: 12rem; border: 1px solid #556159; border-radius: .35rem; background: var(--surface-raised); color: var(--text); padding: .35rem .45rem; }
.total-period-form input[type="radio"] { accent-color: var(--accent); }
.total-summary-data { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.summary-chart-frame { display: block; }
.summary-breakdown { box-sizing: border-box; display: grid; height: 10rem; gap: .55rem; margin: .25rem 0; padding: .75rem; border: 1px solid var(--chart-border); border-radius: .45rem; background: var(--chart-surface); color: var(--text-chart); }
.summary-breakdown--pie { grid-template-columns: minmax(4rem, .45fr) minmax(0, 1.55fr); align-items: center; gap: .55rem; }
.summary-pie { display: block; width: min(100%, 8rem); height: auto; justify-self: center; }
.summary-breakdown-list { display: grid; gap: .55rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.summary-breakdown-list li { display: grid; grid-template-columns: minmax(5rem, .8fr) minmax(3rem, 1.2fr) minmax(4rem, auto); align-items: center; gap: .6rem; }
.summary-breakdown--pie .summary-breakdown-list li { grid-template-columns: minmax(0, 1fr) minmax(2.5rem, auto) max-content; gap: .35rem; font-size: .9rem; }
.summary-breakdown-name { display: flex; align-items: center; gap: .4rem; min-width: 0; overflow-wrap: anywhere; }
.summary-breakdown-dot { flex: 0 0 .65rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--series-color); }
.summary-breakdown-track { display: block; height: .55rem; overflow: hidden; border-radius: 999px; background: #dfe7e1; }
.summary-breakdown-track > span { display: block; height: 100%; border-radius: inherit; background: var(--series-color); }
.summary-breakdown-share, .summary-breakdown strong { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-breakdown-section + .summary-breakdown-section { margin-top: 1rem; }
.summary-breakdown-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .4rem 0; }
.summary-breakdown-heading h4 { margin: 0; }
.summary-chart-toggle { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid var(--border); border-radius: .5rem; }
.summary-chart-toggle a { padding: .2rem .5rem; border-radius: .35rem; color: var(--text-muted); font-size: .85rem; text-decoration: none; }
.summary-chart-toggle a:hover { background: var(--surface-hover); color: var(--text); }
.summary-chart-toggle a.is-current { background: var(--surface-raised); color: var(--text); font-weight: 700; }
.overview-dashboard { display: grid; grid-template-columns: minmax(15rem, .85fr) minmax(0, 1.5fr); gap: 1rem; margin: 1.5rem 0 2rem; }
.overview-family-card, .overview-vehicle-card, .goal-card { min-width: 0; padding: 1.15rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); }
.overview-family-card { display: flex; min-height: 12rem; flex-direction: column; justify-content: center; border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 28%, var(--surface)); }
.overview-family-card .eyebrow { color: var(--text-muted); font-size: .9rem; }
.overview-family-card h2 { margin: .45rem 0; font-size: clamp(1.8rem, 4vw, 2.7rem); font-variant-numeric: tabular-nums; }
.overview-family-card p:last-child { margin-bottom: 0; }
.overview-section-heading, .goal-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.overview-section-heading h2 { margin: 0 0 .2rem; }
.overview-section-heading p { margin: 0; }
.overview-vehicle-card { display: flex; flex-direction: column; justify-content: center; }
.overview-vehicle-list { display: grid; gap: .85rem; margin: 1rem 0 0; padding: 1rem; border-radius: .45rem; background: var(--chart-surface); color: var(--text-chart); list-style: none; }
.overview-vehicle-list li { display: grid; grid-template-columns: minmax(7rem, .9fr) minmax(3rem, 1.2fr) minmax(5rem, auto); align-items: center; gap: .8rem; }
.overview-vehicle-name { display: flex; align-items: center; min-width: 0; }
.overview-vehicle-track, .goal-comparison-track { position: relative; display: block; height: .6rem; overflow: hidden; border-radius: 999px; background: var(--surface-hover); }
.overview-vehicle-track { background: #dfe7e1; }
.overview-vehicle-track > span { display: block; height: 100%; border-radius: inherit; background: var(--vehicle-color); }
.overview-vehicle-list strong { text-align: right; font-variant-numeric: tabular-nums; }
.monthly-goals-section { margin-top: 2.25rem; }
.goal-reference-note { text-align: right; }
.goal-tabs { display: flex; gap: .35rem; margin: 1rem 0; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.goal-tabs a { padding: .45rem .75rem; border-radius: .4rem; color: var(--text-muted); text-decoration: none; }
.goal-tabs a:hover { background: var(--surface-hover); color: var(--text); }
.goal-tabs a.is-current { background: var(--surface-raised); color: var(--text); font-weight: 700; }
.goal-view-intro { margin: 1.25rem 0 .9rem; }
.goal-view-intro h3 { margin: 0 0 .25rem; }
.goal-view-intro p { margin: 0; }
.goal-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .9rem; }
.goal-card { border-color: color-mix(in srgb, var(--vehicle-color) 34%, var(--border)); }
.goal-card-heading { align-items: center; }
.goal-vehicle-title { display: inline-flex; align-items: center; gap: .1rem; min-width: 0; }
.goal-vehicle-title .vehicle-swatch { flex: 0 0 auto; }
.goal-lock-label, .goal-status { flex: 0 0 auto; padding: .22rem .55rem; border-radius: 999px; background: var(--surface-hover); color: var(--text-muted); font-size: .82rem; }
.goal-status--reached, .goal-status--on-target { color: #b7e5c5; background: #24523d; }
.goal-status--failed { color: #f2c3bd; background: #5a302b; }
.goal-card-measure { margin: .65rem 0; color: var(--text-muted); }
.goal-values { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-variant-numeric: tabular-nums; }
.goal-values > strong { font-size: 1.25rem; }
.goal-values > span { color: var(--text-muted); text-align: right; }
.goal-comparison-track { height: .55rem; margin: .85rem 0 .55rem; overflow: visible; }
.goal-comparison-fill { position: relative; display: block; height: 100%; border-radius: inherit; background: var(--vehicle-color); }
.goal-comparison-marker { position: absolute; top: -.22rem; width: 2px; height: 1rem; background: var(--text); transform: translateX(-50%); }
.goal-difference { margin: .45rem 0 0; color: var(--text-muted); font-size: .92rem; }
.goal-empty-card { display: flex; min-height: 8rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem; }
.goal-empty-card p { margin: 0; }
.goal-inline-link { font-size: .9rem; }
.goal-setup-form { display: grid; gap: 1rem; }
.goal-saved-description { margin: .9rem 0 0; }
.goal-field { display: grid; gap: .3rem; margin-top: .4rem; }
.goal-field select { width: 100%; }
.goal-field[hidden] { display: none; }
.goal-sentence { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .8rem; }
.goal-sentence-prefix { color: var(--text-muted); }
.goal-direction-options { display: flex; gap: .45rem; }
.goal-direction-options label { position: relative; }
.goal-direction-options input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); }
.goal-direction-options span { display: inline-block; padding: .4rem .75rem; border: 1px solid var(--border); border-radius: .4rem; color: var(--text-muted); cursor: pointer; }
.goal-direction-options input:checked + span { border-color: var(--vehicle-color, var(--accent)); background: var(--surface-hover); color: var(--text); font-weight: 700; }
.goal-direction-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.goal-direction-options span:hover { border-color: var(--accent); }
.goal-measure-options, .goal-comparison-options { flex-wrap: wrap; }
.goal-measure-options span, .goal-comparison-options span { text-transform: none; }
.goal-comparison-field { margin-top: 1rem; }
.goal-comparison-sentence { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; margin-top: 0; }
.goal-mode-choice { display: inline-flex; width: max-content; align-items: center; gap: .45rem; color: var(--text-muted); cursor: pointer; }
.goal-mode-choice input { accent-color: var(--vehicle-color, var(--accent)); }
.goal-direct-value.is-inactive { opacity: .5; }
.goal-direct-value { display: grid; grid-template-columns: max-content 9rem max-content; justify-content: start; align-items: center; gap: .45rem; }
.goal-direct-value input[type="number"] { width: 9rem; }
.goal-value-unit { color: var(--text-muted); }
.goal-setup-form > input[type="submit"] { justify-self: start; margin-top: .1rem; }
.visualization-section { margin-top: 2rem; }
.visualization-section > h2 { margin-bottom: .25rem; }
.chart-panel, .vehicle-chart-panel { margin: .75rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface-raised); color: var(--text); }
.chart-scroll { overflow-x: auto; border-radius: .4rem; background: var(--chart-surface); color: var(--text-chart); }
.mileage-chart { display: block; width: 100%; min-width: 58rem; height: auto; }
.vehicle-daily-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vehicle-chart-panel { min-width: 0; }
.vehicle-chart-panel figcaption { margin-bottom: .5rem; font-weight: 700; }
.vehicle-mileage-chart { display: block; width: 100%; min-width: 21rem; height: auto; }
.chart-gridline { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis-label, .chart-date-label { fill: var(--text-chart-muted); font-size: 11px; font-family: inherit; }
.chart-legend { display: flex; align-items: center; gap: .9rem 1.2rem; flex-wrap: wrap; margin-top: .6rem; font-size: .9rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.summary-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.rank-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.summary-metric-panel, .weekday-panel { min-width: 0; margin: .75rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface-raised); color: var(--text); }
.summary-metric-panel figcaption, .weekday-panel figcaption { margin-bottom: .75rem; font-weight: 700; }
.weekday-panel figcaption { display: grid; gap: .25rem; }
.metric-column-list { display: grid; grid-template-columns: repeat(var(--metric-column-count), minmax(0, 1fr)); align-items: end; gap: .35rem; min-height: 11rem; margin: 0; padding: .75rem .55rem .5rem; border-radius: .4rem; background: var(--chart-surface); color: var(--text-chart); list-style: none; }
.metric-column-list li { display: grid; grid-template-rows: auto 8rem auto; align-items: end; gap: .35rem; min-width: 0; text-align: center; }
.metric-vehicle-name { display: inline-flex; align-items: center; justify-content: center; min-width: 0; font-size: .75rem; line-height: 1.1; overflow-wrap: anywhere; }
.metric-column-track { display: flex; align-items: end; justify-content: center; height: 100%; border-bottom: 1px solid var(--text-chart-muted); }
.metric-column-track > span { display: block; width: min(68%, 2.1rem); min-height: 0; border-radius: .2rem .2rem 0 0; }
.metric-bar-track { display: block; height: .65rem; overflow: hidden; border-radius: 1rem; background: #dfe7e1; }
.metric-bar-track > span { display: block; height: 100%; border-radius: inherit; }
.metric-value { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric-unit { display: block; margin-top: .45rem; color: var(--text-chart-muted); font-size: .85rem; text-align: right; }
.weekday-average-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); gap: 1rem; }
.weekday-average-table { width: 100%; min-width: 36rem; }
.weekday-panel .table-scroll { border-color: var(--chart-border); background: var(--chart-surface); color: var(--text-chart); }
.weekday-panel thead { background: #dfe7e1; }
.weekday-panel th, .weekday-panel td { color: var(--text-chart); border-color: #c8d2ca; }
.weekday-average-table th, .weekday-average-table td { padding: .45rem; }
.weekday-average-table thead th { white-space: nowrap; }
.weekday-average-table thead th:not(:first-child) { text-align: center; }
.weekday-average-table .legend-swatch { width: .6rem; height: .6rem; margin-right: .3rem; vertical-align: .05em; }
.weekday-bar-value { display: grid; grid-template-columns: minmax(2rem, 1fr) auto; align-items: center; gap: .35rem; min-width: 5rem; }
.weekday-bar-value .metric-bar-track { height: .45rem; }
.weekday-bar-value strong, .weekday-bar-value small { font-variant-numeric: tabular-nums; white-space: nowrap; }
.weekday-bar-value small { grid-column: 2; color: var(--text-chart-muted); font-size: .75rem; text-align: right; }
.comparison-summary { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface-raised); }
.comparison-summary h3 { margin-top: 0; }
.comparison-summary ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .4rem 1.25rem; margin-bottom: 0; padding-left: 1.2rem; }
.comparison-summary li { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.comparison-summary .legend-swatch { flex: 0 0 auto; }
.comparison-delta { font-weight: 700; white-space: nowrap; }
.comparison-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.comparison-chart-panel { margin-top: .5rem; }
.comparison-vehicle-panel h4 { display: flex; align-items: center; gap: .4rem; margin: 0; }
.comparison-vehicle-panel .chart-panel { margin: .5rem 0 0; padding: .55rem; }
.comparison-vehicle-panel .comparison-chart { min-width: 0; }
.comparison-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.legend-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: .15rem; background: var(--series-color); }
.reading-events { margin: 0; padding-left: 1.2rem; }
.reading-events li + li { margin-top: .35rem; }
.muted { color: var(--text-muted); }

.sign-in-page {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  place-items: center;
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.sign-in-card {
  width: min(100%, 27rem);
  box-sizing: border-box;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: 0 1rem 3rem #0002;
}
.sign-in-header { margin-bottom: 1.75rem; }
.sign-in-brand { margin: 0 0 1.35rem; color: var(--accent); font-size: .95rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.sign-in-header h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.1rem); }
.sign-in-description { margin: .45rem 0 0; color: var(--text-muted); }
.sign-in-form { display: grid; gap: 1.1rem; }
.sign-in-field { display: grid; gap: .4rem; }
.sign-in-field label { font-weight: 650; }
.sign-in-field input { width: 100%; min-height: 2.9rem; }
.sign-in-form input[type="submit"] { width: 100%; min-height: 2.9rem; margin-top: .35rem; font-weight: 750; }
.sign-in-alert { margin: 0 0 1.25rem; padding: .7rem .8rem; border: 1px solid #8c3831; border-radius: .4rem; background: #8c383122; color: var(--danger); }

@media (max-width: 52rem) {
  .app-shell,
  .app-shell:has(> .app-sidebar > .sidebar-menu-toggle[aria-expanded="false"]) {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
  .app-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    width: 100%;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) { padding: .3rem .75rem; }
  .sidebar-menu-toggle,
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="false"]) > .sidebar-menu-toggle {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    justify-content: center;
    padding: .35rem .25rem;
  }
  .sidebar-menu-toggle > span:first-child { display: none; }
  .sidebar-menu-icon::before { content: "☰"; }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-menu-icon::before { content: "×"; }
  .sidebar-navigation-panel {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
  }
  .sidebar-navigation-panel > nav { display: contents; margin: 0; }
  .sidebar-section,
  .sidebar-account { display: contents; }
  .sidebar-section h2 { display: none; }
  .sidebar-section ul { display: flex; align-items: center; gap: .2rem; margin: 0; padding: 0; }
  .sidebar-section a,
  .sidebar-account .sidebar-logout-button {
    width: 2.35rem;
    min-height: 2.35rem;
    box-sizing: border-box;
    justify-content: center;
    gap: 0;
    padding: .45rem;
  }
  .sidebar-account form { margin: 0; }
  .sidebar-navigation-panel .sidebar-link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) > .sidebar-navigation-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: block;
    box-sizing: border-box;
    max-height: calc(100svh - 3.5rem);
    overflow-y: auto;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--sidebar);
    box-shadow: 0 .75rem 1.5rem #0006;
  }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-navigation-panel > nav { display: block; }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-section,
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-account { display: block; }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-section h2 { display: block; }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-section ul { display: block; margin: .2rem 0 .7rem; }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-section a,
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-account .sidebar-logout-button {
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
    gap: .65rem;
    padding: .5rem .65rem;
  }
  .app-sidebar:has(> .sidebar-menu-toggle[aria-expanded="true"]) .sidebar-navigation-panel .sidebar-link-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    clip-path: none;
  }
}

@media (max-width: 38rem) {
  .sidebar-navigation-panel > nav { margin-top: 0; }
  main { width: min(100% - 1.25rem, 64rem); padding-top: 1.25rem; }
  .overview-dashboard { grid-template-columns: 1fr; }
  .overview-family-card { min-height: 9rem; }
  .comparison-chart-grid { grid-template-columns: 1fr; }
  .vehicle-daily-chart-grid { grid-template-columns: 1fr; }
  .goal-reference-note { display: none; }
  .overview-vehicle-list li { grid-template-columns: minmax(6rem, .85fr) minmax(2.5rem, 1fr) minmax(4rem, auto); gap: .45rem; font-size: .9rem; }
  .summary-breakdown-list li { grid-template-columns: minmax(4.5rem, .8fr) minmax(2rem, 1.2fr) minmax(3.7rem, auto); gap: .4rem; font-size: .9rem; }
  .summary-breakdown--pie { grid-template-columns: minmax(3.25rem, .45fr) minmax(0, 1.55fr); gap: .4rem; padding: .5rem; }
  .total-period-input--range { grid-template-columns: auto minmax(0, 1fr); row-gap: .5rem; }
  .summary-pie { width: min(100%, 7rem); }
  .goal-card-heading { align-items: flex-start; }
  .goal-values { align-items: flex-start; flex-direction: column; gap: .1rem; }
  th, td { padding: .65rem .5rem; }
}