/* ── IPC Brand Colors (from inovacne.sk) ───────────────────
   --ipc-accent:  #28A9CC   (primary teal/cyan – buttons, links)
   --ipc-dark:    #1E2222   (dark – header, footer, panels)
   --ipc-bg:      #F5F6F6   (light background)
   ──────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ────────────────────────────────────────── */
:root {
    --primary-color: #28A9CC !important;
    --primary-color-text: #ffffff !important;
    --primary-text-color: #ffffff !important;
    --highlight-bg: #28A9CC !important;
    --highlight-text-color: #ffffff !important;
    --focus-ring: 0 0 0 2px #28A9CC !important;

    --ipc-accent:       #28A9CC;
    --ipc-accent-dark:  #3fc4ea;
    --ipc-accent-soft:  rgba(40, 169, 204, .14);
    --ipc-dark:         #10262b;

    /* Teplá CTA paleta (huly.io "See in Action" tlačidlo) — vyhradená len
       pre hlavné akčné tlačidlá, aby zvyšok appky ostal neutrálne šedo-čierny
       namiesto plošne zafarbeného tealom. */
    --cta-bg:        #dcd8d3;
    --cta-bg-hover:  #eae6e1;
    --cta-text:      #4a2410;
    --cta-glow-1:    rgba(255, 170, 129, .4);
    --cta-glow-2:    rgba(255, 121, 80, .4);

    /* Neutrálny hover tón pre bežné zoznamy/položky (nie akcentovaný tealom) */
    --surface-hover: rgba(255, 255, 255, .08);

    --surface:      rgba(255, 255, 255, .05);
    --bg:           #0b1416;
    --border:       rgba(255, 255, 255, .1);
    --text:         #eef2f2;
    --text-soft:    rgba(255, 255, 255, .68);
    --text-muted:   rgba(255, 255, 255, .48);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 9999px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);

    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

    /* ── Bočný sidebar (desktop app shell) ─────────────────── */
    --sidebar-width:     240px;
    --sidebar-bg:        #10262b;
    --sidebar-bg-hover:  #1a373d;
    --sidebar-text:      rgba(255,255,255,.68);
    --sidebar-text-soft: rgba(255,255,255,.5);
}

/* ── Reset & Base ─────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    isolation: isolate;
    --spot-x: 50%;
    --spot-y: 50%;

    /* Takmer čierne pozadie (huly.io) - väčšinou neutrálne, len jedna
       veľmi jemná teal žiara v rohu namiesto plošného modrého nádychu. */
    background:
        radial-gradient(ellipse 1300px 1000px at 0% -10%,   rgba(255, 255, 255, .035) 0%, transparent 68%),
        radial-gradient(ellipse 1300px 1100px at 105% 0%,   rgba(40, 169, 204, .05) 0%, transparent 68%),
        radial-gradient(ellipse 1000px 900px at 50% 100%,   rgba(255, 255, 255, .02) 0%, transparent 70%),
        linear-gradient(160deg, #0d0f10 0%, #0b0c0d 45%, #08090a 100%);
    background-attachment: fixed;
    background-size: cover;
}
/* Obrazec neurónovej siete (vrstvy uzlov prepojené hranami, 3-2-3), ktorý
   sa dlaždicuje a odhaľuje okolo kurzora naprieč celou appkou (huly.io
   efekt, rovnaké ako .home-hero/.landing-hero/.login-page) - --spot-x/
   --spot-y nastavuje globálny mousemove listener v a11y-toggle.xhtml.
   position:fixed sleduje viewport súradnice, funguje aj pri scrolle. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cg stroke='rgba%28255,255,255,0.55%29' stroke-width='1' fill='none'%3E%3Cline x1='1025' y1='237' x2='1197' y2='251'/%3E%3Cline x1='1459' y1='818' x2='1401' y2='676'/%3E%3Cline x1='789' y1='21' x2='675' y2='28'/%3E%3Cline x1='1308' y1='499' x2='1456' y2='623'/%3E%3Cline x1='1142' y1='643' x2='1180' y2='829'/%3E%3Cline x1='476' y1='95' x2='675' y2='28'/%3E%3Cline x1='1174' y1='360' x2='1316' y2='342'/%3E%3Cline x1='1401' y1='676' x2='1472' y2='575'/%3E%3Cline x1='476' y1='95' x2='423' y2='186'/%3E%3Cline x1='236' y1='43' x2='108' y2='21'/%3E%3Cline x1='385' y1='812' x2='306' y2='816'/%3E%3Cline x1='989' y1='720' x2='1024' y2='556'/%3E%3Cline x1='1142' y1='643' x2='1119' y2='472'/%3E%3Cline x1='688' y1='541' x2='808' y2='648'/%3E%3Cline x1='140' y1='654' x2='306' y2='816'/%3E%3Cline x1='989' y1='720' x2='912' y2='850'/%3E%3Cline x1='743' y1='345' x2='924' y2='350'/%3E%3Cline x1='989' y1='720' x2='1180' y2='829'/%3E%3Cline x1='864' y1='866' x2='689' y2='828'/%3E%3Cline x1='688' y1='541' x2='590' y2='646'/%3E%3Cline x1='236' y1='43' x2='131' y2='169'/%3E%3Cline x1='940' y1='76' x2='789' y2='21'/%3E%3Cline x1='1025' y1='237' x2='1092' y2='41'/%3E%3Cline x1='808' y1='546' x2='808' y2='648'/%3E%3Cline x1='133' y1='389' x2='316' y2='384'/%3E%3Cline x1='1473' y1='85' x2='1338' y2='279'/%3E%3Cline x1='308' y1='248' x2='316' y2='384'/%3E%3Cline x1='308' y1='248' x2='108' y2='21'/%3E%3Cline x1='745' y1='179' x2='684' y2='206'/%3E%3Cline x1='1473' y1='85' x2='1354' y2='80'/%3E%3Cline x1='864' y1='866' x2='912' y2='850'/%3E%3Cline x1='131' y1='169' x2='108' y2='21'/%3E%3Cline x1='1119' y1='472' x2='1024' y2='556'/%3E%3Cline x1='590' y1='646' x2='689' y2='828'/%3E%3Cline x1='222' y1='551' x2='140' y2='654'/%3E%3Cline x1='1480' y1='425' x2='1308' y2='499'/%3E%3Cline x1='745' y1='179' x2='789' y2='21'/%3E%3Cline x1='308' y1='248' x2='423' y2='186'/%3E%3Cline x1='222' y1='551' x2='399' y2='511'/%3E%3Cline x1='1316' y1='342' x2='1480' y2='425'/%3E%3Cline x1='472' y1='323' x2='316' y2='384'/%3E%3Cline x1='743' y1='345' x2='684' y2='206'/%3E%3Cline x1='1472' y1='575' x2='1456' y2='623'/%3E%3Cline x1='585' y1='351' x2='684' y2='206'/%3E%3Cline x1='1174' y1='360' x2='1119' y2='472'/%3E%3Cline x1='1480' y1='425' x2='1472' y2='575'/%3E%3Cline x1='1472' y1='575' x2='1308' y2='499'/%3E%3Cline x1='585' y1='351' x2='472' y2='323'/%3E%3Cline x1='688' y1='541' x2='808' y2='546'/%3E%3Cline x1='940' y1='76' x2='1092' y2='41'/%3E%3Cline x1='1495' y1='231' x2='1338' y2='279'/%3E%3Cline x1='472' y1='323' x2='423' y2='186'/%3E%3Cline x1='1025' y1='237' x2='924' y2='350'/%3E%3Cline x1='1316' y1='342' x2='1338' y2='279'/%3E%3Cline x1='288' y1='663' x2='385' y2='812'/%3E%3Cline x1='109' y1='537' x2='222' y2='551'/%3E%3Cline x1='745' y1='179' x2='743' y2='345'/%3E%3Cline x1='1495' y1='231' x2='1354' y2='80'/%3E%3Cline x1='385' y1='812' x2='500' y2='670'/%3E%3Cline x1='109' y1='537' x2='133' y2='389'/%3E%3Cline x1='222' y1='551' x2='288' y2='663'/%3E%3Cline x1='109' y1='537' x2='140' y2='654'/%3E%3Cline x1='1401' y1='676' x2='1302' y2='841'/%3E%3Cline x1='1401' y1='676' x2='1456' y2='623'/%3E%3Cline x1='288' y1='663' x2='306' y2='816'/%3E%3Cline x1='1197' y1='251' x2='1174' y2='360'/%3E%3Cline x1='1316' y1='342' x2='1308' y2='499'/%3E%3Cline x1='36' y1='840' x2='306' y2='816'/%3E%3Cline x1='288' y1='663' x2='140' y2='654'/%3E%3Cline x1='1302' y1='841' x2='1180' y2='829'/%3E%3Cline x1='1197' y1='251' x2='1338' y2='279'/%3E%3Cline x1='36' y1='840' x2='140' y2='654'/%3E%3Cline x1='590' y1='646' x2='500' y2='670'/%3E%3Cline x1='745' y1='179' x2='675' y2='28'/%3E%3Cline x1='316' y1='384' x2='399' y2='511'/%3E%3Cline x1='1459' y1='818' x2='1302' y2='841'/%3E%3Cline x1='1354' y1='80' x2='1338' y2='279'/%3E%3Cline x1='1142' y1='643' x2='1024' y2='556'/%3E%3Cline x1='585' y1='351' x2='743' y2='345'/%3E%3Cline x1='1495' y1='231' x2='1473' y2='85'/%3E%3Cline x1='989' y1='720' x2='1142' y2='643'/%3E%3C/g%3E%3Cg fill='rgba%28125,216,239,0.9%29'%3E%3Ccircle cx='940' cy='76' r='2.2'/%3E%3Ccircle cx='1459' cy='818' r='2.2'/%3E%3Ccircle cx='36' cy='840' r='2.2'/%3E%3Ccircle cx='864' cy='866' r='2.2'/%3E%3Ccircle cx='476' cy='95' r='2.2'/%3E%3Ccircle cx='133' cy='389' r='2.2'/%3E%3Ccircle cx='236' cy='43' r='2.2'/%3E%3Ccircle cx='808' cy='546' r='2.2'/%3E%3Ccircle cx='924' cy='350' r='2.2'/%3E%3Ccircle cx='131' cy='169' r='2.2'/%3E%3Ccircle cx='500' cy='670' r='2.2'/%3E%3Ccircle cx='912' cy='850' r='2.2'/%3E%3Ccircle cx='808' cy='648' r='2.2'/%3E%3Ccircle cx='1092' cy='41' r='2.2'/%3E%3Ccircle cx='689' cy='828' r='2.2'/%3E%3Ccircle cx='399' cy='511' r='2.2'/%3E%3Ccircle cx='688' cy='541' r='3.2'/%3E%3Ccircle cx='109' cy='537' r='3.2'/%3E%3Ccircle cx='1025' cy='237' r='3.2'/%3E%3Ccircle cx='590' cy='646' r='3.2'/%3E%3Ccircle cx='585' cy='351' r='3.2'/%3E%3Ccircle cx='1495' cy='231' r='3.2'/%3E%3Ccircle cx='1473' cy='85' r='3.2'/%3E%3Ccircle cx='789' cy='21' r='3.2'/%3E%3Ccircle cx='1197' cy='251' r='3.2'/%3E%3Ccircle cx='1174' cy='360' r='3.2'/%3E%3Ccircle cx='1354' cy='80' r='3.2'/%3E%3Ccircle cx='1480' cy='425' r='3.2'/%3E%3Ccircle cx='385' cy='812' r='3.2'/%3E%3Ccircle cx='675' cy='28' r='3.2'/%3E%3Ccircle cx='472' cy='323' r='3.2'/%3E%3Ccircle cx='1302' cy='841' r='3.2'/%3E%3Ccircle cx='1119' cy='472' r='3.2'/%3E%3Ccircle cx='308' cy='248' r='3.2'/%3E%3Ccircle cx='684' cy='206' r='3.2'/%3E%3Ccircle cx='1456' cy='623' r='3.2'/%3E%3Ccircle cx='423' cy='186' r='3.2'/%3E%3Ccircle cx='1024' cy='556' r='3.2'/%3E%3Ccircle cx='1180' cy='829' r='3.2'/%3E%3Ccircle cx='108' cy='21' r='3.2'/%3E%3Ccircle cx='745' cy='179' r='4.5'/%3E%3Ccircle cx='222' cy='551' r='4.5'/%3E%3Ccircle cx='288' cy='663' r='4.5'/%3E%3Ccircle cx='743' cy='345' r='4.5'/%3E%3Ccircle cx='140' cy='654' r='4.5'/%3E%3Ccircle cx='1401' cy='676' r='4.5'/%3E%3Ccircle cx='989' cy='720' r='4.5'/%3E%3Ccircle cx='1142' cy='643' r='4.5'/%3E%3Ccircle cx='1316' cy='342' r='4.5'/%3E%3Ccircle cx='1472' cy='575' r='4.5'/%3E%3Ccircle cx='1308' cy='499' r='4.5'/%3E%3Ccircle cx='316' cy='384' r='4.5'/%3E%3Ccircle cx='1338' cy='279' r='4.5'/%3E%3Ccircle cx='306' cy='816' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-mask-image: radial-gradient(300px at var(--spot-x) var(--spot-y), black 0%, transparent 72%);
    mask-image: radial-gradient(300px at var(--spot-x) var(--spot-y), black 0%, transparent 72%);
}
body:hover::before { opacity: .38; }

/* ── Priesvitné "frosted glass" panely (iOS style) ─────────── */
.ui-panel,
.ui-widget-content {
    backdrop-filter: blur(9px) saturate(160%);
    -webkit-backdrop-filter: blur(9px) saturate(160%);
}

a { text-decoration: none; color: inherit; }

/* Bez vlastneho :focus stylu pouziva prehliadac natívny obrys zaostrenia,
   ktory si na Windows casto berie farbu z OS "accent color" pouzivatela
   (napr. zlta/zlta) - na tmavom aj svetlom podklade zle citatelne a
   nezavisle od appky. Vlastny, konzistentny obrys v brandovej farbe. */
