/* Theme 2.0 (#520) Wave 2: theme colors, the drawer palette, and the typography family now come
   from the MudBlazor palette (PortalTheme) and tip-app-theme.css, not a hardcoded :root. Only the
   non-palette size and behavior tokens remain here. */
:root {
    --mud-palette-action-default-hover: none;
    --mud-typography-subtitle1-size: .875rem;
    --mud-typography-body1-size: .875rem;
    --mud-typography-body2-size: .875rem;
}

.tips-dialog {
    padding: .5rem !important;
}

.tips-dialog-title {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 4px !important;
    padding-top: 4px !important;
    font-size: 1.25rem !important;
}

.tips-dialog-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 4px !important;
    padding-top: 4px !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

.tips-dialog-actions {
}

.tips-mud-button {
    font-family: var(--mud-typography-default-family);
    text-transform: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
}

.tips-mud-button-primary {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}
    .tips-mud-button-primary:hover {
        background-color: var(--mud-palette-primary);
    }

.tips-mud-button-primary-outlined {
    color: var(--mud-palette-primary);
    background-color: #fff;
    border-color: var(--mud-palette-primary);
}
    .tips-mud-button-primary-outlined:hover {
        background-color: #fff;
    }

.tips-mud-button-secondary {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
    .tips-mud-button-secondary:hover {
        background-color: var(--bs-secondary);
    }

.tips-mud-button-danger {
    color: #fff;
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

    .tips-mud-button-danger:hover {
        background-color: var(--bs-danger);
    }

.tips-mud-button-success {
    color: #fff;
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

    .tips-mud-button-success:hover {
        background-color: var(--bs-success);
    }

.tips-mud-button-success-outlined {
    color: var(--bs-success);
    background-color: #fff;
    border-color: var(--bs-success);
}

    .tips-mud-button-success-outlined:hover {
        background-color: #fff;
    }


.tips-mud-button-sm {
    min-width:32px;
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
}

.tips-mud-button-xs {
    min-width: 24px;
    padding: .25rem .5rem;
    font-size: .75rem;
    border-radius: .2rem;
}

/* Disabled buttons: muted fill with READABLE muted text. The old rule set color and
   background-color to the same token, which made the label invisible. background-image is cleared
   because the filled primary's gradient would paint over the fill. */
.mud-button-root:disabled {
    color: var(--mud-palette-text-disabled) !important;
    background-color: var(--mud-palette-action-disabled-background) !important;
    background-image: none !important;
    border-color: var(--mud-palette-lines-default) !important;
    cursor: default;
    pointer-events: none;
}

/* Disabled filled buttons: flat neutral gray, readable label, dashed edge as an inset outline so the size holds.
   Toggle items share it, selected or not, so a busy group reads as off the same way a disabled button does. */
.mud-button-filled:disabled,
.mud-toggle-item:disabled {
    color: var(--mud-palette-text-secondary) !important;
    background-color: var(--tip-btn-disabled-bg, var(--mud-palette-background-gray)) !important;
    outline: 1px dashed var(--mud-palette-lines-inputs);
    outline-offset: -1px;
}

.mud-list-item {
    padding-top: 2px;
    padding-bottom: 2px;
}

.mud-primary-hover {
    background-color: transparent !important;
}

.mud-primary-text {
    color: var(--mud-palette-primary) !important;
}

/* Theme 2.0 (#520): Color.Tertiary is used app-wide as "muted caption" text, but the
   palette's Tertiary slot is the blue accent, so labels and subtitles rendered blue in
   dark mode. Map tertiary-colored text to the theme's secondary text tone so muted text
   reads as a neutral gray in both modes, uniformly across every page. Blue stays available
   as a real accent via Color.Info or the palette where a page intends it. */
.mud-tertiary-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* Theme 2.0 (#520): same story as Color.Tertiary — Color.Secondary is used widely as muted
   caption/label text and decorative icons, but the palette's Secondary slot is a blue accent,
   so that text rendered blue in dark mode. Map secondary-colored TEXT/ICONS to the theme's
   secondary text tone so muted text reads as neutral gray in both modes. Only MudText/MudIcon
   use .mud-secondary-text; chips, buttons and progress keep their own secondary classes. */
.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* Links role: every MudLink and every enabled Color.Primary text button reads in --tip-link. Default text
   buttons (Cancel, Close) stay neutral; status, Inherit, tab-link and tip-accent-override MudLinks keep their
   own color. MudLink needs !important to beat .mud-primary-text. */
.mud-link:not(.mud-link-disabled):not(.mud-error-text):not(.mud-warning-text):not(.mud-success-text):not(.mud-info-text):not(.mud-inherit-text):not(.tip-accent-override):not(.tip-tab-link) {
    color: var(--tip-link) !important;
}

.mud-button-text.mud-button-text-primary:not(:disabled):not(.tip-accent-override):not(.loa-invoice-download) {
    color: var(--tip-link);
    --mud-ripple-color: var(--tip-link);
}

/* Hover underlines the label rather than tinting the button: the light link color is 4.70:1 on the page
   gray, so any tint under it would drop the label below 4.5:1. */
@media (hover: hover) and (pointer: fine) {
    .mud-button-text.mud-button-text-primary:not(:disabled):not(.tip-accent-override):not(.loa-invoice-download):hover {
        background-color: transparent;
        text-decoration: underline;
    }
}

/* Focus and press keep the button background clear for the same reason. MudBlazor 9.11 tints
   .mud-button-text.mud-button-text-primary:focus-visible and :active with --mud-palette-primary-hover
   (0,3,0); this rule is (0,6,0), so it wins without !important. */
.mud-button-text.mud-button-text-primary:not(:disabled):not(.tip-accent-override):not(.loa-invoice-download):focus-visible,
.mud-button-text.mud-button-text-primary:not(:disabled):not(.tip-accent-override):not(.loa-invoice-download):active {
    background-color: transparent;
}

/* Keyboard focus on links and link text buttons: a 2px link-colored ring, so focus never looks like hover. */
.mud-link:focus-visible,
.mud-button-text.mud-button-text-primary:not(.tip-accent-override):not(.loa-invoice-download):focus-visible {
    outline: 2px solid var(--tip-link);
    outline-offset: 2px;
}

.mud-list-item-clickable {
    background-color: transparent;
}

/* ===================================================================
   Toggle groups: one selected-state rule for every MudToggleGroup, whatever Color a call site passes.
   Nothing here is !important, so the shared disabled rules above still win on a busy group.
   =================================================================== */
.mud-toggle-group.mud-toggle-group-outlined[role="group"] {
    border-color: var(--mud-palette-lines-inputs);
}

.mud-toggle-group .mud-toggle-item.mud-button-root {
    border-color: var(--mud-palette-lines-inputs);
    text-transform: none;
    --mud-ripple-color: var(--mud-palette-text-primary);
}

.mud-toggle-group .mud-toggle-item:not(.mud-toggle-item-selected) {
    color: var(--mud-palette-text-primary);
    background-color: transparent;
    font-weight: 500;
}

.mud-toggle-group .mud-toggle-item:not(.mud-toggle-item-selected) .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.mud-toggle-group .mud-toggle-item:not(.mud-toggle-item-selected):not(:disabled):hover,
.mud-toggle-group .mud-toggle-item:not(.mud-toggle-item-selected):not(:disabled):focus-visible,
.mud-toggle-group .mud-toggle-item:not(.mud-toggle-item-selected):not(:disabled):active {
    background-color: var(--tip-neutral-tile);
    border-color: var(--mud-palette-lines-inputs);
}

/* Weight stays on a busy group's selected item, so the mode still reads while every item is off. */
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
    font-weight: 700;
}

/* The bar is an inset shadow, so the item keeps its size; background-image clears the filled primary gradient. */
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:not(:disabled),
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:not(:disabled):hover,
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:not(:disabled):focus-visible,
.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:not(:disabled):active {
    color: var(--mud-palette-text-primary);
    background-color: var(--tip-nav-active);
    background-image: none;
    box-shadow: inset 0 -3px 0 var(--tip-nav-indicator);
    filter: none;
    border-color: var(--mud-palette-lines-inputs);
}

.mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:not(:disabled) .mud-icon-root {
    color: var(--tip-nav-indicator);
}

/* Inset, because the group clips its children (overflow: hidden) and an outer ring would be cut off. */
.mud-toggle-group .mud-toggle-item:focus-visible {
    outline: 2px solid var(--tip-nav-indicator);
    outline-offset: -2px;
}

.mud-toggle-group .mud-toggle-item .tip-toggle-item-icon {
    margin-inline-end: 6px;
}

/* An item wrapped in a tooltip sits one level down, out of reach of ".mud-toggle-group > .mud-toggle-item".
   Grid (not width: 100%) so the item covers MudBlazor's -1px item margin; no box-shadow here, the selected rule owns it. */
.mud-toggle-group > .mud-tooltip-root {
    display: grid;
}

.mud-toggle-group > .mud-tooltip-root > .mud-toggle-item {
    border-width: 1px;
    border-radius: 0;
}

/* Segmented buttons that wrap to more than one row (a MudToggleGroup is one row): .tip-segment + aria-pressed.
   The pressed rule names only .tip-segment, so the glow gate does not read the inset bar as a button shadow. */
.mud-button-root.tip-segment {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-inputs);
    text-transform: none;
    font-weight: 500;
    --mud-ripple-color: var(--mud-palette-text-primary);
}

.mud-button-root.tip-segment:not([aria-pressed="true"]):not(:disabled):hover,
.mud-button-root.tip-segment:not([aria-pressed="true"]):not(:disabled):focus-visible,
.mud-button-root.tip-segment:not([aria-pressed="true"]):not(:disabled):active {
    background-color: var(--tip-neutral-tile);
}

.tip-segment[aria-pressed="true"]:not(:disabled),
.tip-segment[aria-pressed="true"]:not(:disabled):hover {
    color: var(--mud-palette-text-primary);
    background-color: var(--tip-nav-active);
    background-image: none;
    box-shadow: inset 0 -3px 0 var(--tip-nav-indicator);
    font-weight: 700;
}

.mud-button-root.tip-segment:focus-visible {
    outline: 2px solid var(--tip-nav-indicator);
    outline-offset: -2px;
}

/* Selected list rows (MudList, and the selected option in MudSelect and MudAutocomplete): bar on the left edge.
   !important because MudBlazor's .mud-primary-text and .mud-primary-hover on the row are. */
.mud-list-item.mud-selected-item:not(.mud-list-item-disabled) {
    color: var(--mud-palette-text-primary) !important;
    background-color: var(--tip-nav-active) !important;
    box-shadow: inset 3px 0 0 var(--tip-nav-indicator);
    font-weight: 700;
    --mud-ripple-color: var(--mud-palette-text-primary) !important;
}

/* The label is the body text; captions under it (a phone number, a time) keep their weight. */
.mud-list-item.mud-selected-item:not(.mud-list-item-disabled) .mud-typography-body1,
.mud-list-item.mud-selected-item:not(.mud-list-item-disabled) .mud-typography-body2 {
    font-weight: 700;
}

/* Outlined error buttons: palette Error misses AA on white and on its dark hover tint, so the status text shade is
   used. The body prefix outranks MudBlazor's hover, focus and active rules. */
body .mud-button-outlined.mud-button-outlined-error:not(:disabled) {
    color: var(--tip-status-fail-fg);
    border-color: var(--tip-status-fail-fg);
    --mud-ripple-color: var(--tip-status-fail-fg);
}

    .mud-bootstrap-dropdown .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end, div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
        padding-right: 0;
        padding-inline-end: 0;
        padding-inline-start: .5rem;
    }

    .mud-bootstrap-dropdown .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-radius: 10px;
    }

    .mud-bootstrap-dropdown .mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
        padding: .395rem 0 .395rem;
    }

