/**
 * App-wide UI themes (default, glass, outline, ember, slate).
 * Tokens are consumed by styles.css via var(--app-*).
 * Theme class on document.documentElement: app-theme-{name}
 * (Login screen uses css/login-page.css — separate identity.)
 */

:root {
    /* Default — matches pre-theme map app */
    --app-bg-page: #1a1a1a;
    --app-bg-surface: #2d2d2d;
    --app-bg-surface-2: #262626;
    --app-bg-muted: #333333;
    --app-bg-hover: #3d3d3d;
    --app-bg-input: #2d2d2d;
    --app-bg-elevated: #2d2d2d;
    --app-border: #404040;
    --app-border-strong: #4a4a4a;
    --app-border-muted: #525252;
    --app-text-primary: #e5e5e5;
    --app-text-secondary: #a3a3a3;
    --app-text-muted: #737373;
    --app-text-inverse: #ffffff;
    --app-accent: #2563eb;
    --app-accent-hover: #1d4ed8;
    --app-accent-muted: rgba(37, 99, 235, 0.35);
    --app-focus-ring: rgba(37, 99, 235, 0.3);
    --app-navbar-bg: #1a1a1a;
    --app-navbar-shadow: rgba(0, 0, 0, 0.2);
    --app-shadow: rgba(0, 0, 0, 0.2);
    --app-shadow-lg: rgba(0, 0, 0, 0.35);
    --app-overlay-scrim: rgba(0, 0, 0, 0.5);
    --app-danger: #dc2626;
    --app-danger-hover: #b91c1c;
    --app-success: #22c55e;
    --app-map-placeholder: #2d2d2d;
    --app-scrollbar-thumb: #555;
    --app-scrollbar-track: #2d2d2d;
    --app-sidebar-gradient: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
    --app-modal-header-border: #404040;
    --app-button-secondary-bg: #333333;
    --app-button-secondary-hover: #404040;
    --app-link: #60a5fa;
    --app-bg-tool: #4b5563;
    --app-bg-panel-input: #2a2a2a;
    --app-border-soft: #444444;
    --app-leaflet-control-bg: #ffffff;
    --app-leaflet-control-text: #333333;
    --app-leaflet-control-border: #ccc;
    --app-glass-blur: 0px;
    --app-glass-saturate: 100%;
}

/* Explicit default class (same as :root) */
html.app-theme-default {
    --app-bg-page: #1a1a1a;
    --app-bg-surface: #2d2d2d;
    --app-bg-surface-2: #262626;
    --app-bg-muted: #333333;
    --app-bg-hover: #3d3d3d;
    --app-bg-input: #2d2d2d;
    --app-border: #404040;
    --app-border-strong: #4a4a4a;
    --app-text-primary: #e5e5e5;
    --app-text-secondary: #a3a3a3;
    --app-text-muted: #737373;
    --app-accent: #2563eb;
    --app-accent-hover: #1d4ed8;
    --app-accent-muted: rgba(37, 99, 235, 0.35);
    --app-focus-ring: rgba(37, 99, 235, 0.3);
    --app-navbar-bg: #1a1a1a;
    --app-link: #60a5fa;
}

/* Frosted glass — cyan accent (aligned with login-theme-glass) */
html.app-theme-glass {
    --app-bg-panel-input: rgba(30, 38, 44, 0.85);
    --app-bg-tool: rgba(71, 85, 105, 0.75);
    --app-border-soft: rgba(255, 255, 255, 0.12);
    --app-bg-page: #121820;
    --app-bg-surface: rgba(38, 38, 38, 0.55);
    --app-bg-surface-2: rgba(22, 28, 32, 0.65);
    --app-bg-muted: rgba(30, 38, 44, 0.72);
    --app-bg-hover: rgba(56, 189, 248, 0.12);
    --app-bg-input: rgba(20, 28, 32, 0.75);
    --app-border: rgba(255, 255, 255, 0.12);
    --app-border-strong: rgba(56, 189, 248, 0.35);
    --app-text-primary: #e5e5e5;
    --app-text-secondary: #94a3b8;
    --app-text-muted: #64748b;
    --app-accent: #0ea5e9;
    --app-accent-hover: #0284c7;
    --app-accent-muted: rgba(56, 189, 248, 0.35);
    --app-focus-ring: rgba(56, 189, 248, 0.35);
    --app-navbar-bg: rgba(18, 24, 32, 0.85);
    --app-navbar-shadow: rgba(0, 0, 0, 0.35);
    --app-shadow: rgba(0, 0, 0, 0.35);
    --app-sidebar-gradient: linear-gradient(165deg, rgba(22, 22, 22, 0.85) 0%, rgba(12, 18, 22, 0.92) 100%);
    --app-link: #38bdf8;
    --app-glass-blur: 12px;
    --app-glass-saturate: 120%;
}

