/* Vzhled „Přehled“ (Appearance.php, docs/architecture/appearance.md, vlastník 25. 10. 2026): design
   Statistiky škod a Statistiky smluv (care-statistics.css) pro celou aplikaci – šedý podklad, bílé
   panely s jemnou linkou a malým stínem, zaoblení 12 / 8 px, tiché popisky, segmentové přepínače,
   tabulky se světlou hlavičkou a jemné odznaky. Markup i chování zůstávají (DaisyUI je motor
   komponent); mění se motiv DaisyUI a vzhled komponent. Načítá se jen u html[data-skin="overview"]. */

/* --- Motiv DaisyUI (světlý a tmavý) a vlastní tokeny ------------------------------------------ */
html[data-skin="overview"] {
  --sk-bg: #eef2f7;
  --sk-line: #eaecf0;
  --sk-line-soft: #f2f4f7;
  --sk-control: #d0d5dd;
  --sk-head: #f9fafb;
  --sk-text-2: #344054;
  --sk-muted: #667085;
  --sk-faint: #98a2b3;
  --sk-shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --sk-shadow-lg: 0 12px 24px -4px rgb(16 24 40 / 0.12), 0 4px 8px -2px rgb(16 24 40 / 0.06);
  --sk-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
  /* Segmentové přepínače (join): podklad, zvolená volba, popisek, najetí, neaktivní volba. */
  --sk-seg-track: var(--sk-line-soft);
  --sk-seg-on: var(--color-base-100);
  --sk-seg-fg: var(--sk-muted);
  --sk-seg-hover: transparent;
  --sk-seg-off: var(--sk-faint);
}

html[data-skin="overview"][data-theme="light"] {
  color-scheme: light;
  --color-base-100: #ffffff;
  --color-base-200: #f2f4f7;
  --color-base-300: #eaecf0;
  --color-base-content: #101828;
  --color-primary: #1d4f91;
  --color-primary-content: #ffffff;
  --color-secondary: #475467;
  --color-secondary-content: #ffffff;
  --color-accent: #da1931;
  --color-accent-content: #ffffff;
  --color-neutral: #101828;
  --color-neutral-content: #ffffff;
  --color-info: #1570ef;
  --color-info-content: #ffffff;
  --color-success: #079455;
  --color-success-content: #ffffff;
  --color-warning: #f79009;
  --color-warning-content: #ffffff;
  --color-error: #d92d20;
  --color-error-content: #ffffff;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

html[data-skin="overview"][data-theme="dark"] {
  color-scheme: dark;
  --sk-bg: #0c111d;
  --sk-line: #1f242f;
  --sk-line-soft: #161b26;
  --sk-control: #333741;
  --sk-head: #161b26;
  --sk-text-2: #cecfd2;
  --sk-muted: #94969c;
  --sk-faint: #85888e;
  --sk-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --sk-shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.5);
  /* Tmavý (vlastník 26. 10. 2026): podklad přepínače, zvolená volba i lišta byly #161b26 – volba nešla
     rozeznat; podklad tmavší než lišta, zvolená volba světlejší, popisky čitelné. */
  --sk-seg-track: var(--sk-bg);
  --sk-seg-on: var(--sk-control);
  --sk-seg-fg: var(--sk-text-2);
  --sk-seg-hover: var(--sk-line);
  --sk-seg-off: color-mix(in oklab, var(--sk-faint) 55%, var(--sk-seg-track));
  --color-base-100: #161b26;
  --color-base-200: #1f242f;
  --color-base-300: #2a303c;
  --color-base-content: #f5f5f6;
  --color-primary: #528bff;
  --color-primary-content: #0c111d;
  --color-secondary: #94969c;
  --color-secondary-content: #0c111d;
  --color-accent: #f97066;
  --color-accent-content: #0c111d;
  --color-neutral: #f5f5f6;
  --color-neutral-content: #0c111d;
  --color-info: #53b1fd;
  --color-info-content: #0c111d;
  --color-success: #47cd89;
  --color-success-content: #0c111d;
  --color-warning: #fdb022;
  --color-warning-content: #0c111d;
  --color-error: #f97066;
  --color-error-content: #0c111d;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* --- Písmo a podklad --------------------------------------------------------------------------- */
html[data-skin="overview"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[data-skin="overview"] :is(.app-shell, .app-main, .auth-shell) {
  background: var(--sk-bg);
}

html[data-skin="overview"] ::selection {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* --- Panely, karty a okna ------------------------------------------------------------------------ */
html[data-skin="overview"] :is(.top-panel, .card) {
  border: 1px solid var(--sk-line);
  border-radius: var(--radius-box);
  box-shadow: var(--sk-shadow-xs);
}

html[data-skin="overview"] .modal-box {
  border: 1px solid var(--sk-line);
  border-radius: 1rem;
  box-shadow: var(--sk-shadow-lg);
}

html[data-skin="overview"] :is(.dropdown-content, .menu.dropdown-content) {
  border-color: var(--sk-line);
  box-shadow: var(--sk-shadow-lg);
}

html[data-skin="overview"] :is(.invoice-detail-section, .invoice-detail-toolbar, .invoice-detail-footer) {
  border-color: var(--sk-line);
}

/* --- Horní lišta, menu a taby -------------------------------------------------------------------- */
/* Lišta nástrojů zůstává bílým pruhem přes celou šířku (jako karta by ji přetékající nástroje úzkých
   oken přesahovaly a oříznout ji nejde kvůli rozbalovacím nabídkám). */
html[data-skin="overview"] .app-navbar {
  border-bottom-color: var(--sk-line) !important;
}

html[data-skin="overview"] .sidebar-shell.sidebar-shell {
  border-right: 1px solid var(--sk-line);
  background: var(--color-base-100);
}

/* Aktivní aplikace (vlastník 26. 10. 2026): plný jemný podklad barvy značky bez stínu. Stín „pilulky“
   Klasického vzhledu byl ve tmavém režimu světlý a kolem položky dělal mlhavý opar. */
html[data-skin="overview"] .app-menu-tree a.menu-active,
html[data-skin="overview"] .app-menu-tree a.menu-active:hover {
  background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100));
  color: var(--color-primary);
  font-weight: 650;
  box-shadow: none;
}

html[data-skin="overview"][data-theme="dark"] .app-menu-tree a.menu-active,
html[data-skin="overview"][data-theme="dark"] .app-menu-tree a.menu-active:hover {
  background: color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100));
}

