/* Vlastní styly - doplnění k Tailwind CDN */

/* Barvy jako proměnné (kanály RGB) — tailwind.config v base.html je bere přes
   rgb(var(--c-…) / <alpha-value>). Tmavý režim (html.dark, volba v Moje nastavení)
   jen přepne hodnoty: světlé odstíny (pozadí, rámečky) ztmavnou, tmavé (text)
   zesvětlí, 400–500 zůstávají. Tisk objednávek a PDF mají vlastní styly a zůstávají světlé. */
:root {
  --c-surface: 255 255 255;
  --c-ink-50: 248 250 252; --c-ink-100: 241 245 249; --c-ink-200: 226 232 240; --c-ink-300: 203 213 225; --c-ink-400: 148 163 184; --c-ink-500: 100 116 139; --c-ink-600: 71 85 105; --c-ink-700: 51 65 85; --c-ink-800: 30 41 59; --c-ink-900: 15 23 42;
  --c-brand-50: 234 248 245; --c-brand-100: 209 240 234; --c-brand-200: 157 222 210; --c-brand-300: 98 199 183; --c-brand-400: 46 170 156; --c-brand-500: 15 139 127; --c-brand-600: 11 113 105; --c-brand-700: 11 91 85; --c-brand-800: 16 72 68; --c-brand-900: 18 59 56;
  --c-gray-50: 249 250 251; --c-gray-100: 243 244 246; --c-gray-200: 229 231 235; --c-gray-300: 209 213 219; --c-gray-400: 156 163 175; --c-gray-500: 107 114 128; --c-gray-600: 75 85 99; --c-gray-700: 55 65 81; --c-gray-800: 31 41 55; --c-gray-900: 17 24 39;
  --c-red-50: 254 242 242; --c-red-100: 254 226 226; --c-red-200: 254 202 202; --c-red-300: 252 165 165; --c-red-400: 248 113 113; --c-red-500: 239 68 68; --c-red-600: 220 38 38; --c-red-700: 185 28 28; --c-red-800: 153 27 27; --c-red-900: 127 29 29;
  --c-amber-50: 255 251 235; --c-amber-100: 254 243 199; --c-amber-200: 253 230 138; --c-amber-300: 252 211 77; --c-amber-400: 251 191 36; --c-amber-500: 245 158 11; --c-amber-600: 217 119 6; --c-amber-700: 180 83 9; --c-amber-800: 146 64 14; --c-amber-900: 120 53 15;
  --c-emerald-50: 236 253 245; --c-emerald-100: 209 250 229; --c-emerald-200: 167 243 208; --c-emerald-300: 110 231 183; --c-emerald-400: 52 211 153; --c-emerald-500: 16 185 129; --c-emerald-600: 5 150 105; --c-emerald-700: 4 120 87; --c-emerald-800: 6 95 70; --c-emerald-900: 6 78 59;
  --c-green-50: 240 253 244; --c-green-100: 220 252 231; --c-green-200: 187 247 208; --c-green-300: 134 239 172; --c-green-400: 74 222 128; --c-green-500: 34 197 94; --c-green-600: 22 163 74; --c-green-700: 21 128 61; --c-green-800: 22 101 52; --c-green-900: 20 83 45;
  --c-blue-50: 239 246 255; --c-blue-100: 219 234 254; --c-blue-200: 191 219 254; --c-blue-300: 147 197 253; --c-blue-400: 96 165 250; --c-blue-500: 59 130 246; --c-blue-600: 37 99 235; --c-blue-700: 29 78 216; --c-blue-800: 30 64 175; --c-blue-900: 30 58 138;
  --c-purple-50: 250 245 255; --c-purple-100: 243 232 255; --c-purple-200: 233 213 255; --c-purple-300: 216 180 254; --c-purple-400: 192 132 252; --c-purple-500: 168 85 247; --c-purple-600: 147 51 234; --c-purple-700: 126 34 206; --c-purple-800: 107 33 168; --c-purple-900: 88 28 135;
}
html.dark {
  --c-surface: 17 26 44;
  --c-ink-50: 11 18 32; --c-ink-100: 23 34 54; --c-ink-200: 35 48 74; --c-ink-300: 51 66 94; --c-ink-400: 107 122 147; --c-ink-500: 148 163 184; --c-ink-600: 180 192 208; --c-ink-700: 207 216 227; --c-ink-800: 226 232 240; --c-ink-900: 241 245 249;
  --c-brand-50: 15 43 40; --c-brand-100: 19 58 54; --c-brand-200: 26 86 80; --c-brand-300: 35 122 112; --c-brand-400: 46 170 156; --c-brand-500: 15 139 127; --c-brand-600: 60 196 179; --c-brand-700: 95 211 196; --c-brand-800: 143 227 216; --c-brand-900: 195 241 234;
  --c-gray-50: 11 18 32; --c-gray-100: 23 34 54; --c-gray-200: 35 48 74; --c-gray-300: 51 66 94; --c-gray-400: 107 122 147; --c-gray-500: 148 163 184; --c-gray-600: 180 192 208; --c-gray-700: 207 216 227; --c-gray-800: 226 232 240; --c-gray-900: 241 245 249;
  --c-red-50: 45 18 21; --c-red-100: 69 26 30; --c-red-200: 100 34 38; --c-red-300: 153 27 27; --c-red-400: 248 113 113; --c-red-500: 239 68 68; --c-red-600: 248 113 113; --c-red-700: 252 165 165; --c-red-800: 254 202 202; --c-red-900: 254 226 226;
  --c-amber-50: 43 30 10; --c-amber-100: 66 44 12; --c-amber-200: 99 64 14; --c-amber-300: 146 90 12; --c-amber-400: 251 191 36; --c-amber-500: 245 158 11; --c-amber-600: 251 191 36; --c-amber-700: 252 211 77; --c-amber-800: 253 230 138; --c-amber-900: 254 243 199;
  --c-emerald-50: 6 38 30; --c-emerald-100: 6 56 43; --c-emerald-200: 6 78 59; --c-emerald-300: 4 120 87; --c-emerald-400: 52 211 153; --c-emerald-500: 16 185 129; --c-emerald-600: 52 211 153; --c-emerald-700: 110 231 183; --c-emerald-800: 167 243 208; --c-emerald-900: 209 250 229;
  --c-green-50: 10 37 22; --c-green-100: 14 55 31; --c-green-200: 20 83 45; --c-green-300: 21 128 61; --c-green-400: 74 222 128; --c-green-500: 34 197 94; --c-green-600: 74 222 128; --c-green-700: 134 239 172; --c-green-800: 187 247 208; --c-green-900: 220 252 231;
  --c-blue-50: 16 28 56; --c-blue-100: 23 37 84; --c-blue-200: 30 58 138; --c-blue-300: 29 78 216; --c-blue-400: 96 165 250; --c-blue-500: 59 130 246; --c-blue-600: 96 165 250; --c-blue-700: 147 197 253; --c-blue-800: 191 219 254; --c-blue-900: 219 234 254;
  --c-purple-50: 36 18 54; --c-purple-100: 52 24 80; --c-purple-200: 76 29 117; --c-purple-300: 107 33 168; --c-purple-400: 192 132 252; --c-purple-500: 168 85 247; --c-purple-600: 192 132 252; --c-purple-700: 216 180 254; --c-purple-800: 233 213 255; --c-purple-900: 243 232 255;
}


