/* =====================================================================
   EDA 2.0 – vzhled (nad Bootstrap 6)
   Barvy se řeší přes light-dark(), takže jedna definice platí pro světlý i tmavý motiv.
   Styly aplikace nejsou v žádné @layer, proto mají přednost před Bootstrapem.
   ===================================================================== */

@font-face { font-family: 'czPlate'; src: url('../fonts/cz.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'dePlate'; src: url('../fonts/de.woff') format('woff'); font-display: swap; }

:root,
:host {
  /* barva EDA (tyrkysová z loga) */
  --eda-brand: oklch(56% 0.075 225);
  --eda-brand-strong: light-dark(oklch(46% 0.075 225), oklch(74% 0.07 225));
  --eda-surface: light-dark(oklch(97.6% 0.004 225), oklch(17.5% 0.012 225));
  --eda-panel: light-dark(#fff, oklch(21% 0.014 225));
  --eda-sidebar-bg: light-dark(#fff, oklch(19.5% 0.014 225));
  --eda-sidebar-fg: light-dark(oklch(30% 0.02 225), oklch(86% 0.015 225));
  --eda-sidebar-muted: light-dark(oklch(55% 0.02 225), oklch(64% 0.02 225));
  --eda-sidebar-hover: light-dark(oklch(96% 0.01 225), oklch(25% 0.016 225));
  --eda-sidebar-active-bg: light-dark(oklch(94% 0.025 225), oklch(28% 0.03 225));
  --eda-sidebar-active-fg: light-dark(oklch(38% 0.07 225), oklch(88% 0.04 225));
  --eda-sidebar-border: light-dark(oklch(91% 0.008 225), oklch(26% 0.014 225));

  /* hlavní barva Bootstrapu = barva EDA */
  --bs-primary-base: var(--eda-brand);
  --bs-primary-fg: var(--eda-brand-strong);
  --bs-primary-fg-emphasis: light-dark(oklch(35% 0.06 225), oklch(87% 0.045 225));
  --bs-primary-bg: light-dark(var(--eda-brand), oklch(64% 0.08 225));
  --bs-primary-bg-subtle: light-dark(oklch(95.5% 0.018 225), oklch(27% 0.035 225));
  --bs-primary-bg-muted: light-dark(oklch(91% 0.03 225), oklch(33% 0.045 225));
  --bs-primary-border: light-dark(oklch(80% 0.045 225), oklch(46% 0.06 225));
  --bs-primary-focus-ring: color-mix(in oklch, var(--eda-brand) 55%, var(--bs-bg-body));
  --bs-primary-contrast: light-dark(#fff, oklch(18% 0.03 225));
  --bs-link-color: var(--eda-brand-strong);
  --bs-bg-body: var(--eda-panel);
  --bs-card-bg: var(--eda-panel);
}

body { background-color: var(--eda-surface); }

body { font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------- rozvržení */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--eda-sidebar-bg);
  color: var(--eda-sidebar-fg);
  border-right: 1px solid var(--eda-sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1030;
}
.sidebar .brand {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem 1rem;
  color: inherit; text-decoration: none;
}
.sidebar .brand img { height: 30px; }
.sidebar .brand small { display: block; color: var(--eda-sidebar-muted); font-size: .72rem; letter-spacing: .02em; line-height: 1.1; }
/* logo v tmavém motivu: černé písmo → bílé, tyrkysová zůstane */
[data-bs-theme="dark"] .brand img, [data-bs-theme="dark"] .login-card .logo { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .brand img, :root:not([data-bs-theme="light"]) .login-card .logo { filter: invert(1) hue-rotate(180deg); }
}
.sidebar .nav-section { padding: .8rem 1.25rem .3rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--eda-sidebar-muted); font-weight: 600; }
.sidebar .nav-link {
  color: var(--eda-sidebar-fg);
  display: flex; align-items: center; justify-content: flex-start; gap: .7rem;
  padding: .42rem 1rem; margin: 1px .6rem;
  border-radius: .45rem;
  font-size: .925rem;
  text-decoration: none;
}
.sidebar .nav-link i { width: 1.15rem; text-align: center; color: var(--eda-sidebar-muted); }
.sidebar .nav-link:hover { background: var(--eda-sidebar-hover); }
.sidebar .nav-link.active { background: var(--eda-sidebar-active-bg); color: var(--eda-sidebar-active-fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--eda-brand); }
.sidebar .nav-link.active i { color: var(--eda-brand-strong); }
.sidebar .sidebar-footer { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--eda-sidebar-border); font-size: .85rem; }
.sidebar .sidebar-footer .user-name { font-weight: 600; }
.sidebar .sidebar-footer .user-meta { color: var(--eda-sidebar-muted); font-size: .78rem; }
.sidebar .btn-sidebar { color: var(--eda-sidebar-fg); border: 1px solid var(--eda-sidebar-border); background: transparent; }
.sidebar .btn-sidebar:hover { background: var(--eda-sidebar-hover); }
.session-bar { height: 3px; background: var(--eda-sidebar-border); border-radius: 2px; overflow: hidden; margin-top: .6rem; }
.session-bar > div { height: 100%; background: var(--eda-brand); width: 100%; transition: width 1s linear, background-color .3s; }
.session-bar.warn > div { background: var(--bs-warning-base); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.75rem;
  background: var(--eda-panel);
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky; top: 0; z-index: 1020;
}
.topbar .search { max-width: 460px; flex: 1; }
.topbar .search .form-control { background: var(--bs-bg-1); }
.topbar .search .form-adorn-icon { color: var(--bs-fg-3); }
.content { padding: 1.5rem 1.75rem 3rem; max-width: 1500px; width: 100%; }

@media (max-width: 1023.98px) {
  .sidebar { position: fixed; left: -260px; transition: left .2s ease; box-shadow: none; }
  .sidebar.show { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .topbar { padding: .6rem 1rem; }
  .content { padding: 1rem 1rem 3rem; }
}

/* ---------------------------------------------------------------- stránky */

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.45rem; font-weight: 650; margin: 0; display: flex; align-items: center; gap: .6rem; }
.page-head h1 .sub { font-weight: 400; color: var(--bs-fg-3); font-size: 1rem; }
.page-head .crumbs { font-size: .82rem; color: var(--bs-fg-3); margin-bottom: .2rem; }
.page-head .crumbs a { color: var(--bs-fg-3); text-decoration: none; }
.page-head .crumbs a:hover { color: var(--eda-brand); }

.card { border-color: var(--bs-border-color); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: var(--eda-panel); font-weight: 600; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .8rem 1.1rem; }
.card { --bs-card-cap-bg: var(--eda-panel); }
.card-header .ms-auto { font-weight: 400; }
.card-header > i:first-child { color: var(--eda-brand); }
.section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-fg-3); font-weight: 600; margin: 1.25rem 0 .5rem; }
.section-title:first-child { margin-top: 0; }

.filters { display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-start; }
.filters .form-control { width: auto; min-width: 150px; }
.filters .form-control.wide { min-width: 300px; flex: 1 1 300px; }

.table { margin-bottom: 0; --bs-table-bg: transparent; }
.table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-fg-3); font-weight: 600; border-bottom-width: 1px; white-space: nowrap; background: var(--bs-bg-1); }
.table td { vertical-align: middle; }
.table-hover > tbody > tr.row-link { cursor: pointer; }
.table .muted-row td { opacity: .55; }
.table tr.family-row td:first-child { padding-left: 2rem; }
.table tr.family-row td { background: color-mix(in oklab, var(--eda-brand) 4%, transparent); }

