/*
 * Spire theme for Radzen Blazor.
 *
 * Sits on top of Radzen's "standard" / "standard-dark" base themes and only
 * overrides CSS variables, plus a handful of rules where no variable exists.
 * Load it after <RadzenTheme /> and before site.css.
 *
 * This file exists twice, in Admin2 and in PortfolioManager2, so that neither
 * app depends on a shared project. Both copies must stay byte-identical;
 * SpireThemeSyncTests in Admin2.Tests fails when they drift.
 *
 * Choices: Spire green on navy ink, dark sidebar, 8px controls and 10px
 * surfaces, hairline borders with no card shadows, Inter, compact grids,
 * gains and losses as coloured text.
 */

/* ---------- Light (also the fallback when the base theme is unknown) ---------- */
:root {
    /* Type */
    --rz-text-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Neutrals, biased toward the navy ink. 50 is lightest in both modes. */
    --rz-base-50: #ffffff;
    --rz-base-100: #f5f6f3;
    --rz-base-200: #e2e5e9;
    --rz-base-300: #d3d8de;
    --rz-base-400: #b9c0c9;
    --rz-base-500: #96a0ad;
    --rz-base-600: #6f7a89;
    --rz-base-700: #5a6474;
    --rz-base-800: #1e2a3b;
    --rz-base-900: #0e1a2b;
    --rz-base: #d3d8de;
    --rz-base-light: #e2e5e9;

    /* Brand */
    --rz-primary: #0f7b55;
    --rz-primary-light: #1e9469;
    --rz-primary-lighter: rgba(15, 123, 85, 0.12);
    --rz-primary-dark: #0b6747;
    --rz-primary-darker: #095539;
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: #0b5e41;

    --rz-secondary: #4d6fd0;
    --rz-secondary-light: #6c89db;
    --rz-secondary-lighter: rgba(77, 111, 208, 0.14);
    --rz-secondary-dark: #3e5bb3;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: #3e5bb3;

    /* Status. Success and danger double as gain and loss. */
    --rz-success: #0f7b55;
    --rz-success-light: #1e9469;
    --rz-success-lighter: rgba(15, 123, 85, 0.14);
    --rz-success-dark: #0b6747;
    --rz-success-darker: #095539;
    --rz-on-success: #ffffff;
    --rz-on-success-lighter: #0b5e41;

    --rz-danger: #c2362b;
    --rz-danger-light: #d2584e;
    --rz-danger-lighter: rgba(194, 54, 43, 0.12);
    --rz-danger-dark: #a52c23;
    --rz-on-danger: #ffffff;
    --rz-on-danger-lighter: #c2362b;

    --rz-warning: #c77a14;
    --rz-warning-light: #d6933d;
    --rz-warning-lighter: rgba(199, 122, 20, 0.16);
    --rz-warning-dark: #a86510;
    --rz-on-warning: #ffffff;
    --rz-on-warning-lighter: #8a4b0f;

    --rz-info: #4d6fd0;
    --rz-info-light: #6c89db;
    --rz-info-lighter: rgba(77, 111, 208, 0.14);
    --rz-info-dark: #3e5bb3;
    --rz-on-info: #ffffff;
    --rz-on-info-lighter: #3e5bb3;

    /* Chart series */
    --rz-series-1: #0f7b55;
    --rz-series-2: #4d6fd0;
    --rz-series-3: #c77a14;
    --rz-series-4: #7a5bc7;
    --rz-series-5: #1c97a8;
    --rz-series-6: #b0567f;

    /* Corners: 8px controls, 10px surfaces */
    --rz-border-radius: 8px;
    --rz-button-border-radius: 8px;
    --rz-card-border-radius: 10px;
    --rz-panel-border-radius: 10px;
    --rz-dialog-border-radius: 10px;
    --rz-fieldset-border-radius: 10px;
    --rz-alert-border-radius: 10px;
    --rz-notification-border-radius: 10px;
    --rz-checkbox-border-radius: 5px;
    --rz-badge-border-radius: 999px;
    --rz-badge-padding: 0.125rem 0.5rem;
    --rz-badge-text-transform: none;
    --rz-badge-letter-spacing: 0;

    /* Flat surfaces: hairline borders in place of shadows */
    --rz-card-shadow: none;
    --rz-card-border: var(--rz-border-normal);
    --rz-header-shadow: none;
    --rz-header-border: var(--rz-border-normal);
    --rz-alert-box-shadow: none;
    --rz-switch-box-shadow: none;
    --rz-input-focus-shadow: 0 0 0 3px var(--rz-primary-lighter);

    /* Dark sidebar */
    --rz-sidebar-background-color: #0e1a2b;
    --rz-sidebar-color: rgba(255, 255, 255, 0.82);
    --rz-sidebar-border-inline-end: none;
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-border-radius: 8px;
    --rz-panel-menu-item-color: rgba(255, 255, 255, 0.82);
    --rz-panel-menu-icon-color: rgba(255, 255, 255, 0.7);
    --rz-panel-menu-font-weight: 500;
    --rz-panel-menu-item-padding-block: 0.5rem;
    --rz-panel-menu-item-padding-inline: 0.75rem;
    --rz-panel-menu-item-margin-inline: 0.5rem;
    --rz-panel-menu-item-margin-block: 1px;
    --rz-panel-menu-item-hover-background-color: rgba(255, 255, 255, 0.07);
    --rz-panel-menu-item-hover-color: #ffffff;
    --rz-panel-menu-item-active-background-color: rgba(255, 255, 255, 0.13);
    --rz-panel-menu-item-active-color: #ffffff;
    --rz-panel-menu-item-active-indicator: transparent;

    /* Compact grids */
    --rz-grid-cell-padding: 0.3125rem 0.5rem;
    --rz-grid-header-cell-padding: 0.375rem 0;
    --rz-grid-header-background-color: #eef0ec;
    --rz-grid-stripe-background-color: #fafbf9;
    --rz-grid-selected-background-color: var(--rz-primary-lighter);
}

