/*
 * theme.css — Fluent 4 color palette applied to Radzen default theme
 * Use with: <RadzenTheme Theme="default" />
 * Load AFTER the Radzen theme stylesheet.
 *
 * Contains: colors, typography tokens, transitions only.
 * No size or layout overrides — let the default theme handle rendering.
 */

:root {
    /* ── Fluent 4 color palette ─────────────────────────────────────────── */

    --app-white: #ffffff;
    --app-black: #000000;
    --app-base-50: #f5f5f5;
    --app-base-100: #f3f2f1;
    --app-base-200: #edebe9;
    --app-base-300: #d2d0ce;
    --app-base-400: #a19f9d;
    --app-base-500: #8a8886;
    --app-base-600: #605e5c;
    --app-base-700: #616161;
    --app-base-800: #323130;
    --app-base-900: #201f1e;
    --app-primary: #0078d4;
    --app-primary-light: #80bcea;
    --app-primary-lighter: rgba(0, 120, 212, 0.1);
    --app-primary-dark: #006cbf;
    --app-primary-darker: #005a9f;
    --app-secondary: #8a8886;
    --app-secondary-light: #c5c4c3;
    --app-secondary-lighter: rgba(138, 136, 134, 0.1);
    --app-secondary-dark: #7c7a79;
    --app-secondary-darker: #686665;
    --app-success: #107c10;
    --app-success-light: #54b054;
    --app-success-lighter: rgba(16, 124, 16, 0.1);
    --app-success-dark: #0b5c0b;
    --app-success-darker: #084c08;
    --app-warning: #ffc80a;
    --app-warning-light: #ffd94d;
    --app-warning-lighter: rgba(255, 200, 10, 0.15);
    --app-warning-dark: #c99f08;
    --app-warning-darker: #a88507;
    --app-danger: #a4262c;
    --app-danger-light: #c45158;
    --app-danger-lighter: rgba(164, 38, 44, 0.1);
    --app-danger-dark: #7f1d22;
    --app-danger-darker: #69181c;
    --app-info: #0078d4;
    --app-info-light: #80bcea;
    --app-info-lighter: rgba(0, 120, 212, 0.1);
    --app-info-dark: #006cbf;
    --app-info-darker: #005a9f;
    /* ── Typography ─────────────────────────────────────────────────────── */

    --app-font-family: "Segoe UI", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --app-font-size-root: 16px;
    --app-font-size-body: 0.875rem;
    --app-line-height: 1.42857143;
    --app-icon-size: 1rem;
    --app-border-width: 1px;
    /* ── Radzen color variable mapping ──────────────────────────────────── */

    --rz-white: var(--app-white);
    --rz-black: var(--app-black);
    --rz-base-50: var(--app-base-50);
    --rz-base-100: var(--app-base-100);
    --rz-base-200: var(--app-base-200);
    --rz-base-300: var(--app-base-300);
    --rz-base-400: var(--app-base-400);
    --rz-base-500: var(--app-base-500);
    --rz-base-600: var(--app-base-600);
    --rz-base-700: var(--app-base-700);
    --rz-base-800: var(--app-base-800);
    --rz-base-900: var(--app-base-900);
    --rz-base: var(--app-base-200);
    --rz-base-light: var(--app-base-100);
    --rz-base-lighter: var(--app-white);
    --rz-base-dark: var(--app-base-600);
    --rz-base-darker: var(--app-base-900);
    --rz-primary: var(--app-primary);
    --rz-primary-light: var(--app-primary-light);
    --rz-primary-lighter: var(--app-primary-lighter);
    --rz-primary-dark: var(--app-primary-dark);
    --rz-primary-darker: var(--app-primary-darker);
    --rz-secondary: var(--app-secondary);
    --rz-secondary-light: var(--app-secondary-light);
    --rz-secondary-lighter: var(--app-secondary-lighter);
    --rz-secondary-dark: var(--app-secondary-dark);
    --rz-secondary-darker: var(--app-secondary-darker);
    --rz-info: var(--app-info);
    --rz-info-light: var(--app-info-light);
    --rz-info-lighter: var(--app-info-lighter);
    --rz-info-dark: var(--app-info-dark);
    --rz-info-darker: var(--app-info-darker);
    --rz-success: var(--app-success);
    --rz-success-light: var(--app-success-light);
    --rz-success-lighter: var(--app-success-lighter);
    --rz-success-dark: var(--app-success-dark);
    --rz-success-darker: var(--app-success-darker);
    --rz-warning: var(--app-warning);
    --rz-warning-light: var(--app-warning-light);
    --rz-warning-lighter: var(--app-warning-lighter);
    --rz-warning-dark: var(--app-warning-dark);
    --rz-warning-darker: var(--app-warning-darker);
    --rz-danger: var(--app-danger);
    --rz-danger-light: var(--app-danger-light);
    --rz-danger-lighter: var(--app-danger-lighter);
    --rz-danger-dark: var(--app-danger-dark);
    --rz-danger-darker: var(--app-danger-darker);
    /* On-color text */
    --rz-on-primary: var(--app-white);
    --rz-on-primary-light: var(--app-white);
    --rz-on-primary-lighter: var(--app-primary);
    --rz-on-primary-dark: var(--app-white);
    --rz-on-primary-darker: var(--app-white);
    --rz-on-secondary: var(--app-white);
    --rz-on-secondary-light: var(--app-white);
    --rz-on-secondary-lighter: var(--app-secondary);
    --rz-on-secondary-dark: var(--app-white);
    --rz-on-secondary-darker: var(--app-white);
    --rz-on-info: var(--app-white);
    --rz-on-info-light: var(--app-white);
    --rz-on-info-lighter: var(--app-info);
    --rz-on-info-dark: var(--app-white);
    --rz-on-info-darker: var(--app-white);
    --rz-on-success: var(--app-white);
    --rz-on-success-light: var(--app-white);
    --rz-on-success-lighter: var(--app-success);
    --rz-on-success-dark: var(--app-white);
    --rz-on-success-darker: var(--app-white);
    --rz-on-warning: var(--app-black);
    --rz-on-warning-light: var(--app-black);
    --rz-on-warning-lighter: var(--app-warning-darker);
    --rz-on-warning-dark: var(--app-black);
    --rz-on-warning-darker: var(--app-white);
    --rz-on-danger: var(--app-white);
    --rz-on-danger-light: var(--app-white);
    --rz-on-danger-lighter: var(--app-danger);
    --rz-on-danger-dark: var(--app-white);
    --rz-on-danger-darker: var(--app-white);
    --rz-on-base: var(--app-base-900);
    --rz-on-base-light: var(--app-base-900);
    --rz-on-base-lighter: var(--app-base-900);
    --rz-on-base-dark: var(--app-white);
    --rz-on-base-darker: var(--app-white);
    /* Text */
    --rz-base-background-color: var(--app-white);
    --rz-body-background-color: var(--app-base-100);
    --rz-text-title-color: var(--app-base-900);
    --rz-text-color: var(--app-base-800);
    --rz-text-secondary-color: var(--app-base-700);
    --rz-text-tertiary-color: var(--app-base-600);
    --rz-text-disabled-color: var(--app-base-400);
    --rz-text-contrast-color: var(--app-white);
    --rz-text-selection-background-color: var(--app-primary-lighter);
    --rz-text-selection-color: inherit;
    /* Links */
    --rz-link-color: var(--app-primary);
    --rz-link-hover-color: var(--app-primary-dark);
    --rz-link-text-decoration: none;
    --rz-link-hover-text-decoration: underline;
    /* Typography */
    --rz-root-font-size: var(--app-font-size-root);
    --rz-body-font-size: var(--app-font-size-body);
    --rz-body-line-height: var(--app-line-height);
    --rz-icon-size: var(--app-icon-size);
    --rz-text-font-family: var(--app-font-family);
    --rz-border-width: var(--app-border-width);
    --rz-border-normal:      var(--rz-border-width) solid var(--app-base-300);
    --rz-border-hover:       var(--rz-border-width) solid var(--app-base-800);
    --rz-border-focus:       var(--rz-border-width) solid var(--app-primary);
    --rz-border-disabled:    var(--rz-border-width) solid var(--app-base-200);
    /* Shadows */
    --rz-shadow-1: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.11);
    --rz-shadow-2: 0 3.2px 7.2px rgba(0,0,0,0.13), 0 0.6px 1.8px rgba(0,0,0,0.11);
    --rz-shadow-3: 0 6.4px 14.4px rgba(0,0,0,0.13), 0 1.2px 3.6px rgba(0,0,0,0.11);
    --rz-shadow-4: 0 12.8px 28.8px rgba(0,0,0,0.13), 0 2.4px 7.2px rgba(0,0,0,0.11);
    /* Transitions */
    --rz-transition: 0.1s ease;
    --rz-transition-all: all 0.1s ease;
    /* Header */
    --rz-header-background-color: var(--app-primary);
    --rz-header-color: var(--app-white);
    /* Sidebar */
    --rz-sidebar-background-color: var(--app-white);
    --rz-sidebar-color: var(--app-base-800);
    /* Profile menu */
    --rz-profile-menu-top-item-background-color: var(--app-primary);
    --rz-profile-menu-toggle-button-color: var(--app-white);
    --rz-profile-menu-background-color: var(--app-white);
    /* Menu item colors */
    --rz-menu-item-color: var(--app-base-800);
    --rz-menu-item-hover-color: var(--app-base-900);
    --rz-menu-item-hover-background-color: var(--app-base-100);
    --rz-menu-item-selected-color: var(--app-primary);
    --rz-menu-item-selected-background-color: var(--app-primary-lighter);
    /* Navigation items */
    --rz-navigation-item-active-background-color: var(--app-primary-lighter);
    --rz-navigation-item-active-color:            var(--app-primary);
    --rz-navigation-item-hover-background-color:  var(--app-base-100);
    --rz-navigation-item-hover-color:             var(--app-base-900);
    /* Panel menu */
    --rz-panel-menu-item-background-color: var(--app-white);
    --rz-panel-menu-item-color: var(--app-base-800);
    --rz-panel-menu-item-hover-background-color: var(--app-base-100);
    --rz-panel-menu-item-hover-color: var(--app-base-900);
    --rz-panel-menu-item-active-background-color: var(--app-base-100);
    --rz-panel-menu-item-active-color: var(--app-base-900);
    --rz-panel-menu-item-active-indicator: var(--app-primary);
    --rz-panel-menu-item-border:                       none;
    /* 2nd level items */
    --rz-panel-menu-item-2nd-level-background-color:         var(--app-white);
    --rz-panel-menu-item-2nd-level-color:                    var(--app-base-700);
    --rz-panel-menu-item-2nd-level-hover-background-color:   var(--app-base-100);
    --rz-panel-menu-item-2nd-level-hover-color:              var(--app-base-900);
    --rz-panel-menu-item-2nd-level-active-background-color:  var(--app-base-100);
    --rz-panel-menu-item-2nd-level-active-color:             var(--app-base-900);
}

