/* =====================================================================
   Drive — responzivni design system nad Bootstrap 5
   Vrstvy: tokeny -> zaklad -> akcentove komponenty -> shell -> pohledy
   Pravidla: zadne globalni min-width hacky, zadne overflow-x maskovani;
   preteceni se resi u zdroje (truncate/scroll kontejnery).
   ===================================================================== */

/* ===== 1. Barevne akcenty (data-accent na <html>) ===== */
:root, [data-accent="teal"] {
  --accent: #00897b;
  --accent-dark: #00695c;
  --accent-darker: #004d43;
  --accent-soft: rgba(0, 137, 123, .14);
}
[data-accent="blue"]   { --accent: #1e6ee5; --accent-dark: #1557bd; --accent-darker: #0e3f8c; --accent-soft: rgba(30,110,229,.14); }
[data-accent="purple"] { --accent: #7b46c9; --accent-dark: #6234a8; --accent-darker: #482380; --accent-soft: rgba(123,70,201,.14); }
[data-accent="rose"]   { --accent: #d23d6d; --accent-dark: #ad2c56; --accent-darker: #821e40; --accent-soft: rgba(210,61,109,.14); }
[data-accent="orange"] { --accent: #e07b26; --accent-dark: #bd621a; --accent-darker: #8f4a12; --accent-soft: rgba(224,123,38,.14); }
[data-accent="green"]  { --accent: #3d9142; --accent-dark: #2e7433; --accent-darker: #205624; --accent-soft: rgba(61,145,66,.14); }

/* ===== 2. Design tokeny ===== */
:root {
  color-scheme: light;
  --app-bg: #eef3f6;
  --app-surface: #ffffff;
  --app-surface-2: #f7f9fb;
  --app-border: rgba(17, 24, 39, .11);
  --app-shadow: 0 16px 40px rgba(15, 23, 42, .09);
  --app-shadow-sm: 0 4px 18px rgba(15, 23, 42, .065);
  --app-radius: 10px;
  --app-radius-lg: 14px;
  --app-gap: clamp(.75rem, 1.6vw, 1.25rem);
  --app-content-max: 1400px;
  --sidebar-w: 228px;
  --topbar-h: 58px;
  --motion-fast: 120ms;
  --motion-med: 190ms;
  --motion-slow: 340ms;
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --ease-spring: cubic-bezier(.2, .8, .25, 1.08);
  /* safe-area vyzaduje viewport-fit=cover v <meta name="viewport"> */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --fab-size: 56px;
  --fab-gap: 16px;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --app-bg: #111418;
  --app-surface: #171b21;
  --app-surface-2: #20252d;
  --app-border: rgba(255, 255, 255, .12);
  --app-shadow: 0 12px 34px rgba(0, 0, 0, .34);
  --app-shadow-sm: 0 5px 16px rgba(0, 0, 0, .28);
}

/* ===== 3. Zaklad ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  background: var(--app-bg);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--app-bg);
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }
img, svg, canvas, video { max-width: 100%; }
button, a, input, select, textarea, .page-link { touch-action: manipulation; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.018em; text-wrap: balance; }
p { text-wrap: pretty; }

/* viditelny focus i na barevnych plochach */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#sidebar :focus-visible,
.fab-add:focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .side-item:hover,
  .app-card:hover,
  .history-card:hover,
  .dash-list-item:hover,
  .fab-add:hover,
  .dropdown-item:hover,
  .range-chip:hover,
  .page-link:hover {
    transform: none !important;
  }
}

/* ===== 3b. Pohybovy system ===== */
@keyframes viewEnter {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cardEnter {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes popEnter {
  from { opacity: 0; transform: translate3d(0, 4px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes floatCar {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -3px, 0); }
}
@keyframes softShine {
  from { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  22% { opacity: .55; }
  to { transform: translateX(180%) skewX(-18deg); opacity: 0; }
}

.view-enter {
  animation: viewEnter var(--motion-med) var(--ease-out) both;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* utility */
.text-accent { color: var(--accent) !important; }
.bg-accent-soft { background: var(--accent-soft) !important; }
.min-width-0 { min-width: 0 !important; }

/* ===== 4. Akcentove komponenty ===== */
.btn,
.form-control,
.form-select {
  border-radius: var(--app-radius);
}

.btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.25;
  transition: box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) linear;
}
.btn:hover { box-shadow: 0 5px 14px rgba(15, 23, 42, .1); }
.btn:active { box-shadow: inset 0 1px 2px rgba(15, 23, 42, .14); }
.btn-sm { min-height: 32px; }
.btn-icon {
  width: 36px;
  min-width: 36px;
  padding-left: 0;
  padding-right: 0;
}

.btn-accent {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent-darker);
  --bs-btn-active-border-color: var(--accent-darker);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
}
.btn-accent:focus-visible { box-shadow: 0 0 0 .25rem var(--accent-soft); }

.btn-outline-accent {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-soft);
  --bs-btn-hover-color: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--accent);
}

.nav-pills { --bs-nav-pills-border-radius: var(--app-radius); }
.nav-pills .nav-link {
  color: var(--bs-secondary-color);
  min-height: 36px;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.nav-pills .nav-link:hover { box-shadow: inset 0 0 0 1px var(--app-border); }
.nav-pills .nav-link.active { background-color: var(--accent); color: #fff; }

/* formulare v barvach akcentu misto Bootstrap modre */
.form-check-input { accent-color: var(--accent); }
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem var(--accent-soft);
}
.form-control,
.form-select,
.form-check-input {
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.pagination {
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-color: var(--accent);
  --bs-pagination-hover-color: var(--accent-dark);
  --bs-pagination-focus-color: var(--accent-dark);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--accent-soft);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--accent);
  color: #fff;
}
.dropdown-menu {
  transform-origin: top;
  animation: popEnter var(--motion-fast) var(--ease-out) both;
  border-color: var(--app-border);
  box-shadow: var(--app-shadow);
}
.dropdown-item {
  min-height: 38px;
  display: flex;
  align-items: center;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.dropdown-item:hover { background: var(--app-surface-2); }

/* ===== 5. Login ===== */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  background: var(--accent-darker);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .login-screen {
    background: linear-gradient(150deg,
      color-mix(in srgb, var(--accent-darker) 55%, #08131a),
      var(--accent-darker) 55%,
      color-mix(in srgb, var(--accent-dark) 60%, #10222c));
  }
}
.login-card {
  width: min(100%, 400px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--app-radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  background: color-mix(in srgb, var(--app-surface) 96%, transparent);
}
.login-card .card-body { padding: clamp(1.5rem, 4vw, 2rem) !important; }
.login-logo { font-size: 44px; line-height: 1; color: var(--accent); }
.login-card h1 { font-weight: 750; letter-spacing: -.025em; }
.login-card .form-control { min-height: 42px; }
#login-error { line-height: 1.4; }

/* ===== 6. Shell ===== */
#app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding-left: var(--safe-left);
  color: #fff;
  background: linear-gradient(180deg, var(--accent-dark), var(--accent-darker));
}
.side-logo {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 20px 20px 16px;
}
.side-logo .bi { margin-right: 6px; }
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--app-radius);
  background: transparent;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.side-item:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.side-item:active { background: rgba(255, 255, 255, .14); }
.side-item.active { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 650; box-shadow: inset 3px 0 0 rgba(255, 255, 255, .82); }
.side-item .bi { width: 20px; text-align: center; flex-shrink: 0; }
.side-sep { border-color: rgba(255, 255, 255, .24); margin: 8px 4px; opacity: 1; }
.side-add { font-weight: 600; color: #fff; margin: 4px 0; }
.add-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5a623;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-left: -4px;
  flex-shrink: 0;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.side-add:hover .add-circle { transform: rotate(45deg); }

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

/* Sticky topbar: plna sirka, safe-area resena paddingem (bar prekryva notch). */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding-top: var(--safe-top);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-sm);
  transition: background-color var(--motion-med) var(--ease-out), border-color var(--motion-med) var(--ease-out), box-shadow var(--motion-med) var(--ease-out);
}
@supports ((backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, blue))) {
  .topbar {
    background: color-mix(in srgb, var(--app-surface) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.topbar-inner {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 8px;
  padding-inline: max(clamp(12px, 2vw, 24px), var(--safe-left)) max(clamp(12px, 2vw, 24px), var(--safe-right));
}
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.topbar-left {
  flex: 1 1 auto;
}
.topbar-right {
  flex: 0 0 auto;
  margin-left: auto;
}
#breadcrumb {
  min-width: 0;
  flex: 1 1 auto;
}
.offline-mode #breadcrumb {
  color: #b87900 !important;
  font-weight: 600;
}
.app-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 32px;
  max-width: 150px;
  padding: .25rem .55rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.app-status:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--app-border)); }
.status-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--bs-secondary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-secondary-color) 18%, transparent);
  flex: 0 0 auto;
}
.status-online .status-dot { background: #2e9d59; box-shadow: 0 0 0 3px rgba(46, 157, 89, .18); }
.status-offline .status-dot { background: #e23d3d; box-shadow: 0 0 0 3px rgba(226, 61, 61, .18); }
.status-connecting .status-dot,
.status-syncing .status-dot {
  background: #f5a623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .2);
  animation: statusPulse 1.1s ease-in-out infinite;
}
.status-pending .status-dot { background: #b87900; box-shadow: 0 0 0 3px rgba(184, 121, 0, .18); }
@keyframes statusPulse {
  0%, 100% { transform: scale(.85); opacity: .7; }
  50% { transform: scale(1.15); opacity: 1; }
}
.vehicle-switch {
  max-width: min(48vw, 280px);
  overflow: hidden;
}
.vehicle-switch span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#vehicle-menu {
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
#vehicle-menu .dropdown-item {
  max-width: min(82vw, 340px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .vehicle-switch:hover,
  .vehicle-switch.show {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--app-border));
    background-color: var(--accent-soft);
    color: var(--accent-dark);
    box-shadow: none;
  }
  #vehicle-menu .dropdown-item:not(.active):hover,
  #vehicle-menu .dropdown-item:not(.active):focus-visible {
    background-color: var(--accent-soft);
    color: var(--accent-dark);
  }
  #vehicle-menu .dropdown-item.active:hover,
  #vehicle-menu .dropdown-item.active:focus-visible {
    background-color: var(--accent-dark);
    color: #fff;
  }
}