/* Outline minimal */
html.app-theme-outline {
    --app-bg-panel-input: #0f0f0f;
    --app-bg-tool: #525252;
    --app-border-soft: #525252;
    --app-bg-page: #0a0a0a;
    --app-bg-surface: #0f0f0f;
    --app-bg-surface-2: #0f0f0f;
    --app-bg-muted: #141414;
    --app-bg-hover: #1a1a1a;
    --app-bg-input: #0f0f0f;
    --app-border: #525252;
    --app-border-strong: #737373;
    --app-text-primary: #e5e5e5;
    --app-text-secondary: #a3a3a3;
    --app-text-muted: #737373;
    --app-accent: #e5e5e5;
    --app-accent-hover: #d4d4d4;
    --app-accent-muted: rgba(255, 255, 255, 0.15);
    --app-focus-ring: rgba(115, 115, 115, 0.45);
    --app-navbar-bg: #0a0a0a;
    --app-sidebar-gradient: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
    --app-link: #a3a3a3;
    --app-modal-header-border: #525252;
    --app-button-secondary-bg: #0f0f0f;
    --app-button-secondary-hover: #1a1a1a;
}

/* Ember — warm industrial */
html.app-theme-ember {
    --app-bg-panel-input: #1f1712;
    --app-bg-tool: #78350f;
    --app-border-soft: rgba(180, 83, 9, 0.35);
    --app-bg-page: #120d0a;
    --app-bg-surface: #1f1712;
    --app-bg-surface-2: #292018;
    --app-bg-muted: #1a1410;
    --app-bg-hover: #3d2a1a;
    --app-bg-input: #1a1410;
    --app-border: rgba(180, 83, 9, 0.45);
    --app-border-strong: rgba(217, 119, 6, 0.5);
    --app-text-primary: #f5f0e8;
    --app-text-secondary: #d6b896;
    --app-text-muted: #a89078;
    --app-accent: #d97706;
    --app-accent-hover: #b45309;
    --app-accent-muted: rgba(217, 119, 6, 0.35);
    --app-focus-ring: rgba(217, 119, 6, 0.35);
    --app-navbar-bg: #1c1410;
    --app-navbar-shadow: rgba(0, 0, 0, 0.45);
    --app-sidebar-gradient: linear-gradient(180deg, #1c1410 0%, #120d0a 100%);
    --app-link: #fbbf24;
    --app-modal-header-border: rgba(180, 83, 9, 0.35);
}

/* Slate & cyan */
html.app-theme-slate {
    --app-bg-panel-input: #1e293b;
    --app-bg-tool: #475569;
    --app-border-soft: #475569;
    --app-bg-page: #020617;
    --app-bg-surface: #1e293b;
    --app-bg-surface-2: #0f172a;
    --app-bg-muted: #334155;
    --app-bg-hover: #334155;
    --app-bg-input: #0f172a;
    --app-border: #334155;
    --app-border-strong: #475569;
    --app-text-primary: #f1f5f9;
    --app-text-secondary: #94a3b8;
    --app-text-muted: #64748b;
    --app-accent: #0891b2;
    --app-accent-hover: #0e7490;
    --app-accent-muted: rgba(34, 211, 238, 0.3);
    --app-focus-ring: rgba(34, 211, 238, 0.35);
    --app-navbar-bg: #0f172a;
    --app-sidebar-gradient: linear-gradient(200deg, #0f172a 0%, #020617 100%);
    --app-link: #22d3ee;
    --app-modal-header-border: #334155;
}

/* Surfaces that support backdrop blur for glass theme */
html.app-theme-glass .navbar,
html.app-theme-glass #sidebar,
html.app-theme-glass .modal-content,
html.app-theme-glass .account-menu-dropdown {
    backdrop-filter: blur(var(--app-glass-blur)) saturate(var(--app-glass-saturate));
    -webkit-backdrop-filter: blur(var(--app-glass-blur)) saturate(var(--app-glass-saturate));
}

/* Outline: primary actions look like outlined buttons */
html.app-theme-outline .request-services-button:not(:hover),
html.app-theme-outline .profile-button-primary:not(:hover) {
    background: transparent !important;
    color: var(--app-text-primary) !important;
    border: 2px solid var(--app-text-primary) !important;
}

html.app-theme-outline .request-services-button:hover,
html.app-theme-outline .profile-button-primary:hover {
    background: var(--app-text-primary) !important;
    color: var(--app-bg-page) !important;
}

/* Leaflet controls — follow app text/background tokens */
html.app-theme-glass .leaflet-bar a,
html.app-theme-outline .leaflet-bar a,
html.app-theme-ember .leaflet-bar a,
html.app-theme-slate .leaflet-bar a {
    background-color: var(--app-bg-surface);
    color: var(--app-text-primary);
    border-color: var(--app-border);
}

html.app-theme-glass .leaflet-bar a:hover,
html.app-theme-outline .leaflet-bar a:hover,
html.app-theme-ember .leaflet-bar a:hover,
html.app-theme-slate .leaflet-bar a:hover {
    background-color: var(--app-bg-hover);
}

.leaflet-container {
    background: var(--app-map-placeholder);
}

.app-profile-hint {
    font-size: 0.75rem;
    color: var(--app-text-secondary);
    margin-top: 0.25rem;
}