/* ══════════════════════════════════════════
   Adviso — MudBlazor brand overrides
   Applies globally to MudTextField/MudSelect/MudDialog/etc.
   ══════════════════════════════════════════ */

/* Remove default MudBlazor card shadows — we use our own */
.adviso-main .mud-card {
    box-shadow: var(--shadow) !important;
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: var(--radius) !important;
    transition: var(--transition);
}

.adviso-main .mud-card:hover {
    box-shadow: var(--shadow-hover) !important;
}

/* Warm background for main content */
.mud-main-content {
    background-color: var(--bg) !important;
    min-height: 100vh;
}

/* ──────────────────────────────────────────────────────────
   MudBlazor outlined inputs — Adviso brand theme
   Applies globally to MudTextField/MudSelect/etc. with Variant="Outlined"
   ────────────────────────────────────────────────────────── */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 9px;
    border-color: #ddd8ce;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mud-input.mud-input-outlined:hover:not(.mud-disabled):not(.mud-readonly) .mud-input-outlined-border {
    border-color: var(--gold);
}
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--teal, #1a6b6a) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 0 3px rgba(200, 164, 78, 0.18);
}
.mud-input.mud-input-outlined.mud-readonly .mud-input-outlined-border {
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(245, 242, 237, 0.5);
}
/* Label: eyebrow style matching our form-label */
.mud-input-label.mud-input-label-outlined {
    font-family: "DM Sans", sans-serif;
    font-size: 17px !important;
    letter-spacing: 0.2px;
    color: var(--text-muted, #4a5e5e);
}
/* Shrunk (floating up) state stays readable but smaller than resting */
.mud-input-label.mud-input-label-outlined.mud-input-label-animated.mud-disabled,
.mud-input-label.mud-input-label-outlined[data-shrink="true"],
.mud-input-label.mud-input-label-outlined.mud-input-label-transform {
    font-size: 17px !important;
}
.mud-input.mud-input-outlined.mud-focused + .mud-input-label,
.mud-input-label-outlined.mud-input-label-inputcontrol.mud-focused {
    color: var(--teal, #1a6b6a) !important;
}
/* Input text */
.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined textarea,
.mud-input.mud-input-outlined .mud-select-input {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--text, #1a2a2a);
}
/* Helper / error text — natural flow below the field. The previous override
   absolutely-positioned the helper at bottom:-18px to keep field heights
   identical (avoiding validation jitter), but with stacked outlined fields
   and dense margins the text overlapped the next field's outline. Restore
   normal flow; fields with helpers grow a few pixels taller. */
.mud-input-control-helper-container {
    margin-top: 4px !important;
}
.mud-input-control .mud-input-helper-text {
}

/* MudSelect popover — match brand */
.mud-popover .mud-list-item.mud-selected-item {
    background-color: rgba(200, 164, 78, 0.15) !important;
    color: var(--teal, #1a6b6a) !important;
    font-weight: 600;
}
.mud-popover .mud-list-item:hover:not(.mud-selected-item) {
    background-color: rgba(26, 107, 106, 0.06) !important;
}

/* MudBlazor dialogs — branded teal title bar, roomier body/actions (defaults
   can sit tight to card edges) */
.mud-dialog .mud-dialog-title {
    background: linear-gradient(135deg, var(--teal-deeper) 0%, var(--teal) 100%) !important;
    color: #fff !important;
    padding: 18px 24px !important;
    margin: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 1.18rem !important;
    letter-spacing: 0.2px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.mud-dialog .mud-dialog-title .mud-typography,
.mud-dialog .mud-dialog-title h6 {
    color: #fff !important;
}

.mud-dialog .mud-dialog-content {
    padding: 20px 24px 16px !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 16px 24px 22px !important;
    gap: 12px;
    flex-wrap: wrap;
}

/* Destructive confirmation — rose frame (Class="dialog-destructive" on MudDialog; class may land on .mud-paper) */
.mud-dialog.dialog-destructive .mud-paper,
.mud-dialog .mud-paper.dialog-destructive {
    border: 2px solid var(--rose) !important;
    box-shadow:
        0 4px 24px rgba(184, 96, 96, 0.14),
        0 6px 24px rgba(0, 0, 0, 0.06) !important;
}

/* MudSelect — custom filter & form dropdowns (replaces native <select>) */
.filter-select.mud-select .mud-input-label,
.form-select.mud-select .mud-input-label {
    display: none !important;
}
.filter-select.mud-select .mud-input-outlined-border,
.form-select.mud-select .mud-input-outlined-border {
    border-radius: 10px !important;
    border-color: #e0dbd2 !important;
}
.filter-select.mud-select:focus-within .mud-input-outlined-border,
.form-select.mud-select:focus-within .mud-input-outlined-border {
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 3px rgba(26, 107, 106, 0.08);
}
/* Toolbar filters: short, dense row — label is hidden but outlined control still got 38px + padding (looked “tall” with text stuck to top) */
.filter-select.mud-select .mud-input-slot {
    min-height: 30px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: center !important;
}
.filter-select.mud-select .mud-input-root {
    margin-top: 0 !important;
}
.form-select.mud-select .mud-input-slot {
    min-height: 38px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 14px;
}
.filter-select.mud-select {
    min-width: 140px;
    max-width: 220px;
}
.form-select.mud-select {
    width: 100%;
}
.select-compact.mud-select .mud-input-slot {
    min-height: 30px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 13px !important;
}
.select-compact.mud-select {
    min-width: 72px;
    max-width: 88px;
}

/* Popover list — selected-row styling */
.select-popover.mud-popover .mud-paper,
.select-popover .mud-paper {
    border-radius: 10px !important;
    border: 1.5px solid #e0dbd2 !important;
    box-shadow: var(--shadow) !important;
    margin-top: 2px !important;
}
/* Selected row: tinted highlight (not a solid “banner” that reads like a duplicate header) */
.select-popover .mud-list-item.mud-selected-item {
    background-color: var(--teal-light) !important;
    color: var(--teal) !important;
    font-weight: 600;
}
.select-popover .mud-list-item:hover:not(.mud-selected-item) {
    background-color: rgba(26, 107, 106, 0.08) !important;
}

/* Design System — list template: one shell for toolbar + active filter chips */
.list-filter-shell {
    margin-top: 8px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
}
.list-filter-row {
    padding: 12px 16px;
}

/* List template toolbar: main block left; status segment (All / Active / …) pinned to the right on wide rows */
.list-filter-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
.list-filter-toolbar-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.list-filter-chip-row {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    align-items: center;
}

/* Full-width search in list toolbars (documents, etc.) */
.documents-toolbar-search {
    flex: 1 1 280px;
    min-width: 200px;
    max-width: 420px;
}

.system-users-toolbar-search {
    flex: 1 1 280px;
    min-width: 200px;
    max-width: 400px;
}
.list-filter-status-seg {
    display: flex;
    gap: 3px;
    background: var(--cream);
    padding: 3px;
    border-radius: 10px;
    flex: 0 0 auto;
    margin-left: auto;
}
.list-filter-search {
    position: relative;
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 320px;
}
.list-filter-selects {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}
.list-filter-selects .mud-select.filter-select {
    flex: 0 0 auto !important;
    width: auto !important;
}
.list-filter-divider {
    width: 1px;
    height: 26px;
    background: var(--cream);
    flex-shrink: 0;
    align-self: center;
}
.list-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px 10px;
    border-top: 1px solid var(--cream);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, var(--cream) 100%);
}
.active-filters-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: var(--text-muted);
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--teal-light);
    color: var(--teal);
    font-size: 12px;
    font-weight: 600;
}
.filter-chip-remove {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: rgba(26, 107, 106, 0.15);
    color: var(--teal);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.filter-clear {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-body);
    padding: 0;
}
.list-table-card {
    margin-top: 8px;
}