.mud-bootstrap-dropdown .mud-input-slot {
    padding: 0;
    padding-inline-start: 0;
}

.mud-input-adornment .mud-button-root:hover {
    background-color: transparent !important;
}

.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border, .mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-width: 1px;
    border-color: #aaa9a9;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 10px;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 2px 20px 2px 10px;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
}

.mud-table-pagination-caption {
    padding-left: 5px;
    padding-right: 5px;
}

.mud-table-pagination-select {
    margin-left: 5px !important;
    margin-right: 5px !important;
    min-width: 52px;
}

    .mud-table-pagination-select .mud-select-input {
        margin-top: 0px !important;
        padding: 0 5px !important;
    }

.mud-table-pagination-actions {

    margin-left: 2px;

}

.mud-icon-button {
    padding: 6px;
}

.mud-expand-panel .mud-expand-panel-header {
    padding: 0px 0px;
    min-height: 32px;
}

/* Force MudSelect outlined box to match MudAutocomplete height in SNOUT forms */
.snout-select-match .mud-input-slot.mud-input-root.mud-input-root-outlined {
    min-height: 1.4375em;
    padding-top: 16.5px;
    padding-bottom: 16.5px;
}

/* ===================================================================
   Top-band header — white icons on dark navy background
   Same approach as sidebar: !important to override MudBlazor internals.
   =================================================================== */
