/**
 * Prism horizon — ultra-modern dark glass, iridescent hero, cyan–fuchsia spectrum.
 */

:root {
    --bg: #09090b;
    --bg-alt: #0f0f12;
    --bg-shine: #18181b;
    --text: #fafafa;
    --text-muted: #d1d5db;
    --primary: #22d3ee;
    --primary-dark: #06b6d4;
    --secondary: #e879f9;
    /* Cyan-tinted surface so “accent” panels aren’t flat charcoal */
    --accent: #1a3d47;
    --card: rgba(36, 40, 48, 0.82);
    --card-border: rgba(34, 211, 238, 0.22);
    --glass-highlight: rgba(34, 211, 238, 0.09);
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 48px rgba(0, 0, 0, 0.45);
    --radius: 16px;
    --header-bg: rgba(9, 9, 11, 0.75);
    --focus: #22d3ee;
    --success: #4ade80;
    --danger: #fb7185;
    --employee-accent: #a78bfa;
    --border-subtle: rgba(255, 255, 255, 0.14);

    /* index.php — horizon glow + prismatic pastel headline */
    --md-landing-hero-bg:
        radial-gradient(ellipse 120% 90% at 50% -20%, rgba(34, 211, 238, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 0% 50%, rgba(232, 121, 249, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 85% 65% at 100% 40%, rgba(167, 139, 250, 0.22) 0%, transparent 50%),
        linear-gradient(165deg, #0c0c0f 0%, #09090b 45%, #0a0a12 100%);
    --md-landing-hero-overlay: radial-gradient(circle at 50% 45%, rgba(244, 244, 245, 0.04) 0%, transparent 50%);
    --md-landing-eyebrow-color: #67e8f9;
    --md-landing-eyebrow-bg: rgba(24, 24, 27, 0.65);
    --md-landing-eyebrow-border: rgba(34, 211, 238, 0.35);
    --md-landing-eyebrow-shadow: 0 0 24px rgba(34, 211, 238, 0.15);
    --md-landing-hero-heading-color: #fafafa;
    --md-landing-headline-gradient: linear-gradient(105deg, #22d3ee 0%, #a855f7 42%, #ec4899 100%);
    --md-landing-site-name-color: #c4c4cc;
    --md-front-banner-bg:
        radial-gradient(100% 70% at 50% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 50%),
        linear-gradient(165deg, #0f0f12 0%, #09090b 100%);
    --md-front-banner-overlay: radial-gradient(circle at 80% 30%, rgba(232, 121, 249, 0.12) 0%, transparent 45%);
    --md-front-banner-title-color: #e879f9;
    --md-front-banner-text-color: #d4d4d8;
    --md-front-banner-ok-bg: linear-gradient(180deg, #22d3ee 0%, #06b6d4 48%, #0891b2 100%);
    --md-front-banner-ok-shadow: 0 4px 28px rgba(34, 211, 238, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    --md-front-banner-ok-hover-bg: linear-gradient(180deg, #67e8f9 0%, #22d3ee 48%, #06b6d4 100%);
    --md-landing-loc-card-strip: linear-gradient(90deg, #22d3ee, #a78bfa, #e879f9);

    /* index.php — alternating “light” full-width stack band: iridescent glass */
    --md-landing-stack-light-band-bg:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--bg) 58%, rgba(34, 211, 238, 0.12)) 0%,
            color-mix(in srgb, var(--bg) 45%, rgba(232, 121, 249, 0.09)) 46%,
            color-mix(in srgb, var(--bg-shine) 62%, rgba(34, 211, 238, 0.08)) 100%
        );
    --md-landing-stack-light-band-backdrop: blur(28px) saturate(1.25);
    --md-landing-stack-light-band-border-top: color-mix(in srgb, var(--card-border) 50%, var(--primary) 50%);
    --md-landing-stack-light-band-border-bottom: color-mix(in srgb, var(--card-border) 50%, var(--secondary) 40%);
    --md-landing-stack-light-inner-bg:
        linear-gradient(
            165deg,
            color-mix(in srgb, rgba(255, 255, 255, 0.14) 100%, var(--primary)) 0%,
            color-mix(in srgb, rgba(255, 255, 255, 0.05) 100%, var(--secondary)) 48%,
            color-mix(in srgb, rgba(9, 9, 11, 0.52) 100%, transparent) 100%
        );
    --md-landing-stack-light-inner-border: color-mix(in srgb, var(--card-border) 72%, var(--primary) 28%);
    --md-landing-stack-light-inner-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.14),
        0 24px 60px rgba(0, 0, 0, 0.48),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    --md-landing-stack-light-inner-backdrop: blur(24px) saturate(1.35);
    --md-landing-stack-light-icon-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary) 30%, var(--bg-shine)) 0%,
        color-mix(in srgb, var(--secondary) 16%, var(--card)) 100%
    );
    --md-landing-stack-light-icon-border: color-mix(in srgb, var(--primary) 45%, var(--card-border));

    /* index.php — side-by-side feature cards */
    --md-landing-feature-card-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--card) 84%, var(--bg-shine)) 0%,
        color-mix(in srgb, var(--card) 66%, color-mix(in srgb, var(--primary) 24%, var(--bg))) 100%
    );
    --md-landing-feature-card-backdrop: blur(18px) saturate(1.28);
}

/**
 * Employee UI — stronger glass + outline controls (was grey-on-grey).
 */
.btn-outline {
    background: color-mix(in srgb, var(--bg-alt) 50%, rgba(34, 211, 238, 0.12));
    border: 2px solid color-mix(in srgb, var(--primary) 45%, rgba(255, 255, 255, 0.28));
    color: var(--text);
    backdrop-filter: blur(12px);
}

.btn-outline:hover {
    background: color-mix(in srgb, var(--primary) 24%, rgba(255, 255, 255, 0.08));
    color: var(--text);
}

.md-general-settings__panel input[readonly],
.md-general-settings__panel textarea[readonly] {
    background: color-mix(in srgb, var(--card) 85%, var(--primary) 10%) !important;
    color: var(--text) !important;
    border: 1px solid var(--card-border) !important;
}

.md-general-settings-stack-options,
.md-general-settings-photo-slot {
    background: color-mix(in srgb, var(--card) 65%, rgba(34, 211, 238, 0.08));
    border-color: color-mix(in srgb, var(--card-border) 65%, var(--secondary) 35%);
}