/* Zakladni CSS pro weby prevedene z Metra na Fluent UI. Dodava to, co drive obstaravalo Metro a co
   Fluent web components nemaji: reset, typografii, tabulky a horni listu.
   Barvy a rozmery berou Fluent design tokeny (--colorNeutral*, --fontSize*), ktere na dokument
   nastavuje setupFluent().

   [WHY] Kazdy web ma svou kopii v public/css/fluent.css a nacita ji <link>em PRED vlastnim legacy CSS
   webu - jen tak ma site CSS posledni slovo. Nuxt `css:[]` by se vlozil az za <link> tagy a prebil by je. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Vzhled Fluent prvku pred jejich upgradem
   [WHY] Fluent komponenty jsou custom elements - dokud se nenacte jejich JS, jsou to neznama prazdna
   znacka bez vzhledu. Deklarativni shadow DOM, ktery by tohle vyresil primo v HTML, s touto verzi
   nejde pouzit (@microsoft/fast-ssr vyzaduje fast-element 2.x, Fluent 3 jede na 3.x), takze se
   vzhled duplikuje sem: hodnoty odpovidaji tomu, co komponenty vykresli po upgradu (zmereno
   pres getComputedStyle na sestavenem webu). Diky tomu uzivatel prechod nepozna a nic neposkoci.
   Po definici prvku prestanou pravidla platit sama (:not(:defined) uz neodpovida). */
fluent-button:not(:defined),
fluent-anchor-button:not(:defined) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 96px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: var(--borderRadiusMedium, 4px);
    background-color: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground1, #242424);
    font-family: var(--fontFamilyBase, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif);
    font-size: var(--fontSizeBase300, 14px);
    font-weight: var(--fontWeightSemibold, 600);
    line-height: var(--lineHeightBase300, 20px);
    text-decoration: none;
    cursor: pointer;
}