.app-main {
  width: 100%;
  max-width: var(--app-content-max);
  margin-inline: auto;
  padding-block: clamp(12px, 2vw, 24px) clamp(28px, 4vw, 48px);
  padding-inline: max(clamp(12px, 2vw, 24px), var(--safe-left)) max(clamp(12px, 2vw, 24px), var(--safe-right));
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  transition: box-shadow var(--motion-fast) var(--ease-out);
}
.avatar-button:hover .avatar { box-shadow: 0 0 0 4px var(--accent-soft); }
.avatar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  min-width: 34px;
  min-height: 34px;
}
.avatar-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.theme-menu,
.account-menu { min-width: min(280px, calc(100vw - 24px)); }
#accent-group {
  flex-wrap: nowrap !important;
  justify-content: space-between;
  gap: .375rem !important;
}
.accent-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sw);
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.accent-swatch:hover { box-shadow: 0 0 0 4px var(--app-surface), 0 0 0 5px var(--app-border); }
.accent-swatch.active { border-color: var(--bs-body-color); }

/* ===== 7. Sdilene komponenty ===== */
.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  transition: transform var(--motion-med) var(--ease-out), box-shadow var(--motion-med) var(--ease-out), border-color var(--motion-med) var(--ease-out), background-color var(--motion-med) var(--ease-out);
}
.app-card > .card-body,
.card.app-card > .card-body { padding: clamp(1rem, 1.5vw, 1.25rem); }
.app-card:hover {
  transform: translate3d(0, -2px, 0);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--app-border));
  box-shadow: var(--app-shadow);
}
.app-card .card-body { min-width: 0; }