a:focus-visible {
    outline: 2px solid var(--ipc-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Header ───────────────────────────────────────────────── */
.ipc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Frosted glass, matching the panels/cards elsewhere on the page, instead
       of a flat opaque bar. Kept dark + fairly opaque (not the low global
       --surface) so the white nav text stays readable over the bright top
       corner of the body gradient. */
    background: rgba(20, 24, 28, .82);
    backdrop-filter: blur(9px) saturate(1.6);
    -webkit-backdrop-filter: blur(9px) saturate(1.6);
    color: #fff;
    padding: 0 24px;
    height: 64px;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
    border-bottom: 3px solid #28A9CC;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-left  { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #28A9CC !important;
    letter-spacing: 1px;
    white-space: nowrap;
}
.brand-logo-img {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

.header-nav-link {
    color: rgba(255,255,255,.8) !important;
    font-size: 1.105rem;
    font-weight: 500;
    transition: color .2s;
    white-space: nowrap;
}
.header-nav-link:hover { color: #28A9CC !important; }
.header-nav-link.active { color: #28A9CC !important; font-weight: 700; }

.header-btn {
    background: var(--cta-bg) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--cta-text) !important;
    padding: 6px 14px !important;
    transition: background .15s ease, box-shadow .15s ease;
}
.header-btn:hover {
    background: var(--cta-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--cta-glow-1), 0 0 18px 5px var(--cta-glow-2) !important;
}

.header-logout-btn {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    color: rgba(255,255,255,.75) !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-pill) !important;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.header-logout-btn:hover { border-color: #28A9CC !important; color: #28A9CC !important; box-shadow: 0 0 0 4px rgba(40, 169, 204, .14) !important; }

/* Zbalené Profil/Admin/Odhlásiť do jedného p:menuButton — vzhľad zladený
   s ostatnými plochými tlačidlami v hlavičke (nie plná PrimeFaces výplň). */
.header-menu-btn .ui-button,
.header-menu-btn .p-button {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    color: rgba(255,255,255,.85) !important;
    padding: 6px 12px !important;
    font-size: 1.105rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
.header-menu-btn .ui-button:hover,
.header-menu-btn .p-button:hover {
    background: transparent !important;
    border-color: #28A9CC !important;
    color: #28A9CC !important;
}

.header-a11y-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 50% !important;
    color: rgba(255,255,255,.85) !important;
    font-size: 1rem;
    cursor: pointer;
}
.header-a11y-btn:hover { border-color: #28A9CC !important; color: #28A9CC !important; }
.header-a11y-btn[aria-pressed="true"] {
    background: #28A9CC !important;
    border-color: #28A9CC !important;
    color: #fff !important;
}

/* ── Zvonček upozornení (nové príspevky od sledovaných profilov) ──── */
.notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-badge { top: -6px; right: -8px; }

.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: 90vw;
    max-height: 420px;
    overflow-y: auto;
    background: #141b1d;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    z-index: 1100;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.notif-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
}
.notif-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-hover); }
.notif-item-title { font-size: .85rem; font-weight: 600; color: var(--text); }
.notif-item-meta { font-size: .75rem; color: var(--text-muted); }

/* Mobilný dropdown sa otvára nahor a k ľavému okraju - inak ho orezáva
   scrollovanie/hranice .mobile-nav panelu (button je bližšie k spodku). */
.notif-dropdown-mobile {
    top: auto;
    bottom: calc(100% + 10px);
    right: auto;
    left: 0;
    width: 280px;
}

/* Pozn.: header-lang a ui-selectonemenu su OBE triedy na tom istom <div>
   (nie predok/potomok) - musi byt zlozeny selektor bez medzery, inak sa
   nezhoduje so ziadnym elementom (dlho nezistena chyba). */
.header-lang.ui-selectonemenu {
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    color: rgba(255,255,255,.85) !important;
    width: 70px !important;
}
.header-lang.ui-selectonemenu .ui-selectonemenu-label { color: rgba(255,255,255,.85) !important; }
.header-lang.ui-selectonemenu .ui-selectonemenu-trigger { color: rgba(255,255,255,.85) !important; }

/* Hamburger: skrytý na desktope */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    flex-shrink: 0;
}
.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamburger-btn:hover { background: rgba(255,255,255,.1); }

/* Mobile nav panel: skrytý na desktope */
.mobile-nav { display: none; }

/* ── Bočný sidebar (desktop app shell) ─────────────────────────
   Skrytý defaultne (mobil zostáva pri pôvodnej hornej lište +
   hamburger menu bezo zmeny); od 1101px nahrádza brand/Knižnicu
   v topbare a posúva obsah doprava. ──────────────────────────── */
.app-sidebar {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    flex-direction: column;
    padding: 20px 14px;
    overflow-y: auto;
    z-index: 1001;
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    color: #fff !important;
    padding: 0 8px;
}
.sidebar-brand-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ipc-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .5px;
    color: #fff;
    flex-shrink: 0;
}
.sidebar-brand-logo {
    height: 36px;
    width: auto;
    flex-shrink: 0;
}
.sidebar-brand-text {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: .2px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text) !important;
    font-size: .89rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav-link .pi { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-nav-link:hover { background: var(--sidebar-bg-hover); color: #fff !important; }
.sidebar-nav-link.active { background: var(--ipc-accent); color: #fff !important; font-weight: 700; }
.sidebar-nav-badge {
    margin-left: auto;
    background: #e53935;
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

.sidebar-quote {
    position: relative;
    display: block;
    overflow: hidden;
    margin-top: 22px;
    padding: 16px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.06);
    border-left: 3px solid var(--ipc-accent);
    font-size: .96rem;
    font-style: italic;
    font-weight: 500;
    color: var(--sidebar-text-soft) !important;
    line-height: 1.4;
    text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease;
}
.sidebar-quote:hover {
    background: rgba(40, 169, 204, .14);
    border-left-color: #7dd8ef;
}
.sidebar-quote-text { position: relative; z-index: 1; display: block; color: var(--sidebar-text) !important; }
.sidebar-quote-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-style: normal;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--ipc-accent-dark) !important;
    transition: color .2s ease, gap .2s ease;
}
.sidebar-quote-link .pi { font-size: .7rem; }
.sidebar-quote:hover .sidebar-quote-link { color: #7dd8ef !important; gap: 7px; }

/* Dekoratívna SVG sieť (uzly + spojnice, mini verzia veľkej pozaďovej
   mriežky) v pravom dolnom rohu citátu - rovnaký "prebúdzajúci sa" hover
   efekt ako hero kresba na home.xhtml. */
.sidebar-quote-art {
    position: absolute;
    right: -10px;
    bottom: -12px;
    width: 128px;
    height: 72px;
    opacity: .55;
    pointer-events: none;
    transition: opacity .3s ease;
}
.sidebar-quote:hover .sidebar-quote-art { opacity: 1; }
.sidebar-quote-art .sq-line { transition: stroke .3s ease; }
.sidebar-quote:hover .sidebar-quote-art .sq-line { stroke: rgba(255, 255, 255, .55); }
.sidebar-quote-art .sq-node {
    fill: var(--ipc-accent);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .3s ease, fill .3s ease, filter .3s ease;
}
.sidebar-quote:hover .sidebar-quote-art .sq-node {
    fill: #7dd8ef;
    filter: drop-shadow(0 0 3px rgba(125, 216, 239, .8));
}
.sidebar-quote:hover .sidebar-quote-art .sq-hub { transform: scale(1.25); }
.sidebar-quote:hover .sidebar-quote-art .sq-hub-lg {
    transform: scale(1.4);
    filter: drop-shadow(0 0 6px rgba(125, 216, 239, .9));
}
.sidebar-quote:hover .sidebar-quote-art .sq-node:nth-child(2) { transform: scale(1.35); }

.sidebar-footer {
    /* V DOM je teraz prvým prvkom sidebaru (aby ho čítačka obrazovky
       našla čo najskôr), ale vizuálne má zostať dole - preto poradie
       riešime cez "order", nie cez pozíciu v zdrojovom kóde. */
    order: 1;
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    justify-content: center;
}
.sidebar-footer .header-a11y-btn { border-color: rgba(255,255,255,.25) !important; }

/* Elementy nahradené sidebarom (brand/Knižnica/a11y v topbare) - skryté len keď je sidebar viditeľný.
   #mainForm:has(.app-sidebar) - id "mainForm" zdieľajú aj login/register/landing (bez sidebaru),
   takže padding smie dostať len formulár, ktorý sidebar naozaj obsahuje. */
@media (min-width: 1101px) {
    .app-sidebar { display: flex; }
    #mainForm:has(.app-sidebar) { padding-left: var(--sidebar-width); box-sizing: border-box; }
    /* Stránky ako profile.xhtml majú za mainFormom (so sidebarom) ešte
       samostatný sesterský <form> (napr. zmena hesla) - ten sidebar
       nededí, takže bez tohto pravidla by sa jeho obsah vykresľoval
       spod neho namiesto vedľa. */
    #mainForm:has(.app-sidebar) ~ form { padding-left: var(--sidebar-width); box-sizing: border-box; }
    .desktop-hide-in-topbar { display: none !important; }
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
    text-align: center;
    padding: 16px;
    background: #1E2222;
    color: #aaa;
    font-size: .8rem;
    margin-top: auto;
    border-top: 3px solid #28A9CC;
}
.footer-sep { margin: 0 6px; }
.footer-link { color: #28A9CC !important; text-decoration: underline; }
.footer-link:hover { color: #fff !important; }
/* Biely obal okolo loga - PNG je navrhnuté pre svetlé pozadie a na tmavom
   footri (#1E2222) by boli jeho tmavé prvky prakticky neviditeľné. */
.footer-eu-logo-wrap {
    display: block;
    width: fit-content;
    background: #ffffff;
    padding: 10px 16px;
    border-radius: 6px;
    margin: 0 auto 10px;
}
.footer-eu-logo {
    display: block;
    height: 58px;
    max-width: 100%;
    width: auto;
    margin: 0;
}

/* ── Login / Register Page ────────────────────────────────── */
.login-page {
    /* Mriežková textúra sledujúca kurzor je teraz globálna (body::before) -
       .login-page len poskytuje vlastné tmavé pozadie, na ktorom sa ukáže. */
    background: linear-gradient(135deg, #1E2222 0%, #0f3040 50%, #28A9CC 100%);
    background-attachment: fixed;
    display: flex;
    /* Stĺpcové usporiadanie, aby sa footer (s EU logom) prirodzene zaradil
       pod formulár namiesto toho, aby s ním súperil vedľa seba v riadku. */
    flex-direction: column;
    min-height: 100vh;
}
/* Centrovanie formulára (predtým riešené cez align-items/justify-content
   priamo na .login-page) sa presúva na #mainForm, keďže .login-page je
   teraz stĺpcový flex kontajner zdieľaný aj s footrom. flex:1 necháva
   formulár vyplniť priestor nad footrom a v ňom sa vertikálne vycentruje.
   "safe center" zabezpečí, že dlhší register formulár na nízkych
   obrazovkách spadne na flex-start namiesto orezania hornej časti. */
.login-page #mainForm {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    justify-content: safe center;
}

.login-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 24px 0;
}

.login-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 12px;
}

.login-panel.ui-panel {
    /* Solid dark background, not the translucent --surface: this card sits over a
       dark gradient (.login-page) and needs a surface a shade lighter than the
       page behind it to read as a distinct card, with near-white text on top
       to meet WCAG 2.1 AA contrast (4.5:1). */
    background: #141b1d !important;
}
.login-panel {
    width: 420px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.4) !important;
    border-radius: 10px !important;
}

.register-panel { width: 500px !important; }

.login-panel .ui-panel-titlebar {
    display: none !important;
}

.login-title { text-align: center; margin-bottom: 20px; }
.login-title h2 { font-size: 1.5rem; color: var(--text); font-weight: 700; }
.login-title p  { color: var(--text-soft); font-size: .9rem; margin-top: 4px; }

.field { margin-bottom: 14px; display: flex; flex-direction: column; }
.field label { margin-bottom: 4px; font-weight: 600; font-size: .85rem; color: var(--text-soft); }

.filter-field { margin-bottom: 10px; }

.w-full { width: 100% !important; }

.login-options {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .85rem;
}
.forgot-link { margin-left: auto; color: #28A9CC !important; cursor: pointer; background: none; border: none; padding: 0; font-size: inherit; }
.remember-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); cursor: pointer; }

/* GDPR / newsletter súhlas na registrácii - checkbox + zalomiteľný label,
   na rozdiel od .login-options (jednoriadkový) tu text môže ísť na 2 riadky. */
.consent-row {
    margin-bottom: 12px;
    font-size: .82rem;
    line-height: 1.5;
}
.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-soft);
    cursor: pointer;
}
.consent-label .ui-chkbox,
.consent-label .p-checkbox { margin-top: 2px; flex-shrink: 0; }
.consent-label a { color: var(--ipc-accent-dark) !important; text-decoration: underline; }

.forgot-option {
    display: flex; align-items: center; gap: 16px;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 16px; cursor: pointer; transition: border-color .15s, background .15s;
    text-decoration: none !important; width: 100%; box-sizing: border-box;
}
.forgot-option:hover { border-color: #28A9CC; background: rgba(40, 169, 204, .1); }
.forgot-option-icon { font-size: 1.8rem; flex-shrink: 0; }
.forgot-option > span:last-child { min-width: 0; }
.forgot-option-title { display: block; font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: 3px; }
.forgot-option-desc  { display: block; font-size: .82rem; color: var(--text-muted); overflow-wrap: break-word; word-break: break-word; }


.login-btn {
    width: 100% !important;
    background: var(--cta-bg) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    color: var(--cta-text) !important;
    padding: 10px !important;
    border-radius: var(--radius-pill) !important;
    transition: background .15s ease, box-shadow .15s ease;
}
.login-btn:hover {
    background: var(--cta-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--cta-glow-1), 0 0 18px 5px var(--cta-glow-2) !important;
}

.register-link {
    text-align: center;
    font-size: .85rem;
    color: var(--text-soft);
}
.register-link a { color: #28A9CC !important; font-weight: 600; }

.info-msg {
    background: rgba(40, 169, 204, .12);
    border: 1px solid rgba(40, 169, 204, .35);
    color: var(--text);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: .85rem;
}

.verify-msg { padding: 16px; font-size: 1rem; text-align: center; }
.verify-icon { font-size: 1.4rem; margin-right: 8px; }

.error-msg {
    background: rgba(229, 57, 53, .15);
    border: 1px solid rgba(229, 57, 53, .4);
    color: #ff8a80;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: .85rem;
}

.login-error-block.ui-messages:not(:has(.ui-messages-error)) { display: none !important; }
.login-error-block.ui-messages { margin-bottom: 14px; }
.login-error-block .ui-messages-error {
    background: rgba(229, 57, 53, .15);
    border: 1px solid rgba(229, 57, 53, .4);
    color: #ff8a80;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: .85rem;
}
.login-error-block .ui-messages-error-icon { display: none; }

.info-block.ui-messages:not(:has(.ui-messages-info)) { display: none !important; }
.info-block.ui-messages { margin-bottom: 14px; }
.info-block .ui-messages-info {
    background: rgba(76, 175, 80, .12);
    border: 1px solid rgba(76, 175, 80, .35);
    color: #8ee59a;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: .85rem;
}
.info-block .ui-messages-info-icon { display: none; }

/* ── Právne stránky (Zásady ochrany osobných údajov, Informovaný súhlas) ── */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 20px 60px;
}
.legal-content {
    background: #141b1d;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 44px;
    color: var(--text-soft);
    line-height: 1.75;
}
.legal-back-link {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--ipc-accent-dark) !important;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none !important;
}
.legal-back-link:hover { text-decoration: underline !important; }
.legal-content h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -.3px;
}
.legal-updated {
    color: var(--text-muted);
    font-size: .85rem;
    margin-bottom: 32px;
}
.legal-content h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 32px 0 12px;
}
.legal-content p { margin-bottom: 14px; }
.legal-content ul { margin: 0 0 14px 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--ipc-accent-dark) !important; text-decoration: underline; }
.legal-address { line-height: 1.6; }
.legal-disclaimer {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: .8rem;
    color: var(--text-muted);
    font-style: italic;
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: .88rem;
}
.legal-table th,
.legal-table td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}
.legal-table th { background: #1a2226; color: var(--text); }
.legal-table td { color: var(--text-soft); }

/* ── Page Layout — wrapper pre PrimeFlex grid ───────────────── */
.page-layout {
    flex: 1;
    padding: 16px 20px;
    box-sizing: border-box;
}

.posts-main { display: flex; flex-direction: column; gap: 16px; }

/* Pravý sidebar skrytý pod lg (992px) */
.sidebar-right-col { display: none; }
@media screen and (min-width: 992px) {
    .sidebar-right-col { display: flex; flex-direction: column; gap: 16px; }

    /* Zúžený o 35% oproti pôvodným 33.33% (col-4) */
    .sidebar-right-col.lg\:col-4 { flex: 0 0 21.67% !important; max-width: 21.67% !important; }
    .home-main-col.lg\:col-8 { flex: 0 0 78.33% !important; max-width: 78.33% !important; }
}

@media (max-width: 575px) { .page-layout { padding: 8px; } }

/* ── Filter sidebar ───────────────────────────────────────── */
.filter-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: .7px;
    padding: 4px 0 6px 0;
}

