/* ============================================================================
 * Fleet Mapa – Design Tokens (Plain CSS)
 * ----------------------------------------------------------------------------
 * Mirrors tokens.json / tokens.ts. For full documentation see DESIGN.md.
 * Source of truth: public/index.html (inline <style>).
 *
 * Usage in Electron renderer:
 *   <link rel="stylesheet" href="./tokens.css">
 *   <style>
 *     #my-element { background: var(--bg-base); color: var(--text-soft); }
 *   </style>
 *
 * This file only defines:
 *   1. :root custom properties (design primitives)
 *   2. State utility classes (.ppk-*, .util-*, .np-dist-*)
 *   3. The .pulsing helper for marker hover animation
 *   4. @keyframes used by all animations referenced in tokens
 *   5. prefers-reduced-motion safety net
 *
 * It does NOT define component-level styles (sidebar, panels, popups, etc.) —
 * those are app concerns; compose them from the primitives below.
 * ========================================================================== */

:root {

    /* ----- Brand ------------------------------------------------------- */
    /* Logo colors. NEVER use these for UI accents — keep brand assets clean. */
    --brand-navy:        #001b70;
    --brand-gold:        #ffd700;
    --brand-logo-black:  #231f20;


    /* ----- Background hierarchy --------------------------------------- */
    /* 5-step scale, deepest = body, border = highest border line. */
    --bg-deepest:    #0a1628;   /* body, modal input field */
    --bg-base:       #0d2149;   /* header, sidebar, panels, popovers */
    --bg-elevated:   #112a5e;   /* count badge, hover items, OSRM bar */
    --bg-elevated-2: #1e3060;   /* legend hover, sidebar active item */
    --bg-border:     #1e3d7a;   /* default border line, slider track */


    /* ----- Accent (primary action / focus) ---------------------------- */
    /* Slightly muted vs brand gold. Use everywhere except logo. */
    --accent:         #f5c400;
    --accent-hover:   #fcd34d;
    --accent-soft:    rgba(245, 196, 0, 0.07);
    --accent-border:  rgba(245, 196, 0, 0.4);
    --accent-handle:  rgba(245, 196, 0, 0.35);   /* drag-resize hover */


    /* ----- Text -------------------------------------------------------- */
    --text-primary:    #eee;       /* default body */
    --text-bright:     #e2e8f0;    /* highlighted addresses */
    --text-soft:       #cbd5e1;    /* labels, sub-titles */
    --text-muted:      #94a3b8;    /* status, sub-labels */
    --text-dim:        #64748b;    /* version, hint text */
    --text-dimmer:     #475569;    /* section dividers */
    --text-on-accent:  #0d2149;    /* text on yellow CTA / selected chip */


    /* ----- State (semantic) ------------------------------------------- */
    --state-ok:           #4ecca3;   /* connected, success */
    --state-ok-2:         #4ade80;   /* utilization green */
    --state-warn:         #fbbf24;   /* mid-distance pin */
    --state-warn-2:       #f5c400;   /* utilization yellow (= accent) */
    --state-error:        #f87171;   /* utilization red, ppk-red */
    --state-error-2:      #ef4444;   /* disconnected, error border */
    --state-error-bg:     #7f1d1d;   /* warning banner background */
    --state-error-sub:    #fca5a5;   /* warning banner sub-text */
    --state-info:         #60a5fa;   /* links, BC deeplinks */
    --state-info-2:       #93c5fd;   /* link hover */
    --state-replan:       #f97316;   /* sandbox warning, replan pill */
    --state-replan-bg:    #3d2410;   /* bypass active background */


    /* ----- Distance pill (nearby panels) ------------------------------ */
    --pill-near-bg:  #1e4d2b;   --pill-near-fg:  #4ecca3;
    --pill-mid-bg:   #3d2e0a;   --pill-mid-fg:   #fbbf24;
    --pill-far-bg:   #3d0f0f;   --pill-far-fg:   #f87171;


    /* ----- TIMOCOM brand (feature-flagged) ---------------------------- */
    --tc-blue:        #1c5fa6;
    --tc-blue-dark:   #143f70;
    --tc-sandbox:     #f97316;


    /* ----- Highlight --------------------------------------------------- */
    --highlight-match: #0f3d2a;   /* matched candidate row in nearby panel */


    /* ----- Font families ---------------------------------------------- */
    --font-sans:    Arial, sans-serif;
    --font-mono:    Consolas, monospace;
    --font-system:  'Segoe UI', system-ui, sans-serif;


    /* ----- Font sizes -------------------------------------------------- */
    --fs-xs:       9px;    /* section dividers, env labels */
    --fs-sm:       10px;   /* version, slider ticks, hint */
    --fs-base:     11px;   /* panel default, badges, chips */
    --fs-md:       12px;   /* secondary labels, status */
    --fs-default:  13px;   /* sidebar item, popover body */
    --fs-lg:       14px;   /* panel title, banner, slider value */
    --fs-xl:       15px;   /* count badge strong */
    --fs-xxl:      16px;   /* "Fleet Mapa" header label */


    /* ----- Font weights & line heights -------------------------------- */
    --fw-normal:  400;
    --fw-bold:    700;

    --lh-tight:    1.2;
    --lh-popup:    1.45;
    --lh-default:  1.5;
    --lh-relaxed:  1.6;


    /* ----- Letter spacing --------------------------------------------- */
    --ls-uppercase:       1.2px;
    --ls-uppercase-wide:  1.5px;
    --ls-header:          0.05em;
    --ls-label:           0.07em;


    /* ----- Border radius ---------------------------------------------- */
    --radius-sm:           4px;     /* date input */
    --radius-md:           6px;     /* default — buttons, badges, inputs */
    --radius-lg:           8px;     /* dropdown */
    --radius-xl:           10px;    /* modal, banner */
    --radius-pill:         9px;     /* legend count badges */
    --radius-button-pill:  20px;    /* feedback floating button */
    --radius-round:        50%;     /* dots, ping, marker badges */


    /* ----- Border presets --------------------------------------------- */
    --border-thin:           1px;
    --border-medium:         2px;
    --border-accent:         3px;
    --border-header-accent:  2px solid #f5c400;
    --border-panel-accent:   3px solid #f5c400;
    --border-panel-edge:     2px solid #f5c400;


    /* ----- Shadows ----------------------------------------------------- */
    --shadow-header:    0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-panel:     -4px 0 16px rgba(0, 0, 0, 0.5);
    --shadow-popover:   0 6px 22px rgba(0, 0, 0, 0.55);
    --shadow-modal:     0 8px 40px rgba(0, 0, 0, 0.7);
    --shadow-dropdown:  0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-fb:        0 2px 10px rgba(0, 0, 0, 0.4);


    /* ----- Layout ------------------------------------------------------ */
    --header-height:       52px;

    --sidebar-w-collapsed: 52px;
    --sidebar-w-expanded:  220px;
    --sidebar-item-height: 36px;

    --nearby-w-default:    570px;   /* resizable 350 – 800px */
    --nearby-w-min:        350px;
    --nearby-w-max:        800px;
    --nearby-handle-w:     12px;

    --legend-w:            280px;
    --legend-header-h:     38px;
    --legend-row-h:        32px;
    --legend-row-aux-h:    26px;

    --popover-min-w:       220px;
    --popover-max-w:       340px;
    --chip-popover-w:      420px;

    --feedback-modal-w:    440px;

    --toggle-w:            34px;
    --toggle-h:            18px;
    --toggle-thumb:        12px;

    --slider-track-h:      4px;
    --slider-thumb:        16px;


    /* ----- Z-index hierarchy ------------------------------------------ */
    --z-sidebar:             800;
    --z-shipment-indicator:  900;
    --z-feedback-button:     900;
    --z-legend:              1000;
    --z-nearby-panel:        1000;
    --z-dropdown:            2000;
    --z-sidebar-popover:     2000;
    --z-modal:               3000;
    --z-warning:             9999;
    --z-toast:               9999;


    /* ----- Transition presets ----------------------------------------- */
    --transition-fast:      0.12s ease;   /* popover fade-in */
    --transition-default:   0.15s ease;   /* most hover states */
    --transition-panel:     0.2s ease;    /* sidebar expand/collapse */
    --transition-slide:     0.25s ease;   /* nearby panel slide-in */
    --transition-collapse:  0.28s ease;   /* legend body collapse */
}


