html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: var(--mud-palette-info, #006bb7);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success, #26b050);
}

.invalid {
    outline: 1px solid var(--mud-palette-error, #e50000);
}

.validation-message {
    color: var(--mud-palette-error, #e50000);
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Never show Blazor's yellow bottom error strip (framework may inject #blazor-error-ui). */
#blazor-error-ui,
#blazor-error-ui.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
}

/* --- CCR V3: dark-green drawer active/hover states (the Mud default primary tint is
       invisible on the #004225 drawer, in light mode especially) --- */
.mud-drawer .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, .08) !important;
}
.mud-drawer .mud-nav-link.active {
    background-color: rgba(212, 175, 55, .22) !important;
    border-left: 4px solid #D4AF37 !important;
}
.mud-drawer .mud-nav-link.active .mud-nav-link-text {
    color: #fff !important;
    font-weight: 600 !important;
}
.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: #FFE082 !important;
}

/* --- Cross-device layout safety --- */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

/* Do NOT put overflow/clip on .mud-main-content — it becomes a containing block for
   position:fixed children (Home login landing) and collapses that overlay to a blank box. */
.mud-layout {
    max-width: 100%;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Fluid form controls in toolbars */
.ccr-fluid-field {
    width: 100% !important;
    max-width: 220px;
    min-width: 0;
}

/* Phone and tablet drawer (under 1280px). Closed, it sits off the left edge.
   Open, it overlays the page. The page itself always uses the full width. */
@media (max-width: 1279.98px) {
    .mud-layout .mud-main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mud-drawer.mud-drawer--closed {
        left: -100vw !important;
        visibility: hidden !important;
    }

    .mud-drawer.mud-drawer--open {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        right: auto !important;
        top: var(--mud-appbar-height, 64px) !important;
        height: calc(100% - var(--mud-appbar-height, 64px)) !important;
        width: min(280px, 86vw) !important;
        min-width: 0 !important;
        max-width: 86vw !important;
        transform: none !important;
        visibility: visible !important;
        z-index: calc(var(--mud-zindex-appbar, 1300) + 2) !important;
        background: var(--mud-palette-drawer-background);
        box-shadow: var(--mud-elevation-16);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }

    .mud-drawer-overlay.mud-drawer-overlay--open {
        z-index: calc(var(--mud-zindex-appbar, 1300) + 1) !important;
    }

    html:has(.mud-drawer.mud-drawer--open),
    html:has(.mud-drawer.mud-drawer--open) body {
        overflow: hidden;
    }

    .mud-drawer .mud-nav-link {
        min-height: 48px;
        height: auto;
    }

    .mud-drawer .mud-nav-link-text {
        white-space: normal;
        line-height: 1.3;
    }

    .mud-main-content > .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .mud-table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    .mud-main-content > .mud-container {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    /* Filter rows and page toolbars wrap instead of forcing sideways scroll. */
    .mud-main-content .mud-toolbar {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 48px;
        row-gap: 8px;
    }

    .ccr-fluid-field {
        max-width: none;
    }

    /* Compact page titles / primary CTAs that sit in a row */
    .ccr-page-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .ccr-page-header .mud-button-root {
        width: 100%;
    }

    /* Desk / workspace tabs: allow horizontal scroll instead of crushing labels */
    .ccr-desk-tabs .mud-tabs-toolbar,
    .ccr-desk-tabs .mud-tabs-toolbar-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .ccr-desk-tabs .mud-tab {
        padding-left: 10px !important;
        padding-right: 18px !important;
        min-height: 42px;
        font-size: 0.8rem;
    }
}

/* Fix for clipped badges on MudTabs.
   MudBlazor tab scroll areas often clip overlapping badges.
   Adding padding and forcing overflow visible ensures the badge is fully shown. */
.mud-tabs-scroll-area, .mud-tabs-toolbar-wrapper {
    overflow: visible !important;
}
.mud-tab {
    padding-right: 24px !important;
    overflow: visible !important;
}

/* Admin Hub — the "More options" menu sits immediately after the last tab.
   MudBlazor sizes the tab area at width:100%, which both squeezes a header placed after the tabs
   and strands it at the far right of the bar. So the tab area is sized to its tabs instead (still
   free to shrink, which is what lets the strip scroll), and the menu refuses to shrink at all. */
.ccr-admin-tabs .mud-tabs-tabbar .mud-menu {
    flex: 0 0 auto;
}

.ccr-admin-tabs .mud-tabs-tabbar-content {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
}

/* Touch-friendly dialogs on phones */
@media (max-width: 600px) {
    .mud-dialog {
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }

    .mud-dialog .mud-dialog-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}