/* ==========================================================================
   AXIS component layer — MudBlazor refinements
   Goal: calm, dense, bank-grade surfaces. Borders over shadows, consistent
   radii, readable tables. No page-specific rules here (see patterns.css).
   ========================================================================== */

/* ---------- Surfaces ---------- */

.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4 {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--mud-elevation-1);
}

.mud-paper.mud-paper-outlined {
    border-color: var(--mud-palette-lines-default);
}

.mud-card {
    border-radius: var(--axis-radius-lg);
    overflow: hidden;
}

.mud-card-header {
    padding: var(--axis-space-4) var(--axis-space-5);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-card-content {
    padding: var(--axis-space-5);
}

.mud-card-actions {
    padding: var(--axis-space-3) var(--axis-space-5);
    border-top: 1px solid var(--mud-palette-divider);
    gap: var(--axis-space-2);
}

.mud-divider {
    border-color: var(--mud-palette-divider);
}

/* ---------- Buttons ---------- */

.mud-button-root.mud-button {
    border-radius: var(--axis-radius);
    min-height: 36px;
    padding: 6px 16px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
    transition: background-color var(--axis-duration) var(--axis-ease),
                border-color var(--axis-duration) var(--axis-ease),
                color var(--axis-duration) var(--axis-ease);
}

.mud-button-root.mud-button.mud-button-filled,
.mud-button-root.mud-button.mud-button-filled:hover,
.mud-button-root.mud-button.mud-button-filled:active {
    box-shadow: none;
}

.mud-button-root.mud-button.mud-button-outlined {
    padding: 5px 15px;
}

.mud-button-root.mud-button.mud-button-outlined-default,
.mud-button-root.mud-button.mud-button-outlined-inherit {
    border-color: var(--mud-palette-lines-inputs);
}

.mud-button-root.mud-button.mud-button-text {
    padding: 6px 10px;
}

.mud-button-root.mud-button.mud-button-size-small {
    min-height: 30px;
    padding: 3px 10px;
    font-size: .8125rem;
}

.mud-button-root.mud-button.mud-button-outlined-size-small {
    padding: 2px 9px;
}

.mud-button-root.mud-button.mud-button-size-large {
    min-height: 44px;
    padding: 10px 22px;
    font-size: .9375rem;
}

.mud-button-group-root {
    box-shadow: none;
    border-radius: var(--axis-radius);
}

.mud-icon-button {
    border-radius: var(--axis-radius);
}

.mud-icon-button.mud-button-root {
    padding: 8px;
}

.mud-fab {
    box-shadow: var(--mud-elevation-4);
}

/* ---------- Inputs ---------- */

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: var(--axis-radius);
}

.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--mud-palette-text-secondary);
}

/* Foco de un campo: un solo borde fino en teal medio. MudBlazor pinta 2px en el
   color primario (casi negro) y además el anillo global de :focus-visible se
   aplicaba al textarea interior, lo que daba un doble borde. */
.mud-input.mud-input-outlined.mud-focused:not(.mud-input-error) .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within:not(.mud-input-error) .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--axis-input-focus);
}

.mud-input input:focus-visible,
.mud-input textarea:focus-visible,
.mud-input .mud-input-slot:focus-visible {
    box-shadow: none;
    outline: none;
}

.mud-input.mud-input-outlined.mud-shrink .mud-input-outlined-border legend,
.mud-input-label {
    letter-spacing: 0;
}

.mud-input-helper-text {
    font-size: .75rem;
}

.mud-input > input.mud-input-root,
.mud-input > textarea.mud-input-root,
div.mud-input-slot.mud-input-root {
    font-variant-numeric: tabular-nums;
}

.mud-checkbox .mud-typography,
.mud-switch .mud-typography,
.mud-radio .mud-typography {
    font-size: .875rem;
}

/* ---------- Tables ---------- */

.mud-table,
.mud-data-grid {
    border-radius: var(--axis-radius-lg);
}

.mud-table-container {
    border-radius: inherit;
}

/* Scroll horizontal de tablas anchas (js/top-scrollbar.js). Es el único (el de
   abajo se oculta) y se queda pegado bajo la app bar al desplazar la página. */
.table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 4px;
    /* Valores iniciales para que apliquen los ::-webkit-scrollbar de abajo (base.css pone thin a todo) */
    scrollbar-width: auto;
    scrollbar-color: auto;
    position: sticky;
    top: 64px; /* alto de .axis-appbar */
    z-index: 101; /* por encima de la cabecera pegajosa de la tabla (100) */
    background-color: var(--mud-palette-background);
}

/* Detalle expandido de una fila: ocupa el ancho visible de la tabla y no se
   desplaza con el scroll lateral (antes medía lo que toda la tabla, ~1700px,
   y los campos quedaban estirados y cortados por la derecha). */
