/* =========================================================
   RAIZE BACKOFFICE — MUDBLAZOR HARMONIZATION
   Thin overrides so MudBlazor controls render on-brand.
   Component-level look (cards/section headers) is OWNED by
   raize-app.css + raize-components.css — DO NOT redefine here.
   Load order: tokens → components → mudblazor → app.
   ========================================================= */

/* Mud container backgrounds */
.mud-application-layout,
.mud-main-content {
    background: var(--paper) !important;
    color: var(--ink);
}

/* MudTheme adds elevation to most papers; we want flat. */
.mud-paper.mud-elevation-0 {
    box-shadow: none !important;
    border: 1px solid var(--hairline);
    background: var(--surface);
    border-radius: var(--r-md);
}

/* Elevation 4+ uses tier-2 (modals/menus) */
.mud-elevation-4, .mud-elevation-5, .mud-elevation-6,
.mud-elevation-8, .mud-elevation-12, .mud-elevation-16, .mud-elevation-24 {
    box-shadow: var(--shadow-2) !important;
}

/* ---------- BUTTONS (no rebranding, just shape + text-transform) ---------- */
.mud-button-root {
    font-family: var(--font-ui);
    font-weight: 600;
    border-radius: var(--r-md) !important;
    text-transform: none !important;
    letter-spacing: 0;
    transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.mud-button-root:active { transform: scale(0.98); }

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--brand) !important;
    color: var(--brand-ink) !important;
    box-shadow: none !important;
}
.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--brand-hover) !important;
}

.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-default {
    border: 1px solid var(--hairline-strong) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
}
.mud-button-outlined.mud-button-outlined-primary:hover,
.mud-button-outlined.mud-button-outlined-default:hover {
    background: var(--paper-2) !important;
}

.mud-button-text.mud-button-text-primary,
.mud-button-text.mud-button-text-default {
    color: var(--ink) !important;
}
.mud-button-text.mud-button-text-primary:hover,
.mud-button-text.mud-button-text-default:hover {
    background: var(--paper-2) !important;
}

.mud-icon-button { transition: background var(--d-fast) var(--ease); }
.mud-icon-button:hover { background: var(--paper-2) !important; }

/* ---------- INPUTS ---------- */
.mud-input-control .mud-input-root {
    font-family: var(--font-ui);
    font-feature-settings: var(--fnum);
}

.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--r-sm) !important;
    border-color: var(--hairline-strong) !important;
}
.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--muted) !important;
}
.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--brand) !important;
    border-width: 1px !important;
}
.mud-input-label { color: var(--ink-2) !important; font-weight: 500; }
.mud-input-label.mud-input-label-focused { color: var(--ink) !important; }

/* ---------- TABLES (detail/inline pages; listing tables overridden in raize-app.css) ---------- */
.mud-table {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1) !important;
    font-feature-settings: var(--fnum);
}
.mud-table .mud-table-head .mud-table-cell {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    padding: 10px 14px;
}
.mud-table .mud-table-body .mud-table-cell {
    font-size: 13px;
    color: var(--ink);
    border-bottom: 1px solid var(--hairline);
    padding: 14px;
}
.mud-table .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: var(--paper-2);
}
.mud-table .mud-table-toolbar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline);
}

/* SimpleTable used in some legacy pages (gradually replaced by .info-grid) */
.mud-simple-table {
    background: var(--surface);
    width: 100%;
    border-collapse: collapse;
}
.mud-simple-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    font-size: 13px;
}
.mud-simple-table td:first-child {
    width: 200px;
    max-width: 35%;
    color: var(--muted);
    font-weight: 500;
    vertical-align: top;
}
.mud-simple-table tr:last-child td { border-bottom: none; }

