:root {
    /* Brand - Coke Red */
    --coke-red-color: #F40000;
    --dark-coke-red-color: #c10000;
    --coke-red-rgb: 244, 0, 0; /* rgb triplet for rgba() alpha */

    /* Greens */
    --green-color: #00C853;
    --dark-green-color: #2E7D32;
    --success-green-color: #4caf50;
    --dark-success-green-color: #218838;

    /* Oranges */
    --orange-color: #F9A825;
    --dark-orange-color: #F57F17;
    --orange-tint-color: #fff3e0; /* subtle background for orange badges */
    --orange-emphasis-color: #b34700; /* readable dark orange text */

    /* Teals */
    --teal-color: #00897B;
    --dark-teal-color: #00796B;

    /* Steel blues */
    --dark-steel-blue-color: #5A7F99;
    --light-steel-blue-color: #85abc4;

    /* Base / neutral anchors */
    --white-color: #ffffff;
    --black-color: #000000;
    --light-black-color: #444444;
    --black-rgb: 0, 0, 0; /* rgb triplet for rgba() alpha */

    /* Red / pink tints */
    --coke-red-tint-color: #fff1f1;
    --coke-red-tint-hover-color: #ffe3e3;
    --coke-red-tint-border-color: #ffd5d5;
    --coke-red-tint-border-hover-color: #ffb3b3;
    --pink-tint-color: #fceaea;
    --unauthorized-bg-color: #fbeae5;
    --unauthorized-border-color: #f5c6cb;
    --danger-text-color: #dc3545;
    --error-boundary-bg-color: #b32121;

    /* Cool slate blue-greys - saturated cool tones, used for text (light to dark) */
    --slate-light-color: #6b7280;
    --slate-color: #5d6470;
    --slate-dark-color: #22252f;

    /* Cool greys - Bootstrap-tinted UI surface/border greys (light to dark).
       Split out of the warm ramp; distinct from the --slate-* text colors. */
    --cool-grey-100: #e9ecef;
    --cool-grey-200: #dee2e6;
    --cool-grey-300: #d9d9dd;
    --cool-grey-400: #cfcfd4;

    /* Brand silver greys (light to dark) */
    --light-grey-color: #F1F2F3;
    --grey-color: #E7E9EB;
    --silver-grey-color: #DBDEE2;
    --dark-silver-grey-color: #a8abaf;
    --darker-silver-grey-color: #929599;

    /* Warm/neutral greyscale ramp (light -> dark), Tailwind-style numbering.
       Cool blue-tinted greys were moved to the --cool-grey-* group above. */
    --grey-50: #f9f9f9;
    --grey-75: #f7f7f8;
    --grey-100: #f5f5f5;
    --grey-125: #f2f2f2;
    --grey-150: #f0f0f0;
    --grey-175: #eeeeee;
    --grey-200: #ececec;
    --grey-250: #e9e9eb;
    --grey-275: #e5e5e5;
    --grey-325: #e0e0e0;
    --grey-350: #dddddd;
    --grey-425: #c4c4c4;
    --grey-450: #bdbdbd;
    --grey-475: #b5b5b5;
    --grey-500: #9a9a9a;
    --grey-550: #888888;
    --grey-600: #707070;
    --grey-650: #666666;
    --grey-700: #555555;
    --grey-750: #333333;
    --grey-850: #1a1a1a;
    --grey-900: #111111;

    /* Office / file-type brand colors */
    --office-blue-color: #0078d4;
    --dark-office-blue-color: #005a9e;
    --pdf-red-color: #c62828;
    --excel-green-color: #217346;
    --word-blue-color: #2b579a;

    /* Gradient stops */
    --cyan-gradient-start-color: #06b6d4;
    --cyan-gradient-end-color: #0e7490;
    --violet-gradient-start-color: #8b5cf6;
    --violet-gradient-end-color: #6d28d9;

    /* Semantic role aliases - reference intent, not a raw palette value.
       Re-point these to re-theme without touching components. */
    --text-body: var(--grey-900);
    --text-muted: var(--grey-650);
    --text-subtle: var(--grey-550);
    --border-color: var(--grey-275);
    --surface-muted: var(--grey-50);
}

