html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* Fill viewport and prevent page scrollbars */
html, body { height: 100%; }

/* Reset default bottom margin to avoid gap under footer */
body {
  margin: 0;
  overflow-x: hidden;
}

/* Make form field labels bold across create/edit forms */
.form-label {
  font-weight: 600;
}

.form-label-hint {
  font-weight: 500;
  font-size: 0.85em;
  color: #6c757d;
  margin-left: 0.25rem;
}

.return-distance-input {
  text-align: right;
  min-width: 6rem;
  max-width: 8rem;
}

@media (max-width: 575.98px) {
  .return-distance-input {
    max-width: 100%;
  }
}

.return-distance-group {
  min-width: 0;
}

.route-form .return-distance-stack {
  gap: 0.25rem;
  flex-wrap: wrap;
}

.route-form .return-distance-stack > * {
  min-width: 0;
}

.total-distance-group {
  align-items: stretch;
}

.total-distance-input-group {
  width: 100%;
}

@media (min-width: 768px) {
  .total-distance-input-group {
    width: 160px;
    max-width: 160px;
    flex: 0 0 160px;
  }
}

.total-distance-input-group .form-control {
  text-align: right;
}

.route-form {
  --route-km-width: 120px;
}

@media (max-width: 767.98px) {
  .route-form {
    --route-km-width: 110px;
  }
}


.route-form .stop-distance-input {
  flex: 1 1 auto;
  min-width: 0;
}

.route-form .stop-distance-input-group {
  flex: 0 0 var(--route-km-width);
  width: var(--route-km-width);
  max-width: var(--route-km-width);
  min-width: 0;
}

@media (max-width: 575.98px) {
  .route-form .stop-distance-input-group {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}

.route-form .stop-distance-stack {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
}

.route-form .stop-actions {
  display: flex;
  gap: 0.25rem;
  flex-wrap: nowrap;
  align-items: center;
}

@media (max-width: 575.98px) {
  .route-form .stop-distance-stack {
    gap: 0.5rem;
  }

  .route-form .stop-actions {
    flex-wrap: wrap;
  }
}

.route-form .stop-actions .stop-action-btn,
.route-form .circle-map-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: 0 0 auto;
  padding: 0;
}

.route-form .stop-actions .stop-action-btn:disabled {
  opacity: 0.65;
}

.route-form .return-base-input {
  min-width: 220px;
}

@media (max-width: 767.98px) {
  .route-form .return-base-input {
    min-width: 0;
  }
}

/* Subtle blue header for all Bootstrap tables */
:root {
  /* Table palette derived from page accent colors */
  --table-header-bg: rgba(3,105,161,0.08);    /* light cyan tint */
  --table-header-text: #063447;  /* deep slate for readable text */
  --table-header-border: rgba(3,105,161,0.18); /* soft accent border */
  --table-row-even: rgba(8,145,178,0.04); /* very light even-row tint */

  /* Brand palette (matching sidebar / hero) */
  --brand-start: #243443;
  --brand-end: #2f4a5a;
  --brand-tint: rgba(36, 52, 67, 0.06);
  --brand-tint-2: rgba(47, 74, 90, 0.04);

  /* Bright accent palette for hero and tiles (used on homepage)
     and now used to harmonize table headers and sidebar */
  --accent-start: #0369a1; /* primary cyan-blue */
  --accent-end: #0891b2;   /* secondary cyan */
  --accent-tint: rgba(3, 105, 161, 0.10);
  --accent-tint-2: rgba(8, 145, 178, 0.06);
}

.table thead th {
  /* use accent gradient to harmonize with home hero */
  background: linear-gradient(180deg, var(--accent-tint), var(--accent-tint-2));
  color: var(--table-header-text);
  border-bottom: 2px solid var(--table-header-border);
}

/* Keep sticky/striped tables consistent */
.table thead tr { background-color: var(--table-header-bg); }

/* Softer blue zebra striping instead of gray */
.table-striped > tbody > tr:nth-of-type(even) {
  --bs-table-accent-bg: var(--table-row-even);
  background-color: var(--table-row-even);
}

/* Ensure the very first (odd) data row stays white */
.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: #ffffff;
  background-color: #ffffff;
}