.empty { text-align: center; color: var(--bs-fg-3); padding: 2.5rem 1rem; }
.empty > i { font-size: 1.75rem; display: block; margin: 0 auto .5rem; opacity: .5; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .92rem; }
.kv dt { color: var(--bs-fg-3); font-weight: 400; }
.kv dd { margin: 0; }

.form-label { font-size: .82rem; font-weight: 600; color: var(--bs-fg-3); margin-bottom: .25rem; }
.form-label i { color: var(--eda-brand); width: 1rem; }
.form-text { font-size: .78rem; }
fieldset[disabled] .form-control { background-color: var(--bs-bg-1); }
.req::after { content: ' *'; color: var(--bs-danger-base); }

.badge-soft { background: var(--bs-bg-2); color: var(--bs-fg-body); border: 1px solid var(--bs-border-color); font-weight: 500; }
.badge-status { font-weight: 500; padding: .35em .6em; }
.make-logo { height: 22px; width: 22px; object-fit: contain; margin-right: .4rem; vertical-align: -5px; }
[data-bs-theme="dark"] .make-logo { filter: invert(1) hue-rotate(180deg) brightness(1.2); }
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); vertical-align: -1px; margin-right: .35rem; }
.type-icon { color: var(--bs-fg-3); width: 1.4rem; text-align: center; }