.section-head,
.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: var(--app-gap);
  min-width: 0;
}
.section-title {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.section-subtitle {
  margin-top: .15rem;
  color: var(--bs-secondary-color);
  font-size: .875rem;
}
.section-head h1,
.section-head h2,
.dashboard-card-head h2,
.report-section-head h2 { line-height: 1.2; }
.muted-line {
  color: var(--bs-secondary-color);
  font-size: .84rem;
}

.ui-icon,
.s-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--app-radius);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform var(--motion-fast) var(--ease-spring), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.app-card:hover .ui-icon,
.app-card:hover .s-ico,
.history-card:hover .s-ico,
.dash-list-item:hover .s-ico {
  transform: scale(1.06) rotate(-2deg);
}
.ui-icon.fuel, .s-ico.fuel { background: #fff3e0; color: #b96b00; }
.ui-icon.service, .s-ico.service { background: #efebe9; color: #7a5a50; }
.ui-icon.accent, .s-ico.accent { background: var(--accent-soft); color: var(--accent); }
.ui-icon.danger, .s-ico.danger { background: #ffebee; color: #d94c4c; }
.ui-icon.info, .s-ico.info { background: #e3f2fd; color: #1e88e5; }
.ui-icon.success, .s-ico.success { background: #e8f5e9; color: #3d9142; }
.ui-icon.warn, .s-ico.warn { background: #fff8e1; color: #b87900; }

.stat-total {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.empty-state {
  display: grid;
  place-items: center;
  gap: .35rem;
  min-height: 160px;
  padding: 22px;
  color: var(--bs-secondary-color);
  text-align: center;
}
.empty-state .bi { font-size: 28px; color: var(--accent); }

/* ===== 8. Dashboard ===== */
.dashboard-shell {
  display: grid;
  gap: var(--app-gap);
}
.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 1.75rem);
  min-height: clamp(250px, 32dvh, 360px);
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 1.65rem);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--app-surface) 86%, var(--accent) 14%), var(--app-surface-2));
  box-shadow: var(--app-shadow-sm);
}
.dashboard-hero::before {
  content: "";
  position: absolute;
  inset: auto -12% -38% 34%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%);
  pointer-events: none;
}
.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  pointer-events: none;
  animation: softShine 900ms var(--ease-out) 500ms both;
}
.dashboard-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.dashboard-hero h1 {
  margin: .1rem 0 .35rem;
  font-size: clamp(1.75rem, 4vw, 3.15rem);
  font-weight: 800;
  line-height: 1.02;
}
.dashboard-hero p {
  margin: 0 0 1rem;
  color: var(--bs-secondary-color);
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
}
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 0;
}
.dashboard-report-split div {
  min-width: 0;
  padding: .65rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: color-mix(in srgb, var(--app-surface) 78%, transparent);
}
.dashboard-report-split span {
  display: block;
  color: var(--bs-secondary-color);
  font-size: .74rem;
}
.dashboard-report-split b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
}
.dashboard-car-stage {
  position: relative;
  z-index: 1;
  min-height: 190px;
  display: grid;
  place-items: center;
}
.dashboard-car-stage img {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  max-height: 235px;
  object-fit: contain;
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .28));
  animation: floatCar 8s ease-in-out infinite;
  backface-visibility: hidden;
  will-change: transform;
}
.dashboard-car-shadow {
  position: absolute;
  z-index: 1;
  bottom: 14%;
  width: 72%;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .32);
  filter: blur(18px);
}
.dashboard-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}
.dash-list {
  display: grid;
  gap: .55rem;
}
.dash-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .65rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
  color: var(--bs-body-color);
  text-align: left;
  transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.dash-list-item:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--app-border));
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--app-shadow-sm);
}
.dash-list-item:active { transform: translate3d(0, -1px, 0); }
.reminder-list,
.anomaly-list { display: grid; gap: .55rem; }
.reminder-row,
.anomaly-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 52px;
  padding: .65rem .75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  color: var(--bs-body-color);
  text-align: left;
}
.reminder-row > span,
.anomaly-row > span { display: grid; min-width: 0; }
.reminder-row small,
.anomaly-row small { color: var(--bs-secondary-color); }
.reminder-row.is-soon { border-color: color-mix(in srgb, #f5a623 55%, var(--app-border)); }
.reminder-row.is-overdue { border-color: color-mix(in srgb, #e05252 65%, var(--app-border)); background: color-mix(in srgb, #e05252 7%, var(--app-surface)); }
.reminder-row.is-done { opacity: .62; }
.anomaly-row { grid-template-columns: auto minmax(0, 1fr); }
.anomaly-row > .bi { color: #e05252; }

@media print {
  #sidebar, .topbar, .report-toolbar .btn, .report-tabs-wrap, .fab-add, .add-menu, .app-update-notice { display: none !important; }
  .content, .app-main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .card, .report-toolbar { break-inside: avoid; box-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; }
}
.dash-list-item small {
  display: block;
  color: var(--bs-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-list-item strong {
  color: var(--bs-danger);
  white-space: nowrap;
}
.dashboard-report-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

/* ===== 8. Historie ===== */
.history-layout {
  height: calc(100dvh - var(--topbar-h) - clamp(20px, 4vw, 40px));
  min-height: 560px;
}
.history-main-col {
  display: flex;
  height: 100%;
  min-height: 0;
}
.history-summary-col {
  min-height: 0;
}
.history-shell {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.history-shell > .card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.history-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
}
.recent-refuel-summary {
  flex: 0 0 auto;
  display: grid;
  gap: .65rem;
  margin-bottom: .75rem;
  padding: .75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
}
.recent-refuel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}
.recent-refuel-head .fw-semibold {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-refuel-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
}
.recent-refuel-grid div {
  min-width: 0;
}
.recent-refuel-grid span {
  display: block;
  color: var(--bs-secondary-color);
  font-size: .76rem;
}
.recent-refuel-grid b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
}
.trend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .25rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: -.08em;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.recent-refuel-grid div:hover .trend-badge { transform: translateY(-1px) scale(1.12); }
.trend-badge .bi {
  font-size: 1em;
  line-height: 1;
}
.trend-good { color: var(--bs-success); }
.trend-bad { color: var(--bs-danger); }
.trend-flat { color: var(--bs-secondary-color); }
.history-table-wrap {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  overflow-x: auto;          /* pojistka misto skryvani preteceni */
}
.history-table tbody tr {
  transition: background-color var(--motion-fast) var(--ease-out);
}
.history-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.history-table {
  margin: 0;
  table-layout: fixed;
  vertical-align: middle;
}
.history-table th {
  color: var(--bs-secondary-color);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--app-surface-2);
}
.history-table td {
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.history-kind {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  min-width: 0;
}
.history-kind > .min-width-0 { flex: 1 1 auto; }
.history-kind-label {
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-table th { white-space: nowrap; }
.history-kind-sub {
  display: block;
  color: var(--bs-secondary-color);
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-fuel,
.col-amount,
.col-unit-price,
.col-consumption,
.col-place {
  min-width: 0;
}
.col-fuel,
.col-amount,
.col-unit-price,
.col-consumption {
  color: var(--bs-secondary-color);
  font-size: .86rem;
}
.col-amount,
.col-unit-price,
.col-consumption {
  font-variant-numeric: tabular-nums;
}
.history-money {
  color: var(--bs-danger);
  font-weight: 700;
  white-space: nowrap;
}
.history-feed {
  display: grid;
  gap: .65rem;
  align-content: start;
}
.history-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  padding: .75rem;
  transition: transform var(--motion-med) var(--ease-out), border-color var(--motion-med) var(--ease-out), box-shadow var(--motion-med) var(--ease-out), background-color var(--motion-med) var(--ease-out);
}
.history-card:hover {
  transform: translate3d(0, -2px, 0);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--app-border));
  box-shadow: var(--app-shadow);
}
.history-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
}
.history-card-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.history-card-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  margin-top: .65rem;
  color: var(--bs-secondary-color);
  font-size: .84rem;
}
.history-card-meta span,
.history-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-card-actions,
.record-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
}
.history-pagination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface);
  min-width: 0;
}
.pager-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.pager-scroll {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pager-current { display: none; }
.pager-scroll .pagination {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.page-link,
.pager-controls .form-select {
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.page-link:hover,
.pager-controls .form-select:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--app-border));
}
.page-link:active { box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12); }

