/* Gosscard — UI harmonizace: sjednocení TLAČÍTEK a DIALOGŮ na design tokeny (gosscard-theme.css).
   Načteno POSLEDNÍ v rozlozeni.phtml → normalizuje stávající třídy bez zásahu do markupu.
   Zásada: base vzhled + sémantické barvy bez !important (aby kontextové/soft varianty
   s vyšší specificitou nebo !important zůstaly zachované — nechceme plošně zploštit design). */

/* ==========================================================================
   1. TLAČÍTKA — konzistentní základ
   ========================================================================== */
.btnSet,
.btnSetBlue,
.btnSetRed,
.btnSetGreen,
.btnSetyelowGreen,
.btn {
    border-radius: var(--gc-radius);
    font-weight: 600;
    font-family: inherit;               /* zabít ojedinělý 'Poppins' na části tlačítek */
    transition: background-color .18s ease, box-shadow .2s ease, filter .15s ease, transform .1s ease;
    cursor: pointer;
}
.btnSet:active,
.btn:active { transform: translateY(0) scale(.98); }

/* Sjednocený viditelný focus (přístupnost).
   Do 2026-08 to bylo mrtvé pravidlo: public.css shazoval `outline`/`box-shadow`
   přes `!important` na každém a/button, takže tenhle prstenec nikdy nebyl vidět.
   Potlačení je pryč, prstenec platí — a `outline: none` tu smí zůstat, protože
   náhradu (box-shadow) nese stejná deklarace. */
.btnSet:focus-visible,
.btnSetBlue:focus-visible,
.btnSetRed:focus-visible,
.btnSetGreen:focus-visible,
.btnSetyelowGreen:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--gc-focus-ring);
}

/* --- Sémantické barvy (opraví odchylky: #e35057, #006A4E, bootstrap šedá) --- */
/* Primár = značková modrá.
   POZOR: NE --gc-primary. Bílý popisek na #007bff má jen 3,98:1 (WCAG AA chce 4,5:1);
   --gc-primary-strong dá 5,22:1. --gc-primary zůstává dekorativní barvou (rámečky,
   ikony, gradienty), kde platí jen 3:1. */
.btnSetBlue,
.btn-primary {
    background-color: var(--gc-primary-strong);
    border-color: var(--gc-primary-strong);
    color: #fff;
}
.btnSetBlue:hover,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--gc-primary-darker);
    border-color: var(--gc-primary-darker);
    color: #fff;
}

/* Destruktiv = jednotná červená (base byla #e35057).
   --gc-danger má s bílým textem 3,76:1, --gc-danger-strong 4,83:1. */
.btnSetRed,
.btn-danger {
    background-color: var(--gc-danger-strong);
    border-color: var(--gc-danger-strong);
    color: #fff;
}
.btnSetRed:hover,
.btn-danger:hover {
    background-color: var(--gc-danger-darker);
    border-color: var(--gc-danger-darker);
    color: #fff;
}

/* Zelená/„success" třídy (base #006A4E) → sjednotit na značkovou modrou jako primární akci
   (v této app jde vždy o potvrzovací tlačítka; publicredesign už jedno btnSetGreen dělá modré) */
.btnSetGreen,
.btnSetyelowGreen {
    background-color: var(--gc-primary-strong);
    border-color: var(--gc-primary-strong);
    color: #fff;
}
.btnSetGreen:hover,
.btnSetyelowGreen:hover {
    background-color: var(--gc-primary-darker);
    border-color: var(--gc-primary-darker);
    color: #fff;
}

