/*
 * Fakturace 2.0 – vzhled administrace podle návrhu z Claude Design (6. 10. 2026).
 *
 * Barvy jdou z palet v App\Filament\Vzhled, tady jsou jen věci, které se
 * paletou nastavit nedají: písma, zaoblení, linky místo stínů, záložky jako
 * přepínač, odznaky stavu s tečkou a tabulka s řádkovým písmem.
 * Bez Node a Vite – soubor se servíruje tak, jak je.
 */

:root {
    --fakt-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --fakt-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --fakt-panel: oklch(0.99 0.005 85);
    --fakt-stin: 0 1px 2px oklch(0.3 0.03 60 / 0.06), 0 8px 24px oklch(0.3 0.03 60 / 0.06);
    --radius-xl: 14px;
    --radius-lg: 8px;
    --color-white: var(--fakt-panel);
}

.dark {
    --fakt-panel: var(--gray-900);
    --fakt-stin: 0 1px 2px #0004, 0 8px 24px #0003;
    /* Tailwind `white` je ve světlém režimu krémová plocha panelu. V tmavém
       ji Filament používá jako PÍSMO (dark:text-white) – kdyby zůstala plochou
       panelu (gray-900), nadpis, značka a popisky by zmizely (tmavé na tmavém,
       např. stránka Ověřte svou identitu). Proto zpátky skutečná bílá. */
    --color-white: oklch(0.985 0.004 85);
}

/* ---------------------------------------------------------- základ */

.fi-body {
    background-color: var(--gray-50);
    color: oklch(0.25 0.02 55);
    -webkit-font-smoothing: antialiased;
}

.dark .fi-body {
    background-color: var(--gray-950);
    color: oklch(0.94 0.012 80);
}