/* ===== 9. Reporty ===== */
.report-view .app-card,
.report-view .report-toolbar,
.report-view .report-tabs,
.report-view .chart-box {
  animation: none;
}
.report-view .app-card:hover,
.report-view .range-chip:hover,
.report-view .nav-pills .nav-link:hover {
  transform: none;
}
.report-view .app-card:hover {
  box-shadow: var(--app-shadow-sm);
}
.report-toolbar {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.report-toolbar-head { min-width: 0; }

/* segmentovy prepinac rozsahu */
.range-chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.range-chip {
  flex: 0 0 auto;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: var(--bs-secondary-color);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .84rem;
  font-weight: 600;
  min-height: 34px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.range-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 3px 10px var(--accent-soft);
}
.range-chip:active { box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12); }
.range-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.report-custom {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.report-custom-field { flex: 1 1 160px; min-width: 0; }

/* na uzkych displejich se chipy zalomi a vyplni sirku (zadny scrollbar) */
@media (max-width: 619.98px) {
  .range-chips {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }
  .range-chip {
    flex: 1 1 auto;
    text-align: center;
    padding-inline: .5rem;
  }
}

.report-tabs-wrap {
  position: sticky;
  top: calc(var(--topbar-h) + var(--safe-top));
  z-index: 10;
}
.report-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  padding: .25rem;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 999px;
}
.report-tabs .nav-item { flex: 1 1 0; }
.report-tabs .nav-link {
  width: 100%;
  border-radius: 999px;
  font-weight: 600;
  font-size: .88rem;
}