.table-scroll-viewport .child-row-animated > * {
    position: sticky;
    left: 0;
    width: var(--table-viewport-w, 100%);
    max-width: var(--table-viewport-w, 100%);
    box-sizing: border-box;
}

.table-scroll-top > div {
    height: 1px;
}

.table-scroll-top--hidden {
    display: none;
}

.table-scroll-top::-webkit-scrollbar {
    height: 16px;
}

.table-scroll-top::-webkit-scrollbar-track {
    background: var(--mud-palette-background);
    border-radius: 8px;
}

.table-scroll-top::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-inputs);
    border-radius: 8px;
    border: 2px solid var(--mud-palette-background);
}

.table-scroll-top::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

.mud-table-head .mud-table-cell,
div.mud-simple-table.mud-simple-table table thead th,
.mud-data-grid .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    line-height: 1.35;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}

.mud-table-head .mud-table-cell .mud-table-sort-label {
    font-weight: 600;
}

.mud-table-cell {
    font-size: .8125rem;
    line-height: 1.45;
    border-bottom-color: var(--mud-palette-table-lines);
}

.mud-table-dense .mud-table-cell,
.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 12px;
}

.mud-table-dense * .mud-table-row .mud-table-cell:first-child,
.mud-table-dense .mud-table-cell:first-child {
    padding-left: 16px;
}

.mud-simple-table table * tr > td,
.mud-simple-table table * tr > th {
    font-size: .8125rem;
    border-bottom-color: var(--mud-palette-table-lines);
}

/* Numeric columns (MudBlazor sets text-align: start on cells with higher specificity) */
div.mud-simple-table.mud-simple-table table tr > .axis-num,
.mud-table-cell.axis-num {
    text-align: right;
}

/* Secondary navigation outside the dark drawer (e.g. account area) */
.axis-account-nav .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--mud-palette-text-secondary);
}

.axis-account-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--mud-palette-primary);
}

.axis-account-nav .mud-nav-link .mud-nav-link-text {
    margin-left: 12px;
    margin-inline-start: 12px;
}

.mud-table-toolbar {
    padding-left: var(--axis-space-4);
    padding-right: var(--axis-space-4);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-table-pagination {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mud-table-pagination-toolbar {
    font-size: .8125rem;
}

/* ---------- Tabs ---------- */

.mud-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: transparent;
}

.mud-tabs .mud-tab {
    padding: 8px 20px 8px 12px !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    min-height: 44px;
    color: var(--mud-palette-text-secondary);
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.mud-tab-slider {
    height: 2px !important;
}

/* Tabs used as a page-level container */
.axis-tabs-card {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius-lg);
    overflow: hidden;
}

.axis-tabs-card .mud-tabs-tabbar {
    padding: 0 var(--axis-space-2);
}

/* Badges inside tabs need room for multi-digit counters */
.mud-badge-root,
.mud-badge-wrapper {
    display: inline-flex !important;
    align-items: center !important;
}

.mud-badge-badge {
    min-width: 24px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: .6875rem !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* ---------- Dialogs ---------- */

.mud-dialog {
    border-radius: var(--axis-radius-lg);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 24px 64px rgba(0, 20, 26, 0.24);
}

.mud-dialog .mud-dialog-title {
    padding: var(--axis-space-4) var(--axis-space-6);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-dialog .mud-dialog-title .mud-typography-h6,
.mud-dialog .mud-dialog-title > .mud-typography {
    font-size: 1.0625rem;
    font-weight: 600;
}

.mud-dialog .mud-dialog-content {
    padding: var(--axis-space-5) var(--axis-space-6);
}

.mud-dialog .mud-dialog-actions {
    padding: var(--axis-space-3) var(--axis-space-6);
    border-top: 1px solid var(--mud-palette-divider);
    gap: var(--axis-space-2);
    background-color: var(--mud-palette-background);
}

.mud-overlay .mud-overlay-dark {
    backdrop-filter: blur(1px);
}

/* ---------- Feedback ---------- */

.mud-alert {
    border-radius: var(--axis-radius);
    padding: 10px 16px;
    font-size: .875rem;
}

.mud-alert.mud-alert-text-normal,
.mud-alert-text-info,
.mud-alert-text-success,
.mud-alert-text-warning,
.mud-alert-text-error {
    border: 1px solid transparent;
}

.mud-alert-text-info { border-color: rgba(29, 95, 168, 0.22); }
.mud-alert-text-success { border-color: rgba(30, 122, 70, 0.24); }
.mud-alert-text-warning { border-color: rgba(179, 92, 0, 0.24); }
.mud-alert-text-error { border-color: rgba(180, 35, 24, 0.22); }

.mud-alert .mud-alert-message {
    line-height: 1.5;
}

.mud-snackbar {
    border-radius: var(--axis-radius);
    font-size: .875rem;
    box-shadow: var(--mud-elevation-8);
}

.mud-tooltip {
    background-color: #0F1E23;
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--axis-radius-sm);
}

.axis-dark .mud-tooltip {
    background-color: #E6EDEF;
    color: #0F1E23;
}

.mud-progress-linear.mud-progress-linear-small,
.mud-progress-linear:not(.mud-progress-linear-medium):not(.mud-progress-linear-large) {
    height: 3px;
}

.mud-skeleton {
    border-radius: var(--axis-radius-sm);
}

/* ---------- Chips ---------- */

.mud-chip {
    border-radius: var(--axis-radius-sm);
    font-weight: 500;
}

.mud-chip.mud-chip-size-small {
    height: 22px;
    font-size: .75rem;
    padding: 0 8px;
}

.mud-chip.mud-chip-size-medium {
    height: 28px;
    font-size: .8125rem;
}

/* ---------- Expansion panels / lists / menus ---------- */

.mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

.mud-expansion-panels:not(.mud-expansion-panels-square) .mud-expand-panel:first-child {
    border-top-left-radius: var(--axis-radius-lg);
    border-top-right-radius: var(--axis-radius-lg);
}

.mud-expansion-panels:not(.mud-expansion-panels-square) .mud-expand-panel:last-child {
    border-bottom-left-radius: var(--axis-radius-lg);
    border-bottom-right-radius: var(--axis-radius-lg);
}

.mud-expand-panel + .mud-expand-panel {
    border-top: 0;
}

.mud-popover.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--axis-radius);
    box-shadow: 0 12px 32px rgba(0, 20, 26, 0.14);
}