/* ============================================================================
 * Světlé téma pro APLIKACE (volitelné) — [data-theme="light"] na <html>
 * ----------------------------------------------------------------------------
 * Kanonická identita je TMAVÁ; světlé je odklon — nasazuj jen na výslovné přání.
 * Pravidla: navy text, žlutá #f5c400 jen jako VÝPLŇ (lišty, odznaky, signature
 * pruh), NIKDY žlutý text na holé bílé → v appce přemapuj na navy (#001b70).
 * Bez atributu = tmavé (výchozí). Přepisuje jen barvy/stíny.
 * ========================================================================== */
[data-theme="light"] {
    --bg-deepest:    #ffffff;
    --bg-base:       #f8fafc;
    --bg-elevated:   #eef2f7;
    --bg-elevated-2: #e2e8f0;
    --bg-border:     #cbd5e1;

    --accent-soft:   rgba(245, 196, 0, 0.14);
    --accent-border: rgba(245, 196, 0, 0.55);
    --accent-handle: rgba(245, 196, 0, 0.45);

    --text-primary:   #0a1628;
    --text-bright:    #0a1628;
    --text-soft:      #334155;
    --text-muted:     #64748b;
    --text-dim:       #94a3b8;
    --text-dimmer:    #94a3b8;
    --text-on-accent: #0d2149;

    --shadow-header:    0 1px 3px  rgba(10, 22, 40, 0.12);
    --shadow-panel:    -4px 0 16px rgba(10, 22, 40, 0.12);
    --shadow-popover:   0 6px 22px rgba(10, 22, 40, 0.15);
    --shadow-modal:     0 8px 40px rgba(10, 22, 40, 0.18);
    --shadow-dropdown:  0 8px 24px rgba(10, 22, 40, 0.15);
    --shadow-fb:        0 2px 10px rgba(10, 22, 40, 0.15);
}


