/* ═══════════════════════════════════════════════════
   Centrální správa — Custom Styles
   ═══════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   IDENTICKÝ shell (shadcnspace) — strukturální fix
   CA tailwind v3 je BEZ @layer, CSS šablony v4 je v @layer utilities.
   Neuvrstvené CA utility (.hidden/.flex/.w-*) v kaskádě vždy přebijí
   uvrstvené šablony → sidebar by zmizel. Tato pravidla (neuvrstvená,
   vyšší specificita přes id/data-slot) rozvržení shellu vynutí zpět.
   ─────────────────────────────────────────────── */
#sidebar [data-slot="sidebar-gap"],
#sidebar [data-slot="sidebar-container"] { width: 16rem; transition: width .2s ease; }
#sidebar [data-slot="sidebar-container"] { display: flex; }
#sidebar [data-slot="sidebar-inner"] { display: flex; width: 100%; }

/* ── Sbalený stav (ikonový proužek) — desktop ── */
#sidebar[data-state="collapsed"] [data-slot="sidebar-gap"],
#sidebar[data-state="collapsed"] [data-slot="sidebar-container"] { width: 76px; }
#sidebar[data-state="collapsed"] .hide-menu { display: none !important; }
#sidebar[data-state="collapsed"] [data-slot="sidebar-content"] > div { padding-left: .5rem; padding-right: .5rem; }
#sidebar[data-state="collapsed"] [data-slot="sidebar-content"] a,
#sidebar[data-state="collapsed"] [data-slot="sidebar-content"] summary,
#sidebar[data-state="collapsed"] [data-slot="sidebar-header"] a,
#sidebar[data-state="collapsed"] [data-slot="sidebar-footer"] > div { justify-content: center; }
#sidebar[data-state="collapsed"] [data-slot="sidebar-content"] details > div { display: none; }

/* Sbalený stav: zrušit hover posun (ikona dřív "poskakovala" díky
   .hover:translate-x-1 z šablony, které v ikonovém proužku nedává smysl). */
#sidebar[data-state="collapsed"] [data-slot="sidebar-content"] a:hover,
#sidebar[data-state="collapsed"] [data-slot="sidebar-content"] summary:hover,
#sidebar[data-state="collapsed"] [data-slot="sidebar-footer"] a:hover,
#sidebar[data-state="collapsed"] [data-slot="sidebar-footer"] button:hover { transform: none !important; }

/* Sbalený stav: tooltip s názvem položky (nahrazuje nativní title), vpravo od ikony. */
#sidebar[data-state="collapsed"] [data-tooltip] { position: relative; }
#sidebar[data-state="collapsed"] [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-6px, -50%);
    background: var(--foreground); color: var(--background);
    padding: .35rem .65rem; border-radius: .375rem; font-size: .75rem; font-weight: 500;
    white-space: nowrap; pointer-events: none; opacity: 0; z-index: 60;
    transition: opacity .15s ease, transform .15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
#sidebar[data-state="collapsed"] [data-tooltip]::before {
    content: '';
    position: absolute; left: calc(100% + 6px); top: 50%; transform: translate(-6px, -50%);
    border: 5px solid transparent; border-right-color: var(--foreground);
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .15s ease, transform .15s ease;
}
#sidebar[data-state="collapsed"] [data-tooltip]:hover::after,
#sidebar[data-state="collapsed"] [data-tooltip]:hover::before { opacity: 1; transform: translate(0, -50%); }

/* Patička sidebaru (ozubené kolo, odhlásit) — tooltip VŽDY (i rozbalená, jsou to
   ikony bez popisku) a NAD ikonou se šipkou dolů, ne vpravo jako u sbalené
   nav položky — nad hlavou je tu málo prostoru pro postranní bublinu a nad
   ikonou je zřejmější, ke které ze dvou patří. */