/* KPI karta */
.kpi .card-body { padding: .9rem; }
.kpi-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.kpi-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-value {
  margin-top: .55rem;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  font-weight: 750;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.kpi-unit {
  font-size: .8rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
.kpi-sub-grid {
  display: flex;
  gap: .35rem 1rem;
  flex-wrap: wrap;
  margin-top: .6rem;
  padding-top: .55rem;
  border-top: 1px solid var(--app-border);
  font-size: .78rem;
}
.kpi-sub-grid > div { display: flex; flex-direction: column; min-width: 0; }
.kpi-sub-grid span { color: var(--bs-secondary-color); }
.kpi-sub-grid b { font-variant-numeric: tabular-nums; }

/* hlavicka sekce v karte */
.report-section-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}

/* proužek rozlozeni nakladu */
.cost-split-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--app-surface-2);
}
.split-seg {
  height: 100%;
  transition: width var(--motion-slow) var(--ease-out), background-color var(--motion-med) var(--ease-out);
}
.split-seg.split-fuel { background: #f5a623; }
.split-seg.split-service { background: #8d6e63; }
.cost-split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: .85rem;
}
.split-legend-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
}
.split-legend-item b { font-variant-numeric: tabular-nums; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-fuel { background: #f5a623; }
.dot-service { background: #8d6e63; }

/* rozpad servisu podle typu */
.type-breakdown { display: flex; flex-direction: column; gap: .8rem; }
.type-row-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}
.type-name { flex: 1 1 auto; min-width: 0; }
.type-cost { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.type-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--app-surface-2);
  overflow: hidden;
}
.type-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width var(--motion-slow) var(--ease-out), background-color var(--motion-med) var(--ease-out);
}