html,
body {
    font-family: 'Segoe UI';
    https://localhost:7280/font-size: 17px;
    overflow-y: hidden;
}

.bg-coke-red {
    background-color: var(--coke-red-color);
}

.bg-light-grey {
    background-color: var(--light-grey-color);
}

.bg-grey {
    background-color: var(--grey-color);
}

.bg-silver-grey {
    background-color: var(--silver-grey-color);
}

/* Brand the selected/active dropdown item with coke-red instead of Bootstrap blue */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--light-grey-color);
    --bs-dropdown-link-active-color: var(--black-color);
    --bs-dropdown-link-hover-bg: var(--light-grey-color);
    --bs-dropdown-link-hover-color: var(--black-color);
}

.icon-green {
    color: var(--green-color);
}

.icon-dark-green {
    color: var(--dark-green-color);
}

.icon-black {
    color: var(--black-color);
}

.icon-grey {
    color: var(--grey-600);
}

.icon-orange {
    color: var(--orange-color);
}

/* Orange "subtle" badge for the Opened In Error closed reason,
   matching the orange left strip on the ticket card. Bootstrap has no
   orange-subtle utility, so this mirrors its bg-*-subtle/text-*-emphasis pairing. */
.badge.badge-opened-in-error {
    color: var(--orange-emphasis-color);
    background-color: var(--orange-tint-color);
}

.icon-steel-blue {
    color: var(--dark-steel-blue-color);
}

.required-indicator {
    color: var(--coke-red-color);
}

nav {
    z-index: 200;
}

.navbar-brand {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.navbar-toggler-icon {
    height: 1em !important;
    width: 1em !important;
}

.navbar-toggler {
    padding: .2rem .6rem !important;
}

.pagination .page-link {
    color: var(--coke-red-color);
}

    .pagination .page-link:hover {
        background-color: var(--coke-red-color);
        color: var(--white-color);
    }

.pagination .page-item.active .page-link {
    background-color: var(--coke-red-color);
    color: var(--white-color);
    border-color: var(--coke-red-color);
}

.pagination .page-item.disabled .page-link {
    color: var(--black-color);
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--black-color) !important;
    border-width: 1px;
}

.form-check-input,
.form-select,
.form-control {
    border-color: var(--grey-425);
}

    .form-check-input:focus,
    .form-select:focus,
    .form-control:focus {
        border-color: var(--black-color);
        box-shadow: none;
    }

    .form-check-input:hover,
    .form-select:hover,
    .form-control:hover {
        border-color: var(--black-color);
    }

    .form-check-input:checked {
        background-color: var(--coke-red-color) !important;
        border-color: var(--coke-red-color) !important;
    }

.mud-radio-icons.mud-checked svg {
    fill: var(--coke-red-color) !important;
}
.custom-btn-red {
    background-color: var(--coke-red-color);
    color: var(--white-color);
    border-color: var(--coke-red-color);
}

.custom-btn-silver-grey {
    background-color: var(--dark-silver-grey-color);
    color: var(--white-color);
    border-color: var(--dark-silver-grey-color);
}

.custom-btn-black {
    background-color: var(--black-color);
    color: var(--white-color);
    border-color: var(--black-color);
}

.custom-btn-green {
    background-color: var(--dark-green-color);
    color: var(--white-color);
    border-color: var(--dark-green-color);
}

.custom-btn-green:hover {
    background-color: var(--dark-success-green-color);
    border-color: var(--dark-success-green-color);
}

.custom-btn-green:disabled {
    background-color: var(--dark-green-color);
    color: var(--white-color);
    border-color: var(--dark-green-color);
}

.custom-btn-steel-blue {
    background-color: var(--dark-steel-blue-color);
    color: var(--white-color);
    border-color: var(--dark-steel-blue-color);
}

.custom-btn-steel-blue:hover {
    background-color: var(--dark-steel-blue-color);
    border-color: var(--dark-steel-blue-color);
    filter: brightness(0.9);
}

.custom-btn-steel-blue:disabled {
    background-color: var(--dark-steel-blue-color);
    color: var(--white-color);
    border-color: var(--dark-steel-blue-color);
}

.custom-btn-red:disabled {
    background-color: var(--coke-red-color);
    color: var(--white-color);
    border-color: var(--coke-red-color);
}

