/* ============================================================
   Syncfusion Theme Overrides (Tailwind3)
   ------------------------------------------------------------
   Estrategia de producción:
   1) Usar variables CSS de Syncfusion cuando estén disponibles.
   2) Añadir fallback por selectores para componentes críticos.
   3) Consumir tokens definidos en tailwind.input.css (:root --color-*).
   ============================================================ */

:root {
    /* Base branding */
    --color-sf-primary: var(--color-accent-600);
    --color-sf-primary-light: var(--color-accent-500);
    --color-sf-primary-dark: var(--color-accent-700);
    --color-sf-primary-text-color: #ffffff;

    /* Estados */
    --color-sf-success: var(--color-success);
    --color-sf-warning: var(--color-warning);
    --color-sf-danger: var(--color-danger);

    /* Superficie y texto */
    --color-sf-content-bg-color: var(--color-surface);
    --color-sf-content-bg-color-alt1: var(--color-surface-soft);
    --color-sf-content-bg-color-hover: var(--color-surface-soft);
    --color-sf-content-text-color: var(--color-ink);
    --color-sf-content-text-color-alt1: var(--color-ink-muted);
    --color-sf-placeholder-text-color: var(--color-ink-subtle);

    /* Bordes */
    --color-sf-border: var(--color-line);
    --color-sf-border-light: var(--color-line-soft);
    --color-sf-border-hover: var(--color-line);
    --color-sf-border-focus: var(--color-accent-600);

    /* Tabla/grid */
    --color-sf-table-bg-color-hover: var(--color-surface-soft);
    --color-sf-table-text-color-hover: var(--color-ink);

    /* Tipografía */
    --color-sf-font-family: var(--font-sans);
}

/* =========================
   Fallbacks por selectores
   ========================= */

/* Buttons */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--color-accent-600);
    border-color: var(--color-accent-600);
    color: #ffffff;
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover,
.e-btn.e-primary:focus,
.e-css.e-btn.e-primary:focus {
    background-color: var(--color-accent-700);
    border-color: var(--color-accent-700);
}

/* Inputs (DropDownList, DatePicker, TextBox wrappers) */
.e-control-wrapper.e-input-group,
.e-input-group.e-control-wrapper {
    border-color: var(--color-line);
}

.e-control-wrapper.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--color-accent-600);
    box-shadow: 0 0 0 1px var(--color-accent-600);
}

/* Dropdown popup items */
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-item-focus,
.e-ddl.e-popup .e-list-item.e-active {
    background-color: var(--color-surface-soft);
    color: var(--color-ink);
}

/* Grid */
.e-grid .e-headercell {
    background-color: var(--color-surface-soft);
    color: var(--color-ink-muted);
    border-color: var(--color-line);
}

.e-grid .e-rowcell {
    border-color: var(--color-line-soft);
}

.e-grid .e-row:hover .e-rowcell {
    background-color: var(--color-surface-soft);
}

/* Dialog */
.e-dlg-container {
    z-index: 3500 !important;
}

.e-dlg-overlay {
    z-index: 3490 !important;
}

.e-dialog.e-control.e-popup {
    z-index: 3510 !important;
}

.e-dialog .e-dlg-header-content {
    background-color: var(--color-info-bg);
    border-bottom: 1px solid var(--color-line);
}

.e-dialog .e-dlg-header,
.e-dialog .e-dlg-content {
    color: var(--color-ink);
}

.e-dialog .e-dlg-header .e-btn .e-icons,
.e-dialog .e-dlg-header .e-dlg-closeicon-btn .e-icons {
    color: var(--color-accent-900);
}

/* Toasts: keep visible over sticky layout header and avoid top clipping. */
.e-toast-container {
    z-index: 4000 !important;
}

.e-toast-container.e-toast-top-left,
.e-toast-container.e-toast-top-center,
.e-toast-container.e-toast-top-right {
    top: calc(3.5rem + 0.5rem) !important;
}


/* ── Schedule grid: dialog de edición con ancho fijo para encajar la rejilla de horarios ── */
.schedule-grid .e-edit-dialog {
    width: 920px !important;
    max-width: 95vw !important;
}

/* NavMenu: evitar subrayado en enlaces y conservar cambio de color en hover */
.app-sidebar .app-nav-link,
.app-sidebar .app-nav-link:hover,
.app-sidebar .app-nav-link:focus,
.app-sidebar .app-nav-link:active,
.navmenu .app-nav-link,
.navmenu .app-nav-link:hover,
.navmenu .app-nav-link:focus,
.navmenu .app-nav-link:active {
    text-decoration: none;
}

/* =========================================================
   KPI cards: refuerzo del borde y sombra (carga después de Tailwind)
   Tailwind genera border-slate-200 (#e2e8f0); aquí lo subimos a slate-300.
   ========================================================= */
.yb-kpi-grid > div > div,
.yb-kpi-grid-auto > div > div {
    border-color: #cbd5e1 !important;  /* slate-300, más visible que slate-200 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07);
}

/* ---- Campos de solo lectura en diálogos (ScheduleTaskDlg, etc.) ----
   Fuera de @layer para ganar sobre el reset de Syncfusion tailwind3.css. */
.st-field-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.st-field-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background-color: #f8fafc;
    color: #0f172a;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-sizing: border-box;
}

.st-field-input:disabled {
    opacity: 1;
    cursor: default;
    background-color: #f8fafc;
}

.st-field-textarea {
    min-height: 4.25rem;
    resize: vertical;
}