html[data-skin="overview"] .app-menu-tree a.menu-active > i {
  color: var(--color-primary);
}

/* Sekce bočního menu jako tiché popisky (jako popisky filtrů Statistiky). */
html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree > li > details > summary {
  color: var(--sk-faint);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree > li > details > summary > i {
  display: none;
}

/* Vnořené skupiny bočního menu (Smlouvy, Škody, Finanční reporty …; vlastník 26. 10. 2026): z ikony
   nadřazené položky vede tenká linka a ke každé podřazené položce se zaobleně stáčí až před její
   ikonu, u poslední linka obloukem končí. Kreslí ji ::before (svislá část) a ::after (oblouk) položek
   na místě dosavadní svislé čáry (levý okraj seznamu, střed ikony nadřazené položky). Podklad
   aktivní položky jde přes konec oblouku. Ve sbaleném menu se nekreslí. Barva je plná (smíchaná
   s podkladem menu, ne průhledná): svislá čára a začátek oblouku se překrývají a průhledná barva by
   se v překryvu zesílila – na Windows bylo vidět, kde oblouk odbočuje (vlastník 26. 10. 2026). */
html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul {
  --sk-tree-line: color-mix(in oklab, var(--color-base-content) 20%, var(--color-base-100));
  border-left-color: transparent;
}

html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul > li {
  position: relative;
}

html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul > li > :is(a, details) {
  position: relative;
  z-index: 1;
}

html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul > li::before,
html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul > li::after {
  content: "";
  position: absolute;
  left: calc(-0.45rem - 1px);
  border-left: 1px solid var(--sk-tree-line);
  pointer-events: none;
}

html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul > li::before {
  top: 0;
  bottom: 0;
}

/* Linka začíná kousek pod ikonou nadřazené položky; u poslední položky končí, kde začíná oblouk. */
html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul > li:first-child::before {
  top: -0.6rem;
}

html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul > li:last-child::before {
  bottom: calc(50% + 0.5rem);
}

html[data-skin="overview"]:not([data-nav="top"]) .app-menu-tree ul details > ul > li::after {
  top: 0;
  width: 0.9rem;
  height: 50%;
  border-bottom: 1px solid var(--sk-tree-line);
  border-bottom-left-radius: 0.5rem;
}

@media (min-width: 768px) {
  html[data-skin="overview"][data-sidebar-state="collapsed"] .app-menu-tree li::after {
    content: none !important;
  }
}

/* --- Hlavní lišta a taby aplikací (vlastník 25. 10. 2026) -------------------------------------
   Lišta nástrojů je rovný pruh napojený na menu (žádné zaoblení, rámeček ani stín panelu). Taby mají
   podklad lišty, ne obsahu, a jsou tiché: oddělí je jen jemná linka, neaktivní tab je text bez
   rámečku, aktivní bílá záložka s jemným obrysem, která přechází do lišty pod ní. */
html[data-skin="overview"] .app-navbar-toolbar {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-skin="overview"] .application-tabbar {
  border-bottom: 0;
  background: var(--color-base-100);
  box-shadow: inset 0 -1px 0 var(--sk-line);
}

html[data-skin="overview"][data-tabs="classic"] .application-tab {
  border-color: transparent;
  background: transparent;
  color: var(--sk-muted);
  font-weight: 600;
}

html[data-skin="overview"][data-tabs="classic"] .application-tab:hover,
html[data-skin="overview"][data-tabs="classic"] .application-tab:focus-visible {
  border-color: transparent;
  background: var(--sk-line-soft);
  color: var(--sk-text-2);
}

html[data-skin="overview"][data-tabs="classic"] .application-tab.is-active {
  border-color: var(--sk-line);
  background: var(--color-base-100);
  color: var(--color-base-content);
}

/* --- Tlačítka: bílá s jemným okrajem, barevná plná, segmentové skupiny jako ve Statistice -------- */
html[data-skin="overview"] .btn {
  font-weight: 600;
  box-shadow: none;
}

html[data-skin="overview"] .btn:not(:where(.btn-primary, .btn-secondary, .btn-accent, .btn-neutral, .btn-info, .btn-success, .btn-warning, .btn-error, .btn-ghost, .btn-link, .btn-outline, .btn-soft, .btn-dash, .join-item)) {
  --btn-color: var(--color-base-100);
  --btn-border: var(--sk-control);
  --btn-fg: var(--sk-text-2);
  box-shadow: var(--sk-shadow-xs);
}

html[data-skin="overview"] .btn:not(:where(.btn-primary, .btn-secondary, .btn-accent, .btn-neutral, .btn-info, .btn-success, .btn-warning, .btn-error, .btn-ghost, .btn-link, .btn-outline, .btn-soft, .btn-dash, .join-item)):hover {
  --btn-color: var(--sk-head);
}

html[data-skin="overview"] .btn:focus-visible {
  outline: none;
  box-shadow: var(--sk-focus);
}

html[data-skin="overview"] .join:has(> .btn.join-item) {
  gap: 2px;
  border-radius: var(--radius-field);
  background: var(--sk-seg-track);
  padding: 3px;
}

html[data-skin="overview"] .join:has(> .btn.join-item) > .btn.join-item {
  --btn-color: transparent;
  --btn-border: transparent;
  --btn-fg: var(--sk-seg-fg);
  border-radius: calc(var(--radius-field) - 2px) !important;
  box-shadow: none;
}

html[data-skin="overview"] .join:has(> .btn.join-item) > .btn.join-item:hover {
  --btn-color: var(--sk-seg-hover);
  --btn-fg: var(--color-base-content);
}

html[data-skin="overview"] .join:has(> .btn.join-item) > :is(.btn.join-item.btn-active, .btn.join-item.btn-primary, input.btn.join-item:checked) {
  --btn-color: var(--sk-seg-on);
  --btn-fg: var(--color-base-content);
  background: var(--sk-seg-on);
  color: var(--color-base-content);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.1);
}

