/* Rozložení aplikace (Appearance.php, docs/architecture/appearance.md, vlastník 25. 10. 2026): volby,
   které jdou kombinovat s jakýmkoli vzhledem – úzká lišta menu, horní menu, taby aplikací (podtržené,
   pilulky, čipy), taby stránek a oken (pilulky, čipy), hustota, obrys aktivního pole a zaoblení tenanta.
   Platí podle atributů <html data-nav data-tabs data-pagetabs data-density data-outline data-radius>;
   výchozí hodnoty (boční menu, klasické taby, podtržené taby stránek, standardní hustota, zaoblení
   podle vzhledu) tu nemají žádné pravidlo, takže dosavadní vzhled se nemění – kromě obrysu aktivního
   pole, který je podle vlastníka (25. 10. 2026) výchozí barevný. */

/* --- Hustota: celé rozhraní je v rem, takže stačí základní velikost písma ---------------------- */
html[data-density="compact"] {
  font-size: 15px;
}

html[data-density="spacious"] {
  font-size: 17px;
}

html[data-density="compact"] :is(.report-grid-table, .table) :is(th, td) {
  padding-block: 0.45rem;
}

html[data-density="spacious"] :is(.report-grid-table, .table) :is(th, td) {
  padding-block: 0.95rem;
}

/* Kompaktní lišta (vlastník 28. 10. 2026): tlačítka, hledání a výběry lišty mají ve všech aplikacích standardní
   velikost DaisyUI (40 px); kompaktní hustota je zmenší na malou (jako btn-sm, input-sm, select-sm). Na telefonu
   má lišta vlastní rozměry, proto až od 768 px. */
@media (min-width: 768px) {
  html[data-density="compact"] .app-navbar .btn:not(.btn-xs, .btn-sm) {
    --size: calc(var(--size-field, 0.25rem) * 8);
    --btn-p: 0.75rem;
  }

  html[data-density="compact"] .app-navbar .input:not(.input-xs, .input-sm) {
    --in-size-mul: 8;
  }

  html[data-density="compact"] .app-navbar .select:not(.select-xs, .select-sm) {
    --sl-size-mul: 8;
  }

  /* The bar of an application tab fixes its controls at 2.5rem (app.css), also the small ones (zoom of
     Organizační diagram); compact follows the size. */
  html[data-density="compact"] .app-navbar :is(.btn:not(.btn-xs), .input:not(.input-xs), .select:not(.select-xs)) {
    min-height: var(--size);
    height: var(--size);
  }
}

/* Výška lišty a tab baru podle hustoty (vlastník 28. 10. 2026): kompaktní lišta hned kolem malých prvků (3.5rem
   místo 4.5rem) a nižší tab bar, vzdušná naopak vyšší. Lišta i odsazení obsahu pod ní berou --app-toolbar-height
   (app.css), tab bar a obsah pod ním --application-tabs-height. Telefon má vlastní rozměry. */
@media (min-width: 768px) {
  html[data-density="compact"] {
    --app-toolbar-height: 3.5rem;
  }

  html[data-density="spacious"] {
    --app-toolbar-height: 4.75rem;
  }

  html[data-density="compact"] :is(.application-embedded, .has-application-tabs:not(.application-embedded) .app-content) {
    --application-tabs-height: 2.6rem;
  }

  html[data-density="spacious"] :is(.application-embedded, .has-application-tabs:not(.application-embedded) .app-content) {
    --application-tabs-height: 3.3rem;
  }

  html[data-density="compact"][data-tabs="classic"] .application-tabbar .application-tabs-list {
    padding-top: 0.35rem;
  }

  html[data-density="compact"][data-tabs="classic"] .application-tabbar .application-tab {
    height: 2.25rem;
  }

  html[data-density="compact"][data-tabs="underline"] .application-tabbar .application-tab {
    height: 2.4rem;
  }

  html[data-density="compact"]:is([data-tabs="pills"], [data-tabs="chips"]) .application-tabbar .application-tab {
    height: 1.8rem;
  }

  html[data-density="spacious"][data-tabs="classic"] .application-tabbar .application-tab {
    height: 2.85rem;
  }

  html[data-density="spacious"][data-tabs="underline"] .application-tabbar .application-tab {
    height: 2.9rem;
  }

  html[data-density="spacious"]:is([data-tabs="pills"], [data-tabs="chips"]) .application-tabbar .application-tab {
    height: 2.3rem;
  }
}

/* --- Úzká lišta: sbalené menu jen s ikonami, které zůstává sbalené (index.php ho sbalí) ---------- */
html[data-nav="rail"] [data-sidebar-toggle] {
  display: none !important;
}

