/* =========================================================
   Dragon Sentinel - Overrides sobre Radzen Material
   Usa nuestros tokens para mantener coherencia (light + dark).
   ========================================================= */

:root {
    --rz-primary: var(--ds-primary);
    --rz-primary-light: var(--ds-primary-light);
    --rz-primary-dark: var(--ds-primary-dark);
    --rz-secondary: var(--ds-secondary);
    --rz-base: var(--ds-surface);
    --rz-base-background-color: var(--ds-surface);
    --rz-border-radius: var(--ds-radius-md);
    --rz-text-color: var(--ds-text);
    --rz-text-secondary-color: var(--ds-text-muted);
    --rz-text-disabled-color: var(--ds-text-soft);
    --rz-danger: var(--ds-danger);
    --rz-info: var(--ds-info);
    --rz-warning: var(--ds-warning);
    --rz-success: var(--ds-success);
    --rz-content-background-color: var(--ds-surface);
    --rz-panel-background-color: var(--ds-surface);
    --rz-input-background-color: var(--ds-surface);
    --rz-input-border-color: var(--ds-border-strong);
    --rz-border: 1px solid var(--ds-border);
    --rz-border-color: var(--ds-border);
}

/* =========================================================
   DataGrid
   ========================================================= */
.rz-data-grid,
.rz-grid-table {
    font-family: var(--ds-font-family);
    font-size: var(--ds-fs-sm);
    background: var(--ds-surface);
    color: var(--ds-text);
    border-color: var(--ds-border) !important;
}

.rz-data-grid {
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-sm);
}

.rz-grid-table thead th,
.rz-data-grid .rz-grid-table thead th {
    background: var(--ds-table-head-bg) !important;
    color: var(--ds-table-head-text) !important;
    font-weight: var(--ds-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.055em;
    font-size: var(--ds-fs-xs);
    border-bottom: 2px solid var(--ds-border) !important;
    padding: 0.65rem 0.75rem;
    white-space: nowrap;
    vertical-align: bottom;
    min-width: 4.5rem;
}

.rz-grid-table tbody td,
.rz-data-grid .rz-grid-table tbody td {
    border-bottom: 1px solid var(--ds-table-border) !important;
    padding: 0.8rem 0.85rem;
    background: transparent !important;
    color: var(--ds-text);
}

.rz-grid-table tbody tr,
.rz-data-grid .rz-grid-table tbody tr {
    transition: background var(--ds-transition-fast);
}

.rz-grid-table tbody tr:hover,
.rz-data-grid .rz-grid-table tbody tr:hover {
    background: var(--ds-table-row-hover) !important;
}

.rz-data-grid .rz-row-striped { background: var(--ds-surface-alt) !important; }

/* Sort header */
.rz-sortable-column-icon { color: var(--ds-text-muted) !important; }

/* =========================================================
   Inputs
   ========================================================= */
.rz-textbox,
.rz-dropdown,
.rz-numeric,
.rz-calendar-input,
.rz-datepicker,
.rz-checkbox,
.rz-listbox {
    font-family: inherit;
    font-size: var(--ds-fs-sm);
    border-radius: var(--ds-radius-md) !important;
    border-color: var(--ds-border-strong) !important;
    background-color: var(--ds-surface) !important;
    color: var(--ds-text) !important;
}

.rz-textbox::placeholder { color: var(--ds-text-soft); }

/* Combos (RadzenDropDown): texto seleccionado siempre centrado verticalmente.
   Con fuente chica + ícono de limpiar (×), Radzen alinea el label por baseline y queda
   "pegado arriba"; lo centramos junto con la flecha y la ×. */
.rz-dropdown {
    display: inline-flex;
    /* Radzen usa flex-direction: column en .rz-dropdown, así que align-items controla el eje
       HORIZONTAL (stretch = texto a la izquierda) y justify-content el VERTICAL
       (center = texto centrado en la altura, sin quedar pegado arriba). */
    align-items: stretch;
    justify-content: center;
}

.rz-dropdown .rz-dropdown-label,
.rz-dropdown .rz-dropdown-label.rz-placeholder,
.rz-dropdown .rz-placeholder,
.rz-dropdown .rz-inputtext {
    text-align: left !important;
    justify-content: flex-start !important;
}

.rz-dropdown .rz-dropdown-clear-icon,
.rz-dropdown .rz-dropdown-trigger {
    align-self: center;
}

.rz-textbox:focus,
.rz-dropdown.rz-state-focused,
.rz-numeric:focus-within,
.rz-calendar-input:focus-within,
.rz-datepicker:focus-within {
    border-color: var(--ds-primary) !important;
    box-shadow: 0 0 0 3px var(--ds-ring) !important;
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-listbox,
.rz-autocomplete-panel,
.rz-overlaypanel,
.rz-popup,
.rz-menu,
.rz-tooltip-content {
    background: var(--ds-surface-elevated) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}

.rz-dropdown-item:hover,
.rz-multiselect-item:hover,
.rz-listbox-item:hover {
    background: var(--ds-surface-hover) !important;
}

.rz-state-highlight {
    background: var(--ds-primary-soft) !important;
    color: var(--ds-primary-dark) !important;
}

/* =========================================================
   Paginator
   ========================================================= */
.rz-paginator {
    background: var(--ds-surface-alt) !important;
    border-top: 1px solid var(--ds-border) !important;
    color: var(--ds-text);
    padding: 0.2rem 0.5rem !important;
    min-height: unset !important;
}

.rz-paginator .rz-paginator-element {
    color: var(--ds-text);
    background: transparent;
    border-color: transparent;
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem !important;
    font-size: var(--ds-fs-xs) !important;
    border-radius: var(--ds-radius-sm) !important;
    padding: 0 !important;
}

.rz-paginator .rz-paginator-element.rz-state-active {
    background: var(--ds-primary) !important;
    color: var(--ds-primary-contrast) !important;
}

/* Texto "Página X de Y" y dropdowns del paginador: fuente pequeña */
.rz-paginator .rz-paginator-pages,
.rz-paginator .rz-dropdown,
.rz-paginator span {
    font-size: var(--ds-fs-xs) !important;
}

/* =========================================================
   Botones Radzen
   ========================================================= */
.rz-button {
    font-family: inherit;
    font-weight: var(--ds-fw-semibold);
    border-radius: var(--ds-radius-md) !important;
    transition: background-color var(--ds-transition-fast),
                border-color var(--ds-transition-fast),
                box-shadow var(--ds-transition-fast);
}

.rz-button.rz-primary,
.rz-button.rz-danger {
    background-color: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    color: var(--ds-primary-contrast) !important;
}
.rz-button.rz-primary:hover,
.rz-button.rz-danger:hover {
    background-color: var(--ds-primary-dark) !important;
    border-color: var(--ds-primary-dark) !important;
}

.rz-button.rz-success {
    background-color: var(--ds-success) !important;
    border-color: var(--ds-success) !important;
    color: var(--ds-primary-contrast) !important;
}

.rz-button.rz-light {
    background-color: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text) !important;
}
.rz-button.rz-light:hover { background-color: var(--ds-surface-hover) !important; }

/* =========================================================
   Notifications
   ========================================================= */
.rz-notification {
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow-lg) !important;
    font-family: inherit;
    background: var(--ds-surface-elevated) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-border) !important;
}

