@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

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

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

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

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* 150865: Something Went Wrong banner. Replaces the default lightyellow strip
   with a navy-accented toast that matches NotFoundPage / Error.cshtml palette.
   Anchor classes (.reload / .dismiss) are preserved so Blazor's framework
   handlers still bind correctly. */
#blazor-error-ui {
    background: #ffffff;
    border-left: 4px solid #c0392b;
    border-radius: 10px;
    bottom: 24px;
    box-shadow: 0 14px 30px rgba(58, 74, 109, 0.18);
    color: #1d3c6e;
    display: none;
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 420px;
    padding: 14px 44px 14px 18px;
    position: fixed;
    right: 24px;
    z-index: 1000;
}

    #blazor-error-ui::before {
        content: "\26A0";
        color: #c0392b;
        font-size: 1.15rem;
        margin-right: 8px;
        vertical-align: middle;
    }

    #blazor-error-ui .reload {
        color: #1d3c6e;
        font-weight: 600;
        margin-left: 6px;
        text-decoration: underline;
    }

    #blazor-error-ui .reload:hover { color: #1a335f; }

    #blazor-error-ui .dismiss {
        color: #8a96a8;
        cursor: pointer;
        font-size: 1rem;
        position: absolute;
        right: 12px;
        top: 8px;
    }

    #blazor-error-ui .dismiss:hover { color: #4a5b78; }

.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."
    }


.secondary-header {
    position: fixed;
    top: var(--mud-appbar-height);
    padding-right: 30px;
    width: -webkit-fill-available;
}

.hide-on-small {
    display: block; /* Default state: div is visible */
}
.mi-icon-fill-green {
    fill: #23a367 !important;
}
/* Large Devices (Large Desktops, 992px and up) */
@media (min-width: 992px) {
    .hide-on-small {
        display: block; /* Show the div for large devices */
    }

    .version-number {
        font-size: 0.875rem; /* Default font size for large devices */
    }
}

/* Medium Devices (Desktops, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-on-small {
        display: block; /* Show the div for medium devices */
    }

    .version-number {
        font-size: 0.75rem; /* Font size for medium devices */
    }
}

@media (max-width: 575px) {
    .hide-on-small {
        display: none; /* Hide the div for extra small devices */
    }

    .version-number {
        font-size: 0.625rem; /* Smaller font size for extra small devices */
        visibility: hidden;
    }
}

/* Small Devices (Tablets, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .hide-on-small {
        display: block; /* Show the div for small devices */
    }

    .version-number {
        font-size: 0.625rem; /* Font size for small devices */
    }
}

.version-number {
    font-size: 0.875rem; /* Default font size */
}

body {
    background-color: var(--mud-palette-surface) !important;
}

.mud-drawer {
    background-color: var(--mud-palette-surface) !important;
}

.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Bug 133580/133644 - Ensure label baseline position is consistent (MudBlazor default). */
.mud-input-label-outlined {
    transform: translate(14px, 14px) scale(1);
}

/* Bug 133580 - Prevent MudSelect value text from overflowing and obscuring the dropdown arrow */
div.mud-select-input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* US #93813 - Responsive Forms */

/* AC1 & AC6: Collapse multi-column form layouts to a single column, no horizontal overflow */
@media (max-width: 959px) {
    /* MudGrid has negative margins that cause overflow in dialogs.
       Hide the overflow on mud-dialog-content — the grid's empty margin zone is clipped
       but field content (which fills the dialog width exactly) remains fully visible. */
    .mud-dialog-content {
        overflow-x: hidden !important;
    }

    .mi-form-responsive .mud-grid-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* AC2: touch target ≥44px — satisfied by the existing site.css rule that adds
       padding-top: 15px + padding-bottom: 15px to all outlined inputs, making them ~46px.
       An explicit min-height rule is NOT added here because <input> elements use
       box-sizing: content-box, so min-height stacks on top of padding (44 + 30 = 74px). */

    /* Bug 133644 - Ensure date pickers / selects (inputs with end adornments) are tall
       enough to contain a 2-line wrapped label on mobile. */
    .mud-input.mud-input-outlined.mud-input-adorned-end {
        min-height: 60px;
    }

    .mud-input-label-outlined {
        max-width: calc(100% - 48px);
    }

    /* AC3: Keep all popovers (dropdowns, date pickers) on-screen on mobile. */
    .mud-popover {
        left: 8px !important;
        max-width: calc(100vw - 16px) !important;
        overflow-x: hidden !important;
    }

    /* AC3: Restore visual boundary for the date picker calendar. */
    .mud-picker-popover-paper {
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
    }

    /* AC5: Reserve space for inline validation message so errors don't push other fields */
    .mi-form-responsive .mud-input-control-helper-container {
        min-height: 1.1em;
    }
}

/* AC4: Form action buttons span full width on screens ≤ 600px.
   .mi-form-actions works standalone — no parent .mi-form-responsive required. */
@media (max-width: 600px) {
    .mi-form-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* MudTooltip renders as inline-flex by default so it won't stretch inside the flex column.
       Force every direct child (tooltip wrapper or bare button) to full width first. */
    .mi-form-actions > * {
        width: 100% !important;
        display: block !important;
    }

    .mi-form-actions .mud-button-root {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
        justify-content: center !important;
    }

    /* AC4: Dialog action buttons (MudDialog <DialogActions>) also span full width */
    .mi-form-responsive .mud-dialog-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    .mi-form-responsive .mud-dialog-actions .mud-button-root {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
        justify-content: center !important;
    }
}

/* US #93813 - Public portal AppBar: keep agency name fully visible on small screens.
   Strategy: keep the AppBar at its normal fixed height (avoids MudMainContent overlap issues),
   and instead shrink the logo + reduce font size so everything fits on ONE line.
   At 375px: 375 - 32px(toolbar padding) - 56px(logo) - 12px(gap) = 275px for text.
   "Board of Professional Singers" at 1rem (~8px/char) = ~232px → fits comfortably. */
.public-complaint-appbar-content {
    width: 100%;
    overflow: hidden;
}

.public-complaint-logo {
    max-height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    overflow: hidden; /* prevents alt text from wrapping and overflowing the AppBar if the image fails to load */
    display: block;
}

.public-complaint-agency-name {
    color: #333333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    /* Shrink the logo to free up horizontal space for the agency name */
    .public-complaint-logo {
        max-height: 32px;
        max-width: 56px;
    }

    /* Reduce from MudBlazor's h6 (1.25rem/20px) to 1rem so the name fits on one line */
    .public-complaint-agency-name {
        font-size: 1rem !important;
    }
}

/* Restore list styles inside rich-text complaint form instructions.
   Bootstrap resets ul/ol list-style to none globally; this re-enables bullets/numbers
   only within the injected MarkupString block (scoped CSS can't reach inside MarkupString). */
.form-instructions-text ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.form-instructions-text ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
}

/* Ensure hyperlinks in rich-text complaint form instructions are always visible.
   MudBlazor resets anchor text-decoration to none globally; re-apply underline so
   links configured via the rich text editor are distinguishable without hover. */
.form-instructions-text a {
    color: #0071c1;
    text-decoration: underline;
}

.form-instructions-text a:hover {
    color: #004f8a;
    text-decoration: underline;
}