/* Eunomia Design System: Operations & Admin Portal */

:root {
    /* Primary & Brand */
    --color-primary: #4338ca;
    --color-primary-hover: #3730a3;
    --color-primary-light: #eef2ff;
    --color-accent-sky: #0284c7;
    --color-accent-lavender: #7c3aed;
    --color-command-slate: #0f172a;

    /* Surfaces & Boundaries */
    --color-surface-canvas: #ffffff;
    --color-surface-ground: #f8fafc;
    --color-surface-sidebar: #fafafa;
    --color-surface-subtle: #f1f5f9;
    --color-border-hairline: #e2e8f0;
    --color-border-subtle: #f1f5f9;
    --color-border-strong: #cbd5e1;

    /* Typography Colors */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;

    /* Semantic Soft Pastel Spectrum */
    --color-pass: #15803d;
    --color-pass-surface: #dcfce7;
    --color-pass-border: #86efac;

    --color-fail: #be123c;
    --color-fail-surface: #ffe4e6;
    --color-fail-border: #fca5a5;

    --color-warning: #9a3412;
    --color-warning-surface: #ffedd5;
    --color-warning-border: #fdba74;

    --color-scheduled: #0369a1;
    --color-scheduled-surface: #e0f2fe;
    --color-scheduled-border: #7dd3fc;

    --color-opportunity: #6d28d9;
    --color-opportunity-surface: #ede9fe;
    --color-opportunity-border: #c4b5fd;

    /* Typography & Hierarchy */
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, monospace;
}

/* Global Typography & Smoothing */
html, body, button, input, select, textarea, .rz-body, .rz-layout {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.rzi, [class*="rzi-"], [class^="rzi-"], .rz-navigation-item-icon {
    font-family: var(--rz-icon-font-family) !important;
}

code, kbd, samp, pre, .font-mono, .font-monospace {
    font-family: ui-monospace, monospace !important;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-surface-ground);
    color: var(--color-text-primary);
    caret-color: var(--color-primary);
}

/* Text Selection */
::selection {
    background-color: var(--color-primary);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

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

* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Focus Rings */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* FocusOnNavigate moves focus to the page heading (tabindex="-1") so screen readers announce the
   new page. That focus is not something the user can tab to, so it draws no ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Tabular Numbers */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Underline Offsets */
a {
    text-underline-offset: 2px;
}

/* Soft Pastel Semantic Badges */
.badge-pass {
    background-color: var(--color-pass-surface);
    color: var(--color-pass);
    border: 1px solid var(--color-pass-border);
}

.badge-fail {
    background-color: var(--color-fail-surface);
    color: var(--color-fail);
    border: 1px solid var(--color-fail-border);
}

.badge-warning {
    background-color: var(--color-warning-surface);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

.badge-scheduled {
    background-color: var(--color-scheduled-surface);
    color: var(--color-scheduled);
    border: 1px solid var(--color-scheduled-border);
}

.badge-opportunity {
    background-color: var(--color-opportunity-surface);
    color: var(--color-opportunity);
    border: 1px solid var(--color-opportunity-border);
}

/* Restrained Card Elevation (Declare elevation once: border or soft shadow) */
.they-card {
    background-color: #ffffff;
    border: 1px solid var(--color-border-hairline);
    border-radius: 10px;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.they-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
}

/* Radzen Component Harmonization */
.rz-button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rz-button.rz-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.rz-button.rz-primary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.rz-dropdown {
    border-radius: 8px !important;
    border-color: var(--color-border-hairline) !important;
    background-color: #ffffff !important;
    font-size: 0.875rem !important;
    transition: border-color 0.15s ease !important;
}

.rz-dropdown:hover, .rz-dropdown:focus-within {
    border-color: #cbd5e1 !important;
}

.rz-textbox, .rz-textarea, .rz-numeric {
    border-radius: 8px !important;
    border-color: var(--color-border-hairline) !important;
    background-color: #ffffff !important;
    font-size: 0.875rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.rz-textbox:focus, .rz-textarea:focus, .rz-numeric:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12) !important;
}

/* The line between the sidebar and the page. Radzen's own border rule outranks Tailwind's
   border-slate-200 on the sidebar, so the colour is set through Radzen's variable instead. */
.rz-layout {
    --rz-sidebar-border-inline-end: 1px solid var(--color-border-hairline);
}

/* The sidebar and its menus only ever scroll vertically; Radzen's overflow:auto let a 1px border
   push a horizontal scrollbar onto them. */
.rz-sidebar,
.rz-panel-menu {
    overflow-x: hidden !important;
}

/* Every page change re-renders the layout. Any transition on the rail (Radzen's own width/opacity
   one included) animated that re-render as the menu drifting into place on the first click. */
.rz-sidebar {
    transition: none !important;
}

.rz-panel-menu {
    border: none !important;
    background: transparent !important;
}

.rz-panel-menu .rz-navigation-item {
    border: none !important;
    border-bottom: none !important;
}

.rz-panel-menu .rz-navigation-item-wrapper {
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
}

/* Changing page swaps the active item instantly: no fade of colour, background or icon. */
.rz-panel-menu .rz-navigation-item,
.rz-panel-menu .rz-navigation-item-wrapper,
.rz-panel-menu .rz-navigation-item-link,
.rz-panel-menu .rz-navigation-item-text,
.rz-panel-menu .rz-navigation-item-icon {
    transition: none !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover {
    background-color: #f1f5f9 !important;
}

.rz-panel-menu .rz-navigation-item-wrapper-active,
.rz-panel-menu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active,
.rz-panel-menu .rz-navigation-item.rz-state-active > .rz-navigation-item-wrapper {
    background-color: var(--color-primary-light) !important;
    border-radius: 8px !important;
}
.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-text,
.rz-panel-menu .rz-navigation-item-wrapper-active .rzi,
.rz-panel-menu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active .rz-navigation-item-text,
.rz-panel-menu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active .rzi {
    color: #4338ca !important;
}

/* One size and weight in every state: a bolder active label reflowed the text and made it jump.
   The active item is marked by its indigo colour and background alone. */
.rz-panel-menu .rz-navigation-item-text,
.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text,
.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-text {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.rz-panel-menu .rz-navigation-item-link {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary) !important;
    background: transparent !important;
}

/* The base theme leaves the panel-menu icon colour to a variable it barely tints, so icons vanished
   until hovered. Active items keep the indigo set above. */
.rz-panel-menu .rz-navigation-item-icon {
    color: var(--color-text-muted) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
    color: var(--color-text-primary) !important;
}

/* Responsive Mobile Overlay Drawer */
@media (max-width: 768px) {
    .rz-sidebar {
        position: absolute !important;
        z-index: 40 !important;
        height: 100% !important;
        top: 0 !important;
        bottom: 0 !important;
        box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
    }
}