:root {
  --brand-50:  #EAF8F5;
  --brand-500: #0F8B7F;
  --brand-700: #0B5B55;
  --accent-500: #D97706;
  --ink-900: #111827;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

input[type="text"], input[type="number"], input[type="date"],
input[type="password"], input[type="email"], select, textarea {
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(15, 139, 127, 0.14);
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

.icon-sm { width: 1rem; height: 1rem; stroke-width: 2; }
.icon-md { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.icon-lg { width: 1.35rem; height: 1.35rem; stroke-width: 2; }
.icon-xl { width: 1.75rem; height: 1.75rem; stroke-width: 1.8; }
/* ikona v řadě vedle dlouhého textu se nesmrskne (na telefonu z ní zbyla čárka) */
.icon-sm, .icon-md, .icon-lg, .icon-xl { flex-shrink: 0; }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}

.app-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  color: white;
  background: linear-gradient(135deg, #0F8B7F, #D97706);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(17, 24, 39, 0.2);
}

.app-mark-sm {
  width: 1.8rem;
  height: 1.8rem;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  color: currentColor;
}

/* Horní lišta — sekce */
.topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.5rem;
  padding: 0 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--c-ink-600));
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* Pod 2xl je osm sekcí + logo + avatar těsných — užší odsazení */
@media (max-width: 1535px) { .topnav-link { padding: 0 0.65rem; } }
.topnav-link:hover { color: rgb(var(--c-ink-900)); background: rgb(var(--c-ink-50)); }
.topnav-link.is-active { color: rgb(var(--c-brand-700)); border-bottom-color: var(--brand-500); font-weight: 600; }