fluent-button[appearance="primary"]:not(:defined),
fluent-anchor-button[appearance="primary"]:not(:defined) {
    border-color: transparent;
    background-color: var(--colorBrandBackground, #0f6cbd);
    color: var(--colorNeutralForegroundOnBrand, #ffffff);
}

fluent-button[appearance="transparent"]:not(:defined),
fluent-anchor-button[appearance="transparent"]:not(:defined) {
    border-color: transparent;
    background-color: transparent;
    color: var(--colorNeutralForeground2, #424242);
}

fluent-button[icon-only]:not(:defined),
fluent-anchor-button[icon-only]:not(:defined) {
    min-width: 32px;
    width: 32px;
    padding: 0;
}

fluent-button[disabled]:not(:defined),
fluent-anchor-button[disabled]:not(:defined) {
    border-color: transparent;
    background-color: var(--colorNeutralBackgroundDisabled, #f0f0f0);
    color: var(--colorNeutralForegroundDisabled, #bdbdbd);
    cursor: not-allowed;
}

fluent-text-input:not(:defined),
fluent-dropdown:not(:defined) {
    display: inline-flex;
    align-items: center;
    height: 32px;
    min-width: 200px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-bottom-color: var(--colorNeutralStrokeAccessible, #616161);
    border-radius: var(--borderRadiusMedium, 4px);
    background-color: var(--colorNeutralBackground1, #ffffff);
}

fluent-textarea:not(:defined) {
    display: block;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-bottom-color: var(--colorNeutralStrokeAccessible, #616161);
    border-radius: var(--borderRadiusMedium, 4px);
    background-color: var(--colorNeutralBackground1, #ffffff);
}

fluent-checkbox:not(:defined),
fluent-radio:not(:defined) {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--colorNeutralStrokeAccessible, #616161);
    background-color: var(--colorNeutralBackground1, #ffffff);
}

fluent-checkbox:not(:defined) {
    border-radius: var(--borderRadiusSmall, 2px);
}

fluent-radio:not(:defined) {
    border-radius: 50%;
}

fluent-field:not(:defined) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

fluent-label:not(:defined) {
    font-size: var(--fontSizeBase300, 14px);
}

/* Prvky, ktere se pred upgradem nemaji ukazat vubec - jinak by se jejich obsah vysypal do stranky. */
fluent-dialog:not(:defined),
fluent-menu-list:not(:defined),
fluent-tooltip:not(:defined) {
    display: none;
}

body {
    margin: 0;
    background-color: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground1, #242424);
    font-family: var(--fontFamilyBase, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif);
    font-size: var(--fontSizeBase300, 14px);
    line-height: var(--lineHeightBase300, 20px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
    font-weight: var(--fontWeightSemibold, 600);
    line-height: 1.2;
}

h1 {
    font-size: var(--fontSizeHero800, 40px);
}

h2 {
    font-size: var(--fontSizeBase600, 24px);
}

h3 {
    font-size: var(--fontSizeBase500, 20px);
}

h4 {
    font-size: var(--fontSizeBase400, 16px);
}

a {
    color: var(--colorBrandForegroundLink, #0f6cbd);
}

a:hover {
    color: var(--colorBrandForegroundLinkHover, #115ea3);
}

img,
iframe {
    max-width: 100%;
}

/* Horni lista - Fluent appbar komponentu nema, je to proto obycejny pruh se stejnou vyskou (52px),
   jakou mela lista v Metru. */
.fluent-appbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 52px;
    padding: 0 10px;
    background-color: var(--colorNeutralBackground1, #ffffff);
    box-shadow: var(--shadow4, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14));
}

.fluent-appbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.fluent-appbar-mail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Vodorovne menu pod listou (v Metru h-menu). */
.fluent-menu-bar {
    background-color: var(--colorNeutralBackground1, #ffffff);
    padding: 4px 6px;
}

/* Tabulky: Fluent 3 web components tabulku nemaji, vzhled Fluent DataGridu se drzi rucne. */
.fluent-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fontSizeBase300, 14px);
    background-color: var(--colorNeutralBackground1, #ffffff);
}

.fluent-table th {
    padding: 8px 10px !important;
    text-align: left;
    font-weight: var(--fontWeightSemibold, 600);
    white-space: nowrap;
    border-bottom: 1px solid var(--colorNeutralStroke1, #d1d1d1);
}

.fluent-table td {
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
}

.fluent-table tbody tr:hover {
    background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
}

/* Sdileny wrapper pro zaoblenou/stinovanou kartu s tabulkou uvnitr (misto aby si kazdy web
   psal vlastni border-radius+overflow rucne). border-collapse:collapse na .fluent-table
   uvnitr s border-radius na wrapperu nekoliduje, protoze zaobleni je jen na wrapperu, ne
   na bunkach - table samotna zustava hranata a wrapper ji jen orizne. Vyzaduje overflow-x
   i overflow-y nastavene explicitne (samotne overflow-x by druhou osu nechalo 'visible'
   v nekterych motorech a zaobleni rohu by se pak neorizlo). */
.fluent-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--borderRadiusMedium, 4px);
    box-shadow: var(--shadow4, 0 1px 4px rgba(0, 0, 0, 0.12));
}

/* Sloupce, podle kterych jde radit (klik na hlavicku). */
.fluent-table th.fluent-sortable {
    cursor: pointer;
    user-select: none;
}

/* Formularove radky - jednotny rozestup mezi Fluent poli. */
.fluent-form-row {
    margin-bottom: 16px;
}

.fluent-field-label {
    display: block;
    margin-bottom: 6px;
}

/* Rozestup nad zaskrtavatkem. Rozlozeni (poradi popisku a inputu) resi fluent-field sam pres grid
   podle label-position - nepredefinovavat tu display, jinak se poradi ridi jen poradim slotu v DOM. */
.fluent-checkbox-row {
    margin-top: 6px;
}

.fluent-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Nativni file input Fluent nema, sjednocen aspon s okolim. */
.fluent-file-input {
    font-family: inherit;
    font-size: var(--fontSizeBase300, 14px);
}