.chart-box {
  position: relative;
  height: clamp(260px, 38vh, 380px);
  height: clamp(260px, 38dvh, 380px);
}
.chart-box.chart-box-compact {
  height: clamp(240px, 34vh, 330px);
  height: clamp(240px, 34dvh, 330px);
}
.chart-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--bs-secondary-color);
  font-size: .9rem;
}

/* ===== 10. Formulare a modaly ===== */
.modal-content {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  animation: popEnter var(--motion-med) var(--ease-out) both;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}
.modal-header,
.modal-footer { gap: .5rem; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.refuel-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.refuel-form-grid .form-control,
.refuel-form-grid .form-select {
  min-width: 0;
}
.form-field { min-width: 0; }
.form-field.wide { grid-column: 1 / -1; }
.form-label {
  margin-bottom: .3rem;
  font-size: .85rem;
  font-weight: 600;
}
.geo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: start;
  gap: .5rem;
  min-width: 0;
}
.geo-row .btn {
  min-width: 0;
  white-space: normal;
}
.geo-row #geo-status {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}
.manual-location-wrap { margin-top: .6rem; }
.location-card {
  display: grid;
  gap: .65rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  padding: .75rem;
  animation: cardEnter var(--motion-med) var(--ease-out) both;
  transition: border-color var(--motion-med) var(--ease-out), box-shadow var(--motion-med) var(--ease-out);
}
.location-card:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--app-border));
  box-shadow: 0 0 0 .2rem var(--accent-soft);
}
.location-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.location-card-head .btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.location-tool-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
.location-tool-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 0;
  min-height: 42px;
  white-space: nowrap;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .modal-dialog.modal-lg .location-tool-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.location-search-panel,
.location-map-panel {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface-muted);
  padding: .65rem;
}
.location-results {
  max-height: 220px;
  overflow-y: auto;
  margin-top: .5rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
}
.location-map {
  width: 100%;
  height: clamp(260px, 42dvh, 420px);
  border-radius: var(--app-radius-sm);
  overflow: hidden;
  background: var(--app-surface-muted);
}
.location-map-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  color: var(--bs-secondary-color);
}
.leaflet-container { font: inherit; }
.modal-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ===== 11. Plovoucí tlačítko pro přidání (jen telefony) ===== */
.fab-add {
  position: fixed;
  right: max(var(--fab-gap), var(--safe-right));
  bottom: max(var(--fab-gap), var(--safe-bottom));
  z-index: 1040;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 0;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: transform var(--motion-med) var(--ease-out), box-shadow var(--motion-med) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
  animation: popEnter var(--motion-med) var(--ease-spring) both;
  backface-visibility: hidden;
  will-change: transform;
}
.fab-add:hover {
  background: var(--accent-dark);
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 55%, transparent);
}
.fab-add:hover .bi { transform: rotate(45deg); }
.fab-add:active {
  background: var(--accent-darker);
  transform: translate3d(0, -1px, 0);
}
.fab-add .bi { transition: transform var(--motion-med) var(--ease-spring); }