#sidebar [data-slot="sidebar-footer"] [data-tooltip] { position: relative; }
#sidebar [data-slot="sidebar-footer"] [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 18px); left: 50%; transform: translate(-50%, 4px);
    background: var(--foreground); color: var(--background);
    padding: .35rem .65rem; border-radius: .375rem; font-size: .75rem; font-weight: 500;
    white-space: nowrap; pointer-events: none; opacity: 0; z-index: 60;
    transition: opacity .15s ease, transform .15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
#sidebar [data-slot="sidebar-footer"] [data-tooltip]::before {
    content: '';
    /* box je 16×16, viditelný trojúhelník má hrot na SPODNÍ hraně boxu
       (border-top-color = barva nahoře, hrot dole), takže "bottom" tady
       umisťuje přímo hrot šipky, ne celý box. */
    position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 4px);
    border: 8px solid transparent; border-top-color: var(--foreground);
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .15s ease, transform .15s ease;
}
#sidebar [data-slot="sidebar-footer"] [data-tooltip]:hover::after,
#sidebar [data-slot="sidebar-footer"] [data-tooltip]:hover::before { opacity: 1; transform: translate(-50%, 0); }

/* ── Desktop: viditelný, mobil: off-canvas ── */
#sidebar[data-slot="sidebar"] { display: block; }
@media (max-width: 767.98px) {
    /* Posouváme CONTAINER (má 16rem), ne peer (ten má 0 šířky → translate by nic neudělal) */
    #sidebar[data-slot="sidebar"] [data-slot="sidebar-gap"] { display: none; }
    #sidebar[data-slot="sidebar"] [data-slot="sidebar-container"] {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    #sidebar.mobile-open [data-slot="sidebar-container"] { transform: translateX(0); }
    /* na mobilu nikdy sbaleno */
    #sidebar[data-state="collapsed"] [data-slot="sidebar-container"] { width: 16rem; }
    #sidebar[data-state="collapsed"] .hide-menu { display: revert !important; }
}
#app-overlay { display: none; }
#app-overlay.show { display: block; }

/* Primární barva = nativní neutrální z CSS šablony (černá / světlá v dark).
   Fialový override byl odebrán na přání — sjednoceno s obsahovými tlačítky. */

/* ── Vyhledávání: ikona přesně vycentrovaná (nezávisle na Tailwind vrstvách) ── */
#app-search { position: relative; }
#app-search > svg {
    position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; pointer-events: none;
}
#app-search > input { width: 100%; height: 2.25rem; padding: .25rem .75rem .25rem 2.5rem; }

#page-search { position: relative; }
#page-search > svg {
    position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; pointer-events: none;
}
#page-search > input { padding-left: 2.5rem; }

/* Obecná varianta téhož vzoru pro vyhledávací pole s ikonou v kartách/filtrech. */
.icon-input { position: relative; }
.icon-input > svg, .icon-input > span {
    position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
    pointer-events: none;
}

/* ── Customizer: plovoucí kolo (pomalá stálá rotace, nezávisle na Tailwindu) ── */
#customizer-toggle svg { animation: spin 8s linear infinite; }

/* Primární tlačítko (<button>) — CA v3 preflight `button{background:transparent}`
   je neuvrstvený a přebíjí uvrstvené `bg-primary` šablony, takže na <button>
   nefunguje. Tahle neuvrstvená třída to obejde. */
.btn-primary { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }
.btn-primary:hover { opacity: .9; }

/* ── Customizer panel ── */
#customizer-panel { transform: translateX(100%); transition: transform .2s ease; }
#customizer-panel.open { transform: translateX(0); }
#customizer-panel [data-value][data-active="true"] {
    background: var(--primary); color: var(--primary-foreground); border-color: var(--primary);
}

/* ── Kontejner (boxed / full) ── */
html[data-container="boxed"] .container { max-width: 1180px !important; }
html[data-container="full"]  .container { max-width: 100% !important; }

