/* nasweb CRM — tmavý minimalistický štýl (Linear / Attio)
   Všetky farby idú cez tokeny nižšie; nikde inde nepoužívaj natvrdo farbu. */

/* ═══ Dizajnové tokeny ═══ */
:root {
    /* plochy */
    --bg-app: #0b0b0c;
    --bg-sidebar: #111113;
    --bg-surface: #141416;
    --bg-elevated: #1a1a1d;
    --border: #26262a;

    /* text */
    --text-primary: #ededef;
    --text-secondary: #8b8b93;
    --text-muted: #5c5c63;

    /* akcent */
    --accent: #5b4ff5;
    --accent-hover: #6c61ff;
    --accent-soft: rgba(91, 79, 245, .16);
    --focus-ring: 0 0 0 1px var(--accent), 0 0 0 3px rgba(91, 79, 245, .28);

    /* štítky: tónované pozadie + jasnejší text */
    --tag-green-bg: #1f3d2b;   --tag-green-fg: #86efac;
    --tag-yellow-bg: #3d3517;  --tag-yellow-fg: #fde68a;
    --tag-orange-bg: #3d2a17;  --tag-orange-fg: #fdba74;
    --tag-blue-bg: #1e2a4a;    --tag-blue-fg: #93c5fd;
    --tag-neutral-bg: #26262a; --tag-neutral-fg: #d4d4d8;
    --tag-accent-bg: #25214d;  --tag-accent-fg: #b4adff;

    /* typografia */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-section: 15px;
    --fs-title: 18px;

    /* tvar a rozostupy (mriežka 4 px) */
    --radius-sm: 6px;    /* štítky, polia */
    --radius-md: 8px;    /* tlačidlá, položky menu */
    --radius-lg: 10px;   /* karty */
    --radius-xl: 12px;   /* veľké panely, modaly */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
}

/* ═══ Základ ═══ */
.fi-body {
    background: var(--bg-app) !important;
    color: var(--text-primary);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.fi-body ::selection { background: var(--accent-soft); }

/* ═══ Logo ═══ */
.crm-brand { display: inline-flex; align-items: center; gap: var(--space-2); height: 100%; }
.crm-brand-mark { height: 100%; width: auto; aspect-ratio: 1; }
.crm-brand-text { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); letter-spacing: -.01em; }
.crm-brand-text span { font-weight: 500; color: var(--text-secondary); }

/* ═══ Sidebar ═══ */
.fi-sidebar { background: var(--bg-sidebar) !important; border-inline-end: 1px solid var(--border); box-shadow: none !important; }
.fi-sidebar-header { background: var(--bg-sidebar) !important; box-shadow: none !important; border-bottom: 1px solid var(--border) !important; }
.fi-sidebar-nav { padding: var(--space-4) var(--space-3) !important; gap: var(--space-4) !important; }
.fi-sidebar-group-label { font-size: var(--fs-xs) !important; font-weight: 500 !important; color: var(--text-muted) !important; }
.fi-sidebar-group-items { gap: 2px !important; }
.fi-sidebar-item-btn { border-radius: var(--radius-sm) !important; padding: 6px var(--space-2) !important; gap: var(--space-2) !important; }
.fi-sidebar-item-label { font-size: var(--fs-sm) !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
.fi-sidebar-item-icon { width: 16px !important; height: 16px !important; color: var(--text-muted) !important; }
.fi-sidebar-item-btn:hover { background: var(--bg-elevated) !important; }
.fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: var(--text-primary) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn { background: var(--bg-elevated) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: var(--text-primary) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--text-primary) !important; }

/* ═══ Topbar ═══ */
.fi-topbar-ctn, .fi-topbar { background: var(--bg-app) !important; box-shadow: none !important; border-bottom: 1px solid var(--border); }
.fi-topbar .fi-input-wrp { min-width: 16rem; }