/* ===== 12. Add menu ===== */
.add-menu {
  position: fixed;
  z-index: 1065;   /* nad modalem i topbarem */
  min-width: min(220px, calc(100vw - 24px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow);
  transform-origin: bottom right;
  animation: popEnter var(--motion-fast) var(--ease-out) both;
}
.add-menu button {
  min-height: 46px;
  padding: 11px 16px;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 14px;
  text-align: left;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.add-menu button:hover { background: var(--app-surface-2); }
.add-menu .bi { margin-right: 8px; }

/* Dotykove prohlizece po tapnuti syntetizuji hover. Bez transformaci
   tak tlacitka po uvolneni neposkakuji ani neblikaji. */
@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .btn:active,
  .nav-pills .nav-link:hover,
  .side-item:hover,
  .side-item:active,
  .app-status:hover,
  .dropdown-item:hover,
  .accent-swatch:hover,
  .dash-list-item:hover,
  .dash-list-item:active,
  .page-link:hover,
  .page-link:active,
  .range-chip:hover,
  .range-chip:active,
  .fab-add:hover,
  .fab-add:active,
  .add-menu button:hover {
    transform: none;
  }
  .side-add:hover .add-circle,
  .avatar-button:hover .avatar,
  .fab-add:hover .bi {
    transform: none;
  }
}

/* ===== 13. Vozidla / nastaveni ===== */
.vehicle-card.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.vehicle-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.list-row-actions { display: inline-flex; gap: .35rem; flex-shrink: 0; }

/* ===== 14. Breakpointy ===== */
@media (max-width: 991.98px) {
  /* misto pro plovouci FAB, aby neprekryval posledni obsah */
  .app-main { padding-bottom: calc(84px + var(--safe-bottom)); }
  .topbar-inner { min-height: 50px; }
  .topbar-left { flex: 1 1 0; }
  .topbar-right { flex-shrink: 0; }
  .section-head,
  .toolbar-row,
  .history-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .history-pagination > .small {
    display: none;
  }
  .pager-controls { width: 100%; }
  .pager-scroll { flex: 1; }
  .filter-card .btn { flex: 1 1 0; }
  .dashboard-hero {
    grid-template-columns: 1fr;
  }
  .dashboard-car-stage {
    min-height: 150px;
    order: -1;
  }
  .dashboard-car-stage img {
    max-height: 170px;
  }
}

/* iOS zoomuje pri focusu inputu s fontem < 16px */
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm {
    font-size: 16px;
  }
}

@media (max-width: 991.98px) {
  .history-layout {
    height: auto;
    min-height: 0;
  }
  .history-main-col,
  .history-shell {
    height: auto;
    min-height: 0;
  }
  .history-shell > .card-body {
    min-height: 0;
  }
  .history-scroll-area {
    overflow-y: visible;
    padding-right: 0;
  }
  .recent-refuel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .history-pagination {
    position: sticky;
    bottom: max(var(--fab-gap), var(--safe-bottom));
    width: calc(100% - var(--fab-size) - var(--fab-gap));
    max-width: calc(100% - var(--fab-size) - var(--fab-gap));
    z-index: 3;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
    padding: .65rem;
  }
  .history-pagination .pager-controls {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) minmax(128px, 1fr);
    align-items: center;
    gap: .5rem;
  }
  .history-pagination #history-page-size {
    width: 100% !important;
    min-width: 0;
  }
  .history-summary-col {
    display: none;
  }
  .history-shell > .card-body {
    padding-bottom: calc(.85rem + var(--fab-gap));
  }
}