/* ── Styl karet (rámeček / stín) ── */
html[data-card="shadow"] .border-gray-200,
html[data-card="shadow"] .border-gray-700,
html[data-card="shadow"] .border-gray-200\/80 { border-color: transparent !important; }
html[data-card="shadow"] .rounded-xl.border,
html[data-card="shadow"] .rounded-2xl.border,
html[data-card="shadow"] .rounded-xl.shadow-sm,
html[data-card="shadow"] .rounded-2xl.shadow-sm { box-shadow: 0 1px 4px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06) !important; }
html[data-card="border"] .rounded-xl.shadow-sm,
html[data-card="border"] .rounded-2xl.shadow-sm { box-shadow: none !important; }

/* ── Horizontální layout (vodorovné menu místo sidebaru) ── */
#app-topmenu { display: none; }
html[data-layout="horizontal"] #app-topmenu { display: block; }
html[data-layout="horizontal"] #sidebar { display: none !important; }
html[data-layout="horizontal"] #sidebar-toggle { display: none !important; }

/* ═══════════════════════════════════════════════════
   shadcn DATATABLE SKIN — scope: .ux-datatable
   Přemapuje CA „chrome" (bílé karty, šedé rámečky/text, hlavičku a řádky
   tabulky, inputy/selecty) na shadcn tokeny šablony. Barevné stavové odznaky
   (green/red/orange) i JS řazení/filtrování zůstávají netknuté. Řešeno scoped
   pravidly (vyšší specificita / !important), aby přebila neuvrstvené CA utility.
   ═══════════════════════════════════════════════════ */
.ux-datatable .bg-white { background-color: var(--card) !important; }
.ux-datatable .bg-gray-50,
.ux-datatable .bg-gray-50\/50,
.ux-datatable .bg-slate-100 { background-color: color-mix(in oklab, var(--muted) 60%, transparent) !important; }
.ux-datatable .border-gray-200,
.ux-datatable .border-gray-300,
.ux-datatable .border-gray-700,
.ux-datatable .border-gray-600 { border-color: var(--border) !important; }
.ux-datatable .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.ux-datatable .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.ux-datatable .text-gray-900 { color: var(--foreground) !important; }
.ux-datatable .text-gray-700,
.ux-datatable .text-gray-600,
.ux-datatable .text-gray-500,
.ux-datatable .text-slate-700 { color: var(--muted-foreground) !important; }

/* Karty a jejich radius */
.ux-datatable .rounded-xl { border-radius: 1rem !important; }

/* Toolbar — inputy a selecty ve stylu shadcn */
.ux-datatable input[type="text"],
.ux-datatable input[type="search"],
.ux-datatable select {
    background-color: var(--background); border: 1px solid var(--input); border-radius: .5rem;
    color: var(--foreground); box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ux-datatable input[type="text"]:focus,
.ux-datatable input[type="search"]:focus,
.ux-datatable select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent);
    outline: none;
}
.ux-datatable input::placeholder { color: var(--muted-foreground); }

/* Tabulka — hlavička */
.ux-datatable table thead tr { background-color: transparent !important; border-bottom: 1px solid var(--border) !important; }
.ux-datatable table thead th {
    color: var(--muted-foreground) !important; font-weight: 600; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.ux-datatable table thead th[data-sort-key]:hover { color: var(--foreground) !important; background-color: color-mix(in oklab, var(--muted) 50%, transparent) !important; }
.ux-datatable .sites-sort-indicator,
.ux-datatable .reviews-sort-indicator { color: var(--muted-foreground) !important; font-size: .7rem; }

/* Tabulka — řádky */
.ux-datatable table tbody tr { border-color: var(--border) !important; transition: background-color .15s ease; }
.ux-datatable table tbody tr:hover { background-color: color-mix(in oklab, var(--muted) 55%, transparent) !important; }

/* Odznaky (rounded → pill jako v šabloně) */
.ux-datatable table td span.rounded,
.ux-datatable table td a.rounded { border-radius: 9999px !important; }

/* Flash message auto-fade */
.flash-message {
    animation: flashFadeIn 0.3s ease-out;
}

@keyframes flashFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* TinyMCE editor container */
.tox-tinymce {
    border-radius: 0.5rem !important;
}

/* Sidebar active indicator */
.sidebar-active {
    position: relative;
}
.sidebar-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #3b82f6;
    border-radius: 0 3px 3px 0;
}

