/* 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: 8px;
    min-width: 96px;
    height: 34px;
    padding: 0 18px;
    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;
}

/* Skutecne (uz upgradovane) tlacitko po nacteni Fluent JS - vychozi padding/mezera ikona-text
   pusobi stisknute, prepsano na stejne hodnoty jako placeholder vyse. !important je nutne,
   protoze shadow DOM ma vlastni :host pravidlo s vyssi specificitou nez obycejny tag selector. */
fluent-button:defined,
fluent-anchor-button:defined {
    padding: 0 18px !important;
    min-height: 34px !important;
    --icon-spacing: 8px !important;
}

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%;
}

/* [WHY] Bez tohoto pravidla je fluent-radio-group pred upgradem neznama inline znacka a jeji
   fluent-field potomci (kazdy inline-flex) se sesypou vedle sebe na jeden radek - po upgradu na
   skutecny vertikalni seznam pak obsah viditelne poskoci (CLS). Hodnoty 1:1 s radio-group.styles.js. */
fluent-radio-group:not(:defined) {
    display: flex;
    gap: var(--spacingVerticalL, 16px);
}

fluent-radio-group[orientation="vertical"]:not(:defined) {
    flex-direction: column;
    justify-content: flex-start;
}

fluent-radio-group[orientation="horizontal"]:not(:defined) {
    flex-direction: row;
}

fluent-field:not(:defined) {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalM, 12px);
}

fluent-message-bar:not(:defined) {
    display: block;
    box-sizing: border-box;
    font-size: var(--fontSizeBase200, 12px);
    line-height: var(--lineHeightBase200, 16px);
    width: 100%;
    background: var(--colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    padding: 10px 12px;
    border-radius: var(--borderRadiusMedium, 4px);
    min-height: 36px;
}

fluent-message-bar[intent="warning"]:not(:defined) {
    background-color: var(--colorPaletteDarkOrangeBackground1, #fdf6f3);
    border-color: var(--colorPaletteDarkOrangeBorder1, #f4bfab);
}

fluent-message-bar[intent="error"]:not(:defined) {
    background-color: var(--colorPaletteRedBackground1, #fdf6f6);
    border-color: var(--colorPaletteRedBorder1, #f1bbbc);
}

fluent-message-bar[intent="success"]:not(:defined) {
    background-color: var(--colorPaletteGreenBackground1, #f1faf1);
    border-color: var(--colorPaletteGreenBorder1, #9fd89f);
}

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;
}

/* Na mobilu se do listy vejde jen avatar - e-mail vedle nej by listu rozsiroval mimo obrazovku. */
@media screen and (max-width: 600px) {
    .fluent-appbar-mail-text {
        display: none;
    }
}

/* Barevna lista - 1:1 s legacy #barevnaLista (webforms.Kernel/Html/Core/MultiColorLine.cs, paleta
   GeneralHelper.ColorBars.darkColors). Na starem webu byla soucasti sdileneho General.Master, ktery
   pouzivaly jen Me/* stranky (login, signup, profil...) a hlavni sunamo.cz (npe) - NE jednotlive
   appky (geo, app, phs, sho, dev, var, lyr) se svym vlastnim masterem. */
:root {
    --scz-color-bar: linear-gradient(to right,
        #0B0B3F 0%, #0B0B3F 5%, #BB4C2E 5%, #BB4C2E 10%, #20096E 10%, #20096E 15%,
        #8F750D 15%, #8F750D 20%, #008E40 20%, #008E40 25%, #76D9DE 25%, #76D9DE 30%,
        #93B51D 30%, #93B51D 35%, #C99397 35%, #C99397 40%, #70C2E5 40%, #70C2E5 45%,
        #BCE4F7 45%, #BCE4F7 50%, #3B83D2 50%, #3B83D2 55%, #E96997 55%, #E96997 60%,
        #DEB086 60%, #DEB086 65%, #C77341 65%, #C77341 70%, #6D7F2F 70%, #6D7F2F 75%,
        #EC897B 75%, #EC897B 80%, #AE485C 80%, #AE485C 85%, #CC08C9 85%, #CC08C9 90%,
        #C04277 90%, #C04277 95%, #A74B89 95%, #A74B89 100%);
}

/* [WHY] fixed pseudoelement, ne staticky prvek v toku - .fluent-appbar je fixed (52px), takze staticky
   prvek by se schoval pod nim. Scoped na .me-section (sdilene Fluent Me komponenty) - npe Me sekci
   nepouziva (ma Vuetify auth stranky), takze se toto pravidlo na npe nikdy neuplatni. */
.me-section::before {
    content: "";
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 99;
    pointer-events: none;
    background: var(--scz-color-bar);
}

/* [WHY] npe nema fixed Fluent appbar, ale Vuetify VToolbar (64px) v toku stranky - fixed lista na
   52px by lezela pres nej. Lista je proto staticky pruh hned pod toolbararem (::after na .npe-top-bar,
   korenova trida NpeTopBar.vue). Zapina ji body.show-color-bar, kterou si nastavuje jen npe samo
   (app.vue) - na pho/eng/sho, ktere NpeTopBar take pouzivaji, se lista nezobrazi. */
body.show-color-bar .npe-top-bar::after {
    content: "";
    display: block;
    height: 5px;
    background: var(--scz-color-bar);
}

/* 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: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 16px;
}

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

/* Levy vysouvaci panel (FluentNavDrawer) - Fluent web-components nema nativni drawer, viz komponenta.
   Backdrop nad appbarem (.fluent-appbar ma z-index 100), panel nad backdropem. */
.fluent-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.4);
}

.fluent-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 201;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--colorNeutralBackground1, #ffffff);
    box-shadow: var(--shadow16, 0 8px 16px rgba(0, 0, 0, 0.14));
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    padding: 16px;
}

.fluent-drawer-open {
    transform: translateX(0);
}

.fluent-drawer-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.fluent-drawer-section {
    margin-bottom: 20px;
}

.fluent-drawer-section-content {
    margin-left: 4px;
    margin-top: 8px;
}

.fluent-drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fluent-drawer-link {
    display: inline-block;
    padding: 6px 10px;
    border-radius: var(--borderRadiusMedium, 4px);
    text-decoration: none;
    color: inherit;
    font-size: var(--fontSizeBase300, 14px);
}

.fluent-drawer-link:hover {
    background-color: var(--colorNeutralBackground1Hover, rgba(0, 0, 0, 0.06));
}

.fluent-drawer-lang-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.fluent-drawer-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--borderRadiusMedium, 4px);
    cursor: pointer;
    opacity: 0.6;
    font-size: var(--fontSizeBase300, 14px);
    font-weight: var(--fontWeightSemibold, 600);
}

.fluent-drawer-flag-icon {
    display: inline-flex;
    width: 20px;
    height: 15px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.fluent-drawer-flag-icon :deep(svg),
.fluent-drawer-flag-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fluent-drawer-flag:hover {
    background-color: var(--colorNeutralBackground1Hover, rgba(0, 0, 0, 0.06));
}

.fluent-drawer-flag-active {
    opacity: 1;
    border-color: var(--colorNeutralStroke1, rgba(0, 0, 0, 0.2));
}

.fluent-drawer-version {
    margin-top: 24px;
    font-size: 11px;
    opacity: 0.5;
    line-height: 1.6;
}