@media (max-width: 575.98px) {
  .login-card .card-body { padding: 1.25rem !important; }
  .vehicle-switch { max-width: 38vw; }
  .app-status { max-width: 104px; padding-inline: .45rem; }
  #breadcrumb { display: none; }
  .avatar { width: 32px; height: 32px; }
  .avatar-button { min-width: 32px; min-height: 32px; }
  .app-card > .card-body,
  .card.app-card > .card-body { padding: .85rem !important; }
  .form-grid {
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  .refuel-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }
  .refuel-form-grid .form-label {
    font-size: .78rem;
  }
  .refuel-form-grid .form-control,
  .refuel-form-grid .form-select {
    padding-inline: .55rem;
    font-size: .92rem;
  }
  .geo-row { grid-template-columns: 1fr; }
  .geo-row .btn { width: 100%; }
  .location-card { padding: .65rem; }
  .location-card-head { align-items: stretch; flex-direction: column; }
  .location-card-head .btn { justify-content: center; width: 100%; }
  .location-tool-buttons { grid-template-columns: 1fr; }
  .location-map { height: clamp(240px, 38dvh, 340px); }
  .dashboard-hero {
    padding: .9rem;
    min-height: auto;
  }
  .dashboard-hero h1 {
    font-size: 1.7rem;
  }
  .dashboard-car-stage {
    min-height: 120px;
  }
  .dashboard-car-stage img {
    max-height: 135px;
  }
  .dashboard-actions .btn {
    flex: 1 1 auto;
  }
  .dashboard-report-split {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-card-head {
    align-items: stretch;
    flex-direction: column;
  }
  .dash-list-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .dash-list-item strong {
    grid-column: 2;
  }
  .modal-fullscreen-sm-down .modal-content {
    border: 0;
    border-radius: 0;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  .modal-fullscreen-sm-down .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
  .modal-fullscreen-sm-down .modal-header { padding-top: calc(.75rem + var(--safe-top)); }
  .modal-fullscreen-sm-down .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .85rem;
  }
  .modal-fullscreen-sm-down .modal-footer { padding-bottom: calc(.75rem + var(--safe-bottom)); }
  .modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .modal-footer > div,
  .modal-footer > .btn { width: 100%; }
  .modal-action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .modal-action-group .btn { width: 100%; }
  .history-card-actions {
    width: 100%;
    margin-top: .65rem;
  }
  .history-card-actions .btn { flex: 1 1 0; }
  .recent-refuel-summary {
    padding: .65rem;
  }
  .recent-refuel-head .fw-semibold {
    font-size: .84rem;
  }
  .recent-refuel-grid {
    gap: .45rem .6rem;
  }
  .history-pagination {
    align-items: stretch;
  }
  .pager-scroll {
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .pager-scroll::-webkit-scrollbar { display: none; }
  .pager-scroll .pagination {
    display: grid;
    grid-template-columns: 38px minmax(56px, 72px) 38px;
    justify-content: end;
    width: 100%;
  }
  .pager-scroll .pagination .page-item:not(:first-child):not(:last-child):not(.pager-current) {
    display: none;
  }
  .pager-current {
    display: block;
    min-width: 0;
  }
  .pager-current .page-link {
    text-align: center;
    color: var(--bs-body-color);
    background: var(--app-surface-2);
    white-space: nowrap;
    line-height: 1.2;
    padding-inline: .35rem;
  }
  .pager-scroll .page-link {
    display: block;
    width: 100%;
    min-height: 34px;
  }
  .chart-box {
    height: clamp(240px, 44vh, 330px);
    height: clamp(240px, 44dvh, 330px);
  }
  .stat-total small {
    display: block;
    margin-top: .1rem;
  }
}

@media (max-width: 359.98px) {
  :root { --fab-size: 50px; }
  .topbar-inner { gap: .35rem; }
  .btn-sm { --bs-btn-padding-x: .45rem; }
  .refuel-form-grid,
  .modal-action-group,
  .dashboard-report-split { grid-template-columns: 1fr; }
  .history-pagination {
    padding: .5rem;
  }
  .history-pagination .pager-controls {
    grid-template-columns: minmax(96px, 1fr) minmax(116px, 1fr);
    gap: .35rem;
  }
  .pager-scroll .pagination {
    grid-template-columns: 34px minmax(50px, 64px) 34px;
  }
  .fab-add {
    font-size: 22px;
  }
}

@media (min-width: 1600px) {
  :root { --app-content-max: 1480px; }
  .app-main { padding-top: 28px; }
  .dashboard-hero { min-height: 300px; }
}

/* telefon nasirku: kompaktnejsi FAB, vyssi vyuziti vysky u grafu */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 500px) {
  :root { --fab-size: 46px; }
  .fab-add {
    font-size: 20px;
  }
  .chart-box {
    height: clamp(190px, 62vh, 280px);
    height: clamp(190px, 62dvh, 280px);
  }
}

/* ===== 15. Dark mode ladeni ===== */
[data-bs-theme="dark"] .fab-add { box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .ui-icon.fuel,
[data-bs-theme="dark"] .s-ico.fuel { background: rgba(245, 166, 35, .16); color: #f6bd52; }
[data-bs-theme="dark"] .ui-icon.service,
[data-bs-theme="dark"] .s-ico.service { background: rgba(141, 110, 99, .20); color: #c5a7a0; }
[data-bs-theme="dark"] .ui-icon.danger,
[data-bs-theme="dark"] .s-ico.danger { background: rgba(224, 82, 82, .16); color: #f08a8a; }
[data-bs-theme="dark"] .ui-icon.info,
[data-bs-theme="dark"] .s-ico.info { background: rgba(30, 136, 229, .16); color: #77b8f6; }
[data-bs-theme="dark"] .ui-icon.success,
[data-bs-theme="dark"] .s-ico.success { background: rgba(67, 160, 71, .16); color: #7fca83; }
[data-bs-theme="dark"] .ui-icon.warn,
[data-bs-theme="dark"] .s-ico.warn { background: rgba(245, 166, 35, .16); color: #f0bf55; }

/* Technicke opravy bez zasahu do vizualniho navrhu v41. */
body:not(.app-authenticated) .fab-add,
body:not(.app-authenticated) .add-menu {
  display: none !important;
}

.dropdown-menu,
.fab-add,
.add-menu {
  animation: none;
}

.fab-add:active,
.add-menu button:active,
.dropdown-item:active {
  transform: none;
}

.app-update-notice {
  position: fixed;
  right: max(16px, var(--safe-right));
  bottom: max(16px, var(--safe-bottom));
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: min(420px, calc(100vw - 32px));
  padding: .75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}

@media (max-width: 991.98px) {
  .app-update-notice {
    right: calc(var(--fab-gap) + var(--safe-right));
    bottom: calc(var(--fab-size) + var(--fab-gap) * 2 + var(--safe-bottom));
  }
}