/* --- Horní menu (od 1024 px; na menších šířkách zůstává výsuvné menu) --------------------------- */
@media (min-width: 1024px) {
  html[data-nav="top"] {
    --application-sidebar-width: 0px;
    --appearance-topbar-height: 3.75rem;
  }

  html[data-nav="top"] body.app-shell:not(.application-embedded) > .application-drawer {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--appearance-topbar-height) minmax(0, 1fr);
  }

  html[data-nav="top"] body.app-shell:not(.application-embedded) > .application-drawer > .drawer-side {
    width: 100%;
    height: var(--appearance-topbar-height);
    position: sticky;
    top: 0;
    z-index: 45;
    grid-column: 1;
    grid-row: 1;
  }

  html[data-nav="top"] body.app-shell:not(.application-embedded) > .application-drawer > .drawer-content {
    min-height: calc(100vh - var(--appearance-topbar-height));
    grid-column: 1;
    grid-row: 2;
  }

  html[data-nav="top"] body.app-shell:not(.application-embedded) > .application-drawer .sidebar-shell {
    width: 100%;
    height: var(--appearance-topbar-height);
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    overflow: visible;
    border-bottom: 1px solid var(--color-base-300);
    padding: 0 1rem;
  }

  /* Výšky obsahu: o horní lištu méně (taby aplikací i stránky s vlastním posunem). */
  html[data-nav="top"] body.has-application-tabs:not(.application-embedded) > .drawer > .drawer-content,
  html[data-nav="top"] .has-application-tabs:not(.application-embedded) .app-content,
  html[data-nav="top"] .application-tabs-ready:not(.application-embedded) .app-content,
  html[data-nav="top"] .has-application-tabs:not(.application-embedded) .application-panels {
    height: calc(100dvh - var(--appearance-topbar-height));
    min-height: 0;
  }

  html[data-nav="top"] body:not(.application-embedded) :is(.app-main-contained-scroll, .app-main:has(> .calendar-panel:not(.calendar-view-agenda))) {
    height: calc(100dvh - 4.5rem - var(--appearance-topbar-height));
  }

  html[data-nav="top"] body.has-application-tabs:not(.application-embedded) :is(.app-main-contained-scroll, .app-main:has(> .calendar-panel:not(.calendar-view-agenda))) {
    height: calc(100dvh - 7.55rem - var(--appearance-topbar-height));
  }

  /* Logo a název vlevo, bez sbalení menu. */
  html[data-nav="top"] [data-desktop-sidebar] > [data-sidebar-brand] {
    max-width: 16rem;
    flex: 0 1 auto;
    padding: 0;
  }

  html[data-nav="top"] [data-sidebar-toggle],
  html[data-nav="top"] [data-sidebar-brand-icon] {
    display: none !important;
  }

  html[data-nav="top"] [data-sidebar-brand-logo] {
    display: flex;
  }

  /* Sekce menu jako pilulky v řadě, aplikace v rozbalovacím panelu pod nimi. */
  html[data-nav="top"] .sidebar-scroll-region {
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible !important;
  }

  html[data-nav="top"] .app-menu-tree {
    width: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
  }

  html[data-nav="top"] .app-menu-tree > li {
    position: relative;
  }

  html[data-nav="top"] .app-menu-tree > li > details > summary {
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-weight: 650;
    white-space: nowrap;
  }

  html[data-nav="top"] .app-menu-tree > li > details[open] > summary,
  html[data-nav="top"] .app-menu-tree > li > details:has(a.menu-active) > summary {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-100));
    color: var(--color-primary);
  }

  html[data-nav="top"] .app-menu-tree > li > details > ul {
    min-width: 16rem;
    max-height: calc(100dvh - var(--appearance-topbar-height) - 1.5rem);
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 60;
    display: grid;
    gap: 0.125rem;
    overflow-y: auto;
    margin: 0;
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-box);
    background: var(--color-base-100);
    box-shadow: 0 12px 24px -4px rgb(16 24 40 / 0.14), 0 4px 8px -2px rgb(16 24 40 / 0.06);
    padding: 0.5rem;
  }

  /* Partneři, nastavení, tmavý režim a uživatel vpravo; nabídky se otevírají dolů. */
  html[data-nav="top"] [data-desktop-sidebar] > [data-partner-menu-dropdown] {
    width: auto !important;
    max-width: 15rem;
    flex: 0 1 auto;
  }

  html[data-nav="top"] [data-desktop-sidebar] > [data-sidebar-user-row] {
    width: auto !important;
    flex: none;
    border: 0;
    padding: 0;
  }

  html[data-nav="top"] [data-sidebar-user-row] > [data-user-menu-dropdown] {
    flex: none;
  }

  html[data-nav="top"] [data-user-menu-dropdown] .sidebar-user-copy,
  html[data-nav="top"] [data-user-menu-dropdown] .dropdown-chevron {
    display: none;
  }

  html[data-nav="top"] :is([data-user-menu-dropdown], [data-partner-menu-dropdown]) > .dropdown-content {
    width: min(22rem, calc(100vw - 2rem)) !important;
    max-width: min(22rem, calc(100vw - 2rem)) !important;
    top: calc(100% + 0.5rem) !important;
    bottom: auto !important;
    margin: 0;
  }

  html[data-nav="top"] [data-user-menu-dropdown] > .dropdown-content {
    right: 0;
    left: auto;
  }
}

