.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 1rem;
    font-weight: bold;
}

.mud-button {
    min-width: 30px !important;
}

.mud-button-filled-size-small {
    padding: 3px 0px 3px 9px;
}

.mud-button-year {
    font-size: 0.8125rem;
}

.mud-table-sort-label {
    width: max-content !important;
}
/*th.custom.mud-table-cell {
            padding:5px 14px !important;
            font-size:16px !important;
        }*/

.mud-table-toolbar {
    height: auto !important;
}

 
.mud-table-head .mud-table-cell {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    padding: 10px 16px !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.mud-table-body .mud-table-cell {
    padding: 10px 16px !important;
    color: #334155 !important;
    font-size: 0.8125rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.mud-table-row:hover {
    background-color: #f8fafc !important;
}

.mud-table-toolbar {
    background-color: #fafbfc !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #f1f5f9;
}

.mud-appbar-enterprise {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #153e75 55%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.30) !important;
}

    .mud-appbar-enterprise a {
        color: rgba(255, 255, 255, 0.85);
    }

    .mud-appbar-enterprise .mud-button {
        color: rgba(255, 255, 255, 0.85);
    }

    .mud-appbar-enterprise .mud-input-label,
    .mud-appbar-enterprise .mud-select .mud-input-label {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .mud-appbar-enterprise .mud-input-outlined-border {
        border-color: rgba(255, 255, 255, 0.55) !important;
    }

    .mud-appbar-enterprise .mud-input .mud-input-slot,
    .mud-appbar-enterprise .mud-input input,
    .mud-appbar-enterprise .mud-autocomplete {
        color: #fff !important;
    }

/* Appbar layout zones */
.appbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.appbar-logo {
    height: 32px;
    width: auto;
    border-radius: 6px;
}

.appbar-brand-title {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.appbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 480px);
}

.appbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Company + Financial Year pill controls */
.appbar-company,
.appbar-fy {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.2s ease;
}

.appbar-company:hover,
.appbar-fy:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}

.appbar-company .mud-input-outlined-border,
.appbar-fy .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.22) !important;
    border-radius: 10px;
}

.appbar-company .mud-input-focused .mud-input-outlined-border,
.appbar-fy .mud-input-focused .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.65) !important;
}

.appbar-company {
    min-width: 230px;
    max-width: 340px;
}

.appbar-fy {
    min-width: 170px;
}

@media (max-width: 1279px) {
    .appbar-center {
        max-width: calc(100% - 300px);
    }
}

/* Keep header pill fields dark on any page (page-level css may force light backgrounds) */
.mud-appbar-enterprise .mud-input-outlined,
.mud-appbar-enterprise .appbar-company .mud-input,
.mud-appbar-enterprise .appbar-fy .mud-input {
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.mud-appbar-enterprise .mud-input-outlined:hover,
.mud-appbar-enterprise .appbar-company .mud-input:hover,
.mud-appbar-enterprise .appbar-fy .mud-input:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}



.mud-table {
    width: 100%;
}

.column-1x {
    width: 45px;
}

.column-2x {
    width: 90px;
}

.column-3x {
    width: 120px;
}

.column-4x {
    width: 150px;
}

.column-5x {
    width: 180px;
}

.column-6x {
    width: 210px;
}

/* ***************************************** */

.text-small-1x {
    font-size: .71rem;
}

.text-small-2x {
    font-size: .61rem;
}

/* ***************************************** */

.ActionColor {
    background-color: #fff8e9;
    border-color: #ffcd65";
}