.custom-btn-red:hover {
    background-color: var(--dark-coke-red-color);
    border-color: var(--dark-coke-red-color);
}

.custom-btn-silver-grey:hover {
    background-color: var(--darker-silver-grey-color);
    border-color: var(--darker-silver-grey-color);
}

.custom-btn-silver-grey:disabled {
    background-color: var(--dark-silver-grey-color);
    color: var(--white-color);
    border-color: var(--dark-silver-grey-color);
    opacity: 1;
}

.custom-btn-black:disabled {
    background-color: var(--black-color);
    color: var(--white-color);
    border-color: var(--black-color);
}

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

/* Keep the black fill/white text when the button is used as a dropdown toggle or is
   otherwise active/focused. Bootstrap's default .btn active-state variables would
   otherwise override the plain background and make the button appear to vanish. */
.custom-btn-black.show,
.custom-btn-black:active,
.custom-btn-black:focus,
.custom-btn-black:focus-visible {
    background-color: var(--black-color);
    border-color: var(--black-color);
    color: var(--white-color);
}

.mud-input-control.mud-input-control-margin-dense {
    margin: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.mud-input.mud-input-outlined {
    height: 42px;
}

.mud-input-slot {
    font-size: 16px !important;
    font-weight: 500 !important;
}

ul.validation-error {
    list-style-type: none !important;
    color: var(--coke-red-color) !important;
    padding: 0;
    margin-bottom: 0;
    font-size: smaller;
}

.mud-tab {
    border: 1px solid var(--grey-color) !important;
}

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

.mud-tabs.flex-wrapper {
    min-height: 0;
    flex-grow: 1;
}

.flex-wrapper .mud-tabs-panels {
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
}

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

.full-width-tabs .mud-tabs-tabbar-wrapper {
    display: flex;
    width: 100%
}

.full-width-tabs .mud-tab {
    text-align: center;
    width: 100% !important
}

.full-width-tabs .mud-tabs-tabbar-wrapper > div {
    width: 33.3% !important;
}

.mud-tab {
    text-transform: none !important;
}

.form-control-label,
.grid-header,
.table-header {
    color: var(--mud-palette-text-primary);
    font-weight: 650;
    line-height: 1.5rem;
    font-size: .875rem;
}

.grid-header {
    cursor: pointer;
}

    .grid-header:hover,
    .grid-header:focus {
        cursor: pointer;
    }

.form-data,
.grid-data {
    line-height: 1.5rem;
    font-size: .875rem;
}

.mud-selected-item,
.mud-select-extended .mud-disabled {
    background-color: var(--light-grey-color) !important;
}

    .mud-selected-item > div > p {
        color: var(--black-color) !important;
    }

.customized-mud-switch label.mud-switch {
    margin-inline-end: -1px !important;
}

ul.margin-less-pagination {
    margin-bottom: 0rem !important;
}

.blazor-error-boundary {
    ) no-repeat 1rem/1.8rem, var(--error-boundary-bg-color);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--white-color);
}

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

.overlay {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--black-rgb), 0.6);
    z-index: 10000;
}