/* ============================================================================
 * Utility classes (state coloring)
 * ----------------------------------------------------------------------------
 * Apply these to <strong>, <span>, or pill elements where the runtime logic
 * computes a category. The class names match the production app, so backend
 * code returning class names continues to work unchanged.
 * ========================================================================== */

/* --- Kč/km — public/js/utils.js → formatPricePerKm() ---------------------- */
.ppk-red    { color: var(--state-error);  font-weight: var(--fw-bold); }
.ppk-yellow { color: var(--state-warn-2); font-weight: var(--fw-bold); }
.ppk-green  { color: var(--state-ok-2);   font-weight: var(--fw-bold); }


/* --- Utilization badge (header) ------------------------------------------ */
.util-green  { color: var(--state-ok-2); }
.util-yellow { color: var(--state-warn-2); }
.util-red    { color: var(--state-error); }


/* --- Distance pill (nearby panel rows) ----------------------------------- */
.np-dist-near {
    background: var(--pill-near-bg);
    color:      var(--pill-near-fg);
}
.np-dist-mid {
    background: var(--pill-mid-bg);
    color:      var(--pill-mid-fg);
}
.np-dist-far {
    background: var(--pill-far-bg);
    color:      var(--pill-far-fg);
}


/* ============================================================================
 * Marker pulse helper
 * ----------------------------------------------------------------------------
 * Apply .pulsing to a Leaflet marker's outer container; its <div>/<img>
 * children animate. Anchored at center bottom so the marker tip stays put.
 * ========================================================================== */

.pulsing div,
.pulsing img {
    animation: pulse 0.8s ease-in-out infinite;
    display: inline-block;
    transform-origin: center bottom;
}


/* ============================================================================
 * Animations
 * ----------------------------------------------------------------------------
 * All keyframes referenced in tokens.json animation.* live here, so
 * components elsewhere can `animation: pulse 0.8s ease-in-out infinite`
 * without redefining.
 * ========================================================================== */

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.6); }
    100% { transform: scale(1); }
}

@keyframes blink-status {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

@keyframes slide-down {
    from {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes fb-ping {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.6); opacity: 0.5; }
}

@keyframes nearby-origin-pulse {
    0%   { transform: scale(1);    opacity: 0.9; }
    50%  { transform: scale(1.55); opacity: 0.35; }
    100% { transform: scale(1);    opacity: 0.9; }
}

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

@keyframes search-toast-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes search-toast-out {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateY(-3px); }
}


/* ============================================================================
 * Reduced motion
 * ----------------------------------------------------------------------------
 * Honor OS-level animation preference. Mirrors the production app.
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }
}