/* Nadpisy stránek patkovým písmem, jako v návrhu. */
.fi-header-heading {
    font-family: var(--fakt-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.fi-header-subheading {
    color: var(--gray-600);
    margin-top: 2px;
}

.dark .fi-header-subheading {
    color: var(--gray-400);
}

/* Čísla v tabulkách a přehledech pod sebou. */
.fi-ta-table,
.fi-wi-stats-overview-stat-value,
.fi-in-text,
.fi-ta-summary-row {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- navigace */

.fi-sidebar {
    background-color: var(--gray-50);
    border-inline-end: 1px solid var(--gray-200);
}

.dark .fi-sidebar {
    background-color: var(--gray-950);
    border-inline-end-color: var(--gray-700);
}

.fi-sidebar-item-btn {
    border-radius: 8px;
    min-height: 30px;
    padding-block: 5px;
}

.fi-sidebar-item-btn:hover {
    background-color: var(--gray-100);
}

.dark .fi-sidebar-item-btn:hover {
    background-color: var(--gray-800);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--gray-100);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: oklch(0.25 0.02 55);
    font-weight: 600;
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--gray-800);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: oklch(0.94 0.012 80);
}

.fi-sidebar-group-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* Horní lišta: linka místo stínu, stejná plocha jako stránka. */
.fi-topbar > nav,
.fi-topbar {
    background-color: var(--gray-50);
    box-shadow: none;
    border-bottom: 1px solid var(--gray-200);
}

.dark .fi-topbar > nav,
.dark .fi-topbar {
    background-color: var(--gray-950);
    border-bottom-color: var(--gray-700);
}

/* ---------------------------------------------------------- plochy */

/* Karty, sekce a tabulky: tenká linka a čistá plocha místo stínu. */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-in-repeatable-item {
    box-shadow: none;
    border: 1px solid var(--gray-200);
    background-color: var(--fakt-panel);
}

.dark .fi-section:not(.fi-section-not-contained),
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .fi-fo-repeater-item,
.dark .fi-in-repeatable-item {
    border-color: var(--gray-700);
}

.fi-section-header-heading {
    font-weight: 700;
    font-size: 14px;
}

/* Velká čísla v přehledu patkovým písmem. */
.fi-wi-stats-overview-stat-value {
    font-family: var(--fakt-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.15;
}

.fi-wi-stats-overview-stat-label {
    color: var(--gray-600);
    font-weight: 500;
}

.dark .fi-wi-stats-overview-stat-label {
    color: var(--gray-400);
}

/* Rozbalovací nabídky a okna: stín z návrhu. */
.fi-dropdown-panel,
.fi-modal-window {
    box-shadow: var(--fakt-stin);
    border: 1px solid var(--gray-200);
}

.dark .fi-dropdown-panel,
.dark .fi-modal-window {
    border-color: var(--gray-700);
}

/* ---------------------------------------------------------- záložky */

/* Záložky jako přepínač na zapuštěné ploše. */
.fi-tabs {
    background-color: var(--gray-100);
    padding: 3px;
    border-radius: 10px;
    gap: 2px;
    box-shadow: none;
    border: 0;
    width: fit-content;
    max-width: 100%;
}

.dark .fi-tabs {
    background-color: var(--gray-800);
}

/* Záložky vlevo, ne na střed – v návrhu sedí na začátku řádku. */
.fi-sc-tabs > .fi-tabs,
.fi-tabs {
    margin-inline: 0;
}

/* Filament tabulkové záložky obaluje do vlastní karty – ta tu nemá být. */
.fi-sc-tabs:has(> .fi-tabs) {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
}

.fi-tabs-item {
    height: 28px;
    padding-inline: 10px;
    border-radius: 7px;
    font-weight: 600;
    color: var(--gray-600);
    gap: 6px;
}

.fi-tabs-item:hover {
    background-color: transparent;
    color: oklch(0.25 0.02 55);
}

.fi-tabs-item.fi-active {
    background-color: var(--fakt-panel);
    color: oklch(0.25 0.02 55);
    box-shadow: var(--fakt-stin);
}

.dark .fi-tabs-item {
    color: var(--gray-400);
}

.dark .fi-tabs-item:hover,
.dark .fi-tabs-item.fi-active {
    color: oklch(0.94 0.012 80);
}

.dark .fi-tabs-item.fi-active {
    background-color: var(--gray-900);
}

/* Počet v záložce bez rámečku, jen tučné číslo. */
.fi-tabs-item .fi-badge {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    font-weight: 700;
    font-size: 11px;
    color: var(--gray-500);
}

.fi-tabs-item .fi-badge.fi-color-danger {
    color: var(--danger-600);
}

.dark .fi-tabs-item .fi-badge.fi-color-danger {
    color: var(--danger-400);
}

/* ---------------------------------------------------------- tabulky */

.fi-ta-header-cell {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding-block: 10px;
}

.fi-ta-header-cell .fi-ta-header-cell-sort-btn,
.fi-ta-header-cell button {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

.fi-ta-row:hover {
    background-color: var(--gray-100);
}

.dark .fi-ta-row:hover {
    background-color: var(--gray-800);
}

.fi-ta-summary-row {
    background-color: transparent;
    color: var(--gray-500);
}

/* Číslo dokladu a variabilní symbol neproporcionálním písmem. */
.fakt-cislo,
.fakt-mono {
    font-family: var(--fakt-mono);
    font-size: 12.5px;
    letter-spacing: -0.01em;
}

/* Typ dokladu pod číslem zůstává běžným písmem. */
.fakt-cislo + .fi-ta-text-description,
.fakt-cislo .fi-ta-text-description {
    font-family: inherit;
}

/* Stav jako zaoblená pilulka s tečkou. */
.fakt-stav .fi-badge {
    border-radius: 999px;
    height: 22px;
    padding-inline: 8px;
    gap: 5px;
    box-shadow: none;
    font-weight: 600;
}

.fakt-stav .fi-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex: none;
}

/* Odznaky ostatně: zaoblené, bez rámečku. */
.fi-badge {
    box-shadow: none;
}

/* ---------------------------------------------------------- formuláře */

.fi-input-wrp {
    box-shadow: none;
    border: 1px solid var(--gray-200);
    background-color: var(--fakt-panel);
}

.dark .fi-input-wrp {
    border-color: var(--gray-700);
}

.fi-input-wrp:focus-within {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 1px var(--primary-600);
}

.dark .fi-input-wrp:focus-within {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 1px var(--primary-400);
}

.fi-btn {
    border-radius: 8px;
    font-weight: 600;
}

/* Hlavní tlačítko: sytá cihlová s bílým písmem, v tmavém režimu světlejší
   cihlová s tmavým písmem - jako v návrhu (--brand / --brand-ink). */
.fi-btn.fi-color-primary {
    background-color: var(--primary-600);
    color: var(--fakt-panel);
}

.fi-btn.fi-color-primary:hover {
    background-color: var(--primary-700);
}

.dark .fi-btn.fi-color-primary {
    background-color: var(--primary-400);
    color: oklch(0.2 0.02 50);
}

.dark .fi-btn.fi-color-primary:hover {
    background-color: var(--primary-300);
}

.fi-btn.fi-color-gray,
.fi-btn:not([class*='fi-color-']) {
    box-shadow: none;
    border: 1px solid var(--gray-200);
    background-color: var(--fakt-panel);
}

.dark .fi-btn.fi-color-gray,
.dark .fi-btn:not([class*='fi-color-']) {
    border-color: var(--gray-700);
}

@media (prefers-reduced-motion: reduce) {
    .fi-ta-row,
    .fi-sidebar-item-btn,
    .fi-tabs-item {
        transition: none;
    }
}