/* ============================================
   RC MOWERS BRAND STYLESHEET
   Brand Guidelines Implementation
   ============================================ */

/* ============================================
   FONT DECLARATIONS
   ============================================ */

/* Klavika Basic Bold - Primary Header Font */
@font-face {
    font-family: 'KlavikaBasicBold';
    src: url('/fonts/klavika-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Din OT Regular - Body Font */
@font-face {
    font-family: 'DinOTRegular';
    src: url('/fonts/FontFont - DINOT-Medium.otf') format('opentype'),
         url('/fonts/FontFont - DINOT.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Legacy font faces for backward compatibility */
@font-face {
    font-family: DinotBlack;
    src: url('/fonts/FontFont - DINOT-Black.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: DinotMedium;
    src: url('/fonts/FontFont - DINOT.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

/* ============================================
   CSS VARIABLES - RC MOWERS BRAND COLORS
   ============================================ */

:root {
    /* RC Mowers Brand Colors */
    --rcm-white: #FFFFFF;
    --rcm-light-gray: #EBEBEB;
    --rcm-red: #F3002B;
    --rcm-black: #000000;
    --rcm-medium-gray: #B3B3B3;
    --rcm-dark-gray: #4D4D4D;

    /* Typography */
    --rcm-font-header: 'KlavikaBasicBold', 'DinotBlack', Arial, sans-serif;
    --rcm-font-body: 'DinOTRegular', 'DinotMedium', Arial, sans-serif;

    /* Legacy compatibility (aliased to new vars) */
    --amr-primary: var(--rcm-black);
    --amr-secondary: var(--rcm-red);
    --amr-font-header: var(--rcm-font-header);
    --amr-font-body: var(--rcm-font-body);

    /* Focus ring for ADA accessibility */
    --rcm-focus-ring: 2px solid var(--rcm-red);

    /* Properties page */
    --pm-radius: 14px;
    --pm-shadow: 0 6px 20px rgba(0,0,0,.12);
    --pm-shadow-soft: 0 2px 10px rgba(0,0,0,.10);
    --pm-border: rgba(0,0,0,.08);
    --pm-red: #F3002B;
    --pm-red-dark: #d50027;
    --pm-blue: #42A5F5;

    /* Property Coverage page */
    --pc-radius: 14px;
    --pc-shadow: 0 6px 20px rgba(0,0,0,.12);
    --pc-shadow-soft: 0 2px 10px rgba(0,0,0,.10);
    --pc-blur-bg: rgba(255,255,255,.88);
    --pc-blur-bg-dark: rgba(30,30,30,.75);
    --pc-border: rgba(0,0,0,.08);
    --pc-blue: #1976D2;
    --pc-blue-dark: #1565C0;
    --pc-blue-light: #42A5F5;

    /* Coverage Simulator page */
    --cs-radius: 14px;
    --cs-shadow: 0 6px 20px rgba(0,0,0,.12);
    --cs-shadow-soft: 0 2px 10px rgba(0,0,0,.10);
    --cs-blur-bg: rgba(255,255,255,.88);
    --cs-border: rgba(0,0,0,.08);
    --cs-red: #F3002B;
    --cs-red-dark: #d50027;
    --cs-blue: #42A5F5;
}

/* ============================================
   BASE STYLES
   ============================================ */

a, .btn-link {
    color: var(--rcm-black);
    text-decoration: none;
}

a:hover, a:active, .btn-link:hover {
    color: var(--rcm-red);
}

.btn-primary {
    color: var(--rcm-white);
    background-color: var(--rcm-red);
    border-color: var(--rcm-red);
}

.btn-primary:hover {
    color: var(--rcm-black);
    background-color: var(--rcm-light-gray);
    border-color: var(--rcm-black);
}

/* ADA Compliant Focus States - Unified outline approach (keyboard only) */
:focus-visible {
    outline: 2px solid var(--rcm-red);
    outline-offset: 2px;
    box-shadow: none;
}

:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

/* Error states use black text + red icon pattern for ADA compliance */
.invalid {
    outline: 2px solid var(--rcm-red);
}

.validation-message {
    color: var(--rcm-black);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.validation-message::before {
    content: "⚠";
    color: var(--rcm-red);
    font-size: 1.1em;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--rcm-red);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--rcm-white);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--rcm-medium-gray);
}


/* ============================================
   GLOBAL TYPOGRAPHY
   ============================================ */

html,
body {
    overflow-x: hidden;
    font-family: var(--rcm-font-body);
    font-size: 16px; /* Desktop base */
    line-height: 1.5; /* 24px leading */
    color: var(--rcm-black);
    background-color: var(--rcm-white);
}

/* Mobile typography adjustment */
@media (max-width: 768px) {
    html, body {
        font-size: 14px; /* Mobile base */
        line-height: 1.5; /* 21px leading */
    }
}

a {
    text-decoration: none;
    color: var(--rcm-black);
    transition: color 0.2s ease;
}

a:active,
a:hover {
    color: var(--rcm-red);
}

/* Headers: Klavika Basic Bold, ALL CAPS, letter-spacing 0.05em */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rcm-black);
}
/*weekly page*/
.force-row {
    flex-direction: row !important;
    align-items: center;
}

.mud-button-filled-success {
    background-color: var(--mud-palette-success) !important;
    color: var(--mud-palette-success-text) !important;
}


/*=== Prograss Bar ===*/
.progress-bar-container {
    margin-bottom: 1em;
}

.progress {
    height: 30px;
    background-color: #f3f3f3;
    border-radius: 5px;
}

.progress-bar {
    height: 100%;
    background-color: var(--rcm-red);
    text-align: center;
    color: var(--rcm-white);
    border-radius: 10px;
}

circle {
    fill: none;
    stroke: url(#GradientColor);
    stroke-width: 20px;
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    animation: anim 2s linear forwards;
}

@keyframes anim {
    100% {
        stroke-dashoffset: 157.5;
    }
}




/* ============================================
   RC MOWERS BRAND BUTTONS
   Primary: Red bg, white text → Hover: light gray bg, black text
   Secondary: White bg, black text, 1px border → Hover: light gray bg
   ============================================ */

.btn {
    border-radius: 4px;
    font-weight: 700;
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Primary Button: Red background, white text */
.rcm-btn-primary,
.amr-btn-secondary {
    color: var(--rcm-white);
    background-color: var(--rcm-red);
    border: 2px solid var(--rcm-red);
}

.rcm-btn-primary:hover,
.amr-btn-secondary:hover {
    color: var(--rcm-black);
    background-color: var(--rcm-light-gray);
    border-color: var(--rcm-black);
}

.rcm-btn-primary:focus-visible,
.amr-btn-secondary:focus-visible {
    outline: 2px solid var(--rcm-red);
    outline-offset: 2px;
    box-shadow: none;
}

/* Secondary Button: White background, black text, black border */
.rcm-btn-secondary,
.amr-btn-primary {
    color: var(--rcm-black);
    background-color: var(--rcm-white);
    border: 1px solid var(--rcm-black);
}

.rcm-btn-secondary:hover,
.amr-btn-primary:hover {
    color: var(--rcm-black);
    background-color: var(--rcm-light-gray);
    border-color: var(--rcm-black);
}

.rcm-btn-secondary:focus-visible,
.amr-btn-primary:focus-visible {
    outline: 2px solid var(--rcm-red);
    outline-offset: 2px;
    box-shadow: none;
}

a.btn.amr-btn-primary:focus {
    color: var(--rcm-black) !important;
}

/* White Button (for dark backgrounds) */
.rcm-btn-white,
.amr-btn-white {
    color: var(--rcm-black);
    background-color: var(--rcm-white);
    border: 2px solid var(--rcm-white);
}

.rcm-btn-white:hover,
.amr-btn-white:hover {
    color: var(--rcm-black);
    background-color: var(--rcm-light-gray);
    border-color: var(--rcm-light-gray);
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
    color: var(--rcm-medium-gray);
    background-color: var(--rcm-light-gray);
    border-color: var(--rcm-medium-gray);
    cursor: not-allowed;
    opacity: 0.65;
}



.session-row-selected {
    background-color: rgba(0, 120, 255, 0.15) !important;
}

/*=== Pills ===*/

.nav-pills .nav-link.active {
    padding: 5px 15px;
    border-radius: 3px;
    font-weight: bold;
    color: white;
    font-family: var(--amr-font-header);
    background-color: var(--amr-primary);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0/19%);
}

.nav-pills .nav-link {
    background: 0 0;
    border: 0;
    border-radius: var(--bs-nav-pills-border-radius);
    color: black;
}




.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: #29292e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e5dfe4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 5px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}


/*Nav Tabs*/

.nav-tabs {
    border: none;
    justify-content: right;
    margin-right: 70px;
}

    .nav-tabs .nav-link {
        border: none;
    }

.nav-item .nav-link {
    font-size: 20px;
    text-align: right;
    width: 130px;
    color: black !important
}

.active-link {
    color: var(--rcm-black) !important;
    border-bottom: 3px solid var(--rcm-red) !important;
    background-color: #fce4e4 !important;
}

.nav-link.active {
    color: var(--rcm-black) !important;
    border-bottom: 1px solid var(--rcm-red) !important;
    background-color: #fce4e4 !important;
}


/* ============================================
   MUDBLAZOR COMPONENT OVERRIDES - RC MOWERS BRAND
   ============================================ */

/* AppBar - Light gray header with dark text */
.mud-appbar {
    background-color: var(--rcm-light-gray) !important;
    color: var(--rcm-black) !important;
}

.mud-appbar .mud-icon-button {
    color: var(--rcm-black) !important;
}

/* Drawer/Navigation */
.mud-drawer {
    background-color: var(--rcm-white);
    border-right: 1px solid var(--rcm-light-gray);
}

.mud-nav-link {
    color: var(--rcm-black);
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.mud-nav-link:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    padding-left: 20px !important;
}

/* Force nav links to fill full drawer width */
.mud-navmenu {
    padding: 4px 8px !important;
}

/* Tooltip wrappers inside nav must be full-width blocks */
.mud-navmenu .mud-tooltip-root {
    display: block !important;
    width: 100% !important;
}

.mud-navmenu .mud-nav-link {
    display: flex !important;
    width: 100% !important;
    border-radius: 8px !important;
    margin: 1px 0 !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
}

/* Active nav link - Rounded pill highlight */
.mud-nav-link.mud-nav-link-active,
.mud-navlink-active,
.rcm-nav-active {
    background-color: rgba(243, 0, 43, 0.08) !important;
    color: var(--rcm-black) !important;
    border-radius: 8px !important;
    border-left: none !important;
    box-shadow: none !important;
}

.mud-nav-link.mud-nav-link-active .mud-nav-link-text,
.rcm-nav-active .mud-nav-link-text {
    color: var(--rcm-red) !important;
    font-weight: 600;
}

/* Cards - Red left border accent */
.mud-card {
    border-left: 4px solid var(--rcm-red);
}

.mud-card-header {
    font-family: var(--rcm-font-header);
}

/* Tables - Light gray header, uppercase Klavika headers */
.mud-table-head {
    background-color: var(--rcm-light-gray);
}

.mud-table-head th,
.mud-th {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--rcm-black);
}

.mud-table-row:hover {
    background-color: var(--rcm-light-gray) !important;
}

/* Tabs - Red active indicator */
.mud-tabs-header {
    border-bottom: 2px solid var(--rcm-light-gray);
}

.mud-tab {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rcm-black);
}

.mud-tab.mud-tab-active {
    color: var(--rcm-red) !important;
}

.mud-tab-slider {
    background-color: var(--rcm-red) !important;
}

/* Chips/Badges - Brand color variants */
.mud-chip {
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mud-chip.mud-chip-color-primary,
.mud-chip.mud-chip-filled.mud-chip-color-primary {
    background-color: var(--rcm-black) !important;
    color: var(--rcm-white) !important;
}

.mud-chip.mud-chip-color-primary *,
.mud-chip.mud-chip-color-primary .mud-chip-content,
.mud-chip.mud-chip-color-primary span,
.mud-chip.mud-chip-filled.mud-chip-color-primary *,
.mud-chip.mud-chip-filled.mud-chip-color-primary .mud-chip-content,
.mud-chip.mud-chip-filled.mud-chip-color-primary span {
    color: var(--rcm-white) !important;
}

.mud-chip.mud-chip-color-secondary,
.mud-chip.mud-chip-filled.mud-chip-color-secondary {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}

.mud-chip.mud-chip-color-secondary *,
.mud-chip.mud-chip-color-secondary .mud-chip-content,
.mud-chip.mud-chip-color-secondary span,
.mud-chip.mud-chip-filled.mud-chip-color-secondary *,
.mud-chip.mud-chip-filled.mud-chip-color-secondary .mud-chip-content,
.mud-chip.mud-chip-filled.mud-chip-color-secondary span {
    color: var(--rcm-white) !important;
}

/* Buttons - MudBlazor overrides */
.mud-button-filled.mud-button-filled-primary {
    background-color: var(--rcm-black) !important;
    color: var(--rcm-white) !important;
}

.mud-button-filled.mud-button-filled-primary .mud-button-label,
.mud-button-filled.mud-button-filled-primary span,
.mud-button-filled.mud-button-filled-primary .mud-icon {
    color: var(--rcm-white) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--rcm-dark-gray) !important;
    color: var(--rcm-white) !important;
}

.mud-button-filled.mud-button-filled-primary:hover .mud-button-label,
.mud-button-filled.mud-button-filled-primary:hover span,
.mud-button-filled.mud-button-filled-primary:hover .mud-icon {
    color: var(--rcm-white) !important;
}

.mud-button-filled.mud-button-filled-secondary {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}

.mud-button-filled.mud-button-filled-secondary .mud-button-label,
.mud-button-filled.mud-button-filled-secondary span,
.mud-button-filled.mud-button-filled-secondary .mud-icon {
    color: var(--rcm-white) !important;
}

.mud-button-filled.mud-button-filled-secondary:hover {
    background-color: #d10024 !important;
    color: var(--rcm-white) !important;
}

.mud-button-filled.mud-button-filled-secondary:hover .mud-button-label,
.mud-button-filled.mud-button-filled-secondary:hover span {
    color: var(--rcm-white) !important;
}

/* General rule for all filled buttons - ensure white text */
.mud-button-filled .mud-button-label {
    color: var(--rcm-white) !important;
}

.mud-button-filled .mud-icon {
    color: var(--rcm-white) !important;
}

/* Toggle Group - Primary color (black bg, white text) */
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected.mud-primary,
.mud-toggle-item.mud-toggle-item-selected.mud-primary {
    background-color: var(--rcm-black) !important;
    color: var(--rcm-white) !important;
}

.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected.mud-primary *,
.mud-toggle-item.mud-toggle-item-selected.mud-primary .mud-typography,
.mud-toggle-item.mud-toggle-item-selected.mud-primary .mud-button-label,
.mud-toggle-item.mud-toggle-item-selected.mud-primary span {
    color: var(--rcm-white) !important;
}

.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected.mud-secondary,
.mud-toggle-item.mud-toggle-item-selected.mud-secondary {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}

.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected.mud-secondary *,
.mud-toggle-item.mud-toggle-item-selected.mud-secondary .mud-typography,
.mud-toggle-item.mud-toggle-item-selected.mud-secondary .mud-button-label,
.mud-toggle-item.mud-toggle-item-selected.mud-secondary span {
    color: var(--rcm-white) !important;
}

/* Ensure toggle item text is visible when selected */
.mud-toggle-item.mud-toggle-item-selected {
    color: var(--rcm-white) !important;
}

.mud-toggle-item.mud-toggle-item-selected .mud-typography,
.mud-toggle-item.mud-toggle-item-selected .mud-button-label,
.mud-toggle-item.mud-toggle-item-selected span,
.mud-toggle-item.mud-toggle-item-selected * {
    color: var(--rcm-white) !important;
}

/* Select/Input - Focus states */
.mud-input:focus-within {
    border-color: var(--rcm-red) !important;
}

.mud-input-underline:after {
    border-bottom-color: var(--rcm-red) !important;
}

/* Dividers */
.mud-divider {
    border-color: var(--rcm-light-gray) !important;
}

/* Alert overrides for ADA compliance */
.mud-alert-text {
    color: var(--rcm-black);
}

/* Paper/Surface */
.mud-paper {
    background-color: var(--rcm-white);
}

/* Icons in nav - default gray, red when active */
.mud-nav-link .mud-icon-root {
    color: #757575 !important;
    transition: color 0.2s ease;
}

.mud-nav-link:hover .mud-icon-root {
    color: var(--rcm-black) !important;
}

.mud-nav-link.rcm-nav-active .mud-icon-root,
.mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: var(--rcm-red) !important;
}

/* Progress indicators */
.mud-progress-linear-color-secondary .mud-progress-linear-bar {
    background-color: var(--rcm-red);
}

/* Snackbar */
.mud-snackbar.mud-snackbar-color-info {
    background-color: var(--rcm-black);
}

/* Focus visible for all MudBlazor interactive elements (unified) */
.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-tab:focus-visible,
.mud-chip:focus-visible,
.mud-select:focus-visible,
.mud-toggle-item:focus-visible,
.mud-input:focus-visible,
.mud-menu-activator:focus-visible {
    outline: 2px solid var(--rcm-red);
    outline-offset: 2px;
    box-shadow: none;
}

/* ============================================
   DATE PICKER / CALENDAR - Header Fix
   Use red background with white text for visibility
   ============================================ */

/* Picker toolbar (header area) */
.mud-picker-toolbar,
.mud-picker-toolbar.mud-picker-toolbar-primary,
.mud-picker .mud-picker-toolbar {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}

/* All text inside picker toolbar */
.mud-picker-toolbar *,
.mud-picker-toolbar .mud-typography,
.mud-picker-toolbar .mud-button-label,
.mud-picker-toolbar span,
.mud-picker-toolbar button {
    color: var(--rcm-white) !important;
}

/* Calendar header (month/year navigation) */
.mud-picker-calendar-header,
.mud-picker-calendar-header-switch,
.mud-picker-calendar-header-switch .mud-button-label {
    color: var(--rcm-black) !important;
}

/* Selected date in calendar */
.mud-picker-calendar-day.mud-selected,
.mud-picker-calendar-day.mud-range,
.mud-picker-calendar-day.mud-range-start,
.mud-picker-calendar-day.mud-range-end {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}

/* Icon buttons in picker toolbar */
.mud-picker-toolbar .mud-icon-button,
.mud-picker-toolbar .mud-icon-button .mud-icon {
    color: var(--rcm-white) !important;
}

/* Date range picker specific */
.mud-daterangepicker .mud-picker-toolbar,
.mud-picker-inline .mud-picker-toolbar {
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
}

/* ============================================
   FILTER TOOLBAR - Standardized toolbar
   ============================================ */
.rcm-filter-toolbar {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

/* ============================================
   FILTER COMPONENTS - Larger sizing
   ============================================ */

/* Toggle group filter - larger items */
.filter-toggle-group .mud-toggle-item {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 0.95rem !important;
}

/* Date range picker filter - larger input */
.filter-date-picker .mud-input-slot {
    min-height: 44px !important;
    font-size: 0.95rem !important;
}

.filter-date-picker .mud-input {
    min-height: 44px !important;
}

.filter-date-picker .mud-input-control {
    min-width: 240px;
}

/* Select filter - larger dropdown */
.filter-select .mud-input-slot {
    min-height: 44px !important;
    font-size: 0.95rem !important;
}

.filter-select .mud-input {
    min-height: 44px !important;
}

.filter-select .mud-select-input {
    padding: 10px 14px !important;
}

/* Compact select filter - for inline/toolbar use */
.filter-select-compact .mud-input-slot {
    min-height: 38px !important;
    font-size: 0.9rem !important;
}

.filter-select-compact .mud-input {
    min-height: 38px !important;
}

.filter-select-compact .mud-select-input {
    padding: 8px 12px !important;
}

/* ============================================
   ADA ACCESSIBILITY - CRITICAL RULES
   Text <18pt cannot use red on white
   ============================================ */

/* Ensure body text is always black, not red */
body, p, span, div, li, td, th, label {
    color: var(--rcm-black);
}

/* Red text is only allowed for headers (18pt+) */
.rcm-text-accent {
    color: var(--rcm-red);
    font-size: 1.125rem; /* 18px minimum */
}

/* Error pattern: black text + red icon (not red text) */
.rcm-error-message {
    color: var(--rcm-black);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rcm-error-message::before {
    content: "⚠";
    color: var(--rcm-red);
    font-size: 1.25rem;
}

/* Skip link for screen readers */
.rcm-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--rcm-red);
    color: var(--rcm-white);
    padding: 8px;
    z-index: 100;
}

.rcm-skip-link:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --rcm-light-gray: #FFFFFF;
        --rcm-medium-gray: #767676;
    }

    .mud-card {
        border: 2px solid var(--rcm-black);
    }
}