/* Bootstrap neutrální/sekundární tlačítka → jemné neutrální (aby nevypadala „jinak") */
.btn-default,
.btn-secondary {
    background-color: var(--gc-bg-soft);
    border-color: var(--gc-border);
    color: var(--gc-text);
}
.btn-default:hover,
.btn-secondary:hover {
    background-color: #eef2f7;
    border-color: #cbd5e1;
    color: var(--gc-text);
}
/* --gc-join má s bílým textem jen 3,30:1 → base bere -strong (5,02:1). */
.btn-success { background-color: var(--gc-join-strong); border-color: var(--gc-join-strong); color: #fff; }
.btn-success:hover { background-color: var(--gc-join-darker); border-color: var(--gc-join-darker); color: #fff; }

/* ==========================================================================
   1b. STAVY, KTERÉ VĚTŠINĚ TLAČÍTEK CHYBĚLY
   ========================================================================== */
/* Nedostupné tlačítko nesmí vypadat klikatelně: ztlumená plocha, žádný hover,
   kurzor „zakázáno".
   `!important` je tu nutné: publicredesign.css barví `.btnSet.btnSetBlue` (a další
   varianty) s `!important`, takže bez něj by zakázané tlačítko zůstalo sytě modré
   a od aktivního by ho nešlo rozeznat. Tenhle soubor se linkuje později, takže
   při shodné specificitě vyhraje. */
.btnSet:disabled,
.btnSetBlue:disabled,
.btnSetRed:disabled,
.btnSetGreen:disabled,
.btnSetyelowGreen:disabled,
.btn:disabled,
.btnSet[disabled],
.btn[disabled],
.btn.disabled,
.btnSet.is-disabled {
    background-color: var(--gc-bg-soft) !important;
    background-image: none !important;
    border-color: var(--gc-border) !important;
    color: var(--gc-text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}
/* Hover/press se u zakázaného tlačítka nesmí projevit vůbec — delight vrstva
   jinak přidá `filter: brightness()` a `scale()` a prvek vypadá aktivně. */
.btnSet:disabled:hover,
.btnSetBlue:disabled:hover,
.btnSetRed:disabled:hover,
.btnSetGreen:disabled:hover,
.btn:disabled:hover,
.btnSet[disabled]:hover,
.btn[disabled]:hover,
.btn.disabled:hover,
.btnSet:disabled:active,
.btn:disabled:active {
    background-color: var(--gc-bg-soft) !important;
    color: var(--gc-text-muted) !important;
    filter: none !important;
    transform: none !important;
}

/* Vyhledávací kolečko (bylo #2563eb) → značková modrá.
   `!important` kvůli publicredesign.css, který si tenhle prvek barví taky. */
#leftPanelContentSearchForm .search-container-icons .btnSetSearch,
.search-container-icons .btnSetSearch {
    background: var(--gc-primary-strong) !important;
}

/* ==========================================================================
   1c. HMATOVÁ PLOCHA IKONOVÝCH TLAČÍTEK (WCAG 2.5.8 — minimum 24×24 px)
   Drobné křížky a „koše" u náhledů fotek se historicky dělaly na 18–22 px.
   Nastavujeme MINIMUM, ne pevnou velikost: `line-height` a `text-align`
   zůstávají z původních pravidel, takže glyf se nikam neposune — jen kolem
   něj přibude plocha. `display: inline-block` je nutný u <span>/<a>, na
   kterých by se min-width jinak vůbec neuplatnil.
   ========================================================================== */
.uploadImagePreviewItemDeleteButton,
.uploadImagePreviewItemDeleteButtonPoint,
.uploadImagePreviewItemDeleteButtonEdit,
.uploadedFilesListItemDeleteEdit,
.uploadUserChangePhotoPreviewItemDeleteButtonEdit,
.uploadUserBackgroundChangePhotoPreviewItemDeleteButtonEdit,
.uploadGroupChangePhotoPreviewItemDeleteButtonEdit,
.uploadGroupBackgroundChangePhotoPreviewItemDeleteButtonEdit,
.uploadItemChangePhotoPreviewItemDeleteButtonEdit,
.pointPageActionsBodyItemAttDeleteButton,
.dialogUserBackgroundChangePhotoHeadClose,
.dialogItemDeleteHeadClose {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    text-align: center;
}

/* ==========================================================================
   2. DIALOGY (jQuery UI) — sjednocení hlavičky, zavírání a tlačítek
   Shell (.ui-dialog = 16px karta + tmavý overlay) už řeší publicredesign;
   tady dorovnáme jQuery UI defaultní ŠEDOU hlavičku/tlačítka na tokeny.
   ========================================================================== */
.ui-dialog .ui-dialog-titlebar {
    background: var(--gc-surface) !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid var(--gc-border) !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    color: var(--gc-text) !important;
    font-weight: 700 !important;
}
.ui-dialog .ui-dialog-title {
    color: var(--gc-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
/* Zavírací křížek dialogu */
.ui-dialog .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    color: var(--gc-text-muted) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    /* Bez !important — jQuery UI tady žádný transition nemá a globální
       `prefers-reduced-motion` v gosscard-delight.css to takhle umí utnout. */
    transition: background-color .15s ease, color .15s ease;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
    background: var(--gc-danger-soft) !important;
    color: var(--gc-danger-strong) !important;
}
.ui-dialog .ui-dialog-titlebar-close:active {
    background: var(--gc-danger-press, #fee2e2) !important;
}
.ui-dialog .ui-dialog-titlebar-close:focus-visible {
    outline: 3px solid var(--gc-primary-strong) !important;
    outline-offset: 2px !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon {
    background-image: none !important;
    text-indent: 0 !important;
    position: static !important;
    margin: 0 !important;
}
/* Tlačítka v patě dialogu (ui-dialog-buttonpane) → token vzhled */
.ui-dialog .ui-dialog-buttonpane {
    background: var(--gc-surface) !important;
    border: none !important;
    border-top: 1px solid var(--gc-border) !important;
    padding: 12px 18px !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button {
    border-radius: var(--gc-radius) !important;
    border: none !important;
    /* -strong, ne -primary: bílý popisek potřebuje 4,5:1 (viz komentář u tlačítek výš). */
    background: var(--gc-primary-strong) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    /* Minimum hmatové plochy podle WCAG 2.5.8. */
    min-height: 40px !important;
    transition: background-color .18s ease;
}
.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
    background: var(--gc-primary-darker) !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button:focus-visible {
    outline: 3px solid var(--gc-primary-strong) !important;
    outline-offset: 2px !important;
}
.ui-dialog .ui-dialog-content { color: var(--gc-text); }

/* ==========================================================================
   Zástupný obrázek, když fotka chybí (/images/no-image.svg)
   ==========================================================================
   Dosazuje ho server (soubor na disku není) i pojistka v hlavičce rozlozeni.phtml
   (obrázek se rozbije až v prohlížeči). Galerie mají na fotkách `object-fit: cover`
   a pevné výšky — u zástupné ikony by to znamenalo výřez ze středu, takže se tady
   přepíná na `contain` a doplňuje světlé pozadí, aby placeholder vypadal jako
   plnohodnotná karta v jakémkoli rámečku. */
img[src$="no-image.svg"] {
    object-fit: contain !important;
    background: var(--gc-bg-soft, #f8fafc);
    border-radius: var(--gc-radius, 12px);
}

/* Čtvercová varianta (/images/no-image-square.svg) pro čtvercová okénka —
   galerie v bublině bodu a dlaždice nabídky. Poměr stran sedí, takže po ní
   nezůstávají pruhy; podklad i zaoblení dodává tenhle blok, protože samotné
   SVG je bez rámečku (jinak by se dvě linky kreslily přes sebe). */
img[src$="no-image-square.svg"] {
    object-fit: contain !important;
    background: var(--gc-bg-soft, #f8fafc);
    border-radius: var(--gc-radius, 12px);
}

/* jquery-ui.css odkazuje na sprity images/ui-icons_*.png, které v projektu nejsou
   (7× HTTP 404 při každém otevření dialogu a prázdná ikona). Aplikace používá
   vlastní ikony (Font Awesome / glyphicon), takže spritové pozadí vypínáme. */
.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon,
.ui-state-default .ui-icon,
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-active .ui-icon,
.ui-state-highlight .ui-icon,
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: none;
}

/* Pojistka: bootstrap.css má `input[type="file"] { display: block }`, což je
   specifičtější než jeho vlastní `[hidden] { display: none }`. File input schovaný
   atributem `hidden` se proto vykreslí (a `input[type=file]{color:transparent}`
   z publicredesign z něj udělá prázdný obdélník, který rozhodí okolní layout).
   Stejná past jako u `.btnSet[hidden]` v gosscard-routes.css. */
input[type="file"][hidden] { display: none !important; }

/* Vlastní popisek místo nativního „Choose File / No file chosen" (jazyk prohlížeče). */
.gcVisuallyHiddenFile {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    /* clip element jen ořízne, ale pořád by zachytával kliky nad popiskem */
    pointer-events: none;
}

.gcFileLabel {
    display: inline-block;
    cursor: pointer;
    margin: 0 10px 0 0;
}

/* File input je vizuálně schovaný, fokus proto musí být vidět na jeho popisku.
   Stejná síla obrysu jako u ostatních prvků (3px, plná barva). */
.gcVisuallyHiddenFile:focus-visible + .gcFileLabel {
    outline: 3px solid var(--gc-primary-strong, #0069d9);
    outline-offset: 2px;
}

.gcFileName {
    font-size: 13px;
    color: var(--gc-text-muted, #5c6b7f);
    vertical-align: middle;
}

/* ==========================================================================
   4. SKIP LINK — přeskočení hlavičky (WCAG 2.4.1)
   ==========================================================================
   Kdo jede z klávesnice, musel se na KAŽDÉ stránce proklikat celou hlavičkou,
   než se dostal k obsahu. Odkaz je první prvek v <body> (rozlozeni.phtml)
   a zviditelní se až při fokusu.

   Barvu textu tu záměrně neurčujeme: public.css má na odkazech
   `color: var(--gc-primary-strong) !important` (5,22:1 na bílé), takže by se
   sem stejně nedostala a ležela by tu jako mrtvý řádek.

   `--gc-focus-ring` je hodnota pro box-shadow (dva prstence), NE barva —
   v `outline: 3px solid var(--gc-focus-ring)` je deklarace neplatná
   a outline vyjde jako `none`. */
.gc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--gc-surface, #fff);
    border: 2px solid var(--gc-primary, #007bff);
    border-radius: 0 0 var(--gc-radius, 12px) 0;
    font-weight: 600;
    text-decoration: underline;
    line-height: 1.2;
    /* Bez tohohle se odkaz zalomil do tří řádků (naměřeno 101×74 px) — je
       `position:absolute` bez šířky, takže se smrskl na nejužší možný blok. */
    white-space: nowrap;
}
.gc-skip-link:focus,
.gc-skip-link:focus-visible {
    left: 0;
    box-shadow: var(--gc-focus-ring);
}