/* --- Taby aplikací jako pilulky: pilulky v pilulkovém pruhu, aktivní vyplněná ------------------ */
html[data-tabs="pills"] .application-tabbar {
  align-items: center;
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}

html[data-tabs="pills"] .application-tabs-list {
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.2rem;
  border-radius: 999px;
  background: var(--color-base-200);
  padding: 0.25rem;
}

html[data-tabs="pills"] .application-tab {
  min-width: 0;
  height: 2.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.35rem 0.45rem 0.35rem 0.85rem;
  box-shadow: none;
}

html[data-tabs="pills"] .application-tab::before {
  display: none;
}

html[data-tabs="pills"] .application-tab:hover,
html[data-tabs="pills"] .application-tab:focus-visible {
  background: var(--color-base-100);
}

html[data-tabs="pills"] .application-tab.is-active {
  background: var(--color-primary);
  color: var(--color-primary-content);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.18);
}

html[data-tabs="pills"] .application-tab.is-active :is(.application-tab-close, .application-tab-link, i) {
  color: inherit;
}

/* --- Taby aplikací podtržené: bílý pruh, aktivní tab podtržený a v barvě (jako taby stránek) ------- */
html[data-tabs="underline"] .application-tabbar {
  background: var(--color-base-100);
}

html[data-tabs="underline"] .application-tabs-list {
  align-items: stretch;
  gap: 0.15rem;
  padding-top: 0.2rem;
}

html[data-tabs="underline"] .application-tab {
  height: 2.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 0.75rem 0.45rem;
  box-shadow: inset 0 -2px 0 transparent;
}

html[data-tabs="underline"] .application-tab:hover,
html[data-tabs="underline"] .application-tab:focus-visible {
  background: color-mix(in srgb, var(--color-base-content) 5%, transparent);
  box-shadow: inset 0 -2px 0 var(--color-base-300);
}

html[data-tabs="underline"] .application-tab.is-active {
  background: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* --- Taby aplikací jako čipy: obrysové štítky, aktivní s obrysem a textem v barvě ---------------- */
html[data-tabs="chips"] .application-tabbar {
  align-items: center;
  background: var(--color-base-100);
}

html[data-tabs="chips"] .application-tabs-list {
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.4rem;
}

html[data-tabs="chips"] .application-tab {
  height: 2.1rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.35rem 0.4rem 0.35rem 0.75rem;
}

html[data-tabs="chips"] .application-tab:hover,
html[data-tabs="chips"] .application-tab:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-base-300));
  background: var(--color-base-100);
}

html[data-tabs="chips"] .application-tab.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100));
  color: var(--color-primary);
}

html[data-tabs="underline"] .application-tab::before,
html[data-tabs="chips"] .application-tab::before {
  display: none;
}

html[data-tabs="underline"] .application-tab.is-active :is(.application-tab-link, i),
html[data-tabs="chips"] .application-tab.is-active :is(.application-tab-link, i) {
  color: inherit;
}

/* --- Taby stránek a oken (catalog-modal-tabs, DaisyUI tabs): klasické, podtržené (výchozí), pilulky, čipy */
/* Klasické (vlastník 29. 10. 2026): kartičky jako klasické taby aplikací – zaoblené nahoře, neaktivní na podkladu
   base-200, aktivní v barvě obsahu bez spodní linky; linku pod taby kreslí vnitřní stín lišty (spodní okraj lišty
   by posunutý tab neschoval – lišta se posouvá do strany a ořezává). */