.filter-apply-btn { margin-top: 6px; }

.calendar-link-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
    font-size: .875rem !important;
    color: var(--ipc-accent) !important;
    border: 1.5px solid var(--ipc-accent) !important;
    border-radius: var(--radius-sm) !important;
    line-height: 1.5 !important;
}

/* ── Filter checkboxes ───────────────────────────────────── */
.filter-checks { width: 100%; }
.filter-checks .ui-selectmanycheckbox { width: 100%; }
.filter-checks table { width: 100%; border-collapse: collapse; }
.filter-checks td {
    padding: 5px 8px;
    vertical-align: middle;
    border-radius: 8px;
    transition: background .15s ease;
}
.filter-checks td:hover { background: var(--surface-hover); }
.filter-checks label {
    font-size: .87rem;
    color: var(--text-soft);
    cursor: pointer;
    user-select: none;
}

/* ── Rýchle filtre (Ponúkam / Hľadám / Chcem sa zapojiť) ──── */
.quick-filter-btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.quick-filter-btn.ui-button,
.quick-filter-btn.p-button { width: 100% !important; }

/* ── Filter skupiny + extra polia ───────────────────────── */
.filter-groups { display: flex; flex-direction: column; gap: 16px; }
.filter-extras { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.filter-btns   { display: flex; gap: 8px; }
.filter-btns .ui-button { flex: 1; }

/* ── Post Card ───────────────────────────────────────────── */
.post-card {
    background: #141b1d !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
}
.post-card-pinned { border-left: 4px solid var(--ipc-accent) !important; }
.post-card .ui-panel-content { padding: 0 !important; }
.post-card .ui-panel-titlebar { display: none !important; }

.post-card-content { display: flex; gap: 18px; padding: 16px; }

.post-card-image { width: 170px; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-sm); }
.post-card-img {
    width: 100%;
    height: 116px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
    transition: transform .3s ease;
}
.post-card:hover .post-card-img { transform: scale(1.04); }
.post-img-wrap { position: relative; width: 100%; }
.post-type-badge-overlay { position: absolute; right: 8px; top: 8px; }
.post-img-placeholder {
    width: 100%;
    height: 116px;
    background: linear-gradient(135deg, var(--ipc-dark) 0%, var(--ipc-accent) 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px;
}
.post-type-badge {
    background: rgba(10, 14, 16, .78);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.post-card-body { flex: 1; min-width: 0; }
.post-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.post-title { font-size: 1.08rem; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.post-card-body p { font-size: .83rem; color: var(--text-soft); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.post-card-body p .pi { color: var(--ipc-accent); font-size: .82rem; flex-shrink: 0; }
.post-desc { color: var(--text-muted) !important; margin-top: 8px !important; font-size: .82rem !important; line-height: 1.5; }

/* ── Autor príspevku (mini avatar + meno, klikateľné na profil) ──── */
.post-author-link {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    padding: 3px 10px 3px 3px;
    border-radius: 20px;
    background: var(--surface-hover);
    text-decoration: none;
    width: fit-content;
    transition: background .15s ease, transform .15s ease;
}
.post-author-link:hover {
    background: var(--ipc-accent);
    transform: translateY(-1px);
}
.post-author-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #ddd;
    display: block;
    border: 2px solid var(--ipc-accent);
}
.post-author-fallback {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ipc-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--ipc-accent);
}
.post-author-name {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ipc-accent-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.post-author-link:hover .post-author-name { color: #fff; }

.post-detail-organizer { display: flex; align-items: center; gap: 8px; font-size: .95rem; margin-bottom: 5px; color: var(--text-soft); flex-wrap: wrap; }
.post-detail-organizer .post-author-link { margin-bottom: 0; }
.post-detail-organizer .post-author-avatar,
.post-detail-organizer .post-author-fallback { width: 32px; height: 32px; }
.post-detail-organizer .post-author-name { font-size: .95rem; }

.pin-badge {
    background: var(--ipc-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.post-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

.empty-msg {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    font-size: .95rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
}

.paginator-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 0 8px;
}
.pag-btn {
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    color: var(--text-soft) !important;
}
.pag-btn:not(:disabled):hover { background: var(--ipc-accent-soft) !important; color: var(--ipc-accent-dark) !important; }
.pag-info {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-soft);
    padding: 0 10px;
    min-width: 64px;
    text-align: center;
}

/* ── Closing / Upcoming sidebar ──────────────────────────── */
.upcoming-list, .sidebar-list { list-style: none; padding: 0; }
.upcoming-item, .sidebar-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: .83rem;
}
.upcoming-item:last-child, .sidebar-item:last-child { border-bottom: none; }
.upcoming-item strong, .sidebar-item strong { display: block; color: var(--text); font-weight: 600; }
.upcoming-item span,   .sidebar-item span   { display: block; color: var(--text-muted); font-size: .78rem; margin-top: 2px; }

.closing-item strong { color: var(--ipc-accent-dark); }

.sidebar-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, padding-left .15s ease;
    border-radius: 8px;
    padding: 4px 8px;
    margin: -4px -8px;
    border-left: 3px solid transparent;
}
.sidebar-post-link:hover {
    background: var(--surface-hover);
    border-left-color: var(--ipc-accent);
    padding-left: 11px;
}
.sidebar-post-link:hover strong { color: var(--ipc-accent-dark); }

/* ── Home: hero sekcia + rýchle odkazy ─────────────────────── */
.home-hero {
    position: relative;
    overflow: hidden;
    margin: 20px 20px 0;
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--ipc-dark) 0%, #0f3040 50%, var(--ipc-accent) 100%);
    color: #fff;
    --spot-x: 50%;
    --spot-y: 50%;
}
/* Obrazec neurónovej siete, ktorý sa objaví len okolo kurzora (huly.io
   efekt) - pozícia "reflektora" prichádza z --spot-x/--spot-y nastavovaných
   v JS (mousemove listener v home.xhtml). */
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cg stroke='rgba%28255,255,255,0.55%29' stroke-width='1' fill='none'%3E%3Cline x1='1025' y1='237' x2='1197' y2='251'/%3E%3Cline x1='1459' y1='818' x2='1401' y2='676'/%3E%3Cline x1='789' y1='21' x2='675' y2='28'/%3E%3Cline x1='1308' y1='499' x2='1456' y2='623'/%3E%3Cline x1='1142' y1='643' x2='1180' y2='829'/%3E%3Cline x1='476' y1='95' x2='675' y2='28'/%3E%3Cline x1='1174' y1='360' x2='1316' y2='342'/%3E%3Cline x1='1401' y1='676' x2='1472' y2='575'/%3E%3Cline x1='476' y1='95' x2='423' y2='186'/%3E%3Cline x1='236' y1='43' x2='108' y2='21'/%3E%3Cline x1='385' y1='812' x2='306' y2='816'/%3E%3Cline x1='989' y1='720' x2='1024' y2='556'/%3E%3Cline x1='1142' y1='643' x2='1119' y2='472'/%3E%3Cline x1='688' y1='541' x2='808' y2='648'/%3E%3Cline x1='140' y1='654' x2='306' y2='816'/%3E%3Cline x1='989' y1='720' x2='912' y2='850'/%3E%3Cline x1='743' y1='345' x2='924' y2='350'/%3E%3Cline x1='989' y1='720' x2='1180' y2='829'/%3E%3Cline x1='864' y1='866' x2='689' y2='828'/%3E%3Cline x1='688' y1='541' x2='590' y2='646'/%3E%3Cline x1='236' y1='43' x2='131' y2='169'/%3E%3Cline x1='940' y1='76' x2='789' y2='21'/%3E%3Cline x1='1025' y1='237' x2='1092' y2='41'/%3E%3Cline x1='808' y1='546' x2='808' y2='648'/%3E%3Cline x1='133' y1='389' x2='316' y2='384'/%3E%3Cline x1='1473' y1='85' x2='1338' y2='279'/%3E%3Cline x1='308' y1='248' x2='316' y2='384'/%3E%3Cline x1='308' y1='248' x2='108' y2='21'/%3E%3Cline x1='745' y1='179' x2='684' y2='206'/%3E%3Cline x1='1473' y1='85' x2='1354' y2='80'/%3E%3Cline x1='864' y1='866' x2='912' y2='850'/%3E%3Cline x1='131' y1='169' x2='108' y2='21'/%3E%3Cline x1='1119' y1='472' x2='1024' y2='556'/%3E%3Cline x1='590' y1='646' x2='689' y2='828'/%3E%3Cline x1='222' y1='551' x2='140' y2='654'/%3E%3Cline x1='1480' y1='425' x2='1308' y2='499'/%3E%3Cline x1='745' y1='179' x2='789' y2='21'/%3E%3Cline x1='308' y1='248' x2='423' y2='186'/%3E%3Cline x1='222' y1='551' x2='399' y2='511'/%3E%3Cline x1='1316' y1='342' x2='1480' y2='425'/%3E%3Cline x1='472' y1='323' x2='316' y2='384'/%3E%3Cline x1='743' y1='345' x2='684' y2='206'/%3E%3Cline x1='1472' y1='575' x2='1456' y2='623'/%3E%3Cline x1='585' y1='351' x2='684' y2='206'/%3E%3Cline x1='1174' y1='360' x2='1119' y2='472'/%3E%3Cline x1='1480' y1='425' x2='1472' y2='575'/%3E%3Cline x1='1472' y1='575' x2='1308' y2='499'/%3E%3Cline x1='585' y1='351' x2='472' y2='323'/%3E%3Cline x1='688' y1='541' x2='808' y2='546'/%3E%3Cline x1='940' y1='76' x2='1092' y2='41'/%3E%3Cline x1='1495' y1='231' x2='1338' y2='279'/%3E%3Cline x1='472' y1='323' x2='423' y2='186'/%3E%3Cline x1='1025' y1='237' x2='924' y2='350'/%3E%3Cline x1='1316' y1='342' x2='1338' y2='279'/%3E%3Cline x1='288' y1='663' x2='385' y2='812'/%3E%3Cline x1='109' y1='537' x2='222' y2='551'/%3E%3Cline x1='745' y1='179' x2='743' y2='345'/%3E%3Cline x1='1495' y1='231' x2='1354' y2='80'/%3E%3Cline x1='385' y1='812' x2='500' y2='670'/%3E%3Cline x1='109' y1='537' x2='133' y2='389'/%3E%3Cline x1='222' y1='551' x2='288' y2='663'/%3E%3Cline x1='109' y1='537' x2='140' y2='654'/%3E%3Cline x1='1401' y1='676' x2='1302' y2='841'/%3E%3Cline x1='1401' y1='676' x2='1456' y2='623'/%3E%3Cline x1='288' y1='663' x2='306' y2='816'/%3E%3Cline x1='1197' y1='251' x2='1174' y2='360'/%3E%3Cline x1='1316' y1='342' x2='1308' y2='499'/%3E%3Cline x1='36' y1='840' x2='306' y2='816'/%3E%3Cline x1='288' y1='663' x2='140' y2='654'/%3E%3Cline x1='1302' y1='841' x2='1180' y2='829'/%3E%3Cline x1='1197' y1='251' x2='1338' y2='279'/%3E%3Cline x1='36' y1='840' x2='140' y2='654'/%3E%3Cline x1='590' y1='646' x2='500' y2='670'/%3E%3Cline x1='745' y1='179' x2='675' y2='28'/%3E%3Cline x1='316' y1='384' x2='399' y2='511'/%3E%3Cline x1='1459' y1='818' x2='1302' y2='841'/%3E%3Cline x1='1354' y1='80' x2='1338' y2='279'/%3E%3Cline x1='1142' y1='643' x2='1024' y2='556'/%3E%3Cline x1='585' y1='351' x2='743' y2='345'/%3E%3Cline x1='1495' y1='231' x2='1473' y2='85'/%3E%3Cline x1='989' y1='720' x2='1142' y2='643'/%3E%3C/g%3E%3Cg fill='rgba%28125,216,239,0.9%29'%3E%3Ccircle cx='940' cy='76' r='2.2'/%3E%3Ccircle cx='1459' cy='818' r='2.2'/%3E%3Ccircle cx='36' cy='840' r='2.2'/%3E%3Ccircle cx='864' cy='866' r='2.2'/%3E%3Ccircle cx='476' cy='95' r='2.2'/%3E%3Ccircle cx='133' cy='389' r='2.2'/%3E%3Ccircle cx='236' cy='43' r='2.2'/%3E%3Ccircle cx='808' cy='546' r='2.2'/%3E%3Ccircle cx='924' cy='350' r='2.2'/%3E%3Ccircle cx='131' cy='169' r='2.2'/%3E%3Ccircle cx='500' cy='670' r='2.2'/%3E%3Ccircle cx='912' cy='850' r='2.2'/%3E%3Ccircle cx='808' cy='648' r='2.2'/%3E%3Ccircle cx='1092' cy='41' r='2.2'/%3E%3Ccircle cx='689' cy='828' r='2.2'/%3E%3Ccircle cx='399' cy='511' r='2.2'/%3E%3Ccircle cx='688' cy='541' r='3.2'/%3E%3Ccircle cx='109' cy='537' r='3.2'/%3E%3Ccircle cx='1025' cy='237' r='3.2'/%3E%3Ccircle cx='590' cy='646' r='3.2'/%3E%3Ccircle cx='585' cy='351' r='3.2'/%3E%3Ccircle cx='1495' cy='231' r='3.2'/%3E%3Ccircle cx='1473' cy='85' r='3.2'/%3E%3Ccircle cx='789' cy='21' r='3.2'/%3E%3Ccircle cx='1197' cy='251' r='3.2'/%3E%3Ccircle cx='1174' cy='360' r='3.2'/%3E%3Ccircle cx='1354' cy='80' r='3.2'/%3E%3Ccircle cx='1480' cy='425' r='3.2'/%3E%3Ccircle cx='385' cy='812' r='3.2'/%3E%3Ccircle cx='675' cy='28' r='3.2'/%3E%3Ccircle cx='472' cy='323' r='3.2'/%3E%3Ccircle cx='1302' cy='841' r='3.2'/%3E%3Ccircle cx='1119' cy='472' r='3.2'/%3E%3Ccircle cx='308' cy='248' r='3.2'/%3E%3Ccircle cx='684' cy='206' r='3.2'/%3E%3Ccircle cx='1456' cy='623' r='3.2'/%3E%3Ccircle cx='423' cy='186' r='3.2'/%3E%3Ccircle cx='1024' cy='556' r='3.2'/%3E%3Ccircle cx='1180' cy='829' r='3.2'/%3E%3Ccircle cx='108' cy='21' r='3.2'/%3E%3Ccircle cx='745' cy='179' r='4.5'/%3E%3Ccircle cx='222' cy='551' r='4.5'/%3E%3Ccircle cx='288' cy='663' r='4.5'/%3E%3Ccircle cx='743' cy='345' r='4.5'/%3E%3Ccircle cx='140' cy='654' r='4.5'/%3E%3Ccircle cx='1401' cy='676' r='4.5'/%3E%3Ccircle cx='989' cy='720' r='4.5'/%3E%3Ccircle cx='1142' cy='643' r='4.5'/%3E%3Ccircle cx='1316' cy='342' r='4.5'/%3E%3Ccircle cx='1472' cy='575' r='4.5'/%3E%3Ccircle cx='1308' cy='499' r='4.5'/%3E%3Ccircle cx='316' cy='384' r='4.5'/%3E%3Ccircle cx='1338' cy='279' r='4.5'/%3E%3Ccircle cx='306' cy='816' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-mask-image: radial-gradient(300px at var(--spot-x) var(--spot-y), black 0%, transparent 72%);
    mask-image: radial-gradient(300px at var(--spot-x) var(--spot-y), black 0%, transparent 72%);
}
.home-hero:hover::before { opacity: .4; }
.home-hero > * { position: relative; z-index: 1; }

