/**
 * Estilos Personalizados para Componentes Telerik UI for Blazor
 * Portal Servicios - Republic Parking
 * 
 * Este archivo centraliza todos los estilos personalizados de componentes Telerik
 * utilizados en el proyecto para mantener consistencia visual.
 * 
 * Aplicar a componentes usando las clases:
 * - .fuente-estandar (para texto est�ndar del proyecto)
 * - .telerik-field (para inputs, pickers, dropdowns)
 * 
 * Usar contenedor padre: .mantenedor-page o .dashboard-page
 */

/* ========================================
   FUENTES Y TIPOGRAF�A
   ======================================== */

/* Clase de fuente est�ndar del proyecto */
.fuente-estandar,
.fuente-dashboard {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
}

/* ========================================
   INPUTS Y CONTROLES DE FORMULARIO
   ======================================== */

/* Estilos para inputs Telerik en Mantenedores */
.mantenedor-page .telerik-field .k-input,
.mantenedor-page .telerik-field .k-picker,
.mantenedor-page .telerik-field .k-dropdown,
.mantenedor-page .telerik-field .k-textbox,
.mantenedor-page .telerik-field .k-multiselect {
    border-radius: 0.5rem;
    background-clip: padding-box;
}

/* Estilos para inputs Telerik en Dashboard */
.dashboard-page .telerik-field .k-input,
.dashboard-page .telerik-field .k-picker,
.dashboard-page .telerik-field .k-multiselect {
    border-radius: 0.5rem;
    background-clip: padding-box;
}

/* Input inner styles */
.mantenedor-page .telerik-field .k-input-inner,
.dashboard-page .telerik-field .k-input-inner {
    font-size: 13px;
    font-family: 'Inter', sans-serif !important;
}

/* Placeholders de inputs Telerik */
.fuente-estandar .k-input-inner::placeholder,
.fuente-estandar .k-input-inner,
.fuente-dashboard .k-input-inner::placeholder,
.fuente-dashboard .k-input-inner {
    font-family: 'Inter', sans-serif !important;
}

/* ========================================
   DROPDOWNS Y LISTAS
   ======================================== */

/* Items de listas desplegables */
.k-list-item,
.k-list-optionlabel,
.k-column-menu,
.k-animation-container {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
}

/* ========================================
   GR�FICOS (CHARTS)
   ======================================== */

/* Bordes redondeados para gr�ficos */
.dashboard-page .telerik-chart-soft {
    border-radius: 0.5rem;
}

/* ========================================
   GRILLAS (GRID)
   ======================================== */

/* Encabezados de columnas totalizadoras */
.column-total-header {
    font-weight: bold !important;
    background-color: #f8f9fa !important;
    text-align: center !important;
}

/* Celdas de columnas totalizadoras */
.column-total-cell {
    font-weight: bold;
    background-color: #fcfcfc;
}

/* ========================================
   ALINEACIÓN DE INPUTS Y DROPDOWNS
   ======================================== */

/* Normaliza la altura entre TelerikTextBox (.k-input-md) y TelerikDropDownList (.k-picker-md).
   El tema Kendo Bootstrap aplica padding-block: 0.375rem al .k-picker-md pero no al .k-input-md.
   Se elimina el padding-block del picker para que ambos usen la altura natural del contenido. */
.telerik-field.k-picker-md {
    padding-block: 0;
}

/* ========================================
   VENTANAS (WINDOW / DIALOG)
   ======================================== */

/* Barra de título */
.k-window-titlebar {
    font-family: 'Inter', sans-serif !important;
}

.k-window-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Área de contenido */
.k-window-content {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
}

/* ========================================
   UTILIDADES GENERALES
   ======================================== */

/* Clase helper para centrar contenido */
.center-me {
    text-align: center !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .fuente-estandar,
    .fuente-dashboard {
        font-size: 12px !important;
    }
    
    .k-list-item,
    .k-list-optionlabel {
        font-size: 12px !important;
    }
}