/* Category tree indent */
.cat-level-1 { padding-left: 1.5rem; }
.cat-level-2 { padding-left: 3rem; }
.cat-level-3 { padding-left: 4.5rem; }

/* Table row hover */
.data-table tbody tr:hover {
    background-color: #f9fafb;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ───────────────────────────────────────────────
   AI prose — typografie pro AI-generovaný HTML obsah
   (rewriter náhled, agent canvas, kdekoliv ai-prose).
   Tailwind CDN neobsahuje @tailwindcss/typography,
   takže `prose` třídy by neměly žádný efekt — tohle je náhrada.
   ─────────────────────────────────────────────── */
.ai-prose {
    color: #1f2937;
    font-size: 0.95rem;
    line-height: 1.7;
}
.ai-prose > *:first-child { margin-top: 0; }
.ai-prose > *:last-child  { margin-bottom: 0; }

.ai-prose p {
    margin: 0 0 1em;
}
.ai-prose h1 {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.25;
    margin: 1.4em 0 0.6em;
    color: #111827;
}
.ai-prose h2 {
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.4em 0 0.55em;
    color: #111827;
    padding-bottom: 0.25em;
    border-bottom: 1px solid #f3f4f6;
}
.ai-prose h3 {
    font-size: 1.12em;
    font-weight: 600;
    line-height: 1.35;
    margin: 1.2em 0 0.5em;
    color: #111827;
}
.ai-prose h4, .ai-prose h5, .ai-prose h6 {
    font-size: 1em;
    font-weight: 600;
    margin: 1em 0 0.4em;
    color: #111827;
}

.ai-prose strong, .ai-prose b { font-weight: 600; color: #111827; }
.ai-prose em, .ai-prose i    { font-style: italic; }

.ai-prose a {
    color: #7c3aed;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ai-prose a:hover { color: #5b21b6; }

.ai-prose ul, .ai-prose ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}
.ai-prose ul { list-style: disc; }
.ai-prose ol { list-style: decimal; }
.ai-prose li { margin: 0.25em 0; }
.ai-prose li > ul, .ai-prose li > ol { margin: 0.25em 0 0.5em; }

.ai-prose blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 3px solid #c4b5fd;
    background: #faf5ff;
    color: #4c1d95;
    font-style: italic;
    border-radius: 0 0.375rem 0.375rem 0;
}
.ai-prose blockquote p:last-child { margin-bottom: 0; }

.ai-prose code {
    background: #f3f4f6;
    color: #be185d;
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
    font-size: 0.88em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ai-prose pre {
    background: #1f2937;
    color: #f3f4f6;
    padding: 0.875em 1em;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 0 0 1em;
    font-size: 0.85em;
    line-height: 1.5;
}
.ai-prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 1em;
}

.ai-prose hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 1.5em 0;
}

.ai-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1em 0;
}

.ai-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.9em;
}
.ai-prose th, .ai-prose td {
    border: 1px solid #e5e7eb;
    padding: 0.5em 0.75em;
    text-align: left;
    vertical-align: top;
}
.ai-prose th {
    background: #f9fafb;
    font-weight: 600;
    color: #111827;
}

/* Varianta „sm" — kompaktnější (pro chat náhledy v sidebarech) */
.ai-prose-sm {
    font-size: 0.875rem;
    line-height: 1.6;
}
.ai-prose-sm h2 { font-size: 1.2em; }
.ai-prose-sm h3 { font-size: 1.05em; }
.ai-prose-sm p,
.ai-prose-sm ul,
.ai-prose-sm ol,
.ai-prose-sm pre,
.ai-prose-sm blockquote { margin-bottom: 0.75em; }