.mud-list-item {
    font-size: .875rem;
}

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

/* ---------- Breadcrumbs / tree ---------- */

.mud-breadcrumbs {
    padding: 0;
    font-size: .8125rem;
}

.mud-breadcrumbs .mud-breadcrumb-item a {
    color: var(--mud-palette-text-secondary);
}

.mud-treeview-item-content {
    border-radius: var(--axis-radius-sm);
}

/* ---------- Pickers ---------- */

.mud-picker .mud-picker-toolbar {
    background-color: var(--mud-palette-primary);
}

/* MudBlazor 7 copia el Style del picker (p. ej. max-width: 160px para estrechar el campo) al papel del
   desplegable, que recorta el calendario de 310px. El ancho del campo no debe afectar al desplegable. */
.mud-picker-inline-paper > .mud-paper {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* ---------- Desplegables (MudSelect / MudAutocomplete) ----------
   MudBlazor 7 fija por JS max-width = ancho del input en los popovers de ancho
   relativo. En celdas estrechas (p. ej. Approval en las tablas) el texto de cada
   opcion se parte en varias lineas, la lista crece y aparece un scroll dentro del
   desplegable. Ancho = max(ancho del campo, ancho del contenido): MudBlazor ya da
   width:100% capado por ese max-width inline, y min-width:max-content deja crecer
   cuando el texto no cabe. Cada opcion se recorta con ... a partir de 560px. */
.mud-popover.mud-popover-relative-width {
    min-width: max-content;
}

.mud-popover.mud-popover-relative-width .mud-list-item-text {
    white-space: nowrap;
    max-width: min(560px, calc(100vw - 64px));
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Un solo scroll en los desplegables: popover y lista reciben el mismo max-height,
   pero el del popover incluye su borde (border-box) y la lista lo desborda 2px,
   lo que pintaba una segunda barra de scroll por fuera. */
.mud-popover:has(> .mud-list) {
    box-sizing: content-box;
}

.mud-popover.mud-popover-relative-width .mud-list-item-text > p,
.mud-popover.mud-popover-relative-width .mud-list-item-text > .mud-typography {
    display: flex;
    align-items: center;
    gap: var(--axis-space-2);
}

/* ---------- Tablas largas: un solo scroll, el de la pagina ----------
   En vez de dar alto fijo a la tabla (FixedHeader + Height => scroll dentro de
   la pagina que ya hace scroll), la cabecera se pega bajo la app bar mientras
   se desplaza la pagina. Solo en pantallas anchas: por debajo el contenedor
   necesita overflow-x para tablas que no caben, y eso anula el sticky. */
@media (min-width: 1280px) {
    .axis-sticky-head.mud-table .mud-table-container {
        overflow: visible;
    }

    .axis-sticky-head.mud-table .mud-table-head .mud-table-cell {
        position: sticky;
        top: 64px; /* alto de .axis-appbar */
        z-index: 2;
        background-color: var(--mud-palette-surface);
        box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
    }
}

/* ---------- Heron MudCalendar ---------- */

.mud-calendar .mud-cal-toolbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-calendar .mud-cal-month-header,
.mud-calendar .mud-cal-week-header {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-weight: 600;
}

.mud-calendar .mud-cal-month-cell-title {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}