/* MudDataGrid uses .mud-table-cell with vertical-align: inherit; ensure list rows don’t read as top-aligned
   when chips sit beside text (communication templates, client list, etc.). */
.adviso-main .table-card .mud-table.mud-data-grid .mud-table-body .mud-table-cell,
.adviso-ds-main .table-card .mud-table.mud-data-grid .mud-table-body .mud-table-cell {
    vertical-align: middle !important;
}
.cell-email {
    display: inline-block;
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--text-secondary);
    font-size: 13px;
}


/* ──────────────────────────────────────────────────────────
   MudFabMenu — keep extended pill labels on a single line, and
   bridge the 12px hover dead-zone between the FAB and its items
   so hover-open menus don't snap shut while the cursor is in
   transit between button and items.
   ────────────────────────────────────────────────────────── */
.mud-fab-menu .mud-fab-menu-item .mud-button-label,
.mud-fab-menu .mud-fab-menu-item {
    white-space: nowrap;
}

.mud-fab-menu-direction-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 12px;
    pointer-events: auto;
}

.mud-fab-menu-direction-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    pointer-events: auto;
}

/* ──────────────────────────────────────────────────────────
   MudTooltip — global default. MudBlazor's stock rule has no
   max-width and the popover sizing auto-fits to content, so
   long messages stretch into one very long line. Cap to 360px
   and let text wrap. !important is needed because the popover
   wrapper sets width at runtime which would otherwise win.
   Documented at /design under "Tooltip".
   ────────────────────────────────────────────────────────── */
.mud-tooltip {
    display: block !important;
    max-width: 360px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left !important;
    line-height: 1.45 !important;
    padding: 8px 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Default-variant background — drop the stock grey for the brand ink
   (deep teal-charcoal). Stays neutral enough to read everywhere but
   reads as Adviso instead of generic Material grey. */
.mud-tooltip.mud-tooltip-default {
    background-color: var(--ink) !important;
    color: #ffffff !important;
}

/* Arrow follows the new background. Default arrow is on the top border
   (border-top-color: inherit on the base rule); per-placement variants
   shift which border carries the colour, so override all four. */
.mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
    border-color: var(--ink) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
}

/* Cap the popover wrapper too — MudBlazor sizes the popover to its
   child's intrinsic width, so we have to constrain both layers for
   the text-wrap rule above to actually take effect. */
.mud-popover:has(> .mud-tooltip) {
    max-width: 360px;
}

/* Document thumbnail hover-zoom: strip MudTooltip's chrome so only the
   image (with its own shadow) shows. DocumentList.razor uses
   RootClass="adviso-doc-thumb-tooltip" — tooltip content is portaled to
   the page root so these rules must be global, not component-scoped. */
.adviso-doc-thumb-tooltip,
.adviso-doc-thumb-tooltip.mud-tooltip,
.adviso-doc-thumb-tooltip.mud-tooltip-default {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
}

.mud-popover:has(> .adviso-doc-thumb-tooltip) {
    max-width: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.adviso-doc-thumb-zoom {
    display: block;
    width: 256px;
    height: auto;
    max-height: 256px;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    background: #fff;
}