/* Auth aurora — barevný gradientový efekt pro dekorativní panel loginu (dle shadcnspace login-07) */
.auth-aurora {
    position: relative;
    overflow: hidden;
    background: #0a0a0f;
}
.auth-aurora::before,
.auth-aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.85;
    will-change: transform;
}
.auth-aurora::before {
    width: 70%;
    height: 70%;
    top: -15%;
    left: -15%;
    background: radial-gradient(circle at 30% 30%, #ffb300, #ff3d00 45%, transparent 72%);
    animation: auth-aurora-drift-1 9s ease-in-out infinite;
}
.auth-aurora::after {
    width: 80%;
    height: 80%;
    bottom: -22%;
    right: -22%;
    background: radial-gradient(circle at 70% 70%, #60a5fa, #1e1b4b 50%, transparent 75%);
    animation: auth-aurora-drift-2 11s ease-in-out infinite;
}
.auth-aurora .auth-aurora-blob-3 {
    content: '';
    position: absolute;
    width: 55%;
    height: 55%;
    top: 30%;
    left: 25%;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.7;
    will-change: transform;
    background: radial-gradient(circle at 50% 50%, #f97316, #a21caf 55%, transparent 78%);
    animation: auth-aurora-drift-3 13s ease-in-out infinite;
}
@keyframes auth-aurora-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(22%, 18%) scale(1.3); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes auth-aurora-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-18%, -16%) scale(1.25); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes auth-aurora-drift-3 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(-12%, 14%) scale(1.4) rotate(30deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-aurora::before,
    .auth-aurora::after,
    .auth-aurora .auth-aurora-blob-3 { animation: none; }
}

/* ── Nainstalovaná aplikace (PWA) ─────────────────────────────────────────
   Prvky jen pro okno bez adresního řádku. !important kvůli utilitě .flex
   u icon-tlačítek. */
.pwa-only { display: none !important; }
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    .pwa-only { display: flex !important; }
}

.pwa-update {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
    z-index: 110; display: flex; align-items: center; gap: .75rem;
    max-width: calc(100vw - 2rem); padding: .625rem .75rem .625rem 1rem;
    border-radius: .75rem; background: #111827; color: #fff;
    font-size: .875rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.pwa-update-btn {
    padding: .375rem .75rem; border-radius: .5rem; background: #fff; color: #111827;
    font-weight: 600; cursor: pointer;
}
.pwa-update-close {
    padding: 0 .375rem; font-size: 1.25rem; line-height: 1; opacity: .7; cursor: pointer;
    background: none; color: inherit;
}
.pwa-update-close:hover { opacity: 1; }

/* Hlavička v titulkové liště okna (Window Controls Overlay, desktop Chrome/Edge).
   Prázdné místo hlavičky slouží k přetažení okna, ovládací prvky ne. Vpravo
   se nechá místo na systémová tlačítka okna (minimalizovat/zavřít). */
@media (display-mode: window-controls-overlay) {
    .pwa-titlebar {
        -webkit-app-region: drag;
        app-region: drag;
        padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
    }
    .pwa-titlebar button,
    .pwa-titlebar a,
    .pwa-titlebar input,
    .pwa-titlebar form,
    .pwa-titlebar [role="menu"],
    .pwa-titlebar #account-menu {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
}

/* Pull-to-refresh (public/js/pwa.js) */
.pwa-ptr {
    position: fixed; top: -2.75rem; left: 50%; z-index: 120;
    width: 2.25rem; height: 2.25rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #6b7280; box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transform: translate(-50%, 0); transition: color .15s;
    pointer-events: none;
}
.dark .pwa-ptr { background: #1f2937; color: #9ca3af; }
.pwa-ptr-ready { color: #111827; }
.dark .pwa-ptr-ready { color: #f9fafb; }
.pwa-ptr-loading svg { animation: pwa-spin .8s linear infinite; }
@keyframes pwa-spin { to { transform: rotate(360deg); } }

/* Okno „Nastavte si aplikaci": hotový krok má zelenou ikonu */
.pwa-setup-done { background: #dcfce7 !important; color: #15803d !important; }
.dark .pwa-setup-done { background: rgba(34,197,94,.15) !important; color: #4ade80 !important; }