.mudTitleABar {
    background-image: linear-gradient(to right top, #051937, #0f173b, #1c153e, #28103f, #34073d); 
    color:#fff;
}
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol{
    font-weight:normal !important;
}

/* Ensure validation and error messages are displayed in red consistently */
.field-validation-error,
.validation-message,
.text-danger,
.mud-input-error,
.mud-error,
.mud-error-text,
.mud-input-helper-text.mud-error,
.mud-input-helper-text.mud-input-error {
    color: #dc3545 !important; /* Bootstrap danger red */
}

/* Also make validation summary messages red */
.validation-summary-errors,
.validation-summary-valid {
    color: #dc3545 !important;
}

/* More specific targets for MudBlazor input helper/error text to override theme styles */
.mud-input-root .mud-input-helper-text,
.mud-input-helper-text,
.mud-input-helper-text.mud-input-error,
.mud-input-helper-text.mud-error,
.mud-input-helper-text.mud-input-error *,
.mud-input-helper-text.mud-error * {
    color: #dc3545 !important;
}

/* Also target MudTextField internal helper/error spans */
.mud-textfield .mud-input-helper-text,
.mud-text-field .mud-input-helper-text {
    color: #dc3545 !important;
}

/* ============================================================
   Appbar dropdowns (Company select + Financial Year autocomplete)
   The outlined "notch" is painted by the legend label, which MudBlazor
   fills with an opaque surface colour. On the dark appbar that renders as
   a solid block and swallows the near-white label text, so the label and
   the selected name both look broken. The rules below neutralise the
   legend fill, then style border / label / value / adornment explicitly.
   Declared last so they win over the generic .mud-input rules above.
   ============================================================ */
.mud-appbar-enterprise .appbar-company,
.mud-appbar-enterprise .appbar-fy {
    background: rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.mud-appbar-enterprise .appbar-company:hover,
.mud-appbar-enterprise .appbar-fy:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}

/* Notch must be transparent so the pill + appbar gradient show through */
.mud-appbar-enterprise .appbar-company .mud-input-label-outlined,
.mud-appbar-enterprise .appbar-fy .mud-input-label-outlined,
.mud-appbar-enterprise .appbar-company legend,
.mud-appbar-enterprise .appbar-fy legend,
.mud-appbar-enterprise .appbar-company .mud-input-label-outlined span,
.mud-appbar-enterprise .appbar-fy .mud-input-label-outlined span {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Border drawn by MudBlazor's absolutely positioned overlay span */
.mud-appbar-enterprise .appbar-company .mud-input-outlined-border,
.mud-appbar-enterprise .appbar-fy .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.28) !important;
    border-radius: 10px;
}

.mud-appbar-enterprise .appbar-company:focus-within .mud-input-outlined-border,
.mud-appbar-enterprise .appbar-fy:focus-within .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.80) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* Floating label */
.mud-appbar-enterprise .appbar-company .mud-input-label,
.mud-appbar-enterprise .appbar-fy .mud-input-label {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selected value text (MudSelect renders it in a readonly input) */
.mud-appbar-enterprise .appbar-company .mud-select-input,
.mud-appbar-enterprise .appbar-fy .mud-input,
.mud-appbar-enterprise .appbar-fy input {
    color: #ffffff !important;
    font-weight: 500;
    caret-color: #ffffff;
}

.mud-appbar-enterprise .appbar-company .mud-select-input::placeholder,
.mud-appbar-enterprise .appbar-fy input::placeholder {
    color: rgba(255, 255, 255, 0.50) !important;
    opacity: 1;
}

/* Adornment icons */
.mud-appbar-enterprise .appbar-company .mud-input-adornment-start .mud-icon,
.mud-appbar-enterprise .appbar-fy .mud-input-adornment-start .mud-icon,
.mud-appbar-enterprise .appbar-company .mud-input-adornment-end .mud-icon,
.mud-appbar-enterprise .appbar-fy .mud-input-adornment-end .mud-icon {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 18px;
}

.mud-appbar-enterprise .appbar-company .mud-input-adornment-start,
.mud-appbar-enterprise .appbar-fy .mud-input-adornment-start {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Keep the pill widths but stop the value from being clipped */
.mud-appbar-enterprise .appbar-company {
    min-width: 230px;
    max-width: 340px;
}

.mud-appbar-enterprise .appbar-fy {
    min-width: 180px;
}