/* Druhá lišta — položky sekce */
.subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2rem;
  padding: 0 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(var(--c-ink-600));
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.subnav-link:hover { color: rgb(var(--c-ink-900)); background: rgb(var(--c-ink-100)); }
.subnav-link.is-active { color: rgb(var(--c-brand-700)); background: rgb(var(--c-brand-50)); font-weight: 600; }

/* HTMX indicator */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Tlačítka */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-500);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
  border: 0;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 4px 12px rgba(15, 139, 127, 0.22); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgb(var(--c-surface));
  color: rgb(var(--c-ink-700));
  padding: 0.5rem 1rem;
  border: 1px solid rgb(var(--c-ink-300));
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.btn-secondary:hover { background: rgb(var(--c-ink-50)); border-color: rgb(var(--c-ink-400)); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #DC2626;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #047857;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.metric-card {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-gray-200));
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  /* číslo v dlaždici se zmenší podle její šířky (cqi); dlaždice jsou vždy
     buňky mřížky, takže jejich šířka na obsahu nezávisí */
  container-type: inline-size;
}

.metric-label {
  color: rgb(var(--c-gray-500));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric-value {
  color: rgb(var(--c-gray-900));
  font-size: 1.65rem;
  /* na úzké dlaždici (telefon, 5 dlaždic vedle sebe) se „1 506 450,00" vejde
     na jeden řádek, místo aby se číslo rozlomilo */
  font-size: clamp(0.95rem, 13.5cqi, 1.65rem);
  font-weight: 750;
  line-height: 1.15;
  margin-top: 0.25rem;
}

.panel {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-gray-200));
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}

.panel-warning,
.panel.border-amber-200 {
  border-color: rgb(var(--c-amber-200));
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid rgb(var(--c-gray-200));
}

.panel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(var(--c-gray-800));
  font-weight: 650;
}

.action-card {
  display: block;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-gray-200));
  border-radius: 0.5rem;
  padding: 1.25rem;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.action-card:hover {
  border-color: var(--brand-500);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}

