/* Шрифти: файли кладуться в wwwroot/fonts, без них працює системний шрифт */
@font-face {
  font-family: "Onest";
  src: url("/fonts/Onest-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("/fonts/Unbounded-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Unbounded", "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root {
  --bg: #0f1115;
  --surface: #181b22;
  --surface-2: #20242d;
  --border: #2a2f3a;
  --text: #e8eaed;
  --muted: #9aa0aa;
  --accent: #3ddc97;
  --accent-text: #08130e;
  --c-home: #4da3ff;
  --c-public: #ffb84d;
  --c-garage: #8b93a1;
  --c-service: #3ddc97;
  --c-fuel: #ff6b6b;
  --danger: #ff6b6b;
  --radius: 14px;
  --nav-height: 64px;
  --sidebar-width: 248px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent);
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}

.muted {
  color: var(--muted);
}

/* Каркас застосунку */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.avatar {
  flex: none;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 600;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1rem calc(var(--nav-height) + 2rem + env(safe-area-inset-bottom));
}

/* Нижнє меню */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}

.nav-item:hover,
.nav-item:focus-visible,
.nav-item.active {
  color: var(--text);
}

.nav-item.active {
  color: var(--accent);
}

.sheet {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(var(--nav-height) + 0.5rem + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sheet[hidden] {
  display: none;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}

.sheet-item:hover,
.sheet-item:focus-visible {
  background: var(--border);
}

.sheet-button {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Сторінки входу й реєстрації */
.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.auth-brand {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.auth-links {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

/* Форми */
.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
}

.field textarea {
  min-height: 5rem;
  resize: vertical;
}

.field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-check label {
  margin: 0;
}

.field-error,
.form-error {
  color: var(--danger);
  font-size: 0.875rem;
}

.form-error {
  margin-bottom: 1rem;
}

.form-error ul {
  margin: 0;
  padding-left: 1.1rem;
}

.button {
  display: inline-block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  filter: brightness(1.1);
}

.notice {
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.notice-link {
  display: block;
  margin-top: 0.5rem;
  word-break: break-all;
  user-select: all;
}

/* Таблиці */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table th,
.table td {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.table th {
  color: var(--muted);
  font-weight: 500;
}

.section-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.1rem;
}

[hidden] {
  display: none !important;
}

/* Списки, підсумки та кнопки на сторінках даних */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.page-head h1 {
  margin: 0;
}

.button-small {
  width: auto;
  padding: 0.5rem 1rem;
}

.button-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.form {
  max-width: 480px;
}

.form-secondary {
  max-width: 480px;
  margin-top: 1rem;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-item {
  margin-bottom: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.list-item-archived {
  opacity: 0.6;
}

.list-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.85rem 1rem;
  color: inherit;
  text-decoration: none;
}

.list-link:hover,
.list-link:focus-visible {
  background: var(--surface-2);
  border-radius: var(--radius);
}

.list-title {
  font-weight: 600;
}

.summary {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.summary > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}

.summary strong {
  font-size: 1rem;
}

/* Дашборд */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}

.kpi-value {
  font-size: 1.25rem;
  color: var(--text);
}

.chart {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.chart figcaption {
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-bar {
  fill: var(--accent);
}

.chart-value {
  fill: var(--text);
  font-size: 9px;
}

.chart-label {
  fill: var(--muted);
  font-size: 9px;
}

@media (min-width: 600px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 0.75rem;
}

@media (min-width: 600px) {
  .filters {
    grid-template-columns: 1fr 1fr;
  }
}

/* Календар вибору дати */
.field.has-datepicker {
  position: relative;
}

.dp-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  width: 280px;
  max-width: 100%;
  margin-top: 4px;
  padding: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.dp-popup[hidden] {
  display: none;
}

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.dp-title {
  font-weight: 600;
}

.dp-nav,
.dp-today,
.dp-day {
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.dp-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.25rem;
  line-height: 1;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.dp-weekday {
  padding: 0.25rem 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.dp-day {
  height: 34px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.dp-nav:hover,
.dp-day:hover,
.dp-today:hover,
.dp-nav:focus-visible,
.dp-day:focus-visible,
.dp-today:focus-visible {
  background: var(--border);
}

.dp-day-today {
  border: 1px solid var(--accent);
}

.dp-day-selected,
.dp-day-selected:hover {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.dp-today {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.4rem;
  border-radius: 8px;
  color: var(--accent);
}

/* Кольори серій діаграм */
.s-home { --c: var(--c-home); }
.s-public { --c: var(--c-public); }
.s-garage { --c: var(--c-garage); }
.s-service { --c: var(--c-service); }
.s-fuel { --c: var(--c-fuel); }

.chart-seg { fill: var(--c); }

.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot { fill: var(--c); }

.donut-track {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 22;
}

.donut-slice {
  fill: none;
  stroke: var(--c);
  stroke-width: 22;
}

.donut-center {
  fill: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.4rem;
  border-radius: 3px;
  background: var(--c);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.8rem;
}

.legend-column { flex-direction: column; }

.donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.donut .legend {
  align-self: stretch;
  min-width: 0;
}

.donut .legend li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.donut svg {
  width: 160px;
  max-width: 100%;
}

/* Дашборди: на телефоні перемикаються свайпом, на широких екранах стоять сіткою */
.dash-track {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dash-track::-webkit-scrollbar { display: none; }

.dash-card {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scroll-snap-align: center;
}

.dash-card .chart {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Однакова висота карток: графік по вертикалі центрується в залишку місця */
.dash-card .chart figcaption + * { margin-top: auto; }

.dash-card .chart > :last-child { margin-bottom: auto; }

.dash-title,
.dash-card .chart figcaption {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.stat-list { display: flex; flex-direction: column; }

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.stat-row:last-child { border-bottom: 0; }

.stat-row span { color: var(--muted); }

.stat-row strong {
  text-align: right;
  white-space: nowrap;
}

.dash-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}

.dash-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
}

.dash-dot[aria-current="true"] { background: var(--accent); }

@media (min-width: 700px) {
  .dash-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    align-items: stretch;
    gap: 1rem;
    overflow: visible;
  }

  .dash-card { flex: none; }

  .dash-dots { display: none; }
}

.sheet-icon { flex: none; }

/* Налаштування порядку меню */
.menu-order {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.menu-order li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.menu-order .menu-title { flex: 1; }

.menu-order form {
  flex: none;
  margin: 0;
}

/* Кнопки вгору/вниз вузькі й стоять поруч з назвою пункту */
.menu-order li {
  gap: 0.35rem;
}

.menu-order .menu-title {
  flex: 1;
  min-width: 0;
  margin-right: 0.5rem;
}

.menu-order .button-small {
  width: 2.75rem;
  min-width: 0;
  padding-inline: 0;
}

.menu-order li > svg { flex: none; }

/* На ПК список вужчий, щоб кнопки стояли поруч із назвою */
@media (min-width: 900px) {
  .menu-order,
  .menu-order-reset { max-width: 30rem; }
}

/* Бічна панель на ПК: групи пунктів, налаштування, профіль і версія внизу */
.sidebar {
  display: none;
}

@media (min-width: 900px) {
  .bottom-nav,
  .topbar {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    padding: 1.25rem 0.75rem 0.75rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }

  .page {
    max-width: none;
    margin-left: var(--sidebar-width);
    padding: 1.5rem 2rem 2rem;
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.75rem 1.25rem;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.sidebar-brand svg {
  color: var(--accent);
}

.sidebar-nav {
  flex: 1 1 auto;
}

.sidebar-group + .sidebar-group {
  margin-top: 1.25rem;
}

.sidebar-group-title {
  padding: 0 0.75rem 0.4rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.sidebar-link svg {
  flex: none;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: var(--surface-2);
  color: var(--text);
}

.sidebar-link.active {
  background: var(--surface-2);
  color: var(--text);
}

.sidebar-link.active svg {
  color: var(--accent);
}

.sidebar-footer {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.sidebar-user-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

.sidebar-user form {
  margin: 0;
}

.sidebar-logout {
  display: inline-flex;
  padding: 0.35rem;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.sidebar-logout:hover,
.sidebar-logout:focus-visible {
  background: var(--surface-2);
  color: var(--danger);
}

.sidebar-version {
  padding: 0.25rem 0.75rem 0;
  color: var(--muted);
  font-size: 0.72rem;
}

/* Інтерактивність графіків: підсвітка серії, підказка, пунктир середнього */
.chart [data-series] { transition: opacity 0.15s ease, filter 0.15s ease; }

.chart.hl [data-series]:not(.on) { opacity: 0.25; }

.chart [data-tip] { cursor: pointer; }

.chart [data-tip]:hover { filter: brightness(1.12); }

.legend li[data-series] { cursor: default; }

.chart-tip {
  position: fixed;
  z-index: 100;
  max-width: 260px;
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: pre-line;
  pointer-events: none;
}

.chart-tip[hidden] { display: none; }

.chart-ref {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.chart-ref-label {
  fill: var(--muted);
  font-size: 9px;
}

/* Картки та розкладка сторінок на широких екранах */
.card {
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card .section-title:first-child { margin-top: 0; }

.card-secondary { margin-top: 0.75rem; }

.button-inline { display: inline-block; }

.settings-grid { display: block; }

@media (min-width: 900px) {
  .form,
  .form-secondary {
    max-width: 640px;
  }

  .form {
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .form-secondary { padding: 0; }

  .list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 0.75rem;
  }

  .list-item { margin-bottom: 0; }

  .list-link { height: 100%; }

  /* Картки налаштувань у два стовпці: у кожному ряду однакової висоти */
  .settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    max-width: 1100px;
  }

  .settings-grid .card {
    margin-bottom: 0;
  }

  .settings-save {
    width: auto;
    min-width: 200px;
    margin-top: 1rem;
  }

  /* Ширина однієї колонки сітки налаштувань, щоб блок збігався з карткою «Гараж» */
  .card-secondary {
    width: calc((min(100%, 1100px) - 1rem) / 2);
    max-width: none;
    margin-top: 1rem;
    box-sizing: border-box;
  }
}

/* Фото профілю */
.avatar { overflow: hidden; }

.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-lg {
  flex: none;
  width: 72px;
  height: 72px;
  font-size: 1.75rem;
}

.photo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.photo-actions form { margin: 0; }

.photo-pick { cursor: pointer; }

@media (min-width: 900px) {
  .photo-card { max-width: 1100px; }
}

/* Заголовки та акценти відображаються display-шрифтом */
h1,
.sidebar-brand,
.brand,
.kpi-value,
.section-title {
  font-family: var(--font-display);
}

h1 { font-size: 1.35rem; letter-spacing: -0.01em; }

.kpi-value { font-size: 1.15rem; }

button,
input,
select,
textarea { font-family: inherit; }

/* Анімації появи та взаємодії */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes grow-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.92) rotate(-25deg); }
  to { opacity: 1; transform: none; }
}

/* Режим backwards не лишає transform після завершення, тому fixed-елементи всередині не ламаються */
.page > * {
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.page > :nth-child(2) { animation-delay: 0.1s; }
.page > :nth-child(3) { animation-delay: 0.2s; }
.page > :nth-child(4) { animation-delay: 0.3s; }
.page > :nth-child(n+5) { animation-delay: 0.4s; }

.kpi,
.list-item,
.dash-card,
.card,
.summary > div {
  animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.kpi:nth-child(2), .list-item:nth-child(2), .dash-card:nth-child(2) { animation-delay: 0.1s; }
.kpi:nth-child(3), .list-item:nth-child(3), .dash-card:nth-child(3) { animation-delay: 0.2s; }
.kpi:nth-child(4), .list-item:nth-child(4), .dash-card:nth-child(4) { animation-delay: 0.3s; }
.kpi:nth-child(5), .list-item:nth-child(5), .dash-card:nth-child(5) { animation-delay: 0.4s; }
.kpi:nth-child(n+6), .list-item:nth-child(n+6), .dash-card:nth-child(n+6) { animation-delay: 0.5s; }

.chart-bar,
.chart-seg {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: grow-y 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.donut svg { animation: pop-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards; }

.list-item,
.kpi,
.dash-card,
.card {
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.list-item:hover,
.kpi:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.button {
  transition: transform 0.15s ease, filter 0.15s ease, background-color 0.2s ease;
}

.button:hover { filter: brightness(1.08); transform: translateY(-1px); }

.button:active { transform: translateY(0) scale(0.98); }

.field input,
.field select,
.field textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Редагування значень прямо в рядках таблиць */
.cell-input {
  width: 7.5rem;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

.cell-input-narrow { width: 5.5rem; }

.cell-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.row-actions {
  display: flex;
  gap: 0.4rem;
}

.row-actions form { margin: 0; }

/* Стовпчики будуються по черзі зліва направо */
.chart rect:nth-of-type(1) { animation-delay: 0.13s; }
.chart rect:nth-of-type(2) { animation-delay: 0.16s; }
.chart rect:nth-of-type(3) { animation-delay: 0.19s; }
.chart rect:nth-of-type(4) { animation-delay: 0.22s; }
.chart rect:nth-of-type(5) { animation-delay: 0.25s; }
.chart rect:nth-of-type(6) { animation-delay: 0.28s; }
.chart rect:nth-of-type(7) { animation-delay: 0.31s; }
.chart rect:nth-of-type(8) { animation-delay: 0.34s; }
.chart rect:nth-of-type(9) { animation-delay: 0.37s; }
.chart rect:nth-of-type(10) { animation-delay: 0.40s; }
.chart rect:nth-of-type(11) { animation-delay: 0.43s; }
.chart rect:nth-of-type(12) { animation-delay: 0.46s; }
.chart rect:nth-of-type(13) { animation-delay: 0.49s; }
.chart rect:nth-of-type(14) { animation-delay: 0.52s; }
.chart rect:nth-of-type(15) { animation-delay: 0.55s; }
.chart rect:nth-of-type(16) { animation-delay: 0.58s; }
.chart rect:nth-of-type(17) { animation-delay: 0.61s; }
.chart rect:nth-of-type(18) { animation-delay: 0.64s; }
.chart rect:nth-of-type(19) { animation-delay: 0.67s; }
.chart rect:nth-of-type(20) { animation-delay: 0.70s; }
.chart rect:nth-of-type(21) { animation-delay: 0.73s; }
.chart rect:nth-of-type(22) { animation-delay: 0.76s; }
.chart rect:nth-of-type(23) { animation-delay: 0.79s; }
.chart rect:nth-of-type(24) { animation-delay: 0.82s; }
.chart rect:nth-of-type(25) { animation-delay: 0.85s; }
.chart rect:nth-of-type(26) { animation-delay: 0.88s; }
.chart rect:nth-of-type(27) { animation-delay: 0.91s; }
.chart rect:nth-of-type(28) { animation-delay: 0.94s; }
.chart rect:nth-of-type(29) { animation-delay: 0.97s; }
.chart rect:nth-of-type(30) { animation-delay: 1.00s; }
.chart rect:nth-of-type(31) { animation-delay: 1.03s; }
.chart rect:nth-of-type(32) { animation-delay: 1.06s; }
.chart rect:nth-of-type(33) { animation-delay: 1.09s; }
.chart rect:nth-of-type(34) { animation-delay: 1.12s; }
.chart rect:nth-of-type(35) { animation-delay: 1.15s; }
.chart rect:nth-of-type(36) { animation-delay: 1.18s; }

/* Архів по місяцях: картки з полями, одна кнопка збереження для всіх */
.archive-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.archive-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.archive-month {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
}

.archive-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.archive-field input {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
}

.archive-field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.archive-delete {
  grid-column: 1 / -1;
  justify-self: end;
  padding: 0.3rem 0.8rem;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Кнопка збереження завжди видна внизу екрана, над нижнім меню на телефоні */
.sticky-actions {
  position: sticky;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 0.5rem);
  z-index: 5;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

@media (min-width: 900px) {
  .archive-row {
    grid-template-columns: 6rem repeat(5, minmax(0, 1fr)) auto;
    align-items: end;
  }

  .archive-month { grid-column: auto; align-self: center; }

  .archive-delete { grid-column: auto; justify-self: auto; }

  .sticky-actions { bottom: 0; max-width: 320px; }
}

/* Архів: згортувані місяці з коротким підсумком у заголовку */
.archive-row {
  display: block;
  padding: 0;
}

.archive-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
}

.archive-summary::-webkit-details-marker { display: none; }

.archive-summary::after {
  content: "›";
  flex: none;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.archive-row[open] > .archive-summary::after { transform: rotate(90deg); }

.archive-brief {
  flex: 1;
  text-align: right;
  color: var(--muted);
  font-size: 0.85rem;
}

.archive-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.75rem;
  padding: 0 1rem 1rem;
}

.archive-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.archive-actions .button { width: auto; }

.archive-tools {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.archive-toggle {
  padding: 0.35rem 0.8rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.archive-toggle:hover { color: var(--text); border-color: var(--accent); }

@media (min-width: 900px) {
  .archive-row {
    display: block;
    grid-template-columns: none;
  }

  .archive-fields {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
  }

  .archive-actions { grid-column: 1 / -1; }
}

.loss-preview {
  margin: 0.4rem 0 0;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
}

.loss-preview:empty { display: none; }

/* Перевірка пробігу в архіві */
.check-ok td:last-child { color: var(--accent); }

.check-bad td:last-child {
  color: var(--danger);
  font-weight: 600;
}

/* Ціни палива: компактні рядки з окремим збереженням */
.fuel-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fuel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  align-items: end;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fuel-row .archive-month { grid-column: 1 / -1; }

/* Список цін усередині групи року: одна колонка, картки на фоні сторінки */
.fuel-list-group { padding: 0.75rem; }

.fuel-list-group .fuel-row { background: var(--bg); }

.fuel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fuel-actions .button { width: auto; }

@media (min-width: 900px) {
  .fuel-row {
    grid-template-columns: 6rem minmax(0, 12rem) auto;
  }

  .fuel-row .archive-month { grid-column: auto; align-self: center; }
}

.fix-form { margin-top: 1rem; }

.fix-form .muted { margin: 0.5rem 0 0; font-size: 0.85rem; }

/* Прозора зона наведення на групу стовпчиків */
.chart-hit { fill: transparent; }

.chart-hit:hover { fill: rgb(255 255 255 / 0.04); }

.chart [data-tip].chart-hit:hover { filter: none; }

/* Таблиця перевірки пробігу вміщується на екран телефона без прокрутки вбік */
.check-table th,
.check-table td {
  padding: 0.5rem 0.3rem;
  white-space: normal;
}

.check-table th {
  font-size: 0.75rem;
  line-height: 1.2;
  vertical-align: bottom;
}

.check-table td { font-size: 0.9rem; }

.check-table td:last-child,
.check-table th:last-child { text-align: right; }

@media (max-width: 480px) {
  .check-table { table-layout: fixed; }

  .check-table th:first-child,
  .check-table td:first-child { width: 22%; }
}

/* Зарядки: групи по місяцях, які можна згортати */
.month-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.month-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.month-group > .archive-summary { padding: 0.85rem 1rem; }

.month-group[open] > .archive-summary::after { transform: rotate(90deg); }

.month-group[open] > .archive-summary {
  border-bottom: 1px solid var(--border);
}

.month-list {
  padding: 0.75rem;
  margin: 0;
}

.month-group .list-item { background: var(--bg); }

@media (min-width: 900px) {
  .month-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.6rem;
  }
}

/* Кнопка «Назад» у заголовках сторінок */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.back-link:hover,
.back-link:focus-visible {
  border-color: var(--accent);
  transform: translateX(-2px);
}

/* Однакові розміри малих кнопок на всіх сторінках */
.button-small,
.archive-delete {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 9.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.photo-actions { flex-direction: column; align-items: stretch; }

.photo-actions .button-small { width: 100%; }

/* Рядки дашбордів із формулою: невеликий значок «i» і підказка по кліку */
.stat-row[data-formula] { cursor: pointer; }

.stat-row[data-formula] > span::after {
  content: "i";
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-left: 0.45rem;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  color: var(--muted);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  vertical-align: -2px;
}

.stat-row[data-formula]:hover > span,
.stat-row[data-formula]:focus-visible > span { color: var(--text); }

.stat-row[data-formula]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Підказка з формулою: назва, мітка й формула моноширинним шрифтом у виділеному блоці */
.chart-tip-formula {
  max-width: 320px;
  padding: 0.65rem 0.8rem;
  white-space: normal;
}

.tip-title {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.tip-caption {
  margin-bottom: 0.25rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tip-formula {
  padding: 0.5rem 0.65rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}

.stat-row[data-formula]:focus:not(:focus-visible) { outline: none; }

/* Єдиний розмір підказок і підписів полів */
.field .muted,
p.muted {
  font-size: 0.875rem;
  line-height: 1.45;
}

.field-check label { font-size: 0.875rem; }

/* Таблиці в картці, як і решта блоків */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 0.75rem;
}

.card .table-wrap {
  background: none;
  border: 0;
  padding: 0;
}

.table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr { transition: background-color 0.15s ease; }

.table tbody tr:hover { background: var(--surface-2); }

/* Фільтри (авто, категорія) у картці на ПК */
.filters {
  margin-bottom: 0.5rem;
}

/* Сторінки входу й реєстрації */
.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.auth-card {
  padding: 1.75rem 1.5rem;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.25);
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.auth-card h1 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.auth-links a { text-decoration: none; }

.auth-links a:hover { text-decoration: underline; }

/* Вибір місяця: сітка 3x4 */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.mp-grid .dp-day { height: 40px; }

/* «Назад» зліва над заголовком і закріплена під час прокручування */
.page-head:has(.back-link) {
  display: contents;
}

.page-head:has(.back-link) .back-link {
  position: sticky;
  top: calc(4.2rem + env(safe-area-inset-top));
  z-index: 9;
  display: flex;
  width: fit-content;
  margin-bottom: 0.75rem;
  /* Суцільний фон як у шапки, щоб вміст під кнопкою не просвічував */
  background: var(--bg);
  border-color: var(--border);
  box-shadow: 0 0 0 0.4rem var(--bg);
}

.page-head:has(.back-link) h1 {
  order: 0;
  margin: 0 0 0.75rem;
}

@media (min-width: 900px) {
  .page-head:has(.back-link) .back-link {
    top: 0.75rem;
  }
}

/* Ціни палива на вузьких екранах: поле й кнопки на всю ширину */
@media (max-width: 899px) {
  .fuel-row .fuel-price,
  .fuel-row .fuel-actions {
    grid-column: 1 / -1;
  }

  .fuel-actions .button,
  .fuel-actions .archive-delete {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
}

/* Усі форми й фільтри оформлені як картки */
.form,
.filters {
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.form {
  margin-bottom: 0.75rem;
}

.filters {
  margin-bottom: 1rem;
}

.card .form,
.card .filters {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  animation: none;
}

.form-secondary {
  padding: 0;
}

.page-head + .notice,
.notice {
  border-radius: var(--radius);
}

.loss-info-title { display: block; font-size: 0.875rem; }
.loss-info .muted { margin: 0.25rem 0 0; }

/* Рахунок за електроенергію в групі місяця */
.month-bill {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.75rem 0.75rem 0;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.month-bill-empty {
  margin: 0;
  font-size: 0.9rem;
}

.month-bill .button-small { align-self: stretch; }

.bill-table {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.3rem 1.5rem;
  align-items: baseline;
}

.bill-head {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: right;
}

.bill-label { font-weight: 600; }

.bill-label-muted,
.bill-value-muted {
  color: var(--muted);
  font-weight: 400;
}

.bill-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (min-width: 600px) {
  .month-bill {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .month-bill .button-small { align-self: center; }

  .bill-table { min-width: 22rem; }
}

/* Підсумок місяця в заголовку групи */
.month-stats {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0.5rem;
}

.month-stat {
  padding: 0.15rem 0.6rem;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.month-stat b { color: var(--text); font-weight: 600; }

.month-stat-bill {
  color: var(--accent-text);
  background: var(--accent);
  font-weight: 600;
}

/* Картка зарядки: зліва дата й опис, справа кВт·год і сума */
.charge-link {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.charge-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.charge-meta { font-size: 0.8rem; }

.charge-values {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.charge-kwh { font-weight: 600; }

.charge-kwh small,
.charge-cost {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
}

/* Діапазон місяців на дашбордах */
.range-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.range-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.chip:hover,
.chip:focus-visible { border-color: var(--accent); }

.chip-active {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.range-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.75rem;
  align-items: stretch;
}

.range-fields .field { margin: 0; }

.range-submit {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
}

.range-submit label { display: none; }

.range-submit .button-small {
  flex: 1;
  min-height: 3rem;
  font-size: 1rem;
}

.range-note { margin: 0; font-size: 0.85rem; }

@media (min-width: 700px) {
  .range-fields {
    grid-template-columns: minmax(0, 11rem) minmax(0, 11rem) auto;
    justify-content: start;
  }

  .range-submit { grid-column: auto; }

  .range-submit label {
    display: block;
    visibility: hidden;
  }

  .range-submit .button-small {
    min-height: 0;
    min-width: 0;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

/* Обране авто в шапці та бічному меню */
.topbar-vehicle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 0.75rem;
  padding: 0.3rem 0.7rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
}

.topbar-vehicle svg { flex: none; color: var(--accent); }

.topbar-vehicle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-vehicle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.75rem 1rem;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
  text-decoration: none;
}

.sidebar-vehicle svg { flex: none; color: var(--accent); }

.sidebar-vehicle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-vehicle:hover,
.topbar-vehicle:hover { border-color: var(--accent); }

/* Меню налаштувань у стилі списку розділів */
.profile-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.menu-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.menu-group-title {
  margin: 0 0 0.5rem 0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.menu-item:hover,
.menu-item:focus-visible {
  border-color: var(--accent);
  transform: translateX(2px);
}

.menu-icon { flex: none; color: var(--muted); }

.menu-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.menu-title { font-weight: 600; }

.menu-hint {
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-chevron { flex: none; color: var(--muted); }

.menu-logout {
  margin-top: 1.5rem;
  text-align: center;
}

.menu-logout .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 900px) {
  .menu-groups,
  .menu-logout,
  .profile-card { max-width: 560px; }

  .menu-logout { text-align: left; }

}

/* Вибір авто в налаштуваннях */
.vehicle-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vehicle-option-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.vehicle-option-button:hover,
.vehicle-option-button:focus-visible { border-color: var(--accent); }

.vehicle-option-active .vehicle-option-button { border-color: var(--accent); }

.vehicle-option-title { font-weight: 600; }

.vehicle-option-badge {
  margin-left: auto;
  padding: 0.15rem 0.6rem;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

@media (min-width: 900px) {
  .vehicle-options { max-width: 480px; }
}

/* Вибір теми */
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 480px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.theme-option:hover,
.theme-option:focus-visible,
.theme-option-active { border-color: var(--accent); }

.theme-option-active { box-shadow: 0 0 0 1px var(--accent) inset; }

.theme-swatch {
  width: 100%;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.theme-swatch-light { background: linear-gradient(135deg, #ffffff 60%, #12a56b 60%); }

.theme-swatch-dark { background: linear-gradient(135deg, #181b22 60%, #3ddc97 60%); }

.theme-swatch-auto { background: linear-gradient(115deg, #ffffff 50%, #181b22 50%); }

.theme-option-title { font-size: 0.85rem; }

/* Світла тема: явна або за налаштуванням пристрою, якщо тему не обрано */
:root[data-theme="light"] {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #edf0f5;
  --border: #dbe0e8;
  --text: #1a1d23;
  --muted: #5d6573;
  --accent: #0f9d63;
  --accent-text: #ffffff;
  --c-home: #1f7ae0;
  --c-public: #d98200;
  --c-garage: #6b7380;
  --c-service: #0f9d63;
  --c-fuel: #e04646;
  --danger: #d63a3a;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #edf0f5;
    --border: #dbe0e8;
    --text: #1a1d23;
    --muted: #5d6573;
    --accent: #0f9d63;
    --accent-text: #ffffff;
    --c-home: #1f7ae0;
    --c-public: #d98200;
    --c-garage: #6b7380;
    --c-service: #0f9d63;
    --c-fuel: #e04646;
    --danger: #d63a3a;
    color-scheme: light;
  }
}

:root[data-theme="light"] .chart-hit:hover { fill: rgb(0 0 0 / 0.05); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .chart-hit:hover { fill: rgb(0 0 0 / 0.05); }
}

/* Рядок авто: вибір і швидка зміна */
.vehicle-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.vehicle-row .vehicle-option { flex: 1; min-width: 0; }

.vehicle-row .vehicle-option { display: block; color: inherit; text-decoration: none; }

.vehicle-select {
  height: 100%;
  padding: 0 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.vehicle-select:hover,
.vehicle-select:focus-visible { border-color: var(--accent); }

.vehicle-row form { display: flex; margin: 0; }

/* Фільтри списку зарядок */
.filter-card { padding: 0; }

.filter-summary {
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.1rem 1rem;
}

.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.75rem;
}

.filter-grid .field { margin: 0; }

.filter-wide { grid-column: 1 / -1; }

.filter-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

@media (min-width: 900px) {
  .filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .filter-wide { grid-column: auto; }
}

/* Ціни палива на ПК: список тієї ж ширини, що й форма додавання ціни */
@media (min-width: 900px) {
  .fuel-form { max-width: 640px; }

  .fuel-form .settings-save,
  .fuel-form .sticky-actions .button { width: auto; min-width: 200px; }
}

/* Поле вибору файлу в стилі сайту */
input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

input[type="file"]:hover,
input[type="file"]:focus-visible { border-color: var(--accent); }

input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 1rem;
  color: var(--accent-text);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }

@media (min-width: 900px) {
  .filter-grid.filter-grid-two { grid-template-columns: repeat(2, minmax(0, 14rem)); }
}

/* Звіт у PDF: панель вибору розділів і кнопка */
.report-card { padding: 0; }

.report-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.1rem 1rem;
}

.report-body .muted { margin: 0; font-size: 0.85rem; }

.report-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.report-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.report-body .button-small { align-self: flex-start; }

.page-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.button-outline {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
}

.print-header { display: none; }

/* Друк: світлий звіт без меню й елементів керування */
@media print {
  @page { size: A4; margin: 12mm; }

  :root:root:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --border: #dbe0e8;
    --text: #1a1d23;
    --muted: #5d6573;
    --accent: #0f9d63;
    --accent-text: #ffffff;
    --c-home: #1f7ae0;
    --c-public: #d98200;
    --c-garage: #6b7380;
    --c-service: #0f9d63;
    --c-fuel: #e04646;
    color-scheme: light;
  }

  body { background: #fff; color: var(--text); }

  .topbar,
  .sidebar,
  .bottom-nav,
  .back-link,
  .range-form,
  .report-card,
  .filter-card,
  .archive-tools,
  .page-head-actions,
  .month-bill .button,
  .dash-dots,
  .dash-card[data-clone],
  .sticky-actions,
  .page > h1 { display: none !important; }

  .page,
  main.page {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .print-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
  }

  .print-header strong { font-size: 1.2rem; }

  .print-header span { color: var(--muted); font-size: 0.85rem; }

  .no-print-summary [data-report="summary"],
  .no-print-charts [data-report="charts"],
  .no-print-fuel [data-report="fuel"] { display: none !important; }

  .dash-track {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    overflow: visible !important;
    transform: none !important;
  }

  .dash-card,
  .month-group,
  .list-item,
  .stat-row {
    break-inside: avoid;
    animation: none !important;
    box-shadow: none !important;
  }

  .dash-card { flex: none; min-width: 0; border: 1px solid var(--border); }

  .month-groups { gap: 0.5rem; }

  .month-list { display: block !important; }

  .month-list .list-item { margin-bottom: 0.3rem; }

  a { color: inherit; text-decoration: none; }
}

/* Публічна сторінка перегляду статистики за посиланням */
.share-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.share-grid .dash-card { flex: none; min-width: 0; }

@media (min-width: 900px) {
  .share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
}

/* Керування посиланнями для перегляду */
.share-card,
.share-links { max-width: 560px; }

.share-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.share-link {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}

.share-link input { width: 100%; box-sizing: border-box; }

.share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.share-actions form { margin: 0; }

/* Поле з адресою посилання в стилі полів форм */
.share-link input[readonly] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  text-overflow: ellipsis;
}

.share-link input[readonly]:focus-visible {
  outline: none;
  border-color: var(--accent);
}

/* Швидке перемикання мови: у шапці на телефоні й у бічній панелі на комп'ютері */
.lang-switch { margin: 0; }

.topbar .lang-switch { margin-right: 0.6rem; }

.lang-button {
  min-width: 2.4rem;
  padding: 0.3rem 0.6rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.lang-button:hover,
.lang-button:focus-visible { border-color: var(--accent); }

.sidebar-footer .lang-switch { margin: 0.5rem 0 0; }

/* Кнопки в заголовку сторінки не мають розтягуватись до мінімальної ширини, щоб не виходити за екран */
.page-head { flex-wrap: wrap; }

.page-head-actions { flex: none; }

.page-head-actions .button-small {
  min-width: 0;
  padding-inline: 1rem;
}

/* Власний вибір файлу: рідне поле приховане, підписи не залежать від мови браузера */
.file-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
  padding: 0.5rem;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.file-picker:hover,
.file-picker:focus-within { border-color: var(--accent); }

.file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.file-picker-button {
  flex: none;
  padding: 0.5rem 1rem;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.file-picker-button:hover { filter: brightness(1.08); }

.file-picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Версія й перемикач мови в одному рядку внизу бічної панелі */
.sidebar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 0.75rem;
}

.sidebar-meta .sidebar-version { padding-top: 0; }

.sidebar-footer .sidebar-meta .lang-switch { margin: 0; }

/* На телефонах друк у PDF недоступний, тому замість нього «Поділитися PDF» */
@media screen and (max-width: 700px) and (pointer: coarse) {
  [data-print],
  .print-hint { display: none; }

  button.share-pdf-button { display: inline-flex; }
}

/* Приманка для ботів у формі реєстрації: поза екраном, але доступна для автозаповнення ботами */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Режим знімка для PDF на телефонах: те саме, що друк, але на екрані (спрацьовує на час створення файлу) */
body.capturing {
  background: #fff;
  color: var(--text);

  /* Без анімацій, інакше блоки, що з'явились, знімаються напівпрозорими */
  *, *::before, *::after { animation: none !important; transition: none !important; }

  .topbar,
    .sidebar,
    .bottom-nav,
    .back-link,
    .range-form,
    .report-card,
    .filter-card,
    .archive-tools,
    .page-head-actions,
    .month-bill .button,
    .dash-dots,
    .dash-card[data-clone],
    .sticky-actions,
    .page > h1 { display: none !important; }

    .page,
    main.page {
      max-width: none;
      margin: 0;
      padding: 0;
    }

    .print-header {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid var(--accent);
    }

    .print-header strong { font-size: 1.2rem; }

    .print-header span { color: var(--muted); font-size: 0.85rem; }

    &.no-print-summary [data-report="summary"],
    &.no-print-charts [data-report="charts"],
    &.no-print-fuel [data-report="fuel"] { display: none !important; }

    .dash-track {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem;
      overflow: visible !important;
      transform: none !important;
    }

    .dash-card,
    .month-group,
    .list-item,
    .stat-row {
      break-inside: avoid;
      animation: none !important;
      box-shadow: none !important;
    }

    .dash-card { flex: none; min-width: 0; border: 1px solid var(--border); }

    .month-groups { gap: 0.5rem; }

    .month-list { display: block !important; }

    .month-list .list-item { margin-bottom: 0.3rem; }

    a { color: inherit; text-decoration: none; }
}

/* Кнопка «Поділитися PDF» є лише на телефонах, де друк у PDF недоступний */
.share-pdf-button { display: none; }

.share-hint { display: none; }

@media screen and (max-width: 700px) and (pointer: coarse) {
  p.share-hint { display: block; }
}