.top-band .mud-icon-root {
    color: white !important;
}

/* ===================================================================
   Sidebar nav: global color rules for the rail, both modes.
   Must live here (global) rather than NavMenu.razor.css (scoped)
   because MudBlazor component styles outcompete ::deep in some paths.
   Colors come from the palette and the --tip-* tokens in tip-app-theme.css.
   =================================================================== */

/* Enabled nav links and group headers (headers render as button.mud-nav-link) */
.sidebar .mud-nav-link {
    color: var(--mud-palette-drawer-text) !important;
}

/* Icons inside nav links and group headers */
.sidebar .mud-nav-link .mud-icon-root {
    color: var(--mud-palette-drawer-icon) !important;
}

/* Hover: orange tint, strong text */
.sidebar .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--tip-nav-hover) !important;
    color: var(--tip-rail-strong) !important;
}

.sidebar .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--tip-rail-strong) !important;
}

/* Active: stronger orange tint, 3px accent bar, accent icon, strong text */
.sidebar .mud-nav-link.active {
    background-color: var(--tip-nav-active) !important;
    border-left: 3px solid var(--tip-nav-indicator) !important;
    color: var(--tip-rail-strong) !important;
}

.sidebar .mud-nav-link.active .mud-icon-root {
    color: var(--tip-nav-indicator) !important;
}

/* Hovering the active row keeps the active tint and indicator icon */
.sidebar .mud-nav-link.active:hover {
    background-color: var(--tip-nav-active) !important;
}

.sidebar .mud-nav-link.active:hover .mud-icon-root {
    color: var(--tip-nav-indicator) !important;
}

/* Disabled stubs (coming-soon items): opacity reset so color controls the muting. */
.sidebar .mud-nav-link.mud-nav-link-disabled {
    color: var(--tip-rail-disabled) !important;
    opacity: 1 !important;
}

.sidebar .mud-nav-link.mud-nav-link-disabled .mud-icon-root {
    color: var(--tip-rail-disabled) !important;
}

/* Keyboard focus: the indicator token clears 3:1 against both rails. */
.sidebar .mud-nav-link:focus-visible {
    outline: 2px solid var(--tip-nav-indicator);
    outline-offset: -2px;
}

/* Group chevron stays accent; these selectors outrank the icon and hover rules above. */
.sidebar .mud-nav-link .mud-icon-root.mud-nav-link-expand-icon,
.sidebar .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-icon-root.mud-nav-link-expand-icon {
    color: var(--tip-nav-indicator) !important;
}