/* Koně: barevně odlišené dlaždice a menší tlačítka v oknech (Petr 4. 11. 2026, návrh A + princip z Koček).
   Základ zůstává vínově červený, dlaždice dostanou decentní vlastní pastelový odstín. Jen povrch, ne rozložení ani chování. */
html.compact-preview {
  --bk-zel-bg:#e3f4ea; --bk-zel-ln:#4f9a6e; --bk-zel-tx:#1c5236;
  --bk-mod-bg:#e4eefb; --bk-mod-ln:#5b8fc9; --bk-mod-tx:#1d3f6e;
  --bk-zlu-bg:#fbf0cf; --bk-zlu-ln:#c9a032; --bk-zlu-tx:#6b4f00;
  --bk-ruz-bg:#fbe4ea; --bk-ruz-ln:#c8506c; --bk-ruz-tx:#7a1a35;
  --bk-tyr-bg:#dff3f1; --bk-tyr-ln:#4a9d98; --bk-tyr-tx:#14504c;
  --bk-ora-bg:#fde9dc; --bk-ora-ln:#d8854e; --bk-ora-tx:#7a3a10;
  --bk-sed-bg:#eeeaea; --bk-sed-ln:#9b8f92; --bk-sed-tx:#4d3f43;
  --bk-vin-bg:#f3d6dc; --bk-vin-ln:#8c1a30; --bk-vin-tx:#5a0f1e;
}
html.compact-preview.dark {
  --bk-zel-bg:#16382a; --bk-zel-ln:#7fc8a1; --bk-zel-tx:#bfeed3;
  --bk-mod-bg:#14283f; --bk-mod-ln:#8dbcf5; --bk-mod-tx:#c5dcfa;
  --bk-zlu-bg:#3b3210; --bk-zlu-ln:#e0c05a; --bk-zlu-tx:#f6e3a0;
  --bk-ruz-bg:#3d1a2a; --bk-ruz-ln:#f2a0c0; --bk-ruz-tx:#fbc8dc;
  --bk-tyr-bg:#123532; --bk-tyr-ln:#7fcfc9; --bk-tyr-tx:#bdeeea;
  --bk-ora-bg:#3d2616; --bk-ora-ln:#f0aa7a; --bk-ora-tx:#fbd4b6;
  --bk-sed-bg:#2e2729; --bk-sed-ln:#b5a6aa; --bk-sed-tx:#e3d8db;
  --bk-vin-bg:#3f141c; --bk-vin-ln:#f58da0; --bk-vin-tx:#fbc8d1;
}
/* Pomocné: obarvení dlaždice všemi třemi vrstvami včetně textu uvnitř */
html.compact-preview :is(#add-adult-btn,#add-litter-btn,#add-income-btn,.stats>.stat:nth-child(3),.compact-overview>.stats>.stat:nth-child(3),.cl-stat:nth-child(3),#cal-events-btn,.cc-stat:nth-child(3),.tab-item:nth-child(3),.sex-tab:nth-child(4)) { --c-bg:var(--bk-zel-bg); --c-ln:var(--bk-zel-ln); --c-tx:var(--bk-zel-tx); }
html.compact-preview :is(#global-search-btn,.stats>.stat:nth-child(4),.cl-stat:nth-child(4),#litter-parent-btn,.cc-stat:nth-child(2),.tab-item:nth-child(4),.sex-tab:nth-child(2)) { --c-bg:var(--bk-mod-bg); --c-ln:var(--bk-mod-ln); --c-tx:var(--bk-mod-tx); }
html.compact-preview :is(.fbtn-reserved,.stats>.stat:nth-child(5),#cal-notif-btn,.cc-stat:nth-child(1)) { --c-bg:var(--bk-zlu-bg); --c-ln:var(--bk-zlu-ln); --c-tx:var(--bk-zlu-tx); }
html.compact-preview :is(.fbtn-mating,.stats>.stat:nth-child(2),.cl-stat:nth-child(2),.tab-item:nth-child(2),.sex-tab:nth-child(3),#add-expense-btn) { --c-bg:var(--bk-ruz-bg); --c-ln:var(--bk-ruz-ln); --c-tx:var(--bk-ruz-tx); }
html.compact-preview :is(.fbtn-notes,.sex-tab:nth-child(4)) { --c-bg:var(--bk-tyr-bg); --c-ln:var(--bk-tyr-ln); --c-tx:var(--bk-tyr-tx); }
html.compact-preview :is(.h-tile.h-tile-outline.tap44:not(#lang-pill-btn):not(#global-search-btn):not(#litter-parent-btn),#fin-export-btn,#add-cal-btn) { --c-bg:var(--bk-ora-bg); --c-ln:var(--bk-ora-ln); --c-tx:var(--bk-ora-tx); }
html.compact-preview :is(.tab-item:nth-child(5),.sex-tab:nth-child(5),#cf-filtry-btn) { --c-bg:var(--bk-sed-bg); --c-ln:var(--bk-sed-ln); --c-tx:var(--bk-sed-tx); }
html.compact-preview :is(.stats>.stat:nth-child(1),.cl-stat:nth-child(1),.tab-item:nth-child(1),.sex-tab:nth-child(1)) { --c-bg:var(--bk-vin-bg); --c-ln:var(--bk-vin-ln); --c-tx:var(--bk-vin-tx); }
html.compact-preview :is(#add-adult-btn,#add-litter-btn,#add-income-btn,#add-expense-btn,#global-search-btn,#litter-parent-btn,#cal-events-btn,#cal-notif-btn,#add-cal-btn,.h-tile.h-tile-outline.tap44:not(#lang-pill-btn):not(#global-search-btn):not(#litter-parent-btn),#fin-export-btn,#cf-filtry-btn,.fbtn-notes,.fbtn-mating,.fbtn-reserved,.compact-overview>.stats>.stat,.cl-stat,.cc-stat,.sex-tab,.tab-item) {
  background: var(--c-bg) !important; border-color: var(--c-ln) !important; color: var(--c-tx) !important;
}
html.compact-preview :is(#add-adult-btn,#add-litter-btn,#add-income-btn,#add-expense-btn,#global-search-btn,#litter-parent-btn,#cal-events-btn,#cal-notif-btn,#add-cal-btn,.h-tile.h-tile-outline.tap44:not(#lang-pill-btn):not(#global-search-btn):not(#litter-parent-btn),#fin-export-btn,#cf-filtry-btn,.fbtn-notes,.fbtn-mating,.fbtn-reserved,.compact-overview>.stats>.stat,.cl-stat,.cc-stat,.sex-tab,.tab-item) :is(span,strong,b,small,div,i) { color: var(--c-tx) !important; }
html.compact-preview .tab-item.active, html.compact-preview .sex-tab.active { box-shadow: inset 0 0 0 1px var(--c-ln) !important; font-weight: 800; }

/* Okno Poznámky / Čekací listina: Poznámky, Čekací listina a „+ Nová poznámka“ jedním řádkem po třech, stejně velké, text na střed */
html.compact-preview #notes-overlay #notes-list-view > .modal-body { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
html.compact-preview #notes-overlay #notes-list-view > .modal-body > div:first-child { display: contents !important; }
html.compact-preview #notes-overlay #notes-tab-content:not([style*="none"]), html.compact-preview #notes-overlay #wl-tab-content:not([style*="none"]) { display: contents !important; }
html.compact-preview #notes-overlay :is(#notes-tab-btn,#wl-tab-btn,#notes-tab-content>.btn-primary,#wl-tab-content>.btn-primary) {
  grid-row: 1; width: 100% !important; min-width: 0; margin: 0 !important; padding: 4px 6px !important; height: 46px; min-height: 46px !important; box-sizing: border-box;
  display: flex !important; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; font-size: calc(13px * var(--fs-scale,1)); overflow: hidden; overflow-wrap: anywhere; border-radius: 6px !important; flex: none !important;
}
html.compact-preview #notes-overlay #notes-tab-btn { grid-column: 1; background: var(--bk-ruz-bg) !important; border: 1px solid var(--bk-ruz-ln) !important; color: var(--bk-ruz-tx) !important; }
html.compact-preview #notes-overlay #wl-tab-btn { grid-column: 2; background: var(--bk-zlu-bg) !important; border: 1px solid var(--bk-zlu-ln) !important; color: var(--bk-zlu-tx) !important; }
html.compact-preview #notes-overlay :is(#notes-tab-content>.btn-primary,#wl-tab-content>.btn-primary) { grid-column: 3; background: var(--bk-zel-bg) !important; border: 1px solid var(--bk-zel-ln) !important; color: var(--bk-zel-tx) !important; }
html.compact-preview #notes-overlay :is(#notes-list,#wl-list) { grid-column: 1 / -1; grid-row: 2; }
html.compact-preview #notes-overlay :is(#notes-tab-btn,#wl-tab-btn).btn-primary { box-shadow: inset 0 0 0 1px currentColor; }

/* Tlačítko Zavřít v oknech: malé, uprostřed, vínové */
html.compact-preview .modal-footer { justify-content: center !important; }
html.compact-preview .modal-footer > :is(.btn-close,.btn-primary,.btn):only-child, html.compact-preview #notes-overlay .modal-footer .btn {
  width: auto !important; min-width: 150px; max-width: 70%; min-height: 40px !important; padding: 0 22px !important; margin: 0 auto !important; border-radius: 6px !important;
  background: var(--bk-vin-ln) !important; border: 1px solid var(--bk-vin-ln) !important; color: #fff !important; font-weight: 700;
}
html.dark.compact-preview .modal-footer > :is(.btn-close,.btn-primary,.btn):only-child, html.dark.compact-preview #notes-overlay .modal-footer .btn { background: var(--bk-vin-bg) !important; color: var(--bk-vin-tx) !important; }

/* Tmavý režim: starší pravidla perleti (compact-pearl.css) přebíjela barvy horních tlačítek, proto stejně silný výběr */
html.dark.compact-preview:not(#s1):not(#s2) #header-row2 :is(#add-adult-btn,#add-litter-btn,#add-income-btn,#add-expense-btn,#global-search-btn,#litter-parent-btn,#cal-events-btn,#cal-notif-btn,#add-cal-btn,#fin-export-btn,#cf-filtry-btn,.fbtn-notes,.fbtn-mating,.fbtn-reserved,.h-tile.h-tile-outline.tap44:not(#lang-pill-btn):not(#global-search-btn):not(#litter-parent-btn)) {
  background: var(--c-bg) !important; border-color: var(--c-ln) !important; color: var(--c-tx) !important;
}

/* Spodní tlačítka oken: nejvýš tři vedle sebe, stejně velká, vycentrovaná. Uložit zelené, Smazat růžové, ostatní (Zavřít…) vínové. */
html.compact-preview .modal-footer { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch; gap: 8px !important; }
html.compact-preview .modal-footer > :is(.btn,.btn-close,.btn-primary,.btn-danger) {
  flex: 0 1 calc(33.333% - 6px) !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 4px 8px !important; min-height: 42px !important;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; overflow-wrap: anywhere; border-radius: 6px !important; box-sizing: border-box; font-weight: 700;
  background: var(--bk-vin-bg) !important; border: 1px solid var(--bk-vin-ln) !important; color: var(--bk-vin-tx) !important;
}
html.compact-preview .modal-footer:has(> :nth-child(2):last-child) > :is(.btn,.btn-close,.btn-primary,.btn-danger) { flex-basis: calc(50% - 4px) !important; }
html.compact-preview .modal-footer > :is(.btn,.btn-close,.btn-primary,.btn-danger):only-child { flex: 0 0 auto !important; min-width: 150px !important; max-width: 70% !important; padding: 0 22px !important; background: var(--bk-vin-ln) !important; color: #fff !important; }
html.dark.compact-preview .modal-footer > :is(.btn,.btn-close,.btn-primary,.btn-danger):only-child { background: var(--bk-vin-bg) !important; color: var(--bk-vin-tx) !important; }
html.compact-preview .modal-footer > .btn-primary:not(:only-child) { background: var(--bk-zel-bg) !important; border-color: var(--bk-zel-ln) !important; color: var(--bk-zel-tx) !important; }
html.compact-preview .modal-footer > :is(.btn-danger,[style*="var(--danger)"]):not(:only-child) { background: var(--bk-ruz-bg) !important; border-color: var(--bk-ruz-ln) !important; color: var(--bk-ruz-tx) !important; }

/* Samostatné Zavřít uprostřed okna (bez spodní lišty): malé a vycentrované */
html.compact-preview :is(.modal,.modal-body) > .btn-close { width: auto !important; min-width: 150px; max-width: 70%; display: block; margin: 14px auto 0 !important; padding: 0 22px !important; min-height: 40px; border-radius: 6px !important; background: var(--bk-vin-ln) !important; border: 1px solid var(--bk-vin-ln) !important; color: #fff !important; font-weight: 700; }
html.dark.compact-preview :is(.modal,.modal-body) > .btn-close { background: var(--bk-vin-bg) !important; color: var(--bk-vin-tx) !important; }
html.compact-preview #pedigree-overlay .btn-close { width: auto !important; min-width: 150px; margin-left: auto !important; margin-right: auto !important; display: block; }
html.compact-preview button[onclick*="addPupExternalSire"] { width: auto !important; min-width: 200px; display: block !important; margin: 8px auto 0 !important; }
/* Spodní lišta, kde jsou část tlačítek zabalená v pomocném bloku (Zavřít + Uložit): blok se rozpustí, aby byla všechna v jedné řadě */
html.compact-preview .modal-footer > div:has(> .btn) { display: contents !important; }
html.compact-preview .modal-footer > div:has(> .btn) > :is(.btn,.btn-close,.btn-primary,.btn-danger) {
  flex: 0 1 calc(33.333% - 6px) !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 4px 8px !important; min-height: 42px !important;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; overflow-wrap: anywhere; border-radius: 6px !important; box-sizing: border-box; font-weight: 700;
  background: var(--bk-vin-bg) !important; border: 1px solid var(--bk-vin-ln) !important; color: var(--bk-vin-tx) !important;
}
html.compact-preview .modal-footer > div:has(> .btn) > .btn-primary { background: var(--bk-zel-bg) !important; border-color: var(--bk-zel-ln) !important; color: var(--bk-zel-tx) !important; }
/* Okna Hříbě a Vrh mají vlastní mřížku se dvěma sloupci: tady tři stejně velká tlačítka vedle sebe */
html.compact-preview :is(#pup-overlay,#litter-overlay) .modal-footer { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; justify-content: stretch !important; }
html.compact-preview :is(#pup-overlay,#litter-overlay) .modal-footer button { grid-row: auto !important; grid-column: auto !important; flex: none !important; width: 100% !important; margin: 0 !important; }
html.compact-preview :is(#pup-overlay,#litter-overlay) .modal-footer #pup-delete-btn { order: 1; }
html.compact-preview :is(#pup-overlay,#litter-overlay) .modal-footer button[onclick*="closeOverlay"] { order: 2; }
html.compact-preview :is(#pup-overlay,#litter-overlay) .modal-footer :is(button[onclick*="savePup("],button[onclick*="saveLitter"]) { order: 3; }

/* Tlačítka vedle sebe v oknech mají stejnou velikost a sílu písma (dřív aktivní 800 / ostatní 500 / Sdílet 15 px) */
html.compact-preview .overlay :is(div,footer):has(> .btn + .btn) > .btn,
html.compact-preview .overlay .modal-footer button,
html.compact-preview #notes-overlay :is(#notes-tab-btn,#wl-tab-btn,#notes-tab-content>.btn-primary,#wl-tab-content>.btn-primary) {
  font-size: calc(13px * var(--fs-scale, 1)) !important; font-weight: 700 !important; font-family: inherit;
}
/* Čtyři tlačítka v liště na úzkém telefonu: dvě a dvě, ne čtyři namačkaná */
@media (max-width: 480px) { html.compact-preview .modal-footer:has(> :nth-child(4)) > :is(.btn,.btn-close,.btn-primary,.btn-danger) { flex-basis: calc(50% - 4px) !important; } }
@media (max-width: 480px) {
  html.compact-preview #dog-overlay .modal-footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.compact-preview #dog-overlay .modal-footer button { flex: none !important; width: 100% !important; overflow-wrap: normal; }
}

/* Okna vytvářená za běhu (Výdej, Příjem, Krytí, Událost, Šablony…): dvojice a trojice tlačítek jsou stejně široké, vycentrované, stejné písmo */
html.compact-preview :is([id$="-modal"],[id$="-overlay"],.overlay) div:not(.modal-footer):has(> .btn + .btn) { justify-content: center !important; flex-wrap: wrap; gap: 8px !important; }
html.compact-preview :is([id$="-modal"],[id$="-overlay"],.overlay) div:not(.modal-footer):has(> .btn + .btn) > .btn {
  flex: 0 1 calc(33.333% - 6px) !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 4px 8px !important; min-height: 42px !important;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; overflow-wrap: anywhere; border-radius: 6px !important; box-sizing: border-box;
  font-size: calc(13px * var(--fs-scale, 1)) !important; font-weight: 700 !important;
  background: var(--bk-vin-bg) !important; border: 1px solid var(--bk-vin-ln) !important; color: var(--bk-vin-tx) !important;
}
html.compact-preview :is([id$="-modal"],[id$="-overlay"],.overlay) div:not(.modal-footer):has(> .btn + .btn):has(> .btn:nth-child(2):last-child) > .btn { flex-basis: calc(50% - 4px) !important; max-width: 220px !important; }
html.compact-preview :is([id$="-modal"],[id$="-overlay"],.overlay) div:not(.modal-footer):has(> .btn + .btn) > .btn-primary { background: var(--bk-zel-bg) !important; border-color: var(--bk-zel-ln) !important; color: var(--bk-zel-tx) !important; }
html.compact-preview :is([id$="-modal"],[id$="-overlay"],.overlay) div:not(.modal-footer):has(> .btn + .btn) > :is(.btn-danger,[style*="var(--danger)"]) { background: var(--bk-ruz-bg) !important; border-color: var(--bk-ruz-ln) !important; color: var(--bk-ruz-tx) !important; }

/* Samotná tlačítka přes celou šířku okna: stejná pevná šířka uprostřed; Zavřít/Zrušit malé */
html.compact-preview :is([id$="-modal"],[id$="-overlay"]) .btn[style*="width:100%"]:not(.btn + .btn):not(.btn:has(+ .btn)) { width: min(100%, 360px) !important; display: block; margin-left: auto !important; margin-right: auto !important; }
html.compact-preview :is([id$="-modal"],[id$="-overlay"]) .btn[style*="width:100%"]:is([onclick*="close"],[onclick*="remove()"],[onclick*="Close"]):not(.btn + .btn):not(.btn:has(+ .btn)) { width: auto !important; min-width: 150px; max-width: 70%; background: var(--bk-vin-ln) !important; border-color: var(--bk-vin-ln) !important; color: #fff !important; font-weight: 700; }
html.dark.compact-preview :is([id$="-modal"],[id$="-overlay"]) .btn[style*="width:100%"]:is([onclick*="close"],[onclick*="remove()"],[onclick*="Close"]):not(.btn + .btn):not(.btn:has(+ .btn)) { background: var(--bk-vin-bg) !important; color: var(--bk-vin-tx) !important; }

/* Malé dialogy s akcemi (Dokumenty vrhu, Výsledky na výstavách…): tlačítka stejně široká uprostřed, Zavřít malé */
html.compact-preview .of-main > .of-act { display: flex; align-items: center; justify-content: center; text-align: center; width: min(100%, 360px) !important; min-height: 42px; margin: 8px auto 0 !important; padding: 4px 12px !important; box-sizing: border-box; font-size: calc(13px * var(--fs-scale, 1)) !important; font-weight: 700 !important; line-height: 1.15; overflow-wrap: anywhere; border-radius: 6px !important; }
html.compact-preview .of-main > .of-act.of-y { width: auto !important; min-width: 150px; max-width: 70%; }
html.compact-preview .of-main > .of-act.of-y:last-child { margin-top: 14px !important; }
html.compact-preview :is(#exhibition-card-overlay,#litter-show-form-modal) button { font-weight: 700 !important; }
@media (max-width: 480px) { html.compact-preview #dog-overlay .modal-footer { grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Kalendář: Přidat, Události, Upozornění a Hledat jsou v jedné řadě i na telefonu (Petr 4. 11. 2026) */
@media (max-width: 760px) {
  html.compact-preview.compact-calendar:not(.compact-home) #header-row2 .header-left-group { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px !important; align-items: stretch; }
  html.compact-preview.compact-calendar:not(.compact-home) #header-row2 .header-left-group > :is(#add-cal-btn,#cal-events-btn,#cal-notif-btn,#global-search-btn) {
    flex: none !important; width: 100% !important; min-width: 0 !important; padding: 2px 3px !important; display: flex !important; align-items: center; justify-content: center; text-align: center;
    flex-direction: column; gap: 0 !important; font-size: calc(12px * var(--fs-scale, 1)) !important; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto;
  }
}

/* Dvě podobné barvy vedle sebe (Petr 4. 11. 2026): Hříbat a záložka Hříbata jsou fialové, ne růžové jako Dospělých / Koně */
:root { --bk-fia-bg:#ece6f8; --bk-fia-ln:#8a6cc4; --bk-fia-tx:#3f2a72; }
html.dark { --bk-fia-bg:#2a2144; --bk-fia-ln:#b9a2f0; --bk-fia-tx:#dccffb; }
html.compact-preview:not(#_) :is(.stats>.stat:nth-child(2),.compact-overview>.stats>.stat:nth-child(2),.tab-item:nth-child(2)) { --c-bg:var(--bk-fia-bg); --c-ln:var(--bk-fia-ln); --c-tx:var(--bk-fia-tx); }

/* Bez ikonek (Petr 4. 11. 2026): prázdné rámečky po ikonkách a SVG ikonky v Nastavení pryč, zůstávají jen záložky a dvě dlaždice nahoře */
.set-brand-icon-box, .settings-tile.settings-tile-lg svg, .settings-tile.settings-tile-lg .set-ico { display: none !important; }

/* Finance (Petr 4. 11. 2026): lichá dlaždice přehledu na telefonu přes celou šířku */
@media (max-width: 600px) { html.compact-preview .cf-overview > .cf-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Finance: tlačítka nahoře lícují s dlaždicemi pod nimi (mezera 4 px, ne 6 px, jinak zbývalo 4 px po stranách) */
@media (min-width: 601px) { html.compact-finance.compact-finance.compact-finance #header-row2 .header-left-group > :not([hidden]) { flex: 0 0 calc((100% - 16px) / 5) !important; } }