/* Neaktivní volba (šipka stránkování na kraji, „…“, zakázaný posun; vlastník 26. 10. 2026): DaisyUI jí
   dává šedý blok, který v podkladu přepínače vypadal jako vybraná volba. Zůstává průhledná, jen tišší
   popisek; tři tečky mají barvu ostatních čísel. */
html[data-skin="overview"] .join:has(> .btn.join-item) > :is(.btn-disabled, .btn:disabled, .btn[aria-disabled="true"]).join-item:not(.btn-active, :checked) {
  --btn-color: transparent;
  --btn-fg: var(--sk-seg-off);
  background: transparent;
  color: var(--sk-seg-off);
  box-shadow: none;
}

html[data-skin="overview"] .join:has(> .btn.join-item) > .btn-disabled.report-pagination-ellipsis.join-item:not(.btn-active) {
  --btn-fg: var(--sk-seg-fg);
  color: var(--sk-seg-fg);
  cursor: default;
}


/* --- Pole formulářů ------------------------------------------------------------------------------ */
html[data-skin="overview"] :is(.input, .select, .textarea, .file-input) {
  --input-color: var(--sk-control);
  border-color: var(--sk-control);
  box-shadow: var(--sk-shadow-xs);
}

html[data-skin="overview"] :is(.input, .select, .textarea, .file-input):is(:focus, :focus-within, :open) {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--sk-control));
  outline: none;
  box-shadow: var(--sk-focus);
}