/* ---------------------------------------------------------------- RZ (registrační značka) */

.plate {
  display: inline-flex; align-items: stretch;
  background: #fff; color: #111;
  border: 1.5px solid #222; border-radius: 4px;
  font-family: 'czPlate', 'DejaVu Sans Mono', monospace;
  font-size: 7.5px; line-height: 1;
  overflow: hidden; white-space: nowrap; vertical-align: middle;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.plate .eu { background: #1e3fa8; color: #fff; font-family: system-ui, sans-serif; font-size: 7px; font-weight: 700; width: 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 2px; }
.plate .eu::before { content: '★'; font-size: 6px; color: #ffd200; margin-bottom: auto; margin-top: 2px; }
.plate .chars { display: flex; align-items: center; padding: 3px 4px 3px 3px; line-height: 1.25; text-transform: uppercase; }
.plate .chars span:not(.sticker) { display: inline-block; width: 10.5px; text-align: center; }
.plate .sticker { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: -2px 3px 0; border: 1px solid rgba(0,0,0,.25); flex-shrink: 0; }
.plate.plate-de { font-family: 'dePlate', 'DejaVu Sans Mono', monospace; font-size: 8px; }
.plate.plate-de .sticker { border-radius: 1px; background: linear-gradient(#111 33%, #d00 33% 66%, #f6c800 66%) !important; }
.plate.plate-sk .sticker { border-radius: 2px 2px 5px 5px; background: linear-gradient(#fff 33%, #2a6cb5 33% 66%, #bf3436 66%) !important; }
.plate.plate-empty { color: #999; }
.plate.plate-lg { font-size: 11px; }
.plate.plate-lg .chars { padding: 4px 6px 4px 4px; }
.plate.plate-lg .chars span:not(.sticker) { width: 15px; }
.plate.plate-lg .eu { width: 16px; font-size: 9px; }
.plate.plate-lg .sticker { width: 11px; height: 11px; }
.plate.plate-retired { opacity: .5; text-decoration: line-through; }
.sticker.sticker-success { background: #2fb344 !important; }
.sticker.sticker-warning { background: #f6b400 !important; }
.sticker.sticker-danger { background: #e03131 !important; }
.sticker.sticker-dark { background: #222 !important; }
.sticker.sticker-secondary { background: #ced4da !important; }

/* ---------------------------------------------------------------- přehled */

.stat-card { display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit; height: 100%; }
.stat-card:hover { border-color: color-mix(in oklab, var(--eda-brand) 50.0%, transparent); }
.stat-card .icon { width: 44px; height: 44px; border-radius: .6rem; background: color-mix(in oklab, var(--eda-brand) 12.0%, transparent); color: var(--eda-brand); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.stat-card .value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.stat-card .label { font-size: .82rem; color: var(--bs-fg-3); }
.alert-card { padding: 1rem 1.1rem; text-decoration: none; color: inherit; display: block; height: 100%; border-left: 4px solid var(--bs-success-base); }
.alert-card.has-items { border-left-color: var(--bs-warning-base); }
.alert-card.has-expired { border-left-color: var(--bs-danger-base); }
.alert-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.alert-card .num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.alert-card .lbl { font-weight: 600; }
.alert-card .hint { font-size: .78rem; color: var(--bs-fg-3); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: .75rem; padding: .55rem 1.1rem; border-top: 1px solid var(--bs-border-color); font-size: .88rem; }
.timeline li:first-child { border-top: 0; }
.timeline .when { color: var(--bs-fg-3); white-space: nowrap; font-size: .8rem; min-width: 7.5rem; }
.timeline .who { color: var(--bs-fg-3); font-size: .8rem; }

/* ---------------------------------------------------------------- převody */

.transfer-list { list-style: none; margin: 0; padding: 0; }
.transfer-list li { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem 1.1rem; border-top: 1px solid var(--bs-border-color); }
.transfer-list li:first-child { border-top: 0; }
.transfer-list .dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem; }
.transfer-list .dot.handover { background: rgba(47,179,68,.14); color: #2b8a3e; }
.transfer-list .dot.return { background: var(--bs-bg-2); color: var(--bs-fg-3); }
.transfer-list .meta { font-size: .8rem; color: var(--bs-fg-3); }
.transfer-list li.latest { background: color-mix(in oklab, var(--eda-brand) 6%, transparent); }

/* ---------------------------------------------------------------- přihlášení */

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--eda-brand) 22%, transparent), transparent 60%), var(--eda-surface); }
.login-card { width: 100%; max-width: 400px; box-shadow: 0 20px 60px light-dark(rgba(16,40,52,.14), rgba(0,0,0,.45)); }
.login-card .logo { height: 54px; }

/* ---------------------------------------------------------------- drobnosti */

.suggest-menu { display: none; position: absolute; z-index: 1060; top: 100%; left: 0; min-width: 100%; max-height: 260px; overflow-y: auto;
  margin-top: 2px; padding: .25rem; background: var(--eda-panel); border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 8px 24px light-dark(rgba(16,40,52,.12), rgba(0,0,0,.5)); }
.suggest-menu.show { display: block; }
.suggest-item { display: block; width: 100%; text-align: left; padding: .35rem .6rem; border: 0; border-radius: .35rem; background: none; color: inherit; font-size: .9rem; cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-fg-emphasis); }
.perm-table td, .perm-table th { padding: .4rem .6rem; }
.perm-table .btn-check { padding: .2rem .55rem; font-size: .8rem; min-height: 0; }
.role-card { display: block; white-space: normal; text-align: left; width: 100%; height: 100%; }
.toast { background: var(--eda-panel); border-left: 4px solid var(--bs-secondary-border); }
.toast.toast-warning { border-left-color: var(--bs-warning-base); }
.toast.toast-danger { border-left-color: var(--bs-danger-base); }
.toast.toast-success { border-left-color: var(--bs-success-base); }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .25rem .75rem; }
.mono { font-family: var(--bs-font-mono); font-size: .85em; }
.text-pre { white-space: pre-wrap; }
.cursor-help { cursor: help; }
.nowrap { white-space: nowrap; }
.min-w-0 { min-width: 0; }
.w-fit { width: fit-content; }
.toast-container { z-index: 1090; }
/* plovoucí hlášení vpravo nahoře pod horní lištou */
.eda-toasts { position: fixed; top: 4.5rem; right: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.eda-toasts .toast { width: 380px; max-width: calc(100vw - 2rem); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.eda-toasts .toast > div { padding: .8rem .9rem; }
.eda-toasts .toast-body { padding: 0; font-size: .9rem; line-height: 1.4; }
.toast-icon { margin-top: .15rem; color: var(--bs-secondary-base); }
.toast-success .toast-icon { color: var(--bs-success-base); }
.toast-danger .toast-icon { color: var(--bs-danger-base); }
.toast-warning .toast-icon { color: var(--bs-warning-base); }
.toast-info .toast-icon { color: var(--bs-info-base); }
.toast.toast-info { border-left-color: var(--bs-info-base); }
@media (max-width: 1023.98px) { .eda-toasts { top: 4rem; right: 1rem; left: 1rem; width: auto; } .eda-toasts .toast { width: auto; max-width: none; } }
@media (max-width: 575.98px) {
  .filters .form-control, .filters .form-control.wide { flex: 1 1 100%; min-width: 0; width: 100%; }
  .page-head h1 { font-size: 1.25rem; }
}
@media print {
  .sidebar, .topbar, .btn-solid, .btn-outline, form.filters, .pagination { display: none !important; }
  .content { padding: 0; }
}

/* výběr krycích RZ při předání / vrácení vozidla */
.cover-pick .form-field { margin-bottom: .35rem; align-items: center; }
.cover-pick .form-text { margin-top: .5rem; }

/* Bootstrap 6 alpha: zavřený <dialog> zůstává display:flex (kvůli animaci) a jen zprůhlední – v toku stránky
   pak prodlužuje stránku o prázdné místo pod obsahem. Zavřený dialog proto „ukotvíme“ mimo tok. */
.dialog:not([open]) { position: fixed; inset: 0; margin: auto; max-height: 100vh; overflow: hidden; pointer-events: none; }

/* vlastní účet: role, které si správce nemůže sám nastavit */
.role-card:has(input:disabled) { opacity: .45; pointer-events: none; }