/*
 * theme-tokens.css
 * MA-PRO Theme Engine — UI Shell Design Tokens
 *
 * ⚠️  SCOPE: Only "UI Shell" variables — surfaces, panels, brand accent.
 *     These are the ONLY variables controlled by the user's Theme Engine.
 *
 * ⛔  SEMANTIC COLORS (--color-success, --color-danger, etc.) and neon
 *     accent palette (--neon-blue, etc.) live in root_variables.css and
 *     dashboard-v2.css respectively. They carry data meaning and are
 *     NOT controlled by the Theme Engine. DO NOT move them here.
 *
 * Architecture:
 *   - Every theamable color has a companion -rgb triplet (for rgba() usage).
 *   - JS (theme-core.js) reads these tokens and auto-generates -rgb variants.
 *   - Dark-mode system overrides live in [data-bs-theme="dark"].
 *   - Dashboard surface uses .page-dashboard scope override.
 *
 * Sections:
 *   1. App surface tokens    (--app-bg, --card-bg, --panel-bg)
 *   2. Dashboard surface     (--dash-bg, --dash-card-bg)
 *   3. Brand / accent        (--brand-primary)
 *   4. Auto-contrast text    (--text-on-app, --text-on-card, --text-on-dash)
 *   5. Dark-mode overrides
 *   6. Dashboard scope override
 */


/* =========================================================================
   1. APP SURFACE — běžný layout (light mode defaults)
   ========================================================================= */
:root {
    /* Background of the main content area */
    --app-bg:       #f1f5f9;
    --app-bg-rgb:   241, 245, 249;

    /* Card / list-group / modal backgrounds */
    --card-bg:      #ffffff;
    --card-bg-rgb:  255, 255, 255;

    /* Panel backgrounds: sidebar + topbar (intentionally dark by default) */
    --panel-bg:     #12151a;
    --panel-bg-rgb: 18, 21, 26;
}


/* =========================================================================
   2. DASHBOARD SURFACE — always-dark glassmorphism world
   ========================================================================= */
:root {
    /* Full-page background for the dashboard */
    --dash-bg:          #0f1115;
    --dash-bg-rgb:      15, 17, 21;

    /* Glass widget card base color */
    --dash-card-bg:     #1e2330;
    --dash-card-bg-rgb: 30, 35, 48;
}


/* =========================================================================
   3. GLASSMORPHISM VARIABILITY — UI Shell Glass Controls
      These two tokens allow the user to tune the frosted-glass effect on
      dashboard widget cards without touching semantic or data colours.
      Controlled by ThemeEngine (glassOpacity + glassBlur keys).
      Applied in dashboard-v2.css via var(--glass-opacity) / var(--glass-blur).
   ========================================================================= */
:root {
    /* Widget card glass opacity (0.05 → 0.9; default 0.4) */
    --glass-opacity: 0.4;

    /* Widget backdrop-filter blur radius (0px → 60px; default 24px) */
    --glass-blur: 24px;
}


/* =========================================================================
   4. BRAND / ACCENT — shared across both worlds
   ========================================================================= */
:root {
    --brand-primary:       #2563eb;
    --brand-primary-rgb:   37, 99, 235;
    --brand-primary-hover: #1d4ed8;
}


/* =========================================================================
   4. AUTO-CONTRAST TEXT — computed by theme-core.js, defaults here
   ========================================================================= */
:root {
    /* Text colour on top of --app-bg */
    --text-on-app:   #0f172a;

    /* Text colour on top of --card-bg */
    --text-on-card:  #0f172a;

    /* Text colour on top of --panel-bg (sidebar / topbar) */
    --text-on-panel: #e2e8f0;

    /* Text colour on top of --dash-bg / --dash-card-bg */
    --text-on-dash:  #e2e8f0;
}


/* =========================================================================
   4b. USER-EDITABLE TEXT TOKENS — override auto-contrast (Fáze 2, Cíl A)
       These tokens give the user full control over text readability.
       theme-core.js sets them FIRST from user's saved preference; if not
       set, autoTextColor() is used as fallback (auto-contrast).

       Usage in CSS: color: var(--text-main); / color: var(--text-muted);
       These intentionally shadow --text-on-app and --text-on-card.
   ========================================================================= */