/* Dekoratívna SVG kresba (uzly + spojnice) v pravej časti hero karty -
   pri hoveri sa "prebudí": uzly zväčšia a rozžiaria, spojnice zjasnejú. */
.home-hero-art {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    height: 100%;
    max-height: 220px;
    pointer-events: none;
    opacity: .55;
    transition: opacity .3s ease;
}
.home-hero:hover .home-hero-art { opacity: .95; }
.home-hero-art .hh-line {
    transition: stroke .3s ease, stroke-width .3s ease;
}
.home-hero:hover .home-hero-art .hh-line {
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 2px;
}
.home-hero-art .hh-node {
    fill: var(--ipc-accent);
    stroke: rgba(255, 255, 255, .6);
    stroke-width: 1.5px;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .3s ease, fill .3s ease, filter .3s ease;
}
.home-hero:hover .home-hero-art .hh-node {
    fill: #7dd8ef;
    filter: drop-shadow(0 0 6px rgba(125, 216, 239, .8));
}
.home-hero:hover .home-hero-art .hh-node:nth-child(2) { transform: scale(1.25); }
.home-hero:hover .home-hero-art .hh-node:nth-child(4) { transform: scale(1.18); }

@media (max-width: 767px) {
    .home-hero-art { display: none; }
}
/* Gradientový text (huly.io inšpirácia) — len na veľké marketingové nadpisy,
   nie na drobné card-titulky, kde by pôsobil rušivo. */