/* ---------- Dark: Radzen swaps the base stylesheet, so key off its link ---------- */
:root:has(#radzen-theme-link[href*="-dark"]) {
    --rz-base-50: #f4f7fa;
    --rz-base-100: #e8edf3;
    --rz-base-200: #d3dae3;
    --rz-base-300: #93a0b2;
    --rz-base-400: #7c899b;
    --rz-base-500: #5b6a7e;
    --rz-base-600: #26364a;
    --rz-base-700: #1a2839;
    --rz-base-800: #121e2e;
    --rz-base-900: #0b1420;
    --rz-base: #26364a;
    --rz-base-light: #d3dae3;

    --rz-primary: #35b586;
    --rz-primary-light: #7fd9b4;
    --rz-primary-lighter: rgba(53, 181, 134, 0.18);
    --rz-primary-dark: #2a9c72;
    --rz-primary-darker: #238561;
    --rz-on-primary: #06241a;
    --rz-on-primary-lighter: #7fd9b4;

    --rz-secondary: #7f9bea;
    --rz-secondary-light: #a9bcf2;
    --rz-secondary-lighter: rgba(127, 155, 234, 0.18);
    --rz-secondary-dark: #6583d8;
    --rz-on-secondary: #0a1530;
    --rz-on-secondary-lighter: #a9bcf2;

    --rz-success: #4cc38a;
    --rz-success-light: #7fd9b4;
    --rz-success-lighter: rgba(76, 195, 138, 0.16);
    --rz-success-dark: #3aa873;
    --rz-success-darker: #2f8f61;
    --rz-on-success: #06241a;
    --rz-on-success-lighter: #4cc38a;

    --rz-danger: #f0766a;
    --rz-danger-light: #f59b92;
    --rz-danger-lighter: rgba(240, 118, 106, 0.16);
    --rz-danger-dark: #d9655a;
    --rz-on-danger: #3a0f0b;
    --rz-on-danger-lighter: #f0766a;

    --rz-warning: #e5a555;
    --rz-warning-light: #edbd80;
    --rz-warning-lighter: rgba(229, 165, 85, 0.16);
    --rz-warning-dark: #cc8f42;
    --rz-on-warning: #36240c;
    --rz-on-warning-lighter: #e5a555;

    --rz-info: #7f9bea;
    --rz-info-light: #a9bcf2;
    --rz-info-lighter: rgba(127, 155, 234, 0.18);
    --rz-info-dark: #6583d8;
    --rz-on-info: #0a1530;
    --rz-on-info-lighter: #a9bcf2;

    --rz-series-1: #35b586;
    --rz-series-2: #7f9bea;
    --rz-series-3: #e5a555;
    --rz-series-4: #a590e8;
    --rz-series-5: #4fc3d3;
    --rz-series-6: #d98bae;

    --rz-sidebar-background-color: #08101a;
    --rz-grid-header-background-color: #1a2839;
    --rz-grid-stripe-background-color: #0f1a28;
}

/* ---------- Rules with no variable to hang on ---------- */

/* The standard theme paints a decorative gradient image behind the page. */
body {
    background-image: none;
}

/* Filled cards rely on a shadow by default; give them the hairline instead. */
.rz-card.rz-variant-filled {
    border: var(--rz-card-border);
}

/* Grids read as one bordered, rounded surface. */
.rz-data-grid {
    border: var(--rz-border-normal);
    border-radius: 10px;
    overflow: hidden;
}

/* Figures line up in columns. */
.rz-data-grid td,
.ss-num {
    font-variant-numeric: tabular-nums;
}

/* Section labels between sidebar items. */
.rz-panel-menu .ss-nav-group {
    list-style: none;
    padding: 0.875rem 1.25rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

/* Gain and loss as coloured text. */
.ss-gain {
    color: var(--rz-success);
}

.ss-loss {
    color: var(--rz-danger);
}

/* Brand lockup at the top of the sidebar: the landing page's spire mark and name. */
.ss-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.125rem 1.25rem 0.875rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.ss-brand__mark {
    flex: none;
}

.ss-brand__spire {
    color: #5fd3a2;
}