:root {
    /* Main body text — shadows --text-on-app + --text-on-card.
       Default: dark (readable on light app background).
       Fallback is autoTextColor(cardBg) computed by theme-core.js. */
    --text-main:   #0f172a;

    /* Secondary / muted / helper text — labels, timestamps, placeholders.
       Slightly de-emphasised relative to --text-main.
       Default: Tailwind slate-500 (neutral on light or dark). */
    --text-muted:  #64748b;
}


/* =========================================================================
   5. DARK-MODE OVERRIDES — [data-bs-theme="dark"]
      Activated by the existing light/dark toggle in layout.html.
      The Theme Engine ADDS to these; it does not replace them.
   ========================================================================= */
[data-bs-theme="dark"] {
    --app-bg:       #1a1d23;
    --app-bg-rgb:   26, 29, 35;

    --card-bg:      #22262e;
    --card-bg-rgb:  34, 38, 46;

    /* Panel stays the same dark tone */
    --panel-bg:     #12151a;
    --panel-bg-rgb: 18, 21, 26;

    /* Dashboard stays unchanged in dark mode — it's already dark */
    /* --dash-bg and --dash-card-bg remain at their :root values */

    --text-on-app:  #dde1e8;
    --text-on-card: #dde1e8;
}


/* =========================================================================
   6. DASHBOARD SCOPE — body.page-dashboard overrides app surface
      Forces the dark dashboard background onto the html/body regardless
      of the current light/dark theme toggle.
   ========================================================================= */
body.page-dashboard,
body.page-dashboard .main-content,
body.page-dashboard .main-content-inner,
body.page-dashboard .app-container {
    background-color: var(--dash-bg) !important;
}

/* Glass widgets use rgba() with the -rgb triplet for transparency */
.dashboard-v2 .glass-widget {
    /* Example: rgba(var(--dash-card-bg-rgb), 0.40)
       The actual value is set in dashboard-v2.css using this token. */
}


/* =========================================================================
   7. CLEAN CARDS MODE — body.theme-clean-cards
      Applied by theme-core.js when colorfulCards === false.

      Strategy: use the universal [style*="border-left-color"] attribute
      selector so the rule catches EVERY element across ALL modules
      (Projects, Contacts, Databank, Professions, etc.) without needing
      per-module class selectors.

      Two-state logic:
        Default state  → neutralise to --border-color (subtle, matches theme).
        Hover / active → illuminate with --brand-primary (clear visual feedback).

      ⚠️  SECURITY BOUNDARY: these rules ONLY touch border-left-color.
          They do NOT affect background-color, text-color, semantic badges,
          Kanban colours or any other data-driven styles.
   ========================================================================= */

/* =========================================================================
   POZNÁMKA: Třída .theme-clean-cards je od verze 2.1 aplikována synchronně
   na <html> (documentElement) místo <body>. Důvod: theme-core.js běží
   v <head> před renderem <body>, takže document.body ještě neexistuje.
   documentElement (<html>) je vždy dostupný → žádný FOUC.
   Všechny selektory níže proto začínají "html.theme-clean-cards".
   ========================================================================= */

/* 1. Clean mode — neutralise ALL entity colour accents everywhere. */
html.theme-clean-cards [style*="border-left-color"],
html.theme-clean-cards .glass-widget [style*="border-left-color"],
html.theme-clean-cards .glass-widget-body [style*="border-left-color"] {
    border-left-color: rgba(255, 255, 255, 0.08) !important;
}

