/* ========================================
   Rava Brand Guidelines Override
   ========================================
   Trial branding per Adrie's request.
   Loads LAST to override all existing styles.

   Brand Palette:
     Dark Teal:    #193E46  (Primary)
     Deep Purple:  #624E9E  (Secondary)
     Burnt Orange: #DE652D  (CTA / Icon dark)
     Salmon:       #F5A882  (Icon light / accent)
     Mint:         #B4E2EB  (Accent)
     Lavender:     #C3B2E8  (Tertiary / CTA button bg)
     Black:        #000000  (Text / Icon)
     White:        #FFFFFF  (BG / Inverse)

   Typography:
     Lexend    — Headings & display text
     Geologica — Body text & labels
   ======================================== */

/* ========================================
   1. CSS VARIABLE OVERRIDES
   ======================================== */

:root {
    /* Primary brand teal swap: #15B6A0 → #193E46 */
    --color-primary-orange: #193E46;
    --accent-primary: #193E46;

    /* Brand accent colors */
    --rava-teal: #193E46;
    --rava-purple: #624E9E;
    --rava-purple-light: #C3B2E8;
    --rava-orange: #DE652D;
    --rava-salmon: #F5A882;
    --rava-mint: #B4E2EB;
    --rava-lavender: #C3B2E8;

    /* Typography — brand fonts */
    --font-primary: 'Geologica', 'Ubuntu', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Geologica', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Lexend', 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Focus ring updated to brand teal */
    --focus-ring: 0 0 0 3px rgba(25, 62, 70, 0.25);
}

/* Dark mode teal override */
[data-theme="dark"] {
    --color-primary-orange: #B4E2EB; /* Mint for dark mode visibility */
    --accent-primary: #B4E2EB;
}

/* ========================================
   2. TYPOGRAPHY — Lexend headings, Geologica body
   ======================================== */