/* body*/
body {
    margin: 0;
    font-family: var(--app-font-family);
    font-size: var(--app-font-size-body);
    font-weight: 400;
    line-height: var(--app-line-height);
    color: #616161;
    text-align: left;
    background-color: #f5f5f5;
}

[tabindex="-1"]:focus {
    outline: 0 !important;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--rz-text-title-color);
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.bg-light {
    background-color: #edebe9 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}


/* ── Header link colors ──────────────────────────────────────────────────── */

.rz-header a,
.rz-header a:hover,
.rz-header a:focus {
    color: var(--app-white);
}

/* ── Panel menu — white background, dark text ────────────────────────────── */

/* Container background */
.rz-panel-menu,
.rz-sidebar .rz-panel-menu,
.rz-panel-menu-wrapper {
    background-color: var(--app-white) !important;
    color: var(--app-base-800) !important;
}

    /* All nav item links */
    .rz-panel-menu .rz-navigation-item-link,
    .rz-panel-menu .rz-navigation-item-wrapper > .rz-navigation-item-link {
        background-color: transparent !important;
        color: var(--app-base-800) !important;
        border-inline-start: 2px solid transparent;
    }

    /* Nav item text */
    .rz-panel-menu .rz-navigation-item-text {
        color: var(--app-base-800) !important;
    }

    /* Nav item icon */
    .rz-panel-menu .rz-navigation-item-icon,
    .rz-panel-menu .rzi {
        color: var(--app-base-600) !important;
    }

    /* Hover */
    .rz-panel-menu .rz-navigation-item-link:hover,
    .rz-panel-menu .rz-navigation-item-wrapper:hover > .rz-navigation-item-link {
        background-color: var(--app-base-100) !important;
        color: var(--app-base-900) !important;
    }

    /* Active / selected item */
    .rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
    .rz-panel-menu .rz-navigation-item-wrapper-active > a {
        background-color: var(--app-base-100) !important;
        color: var(--app-base-900) !important;
        border-inline-start: 2px solid var(--app-primary) !important;
    }

    /* Group header (e.g. "Administration" label) */
    .rz-panel-menu .rz-navigation-item-wrapper > .rz-navigation-item-link.rz-navigation-item-group-link {
        background-color: var(--app-white) !important;
        color: var(--app-base-800) !important;
        font-weight: 600;
    }

/* ── Profile menu hover ──────────────────────────────────────────────────── */
.rz-panel-menu .rz-navigation-item-link:not(.rz-state-disabled):hover {
    background-color: var(--app-base-100) !important;
    color:            var(--app-base-900) !important;
}

/* ── Profile menu hover — dark text readable on light background ─────────── */
/* Target the wrapper:hover since that's where Radzen applies hover bg */

ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: var(--app-base-100) !important;
}

    ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link,
    ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text {
        color: var(--app-base-900) !important;
    }

ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-link,
ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-text {
    color: var(--app-base-800) !important;
}

/* ── Filled icons ────────────────────────────────────────────────────────── */

.filled-icon {
    font-variation-settings: "FILL" 1;
}