html[data-skin="overview"] .fieldset-legend {
  color: var(--sk-text-2);
  font-size: 0.8rem;
  font-weight: 600;
}

/* --- Tabulky ------------------------------------------------------------------------------------- */
html[data-skin="overview"] :is(.report-grid-table, .table) thead th,
html[data-skin="overview"] .report-grid-panel > .report-table-scroll > .report-grid-table thead th {
  border-bottom: 1px solid var(--sk-line);
  background: var(--sk-head);
  color: var(--sk-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

html[data-skin="overview"] :is(.report-grid-table, .table) tbody td {
  border-bottom: 1px solid var(--sk-line-soft);
}

html[data-skin="overview"] :is(.report-grid-table, .table).table-zebra tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--sk-head) 55%, var(--color-base-100));
}

html[data-skin="overview"] :is(.report-grid-table, .table) tbody tr:hover {
  background: var(--sk-head);
}

html[data-skin="overview"] .report-table-footer {
  border-top: 1px solid var(--sk-line);
}

/* --- Odznaky a upozornění: jemné barevné podklady ------------------------------------------------ */
html[data-skin="overview"] .badge {
  border-radius: 999px;
  font-weight: 600;
}

html[data-skin="overview"] :is(.badge-primary, .badge-info, .badge-success, .badge-warning, .badge-error, .badge-secondary, .badge-accent):not(.badge-outline, .badge-soft, .badge-dash) {
  border-color: transparent;
}

html[data-skin="overview"] .badge-primary:not(.badge-outline, .badge-dash) { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-base-100)); color: var(--color-primary); }
html[data-skin="overview"] .badge-info:not(.badge-outline, .badge-dash) { background: color-mix(in srgb, var(--color-info) 12%, var(--color-base-100)); color: color-mix(in srgb, var(--color-info) 80%, var(--color-base-content)); }
html[data-skin="overview"] .badge-success:not(.badge-outline, .badge-dash) { background: color-mix(in srgb, var(--color-success) 12%, var(--color-base-100)); color: color-mix(in srgb, var(--color-success) 80%, var(--color-base-content)); }
html[data-skin="overview"] .badge-warning:not(.badge-outline, .badge-dash) { background: color-mix(in srgb, var(--color-warning) 16%, var(--color-base-100)); color: color-mix(in srgb, var(--color-warning) 70%, var(--color-base-content)); }
html[data-skin="overview"] .badge-error:not(.badge-outline, .badge-dash) { background: color-mix(in srgb, var(--color-error) 12%, var(--color-base-100)); color: color-mix(in srgb, var(--color-error) 85%, var(--color-base-content)); }

html[data-skin="overview"] .alert {
  border-radius: var(--radius-field);
  box-shadow: none;
}

html[data-skin="overview"] :is(.alert-info, .alert-success, .alert-warning, .alert-error) {
  border: 1px solid;
}

html[data-skin="overview"] .alert-info { border-color: color-mix(in srgb, var(--color-info) 30%, var(--color-base-100)); background: color-mix(in srgb, var(--color-info) 8%, var(--color-base-100)); color: color-mix(in srgb, var(--color-info) 75%, var(--color-base-content)); }
html[data-skin="overview"] .alert-success { border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-base-100)); background: color-mix(in srgb, var(--color-success) 8%, var(--color-base-100)); color: color-mix(in srgb, var(--color-success) 75%, var(--color-base-content)); }
html[data-skin="overview"] .alert-warning { border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-base-100)); background: color-mix(in srgb, var(--color-warning) 9%, var(--color-base-100)); color: color-mix(in srgb, var(--color-warning) 60%, var(--color-base-content)); }
html[data-skin="overview"] .alert-error { border-color: color-mix(in srgb, var(--color-error) 30%, var(--color-base-100)); background: color-mix(in srgb, var(--color-error) 8%, var(--color-base-100)); color: color-mix(in srgb, var(--color-error) 80%, var(--color-base-content)); }

/* --- Taby uvnitř stránek a oken ------------------------------------------------------------------ */
html[data-skin="overview"] .catalog-modal-tabs {
  border-bottom-color: var(--sk-line);
}

html[data-skin="overview"] .catalog-tab {
  color: var(--sk-muted);
  font-weight: 600;
}