/* 2. Clean mode — re-illuminate on hover / active with brand primary */
html.theme-clean-cards .card[style*="border-left-color"]:hover,
html.theme-clean-cards .list-group-item[style*="border-left-color"]:hover,
html.theme-clean-cards .directory-card[style*="border-left-color"]:hover,
html.theme-clean-cards .list-group-item.active[style*="border-left-color"],
html.theme-clean-cards .glass-widget .list-group-item[style*="border-left-color"]:hover,
html.theme-clean-cards .glass-widget div[style*="border-left-color"]:hover {
    border-left-color: var(--brand-primary, #2563eb) !important;
}

/* 3. Clean mode — dashboard glass-widget accent unification */
html.theme-clean-cards .glass-widget {
    --widget-accent:     var(--brand-primary,     #2563eb);
    --widget-accent-rgb: var(--brand-primary-rgb, 37, 99, 235);
}

/* 4. Clean mode — suppress data-accent overrides on glass-widget. */
html.theme-clean-cards .glass-widget[data-accent] {
    --widget-accent:     var(--brand-primary,     #2563eb);
    --widget-accent-rgb: var(--brand-primary-rgb, 37, 99, 235);
}

/* 5. Clean mode — broader border-left neutralisation (catches style="border-left:…"). */
html.theme-clean-cards .glass-widget [style*="border-left"] {
    border-left-color: rgba(255, 255, 255, 0.08) !important;
}
html.theme-clean-cards .glass-widget [style*="border-left"]:hover {
    border-left-color: var(--brand-primary, #2563eb) !important;
}

/* 6. Clean mode — Bootstrap utility-class border neutralisation inside widgets. */
html.theme-clean-cards .glass-widget .border-start,
html.theme-clean-cards .glass-widget .border-success,
html.theme-clean-cards .glass-widget .border-danger,
html.theme-clean-cards .glass-widget .border-warning,
html.theme-clean-cards .glass-widget .border-info,
html.theme-clean-cards .glass-widget .border-primary {
    border-left-color: rgba(255, 255, 255, 0.08) !important;
}
html.theme-clean-cards .glass-widget .border-start:hover,
html.theme-clean-cards .glass-widget .border-success:hover,
html.theme-clean-cards .glass-widget .border-danger:hover,
html.theme-clean-cards .glass-widget .border-warning:hover,
html.theme-clean-cards .glass-widget .border-info:hover,
html.theme-clean-cards .glass-widget .border-primary:hover {
    border-left-color: var(--brand-primary, #2563eb) !important;
}

/* 7b. Clean mode — project_detail timeline group accent colours. */
html.theme-clean-cards [class*="timeline-group-"] .timeline-header,
html.theme-clean-cards [class*="timeline-group-"] .timeline-icon {
    border-color: rgba(255, 255, 255, 0.18) !important;
    color:        var(--text-muted, #64748b) !important;
}

html.theme-clean-cards [class*="timeline-group-"] .timeline-header:hover {
    border-left-color: var(--brand-primary, #2563eb) !important;
}

/* 7. Clean mode — force concrete accent properties on glass-widget internals. */
html.theme-clean-cards .glass-widget .glass-widget-icon {
    color:            var(--brand-primary, #2563eb) !important;
    background-color: rgba(var(--brand-primary-rgb, 37, 99, 235), 0.15) !important;
    border-color:     rgba(var(--brand-primary-rgb, 37, 99, 235), 0.25) !important;
}
html.theme-clean-cards .glass-widget .glass-widget-footer-link {
    color: var(--brand-primary, #2563eb) !important;
}
html.theme-clean-cards .glass-widget .glass-widget-footer-link:hover {
    color: var(--brand-primary-hover, #1d4ed8) !important;
}

/* 8a. Neutralise coloured text helpers (Clean Mode only) */
html.theme-clean-cards .glass-widget .text-danger,
html.theme-clean-cards .glass-widget .text-success,
html.theme-clean-cards .glass-widget .text-warning,
html.theme-clean-cards .glass-widget .text-info {
    color: var(--text-muted, #94a3b8) !important;
}

/* 8b. Neutralise ALL badge fills — general catch-all (Clean Mode only) */
html.theme-clean-cards .glass-widget .badge {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color:            var(--text-muted, #94a3b8) !important;
    border-color:     rgba(255, 255, 255, 0.10) !important;
}

/* 8c. Restore brand-primary accent on list-group-item hover (Clean Mode only) */
html.theme-clean-cards .glass-widget .list-group-item:hover .text-danger,
html.theme-clean-cards .glass-widget .list-group-item:hover .text-success,
html.theme-clean-cards .glass-widget .list-group-item:hover .text-warning,
html.theme-clean-cards .glass-widget .list-group-item:hover .text-info {
    color: var(--brand-primary, #2563eb) !important;
}
html.theme-clean-cards .glass-widget .list-group-item:hover .badge {
    background-color: rgba(var(--brand-primary-rgb, 37, 99, 235), 0.15) !important;
    color:            var(--brand-primary, #2563eb) !important;
    border-color:     rgba(var(--brand-primary-rgb, 37, 99, 235), 0.30) !important;
}


/* =========================================================================
   9. DASHBOARD PERMANENT NEUTRALISATION — .dashboard-v2 .glass-widget
      Applied ALWAYS, independently of Clean Mode toggle.

      Rationale: semantic colours (red = overdue, green = success, yellow =
      warning) "shout" and break the calm glassmorphism aesthetic.  Rather
      than gate this behind a user preference, we drain them permanently on
      the Dashboard surface and restore brand-primary on hover so interactive
      feedback is preserved.

      Scope: .dashboard-v2 .glass-widget  (index.html only).
             Does NOT affect any other page, modal or component.

      Targets:
        — .text-danger/.text-success/.text-warning/.text-info  (text helpers)
        — .badge.bg-*  and  .badge.text-bg-*  (solid + BS5 text-bg variants)
      Subtle variants (bg-danger-subtle etc.) are intentionally excluded —
      they are already low-contrast and do not need further draining.
   ========================================================================= */

/* 9a. Permanent — ztlumení sémantických textů do neutrální šedé */
.dashboard-v2 .glass-widget .text-danger,
.dashboard-v2 .glass-widget .text-success,
.dashboard-v2 .glass-widget .text-warning,
.dashboard-v2 .glass-widget .text-info {
    color: var(--text-muted, #94a3b8) !important;
}

/* 9b. Permanent — ztlumení plných barevných odznaků (solid + text-bg) */
.dashboard-v2 .glass-widget .badge.bg-danger,
.dashboard-v2 .glass-widget .badge.bg-success,
.dashboard-v2 .glass-widget .badge.bg-warning,
.dashboard-v2 .glass-widget .badge.bg-info,
.dashboard-v2 .glass-widget .badge.text-bg-danger,
.dashboard-v2 .glass-widget .badge.text-bg-success,
.dashboard-v2 .glass-widget .badge.text-bg-warning,
.dashboard-v2 .glass-widget .badge.text-bg-info {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color:            var(--text-muted, #94a3b8) !important;
    border-color:     rgba(255, 255, 255, 0.10) !important;
}

/* 9c. Permanent — rozsvícení do brand-primary při hover nad řádkem */
.dashboard-v2 .glass-widget .list-group-item:hover .text-danger,
.dashboard-v2 .glass-widget .list-group-item:hover .text-success,
.dashboard-v2 .glass-widget .list-group-item:hover .text-warning,
.dashboard-v2 .glass-widget .list-group-item:hover .text-info {
    color: var(--brand-primary, #2563eb) !important;
}
.dashboard-v2 .glass-widget .list-group-item:hover .badge.bg-danger,
.dashboard-v2 .glass-widget .list-group-item:hover .badge.bg-success,
.dashboard-v2 .glass-widget .list-group-item:hover .badge.bg-warning,
.dashboard-v2 .glass-widget .list-group-item:hover .badge.bg-info,
.dashboard-v2 .glass-widget .list-group-item:hover .badge.text-bg-danger,
.dashboard-v2 .glass-widget .list-group-item:hover .badge.text-bg-success,
.dashboard-v2 .glass-widget .list-group-item:hover .badge.text-bg-warning,
.dashboard-v2 .glass-widget .list-group-item:hover .badge.text-bg-info {
    background-color: rgba(var(--brand-primary-rgb, 37, 99, 235), 0.15) !important;
    color:            var(--brand-primary, #2563eb) !important;
    border-color:     rgba(var(--brand-primary-rgb, 37, 99, 235), 0.30) !important;
}