/* =========================================================
   Form validation
   ========================================================= */
.rz-message.rz-message-error {
    background: var(--ds-danger-soft) !important;
    color: var(--ds-danger-strong) !important;
    border-color: var(--ds-danger) !important;
    border-radius: var(--ds-radius-sm) !important;
}

/* DsDataGrid y grillas con clase ds-grid__radzen: celdas con tope suave para elipsis + title */
.ds-grid__radzen .rz-grid-table tbody td {
    max-width: 28rem;
    vertical-align: middle;
}

/* Ausencias: el CSS scoped del .razor no llega al subárbol renderizado por RadzenDataGrid */
.ds-grid__radzen.ds-absences__radzen th,
.ds-grid__radzen.ds-absences__radzen td {
    text-align: center !important;
}

.ds-grid__radzen.ds-absences__radzen .rz-cell-data,
.ds-grid__radzen.ds-absences__radzen .rz-column-title {
    justify-content: center !important;
    text-align: center !important;
}

/* Importar pedidos: mismo centrado que ausencias (subárbol Radzen fuera del scope del .razor) */
.ds-grid__radzen.ds-plan-import__radzen th,
.ds-grid__radzen.ds-plan-import__radzen td {
    text-align: center !important;
}

.ds-grid__radzen.ds-plan-import__radzen .rz-cell-data,
.ds-grid__radzen.ds-plan-import__radzen .rz-column-title {
    justify-content: center !important;
    text-align: center !important;
}

/* Columna de menú de acciones (⋮): ancho fijo legible en mobile */
.ds-grid__radzen th.ds-cell-actions-head,
.ds-grid__radzen td.ds-cell-actions {
    min-width: 4.75rem;
    width: 4.75rem;
    max-width: 5.5rem;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}

.ds-grid__radzen .ds-cell-actions .ds-actions__trigger {
    margin: 0 auto;
}

/* =========================================================
   Anchos por contenido + centrado (global, todas las grillas DsDataGrid)
   - min-width:100% llena el contenedor cuando hay pocas columnas (sin hueco a la derecha).
   - table-layout:auto deja que cada columna tome el ancho de su contenido/título, así
     los headers no se parten ni bajan de línea. Si la suma supera la pantalla, el wrapper
     (.ds-grid__table-wrap) hace scroll horizontal.
   - Header y celdas centrados.
   ========================================================= */
.ds-grid__radzen .rz-grid-table {
    min-width: 100%;
    table-layout: auto;
}

.ds-grid__radzen th,
.ds-grid__radzen td {
    text-align: center;
}

.ds-grid__radzen .rz-cell-data,
.ds-grid__radzen .rz-column-title {
    justify-content: center;
    text-align: center;
}

/* =========================================================
   Títulos de columna: una sola línea, sin partir palabras.
   Con table-layout:auto la columna toma el ancho del título, así no se corta ni se
   parte. Si la tabla no entra, se scrollea horizontal. El tooltip (HeaderTooltip) sigue.
   ========================================================= */
.ds-grid__radzen .rz-column-title,
.ds-grid__radzen .rz-column-title-content {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}