.gradient-heading {
    background: linear-gradient(135deg, #ffffff 30%, #cbe6f2 65%, #eaf7fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-hero-title { font-size: 1.7rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.3px; }
.home-hero-subtitle { font-size: .95rem; color: rgba(255,255,255,.8); max-width: 560px; line-height: 1.5; }

/* ── Tmavé karty v pravom sidebari (kalendár / udalosti / akcie) ── */
.dark-panel.ui-panel {
    background: var(--sidebar-bg) !important;
    border: none !important;
    color: #fff !important;
}
.dark-panel .ui-panel-titlebar {
    background: transparent !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.dark-panel .ui-panel-content { color: rgba(255,255,255,.85) !important; }

.dark-panel .upcoming-item,
.dark-panel .sidebar-item { border-bottom-color: rgba(255,255,255,.1); }
.dark-panel .upcoming-item strong,
.dark-panel .sidebar-item strong { color: #fff !important; }
.dark-panel .upcoming-item span,
.dark-panel .sidebar-item span { color: rgba(255,255,255,.55) !important; }
.dark-panel .closing-item strong { color: #7dd8ef !important; }
.dark-panel .sidebar-post-link:hover { background: rgba(255,255,255,.08); border-left-color: var(--ipc-accent); }
.dark-panel .sidebar-post-link:hover strong { color: #7dd8ef !important; }
.dark-panel .empty-msg,
.dark-panel .upcoming-item:only-child span { color: rgba(255,255,255,.55); }

.dark-panel .mini-cal-expand-link { color: rgba(255,255,255,.7) !important; }
.dark-panel .mini-cal-expand-link:hover { color: #7dd8ef !important; }
.dark-panel .mini-cal-nav-btn { color: rgba(255,255,255,.7); }
.dark-panel .mini-cal-nav-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.dark-panel .mini-cal-title { color: #fff; }
.dark-panel .mini-cal-weekdays span { color: rgba(255,255,255,.4); }
.dark-panel .mini-cal-cell { color: rgba(255,255,255,.7); }
.dark-panel .mini-cal-cell.is-today { border-color: var(--ipc-accent); color: #fff; }
.dark-panel .mini-cal-cell.has-event { color: #fff; }
.dark-panel .mini-cal-cell.has-event:hover { background: rgba(255,255,255,.1); }

/* ── Home: "Najnovšie príspevky" slider (3 naraz, posun o 1) ──── */
.latest-posts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 28px 4px 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.latest-posts-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--text);
}
.latest-posts-title::before {
    content: '';
    width: 4px;
    height: 20px;
    border-radius: 2px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--ipc-accent) 0%, var(--ipc-accent-dark) 100%);
}
.latest-posts-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-soft) !important;
    text-decoration: none !important;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.latest-posts-viewall .pi { font-size: .68rem; transition: transform .15s ease; }
.latest-posts-viewall:hover {
    color: var(--ipc-accent-dark) !important;
    border-color: rgba(40,169,204,.5);
    background: var(--ipc-accent-soft);
}
.latest-posts-viewall:hover .pi { transform: translateX(3px); }

.latest-posts-slider { display: flex; align-items: flex-start; gap: 6px; }
.latest-slider-btn.ui-button,
.latest-slider-btn.p-button {
    background: var(--surface) !important;
    color: var(--ipc-accent-dark) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    margin-top: 44px;
}
.latest-slider-btn.ui-button:hover,
.latest-slider-btn.p-button:hover { background: var(--ipc-accent-soft) !important; }
.latest-slider-btn:disabled { opacity: .35; }

.latest-posts-row {
    display: flex;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.latest-post-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.latest-post-card:hover { border-color: rgba(40, 169, 204, .4) !important; }
.latest-post-card .ui-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.latest-post-card .post-card-image { width: 100%; position: relative; }
.latest-post-card .post-card-image::after {
    /* Jemný prechod z obrázka do tela karty, aby prechod nepôsobil orezaný */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 36px;
    background: linear-gradient(180deg, transparent 0%, #141b1d 100%);
    pointer-events: none;
}
.latest-post-card .post-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    min-width: 0;
}
.latest-post-card .post-card-header { margin-bottom: 8px; }
.latest-post-card .post-title {
    font-size: 1rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.latest-post-card .post-author-link { margin-bottom: 8px; }
.latest-post-card .post-card-body p { margin-bottom: 6px; }
.latest-post-card .post-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0 !important;
}
.latest-post-card .post-card-actions {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.latest-post-card .post-card-actions .ui-button,
.latest-post-card .post-card-actions .p-button {
    width: 100%;
}
.latest-post-card .empty-msg { flex: 1; }

/* ── Post Detail ─────────────────────────────────────────── */
.post-detail-page {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 20px 32px;
    box-sizing: border-box;
}

.post-detail-sidebar { display: flex; flex-direction: column; gap: 16px; }
.post-detail-title   { font-size: 1.5rem; color: var(--text); margin-bottom: 14px; }

.post-fieldset.ui-fieldset,
.post-fieldset.p-fieldset {
    background: #141b1d !important;
    color: var(--text) !important;
    border: 1px solid var(--ipc-accent) !important;
    border-radius: 8px !important;
    padding: 20px 24px 16px !important;
    margin: 0 !important;
    /* <fieldset> sa štandardne nezmrští pod min-content šírku svojho obsahu
       (napr. tabuľky s pevným min-width) - bez tohto by na mobile roztiahol
       celú stránku namiesto toho, aby tabuľka scrollovala vo vlastnom wrapperi. */
    min-width: 0 !important;
}
.post-fieldset .ui-fieldset-legend,
.post-fieldset .p-fieldset-legend {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    background: #1a2226 !important;
    border: 1px solid var(--ipc-accent) !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
}
.post-fieldset .ui-fieldset-content,
.post-fieldset .p-fieldset-content {
    background: transparent !important;
    color: var(--text) !important;
}

.detail-post-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 16px;
    display: block;
}
.detail-img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 6;
    background: linear-gradient(135deg, #1E2222 0%, #28A9CC 100%);
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Náhľad obrázka je orezaný (object-fit: cover) - tlačidlo ho otvorí v plnej
   veľkosti, napr. keď ide o naskenovaný newsletter, ktorý treba prečítať celý. */
.detail-img-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}
.detail-img-trigger:focus-visible {
    outline: 2px solid var(--ipc-accent);
    outline-offset: 2px;
}

/* Dialóg s obrázkom v plnej veľkosti (PrimeFaces sa postará o modálne pozadie,
   z-index, Escape, fokus AJ o samotné show/hide cez inline "display" - preto sa
   "display" tu vôbec nenastavuje, aby sme neprepísali jeho prepínanie. Výška a
   scroll sa riešia len na .ui-dialog-content, ktoré JS nikdy nemení.
   !important je nutný - PrimeFaces vlastné components.css sa v <h:head>
   vykresľuje AŽ PO našom style.css, takže pri rovnakej špecifickosti selektora
   by inak prepísalo max-height/overflow z tohto pravidla. */
.post-image-dialog {
    max-width: 90vw !important;
}
.post-image-dialog .ui-dialog-content {
    max-height: 75vh !important;
    overflow: auto !important;
}
.post-image-dialog-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.post-meta { margin: 12px 0; }
.post-meta p { font-size: .88rem; margin-bottom: 5px; color: var(--text-soft); }

.about-panel { margin: 14px 0 !important; }

.participants-section { margin-top: 20px; }
.participants-panel { margin-top: 0 !important; }
.participants-export { margin-top: 10px; text-align: right; }

/* ── Dátové tabuľky (Mapa inštitúcií, Admin) ─────────────────
   p:dataTable nemal žiadne vlastné štýly - defaultoval na svetlú
   PrimeFaces tému (biele pozadie), úplne mimo tmavej palety appky. */
.admin-table.ui-datatable,
.admin-table.p-datatable {
    background: transparent !important;
    border: none !important;
}
.admin-table .ui-datatable-tablewrapper,
.admin-table .p-datatable-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.admin-table table { width: 100%; border-collapse: collapse; }
.admin-table th,
.admin-table .p-datatable-thead > tr > th {
    background: #1a2226 !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: .8rem !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: left;
    padding: 12px 14px !important;
    border: none !important;
    border-bottom: 2px solid var(--border) !important;
}
.admin-table td,
.admin-table .p-datatable-tbody > tr > td {
    background: transparent !important;
    color: var(--text) !important;
    font-size: .875rem;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
}
/* Samotný <tr> nesie triedu .ui-widget-content s vlastným (bielym) pozadím z
   PrimeFaces témy - td:transparent samo o sebe nestačí, treba prebiť riadok. */
.admin-table tbody tr,
.admin-table tbody tr.ui-widget-content,
.admin-table .p-datatable-tbody > tr {
    background: #141b1d !important;
    color: var(--text) !important;
    transition: background .15s ease;
}
.admin-table tbody tr:nth-child(even),
.admin-table .p-datatable-tbody > tr:nth-child(even),
.admin-table tbody tr.ui-datatable-even,
.admin-table .p-datatable-tbody > tr.p-row-even {
    background: #181f23 !important;
}
.admin-table tbody tr:hover,
.admin-table .p-datatable-tbody > tr:hover {
    background: rgba(40, 169, 204, .16) !important;
}
.admin-table .ui-datatable-empty-message td,
.admin-table .p-datatable-emptymessage td {
    text-align: center;
    color: var(--text-muted) !important;
    padding: 24px !important;
}

.status-ok  { color: #6fcf80; font-weight: 700; font-size: 1rem; }
.status-nok { color: #ff6b6b; font-weight: 700; font-size: 1rem; }
.admin-status-col { text-align: center !important; }
.admin-actions-col { display: flex; gap: 6px; flex-wrap: wrap; }

/* Paginátor pod tabuľkou */
.admin-table .ui-paginator,
.admin-table .p-paginator {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    padding: 12px !important;
    display: flex !important;
    justify-content: center;
    gap: 4px;
}
.admin-table .ui-paginator a,
.admin-table .ui-paginator span.ui-paginator-page,
.admin-table .p-paginator-page,
.admin-table .p-paginator-first,
.admin-table .p-paginator-prev,
.admin-table .p-paginator-next,
.admin-table .p-paginator-last {
    background: transparent !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    min-width: 30px !important;
    height: 30px !important;
}
.admin-table .ui-paginator .ui-state-active,
.admin-table .p-paginator-page.p-highlight {
    background: var(--ipc-accent) !important;
    color: #fff !important;
    border-color: var(--ipc-accent) !important;
}
.admin-table .ui-paginator a:hover,
.admin-table .p-paginator-page:not(.p-highlight):hover,
.admin-table .p-paginator-first:hover,
.admin-table .p-paginator-prev:hover,
.admin-table .p-paginator-next:hover,
.admin-table .p-paginator-last:hover {
    background: var(--ipc-accent-soft) !important;
    color: var(--ipc-accent-dark) !important;
}

/* ── Share dialog ─────────────────────────────────────────── */
.share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    background: #141b1d;
    font-size: 0.875rem;
    font-weight: 600;
    transition: transform .15s, box-shadow .15s;
    width: 100%;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.share-btn svg { width: 38px; height: 38px; }
.share-btn small { font-weight: 400; font-size: 0.72rem; color: var(--text-muted); }
.share-facebook { color: #4a9bff; border-color: #4a9bff; }
.share-facebook:hover { background: rgba(74,155,255,.12); }
.share-linkedin { color: #4db3f0; border-color: #4db3f0; }
.share-linkedin:hover { background: rgba(77,179,240,.12); }
.share-instagram { color: #ec5c96; border-color: #ec5c96; }
.share-instagram:hover { background: rgba(236,92,150,.12); }
.share-tiktok { color: var(--text); border-color: var(--text-soft); }
.share-tiktok:hover { background: rgba(255,255,255,.08); }
.share-copied-msg {
    margin-top: 14px;
    padding: 8px 14px;
    background: rgba(76,175,80,.15);
    color: #8ee59a;
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.detail-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.rsvp-done-label { color: #8ee59a; font-weight: 600; font-size: .95rem; }
.rsvp-closed-label { color: var(--text-muted); font-weight: 600; font-size: .95rem; }

.detail-actions-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0 4px;
}

/* ── Form Pages (Create Post / Profile) ──────────────────── */
.form-page { padding: 32px; display: flex; justify-content: center; flex: 1; }

.form-panel { width: 680px !important; box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; border-radius: 10px !important; }
.form-panel-wide { width: 800px !important; }

/* Full-width panel (create-post) */
.create-panel { box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; border-radius: 10px !important; }

body .ui-message { padding: 0 !important; }
.ui-message.field-error:not(.ui-message-error) { display: none !important; }
.ui-message.field-error.ui-message-error { display: block; color: #e53935; font-size: 1.0rem; margin-top: 4px; }

.form-panel .ui-panel-titlebar,
.create-panel .ui-panel-titlebar {
    background: linear-gradient(90deg, #1E2222 0%, #28A9CC 100%) !important;
    color: #fff !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 14px 20px !important;
}

.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; }

.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }

/* ── Profile Page ─────────────────────────────────────────── */
.profile-top { display: flex; gap: 24px; margin-bottom: 20px; }
.profile-avatar { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 140px; flex-shrink: 0; }
.avatar-img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid #28A9CC; background: rgba(255,255,255,.1); }
.lib-logo-img { width: 120px; height: 120px; object-fit: contain; border-radius: 12px; border: 3px solid #28A9CC; background: rgba(255,255,255,.06); display: block; }
.lib-logo-placeholder { background: rgba(255,255,255,.08); }
.profile-basic { flex: 1; }

.follow-btn { width: 100% !important; }
.follower-count { font-size: .8rem; color: var(--text-muted); text-align: center; }

.contact-panel { margin: 16px 0 !important; }
.contact-panel .ui-panel-titlebar { background: #141b1d !important; color: var(--text) !important; }

/* ── Chat Page ────────────────────────────────────────────── */
/* mainForm musí byť stĺpcový flex kontajner vyplňujúci výšku nad footrom -
   .chat-layout (flex:1 nižšie) tak zaberie presne zvyšný priestor pod
   hlavičkou namiesto pevného "calc(100vh - 64px)", ktoré nepočítalo
   s footrom a preto ho museli predtým úplne skryť (display:none). */
body.chat-page #mainForm { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-layout { display: flex; gap: 0; flex: 1; min-height: 0; }

.chat-contacts { width: 280px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; }
.chat-contacts .ui-panel { height: 100%; border: none !important; border-radius: 0 !important; }
.chat-contacts .ui-panel-titlebar { background: var(--ipc-dark) !important; color: #fff !important; }


.chat-window { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-window .ui-panel { height: 100%; border: none !important; border-radius: 0 !important; display: flex; flex-direction: column; min-height: 0; }
.chat-window .ui-panel-titlebar { background: #141b1d !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; }
.chat-window .ui-panel-content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; }

.chat-messages { flex: 1; min-height: 0; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.chat-load-more { display: flex; justify-content: center; padding-bottom: 6px; }
.chat-load-older-btn.ui-button { color: #28A9CC !important; font-size: .82rem !important; padding: 4px 12px !important; }

.chat-bubble { max-width: 60%; display: flex; flex-direction: column; gap: 2px; }
.chat-bubble.own   { align-self: flex-end; align-items: flex-end; }
.chat-bubble.other { align-self: flex-start; align-items: flex-start; }

.bubble-text {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: .9rem;
    line-height: 1.4;
}
.own   .bubble-text { background: #28A9CC; color: #fff; border-bottom-right-radius: 4px; }
.other .bubble-text { background: rgba(255,255,255,.1); color: var(--text); border-bottom-left-radius: 4px; }

.bubble-time { font-size: .72rem; color: var(--text-muted); padding: 0 4px; }

.chat-footer { border-top: 1px solid var(--border); background: #141b1d; flex-shrink: 0; }
.chat-attach-error { display: block; padding: 4px 16px 0; font-size: .8rem; color: #ff6b6b; }
.chat-file-preview { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(40,169,204,.1); border-bottom: 1px solid rgba(40,169,204,.3); font-size: .85rem; color: var(--text); }
.chat-file-preview .pi { color: #28A9CC; }
.chat-file-preview-remove { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 0 2px; }
.chat-file-preview-remove:hover { color: #ff6b6b; }
.chat-input-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px 12px; }
.chat-input { flex: 1 !important; border-radius: 20px !important; }

/* Clip + send button — icon only, rovnaká veľkosť */
.chat-file-btn,
.chat-send-btn { width: 2.357rem !important; height: 2.357rem !important; padding: 0 !important; flex-shrink: 0; }

.bubble-attachment { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.bubble-img { max-width: 260px; max-height: 200px; border-radius: 8px; display: block; cursor: pointer; }
.bubble-file { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border-radius: 6px; padding: 6px 10px; font-size: .88rem; }
.bubble-file .pi { font-size: 1.1rem; }
.bubble-download { font-size: .78rem; color: inherit; opacity: .75; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.bubble-download:hover { opacity: 1; text-decoration: underline; }

/* Meno odosielateľa v skupinovom chate */
.bubble-sender { font-size: .75rem; font-weight: 600; color: #28A9CC; padding: 0 4px 2px; }

/* Avatar skupiny */
.contact-avatar-group { background: #1E2222 !important; font-size: 1rem; }

/* Dialog — prepínač DM / Skupina */
.dlg-mode-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.dlg-mode-toggle .p-button { flex: 1; }

/* Checkbox v zozname členov skupiny */
.user-picker-check { display: flex; align-items: center; gap: 10px; cursor: default; }
.user-picker-check .p-checkbox { flex-shrink: 0; }

/* Nadpis "Členovia" */
.group-members-label { font-size: .82rem; font-weight: 600; color: var(--text-soft); }

/* ── Library Grid ─────────────────────────────────────────── */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.lib-card { border-radius: 8px !important; height: 100% !important; display: flex !important; flex-direction: column !important; }
.lib-card .ui-panel-content { padding: 14px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
.lib-card .ui-panel-content form { margin-top: auto !important; }
.lib-card .ui-panel-titlebar { display: none !important; }

.lib-card-img {
    position: relative;
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, #1E2222 0%, #28A9CC 100%);
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lib-card-logo { width: 100%; height: 100%; object-fit: cover; display: block; }

.lib-card-lang-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(10, 14, 16, .78);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.lib-title { font-size: 1rem; color: var(--text); margin-bottom: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lib-desc  { font-size: .82rem; color: var(--text-soft); margin-bottom: 10px; min-height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.lib-card-type { font-size: .72rem; color: var(--text-muted); margin-bottom: 10px; }

/* ── Library Detail ───────────────────────────────────────── */
.lib-detail-page { align-items: flex-start; }
.lib-detail-content { width: 800px; max-width: 100%; }

.lib-detail-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, #1E2222 0%, #28A9CC 100%);
    border-radius: 8px;
    margin-bottom: 20px;
}
.lib-detail-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.features-list { padding-left: 20px; }
.features-list li { margin-bottom: 6px; font-size: .9rem; color: var(--text-soft); }

/* ── Nominatim autocomplete ──────────────────────────────── */
.nominatim-wrapper { position: relative; }
.nominatim-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #141b1d;
    border: 1px solid rgba(40,169,204,.35);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    z-index: 1000;
    display: none;
    max-height: 260px;
    overflow-y: auto;
}
.nominatim-item {
    padding: 8px 12px;
    font-size: .83rem;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    line-height: 1.4;
}
.nominatim-item:last-child { border-bottom: none; }
.nominatim-item:hover { background: var(--surface-hover); color: var(--text); }

.partners-name-link { color: var(--ipc-accent) !important; font-weight: 600; }
.partners-name-link:hover { text-decoration: underline !important; color: var(--ipc-accent-dark) !important; }

/* ── Dialógy (p:dialog) - default PrimeFaces téma je svetlá; okrem
   .ipc-confirm-dialog (vlastný komponent nižšie) neboli ostatné p:dialog
   použitia (napr. "Začať novú konverzáciu" v chate) prispôsobené tme. */
.ui-dialog,
.p-dialog {
    background: #141b1d !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-md) !important;
}
.ui-dialog-titlebar,
.p-dialog-header {
    background: #1a2226 !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.ui-dialog-title,
.p-dialog-title { color: var(--text) !important; font-weight: 700 !important; }
.ui-dialog-titlebar-icon,
.ui-dialog-titlebar-close,
.p-dialog-header-icon {
    color: var(--text-soft) !important;
}
.ui-dialog-titlebar-icon:hover,
.ui-dialog-titlebar-close:hover,
.p-dialog-header-icon:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, .08) !important;
}
.ui-dialog-content,
.p-dialog-content {
    background: transparent !important;
    color: var(--text) !important;
}
.ui-dialog-footer,
.p-dialog-footer {
    background: transparent !important;
    border-top: 1px solid var(--border) !important;
}

/* ── Confirm Dialog ──────────────────────────────────────────── */
.ipc-confirm-dialog .ui-dialog-titlebar,
.ipc-confirm-dialog .p-dialog-header {
    background: #1E2222 !important;
    color: #fff !important;
    border-radius: 8px 8px 0 0 !important;
}
.ipc-confirm-dialog .ui-dialog-content,
.ipc-confirm-dialog .p-dialog-content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 20px 24px !important;
    font-size: .95rem !important;
    color: var(--text) !important;
    background: #141b1d !important;
}
.ipc-confirm-dialog .ui-confirmdialog-severity,
.ipc-confirm-dialog .p-confirm-dialog-icon {
    font-size: 1.8rem !important;
    color: #e67e22 !important;
}
.ipc-confirm-dialog .ui-dialog-buttonpane,
.ipc-confirm-dialog .p-dialog-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    border-top: 1px solid var(--border) !important;
    background: #141b1d !important;
}

/* ── Calendar page ─────────────────────────────────────────
   .calendar-panel is a large surface — the global --surface opacity
   (tuned low so smaller cards show the colorful gradient) reads as
   "no background at all" at this size, so it gets its own stronger,
   more opaque frosted background instead. */
.calendar-panel.ui-panel {
    background: rgba(11, 20, 22, .85) !important;
}
.fc { font-family: var(--font-sans) !important; }
.fc-toolbar-title { font-size: 1.1rem !important; color: var(--text); }
/* Farba pozadia/okraja sa dá prebiť inline štýlom z DefaultScheduleEvent
   (backgroundColor/borderColor) — preto tu bez !important; border-radius
   a text zostávajú jednotné pre všetky udalosti. */
.fc-event { background: #28A9CC; border-color: #28A9CC; border-radius: 4px !important; color: #fff !important; }

/* ── Mini kalendár v bočnom paneli hlavnej stránky ─────────── */
.mini-cal-header-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mini-cal-expand-link { color: inherit !important; opacity: .65; font-size: .85rem; }
.mini-cal-expand-link:hover { opacity: 1; color: var(--ipc-accent) !important; }

.mini-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mini-cal-nav-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    font-size: .75rem;
    flex-shrink: 0;
}
.mini-cal-nav-btn:hover { background: var(--ipc-accent-soft); color: var(--ipc-accent-dark); }
.mini-cal-title { font-size: .85rem; font-weight: 700; color: var(--text); text-transform: capitalize; }

.mini-cal-weekdays,
.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}
.mini-cal-weekdays span { font-size: .68rem; font-weight: 700; color: var(--text-muted); padding-bottom: 4px; text-transform: uppercase; }

.mini-cal-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: .75rem;
    color: var(--text-soft);
    border-radius: 50%;
}
.mini-cal-cell-empty { visibility: hidden; }
.mini-cal-cell.is-today { font-weight: 700; border: 1.5px solid var(--ipc-accent); color: var(--ipc-accent-dark); }
.mini-cal-cell.has-event {
    cursor: pointer;
    color: var(--text);
    font-weight: 600;
}
.mini-cal-cell.has-event:hover { background: var(--ipc-accent-soft); }
.mini-cal-cell.has-event::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ipc-accent);
}

/* ── Chat: contacts header + avatar ──────────────────────── */
.chat-contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.new-chat-btn { color: #28A9CC !important; }

.contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}
.contact-item:hover,
.contact-item-active { background: var(--surface-hover); }

.contact-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1E2222;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info { flex: 1; overflow: hidden; }
.contact-name    { font-weight: 600; font-size: .88rem; color: var(--text); }
.contact-preview { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty-contacts { text-align: center; color: var(--text-muted); font-size: .85rem; padding: 24px 12px; line-height: 1.6; }

.contact-name-unread { font-weight: 800 !important; color: var(--text) !important; }

.unread-badge {
    background: #e53935;
    color: #fff;
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    padding: 0 5px;
    flex-shrink: 0;
    margin-left: 6px;
}

.nav-badge-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-unread-badge {
    position: absolute;
    top: -7px;
    right: -10px;
    background: #e53935;
    color: #fff;
    border-radius: 10px;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    padding: 0 4px;
    pointer-events: none;
    line-height: 1;
}

/* ── New chat dialog ──────────────────────────────────────── */
.new-chat-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }

.user-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.user-picker-item:hover { background: var(--surface-hover); }
.user-picker-item:last-child { border-bottom: none; }

/* ── PrimeFaces Panel overrides — mäkké karty namiesto orámovaných boxov ── */
.ui-panel {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--surface) !important;
}
.ui-panel-titlebar {
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.ui-panel-content {
    padding: 18px 20px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
}

/* ── Unified button style — všetky PrimeFaces buttony ────── */
body .ui-button,
body .p-button,
body .ui-button.p-button-sm,
body .p-button.p-button-sm,
body .ui-button.p-button-outlined,
body .p-button.p-button-outlined,
body .ui-button.p-button-secondary,
body .p-button.p-button-secondary,
body .ui-button.p-button-success,
body .p-button.p-button-success,
body .ui-button.p-button-warning,
body .p-button.p-button-warning,
body .ui-button.p-button-danger,
body .p-button.p-button-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    padding: 0.55rem 1.1rem !important;
    min-height: 2.35rem !important;
    line-height: 1.25 !important;
    border-radius: var(--radius-pill) !important;
    border-style: solid !important;
    border-width: 1.5px !important;
    box-shadow: none !important;
    background-image: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body .ui-button:not(.p-button-outlined):not(.p-button-text):hover,
body .p-button:not(.p-button-outlined):not(.p-button-text):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm), 0 0 0 4px rgba(255, 255, 255, .1) !important;
}
body .ui-button:active,
body .p-button:active { transform: translateY(0); }

/* Hlavné (primárne) tlačidlo — presný huly.io "See in Action" vzor:
   svetlé pozadie + tmavý teplý text + oranžovo-broskyňová žiara pri hoveri
   (namiesto plnej farebnej výplne, ktorá sa len stmavovala). */
body .ui-button,
body .p-button,
body .ui-button.p-button-success,
body .p-button.p-button-success {
    background: var(--cta-bg) !important;
    border-color: rgba(255, 255, 255, .5) !important;
    color: var(--cta-text) !important;
}
body .ui-button:hover,
body .p-button:hover {
    background: var(--cta-bg-hover) !important;
    border-color: rgba(255, 255, 255, .7) !important;
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--cta-glow-1), 0 0 22px 6px var(--cta-glow-2) !important;
}

/* Teplá žiara vnútri tlačidla, ktorá sleduje kurzor (huly.io "See in Action").
   --spot-x/--spot-y nastavuje globálny pointermove listener v a11y-toggle.xhtml
   (jediné miesto spoločné pre všetky stránky appky). isolation:isolate + záporný
   z-index drží žiaru POD textom tlačidla v rámci vlastného stacking kontextu. */
body .ui-button:not(.p-button-secondary):not(.p-button-outlined):not(.p-button-warning):not(.p-button-danger):not(.p-button-text),
body .p-button:not(.p-button-secondary):not(.p-button-outlined):not(.p-button-warning):not(.p-button-danger):not(.p-button-text),
.header-btn,
.login-btn,
.landing-btn-primary {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    --spot-x: 50%;
    --spot-y: 50%;
}
body .ui-button:not(.p-button-secondary):not(.p-button-outlined):not(.p-button-warning):not(.p-button-danger):not(.p-button-text)::before,
body .p-button:not(.p-button-secondary):not(.p-button-outlined):not(.p-button-warning):not(.p-button-danger):not(.p-button-text)::before,
.header-btn::before,
.login-btn::before,
.landing-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    background: radial-gradient(90px circle at var(--spot-x) var(--spot-y), rgba(255,225,190,.95) 0%, rgba(255,170,100,.55) 40%, transparent 72%);
}
body .ui-button:not(.p-button-secondary):not(.p-button-outlined):not(.p-button-warning):not(.p-button-danger):not(.p-button-text):hover::before,
body .p-button:not(.p-button-secondary):not(.p-button-outlined):not(.p-button-warning):not(.p-button-danger):not(.p-button-text):hover::before,
.header-btn:hover::before,
.login-btn:hover::before,
.landing-btn-primary:hover::before {
    opacity: 1;
}

body .ui-button.p-button-secondary,
body .p-button.p-button-secondary {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: var(--text-soft) !important;
}
body .ui-button.p-button-secondary:hover,
body .p-button.p-button-secondary:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .3) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-sm), 0 0 0 4px rgba(255, 255, 255, .12) !important;
}

body .ui-button.p-button-outlined,
body .p-button.p-button-outlined {
    background: transparent !important;
    border: 1.5px solid var(--ipc-accent) !important;
    color: var(--ipc-accent) !important;
}
body .ui-button.p-button-outlined:hover,
body .p-button.p-button-outlined:hover {
    background: var(--ipc-accent-soft) !important;
    color: var(--ipc-accent-dark) !important;
}

body .ui-button.p-button-warning,
body .p-button.p-button-warning {
    background: #e67e22 !important;
    border-color: #e67e22 !important;
    color: #fff !important;
}
body .ui-button.p-button-warning:hover,
body .p-button.p-button-warning:hover {
    background: #ca6f1e !important;
    border-color: #ca6f1e !important;
}

body .ui-button.p-button-danger,
body .p-button.p-button-danger {
    background: #e53935 !important;
    border-color: #e53935 !important;
    color: #fff !important;
}
body .ui-button.p-button-danger:hover,
body .p-button.p-button-danger:hover {
    background: #c62828 !important;
    border-color: #c62828 !important;
}

/* ── PrimeFaces Checkbox / Radio active ─────────────────── */
.ui-chkbox-box,
.p-checkbox-box,
.p-radiobutton-box {
    background: rgba(255, 255, 255, .06) !important;
    border-color: var(--border) !important;
    border-radius: 5px !important;
    transition: background .15s ease, border-color .15s ease;
}
.ui-chkbox-box.ui-state-active,
.p-checkbox-box.p-highlight,
.p-radiobutton-box.p-highlight {
    background: var(--ipc-accent) !important;
    border-color: var(--ipc-accent) !important;
}

/* ── PrimeFaces DatePicker full-width fix ────────────────── */
.ui-datepicker.w-full,
.p-datepicker.w-full {
    display: flex !important;
    width: 100% !important;
}
.ui-datepicker.w-full input.ui-inputfield,
.p-datepicker.w-full input.ui-inputfield,
.ui-datepicker.w-full .p-inputtext,
.p-datepicker.w-full .p-inputtext {
    flex: 1 !important;
    min-width: 0 !important;
    width: 0 !important;
}

/* ── PrimeFaces InputText / Password ───────────────────────
   .ui-inputfield covers both p:inputText (ui-inputfield ui-inputtext ...)
   and p:password (ui-inputfield ...) so both get the same visible border. */
.ui-inputtext,
.p-inputtext,
.ui-inputfield,
.ui-selectonemenu,
.p-dropdown,
.ui-multiselect,
.p-multiselect,
.ui-selectcheckboxmenu,
textarea.ui-widget,
textarea.p-inputtextarea {
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-sans) !important;
    font-size: .875rem !important;
    border: 1px solid var(--border) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--text) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* PrimeFaces widgety (SelectOneMenu a pod.) si po načítaní cez JS nastavia
   inline min-width podľa najdlhšej možnosti v zozname - to width:100% z
   .w-full neprebije (iná vlastnosť), takže na užších obrazovkách sa
   dropdown odmietal zúžiť. */
.ui-selectonemenu.w-full,
.p-dropdown.w-full,
.ui-multiselect.w-full,
.p-multiselect.w-full,
.ui-selectcheckboxmenu.w-full {
    min-width: 0 !important;
    max-width: 100% !important;
}
.ui-inputtext:focus,
.p-inputtext:focus,
.ui-selectonemenu:not(.ui-state-disabled).ui-state-focus,
.p-dropdown:not(.p-disabled).p-focus,
.ui-selectcheckboxmenu:not(.ui-state-disabled).ui-state-focus {
    border-color: var(--ipc-accent) !important;
    box-shadow: 0 0 0 3px rgba(40,169,204,.15) !important;
}
.ui-inputtext::placeholder,
.p-inputtext::placeholder { color: var(--text-muted) !important; }
.ui-selectonemenu-label,
.p-dropdown-label,
.ui-multiselect-label,
.p-multiselect-label,
.ui-selectcheckboxmenu-label { color: var(--text) !important; }
.ui-selectonemenu-trigger,
.p-dropdown-trigger,
.ui-multiselect-trigger,
.p-multiselect-trigger,
.ui-selectcheckboxmenu-trigger { color: var(--text-soft) !important; }

/* Rozbaľovacie panely (select/multiselect/autocomplete/datepicker) sú
   samostatné overlay elementy mimo .ui-panel hierarchie - potrebujú
   vlastné tmavé pozadie namiesto defaultnej svetlej PrimeFaces témy. */
.ui-selectonemenu-panel,
.p-dropdown-panel,
.ui-multiselect-panel,
.p-multiselect-panel,
.ui-autocomplete-panel,
.p-autocomplete-panel,
.ui-datepicker,
.p-datepicker,
.ui-datepicker-calendar,
.ui-overlaypanel,
.ui-selectcheckboxmenu-panel {
    background: #141b1d !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-md) !important;
}
.ui-selectonemenu-item,
.p-dropdown-item,
.ui-multiselect-item,
.p-multiselect-item,
.ui-autocomplete-item,
.p-autocomplete-item,
.ui-datepicker-calendar td a,
.ui-datepicker td a,
.ui-selectcheckboxmenu-item,
.ui-selectcheckboxmenu-item label,
/* Riadky s viacerými p:column (napr. jazyk: vlajka + kód) sa renderujú ako
   <tr>/<td> tabuľka vnútri panelu - samotný riadok si nesie vlastné biele
   pozadie z PrimeFaces témy, farba textu na ňom nestačí. */
.ui-selectonemenu-panel table td,
.ui-selectonemenu-panel table tr {
    background: transparent !important;
    color: var(--text) !important;
}
/* "Vybrať všetko" hlavička panelu má vlastnú triedu (.ui-widget-header),
   ktorú základné pravidlá pre *-panel vyššie nezachytia. */
.ui-selectcheckboxmenu-header {
    background: #1a2226 !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.ui-selectcheckboxmenu-close .ui-icon {
    filter: invert(1);
}
.ui-selectonemenu-item:hover,
.p-dropdown-item:hover,
.ui-multiselect-item:hover,
.p-multiselect-item:hover,
.ui-autocomplete-item:hover,
.p-autocomplete-item:hover,
.ui-datepicker-calendar td a:hover,
.ui-selectcheckboxmenu-item:hover {
    background: var(--ipc-accent-soft) !important;
    color: var(--ipc-accent-dark) !important;
}
.ui-datepicker-header {
    background: #141b1d !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
}
/* PrimeFaces vnútri niektorých komponentov (napr. p:datePicker button bar)
   vykresľuje vlastný <hr class="ui-separator ui-state-default">, ktorý sa
   nedá odstrániť z facelet kódu, keďže nie je súčasťou statického markupu. */
.ui-separator.ui-state-default { display: none !important; }
.ui-datepicker-header,
.ui-datepicker-title,
.ui-datepicker-prev,
.ui-datepicker-next {
    color: var(--text) !important;
}

/* ── PrimeFaces SelectOneMenu highlight ─────────────────── */
.ui-selectonemenu-item.ui-state-highlight,
.p-dropdown-item.p-highlight {
    background: #28A9CC !important;
    color: #fff !important;
}

.mt-1 { margin-top: 14px !important; }

/* ── Responzívne úpravy ──────────────────────────────────────── */

/* Tablet <1024px */
@media (max-width: 1023px) {
    .chat-layout     { flex-direction: column; height: auto; }
    .chat-contacts   { width: 100%; max-height: 220px; border-right: none; border-bottom: 1px solid var(--border); }
    .chat-window     { height: calc(100vh - 340px); min-height: 300px; }
}

/* Hamburger breakpoint ≤1100px (pokrýva zoom 133-150% na bežných monitoroch) */
@media (max-width: 1100px) {
    .ipc-header { padding: 0 16px; }

    /* Skryť desktop sekcie, zobraziť hamburger */
    .header-right { display: none !important; }
    .header-create-wrap { display: none !important; }
    .hamburger-btn { display: flex; }

    /* Mobile nav panel */
    .mobile-nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: #1E2222;
        z-index: 999;
        padding: 16px;
        flex-direction: column;
        gap: 4px;
        border-top: 1px solid rgba(40,169,204,.3);
        border-bottom: 3px solid #28A9CC;
        box-shadow: 0 6px 20px rgba(0,0,0,.3);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    .mobile-nav.open { display: flex; }

    /* Create Post tlačidlo */
    .mobile-nav-row { margin-bottom: 8px; }

    /* Nav linky */
    .mobile-nav-link {
        display: block;
        padding: 11px 4px;
        font-size: .95rem;
        font-weight: 500;
        color: rgba(255,255,255,.8) !important;
        border-bottom: 1px solid rgba(255,255,255,.08);
        text-decoration: none;
    }
    .mobile-nav-link:hover { color: #28A9CC !important; }

    /* Spodná lišta: jazyk + logout */
    .mobile-nav-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        margin-top: 4px;
        gap: 10px;
    }
    .mobile-nav-bottom .header-lang.ui-selectonemenu { width: 90px !important; }
}

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════ */

.landing-body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
}

/* ── Landing Header ──────────────────────────────────────── */
.landing-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(30,34,34,.92);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid #28A9CC;
}
.landing-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.landing-brand { display: flex; align-items: baseline; gap: 2px; }
.landing-brand-logo {
    height: 36px;
    width: auto;
    align-self: center;
    margin-right: 4px;
}
.landing-brand-ipc {
    font-size: 1.6rem;
    font-weight: 800;
    color: #28A9CC;
    letter-spacing: 2px;
}
.landing-brand-hub {
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: 1px;
}
.landing-header-actions { display: flex; align-items: center; gap: 10px; }

/* ── Landing Buttons ─────────────────────────────────────── */
.landing-btn-primary {
    background: var(--cta-bg);
    color: var(--cta-text) !important;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.5);
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
    transition: background .2s, box-shadow .2s;
    display: inline-block;
}
.landing-btn-primary:hover {
    background: var(--cta-bg-hover);
    box-shadow: 0 0 0 3px var(--cta-glow-1), 0 0 18px 5px var(--cta-glow-2);
}

.landing-btn-outline {
    background: transparent;
    color: #fff !important;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.4);
    font-size: .875rem;
    text-decoration: none;
    transition: border-color .2s, color .2s, box-shadow .2s;
    display: inline-block;
}
.landing-btn-outline:hover { border-color: #28A9CC; color: #28A9CC !important; box-shadow: 0 0 0 4px rgba(40, 169, 204, .14); }

.landing-btn-ghost {
    background: transparent;
    color: rgba(255,255,255,.85) !important;
    padding: 11px 28px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.4);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, background .2s;
    display: inline-block;
}
.landing-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.landing-btn-lg { padding: 12px 32px; font-size: 1rem; }

/* ── Hero ────────────────────────────────────────────────── */
.landing-hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #1E2222 0%, #0f3040 50%, #28A9CC 100%);
    display: flex;
    align-items: center;
    padding-top: 64px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    --spot-x: 50%;
    --spot-y: 50%;
}
.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(40,169,204,.15) 0%, transparent 60%);
    pointer-events: none;
}
/* Obrazec neurónovej siete odhaľujúci sa okolo kurzora (huly.io efekt,
   rovnaké ako .home-hero na home.xhtml) - --spot-x/--spot-y nastavuje
   mousemove listener v landing.xhtml. */
.landing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cg stroke='rgba%28255,255,255,0.55%29' stroke-width='1' fill='none'%3E%3Cline x1='1025' y1='237' x2='1197' y2='251'/%3E%3Cline x1='1459' y1='818' x2='1401' y2='676'/%3E%3Cline x1='789' y1='21' x2='675' y2='28'/%3E%3Cline x1='1308' y1='499' x2='1456' y2='623'/%3E%3Cline x1='1142' y1='643' x2='1180' y2='829'/%3E%3Cline x1='476' y1='95' x2='675' y2='28'/%3E%3Cline x1='1174' y1='360' x2='1316' y2='342'/%3E%3Cline x1='1401' y1='676' x2='1472' y2='575'/%3E%3Cline x1='476' y1='95' x2='423' y2='186'/%3E%3Cline x1='236' y1='43' x2='108' y2='21'/%3E%3Cline x1='385' y1='812' x2='306' y2='816'/%3E%3Cline x1='989' y1='720' x2='1024' y2='556'/%3E%3Cline x1='1142' y1='643' x2='1119' y2='472'/%3E%3Cline x1='688' y1='541' x2='808' y2='648'/%3E%3Cline x1='140' y1='654' x2='306' y2='816'/%3E%3Cline x1='989' y1='720' x2='912' y2='850'/%3E%3Cline x1='743' y1='345' x2='924' y2='350'/%3E%3Cline x1='989' y1='720' x2='1180' y2='829'/%3E%3Cline x1='864' y1='866' x2='689' y2='828'/%3E%3Cline x1='688' y1='541' x2='590' y2='646'/%3E%3Cline x1='236' y1='43' x2='131' y2='169'/%3E%3Cline x1='940' y1='76' x2='789' y2='21'/%3E%3Cline x1='1025' y1='237' x2='1092' y2='41'/%3E%3Cline x1='808' y1='546' x2='808' y2='648'/%3E%3Cline x1='133' y1='389' x2='316' y2='384'/%3E%3Cline x1='1473' y1='85' x2='1338' y2='279'/%3E%3Cline x1='308' y1='248' x2='316' y2='384'/%3E%3Cline x1='308' y1='248' x2='108' y2='21'/%3E%3Cline x1='745' y1='179' x2='684' y2='206'/%3E%3Cline x1='1473' y1='85' x2='1354' y2='80'/%3E%3Cline x1='864' y1='866' x2='912' y2='850'/%3E%3Cline x1='131' y1='169' x2='108' y2='21'/%3E%3Cline x1='1119' y1='472' x2='1024' y2='556'/%3E%3Cline x1='590' y1='646' x2='689' y2='828'/%3E%3Cline x1='222' y1='551' x2='140' y2='654'/%3E%3Cline x1='1480' y1='425' x2='1308' y2='499'/%3E%3Cline x1='745' y1='179' x2='789' y2='21'/%3E%3Cline x1='308' y1='248' x2='423' y2='186'/%3E%3Cline x1='222' y1='551' x2='399' y2='511'/%3E%3Cline x1='1316' y1='342' x2='1480' y2='425'/%3E%3Cline x1='472' y1='323' x2='316' y2='384'/%3E%3Cline x1='743' y1='345' x2='684' y2='206'/%3E%3Cline x1='1472' y1='575' x2='1456' y2='623'/%3E%3Cline x1='585' y1='351' x2='684' y2='206'/%3E%3Cline x1='1174' y1='360' x2='1119' y2='472'/%3E%3Cline x1='1480' y1='425' x2='1472' y2='575'/%3E%3Cline x1='1472' y1='575' x2='1308' y2='499'/%3E%3Cline x1='585' y1='351' x2='472' y2='323'/%3E%3Cline x1='688' y1='541' x2='808' y2='546'/%3E%3Cline x1='940' y1='76' x2='1092' y2='41'/%3E%3Cline x1='1495' y1='231' x2='1338' y2='279'/%3E%3Cline x1='472' y1='323' x2='423' y2='186'/%3E%3Cline x1='1025' y1='237' x2='924' y2='350'/%3E%3Cline x1='1316' y1='342' x2='1338' y2='279'/%3E%3Cline x1='288' y1='663' x2='385' y2='812'/%3E%3Cline x1='109' y1='537' x2='222' y2='551'/%3E%3Cline x1='745' y1='179' x2='743' y2='345'/%3E%3Cline x1='1495' y1='231' x2='1354' y2='80'/%3E%3Cline x1='385' y1='812' x2='500' y2='670'/%3E%3Cline x1='109' y1='537' x2='133' y2='389'/%3E%3Cline x1='222' y1='551' x2='288' y2='663'/%3E%3Cline x1='109' y1='537' x2='140' y2='654'/%3E%3Cline x1='1401' y1='676' x2='1302' y2='841'/%3E%3Cline x1='1401' y1='676' x2='1456' y2='623'/%3E%3Cline x1='288' y1='663' x2='306' y2='816'/%3E%3Cline x1='1197' y1='251' x2='1174' y2='360'/%3E%3Cline x1='1316' y1='342' x2='1308' y2='499'/%3E%3Cline x1='36' y1='840' x2='306' y2='816'/%3E%3Cline x1='288' y1='663' x2='140' y2='654'/%3E%3Cline x1='1302' y1='841' x2='1180' y2='829'/%3E%3Cline x1='1197' y1='251' x2='1338' y2='279'/%3E%3Cline x1='36' y1='840' x2='140' y2='654'/%3E%3Cline x1='590' y1='646' x2='500' y2='670'/%3E%3Cline x1='745' y1='179' x2='675' y2='28'/%3E%3Cline x1='316' y1='384' x2='399' y2='511'/%3E%3Cline x1='1459' y1='818' x2='1302' y2='841'/%3E%3Cline x1='1354' y1='80' x2='1338' y2='279'/%3E%3Cline x1='1142' y1='643' x2='1024' y2='556'/%3E%3Cline x1='585' y1='351' x2='743' y2='345'/%3E%3Cline x1='1495' y1='231' x2='1473' y2='85'/%3E%3Cline x1='989' y1='720' x2='1142' y2='643'/%3E%3C/g%3E%3Cg fill='rgba%28125,216,239,0.9%29'%3E%3Ccircle cx='940' cy='76' r='2.2'/%3E%3Ccircle cx='1459' cy='818' r='2.2'/%3E%3Ccircle cx='36' cy='840' r='2.2'/%3E%3Ccircle cx='864' cy='866' r='2.2'/%3E%3Ccircle cx='476' cy='95' r='2.2'/%3E%3Ccircle cx='133' cy='389' r='2.2'/%3E%3Ccircle cx='236' cy='43' r='2.2'/%3E%3Ccircle cx='808' cy='546' r='2.2'/%3E%3Ccircle cx='924' cy='350' r='2.2'/%3E%3Ccircle cx='131' cy='169' r='2.2'/%3E%3Ccircle cx='500' cy='670' r='2.2'/%3E%3Ccircle cx='912' cy='850' r='2.2'/%3E%3Ccircle cx='808' cy='648' r='2.2'/%3E%3Ccircle cx='1092' cy='41' r='2.2'/%3E%3Ccircle cx='689' cy='828' r='2.2'/%3E%3Ccircle cx='399' cy='511' r='2.2'/%3E%3Ccircle cx='688' cy='541' r='3.2'/%3E%3Ccircle cx='109' cy='537' r='3.2'/%3E%3Ccircle cx='1025' cy='237' r='3.2'/%3E%3Ccircle cx='590' cy='646' r='3.2'/%3E%3Ccircle cx='585' cy='351' r='3.2'/%3E%3Ccircle cx='1495' cy='231' r='3.2'/%3E%3Ccircle cx='1473' cy='85' r='3.2'/%3E%3Ccircle cx='789' cy='21' r='3.2'/%3E%3Ccircle cx='1197' cy='251' r='3.2'/%3E%3Ccircle cx='1174' cy='360' r='3.2'/%3E%3Ccircle cx='1354' cy='80' r='3.2'/%3E%3Ccircle cx='1480' cy='425' r='3.2'/%3E%3Ccircle cx='385' cy='812' r='3.2'/%3E%3Ccircle cx='675' cy='28' r='3.2'/%3E%3Ccircle cx='472' cy='323' r='3.2'/%3E%3Ccircle cx='1302' cy='841' r='3.2'/%3E%3Ccircle cx='1119' cy='472' r='3.2'/%3E%3Ccircle cx='308' cy='248' r='3.2'/%3E%3Ccircle cx='684' cy='206' r='3.2'/%3E%3Ccircle cx='1456' cy='623' r='3.2'/%3E%3Ccircle cx='423' cy='186' r='3.2'/%3E%3Ccircle cx='1024' cy='556' r='3.2'/%3E%3Ccircle cx='1180' cy='829' r='3.2'/%3E%3Ccircle cx='108' cy='21' r='3.2'/%3E%3Ccircle cx='745' cy='179' r='4.5'/%3E%3Ccircle cx='222' cy='551' r='4.5'/%3E%3Ccircle cx='288' cy='663' r='4.5'/%3E%3Ccircle cx='743' cy='345' r='4.5'/%3E%3Ccircle cx='140' cy='654' r='4.5'/%3E%3Ccircle cx='1401' cy='676' r='4.5'/%3E%3Ccircle cx='989' cy='720' r='4.5'/%3E%3Ccircle cx='1142' cy='643' r='4.5'/%3E%3Ccircle cx='1316' cy='342' r='4.5'/%3E%3Ccircle cx='1472' cy='575' r='4.5'/%3E%3Ccircle cx='1308' cy='499' r='4.5'/%3E%3Ccircle cx='316' cy='384' r='4.5'/%3E%3Ccircle cx='1338' cy='279' r='4.5'/%3E%3Ccircle cx='306' cy='816' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-mask-image: radial-gradient(300px at var(--spot-x) var(--spot-y), black 0%, transparent 72%);
    mask-image: radial-gradient(300px at var(--spot-x) var(--spot-y), black 0%, transparent 72%);
}
.landing-hero:hover::after { opacity: .38; }
.landing-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin-left: max(24px, calc((100vw - 1200px) / 2));
}
.landing-hero-badge {
    display: inline-block;
    background: rgba(40,169,204,.25);
    border: 1px solid rgba(40,169,204,.5);
    color: #7dd8ef;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: fit-content;
}
.landing-hero-title {
    font-size: 4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -1px;
}
.landing-hero-tagline {
    font-size: 1.3rem;
    color: rgba(255,255,255,.85);
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}
.landing-hero-desc {
    font-size: .95rem;
    color: rgba(255,255,255,.6);
    margin: 0;
    line-height: 1.7;
    max-width: 480px;
}
.landing-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* Hero visual — connection nodes */
.landing-hero-visual {
    position: absolute;
    right: max(24px, calc((100vw - 1200px) / 2));
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-hero-nodes { position: relative; width: 100%; height: 100%; }
.hero-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-node {
    position: absolute;
    width: 60px; height: 60px;
    background: rgba(40,169,204,.2);
    border: 2px solid rgba(40,169,204,.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7dd8ef;
    font-size: 1.4rem;
    backdrop-filter: blur(4px);
}
.hero-node-top  { top: 8%;  left: 50%; transform: translateX(-50%); }
.hero-node-left { bottom: 10%; left: 5%; }
.hero-node-right{ bottom: 10%; right: 5%; }
.hero-node-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    background: #28A9CC;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 800; color: #fff;
    box-shadow: 0 0 30px rgba(40,169,204,.5);
}

/* ── Sections shared ─────────────────────────────────────── */
.landing-section { padding: 80px 24px; }
.landing-section-dark {
    background: #1E2222;
    color: #fff;
}
.landing-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.landing-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: inherit;
    text-align: center;
    margin: 0 0 48px 0;
}
.landing-section-dark .landing-section-title { color: #fff; }

/* ── Pillars ─────────────────────────────────────────────── */
.landing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.landing-card {
    background: #141b1d;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.landing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
.landing-card-icon {
    width: 68px; height: 68px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.6rem;
}
.landing-card-icon-people   { background: rgba(40,169,204,.14); color: #28A9CC; }
.landing-card-icon-companies{ background: rgba(91,114,204,.14); color: #8b9bf0; }
.landing-card-icon-schools  { background: rgba(76,170,90,.14); color: #6fcf80; }
.landing-card h3 { font-size: 1.15rem; color: var(--text); margin: 0 0 12px; }
.landing-card p  { font-size: .88rem; color: var(--text-soft); line-height: 1.6; margin: 0; }

/* ── How it works ────────────────────────────────────────── */
.landing-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}
.landing-step {
    flex: 1;
    text-align: center;
    padding: 0 24px;
    max-width: 260px;
}
.landing-step-num {
    width: 52px; height: 52px;
    background: #28A9CC;
    color: #fff;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.landing-step h3 { font-size: 1rem; color: #fff; margin: 0 0 8px; }
.landing-step p  { font-size: .85rem; color: rgba(255,255,255,.65); margin: 0; line-height: 1.6; }
.landing-step-arrow {
    color: rgba(255,255,255,.3);
    font-size: 1.2rem;
    padding-top: 16px;
    flex-shrink: 0;
}

/* ── CTA ─────────────────────────────────────────────────── */
.landing-cta-section {
    background: linear-gradient(135deg, #28A9CC 0%, #1d8eaa 100%);
    text-align: center;
}
.landing-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.landing-cta-title { font-size: 2.2rem; font-weight: 700; color: #fff; margin: 0; }
.landing-cta-desc  { font-size: 1rem; color: rgba(255,255,255,.85); margin: 0 0 8px; }
.landing-cta-section .landing-btn-primary {
    background: #fff !important;
    color: #28A9CC !important;
    border-color: transparent !important;
    font-size: 1rem;
    padding: 13px 40px;
}
.landing-cta-section .landing-btn-primary:hover {
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--cta-glow-1), 0 0 22px 6px var(--cta-glow-2) !important;
}

/* ── Landing responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    .landing-hero-visual { display: none; }
    .landing-hero-inner  { max-width: 100%; margin-left: 24px; }
    .landing-hero-title  { font-size: 2.8rem; }
    .landing-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .landing-steps { flex-direction: column; align-items: center; gap: 24px; }
    .landing-step-arrow { transform: rotate(90deg); padding: 0; }
}
@media (max-width: 600px) {
    .landing-header-inner { padding: 0 16px; }
    .landing-hero-title   { font-size: 2.2rem; }
    .landing-section      { padding: 56px 16px; }
    .landing-hero-btns    { flex-direction: column; }
    .landing-btn-lg       { text-align: center; }
}

/* Mobilné zariadenia <768px */
@media (max-width: 767px) {
    .post-detail-page { padding: 12px 12px 24px; }
    .post-fieldset.ui-fieldset,
    .post-fieldset.p-fieldset { padding: 14px 14px 12px !important; }
    .share-dialog.ui-dialog,
    .share-dialog.p-dialog { width: calc(100vw - 32px) !important; }
    .grid             { padding: 12px; gap: 12px; }
    .post-card-image { width: 90px; }
    .post-card-content { gap: 10px; padding: 10px; }
    .form-page        { padding: 12px; }
    .form-panel       { width: 100% !important; }
    .form-panel-wide  { width: 100% !important; }
    .field-row        { flex-direction: column; gap: 0; }
    .profile-top      { flex-direction: column; align-items: center; }
    .detail-actions   { flex-wrap: wrap; }
    .login-panel      { width: calc(100vw - 32px) !important; }
    .login-bottom-bar { width: 100%; flex-direction: column; align-items: center; gap: 10px; }
    .register-panel   { width: calc(100vw - 32px) !important; }
    .forgot-dialog    { width: calc(100vw - 32px) !important; }
    .lib-grid         { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .lib-detail-content { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY MODE (WCAG 2.1 AA) — čierno-biele UI s
   maximálnym kontrastom, väčšie písmo, viditeľné zameranie.
   Prepína sa triedou "a11y-mode" na <html> (viď header.xhtml).
   ═══════════════════════════════════════════════════════════ */
html.a11y-mode {
    --primary-color: #000000 !important;
    --primary-color-text: #ffffff !important;
    --primary-text-color: #000000 !important;
    --highlight-bg: #000000 !important;
    --highlight-text-color: #ffffff !important;
    --focus-ring: 0 0 0 3px #000000 !important;

    --ipc-accent:       #000000;
    --ipc-accent-dark:  #000000;
    --ipc-accent-soft:  #ffffff;
    --ipc-dark:         #000000;

    --surface:    #ffffff;
    --bg:         #ffffff;
    --border:     #000000;
    --text:       #000000;
    --text-soft:  #000000;
    --text-muted: #222222;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    font-size: 118%;
}

html.a11y-mode * {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: #000000 !important;
}

html.a11y-mode body {
    background: #ffffff !important;
    color: #000000 !important;
}

html.a11y-mode .ipc-header,
html.a11y-mode .mobile-nav,
html.a11y-mode .landing-header,
html.a11y-mode .app-sidebar,
html.a11y-mode .footer {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
/* Okraje prvkov vnútri tmavých líšt musia zostať biele (nie univerzálne čierne),
   inak sú kruhové/orámované tlačidlá na čiernom pozadí neviditeľné. */
html.a11y-mode .ipc-header *,
html.a11y-mode .mobile-nav *,
html.a11y-mode .landing-header *,
html.a11y-mode .app-sidebar *,
html.a11y-mode .footer * {
    border-color: #ffffff !important;
}

html.a11y-mode .ui-panel,
html.a11y-mode .ui-widget-content,
html.a11y-mode .p-component,
html.a11y-mode .post-card,
html.a11y-mode .lib-card,
html.a11y-mode .landing-card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* Tabuľky (.admin-table - admin, mapa inštitúcií, detail príspevku) majú
   vlastné natvrdo zadané tmavé farby s !important a vyššou špecifickosťou
   ako generický .p-component override vyššie, takže ho prebíjajú - treba
   ich prebiť explicitne. */
html.a11y-mode .admin-table.ui-datatable,
html.a11y-mode .admin-table.p-datatable,
html.a11y-mode .admin-table .ui-datatable-tablewrapper,
html.a11y-mode .admin-table .p-datatable-wrapper {
    background: #ffffff !important;
    border-color: #000000 !important;
}
html.a11y-mode .admin-table th,
html.a11y-mode .admin-table .p-datatable-thead > tr > th {
    background: #ffffff !important;
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
}
html.a11y-mode .admin-table td,
html.a11y-mode .admin-table .p-datatable-tbody > tr > td {
    background: transparent !important;
    color: #000000 !important;
    border-bottom: 1px solid #000000 !important;
}
html.a11y-mode .admin-table tbody tr,
html.a11y-mode .admin-table tbody tr.ui-widget-content,
html.a11y-mode .admin-table .p-datatable-tbody > tr,
html.a11y-mode .admin-table tbody tr:nth-child(even),
html.a11y-mode .admin-table .p-datatable-tbody > tr:nth-child(even),
html.a11y-mode .admin-table tbody tr.ui-datatable-even,
html.a11y-mode .admin-table .p-datatable-tbody > tr.p-row-even {
    background: #ffffff !important;
    color: #000000 !important;
}
html.a11y-mode .admin-table tbody tr:hover,
html.a11y-mode .admin-table .p-datatable-tbody > tr:hover {
    background: #eeeeee !important;
}

/* Fieldset okolo detailu príspevku má rovnaký problém - natvrdo tmavé
   pozadie a modrý border, ktoré v a11y móde treba nahradiť čierno-bielym. */
html.a11y-mode .post-fieldset.ui-fieldset,
html.a11y-mode .post-fieldset.p-fieldset {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}
html.a11y-mode .post-fieldset .ui-fieldset-legend,
html.a11y-mode .post-fieldset .p-fieldset-legend {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

/* Chat panely (kontakty, okno konverzácie) majú rovnaký problém ako tabuľky/fieldset
   vyššie - natvrdo tmavé pozadie titulku (#141b1d) s !important a farbou textu cez
   premennú --text, ktorá je v a11y móde tiež čierna -> čierne na skoro čiernom. */
html.a11y-mode .contact-panel .ui-panel-titlebar,
html.a11y-mode .chat-contacts .ui-panel-titlebar,
html.a11y-mode .chat-window .ui-panel-titlebar,
html.a11y-mode .dark-panel .ui-panel-titlebar {
    background: #ffffff !important;
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
}

/* Bubliny sprav v chate maju rovnaky problem - vlastne spravy natvrdo modre
   pozadie, cudzie spravy takmer priehladne biele pozadie (spolieha sa na tmave
   pozadie stranky za nimi) - v a11y mode je pozadie stranky biele, takze cudzie
   bubliny takmer zmiznu. Vlastne spravy prehodene na cierne s bielym textom,
   cudzie na biele s ciernym textom, obe s vyraznym orámovaním pre odlisenie. */
html.a11y-mode .own .bubble-text {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
}
html.a11y-mode .other .bubble-text,
html.a11y-mode .bubble-file {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}
html.a11y-mode .bubble-sender {
    color: #000000 !important;
}

/* Prepinac jazyka (.header-lang) ma natvrdo priehladne biele farby (10% pozadie,
   85% text) navrhnute pre tmavu listu na pozadi - v beznom hlavicky kontexte
   (landing/header) to funguje, ale ten isty dropdown sa pouziva aj vnutri bielej
   karty na login/register strankach (.login-bottom-bar), kde v a11y mode
   splynie takmer biely text s takmer bielym pozadim. Zjednotene na cierno-biele
   bez ohladu na to, na akom pozadi dropdown lezi. */
html.a11y-mode .header-lang.ui-selectonemenu {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
}
html.a11y-mode .header-lang.ui-selectonemenu .ui-selectonemenu-label,
html.a11y-mode .header-lang.ui-selectonemenu .ui-selectonemenu-trigger {
    color: #000000 !important;
}

/* Rozbaľovacie panely (select/dropdown/multiselect/autocomplete/datepicker) su
   samostatne overlay elementy pripojene rovno k <body> (appendTo="@(body)"),
   mimo hierarchie .ui-panel/.ui-widget-content, ktoru uz genericky a11y
   override vyssie riesi - a maju NATVRDO tmave pozadie #141b1d s !important
   (viď .ui-selectonemenu-panel a pod. o par riadkov nizsie v subore), takze
   text (cierny v a11y mode) na nom splynie. Tyka sa VSETKYCH takychto
   panelov v cele appke, nielen prepinaca jazyka - napr. aj kalendarovy
   datepicker vo formularoch. */
html.a11y-mode .ui-selectonemenu-panel,
html.a11y-mode .p-dropdown-panel,
html.a11y-mode .ui-multiselect-panel,
html.a11y-mode .p-multiselect-panel,
html.a11y-mode .ui-autocomplete-panel,
html.a11y-mode .p-autocomplete-panel,
html.a11y-mode .ui-datepicker,
html.a11y-mode .p-datepicker,
html.a11y-mode .ui-overlaypanel,
html.a11y-mode .ui-selectcheckboxmenu-panel {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
}
/* Katalog-vsetko: vnutorne wrappery/tabulky/riadky vnutri panelu (items-wrapper,
   <table>, <tbody>, <tr>, <td>, vlajky...) mozu niest vlastne tmave pozadie z
   PrimeFaces temy, ktore predoslé pravidlo na samotnom paneli nezachyti (nie su
   priamym potomkom .ui-selectonemenu-panel v CSS specificite). Namiesto
   vymenovavania kazdeho mozneho vnoreneho elementu sa prekryje pozadie na
   VSETKYCH potomkoch panelu naraz - farba textu sa deducuje z panelu (biele
   pozadie hore uz zabezpecuje viditelnost). */
html.a11y-mode .ui-selectonemenu-panel *,
html.a11y-mode .p-dropdown-panel *,
html.a11y-mode .ui-multiselect-panel *,
html.a11y-mode .p-multiselect-panel *,
html.a11y-mode .ui-autocomplete-panel *,
html.a11y-mode .p-autocomplete-panel *,
html.a11y-mode .ui-selectcheckboxmenu-panel * {
    background: transparent !important;
    color: #000000 !important;
}
html.a11y-mode .ui-selectcheckboxmenu-header {
    background: #ffffff !important;
    border-bottom: 2px solid #000000 !important;
    color: #000000 !important;
}
html.a11y-mode .ui-datepicker-header {
    background: #ffffff !important;
    border-bottom: 2px solid #000000 !important;
}
html.a11y-mode .ui-datepicker-header,
html.a11y-mode .ui-datepicker-title,
html.a11y-mode .ui-datepicker-prev,
html.a11y-mode .ui-datepicker-next {
    color: #000000 !important;
}
/* .ui-datepicker (samotny wrapper) je uz biely z panel-pravidla vyssie, ale
   vnutorna <table class="ui-datepicker-calendar"> si nesie VLASTNE natvrdo
   tmave pozadie (#141b1d, !important) z bazovej tmavej temy - nie je to
   priamy potomok zachyteny generickym "* {background:transparent}"
   pravidlom vyssie (to plati len pre *-panel selektory, nie pre .ui-datepicker).
   Cisla dni maju farbu cez var(--text), co v a11y mode stale zostava svetla -
   sivy text na tmavom pozadi = takmer necitatelne (presne nahlaseny bug). */
html.a11y-mode .ui-datepicker-calendar,
html.a11y-mode .ui-datepicker-group {
    background: #ffffff !important;
}
html.a11y-mode .ui-datepicker-calendar td a,
html.a11y-mode .ui-datepicker-calendar td span,
html.a11y-mode .ui-datepicker td a,
html.a11y-mode .ui-datepicker td span,
html.a11y-mode .ui-datepicker-calendar th span {
    color: #000000 !important;
}
html.a11y-mode .ui-selectonemenu-item:hover,
html.a11y-mode .p-dropdown-item:hover,
html.a11y-mode .ui-multiselect-item:hover,
html.a11y-mode .p-multiselect-item:hover,
html.a11y-mode .ui-autocomplete-item:hover,
html.a11y-mode .p-autocomplete-item:hover,
html.a11y-mode .ui-datepicker-calendar td a:hover,
html.a11y-mode .ui-selectcheckboxmenu-item:hover {
    background: #000000 !important;
    color: #ffffff !important;
}
/* Rovnaky problem ako pri .ui-state-highlight nizsie - potomkovia (td/span)
   maju vlastnu priamu farbu z genericheho "prekry vsetko" pravidla, ktora
   prebije bielu zdedenu z hover riadku. */
html.a11y-mode .ui-selectonemenu-item:hover *,
html.a11y-mode .p-dropdown-item:hover *,
html.a11y-mode .ui-multiselect-item:hover *,
html.a11y-mode .p-multiselect-item:hover *,
html.a11y-mode .ui-autocomplete-item:hover *,
html.a11y-mode .p-autocomplete-item:hover *,
html.a11y-mode .ui-selectcheckboxmenu-item:hover * {
    color: #ffffff !important;
    background: transparent !important;
}
html.a11y-mode .ui-selectonemenu-item.ui-state-highlight,
html.a11y-mode .p-dropdown-item.p-highlight {
    background: #000000 !important;
    color: #ffffff !important;
}
/* Predoslé "prekry vsetko" pravidlo (.ui-selectonemenu-panel *) sa aplikuje
   priamo aj na <td>/<span> vnutri tohto zvyrazneneho riadku (nie len
   dedicnostou z <tr>), takze ich vlastna farba textu #000000 prebije bielu
   nastavenu vyssie na <tr> - vysledok je cierny text na cierno pozadi. Vyssia
   specificita nizsie to opravuje priamo na vsetkych potomkoch. */
html.a11y-mode .ui-selectonemenu-item.ui-state-highlight *,
html.a11y-mode .p-dropdown-item.p-highlight * {
    color: #ffffff !important;
    background: transparent !important;
}

/* Odkazy: čierne na bielych plochách (obsah), biele v tmavých lištách (header/footer) */
html.a11y-mode a {
    color: #000000 !important;
    text-decoration: underline;
}
html.a11y-mode .ipc-header a,
html.a11y-mode .mobile-nav a,
html.a11y-mode .landing-header a,
html.a11y-mode .app-sidebar a,
html.a11y-mode .footer a,
html.a11y-mode .header-nav-link,
html.a11y-mode .brand-link,
html.a11y-mode .mobile-nav-link,
html.a11y-mode .header-a11y-btn {
    color: #ffffff !important;
}
html.a11y-mode .sidebar-nav-link.active { background: #ffffff !important; color: #000000 !important; }
html.a11y-mode .post-title,
html.a11y-mode .contact-name,
html.a11y-mode .lib-title,
html.a11y-mode .lib-card-type {
    color: #000000 !important;
}
html.a11y-mode .lib-card-lang-badge {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}
html.a11y-mode .header-nav-link:hover,
html.a11y-mode .header-nav-link.active,
html.a11y-mode a:hover {
    color: #000000 !important;
    background: #ffff00 !important;
}

html.a11y-mode button,
html.a11y-mode .ui-button,
html.a11y-mode .p-button,
html.a11y-mode .header-btn,
html.a11y-mode .header-logout-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
}
html.a11y-mode button:hover,
html.a11y-mode .ui-button:hover,
html.a11y-mode .p-button:hover {
    background: #333333 !important;
    color: #ffffff !important;
}
html.a11y-mode .header-a11y-btn[aria-pressed="true"] {
    background: #ffffff !important;
    color: #000000 !important;
}

html.a11y-mode input,
html.a11y-mode textarea,
html.a11y-mode select,
html.a11y-mode .ui-inputtext,
html.a11y-mode .p-inputtext {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* Farebné udalosti v kalendári (inline backgroundColor/borderColor
   z DefaultScheduleEvent) musia v a11y móde zostať čierno-biele */
html.a11y-mode .fc-event {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

html.a11y-mode .nav-unread-badge,
html.a11y-mode .unread-badge,
html.a11y-mode .pin-badge,
html.a11y-mode .post-type-badge {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

/* Zvýraznené, hrubé zameranie – WCAG 2.4.7 (Focus Visible) */
html.a11y-mode *:focus,
html.a11y-mode *:focus-visible {
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
}
html.a11y-mode .ipc-header *:focus,
html.a11y-mode .ipc-header *:focus-visible,
html.a11y-mode .mobile-nav *:focus,
html.a11y-mode .mobile-nav *:focus-visible,
html.a11y-mode .app-sidebar *:focus,
html.a11y-mode .app-sidebar *:focus-visible,
html.a11y-mode .footer *:focus,
html.a11y-mode .footer *:focus-visible {
    outline-color: #ffffff !important;
}
/* .sidebar-nav-link.active ma (na rozdiel od ostatnych poloziek v tmavom
   .app-sidebar) natvrdo biele pozadie (riadok vyssie), takze na nom by biely
   outline z pravidla vyssie splynul s pozadim - potrebuje opacnu (ciernu)
   farbu ramceka. */
html.a11y-mode .sidebar-nav-link.active:focus,
html.a11y-mode .sidebar-nav-link.active:focus-visible {
    outline-color: #000000 !important;
}

/* ── Domovská stránka — hero, karty a pravý sidebar pribudli až v tmavom
   redesigne a nemali žiadny a11y override, takže na vynútenom bielom
   pozadí (.ui-panel) kolidovali s pôvodným svetlým/bielym textom
   (biely text na bielom = neviditeľný). */
html.a11y-mode .home-hero {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
}
html.a11y-mode .home-hero-title,
html.a11y-mode .home-hero-subtitle,
html.a11y-mode .gradient-heading,
html.a11y-mode .landing-hero-title,
html.a11y-mode .landing-cta-title {
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
    color: #000000 !important;
}
html.a11y-mode .home-hero-art,
html.a11y-mode .sidebar-quote-art {
    display: none !important;
}
html.a11y-mode .latest-posts-title::before {
    background: #000000 !important;
}
html.a11y-mode .latest-posts-viewall {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}
html.a11y-mode .dark-panel .ui-panel-content,
html.a11y-mode .upcoming-item,
html.a11y-mode .upcoming-item span,
html.a11y-mode .upcoming-item strong,
html.a11y-mode .sidebar-post-link,
html.a11y-mode .mini-cal-cell,
html.a11y-mode .mini-cal-weekdays span,
html.a11y-mode .mini-cal-title,
html.a11y-mode .mini-cal-expand-link {
    color: #000000 !important;
}
html.a11y-mode .mini-cal-nav-btn {
    color: #000000 !important;
    border: 1px solid #000000 !important;
}
html.a11y-mode .sidebar-quote {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}
html.a11y-mode .mini-cal-cell.is-today { border: 2px solid #000000 !important; }
html.a11y-mode .mini-cal-cell.has-event::after { background: #000000 !important; }

/* ── Landing / Login / Register / Verify — verejné stránky ──── */
html.a11y-mode .landing-hero,
html.a11y-mode .landing-section,
html.a11y-mode .landing-section-dark,
html.a11y-mode .landing-cta-section {
    background: #ffffff !important;
    color: #000000 !important;
}
html.a11y-mode .legal-content {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}
html.a11y-mode .legal-content h1,
html.a11y-mode .legal-content h2,
html.a11y-mode .legal-updated,
html.a11y-mode .legal-disclaimer,
html.a11y-mode .legal-table th,
html.a11y-mode .legal-table td {
    color: #000000 !important;
}
html.a11y-mode .legal-content a,
html.a11y-mode .legal-back-link {
    color: #000000 !important;
    text-decoration: underline !important;
}
html.a11y-mode .landing-hero-title,
html.a11y-mode .landing-hero-tagline,
html.a11y-mode .landing-hero-desc,
html.a11y-mode .landing-hero-badge,
html.a11y-mode .landing-section-title,
html.a11y-mode .landing-step h3,
html.a11y-mode .landing-step p,
html.a11y-mode .landing-cta-title,
html.a11y-mode .landing-cta-desc,
html.a11y-mode .landing-card h3,
html.a11y-mode .landing-card p {
    color: #000000 !important;
}
html.a11y-mode .landing-btn-primary,
html.a11y-mode .landing-btn-outline,
html.a11y-mode .landing-btn-ghost,
html.a11y-mode .landing-card-icon,
html.a11y-mode .landing-step-num {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
}
/* Dekoratívna SVG grafika (uzly/spojnice) sa v a11y móde neprefarbuje, len sa skryje */
html.a11y-mode .landing-hero-visual { display: none !important; }
/* Login/Register tlačidlá v landing-header (čierne na čiernom) potrebujú biely okraj */
html.a11y-mode .landing-header .landing-btn-outline,
html.a11y-mode .landing-header .landing-btn-primary {
    border-color: #ffffff !important;
}

/* Prihlásenie / Registrácia / Overenie — plávajúce tlačidlo v rohu */
.a11y-toggle-corner {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 1001;
}
html.a11y-mode .a11y-toggle-corner .header-a11y-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}
html.a11y-mode .a11y-toggle-corner .header-a11y-btn[aria-pressed="true"] {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}