/* Design tokens for the whole app. Dark is the default; the light theme only swaps the
   values, so no component needs a second set of rules.
   Loaded first on every page, before any component stylesheet. */

:root {
    color-scheme: dark;

    /* Page canvas */
    --bg-base: #111111;
    --bg-from: #000000;
    --bg-to: #222222;
    --glow-1: rgba(255, 255, 255, 0.18);
    --glow-1-mid: rgba(255, 255, 255, 0.059);
    --glow-2: rgba(100, 100, 100, 0.12);
    --glow-2-mid: rgba(100, 100, 100, 0.04);
    --grid-line: rgba(255, 255, 255, 0.10);

    /* Surfaces */
    --surface: rgba(30, 30, 30, 0.95);
    --surface-solid: #1a1a1a;
    --surface-glass: rgba(10, 10, 10, 0.72);
    --surface-panel-from: rgba(30, 30, 32, 0.98);
    --surface-panel-to: rgba(13, 13, 14, 0.98);
    --surface-subtle: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --surface-active: rgba(255, 255, 255, 0.12);
    --sheen: rgba(255, 255, 255, 0.06);
    --scrim: rgba(0, 0, 0, 0.55);
    --surface-input: #2a2a2a;
    --text-glow: rgba(255, 255, 255, 0.2);

    /* Lines */
    --border: rgba(255, 255, 255, 0.08);
    --border-soft: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.22);
    --focus-ring: rgba(255, 255, 255, 0.55);

    /* Text */
    --text: #ffffff;
    --text-soft: #d7d7d7;
    --text-muted: #aaaaaa;
    --text-dim: #7d7d7d;
    --text-faint: #5f5f5f;
    --on-accent: #06141f;
    --on-invert: #000000;

    /* Accent */
    --accent: #6fc3ff;
    --accent-line: rgba(111, 195, 255, 0.55);
    --accent-border: rgba(111, 195, 255, 0.35);
    --accent-bg: rgba(111, 195, 255, 0.10);
    --accent-glow: rgba(111, 195, 255, 0.25);
    --accent-deep: #2b6cb0;

    /* Primary button: inverted against the page on purpose */
    --btn-bg: #ffffff;
    --btn-bg-hover: #dddddd;
    --btn-fg: #000000;

    /* Depth */
    --shadow-soft: rgba(0, 0, 0, 0.35);
    --shadow: rgba(0, 0, 0, 0.45);
    --shadow-strong: rgba(0, 0, 0, 0.6);

    /* Status */
    --positive: #22c816;
    --positive-bg: rgba(34, 200, 22, 0.15);
    --positive-border: rgba(34, 200, 22, 0.4);
    --negative: #c81616;
    --danger: #ff6b60;
    --danger-hover: #ff6a61;
    --danger-bg: rgba(255, 76, 66, 0.16);
    --danger-border: rgba(255, 76, 66, 0.4);
    --danger-muted: #5a2b2b;
    --on-danger: #ffffff;
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg-base: #eef1f5;
    --bg-from: #ffffff;
    --bg-to: #dde3ea;
    --glow-1: rgba(111, 195, 255, 0.22);
    --glow-1-mid: rgba(111, 195, 255, 0.07);
    --glow-2: rgba(140, 150, 165, 0.16);
    --glow-2-mid: rgba(140, 150, 165, 0.05);
    --grid-line: rgba(15, 23, 42, 0.13);

    --surface: rgba(255, 255, 255, 0.96);
    --surface-solid: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.82);
    --surface-panel-from: rgba(255, 255, 255, 0.99);
    --surface-panel-to: rgba(240, 243, 248, 0.99);
    --surface-subtle: rgba(15, 23, 42, 0.035);
    --surface-hover: rgba(15, 23, 42, 0.07);
    --surface-active: rgba(15, 23, 42, 0.11);
    --sheen: rgba(15, 23, 42, 0.04);
    --scrim: rgba(15, 23, 42, 0.35);
    --surface-input: #ffffff;
    --text-glow: rgba(15, 23, 42, 0.16);

    --border: rgba(15, 23, 42, 0.12);
    --border-soft: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.28);
    --focus-ring: rgba(15, 23, 42, 0.55);

    --text: #101722;
    --text-soft: #2b3646;
    --text-muted: #5b6775;
    --text-dim: #78838f;
    --text-faint: #a3acb7;
    --on-accent: #ffffff;
    --on-invert: #ffffff;

    --accent: #0a6fbd;
    --accent-line: rgba(10, 111, 189, 0.55);
    --accent-border: rgba(10, 111, 189, 0.35);
    --accent-bg: rgba(10, 111, 189, 0.09);
    --accent-glow: rgba(10, 111, 189, 0.20);
    --accent-deep: #084d84;

    --btn-bg: #101722;
    --btn-bg-hover: #2b3646;
    --btn-fg: #ffffff;

    --shadow-soft: rgba(15, 23, 42, 0.08);
    --shadow: rgba(15, 23, 42, 0.12);
    --shadow-strong: rgba(15, 23, 42, 0.18);

    --positive: #15803d;
    --positive-bg: rgba(21, 128, 61, 0.12);
    --positive-border: rgba(21, 128, 61, 0.35);
    --negative: #b42318;
    --danger: #c0362c;
    --danger-hover: #9d2b22;
    --danger-bg: rgba(192, 54, 44, 0.12);
    --danger-border: rgba(192, 54, 44, 0.42);
    --danger-muted: #e3c6c3;
    --on-danger: #ffffff;
}

/* Repainting every surface at once is distracting, so only the canvas cross-fades. */
html {
    transition: background-color 0.25s ease;
}

/* DevExtreme draws its grids with square corners, which cut through the rounded panels they
   sit in. Clipping the widget rounds the header, the rows and the summary footer in one go.
   Its dropdowns and popups are rendered on the body, so they are not affected. */
.dx-datagrid {
    border-radius: 12px;
    overflow: hidden;
}

/* Corner switch injected by Theme.js on pages that have no burger menu. */
.theme-floating-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    top: max(18px, calc(env(safe-area-inset-top) + 10px));
    right: max(18px, calc(env(safe-area-inset-right) + 10px));
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 10px 26px var(--shadow-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.theme-floating-toggle svg {
    display: block;
    width: 19px;
    height: 19px;
}

.theme-floating-toggle:hover {
    color: var(--text);
    border-color: var(--accent-border);
    transform: translateY(-1px);
}

.theme-floating-toggle:active {
    transform: translateY(0) scale(0.94);
}

.theme-floating-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .theme-floating-toggle {
        width: 38px;
        height: 38px;
        top: max(12px, calc(env(safe-area-inset-top) + 8px));
        right: max(12px, calc(env(safe-area-inset-right) + 8px));
    }

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

@media (prefers-reduced-motion: reduce) {
    html {
        transition: none;
    }

    .theme-floating-toggle {
        transition: none;
    }
}