.kicker {
  color: rgb(var(--c-gray-500));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Karta - hover efekt */
.hover-card {
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.hover-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  border-color: rgb(var(--c-brand-200));
}

/* Badge variants */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.badge-red { background: rgb(var(--c-red-100)); color: rgb(var(--c-red-700)); }
.badge-amber { background: rgb(var(--c-amber-100)); color: rgb(var(--c-amber-700)); }
.badge-green { background: rgb(var(--c-emerald-100)); color: rgb(var(--c-emerald-700)); }
.badge-blue { background: rgb(var(--c-blue-100)); color: rgb(var(--c-blue-700)); }
.badge-gray { background: rgb(var(--c-ink-100)); color: rgb(var(--c-ink-600)); }

/* Subtle scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-ink-300)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-ink-400)); }

/* Progress bar pulzace */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* Calendar cell */
.cal-cell {
  min-height: 110px;
}
.cal-cell-outside {
  background: rgb(var(--c-ink-50));
  color: rgb(var(--c-ink-400));
}
.cal-event {
  display: block;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}
.cal-event-reminder {
  background: rgb(var(--c-amber-100));
  color: rgb(var(--c-amber-800));
  border-color: rgb(var(--c-amber-200));
}
.cal-event-reminder-overdue {
  background: rgb(var(--c-red-100));
  color: rgb(var(--c-red-800));
  border-color: rgb(var(--c-red-200));
}
.cal-event-record {
  background: rgb(var(--c-emerald-100));
  color: rgb(var(--c-emerald-800));
  border-color: rgb(var(--c-emerald-200));
}

/* Sekce nadpis */
.section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: rgb(var(--c-ink-500));
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Animace pro x-show s x-collapse fallback */
[x-cloak] { display: none !important; }

/* --- mobil -----------------------------------------------------------------
   Tlačítka, štítky a čísla se uvnitř nelámou. Na telefonu a tabletu (< 1024 px)
   se místo toho zalamují celé řady tlačítek, výběry nepřetečou přes okraj a
   buňky tabulek drží jeden řádek — tabulka se posouvá do strany ve vlastním
   obalu (.overflow-x-auto), ne celá stránka. Dlouhé texty (dodavatel, zakázka,
   popis) se zalamují jen ve sloupcích označených .cell-text. */
.btn-primary, .btn-secondary, .btn-danger, .btn-success, .badge { white-space: nowrap; }
select { max-width: 100%; min-width: 0; }   /* dlouhé volby (zakázky, vozidla) výběr neroztáhnou */
/* dlouhé řetězce (adresy, názvy souborů) nepřetečou. Pozor: rozlomí i běžné slovo
   v boxu zmáčknutém na pár pixelů (text s min-w-0 vedle nezalomitelných štítků
   a tlačítek) — takové řady musí na telefonu zalamovat celé prvky, ne písmena */
main { overflow-wrap: break-word; }
/* kódy a čísla dokladů (FV-2026-00217, SPZ) se nelámou po pomlčkách; dlouhé
   textové sloupce mají minimální šířku, aby se nezalomily do sloupečku slov */
main td.font-mono, main td .font-mono { white-space: nowrap; }
main th.cell-text, main td.cell-text { min-width: 12rem; }

@media (max-width: 1023px) {
  main .flex:has(> .btn-primary, > .btn-secondary, > .btn-danger, > .btn-success,
                 > form > .btn-primary, > form > .btn-secondary, > form > .btn-danger, > form > .btn-success) {
    flex-wrap: wrap;
  }
  /* záhlaví panelu: tlačítko spadne pod nadpis místo přetečení */
  main .panel-header { flex-wrap: wrap; row-gap: 0.5rem; }
  /* položka filtru s dlouhým výběrem (zakázky) nepřeteče přes okraj */
  main .flex-wrap > * { max-width: 100%; }
  main th, main td { white-space: nowrap; }
  main th.cell-text, main td.cell-text { white-space: normal; }
}
/* nejužší telefony: dlaždice s čísly pod sebou (dvě vedle sebe mají jen ~100 px) */
@media (max-width: 359px) {
  main .grid:has(> .metric-card) { grid-template-columns: minmax(0, 1fr); }
  /* dlaždice přes dva sloupce (col-span-2) by jinak přidala druhý sloupec a ostatní smrskla na nulu */
  main .grid:has(> .metric-card) > * { grid-column: 1 / -1; }
}

/* --- tmavý režim ------------------------------------------------------------
   Barvy přepínají proměnné výše; tady jen to, co na proměnných neleží:
   bílé plochy (bg-white), ovládací prvky formulářů, plné tlačítkové odstíny
   s bílým textem (v tmavém režimu by brand-600/700 zesvětlaly) a logo. */
html.dark { color-scheme: dark; }
html.dark .bg-white:not(canvas):not(img) { background-color: rgb(var(--c-surface)); }
html.dark .bg-white\/95 { background-color: rgb(var(--c-surface) / 0.95); }
html.dark .bg-white\/90 { background-color: rgb(var(--c-surface) / 0.9); }
html.dark .bg-brand-600 { background-color: rgb(15 139 127); }
html.dark .border-brand-600 { border-color: rgb(15 139 127); }
html.dark .hover\:bg-brand-700:hover { background-color: rgb(11 113 105); }
html.dark .btn-primary:hover { box-shadow: 0 4px 12px rgba(15, 139, 127, 0.35); }
/* pole formulářů bez vlastní barvy pozadí (nulová specifičnost — třídy Tailwindu vyhrávají) */
:where(html.dark) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea) {
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-ink-900));
}
/* štítky a tečky paliv mají barvu inline (filtr fuelcolor) — tmavomodrá nafta by na tmavém pozadí zanikla */
html.dark [style*="#1F3864"] { filter: brightness(2.2); }
/* logo je tmavé na bílé — v tmavém režimu na světlém štítku */
html.dark .logo-ui { background: #fff; border-radius: 0.5rem; padding: 2px 6px; }