:root {
  --brand: #0e7c66;
  --brand-deep: #0a5345;
  --ink: #12211d;
  --ink-soft: #4a5b56;
  --line: #e2e8e5;
  --bg: #f4f7f6;
  --card: #ffffff;
  --danger: #c0392b;
  --radius: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0; background: var(--brand-deep); color: #eafff8;
  padding: 22px 16px; display: flex; flex-direction: column; gap: 20px;
  /* Desktop: stay put while the content scrolls. */
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}

/* Mobile top bar + drawer scaffolding (hidden on desktop). */
.topbar { display: none; }
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; }
.backdrop[hidden] { display: none; }
.brand { font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.brand span { display: block; font-weight: 400; font-size: 12px; opacity: .7; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  color: #d6efe8; padding: 9px 12px; border-radius: 8px; font-size: 14px;
}
.sidebar nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.sidebar nav a.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.logout { margin-top: auto; border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; }
.logout .who { font-size: 13px; opacity: .8; margin-bottom: 8px; }
.logout button {
  width: 100%; background: rgba(255,255,255,.1); color: #fff; border: 0;
  padding: 8px; border-radius: 8px; cursor: pointer;
}

.content { flex: 1; min-width: 0; padding: 28px clamp(16px, 4vw, 40px); max-width: 1100px; }
h1 { font-size: 24px; margin: 0 0 18px; }
h2 { font-size: 18px; margin: 28px 0 12px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--brand); color: #fff; border: 0;
  padding: 9px 16px; border-radius: var(--radius); font-size: 14px; cursor: pointer;
}
.btn:hover { background: var(--brand-deep); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); }

/* Icons (Lucide) */
.icon, svg.lucide { width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }
.backlink, .tinylink, .pager a { display: inline-flex; align-items: center; gap: 5px; }

