/**
 * Energy Experts theme tokens: ONE light/dark system for every piece of plugin UI
 * (project view, widgets, finance, CRM, overlays, menus, share pages, settings).
 *
 * Dark glass is the default everywhere (Till 01.11.2026). Only the portal
 * (/portal/*) has a per-user Light | Dark | System choice: <html data-ee-mode="light">
 * switches to the light block at the end of this file. Progress stays
 * yellow -> blue -> green in both modes.
 *
 * Rules
 *  - Dark values are the defaults in :root, light values live in ONE block below.
 *  - Stylesheets paint with these variables, never with literal greys. White washes of
 *    the dark glass are written as rgba(var(--ee-fg-rgb), a) so the same alpha turns
 *    into an ink wash on the light glass; black washes use rgba(var(--ee-ink-rgb), a).
 *  - Map / 3D canvas content is not themed, only the UI chrome above it.
 *  - Text tokens keep >= 4.5:1 against the card glass in both modes.
 *  - The project shell tokens (--ees-*, ee-shell-tokens.css) stay as they are and
 *    are aliased here where both exist.
 *
 * This file is a dependency of ee-project-styles / ee-widget-styles and of every
 * stylesheet that is loaded without them (CRM, portal, share page), so it is always
 * the first plugin stylesheet in the cascade.
 */
