/*
 * Portal theme tokens: day/night palettes, per-service accent mapping and the mode toggle.
 * Service colors (--c-appointment, --c-report, --c-peygiri, --c-login, --c-inbox and their variants)
 * come from appsettings.json via Views/Shared/_PortalTheme.cshtml.
 * This file only defines variables and the toggle, so it is safe next to Bootstrap layouts.
 */

/* ---------- Night (default) ---------- */
:root {
    color-scheme: dark;
    --bg: #071426;
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.70);
    --text-faint: rgba(255, 255, 255, 0.45);
    --line: rgba(255, 255, 255, 0.12);
    --surface-top: rgba(255, 255, 255, 0.11);
    --surface-bottom: rgba(255, 255, 255, 0.04);
    --surface-border: rgba(255, 255, 255, 0.14);
    --surface-shine: rgba(255, 255, 255, 0.10);
    --panel: rgba(7, 20, 38, 0.55);
    --panel-strong: rgba(7, 20, 38, 0.88);
    --chip: rgba(255, 255, 255, 0.06);
    --chip-hover: rgba(255, 255, 255, 0.10);
    --field-bg: rgba(255, 255, 255, 0.07);
    --field-bg-focus: rgba(255, 255, 255, 0.10);
    --field-border: rgba(255, 255, 255, 0.18);
    --option-bg: #0b1b30;
    --option-text: #ffffff;
    --shade: radial-gradient(ellipse at 50% 35%, rgba(4, 16, 34, 0.35) 0%, rgba(4, 12, 26, 0.85) 70%, rgba(2, 8, 18, 0.96) 100%), linear-gradient(180deg, rgba(3, 40, 64, 0.45) 0%, rgba(4, 14, 30, 0.55) 100%);
    --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.35);
    --shadow-raised: 0 22px 48px rgba(0, 0, 0, 0.38);
    --logo-shadow: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
    --logo-plate: rgba(255, 255, 255, 0.06); /* behind center logos (usually white artwork) */
    --hero-glow: rgba(7, 170, 229, 0.22);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffffb3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --picker-icon-filter: invert(1);
    --footer-text: rgba(255, 255, 255, 0.50);
    --footer-link: rgba(255, 255, 255, 0.75);
    --danger: #f87171;
    --danger-ink: #fecaca;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --danger-border: rgba(248, 113, 113, 0.40);
    --warning: #fbbf24;
    --warning-ink: #fde68a;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --warning-border: rgba(251, 191, 36, 0.40);
    --success: #34d399;
    --success-ink: #a7f3d0;
    --success-bg: rgba(52, 211, 153, 0.12);
    --success-border: rgba(52, 211, 153, 0.40);
    --info-ink: #bae6fd;
    --info-bg: rgba(56, 189, 248, 0.10);
    --info-border: rgba(56, 189, 248, 0.35);
    --on-warning: #2b1d02;
    --on-success: #04130c;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Day ---------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #eef3f9;
    --text: #0f172a;
    --text-muted: rgba(15, 23, 42, 0.68);
    --text-faint: rgba(15, 23, 42, 0.42);
    --line: rgba(15, 23, 42, 0.10);
    --surface-top: rgba(255, 255, 255, 0.92);
    --surface-bottom: rgba(255, 255, 255, 0.78);
    --surface-border: rgba(15, 23, 42, 0.08);
    --surface-shine: rgba(255, 255, 255, 0.70);
    --panel: rgba(241, 245, 249, 0.90);
    --panel-strong: #ffffff;
    --chip: rgba(15, 23, 42, 0.05);
    --chip-hover: rgba(15, 23, 42, 0.09);
    --field-bg: rgba(255, 255, 255, 0.90);
    --field-bg-focus: #ffffff;
    --field-border: rgba(15, 23, 42, 0.16);
    --option-bg: #ffffff;
    --option-text: #0f172a;
    --shade: radial-gradient(ellipse at 50% 30%, rgba(248, 251, 255, 0.62) 0%, rgba(236, 242, 249, 0.86) 65%, rgba(226, 234, 244, 0.94) 100%);
    --shadow-card: 0 18px 44px rgba(15, 23, 42, 0.12);
    --shadow-raised: 0 22px 48px rgba(15, 23, 42, 0.18);
    --logo-shadow: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.12));
    --logo-plate: rgba(15, 23, 42, 0.62);
    --hero-glow: rgba(56, 189, 248, 0.16);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172aa6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --picker-icon-filter: none;
    --footer-text: rgba(15, 23, 42, 0.55);
    --footer-link: rgba(15, 23, 42, 0.75);
    --danger: #dc2626;
    --danger-ink: #b91c1c;
    --danger-bg: rgba(220, 38, 38, 0.08);
    --danger-border: rgba(220, 38, 38, 0.35);
    --warning: #f59e0b;
    --warning-ink: #92400e;
    --warning-bg: rgba(245, 158, 11, 0.12);
    --warning-border: rgba(245, 158, 11, 0.40);
    --success: #059669;
    --on-success: #ffffff;
    --success-ink: #047857;
    --success-bg: rgba(5, 150, 105, 0.10);
    --success-border: rgba(5, 150, 105, 0.35);
    --info-ink: #075985;
    --info-bg: rgba(14, 165, 233, 0.10);
    --info-border: rgba(14, 165, 233, 0.35);
}

/* ---------- Service accent of a page (or part of a page) ---------- */
[data-accent="appointment"] {
    --accent: var(--c-appointment);
    --accent-rgb: var(--c-appointment-rgb);
    --accent-strong: var(--c-appointment-strong);
    --on-accent: var(--c-appointment-on);
    --accent-ink: var(--c-appointment-ink);
}

[data-accent="report"] {
    --accent: var(--c-report);
    --accent-rgb: var(--c-report-rgb);
    --accent-strong: var(--c-report-strong);
    --on-accent: var(--c-report-on);
    --accent-ink: var(--c-report-ink);
}

[data-accent="peygiri"] {
    --accent: var(--c-peygiri);
    --accent-rgb: var(--c-peygiri-rgb);
    --accent-strong: var(--c-peygiri-strong);
    --on-accent: var(--c-peygiri-on);
    --accent-ink: var(--c-peygiri-ink);
}

[data-accent="login"] {
    --accent: var(--c-login);
    --accent-rgb: var(--c-login-rgb);
    --accent-strong: var(--c-login-strong);
    --on-accent: var(--c-login-on);
    --accent-ink: var(--c-login-ink);
}

[data-accent="inbox"] {
    --accent: var(--c-inbox);
    --accent-rgb: var(--c-inbox-rgb);
    --accent-strong: var(--c-inbox-strong);
    --on-accent: var(--c-inbox-on);
    --accent-ink: var(--c-inbox-ink);
}

/* ---------- Day/night toggle (added by /js/portal.js) ---------- */
.theme-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--surface-border);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--surface-top) 0%, var(--surface-bottom) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.4s var(--ease), background-color 0.3s ease;
}

    .theme-toggle.is-hosted {
        position: absolute;
    }

    .theme-toggle:hover {
        transform: rotate(-18deg) scale(1.05);
    }

    .theme-toggle:focus-visible {
        outline: 3px solid var(--accent, #38bdf8);
        outline-offset: 3px;
    }

    .theme-toggle svg {
        width: 20px;
        height: 20px;
    }

@media (max-width: 576px) {
    .theme-toggle {
        top: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}