/* ========================================
   DARK MODE — TELERIK COMPONENTS
   Activa cuando el atributo data-theme-mode="dark" está en <html>.
   Variables de referencia (definidas en styles.css):
     bg principal : rgb(26,28,30)   --body-bg-rgb
     bg secundario: rgb(37,39,41)   --body-bg-rgb2
     texto        : rgba(255,255,255,0.7)
     borde        : rgba(255,255,255,0.1)
     hover        : rgba(255,255,255,0.07)
     input bg     : #232628         --form-control-bg
   ======================================== */

/* --- Grid --- */
[data-theme-mode=dark] .k-grid {
    background-color: #232628;
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}
[data-theme-mode=dark] .k-grid .k-table-thead,
[data-theme-mode=dark] .k-grid .k-grid-header,
[data-theme-mode=dark] .k-grid .k-header {
    background-color: #1a1c1e;
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.1);
}
[data-theme-mode=dark] .k-grid .k-table-row,
[data-theme-mode=dark] .k-grid td,
[data-theme-mode=dark] .k-grid .k-table-td {
    background-color: #232628;
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.07);
}
[data-theme-mode=dark] .k-grid .k-table-row:hover td,
[data-theme-mode=dark] .k-grid .k-table-row.k-hover td,
[data-theme-mode=dark] .k-grid tr:hover td {
    background-color: rgba(255,255,255,0.07) !important;
}
[data-theme-mode=dark] .k-grid .k-table-row.k-selected td,
[data-theme-mode=dark] .k-grid td.k-selected {
    background-color: rgba(132,90,223,0.18) !important;
    color: rgba(255,255,255,0.85) !important;
}
[data-theme-mode=dark] .k-grid .k-table-alt-row td {
    background-color: rgba(255,255,255,0.03);
}

/* --- Paginador --- */
[data-theme-mode=dark] .k-pager,
[data-theme-mode=dark] .k-pager-wrap {
    background-color: #1a1c1e;
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
}
[data-theme-mode=dark] .k-pager .k-button,
[data-theme-mode=dark] .k-pager-wrap .k-button {
    color: rgba(255,255,255,0.6);
    background-color: transparent;
    border-color: transparent;
}
[data-theme-mode=dark] .k-pager .k-button:hover,
[data-theme-mode=dark] .k-pager-wrap .k-button:hover {
    background-color: rgba(255,255,255,0.08);
}
[data-theme-mode=dark] .k-pager .k-button.k-selected,
[data-theme-mode=dark] .k-pager-wrap .k-button.k-selected {
    background-color: rgba(132,90,223,0.3);
    color: #fff;
}

/* --- Inputs, Pickers, DatePicker, DropDownList, MultiSelect --- */
[data-theme-mode=dark] .k-input,
[data-theme-mode=dark] .k-picker,
[data-theme-mode=dark] .k-multiselect,
[data-theme-mode=dark] .k-dropdownlist,
[data-theme-mode=dark] .k-datepicker,
[data-theme-mode=dark] .k-numerictextbox,
[data-theme-mode=dark] .k-combobox,
[data-theme-mode=dark] .k-textbox {
    background-color: #232628 !important;
    border-color: #313335 !important;
    color: rgba(255,255,255,0.7) !important;
}
[data-theme-mode=dark] .k-input-inner,
[data-theme-mode=dark] .k-input-inner::placeholder {
    color: rgba(255,255,255,0.5) !important;
    background-color: transparent !important;
}
[data-theme-mode=dark] .k-input-button,
[data-theme-mode=dark] .k-picker .k-button {
    background-color: #232628 !important;
    border-color: transparent !important;
    color: rgba(255,255,255,0.5) !important;
}