:root {
    /* Foreground / ink as RGB triplets for alpha washes: rgba(var(--ee-fg-rgb), .1) */
    --ee-fg-rgb: 255, 255, 255;
    --ee-ink-rgb: 0, 0, 0;
    /* tint of the glass cards: rgba(var(--ee-tint-rgb), a) is dark navy glass here and
       white glass in light mode (replaces the hand-written navy/graphite rgba tints) */
    --ee-tint-rgb: 12, 17, 28;

    /* Page and surfaces */
    --ee-bg-primary: #0a0a0f;
    --ee-bg-secondary: #111118;
    --ee-bg-tertiary: #1a1a24;
    --ee-bg-card: rgba(255, 255, 255, 0.06);
    --ee-bg-card-hover: rgba(255, 255, 255, 0.10);
    --ee-bg-glass: rgba(255, 255, 255, 0.08);
    --ee-bg-elevated: #1c1c1e;                 /* opaque sheets: menus, popups, dropdowns */
    --ee-bg-elevated-2: #2c2c2e;
    --ee-bg-field: rgba(0, 0, 0, 0.28);        /* inputs on the glass */
    --ee-box-background-color: rgba(0, 0, 0, 0.4);
    /* Graphite glass of controls floating above the bright 3D scene (.iconPd,
       .ee-floating-widgets .ee-widget). */
    --ee-bg-graphite-glass: rgba(15, 22, 35, 0.65);
    /* Dark Apple-style glass of every finance/project card over the map (Till 31.10.2026:
       darker and glassier, one token for all cards). 0.86 keeps the card over the brightest
       map at ~#2C2F33 (white text > 12:1). */
    --ee-card-glass: rgba(10, 14, 22, 0.86);
    --ee-card-glass-hover: rgba(14, 19, 30, 0.9);
    --ee-card-glass-filter: blur(18px) saturate(140%);
    --ee-card-glass-border: rgba(255, 255, 255, 0.10);
    --ee-card-glass-border-hover: rgba(255, 255, 255, 0.16);

    /* Glass sheen (the 165deg highlight of .ee-widget) */
    --ee-glass-highlight: rgba(255, 255, 255, 0.25);
    --ee-glass-border: rgba(255, 255, 255, 0.15);
    --ee-glass-sheen: var(--ee-tile-sheen), var(--ee-tile-fill);
    --ee-glass-blur: 28px;
    /* Glossy tile glass (Till 01.11.2026: dashboard tiles like the tour cards). One set of
       tokens for every card: translucent fill + specular top-left sheen, blur 28px, 1px inner
       top highlight, 12-14% border, deep soft shadow, 20px radius. Dark fill 0.55 keeps white
       text >= 5:1 over the brightest satellite map. */
    --ee-tile-fill: rgba(28, 28, 30, 0.55);
    --ee-tile-fill-hover: rgba(28, 28, 30, 0.66);
    --ee-tile-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.04) 100%);
    --ee-tile-filter: blur(28px) saturate(170%);
    --ee-tile-border: rgba(255, 255, 255, 0.14);
    --ee-tile-border-hover: rgba(255, 255, 255, 0.22);
    --ee-tile-highlight: rgba(255, 255, 255, 0.28);
    --ee-tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 10px 30px rgba(0, 0, 0, 0.32), 0 30px 60px rgba(0, 0, 0, 0.22);
    --ee-tile-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.38), 0 36px 72px rgba(0, 0, 0, 0.26);
    --ee-tile-radius: 20px;
    --ee-widget-border: var(--ee-tile-border);
    --ee-widget-filter: var(--ee-tile-filter);
    --ee-glass-blur-heavy: 80px;

    /* Text */
    --ee-text-primary: #ffffff;
    --ee-text-secondary: rgba(255, 255, 255, 0.85);
    --ee-text-tertiary: rgba(255, 255, 255, 0.65);
    --ee-text-muted: rgba(255, 255, 255, 0.45);
    /* faint text bands (empty states, hints, sub-labels): dark keeps the old alphas,
       light lifts them to >= 4.5:1 on the light glass */
    --ee-text-dim: rgba(255, 255, 255, 0.5);
    --ee-text-faint: rgba(255, 255, 255, 0.4);
    --ee-text-faint-2: rgba(255, 255, 255, 0.28);
    --ee-text-on-accent: #ffffff;

    /* Accents (identical in both modes) */
    --ee-accent-one: var(--secondary-color, #3FA14D);
    --ee-accent-green: var(--secondary-color, #3FA14D);
    --ee-accent-orange: #FF9500;
    --ee-accent-red: #FF3B30;
    --ee-accent-purple: #AF52DE;
    --ee-accent-teal: #5AC8FA;
    --ee-accent-pink: #FF2D55;
    --ee-accent-yellow: #ffd60a;
    --ee-accent-blue: #0a84ff;
    /* progress bars: yellow -> blue -> green, every loading bar in the plugin */
    --ee-progress-start: #ffd60a;
    --ee-progress-mid: #0a84ff;
    --ee-progress-end: #30d158;
    --ee-progress-gradient: linear-gradient(90deg, var(--ee-progress-start) 0%, var(--ee-progress-mid) 50%, var(--ee-progress-end) 100%);

    /* Status */
    --ee-status-success: #30d158;
    --ee-status-warning: #ff9f0a;
    --ee-status-error: #ff453a;
    --ee-status-info: #0a84ff;

    /* Borders */
    --ee-border-subtle: rgba(255, 255, 255, 0.06);
    --ee-border-light: rgba(255, 255, 255, 0.1);
    --ee-border-medium: rgba(255, 255, 255, 0.15);

    /* Shadows */
    --ee-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --ee-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --ee-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --ee-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
    --ee-shadow-glow: 0 0 40px rgba(10, 132, 255, 0.15);
    --ee-widget-shadow: var(--ee-tile-shadow);

    /* Scrollbars */
    --ee-scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --ee-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);

    /* Spacing */
    --ee-space-xs: 4px;
    --ee-space-sm: 8px;
    --ee-space-md: 16px;
    --ee-space-lg: 14px;
    --ee-space-xl: 32px;
    --ee-space-2xl: 48px;

    /* Border radius */
    --ee-radius-sm: 8px;
    --ee-radius-md: 12px;
    --ee-radius-lg: 16px;
    --ee-radius-xl: 20px;
    --ee-radius-2xl: 24px;
    --ee-radius-full: 9999px;

    /* Transitions */
    --ee-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ee-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --ee-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --ee-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography */
    --ee-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    --ee-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Grid */
    --ee-grid-columns: 3;
    --ee-grid-gap: 16px;
    --ee-widget-min-height: 180px;
    --ee-row-height: minmax(var(--ee-widget-min-height), auto);
    --ee-container-max-height: 100vh;

    /* Native form controls inside plugin UI follow the theme */
    --ee-color-scheme: dark;
}