table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { background: #eef3f1; font-weight: 600; color: var(--ink-soft); }
tr:last-child td { border-bottom: 0; }
td.right, th.right { text-align: right; }
.muted { color: var(--ink-soft); }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; text-transform: capitalize; background: #eef3f1; color: var(--ink-soft); }
.pill.pending { background: #fff3d6; color: #8a6100; }
.pill.confirmed { background: #d8f5e8; color: #0a5345; }
.pill.completed { background: #dde7ff; color: #26418f; }
.pill.cancelled { background: #fadad6; color: #922; }
.pill.paid { background: #d8f5e8; color: #0a5345; }
.pill.unpaid { background: #fff3d6; color: #8a6100; }
.pill.refunded { background: #dde7ff; color: #26418f; }

/* Flags — things worth noticing on a reservation */
.flag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.flag.sm { padding: 1px 7px; font-size: 11px; }
.flag.soon { background: #ffe1c2; color: #8a4b00; }
.flag.oneway { background: #dde7ff; color: #26418f; }
.flag.warn { background: #fadad6; color: #922; }
.flag.block-maintenance { background: #ffe1c2; color: #8a4b00; }
.flag.block-out_of_service { background: #fadad6; color: #922; }
.flag.block-other { background: #eef3f1; color: var(--ink-soft); }

.linklike-danger { background: none; border: 0; color: var(--danger); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.block-add { margin-top: 18px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 8px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat-value { font-size: 26px; font-weight: 700; }
.stat-label { color: var(--ink-soft); font-size: 13px; }
.nowrap { white-space: nowrap; }
.section-warn { color: var(--danger); }
h2 + table { margin-bottom: 8px; }

/* Responsive form: fields flow into columns on wide screens instead of one
   stacked column with wasted space. Textareas / file inputs span the full row. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px 22px;
  align-items: start;
  max-width: 1000px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%;
}
.field input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.field textarea { min-height: 90px; resize: vertical; }
.field .helptext { font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.field-error { font-size: 12px; color: var(--danger); }
.field input:disabled {
  background: #eef3f1; color: var(--ink-soft); cursor: not-allowed;
}

/* Map-location helper (latitude/longitude) */
.map-helper { background: #f0f6f4; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.map-helper > label { color: var(--brand-deep); }
.map-helper-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map-helper-row .map-paste { flex: 1; min-width: 200px; }
.map-helper-row .btn { white-space: nowrap; text-decoration: none; }
.actions { display: flex; gap: 10px; margin-top: 16px; }

.search { display: flex; gap: 8px; margin-bottom: 16px; }
.search input { flex: 1; max-width: 360px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; }
.pager { display: flex; gap: 14px; align-items: center; margin-top: 14px; color: var(--ink-soft); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card h3 { margin: 0 0 12px; font-size: 15px; }
.card dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; margin: 0; font-size: 14px; }
.card dt { color: var(--ink-soft); }
.card dd { margin: 0; }
table.mini { border: 0; }
table.mini td { border: 0; padding: 4px 0; }
table.mini tr.total td { font-weight: 700; border-top: 1px solid var(--line); }
.danger-form { margin-top: 8px; }

/* Reservation detail */
.res-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.backlink { font-size: 13px; }
.res-code { font: 700 1.9rem var(--font-mono, ui-monospace, monospace); letter-spacing: .04em; margin: 4px 0 8px; }
.res-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.res-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.summary-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stile-label { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.stile-value { font-size: 1.25rem; font-weight: 700; margin-top: 3px; }
.stile-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; text-transform: capitalize; }
.stile-sub.muted-warn { color: #8a6100; font-weight: 600; }
.tile-badge { display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef3f1; color: var(--ink-soft); }
.tile-badge.soon { background: #ffe1c2; color: #8a4b00; }

.card-wide { grid-column: 1 / -1; }
.veh-row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.veh-thumb img, .veh-thumb span { width: 84px !important; height: 54px !important; }
.veh-name { font-weight: 700; font-size: 16px; }
.veh-specs { font-size: 13px; color: var(--ink-soft); text-transform: capitalize; }
.tinylink { font-size: 12px; }

.route { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.loc-block { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.loc-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-deep); font-weight: 700; margin-bottom: 4px; }
.loc-name { font-weight: 600; }
.loc-meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.route-arrow { display: flex; align-items: center; font-size: 22px; color: var(--ink-faint, #9aa7a2); }

.driver-name { font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.contact-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.contact-actions .btn { text-decoration: none; text-align: left; word-break: break-all; }
.mono { font-family: var(--font-mono, ui-monospace, monospace); }

.res-actionbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 18px;
}
.res-actionbar form { margin: 0; }
.res-actionbar .btn { padding: 7px 12px; font-size: 13px; }
.bar-label { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); font-weight: 600; }
.bar-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* Tabbed form (vehicle add/edit) */
.tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 16px; margin-bottom: -1px; font: 600 14px inherit;
  color: var(--ink-soft); cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand-deep); border-bottom-color: var(--brand); }
.tab[data-has-error] { color: var(--danger); }
.tab[data-has-error]::after { content: " !"; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Vehicle photo gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  max-width: 1000px;
  margin-top: 6px;
}
.photo-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-del-form { position: absolute; top: 6px; right: 6px; margin: 0; }
.photo-del {
  width: 26px; height: 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(18, 33, 29, .66); color: #fff; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.photo-del:hover { background: var(--danger); }
.photo-badge {
  position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.9); color: var(--brand-deep); padding: 2px 8px; border-radius: 999px;
}
.photo-add { margin: 0; }
.photo-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 16 / 10; border: 2px dashed var(--line); border-radius: 10px; cursor: pointer;
  color: var(--ink-soft); background: #fff; transition: border-color .15s, color .15s;
}
.photo-placeholder:hover { border-color: var(--brand); color: var(--brand); }
.photo-placeholder .plus { font-size: 28px; line-height: 1; }
.photo-placeholder .add-label { font-size: 13px; font-weight: 600; }
.photo-placeholder input[type="file"] { display: none; }
.photos-hint { margin-top: 10px; font-size: 13px; }

/* Availability calendar */
.cal-nav { display: flex; gap: 8px; }
.cal-nav .btn { text-decoration: none; }
.cal-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--ink-soft); font-size: 14px; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.legend-key { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--line); }
.swatch.reserved { background: #2E8FB8; border-color: #2E8FB8; }
.swatch.maintenance { background: #f0a24a; border-color: #f0a24a; }
.swatch.out_of_service { background: #b0483b; border-color: #b0483b; }
.swatch.free { background: #fff; }

.cal-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.cal { border-collapse: collapse; width: max-content; min-width: 100%; }
.cal th, .cal td { border: 1px solid var(--line); }
.cal th.cal-veh {
  position: sticky; left: 0; z-index: 2; background: #eef3f1; text-align: left;
  min-width: 180px; padding: 8px 12px; font-size: 13px;
}
.cal tbody th.cal-veh { background: var(--card); font-weight: 600; }
.cal-count { display: block; font-weight: 400; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.cal th.cal-day {
  width: 30px; min-width: 30px; padding: 4px 0; text-align: center; background: #eef3f1;
  font-weight: 600; color: var(--ink-soft); line-height: 1.15;
}
.cal th.cal-day .dow { display: block; font-size: 10px; text-transform: uppercase; opacity: .7; }
.cal th.cal-day .dom { display: block; font-size: 12px; }
.cal th.cal-day.weekend { background: #e6ede9; }
.cal th.cal-day.today { background: #ffe1c2; color: #8a4b00; }

.cal td.cal-cell { position: relative; height: 34px; background: #fff; }
.cal td.cal-cell.weekend { background: #f6f9f7; }
.cal td.cal-cell.reserved { background: #2E8FB8; border-color: #2E8FB8; }
.cal td.cal-cell.maintenance { background: #f0a24a; border-color: #f0a24a; }
.cal td.cal-cell.out_of_service { background: #b0483b; border-color: #b0483b; }
.cal td.cal-cell.other { background: #9aa7a2; border-color: #9aa7a2; }
.cal td.cal-cell.today { box-shadow: inset 0 0 0 2px #f0a24a; }
.cal-code {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  font: 600 10px var(--font-mono, ui-monospace, monospace); color: #fff;
  white-space: nowrap; pointer-events: none; z-index: 1;
}

/* User access form */
.access-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-top: 18px; max-width: 680px; }
.full-access { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.full-access span { font-weight: 400; color: var(--ink-soft); }
.section-perms { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.perm-table { border: 0; background: none; }
.perm-table th { background: none; font-weight: 600; text-align: left; padding: 8px 16px 8px 0; border: 0; color: var(--ink); white-space: nowrap; }
.perm-table td { border: 0; padding: 8px 0; }
.perm-table td ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.perm-table td ul li label { font-weight: 400; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }

.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.flash.error { background: #fadad6; color: #922; }
.flash.success { background: #d8f5e8; color: #0a5345; }

/* Login */
.login-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px;
  background: linear-gradient(160deg, #0a5345 0%, #0e7c66 55%, #13715f 100%);
}
.login-card {
  width: 100%; max-width: 360px; background: var(--card);
  border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(6, 40, 33, .35);
}
.login-head { background: var(--brand-deep); color: #eafff8; padding: 22px 26px; }
.login-head .brand { font-weight: 700; font-size: 20px; }
.login-head .brand span { display: block; font-weight: 400; font-size: 12px; opacity: .72; margin-top: 2px; }
.login-form { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.login-title { font-size: 18px; margin: 0; color: var(--ink); }
.login-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.login-field input {
  font: 400 15px inherit; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; color: var(--ink);
}
.login-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 124, 102, .15); }
.login-submit { width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; }

/* ── Responsive: below this width the sidebar becomes a slide-in drawer ── */
@media (max-width: 820px) {
  .topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 30;
    background: var(--brand-deep); color: #eafff8; padding: 10px 14px;
  }
  .topbar-brand { font-weight: 700; font-size: 16px; }
  .topbar-brand span { font-weight: 400; opacity: .7; font-size: 12px; }
  .nav-toggle {
    background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 8px;
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .nav-toggle .icon, .nav-toggle svg { width: 20px; height: 20px; }

  .layout { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 260px; z-index: 50;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .45); }

  .content { padding: 18px clamp(14px, 4vw, 22px); max-width: none; }
  .res-head { flex-wrap: wrap; }

  /* Wide data tables scroll horizontally instead of overflowing the page. */
  .content table:not(.cal):not(.mini):not(.perm-table) {
    display: block; overflow-x: auto; white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Enhanced inputs — brand overrides for the vendored pickers.
   Loaded after flatpickr / tom-select base CSS, so these win the cascade.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tom Select (searchable dropdowns) — match the native .field input look ── */
.ts-wrapper { width: 100%; min-width: 0; }
.ts-wrapper.single .ts-control,
.ts-control {
  font: inherit;
  min-height: 40px;
  padding: 8px 32px 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.ts-control .item { color: var(--ink); }
.ts-control input, .ts-control input::placeholder { color: var(--ink-soft); }
.ts-wrapper.focus .ts-control {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14, 124, 102, .15);
}
.ts-wrapper.disabled .ts-control { background: #eef3f1; color: var(--ink-soft); opacity: 1; }
/* Recolor the built-in caret to match the brand ink. */
.ts-wrapper.single .ts-control:after { border-color: var(--ink-soft) transparent transparent; }
.ts-wrapper.single.dropdown-active .ts-control:after { border-color: transparent transparent var(--ink-soft); }

.ts-dropdown {
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(6, 40, 33, .16);
  overflow: hidden;
  color: var(--ink);
}
.ts-dropdown .option { padding: 9px 12px; border-radius: 6px; }
.ts-dropdown .ts-dropdown-content { padding: 5px; }
.ts-dropdown .active { background: var(--brand); color: #fff; }
.ts-dropdown .option.selected { font-weight: 600; }
.ts-dropdown .option.selected.active { color: #fff; }
.ts-dropdown .no-results, .ts-dropdown .create { padding: 9px 12px; color: var(--ink-soft); }
.ts-dropdown .ts-dropdown-input {
  border: 1px solid var(--line); border-radius: 8px; margin: 4px; padding: 8px 11px;
}

/* ── flatpickr (date / date-time calendars) ── */
.fp-alt { cursor: pointer; background: #fff; }
/* Calendar affordance on the visible field. */
.field .fp-alt {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%234a5b56'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'/%3E%3Cpath%20d='M3%2010h18'/%3E%3Cpath%20d='M8%202v4'/%3E%3Cpath%20d='M16%202v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.field .fp-alt:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 124, 102, .15);
}

.flatpickr-calendar {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(6, 40, 33, .18);
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months { color: var(--ink); fill: var(--ink); }
span.flatpickr-weekday { color: var(--ink-soft); font-weight: 600; }
.flatpickr-day { color: var(--ink); border-radius: 8px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: #eef3f1; border-color: #eef3f1; }
.flatpickr-day.today { border-color: var(--brand); }
.flatpickr-day.today:hover { background: var(--brand); color: #fff; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--ink-faint, #b3c0bb);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--brand); }
/* Time picker (date-time fields) */
.flatpickr-time input:hover, .flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: #eef3f1; }
.flatpickr-time input { color: var(--ink); }