body {
    font-family: var(--font-primary) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-typography-subtitle1,
.mud-typography-subtitle2,
.topbar-title,
.metric-card .metric-value,
.empty-state-title,
.form-section-title,
.drawer-header .mud-typography-h6,
.mango-page-title {
    font-family: var(--font-heading) !important;
}

/* Body and label text uses Geologica
   IMPORTANT: Do NOT override font on generic span/i/div —
   this breaks Material Icons which rely on font-family: 'Material Icons' */
.mud-typography-body1,
.mud-typography-body2,
.mud-typography-caption,
.mud-typography-overline,
.mud-input,
.mud-input-label,
.mud-button-label,
.mud-table-cell,
.mud-nav-link,
.mud-nav-group-text,
.mud-chip-content,
.mud-breadcrumb-item,
.mud-select-input,
.mud-input-slot,
.mud-alert-message,
.data-label,
.text-small,
.text-large,
p:not(.material-icons),
label {
    font-family: var(--font-primary) !important;
}

/* Monospace stays as-is */
.currency,
code, pre, .mud-typography-code {
    font-family: var(--font-mono) !important;
}

/* PROTECT Material Icons from font overrides */
.material-icons,
.mud-icon-root,
.mud-icon-default,
.mud-svg-icon,
.mud-button-icon-start,
.mud-button-icon-end,
.mud-nav-link-icon,
i.mud-icon-root {
    font-family: 'Material Icons' !important;
}

/* ========================================
   3. LEFT SIDEBAR — Wave pattern background
   The "Vertical Bar Pattern" covers the full sidebar:
     - Dark teal (#193E46) at top → colorful waves at bottom
     - All sidebar text switches to light/white for contrast
   ======================================== */

/* Target both the drawer AND its inner content element
   Nuclear specificity: html body prefix + multiple classes to beat MudThemeProvider's
   generated <style> tag which loads AFTER all <link> stylesheets */
html body .mud-drawer,
html body .mud-drawer.integrity-drawer,
html body .integrity-drawer .mud-drawer-content,
html body .mud-drawer .mud-drawer-content {
    background-color: #193E46 !important;
    background-image: url('../images/wave-pattern.png') !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    background-size: cover !important;
    border-right: none !important;
}

/* Drawer header — sticky so it stays visible when nav scrolls */
html body .mud-drawer .drawer-header,
html body .integrity-drawer .drawer-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    background-color: #193E46 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Brand title "Rava" — white on dark teal */
.integrity-drawer .drawer-header .mud-typography-h6,
.mud-drawer .drawer-header .mud-typography-h6 {
    color: #FFFFFF !important;
    font-family: var(--font-heading) !important;
}

/* Tagline — mint for subtle contrast */
.integrity-drawer .drawer-header .mud-typography-caption,
.mud-drawer .drawer-header .mud-typography-caption {
    color: var(--rava-mint) !important;
}

/* Drawer header icons (collapse/close) — white */
.integrity-drawer .drawer-header .mud-icon-button,
.mud-drawer .drawer-header .mud-icon-button {
    color: #FFFFFF !important;
}

.integrity-drawer .drawer-header .mud-icon-button:hover,
.mud-drawer .drawer-header .mud-icon-button:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.integrity-drawer .drawer-header .mud-icon-button .mud-icon-root,
.mud-drawer .drawer-header .mud-icon-button .mud-icon-root {
    color: inherit !important;
}

/* Navigation links — base white text on dark background
   Hover, active, and sub-item states are in section 18 */
.mud-drawer.integrity-drawer .mud-nav-link,
.mud-drawer.integrity-drawer .mud-nav-link .mud-nav-link-text,
.integrity-drawer .mud-drawer-content .mud-nav-link,
.integrity-drawer .mud-drawer-content .mud-nav-link .mud-nav-link-text {
    color: #FFFFFF !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Nav link icons — white for visibility */
.mud-drawer.integrity-drawer .mud-nav-link .mud-icon-root,
.integrity-drawer .mud-drawer-content .mud-nav-link .mud-icon-root {
    color: #FFFFFF !important;
}

/* Nav link text — ensure inherits white */
.mud-drawer.integrity-drawer .mud-nav-link-text,
.integrity-drawer .mud-drawer-content .mud-nav-link-text {
    color: #FFFFFF !important;
}

/* Nav group section headers */
.mud-drawer.integrity-drawer .mud-nav-group-header,
.mud-drawer.integrity-drawer .mud-nav-group .mud-nav-group-header,
.integrity-drawer .mud-drawer-content .mud-nav-group-header {
    background: transparent !important;
    color: #FFFFFF !important;
}

.mud-drawer.integrity-drawer .mud-nav-group-text,
.mud-drawer.integrity-drawer .mud-nav-group .mud-nav-group-text,
.integrity-drawer .mud-drawer-content .mud-nav-group-text {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
}

/* Nav group expand/collapse icons */
.mud-drawer.integrity-drawer .mud-nav-group .mud-icon-root,
.integrity-drawer .mud-drawer-content .mud-nav-group .mud-icon-root {
    color: #FFFFFF !important;
}

/* Collapse/expand toggle button — white circle, visible on dark bg */
.integrity-drawer .drawer-toggle-icon,
.integrity-drawer .drawer-header .mud-icon-button {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
}

.integrity-drawer .drawer-toggle-icon:hover,
.integrity-drawer .drawer-header .mud-icon-button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.integrity-drawer .drawer-toggle-icon .mud-icon-root,
.integrity-drawer .drawer-header .mud-icon-button .mud-icon-root {
    color: #FFFFFF !important;
}

/* Hide the close (X) button — collapse/expand toggle is sufficient */
.integrity-drawer .drawer-header .mud-icon-button[aria-label="Close navigation menu"] {
    display: none !important;
}

/* Prevent scrollbar show/hide from shifting nav items */
.mud-drawer .mud-drawer-content {
    scrollbar-gutter: stable !important;
}
.mud-drawer .mud-navmenu {
    overflow: visible !important;
}

/* Scrollbar styling for dark sidebar */
.mud-drawer .mud-navmenu::-webkit-scrollbar {
    width: 4px;
}

.mud-drawer .mud-navmenu::-webkit-scrollbar-track {
    background: transparent;
}

.mud-drawer .mud-navmenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Collapsed drawer — still shows teal + wave */
.mud-drawer.drawer-collapsed {
    background-size: auto 100% !important;
    background-position: center bottom !important;
}

/* Collapsed drawer header — stack icon and button vertically */
html body .integrity-drawer.drawer-collapsed .drawer-header {
    padding: 8px 4px !important;
    height: auto !important;
    min-height: 64px !important;
}

html body .integrity-drawer.drawer-collapsed .drawer-header > div {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
}

html body .integrity-drawer.drawer-collapsed .drawer-toggle-icon {
    border: none !important;
    background: transparent !important;
}

/* Resize handle — light for dark bg */
.mud-drawer .drawer-resize-handle {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.mud-drawer .drawer-resize-handle .dot {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   4. ICONOGRAPHY — Orange combo
      Dark orange (#DE652D) for icon fill
      Salmon (#F5A882) for icon borders/backgrounds
   ======================================== */

/* General icon color — burnt orange (except sidebar, handled in section 3) */
.mud-main-content .mud-icon-root,
.metric-card .metric-icon {
    color: var(--rava-orange) !important;
}

/* Icon containers / bordered icons — salmon background */
.mud-avatar .mud-icon-root {
    color: var(--rava-orange) !important;
}

/* Avatar backgrounds — salmon with orange icon */
.mud-avatar {
    background: var(--rava-salmon) !important;
    border: 2px solid var(--rava-salmon) !important;
    color: var(--rava-orange) !important;
}

/* User avatar in topbar — keep teal brand identity */
.mud-appbar .mud-avatar {
    background: var(--rava-teal) !important;
    border-color: var(--rava-teal) !important;
    color: #FFFFFF !important;
}

/* Dashboard metric card icons */
.metric-card .metric-icon {
    color: var(--rava-orange) !important;
    opacity: 0.3 !important;
}

/* Metric card left border — brand orange */
.metric-card {
    border-left-color: var(--rava-orange) !important;
}

/* ========================================
   5. CTAs / BUTTONS — Purple combo
      Dark purple (#624E9E) for text
      Lavender (#C3B2E8) for button background
   ======================================== */

/* Primary filled buttons → lavender bg, purple text
   :not(#z) adds ID-level specificity (1,x,x) to beat MudThemeProvider's
   generated <style> tag which only uses class selectors (0,x,x) */
html body .mud-button-filled-primary:not(#z),
html body .mud-button-filled.mud-button-filled-primary:not(#z),
html body button.mango-btn-primary:not(#z),
html body .mango-btn.mango-btn-primary:not(#z) {
    background-color: #C3B2E8 !important;
    background: #C3B2E8 !important;
    color: #624E9E !important;
    font-weight: 600 !important;
}

html body .mud-button-filled-primary:hover:not(#z),
html body .mud-button-filled.mud-button-filled-primary:hover:not(#z),
html body button.mango-btn-primary:hover:not(#z),
html body .mango-btn.mango-btn-primary:hover:not(#z) {
    background-color: #624E9E !important;
    background: #624E9E !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    filter: none !important;
}

/* Avatar — brand teal background */
.mango-avatar {
    background-color: var(--rava-teal) !important;
    color: #FFFFFF !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

/* Button icons — inherit button text color, NOT the global orange */
html body .mud-button-root .mud-icon-root,
html body .mud-button .mud-icon-root,
html body button.mango-btn .mud-icon-root {
    color: inherit !important;
}

/* Outlined/secondary buttons — purple border and text */
html body .mud-button-outlined-primary:not(#z) {
    border-color: var(--rava-purple) !important;
    color: var(--rava-purple) !important;
}

html body .mud-button-outlined-primary:hover:not(#z) {
    background-color: rgba(98, 78, 158, 0.08) !important;
}

/* Text buttons — purple */
html body .mud-button-text-primary:not(#z) {
    color: var(--rava-purple) !important;
}

html body .mud-button-text-primary:hover:not(#z) {
    background-color: rgba(98, 78, 158, 0.04) !important;
}

/* FAB buttons — purple */
.mud-fab-primary {
    background-color: var(--rava-lavender) !important;
    color: var(--rava-purple) !important;
}

.mud-fab-primary:hover {
    background-color: var(--rava-purple) !important;
    color: #FFFFFF !important;
}

/* ========================================
   6. TEAL COLOR REPLACEMENTS
      All instances of #15B6A0 → #193E46
   ======================================== */

/* Brand logo gradient — updated teal */
.brand-logo {
    background: linear-gradient(135deg, var(--rava-teal), var(--rava-mint)) !important;
}

/* Page title underline — brand gradient */
.page-title::after {
    background: linear-gradient(135deg, var(--rava-teal) 0%, var(--rava-purple) 100%) !important;
}

/* Focus states — brand teal */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline-color: var(--rava-teal) !important;
}

/* Input focus — brand teal border */
.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--rava-teal) !important;
}

.mud-input-outlined.mud-focused {
    box-shadow: 0 0 0 2px rgba(25, 62, 70, 0.2) !important;
}

.mud-input:not(.mud-input-filled):not(.mud-input-text).mud-focused {
    border-color: var(--rava-teal) !important;
    box-shadow: 0 0 0 2px rgba(25, 62, 70, 0.2) !important;
}

/* Skip link — brand teal */
.skip-link {
    background-color: var(--rava-teal) !important;
}

/* Nav link hover gradient — updated */
.mud-nav-link:hover {
    background: rgba(25, 62, 70, 0.08) !important;
    color: var(--rava-teal) !important;
}

/* Active nav link — updated from orange gradient */
.mud-nav-link.mud-nav-link-active {
    background: var(--rava-teal) !important;
    color: #FFFFFF !important;
}

/* ========================================
   DASHBOARD — Override all hardcoded #5CD6C9 / #15B6A0
   dashboard-soft-teal.css uses !important on everything,
   so we must match or exceed specificity here.
   ======================================== */

/* Variable overrides */
.main-dashboard-wrapper {
    --soft-teal: var(--rava-teal) !important;
    --soft-teal-dark: var(--rava-teal) !important;
    --soft-teal-light: rgba(25, 62, 70, 0.15) !important;
}

/* Dashboard metric numbers & avatars — broad selectors to catch inline styles
   Inline style="color: #5CD6C9" is overridden by !important in CSS */
.main-dashboard-wrapper .mud-typography-h4 {
    color: var(--rava-teal) !important;
}

.main-dashboard-wrapper .mud-avatar {
    background-color: var(--rava-mint) !important;
    color: var(--rava-teal) !important;
    border: none !important;
}

/* Dashboard gradient button (Add New Employee) — brand teal
   Higher specificity to beat .mud-button-filled-primary CTA rule */
.mud-button-filled-primary.dashboard-btn-gradient,
.dashboard-btn-gradient {
    background: var(--rava-teal) !important;
    background-color: var(--rava-teal) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(25, 62, 70, 0.3) !important;
}

.mud-button-filled-primary.dashboard-btn-gradient:hover,
.dashboard-btn-gradient:hover {
    background: #1D5060 !important;
    background-color: #1D5060 !important;
    color: #FFFFFF !important;
    filter: none !important;
    box-shadow: 0 4px 12px rgba(25, 62, 70, 0.4) !important;
}

/* Dashboard outline buttons → brand teal borders and text */
.mud-button-outlined.dashboard-btn-outline-teal,
.dashboard-btn-outline-teal {
    color: var(--rava-teal) !important;
    border: 1px solid var(--rava-teal) !important;
    border-color: var(--rava-teal) !important;
}

.mud-button-outlined.dashboard-btn-outline-teal:hover,
.dashboard-btn-outline-teal:hover {
    background: rgba(25, 62, 70, 0.08) !important;
    border-color: var(--rava-teal) !important;
}

/* Dashboard text buttons → brand teal */
.dashboard-btn-text-teal {
    color: var(--rava-teal) !important;
}

.dashboard-btn-text-teal:hover {
    background: rgba(25, 62, 70, 0.08) !important;
}

/* Department cards numbers */
.main-dashboard-wrapper .mud-grid .mud-card-outlined .mud-typography-h6 {
    color: var(--rava-teal) !important;
}

.main-dashboard-wrapper .mud-grid .mud-card-outlined .mud-avatar {
    color: var(--rava-teal) !important;
}

/* Progress bars */
.main-dashboard-wrapper .mud-progress-linear.mud-primary .mud-progress-linear-bar {
    background-color: var(--rava-teal) !important;
}

/* Error retry */
.main-dashboard-wrapper .mud-alert .mud-button {
    color: var(--rava-teal) !important;
}

/* Active chips in dashboard */
.main-dashboard-wrapper .mud-chip.mud-chip-color-success {
    background-color: rgba(25, 62, 70, 0.12) !important;
    color: var(--rava-teal) !important;
}

.main-dashboard-wrapper .mud-chip.mud-chip-color-success .mud-chip-content {
    color: var(--rava-teal) !important;
}

/* ========================================
   GLOBAL — Override remaining hardcoded #15B6A0 / #5CD6C9
   in employee-dashboard.css and rava-design-system.css
   ======================================== */

/* Active status chips globally (green "Active" badges) */
.mud-chip.mud-chip-color-success {
    background-color: rgba(25, 62, 70, 0.12) !important;
    color: var(--rava-teal) !important;
}

.mud-chip.mud-chip-color-success .mud-chip-content {
    color: var(--rava-teal) !important;
}

/* MudBlazor primary color overrides */
.mud-primary-text {
    color: var(--rava-teal) !important;
}

.mud-primary {
    background-color: var(--rava-teal) !important;
    color: #FFFFFF !important;
}

/* Table header — light gray per design system (NOT dark teal gradient) */
.mud-table-head {
    background: #FAFBFC !important;
}

.mud-table-head th,
.mud-table-head .mud-table-cell {
    color: #9AA0AC !important;
    font-family: var(--font-primary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #F0F2F5 !important;
}

/* Preserve hyperlink styling — blue underlined links everywhere */
a, .mud-link,
a.mud-typography,
.mud-table-head a,
.mud-table-head .mud-button-root.mud-button-text {
    color: #1E40AF !important;
    text-decoration: underline !important;
}

a:hover, .mud-link:hover,
.mud-table-head a:hover {
    color: #1E3A8A !important;
}

/* Table row dividers */
.mud-table-body .mud-table-row {
    border-bottom: 1px solid #F8F9FA !important;
}

/* ========================================
   7. TOPBAR ICON OVERRIDE
      Keep topbar icons subtle (not orange)
   ======================================== */

.mud-appbar .mud-icon-root,
.mud-appbar .mud-icon-button .mud-icon-root {
    color: var(--text-secondary) !important;
}

.mud-appbar .mud-icon-button:hover .mud-icon-root {
    color: var(--rava-teal) !important;
}

/* Hide "Rava" text label in topbar — logo is sufficient */
.mud-appbar .brand .topbar-title,
.brand .topbar-title {
    display: none !important;
}

/* ========================================
   8. CHIP / BADGE ACCENT COLORS
   ======================================== */

.mud-chip-primary {
    background-color: var(--rava-lavender) !important;
    color: var(--rava-purple) !important;
}

/* ========================================
   9. HELP ICONS — Burnt Orange (#DE652D)
   ======================================== */

/* MudBlazor info-colored icon buttons (used by HelpTooltip) */
.mud-icon-button-color-info .mud-icon-root,
.mud-button-icon-size-small .mud-icon-root[aria-hidden="true"],
button.mud-icon-button.mud-icon-button-color-info .mud-icon-root {
    color: #DE652D !important;
}

/* ========================================
   10. STATUS BADGES — Mint bg, dark teal text
   ======================================== */

/* Active status badge */
.badge-ok {
    background: #B4E2EB !important;
    color: #193E46 !important;
    border: 1px solid #B4E2EB !important;
}

/* Info badge (Bermudian, PRC, etc.) */
.badge-info {
    background: #B4E2EB !important;
    color: #193E46 !important;
    border: 1px solid #B4E2EB !important;
}

/* MudChip success (Active chips on dashboard) */
.mud-chip.mud-chip-color-success {
    background: #B4E2EB !important;
    color: #193E46 !important;
}

.mud-chip.mud-chip-color-success .mud-chip-content {
    color: #193E46 !important;
}

/* MudChip info (Calculated status, info badges) — mint bg, teal text */
html body .mud-chip.mud-chip-color-info,
html body .mud-chip-color-info {
    background: #B4E2EB !important;
    color: #193E46 !important;
}

html body .mud-chip.mud-chip-color-info .mud-chip-content,
html body .mud-chip-color-info .mud-chip-content {
    color: #193E46 !important;
}

html body .mud-chip.mud-chip-color-info .mud-icon-root,
html body .mud-chip-color-info .mud-icon-root {
    color: #193E46 !important;
}

/* ========================================
   11. DROPDOWN ICONS — Black clear (X) and arrow
   ======================================== */

.mud-select .mud-input-adornment-end .mud-icon-root,
.mud-select .mud-select-input .mud-icon-root,
.mud-input-control .mud-icon-button .mud-icon-root,
.mud-input .mud-input-adornment .mud-icon-root,
.mud-select .mud-button-root.mud-icon-button .mud-icon-root {
    color: #000000 !important;
}

/* ========================================
   12. PILL-SHAPED BUTTONS (Design System)
       All buttons: border-radius 9999px, Lexend Bold
   ======================================== */

html body .mud-button-root,
html body .mud-button-root.mud-button,
html body .mud-button-root.mud-button-outlined,
html body .mud-button-root.mud-button-filled,
html body .mud-button-root.mud-button-text,
html body button.mango-btn {
    border-radius: 9999px !important;
    font-family: 'Lexend', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

html body .mud-fab {
    border-radius: 9999px !important;
}

/* ========================================
   13. CARD BORDER RADIUS (Design System: 16px)
   ======================================== */

.mud-card {
    border-radius: 16px !important;
    border: 1px solid #E2E4E9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04) !important;
}

.mud-card-outlined {
    border: 1px solid #E2E4E9 !important;
}

/* ========================================
   14. INPUT BORDER RADIUS (Design System: 10px)
   ======================================== */

.mud-input-control .mud-input,
.mud-input-control .mud-input-outlined .mud-input-outlined-border,
.mud-input-control .mud-select,
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 10px !important;
}

.mud-input-control .mud-input-slot {
    border-radius: 10px !important;
}

/* Input border color — design system default */
.mud-input-outlined .mud-input-outlined-border {
    border-color: #E2E4E9 !important;
    border-width: 1.5px !important;
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #193E46 !important;
}

/* ========================================
   15. BORDER COLORS (Design System)
   ======================================== */

:root {
    --color-border: #E2E4E9;
    --color-border-strong: #C0C4CC;
    --color-border-focus: #193E46;
}

/* ========================================
   16. REQUIRED FIELD ASTERISKS — Burnt Orange
   ======================================== */

.mud-input-label-text .mud-input-label-asterisk,
.mud-input-required .mud-input-label::after,
.mud-input-label .mud-input-label-asterisk {
    color: #DE652D !important;
}

/* ========================================
   17. STAT CARD ICON BLOCKS (Design System)
       Rounded squares with brand-tinted backgrounds
   ======================================== */

.stat-card {
    border: 1px solid #E2E4E9 !important;
}

.stat-value {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    color: #193E46 !important;
    line-height: 1 !important;
}

.stat-label {
    font-family: var(--font-primary) !important;
    font-size: 12px !important;
    color: #9AA0AC !important;
}

.stat-icon-block {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-block .mud-icon-root {
    font-size: 19px !important;
}

.stat-icon-teal {
    background: #EBF7F9 !important;
}

.stat-icon-teal .mud-icon-root {
    color: #193E46 !important;
}

.stat-icon-purple {
    background: #F0ECFB !important;
}

.stat-icon-purple .mud-icon-root {
    color: #624E9E !important;
}

.stat-icon-orange {
    background: #FEF0E6 !important;
}

.stat-icon-orange .mud-icon-root {
    color: #DE652D !important;
}

/* ========================================
   18. SIDEBAR NAV — Unified interaction states
       All drawer nav items: no bounce, consistent highlights
   ======================================== */

/* Base state — all drawer nav links */
html body .mud-drawer.integrity-drawer .mud-nav-link,
html body .mud-drawer.integrity-drawer .mud-nav-link .mud-nav-link-text,
html body .integrity-drawer .mud-drawer-content .mud-nav-link,
html body .integrity-drawer .mud-drawer-content .mud-nav-link .mud-nav-link-text {
    color: #FFFFFF !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    transform: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    background: rgba(255, 255, 255, 0.001) !important;
}

/* Hover — frosted highlight, no movement */
html body .mud-drawer.integrity-drawer .mud-nav-link:hover,
html body .integrity-drawer .mud-drawer-content .mud-nav-link:hover,
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link:hover,
html body .integrity-drawer .mud-nav-group .mud-nav-link:hover {
    background: rgba(180, 226, 235, 0.14) !important;
    color: #FFFFFF !important;
    transform: none !important;
}

/* Active/selected — mint text, same highlight as hover */
html body .mud-drawer.integrity-drawer .mud-nav-link.active,
html body .mud-drawer.integrity-drawer .mud-nav-link.mud-nav-link-active,
html body .mud-drawer.integrity-drawer .mud-nav-link.mud-selected,
html body .integrity-drawer .mud-drawer-content .mud-nav-link.active,
html body .integrity-drawer .mud-drawer-content .mud-nav-link.mud-nav-link-active,
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link.active,
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link.mud-nav-link-active {
    background: rgba(180, 226, 235, 0.14) !important;
    color: #B4E2EB !important;
    font-weight: 600 !important;
    transform: none !important;
}

html body .mud-drawer.integrity-drawer .mud-nav-link.active .mud-nav-link-text,
html body .mud-drawer.integrity-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-text,
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link.active .mud-nav-link-text,
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link.mud-nav-link-active .mud-nav-link-text {
    color: #B4E2EB !important;
}

/* Active icon — mint */
html body .mud-drawer.integrity-drawer .mud-nav-link.active .mud-icon-root,
html body .mud-drawer.integrity-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root,
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link.active .mud-icon-root,
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: #B4E2EB !important;
}

/* Inactive icon — true white */
html body .mud-drawer.integrity-drawer .mud-nav-link .mud-icon-root,
html body .integrity-drawer .mud-drawer-content .mud-nav-link .mud-icon-root {
    color: #FFFFFF !important;
}

/* Nav sub-items — match parent font size */
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link,
html body .integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link .mud-nav-link-text {
    font-size: 14px !important;
    padding-left: 20px !important;
}

/* ========================================
   19. MONETARY VALUES — Lexend Bold
   ======================================== */

.mud-table-cell .mud-typography-body1[style*="font-weight"],
.stat-value,
.metric-value {
    font-family: var(--font-heading) !important;
}

/* ========================================
   20. BADGE / CHIP PILL SHAPE
   ======================================== */

.mud-chip {
    border-radius: 9999px !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* ========================================
   21. SEMANTIC TEXT COLORS (Design System)
   ======================================== */

:root {
    --color-text-primary: #1A1A2E;
    --color-text-secondary: #4A5568;
    --color-text-muted: #9AA0AC;
    --color-text-disabled: #C0C4CC;
    --color-text-brand: #193E46;
    --color-text-accent: #624E9E;
    --color-text-cta: #DE652D;
}

/* ========================================
   22. DESIGN SYSTEM GRADIENTS
   ======================================== */

:root {
    --gradient-teal: linear-gradient(135deg, #193E46 0%, #B4E2EB 100%);
    --gradient-purple: linear-gradient(135deg, #624E9E 0%, #C3B2E8 100%);
    --gradient-orange: linear-gradient(135deg, #DE652D 0%, #F5A882 100%);
    --gradient-wave: linear-gradient(135deg, #193E46 0%, #624E9E 30%, #B4E2EB 65%, #F5A882 100%);
    --gradient-dark: linear-gradient(135deg, #0D2128 0%, #193E46 100%);
}

/* ========================================
   23. DIALOG BORDER RADIUS
   ======================================== */

.mud-dialog {
    border-radius: 16px !important;
}

/* ========================================
   24. NAV PILL TABS — Brand Colors
       Nuclear specificity to beat employee-dashboard.css
       which uses .mango-quick-nav button.mango-nav-pill with all:unset
   ======================================== */

html body .employee-dashboard-v2-wrapper button.mango-nav-pill,
html body .mango-quick-nav button.mango-nav-pill,
html body button.mango-nav-pill {
    border-radius: 9999px !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    border: 1px solid #E2E4E9 !important;
    background: #F9FAFB !important;
    color: #4B5563 !important;
}

html body .employee-dashboard-v2-wrapper button.mango-nav-pill:hover,
html body .mango-quick-nav button.mango-nav-pill:hover,
html body button.mango-nav-pill:hover {
    background: #EBF7F9 !important;
    color: #193E46 !important;
    border-color: #193E46 !important;
}

html body .employee-dashboard-v2-wrapper button.mango-nav-pill.active,
html body .mango-quick-nav button.mango-nav-pill.active,
html body button.mango-nav-pill.active {
    background: #193E46 !important;
    color: #FFFFFF !important;
    border-color: #193E46 !important;
}

/* ========================================
   25. MudTabs — Pill-shaped tabs
       Override MudBlazor default underline tabs
   ======================================== */

html body .mud-tabs .mud-tab {
    border-radius: 9999px !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    min-width: auto !important;
    margin: 0 4px !important;
}

html body .mud-tabs .mud-tab.mud-tab-active {
    background: #193E46 !important;
    color: #FFFFFF !important;
}

html body .mud-tabs .mud-tab.mud-tab-active .mud-tab-icon-text .mud-icon-root {
    color: #FFFFFF !important;
}

html body .mud-tabs .mud-tab-slider {
    display: none !important;
}

/* ========================================
   26. Color.Success BUTTON — Brand override
       Insight "Run" buttons use Color.Success
   ======================================== */

html body .mud-button-filled-success:not(#z) {
    background-color: #C3B2E8 !important;
    background: #C3B2E8 !important;
    color: #624E9E !important;
    font-weight: 600 !important;
}

html body .mud-button-filled-success:hover:not(#z) {
    background-color: #624E9E !important;
    background: #624E9E !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    filter: none !important;
}

/* ========================================
   27. MudStepper — Brand teal step indicators
       Override default primary color circles
   ======================================== */

html body .mud-step.active .mud-step-label-icon,
html body .mud-step-label-icon.mud-primary {
    background-color: #193E46 !important;
    color: #FFFFFF !important;
}

html body .mud-step-label-icon {
    background-color: #E2E4E9 !important;
    color: #4B5563 !important;
}

html body .mud-step.active .mud-step-label-content .mud-typography {
    color: #193E46 !important;
    font-weight: 700 !important;
}

/* MudStepper connector line */
html body .mud-stepper-connector {
    border-color: #E2E4E9 !important;
}

html body .mud-stepper-connector.mud-stepper-connector-completed {
    border-color: #193E46 !important;
}

/* ========================================
   28. MudRadio — Brand teal checked state
   ======================================== */

html body .mud-radio .mud-radio-icons .mud-icon-root.mud-primary-text {
    color: #193E46 !important;
}

html body .mud-checkbox .mud-primary-text {
    color: #193E46 !important;
}

/* ========================================
   29. REPORT CATALOG — Simplify card text
       Per Adrie: description text → black
   ======================================== */

html body .report-description,
html body .report-description.mud-secondary-text {
    color: #000000 !important;
}