/* Native controls (select, input, scrollbar) inside plugin UI follow the theme */
.ee-widget, .ee-widget-grid, .ee-modal, .ee-popup, .ee-dropdown, .ee-fullscreen, .ee-fullscreen-overlay,
.projectSettingsPopupContainer, .ee-finance-fullscreen, .b2b-crm, .ee-portal {
    color-scheme: var(--ee-color-scheme);
}

/* Divi colours every focused field #3e3e3e (input[type="text"]:focus 0,2,1; select:focus and
   textarea:focus 0,1,1). That outranks the plugin's own field colours, so a field being edited
   turned grey on the dark glass (Gewerk bearbeiten, 04.11.2026). Inside plugin UI a focused field
   keeps the theme ink (0,2,2: one element more than Divi; a plugin :focus rule needs >= 0,2,2 to win).
   Placeholders get >= 4.5:1 instead of the browser grey (3.5:1 on the glass). */
html :where(.ee-widget, .ee-widget-grid, .ee-modal, .ee-popup, .ee-dropdown, .ee-fullscreen, .ee-fullscreen-overlay,
.projectSettingsPopupContainer, .ee-finance-fullscreen, .b2b-crm, .ee-portal) :is(input:is(:not([type]), [type="text"], [type="email"], [type="password"], [type="tel"], [type="number"], [type="search"], [type="url"]), select, textarea):focus {
    color: var(--ee-text-primary);
}
:where(.ee-widget, .ee-widget-grid, .ee-modal, .ee-popup, .ee-dropdown, .ee-fullscreen, .ee-fullscreen-overlay,
.projectSettingsPopupContainer, .ee-finance-fullscreen, .b2b-crm, .ee-portal) ::placeholder {
    color: rgba(var(--ee-fg-rgb), 0.62);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   One theme: dark glass everywhere (Till 01.11.2026, "hell modus wieder weg, wir
   machen ueber glas modus"). A light OS setting only lifts small accents: a
   slightly lighter glass tint and a stronger specular sheen. Text, surfaces and
   icons stay light-on-dark, so both settings look almost the same and keep AA.
   --------------------------------------------------------------------------- */
:root {
    color-scheme: dark;
}
@media (prefers-color-scheme: light) {
    :root {
        --ee-tile-fill: rgba(36, 38, 44, 0.58);
        --ee-tile-fill-hover: rgba(36, 38, 44, 0.68);
        --ee-tile-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.05) 100%);
        --ee-tile-border: rgba(255, 255, 255, 0.18);
        --ee-card-glass: rgba(16, 20, 28, 0.84);
        --ee-glass-highlight: rgba(255, 255, 255, 0.30);
    }
}

/* ---------------------------------------------------------------------------
   Portal light mode (Till 01.11.2026: "hier muss es einen light (den alten) und
   einen dark mode geben"). Only /portal/* pages carry <html data-ee-mode>, set by
   PortalRouter from the user's choice (Light default | Dark | System, resolved in
   ee-portal-nav.js before the body paints). Light restores the old portal look:
   white cards on slate, slate ink, brand green #1f6f43. The project view never has
   the attribute and stays dark glass. Text tokens keep >= 4.5:1 on #f1f5f9.
   --------------------------------------------------------------------------- */