html[data-pagetabs="classic"] .catalog-modal-tabs,
html[data-pagetabs="classic"] .tabs-border {
  align-items: flex-end;
  gap: 0.25rem;
  border-bottom: 0;
  padding-top: 0.45rem;
  box-shadow: inset 0 -1px 0 var(--sk-line, var(--color-base-300));
}

html[data-pagetabs="classic"] :is(.catalog-tab, .tabs > .tab) {
  min-height: 2.4rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.62rem 0.62rem 0 0;
  background: var(--color-base-200);
  padding: 0.45rem 0.85rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

html[data-pagetabs="classic"] :is(.catalog-tab, .tabs > .tab):hover {
  background: var(--color-base-300);
  color: var(--color-base-content);
}

html[data-pagetabs="classic"] :is(.catalog-tab.is-active, .tabs > .tab.tab-active, .tabs > .tab[aria-selected="true"]) {
  border-bottom-color: var(--color-base-100);
  background: var(--color-base-100);
  color: var(--color-base-content);
}

html[data-pagetabs="classic"] .tabs-border > .tab::before {
  display: none;
}

/* Lux: neaktivní bez kartičky (tlumený popisek), aktivní s jemnou linkou – jako klasické taby aplikací Luxu. */
html[data-pagetabs="classic"][data-skin="overview"] :is(.catalog-tab, .tabs > .tab) {
  border-color: transparent transparent var(--sk-line);
  background: transparent;
  color: var(--sk-muted);
}

html[data-pagetabs="classic"][data-skin="overview"] :is(.catalog-tab, .tabs > .tab):hover {
  background: var(--sk-line-soft);
  color: var(--sk-text-2);
}

html[data-pagetabs="classic"][data-skin="overview"] :is(.catalog-tab.is-active, .tabs > .tab.tab-active, .tabs > .tab[aria-selected="true"]) {
  border-color: var(--sk-line) var(--sk-line) var(--color-base-100);
  background: var(--color-base-100);
  color: var(--color-base-content);
}


html[data-pagetabs="pills"] .catalog-modal-tabs,
html[data-pagetabs="chips"] .catalog-modal-tabs {
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.55rem;
}

html[data-pagetabs="pills"] :is(.catalog-tab, .tabs > .tab) {
  min-height: 2.1rem;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}

html[data-pagetabs="pills"] :is(.catalog-tab, .tabs > .tab):hover {
  background: var(--color-base-200);
}

html[data-pagetabs="pills"] :is(.catalog-tab.is-active, .tabs > .tab.tab-active, .tabs > .tab[aria-selected="true"]) {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-base-100));
  color: var(--color-primary);
}

html[data-pagetabs="chips"] :is(.catalog-tab, .tabs > .tab) {
  min-height: 1.9rem;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
}

html[data-pagetabs="chips"] :is(.catalog-tab, .tabs > .tab):hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-base-300));
}

html[data-pagetabs="chips"] :is(.catalog-tab.is-active, .tabs > .tab.tab-active, .tabs > .tab[aria-selected="true"]) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100));
  color: var(--color-primary);
}

html[data-pagetabs="pills"] .tabs-border > .tab::before,
html[data-pagetabs="chips"] .tabs-border > .tab::before {
  display: none;
}

/* --- Obrys aktivního pole (vlastník 25. 10. 2026): barevný (výchozí – primární barva tenanta),
   obyčejný (neutrální obrys DaisyUI), žádný. Platí pro pole, výběry (i rozbalené) a textová pole;
   Přehled má místo obrysu kroužek (skin-overview.css), tady jen jeho neutrální a vypnutá varianta. */
html[data-outline="color"]:not([data-skin="overview"])[data-theme] :is(.input, .select, .textarea, .file-input):is(:focus, :focus-within, :open) {
  --input-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

html[data-outline="plain"][data-skin="overview"][data-theme] :is(.input, .select, .textarea, .file-input):is(:focus, :focus-within, :open) {
  border-color: color-mix(in srgb, var(--color-base-content) 30%, var(--color-base-100));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base-content) 12%, transparent);
}

html[data-outline="none"][data-theme] :is(.input, .select, .textarea, .file-input):is(:focus, :focus-within, :open) {
  outline: none;
  box-shadow: none;
}

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

/* --- Zaoblení tenanta: rohy panelů, polí a tlačítek nad zaoblením vzhledu ---------------------- */
:root[data-radius="sharp"][data-theme] {
  --radius-box: 0.25rem;
  --radius-field: 0.25rem;
  --radius-selector: 0.25rem;
}

:root[data-radius="rounded"][data-theme] {
  --radius-box: 1.25rem;
  --radius-field: 1rem;
  --radius-selector: 1rem;
}