/* --- Chips del MultiSelect --- */
[data-theme-mode=dark] .k-chip,
[data-theme-mode=dark] .k-chip-solid {
    background-color: rgba(132,90,223,0.25);
    border-color: rgba(132,90,223,0.4);
    color: rgba(255,255,255,0.85);
}
[data-theme-mode=dark] .k-chip .k-chip-action .k-icon {
    color: rgba(255,255,255,0.6);
}

/* --- Popups y listas desplegables --- */
[data-theme-mode=dark] .k-popup,
[data-theme-mode=dark] .k-animation-container > .k-popup {
    background-color: #232628 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.7) !important;
}
[data-theme-mode=dark] .k-list-item,
[data-theme-mode=dark] .k-list-optionlabel {
    color: rgba(255,255,255,0.7) !important;
    background-color: transparent !important;
}
[data-theme-mode=dark] .k-list-item:hover,
[data-theme-mode=dark] .k-list-item.k-hover {
    background-color: rgba(255,255,255,0.08) !important;
}
[data-theme-mode=dark] .k-list-item.k-selected,
[data-theme-mode=dark] .k-list-item.k-focus {
    background-color: rgba(132,90,223,0.25) !important;
    color: #fff !important;
}

/* --- Checkboxes --- */
[data-theme-mode=dark] .k-checkbox {
    background-color: #232628;
    border-color: #555 !important;
}
[data-theme-mode=dark] .k-checkbox:checked {
    background-color: rgb(132,90,223) !important;
    border-color: rgb(132,90,223) !important;
}

/* --- Ventanas (TelerikWindow) --- */
[data-theme-mode=dark] .k-window {
    background-color: #232628;
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}
[data-theme-mode=dark] .k-window-titlebar {
    background-color: #1a1c1e;
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
}
[data-theme-mode=dark] .k-window-content {
    background-color: #232628;
    color: rgba(255,255,255,0.7);
}
[data-theme-mode=dark] .k-window-actions .k-button {
    color: rgba(255,255,255,0.6);
}
[data-theme-mode=dark] .k-window-actions .k-button:hover {
    background-color: rgba(255,255,255,0.1);
}

/* --- Botones Telerik generales --- */
[data-theme-mode=dark] .k-button-solid-base {
    background-color: #2e3135;
    border-color: #3a3d42;
    color: rgba(255,255,255,0.7);
}
[data-theme-mode=dark] .k-button-solid-base:hover {
    background-color: #383b40;
}

/* --- Calendarios (DatePicker popup) --- */
[data-theme-mode=dark] .k-calendar {
    background-color: #232628;
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.1);
}
[data-theme-mode=dark] .k-calendar .k-calendar-th,
[data-theme-mode=dark] .k-calendar .k-calendar-caption {
    color: rgba(255,255,255,0.5);
}
[data-theme-mode=dark] .k-calendar .k-calendar-td:hover .k-calendar-cell-inner,
[data-theme-mode=dark] .k-calendar .k-calendar-td.k-hover .k-calendar-cell-inner {
    background-color: rgba(255,255,255,0.08);
}
[data-theme-mode=dark] .k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner {
    background-color: rgb(132,90,223);
    color: #fff;
}
[data-theme-mode=dark] .k-calendar .k-calendar-header .k-button {
    color: rgba(255,255,255,0.7);
    background-color: transparent;
}

/* ========================================
   COMPATIBILIDAD CON VERSIONES ANTERIORES
   ======================================== */

/* Mantener compatibilidad con p�ginas que usan .dashboard-unidadnegocio */
.dashboard-unidadnegocio .telerik-field .k-input,
.dashboard-unidadnegocio .telerik-field .k-picker,
.dashboard-unidadnegocio .telerik-field .k-multiselect {
    border-radius: 0.5rem;
    background-clip: padding-box;
}

.dashboard-unidadnegocio .telerik-field .k-input-inner {
    font-size: 13px;
}

.dashboard-unidadnegocio .telerik-chart-soft {
    border-radius: 0.5rem;
}