.spinner {
    border: 8px solid var(--dark-silver-grey-color);
    border-top: 8px solid var(--coke-red-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(50vh + 3.25rem) 0 auto 0.2rem;
    color: var(--grey-150);
    z-index: 10000;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

.font-8rem {
    font-size: 0.8rem !important;
}

.custom-card {
    box-shadow: 0 4px 5px rgba(var(--black-rgb), 0.1);
    border-radius: 6px;
    border-top: 1px solid rgba(var(--black-rgb), 0.17);
    border-right: 1px solid rgba(var(--black-rgb), 0.17);
    border-bottom: none;
}

.stepper-flex-wrapper {
    gap: .2rem !important;
}

    .stepper-flex-wrapper > div.mud-width-full,
    .stepper-flex-wrapper > div.mud-width-full > div {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        min-height: 0 !important;
    }

.mud-stepper-header {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.mud-progress-linear {
    top: 12px !important;
}

.mud-stepper-header > p {
    margin-top: -25px !important;
}

.small-mud-select > div > div.mud-input.mud-input-outlined {
    height: 33.6px !important;
}

div.validation-message {
    color: var(--coke-red-color) !important;
    font-size: smaller !important;
}

textarea.form-control.invalid, input.form-control.invalid {
    border-color: var(--coke-red-color) !important;
}

.mud-auto-complete-wrapper-less-height
.mud-input-control-helper-container {
    display: none !important;
}

.mud-auto-complete-wrapper-less-height
.mud-input-control-input-container > .mud-input.mud-input-outlined {
    height: 35px !important;
}

.mud-auto-complete-custom-disable
.mud-input-control-input-container > .mud-input.mud-disabled {
    color: var(--slate-dark-color) !important;
    background-color: var(--cool-grey-100) !important;
    opacity: 1 !important;
}

    /* Match the Bootstrap .form-control:disabled look (solid grey, full opacity,
       no faded text) so the Assigned To field aligns with the disabled Subject input. */
    .mud-auto-complete-custom-disable .mud-input.mud-disabled input,
    .mud-auto-complete-custom-disable .mud-input.mud-disabled .mud-input-slot {
        color: var(--slate-dark-color) !important;
        opacity: 1 !important;
    }

.font-500 {
    font-weight: 500 !important;
}

.disabled-field {
    background-color: var(--cool-grey-100);
    opacity: 1;
    pointer-events: none;
}

.red-left-card-line {
    border-left: 4.5px solid var(--coke-red-color);
}

.steel-blue-left-card-line {
    border-left: 4.5px solid var(--dark-steel-blue-color);
}

/* Left accent border for the Create Linked Ticket modal, color-matched to the ticket type icons in the Create Ticket dropdown. */
.ticket-modal-accent-parts-request .modal-content {
    border-left: 4.5px solid var(--dark-green-color);
}

.ticket-modal-accent-purchase-order .modal-content {
    border-left: 4.5px solid var(--orange-color);
}

.ticket-modal-accent-stock-transfer-order .modal-content {
    border-left: 4.5px solid var(--dark-steel-blue-color);
}

.mud-button-outlined.red-outlined-button {
    color: var(--coke-red-color) !important;
    border-color: var(--coke-red-color) !important;
}

.mud-button-outlined.steel-blue-outlined-button {
    color: var(--dark-steel-blue-color) !important;
    border-color: var(--dark-steel-blue-color) !important;
}

.mud-button-outlined:disabled.red-outlined-button,
.mud-button-outlined:disabled.steel-blue-outlined-button {
    color: var(--darker-silver-grey-color) !important;
    border-color: var(--darker-silver-grey-color) !important;
}

.mud-button-filled.red-filled-button {
    color: var(--coke-red-color) !important;
    border-color: var(--coke-red-color) !important;
}

.mud-button-filled:hover.red-filled-button {
    color: var(--dark-coke-red-color) !important;
    border-color: var(--dark-coke-red-color) !important;
}

.fs-smaller {
    font-size: smaller;
}

.fs-7 {
    font-size: .8rem !important;
}

.no-error-message > div.mud-input-control-helper-container {
    display: none;
}

.modal-max-height {
    max-height: 45vh;
    overflow-y: auto;
}

h5.modal-title {
    font-size: 1rem !important;
}

.modal-header {
    padding: .6rem !important;
}

.custom-dialog .modal-body {
    padding-top: 7px !important;
    padding-bottom: 0px !important;
}

.custom-dialog .modal-footer {
    padding-top: 0px !important;
    padding-bottom: 2px !important;
}

.non-header.modal-header {
    display: none !important;
}

.custom-dialog .modal-footer .d-grid button:nth-of-type(2) {
    background-color:var(--coke-red-color);
    border-color:var(--coke-red-color);
    color: var(--white-color);
}

    .custom-dialog .modal-footer .d-grid button:nth-of-type(2):hover {
        background-color:var(--dark-coke-red-color);
    }

.form-check-input:disabled {
    background-color: var(--grey-425);
}

/* App-wide MudTooltip helper. Use with `RootClass="tooltip-fill"` whenever a
   MudTooltip wraps a flex child that must shrink (truncate). MudTooltip injects
   an extra root element between the flex parent and the actual anchor; without
   these resets it inherits min-width:auto and breaks text-overflow: ellipsis. */
.tooltip-fill {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}