/* ============================================
   EXTERNAL LAYOUT - Login & Public Pages
   ============================================ */

.external-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--rcm-light-gray);
}

/* External Header */
.external-header {
    background-color: var(--rcm-light-gray);
    padding: 1rem 2rem;
    z-index: 1000;
}

.external-header-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.external-logo img {
    height: 60px;
    width: auto;
}

/* External Main Content */
.external-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rcm-light-gray);
    background-image: url('/Images/Login_Background_Pattern.png');
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
}

/* Login Background Pattern */
.login-background {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* External Footer */
.external-footer {
    background-color: var(--rcm-light-gray);
    color: var(--rcm-black);
    padding: 0.75rem 2rem;
}

.external-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.external-footer .footer-support {
    font-family: var(--rcm-font-body);
    font-size: 0.75rem;
    color: #666;
}

.external-footer .footer-email {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.external-footer .footer-email:hover {
    color: var(--rcm-red);
    text-decoration: underline;
}

.external-footer .footer-copyright {
    font-family: var(--rcm-font-body);
    font-size: 0.7rem;
    color: #999;
}

/* ============================================
   LOGIN PAGE STYLES
   ============================================ */

.login-card {
    background-color: var(--rcm-white);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 3rem;
    width: 100%;
    max-width: 480px;
    border-left: none; /* Override default card border */
    border-top: 3px solid var(--rcm-red);
}

.login-card .mud-card {
    border-left: none;
}

.login-logo-container {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    max-width: 380px;
    width: 100%;
    height: auto;
    margin-bottom: 0.75rem;
}

.login-subtitle {
    font-family: var(--rcm-font-header);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rcm-black);
    margin: 0;
}

/* Login form inputs */
.login-input {
    margin-bottom: 1rem;
}

.login-input .mud-input-outlined {
    border-radius: 0;
}

.login-input .mud-input-outlined .mud-input-slot {
    border-color: var(--rcm-black);
}

.login-input .mud-input-outlined:focus-within .mud-input-slot {
    border-color: var(--rcm-red);
    border-width: 2px;
}

/* Primary login button (Red background, white text) */
.login-btn-primary,
.login-btn-primary.mud-button-root,
.mud-button-root.login-btn-primary {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background-color: var(--rcm-red) !important;
    color: var(--rcm-white) !important;
    font-family: var(--rcm-font-header);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Ensure inner text/span elements are white */
.login-btn-primary .mud-button-label,
.login-btn-primary span,
.login-btn-primary .mud-typography {
    color: var(--rcm-white) !important;
}

.login-btn-primary:hover,
.login-btn-primary.mud-button-root:hover {
    background-color: #d10024 !important;
    color: var(--rcm-white) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.login-btn-primary:hover .mud-button-label,
.login-btn-primary:hover span {
    color: var(--rcm-white) !important;
}

.login-btn-primary:focus-visible {
    outline: 2px solid var(--rcm-red);
    outline-offset: 2px;
    box-shadow: none;
}

.login-btn-primary:disabled,
.login-btn-primary.mud-button-root:disabled {
    background-color: var(--rcm-medium-gray) !important;
    color: var(--rcm-white) !important;
    cursor: not-allowed;
    box-shadow: none;
}

.login-btn-primary:disabled .mud-button-label,
.login-btn-primary:disabled span {
    color: var(--rcm-white) !important;
}

/* Forgot password link */
.login-forgot-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: var(--rcm-red);
    font-family: var(--rcm-font-body);
    font-size: 0.875rem;
    text-decoration: underline;
}

.login-forgot-link:hover {
    color: var(--rcm-black);
}

/* Step progress indicator */
.login-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
}

.login-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 2px solid var(--rcm-light-gray);
    background-color: var(--rcm-white);
    color: #999;
}

