/* 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-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;
}

/* .mud-text-disabled is only ever on live captions and counts (MudBlazor's disabled controls do not use it),
   so it maps to the secondary text tone like tertiary above; TextDisabled stays the disabled-control color. */
.mud-text-disabled {
    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-focus-ring);
    outline-offset: 2px;
}

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

/* Links inside running text are underlined, so they do not rely on color alone against the text around them
   (WCAG 1.4.1); MudLink's default underlines only on hover. Standalone links (View all, tab links) are not in a
   text block and keep the hover underline. */
.mud-typography .mud-link:not(.tip-tab-link),
.mud-alert-message .mud-link,
p .mud-link {
    text-decoration: underline;
}

/* ===================================================================
   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);
    padding-inline: 12px;
}

/* Side room per size (#2261). MudBlazor pads an item 3px to 8px on every side by size and outline, and the columns are
   equal, so the longest label ran edge to edge. Sides only, so the height stays; these selectors outrank
   MudBlazor's ".mud-toggle-group-outlined .mud-toggle-item.mud-toggle-item-size-*" whatever the load order. */
.mud-toggle-group .mud-toggle-item.mud-button-root.mud-toggle-item-size-small {
    padding-inline: 10px;
}

.mud-toggle-group .mud-toggle-item.mud-button-root.mud-toggle-item-size-large {
    padding-inline: 16px;
}

.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-focus-ring);
    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-focus-ring);
    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;
}

/* TipSelect, single select (tip-select-list, no aria-multiselectable). MudBlazor marks the highlighted option
   .mud-selected-item and the committed one aria-selected="true". The arrow keys only move the highlight, so the
   committed option keeps the selected row look, and the highlighted option shows the focus ring instead. */
.tip-select-list:not([aria-multiselectable]) .mud-list-item[aria-selected="true"]: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;
}

.tip-select-list:not([aria-multiselectable]) .mud-list-item[aria-selected="true"]:not(.mud-list-item-disabled) .mud-typography-body1,
.tip-select-list:not([aria-multiselectable]) .mud-list-item[aria-selected="true"]:not(.mud-list-item-disabled) .mud-typography-body2 {
    font-weight: 700;
}

.tip-select-list:not([aria-multiselectable]) .mud-list-item.mud-selected-item:not(.mud-list-item-disabled):not([aria-selected="true"]) {
    color: var(--mud-palette-text-primary) !important;
    background-color: transparent !important;
    box-shadow: none;
    font-weight: 400;
}

.tip-select-list:not([aria-multiselectable]) .mud-list-item.mud-selected-item:not(.mud-list-item-disabled):not([aria-selected="true"]) .mud-typography-body1,
.tip-select-list:not([aria-multiselectable]) .mud-list-item.mud-selected-item:not(.mud-list-item-disabled):not([aria-selected="true"]) .mud-typography-body2 {
    font-weight: 400;
}

.tip-select-list:not([aria-multiselectable]) .mud-list-item.mud-selected-item:not(.mud-list-item-disabled) {
    outline: 2px solid var(--tip-focus-ring);
    outline-offset: -2px;
}

/* 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;
}

/* An outlined input's focus cue is its border: 2px in the focus ring color. A flat gray 1px border here hid
   keyboard focus entirely (WCAG 2.4.7). */
.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: 2px;
    border-color: var(--tip-focus-ring);
}

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

/* ===================================================================
   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 {
    background-color: var(--tip-nav-hover) !important;
    color: var(--tip-rail-strong) !important;
}

.sidebar .mud-nav-link:hover .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;
}

/* Keyboard focus: the shared ring, inset; it clears 3:1 on both rails and the active tint. */
.sidebar .mud-nav-link:focus-visible {
    outline: 2px solid var(--tip-focus-ring);
    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 .mud-icon-root.mud-nav-link-expand-icon {
    color: var(--tip-nav-indicator) !important;
}