html[data-ee-mode="light"] {
    color-scheme: light;
    --ee-fg-rgb: 15, 23, 42;
    --ee-ink-rgb: 255, 255, 255;
    --ee-tint-rgb: 255, 255, 255;

    --ee-bg-primary: #f8fafc;
    --ee-bg-secondary: #ffffff;
    --ee-bg-tertiary: #f1f5f9;
    --ee-bg-card: rgba(15, 23, 42, 0.03);
    --ee-bg-card-hover: rgba(15, 23, 42, 0.06);
    --ee-bg-glass: #ffffff;
    --ee-bg-elevated: #ffffff;
    --ee-bg-elevated-2: #f1f5f9;
    --ee-bg-field: #ffffff;
    --ee-box-background-color: #ffffff;
    --ee-bg-graphite-glass: #ffffff;
    --ee-card-glass: #ffffff;
    --ee-card-glass-hover: #ffffff;
    --ee-card-glass-filter: none;
    --ee-card-glass-border: #e2e8f0;
    --ee-card-glass-border-hover: #cbd5e1;

    --ee-glass-highlight: rgba(255, 255, 255, 0);
    --ee-glass-border: #e2e8f0;
    --ee-tile-fill: #ffffff;
    --ee-tile-fill-hover: #f8fafc;
    --ee-tile-sheen: linear-gradient(transparent, transparent);
    --ee-tile-filter: none;
    --ee-tile-border: #e2e8f0;
    --ee-tile-border-hover: #cbd5e1;
    --ee-tile-highlight: rgba(255, 255, 255, 0);
    --ee-tile-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
    --ee-tile-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.10);

    --ee-text-primary: #1f2937;
    --ee-text-secondary: #374151;
    --ee-text-tertiary: #556070;
    --ee-text-muted: #5b6577;
    --ee-text-dim: #5b6577;
    --ee-text-faint: #5b6577;
    --ee-text-faint-2: #5b6577;

    --ee-accent-one: #1f6f43;
    --ee-accent-green: #1f6f43;
    --ee-accent-orange: #b45309;
    --ee-accent-red: #b91c1c;
    --ee-accent-purple: #6d28d9;
    --ee-accent-teal: #0e7490;
    --ee-accent-pink: #be185d;
    --ee-accent-yellow: #854d0e;
    --ee-accent-blue: #1d4ed8;

    --ee-status-success: #166534;
    --ee-status-warning: #b45309;
    --ee-status-error: #b91c1c;
    --ee-status-info: #1d4ed8;

    --ee-border-subtle: #f1f5f9;
    --ee-border-light: #e2e8f0;
    --ee-border-medium: #cbd5e1;

    --ee-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ee-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --ee-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);
    --ee-shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.14);
    --ee-shadow-glow: 0 0 0 3px rgba(31, 111, 67, 0.12);

    --ee-scrollbar-thumb: rgba(15, 23, 42, 0.18);
    --ee-scrollbar-thumb-hover: rgba(15, 23, 42, 0.30);

    --ee-color-scheme: light;

    /* AA text/fill colours of the portal (>= 4.5:1 on the light cards) */
    --ee-aa-green: #1f6f43;
    --ee-aa-red: #b91c1c;
    --ee-aa-blue: #1d4ed8;
    --ee-aa-purple: #6d28d9;
    --ee-aa-orange: #b45309;
    --ee-aa-warn: #92400e;
    --ee-aa-muted: #5b6577;
    --ee-aa-fill: #1f6f43;
    --ee-aa-red-fill: #c42b2b;
    --ee-aa-blue-fill: #2563eb;
    --ee-aa-on-fill: #ffffff;
}

/* Portal dark mode: the faint text bands of the project glass sit below 4.5:1 on the
   opaque portal cards (#1c1c1e / #2c2c2e), so the portal lifts them. */
html[data-ee-mode="dark"] {
    /* AA text/fill colours of the portal (>= 4.5:1 on #1c1c1e and #2c2c2e) */
    --ee-aa-green: #5fd07a;
    --ee-aa-red: #ff8f87;
    --ee-aa-blue: #6cb4ff;
    --ee-aa-purple: #cf9bf5;
    --ee-aa-orange: #ffb44d;
    --ee-aa-warn: #ffb44d;
    --ee-aa-muted: #a1a1a6;
    --ee-aa-fill: #1f6f43;
    --ee-aa-red-fill: #c42b2b;
    --ee-aa-blue-fill: #2563eb;
    --ee-aa-on-fill: #ffffff;
    --ee-text-muted: rgba(255, 255, 255, 0.6);
    --ee-text-dim: rgba(255, 255, 255, 0.6);
    --ee-text-faint: rgba(255, 255, 255, 0.58);
    --ee-text-faint-2: rgba(255, 255, 255, 0.58);
}