/* Servisní portál - styles */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Rezervuje místo pro vertikální scrollbar i když zrovna není vidět.
   Bez tohoto by stránka při zobrazení/skrytí scrollbaru "skákala" o ~15 px doleva
   (typický problém v Chrome). Podporováno ve všech moderních prohlížečích
   (Chrome 94+, Firefox 97+, Safari 16+). */
html { scrollbar-gutter: stable; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f4f5f7;
    color: #1f2937;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: #0891b2; }

/* ---------- Login ---------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #000814 0%, #001428 50%, #000814 100%);
    padding: 1rem;
    /* Místo pro sticky footer */
    padding-bottom: 70px;
}

/* === Splash screen ===
   Ukáže se při prvním načtení login stránky v session.
   Heart+my přijíždí zleva, "aite" padá shora, na ~1.5s se zastaví,
   pak fade-out a ukáže se login form. */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #000814 0%, #001428 50%, #000814 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 500ms ease-out;
    opacity: 1;
    overflow: hidden;
}
.splash-screen.is-fading {
    opacity: 0;
    pointer-events: none;
}
.splash-logo-wrap {
    position: relative;
    width: min(85vw, 720px);     /* responzivní šířka, max 720 px */
    aspect-ratio: 820 / 326;     /* zachovej poměr loga */
}
.splash-half {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Heart half: přijíždí zleva (z -120vw, 1.5x rychleji) */
.splash-half-heart {
    animation: splash-slide-from-left 0.95s cubic-bezier(.16, 1, .3, 1) 0.15s both;
}
@keyframes splash-slide-from-left {
    0%   { transform: translateX(-130vw); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}
/* Aite half: padá shora (z -100vh) - drobné zpoždění aby přiletělo po heart */
.splash-half-aite {
    animation: splash-drop-from-top 0.85s cubic-bezier(.16, 1, .3, 1) 0.45s both;
}
@keyframes splash-drop-from-top {
    0%   { transform: translateY(-110vh); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
/* Respekt pro uživatele s prefers-reduced-motion - žádná animace, jen rychlý fade */
@media (prefers-reduced-motion: reduce) {
    .splash-half-heart, .splash-half-aite {
        animation: splash-fade-in 400ms ease-out 100ms both;
        transform: none;
    }
    @keyframes splash-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* Wrapper, který drží logo + login-box vertikálně */
.login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 380px;
}
/* Logo myaite NAD login boxem - na tmavém gradientu pozadí splývá. Transparentní PNG, tight crop. */
.login-logo-myaite {
    width: auto;
    height: 80px;       /* Tight logo bez volného místa - 80 px výška sedí estetic */
    max-width: 90%;
    display: block;
}
.login-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    width: 100%;
    overflow: hidden;
    text-align: center;
}
/* Zachované pravidlo pro starší stránky (pokud nějaké zůstaly s login-logo-bar) */
.login-logo-bar {
    background: #000000;
    padding: 1.5rem 1rem;
    border-bottom: 2px solid #0891b2;
}
.login-logo-bar img {
    max-width: 240px;
    width: 75%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.login-logo-bar .logo-myaite-only {
    max-width: 280px;
    width: 80%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Dual logo bar - aitelogic + myaite vedle sebe na login.php */
.login-logo-bar-dual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.25rem 1rem;
}
.login-logo-bar-dual img {
    /* Override the single-logo defaults */
    max-width: none;
    width: auto;
    margin: 0;
}
.login-logo-bar-dual .logo-aitelogic {
    height: 56px;
    width: auto;
}
.login-logo-bar-dual .logo-myaite {
    height: 64px;
    width: auto;
    border-radius: 4px;
}
.login-logo-bar-dual .logo-divider {
    color: #475569;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    user-select: none;
}
@media (max-width: 480px) {
    .login-logo-bar-dual { gap: 0.75rem; padding: 1rem 0.5rem; }
    .login-logo-bar-dual .logo-aitelogic { height: 42px; }
    .login-logo-bar-dual .logo-myaite { height: 50px; }
}
.login-body {
    padding: 2rem 2.5rem 2rem;
}
.login-box h1 { color: #0891b2; font-size: 1.25rem; margin-bottom: 0.25rem; }
.login-box .subtitle { color: #6b7280; font-size: 0.875rem; margin-bottom: 1.5rem; }
.login-box label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: #4b5563;
    text-align: left;
}
.login-box input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
}
.login-box input:focus { outline: 2px solid #0891b2; outline-offset: -1px; }
.login-box button {
    width: 100%;
    padding: 0.75rem;
    background: #0891b2;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
}
.login-box button:hover { background: #0e7490; }
.login-box .error {
    background: #fef2f2;
    color: #b91c1c;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border: 1px solid #fecaca;
}

/* ---------- Topbar ---------- */
.topbar {
    background: #000814;
    background-image: linear-gradient(90deg, #000814 0%, #001020 100%);
    border-bottom: 2px solid #0891b2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 64px;
}
.topbar .brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.topbar .brand img {
    height: 32px;
    width: auto;
    display: block;
}
/* Brand variant pro zákaznický portál (myaite logo - srdce + aite).
   Logo je teď tight (bez volného místa kolem) - sedne přímo do standardního topbaru. */
.topbar .brand-myaite img {
    height: 30px;
    border-radius: 0;
}
/* Topbar v zákaznické části má stejnou výšku jako interní (64px) - logo je tight */
.topbar:has(.brand-myaite),
.topbar.topbar-myaite {
    min-height: 64px;
}
.topbar:has(.brand-myaite) .topbar-inner,
.topbar.topbar-myaite .topbar-inner {
    height: 64px;
}
.topbar .brand-title {
    font-size: 0.95rem;
    color: #cbd5e1;
    font-weight: 500;
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: 0.75rem;
    letter-spacing: 0.02em;
}
.topbar nav { flex: 1; display: flex; gap: 0.25rem; }
.topbar nav a {
    padding: 0.5rem 1rem;
    color: #cbd5e1;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.topbar nav a:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.topbar nav a.active {
    background: rgba(8, 145, 178, 0.25);
    color: #67e8f9;
    font-weight: 600;
}
.topbar .user {
    font-size: 0.875rem;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.topbar .user a {
    color: #fca5a5;
    text-decoration: none;
    font-size: 0.875rem;
}
.topbar .user a:hover {
    color: #fecaca;
    text-decoration: underline;
}
/* ---------- Layout ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 0.5rem 1.5rem 1.5rem; }

/* Daily fund widget - sjednocený s page-header (zobrazuje se vpravo v history.php) */
.daily-fund-widget {
    flex: 0 0 320px;
    background: #fef2f2;
    padding: 0.75rem 1rem 0.875rem;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 4px solid #dc2626;
    /* Pro absolutně pozicovanou mood fotku v rohu */
    position: relative;
}
.daily-fund-widget.is-complete {
    border-left-color: #10b981;
    background: #f0fdf4;
}

/* Mood fotka šéfa podle plnění - pravý sloupec widgetu, přes celou výšku.
   Widget se o šířku fotky horizontálně rozšíří, fotka je vystředěná svisle. */
.fund-mood-photo {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    /* Výška se napasuje na widget přes "výpočet" - přes top/bottom by to bylo
       jednodušší, ale chceme čtvercovou fotku na celou výšku.
       Místo toho dáme height: calc(100% - 2*offset) a width = height (čtverec). */
    height: calc(100% - 16px);
    aspect-ratio: 1 / 1;
    width: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    margin-right: 8px;  /* drobná mezera od pravého okraje widgetu */
}
.fund-mood-photo:hover {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
/* Když je fotka přítomná, zvětšíme widget o její šířku a dáme padding-right
   aby se obsah neprolínal s fotkou. Šířka fotky = výška widgetu (cca 110px),
   plus offsety = ~125px padding-right. */
.daily-fund-widget:has(.fund-mood-photo) {
    flex-basis: 440px;  /* místo 320px - rozšíření o šířku fotky */
    padding-right: 130px;
}
.daily-fund-widget .fund-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.daily-fund-widget .fund-title {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.daily-fund-widget .fund-value {
    font-variant-numeric: tabular-nums;
    color: #111827;
}
.daily-fund-widget .fund-value strong {
    font-size: 1.05rem;
    color: #dc2626;
}
.daily-fund-widget.is-complete .fund-value strong { color: #059669; }
.daily-fund-widget .fund-target {
    color: #9ca3af;
    font-size: 0.85rem;
}
.daily-fund-widget .fund-bar {
    height: 8px;
    background: #fee2e2;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.daily-fund-widget.is-complete .fund-bar {
    background: #d1fae5;
}
.daily-fund-widget .fund-fill {
    height: 100%;
    background: linear-gradient(90deg, #f87171, #dc2626);
    border-radius: 4px;
    transition: width 0.4s ease-out;
}
.daily-fund-widget.is-complete .fund-fill {
    background: linear-gradient(90deg, #34d399, #10b981);
}
.daily-fund-widget .fund-msg {
    font-size: 0.8rem;
    color: #991b1b;
    line-height: 1.4;
}
.daily-fund-widget.is-complete .fund-msg {
    color: #047857;
}

/* Den volna - svátek nebo víkend (klidná teal varianta, žádný stress) */
.daily-fund-widget.is-day-off {
    background: #f0fdfa;
    border-left-color: #0e7490;
}
.daily-fund-widget.is-day-off .fund-value strong { color: #0e7490; }
.daily-fund-widget.is-day-off .fund-msg { color: #134e4a; }
.daily-fund-widget.is-day-off .fund-target { color: #6b7280; }

/* Mobile - widget plné šířky pod nadpisem */
@media (max-width: 720px) {
    .page-header-with-widget {
        flex-direction: column;
    }
    .daily-fund-widget {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Subnav - záložky uvnitř stránky (např. Správa) */
.subnav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0;
}
.subnav a {
    padding: 0.625rem 1.25rem;
    color: #6b7280;
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.subnav a:hover {
    color: #0891b2;
    background: #f9fafb;
}
.subnav a.active {
    color: #0891b2;
    background: white;
    border-bottom: 2px solid #0891b2;
    font-weight: 600;
}

/* Druhá úroveň navigace - subtaby pod hlavní lištou */
.subnav-secondary {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: -0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.85rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ecfeff 100%);
    border: 1px solid #e0f2fe;
    border-radius: 999px;
    align-items: center;
    width: fit-content;
}
.subnav-secondary a {
    padding: 0.4rem 1rem;
    color: #64748b;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s;
}
.subnav-secondary a:hover {
    color: #0e7490;
    background: white;
}
.subnav-secondary a.active {
    color: white;
    background: #0e7490;
    box-shadow: 0 1px 3px rgba(14, 116, 144, 0.25);
    font-weight: 600;
}

/* Měsíční navigace na hlavní stránce */
.month-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.month-nav h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: capitalize;
    min-width: 200px;
}
.month-nav .month-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.15s;
}
.month-nav .month-btn:hover {
    background: #ecfeff;
    border-color: #0891b2;
    color: #0891b2;
}
.month-nav .month-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.month-nav .month-btn-current {
    padding: 0 0.875rem;
    height: 36px;
    display: inline-flex;
    align-items: center;
    background: #0891b2;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 0.5rem;
}
.month-nav .month-btn-current:hover { background: #0e7490; }
.month-picker input {
    height: 36px;
    padding: 0 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
}
.historical-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Customer/Server cards ---------- */
.customer-block {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.customer-block h3 {
    color: #0891b2;
    font-size: 1.125rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Podsekce uvnitř customer-block: SERVERY / AKTIVNÍ PRVKY na servers.php.
 * Jednoduchý nadpis s čárkou - vizuálně oddělí skupiny dlaždic. */
.infra-subheading {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #6b7280;
    text-transform: uppercase;
    margin: 0 0 0.65rem 0;
    padding-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.infra-subheading::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: #cbd5e1;
    flex: 0 0 auto;
}
.infra-subheading::after {
    content: "";
    display: inline-block;
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, #e5e7eb, transparent);
}
/* Druhá podsekce (a další) v jednom customer-blocku potřebuje větší mezeru
 * od první skupiny dlaždic */
.server-list + .infra-subheading {
    margin-top: 1.25rem;
}
.customer-code {
    display: inline-block;
    background: #0891b2;
    color: white;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: 0.4rem;
    vertical-align: 1px;
}
.server-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.server-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    background: #fafafa;
    display: flex;
    flex-direction: column;
}
.server-header {
    margin-bottom: 0.75rem;
    min-height: 2.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.server-header-main {
    flex: 1;
    min-width: 0;
}
.server-header strong { font-size: 1rem; color: #111827; }
.server-desc {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.2rem;
}
/* Badge s rolí serveru (Hyper-V, Domain Controller, …) */
.server-role-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    background: #e0f2fe;
    color: #075985;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: 1px;
    white-space: nowrap;
}
/* OS verze + EOL pilulka vedle názvu serveru v dlaždici údržby (4.19) */
.server-os-pill {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: 1px;
    white-space: nowrap;
}
.server-os-pill-ok   { background: #eef2f7; color: #475569; }
.server-os-pill-soon { background: #fef3c7; color: #92400e; }
.server-os-pill-past { background: #fee2e2; color: #b91c1c; }
.server-os-pill-none { background: #eef2f7; color: #64748b; }
/* Ozubené kolečko – rychlá editace serveru z dlaždice údržby (4.20) */
.server-edit-gear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #94a3b8;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.server-edit-gear:hover { background: #e2e8f0; color: #0891b2; }
.server-edit-gear svg { width: 16px; height: 16px; display: block; }
.server-responsible {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    cursor: help;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    padding: 0.15rem 0.6rem 0.15rem 0.15rem;
    max-width: 180px;
}
.server-responsible-name {
    font-size: 0.75rem;
    color: #4b5563;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.server-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    flex: 1;
    align-items: stretch;
}
.action-form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.action-btn {
    padding: 0.625rem 0.5rem;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    text-align: left;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-height: 72px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.action-btn:hover {
    border-color: #0891b2;
    background: #f8fafc;
}
.action-btn.done {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}
.action-btn.done:hover { background: #dcfce7; border-color: #4ade80; }

/* Carry-over: zelené tlačítko, ale s barevným odlišením, že úkon byl proveden v minulém měsíci.
   (Před 2. úterým aktuálního měsíce - viz Patch Tuesday logika v _server_tile.php
   + speciální úkoly zkopírované z minulého měsíce - viz servers.php carry-over logika.)
   Vyšší specificita (action-btn.is-carry-over) než .action-btn.special-configured kvůli
   přepsání oranžového pozadí. */
.action-btn.done.is-carry-over,
.action-btn.special-configured.is-carry-over,
.action-btn.is-carry-over {
    background: #ecfeff !important;          /* light cyan místo light green/orange */
    border: 2px dashed #67e8f9 !important;
    color: #155e75;
}
.action-btn.done.is-carry-over:hover,
.action-btn.special-configured.is-carry-over:hover,
.action-btn.is-carry-over:hover {
    background: #cffafe !important;
    border-color: #22d3ee !important;
}
.action-btn.done.is-carry-over .btn-meta,
.action-btn.special-configured.is-carry-over .btn-meta,
.action-btn.is-carry-over .btn-meta { color: #0e7490; }
.carry-over-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 1px 7px;
    background: #cffafe;
    color: #0e7490;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
/* Oranžové zvýraznění "potřebuje pozornost" - tlačítko ještě nebylo provedeno */
.action-btn.needs-action {
    background: #fffbeb;
    border-color: #f59e0b;
    border-width: 2px;
    color: #78350f;
}
.action-btn.needs-action:hover { background: #fef3c7; border-color: #d97706; }
/* 4.22: Linux dlaždice – zelená (done) zůstává klikatelná, lze přidat další úkon v měsíci */
.action-btn-linux { cursor: pointer; }
.action-btn-linux.done:hover { background: #dcfce7; border-color: #4ade80; }
.btn-linux-again {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #15803d;
    opacity: 0.85;
}
.btn-label { font-weight: 600; font-size: 0.85rem; }
.btn-meta { font-size: 0.7rem; color: #6b7280; }
.action-btn.done .btn-meta { color: #16a34a; }
.action-btn.needs-action .btn-meta { color: #92400e; }
.action-btn.special-configured {
    border: 2px solid #f59e0b;
    background: #fffbeb;
}
.action-btn.special-configured:hover { background: #fef3c7; }
.action-btn.special-configured.done {
    background: #f0fdf4;
    border: 2px solid #4ade80;
}
.btn-note {
    display: block;
    font-size: 0.7rem;
    color: #4b5563;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 0.1rem;
}

/* Banner s aktuálním speciálním úkolem */
.special-banner {
    background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: #78350f;
}
.special-banner strong { display: block; font-size: 0.95rem; }
.special-banner span { display: block; margin-top: 0.25rem; color: #92400e; }
.special-banner .special-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.special-banner .special-list li {
    padding: 0.25rem 0;
    color: #92400e;
    font-size: 0.875rem;
}
.special-banner .special-list .dur {
    color: #78350f;
    opacity: 0.7;
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* Scheduled label v history.php */
.scheduled-label {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #92400e;
    font-style: italic;
}
/* Badge projektu pod popisem úkonu (jen pro ruční úkony s projektem) */
.project-badge {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.1rem 0.5rem;
    background: #ede9fe;
    color: #5b21b6;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Badge fixního paušálu - emerald zelený, ať je odlišitelný od běžného projektu */
.badge-fixed-fee {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* Zobrazení kombinovaného kódu projektu (KÓD_ZÁKAZNÍKA-KÓD_PROJEKTU) v adminu */
.project-code-display {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0891b2;
    background: #ecfeff;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    display: inline-block;
}

/* Sloupec KÓD ve výkazu - když je úkon přiřazený k projektu, zobrazí
   kombinovaný kód KÓD_ZÁKAZNÍKA-KÓD_PROJEKTU s vizuálním rozlišením
   fixní paušál vs. běžný projekt. */
.kod-cell {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}
.kod-cell.kod-fixed {
    background: #d1fae5;
    color: #065f46;
}
.kod-cell.kod-project {
    background: #ede9fe;
    color: #5b21b6;
}

/* Checkbox v inline formu (zarovnaný s ostatními inputy) */
.inline-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.4rem;
    color: #4b5563;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.inline-checkbox input[type=checkbox] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.inline-checkbox-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
}
.inline-checkbox-compact input[type=checkbox] {
    margin: 0;
    cursor: pointer;
}
/* === Kompaktní tabulka výkazu (tbl-events) === */
/* Vyladěné šířky sloupců + 1-řádkový popis s hezkým popupem + barevný proužek typu úkonu vlevo. */
.tbl-events { table-layout: fixed; overflow: visible; }
/* Popup v cell-description vyčuhává nad tabulku - musí se viditelně rozprostřít */
.tbl-events tbody { position: relative; }

/* Řádky editovatelné dvojklikem - jemný hover indikátor */
.tbl-events tbody tr.row-editable { cursor: pointer; }
.tbl-events tbody tr.row-editable:hover { background-color: #f0fdfa; }
.tbl-events tbody tr.row-editable:hover .cell-description { background-color: transparent; }
.tbl-events .col-date     { width: 8%; }
.tbl-events .col-time     { width: 5%; }
.tbl-events .col-customer { width: 14%; }
.tbl-events .col-ticket-link { width: 9%; }
.tbl-events .col-description { width: auto; }   /* zbytek prostoru */
.tbl-events .col-duration { width: 6%; text-align: right; }
.tbl-events .col-tech     { width: 11%; }
.tbl-events .actions-col  { width: 7%; }

.tbl-events.view-day .col-customer    { width: 18%; }
.tbl-events.view-day .col-tech        { width: 13%; }

/* Sloupec zákazníka: "Název firmy (KÓD)" */
.tbl-events .col-customer .cust-line {
    display: block;
    line-height: 1.25;
}
.tbl-events .col-customer .cust-name {
    color: #111827;
    font-size: 0.85rem;
    word-break: break-word;
}
.tbl-events .col-customer .kod-cell {
    margin-left: 0.25rem;
    font-size: 0.78rem;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: #4b5563;
    font-weight: 600;
    white-space: nowrap;
}
.tbl-events .col-customer .kod-cell.kod-fixed   { color: #047857; }
.tbl-events .col-customer .kod-cell.kod-project { color: #0e7490; }

/* Buňka popisu: 1-řádkový s "..." + custom popup při hoveru */
.tbl-events .cell-description {
    max-width: none;
    font-size: 0.85rem;
    color: #1f2937;
    line-height: 1.35;
    position: relative;
    /* Levý barevný proužek typu úkonu */
    padding-left: 0.6rem !important;
    padding-right: 1.6rem !important; /* místo pro note-icon */
    border-left: 4px solid transparent;
    cursor: default;
}
.tbl-events .cell-description .desc-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tbl-events .cell-description .note-icon {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: #6b7280;
}
/* Barevné proužky vlevo podle typu úkonu (mapování stejné jako u badge) */
.tbl-events tr.type-updated              .cell-description { border-left-color: #2563eb; }   /* modrá */
.tbl-events tr.type-checked_after_update .cell-description { border-left-color: #16a34a; }   /* zelená */
.tbl-events tr.type-extra_check          .cell-description { border-left-color: #d97706; }   /* oranžová */
.tbl-events tr.type-special_event        .cell-description { border-left-color: #db2777; }   /* růžová */
.tbl-events tr.type-manual               .cell-description { border-left-color: #7c3aed; }   /* fialová */

/* Custom popup nad popisem - hezčí než nativní tooltip
   (3.62: position: fixed + JS positioning – vytrhne popup ze stacking contextů
   tabulky/main/topbaru, takže se neschová pod žádnou sticky hlavičkou) */
.tbl-events .event-tooltip {
    position: fixed;
    /* top/left nastavuje JS na základě boundingClientRect buňky */
    top: 0;
    left: 0;
    z-index: 9999;
    min-width: 280px;
    max-width: 460px;
    padding: 0.75rem 0.875rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.06);
    font-size: 0.85rem;
    color: #1f2937;
    line-height: 1.4;
    white-space: normal;
    /* Skrytý ve výchozím stavu, animace na fadein */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    pointer-events: none;
}
/* Šipka popupu */
.tbl-events .event-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 1rem;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
    /* shadow border */
    filter: drop-shadow(0 1px 0 #e5e7eb);
}
/* Varianta popup pod buňkou - pokud nad buňkou není místo (první řádky tabulky).
   3.62: top/left řídí JS, tady jen šipka. */
.tbl-events .event-tooltip.event-tooltip-below::after {
    top: auto;
    bottom: 100%;
    border-top: none;
    border-bottom: 6px solid white;
    filter: drop-shadow(0 -1px 0 #e5e7eb);
}
.tbl-events .cell-description:hover .event-tooltip,
.tbl-events .cell-description:focus-within .event-tooltip {
    opacity: 1;
    visibility: visible;
}
.tbl-events .event-tooltip-header {
    margin-bottom: 0.5rem;
}
.tbl-events .event-tooltip-header .badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}
.tbl-events .event-tooltip-desc {
    margin-bottom: 0.4rem;
    color: #1f2937;
    word-break: break-word;
}
.tbl-events .event-tooltip-note {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e5e7eb;
    color: #4b5563;
    font-size: 0.8rem;
    word-break: break-word;
}
.tbl-events .event-tooltip-note strong {
    color: #1f2937;
    font-weight: 600;
}

/* Buňka description ve starších tabulkách (mimo tbl-events) si nechává původní styl */
.data-table .cell-description {
    max-width: 320px;
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.3;
}
.data-table .cell-duration {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #374151;
}
/* Souhrnný řádek na konci tabulky výkazu */
.data-table tfoot .total-row {
    background: #ecfeff;
    border-top: 2px solid #0891b2;
}
.data-table tfoot .total-row td {
    padding: 0.75rem 0.875rem;
    border-bottom: none;
    font-size: 0.9rem;
}

/* === Floating box „celkem hodin" ve výkazu práce ===
   Vždy viditelný v pravém dolním rohu, i při scrollování dlouhého výkazu.
   Pozice nad sticky footerem (~44px výšky) - bottom 4rem dává cca 20px vzduchu nad footerem. */
.floating-total {
    position: fixed;
    bottom: 4rem;
    right: 1.5rem;
    background: #0e7490;
    color: white;
    padding: 0.7rem 1.1rem;
    border-radius: 100px;
    box-shadow: 0 6px 16px rgba(8, 145, 178, 0.35), 0 2px 4px rgba(0,0,0,0.08);
    font-size: 0.92rem;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s, transform 0.2s;
}
.floating-total strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.floating-total-icon {
    font-size: 1rem;
    opacity: 0.9;
}
.floating-total-content {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.floating-total-sep {
    opacity: 0.6;
    margin: 0 0.1rem;
}
/* Skryje box při otevřeném modal dialogu - neruší interakci */
.floating-total.hidden-by-modal {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}
/* Delete tlačítko v řádku úkonu */
.btn-delete-event {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    background: white !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}
.btn-delete-event:hover {
    background: #fef2f2 !important;
    border-color: #f87171 !important;
}

/* ---------- Filters ---------- */
.filters {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.filters label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #4b5563;
    font-weight: 500;
}
.filters input, .filters select {
    padding: 0.5rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    min-width: 140px;
}
.filters input:focus, .filters select:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
}
.filters button {
    padding: 0.5rem 1.25rem;
    background: #0891b2;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.filters button:hover { background: #0e7490; }
.btn-link {
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    color: #374151;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
}
.btn-link:hover { background: #e5e7eb; }

/* === Lišta výběru období (vždy vidět) === */
.period-bar {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* View tabs - Den / Týden / Měsíc */
.view-tabs {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.view-tabs a {
    padding: 0.4rem 0.9rem;
    color: #6b7280;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
}
.view-tabs a:hover { color: #111827; background: rgba(255,255,255,0.6); }
.view-tabs a.active {
    background: white;
    color: #0891b2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-weight: 600;
}

/* Šipky a picker */
.period-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.period-arrow {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #4b5563;
    text-decoration: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.15s;
}
.period-arrow:hover { background: #f9fafb; border-color: #9ca3af; }
.period-picker-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.25rem;
}
.period-picker {
    padding: 0.4rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    background: white;
}
.period-picker:focus { outline: 2px solid #0891b2; outline-offset: -1px; }
.period-label-cz {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
    min-width: 200px;
}
.btn-today {
    padding: 0.4rem 0.7rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #4b5563;
    text-decoration: none;
    font-size: 0.8rem;
    cursor: pointer;
}
.btn-today:hover { background: #f9fafb; border-color: #9ca3af; }

/* Filtr toggle ikonka */
.filter-toggle {
    margin-left: auto;
    padding: 0.45rem 0.85rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}
.filter-toggle:hover { background: #f9fafb; border-color: #9ca3af; }
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0891b2;
    color: white;
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
}
.period-export {
    padding: 0.45rem 0.85rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
}
.period-export:hover { background: #f9fafb; border-color: #9ca3af; }

/* === Filter panel (skrytý, rozbalovací) === */
.filter-panel {
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border-top: 3px solid #0891b2;
}
.filter-panel .filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.875rem;
    margin-bottom: 1rem;
}
.filter-panel .filter-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
}
.filter-panel .filter-cell > span {
    font-weight: 500;
    color: #4b5563;
}
.filter-panel .filter-cell input[type="text"],
.filter-panel .filter-cell select {
    padding: 0.5rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    background: white;
    height: 38px;
    box-sizing: border-box;
}
.filter-panel .filter-cell input:focus,
.filter-panel .filter-cell select:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
    border-color: #0891b2;
}
.filter-panel .filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
}
.filter-panel .btn-save {
    background: #0891b2;
    color: white;
    border: none;
    padding: 0.5rem 1.1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.875rem;
}
.filter-panel .btn-save:hover { background: #0e7490; }
.filter-panel .btn-cancel {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.875rem;
}
.filter-panel .btn-cancel:hover { background: #f9fafb; }

.result-count { margin-bottom: 0.75rem; color: #6b7280; font-size: 0.875rem; }

/* Filtr nad data-table (vyhledávač zákazníků/serverů) */
.table-filter,
.server-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0.5rem;
    position: relative;
}

/* Type filter pills (Vše / Servery / Aktivní prvky) na servers.php */
.infra-type-filter {
    display: flex;
    gap: 0.4rem;
    margin: 1rem 0 0.25rem;
    flex-wrap: wrap;
}
.table-filter input[type="search"],
.server-filter input[type="search"] {
    flex: 1;
    max-width: 480px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
}
.table-filter input[type="search"]:focus,
.server-filter input[type="search"]:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
    border-color: #0891b2;
}
/* Lupa a křížek uvnitř search inputu na hlavní stránce */
.server-filter {
    position: relative;
}
.server-filter-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.95rem;
    opacity: 0.6;
    z-index: 1;
}
.server-filter input[type="search"] {
    padding-left: 2.2rem;
    padding-right: 2.4rem;
}
.server-filter-clear {
    position: absolute;
    left: calc(min(480px, 100%) - 2.5rem);
    top: 50%;
    transform: translateY(-50%);
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.server-filter-clear:hover {
    background: #e5e7eb;
    color: #374151;
}
.table-filter .filter-count,
.server-filter .filter-count {
    color: #6b7280;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
/* === Helpdesk požadavky === */
.tbl-helpdesk .col-ticket-id { width: 8%; }
.tbl-helpdesk .col-priority  { width: 8%; }
.tbl-helpdesk .col-title     { width: 32%; }
.tbl-helpdesk .col-reporter  { width: 13%; }
.tbl-helpdesk .col-assignee  { width: 13%; }
.tbl-helpdesk .col-created   { width: 9%; }
.tbl-helpdesk .col-status    { width: 12%; }
.tbl-helpdesk .actions-col   { width: 5%; }

/* === Admin: rozšířený řádek edit zákazníka s flagy (workflow + viditelnost) === */
.edit-row-flags td {
    background: #f9fafb;
    border-top: none !important;
    padding: 0.5rem 1rem 1rem;
}
.flags-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.4fr);
    gap: 1rem;
}
@media (max-width: 800px) {
    .flags-grid { grid-template-columns: 1fr; }
}
.flags-group {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.7rem 0.9rem 0.5rem;
    background: white;
}
.flags-group legend {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0e7490;
    padding: 0 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.flag-toggle {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.4rem 0;
    cursor: pointer;
    font-size: 0.88rem;
}
.flag-toggle input[type=checkbox] {
    margin-top: 0.2rem;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    accent-color: #0891b2;
}
.flag-toggle span {
    line-height: 1.35;
}
.flag-toggle small {
    display: block;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 400;
    margin-top: 0.15rem;
}

/* === Ticket ID badge - moderní zaoblený badge s barvou podle stavu ===
   Globální (.ticket-id), používaná všude (helpdesk tabulka, detail ticketu, dashboard, výkaz).
   Defaultní barva = neutrální tyrkysová. Pomocí .status-X získá barvu podle stavu ticketu. */
.ticket-id {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;            /* plně zaoblený obdélník (pill shape) */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
    /* Defaultní barva (neutrální tyrkysová) - používá se pokud není .status-X */
    background: #ecfeff;
    color: #0e7490;
    border-color: #a5f3fc;
}
/* Status varianty - jednotné s .badge-status-* (status workflow ticketů): */
.ticket-id.status-submitted   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ticket-id.status-approved    { background: #ddd6fe; color: #5b21b6; border-color: #c4b5fd; }
.ticket-id.status-rejected    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ticket-id.status-open        { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ticket-id.status-in_progress { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.ticket-id.status-resolved    { background: #dcfce7; color: #166534; border-color: #86efac; }
.ticket-id.status-closed      { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }

/* Větší varianta pro hlavičku detailu ticketu (.ticket-id-large) */
.ticket-id.ticket-id-large {
    padding: 0.4rem 0.95rem;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* tbl-helpdesk konkrétně používala vlastní .ticket-id - ponecháme aliasy bez monospace fontu */
.tbl-helpdesk .ticket-id {
    /* Inheritence z globální .ticket-id - žádné override potřeba */
}

/* === Sticky app footer s aitelogic logem === */
body { padding-bottom: 50px; }  /* Místo pro fixed footer */
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0f172a;       /* slate-900 - tmavá */
    border-top: 1px solid #1e293b;
    padding: 0.55rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.78rem;
    color: #cbd5e1;
    z-index: 100;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
}
.app-footer .footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    opacity: 0.95;
    transition: opacity 0.15s ease;
}
.app-footer .footer-logo:hover { opacity: 1; }
.app-footer .footer-logo img {
    height: 22px;
    width: auto;
    display: block;
}
.app-footer .version {
    color: #94a3b8;            /* slate-400 - jemnější */
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
.app-footer .changelog-link {
    color: #38bdf8;            /* sky-400 - světlejší tyrkysová pro tmavé pozadí */
    text-decoration: none;
}
.app-footer .changelog-link:hover { text-decoration: underline; color: #7dd3fc; }
.app-footer .copyright {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.72rem;
}

/* Tmavá varianta pro login a podobné stránky s tmavým pozadím (login má tmavě modrý gradient) */
.app-footer.app-footer-on-dark {
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}
.app-footer.app-footer-on-dark .footer-logo img {
    /* Logo aitelogic je tmavý/bílý mix - na tmavém pozadí ho zvýšíme jasem */
    filter: brightness(1.1);
}

/* === Komentáře v ticketu === */
.ticket-comments h4 {
    margin-bottom: 1rem;
}
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.comment-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.comment-avatar {
    flex: 0 0 auto;
}
.comment-bubble {
    flex: 1;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    min-width: 0;
}
/* Komentáře od zákazníka mají jiné pozadí */
.comment-by-customer .comment-bubble {
    background: #fef3c7;
    border-color: #fde68a;
}
.comment-by-tech .comment-bubble {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    color: #6b7280;
}
.comment-meta strong {
    color: #111827;
    font-size: 0.85rem;
}
.role-badge.role-mini {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
}
.comment-date {
    color: #9ca3af;
    font-size: 0.75rem;
}
.comment-delete {
    margin-left: auto;
}
.comment-delete button {
    background: transparent;
    border: 1px solid transparent;
    color: #9ca3af;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}
.comment-delete button:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}
.comment-body {
    color: #1f2937;
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Přílohy - chips pod komentářem */
.attachment-list {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.attachment-item {
    display: inline-flex;
}
.attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-decoration: none;
    color: #1f2937;
    font-size: 0.8rem;
    transition: border-color 0.15s ease, background 0.15s ease;
    max-width: 100%;
}
.attachment-link:hover {
    border-color: #0891b2;
    background: #ecfeff;
}
.attachment-icon {
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}
.attachment-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.attachment-size {
    color: #9ca3af;
    font-size: 0.72rem;
    flex: 0 0 auto;
}

/* Comment form */
.comment-form {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}
.comment-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 60px;
    line-height: 1.45;
    box-sizing: border-box;
}
.comment-form textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}
.comment-form-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.attach-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.82rem;
    cursor: pointer;
    color: #374151;
    transition: border-color 0.15s ease;
}
.attach-button:hover {
    border-color: #0891b2;
    color: #0891b2;
}
.attach-button input[type="file"] {
    display: none;
}
.attach-summary {
    color: #6b7280;
    font-size: 0.78rem;
}

/* Klikací odkaz na detail ticketu - bez podtržení, badge zůstává jako visual element */
.ticket-id-link {
    text-decoration: none;
    display: inline-block;
}
.ticket-id-link:hover .ticket-id {
    background: #bae6fd;
    border-color: #7dd3fc;
}

/* === Ticket detail page === */
.ticket-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    margin-top: 1rem;
}
@media (max-width: 900px) {
    .ticket-grid { grid-template-columns: 1fr; }
}
.ticket-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ticket-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ticket-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ticket-card h4 {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
}

/* Sekce „Odeslat výpis ticketu" pod komentáři */
.ticket-export-card {
    border-top: 3px solid #0891b2;
    background: linear-gradient(180deg, #f0f9ff 0%, white 50%);
}
.ticket-export-card h4 {
    color: #0e7490;
}
.ticket-export-card .export-row {
    margin: 0.6rem 0 0.8rem;
}
.ticket-export-card .export-field {
    display: block;
    max-width: 480px;
}
.ticket-export-card label {
    display: block;
    font-size: 0.85rem;
    color: #374151;
    font-weight: 500;
    margin-bottom: 0.85rem;
}
.ticket-export-card input[type="email"],
.ticket-export-card textarea {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
    box-sizing: border-box;
    line-height: 1.45;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
    resize: vertical;
}
.ticket-export-card input[type="email"]:focus,
.ticket-export-card textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
.ticket-export-card .export-actions {
    margin-top: 0.6rem;
}

/* Tlačítko „Odeslat výpis" – stejná velikost jako btn-save v komentářích */
.btn-export-send {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    border: 0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25);
    transition: all 0.15s ease;
}
.btn-export-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(8, 145, 178, 0.35);
    filter: brightness(1.05);
}
.btn-export-send:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(8, 145, 178, 0.25);
}

/* Modernizovaný select v ticket-card - vlastní šipka, zaoblené rohy, hover */
.ticket-card select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0.55rem 2rem 0.55rem 0.85rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='%236b7280'><path d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 011.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z'/></svg>") no-repeat right 0.7rem center;
    font-size: 0.92rem;
    color: #111827;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ticket-card select:hover {
    border-color: #0891b2;
}
.ticket-card select:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

.ticket-desc {
    color: #1f2937;
    line-height: 1.5;
    word-break: break-word;
}
.ticket-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px dashed #f3f4f6;
    font-size: 0.85rem;
}
.ticket-meta-row:last-child { border-bottom: none; }
.ticket-meta-label {
    color: #6b7280;
    font-size: 0.78rem;
}
.btn-status-change {
    background: white;
    border: 1px solid #0891b2;
    color: #0891b2;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
}
.btn-status-change:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    border-color: #0e7490;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25);
}

/* Posun vpřed ve workflow (např. zadáno → schváleno) – zelený akcent */
.btn-status-change.btn-status-forward {
    border-color: #10b981;
    color: #047857;
    background: white;
}
.btn-status-change.btn-status-forward:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-color: #059669;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
/* Vrácení zpět ve workflow (např. probíhá → schváleno) – červený akcent */
.btn-status-change.btn-status-backward {
    border-color: #ef4444;
    color: #b91c1c;
    background: white;
}
.btn-status-change.btn-status-backward:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: #dc2626;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}
.btn-delete-ticket {
    width: 100%;
    background: white;
    color: #dc2626;
    border: 1px solid #fca5a5;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
}
.btn-delete-ticket:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* === Comment form - moderní look === */
.comment-form textarea {
    border-radius: 10px !important;
    border: 1px solid #d1d5db;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-form textarea:focus {
    border-color: #0891b2 !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
/* Modernější Odeslat tlačítko v komentáři */
.comment-form .btn-save {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    border: none;
    padding: 0.55rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25);
    transition: all 0.15s ease;
}
.comment-form .btn-save:hover {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
    transform: translateY(-1px);
}
.comment-form .btn-save:active {
    transform: translateY(0);
}
/* Attach button - taky zaoblený */
.comment-form .attach-button {
    border-radius: 8px;
}

/* Tabulka úkonů v detailu ticketu */
.tbl-ticket-events .col-date     { width: 12%; }
.tbl-ticket-events .col-time     { width: 14%; }
.tbl-ticket-events .col-duration { width: 9%; text-align: right; }
.tbl-ticket-events .col-tech     { width: 18%; }

/* === Sloupec Ticket ve výkazu práce === */
.tbl-events .col-ticket-link { width: 9%; white-space: nowrap; }
.tbl-events .col-ticket-link .ticket-id {
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
}

.tbl-helpdesk .col-title strong {
    display: block;
    color: #111827;
    font-size: 0.92rem;
    line-height: 1.3;
}
.tbl-helpdesk .hd-desc {
    color: #6b7280;
    font-size: 0.78rem;
    margin-top: 0.25rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Vyřešené/uzavřené řádky jsou zešedlé */
.tbl-helpdesk .hd-done {
    opacity: 0.55;
}
.tbl-helpdesk .hd-done .col-title strong {
    text-decoration: line-through;
}

/* Priorita - barevné štítky */
.badge-priority {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
}
.badge-prio-high   { background: #fee2e2; color: #991b1b; }
.badge-prio-normal { background: #e0e7ff; color: #3730a3; }
.badge-prio-low    { background: #f3f4f6; color: #6b7280; }

/* Stav - badge (pro read-only zobrazení v portálu) */
.badge-status {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.badge-status-to_review   { background: #fed7aa; color: #9a3412; }
.badge-status-submitted   { background: #fef3c7; color: #92400e; }
.badge-status-approved    { background: #ddd6fe; color: #5b21b6; }
.badge-status-rejected    { background: #fee2e2; color: #991b1b; }
.badge-status-in_progress { background: #dbeafe; color: #1e40af; }
.badge-status-resolved    { background: #dcfce7; color: #166534; }
.badge-status-closed      { background: #f3f4f6; color: #6b7280; }
.badge-status-default     { background: #f3f4f6; color: #6b7280; }

/* Stav select - barva podle aktuálního stavu */
.hd-status-select {
    padding: 0.3rem 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.78rem;
    background: white;
    cursor: pointer;
    width: 100%;
}
.hd-status-select:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
}
.tbl-helpdesk .hd-status-submitted .hd-status-select   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.tbl-helpdesk .hd-status-approved .hd-status-select    { background: #ddd6fe; color: #5b21b6; border-color: #a78bfa; }
.tbl-helpdesk .hd-status-rejected .hd-status-select    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.tbl-helpdesk .hd-status-open .hd-status-select        { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.tbl-helpdesk .hd-status-in_progress .hd-status-select { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.tbl-helpdesk .hd-status-resolved .hd-status-select    { background: #dcfce7; color: #166534; border-color: #86efac; }
.tbl-helpdesk .hd-status-closed .hd-status-select      { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }

/* Hover efekt na celý řádek */
.tbl-helpdesk tr:hover {
    background: #f9fafb;
}

/* Cell-empty (—) */
.tbl-helpdesk .cell-empty {
    color: #9ca3af;
    font-size: 0.8rem;
}

/* === Btn-period - aktivní stav (filtr v portálu) === */
.btn-period.active {
    background: #0e7490;
    color: white !important;
    border-color: #0e7490;
}

/* === Sjednocený page-header pro všechny vnitřní stránky ===
   Konzistentní typografie, padding, žádné dekorativní emoji v hlavním titulku.
   Vzor: <main><header class="page-header"><h1>Titulek</h1><p class="page-subtitle">Podtitulek</p></header>...</main>
   Page-header je vždy uvnitř <main> a převzímá centering z main. */
.page-header {
    margin: 0 0 1.25rem;
    padding: 0;
}
.page-header h1,
.page-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.page-header .page-subtitle,
.page-header p.hint {
    margin: 0;
    color: #6b7280;
    font-size: 0.92rem;
}
/* Pokud je v page-header tlačítko nebo akce, dej je vpravo */
.page-header.with-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* === Dashboard - výchozí stránka pro zaměstnance === */
.dashboard-main {
    /* používáme stejné jako main globální (max-width: 1280px; padding: 0.5rem 1.5rem 1.5rem) */
}

/* Statistické dlaždice nahoře */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.dashboard-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.1rem 1.3rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    /* Konzistentní výška napříč dlaždicemi v gridu. Bez min-height by dlaždice
       s méně obsahem (jen icon + num + label) byly nižší, anebo se v gridu
       protáhly s velkým prázdným prostorem pod labelem. */
    min-height: 165px;
}
/* Label a sub jdou vždy na DOLNÍ okraj dlaždice (push down).
   `margin-top: auto` na prvním z nich (label) odsune obě (label + sub) dolů,
   takže strukturně máme:
     - icon + num + percent + bar  → nahoře (statistická hodnota)
     - label + sub                 → dole (popis dlaždice)
   To zaručí, že čísla jsou vždy ve stejné výšce napříč dlaždicemi
   a popisky jsou zarovnané na dolní okraj. */
.dashboard-stat-card > .dashboard-stat-label {
    margin-top: auto;
}
/* Pokud dlaždice nemá .dashboard-stat-label (jen sub), odsune se sub. */
.dashboard-stat-card > .dashboard-stat-sub:first-of-type {
    margin-top: auto;
}
/* Pokud .dashboard-stat-label existuje, sub si "auto" nezasluhuje
   (label už ho odtáhl dolů automaticky tím, že labelu dáme margin-top: auto). */
.dashboard-stat-card > .dashboard-stat-label ~ .dashboard-stat-sub {
    margin-top: 0.2rem;
}
.dashboard-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #0891b2;
}

/* Status barvy levého pruhu — defaultní typové (pro karty bez ratia) */
.dashboard-stat-card.stat-tickets::before    { background: #8b5cf6; }
.dashboard-stat-card.stat-hours::before      { background: #10b981; }
.dashboard-stat-card.stat-servers::before    { background: #0891b2; }
.dashboard-stat-card.stat-monitoring::before { background: #f59e0b; }
.dashboard-stat-card.stat-vacation::before   { background: #14b8a6; }
.dashboard-stat-card.stat-vacation-approve::before { background: #6366f1; }
.dashboard-stat-card.stat-vacation-approve.has-pending::before { background: #ef4444; }
.dashboard-stat-card.stat-vacation-approve.has-pending .dashboard-stat-num {
    color: #dc2626;
}
.dashboard-stat-card.stat-vacation-approve.has-pending {
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 60%);
}

/* === Karta „Hodnocení za minulý měsíc" – mood ikonka v rohu === */
.dashboard-stat-card.stat-last-month {
    overflow: hidden;
}
.dashboard-stat-card.stat-last-month::before { background: #f59e0b; }
.dashboard-stat-card.stat-last-month.ratio-done::before    { background: #10b981; }
.dashboard-stat-card.stat-last-month.ratio-high::before    { background: #84cc16; }
.dashboard-stat-card.stat-last-month.ratio-medium::before  { background: #f59e0b; }
.dashboard-stat-card.stat-last-month.ratio-low::before     { background: #ef4444; }

/* Mood fotka - vpravo nahoře, plně neprůhledná, kruhová.
   Větší velikost (88 px) – aby byl vidět výraz obličeje, ne jen barva. */
.stat-mood-corner {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    z-index: 1;
}
.dashboard-stat-card:hover .stat-mood-corner {
    transform: scale(1.08);
    box-shadow: 0 5px 16px rgba(0,0,0,0.22);
}
/* Když je mood fotka přítomná, dáme číslům + progress baru pravý padding,
   aby se nepřekrývaly s fotkou. Fotka 88 + offset 1rem + mezera = ~110 px. */
.dashboard-stat-card.stat-last-month:has(.stat-mood-corner) .dashboard-stat-num,
.dashboard-stat-card.stat-last-month:has(.stat-mood-corner) .dashboard-stat-percent,
.dashboard-stat-card.stat-last-month:has(.stat-mood-corner) .dashboard-stat-bar {
    padding-right: 100px;
}

/* Varianta „bez dat" – uživatel je v cílové roli, ale za minulý měsíc nemá
   vykázané žádné hodiny. Decentní šedý styl, žádné číslo / progress bar.
   Klikací (vede na Mzdové ohodnocení), ale vizuálně ztlumený. */
.dashboard-stat-card.stat-last-month-nodata {
    background: #f9fafb;
    color: #6b7280;
}
.dashboard-stat-card.stat-last-month-nodata::before { background: #cbd5e1; }
.dashboard-stat-card.stat-last-month-nodata .dashboard-stat-icon {
    opacity: 0.55;
}
.stat-last-month-nodata-msg,
.dashboard-stat-card.stat-last-month-nodata .stat-last-month-nodata-msg {
    color: #6b7280;
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.3rem;
}

/* Ratio karty: barva odpovídá splnění (red < 30 %, orange < 60 %, yellow < 85 %, green) */
.dashboard-stat-card.ratio-low::before     { background: #ef4444; }
.dashboard-stat-card.ratio-medium::before  { background: #f59e0b; }
.dashboard-stat-card.ratio-high::before    { background: #eab308; }
.dashboard-stat-card.ratio-done::before    { background: #10b981; }

/* Jemný gradient pozadí podle stavu */
.dashboard-stat-card.ratio-low     { background: linear-gradient(135deg, #fef2f2 0%, #ffffff 60%); }
.dashboard-stat-card.ratio-medium  { background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%); }
.dashboard-stat-card.ratio-high    { background: linear-gradient(135deg, #fefce8 0%, #ffffff 60%); }
.dashboard-stat-card.ratio-done    { background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%); }

.dashboard-stat-card:hover {
    border-color: #0891b2;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
    transform: translateY(-2px);
}
.dashboard-stat-icon {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    opacity: 0.85;
}
.dashboard-stat-num {
    font-size: 1.85rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    margin-bottom: 0.35rem;
    font-variant-numeric: tabular-nums;
}
/* Ratio styl: "15 / 300" - menší než velké solo číslo, ale stále výrazný */
.dashboard-stat-num.is-ratio {
    font-size: 1.6rem;
}
.dashboard-stat-num .ratio-sep {
    color: #9ca3af;
    font-weight: 500;
    margin: 0 0.15rem;
}
.dashboard-stat-num .ratio-total {
    color: #6b7280;
    font-weight: 600;
}
.dashboard-stat-percent {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.45rem;
    font-variant-numeric: tabular-nums;
}
.dashboard-stat-card.ratio-low .dashboard-stat-percent     { color: #b91c1c; }
.dashboard-stat-card.ratio-medium .dashboard-stat-percent  { color: #b45309; }
.dashboard-stat-card.ratio-high .dashboard-stat-percent    { color: #854d0e; }
.dashboard-stat-card.ratio-done .dashboard-stat-percent    { color: #15803d; }

/* Tenký progress bar pro ratio karty */
.dashboard-stat-bar {
    width: 100%;
    height: 4px;
    background: #f3f4f6;
    border-radius: 2px;
    overflow: hidden;
    margin: 0.1rem 0 0.5rem;
}
.dashboard-stat-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.ratio-low .dashboard-stat-bar-fill     { background: #ef4444; }
.ratio-medium .dashboard-stat-bar-fill  { background: #f59e0b; }
.ratio-high .dashboard-stat-bar-fill    { background: #eab308; }
.ratio-done .dashboard-stat-bar-fill    { background: #10b981; }

.dashboard-stat-label {
    font-size: 0.82rem;
    color: #4b5563;
    font-weight: 600;
    line-height: 1.3;
}
.dashboard-stat-sub {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Detailní karty */
.dashboard-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 1.25rem;
}
.dashboard-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}
.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}
.dashboard-card-header h2 {
    margin: 0;
    font-size: 1rem;
    color: #0e7490;
    font-weight: 600;
}
.dashboard-card-link {
    color: #0891b2;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
}
.dashboard-card-link:hover { text-decoration: underline; }
.dashboard-card-body {
    padding: 0.75rem 1.25rem 1.25rem;
}

/* Ticket list v dashboardu */
.dashboard-ticket-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dashboard-ticket-item {
    border-bottom: 1px solid #f3f4f6;
}
.dashboard-ticket-item:last-child { border-bottom: 0; }
.dashboard-ticket-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    text-decoration: none;
    color: inherit;
    flex-wrap: wrap;
}
.dashboard-ticket-link:hover {
    background: #f9fafb;
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 6px;
}
.dashboard-ticket-title {
    flex: 1;
    font-weight: 500;
    color: #111827;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-ticket-customer {
    font-size: 0.72rem;
    background: #ecfeff;
    color: #0e7490;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: monospace;
}

/* Server list v dashboardu */
.dashboard-server-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.dashboard-server-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.dashboard-server-item:last-child { border-bottom: 0; }
.dashboard-server-item strong {
    color: #111827;
    min-width: 140px;
}
.dashboard-server-customer {
    color: #6b7280;
    flex: 1;
    font-size: 0.8rem;
}
.dashboard-server-meta {
    color: #9ca3af;
    font-size: 0.75rem;
}

/* === Helpdesk admin page === */
.helpdesk-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}
/* === Globální .btn-primary - moderní gradientové tlačítko pro hlavní akce === */
/* Používá se např. v sekci Helpdesk pro "+ Nový ticket". Specifičtější pravidla
   (.vykaz-actions .btn-primary apod.) si přebíjí styly podle potřeby. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.2s ease;
    white-space: nowrap;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);
}
.btn-primary .btn-icon {
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1;
}
/* Specifická úprava velikosti pro tlačítko v Helpdesk toolbaru */
.btn-new-ticket {
    padding: 0.6rem 1.15rem;
    font-size: 0.92rem;
}

/* === Helpdesk pilulky - 8 filtrovacích dlaždic s počty na jednom řádku === */
.helpdesk-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.stat-pill {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.7rem;
    min-width: 100px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1.15;
}
.stat-pill:hover {
    border-color: #0891b2;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.1);
    transform: translateY(-1px);
}
.stat-pill.active {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border-color: #0e7490;
    color: white;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);
}
.stat-pill .stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0e7490;
}
.stat-pill.active .stat-num { color: white; }
.stat-pill .stat-label {
    font-size: 0.68rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
    white-space: nowrap;
    text-align: center;
}
.stat-pill.active .stat-label { color: #cffafe; }

/* Speciální variant pilulky "K zpracování" – oranžová pro upoutání pozornosti */
.stat-pill.stat-pill-review {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fdba74;
}
.stat-pill.stat-pill-review .stat-num   { color: #c2410c; }
.stat-pill.stat-pill-review .stat-label { color: #9a3412; }
.stat-pill.stat-pill-review:hover {
    border-color: #ea580c;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.15);
}
.stat-pill.stat-pill-review.active {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    border-color: #c2410c;
    color: white;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}
.stat-pill.stat-pill-review.active .stat-num,
.stat-pill.stat-pill-review.active .stat-label { color: white; }

/* === To-review banner v ticket.php (3.74) – formulář pro přiřazení zákazníka + renumber === */
.to-review-banner {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fdba74;
    border-left: 5px solid #ea580c;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    color: #9a3412;
}
.to-review-banner-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}
.to-review-banner-header strong {
    color: #7c2d12;
    font-size: 1rem;
}
.to-review-banner-header p {
    margin: 0.35rem 0 0;
    color: #9a3412;
    font-size: 0.88rem;
    line-height: 1.45;
}
.to-review-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.to-review-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
}
.to-review-form label {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    min-width: 200px;
}
.to-review-form label > span {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7c2d12;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.to-review-form select {
    padding: 0.45rem 0.6rem;
    border: 1px solid #fdba74;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    color: #1f2937;
}
.to-review-form select:focus {
    outline: none;
    border-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
.to-review-form button {
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    border: 1px solid #ea580c;
    background: #ea580c;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.to-review-form button:hover {
    background: #c2410c;
    border-color: #c2410c;
}

/* === 3.87: Mail info box v to-review banneru === */
.to-review-mail-info {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin: 0.6rem 0;
    font-size: 0.86rem;
}
.to-review-mail-row {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.2rem 0;
    flex-wrap: wrap;
}
.to-review-mail-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #7c2d12;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 130px;
    flex-shrink: 0;
}
.to-review-mail-value {
    color: #1f2937;
    word-break: break-word;
    flex: 1;
}
.to-review-mail-value code {
    background: rgba(255, 255, 255, 0.8);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: #0c4a6e;
}
.to-review-domain-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    background: #fed7aa;
    border-radius: 999px;
    font-size: 0.74rem;
    color: #7c2d12;
    font-weight: 600;
}

/* === 3.87: Extras (= checkboxy pro add domain + create user) === */
.to-review-extras {
    background: rgba(254, 243, 199, 0.7);
    border: 1px dashed #fbbf24;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    margin-top: 0.4rem;
    flex-basis: 100%;
}
.to-review-extras > strong {
    display: block;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.to-review-extras-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    flex: none !important;
    min-width: 0 !important;
    margin: 0.35rem 0;
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.to-review-extras-check:hover {
    background: rgba(254, 243, 199, 0.9);
}
.to-review-extras-check input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.to-review-extras-check > span {
    display: block;
    color: #1f2937;
    font-size: 0.86rem;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: normal !important;
    margin: 0 !important;
}
.to-review-extras-check > span code {
    background: white;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #0c4a6e;
}
.to-review-extras-check > span small {
    display: block;
    color: #78350f;
    font-size: 0.76rem;
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* === Customer detail – tab E-mailové domény (3.79) === */
.cd-email-domains-section .form-section {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.1rem 1.3rem 0.9rem;
    margin-bottom: 1rem;
    background: #fff;
}
.cd-email-domains-section .form-section > legend {
    font-weight: 600;
    color: #334155;
    padding: 0 0.4rem;
    font-size: 0.85rem;
}
.cd-email-domains-section .cd-domain-add-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    background: #f8fafc;
    padding: 0.85rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.cd-email-domains-section .cd-domain-add-label {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 180px;
    margin: 0;
}
.cd-email-domains-section .cd-domain-add-label > span {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cd-email-domains-section .cd-domain-add-label input {
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
}
.cd-email-domains-section .cd-domain-add-form button.primary {
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    background: #0891b2;
    color: white;
    border: 1px solid #0891b2;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.cd-email-domains-section .cd-domain-add-form button.primary:hover {
    background: #0e7490;
    border-color: #0e7490;
}
.cd-email-domains-section .cd-domain-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.cd-email-domains-section .cd-domain-list th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}
.cd-email-domains-section .cd-domain-list td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.cd-email-domains-section .cd-domain-list tr.inactive {
    opacity: 0.55;
    background: #fafafa;
}
.cd-email-domains-section .cd-domain-list button.tiny {
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    border-radius: 5px;
    border: 1px solid #cbd5e1;
    background: white;
    cursor: pointer;
    margin-right: 0.3rem;
}
.cd-email-domains-section .cd-domain-list button.tiny:hover {
    border-color: #0891b2;
    background: #f0f9ff;
}
.cd-email-domains-section .cd-domain-list button.tiny.danger {
    color: #dc2626;
    border-color: #fecaca;
}
.cd-email-domains-section .cd-domain-list button.tiny.danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
}
.cd-email-domains-section .badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.cd-email-domains-section .badge-green {
    background: #dcfce7;
    color: #166534;
}
.cd-email-domains-section .badge-grey {
    background: #f3f4f6;
    color: #6b7280;
}

/* === Mail importer & Emailové domény (admin standalone stránky) === */
.mail-importer-page,
.email-domains-page {
    max-width: 1100px;
    margin: 0 auto;
}
.mail-importer-page h1,
.email-domains-page h1 {
    font-size: 1.4rem;
    margin: 1.25rem 0 0.5rem;
    color: #1f2937;
}
.mail-importer-page .hint,
.email-domains-page .hint {
    color: #64748b;
    font-size: 0.85rem;
}
.mail-importer-page .flash,
.email-domains-page .flash {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}
.mail-importer-page .flash-success,
.email-domains-page .flash-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.mail-importer-page .flash-error,
.email-domains-page .flash-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.mail-importer-page .flash-info,
.email-domains-page .flash-info {
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid #93c5fd;
}
.mail-importer-page .card,
.email-domains-page .card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.3rem 1.5rem;
    margin: 1rem 0;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mail-importer-page .card h2,
.email-domains-page .card h2 {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    color: #1f2937;
    font-weight: 600;
}
.mail-importer-page label,
.email-domains-page label {
    display: block;
    margin-bottom: 0.6rem;
}
.mail-importer-page label > span,
.email-domains-page label > span {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.2rem;
}
.mail-importer-page input[type=text],
.mail-importer-page input[type=password],
.email-domains-page input[type=text],
.email-domains-page input[type=password] {
    width: 100%;
    max-width: 460px;
    padding: 0.5rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mail-importer-page input[type=text]:focus,
.mail-importer-page input[type=password]:focus,
.email-domains-page input[type=text]:focus,
.email-domains-page input[type=password]:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}

/* Selecty v email-domains stránce (zákazník a podobné) */
.email-domains-page select {
    width: 100%;
    min-width: 280px;
    padding: 0.5rem 2rem 0.5rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1f2937;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* Custom šipka */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.email-domains-page select:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}

/* Stylovaná add-domain forma na admin_customer_email_domains.php */
.email-domains-page .cd-domain-add-form {
    display: flex;
    gap: 0.85rem;
    align-items: flex-end;
    flex-wrap: wrap;
    background: #f8fafc;
    padding: 1rem 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 0.5rem;
}
.email-domains-page .cd-domain-add-form > label {
    flex: 1 1 200px;
    min-width: 180px;
    margin: 0;
}
.email-domains-page .cd-domain-add-form > label > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.email-domains-page .cd-domain-add-form > label > input,
.email-domains-page .cd-domain-add-form > label > select {
    width: 100%;
    min-width: 0;
    max-width: none;
}
.email-domains-page .cd-domain-add-form button.primary {
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    background: #0891b2;
    color: white;
    border: 1px solid #0891b2;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.email-domains-page .cd-domain-add-form button.primary:hover {
    background: #0e7490;
    border-color: #0e7490;
}

/* Tabulka existujících mapování */
.email-domains-page .email-domains-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.email-domains-page .email-domains-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border-bottom: 2px solid #e2e8f0;
}
.email-domains-page .email-domains-table tbody td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.email-domains-page .email-domains-table tbody tr:hover {
    background: #fafbfc;
}
.email-domains-page .email-domains-table tr.inactive {
    opacity: 0.55;
    background: #fafafa;
}
.email-domains-page .email-domains-table tr.inactive:hover {
    background: #f5f5f5;
}
.email-domains-page .email-domains-table button.tiny {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #334155;
    cursor: pointer;
    margin-right: 0.3rem;
    transition: all 0.12s;
}
.email-domains-page .email-domains-table button.tiny:hover {
    border-color: #0891b2;
    background: #f0f9ff;
    color: #0c4a6e;
}
.email-domains-page .email-domains-table button.tiny.danger {
    color: #dc2626;
    border-color: #fecaca;
}
.email-domains-page .email-domains-table button.tiny.danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
    color: #991b1b;
}
.email-domains-page .domain-badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.email-domains-page .domain-badge-active {
    background: #dcfce7;
    color: #166534;
}
.email-domains-page .domain-badge-inactive {
    background: #f3f4f6;
    color: #6b7280;
}
.mail-importer-page button,
.email-domains-page button {
    padding: 0.5rem 1.1rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.mail-importer-page button.primary,
.email-domains-page button.primary {
    background: #0891b2;
    color: white;
    border-color: #0891b2;
}
.mail-importer-page button[disabled],
.email-domains-page button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.mail-importer-page table,
.email-domains-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.mail-importer-page table th,
.mail-importer-page table td,
.email-domains-page table th,
.email-domains-page table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.mail-importer-page table th,
.email-domains-page table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}
.mail-importer-page .status-ok       { color: #059669; }
.mail-importer-page .status-review   { color: #d97706; font-weight: 600; }
.mail-importer-page .status-rejected { color: #64748b; }
.mail-importer-page .status-error    { color: #dc2626; }
.mail-importer-page .preformatted {
    background: #1e293b;
    color: #e2e8f0;
    padding: 0.75rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.82rem;
    white-space: pre-wrap;
    max-height: 350px;
    overflow-y: auto;
}
.mail-importer-page .switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.mail-importer-page .switch input[type=checkbox] {
    width: 18px;
    height: 18px;
}

/* === Helpdesk action bar: filtr zákazníka vlevo, akční tlačítko vpravo === */
.helpdesk-actionbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.hd-customer-filter {
    flex: 0 1 320px;
    min-width: 220px;
    max-width: 100%;
    margin: 0;
}
/* Filtr zákazníka jako autocomplete s lupou */
.hd-cust-filter-wrap {
    position: relative;
    width: 100%;
}
.hd-cust-filter-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0.55;
    z-index: 2;
}
.hd-cust-filter-wrap input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 2.2rem 0.5rem 2.1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hd-cust-filter-wrap input[type="text"]:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}
.hd-cust-filter-clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    z-index: 3;
}
.hd-cust-filter-clear:hover {
    background: #e5e7eb;
    color: #374151;
}

.tbl-helpdesk-admin tbody tr:hover {
    background: #f0f9ff;
}
.tbl-helpdesk-admin tbody tr {
    transition: background 0.1s ease;
}
.portal-org-name {
    color: #cffafe;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0 0.75rem;
    border-left: 1px solid rgba(255,255,255,0.15);
}

/* === Portal cards - tři velké dlaždice (Vaše požadavky / Výkaz práce / Vaše servery) === */
.portal-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem;
}
.portal-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.portal-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}
.portal-card-title {
    margin: 0;
    font-size: 1.1rem;
    color: #0e7490;
    font-weight: 600;
    line-height: 1.2;
}
.portal-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.portal-card-actions .filter-pills {
    display: flex;
    gap: 0.4rem;
}
.portal-card-body {
    padding: 1.25rem;
}

/* === Čerpání hodin - progress bar === */
.hours-summary {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
    border: 1px solid #bae6fd;
    border-radius: 8px;
}
.hours-summary-numbers {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hours-summary-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.hours-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0e7490;
    line-height: 1;
}
.hours-of {
    color: #6b7280;
    font-size: 0.95rem;
}
.hours-summary-pct {
    text-align: right;
    line-height: 1.2;
}
.hours-summary-pct strong {
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
}
.hours-pct-label {
    font-size: 0.78rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hours-bar-track {
    position: relative;
    height: 14px;
    background: #e0f2fe;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #bae6fd;
}
.hours-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 7px;
    transition: width 0.4s ease;
}
.hours-bar-fill.hours-bar-good   { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); }
.hours-bar-fill.hours-bar-warn   { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); }
.hours-bar-fill.hours-bar-over   { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }

/* Pulzující varování při překročení */
.hours-bar-overflow {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6px;
    background: repeating-linear-gradient(
        45deg,
        #dc2626,
        #dc2626 4px,
        #b91c1c 4px,
        #b91c1c 8px
    );
}

.hours-summary-pct strong.hours-bar-good { color: #047857; }
.hours-summary-pct strong.hours-bar-warn { color: #b45309; }
.hours-summary-pct strong.hours-bar-over { color: #dc2626; }
.hours-summary-bottom .hours-bar-over    { color: #dc2626; font-weight: 600; }

.hours-summary-bottom {
    margin-top: 0.5rem;
    color: #6b7280;
    font-size: 0.85rem;
}

/* === Tabulka položek výkazu v portálu === */
.tbl-portal-events {
    table-layout: fixed;
    margin-top: 0.5rem;
}
.tbl-portal-events .col-date     { width: 9%; }
.tbl-portal-events .col-server   { width: 14%; }
.tbl-portal-events .col-ticket-link { width: 9%; }
.tbl-portal-events .col-duration { width: 9%; text-align: right; font-variant-numeric: tabular-nums; }
.tbl-portal-events .col-tech     { width: 16%; }
.tbl-portal-events .total-row td {
    background: #f9fafb;
    font-size: 0.9rem;
}
.tbl-portal-events .note-icon {
    cursor: help;
    opacity: 0.7;
}
.tbl-portal-events .note-icon:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .tbl-portal-events .col-tech { display: none; }
    .tbl-portal-events .col-server { width: 18%; }
}

/* === Stránka „Zákazníci" (customer.php) === */

.customer-select {
    margin: 1rem 0 1.5rem;
}

/* === Dlaždice zákazníků (customer.php bez vybraného zákazníka) === */
.customer-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}
/* Moderní CSS Grid (lepší auto-layout) */
@supports (display: grid) {
    .customer-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}
.customer-tile {
    flex: 0 1 calc(33.333% - 0.7rem);
    min-width: 320px;
    display: block;
    text-decoration: none;
    color: inherit;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    box-sizing: border-box;
    position: relative;
}
.customer-tile:hover {
    border-color: #0891b2;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.12);
    transform: translateY(-1px);
}

/* Klasifikační badge v pravém horním rohu dlaždice (jen pro interní uživatele) */
.customer-tile-grade {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    letter-spacing: -0.02em;
    z-index: 1;
}
.customer-tile:hover .customer-tile-grade {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* Logo OEM partnera v levém horním rohu dlaždice CRM.
   Subtilní, přehledné, nesoupeří s tile contentem. Trochu se posune při hoveru. */
.customer-tile-oem-logo {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: 42px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 3px 5px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s, box-shadow 0.15s;
    z-index: 1;
    pointer-events: none;
}
.customer-tile-oem-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.customer-tile:hover .customer-tile-oem-logo {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
/* Když je v dlaždici OEM logo, posunout header doprava aby ho neopřekrývalo.
   Logo je 42px wide na pozici left: 0.6rem (~10px), takže končí kolem 52px.
   Kód zákazníka začíná na 60px - těsně za logem ale s nepatrnou mezerou. */
.customer-tile:has(.customer-tile-oem-logo) .customer-tile-header {
    padding-left: 60px;
}
.customer-tile-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    /* Pravý prostor pro klasifikační badge (36px + okraj) */
    padding-right: 2.75rem;
    border-bottom: 1px solid #f3f4f6;
}
.customer-tile-code {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: #cffafe;
    color: #0e7490;
    border-radius: 5px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
}
.customer-tile-name {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.25;
    word-break: break-word;
}
.customer-tile-stats {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.customer-tile-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
}
.customer-tile-stat-icon {
    font-size: 1.05rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1.4;
}
.customer-tile-stat-content {
    flex: 1;
    min-width: 0;
}
.customer-tile-stat-main {
    color: #1f2937;
    font-size: 0.88rem;
    line-height: 1.3;
}
.customer-tile-stat-main strong {
    font-size: 1rem;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.customer-tile-stat-main strong.open-tickets {
    color: #dc2626;
}
.customer-tile-stat-detail {
    color: #6b7280;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}
.customer-tile-stat-detail .ic-ok {
    color: #047857;
    font-weight: 600;
}
/* Progress bar pro smluvní kvótu */
.customer-tile-progress {
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
    margin: 0.35rem 0 0.2rem;
}
.customer-tile-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #06b6d4);
    transition: width 0.3s;
}
.customer-tile-progress-fill.over {
    background: linear-gradient(90deg, #f59e0b, #dc2626);
}
.customer-select .autocomplete-wrap {
    display: block;
    max-width: 480px;
    position: relative;
}
.customer-select input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    padding-right: 2.4rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    background: white;
}
.customer-select input[type="text"]:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
    border-color: #0891b2;
}

/* Tlačítko ✕ pro vyčištění výběru zákazníka */
.customer-pick-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    z-index: 2;
}
.customer-pick-clear:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Filter v Nastavení → Servery: dva inputy + clear vedle sebe */
.table-filter-row {
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.table-filter-row .autocomplete-wrap {
    display: block;
}
.table-filter-row .autocomplete-wrap input[type="text"] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
}
.table-filter-row .autocomplete-wrap input[type="text"]:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
    border-color: #0891b2;
}

.customer-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.customer-page-header h3 {
    margin: 0;
    font-size: 1.25rem;
}
.customer-page-header .customer-code {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: #cffafe;
    color: #0e7490;
    border-radius: 6px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem;
    margin-right: 0.4rem;
    vertical-align: 2px;
}
.customer-actions-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}
.btn-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 38px;
    background: #0891b2;
    color: white !important;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s;
    box-sizing: border-box;
}
.btn-doc-link:hover { background: #0e7490; }

.customer-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.customer-section h4 {
    margin: 0 0 0.75rem;
    color: #0e7490;
    font-size: 1.05rem;
}

.customer-events-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.period-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;          /* mezera mezi šipkami a názvem měsíce */
    flex: 1;
    min-width: 0;
}
.period-selector strong {
    /* Název měsíce ve výběru období - garantujeme čitelnost a oddělení od šipek */
    min-width: 9rem;
    text-align: center;
    white-space: nowrap;
}
.btn-period {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    background: #f3f4f6;
    color: #374151 !important;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95rem;
}
.btn-period:hover { background: #e5e7eb; }
.btn-add-event {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    height: 38px;
    background: #10b981;
    color: white !important;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s;
    flex-shrink: 0;
    /* Reset native button styles, ať <button class="btn-add-event"> vypadá identicky jako <a class="btn-add-event"> */
    border: none;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}
.btn-add-event:hover { background: #059669; }

/* ---------- Tables ---------- */
.data-table {
    width: 100%;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border-collapse: collapse;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.data-table th, .data-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
    vertical-align: middle;
}
.data-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #4b5563;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.data-table tr:last-child td { border-bottom: none; }
/* Inactive řádek se ztlumí, ALE sloupec s akcemi (.actions-col) zůstává plně
   barevný - tlačítka jako "Kopírovat", "Aktivovat" mají dávat smysl i u
   neaktivních / minulých záznamů. Dříve byla opacity na celém <tr>, což
   ztlumilo i akce (a kvůli CSS dědičnosti to nešlo přepsat na child úrovni). */
.data-table tr.inactive td:not(.actions-col) { opacity: 0.45; }
.data-table .empty-row { text-align: center; color: #9ca3af; padding: 2rem; }

.data-table .inline-action { display: inline-flex; gap: 0.25rem; align-items: center; }
.data-table .inline-action button,
.data-table button {
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
}
.data-table .inline-action button:hover,
.data-table button:hover { background: #e5e7eb; }
.data-table .inline-action input[type=password] {
    padding: 0.35rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Inline editace - tlačítka */
.data-table .actions-col {
    white-space: nowrap;
}
.data-table .btn-edit,
.data-table .btn-cancel {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #374151;
    text-decoration: none;
    font-size: 0.8rem;
    margin-right: 0.25rem;
}
.data-table .btn-edit:hover,
.data-table .btn-cancel:hover { background: #e5e7eb; }
.data-table .btn-save {
    padding: 0.375rem 0.875rem !important;
    background: #0891b2 !important;
    color: white !important;
    border: 1px solid #0891b2 !important;
    margin-right: 0.25rem;
    font-weight: 600;
}
.data-table .btn-save:hover { background: #0e7490 !important; }

/* Edit-row vizualní zvýraznění */
.data-table tr.edit-row {
    background: #fefce8;
}
.data-table tr.edit-row td {
    padding: 0.75rem 0.875rem;
    border-bottom: 2px solid #fde68a;
}
.data-table tr.edit-row input[type=text],
.data-table tr.edit-row input[type=month],
.data-table tr.edit-row select {
    padding: 0.4rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.875rem;
    box-sizing: border-box;
}
.data-table tr.edit-row input:focus,
.data-table tr.edit-row select:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
    border-color: #0891b2;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
}
.badge-updated { background: #dbeafe; color: #0e7490; }
.badge-checked_after_update { background: #dcfce7; color: #166534; }
.badge-extra_check { background: #fef3c7; color: #92400e; }
.badge-special_event { background: #fce7f3; color: #9d174d; }
.badge-restart_after_update { background: #fed7aa; color: #9a3412; }
.badge-manual { background: #ede9fe; color: #5b21b6; }

/* Sloupce v tabulce výkazu */
.data-table .cell-time {
    font-variant-numeric: tabular-nums;
    color: #4b5563;
    white-space: nowrap;
}
/* Ruční záznamy mírně barevně odlišené */
.data-table tr.row-manual {
    background: #faf5ff;
}
.data-table tr.row-manual:hover {
    background: #f3e8ff;
}

/* Neúplný záznam (chybí informace o času) - výrazné červené zvýraznění
   s pulzující ikonou, ať si ho technik všimne i při zběžném pohledu na výkaz. */
.data-table tr.row-incomplete td {
    background: #fee2e2 !important;
    border-top: 1px solid #fca5a5;
    border-bottom: 1px solid #fca5a5;
}
.data-table tr.row-incomplete:hover td {
    background: #fecaca !important;
}
.data-table tr.row-incomplete td:first-child {
    border-left: 5px solid #dc2626;
    position: relative;
}
.data-table tr.row-incomplete .warn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #dc2626;
    color: white;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: bold;
    margin-right: 0.5rem;
    cursor: help;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    animation: warn-pulse 2s infinite;
    vertical-align: middle;
}
@keyframes warn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.data-table .cell-incomplete {
    display: inline-block;
    background: #dc2626;
    color: white;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Tlačítka akcí ve výkazu */
.btn-edit-event {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    background: white !important;
    border: 1px solid #c4b5fd !important;
    color: #5b21b6 !important;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    margin-right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tlačítko „✓ Dokončit" pro otevřené úkony – výrazné zelené, aby šlo o akci. */
.btn-finish-event {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    background: #10b981 !important;
    border: 1px solid #059669 !important;
    color: white !important;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    margin-right: 0.25rem;
    font-size: 0.95rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-finish-event:hover {
    background: #059669 !important;
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}
.btn-edit-event svg {
    display: block;
    width: 14px;
    height: 14px;
}
.btn-edit-event:hover {
    background: #f5f3ff !important;
    border-color: #8b5cf6 !important;
}

/* Akční tlačítka nad výkazem (Přidat ručně, ...) */
.vykaz-actions {
    margin: 1rem 0 0.5rem;
    display: flex;
    gap: 0.5rem;
}
.vykaz-actions .btn-primary {
    background: #0891b2;
    color: white;
    border: 1px solid #0891b2;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.vykaz-actions .btn-primary:hover { background: #0e7490; }

/* Široký modal pro ruční zadání */
.modal.modal-wide {
    max-width: 720px;
    width: 90%;
}
.modal.modal-wide .form-row {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.modal.modal-wide .form-row-2 { grid-template-columns: 1fr 1fr; }
.modal.modal-wide .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* form-row-flex: alternativa ke gridu pro řádky, kde mohou být některé sloupce skryté.
   Skryté <label> (s class .is-hidden) se vyřadí z layoutu, viditelné se roztáhnou rovnoměrně.
   Používá se např. pro řádek (projekt, ticket, doba trvání), kde projekt/ticket
   mohou být dynamicky skryté podle dat zákazníka.

   Vyšší specificita než výchozí .form-row přes !important pro display + grid override,
   protože .form-row může mít display: grid (nelze garantovat pořadí v CSS). */
.modal.modal-wide .form-row.form-row-flex,
.modal.modal-wide div.form-row-flex {
    display: flex !important;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    grid-template-columns: none;
    flex-wrap: wrap;  /* na úzkých displejích se zalamuje automaticky */
}
.modal.modal-wide .form-row-flex > label {
    flex: 1 1 200px;   /* každý label aspoň 200px, jinak se roztáhne */
    min-width: 0;
    margin: 0;
}
/* JS toggluje class .is-hidden na <label>; CSS pak zajistí, že je opravdu skrytý.
   Použili jsme class místo HTML atributu hidden, protože atribut nemusí přebíjet
   ostatní display: pravidla aplikovaná na .modal label (display: block). */
.modal.modal-wide .form-row-flex > label.is-hidden,
.is-hidden {
    display: none !important;
}
.modal.modal-wide textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    padding: 0.6rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 120px;
}
.modal.modal-wide textarea:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
    border-color: #0891b2;
}
/* Autocomplete uvnitř modalu - dropdown nad ostatními poli */
.modal.modal-wide .autocomplete-wrap {
    position: relative;
}
.modal.modal-wide .autocomplete-wrap input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}
.modal.modal-wide .autocomplete-list {
    z-index: 10; /* nad ostatními inputy v modalu */
}

/* === Tabulka serverů v Nastavení - rozumné šířky sloupců === */
.tbl-servers .col-customer { width: 16%; }
.tbl-servers .col-server   { width: 14%; }
.tbl-servers .col-desc     { width: 16%; color: #6b7280; font-size: 0.85rem; }
.tbl-servers .col-role     { width: 10%; }
.tbl-servers .col-resp     { width: 14%; }
.tbl-servers .col-project  { width: 10%; }
.tbl-servers .col-active   { width: 6%; text-align: center; }
.tbl-servers .actions-col  { width: 14%; white-space: nowrap; }
/* V buňce zákazníka: kód tučně + název na novém řádku menším písmem */
.tbl-servers .col-customer strong {
    display: block;
    font-size: 0.9rem;
    color: #111827;
}
.tbl-servers .col-customer .cust-name {
    display: block;
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.1rem;
}
/* Zodpovědná osoba - kompaktní zobrazení */
.tbl-servers .resp-person {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.tbl-servers .resp-person span {
    font-size: 0.82rem;
    line-height: 1.2;
}
/* Prázdné buňky (pomlčka) */
.tbl-servers .cell-empty {
    color: #9ca3af;
    font-size: 0.8rem;
}

/* ---------- Admin ---------- */
.admin-block {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.admin-block h3 {
    color: #0891b2;
    font-size: 1.125rem;
    margin-bottom: 0.875rem;
}
.inline-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.inline-form input, .inline-form select {
    padding: 0.5rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    flex: 1;
    min-width: 160px;
}
.inline-form input:focus, .inline-form select:focus {
    outline: 2px solid #0891b2;
    outline-offset: -1px;
}
.inline-form button {
    padding: 0.5rem 1.25rem;
    background: #0891b2;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    flex-shrink: 0;
}
.inline-form button:hover { background: #0e7490; }

.alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.alert.success { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.alert.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert.info    { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }

/* Role badge v topbaru */
.topbar .role-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    background: rgba(8, 145, 178, 0.25);
    color: #67e8f9;
    border-radius: 10px;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Disabled action button */
.action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.action-btn:disabled:hover {
    border-color: #d1d5db;
    background: white;
}

.empty-state {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    color: #6b7280;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.empty-state a { margin-left: 0.5rem; }

/* ---------- Changelog stránka ---------- */
.changelog {
    max-width: 880px;
    margin: 0 auto;
}
.changelog-entry {
    background: white;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border-left: 3px solid #d1d5db;
}
.changelog-entry.is-current {
    border-left-color: #0891b2;
    background: #f0fdff;
}
.changelog-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.changelog-version {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: #0891b2;
    font-weight: 600;
    font-size: 0.95rem;
}
.changelog-date {
    color: #6b7280;
    font-size: 0.8rem;
}
.changelog-tag {
    background: #cffafe;
    color: #0891b2;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.changelog-title {
    color: #111827;
    font-size: 1.05rem;
    margin: 0 0 0.625rem;
    font-weight: 600;
}
.changelog-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.55;
}
.changelog-list li {
    margin-bottom: 0.4rem;
}
.changelog-list li::marker {
    color: #9ca3af;
}

/* Footer v login boxu */
.login-footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
    color: #9ca3af;
    font-size: 0.7rem;
    text-align: center;
}

/* ---------- Modal dialog (zápis úkonu) ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 20, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    /* Modal je teď flex container s 3 zónami: sticky header, scrollable body, sticky footer.
       Padding přesunut dovnitř jednotlivých zón. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
/* Header (h3 + .modal-server + .modal-info + ostatní info bloky) - sticky nahoře */
.modal > h3 {
    color: #0891b2;
    font-size: 1.1rem;
    margin: 0;
    padding: 1.5rem 1.75rem 0.4rem;
    flex-shrink: 0;
}
.modal > .modal-server {
    color: #4b5563;
    font-size: 0.85rem;
    margin: 0;
    padding: 0 1.75rem 0.5rem;
    flex-shrink: 0;
}
.modal > .modal-info {
    margin: 0 1.75rem 0.6rem;
    flex-shrink: 0;
}
.modal > .existing-events,
.modal > .collision-warning {
    margin: 0 1.75rem 0.5rem;
    flex-shrink: 0;
}
/* Form vyplňuje zbytek a sám je flex container pro body + footer */
.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* Wrapper pro scrollable body - obklopí všechen obsah formu kromě modal-buttons */
.modal-form-body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 1.75rem 0.5rem;
    flex: 1;
    min-height: 0;
}

.modal h3 {
    color: #0891b2;
    font-size: 1.1rem;
}
.modal-customer {
    /* Read-only kontext zákazníka v hlavičce modalu (od 2.95).
       Decentní cyan podtisk – aby user na první pohled věděl, pro koho zápis ukládá. */
    color: #155e75;
    font-size: 0.82rem;
    background: linear-gradient(90deg, #ecfeff 0%, transparent 100%);
    border-left: 3px solid #0891b2;
    padding: 0.4rem 0.7rem;
    margin: 0.5rem 0 0.4rem;
    border-radius: 0 6px 6px 0;
    font-weight: 500;
}
.modal-server {
    color: #4b5563;
    font-size: 0.85rem;
}
.modal-info {
    background: #fef3c7;
    color: #78350f;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    border-left: 3px solid #f59e0b;
}
.modal label {
    display: block;
    margin-bottom: 0.875rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #4b5563;
}
.modal-optional {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.75rem;
}

/* Panel „Záznamy u zákazníka dnes" v dialogu klikacích úkonů */
.existing-events {
    margin: 0.5rem 0 0.875rem;
    padding: 0.6rem 0.875rem;
    background: #f0f9ff;
    border-left: 3px solid #0891b2;
    border-radius: 6px;
    font-size: 0.8rem;
}
.existing-events-title {
    color: #0e7490;
    margin-bottom: 0.4rem;
}
.existing-events-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.existing-events-list li {
    padding: 0.15rem 0;
    color: #4b5563;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
}
.existing-events-list li::before {
    content: '·';
    margin-right: 0.4rem;
    color: #0891b2;
    font-weight: bold;
}

/* Varování při časové kolizi */
.collision-warning {
    margin: 0.5rem 0 0.875rem;
    padding: 0.7rem 0.875rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    color: #991b1b;
    font-size: 0.85rem;
    line-height: 1.4;
}
.btn-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Avatar uživatele === */
/* Společný styl pro <img> i <span> (iniciály) variantu */
.user-avatar {
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* OEM partner logo místo avatara - bílé pozadí + zaoblené rohy
   (logos s transparencí by se zlilo s tmavým topbarem, kruh by ořízlo logo) */
.user-avatar-oem-logo {
    border-radius: 8px;
    background: white;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1px solid rgba(255,255,255,0.4);
    box-sizing: border-box;
}
.user-avatar-oem-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
/* Iniciály ve fallback kruhu (když uživatel nemá fotku) */
.user-avatar-initials {
    color: white;
    font-weight: 600;
    text-align: center;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* V navigačním panelu - avatar + jméno vedle sebe */
.user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.user .user-avatar {
    margin-right: 0.1rem;
}

/* Akce pro upload/smazání avatara v adminu */
.avatar-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.avatar-upload-form {
    display: inline-flex;
    margin: 0;
}
.avatar-upload-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.avatar-upload-label:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}
.avatar-delete-btn {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    line-height: 1;
}
.avatar-delete-btn:hover {
    background: #fee2e2;
    border-color: #f87171;
}

/* Badge „heslo nenastaveno" v tabulce uživatelů */
.no-password-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: help;
    white-space: nowrap;
}

/* === Role pills - barevné odlišení rolí v Nastavení → Uživatelé === */
.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.65rem 0.22rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
}
.role-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    flex: 0 0 7px;
}
/* Management - teplé/výrazné barvy (CEO = zlato, ředitelé = fialky/růžové) */
.role-pill.role-ceo            { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border-color: #fcd34d; }
.role-pill.role-tech_director  { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #5b21b6; border-color: #c4b5fd; }
.role-pill.role-ops_director   { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #9f1239; border-color: #f9a8d4; }
/* Provoz - studené/jistotní barvy */
.role-pill.role-admin          { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; border-color: #fca5a5; }
.role-pill.role-office         { background: linear-gradient(135deg, #fef9c3, #fef08a); color: #854d0e; border-color: #fde68a; }
.role-pill.role-hr_manager     { background: linear-gradient(135deg, #ffe4e6, #fecdd3); color: #9f1239; border-color: #fda4af; }
.role-pill.role-technician     { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; border-color: #93c5fd; }
.role-pill.role-monitoring     { background: linear-gradient(135deg, #cffafe, #a5f3fc); color: #155e75; border-color: #67e8f9; }
/* Externí - tlumeně */
.role-pill.role-customer,
.role-pill.role-customer_approver { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
/* OEM partner - cyan/teal (jako celý OEM branding) */
.role-pill.role-oem_partner    { background: linear-gradient(135deg, #ecfeff, #cffafe); color: #0e7490; border-color: #67e8f9; }

/* === Status pill (aktivní/neaktivní) === */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    flex: 0 0 9px;
}
.status-pill.is-active   { color: #10b981; }
.status-pill.is-inactive { color: #9ca3af; }
.status-pill.is-inactive::before { box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.15); }

/* Flash info (modrý/zelený) - na rozdíl od flash-error */
.flash-info {
    background: #ecfeff;
    border-left: 3px solid #0891b2;
    color: #155e75;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Sekce „Restart mimo pracovní dobu" v dialogu klikacích úkonů */
.restart-section {
    margin: 1rem 0 0.875rem;
    padding: 0.875rem 1rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
}
.restart-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0 !important;
    color: #9a3412 !important;
}
.restart-toggle input[type=checkbox] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.restart-fields {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px dashed #fed7aa;
}
.restart-fields label {
    margin-bottom: 0 !important;
}

/* === Sekce „Nahlásit problém" v action modalu - viditelná jen pro kontrolní typy úkonů === */
.report-issue-section {
    margin: 1rem 0 0.875rem;
    padding: 0.875rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}
.report-issue-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0 !important;
    color: #991b1b !important;
}
.report-issue-toggle input[type=checkbox] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #dc2626;
}
.report-issue-fields {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px dashed #fecaca;
}
.report-issue-fields label {
    margin-bottom: 0.5rem !important;
}
.report-issue-fields textarea {
    resize: vertical;
}

/* === Banner v detailu ticketu - „vzniklo z kontroly serveru" ===
   Zobrazuje se nad sekcí Popis požadavku, pokud má ticket triggered_by_event_id. */
.ticket-origin-banner {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    color: #78350f;
    font-size: 0.9rem;
    line-height: 1.4;
}
.ticket-origin-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Two-column row inside modal (start + duration, datum + čas) */
.modal .form-row {
    display: flex;
    gap: 0.75rem;
}
.modal .form-row label {
    flex: 1;
    min-width: 0;
}

/* === Custom autocomplete (zákazník v dialogu i ve filtru) === */
.autocomplete-wrap {
    position: relative;
    display: block;
}
.autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 6px 12px -6px rgba(0, 0, 0, 0.12);
    max-height: 320px;
    overflow-y: auto;
    font-family: inherit;
    text-align: left;
    /* Dropdown se vznáší nad ostatním obsahem */
}
.autocomplete-item {
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #111827;
    border-bottom: 1px solid #f3f4f6;
    line-height: 1.4;
    text-align: left;
    font-family: inherit;
    transition: background-color 0.1s;
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item.active {
    background: #ecfeff;
    color: #0891b2;
}
.autocomplete-item .ac-code {
    display: inline-block;
    min-width: 4.5rem;
    font-weight: 700;
    color: #0891b2;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.82rem;
}
.autocomplete-item .ac-sep {
    color: #d1d5db;
    margin: 0 0.4rem;
}
.autocomplete-item .ac-name {
    color: inherit;
}
.autocomplete-item.active .ac-code {
    color: #0e7490;
}
.autocomplete-empty {
    padding: 0.7rem 0.85rem;
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
    text-align: left;
}

/* .modal rodina – původní (kompaktní) modaly */
.modal input[type=text],
.modal input[type=number],
.modal input[type=date],
.modal input[type=time],
.modal input[type=email],
.modal input[type=password],
.modal input[type=search],
.modal select,
.modal textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    background: white;
    color: #111827;
    /* Sjednotit výšku napříč všemi typy inputů */
    height: 38px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal textarea {
    height: auto;
    resize: vertical;
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

/* .modal-content rodina – větší/vzdušnější modaly (Přidat software apod.).
   Hodnoty matchují .modal-content input[type=text] definici dál v souboru
   (řádek ~6781), aby selecty seděly velikostí k textovým inputům ve stejném modalu. */
.modal-content select,
.modal-content textarea {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    box-sizing: border-box;
    background: white;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal-content textarea {
    resize: vertical;
}
.modal-content select:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}

/* 3.92/3.93: modernizace selectů ve VŠECH variantách modalů – odstraníme nativní
   OS rendering (Windows hranaté šipky atd.) a nahradíme vlastní SVG šipkou.
   Toto pravidlo přidává jen appearance + šipku + cursor; ostatní (padding, border, font)
   řeší výše rodinné bloky podle typu modalu. */
.modal select,
.modal-content select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem; /* prostor pro custom šipku vpravo */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
}
.modal select:hover,
.modal-content select:hover {
    border-color: #94a3b8;
}
/* Time selects mají užší optimální šířku ale v gridu se roztáhnou na 100% */
.modal .time-select {
    font-variant-numeric: tabular-nums;
}
/* Modal footer s tlačítky - vždy viditelný dole, oddělený border-top + jemný stín jako vizuální separátor.
   Pokud uvnitř formu, drží se na spodku flex containeru (nescrolluje se s obsahem). */
.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    /* Dolní zaoblení modalu (aby tlačítka neměly hranatý spodek) */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.modal-buttons button {
    padding: 0.55rem 1.4rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: all 0.15s ease;
}
.modal-buttons .btn-cancel {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.modal-buttons .btn-cancel:hover { background: #e5e7eb; }

.modal-buttons .btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}
.modal-buttons .btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.modal-buttons .btn-danger {
    background: white;
    color: #dc2626;
    border: 1px solid #fca5a5;
}
.modal-buttons .btn-danger:hover { background: #fee2e2; }
.modal-buttons .btn-save {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25);
}
.modal-buttons .btn-save:hover {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
    transform: translateY(-1px);
}
.modal-buttons .btn-save:active {
    transform: translateY(0);
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .topbar-inner {
        flex-wrap: wrap;
        height: auto;
        padding: 0.75rem;
        gap: 0.5rem;
    }
    .topbar h1 { width: 100%; font-size: 1rem; }
    .topbar nav { order: 2; flex-wrap: wrap; }
    .topbar .user { font-size: 0.8rem; }
    main { padding: 0.875rem; }
    .server-list { grid-template-columns: 1fr; }
    .server-actions { grid-template-columns: 1fr; }
    .filters label, .filters input, .filters select { width: 100%; }
    .filters input, .filters select { min-width: 0; }
    .data-table { font-size: 0.8rem; display: block; overflow-x: auto; }
    .inline-form input, .inline-form select { min-width: 0; }
}

/* ========================================================================
   === Uživatelé - grid dlaždic (Nastavení → Uživatelé) ===================
   ========================================================================
   Místo tabulky s úzkými řádky používáme grid karet. Každý uživatel
   = jedna velká dlaždice s velkým avatarem nahoře, jménem, rolí, e-mailem
   a tlačítky pro akce. První dlaždice je "+ Přidat uživatele". */

.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.user-card {
    position: relative;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.user-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #d1d5db;
}
.user-card.is-inactive {
    opacity: 0.65;
    background: #fafafa;
}
.user-card.is-inactive:hover { opacity: 0.9; }

/* Avatar nahoře */
.user-card-avatar-wrap {
    position: relative;
    margin-bottom: 0.6rem;
}
.user-card-avatar-wrap .user-avatar {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Status puntík v rohu avataru */
.user-status-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.user-status-dot.is-active { background: #10b981; }
.user-status-dot.is-inactive { background: #9ca3af; }

/* Avatar upload buttons - subtle pod avatarem */
.user-card-avatar-actions {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    height: 1.6rem;
}
.user-card:hover .user-card-avatar-actions { opacity: 1; }
.user-card.is-editing .user-card-avatar-actions { opacity: 1; }

.user-card-avatar-actions .avatar-upload-form { display: inline-flex; }
.user-card-avatar-actions .avatar-upload-label {
    font-size: 0.7rem;
    color: #6b7280;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.user-card-avatar-actions .avatar-upload-label:hover { background: #ecfeff; color: #0e7490; }
.user-card-avatar-actions .avatar-delete-btn {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
}
.user-card-avatar-actions .avatar-delete-btn:hover { background: #fee2e2; }

/* Jméno - hlavní nadpis dlaždice */
.user-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.15rem;
    line-height: 1.3;
    word-break: break-word;
}
.user-self-badge {
    display: inline-block;
    margin-left: 0.35rem;
    background: #ecfeff;
    color: #0e7490;
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    vertical-align: middle;
}

/* Login - menší pod jménem */
.user-card-login {
    font-size: 0.82rem;
    color: #6b7280;
    margin-bottom: 0.7rem;
}
.user-card-login code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8rem;
}

/* Role select */
.user-card-role { width: 100%; margin-bottom: 0.7rem; }
.user-card-role select {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 0.85rem;
    background: white;
    cursor: pointer;
    color: #111827;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.user-card-role select:hover { border-color: #94a3b8; }
.user-card-role select:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}

/* E-mail */
.user-card-email {
    width: 100%;
    font-size: 0.82rem;
    margin-bottom: 0.7rem;
    word-break: break-word;
    line-height: 1.4;
}
.user-card-email a {
    color: #0891b2;
    text-decoration: none;
}
.user-card-email a:hover { text-decoration: underline; }
.user-card-email .no-email { color: #9ca3af; font-style: italic; }

/* Heslo upozornění */
.user-card-pwd-warning {
    width: 100%;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
}

/* Akce - vertikální stack */
.user-card-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;        /* push k spodku */
    padding-top: 0.7rem;
    border-top: 1px solid #f3f4f6;
}
.user-card-actions .inline-action { margin: 0; display: contents; }

.btn-card-action {
    display: block;
    width: 100%;
    padding: 0.5rem 0.8rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #374151;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.btn-card-action:hover {
    background: #ecfeff;
    border-color: #67e8f9;
    color: #0e7490;
}
.btn-card-action-secondary {
    background: transparent;
    border-color: transparent;
    color: #6b7280;
}
.btn-card-action-secondary:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Details/summary pro "Nastavit heslo ručně" - inline rozbalovací form */
.user-card-details summary { list-style: none; }
.user-card-details summary::-webkit-details-marker { display: none; }
.user-card-pwd-form {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.user-card-pwd-form input {
    width: 100%;
    padding: 0.5rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 0.85rem;
    background: white;
    color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    box-sizing: border-box;
    font-family: inherit;
}
.user-card-pwd-form input:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}
.user-card-pwd-form .btn-save {
    width: 100%;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    border-radius: 999px;
    background: #0e7490;
    color: white;
    border: 1px solid #0e7490;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.user-card-pwd-form .btn-save:hover {
    background: #155e75;
    box-shadow: 0 2px 6px rgba(14,116,144,0.25);
}

/* Edit režim - inline form místo zobrazení */
.user-card.is-editing {
    border-color: #0891b2;
    background: #f0fdfa;
}
.user-edit-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}
.user-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: #4b5563;
    font-weight: 600;
}
.user-edit-form label span {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-size: 0.7rem;
}
.user-edit-form input,
.user-edit-form select,
.user-edit-form textarea {
    padding: 0.55rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;          /* pilulkový tvar pro inputy a selecty */
    font-size: 0.9rem;
    width: 100%;
    background: white;
    color: #111827;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    box-sizing: border-box;
}
.user-edit-form select {
    /* Default <select> má v některých browserech vlastní hranatý vzhled - vynutíme appearance:none */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2rem;
    cursor: pointer;
}
/* Disabled (read-only) input - např. login v editaci helpdesk uživatele */
.user-edit-form input:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}
.user-edit-form input:not(:disabled):focus,
.user-edit-form select:focus,
.user-edit-form textarea:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}
.user-edit-form input:not(:disabled):hover,
.user-edit-form select:hover,
.user-edit-form textarea:hover {
    border-color: #94a3b8;
}

.user-edit-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.user-edit-actions .btn-save,
.user-edit-actions .btn-cancel {
    flex: 1;
    padding: 0.55rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    border-radius: 999px;          /* pilulkové tlačítka */
    font-weight: 600;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.user-edit-actions .btn-save {
    background: #0e7490;
    color: white;
    border: 1px solid #0e7490;
}
.user-edit-actions .btn-save:hover {
    background: #155e75;
    box-shadow: 0 2px 6px rgba(14,116,144,0.25);
}
.user-edit-actions .btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-edit-actions .btn-cancel:hover {
    background: #f3f4f6;
    color: #374151;
}

/* === "Přidat uživatele" karta === */
.user-card-add {
    border: 2px dashed #cbd5e1;
    background: #fafafa;
    align-items: stretch;
    justify-content: center;
    min-height: 320px;
    padding: 0;
}
.user-card-add:hover {
    border-color: #0891b2;
    background: #ecfeff;
}
.user-card-add.is-open {
    border-style: solid;
    border-color: #0891b2;
    background: white;
    align-items: stretch;
    text-align: left;
}

.add-user-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
    padding: 1rem;
    min-height: 320px;
}
.add-user-trigger:hover { color: #0e7490; }
.add-user-trigger .plus-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: white;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
}
.user-card-add:hover .plus-icon { background: white; }
.add-user-trigger .add-label {
    font-size: 0.95rem;
    font-weight: 600;
}

.add-user-form {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}
.add-user-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.add-user-field span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
}
.add-user-field input,
.add-user-field select {
    padding: 0.55rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;          /* pilulky stejně jako v edit formu */
    font-size: 0.9rem;
    width: 100%;
    background: white;
    color: #111827;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    box-sizing: border-box;
}
.add-user-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2rem;
    cursor: pointer;
}
.add-user-field input:focus,
.add-user-field select:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}
.add-user-field input:hover,
.add-user-field select:hover {
    border-color: #94a3b8;
}
/* Autocomplete v add-user-field potřebuje stejný styl - ale autocomplete-wrap je <div>, ne <input> */
.add-user-field .autocomplete-wrap input[type="text"] {
    padding: 0.55rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 0.9rem;
    width: 100%;
    background: white;
    color: #111827;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    box-sizing: border-box;
}
.add-user-field .autocomplete-wrap input[type="text"]:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}

.add-user-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.add-user-actions .btn-primary,
.add-user-actions .btn-cancel {
    flex: 1;
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.add-user-actions .btn-primary {
    background: #0e7490;
    color: white;
    border: 1px solid #0e7490;
}
.add-user-actions .btn-primary:hover {
    background: #155e75;
    box-shadow: 0 2px 6px rgba(14,116,144,0.25);
}
.add-user-actions .btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-user-actions .btn-cancel:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Mobile - jeden sloupec */
@media (max-width: 640px) {
    .users-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   === Legenda rolí (pod gridem dlaždic uživatelů) ========================
   ======================================================================== */
.role-legend {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
}
.role-legend-title {
    margin: 0 0 0.85rem 0;
    color: #6b7280;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.role-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.role-legend-list li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: #374151;
    line-height: 1.5;
}
.role-legend-list .role-pill {
    flex: 0 0 auto;
    min-width: 130px;
    text-align: center;
}
.role-legend-desc { flex: 1; }

/* ========================================================================
   === Helpdesk uživatelé - sekce per zákazník + filtr ====================
   ======================================================================== */

/* Filtr nahoře */
.hd-users-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ecfeff 100%);
    border: 1px solid #e0f2fe;
    border-radius: 10px;
}
.hd-filter-label {
    font-size: 0.9rem;
    color: #0e7490;
    font-weight: 600;
    white-space: nowrap;
}

/* Input v hd filtr - velký, zaoblený, s focus ringem */
.hd-users-filter .autocomplete-wrap input[type="text"] {
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    border: 1px solid #cbd5e1;
    border-radius: 999px;          /* plně kulatá pilulka */
    background: white;
    color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.hd-users-filter .autocomplete-wrap input[type="text"]::placeholder {
    color: #9ca3af;
}
.hd-users-filter .autocomplete-wrap input[type="text"]:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}
.hd-users-filter .autocomplete-wrap input[type="text"]:hover {
    border-color: #94a3b8;
}

/* Vymazat filtr tlačítko - jemné */
.hd-users-filter #hd-filter-clear {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 999px;
    background: white;
    border: 1px solid #cbd5e1;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}
.hd-users-filter #hd-filter-clear:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.hd-filter-status {
    font-size: 0.85rem;
    color: #9ca3af;
    font-style: italic;
}

/* Sekce zákazníka */
.hd-customer-section {
    margin-bottom: 1.75rem;
}
.hd-customer-section:last-child { margin-bottom: 0; }

.hd-customer-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: #ecfeff;
    border-left: 3px solid #0e7490;
    border-radius: 6px;
    margin-bottom: 0.85rem;
}
.hd-customer-code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0e7490;
    background: white;
    padding: 2px 8px;
    border-radius: 4px;
}
.hd-customer-name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    flex: 1;
}
.hd-customer-count {
    font-size: 0.78rem;
    color: #0e7490;
    font-weight: 500;
}
.hd-customer-warning {
    color: #dc2626;
    font-weight: 600;
    flex: 1;
}

/* Add-section: trochu odlišená od customer sekcí */
.hd-add-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #e5e7eb;
}
.hd-add-header {
    background: #fafafa;
    border-left-color: #9ca3af;
}
.hd-add-header .hd-customer-name {
    color: #6b7280;
    font-weight: 500;
}

/* Empty state */
.empty-state {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    background: #fafafa;
    border-radius: 8px;
    border: 1px dashed #e5e7eb;
    margin: 1rem 0;
}

/* === Drobnosti pro helpdesk karty ===
   Karta má jen role badge (ne select - role se mění v editu).
   A indikátor "měsíční report". */
.user-card-role-badge {
    width: 100%;
    text-align: center;
    margin-bottom: 0.7rem;
}
.user-card-role-badge .role-pill {
    display: inline-block;
}
.user-card-report-flag {
    width: 100%;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 0.7rem;
    text-align: center;
}

/* Edit checkbox v helpdesk edit formu */
.user-edit-checkbox {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
    cursor: pointer;
    padding: 0.6rem 0.85rem;
    background: #f0fdfa;
    border-radius: 999px;
    border: 1px solid #99f6e4;
    transition: all 0.15s;
}
.user-edit-checkbox:hover {
    background: #ecfeff;
    border-color: #67e8f9;
}
.user-edit-checkbox input[type="checkbox"] {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    accent-color: #0e7490;
    cursor: pointer;
}
.user-edit-checkbox span {
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #0e7490 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* ========================================================================
   === OEM partneři (Nastavení → OEM partneři) ============================
   ======================================================================== */

/* OEM partner karta - speciální vzhled (ikona řetězu místo avataru) */
.user-card.oem-card {
    text-align: center;
}
.oem-card-icon {
    position: relative;
    width: 96px;
    height: 96px;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.15);
}

/* Velký kód jako badge - velký font, monospace */
.oem-code-badge {
    display: inline-block;
    background: #0e7490;
    color: white;
    padding: 4px 14px;
    border-radius: 999px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.oem-card.is-inactive .oem-code-badge {
    background: #94a3b8;
}

/* Název */
.oem-name {
    font-size: 0.95rem;
    color: #111827;
    font-weight: 500;
    margin: 0.4rem 0 0.4rem;
    text-align: center;
    line-height: 1.35;
}
.oem-note {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    text-align: center;
    margin-bottom: 0.5rem;
}
.oem-customer-count {
    font-size: 0.85rem;
    color: #4b5563;
    text-align: center;
    margin-bottom: 0.7rem;
    padding: 0.4rem 0.6rem;
    background: #f9fafb;
    border-radius: 999px;
}
.oem-customer-count .empty-count {
    color: #9ca3af;
    font-style: italic;
}

/* ========================================================================
   === OEM/sdílený badges na zákazníkovi ===================================
   ======================================================================== */

.customer-badges-row {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.customer-oem-badge,
.customer-shared-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.customer-oem-badge {
    background: #ecfeff;
    color: #0e7490;
    border: 1px solid #67e8f9;
}
.customer-shared-badge {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ========================================================================
   === OEM logo (kartonkce v Nastavení → OEM partneři) ====================
   ======================================================================== */

/* Logo místo ikonky řetězu - obdélníkové, max 96×56 */
.oem-logo-img {
    max-width: 96px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* Pokud nemá logo, zobrazí se emoji řetěz (fallback) */
.oem-logo-fallback {
    font-size: 42px;
    line-height: 1;
}

/* Logo container - musí pojmout buď čtvercovou emoji nebo obdélníkové logo */
.oem-card .oem-card-icon {
    width: 110px;
    height: 78px;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-radius: 12px;       /* místo 50% kulatého kruhu - obdélník */
    padding: 8px 12px;
    box-sizing: border-box;
    overflow: hidden;
}
/* Když OEM partner nemá logo, vrátíme kulatý kruh pro emoji */
.oem-card .oem-card-icon:has(.oem-logo-fallback) {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

/* Status puntík v rohu - nyní na obdélníkovém boxu */
.oem-card .oem-card-icon .user-status-dot {
    bottom: 4px;
    right: 4px;
}

/* ========================================================================
   === Speciální úkoly - kopírovat do měsíce (modal dialog) ===============
   ======================================================================== */

/* Tlačítko v actions sloupci */
.btn-copy-event {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #ecfeff;
    color: #0e7490;
    border: 1px solid #67e8f9;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0 0.25rem;
    font-family: inherit;
}
.btn-copy-event:hover {
    background: #0e7490;
    color: white;
    border-color: #0e7490;
    box-shadow: 0 2px 6px rgba(14,116,144,0.25);
}

/* Modal dialog (HTML5 <dialog> element) */
.copy-event-modal {
    border: none;
    border-radius: 14px;
    padding: 0;
    max-width: 460px;
    width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.1);
    background: white;
}
.copy-event-modal::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}

.copy-event-modal .copy-event-form {
    position: relative;
    padding: 1.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.copy-event-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    color: #9ca3af;
    font-size: 1.1rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.copy-event-modal-close:hover {
    background: #f3f4f6;
    color: #ef4444;
}

/* Quick buttons - +1, +2, +3 měsíce */
.copy-quick-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.copy-quick-btn {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.92rem;
    color: #111827;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    font-weight: 500;
}
.copy-quick-btn:hover {
    background: #ecfeff;
    border-color: #67e8f9;
    color: #0e7490;
    transform: translateX(2px);
    box-shadow: 0 2px 6px rgba(14,116,144,0.1);
}
.copy-quick-btn small {
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 400;
}
.copy-quick-btn:hover small {
    color: #0891b2;
}

/* ========================================================================
   === Info panel - reusable modrý info box ===============================
   ======================================================================== */

/* Použití: <div class="info-panel">…obsah s vysvětlením…</div>
   Vhodné pro úvodní hint v Nastavení tabech místo prostého <p class="hint">. */
.info-panel {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.95rem 1.15rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-left: 4px solid #2563eb;
    border-radius: 10px;
    margin: 0.5rem 0 1.5rem;
    color: #1e3a8a;
    font-size: 0.92rem;
    line-height: 1.55;
}
.info-panel::before {
    content: "ℹ️";
    font-size: 1.3rem;
    line-height: 1;
    flex: 0 0 auto;
    margin-top: 0.05rem;
}
.info-panel strong { color: #1e40af; }
.info-panel code {
    background: #ffffff;
    color: #1e40af;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85em;
    border: 1px solid #bfdbfe;
}
.info-panel a { color: #1d4ed8; font-weight: 600; }

/* ========================================================================
   === Klasifikace zákazníka - editor (Nastavení) =========================
   ======================================================================== */

/* Picker A-F jako řádek velkých barevných dlaždic */
.classification-grade-picker {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.85rem;
}
.classification-grade-option {
    flex: 0 0 auto;
    cursor: pointer;
    user-select: none;
}
.classification-grade-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.classification-grade-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--grade-bg, #f3f4f6);
    color: var(--grade-text, #6b7280);
    font-size: 1.6rem;
    font-weight: 700;
    border: 3px solid transparent;
    opacity: 0.45;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.classification-grade-option:hover .classification-grade-letter {
    opacity: 0.85;
    transform: translateY(-2px);
}
.classification-grade-option input:checked + .classification-grade-letter {
    opacity: 1;
    border-color: white;
    box-shadow: 0 0 0 3px var(--grade-bg), 0 4px 12px rgba(0,0,0,0.15);
    transform: scale(1.05);
}
.classification-grade-option.classification-grade-none .classification-grade-letter {
    background: #f3f4f6;
    color: #9ca3af;
    border: 2px dashed #d1d5db;
}
.classification-grade-option.classification-grade-none input:checked + .classification-grade-letter {
    background: #fef3c7;
    color: #92400e;
    border-style: solid;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px #fef3c7, 0 4px 12px rgba(0,0,0,0.15);
}

/* Pozitiva / negativa - 2 sloupce textareas */
.classification-pn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.classification-pn { padding: 0; }
.classification-pn small {
    display: block;
    color: #9ca3af;
    font-size: 0.75rem;
    margin: 0.1rem 0 0.3rem;
}
.classification-textarea {
    width: 100%;
    min-height: 5.2rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.4;
    resize: vertical;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.classification-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}
.classification-positives:focus { border-color: #15803d; }
.classification-negatives:focus { border-color: #b91c1c; }

/* ========================================================================
   === Klasifikace zákazníka - dlaždice na customer.php ===================
   ======================================================================== */

.customer-classification-card {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    margin: 1rem 0 1.5rem;
    padding: 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Velká barevná dlaždice s písmenem A-F */
.classification-grade-tile {
    flex: 0 0 auto;
    width: 130px;
    min-height: 130px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: center;
    padding: 0.5rem;
}
.classification-grade-tile-letter {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 0.3rem;
}
.classification-grade-tile-caption {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: 0.85;
}

/* Sloupce pozitiva/negativa */
.classification-pn-cols {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    min-width: 0;
}
.classification-pn-col h5 {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.classification-pn-col-positive h5 { color: #15803d; }
.classification-pn-col-negative h5 { color: #b91c1c; }
.classification-pn-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.classification-pn-col ul li {
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.3rem;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.4;
}
.classification-pn-col-positive ul li {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    color: #14532d;
}
.classification-pn-col-negative ul li {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    color: #7f1d1d;
}
.classification-empty {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.82rem;
    margin: 0.2rem 0 0;
}

/* CTA výzva pokud klasifikace ještě není */
.customer-classification-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.5rem;
    background: #fafafa;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    color: #6b7280;
    font-size: 0.88rem;
}
.btn-link-tiny {
    font-size: 0.85rem;
    color: #0e7490;
    text-decoration: none;
    font-weight: 600;
}
.btn-link-tiny:hover { text-decoration: underline; }

/* Mobil: jeden sloupec */
@media (max-width: 720px) {
    .customer-classification-card { flex-direction: column; }
    .classification-grade-tile { width: 100%; min-height: 90px; flex-direction: row; gap: 1rem; padding: 1rem 1.5rem; }
    .classification-grade-tile-letter { font-size: 3rem; margin: 0; }
    .classification-pn-cols { grid-template-columns: 1fr; }
    .classification-pn-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   === Sdílení zákazníka s OEM partnery (multi-checkbox v editoru) ========
   ======================================================================== */
.shared-oem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}
.shared-oem-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
}
.shared-oem-option:hover {
    background: #ecfeff;
    border-color: #67e8f9;
}
.shared-oem-option.is-checked,
.shared-oem-option:has(input:checked) {
    background: #ecfeff;
    border-color: #0e7490;
    box-shadow: 0 1px 3px rgba(14,116,144,0.15);
}
.shared-oem-option input[type="checkbox"] {
    accent-color: #0e7490;
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
}
.shared-oem-code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0e7490;
    background: white;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #cffafe;
    flex: 0 0 auto;
}
.shared-oem-name {
    color: #4b5563;
    font-size: 0.85rem;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shared-oem-option.is-checked .shared-oem-name,
.shared-oem-option:has(input:checked) .shared-oem-name {
    color: #1e3a8a;
    font-weight: 500;
}

/* === Server roles fieldset (multi-checkbox v editoru serveru) === */
.server-roles-fieldset {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}
.server-roles-fieldset legend {
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}
.server-roles-fieldset .legend-hint {
    color: #9ca3af;
    font-weight: 400;
    font-size: 0.78rem;
    margin-left: 0.3rem;
}
.server-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.server-role-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
}
.server-role-checkbox:hover {
    background: #ecfeff;
    border-color: #67e8f9;
}
.server-role-checkbox:has(input:checked) {
    background: #ecfeff;
    border-color: #0e7490;
    box-shadow: 0 1px 3px rgba(14,116,144,0.15);
}
.server-role-checkbox input[type="checkbox"] {
    accent-color: #0e7490;
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
}
.server-role-checkbox .role-checkbox-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.server-role-checkbox .role-checkbox-label small {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 1px;
}
.server-role-checkbox:has(input:checked) .role-checkbox-label {
    color: #0e7490;
    font-weight: 500;
}

/* Usage badge v tabulce serverových rolí */
.usage-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Více role badges v tabulce serverů - aby se vešly vedle sebe */
.col-role .server-role-badge {
    margin: 1px 2px 1px 0;
}

/* ==========================================================================
   Změny u zákazníka (institucionální paměť) + Nástěnka oznámení
   ========================================================================== */

/* Karta posledních změn v detailu zákazníka */
.customer-changes-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.customer-changes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f3f4f6;
}
.customer-changes-header h4 {
    margin: 0;
    color: #0e7490;
    font-size: 0.98rem;
    font-weight: 600;
}
.btn-add-change {
    background: #0e7490;
    color: white;
    border: none;
    /* Sjednoceno s .btn-doc-link a .btn-add-event – stejná výška, font i radius
       (od 2.74). Jen barva a funkce zůstává odlišná. */
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.btn-add-change:hover {
    background: #0c5d75;
}
.customer-changes-empty {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0.5rem 0;
    font-style: italic;
}
.customer-changes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.customer-change-item {
    background: #fafafa;
    border-left: 3px solid #0e7490;
    border-radius: 0 6px 6px 0;
    padding: 0.6rem 0.85rem;
    transition: background 0.15s;
    position: relative;
}
.customer-change-item:hover {
    background: #f0fdfa;
}
.customer-change-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 0.3rem;
    align-items: center;
}
.customer-change-author {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.customer-change-author strong {
    color: #374151;
    font-weight: 600;
}
.customer-change-date {
    color: #9ca3af;
}
.customer-change-source {
    background: #ecfeff;
    color: #0e7490;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
}
.customer-change-desc {
    color: #1f2937;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
}
.customer-change-actions {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.customer-change-item:hover .customer-change-actions {
    opacity: 1;
}
.customer-changes-more {
    margin: 0.85rem 0 0;
    text-align: center;
}
.btn-link-tiny {
    background: transparent;
    border: none;
    color: #0e7490;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}
.btn-link-tiny:hover {
    background: #ecfeff;
}
.btn-link-danger {
    color: #b91c1c;
}
.btn-link-danger:hover {
    background: #fef2f2;
}

/* Modal content base - bílé pozadí, zaoblené rohy, stín, padding.
   Používá se v dashboard.php / customer.php pro nově přidané modaly
   (změny u zákazníka, nástěnka, "zobrazit všechny"). Styly jsou kompatibilní
   se starší třídou .modal použitou ve výkazu / serverech. */
.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    padding: 1.5rem 1.75rem;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.modal-content h3 {
    margin: 0 0 1.1rem;
    color: #0e7490;
    font-size: 1.15rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f3f4f6;
}
.modal-content label {
    display: block;
    margin-bottom: 0.85rem;
    color: #374151;
    font-weight: 500;
    font-size: 0.9rem;
}
.modal-content textarea,
.modal-content input[type="text"],
.modal-content input[type="date"],
.modal-content input[type="time"],
.modal-content input[type="email"],
.modal-content input[type="number"],
.modal-content input[type="tel"],
.modal-content input[type="url"] {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;
    line-height: 1.45;
    resize: vertical;
    background: white;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal-content textarea:focus,
.modal-content input:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 3px rgba(14,116,144,0.15);
}
/* Webkit / Chromium tlačítko pro výběr data – odstranit šedý box,
   nechat jen ikonu kalendáře decentnější. */
.modal-content input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.modal-content input[type="date"]:hover::-webkit-calendar-picker-indicator,
.modal-content input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}
.modal-content .hint {
    color: #6b7280;
    font-size: 0.82rem;
    margin: -0.5rem 0 1rem;
    font-style: italic;
}
.modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}
.modal-actions .btn-primary {
    background: #0e7490;
    color: white;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.modal-actions .btn-primary:hover {
    background: #0c5d75;
}
.modal-actions .btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.55rem 1.2rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.modal-actions .btn-secondary:hover {
    background: #e5e7eb;
}

/* Modal sizes */
.modal-content-md {
    max-width: 600px;
    width: 90%;
}
.modal-content-lg {
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
}
.all-changes-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 0.5rem;
    margin: 0.5rem 0;
}

/* Checkbox "zadokumentovat jako změnu" v dialogu výkazu */
.manual-record-change {
    display: flex !important;
    align-items: flex-start;
    gap: 0.6rem !important;
    padding: 0.75rem 0.9rem !important;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    margin: 0.75rem 0 !important;
    cursor: pointer;
    transition: background 0.15s;
}
.manual-record-change:hover {
    background: #ccfbf1;
}
.manual-record-change input[type="checkbox"] {
    margin: 2px 0 0 0;
    flex: 0 0 auto;
    accent-color: #0e7490;
    cursor: pointer;
}
.manual-record-change span {
    flex: 1;
    line-height: 1.4;
    color: #0f4c52;
}
.manual-record-change strong {
    color: #0e7490;
}
.manual-record-change small {
    display: block;
    color: #4b5563;
    font-size: 0.8rem;
    margin-top: 2px;
    font-weight: 400;
}

/* Dashboard widget: nedávné změny */
.dashboard-changes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dashboard-change-item {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.15s;
}
.dashboard-change-item:hover {
    border-color: #0e7490;
    box-shadow: 0 1px 4px rgba(14,116,144,0.1);
}
.dashboard-change-link {
    display: block;
    padding: 0.6rem 0.85rem;
    text-decoration: none;
    color: inherit;
}
.dashboard-change-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
}
.dashboard-change-customer-code {
    background: #ecfeff;
    color: #0e7490;
    padding: 1px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 600;
}
.dashboard-change-customer-name {
    color: #374151;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-change-date {
    color: #9ca3af;
}
.dashboard-change-desc {
    color: #1f2937;
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 0.2rem 0 0.25rem;
}
.dashboard-change-author {
    color: #6b7280;
    font-size: 0.78rem;
}

/* Dashboard widget: nástěnka */
.dashboard-announcements-card {
    border-top: 3px solid #f59e0b;
}
.dashboard-announcements-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.dashboard-announcement-item {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 0.65rem 0.9rem;
    transition: background 0.15s;
}
.dashboard-announcement-item.is-pinned {
    background: #fef3c7;
    border-left-width: 5px;
}
.dashboard-announcement-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 0.3rem;
}
.dashboard-announcement-author {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.dashboard-announcement-author strong {
    color: #374151;
}
.dashboard-announcement-date {
    color: #9ca3af;
}
.dashboard-announcement-actions {
    margin-left: auto;
    display: flex;
    gap: 0.3rem;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.dashboard-announcement-item:hover .dashboard-announcement-actions {
    opacity: 1;
}
.dashboard-announcement-content {
    color: #1f2937;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
}
.dashboard-announcement-expires {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: #92400e;
    font-weight: 500;
}
.dashboard-card-more {
    margin: 0.85rem 0 0;
    text-align: center;
}

/* === Nástěnka: sekce "Kdo má dovolenou" + sub-titles === */
.board-vacations {
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}
/* Druhá sekce „Kdo bude mít dovolenou" – jen menší odsazení nahoru, žádný extra border-top
   (oddělovač už řeší border-bottom první sekce). */
.board-vacations-followup {
    margin-top: 0.4rem;
}
.board-vacations-title,
.board-announcements-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.6rem;
    letter-spacing: 0.01em;
}
.board-announcements-title {
    margin-top: 0.2rem;
}
.board-vacations-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.board-vacation-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: #f0fdfa;
    border-left: 3px solid #14b8a6;
    border-radius: 0 8px 8px 0;
    font-size: 0.88rem;
    color: #1e293b;
}
.board-vacation-item.is-active {
    background: linear-gradient(90deg, #ccfbf1 0%, #f0fdfa 80%);
    border-left-color: #0d9488;
    font-weight: 500;
}
.board-vacation-name {
    flex: 1;
    color: #0f172a;
}
.board-vacation-term {
    color: #64748b;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    white-space: nowrap;
}
.board-vacation-badge {
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.board-vacation-badge-active {
    background: #0d9488;
    color: white;
}

/* ==========================================================================
   Síťová zařízení (FortiGate, MikroTik, ...) - dlaždice v detailu zákazníka
   ========================================================================== */
.network-devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.network-device-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #6b7280;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    transition: box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.network-device-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.network-device-card.status-current {
    border-left-color: #10b981;
}
.network-device-card.status-outdated {
    border-left-color: #f59e0b;
    background: #fffbeb;
}
.network-device-card.branch-eol,
.network-device-card.status-eol {
    border-left-color: #dc2626;
    background: #fef2f2;
}
.network-device-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.network-device-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.network-device-vendor {
    font-size: 0.72rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.network-device-name {
    font-size: 1rem;
    color: #111827;
    font-weight: 600;
}
.network-device-model {
    font-size: 0.78rem;
    color: #6b7280;
    font-style: italic;
}
.network-device-version {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.network-device-version code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.85em;
    color: #0e7490;
}
.network-device-version .version-latest {
    color: #6b7280;
    font-size: 0.78rem;
}
.network-device-version .version-badge {
    margin-left: auto;
}
.network-device-responsible {
    font-size: 0.78rem;
    color: #6b7280;
}
.network-device-responsible strong {
    color: #374151;
}
.network-device-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}
.btn-network-check {
    background: #0e7490;
    color: white;
    text-decoration: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-network-check:hover {
    background: #0c5d75;
}

/* Dashboard widget statistics */
.network-devices-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.network-devices-stat {
    flex: 1;
    min-width: 100px;
    padding: 0.65rem 0.8rem;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #e5e7eb;
}
.network-devices-stat.ok    { background: #f0fdf4; border-color: #bbf7d0; }
.network-devices-stat.warn  { background: #fffbeb; border-color: #fde68a; }
.network-devices-stat.danger { background: #fef2f2; border-color: #fecaca; }
.network-devices-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0e7490;
    line-height: 1;
}
.network-devices-stat.warn   .network-devices-stat-num { color: #b45309; }
.network-devices-stat.danger .network-devices-stat-num { color: #b91c1c; }
.network-devices-stat-label {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Generic badge variants pro admin tabulku */
.badge.ok    { background: #d1fae5; color: #065f46; }
.badge.warn  { background: #fef3c7; color: #92400e; }
.badge.danger { background: #fee2e2; color: #991b1b; }
.badge.muted { background: #e5e7eb; color: #4b5563; }

/* ==========================================================================
   Síťová zařízení (FortiGate, MikroTik) - dlaždice + dashboard widget
   ========================================================================== */

/* Stylová varianta server-card pro síťová zařízení (zachováme padding/structure) */
.nd-card {
    border-left: 4px solid #0e7490;
}
.nd-card.nd-status-eol,
.nd-card[data-status="eol"] {
    border-left-color: #b91c1c;
}

/* Stavový panel s verzí */
.nd-version-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    padding: 0.6rem 0.85rem;
    margin: 0.6rem 0;
    border-radius: 6px;
    font-size: 0.88rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    align-items: center;
    justify-content: space-between;
}
.nd-version-panel.nd-status-current {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.nd-version-panel.nd-status-outdated {
    background: #fffbeb;
    border-color: #fde68a;
}
.nd-version-panel.nd-status-eol {
    background: #fef2f2;
    border-color: #fca5a5;
}
.nd-version-panel.nd-status-unknown {
    background: #f9fafb;
    border-color: #e5e7eb;
}
.nd-version-current,
.nd-version-latest {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.nd-version-label {
    color: #6b7280;
    font-size: 0.82rem;
}
.nd-version-current strong,
.nd-version-latest strong {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: #111827;
}
.nd-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.nd-status-current .nd-status-badge {
    background: #d1fae5;
    color: #065f46;
}
.nd-status-outdated .nd-status-badge {
    background: #fef3c7;
    color: #92400e;
}
.nd-status-eol .nd-status-badge {
    background: #fecaca;
    color: #991b1b;
}
.nd-status-unknown .nd-status-badge {
    background: #e5e7eb;
    color: #4b5563;
}

/* Vendor badge a model badge - stylované drobnosti */
.nd-vendor-badge {
    background: #ecfeff;
    color: #0e7490;
    border-color: #99f6e4;
}
.nd-model-badge {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}
.nd-ssl-badge {
    background: #f0fdf4;
    color: #15803d;
    border-color: #86efac;
    font-weight: 600;
}

/* Badges row pod popisem zařízení (vendor + model + SSL ...).
 * Badges se zobrazují v přirozené šířce (bez ořezávání). Pokud se nevejdou
 * vedle sebe, zalomí se na další řádek - ale zachovají si plný text. */
.nd-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.nd-badges-row .server-role-badge {
    margin-left: 0;
}

/* Klikací tlačítko údržby - je široké, jeden klik */
.nd-action-btn {
    width: 100%;
}

/* Block "+ Přidat zařízení" – formulář */
.add-network-device-block summary::-webkit-details-marker { display: none; }
.add-network-device-block summary {
    list-style: none;
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid #0e7490;
    border-radius: 6px;
    user-select: none;
}
.add-network-device-block summary:hover {
    background: #ecfeff;
}
.add-network-device-block[open] summary {
    background: #ecfeff;
}
.add-network-device-block .admin-form-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}
.add-network-device-block label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    font-weight: 500;
    gap: 0.25rem;
    color: #374151;
}
.add-network-device-block input,
.add-network-device-block select,
.add-network-device-block textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    font-size: 0.9rem;
    box-sizing: border-box;
    font-family: inherit;
}
.add-network-device-block button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: start;
}

/* === Dashboard widget: zařízení vyžadující update === */
.dashboard-network-devices-card {
    border-top: 3px solid #6366f1;
}
.nd-stats-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.nd-stat-pill {
    flex: 1;
    min-width: 100px;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    text-align: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}
.nd-stat-pill.nd-stat-eol {
    background: #fef2f2;
    border-color: #fca5a5;
}
.nd-stat-pill.nd-stat-outdated {
    background: #fffbeb;
    border-color: #fde68a;
}
.nd-stat-pill.nd-stat-current {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.nd-stat-pill.nd-stat-unknown {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.nd-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
}
.nd-stat-pill.nd-stat-eol .nd-stat-num { color: #991b1b; }
.nd-stat-pill.nd-stat-outdated .nd-stat-num { color: #92400e; }
.nd-stat-pill.nd-stat-current .nd-stat-num { color: #065f46; }
.nd-stat-pill.nd-stat-unknown .nd-stat-num { color: #4b5563; }
.nd-stat-label {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}

.nd-attention-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.nd-attention-item {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    transition: all 0.15s;
}
.nd-attention-item:hover {
    border-color: #0e7490;
}
.nd-attention-item.is-eol {
    border-left: 3px solid #b91c1c;
}
.nd-attention-item.is-outdated {
    border-left: 3px solid #f59e0b;
}
.nd-attention-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.nd-attention-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}
.nd-attention-customer-code {
    background: #ecfeff;
    color: #0e7490;
    padding: 1px 7px;
    border-radius: 3px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 600;
}
.nd-attention-vendor {
    background: #f3f4f6;
    color: #6b7280;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.72rem;
}
.nd-attention-status-eol {
    background: #fecaca;
    color: #991b1b;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
}
.nd-attention-status-outdated {
    background: #fef3c7;
    color: #92400e;
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
}
.nd-attention-name {
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}
.nd-attention-versions {
    color: #6b7280;
    font-size: 0.82rem;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* Klikací panel verze - pro interní+OEM uživatele */
.nd-version-panel.is-clickable {
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.nd-version-panel.is-clickable:hover {
    border-color: #0e7490;
    box-shadow: 0 1px 4px rgba(14, 116, 144, 0.15);
    transform: translateY(-1px);
}
.nd-version-panel.is-clickable:focus {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}
.nd-version-edit-hint {
    margin-left: 0.4rem;
    opacity: 0.5;
    font-size: 0.85rem;
    transition: opacity 0.15s;
}
.nd-version-panel.is-clickable:hover .nd-version-edit-hint {
    opacity: 1;
}

/* Modal pro update firmware */
.modal-content-md {
    max-width: 520px;
}
.modal-content-md .modal-field {
    display: block;
    margin-top: 0.7rem;
}
.modal-content-md .modal-field span {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.3rem;
}

/* ============================================================================
 * HR / Dovolené (vacation.php)
 * ============================================================================ */

.vacation-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem 4rem;
}

/* Záložky */
.vac-tabs {
    display: flex;
    gap: 0.4rem;
    border-bottom: 2px solid #e5e7eb;
    margin: 1.5rem 0 1.5rem;
}
.vac-tabs a {
    padding: 0.6rem 1.1rem;
    color: #6b7280;
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border-bottom: 3px solid transparent;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.vac-tabs a:hover { background: #f3f4f6; color: #111827; }
.vac-tabs a.active {
    color: #0e7490;
    border-bottom-color: #0e7490;
    font-weight: 600;
}
.vac-badge {
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}

/* Stavová karta s nárokem */
.vac-balance-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.vac-balance-card h3 { margin: 0 0 1rem; color: #0e7490; }
.vac-balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
    /* Default `align-items: stretch` v gridu zajistí, že všechny items
       budou stejně vysoké jako ten nejvyšší (s nejdelším labelem). */
}
.vac-balance-item {
    background: #f9fafb;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    /* Vnitřní layout: label nahoře, value vždy dole. Tím se zaručí, že
       čísla jsou napříč items na stejné výšce, i když některé labely
       se zalomí na 2 řádky. */
    display: flex;
    flex-direction: column;
}
.vac-balance-label {
    font-size: 0.78rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}
.vac-balance-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    /* Push down – value sjede na dolní okraj item, na konzistentní pozici. */
    margin-top: auto;
}
.vac-balance-emph .vac-balance-value { color: #0e7490; }
.vac-balance-highlight {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #6ee7b7;
}
.vac-balance-highlight .vac-balance-value { color: #065f46; }

/* Sekce */
.vac-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.vac-section h3 { margin: 0 0 0.6rem; color: #0e7490; }

/* "V přípravě" placeholder pro tab Mzdové ohodnocení */
.vac-coming-soon {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
}
.vac-coming-soon .vac-coming-soon-icon {
    font-size: 3.5rem;
    margin-bottom: 0.8rem;
    opacity: 0.7;
}
.vac-coming-soon h3 {
    margin: 0 0 0.5rem;
    color: #1f2937;
    font-size: 1.4rem;
}
.vac-coming-soon p {
    margin: 0.4rem 0;
    line-height: 1.5;
}
.vac-coming-soon p.hint {
    max-width: 500px;
    margin: 1rem auto 0;
    color: #6b7280;
    font-size: 0.92rem;
}

/* === Mood fotky (admin tab pro správu + výkaz widget) === */
.mood-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}
.mood-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mood-card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}
.mood-card-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f5f9;
    border: 2px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mood-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mood-card-empty {
    color: #94a3b8;
    font-size: 0.78rem;
    font-style: italic;
}
.mood-card-label {
    font-size: 0.85rem;
    text-align: center;
    color: #475569;
    line-height: 1.3;
    min-height: 2.4em;
    display: flex;
    align-items: center;
}
.mood-card-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.mood-upload-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* === Sekce s žádostí o dovolenou === */
.vac-section-request {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

/* === Side-by-side layout: kalendář vlevo, formulář vpravo === */
.vac-request-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;  /* nesmí stretchovat formulář na výšku kalendáře */
    margin-top: 1rem;
}
.vac-request-layout > .vac-calendar-wrap {
    flex: 0 0 720px;  /* kalendář zvětšen z 560px → 720px (od 2.43) – aby se vešly avatary kolizí */
    margin: 0;        /* override default margin */
}
.vac-request-layout > .vac-request-form {
    flex: 1 1 320px;  /* formulář vyplní zbytek šířky, min 320px */
    margin: 0;         /* override default margin */
    max-width: none;   /* override default 560px */
}

/* Na úzkých viewportech (< 1200px) se formulář zalomí pod kalendář */
@media (max-width: 1200px) {
    .vac-request-layout {
        flex-direction: column;
        align-items: center;
    }
    .vac-request-layout > .vac-request-form {
        width: 100%;
        max-width: 720px;
    }
    .vac-request-layout > .vac-calendar-wrap {
        flex: 0 0 auto;
        width: 100%;
        max-width: 720px;
    }
}

/* Kalendář - moderní, vzdušný */
.vac-calendar-wrap {
    margin: 1.2rem auto;
    max-width: 720px;
    background: white;
    border-radius: 16px;
    padding: 1.4rem 1.2rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05),
                0 1px 3px rgba(15, 23, 42, 0.05);
}
.vac-calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding: 0 0.4rem;
}
.vac-calendar-controls strong {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
    flex: 1;
    text-align: center;
}

/* Kruhové navigační šipky */
.vac-cal-nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
.vac-cal-nav:hover {
    background: #0e7490;
    color: white;
    transform: scale(1.05);
}
.vac-cal-nav:active {
    transform: scale(0.95);
}

/* Kalendářní mřížka - bez šedých rámečků, jen vzdušné buňky */
.vac-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.vac-cal-dow {
    background: transparent;
    text-align: center;
    padding: 0.4rem 0;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.vac-cal-empty { background: transparent; }

/* Buňky dnů – čtvercový tvar pro lepší prostor pro avatary kolegů (od 2.43).
   Den číslo je vlevo nahoře, avatary kolegů (max 3 + N) v pravém dolním rohu. */
.vac-cal-day {
    aspect-ratio: 1 / 1;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    user-select: none;
    border-radius: 10px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    position: relative;
    padding: 0.25rem;
}
.vac-cal-day-num {
    position: absolute;
    top: 0.25rem;
    left: 0.4rem;
    font-size: 0.95rem;
    line-height: 1;
}

.vac-cal-clickable { cursor: pointer; }
.vac-cal-clickable:hover {
    background: #e0f2fe;
    color: #0e7490;
}
.vac-cal-clickable:active {
    transform: scale(0.92);
}

.vac-cal-weekend {
    color: #cbd5e1;
    font-weight: 400;
}
.vac-cal-holiday {
    color: #dc2626;
    font-weight: 500;
}
.vac-cal-holiday::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #dc2626;
    border-radius: 50%;
}
.vac-cal-past {
    color: #cbd5e1;
    font-weight: 400;
}
.vac-cal-blocked {
    background: repeating-linear-gradient(45deg, #fef3c7, #fef3c7 4px, #fde68a 4px, #fde68a 8px);
    color: #92400e;
    font-weight: 600;
    cursor: not-allowed;
}

/* Kolize s ostatními kolegy – mini avatary v rohu buňky (od 2.43, místo dříve oranžové tečky). */
/* Stack avatarů kolegů na dovolené – zvětšené a poskládané vertikálně (od 2.45).
   Předtím byly vodorovně 18px se -5px overlap. Teď vertikálně 44px se -16px overlap.
   Při hoveru přes celý den (.vac-cal-day) se ukáže popover s úplným seznamem. */
.vac-cal-others {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    flex-direction: column-reverse;  /* první avatar dole, +N nahoře */
    align-items: center;
    pointer-events: none;             /* hover ať bere celá buňka, ne avatar zvlášť */
}
.vac-cal-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid white;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    margin-top: -16px;                /* stack effect – vertikální překryv */
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
    flex-shrink: 0;
}
.vac-cal-others .vac-cal-avatar:last-child { margin-top: 0; }  /* spodní avatar bez negativního marginu */
.vac-cal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vac-cal-avatar.is-pending {
    border: 2px dashed #f59e0b;
}
.vac-cal-avatar-more {
    background: #475569;
    color: white;
    font-size: 0.75rem;
}

/* Hover popover přes den – ukáže všechny kolegy s rezervací v daném dni.
   Renderujeme ho jako poslední dítě cell, hidden by default, viditelný při :hover.
   Při :hover na .vac-cal-day se ukáže nad buňkou (nebo pod, podle dostupného místa). */
.vac-cal-popover {
    position: absolute;
    z-index: 50;
    bottom: calc(100% + 6px);          /* nad buňkou */
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
    display: none;
    min-width: 200px;
    text-align: left;
    pointer-events: none;              /* nepřenášet hover na popover, ať nezačne flickerovat */
}
.vac-cal-day:hover .vac-cal-popover {
    display: block;
}
.vac-cal-popover::after {
    /* Šipka dolů (pod popoverem, ukazuje na buňku) */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: white;
    margin-top: -1px;
}
.vac-cal-popover-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.45rem;
}
.vac-cal-popover-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.vac-cal-popover-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.vac-cal-popover-row .vac-cal-avatar {
    width: 32px;
    height: 32px;
    margin-top: 0;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.vac-cal-popover-name {
    font-size: 0.85rem;
    color: #111827;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.vac-cal-popover-name small {
    display: block;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 400;
    margin-top: 0.1rem;
}
.vac-cal-popover-name .pop-status-pending  { color: #b45309; }
.vac-cal-popover-name .pop-status-approved { color: #047857; }
.vac-cal-popover-name .pop-group-badge {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.65rem;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 4px;
    font-weight: 600;
}

/* Den s alespoň jedním kolegou na dovolené (vizuálně zvýrazníme malým žlutým rámečkem) */
.vac-cal-has-collision {
    background: #fffbeb;
}

/* Den zablokovaný pravidlem zastupitelnosti – z mé skupiny by nezůstal nikdo v práci */
.vac-cal-coverage-blocked {
    background: repeating-linear-gradient(135deg, #fee2e2, #fee2e2 6px, #fecaca 6px, #fecaca 10px);
    color: #991b1b;
    cursor: not-allowed;
    opacity: 0.85;
}
.vac-cal-coverage-blocked .vac-cal-day-num {
    color: #991b1b;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.vac-cal-selected {
    background: #0e7490 !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(14, 116, 144, 0.25);
}
.vac-cal-selected:hover {
    background: #155e75 !important;
    color: white !important;
}

/* === Formulář žádosti === */
.vac-request-form {
    max-width: 560px;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Souhrn vybraných dní */
.vac-summary {
    background: white;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.vac-summary-count {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.vac-summary-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0e7490;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.vac-summary-label {
    font-size: 0.9rem;
    color: #64748b;
}

.vac-days-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.vac-day-pill {
    background: #f0f9ff;
    color: #0e7490;
    border: 1px solid #bae6fd;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.vac-day-pill:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* Varování při překročení dostupného fondu */
.vac-overflow-warning {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
    font-weight: 500;
}

/* Pole pro poznámku */
.vac-note-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.vac-note-label {
    font-size: 0.88rem;
    color: #475569;
    font-weight: 500;
}
.vac-note-label em {
    color: #94a3b8;
    font-style: normal;
    font-weight: 400;
    margin-left: 0.3rem;
}
.vac-note-field input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #0f172a;
    background: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.vac-note-field input[type="text"]:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.12);
}
.vac-note-field input[type="text"]::placeholder {
    color: #cbd5e1;
}

/* Submit button - vzdušnější, oddělené */
.vac-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}
.vac-submit-btn {
    padding: 0.75rem 1.6rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(14, 116, 144, 0.18);
    transition: all 0.15s ease;
}
.vac-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(14, 116, 144, 0.25);
}
.vac-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Tabulka žádostí */
.vac-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}
.vac-table th, .vac-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}
.vac-table th { background: #f9fafb; font-size: 0.85rem; color: #6b7280; }
.vac-table tr:hover td { background: #f9fafb; }

/* Status pillboxes */
.vac-status {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.vac-status-pending  { background: #fef3c7; color: #92400e; }
.vac-status-approved { background: #d1fae5; color: #065f46; }
.vac-status-rejected { background: #fee2e2; color: #991b1b; }
.vac-status-cancelled{ background: #f3f4f6; color: #6b7280; }

/* Karta žádosti ve schvalování */
.vac-approve-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.vac-approve-card header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f3f4f6;
}
.vac-approve-card header strong { font-size: 1.05rem; }
.vac-approve-body > div { margin-bottom: 0.45rem; }
.vac-approve-actions {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f3f4f6;
}
.vac-approve-actions input[type=text] {
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    width: 280px;
    margin-right: 0.5rem;
}

/* Detail tabulky */
.vac-detail-table {
    width: 100%;
    border-collapse: collapse;
}
.vac-detail-table th {
    text-align: left;
    width: 200px;
    padding: 0.5rem 0.7rem;
    color: #6b7280;
    font-size: 0.85rem;
    vertical-align: top;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.vac-detail-table td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Tlačítka */
.btn-tiny {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    border: 1px solid #cbd5e1;
    background: white;
    color: #374151;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-tiny:hover { background: #f3f4f6; }
.btn-tiny.btn-danger {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}
.btn-tiny.btn-danger:hover { background: #fecaca; }

/* ===========================================================================
   HR sekce v vacation.php (od 2.41) – dlaždice s avatary, jedno tlačítko uložit
   =========================================================================== */
.hr-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
}
.hr-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hr-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.hr-card-inactive {
    opacity: 0.55;
}
.hr-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}
.hr-card-identity {
    flex: 1;
    min-width: 0;
}
.hr-card-identity strong {
    display: block;
    font-size: 1.05rem;
    color: #111827;
    margin-bottom: 0.2rem;
}
.hr-card-identity .role-pill {
    margin-top: 0.25rem;
    font-size: 0.72rem;
}
.hr-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}
.hr-field {
    display: flex;
    flex-direction: column;
}
.hr-field-wide { grid-column: 1 / -1; }
.hr-field label {
    font-size: 0.72rem;
    color: #6b7280;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.hr-field input,
.hr-field select {
    padding: 0.4rem 0.55rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hr-field input:focus,
.hr-field select:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.15);
}
.hr-field small {
    color: #92400e;
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

.hr-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.6rem 0.5rem;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}
.hr-stat {
    text-align: center;
    padding: 0.2rem 0;
}
.hr-stat-label {
    display: block;
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.hr-stat strong {
    font-size: 1.1rem;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.hr-stat-remain strong {
    color: #0e7490;
}

.hr-card-footer {
    display: flex;
    justify-content: flex-end;
}
.hr-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.4rem;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    border: 0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(8,145,178,0.25);
    transition: all 0.15s ease;
}
.hr-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(8,145,178,0.35);
    filter: brightness(1.05);
}
.hr-save-btn:active {
    transform: translateY(0);
}

/* ===========================================================================
   Vacation tabs - rozdělené do skupin
   DEPRECATED od 2.44 – sjednoceno s admin.php přes .subnav + .subnav-secondary.
   Ponecháno pro zpětnou kompatibilitu (kdyby se na to někde ještě navazovalo).
   =========================================================================== */
.vac-tabs-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.vac-tabs-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.vac-tabs-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    padding-left: 0.4rem;
}

/* ===========================================================================
   Měsíční přehled dovolených (od 2.42) – tabulka se mřížkou dní
   =========================================================================== */
.ov-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: white;
}
.ov-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.ov-table th, .ov-table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    vertical-align: middle;
}
.ov-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e5e7eb;
}
.ov-table .ov-day-header th {
    padding: 0.25rem 0.7rem;
    background: #f8fafc;
    border-top: 0;
    border-bottom: 2px solid #e5e7eb;
}
.ov-col-employee { min-width: 220px; }
.ov-col-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    width: 110px;
}
.ov-col-num strong { font-size: 1rem; }
.ov-col-grid { padding: 0.4rem 0.7rem; min-width: 350px; }

/* Hlavička s čísly dní */
.ov-grid-header {
    display: grid;
    grid-template-columns: repeat(31, 1fr);
    gap: 2px;
    min-width: 320px;
}
.ov-day-num {
    text-align: center;
    font-size: 0.65rem;
    color: #9ca3af;
    font-weight: 500;
}
.ov-day-num.ov-we { color: #cbd5e1; }

/* Mřížka buněk */
.ov-grid {
    display: grid;
    grid-template-columns: repeat(31, 1fr);
    gap: 2px;
    min-width: 320px;
}
.ov-cell {
    height: 22px;
    border-radius: 3px;
    background: #f9fafb;
    border: 1px solid transparent;
}
.ov-cell.ov-we {
    background: #f1f5f9;
    opacity: 0.6;
}
.ov-cell.ov-cell-approved {
    background: #0e7490;
    border-color: #0e7490;
}
.ov-cell.ov-cell-pending {
    background: white;
    border: 1.5px dashed #f59e0b;
}

/* Řádky bez dovolené – tlumeně, aby zaměstnanci s dovolenou byli vidět hned */
.ov-row-empty { opacity: 0.55; }
.ov-row-empty:hover { opacity: 1; }

/* Cell zaměstnance – avatar + jméno + role */
.ov-employee-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ov-employee-cell strong {
    display: block;
    font-size: 0.92rem;
    color: #111827;
    line-height: 1.2;
}
.ov-employee-cell .role-pill {
    margin-top: 0.2rem;
    font-size: 0.65rem;
    padding: 0.05rem 0.45rem;
}

/* ===========================================================================
   Měsíční přehled – hlavička sekce (od 2.48)
   Předchozí verze používala globální .period-selector, který má flex:1 a roztáhl
   se přes celé pole, čímž tlačítka přesahovala mimo bílou kartu napravo.
   Tato dedikovaná pravidla drží navigaci měsíce na intrinsic width vpravo.
   =========================================================================== */
.ov-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.ov-header-text {
    flex: 1 1 320px;
    min-width: 0;
}
.ov-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;     /* žádný flex grow – navigace má jen tolik místa kolik potřebuje */
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ov-month-nav strong {
    min-width: 8rem;
    text-align: center;
    white-space: nowrap;
}
@media (max-width: 700px) {
    .ov-month-nav { width: 100%; justify-content: flex-start; }
}

/* ===========================================================================
   Akční tlačítka v detailu žádosti o dovolenou (od 2.48)
   Předtím to byly btn-primary / btn-secondary – generické, jeden vypadá staromódně.
   Teď: tři konzistentní pill-tlačítka s gradientem a ikonou pro každou akci.
   =========================================================================== */
.btn-vac-approve,
.btn-vac-reject,
.btn-vac-cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
    text-decoration: none;
    line-height: 1;
}
.btn-vac-approve {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}
.btn-vac-reject {
    background: white;
    color: #b91c1c;
    border: 1.5px solid #fca5a5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-vac-cancel {
    background: white;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-vac-approve:hover,
.btn-vac-reject:hover,
.btn-vac-cancel:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
.btn-vac-approve:hover { box-shadow: 0 4px 10px rgba(5, 150, 105, 0.35); }
.btn-vac-reject:hover  { background: #fef2f2; border-color: #ef4444; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.18); }
.btn-vac-cancel:hover  { background: #f9fafb; border-color: #9ca3af; }
.btn-vac-approve:active,
.btn-vac-reject:active,
.btn-vac-cancel:active { transform: translateY(0); }

/* ===========================================================================
   Software katalog (Nastavení → Infrastruktura → Software) – od 2.50
   =========================================================================== */
.sw-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.sw-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s;
}
.sw-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.sw-card-inactive { opacity: 0.55; }

.sw-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #f1f5f9;
}
.sw-card-title { display: block; font-size: 1.05rem; color: #111827; }
.sw-card-vendor { display: block; color: #6b7280; font-size: 0.78rem; margin-top: 0.15rem; }
.sw-code-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: #f3f4f6;
    color: #475569;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.sw-version-block {
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border-left: 3px solid #0e7490;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}
.sw-version-label {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
}
.sw-version-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0e7490;
    font-variant-numeric: tabular-nums;
}
.sw-version-date {
    color: #6b7280;
    font-size: 0.8rem;
    margin-left: 0.4rem;
}
.sw-version-empty {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.9rem;
}

.sw-last-check {
    font-size: 0.78rem;
    margin-bottom: 0.7rem;
    padding: 0.4rem 0.7rem;
    border-radius: 5px;
}
.sw-last-check-ok    { background: #f0fdf4; color: #047857; }
.sw-last-check-fail  { background: #fef2f2; color: #b91c1c; }
.sw-last-check-never { background: #f9fafb; color: #6b7280; }

.sw-edit-form {
    margin: 0.7rem 0;
    padding: 0.7rem 0.85rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}
.sw-edit-row { margin-bottom: 0.55rem; }
.sw-edit-row:last-child { margin-bottom: 0; }
.sw-edit-row label { display: block; }
.sw-edit-row label > span {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    margin-bottom: 0.18rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.sw-edit-row input,
.sw-edit-row textarea {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
}
.sw-edit-row textarea { resize: vertical; min-height: 50px; }
.sw-edit-hint { color: #6b7280; font-size: 0.7rem; margin-left: 0.4rem; }

.sw-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.sw-card-actions-bottom {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e5e7eb;
    justify-content: flex-start;
}

/* ===========================================================================
   Feed nových verzí na nástěnce (od 2.52)
   Zobrazuje detekované změny verzí FortiOS, RouterOS, POHODA, PAMICA,
   Veeam B&R, Veeam Agent. Vizuálně navazuje na .board-vacations* (stejná karta).
   =========================================================================== */
.board-vfeed-title {
    margin: 1.4rem 0 0.55rem;
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 600;
}
/* Pokud nad feedem není nic dalšího (žádné dovolené, žádná oznámení),
   první nadpis sklopíme aby nedělal velký mezerník. */
.board-vfeed-title:first-child { margin-top: 0; }

.board-vfeed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Layout: link s textem vlevo (zabírá většinu šířky) a stářím vpravo.
   Od 3.0.29: verze je uvnitř textu, ne v samostatném badge.
   Pozadí je tyrkysové pro SW, jantarové pro FW. Celá položka je odkaz. */
.board-vfeed-item {
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border-left: 3px solid #06b6d4;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #0f172a;
    transition: background 0.15s;
    overflow: hidden;
}
.board-vfeed-item:hover {
    background: linear-gradient(135deg, #e6fffb 0%, #d6f9ff 100%);
}
.board-vfeed-link {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    color: inherit;
    text-decoration: none;
}

/* Firmware varianta – odliší se levou hranou a podkladem (jantar místo tyrkysu) */
.board-vfeed-item.is-fw {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.board-vfeed-item.is-fw:hover {
    background: linear-gradient(135deg, #fff5d4 0%, #fdebbf 100%);
}

.board-vfeed-text {
    color: #1f2937;
    line-height: 1.4;
    white-space: normal;     /* víceřádkový text s počtem outdated */
}
.board-vfeed-text strong {
    color: #0f172a;
    font-weight: 600;
}

.board-vfeed-age {
    color: #6b7280;
    font-size: 0.78rem;
    white-space: nowrap;
    align-self: start;
    padding-top: 0.15rem;
}

/* Mobilní zalomení – stáří jde pod text */
@media (max-width: 600px) {
    .board-vfeed-link {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: 0.25rem;
    }
    .board-vfeed-age      { justify-self: end; padding-top: 0; }
}

/* ===========================================================================
   Vertikální oddělovače mezi sekcemi nástěnky (od 2.56)
   Sekce v nástěnce: 📢 oznámení, 🆕 nové verze, 🏖️ kdo má dovolenou,
   📅 kdo bude mít dovolenou. Předtím byly sekce na sebe nalepené, horní
   hrana nadpisu se dotýkala spodního obsahu předchozí sekce. Teď mezi nimi
   je tenká přerušovaná šedá čárka + vertikální dýchací prostor.
   =========================================================================== */

/* Direct children dashboard-card-body / portal-card-body, které začínají
   novou sekci, a NEJSOU prvním elementem v kartě, dostanou horní oddělovač.
   - h3 nadpisy (board-announcements-title, board-vfeed-title)
   - .board-vacations bloky (kdo má / kdo bude mít)
   První h3 / první board-vacations zůstává bez bordera díky `* + ` selectoru. */
.dashboard-card-body > * + h3,
.dashboard-card-body > * + .board-vacations,
.portal-card-body > * + h3,
.portal-card-body > * + .board-vacations {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px dashed #d1d5db;
}

/* ===========================================================================
   Vylepšená dlaždice „Moje otevřené tickety" (od 2.56, layout od 2.58)
   Horizontální layout: velké číslo vlevo, breakdown + label vpravo vedle něj.
   Šetří dva vertikální řádky proti původní variantě, kde breakdown a label
   byly pod sebou pod číslem.
   =========================================================================== */
.dashboard-stat-card.stat-tickets-rich {
    /* Žádný extra min-height – stačí stejný jako default 165px,
       protože horizontální layout numeru s metadaty je úsporný. */
    min-height: 165px;
}

/* Horní část karty: velké číslo + meta vpravo (breakdown + label) */
.stat-tickets-rich .stat-tickets-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}
.stat-tickets-rich .stat-tickets-header .dashboard-stat-num {
    margin: 0;
    line-height: 1;
    flex-shrink: 0;
}
.stat-tickets-header-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}
/* V rich layoutu label NEMÁ margin-top:auto (default by ho odsunul dolů,
   tady je v pravo vedle čísla a má být blízko breakdownu). */
.stat-tickets-rich .stat-tickets-header-meta .dashboard-stat-label {
    margin: 0;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.3;
}

/* Priority breakdown jako řádek malých pillů (zachované z 2.56) */
.stat-prio-breakdown {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.stat-prio-breakdown .prio-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    line-height: 1.3;
    white-space: nowrap;
}
.stat-prio-breakdown .prio-pill.prio-high   { background: #fee2e2; color: #b91c1c; }
.stat-prio-breakdown .prio-pill.prio-normal { background: #dbeafe; color: #1e40af; }
.stat-prio-breakdown .prio-pill.prio-low    { background: #f1f5f9; color: #64748b; }

/* Mini-list top 3 ticketů na spodku karty (zachované z 2.56) */
.stat-tickets-mini {
    list-style: none;
    padding: 0.6rem 0 0;
    margin: 0.7rem 0 0;
    width: 100%;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.stat-tickets-mini-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.3;
    color: #4b5563;
    min-width: 0;
}
.stat-mini-prio {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}
.stat-mini-prio.prio-high   { background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18); }
.stat-mini-prio.prio-normal { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }
.stat-mini-prio.prio-low    { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15); }
.stat-mini-id {
    font-family: 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6366f1;
    white-space: nowrap;
    flex-shrink: 0;
}
.stat-mini-title {
    color: #4b5563;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.stat-tickets-mini-more {
    font-size: 0.72rem;
    color: #9ca3af;
    font-style: italic;
    padding-top: 0.15rem;
}

/* ===========================================================================
   Software na serverech – Nastavení → Infrastruktura → Software na serverech
   (od 2.57)
   Přiřazení katalogového SW ke konkrétnímu serveru s evidencí nainstalované
   verze. Tabulka per server, pilly per software, modal pro přidání/úpravu.
   =========================================================================== */

/* Filtr nahoře – dva selecty vedle sebe, na úzkých obrazovkách pod sebe */
.ssw-filters {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    align-items: flex-end;
    flex-wrap: wrap;
}
.ssw-filters label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 0 1 280px;
}
.ssw-filters label > span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
}
.ssw-filters select {
    padding: 0.5rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
}

/* Hlavní tabulka servery + nainstalovaný SW */
.ssw-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ssw-table thead {
    background: #f9fafb;
}
.ssw-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}
.ssw-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    font-size: 0.9rem;
}
.ssw-table tbody tr:last-child td { border-bottom: none; }
.ssw-table tbody tr:hover { background: #fafbfc; }
.ssw-table small { color: #6b7280; font-size: 0.78rem; }

/* Role pillsy v sloupci Role */
.ssw-role-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
    margin: 0.05rem 0.15rem 0.05rem 0;
    letter-spacing: 0.04em;
}
.ssw-role-pill.ssw-role-app    { background: #ddd6fe; color: #5b21b6; }
.ssw-role-pill.ssw-role-backup { background: #fee2e2; color: #991b1b; }

/* Container pro pilly nainstalovaného SW + tlačítko Přidat */
.ssw-installs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* Pill nainstalovaného SW – klikatelný (otevře modal pro úpravu) */
.ssw-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1.5px solid;
    background: white;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    transition: transform 0.1s, box-shadow 0.15s;
}
.ssw-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.ssw-pill-current {
    border-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
}
.ssw-pill-current::before {
    content: '✓';
    font-weight: 700;
    color: #10b981;
}
.ssw-pill-outdated {
    border-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}
.ssw-pill-outdated::before {
    content: '⚠';
    font-weight: 700;
    color: #ef4444;
}
.ssw-pill-name { font-weight: 600; }
.ssw-pill-ver  {
    font-family: 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.7);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}
.ssw-pill-arrow {
    font-size: 0.72rem;
    opacity: 0.85;
    color: inherit;
    font-style: italic;
}

/* Tlačítko „+ Přidat SW" v posledním sloupci */
.ssw-add-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1.5px dashed #cbd5e1;
    background: white;
    color: #475569;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s;
}
.ssw-add-btn:hover {
    border-color: #0e7490;
    color: #0e7490;
    background: #ecfeff;
}
.ssw-empty {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.82rem;
}

@media (max-width: 760px) {
    .ssw-table thead { display: none; }
    .ssw-table, .ssw-table tbody, .ssw-table tr, .ssw-table td {
        display: block;
        width: 100%;
    }
    .ssw-table tr {
        margin-bottom: 0.6rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
    }
    .ssw-table td { border-bottom: 1px solid #f1f5f9; }
    .ssw-table td:last-child { border-bottom: none; }
    .ssw-table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 0.7rem;
        text-transform: uppercase;
        display: block;
        margin-bottom: 0.2rem;
    }
}

/* ===========================================================================
   Klikací dlaždice „Update X" pro software updaty (od 2.60)
   Třetí typ tlačítek na server-card po fixed_types (Měsíční údržba…) a
   special_events. Vizuálně sjednocené s ostatními – zelená když installed
   = current (✓ aktuální), červená když zaostává (needs-action).
   Read-only varianta (.readonly) pro zákaznický portál bez práv k zápisu –
   bez hover efektu, bez kliku.
   =========================================================================== */
.action-btn.action-btn-sw {
    /* Subtilní distinkce od běžných úkonů – jemný levý okraj v barvě SW kategorie.
       Zelený / červený stav je řešený přes existující .done / .needs-action třídy. */
    border-left-width: 4px;
}

/* Read-only verze (na portálu pro zákazníky) – vypadá jako tlačítko, ale neaktivní. */
.action-btn.action-btn-sw.readonly {
    cursor: default;
    opacity: 0.85;
}
.action-btn.action-btn-sw.readonly:hover {
    /* Žádný hover efekt, není to klikatelné */
    transform: none;
    box-shadow: none;
}

/* ===========================================================================
   Filtry „dle softwaru" v sekci Údržba infrastruktury (od 2.61)
   Doplňuje pillsy „💿 POHODA / 💿 PAMICA / 💿 Veeam B&R / …" za výchozí
   trojici Vše / Servery / Aktivní prvky. Klik = jen servery s daným SW.
   =========================================================================== */

/* Subtilní oddělovač mezi standardními filtry typu a SW filtry – jen vizuální
   tečka, opticky to rozdělí dvě sady pillu, aby uživatel pochopil, že druhá
   sada je něco jiného (specializovanější). */
.infra-type-filter-divider {
    color: #cbd5e1;
    font-size: 1rem;
    align-self: center;
    margin: 0 0.2rem;
    user-select: none;
}

/* SW pill má jemně odlišný odstín od standardních filtrů, aby uživatel viděl,
   že se jedná o specializovaný filtr (zúžení, ne rozšíření). */
.btn-period-sw {
    /* Drobné vizuální odlišení od defaultu .btn-period (kategorie) – jemný
       fialový tón, který se i ladí s ikonou 💿 a se zelenou „SW pill" v jiných
       částech UI (Software na serverech v admin sekci). */
    border-color: #ddd6fe !important;
    color: #5b21b6 !important;
}
.btn-period-sw:hover {
    background: #f5f3ff !important;
    border-color: #c4b5fd !important;
}
.btn-period-sw.active {
    background: #ddd6fe !important;
    border-color: #a78bfa !important;
    color: #4c1d95 !important;
}

/* Info banner pod filtrem: „Zobrazují se jen servery s SW X" */
.infra-sw-filter-note {
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.85rem;
    background: #faf5ff;
    border-left: 3px solid #a78bfa;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #4b5563;
}
.infra-sw-filter-note strong {
    color: #4c1d95;
}

/* ===========================================================================
   Kompaktní varianta server-card (od 2.62)
   Aktivuje se při filtru „dle softwaru" v Údržbě infrastruktury – v dlaždici
   se zobrazí jen jediná SW dlaždice odpovídající filtru. Cíl: dostat všechny
   relevantní servery na jednu obrazovku bez scrollování.
   =========================================================================== */

/* Grid: užší minimum + menší gap pro compact režim, aby se vešlo víc karet
   vedle sebe. Default je 380px minimum, compact 260px → ~4-5 sloupců na
   1280px obrazovce místo 3. (od 2.63) */
.server-list-compact {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 0.55rem !important;
}

/* Flat grid přes všechny zákazníky (od 2.65) – v compact módu vůbec
   nepoužíváme customer-blocky, místo toho jeden velký grid serverů s
   customer-badgem v každé dlaždici. Maximální hustota informací,
   ideální pro audit „kde je POHODA outdated napříč celým portfoliem". */
.server-list-compact-flat {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

/* Customer badge nahoře v compact dlaždici – malý, kontrastní, prokliknutelný
   přes title atribut. Identifikuje, kterému zákazníkovi server patří. */
.server-customer-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #0891b2;
    color: white;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: 0.35rem;
    vertical-align: middle;
}

/* Page-level compact: ztenčíme i customer-block paddingy, nadpisy zákazníků
   a podsekce „SERVERY", aby na obrazovce bylo méně mrtvého místa.
   Aplikuje se na <main class="page-sw-compact"> (od 2.63). */
.page-sw-compact .customer-block {
    padding: 0.85rem 1rem;
    margin-bottom: 0.7rem;
}
.page-sw-compact .customer-block h3 {
    font-size: 0.95rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.55rem;
}
.page-sw-compact .infra-subheading {
    font-size: 0.7rem;
    margin-bottom: 0.45rem;
}

.server-card.server-card-compact {
    /* Užší padding pro maximální hustotu informací */
    padding: 0.5rem 0.75rem;
}
.server-card.server-card-compact .server-header {
    /* Menší mezera mezi headerem a single dlaždicí pod ním */
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
}
.server-card.server-card-compact .server-header strong {
    font-size: 0.92rem;
}
.server-card.server-card-compact .server-role-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
}
/* Server-actions v compact módu mají jen jednu dlaždici – ať vyplní celou šíři */
.server-card.server-card-compact .server-actions {
    grid-template-columns: 1fr;
    gap: 0;
}
/* Single dlaždice v compact – mírně sníženo, aby vypadala kompaktnější */
.server-card.server-card-compact .action-btn {
    padding: 0.5rem 0.7rem;
    min-height: auto;
}
.server-card.server-card-compact .action-btn .btn-label {
    font-size: 0.85rem;
}
.server-card.server-card-compact .action-btn .btn-meta {
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

/* ===========================================================================
   Software dlaždice na dashboardu (od 2.64)
   - .stat-software        – per produkt s zaostávajícími instalacemi
                            (barva podle ratio_class jako u jiných „X / Y" karet)
   - .stat-software-ok     – souhrnná zelená karta s pidiseznam SW, které jsou
                            aktuální ve všech instalacích
   =========================================================================== */
.dashboard-stat-card.stat-software::before    { background: #8b5cf6; }
.dashboard-stat-card.stat-software-ok::before { background: #10b981; }

/* OK karta nemá ratio – udělej hezký scrollovatelný seznam */
.stat-software-ok .dashboard-stat-num {
    color: #10b981;
}
.stat-sw-ok-list {
    list-style: none;
    padding: 0;
    margin: 0.45rem 0 0;
    width: 100%;
    border-top: 1px dashed #e5e7eb;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.stat-sw-ok-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.55rem;
    align-items: center;
    font-size: 0.78rem;
    color: #4b5563;
    line-height: 1.3;
    min-width: 0;
}
.stat-sw-ok-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-weight: 500;
}
.stat-sw-ok-ver {
    font-family: 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}
.stat-sw-ok-count {
    color: #6b7280;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* ===========================================================================
   SW filter dropdown (od 2.65) – nahrazuje řadu individuálních SW pillsů
   jedním tlačítkem „💿 Software ▾". Po rozkliknutí se objeví menu
   s aktivními produkty z katalogu. S přibývajícím SW v budoucnu (5+ produktů)
   nezahltí filter lištu.
   =========================================================================== */
.infra-sw-dropdown {
    position: relative;
    display: inline-block;
}
/* Skrýt nativní marker (▶) v Chrome/Safari/FF */
.infra-sw-dropdown summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.infra-sw-dropdown summary::-webkit-details-marker { display: none; }
.infra-sw-dropdown summary::marker { display: none; }

/* Šipka uvnitř summary, rotuje při otevření */
.infra-sw-dropdown-arrow {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.infra-sw-dropdown[open] .infra-sw-dropdown-arrow {
    transform: rotate(180deg);
}

/* Menu – kotví se k summary, vystupuje pod ním */
.infra-sw-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 220px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.infra-sw-dropdown-item {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: 5px;
    text-decoration: none;
    color: #374151;
    font-size: 0.88rem;
    transition: background 0.1s;
    white-space: nowrap;
}
.infra-sw-dropdown-item:hover {
    background: #f5f3ff;
    color: #5b21b6;
}
.infra-sw-dropdown-item.active {
    background: #ddd6fe;
    color: #4c1d95;
    font-weight: 600;
}
.infra-sw-dropdown-item.active .infra-sw-dropdown-check {
    float: right;
    color: #5b21b6;
    font-weight: 700;
}

/* „✕ Zrušit filtr" – červená varianta nahoře v menu, jen pokud je aktivní filtr */
.infra-sw-dropdown-item.infra-sw-dropdown-clear {
    color: #b91c1c;
    font-size: 0.82rem;
    font-weight: 500;
}
.infra-sw-dropdown-item.infra-sw-dropdown-clear:hover {
    background: #fef2f2;
    color: #991b1b;
}
.infra-sw-dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.25rem 0;
}

/* ===========================================================================
   Zákaznické bloky vedle sebe v compact režimu (od 2.65)
   Když je aktivní SW filtr, obalíme všechny customer-block do gridu, aby
   se vešli vedle sebe. Uvnitř každého bloku zůstávají servery v gridu –
   ale úzké sloupce, takže typicky 1-2 servery vedle sebe per zákazník.
   =========================================================================== */
/* Pozn: .customers-compact-grid (z 2.62/2.63) nahrazena flat gridem v 2.65 –
   místo customer-blocků vedle sebe (každý s vlastním seznamem serverů) renderujeme
   jeden velký grid serverů s customer-badgem v každé dlaždici. */

/* ===========================================================================
   Tlačítka která už jsou „done" mají disabled stav, ale zachovávají barevnost
   – uživatel vidí zelenou „úkon proveden", ale klik na ni nic neudělá (jinak
   by otevřel modal a mohl by úkon zaznamenat dvakrát).
   Resetujeme tedy default :disabled (opacity: 0.5) na opacity: 1 a vypneme
   hover efekt, aby tlačítko vypadalo jako informační label, ne jako CTA.
   (od 2.67)
   =========================================================================== */
.action-btn.done:disabled,
.action-btn.is-carry-over:disabled {
    opacity: 1;
    cursor: default;
}
.action-btn.done:disabled:hover {
    /* Žádná změna pozadí ani borderu při hoveru – button vypadá staticky */
    background: #dcfce7;
    border-color: #4ade80;
    transform: none;
    box-shadow: none;
}
.action-btn.is-carry-over:disabled:hover {
    background: #f0fdf4;
    border-color: #86efac;
    transform: none;
    box-shadow: none;
}
.action-btn.done.is-carry-over:disabled:hover {
    background: #f0fdf4;
    border-color: #86efac;
}

/* ===========================================================================
   Page header s pravým aside boxem – mimořádné úkony vedle nadpisu
   (od 2.67). Hlavní obsah (h1 + subtitle + month-nav) vlevo, banner vpravo
   v rohu. Při užší obrazovce padá pod sebe (responsive collapse).
   =========================================================================== */
.page-header.page-header-with-aside {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.page-header.page-header-with-aside .page-header-main {
    flex: 1 1 480px;
    min-width: 0;
}
.page-header.page-header-with-aside .page-header-aside {
    flex: 0 1 420px;
    align-self: flex-start;
    margin: 0;  /* override default special-banner margin */
}

/* Aside variant special-banner: trochu kompaktnější (menší padding než
   default banner, který byl plnošířkový). */
.page-header-aside.special-banner {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}
.page-header-aside.special-banner .special-list {
    margin: 0.4rem 0 0;
}

/* Na úzkých obrazovkách (mobil/tablet) padá pod sebe – zaberlivý max-width
   vrátíme aside na full width, ať není zužený do bizarně úzkého sloupce. */
@media (max-width: 900px) {
    .page-header.page-header-with-aside .page-header-aside {
        flex: 1 1 100%;
    }
}

/* ===========================================================================
   Popis ticketu s avatarem autora (od 2.68)
   Layout jako u messaging app: vlevo kruhový avatar autora, vpravo meta
   řádek (jméno + datum vytvoření) a pod ním tělo popisu.
   =========================================================================== */
.ticket-desc-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.ticket-desc-author {
    flex-shrink: 0;
    /* Avatar zarovnán k meta řádku, ne k popisu */
    padding-top: 0.1rem;
}
.ticket-desc-body {
    flex: 1;
    min-width: 0;  /* aby <div class="ticket-desc"> mohl wrappovat dlouhý text */
}
.ticket-desc-meta {
    font-size: 0.85rem;
    color: #4b5563;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}
.ticket-desc-meta strong {
    color: #111827;
}
.ticket-desc-meta-date {
    color: #6b7280;
    margin-left: 0.4rem;
}

/* Nový layout (od 3.0.14): avatar + jméno na řádku, meta a popis pod ním
   v samostatných blocích (Nahlásil → schůzka → samotný popis až dole). */
.ticket-desc-author-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.ticket-desc-author-row .ticket-desc-author {
    padding-top: 0;
}
.ticket-desc-author-row .ticket-desc-meta {
    margin-bottom: 0;
}
.ticket-desc-block {
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
}

/* ===========================================================================
   Příznak „Přímá fakturace" – badge varianty (od 2.69)
   - .badge-direct-billing      = velký pill v admin tabulce projektů
                                 (vedle .badge-fixed-fee)
   - .badge-direct-billing-tiny = miniaturní 💸 ikona vedle kódu zákazníka
                                 v řádku úkonu ve výkazu (kompaktní zobrazení)
   =========================================================================== */
.badge-direct-billing {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.5rem;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-direct-billing-tiny {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.85rem;
    cursor: help;
    /* Drobně níž, aby seděl na střed s textem (emoji jsou typicky výše) */
    transform: translateY(-1px);
}

/* Modal: checkbox „Přímá fakturace" – stejný styling jako .manual-record-change
   sousední checkbox „Zadokumentovat jako změnu", aby se nelišily vizuálně. */
.manual-direct-billing {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.65rem 0.85rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    margin-bottom: 0.85rem;
    cursor: pointer;
}
.manual-direct-billing input[type="checkbox"] {
    margin-top: 0.18rem;
    flex-shrink: 0;
}
.manual-direct-billing strong {
    display: block;
    color: #78350f;
    font-size: 0.92rem;
    font-weight: 600;
}
.manual-direct-billing small {
    display: block;
    color: #92400e;
    font-size: 0.78rem;
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* ===========================================================================
   Hint bubble (od 2.71) – žárovička s tooltipem místo žlutých info-boxů.
   Použití:
     <span class="hint-bubble">
         <span class="hint-bubble-icon" tabindex="0">💡</span>
         <span class="hint-bubble-content">
             Vysvětlující text. Lze i <strong>HTML</strong>.
         </span>
     </span>
   Tooltip se zobrazí na hover ikony nebo focus (klávesnice). Šířka 280px,
   pozice: nad ikonou, šipka dolů, zalomí se na pravý okraj viewportu.
   =========================================================================== */
.hint-bubble {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.hint-bubble-icon {
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    margin-left: 0.3rem;
    transition: all 0.12s;
    user-select: none;
    font-family: 'Times New Roman', Georgia, serif;  /* hezčí kurzivní "i" */
}
.hint-bubble-icon:hover,
.hint-bubble-icon:focus {
    background: #fde68a;
    color: #78350f;
    outline: none;
}
.hint-bubble-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-left: 3px solid #f59e0b;
    color: #78350f;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.45;
    z-index: 100;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transition: opacity 0.12s, visibility 0.12s;
    pointer-events: none;
    text-align: left;
    font-weight: normal;
    white-space: normal;
}
.hint-bubble-content strong {
    color: #78350f;
}
.hint-bubble-content::after {
    /* Šipka pod tooltipem */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fef3c7;
}
.hint-bubble:hover .hint-bubble-content,
.hint-bubble-icon:focus + .hint-bubble-content {
    visibility: visible;
    opacity: 1;
}
/* Pokud je ikona blízko pravého okraje, posuneme tooltip vlevo (přes modifikátor). */
.hint-bubble.hint-bubble-right .hint-bubble-content {
    left: auto;
    right: 0;
    transform: none;
}
.hint-bubble.hint-bubble-right .hint-bubble-content::after {
    left: auto;
    right: 14px;
    transform: none;
}

/* Kompaktní řádek pro checkbox + label + hint. Nahrazuje předchozí pole-as-card
   (.manual-record-change a .manual-direct-billing s žlutým pozadím). */
.checkbox-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0;
    cursor: pointer;
    font-size: 0.9rem;
}
.checkbox-line input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}
.checkbox-line strong {
    color: #111827;
    font-weight: 600;
}

/* ===========================================================================
   Zápisy ze schůzek (od 2.72) – list v customer.php a editor v meeting.php
   =========================================================================== */

/* Seznam zápisů v sekci CRM */
.meeting-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.meeting-list-item {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.1s, background 0.1s;
}
.meeting-list-item:hover {
    border-color: #0891b2;
    background: #f0fdfa;
}
.meeting-list-link {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    text-decoration: none;
    color: inherit;
}
.meeting-list-date {
    font-size: 0.8rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.meeting-list-title {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
}
.meeting-list-participants {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.15rem;
}
.meeting-list-meta {
    display: flex;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: #6b7280;
    align-items: center;
}
.meeting-list-tickets {
    background: #fef3c7;
    color: #92400e;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Editor zápisu (meeting.php) */
.meeting-form {
    background: white;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    max-width: 1000px;
}
.meeting-form-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1rem;
    align-items: stretch;
}
.meeting-form-header label {
    flex: 1 1 130px;
    min-width: 110px;
    display: flex;
    flex-direction: column;
}
/* Datum + jednotlivé časy mají pevnou šířku, název chce zbytek */
.meeting-form-header label:has(input[type="date"]) { flex: 0 0 160px; }
.meeting-form-header label:has(input[type="time"]) { flex: 0 0 120px; }
.meeting-form-header label:has(input[name="title"]) { flex: 2 1 280px; }

.meeting-form label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    color: #374151;
}
.meeting-form input[type="date"],
.meeting-form input[type="time"],
.meeting-form input[type="text"],
.meeting-form input[type="email"],
.meeting-form input[type="number"],
.meeting-form input[type="tel"],
.meeting-form input[type="url"],
.meeting-form input[type="search"],
.meeting-form input[type="password"],
.meeting-form select,
.meeting-form textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-top: 0.2rem;
    box-sizing: border-box;
    font-family: inherit;
    color: #111827;
    background: white;
    /* Native time/date inputy mají v některých prohlížečích jiný font/výška –
       sjednotit s ostatními inputs. line-height zajistí správnou výšku. */
    line-height: 1.4;
    min-height: 36px;
}
.meeting-form input[type="date"]:focus,
.meeting-form input[type="time"]:focus,
.meeting-form input[type="text"]:focus,
.meeting-form input[type="email"]:focus,
.meeting-form input[type="number"]:focus,
.meeting-form input[type="tel"]:focus,
.meeting-form input[type="url"]:focus,
.meeting-form input[type="search"]:focus,
.meeting-form input[type="password"]:focus,
.meeting-form select:focus,
.meeting-form textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}
.meeting-form textarea {
    resize: vertical;
}

/* Sekce zápisu (jednotlivé body) */
.meeting-section {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.85rem;
    margin-bottom: 0.7rem;
    background: #fafafa;
    transition: border-color 0.1s;
}
.meeting-section:focus-within {
    border-color: #0891b2;
}
.meeting-section-head {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.meeting-section-heading {
    font-weight: 600;
    font-size: 0.95rem !important;
}
.btn-remove-section {
    background: white;
    border: 1px solid #fecaca;
    color: #dc2626;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.btn-remove-section:hover {
    background: #fee2e2;
}
.meeting-section-body {
    margin-bottom: 0.5rem;
    /* Auto-resize JS spravuje výšku za nás, ale dáme rozumný start +
       skrytý native scrollbar (visible by hned blikl při psaní). */
    min-height: 80px;       /* ~3 řádky pro rozjezd */
    overflow-y: hidden;     /* JS auto-resize zajistí že nikdy nepřeteče */
    line-height: 1.45;
}
.meeting-section-footer {
    font-size: 0.85rem;
}
.meeting-create-ticket-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    margin: 0 !important;
    font-size: 0.8rem !important;
}
.meeting-create-ticket-toggle:hover {
    background: #fde68a;
}
.meeting-create-ticket-toggle input {
    margin: 0;
    width: auto !important;
}

/* Existing ticket badge */
.meeting-ticket-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #065f46;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    font-size: 0.82rem;
}
.meeting-ticket-link a {
    color: #065f46;
    text-decoration: underline;
    font-weight: 500;
}
.meeting-ticket-status {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.meeting-ticket-status-open,
.meeting-ticket-status-submitted   { background: #fef3c7; color: #92400e; }
.meeting-ticket-status-approved    { background: #dbeafe; color: #1e40af; }
.meeting-ticket-status-in_progress { background: #ddd6fe; color: #4c1d95; }
.meeting-ticket-status-resolved    { background: #d1fae5; color: #065f46; }
.meeting-ticket-status-closed      { background: #e5e7eb; color: #4b5563; }

/* ===========================================================================
   Zápis schůzky: účastníci jako řádky (od 2.74)
   =========================================================================== */
.meeting-participants-block {
    margin-bottom: 1rem;
}
.meeting-participants-label {
    display: block;
    font-size: 0.85rem;
    color: #374151;
    margin-bottom: 0.4rem;
    font-weight: 500;
}
.meeting-participants-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.meeting-participant-row {
    display: grid;
    grid-template-columns: 130px 2fr 2fr 32px;
    gap: 0.5rem;
    align-items: center;
}
.meeting-participant-row select,
.meeting-participant-row input[type="text"],
.meeting-participant-row input[type="email"] {
    padding: 0.4rem 0.55rem;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.88rem;
    margin: 0 !important;
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
}
.meeting-participant-row select {
    background: #f9fafb;
    color: #374151;
}
.btn-remove-participant {
    background: white;
    border: 1px solid #fecaca;
    color: #dc2626;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-remove-participant:hover {
    background: #fee2e2;
}

/* Badge s číslem zápisu (MEET-ABC-001) v hlavičce */
.meeting-id-badge {
    display: inline-block;
    background: #f3f4f6;
    color: #4b5563;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Vylepšené „Zpět" tlačítko (od 2.74) – nahrazuje hranatý 1990s look.
   Není to .btn-cancel z modalu, ale nový styl pro inline navigaci. */
a.btn-cancel,
button.btn-cancel {
    /* Reset starého stylu, pokud je inherited */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
}
a.btn-cancel:hover,
button.btn-cancel:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}

/* btn-link pro „+ Přidat účastníka / Přidat bod" */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px dashed #94a3b8;
    color: #475569;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
}
.btn-link:hover {
    background: #f1f5f9;
    border-color: #475569;
    color: #1e293b;
}

/* ===========================================================================
   Globální fallback pro tlačítka (od 2.74) – aby <a class="btn-cancel"> i
   <button class="btn-cancel"> mimo .modal-buttons context vypadaly stejně.
   =========================================================================== */
.btn-cancel {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    height: 38px;
    background: #f3f4f6;
    color: #374151 !important;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    transition: background 0.15s;
}
.btn-cancel:hover { background: #e5e7eb; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    height: 38px;
    background: white;
    color: #374151 !important;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    transition: background 0.1s, border-color 0.1s;
}
.btn-secondary:hover { background: #f9fafb; border-color: #9ca3af; }

.btn-danger {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    height: 38px;
    background: white;
    color: #dc2626 !important;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    transition: background 0.1s;
}
.btn-danger:hover { background: #fee2e2; }

/* btn-save je už definované v .modal-buttons, ale pro kontext mimo modal
   přidáme globální verzi se stejným stylem, jen menší. */
.meeting-form .btn-save {
    display: inline-flex;
    align-items: center;
    padding: 0 1.2rem;
    height: 38px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25);
    transition: all 0.15s;
}
.meeting-form .btn-save:hover {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
    transform: translateY(-1px);
}

/* MEET ID badge v hlavičce zápisu */
.meeting-id-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ===========================================================================
   Sjednocení tlačítek v CRM (od 2.74) – dříve měly btn-doc-link, btn-add-event
   a btn-add-change subtilně různé dimenze (line-height, gap, border).
   Ikona 📖 v dokumentaci vs bez ikony v ostatních způsobovala různou výšku.
   Nyní všechny mají identický padding, font, line-height a min-height – takže
   se i nezarovnaná emoji nepromítne do velikosti.
   Barva (background) zůstává odlišná dle významu.
   =========================================================================== */
.btn-doc-link,
.btn-add-event,
.btn-add-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    min-height: 36px;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    color: white !important;
}
/* Barevné varianty zachovány: */
.btn-doc-link    { background: #0891b2; }
.btn-doc-link:hover { background: #0e7490; }
.btn-add-event   { background: #10b981; }
.btn-add-event:hover { background: #059669; }
.btn-add-change  { background: #0e7490; }
.btn-add-change:hover { background: #0c5d75; }

/* Sekundární button – „Odeslat mně / Odeslat všem" v editoru zápisu (od 2.74) */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    min-height: 36px;
    box-sizing: border-box;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.btn-secondary:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

/* btn-danger – pro „Smazat zápis" (od 2.74) */
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    min-height: 36px;
    box-sizing: border-box;
    background: white;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.btn-danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

/* Sjednocení výšky i pro .btn-save (Uložit zápis) ať řada modal-buttons sedí */
.modal-buttons .btn-save {
    min-height: 36px;
    box-sizing: border-box;
}

/* Tlačítkový panel pod meeting editorem (ne modal, samostatná stránka) */
.meeting-form-buttons {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 0 0;
    border-top: 1px solid #e5e7eb;
}
.meeting-form-buttons .btn-save {
    /* Override – meeting form má vlastní gradient styl */
    display: inline-flex;
    align-items: center;
    padding: 0 1.2rem;
    height: 38px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25);
    transition: all 0.15s;
}
.meeting-form-buttons .btn-save:hover {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
    transform: translateY(-1px);
}

/* ===========================================================================
   Hlavička editoru zápisu ze schůzky (od 2.75) – hezčí typografie než předchozí
   inline-styled subtitle. Použití: .meeting-page-header obal pro celou hlavičku,
   .meeting-back-link pro „← Zpět na ...", .meeting-title-row pro h1 + badge,
   .meeting-meta pro metadata o zákazníkovi a autorovi.
   =========================================================================== */
.meeting-page-header {
    margin-bottom: 1.5rem;
}
.meeting-back-link {
    margin: 0 0 0.6rem 0;
    font-size: 0.85rem;
}
.meeting-back-link a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.12s;
}
.meeting-back-link a:hover {
    color: #0891b2;
}
.meeting-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}
.meeting-title-row h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0f172a;
    line-height: 1.25;
}
/* Metadata (zákazník, autor, datum) – grid s hezkým stylem,
   ne hutný řádek s "·" oddělovači. */
.meeting-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
}
.meeting-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.meeting-meta-label {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}
.meeting-meta-item strong {
    color: #0f172a;
    font-weight: 600;
}
.meeting-meta-code {
    background: #e0f2fe;
    color: #075985;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.meeting-meta-date {
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* Hint pod hlavičkou se časy a počtem auto-úkonů ve výkazu (od 2.76) */
.meeting-duration-hint {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: -0.4rem 0 1rem 0;
    padding: 0.5rem 0.85rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 3px solid #10b981;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #065f46;
    line-height: 1.45;
}
.meeting-duration-hint strong {
    color: #064e3b;
    font-weight: 600;
}

/* ===========================================================================
   Typ schůzky – radio fieldset v editoru zápisu (od 2.80)
   Dvě možnosti: Konzultační (jak dosud) / Obchodní (úkon na aitelogic).
   =========================================================================== */
.meeting-type-group {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.6rem 1rem 0.85rem;
    margin: 0 0 1rem 0;
    background: #fafafa;
}
.meeting-type-group legend {
    padding: 0 0.5rem;
    font-size: 0.85rem;
    color: #374151;
    font-weight: 600;
}
.meeting-type-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
}
.meeting-type-option:hover {
    background: #f3f4f6;
}
.meeting-type-option input[type="radio"] {
    margin: 0.3rem 0 0 0;
    accent-color: #0891b2;
    flex-shrink: 0;
}
.meeting-type-option > span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}
.meeting-type-option > span > strong {
    font-size: 0.92rem;
    color: #0f172a;
    font-weight: 600;
}
.meeting-type-option > span > small {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}
.meeting-type-option:has(input[type="radio"]:checked) {
    background: #ecfeff;
}
.meeting-type-option:has(input[type="radio"]:checked) > span > strong {
    color: #0e7490;
}

/* Tag „Obchodní" v hlavičce editoru zápisu (od 2.80) */
.meeting-type-tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ===========================================================================
   Cenové nabídky (od 2.82) – editor + seznam v CRM + sekce v ticketu
   =========================================================================== */

/* Editor – fieldsets pro hlavní sekce */
.quote-form fieldset.quote-section,
.quote-form fieldset.quote-variant {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 0 0 1rem 0;
    background: white;
}
.quote-form fieldset.quote-section > legend,
.quote-form fieldset.quote-variant > legend {
    font-weight: 600;
    color: #0f172a;
    padding: 0 0.5rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.quote-form fieldset.quote-variant {
    background: #f9fafb;
}
.quote-form .quote-contact-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.quote-form .quote-contact-row > label {
    flex: 1 1 280px;
}
.quote-form .quote-template-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}
.quote-form .quote-template-row select {
    padding: 0.4rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.85rem;
    background: white;
    flex: 1 1 280px;
}
.quote-form .quote-intro-textarea {
    min-height: 100px;
}
.quote-form .hint {
    color: #6b7280;
    font-size: 0.8rem;
    margin: 0.4rem 0 0;
}

/* Tabulka položek v editoru */
.quote-items-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.6rem 0;
    font-size: 0.88rem;
}
.quote-items-table th {
    text-align: left;
    padding: 0.5rem 0.4rem;
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #d1d5db;
}
.quote-items-table th.num,
.quote-items-table td.num {
    text-align: right;
    white-space: nowrap;
}
.quote-items-table th.actions,
.quote-items-table td.actions {
    width: 36px;
    text-align: center;
}
.quote-items-table td {
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}
.quote-items-table input[type="text"] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.86rem;
    box-sizing: border-box;
    font-family: inherit;
}
.quote-items-table .item-num { text-align: right; font-variant-numeric: tabular-nums; }
.quote-items-table .item-total-excl,
.quote-items-table .item-total-incl {
    color: #111827;
    font-variant-numeric: tabular-nums;
    padding-top: 0.55rem;
}
.quote-items-table .quote-totals-row td {
    border-top: 2px solid #d1d5db;
    border-bottom: none;
    padding: 0.7rem 0.4rem;
    font-size: 0.92rem;
}
.quote-items-table .totals-label {
    text-align: right;
    color: #4b5563;
    font-weight: 500;
}
.quote-items-table .variant-total-excl,
.quote-items-table .variant-total-incl {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.btn-remove-item {
    background: white;
    border: 1px solid #fecaca;
    color: #dc2626;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
}
.btn-remove-item:hover { background: #fee2e2; }

.btn-remove-variant {
    background: white;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 0.25rem 0.7rem;
    border-radius: 5px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    margin-left: auto;
}
.btn-remove-variant:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* Status badge */
.quote-status-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.quote-status-draft     { background: #f3f4f6; color: #4b5563; }
.quote-status-sent      { background: #dbeafe; color: #1e40af; }
.quote-status-accepted  { background: #d1fae5; color: #065f46; }
.quote-status-rejected  { background: #fee2e2; color: #991b1b; }
.quote-status-ordered   { background: #ede9fe; color: #5b21b6; }
.quote-status-delivered { background: #ccfbf1; color: #0f766e; }

.quote-status-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Seznam nabídek v CRM (customer.php) */
.quotes-list-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
}
.quotes-list-table th {
    text-align: left;
    padding: 0.5rem 0.5rem;
    background: #f8fafc;
    color: #374151;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}
.quotes-list-table th.num,
.quotes-list-table td.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.quotes-list-table td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.quotes-list-table tr:hover {
    background: #f9fafb;
}

/* Seznam nabídek v ticketu */
.ticket-quotes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ticket-quote-link {
    display: block;
    padding: 0.55rem 0.85rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s;
}
.ticket-quote-link:hover {
    border-color: #0891b2;
    background: #f0fdfa;
}
.ticket-quote-link strong { color: #0f172a; }

/* ===========================================================================
   Pill-toggle (od 2.83) – kompaktní 2-stavový přepínač s radio inputy.
   Inspirováno .subnav-secondary, ale pro form-fieldset (fungují radio).
   Použití:
     <div class="pill-toggle-row">
         <div class="pill-toggle-label">Typ schůzky</div>
         <div class="pill-toggle">
             <label><input type="radio" name="x" value="a" checked> A</label>
             <label><input type="radio" name="x" value="b"> B</label>
         </div>
         <span class="hint-bubble"> ... </span>
     </div>
   =========================================================================== */
.pill-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem 0;
    flex-wrap: wrap;
}
.pill-toggle-label {
    font-size: 0.85rem;
    color: #374151;
    font-weight: 500;
}
.pill-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem 0.4rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ecfeff 100%);
    border: 1px solid #e0f2fe;
    border-radius: 999px;
}
.pill-toggle > label {
    margin: 0 !important;
    cursor: pointer;
    padding: 0.35rem 0.95rem;
    color: #64748b;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    user-select: none;
}
.pill-toggle > label:hover {
    color: #0e7490;
    background: white;
}
.pill-toggle > label > input[type="radio"] {
    /* Skryjeme native radio – stav čteme přes :has() / :checked + sibling */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.pill-toggle > label:has(input[type="radio"]:checked) {
    color: white;
    background: #0e7490;
    box-shadow: 0 1px 3px rgba(14, 116, 144, 0.25);
    font-weight: 600;
}

/* ===========================================================================
   Cenové nabídky – obrázky položek (od 2.83, refaktorováno 2.90)
   =========================================================================== */
.quote-items-table th.image-col {
    width: 70px;
    text-align: center;
}
.quote-items-table td.image-cell {
    width: 70px;
    padding: 0.4rem 0.3rem;
    vertical-align: top;
}
.quote-item-image-wrap {
    position: relative;
    width: 56px;
    height: 56px;
}
.quote-item-image-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    cursor: pointer;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    transition: all 0.15s;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.quote-item-image-upload:hover {
    border-color: #0e7490;
    background: #ecfeff;
}
.quote-item-image-upload.is-replace {
    /* Když má položka už obrázek, label obaluje thumb a po hover ukáže overlay */
    border: 1px solid #e5e7eb;
    background: white;
    padding: 0;
}
.quote-item-image-upload input[type="file"] {
    /* Skrytý ale přítomný v DOMu pro sjednocené $_FILES indexy */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.quote-item-image-upload .upload-placeholder {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.1;
}
.quote-item-image-upload:hover .upload-placeholder {
    color: #0e7490;
}
.quote-item-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: opacity 0.15s;
}
.quote-item-image-upload.is-replace:hover .quote-item-thumb {
    opacity: 0.7;
}
/* ✕ tlačítko v rohu */
.quote-item-image-remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    border: 1px solid #fca5a5;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background 0.12s;
    z-index: 2;
}
.quote-item-image-remove-btn:hover {
    background: #fee2e2;
}

/* ===========================================================================
   Editor cenové nabídky – tří-tlačítkový submit (od 2.84)
   =========================================================================== */
.quote-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}
.quote-actions .btn-save,
.quote-actions .btn-secondary,
.quote-actions .btn-primary {
    min-height: 38px;
}

/* CRM globální záložky – tabulky napříč zákazníky (od 2.84) */
.crm-global-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin: 0.5rem 0 0;
}
.crm-global-table th {
    text-align: left;
    padding: 0.55rem 0.6rem;
    background: #f8fafc;
    color: #374151;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}
.crm-global-table th.num,
.crm-global-table td.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.crm-global-table td {
    padding: 0.6rem 0.6rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.crm-global-table tr:hover {
    background: #f9fafb;
}
.crm-global-table .meeting-id-badge {
    font-size: 0.78rem;
    padding: 0.18rem 0.45rem;
}

/* ===========================================================================
   Editor cenové nabídky – 2-sloupcový layout (od 2.87)
   Levý sloupec: form. Pravý sloupec: sticky sidebar s kartou „Stav nabídky".
   =========================================================================== */
.quote-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}
.quote-layout-main {
    min-width: 0;  /* aby flex/grid nezpůsobil overflow tabulky uvnitř */
}
.quote-layout-sidebar {
    position: sticky;
    top: 1rem;
}
@media (max-width: 1024px) {
    .quote-layout {
        grid-template-columns: 1fr;
    }
    .quote-layout-sidebar {
        position: static;
    }
}

/* Karta Stav nabídky v sidebaru */
.quote-status-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.quote-status-card-title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 600;
}
.quote-status-current {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.quote-status-badge.quote-status-large {
    font-size: 0.95rem;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    font-weight: 600;
    text-transform: none;
}
.quote-status-help {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.quote-status-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.quote-status-buttons form {
    margin: 0;
}
.btn-status {
    display: block;
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
    font-family: inherit;
    line-height: 1.3;
}
.btn-status-positive {
    background: white;
    border: 1px solid #86efac;
    color: #166534;
}
.btn-status-positive:hover {
    background: #f0fdf4;
    border-color: #16a34a;
}
.btn-status-negative {
    background: white;
    border: 1px solid #fca5a5;
    color: #991b1b;
}
.btn-status-negative:hover {
    background: #fef2f2;
    border-color: #dc2626;
}
.btn-status-neutral {
    background: white;
    border: 1px solid #cbd5e1;
    color: #475569;
}
.btn-status-neutral:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* Meta info v sidebaru (Odesláno / Poslední změna) */
.quote-status-meta {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8rem;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.quote-status-meta + .quote-status-meta {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: none;
}
.quote-status-meta-label {
    color: #9ca3af;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ===========================================================================
   Klikatelný avatar uživatele v adminu (od 2.88)
   - Klik kdekoliv na fotku → upload file picker (celá plocha = label)
   - Hover → tmavý overlay + popisek „Nahrát" / „Vyměnit"
   - V rohu ✕ tlačítko pro smazání (jen při hover, jen pokud má fotku)
   =========================================================================== */
.user-avatar-clickable {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto;
}
.avatar-upload-form-overlay {
    margin: 0;
    position: absolute;
    inset: 0;
    z-index: 2;
}
.avatar-upload-overlay-label {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-upload-overlay-label > input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.avatar-upload-overlay-hint {
    /* Hint se zobrazí jen při hover – jinak schovaný (decentní UI) */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 0.15s;
    backdrop-filter: blur(1px);
}
.avatar-upload-overlay-label:hover .avatar-upload-overlay-hint,
.avatar-upload-overlay-label:focus-within .avatar-upload-overlay-hint {
    opacity: 1;
}

/* ✕ tlačítko v rohu pro smazání avataru. Defaultně skryté, při hover na celý
   wrap se objeví. Vlastní z-index nad overlay-label, aby šlo kliknout. */
.avatar-delete-corner {
    position: absolute;
    top: -4px;
    right: -4px;
    margin: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.user-avatar-clickable:hover .avatar-delete-corner,
.user-avatar-clickable:focus-within .avatar-delete-corner {
    opacity: 1;
    pointer-events: auto;
}
.avatar-delete-corner-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 1px solid #fca5a5;
    color: #dc2626;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: background 0.12s;
}
.avatar-delete-corner-btn:hover {
    background: #fee2e2;
}

/* Status tečka (active/inactive) přesunutá nad nový z-index hierarchii */
.user-avatar-clickable .user-status-dot {
    z-index: 4;
}

/* ===========================================================================
   Cenové nabídky – podrobný popis položky (od 2.92)
   <details>/<summary> v levém sloupci pod popisem.
   =========================================================================== */
.quote-items-table td.item-desc-cell {
    /* Aby textarea uvnitř <details> mohla být široká */
    min-width: 0;
}
.quote-items-table .item-details-wrap {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #64748b;
}
.quote-items-table .item-details-wrap > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: #6b7280;
    padding: 0.15rem 0;
    transition: color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.quote-items-table .item-details-wrap > summary::-webkit-details-marker { display: none; }
.quote-items-table .item-details-wrap > summary::before {
    content: '+';
    display: inline-block;
    width: 14px;
    text-align: center;
    font-weight: 600;
    color: #94a3b8;
}
.quote-items-table .item-details-wrap[open] > summary::before {
    content: '−';
}
.quote-items-table .item-details-wrap > summary:hover {
    color: #0e7490;
}
.quote-items-table .item-details-textarea {
    margin-top: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.85rem;
    color: #1f2937;
    line-height: 1.45;
}

/* ===========================================================================
   Cyan strip nahoře nad kompaktní dlaždicí (od 2.95)
   Obsahuje zkratku zákazníka (bíle, bold) + celé jméno (světle cyan).
   =========================================================================== */
.server-card.server-card-with-strip,
.server-card.nd-card-with-strip {
    /* Zruš horní zaoblení a padding – strip ho převezme. */
    padding-top: 0;
    overflow: hidden;
}
/* Compact varianta nd-card s customer-stripem nahoře: 4px tyrkysový border-left
   z .nd-card by visel nad strip (overflow:hidden ho neořeže – border je mimo content box).
   V compact módu už identitu „aktivní prvek" nese sám customer-strip a vendor badge,
   takže border-left zarovnáme do běžné šedé jako u ostatních karet. (od 3.0.38) */
.server-card.nd-card-compact.nd-card-with-strip {
    border-left: 1px solid #e5e7eb;
}
.server-card.nd-card-compact.nd-card-with-strip.nd-status-eol {
    /* Pro EOL stav zachováme vizuální zvýraznění alespoň na jiném místě – ne přes border-left
       (visel by nad strip). Místo toho červený badge dál v dlaždici dělá svou práci. */
    border-left-color: #e5e7eb;
}
.server-customer-strip {
    /* Cyan banner přesahující přes celou šířku karty */
    margin: -1px -0.75rem 0.5rem;  /* záporné margin = roztáhnout přes padding karty */
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #0e7490, #155e75);
    color: white;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.25;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.server-customer-strip .strip-code {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.server-customer-strip .strip-name {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* ===========================================================================
   Cenové nabídky – sidebar v editoru: reakce zákazníka + veřejný odkaz (od 2.96)
   =========================================================================== */
.quote-customer-response-card {
    background: white;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin-top: 0.85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border-left: 4px solid #94a3b8;
}
.quote-customer-response-card.is-accepted { border-left-color: #10b981; }
.quote-customer-response-card.is-rejected { border-left-color: #ef4444; }
.quote-customer-response-title {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.quote-customer-response-card.is-accepted .quote-customer-response-title { color: #047857; }
.quote-customer-response-card.is-rejected .quote-customer-response-title { color: #b91c1c; }
.quote-customer-response-meta {
    font-size: 0.85rem;
    color: #1f2937;
    margin: 0 0 0.5rem;
}
.quote-customer-response-meta .hint {
    color: #9ca3af;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}
.quote-customer-response-text {
    background: #f8fafc;
    border-left: 2px solid #cbd5e1;
    padding: 0.55rem 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
    max-height: 200px;
    overflow-y: auto;
}

/* Veřejný odkaz pro zákazníka */
.quote-public-link-card {
    background: white;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin-top: 0.85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.quote-public-link-title {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.quote-public-link-help {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0 0 0.65rem;
    line-height: 1.45;
}
.quote-public-link-row {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}
.quote-public-link-input {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.72rem;
    color: #475569;
    background: #f9fafb;
}
.btn-copy-link {
    background: #0e7490;
    color: white;
    border: 0;
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-copy-link:hover { background: #155e75; }
.quote-public-link-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.55rem;
    line-height: 1.4;
}

/* ===========================================================================
   Cenové nabídky – našeptávač produktů z katalogu (od 2.98)
   =========================================================================== */
.item-desc-suggest-wrap {
    position: relative;
}
.item-desc-suggest {
    /* Dropdown s návrhy je širší než input nad ním – aby se dlouhé popisy
       a thumbnail + details preview pohodlně vešly. Zarovnaný vlevo k inputu,
       roztahuje se doprava na ~3× šířku inputu, max do hranice viewportu. */
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 640px;
    min-width: 100%;
    max-width: calc(100vw - 60px);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    z-index: 50;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
}
.suggest-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: white;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    font-family: inherit;
    font-size: 0.85rem;
    color: #1f2937;
}
.suggest-item:hover, .suggest-item:focus {
    background: #f0fdfa;
    outline: none;
}
.suggest-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}
.suggest-thumb-empty {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 1px dashed #cbd5e1;
}
.suggest-body {
    flex: 1;
    min-width: 0;
}
.suggest-desc {
    font-weight: 500;
    color: #0f172a;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggest-details {
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 0.15rem;
    /* V širokém dropdownu (640px) můžeme dovolit 2 řádky, klasický line-clamp. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggest-count {
    flex-shrink: 0;
    align-self: center;
    color: #94a3b8;
    font-size: 0.72rem;
    background: #f1f5f9;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 500;
}
.suggest-item:hover .suggest-count {
    background: #ccfbf1;
    color: #0f766e;
}

/* ===========================================================================
   Admin → Obchod → Katalog produktů (od 2.99)
   =========================================================================== */
.catalog-stat {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.82rem;
}
.catalog-stat strong { color: #0f172a; font-weight: 600; }
.catalog-stat-warn { background: #fef3c7; color: #78350f; }
.catalog-stat-warn strong { color: #78350f; }

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
    align-items: center;
}
.catalog-filter-input {
    flex: 1;
    min-width: 240px;
    padding: 0.45rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
}
.catalog-sort-select {
    padding: 0.45rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.catalog-edit-form {
    background: #f8fafc;
    border-left: 4px solid #0e7490;
    padding: 1.1rem 1.4rem;
    border-radius: 8px;
    margin: 0 0 1.2rem;
    max-width: 800px;
}
.catalog-edit-form h3 { margin: 0 0 0.85rem; font-size: 1.05rem; color: #0f172a; }
.catalog-edit-form label { display: block; margin-bottom: 0.85rem; font-size: 0.85rem; font-weight: 500; color: #374151; }
.catalog-edit-form input[type="text"], .catalog-edit-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.3rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}
.catalog-image-preview {
    margin: 0.5rem 0;
    padding: 0.5rem 0.8rem;
    background: white;
    border-radius: 6px;
}

.catalog-table { width: 100%; }
.catalog-table .img-col { width: 70px; text-align: center; }
.catalog-table .num-col { width: 80px; text-align: center; }
.catalog-table .meta-col { width: 110px; color: #64748b; font-size: 0.82rem; }
.catalog-table .actions-col { width: 150px; text-align: right; white-space: nowrap; }
.catalog-thumb {
    width: 48px; height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}
.catalog-thumb-empty {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 1px dashed #cbd5e1;
    display: inline-block;
    width: 48px; height: 48px;
    border-radius: 6px;
}
.catalog-details-preview {
    color: #6b7280;
    font-size: 0.78rem;
    margin-top: 0.3rem;
    line-height: 1.45;
    max-width: 560px;
}
.catalog-use-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.catalog-use-high { background: #ccfbf1; color: #0f766e; }
.catalog-use-mid  { background: #f1f5f9; color: #475569; }
.catalog-use-zero { background: #fef3c7; color: #78350f; }
.btn-link-danger { color: #b91c1c !important; }
.btn-link-danger:hover { color: #7f1d1d !important; }

/* ===========================================================================
   Admin → Katalog produktů – upload obrázku v editovacím formu (od 2.99.3)
   =========================================================================== */
.catalog-image-section {
    margin-bottom: 0.85rem;
}
.catalog-image-section-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.4rem;
}
.catalog-image-controls {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.catalog-image-current {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}
.catalog-image-current img {
    max-height: 60px;
    max-width: 80px;
    border-radius: 4px;
    border: 1px solid #f1f5f9;
    display: block;
}
.catalog-image-current.catalog-image-current-empty {
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
    border-style: dashed;
    padding: 1rem 1.4rem;
}
.catalog-image-remove-cb {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 !important;
    font-size: 0.78rem;
    color: #b91c1c;
    cursor: pointer;
    font-weight: 400 !important;
}
.catalog-image-upload-label {
    margin: 0 !important;
    cursor: pointer;
    font-weight: 500 !important;
}
.catalog-image-upload-label input[type="file"] {
    /* Skrytý native file input – nahradíme stylovaným <span> */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.catalog-image-upload-label .upload-text {
    display: inline-block;
    padding: 0.55rem 1rem;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.12s;
}
.catalog-image-upload-label:hover .upload-text {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}
.catalog-image-help {
    color: #9ca3af;
    font-size: 0.78rem;
    margin: 0.45rem 0 0;
}

.catalog-form-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

/* ===========================================================================
   CRM → Cenové nabídky – filter pillí podle stavu (od 2.99.3)
   =========================================================================== */
.quotes-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border-radius: 8px;
}
.quotes-filter-label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.4rem;
}
.quotes-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.85rem;
    color: #475569;
    text-decoration: none;
    transition: all 0.12s;
}
.quotes-filter-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}
.quotes-filter-pill.is-active {
    background: #0e7490;
    border-color: #0e7490;
    color: white;
    font-weight: 500;
}
.quotes-filter-pill.is-active:hover {
    background: #155e75;
}
.quotes-filter-count {
    background: #f1f5f9;
    color: #64748b;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 1.2rem;
    text-align: center;
}
.quotes-filter-pill.is-active .quotes-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ===========================================================================
   Diagnostika DB schématu pro cenové nabídky (od 2.99.5)
   =========================================================================== */
.schema-warning-banner {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 0 0 1.5rem;
    font-size: 0.92rem;
    color: #78350f;
}
.schema-warning-banner strong {
    display: block;
    margin-bottom: 0.4rem;
    color: #78350f;
}
.schema-warning-banner p {
    margin: 0.4rem 0;
    color: #78350f;
    line-height: 1.5;
}
.schema-warning-banner ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}
.schema-warning-banner ul li {
    color: #78350f;
    margin: 0.2rem 0;
}
.schema-warning-banner .hint {
    color: #92400e;
    font-size: 0.82rem;
    font-style: italic;
}

/* Live preview obrázku v katalogu – po výběru souboru (od 2.99.5) */
.catalog-image-current.catalog-image-current-fresh {
    border-color: #0e7490;
    background: #ecfeff;
}
.catalog-image-fresh-hint {
    color: #0e7490;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ===========================================================================
   Cenové nabídky – podrobný popis položky přes celý řádek (od 2.99.5)
   Předtím byl v <details> uvnitř .item-desc-cell. Teď je v samostatném <tr>
   pod hlavním řádkem, šířka přes téměř celou tabulku.
   =========================================================================== */
.item-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 0;
    padding: 0.35rem 0.5rem;
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    font-family: inherit;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s;
}
.item-details-toggle:hover {
    background: #f1f5f9;
    color: #0e7490;
}
.item-details-toggle.is-open {
    color: #0e7490;
    background: #ecfeff;
}
.item-details-toggle .toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    background: white;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}
.item-details-toggle.is-open .toggle-icon {
    background: #0e7490;
    color: white;
    border-color: #0e7490;
}

/* Druhý řádek pod každou položkou s textarea přes celý řádek */
.quote-item-details-row > td:first-child {
    /* Prázdný td pro alignment s image-cell column */
    background: transparent;
    border: 0;
    padding: 0;
}
.quote-item-details-row > td[colspan] {
    padding: 0 0.5rem 0.85rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.quote-item-details-row .item-details-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
    background: #fafafa;
    color: #1f2937;
}
.quote-item-details-row .item-details-textarea:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
    background: white;
}

/* ===========================================================================
   Multi-variant akceptace – tag s vybranou variantou v sidebaru editoru
   (od 2.99.7)
   =========================================================================== */
.quote-accepted-variant-tag {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    margin: 0.7rem 0 0;
    background: #ecfeff;
    border: 1px solid #67e8f9;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #0f172a;
    line-height: 1.4;
}
.quote-accepted-variant-tag .tag-label {
    color: #0e7490;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.15rem;
}
.quote-accepted-variant-tag .tag-price {
    color: #475569;
    font-size: 0.8rem;
    margin-left: auto;
    white-space: nowrap;
}



/* Lock hint pro re-send accepted CN (od 2.99.10) */
.quote-resend-locked-hint {
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.5rem 0.85rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    cursor: help;
}

/* ===========================================================================
   Dashboard tile – akceptované cenové nabídky autora ke zpracování (od 3.0.0)
   =========================================================================== */
.dashboard-stat-card.stat-accepted-quotes .dashboard-stat-num {
    color: #065f46;
}
.dashboard-stat-card.stat-accepted-quotes.is-attention {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
}
.dashboard-stat-card.stat-accepted-quotes.is-attention .dashboard-stat-num {
    color: #b45309;
}
.dashboard-stat-card.stat-accepted-quotes.is-attention .dashboard-stat-sub {
    color: #92400e;
    font-weight: 500;
}

/* ===========================================================================
   Helpdesk – přílohy v novém ticketu (file input + clipboard paste, od 3.0.1)
   =========================================================================== */
.hd-attach-block {
    margin: 0.75rem 0 0.25rem;
}
.hd-attach-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.hd-attach-label {
    display: inline;  /* override defaultního label-block z modalu */
    font-weight: 600;
    color: #374151;
    font-size: 0.85rem;
}
.hd-attach-paste-hint {
    font-size: 0.78rem;
    color: #6b7280;
    background: #f0fdfa;
    border: 1px dashed #99f6e4;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.hd-attach-paste-hint strong {
    color: #0e7490;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 0.78rem;
}
#nt-files {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
    box-sizing: border-box;
}
#nt-files:hover { border-color: #0e7490; background: #ecfeff; }

.hd-attach-preview {
    margin-top: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}
.hd-attach-preview[hidden] { display: none !important; }
.hd-attach-preview:not([hidden]) { display: grid; }
.hd-attach-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    position: relative;
}
.hd-attach-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.hd-attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hd-attach-thumb.is-doc { background: #fef3c7; }
.hd-attach-info {
    flex: 1 1 auto;
    min-width: 0;
}
.hd-attach-name {
    font-size: 0.8rem;
    color: #1f2937;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hd-attach-meta {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}
.hd-attach-del {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #9ca3af;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.35rem;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}
.hd-attach-del:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* Ticket-level přílohy (od 3.0.1) – přílohy z modálu nového ticketu */
.ticket-attachments {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
}
.ticket-attachments-label {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ticket-attachments .attachment-list {
    margin: 0;
}

/* ===========================================================================
   Helpdesk – přílohy s miniaturami obrázků + lightbox (od 3.0.2)
   =========================================================================== */
/* attachment-list už existuje – tady jen rozšíření pro image item */
.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.attachment-item {
    /* fallback pro non-image (ikona + jméno) */
    display: flex;
}
.attachment-item-image {
    /* image miniatura: fixní šířka */
    flex: 0 0 auto;
}
.attachment-link-image {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    color: #1f2937;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    width: 140px;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s;
    cursor: zoom-in;
}
.attachment-link-image:hover {
    border-color: #0e7490;
    box-shadow: 0 2px 8px rgba(14,116,144,0.15);
}
.attachment-link-image:active {
    transform: scale(0.98);
}
.attachment-thumb {
    display: block;
    width: 100%;
    height: 90px;
    background: #f1f5f9;
    overflow: hidden;
    position: relative;
}
.attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.attachment-link-image .attachment-meta {
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0.5rem;
    gap: 0.1rem;
}
.attachment-link-image .attachment-name {
    font-size: 0.75rem;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attachment-link-image .attachment-size {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Lightbox overlay
   Pozor: použijeme :not([hidden]) místo .lightbox-overlay { display:flex },
   protože autorské CSS přebíjí browser default [hidden] { display:none }
   a overlay by byl vidět vždy. */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.92);
    z-index: 9999;
    padding: 2rem;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
}
.lightbox-overlay[hidden] { display: none !important; }
.lightbox-overlay:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxFadeIn 0.18s ease-out;
}
@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
body.lightbox-active { overflow: hidden; }

.lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.lightbox-img {
    max-width: 100%;
    max-height: calc(90vh - 80px);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    display: block;
    object-fit: contain;
}
.lightbox-caption {
    color: #cbd5e1;
    font-size: 0.85rem;
    text-align: center;
    max-width: 80vw;
    word-break: break-word;
}
.lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: transparent;
    border: 0;
    color: white;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.5rem;
    border-radius: 6px;
    transition: background 0.12s;
}
.lightbox-close:hover {
    background: rgba(255,255,255,0.1);
}
.lightbox-download {
    position: absolute;
    top: -2.3rem;
    right: 3rem;
    background: rgba(255,255,255,0.1);
    color: white;
    text-decoration: none;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.12s;
}
.lightbox-download:hover {
    background: rgba(255,255,255,0.2);
}

/* Hint pro paste v komentáři */
.comment-paste-hint {
    font-size: 0.75rem;
    color: #6b7280;
    background: #f0fdfa;
    border: 1px dashed #99f6e4;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* Responzivní: na malých obrazovkách menší thumby */
@media (max-width: 600px) {
    .attachment-link-image { width: 110px; }
    .attachment-thumb { height: 70px; }
    .lightbox-close { top: -3rem; }
    .lightbox-download { top: -2.8rem; right: 3.5rem; }
}

/* Tabulky s dvojklik-otevřením detailu (od 3.0.5) */
table.is-dblclick tr[data-href] {
    cursor: default;
    transition: background 0.12s;
}
table.is-dblclick tr[data-href]:hover {
    background: #f8fafc;
}
table.is-dblclick tr[data-href]:hover td:first-child::before {
    content: '';  /* placeholder – styling indikátoru jen z hover background */
}

/* Infra ownership filter (od 3.0.5, upravené 3.0.6 ve stylu výkazu) */
.infra-filter-divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 0.4rem;
    vertical-align: middle;
}
.infra-view-tabs {
    vertical-align: middle;
}

/* ===========================================================================
   Přílohy bodů schůzky (od 3.0.6)
   =========================================================================== */
.meeting-section-attach {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e5e7eb;
}
.meeting-section-attach-existing {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}
.msa-existing-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.3rem 0.45rem 0.3rem 0.3rem;
    max-width: 280px;
}
.msa-existing-item.is-pending-delete {
    opacity: 0.45;
    text-decoration: line-through;
    background: #fef2f2;
    border-color: #fecaca;
}
.msa-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #64748b;
    font-size: 1.3rem;
    cursor: pointer;
    transition: transform 0.08s;
}
.msa-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msa-thumb:hover {
    transform: scale(1.04);
}
.msa-thumb-doc { background: #fef3c7; }

.msa-existing-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.msa-name {
    font-size: 0.78rem;
    color: #1f2937;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.msa-size {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}
.msa-existing-del {
    background: transparent;
    border: 0;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.3rem;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}
.msa-existing-del:hover:not(:disabled) {
    color: #dc2626;
    background: #fef2f2;
}
.msa-existing-del:disabled {
    cursor: default;
    color: #2563eb;
}

/* Bar pro přidání nových příloh */
.meeting-section-attach-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.msa-attach-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #475569;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.msa-attach-button:hover {
    border-color: #0e7490;
    background: #ecfeff;
    color: #0e7490;
}
.msa-attach-button input[type="file"] {
    display: none;
}
.msa-paste-hint {
    font-size: 0.74rem;
    color: #6b7280;
    background: #f0fdfa;
    border: 1px dashed #99f6e4;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ===========================================================================
   Listing CN: výpis variant pod sebe + číslo jako odkaz (od 3.0.7)
   =========================================================================== */
.quote-number-link {
    color: #0e7490;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.12s;
}
.quote-number-link:hover {
    color: #155e75;
    text-decoration: underline;
}

.quote-variants-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.quote-variant-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    white-space: nowrap;
}
.quote-variant-price {
    font-variant-numeric: tabular-nums;
    color: #1f2937;
}
.quote-variant-label {
    font-size: 0.75rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-weight: 500;
}
.quote-variant-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.quote-variant-tag.is-accepted {
    background: #d1fae5;
    color: #065f46;
}
.quote-variant-tag.is-rejected {
    background: #f1f5f9;
    color: #94a3b8;
}

/* Vazba na zdrojový zápis schůzky v detailu ticketu (od 3.0.8) */
.ticket-meeting-source {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    font-size: 0.88rem;
}
.ticket-meeting-source-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ticket-meeting-source-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}
.ticket-meeting-source-label {
    color: #5b21b6;
    font-weight: 600;
}
.ticket-meeting-source-link {
    color: #6d28d9;
    text-decoration: none;
    font-weight: 500;
}
.ticket-meeting-source-link:hover {
    text-decoration: underline;
}
.ticket-meeting-source-date {
    color: #8b5cf6;
    font-weight: 400;
}
.ticket-meeting-source-section {
    color: #6b7280;
    font-style: italic;
}

/* Název schůzky jako odkaz v globálním seznamu (od 3.0.9) */
.meeting-title-link {
    color: #1f2937;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.12s;
}
.meeting-title-link:hover {
    color: #0e7490;
    text-decoration: underline;
}

/* Sloupec „Název" v listingu CN (od 3.0.11) */
.quote-title-cell {
    color: #1f2937;
    font-weight: 500;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Název jako odkaz – jednoklik otevře detail (od 3.0.12) */
.quote-title-link {
    color: #1f2937;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.12s;
}
.quote-title-link:hover {
    color: #0e7490;
    text-decoration: underline;
}


/* ===========================================================================
   Picker modal · výběr zákazníka při „+ Nová nabídka" / „+ Nový zápis"
   Jednoduchá modalka s jediným autocomplete polem a dvěma tlačítky.
   (od 3.0.12 – moderní vzhled bez závislosti na .modal/.modal-buttons stylech)
   =========================================================================== */
.picker-modal {
    background: white;
    border-radius: 14px;
    box-shadow: 0 25px 70px rgba(0, 8, 20, 0.45);
    width: 100%;
    max-width: 560px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    overflow: visible;  /* dropdown autocomplete může přetéct přes okraj */
    animation: pickerModalIn 0.18s ease-out;
}
@keyframes pickerModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hlavička s názvem akce */
.picker-modal-head {
    padding: 1.5rem 1.85rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 14px 14px 0 0;
    flex-shrink: 0;
}
.picker-modal-head h3 {
    margin: 0 0 0.4rem;
    color: #0e7490;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.picker-modal-head p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Tělo se vstupním polem */
.picker-modal-body {
    padding: 1.5rem 1.85rem 1.6rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.picker-modal-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}
.picker-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    background: white;
    color: #1f2937;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.picker-modal-input:hover {
    border-color: #94a3b8;
}
.picker-modal-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.15);
}
.picker-modal-input::placeholder {
    color: #94a3b8;
}
.picker-modal-hint {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
}

/* Patička s tlačítky */
.picker-modal-foot {
    padding: 1.1rem 1.85rem 1.35rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    border-radius: 0 0 14px 14px;
    flex-shrink: 0;
}
.picker-btn {
    padding: 0.7rem 1.6rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    font-family: inherit;
    transition: all 0.15s ease;
    line-height: 1.2;
    letter-spacing: 0.005em;
}
.picker-btn-secondary {
    background: white;
    color: #475569;
    border-color: #cbd5e1;
}
.picker-btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1f2937;
}
.picker-btn-primary {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(8, 145, 178, 0.3);
}
.picker-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    box-shadow: 0 5px 16px rgba(8, 145, 178, 0.42);
    transform: translateY(-1px);
}
.picker-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
}
.picker-btn-primary:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    border-color: transparent;
}

/* Autocomplete dropdown – position absolute, ať přetéká přes spodní okraj modalu */
.picker-modal .autocomplete-wrap {
    position: relative;
}
.picker-modal .autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 250;
}
.picker-modal .autocomplete-list[hidden] { display: none; }

/* Mobilní úpravy */
@media (max-width: 600px) {
    .picker-modal {
        max-width: 100%;
        min-height: 0;
        border-radius: 12px;
    }
    .picker-modal-head { padding: 1.2rem 1.3rem 0.7rem; }
    .picker-modal-body { padding: 1.2rem 1.3rem 1.3rem; }
    .picker-modal-foot { padding: 0.95rem 1.3rem 1.1rem; }
    .picker-btn { padding: 0.65rem 1.2rem; font-size: 0.9rem; }
}

/* ===========================================================================
   Zákaznický portal · top navigace + dashboard (od 3.0.15)
   =========================================================================== */
.portal-nav {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    margin-left: 1.5rem;
}
.portal-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: 7px;
    transition: background 0.15s, color 0.15s;
}
.portal-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}
.portal-nav a.active {
    background: rgba(255, 255, 255, 0.16);
    color: white;
    font-weight: 600;
}
.portal-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 0.35rem;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.portal-nav-badge-warn {
    background: #ef4444;
    color: white;
}
.portal-nav a.active .portal-nav-badge {
    background: rgba(0, 0, 0, 0.18);
}

.portal-org-name {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin-right: 0.7rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-user-name {
    font-size: 0.88rem;
    color: white;
    font-weight: 500;
}

/* Dashboard grid se statistickými dlaždicemi */
.portal-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.portal-stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}
.portal-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}
.portal-stat-icon {
    font-size: 1.6rem;
    margin-bottom: 0.2rem;
}
.portal-stat-num {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0e7490;
    line-height: 1;
    margin: 0.2rem 0;
}
.portal-stat-label {
    font-size: 0.95rem;
    color: #1f2937;
    font-weight: 600;
}
.portal-stat-note {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 0.35rem;
}

/* Akcent barvy podle typu dlaždice */
.portal-stat-tickets .portal-stat-num   { color: #0891b2; }
.portal-stat-quotes .portal-stat-num    { color: #7c3aed; }
.portal-stat-hours .portal-stat-num     { color: #059669; }
.portal-stat-servers .portal-stat-num   { color: #dc2626; }

/* Karta „Významné změny" v dashboardu – jemný okraj */
.portal-changes-card {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 1px solid #fef08a;
}
.portal-changes-card .portal-card-title {
    color: #854d0e;
}

/* Footer karty s odkazem „→ Zobrazit všechny" */
.portal-card-footer {
    padding: 0.9rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    text-align: center;
    border-radius: 0 0 12px 12px;
}
.portal-card-see-all {
    color: #0e7490;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.portal-card-see-all:hover {
    text-decoration: underline;
}

/* Tabulka cenových nabídek v zákaznickém portálu */
.portal-quotes-table th { text-align: left; }
.portal-quotes-table td { vertical-align: top; }
.portal-quotes-table .num { text-align: right; }

/* Mobilní nav: tabs pod logem v druhém řádku */
@media (max-width: 900px) {
    .topbar-myaite .topbar-inner {
        flex-wrap: wrap;
    }
    .portal-nav {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px solid rgba(255,255,255,0.12);
        overflow-x: auto;
        gap: 0.1rem;
    }
    .portal-nav a {
        padding: 0.45rem 0.75rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    .portal-org-name { max-width: 130px; }
}

/* ===========================================================================
   Sdělení od admina v portálu „Významné změny" (od 3.0.15)
   =========================================================================== */
.portal-announcement-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.portal-announcement-item {
    padding: 0.85rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.portal-announcement-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.portal-announcement-item:first-child {
    padding-top: 0;
}
.portal-announcement-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.portal-announcement-title {
    color: #1f2937;
    font-size: 1rem;
}
.portal-announcement-date {
    font-size: 0.78rem;
    color: #9ca3af;
    white-space: nowrap;
}
.portal-announcement-content {
    color: #374151;
    line-height: 1.55;
    font-size: 0.92rem;
}
.portal-announcement-expires {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: #dc2626;
    font-style: italic;
}

/* ===========================================================================
   Helpdesk · náhled popisu pod každým ticketem v seznamu (od 3.0.17)
   Druhý <tr> s colspan=8 sjednocujícím všechny sloupce, šedý italic text.
   =========================================================================== */
.tbl-helpdesk-admin .hd-ticket-main-row.has-desc > td {
    border-bottom: 0;  /* vizuálně sjednoť hlavní řádek a desc-row jako jeden ticket */
    padding-bottom: 0.4rem;
}
.tbl-helpdesk-admin .hd-ticket-desc-row > td {
    padding: 0 0.85rem 0.7rem 0.85rem;
    border-top: 0;
    background: inherit;
}
.tbl-helpdesk-admin .hd-ticket-desc-row:hover > td {
    background: #f0f9ff;  /* hover sjednocený s hlavním řádkem */
}
.tbl-helpdesk-admin .hd-ticket-main-row:hover + .hd-ticket-desc-row > td {
    background: #f0f9ff;
}
.hd-ticket-desc-preview {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.45;
    font-style: italic;
    padding-left: 1px;  /* vyrovná začátek se sloupcem Ticket */
    /* Bez fixní šířky - vyplní celý colspan */
}

/* ===========================================================================
   Zákaznický portál · 50/50 grid pro Nástěnku + Významné změny (od 3.0.18)
   =========================================================================== */
.portal-board-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.25rem 0;
}
.portal-board-grid > .portal-card {
    margin: 0;  /* místo defaultního marginu používáme grid gap */
}
@media (max-width: 900px) {
    .portal-board-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ===========================================================================
   Zákaznický portál · dlaždice s progress barem (od 3.0.18)
   =========================================================================== */
.portal-stat-num-of {
    font-size: 0.7em;
    color: #94a3b8;
    font-weight: 500;
    margin-left: 0.25rem;
}
.portal-stat-bar-track {
    margin-top: 0.5rem;
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.portal-stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.portal-stat-bar-fill.hours-bar-good { background: #10b981; }
.portal-stat-bar-fill.hours-bar-warn { background: #f59e0b; }
.portal-stat-bar-fill.hours-bar-over { background: #ef4444; }

.portal-stat-card .portal-stat-note strong.hours-bar-good { color: #047857; }
.portal-stat-card .portal-stat-note strong.hours-bar-warn { color: #b45309; }
.portal-stat-card .portal-stat-note strong.hours-bar-over { color: #b91c1c; }

/* SW dlaždice - jiná barevná akcentace ať jde rozlišit od serveru */
.portal-stat-card.portal-stat-sw {
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
    border-color: #e9d5ff;
}
.portal-stat-card.portal-stat-network {
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
    border-color: #99f6e4;
}

/* ===========================================================================
   Zákaznický portál · Servery view – sekční podtitulek (od 3.0.18)
   =========================================================================== */
.portal-section-subtitle {
    margin: 0.85rem 0 0.85rem;
    color: #475569;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Klikací title/desc v tabulce požadavků v zákaznickém portálu (od 3.0.20) */
.hd-title-link, .hd-desc-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.hd-title-link strong { color: #1f2937; }
.hd-title-link:hover strong { color: #0891b2; text-decoration: underline; }
.hd-desc-link { color: #6b7280; }
.hd-desc-link:hover .hd-desc { color: #374151; }

/* ===========================================================================
   Announcement modal · sticky foot s submit tlačítkem (od 3.0.22)
   Modal má scrollable body a sticky footer, ať tlačítka nikdy nezmizí pod fold.
   =========================================================================== */
.modal.announcement-modal-box {
    max-width: 640px;
    max-height: 90vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.announcement-modal-head {
    padding: 1.4rem 1.85rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.announcement-modal-head h3 {
    margin: 0;
    color: #0e7490;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.announcement-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.announcement-modal-body {
    padding: 1.4rem 1.85rem 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.announcement-modal-foot {
    padding: 1rem 1.85rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    flex-shrink: 0;
}

/* ===========================================================================
   Pěkné tlačítko pro upload příloh v zákaznickém portálu (od 3.0.24)
   – nativní <input type="file"> je skrytý a klikem se trigger přes <label>.
   =========================================================================== */
.hd-attach-file-input {
    /* Skrýt nativní button, ale ponechat funkční pro keyboard */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    clip: rect(0,0,0,0);
}
.hd-attach-button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    background: #fafbfc;
    color: #475569;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.15s;
    user-select: none;
    margin: 0;  /* override default label margin */
}
.hd-attach-button:hover {
    border-color: #0891b2;
    background: #f0fdfa;
    color: #0e7490;
    box-shadow: 0 2px 6px rgba(8,145,178,0.08);
}
.hd-attach-button:focus-within,
.hd-attach-button:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.15);
}
.hd-attach-file-input:focus + .hd-attach-button {
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.15);
}
.hd-attach-button-icon {
    font-size: 1.15rem;
    line-height: 1;
}
.hd-attach-button-hint {
    margin-left: auto;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 400;
}

/* Doporučení pod seznamem dovolených na zákaznické nástěnce (od 3.0.24) */
.board-vacation-hint {
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.75rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    font-size: 0.82rem;
    color: #78350f;
    line-height: 1.45;
}

/* ===========================================================================
   „Významné změny" – feed customer_changes v zákaznickém portálu (od 3.0.25)
   =========================================================================== */
.portal-card-subtitle {
    color: #9ca3af;
    font-size: 0.82rem;
    font-weight: 400;
}
.portal-changes-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.portal-change-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.1rem;
    row-gap: 0.2rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #f1f5f9;
    align-items: start;
}
.portal-change-item:first-child { padding-top: 0; }
.portal-change-item:last-child  { border-bottom: 0; padding-bottom: 0; }
.portal-change-meta {
    /* Wrapper jen pro datum – display:contents znamená, že potomek ('span.portal-change-date')
       se promítne přímo do gridu rodiče. Datum sedí vlevo přes obě řádky (popis + autor). */
    display: contents;
}
.portal-change-date {
    grid-column: 1;
    grid-row: 1 / span 2;       /* přes oba řádky napravo */
    align-self: center;         /* vertikálně mezi popisem a autorem */
    font-size: 1.4rem;
    font-weight: 600;
    color: #0891b2;             /* myaite tyrkysová */
    line-height: 1.05;
    letter-spacing: -0.01em;
    white-space: nowrap;
    /* Min šířka, ať se sloupce u různých dat nehoupají (8.5. vs 28.12.) */
    min-width: 3.4rem;
    text-align: left;
}
.portal-change-desc {
    grid-column: 2;
    grid-row: 1;
    color: #1f2937;
    line-height: 1.5;
    font-size: 0.92rem;
}
.portal-change-author {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.78rem;
    color: #6b7280;
}

/* ===========================================================================
   Verze firmwarů (admin → tab=device_branches) – od 3.0.35
   Vendor karty s pěknou tabulkou, vzdušnost, barvitost u stavů.
   =========================================================================== */
.firmware-vendor-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.firmware-vendor-head {
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border-bottom: 1px solid #cffafe;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.firmware-vendor-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0e7490;
    letter-spacing: -0.01em;
}
.firmware-vendor-meta {
    color: #64748b;
    font-size: 0.83rem;
}
.firmware-vendor-body {
    overflow-x: auto;
}
.firmware-branches-table {
    width: 100%;
    border-collapse: collapse;
}
.firmware-branches-table thead th {
    background: #fafbfc;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    white-space: nowrap;
}
.firmware-branches-table tbody td {
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #1f2937;
    font-size: 0.9rem;
}
.firmware-branches-table tbody tr:last-child td {
    border-bottom: 0;
}
.firmware-branches-table tbody tr:hover {
    background: #fafbfc;
}
.firmware-branches-table tbody tr.is-eol {
    background: #fff7ed;
}
.firmware-branches-table tbody tr.is-eol:hover {
    background: #ffedd5;
}
.firmware-branches-table tbody tr.is-unmaintained td {
    color: #94a3b8;
}

/* Sloupce: rozumné šířky aby tabulka dýchala */
.firmware-branches-table .col-branch    { width: 22%; }
.firmware-branches-table .col-version   { width: 16%; }
.firmware-branches-table .col-released  { width: 13%; white-space: nowrap; }
.firmware-branches-table .col-eos       { width: 13%; white-space: nowrap; }
.firmware-branches-table .col-status    { width: 17%; }
.firmware-branches-table .col-sync      { width: 19%; white-space: nowrap; }

.fw-branch-name {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
}
.fw-branch-label {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

/* Verze – tyrkysový badge */
.fw-version-badge {
    display: inline-block;
    background: #ecfeff;
    color: #0e7490;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-family: 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #cffafe;
    letter-spacing: -0.01em;
}
.is-eol .fw-version-badge {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

/* Stav badges */
.fw-status-badge {
    display: inline-block;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.fw-status-supported {
    background: #d1fae5;
    color: #065f46;
}
.fw-status-eol {
    background: #fee2e2;
    color: #991b1b;
}
.fw-status-unmaintained {
    background: #f1f5f9;
    color: #64748b;
}
.fw-sync-time {
    color: #64748b;
    font-size: 0.82rem;
}

/* ===========================================================================
   Compact režim pro síťová zařízení (od 3.0.37)
   – analog k .server-card-compact pro routery / switche / accesspointy.
   – Aktivuje se v servers.php?type=network (multi-customer kompaktní mřížka).
   =========================================================================== */
.server-card.nd-card-compact {
    padding: 0.5rem 0.75rem;
}
.server-card.nd-card-compact .server-header {
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
}
.server-card.nd-card-compact .server-header strong {
    font-size: 0.92rem;
}
.server-card.nd-card-compact .nd-badges-row {
    margin-top: 0.25rem;
    gap: 0.25rem;
}
.server-card.nd-card-compact .server-role-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
}
/* Verze panel zkompaktnit – jeden řádek místo dvou stacků */
.server-card.nd-card-compact .nd-version-panel {
    padding: 0.4rem 0.7rem;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
}
.server-card.nd-card-compact .nd-version-current,
.server-card.nd-card-compact .nd-version-latest {
    font-size: 0.83rem;
}
.server-card.nd-card-compact .nd-version-label {
    font-size: 0.72rem;
}
.server-card.nd-card-compact .nd-status-badge {
    font-size: 0.7rem;
    padding: 0.12rem 0.45rem;
}
/* Server-actions s jednou dlaždicí – plná šíře, menší padding */
.server-card.nd-card-compact .server-actions {
    grid-template-columns: 1fr;
    gap: 0;
}
.server-card.nd-card-compact .action-btn {
    padding: 0.5rem 0.7rem;
    min-height: auto;
}
.server-card.nd-card-compact .action-btn .btn-label {
    font-size: 0.85rem;
}
.server-card.nd-card-compact .action-btn .btn-meta {
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

/* ===========================================================================
   Mobile hamburger pro horní topbar (od 3.0.39)
   – Hamburger button injectovaný JSem (topbar-mobile.js).
   – Skrytý na desktop, viditelný na mobile (max-width: 768px).
   – Po kliku se nav rozjede zprava jako overlay panel + tmavý backdrop.
   =========================================================================== */
.topbar-hamburger {
    display: none;  /* zobrazí se jen na mobilu */
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    margin-right: 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.topbar-hamburger:hover { background: rgba(255,255,255,0.08); }
.topbar-hamburger:focus { outline: 2px solid #67e8f9; outline-offset: 2px; }
.topbar-hamburger .hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #cbd5e1;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: center;
}
/* Po otevření: 3 čárky se přemění na X */
.topbar-hamburger.is-active .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.topbar-hamburger.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.topbar-hamburger.is-active .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.topbar-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 20, 0.55);
    backdrop-filter: blur(2px);
    z-index: 49;  /* pod topbarem (50), ale nad obsahem */
    opacity: 0;
    transition: opacity 0.2s;
}
.topbar-menu-backdrop.is-active {
    display: block;
    opacity: 1;
}

/* === Mobile breakpoint === */
@media (max-width: 768px) {
    .topbar-hamburger { display: inline-flex; }

    /* Topbar zhuštěný */
    .topbar-inner {
        padding: 0 0.85rem;
        gap: 0.6rem;
        height: 56px;
    }
    .topbar:has(.brand-myaite) .topbar-inner,
    .topbar.topbar-myaite .topbar-inner { height: 56px; }
    .topbar:has(.brand-myaite),
    .topbar.topbar-myaite { min-height: 56px; }

    .topbar .brand img { height: 28px; }
    .topbar .brand-myaite img { height: 26px; }
    .topbar .brand-title { display: none; }  /* "Servis portál" textový title schováme */

    /* Nav schovaný a otevíraný odprava jako panel */
    .topbar nav {
        position: fixed;
        top: 56px;  /* pod topbarem */
        right: 0;
        bottom: 0;
        width: min(280px, 80vw);
        background: #001020;
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        transform: translateX(100%);
        transition: transform 0.25s ease-out;
        box-shadow: -4px 0 20px rgba(0,0,0,0.4);
        overflow-y: auto;
        z-index: 51;  /* nad topbarem aby byl viditelný */
    }
    .topbar nav.is-open {
        transform: translateX(0);
    }
    .topbar nav a {
        padding: 0.85rem 1.4rem;
        border-radius: 0;
        font-size: 0.95rem;
        border-left: 3px solid transparent;
    }
    .topbar nav a.active {
        background: rgba(8, 145, 178, 0.15);
        border-left-color: #0891b2;
    }

    /* User box: jméno schované, jen avatar + odhlásit (kompaktnější) */
    .topbar .user {
        font-size: 0.78rem;
        gap: 0.5rem;
        margin-left: auto;
    }
    .topbar .user span {
        display: none;  /* na mobilu skryjeme jméno + roli, je tam place limit */
    }
    .topbar .user .role-badge { display: none; }
    .topbar .user a {
        font-size: 0.8rem;
        white-space: nowrap;
    }
    /* Pro myaite topbar (zákaznický portál) zachováme org name pokud je krátké */
    .topbar.topbar-myaite .portal-org-name,
    .topbar.topbar-myaite .portal-user-name {
        display: none;
    }

    /* Při otevřeném menu zamknout scroll body, aby se nehybalo pod overlayem */
    body.topbar-menu-open {
        overflow: hidden;
    }

    /* Main content padding zhuštěný */
    main {
        padding: 0.5rem 0.85rem 1rem;
    }
}

/* Velmi malé telefony (~360px) – ještě těsněji */
@media (max-width: 380px) {
    .topbar-inner {
        padding: 0 0.6rem;
        gap: 0.4rem;
    }
    .topbar .brand img { height: 24px; }
    .topbar .brand-myaite img { height: 22px; }
}

/* ===========================================================================
   "Update na verzi X.Y.Z" tlačítko v dlaždici aktivního prvku (od 3.0.40)
   – Modré (signalizuje akci, ne dokončenou údržbu).
   =========================================================================== */
.nd-update-btn {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: #fff;
    border: none;
    margin-bottom: 0.4rem;
}
.nd-update-btn .btn-label {
    color: #fff;
    font-weight: 600;
}
.nd-update-btn .btn-meta {
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
}
.nd-update-btn:hover {
    background: linear-gradient(135deg, #0e7490, #155e75);
    box-shadow: 0 2px 8px rgba(8,145,178,0.35);
}
/* V kompaktním režimu menší padding, ať nezhušťuje příliš */
.server-card.nd-card-compact .nd-update-btn {
    margin-bottom: 0.3rem;
}

/* ============================================================================
   Helpdesk tabulka – řazení a rychlé vyhledávání (od 3.08)
   ============================================================================ */

/* Quick search input vedle filtru zákazníka */
.hd-quick-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 480px;
}
.hd-quick-search-icon {
    position: absolute;
    left: 0.65rem;
    pointer-events: none;
    opacity: 0.6;
    font-size: 0.9rem;
}
.hd-quick-search-input,
#hd-quick-search-input {
    width: 100%;
    padding: 0.45rem 2rem 0.45rem 2rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    background: #fff;
}
#hd-quick-search-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.15);
}
.hd-quick-search-clear {
    position: absolute;
    right: 0.35rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1;
}
.hd-quick-search-clear:hover { color: #ef4444; }

/* Sortable headery */
.hd-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.4rem !important;
}
.hd-sortable:hover {
    background: #f1f5f9;
}
.hd-sortable::after {
    content: "↕";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    font-size: 0.85rem;
    transition: color 0.15s;
}
.hd-sortable:hover::after {
    color: #64748b;
}
.hd-sortable.sort-asc::after  { content: "▲"; color: #0891b2; }
.hd-sortable.sort-desc::after { content: "▼"; color: #0891b2; }

@media (max-width: 768px) {
    .hd-quick-search { flex: 1 1 100%; max-width: none; }
}

/* ============================================================================
   Zachování odřádkování v user-generated obsahu (od 3.09)
   ============================================================================
   Dříve jsme používali `nl2br(h($text))` při renderu, který vkládal <br />
   za každé \n. Ve třídách s `white-space: pre-wrap` se navíc samotné \n
   v textu zachovává jako viditelný newline – výsledek bylo DVOJITÉ
   odřádkování. Teď renderujeme jen `h($text)` a o zachování \n se stará
   tento CSS pravidlo. (Pro emailové šablony zůstává nl2br – tam pre-wrap
   nefunguje napříč email klienty.)
   ============================================================================ */
.ticket-desc,
.portal-announcement-content,
.quote-customer-response-text,
.catalog-details-preview,
.item-details {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================================================
   Auto-resize textarea (od 3.10)
   - rozumný min/max aby textarea nepřerostla na celou obrazovku
   - skript v assets/auto-resize-textarea.js se postará o samotnou výšku
   ============================================================================ */
textarea.auto-resize {
    min-height: 4.5em;       /* default ~3 řádky */
    max-height: 70vh;        /* nikdy přes 70 % výšky okna */
    transition: height 80ms ease-out;
    overflow-y: hidden;      /* skript přepne na 'auto' až při překročení max-height */
}

/* ============================================================================
   Ticket „Na vědomí" CC card (od 3.13, refactor od 3.14)
   Kompaktní layout: avatar + pilulka [Jméno · důvod  ✕] vše na jednom řádku.
   ============================================================================ */
.ticket-cc-card h4 small {
    font-size: 0.78rem;
    margin-left: 0.3rem;
}
.ticket-cc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ticket-cc-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ticket-cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.18rem 0.5rem 0.18rem 0.65rem;
    font-size: 0.82rem;
    color: #334155;
    line-height: 1.3;
    flex: 0 1 auto;
    min-width: 0;
}
.ticket-cc-pill-name {
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-cc-pill-reason {
    color: #64748b;
    font-size: 0.74rem;
    white-space: nowrap;
}
.ticket-cc-pill-reason::before {
    content: "·";
    margin-right: 0.3rem;
    color: #cbd5e1;
}
.ticket-cc-remove-form {
    display: inline;
    margin: 0;
}
.ticket-cc-pill-remove {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ticket-cc-pill-remove:hover {
    color: #ef4444;
    background: #fee2e2;
}
.ticket-cc-add-form {
    margin-top: 0.5rem;
}
.ticket-cc-add-form select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #475569;
    background: #fafbfc;
}
.ticket-cc-add-form select:hover,
.ticket-cc-add-form select:focus {
    border-color: #0891b2;
    border-style: solid;
    outline: none;
}

/* (ty) marker v CC pilulce (od 3.15) */
.ticket-cc-pill-you {
    color: #0891b2;
    font-size: 0.72rem;
    font-weight: 400;
    margin-left: 0.2rem;
}

/* ============================================================================
   Customer portal · dlaždice „Dokumentace" – odkaz na zákaznickou
   Confluence wiki (od 3.17). Vizuálně se mírně odlišuje od běžných stat
   dlaždic, aby šlo poznat, že je to externí odkaz (jiné okno).
   ============================================================================ */
.portal-stat-card.portal-stat-docs {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}
.portal-stat-card.portal-stat-docs:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.portal-stat-docs .portal-stat-num {
    color: #1d4ed8;
}
/* Pokud místo čísla zobrazujeme text "Dokumentace", zmenšíme ho – číslo
   v ostatních dlaždicích je 2.2rem, tady je to slovo. */
.portal-stat-num.portal-stat-num-text {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ============================================================================
   Picker modal · subject toggle (zákazník ↔ OEM partner) – od 3.23
   ============================================================================ */
.picker-modal-toggle {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
    padding: 0.25rem;
    background: #f1f5f9;
    border-radius: 8px;
}
.picker-modal-toggle-btn {
    flex: 1;
    padding: 0.45rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.picker-modal-toggle-btn:hover {
    color: #1f2937;
}
.picker-modal-toggle-btn.is-active {
    background: #fff;
    border-color: #cbd5e1;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    font-weight: 500;
}

/* ============================================================================
   Interní komentáře u ticketů (od 3.24)
   - Zaškrtnutí v add form: žluté pozadí celého formuláře
   - Existující interní komentář: žluté pozadí komentáře + štítek
   ============================================================================ */
.comment-internal-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    font-size: 0.82rem;
    color: #475569;
    transition: all 0.15s;
}
.comment-internal-toggle:hover {
    border-color: #ca8a04;
    background: #fefce8;
    color: #713f12;
}
.comment-internal-toggle input[type="checkbox"] {
    margin: 0;
    accent-color: #ca8a04;
}

/* Žluté zvýraznění formuláře dokud je „Interní" zaškrtnutý */
.comment-form.comment-form-internal {
    background: #fefce8;
    border: 1px dashed #ca8a04;
    border-radius: 8px;
    padding: 0.5rem;
    transition: background 0.2s ease;
}
.comment-form.comment-form-internal::before {
    content: "🔒 Interní komentář – uvidí jen aitelogic tým";
    display: block;
    font-size: 0.78rem;
    color: #a16207;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

/* Existující interní komentář v seznamu */
.comment-item.comment-is-internal .comment-bubble {
    background: #fefce8 !important;
    border: 1px dashed #ca8a04 !important;
}
.comment-internal-badge {
    display: inline-flex;
    align-items: center;
    background: #ca8a04;
    color: #fff;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 0.4rem;
    letter-spacing: 0.02em;
}

/* ============================================================================
   OEM rebranding v topbaru – jen logo OEM partnera, žádné myaite (od 3.32).
   Předtím byl od 3.28 cobranding [myaite] | [OEM], ale OEM partneři chtějí
   čistě své logo.
   ============================================================================ */
.brand.brand-oem-only {
    display: inline-flex;
    align-items: center;
    height: 32px;
    text-decoration: none;
}
.brand.brand-oem-only img {
    max-height: 32px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Bílé pozadí pro loga s průhledným / tmavým podkladem, aby fungovala na dark topbaru */
    background: #fff;
    border-radius: 4px;
    padding: 3px 8px;
    box-sizing: border-box;
}

/* ============================================================================
   Customer tiles v adminu (od 3.38, refresh 3.39 podle .user-card)
   ============================================================================ */
.admin-customers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.admin-customers-head h3 {
    margin: 0;
}
.admin-customers-head-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-customer-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
    align-items: stretch;
}
.admin-customer-tile {
    position: relative;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 0.7rem 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    gap: 0.35rem;
    box-sizing: border-box;
}
.admin-customer-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #d1d5db;
    transform: translateY(-1px);
}
.admin-customer-tile-inactive {
    opacity: 0.55;
    background: #fafafa;
}
.admin-customer-tile-inactive:hover {
    opacity: 0.85;
}
.admin-customer-tile-internal {
    border-color: #f59e0b;
    box-shadow: 0 0 0 1px #f59e0b inset;
}

/* První dlaždice „+ Přidat" */
.admin-customer-tile-add {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    align-items: center;
    justify-content: center;
    color: #64748b;
    gap: 0.55rem;
    min-height: 145px;
}
.admin-customer-tile-add:hover {
    border-color: #0891b2;
    background: #ecfeff;
    color: #0c4a6e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.10);
}
.admin-customer-tile-add-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(8, 145, 178, 0.08);
    color: #0891b2;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    transition: all 0.15s;
}
.admin-customer-tile-add:hover .admin-customer-tile-add-plus {
    background: #0891b2;
    color: #fff;
    transform: rotate(90deg);
}
.admin-customer-tile-add-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

/* Emblem – menší, kompaktnější */
.admin-customer-tile-emblem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2 0%, #0c4a6e 100%);
    color: #fff;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 5px rgba(8, 145, 178, 0.22);
    flex-shrink: 0;
}
.admin-customer-tile-internal .admin-customer-tile-emblem {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.25);
}
.admin-customer-tile-inactive .admin-customer-tile-emblem {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    box-shadow: none;
}

.admin-customer-tile-status-dot {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 1.5px white;
}
.admin-customer-tile-inactive .admin-customer-tile-status-dot {
    background: #94a3b8;
}

.admin-customer-tile-code {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    color: #0c4a6e;
    letter-spacing: 0.02em;
    font-weight: 600;
    line-height: 1.1;
}
.admin-customer-tile-oem-prefix {
    color: #7c3aed;
    font-weight: 600;
}
.admin-customer-tile-name {
    font-size: 0.86rem;
    color: #1f2937;
    font-weight: 500;
    line-height: 1.25;
}
.admin-customer-tile-note {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.35;
}
.admin-customer-tile-shared {
    font-size: 0.7rem;
    color: #7c3aed;
}
.admin-customer-tile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}
.admin-customer-tile-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.admin-customer-tile-badge-internal {
    background: #fef3c7;
    color: #92400e;
}
.admin-customer-tile-badge-inactive {
    background: #e2e8f0;
    color: #64748b;
}
.admin-customer-tile-badge-oem {
    background: #ede9fe;
    color: #6d28d9;
}
.admin-customer-tile-stats {
    display: flex;
    gap: 0.7rem;
    font-size: 0.75rem;
    color: #475569;
    border-top: 1px solid #f1f5f9;
    padding-top: 0.45rem;
    margin-top: auto;
    width: 100%;
    justify-content: center;
    font-weight: 500;
}
.admin-customer-tile-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
/* Add-customer modal už používáme dříve, doplníme jen sjednocení vzhledu */
.modal-form-stack label {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.83rem;
    color: #475569;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.modal-form-stack label input,
.modal-form-stack label select {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    font-weight: normal;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-form-stack label input:focus,
.modal-form-stack label select:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
.modal-form-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid #f1f5f9;
}

/* ============================================================================
   Customer detail – „popup" overlay style (od 3.39)
   Stránka samotná je separátní URL pro deep linking a navigaci zpět, ale CSS
   ji renderuje jako velkou centrovanou kartu nad ztmaveným pozadím.
   ============================================================================ */
body.has-customer-detail-overlay {
    overflow: hidden;
}
.customer-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 2.5rem 1rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.customer-detail-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 820px;
    overflow: hidden;
    animation: customer-detail-in 0.18s ease-out;
}
@keyframes customer-detail-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.customer-detail-head {
    padding: 1.3rem 1.5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #e2e8f0;
}
.customer-detail-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.15s;
}
.customer-detail-close:hover {
    background: #fff;
    color: #dc2626;
    border-color: #fecaca;
    transform: rotate(90deg);
}
.customer-detail-card {
    position: relative;
}
.customer-detail-title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-right: 3rem;
}
.customer-detail-name {
    font-weight: normal;
    color: #475569;
    font-size: 1.05rem;
}
.customer-detail-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: -1px;
    flex-wrap: nowrap;
    /* 3.81: overflow odebrán - způsoboval klipování pull-down menu "Infrastruktura" pod taby.
       Pokud se taby na úzkém viewportu nevejdou, wrap je menší zlo než neviditelný dropdown. */
}
.customer-detail-tab {
    padding: 0.5rem 0.85rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: #64748b;
    text-decoration: none;
    font-size: 0.86rem;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.customer-detail-tab:hover {
    background: rgba(8, 145, 178, 0.08);
    color: #0c4a6e;
}
.customer-detail-tab.is-active {
    background: #fff;
    border-color: #e2e8f0;
    color: #0c4a6e;
    font-weight: 600;
    border-bottom-color: #fff;
}
.customer-detail-tab small {
    font-size: 0.74rem;
    color: #94a3b8;
    font-weight: 400;
}

/* Form body uvnitř karty */
.customer-detail-body {
    padding: 1.5rem 1.5rem 1.6rem;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}
.customer-detail-form .form-section {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.1rem 1.3rem 0.9rem;
    margin-bottom: 1rem;
    background: #fff;
}
.customer-detail-form .form-section > legend {
    font-weight: 600;
    color: #0c4a6e;
    font-size: 0.85rem;
    padding: 0 0.45rem;
    letter-spacing: 0.02em;
}
.customer-detail-form label {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.78rem;
    color: #475569;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.customer-detail-form label input[type="text"],
.customer-detail-form label input[type="url"],
.customer-detail-form label select {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    font-weight: normal;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.customer-detail-form label input:focus,
.customer-detail-form label select:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
/* Kód + HD prefix na jeden řádek (a obecně 2-sloupcové dvojice) */
.customer-detail-form .form-row.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.customer-detail-form .form-row.form-row-2 > label {
    margin-bottom: 0;
}

/* Sdílení s OEM – checkbox-y v gridu (od 3.40, vrácení původního vzoru) */
.customer-detail-form .shared-oem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-top: 0.3rem;
}
.customer-detail-form .shared-oem-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
    margin-bottom: 0;
}
.customer-detail-form .shared-oem-option:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.customer-detail-form .shared-oem-option input[type="checkbox"] {
    margin: 0;
    accent-color: #7c3aed;
}
.customer-detail-form .shared-oem-option.is-checked {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #5b21b6;
}
.customer-detail-form .shared-oem-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: #6d28d9;
}
.customer-detail-form .shared-oem-name {
    flex: 1;
    font-size: 0.78rem;
    color: #64748b;
}
.customer-detail-form .flag-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    transition: background 0.15s;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    color: #1f2937;
    font-weight: 500;
    margin-bottom: 0.2rem;
}
.customer-detail-form .flag-toggle:hover {
    background: #f8fafc;
}
.customer-detail-form .flag-toggle input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    accent-color: #0891b2;
}
.customer-detail-form .flag-toggle span {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.customer-detail-form .flag-toggle small {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 400;
    line-height: 1.4;
}

.customer-detail-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.2rem;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 16px 16px;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.customer-detail-form-actions .btn-save {
    padding: 0.55rem 1.4rem;
    font-size: 0.95rem;
    border-radius: 8px;
    font-weight: 600;
}
.customer-detail-form-actions .btn-cancel {
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

/* Tab Infrastruktura uvnitř popupu */
.customer-detail-body section h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #0c4a6e;
}
.customer-detail-body .admin-customer-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.7rem;
    margin-top: 0.7rem;
}
.customer-detail-body .admin-customer-tile {
    min-height: auto;
    padding: 0.9rem 0.9rem 0.8rem;
    gap: 0.4rem;
}
.customer-detail-body .admin-customer-tile-emblem {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}


/* ============================================================================
   Defensive reset pro CRM .customer-tile (od 3.42)
   V 3.38–3.40 jsem nedopatřením přidal pravidla pro selector ".customer-tile"
   (bez admin- prefixu), která se aplikovala i na CRM dlaždice na customer.php
   a přepisovala layout. V 3.41 jsem to renamingem napravil, ale browser cache
   mohl mít staré CSS stále uložené. Tento blok forcuje původní hodnoty.
   Pokud user dělal hard refresh a stále vidí problém, tady je explicit guarantee.
   ============================================================================ */
.customer-tile {
    flex-direction: unset;
    align-items: unset;
    text-align: unset;
    gap: unset;
    min-height: unset;
    /* Původní pravidla z řádku 2988+ se aplikují přes CSS cascade,
       nepřepisujeme je. Jen vynulujeme leak z mých starých admin pravidel. */
}

/* ============================================================================
   Vylepšení 3.43:
   - OEM logo v levém horním rohu admin-customer-tile
   - Shared OEM checkbox karty s logy
   - Form row 2fr 1fr (URL doc + Hodin/měsíc)
   - Řádkový pohled .admin-customer-rows (alternativa k dlaždicím)
   ============================================================================ */

/* OEM logo v rohu dlaždice (miniatura, jako .customer-tile-oem-logo v CRM) */
.admin-customer-tile-oem-logo {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 36px;
    height: 24px;
    border-radius: 5px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px 3px;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.admin-customer-tile-oem-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.admin-customer-tile:hover .admin-customer-tile-oem-logo {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* Form row 2fr 1fr (URL dokumentace + hodiny) */
.customer-detail-form .form-row.form-row-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.85rem;
}
.customer-detail-form .form-row.form-row-2-1 > label {
    margin-bottom: 0;
}

/* Shared OEM karty s logy */
.customer-detail-form .shared-oem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.55rem;
    margin-top: 0.3rem;
}
.customer-detail-form .shared-oem-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.12s;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
    margin-bottom: 0;
    background: #fff;
}
.customer-detail-form .shared-oem-option:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.customer-detail-form .shared-oem-option input[type="checkbox"] {
    margin: 0;
    accent-color: #7c3aed;
    flex-shrink: 0;
}
.customer-detail-form .shared-oem-option.is-checked {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #5b21b6;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}
.customer-detail-form .shared-oem-logo {
    flex-shrink: 0;
    width: 32px;
    height: 22px;
    border-radius: 5px;
    background: #fafafa;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px 3px;
    box-sizing: border-box;
}
.customer-detail-form .shared-oem-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.customer-detail-form .shared-oem-logo-empty {
    background: #f1f5f9;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.68rem;
    font-family: 'JetBrains Mono', monospace;
    padding: 0;
}
.customer-detail-form .shared-oem-name {
    flex: 1;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.customer-detail-form .shared-oem-option.is-checked .shared-oem-name {
    color: #5b21b6;
    font-weight: 600;
}

/* ===== Řádkový pohled zákazníků (3.43) ===== */
.admin-customer-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.admin-customer-row {
    display: grid;
    grid-template-columns: 18px 36px 130px 1fr auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.9rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.12s;
    cursor: pointer;
    position: relative;
}
.admin-customer-row:hover {
    border-color: #0891b2;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.08);
}
.admin-customer-row-inactive {
    opacity: 0.55;
    background: #fafafa;
}
.admin-customer-row-inactive:hover {
    opacity: 0.85;
}
.admin-customer-row-internal {
    border-left: 3px solid #f59e0b;
}

.admin-customer-row-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    justify-self: center;
}
.admin-customer-row-inactive .admin-customer-row-status-dot {
    background: #94a3b8;
}

.admin-customer-row-oem-logo {
    width: 36px;
    height: 24px;
    border-radius: 5px;
    background: #fafafa;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px 3px;
    box-sizing: border-box;
}
.admin-customer-row-oem-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.admin-customer-row-oem-logo-empty {
    border-style: dashed;
    border-color: #f1f5f9;
    background: transparent;
}

.admin-customer-row-code {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.88rem;
    color: #0c4a6e;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.admin-customer-row-name {
    font-size: 0.92rem;
    color: #1f2937;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-customer-row-badges {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.admin-customer-row-stats {
    display: flex;
    gap: 0.85rem;
    font-size: 0.82rem;
    color: #475569;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.admin-customer-row-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

/* + Přidat jako první řádek */
.admin-customer-row-add {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    grid-template-columns: 18px 36px 1fr;
    cursor: pointer;
    font-family: inherit;
}
.admin-customer-row-add:hover {
    border-color: #0891b2;
    background: #ecfeff;
    color: #0c4a6e;
}
.admin-customer-row-add-plus {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(8, 145, 178, 0.08);
    color: #0891b2;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    transition: all 0.15s;
}
.admin-customer-row-add:hover .admin-customer-row-add-plus {
    background: #0891b2;
    color: #fff;
    transform: rotate(90deg);
}
.admin-customer-row-add-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
}

/* Responsive – na úzkém viewportu řádky vidíme bez stat column */
@media (max-width: 720px) {
    .admin-customer-row {
        grid-template-columns: 18px 32px 100px 1fr;
        gap: 0.5rem;
    }
    .admin-customer-row-badges,
    .admin-customer-row-stats {
        grid-column: 1 / -1;
        margin-top: 0.2rem;
    }
}

/* === Toggle „Zobrazit neaktivní" (3.46) === */
.show-inactive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    color: #475569;
    transition: all 0.12s;
    user-select: none;
}
.show-inactive-toggle:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.show-inactive-toggle input[type="checkbox"] {
    margin: 0;
    accent-color: #0891b2;
}
.show-inactive-toggle:has(input:checked) {
    background: #ecfeff;
    border-color: #67e8f9;
    color: #0c4a6e;
}

/* Když je třída „hide-inactive" na gridu/rows, neaktivní záznamy jsou pryč */
.admin-customer-tile-grid.hide-inactive .admin-customer-tile-inactive,
.admin-customer-rows.hide-inactive .admin-customer-row-inactive {
    display: none !important;
}

/* === Tab sections v customer detail formu (3.46) ===
   Form je jeden velký, ale vidíme jen sekci patřící aktivnímu tabu.
   Submit pošle vše = ostatní pole se uloží beze změny. */
.customer-detail-form[data-active-tab="general"] .cd-tab-section:not([data-tab="general"]) {
    display: none;
}
.customer-detail-form[data-active-tab="portal"] .cd-tab-section:not([data-tab="portal"]) {
    display: none;
}
.customer-detail-form[data-active-tab="oem"] .cd-tab-section:not([data-tab="oem"]) {
    display: none;
}

/* ============================================================================
   Server admin – dlaždicový view (3.47, redesign v 3.50 a 3.51)
   ============================================================================ */
.admin-server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
    align-items: start;
}
.admin-server-grid.hide-inactive .admin-customer-tile-inactive {
    display: none !important;
}

.admin-server-tile {
    position: relative;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-sizing: border-box;
    transition: box-shadow 0.15s, border-color 0.15s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.admin-server-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #d1d5db;
}

/* Cyan pás se zákazníkem na vrchu dlaždice (3.51) */
.admin-server-tile-cust-bar {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.45rem 0.8rem;
    background: linear-gradient(90deg, #0891b2, #06b6d4);
    color: white;
    font-size: 0.78rem;
    line-height: 1.2;
}
.admin-server-tile-cust-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-server-tile-cust-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.92;
}
.admin-customer-tile-inactive .admin-server-tile-cust-bar {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1);
}

/* Tělo dlaždice = wrapper pro main + vms (umožňuje horizontální split u hostitele) */
.admin-server-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Hyper-V hostitel – širší dlaždice (3 sloupce gridu), body je horizontální */
.admin-server-tile-host {
    grid-column: span 3;
    border-color: #c4b5fd;
    background: linear-gradient(180deg, #faf5ff 0%, #fff 30%);
}
.admin-server-tile-host .admin-server-tile-body {
    flex-direction: row;
    align-items: stretch;
}

/* Hlavní část = info o serveru (klikací) */
.admin-server-tile-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 0.85rem 0.7rem 0.7rem;
    gap: 0.4rem;
    cursor: pointer;
    position: relative;
}
.admin-server-tile-host .admin-server-tile-main {
    flex: 0 0 200px;
    align-items: flex-start;
    text-align: left;
    border-right: 1px dashed #e2e8f0;
    padding: 0.9rem;
    justify-content: center;
}

/* Avatar zodpovědné osoby – levý horní roh main body (3.51) */
.admin-server-tile-resp-avatar {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
    pointer-events: none;
}
.admin-server-tile-resp-avatar img,
.admin-server-tile-resp-avatar > * {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

.admin-server-tile-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    word-break: break-word;
    line-height: 1.3;
    padding-top: 0.3rem;   /* aby se nepřekrýval s avatarem v rohu */
}
.admin-customer-tile-inactive .admin-server-tile-name {
    color: #94a3b8;
}
.admin-server-tile-host .admin-server-tile-name {
    font-size: 1.05rem;
    color: #5b21b6;
    padding-left: 2.2rem;  /* místo pro avatar vlevo */
    padding-top: 0;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.admin-server-tile-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
}
.admin-server-tile-host .admin-server-tile-roles {
    justify-content: flex-start;
}

/* === OS verze + EOL na dlaždici serveru (4.18) === */
.admin-server-tile-os {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
    font-size: 11px;
    color: #64748b;
}
.admin-server-tile-host .admin-server-tile-os { justify-content: flex-start; }
.admin-server-tile-os .srv-os-name { line-height: 1.3; }
.admin-server-tile-os .srv-os-eol {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.admin-server-tile-os-ok   .srv-os-eol { background: #f1f5f9; color: #64748b; }
.admin-server-tile-os-soon .srv-os-eol { background: #fef3c7; color: #92400e; }
.admin-server-tile-os-past .srv-os-eol { background: #fee2e2; color: #b91c1c; }
.admin-server-tile-os-none .srv-os-eol { background: #f1f5f9; color: #94a3b8; }
/* Po EOL zvýrazni i samotný název OS, ať to bije do očí */
.admin-server-tile-os-past .srv-os-name { color: #b91c1c; font-weight: 600; }

/* === Vnořené VM dlaždice u hostitele (pravá strana) === */
.admin-server-tile-vms {
    padding: 0.7rem 0.85rem;
    background: rgba(124, 58, 237, 0.03);
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    align-content: start;
    grid-auto-rows: min-content;
}
.admin-server-tile-vms-empty {
    background: transparent;
    display: flex;
    align-items: center;
}
.admin-server-tile-vms-label {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    color: #7c3aed;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
}
.admin-server-vm-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: #1f2937;
    font-size: 0.86rem;
    font-weight: 500;
    transition: all 0.12s;
    line-height: 1.25;
    min-height: 56px;
    overflow: hidden;
}
.admin-server-vm-tile:hover {
    border-color: #7c3aed;
    background: #f5f3ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.1);
}
.admin-server-vm-tile-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.admin-server-vm-tile-avatar img,
.admin-server-vm-tile-avatar > * {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}
.admin-server-vm-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}
.admin-server-vm-tile strong {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 0.88rem;
    color: #1e293b;
}
.admin-server-vm-tile-roles {
    font-size: 0.68rem;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-server-vm-tile-inactive {
    opacity: 0.5;
    background: #f8fafc;
}
.admin-server-vm-tile-add {
    border-style: dashed;
    border-color: #c4b5fd;
    color: #7c3aed;
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
    text-align: center;
    min-height: 56px;
}
.admin-server-vm-tile-add:hover {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

@media (max-width: 1000px) {
    .admin-server-tile-host {
        grid-column: span 2;
    }
    .admin-server-tile-vms {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    .admin-server-tile-host {
        grid-column: span 1;
    }
    .admin-server-tile-host .admin-server-tile-body {
        flex-direction: column;
    }
    .admin-server-tile-host .admin-server-tile-main {
        flex: 1;
        border-right: none;
        border-bottom: 1px dashed #e2e8f0;
        align-items: center;
        text-align: center;
    }
    .admin-server-tile-host .admin-server-tile-name {
        padding-left: 0;
    }
    .admin-server-tile-vms {
        grid-template-columns: 1fr 1fr;
    }
}

/* === Klasifikační grade na admin dlaždici/řádku (3.48) === */
.admin-customer-tile-grade {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    /* posun pod status-dot aby se nepřekrývaly */
    margin-top: 14px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    z-index: 2;
    pointer-events: none;
}

/* Aby grade nepřekrýval status-dot, posuneme dot doleva o ~30px (na obě strany) */
.admin-customer-tile:has(.admin-customer-tile-grade) .admin-customer-tile-status-dot {
    right: 2.2rem;
}

/* V řádkovém view */
.admin-customer-row {
    grid-template-columns: 18px 36px 26px 130px 1fr auto auto;
    align-items: center;
    gap: 0.7rem;
}
.admin-customer-row-grade {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    justify-self: center;
}
.admin-customer-row-grade-empty {
    background: transparent;
    box-shadow: none;
}

@media (max-width: 720px) {
    .admin-customer-row {
        grid-template-columns: 18px 32px 24px 100px 1fr;
    }
}

/* === Nebezpečná zóna v detail modalu (3.48) === */
.customer-detail-form .cd-danger-zone {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}
.customer-detail-form .cd-danger-zone > legend {
    color: #b91c1c;
}
.cd-danger-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}
.cd-danger-text {
    flex: 1;
    min-width: 0;
}
.cd-danger-text strong {
    display: block;
    color: #b91c1c;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    text-transform: none;
    letter-spacing: 0;
}
.cd-danger-text small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}
.btn-danger {
    padding: 0.55rem 1.1rem;
    background: #fff;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-danger:hover {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
}

/* === Customer detail tab Infrastruktura – 3 velké karty s počty (3.49) === */
.cd-infra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}
.cd-infra-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.6rem 1.2rem 1.4rem;
    background: white;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.18s;
    cursor: pointer;
    text-align: center;
    position: relative;
}
.cd-infra-card:hover {
    transform: translateY(-3px);
    border-color: var(--cd-infra-accent, #0891b2);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.cd-infra-card-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 0.2rem;
}
.cd-infra-card-count {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cd-infra-accent, #0891b2);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.cd-infra-card-label {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-top: 0.3rem;
}
.cd-infra-card-hint {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 400;
}
.cd-infra-card-servers { --cd-infra-accent: #0891b2; }
.cd-infra-card-devices { --cd-infra-accent: #059669; }
.cd-infra-card-software { --cd-infra-accent: #7c3aed; }

/* === Customer filter pill (3.49) – persistentní filter nahoře v subtab === */
.customer-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.7rem 0.4rem 0.85rem;
    background: #ecfeff;
    border: 1px solid #67e8f9;
    border-radius: 18px;
    font-size: 0.88rem;
    margin: 0 0 1rem;
    max-width: 100%;
}
.customer-filter-pill-label {
    color: #0c4a6e;
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
}
.customer-filter-pill strong {
    color: #0e7490;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.customer-filter-pill-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(8, 145, 178, 0.12);
    color: #0c4a6e;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.12s;
    flex-shrink: 0;
}
.customer-filter-pill-clear:hover {
    background: #dc2626;
    color: #fff;
}

/* === Server modal úpravy (3.53) === */
/* 3 sloupce v roles grid – kompaktnější než auto-fill 200px */
.server-roles-grid.server-roles-grid-3col {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
    .server-roles-grid.server-roles-grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Parent server select – odstraněna nápověda pod selektem (= ušetří místo) */
#server-modal-parent-row {
    margin-bottom: 0;
}

/* Autocomplete empty state */
.autocomplete-empty {
    padding: 0.5rem 0.75rem;
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
}

/* ============================================================================
   Customer detail modal – dropdown menu pro Infrastrukturu (3.55)
   ============================================================================ */
.customer-detail-tab-dropdown {
    position: relative;
    display: inline-block;
}
/* Trigger button (vypadá jako tab) */
.customer-detail-tab-dropdown > .customer-detail-tab {
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.customer-detail-tab-dropdown > .customer-detail-tab.is-active {
    background: #f1f5f9;
    color: #0c4a6e;
}
.cd-infra-trigger-caret {
    font-size: 0.85em;
    transition: transform 0.15s;
    display: inline-block;
    margin-left: 0.2rem;
}
.customer-detail-tab-dropdown > .customer-detail-tab.is-active .cd-infra-trigger-caret {
    transform: rotate(180deg);
}

/* Dropdown menu */
.customer-detail-tab-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    z-index: 50;
    min-width: 280px;
    overflow: hidden;
    padding: 0.3rem;
}
.customer-detail-tab-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.7rem;
    text-decoration: none;
    color: inherit;
    border-radius: 7px;
    transition: background 0.12s;
}
.customer-detail-tab-dropdown-menu a:hover {
    background: #f1f5f9;
}
.cd-infra-menu-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}
.cd-infra-menu-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}
.cd-infra-menu-text strong {
    font-size: 0.95rem;
    color: #1f2937;
    font-weight: 600;
}
.cd-infra-menu-text small {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 400;
    line-height: 1.3;
}

/* === Autocomplete – neaktivní zákazník (3.59) === */
.autocomplete-item-inactive {
    opacity: 0.55;
    background: #fafafa;
}
.autocomplete-item-inactive .ac-code,
.autocomplete-item-inactive .ac-name {
    color: #94a3b8;
}
.ac-inactive-badge {
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* === Worklog stránka – kompaktnější spacing (3.62) ===
   User: posunout vše (vč. tlačítka „Přidat nový záznam" a výkazu) výše, aby byl
   výkaz s filtry blíže widgetu nálady. Šetří cca výšku tlačítka prázdného místa. */
main.vykaz-page {
    padding-top: 0.3rem;
}
main.vykaz-page .page-header {
    margin: 0 0 0.4rem;
}
main.vykaz-page .page-header h1 {
    margin: 0 0 0.1rem;
}
main.vykaz-page .page-subtitle {
    line-height: 1.35;
}
main.vykaz-page .vykaz-actions {
    margin: 0.3rem 0 0.3rem;
}

/* === Helpdesk: „Hnijící" tickety – vizuální zvýraznění levým pruhem (3.72) ===
   7+ dní bez aktivity = oranžová, 14+ dní = červená. Aplikujeme přes box-shadow
   na první buňku (TD), což funguje i pro <table> bez nutnosti border-collapse změny. */
.hd-ticket-main-row.hd-ticket-rotting-7 > td:first-child,
.hd-ticket-desc-row.hd-ticket-rotting-7 > td:first-child {
    box-shadow: inset 4px 0 0 0 #f59e0b;  /* oranžová */
}
.hd-ticket-main-row.hd-ticket-rotting-14 > td:first-child,
.hd-ticket-desc-row.hd-ticket-rotting-14 > td:first-child {
    box-shadow: inset 4px 0 0 0 #dc2626;  /* červená */
}

/* ============================================================================
 * 3.95: Post-save modal po uložení dlaždicového úkonu (_saved_event_modal.php)
 * Modal se shrnutím právě zapsaného řádku ve výkazu práce, s prokliky.
 * ============================================================================ */
.saved-event-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 1;
    transition: opacity 0.15s ease;
    animation: savedEventFadeIn 0.18s ease;
}
@keyframes savedEventFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.saved-event-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: savedEventSlideIn 0.22s ease;
}
@keyframes savedEventSlideIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.saved-event-modal-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.saved-event-icon {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: #dcfce7;
    color: #166534;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
}
.saved-event-modal-head h3 {
    margin: 0;
    color: #0e7490;
    font-size: 1.1rem;
    font-weight: 600;
}
.saved-event-modal-body {
    padding: 1.1rem 1.5rem;
}
.saved-event-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.saved-event-table th,
.saved-event-table td {
    padding: 0.55rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
}
.saved-event-table tr:last-child th,
.saved-event-table tr:last-child td {
    border-bottom: 0;
}
.saved-event-table th {
    font-weight: 500;
    color: #6b7280;
    width: 130px;
    padding-right: 1rem;
    white-space: nowrap;
}
.saved-event-table td {
    color: #0f172a;
    word-break: break-word;
}
.saved-event-time {
    display: inline-block;
    margin-left: 0.5rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.saved-event-code {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.1rem 0.4rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
}
.saved-event-extra {
    margin: 0.7rem 0 0;
    padding: 0.55rem 0.75rem;
    background: #f8fafc;
    border-left: 3px solid #06b6d4;
    border-radius: 4px;
    font-size: 0.88rem;
    color: #334155;
}
.saved-event-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}
.saved-event-modal-foot .btn-secondary,
.saved-event-modal-foot .btn-primary {
    text-decoration: none;
}

/* ============================================================================
 * 4.01: Propojené tickety (Master / Sub-úkoly / Související)
 * Sekce na detailu ticketu + modal pro přidání + JS typeahead search.
 * ============================================================================ */
.ticket-relations-section {
    margin-top: 1rem;
}
.ticket-rel-group {
    margin-bottom: 0.85rem;
}
.ticket-rel-group:last-child {
    margin-bottom: 0;
}
.ticket-rel-group-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.ticket-rel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ticket-rel-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: background 0.12s, border-color 0.12s;
}
.ticket-rel-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.ticket-rel-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
    text-decoration: none;
    color: #0f172a;
    min-width: 0;
}
.ticket-rel-link:hover {
    text-decoration: none;
}
.ticket-rel-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
    font-size: 0.92rem;
}
.ticket-rel-remove-form {
    margin: 0;
    display: flex;
    align-items: center;
}
.ticket-rel-remove-btn {
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}
.ticket-rel-remove-btn:hover {
    color: #dc2626;
    background: #fee2e2;
}

/* Modal */
.ticket-rel-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: ticketRelFadeIn 0.18s ease;
}
@keyframes ticketRelFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ticket-rel-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: ticketRelSlideIn 0.22s ease;
}
@keyframes ticketRelSlideIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ticket-rel-modal-head {
    display: flex;
    align-items: center;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid #e5e7eb;
}
.ticket-rel-modal-head h3 {
    margin: 0;
    flex: 1;
    color: #0e7490;
    font-size: 1.1rem;
    font-weight: 600;
}
.ticket-rel-modal-close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.ticket-rel-modal-close:hover {
    color: #dc2626;
    background: #fee2e2;
}
.ticket-rel-modal-body {
    padding: 1.1rem 1.4rem;
    overflow-y: auto;
}
.ticket-rel-modal-field {
    display: block;
    margin-bottom: 1rem;
}
.ticket-rel-modal-field > span {
    display: block;
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
}
.ticket-rel-modal-field select,
.ticket-rel-modal-field input[type="text"] {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    background: white;
}
.ticket-rel-modal-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
}
.ticket-rel-modal-field input[type="text"]:focus,
.ticket-rel-modal-field select:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}
.ticket-rel-search-results {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
}
.ticket-rel-search-results:empty {
    display: none;
}
.ticket-rel-search-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}
.ticket-rel-search-item:last-child {
    border-bottom: 0;
}
.ticket-rel-search-item:hover {
    background: #f0f9ff;
}
.ticket-rel-search-empty {
    padding: 0.7rem 0.75rem;
    color: #94a3b8;
    font-style: italic;
    font-size: 0.92rem;
}
.ticket-rel-selected {
    margin-top: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: #ecfeff;
    border: 1px solid #67e8f9;
    border-radius: 6px;
    font-size: 0.92rem;
    color: #0e7490;
}
.ticket-rel-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}

/* ============================================================================
 * 4.09 / 4.11: admin_welcome_message.php – form pro nastavení uvítací zprávy.
 * Form je teď uvnitř .admin-block (= bílá karta s rounded rohy), takže form
 * sám už nemá vlastní background/shadow – jen vnitřní layout.
 * ============================================================================ */
.welcome-message-form {
    max-width: 720px;
}
.welcome-message-row {
    margin-bottom: 1.3rem;
}
.welcome-message-row:last-child {
    margin-bottom: 0;
}
.welcome-message-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}
.welcome-message-toggle input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}
.welcome-message-input,
.welcome-message-textarea {
    display: block;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;
    background: white;
}
.welcome-message-input:focus,
.welcome-message-textarea:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.12);
}
.welcome-message-textarea {
    min-height: 220px;
    line-height: 1.55;
    resize: vertical;
}