/* Vortex Manager theme: the one source of colour tokens for the whole app, after the dashboard's glass design.
   Components read the --app-* tokens; Bootstrap, Syncfusion and Slim Select variables are mapped onto them here.
   Glass component rules live in app-components.css; charts read the same tokens (Dashboard/Charts/ChartTheme.ts). */

:root {
    --font-family-roboto: Roboto, system-ui, -apple-system, "Segoe UI","Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
    --es-font-family: var(--font-family-roboto);

    --app-radius-frame: 8px;
    --app-radius-card: 4px;
    --app-blur: blur(14px) saturate(140%);
    /* Lighter over the moving map canvas. */
    --app-blur-map: blur(10px) saturate(140%);

    --vp-home-hero-name-background: linear-gradient(120deg, var(--app-accent-3), var(--app-accent-1));
    --vp-home-hero-name-color: transparent;
}

/* Light theme ------------------------------------------------------------------------------------------------- */

:root,
[data-bs-theme=light] {
    --app-bg:
        radial-gradient(1100px 560px at 8% -12%, rgba(74, 163, 223, .24), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgba(124, 200, 236, .28), transparent 55%),
        linear-gradient(160deg, #eef3f9 0%, #dce6f1 100%);
    --app-bg-base: #e6eef7;
    --app-frame-bg: rgba(255, 255, 255, .34);
    --app-frame-border: rgba(255, 255, 255, .95);
    --app-frame-shadow: 0 24px 60px rgba(30, 60, 100, .16), inset 0 1px 0 rgba(255, 255, 255, .9);

    --app-text: #1e2a3a;
    --app-muted: #5b6b7f;
    --app-card-bg: rgba(255, 255, 255, .72);
    --app-card-border: rgba(255, 255, 255, .95);
    --app-card-shadow: 0 10px 28px rgba(30, 60, 100, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
    --app-card-highlight: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 42%);
    --app-overlay-bg: rgba(255, 255, 255, .62);
    --app-grid-line: rgba(30, 60, 100, .10);
    --app-track: rgba(29, 79, 143, .09);
    --app-glow: rgba(47, 111, 181, .28);
    --app-tooltip-bg: rgba(255, 255, 255, .94);

    --app-accent-1: #2aa7de;
    --app-accent-2: #58c4e8;
    --app-accent-3: #2f6fb5;
    --app-accent-4: #1d4f8f;
    --app-accent-5: #8fd3f0;
    --app-accent-rgb: 42, 167, 222;

    --app-topbar-bg: linear-gradient(90deg, #1e3a5f 0%, #24527f 100%);
    --app-topbar-text: rgba(255, 255, 255, .82);
    --app-tab-active-bg: rgba(255, 255, 255, .94);
    --app-tab-active-text: #1e3a5f;
    --app-pill-bg: rgba(255, 255, 255, .10);
    --app-pill-border: rgba(255, 255, 255, .30);
    --app-pill-active-bg: #4cc3ea;
    --app-pill-active-text: #0b2540;
    --app-month-pill-bg: rgba(29, 79, 143, .06);
    --app-month-pill-border: rgba(29, 79, 143, .16);

    /* Opaque surfaces for popups, inputs in focus and Syncfusion content. */
    --app-surface: #ffffff;
    --app-surface-2: #f2f6fb;
    --app-popover-bg: #ffffff;
    --app-popover-shadow: 0 16px 40px rgba(30, 60, 100, .18);
    --app-border: rgba(29, 79, 143, .16);
    --app-input-bg: rgba(255, 255, 255, .78);
    --app-hover-bg: rgba(42, 167, 222, .09);
    --app-selected-bg: rgba(42, 167, 222, .16);
    --app-focus-ring: 0 0 0 .2rem rgba(42, 167, 222, .28);
    /* Gradients dark enough for white text (4.5:1); the glow carries the cyan. */
    --app-button-bg: linear-gradient(135deg, #1a78b8 0%, #2a5c9c 100%);
    --app-button-bg-hover: linear-gradient(135deg, #1f86c8 0%, #2f6fb5 100%);
    --app-button-text: #ffffff;
    --app-topbar-title: #ffffff;
    /* Panels floating over the map need more opacity than cards on the plain background. */
    --app-map-panel-bg: rgba(255, 255, 255, .82);

    /* Shell: header, side navigation and footer. */
    --app-shell-bg: rgba(255, 255, 255, .66);
    --app-shell-border: rgba(29, 79, 143, .12);
    --app-shell-shadow: 0 8px 30px rgba(30, 60, 100, .12);
    --app-nav-text: #4a5b70;
    --app-nav-active-bg: linear-gradient(90deg, #1a78b8 0%, #2f6fb5 100%);
    --app-nav-active-text: #ffffff;

    --scrollbar-thumb-color: rgba(47, 111, 181, .45);
    --scrollbar-thumb-hover-color: #2f6fb5;
    --scrollbar-track-color: transparent;

    /* Bootstrap. The body background stays opaque: Bootstrap paints focused inputs, popups and map popup tips with it. */
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #1e2a3a;
    --bs-body-color-rgb: 30, 42, 58;
    --bs-emphasis-color: #0f1b2a;
    --bs-emphasis-color-rgb: 15, 27, 42;
    --bs-secondary-color: #5b6b7f;
    --bs-secondary-color-rgb: 91, 107, 127;
    --bs-secondary-bg: #eef3f9;
    --bs-secondary-bg-rgb: 238, 243, 249;
    --bs-tertiary-bg: #f5f8fc;
    --bs-tertiary-bg-rgb: 245, 248, 252;
    --bs-border-color: rgba(29, 79, 143, .16);
    --bs-border-color-translucent: rgba(29, 79, 143, .12);
    --bs-primary: #2aa7de;
    --bs-primary-rgb: 42, 167, 222;
    --bs-primary-text-emphasis: #155f82;
    --bs-primary-bg-subtle: #dff2fb;
    --bs-primary-border-subtle: #a9dcf1;
    --bs-link-color: #1f7fbf;
    --bs-link-color-rgb: 31, 127, 191;
    --bs-link-hover-color: #1d4f8f;
    --bs-link-hover-color-rgb: 29, 79, 143;
    --bs-focus-ring-color: rgba(42, 167, 222, .28);
    --bs-body-font-family: var(--es-font-family);
    --bs-font-sans-serif: var(--es-font-family);
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: 1rem;

    /* Slim Select */
    --ss-primary-color: var(--app-accent-1);
    --ss-bg-color: var(--app-popover-bg);
    --ss-font-color: var(--app-text);
    --ss-font-placeholder-color: var(--app-muted);
    --ss-disabled-color: var(--bs-secondary-bg);
    --ss-border-color: var(--app-border);
    --ss-highlight-color: rgba(var(--app-accent-rgb), .22);
    --ss-focus-color: var(--app-accent-1);
    --ss-border-radius: var(--bs-border-radius);
}

/* Dark theme -------------------------------------------------------------------------------------------------- */

[data-bs-theme=dark] {
    --app-bg:
        radial-gradient(1100px 600px at 8% -12%, rgba(41, 168, 224, .20), transparent 60%),
        radial-gradient(900px 520px at 100% 8%, rgba(31, 111, 209, .20), transparent 55%),
        linear-gradient(160deg, #07111f 0%, #0b1e33 100%);
    --app-bg-base: #091729;
    --app-frame-bg: rgba(8, 22, 40, .50);
    --app-frame-border: rgba(94, 200, 255, .34);
    --app-frame-shadow: 0 0 0 1px rgba(56, 214, 245, .06), 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 48px rgba(56, 214, 245, .05);

    --app-text: #e6f1ff;
    --app-muted: #8fb3cf;
    --app-card-bg: rgba(16, 36, 58, .55);
    --app-card-border: rgba(94, 200, 255, .18);
    --app-card-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(148, 220, 255, .10);
    --app-card-highlight: linear-gradient(180deg, rgba(120, 200, 255, .08), rgba(120, 200, 255, 0) 45%);
    --app-overlay-bg: rgba(8, 24, 42, .62);
    --app-grid-line: rgba(143, 179, 207, .14);
    --app-track: rgba(94, 200, 255, .09);
    --app-glow: rgba(56, 214, 245, .45);
    --app-tooltip-bg: rgba(10, 28, 48, .92);

    --app-accent-1: #38d6f5;
    --app-accent-2: #29a8e0;
    --app-accent-3: #1f6fd1;
    --app-accent-4: #1b4f9c;
    --app-accent-5: #5ee0e0;
    --app-accent-rgb: 56, 214, 245;

    --app-topbar-bg: linear-gradient(90deg, rgba(14, 34, 58, .92) 0%, rgba(20, 52, 86, .92) 100%);
    --app-topbar-text: #9cc3e0;
    --app-tab-active-bg: linear-gradient(180deg, #1f6fd1 0%, #1b4f9c 100%);
    --app-tab-active-text: #fff;
    --app-pill-bg: rgba(56, 214, 245, .05);
    --app-pill-border: rgba(56, 214, 245, .34);
    --app-pill-active-bg: #38d6f5;
    --app-pill-active-text: #06223a;
    --app-month-pill-bg: rgba(56, 214, 245, .04);
    --app-month-pill-border: rgba(56, 214, 245, .22);

    --app-surface: #0e2135;
    --app-surface-2: #12293f;
    --app-popover-bg: #10263b;
    --app-popover-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(56, 214, 245, .08);
    --app-border: rgba(94, 200, 255, .20);
    --app-input-bg: rgba(6, 20, 36, .55);
    --app-hover-bg: rgba(56, 214, 245, .08);
    --app-selected-bg: rgba(56, 214, 245, .16);
    --app-focus-ring: 0 0 0 .2rem rgba(56, 214, 245, .32);
    --app-button-bg: linear-gradient(135deg, #1a78b8 0%, #1f5fc0 100%);
    --app-button-bg-hover: linear-gradient(135deg, #1f8ad0 0%, #2a6fd6 100%);
    --app-button-text: #ffffff;
    --app-topbar-title: #e6f1ff;
    --app-map-panel-bg: rgba(9, 24, 42, .80);

    --app-shell-bg: rgba(8, 22, 40, .74);
    --app-shell-border: rgba(94, 200, 255, .14);
    --app-shell-shadow: 0 10px 34px rgba(0, 0, 0, .45);
    --app-nav-text: #9cc3e0;
    --app-nav-active-bg: linear-gradient(90deg, #1f6fd1 0%, #1b4f9c 100%);
    --app-nav-active-text: #ffffff;

    --scrollbar-thumb-color: rgba(56, 214, 245, .35);
    --scrollbar-thumb-hover-color: #38d6f5;
    --scrollbar-track-color: transparent;

    --bs-body-bg: #0e2135;
    --bs-body-bg-rgb: 14, 33, 53;
    --bs-body-color: #e6f1ff;
    --bs-body-color-rgb: 230, 241, 255;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #8fb3cf;
    --bs-secondary-color-rgb: 143, 179, 207;
    --bs-secondary-bg: #12293f;
    --bs-secondary-bg-rgb: 18, 41, 63;
    --bs-tertiary-bg: #0b1c2e;
    --bs-tertiary-bg-rgb: 11, 28, 46;
    --bs-border-color: rgba(94, 200, 255, .20);
    --bs-border-color-translucent: rgba(94, 200, 255, .14);
    --bs-primary: #38d6f5;
    --bs-primary-rgb: 56, 214, 245;
    --bs-primary-text-emphasis: #8ee6f8;
    --bs-primary-bg-subtle: rgba(56, 214, 245, .12);
    --bs-primary-border-subtle: rgba(56, 214, 245, .35);
    --bs-link-color: #5fd8f5;
    --bs-link-color-rgb: 95, 216, 245;
    --bs-link-hover-color: #9be6f8;
    --bs-link-hover-color-rgb: 155, 230, 248;
    --bs-focus-ring-color: rgba(56, 214, 245, .32);
}

body {
    background: var(--app-bg) var(--app-bg-base) fixed;
    color: var(--app-text);
    font-family: var(--es-font-family);
}

/* Syncfusion ------------------------------------------------------------------------------------------------------
   Light overrides the theme's :root block (html[...] is more specific); dark overrides its .e-dark-mode block on body. */

html[data-bs-theme=light],
body.e-dark-mode {
    --color-sf-content-bg-color: var(--app-surface);
    --color-sf-content-bg-color-alt1: var(--app-surface-2);
    --color-sf-content-bg-color-alt2: var(--app-surface-2);
    --color-sf-content-bg-color-hover: var(--app-hover-bg);
    --color-sf-content-bg-color-pressed: var(--app-selected-bg);
    --color-sf-content-bg-color-focus: var(--app-hover-bg);
    --color-sf-content-bg-color-selected: var(--app-accent-3);
    --color-sf-content-text-color: var(--app-text);
    --color-sf-content-text-color-alt1: var(--app-muted);
    --color-sf-placeholder-text-color: var(--app-muted);
    --color-sf-icon-color: var(--app-muted);
    --color-sf-border: var(--app-border);
    --color-sf-border-light: var(--app-border);
    --color-sf-border-hover: rgba(var(--app-accent-rgb), .45);
    --color-sf-border-focus: var(--app-accent-1);
    --color-sf-primary: var(--app-accent-3);
    --color-sf-primary-light: var(--app-accent-2);
    --color-sf-primary-text-color: #ffffff;
    --color-sf-primary-bg-color-hover: var(--app-accent-2);
    --color-sf-primary-bg-color-pressed: var(--app-accent-4);
    --color-sf-primary-bg-color-focus: var(--app-accent-3);
    --color-sf-flyout-bg-color: var(--app-popover-bg);
    --color-sf-flyout-bg-color-hover: var(--app-hover-bg);
    --color-sf-flyout-bg-color-pressed: var(--app-selected-bg);
    --color-sf-flyout-bg-color-focus: var(--app-hover-bg);
    --color-sf-flyout-border: var(--app-border);
    --color-sf-table-bg-color-hover: var(--app-hover-bg);
    --color-sf-table-bg-color-selected: var(--app-selected-bg);
    --color-sf-tooltip-bg-color: var(--app-tooltip-bg);
    --color-sf-tooltip-text-color: var(--app-text);
    --color-sf-tooltip-border: var(--app-border);
}

/* Side navigation --------------------------------------------------------------------------------------------- */

.app-side-nav .nav-link {
    color: var(--app-nav-text);
}

.app-side-nav .menu-item:hover .menu-btn,
.app-side-nav .menu-item.menu-open .menu-btn {
    background: var(--app-hover-bg);
    color: var(--app-text);
}

.app-side-nav .submenu-btn {
    border-inline-start: 1px solid var(--app-border);
}

.app-side-nav .submenu-btn.active,
.app-side-nav .submenu-btn:hover {
    border-inline-start: 2px solid var(--app-accent-1);
    background: var(--app-hover-bg);
    color: var(--app-text);
}

.app-side-nav .submenu-btn.active {
    color: var(--app-accent-1);
}

.app-side-nav .menu-item.active .menu-btn {
    background: var(--app-nav-active-bg);
    color: var(--app-nav-active-text);
    box-shadow: 0 0 18px var(--app-glow);
}

/* Bootstrap --------------------------------------------------------------------------------------------------- */

.form-check-input[type=checkbox]:indeterminate {
    background-color: transparent;
    border-color: var(--app-accent-1);
    background-position: center center;
}

.form-switch .form-check-input {
    cursor: pointer;
}

/* ------------------------------------------------------------------------------------------------------------- */

.fc-popup-window {
    box-shadow: var(--app-popover-shadow) !important;
}

/* Scrollbars: WebKit styling, and scrollbar-color only where WebKit's is unsupported (it would disable it). */

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
}

/* Where a horizontal and a vertical scrollbar meet (default: a white square). */
::-webkit-scrollbar-corner {
    background-color: transparent;
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
    }
}

/* mapboxgl ---------------------------------------------------------------------------------------------------- */

a.mapboxgl-ctrl-logo {
    display: none;
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    display: none;
}

.mapboxgl-popup-content {
    padding: 0px;
}

.mapboxgl-popup-close-button:hover {
    background-color: rgba(var(--bs-danger-rgb), .9);
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: var(--app-popover-bg);
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: var(--app-popover-bg);
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: var(--app-popover-bg);
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: var(--app-popover-bg);
}

#nprogress .bar {
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--app-accent-3), var(--app-accent-1));
    box-shadow: 0 0 12px var(--app-glow);
}

.highlight-foreground {
    background: var(--vp-home-hero-name-background);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--vp-home-hero-name-color);
}

/* Slim Select 2.0 --------------------------------------------------------------------------------------------- */

.ss-content .ss-list .ss-option:hover {
    color: var(--app-text);
    background-color: var(--app-hover-bg);
}

/* Bold Reports viewer (third-party styles with literal colours; only these patches follow the theme) ----------- */

[data-bs-theme=dark] .e-reportviewer-viewer .e-toolbar {
    background: var(--app-surface-2);
}

[data-bs-theme=dark] .e-viewer-icons {
    color: var(--app-muted) !important;
}

.e-reportviewer-viewerblock {
    background-color: inherit !important;
    color: inherit !important;
}

.e-reportviewer-viewer .e-toolbar-item .e-current-page-box {
    background: none !important;
}

.e-reportviewer-viewer .e-input-group.e-control-wrapper.e-current-page-box:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
    border: 1px solid var(--color-sf-border);
}

.e-reportviewer-viewer .e-native-toolbar div[id$="labeltotalpageno"], .e-reportviewer-viewer .e-classic-toolbar div[id$="labeltotalpageno"] {
    color: var(--color-sf-content-text-color) !important;
}

.e-reportviewer-viewerblockcellcontent {
    color: inherit !important;
}

[data-bs-theme=dark] .e-reportviewer-nativepropertiesheader, .e-rv-nativeexportsetup, .e-rv-nativeborder {
    border-color: var(--app-border) !important;
}

[data-bs-theme=dark] .e-reportviewer-viewer .e-rv-native-rightToolbar {
    border: 1px solid var(--app-border);
    background: var(--app-surface) !important;
}

au-dialog-overlay {
    background-color: var(--app-overlay-bg);
}