.login-step-dot.active {
    background-color: var(--rcm-red);
    border-color: var(--rcm-red);
    color: var(--rcm-white);
}

.login-step-dot.done {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: var(--rcm-white);
}

.login-step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
}

.login-step-label.active {
    color: var(--rcm-black);
}

.login-step-connector {
    width: 48px;
    height: 2px;
    background-color: var(--rcm-light-gray);
    margin: 0 12px;
    transition: background-color 0.3s ease;
}

.login-step-connector.done {
    background-color: #4CAF50;
}

/* Step transition */
.login-form-step {
    animation: loginFadeIn 0.3s ease;
}

@keyframes loginFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Legal text */
.login-legal {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rcm-light-gray);
    font-size: 0.75rem;
    color: var(--rcm-dark-gray);
    line-height: 1.5;
}

.login-legal a {
    color: var(--rcm-black);
    text-decoration: underline;
}

.login-legal a:hover {
    color: var(--rcm-red);
}

/* Remember me checkbox */
.login-remember {
    margin: 0.75rem 0 0.25rem;
}

.login-remember-check .mud-checkbox {
    margin: 0;
}

.login-remember-check .mud-typography {
    font-size: 0.85rem;
    color: var(--rcm-dark-gray);
    user-select: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .external-header {
        padding: 0.75rem 1rem;
    }

    .external-header-content {
        justify-content: center;
    }

    .external-logo img {
        height: 45px;
    }

    .external-footer {
        padding: 0.75rem 1rem;
    }

    .external-footer-content {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .login-background {
        padding: 1rem;
    }

    .login-card {
        padding: 1.5rem;
        margin: 0.5rem;
        max-width: 100%;
    }

    .login-logo {
        max-width: 260px;
    }

    .login-logo-container {
        margin-bottom: 1.5rem;
    }

    .external-footer .footer-copyright {
        display: none;
    }
}

/* ============================================
   INTERNAL PAGE HEADER BANNER
   (for authenticated pages like Operator, etc.)
   ============================================ */

.page-title-banner {
    background-color: var(--rcm-dark-gray);
    color: var(--rcm-white);
    padding: 1rem 1.5rem;
    text-align: center;
}

.page-title-banner h1,
.page-title-banner h2,
.page-title-banner h3 {
    color: var(--rcm-white);
    margin: 0;
    font-family: var(--rcm-font-header);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================
   PLAN ANALYTICS PAGE STYLES
   ============================================ */

/* Plan list container - matches right panel height */
.plan-list-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Scrollable plan list */
.plan-list-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 200px;
    max-height: calc(100vh - 250px);
}

/* Grid row that stretches both columns to equal height */
.plan-analytics-grid {
    align-items: stretch !important;
}

.plan-analytics-grid > .mud-grid-item {
    display: flex !important;
    flex-direction: column;
}

.plan-analytics-grid .plan-list-container {
    flex: 1;
    min-height: 0;
}

/* Compact sort select */
.plan-sort-select {
    min-width: 100px !important;
    max-width: 120px !important;
}

.plan-sort-select .mud-input-slot,
.plan-sort-select .mud-select-input {
    font-size: 0.75rem !important;
    padding: 2px 4px !important;
    color: white !important;
}

.plan-sort-select .mud-icon-root {
    color: white !important;
}

.plan-sort-select::before,
.plan-sort-select::after {
    border-bottom: none !important;
}

/* Plan item hover states */
.plan-item {
    transition: background-color 0.15s ease, border-left-color 0.15s ease;
    cursor: pointer;
}

.plan-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.plan-item-selected {
    cursor: pointer;
}

/* Compact filter row */
.plan-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Right panel sticky header */
.plan-details-panel {
    position: sticky;
    top: 0;
}

/* ============================================
   LOADING SKELETON - Branded pulse animation
   ============================================ */

@keyframes rcm-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.rcm-skeleton {
    background: linear-gradient(90deg,
        var(--rcm-light-gray) 25%,
        #f5f5f5 50%,
        var(--rcm-light-gray) 75%);
    background-size: 200% 100%;
    animation: rcm-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
}

.rcm-skeleton-text {
    height: 1em;
    margin-bottom: 0.5rem;
    width: 100%;
}

.rcm-skeleton-card {
    height: 120px;
    width: 100%;
}

.rcm-skeleton-chart {
    height: 300px;
    width: 100%;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Hide non-printable elements */
    .mud-appbar,
    .mud-drawer,
    .main-footer,
    .mud-button,
    .logout-btn,
    .header-menu,
    .mud-snackbar-provider,
    .mud-dialog-provider,
    .mud-popover-provider,
    .nav-scroll-container,
    .filter-toggle-group,
    .filter-date-picker,
    .filter-select {
        display: none !important;
    }

    /* Remove margins/padding from main content */
    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .mud-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Cards: remove decorative borders, prevent breaks */
    .mud-card {
        border-left: none;
        box-shadow: none;
        break-inside: avoid;
        border: 1px solid var(--rcm-light-gray);
    }

    /* Tables: keep headers visible */
    .mud-table-head {
        background-color: var(--rcm-light-gray) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Charts: prevent page breaks inside */
    .mud-chart,
    .chart {
        break-inside: avoid;
    }

    /* Ensure text is black for readability */
    body, p, span, div, td, th {
        color: var(--rcm-black) !important;
    }

    /* Show link URLs after anchor text */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: var(--rcm-dark-gray);
    }

    /* Don't show URLs for nav/button links */
    .mud-nav-link a::after,
    .mud-button a::after {
        content: none;
    }
}

/* ============================================
   REDUCED MOTION - WCAG 2.1 Compliance
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Skeleton loaders: show flat gray instead of pulsing */
    .rcm-skeleton {
        animation: none !important;
        background: var(--rcm-light-gray) !important;
    }
}