/* Left sidebar styles */
.sidebar {
  width: 220px;              /* slimmer, more reasonable width */
  flex: 0 0 220px;           /* fixed width in flex row */
  /* blend brand + accent so sidebar visually matches homepage */
  background: linear-gradient(180deg, var(--brand-start) 0%, var(--brand-end) 55%, var(--accent-end) 100%);
  color: #f6fbff;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar .nav-link {
  /* Softer text color for links */
  color: #d7e6ee !important;
  border-radius: .375rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  /* Subtle hover so it doesn't pop too much */
  background-color: rgba(255,255,255,0.06);
  color: #fff !important;
}
.sidebar .navbar-brand { color: #fff; text-decoration: underline; font-size: 1.6rem; letter-spacing: .2px; }

/* Right column as flex container to keep footer visible at bottom */
.main-column {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-column > main {
  flex: 1 0 auto;       /* content expands to push footer to the bottom */
  min-height: 0;        /* allow shrinking so padding doesn't cause overflow */
  overflow-x: hidden;   /* avoid micro horizontal scroll */
  padding-bottom: 4rem; /* keep form buttons clear of the footer */
}

/* --- Sidebar section separation (Fuelings + Trips) --- */
.sidebar .nav .nav-item.mt-3 {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: .75rem;
  margin-top: 1rem !important;
}

/* --- Home page action groups --- */
.home-actions__group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  background: linear-gradient(180deg, var(--accent-tint), var(--accent-tint-2));
  border: 1px solid rgba(3, 105, 161, 0.22);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.home-actions__group .btn { margin: 0 !important; }

/* Row of single-section tiles */
.home-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  background: linear-gradient(180deg, var(--accent-tint), var(--accent-tint-2));
  border: 1px solid rgba(3, 105, 161, 0.22);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

/* Slight right offset for specific homepage tiles */
.home-actions-row .action-tile--offset-right {
  margin-left: .100rem; /* "trošku" doprava */
}

/* Zarovnej rozestup Tankování × Kniha jízd v sidebaru */
.sidebar .nav .nav-item.mt-2 { margin-top: .25rem !important; }

/* Hero section on home page */
.home-hero {
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: #fff;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  text-align: center;
}
.home-hero__title { margin: 0; font-weight: 700; letter-spacing: .2px; }
.home-hero__subtitle { opacity: .9; margin: .25rem 0 0; }

/* Icon tiles (home actions) */
.action-tile {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  border-radius: .75rem;
  background: #fff;
  border: 1px solid #e5eaef;
  color: #1e2a35;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.action-tile:hover, .action-tile:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  text-decoration: none;
}
.action-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .55rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-end), var(--accent-start));
  flex: 0 0 auto;
  font-size: 1.2rem;
}
.action-tile__text { white-space: nowrap; }

/* Primary add/create button matching provided blue */
.btn-add {
  background: linear-gradient(180deg, #0b75b0 0%, #0a63a0 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-add:hover, .btn-add:focus {
  background: linear-gradient(180deg, #0a63a0 0%, #08547f 100%);
  color: #fff;
  text-decoration: none;
}

/* Make primary (Save) buttons match the Add button appearance */
.btn-primary {
  background: linear-gradient(180deg, #0b75b0 0%, #0a63a0 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(180deg, #0a63a0 0%, #08547f 100%);
  color: #fff;
  text-decoration: none;
}

/* Override: make gap between Řidiči and Tankování ~2x base (.75rem) */
.home-actions-row .action-tile--offset-right {
  margin-left: 1.5rem;
}

/* Edit button: slate gradient matching site brand */
.btn-edit {
  background: linear-gradient(180deg, #64748b 0%, #475569 100%); /* slate-500 -> slate-600 */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-edit:hover, .btn-edit:focus {
  background: linear-gradient(180deg, #566173 0%, #3a4654 100%);
  color: #fff;
  text-decoration: none;
}

/* Copy button: teal gradient to highlight sharing */
.btn-copy {
  background: linear-gradient(180deg, #0f766e 0%, #0d5f5b 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-copy:hover, .btn-copy:focus {
  background: linear-gradient(180deg, #0d5f5b 0%, #0a433f 100%);
  color: #fff;
  text-decoration: none;
}

/* Copy place vehicle cards */
.copy-target {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
}

.copy-target .form-check-input {
  margin: 0;
  float: none;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
}

.copy-target .copy-target__body {
  flex: 1 1 auto;
  min-width: 0;
}

.copy-target .copy-target__body .form-check-label {
  cursor: pointer;
}

.copy-target .copy-target__body .small {
  display: block;
  margin-top: 0.35rem;
}

/* Back button: lighter slate neutral */
.btn-back {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%); /* slate-400 -> slate-500 */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-back:hover, .btn-back:focus {
  background: linear-gradient(180deg, #8695ac 0%, #566173 100%);
  color: #fff;
  text-decoration: none;
}

/* Google Maps styled button: blue, green, yellow, red stripes */
.btn-google-maps {
  --g-blue: #4285F4;   /* Google Blue */
  --g-green: #34A853;  /* Google Green */
  --g-yellow: #FBBC05; /* Google Yellow */
  --g-red: #EA4335;    /* Google Red */
  color: #fff !important;
  border: 0;
  background-image:
    linear-gradient(90deg,
      var(--g-blue) 0%, var(--g-blue) 25%,
      var(--g-green) 25%, var(--g-green) 50%,
      var(--g-yellow) 50%, var(--g-yellow) 75%,
      var(--g-red) 75%, var(--g-red) 100%
    );
}
.btn-google-maps:hover, .btn-google-maps:focus {
  filter: brightness(0.95) saturate(1.05);
  color: #fff !important;
}
.btn-google-maps:disabled,
.btn-google-maps.disabled {
  opacity: .6;
  filter: grayscale(10%) brightness(0.9);
}

/* --- Nastavení aplikace --- */
.settings-wrapper .settings-card {
  border-radius: 1rem;
  border: 1px solid rgba(3, 105, 161, 0.12);
}

.settings-wrapper .settings-textarea {
  min-height: 170px;
  resize: vertical;
}

.settings-wrapper .fueling-city-input {
  max-width: 320px;
  min-width: 0;
}

@media (min-width: 768px) {
  .settings-wrapper .fueling-city-input {
    max-width: 360px;
  }
}

.settings-wrapper .table .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* Highlight generated fuelings in listing */
.table .fueling-generated > td,
.table .fueling-generated > th {
  color: #000;
  font-weight: 600;
}

.table .fueling-generated > td a:not(.btn),
.table .fueling-generated > th a:not(.btn) {
  color: #000;
  font-weight: 600;
}