/* ═══ Obsah a hlavička stránky ═══ */
.fi-main { padding-top: var(--space-6) !important; }
.fi-header { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.fi-header-heading { font-size: var(--fs-title) !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--text-primary) !important; }
.fi-header-subheading { font-size: var(--fs-sm) !important; color: var(--text-secondary) !important; margin-top: 2px !important; }
.fi-page-header-main-ctn { row-gap: var(--space-6) !important; }

/* ═══ Karty a panely ═══ */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background: var(--bg-surface) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 0 0 1px var(--border) !important;
}
.fi-section-header { border-color: var(--border) !important; padding: var(--space-3) var(--space-4) !important; }
.fi-section-content { padding: var(--space-4) !important; }
.fi-section-header-heading, .fi-ta-header-heading { font-size: var(--fs-section) !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.fi-section-header-description, .fi-ta-header-description { font-size: var(--fs-sm) !important; color: var(--text-secondary) !important; }
.fi-section-header .fi-icon { width: 16px !important; height: 16px !important; color: var(--text-secondary) !important; }

/* ═══ Popisky a hodnoty (formuláre, detail) ═══ */
.fi-fo-field-label-content, .fi-in-entry-label { font-size: var(--fs-sm) !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
.fi-in-text, .fi-in-text-item { font-size: var(--fs-base) !important; color: var(--text-primary); }
.fi-in-placeholder, .fi-in-text-item .fi-placeholder { color: var(--text-muted) !important; }

/* ═══ Tabuľky ═══ */
.fi-ta-header-toolbar { border-color: var(--border) !important; padding: var(--space-2) var(--space-3) !important; }
.fi-ta-table thead, .fi-ta-table thead tr, .fi-ta-table thead th { background: transparent !important; }
.fi-ta-table thead tr { border-bottom: 1px solid var(--border) !important; }
.fi-ta-header-cell { font-size: var(--fs-xs) !important; font-weight: 500 !important; color: var(--text-secondary) !important; padding-block: var(--space-2) !important; }
.fi-ta-header-cell * { color: var(--text-secondary) !important; }
.fi-ta-row { border-color: var(--border) !important; }
.fi-ta-row:hover { background: var(--bg-elevated) !important; }
.fi-ta-cell { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.fi-ta-text-item-label { font-size: var(--fs-sm) !important; }
.fi-ta-text-description, .fi-ta-cell .fi-ta-text-description { font-size: var(--fs-xs) !important; color: var(--text-secondary) !important; }
.fi-ta-cell .fi-badge .fi-icon { display: none; }
.fi-wi-table:has(.crm-no-thead) thead { display: none; }
.fi-pagination { border-color: var(--border) !important; font-size: var(--fs-sm); }
.fi-pagination-overview { color: var(--text-secondary) !important; }

/* ═══ Štítky ═══ */
.fi-badge {
    border-radius: var(--radius-sm) !important; box-shadow: none !important;
    font-size: var(--fs-xs) !important; font-weight: 500 !important; padding: 1px 6px !important; min-height: 20px;
}
.fi-badge.fi-color-success { background: var(--tag-green-bg) !important; color: var(--tag-green-fg) !important; }
.fi-badge.fi-color-warning { background: var(--tag-yellow-bg) !important; color: var(--tag-yellow-fg) !important; }
.fi-badge.fi-color-danger  { background: var(--tag-orange-bg) !important; color: var(--tag-orange-fg) !important; }
.fi-badge.fi-color-info    { background: var(--tag-blue-bg) !important; color: var(--tag-blue-fg) !important; }
.fi-badge.fi-color-gray    { background: var(--tag-neutral-bg) !important; color: var(--tag-neutral-fg) !important; }
.fi-badge.fi-color-primary { background: var(--tag-accent-bg) !important; color: var(--tag-accent-fg) !important; }
.fi-badge .fi-badge-label, .fi-badge .fi-icon { color: inherit !important; }

/* ═══ Polia ═══ */
.fi-input-wrp {
    background: var(--bg-elevated) !important; border-radius: var(--radius-sm) !important;
    box-shadow: 0 0 0 1px var(--border) !important;
}
.fi-input-wrp:focus-within { box-shadow: var(--focus-ring) !important; }
.fi-input-wrp input, .fi-input-wrp textarea, .fi-input-wrp select, .fi-input { font-size: var(--fs-base) !important; color: var(--text-primary) !important; }
.fi-input-wrp input::placeholder, .fi-input-wrp textarea::placeholder { color: var(--text-muted) !important; }
.fi-input-wrp-prefix, .fi-input-wrp-suffix { border-color: var(--border) !important; color: var(--text-secondary); }
.fi-checkbox-input { border-radius: 4px !important; background: var(--bg-elevated) !important; box-shadow: 0 0 0 1px var(--border) !important; }
.fi-checkbox-input:checked { background-color: var(--accent) !important; }

/* ═══ Tlačidlá ═══ */
.fi-btn {
    border-radius: var(--radius-md) !important; font-size: var(--fs-sm) !important; font-weight: 500 !important;
    box-shadow: none !important; transition: background .12s, box-shadow .12s, color .12s;
}
.fi-btn:focus-visible { box-shadow: var(--focus-ring) !important; }
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) { background: var(--accent) !important; color: #fff !important; }
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover { background: var(--accent-hover) !important; }
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) .fi-icon { color: #fff !important; }
.fi-btn.fi-color-gray:not(.fi-link) { background: var(--bg-elevated) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 1px var(--border) !important; }
.fi-btn.fi-color-gray:not(.fi-link):hover { background: var(--border) !important; }
.fi-btn.fi-outlined.fi-color-primary { background: var(--accent-soft) !important; color: var(--tag-accent-fg) !important; box-shadow: none !important; }
.fi-btn.fi-outlined.fi-color-primary .fi-icon { color: var(--tag-accent-fg) !important; }
.fi-btn.fi-outlined.fi-color-primary:hover { background: var(--accent) !important; color: #fff !important; }
.fi-btn.fi-outlined.fi-color-primary:hover .fi-icon { color: #fff !important; }
.fi-link { font-size: var(--fs-sm) !important; color: var(--text-secondary) !important; }
.fi-link:hover { color: var(--text-primary) !important; }
.fi-icon-btn { border-radius: var(--radius-sm) !important; color: var(--text-secondary) !important; }
.fi-icon-btn:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }

/* ═══ Záložky ═══ */
.fi-tabs { background: transparent !important; box-shadow: none !important; border-bottom: 1px solid var(--border); border-radius: 0 !important; padding: 0 !important; gap: var(--space-4) !important; }
.fi-tabs-item { border-radius: 0 !important; background: transparent !important; padding: var(--space-2) 0 !important; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fi-tabs-item-label { font-size: var(--fs-sm) !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
.fi-tabs-item .fi-icon { width: 16px !important; height: 16px !important; color: var(--text-muted) !important; }
.fi-tabs-item.fi-active { border-bottom-color: var(--text-primary); }
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon { color: var(--text-primary) !important; }

/* ═══ Modaly, dropdowny, notifikácie ═══ */
.fi-modal-window { background: var(--bg-surface) !important; border-radius: var(--radius-xl) !important; box-shadow: 0 0 0 1px var(--border), 0 24px 64px rgba(0, 0, 0, .6) !important; }
.fi-modal-close-overlay { background: rgba(0, 0, 0, .6) !important; backdrop-filter: none !important; }
.fi-modal-heading { font-size: var(--fs-section) !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.fi-modal-description { font-size: var(--fs-sm) !important; color: var(--text-secondary) !important; }
.fi-dropdown-panel { background: var(--bg-elevated) !important; border-radius: var(--radius-md) !important; box-shadow: 0 0 0 1px var(--border), 0 12px 32px rgba(0, 0, 0, .5) !important; }
.fi-dropdown-list-item { border-radius: var(--radius-sm) !important; font-size: var(--fs-sm) !important; }
.fi-dropdown-list-item:hover { background: var(--border) !important; }
.fi-no-notification { background: var(--bg-elevated) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 0 0 1px var(--border) !important; }

/* ═══ Prázdne stavy ═══ */
.fi-ta-empty-state-icon-bg, .fi-empty-state-icon-bg { background: var(--bg-elevated) !important; border-radius: var(--radius-md) !important; }
.fi-ta-empty-state-icon-bg .fi-icon, .fi-empty-state-icon-bg .fi-icon { color: var(--text-secondary) !important; }
.fi-ta-empty-state-heading, .fi-empty-state-heading { font-size: var(--fs-base) !important; font-weight: 600 !important; }
.fi-ta-empty-state-description, .fi-empty-state-description { font-size: var(--fs-sm) !important; color: var(--text-secondary) !important; }

/* ═══ KPI karty ═══ */
.fi-wi-stats-overview-stat { padding: var(--space-4) !important; transition: box-shadow .12s, background .12s; }
.fi-wi-stats-overview-stat-label-ctn { gap: var(--space-2) !important; }
.fi-wi-stats-overview-stat-label-ctn .fi-icon { width: 16px !important; height: 16px !important; color: var(--text-secondary) !important; }
.fi-wi-stats-overview-stat-label { font-size: var(--fs-sm) !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
.fi-wi-stats-overview-stat-value { font-size: 24px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--text-primary) !important; font-variant-numeric: tabular-nums; }
.fi-wi-stats-overview-stat-description, .fi-wi-stats-overview-stat-description * { font-size: var(--fs-xs) !important; color: var(--text-secondary) !important; }
.fi-wi-stats-overview-stat-description .fi-icon { display: none; }
a.fi-wi-stats-overview-stat:hover { background: var(--bg-elevated) !important; }

/* ═══ Štvorček s iniciálami ═══ */
.crm-avatar-cell { display: inline-flex; align-items: center; gap: var(--space-3); }
.crm-avatar {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.crm-avatar-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.crm-avatar-sub { display: block; font-size: var(--fs-xs); color: var(--text-secondary); }
.crm-tone-0, .crm-tone-4 { background: var(--tag-green-bg);   color: var(--tag-green-fg); }
.crm-tone-1, .crm-tone-5 { background: var(--tag-blue-bg);    color: var(--tag-blue-fg); }
.crm-tone-2, .crm-tone-6 { background: var(--tag-orange-bg);  color: var(--tag-orange-fg); }
.crm-tone-3, .crm-tone-7 { background: var(--tag-accent-bg);  color: var(--tag-accent-fg); }

/* ═══ Detail zákazníka ═══ */
.whitespace-pre-line .fi-in-text-item { white-space: pre-line; }

/* ═══ Prihlásenie ═══ */
.fi-simple-layout { background: var(--bg-app) !important; }
.crm-login-bg { display: none; }
.fi-simple-main {
    background: var(--bg-surface) !important; border-radius: var(--radius-xl) !important;
    box-shadow: 0 0 0 1px var(--border) !important; max-width: 380px !important;
}
.fi-simple-header-heading { font-size: var(--fs-title) !important; font-weight: 600 !important; }
.fi-simple-header-subheading { font-size: var(--fs-sm) !important; color: var(--text-secondary) !important; }

/* ═══ Doladenie ═══ */
.fi-main { padding-top: var(--space-4) !important; }
.fi-page-header-main-ctn { padding-top: var(--space-2) !important; }
.fi-ta-text { padding-block: 10px !important; }
.fi-section-header { align-items: center !important; }
/* farebný text len pre varovania — „v poriadku“ a „neskôr“ ostávajú neutrálne */
.fi-ta-text-item.fi-color-success, .fi-ta-text-item.fi-color-info, .fi-ta-text-item.fi-color-gray { color: var(--text-primary) !important; }
.fi-ta-text-item.fi-color-warning { color: var(--tag-yellow-fg) !important; }
.fi-ta-text-item.fi-color-danger { color: var(--tag-orange-fg) !important; }