/* ---------- CHIPS ---------- */
.mud-chip {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    height: 22px;
    border-radius: var(--r-sm) !important;
}
.mud-chip.mud-chip-color-success  { background-color: var(--success-soft) !important; color: var(--success) !important; }
.mud-chip.mud-chip-color-warning  { background-color: var(--warning-soft) !important; color: var(--warning) !important; }
.mud-chip.mud-chip-color-error    { background-color: var(--danger-soft)  !important; color: var(--danger)  !important; }
.mud-chip.mud-chip-color-info     { background-color: var(--info-soft)    !important; color: var(--info)    !important; }
.mud-chip.mud-chip-color-default  { background-color: var(--neutral-soft) !important; color: var(--ink-2)   !important; }
.mud-chip.mud-chip-color-primary  { background-color: var(--brand-soft)   !important; color: var(--brand-ink) !important; }

/* ---------- ALERTS ---------- */
.mud-alert {
    border-radius: var(--r-md) !important;
    border: 1px solid transparent;
    font-family: var(--font-ui);
}
.mud-alert.mud-alert-filled-success,
.mud-alert.mud-alert-text-success    { background: var(--success-soft) !important; color: var(--success) !important; border-color: var(--success-soft); }
.mud-alert.mud-alert-filled-warning,
.mud-alert.mud-alert-text-warning    { background: var(--warning-soft) !important; color: var(--warning) !important; border-color: var(--warning-soft); }
.mud-alert.mud-alert-filled-error,
.mud-alert.mud-alert-text-error      { background: var(--danger-soft)  !important; color: var(--danger)  !important; border-color: var(--danger-soft); }
.mud-alert.mud-alert-filled-info,
.mud-alert.mud-alert-text-info       { background: var(--info-soft)    !important; color: var(--info)    !important; border-color: var(--info-soft); }

/* ---------- TABS ---------- */
.mud-tabs .mud-tabs-tabbar-wrapper {
    border-bottom: 1px solid var(--hairline);
}
.mud-tabs .mud-tab {
    font-family: var(--font-ui);
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: 0;
    color: var(--muted);
    min-height: 40px;
}
.mud-tabs .mud-tab.mud-tab-active { color: var(--ink); font-weight: 600; }
.mud-tabs .mud-tab-slider { background: var(--brand) !important; height: 2px; }

/* ---------- DIALOGS / MENUS ---------- */
.mud-dialog {
    border-radius: var(--r-lg) !important;
    background: var(--surface) !important;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-2) !important;
}
.mud-overlay-scrim { background: rgba(20, 18, 10, 0.45) !important; }
.mud-dialog-title { font-family: var(--font-display); font-weight: 700; }

.mud-popover {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-2) !important;
    background: var(--surface);
}
.mud-list-item {
    font-family: var(--font-ui);
    font-size: 13px;
    border-radius: var(--r-sm);
}
.mud-list-item:hover { background: var(--paper-2) !important; }

/* ---------- TYPOGRAPHY MAPPING ---------- */
.mud-typography-h1 { font-family: var(--font-display); font-weight: 700; }
.mud-typography-h2 { font-family: var(--font-display); font-weight: 700; }
.mud-typography-h3 { font-family: var(--font-display); font-weight: 600; }
.mud-typography-h4 { font-family: var(--font-ui); font-weight: 600; }
.mud-typography-h5 { font-family: var(--font-ui); font-weight: 600; }
.mud-typography-h6 { font-family: var(--font-ui); font-weight: 600; }
.mud-typography-subtitle1,
.mud-typography-subtitle2 { font-family: var(--font-ui); }
.mud-typography-body1,
.mud-typography-body2 { font-family: var(--font-ui); font-feature-settings: var(--fnum); }
.mud-typography-caption { color: var(--muted); }

/* ---------- DIVIDERS / SCROLLBAR ---------- */
.mud-divider { border-color: var(--hairline) !important; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--hairline-strong);
    border-radius: 5px;
    border: 2px solid var(--paper);
}

/* ---------- FOCUS RING ---------- */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-input-root:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- Hide the default Mud app bar/drawer chrome on backoffice ----------
   We are NOT using MudLayout/MudAppBar/MudDrawer for the backoffice layout
   anymore (raize-app.css owns it). These rules only act if a stray Mud
   layout is still used elsewhere — keep them harmless. */
.raize-app .mud-appbar { display: none; }