/* Theme Overrides for Expanded System */

:root {
    /* Fallbacks */
    --bg-base-100: #fafafa;
    --rounded-box: 0.375rem;
    --rounded-btn: 0.375rem;
}

body, 
.main-container, 
.main-content, 
.screen_loader,
.bg-\[\#fafafa\],
.dark .bg-\[\#060818\] {
    background-color: var(--bg-base-100) !important;
}

/* Panel / Card Overrides */
.panel {
    border-radius: var(--rounded-box) !important;
}

/* Button Overrides */
.btn {
    border-radius: var(--rounded-btn) !important;
}

/* Form Input Overrides */
.form-input, 
.form-select, 
.form-textarea {
    border-radius: var(--rounded-box) !important;
}

/* Dark mode: --bg-base-100 (inyectada en :root por theme_css_variables_tag) es el fondo claro;
   Alpine pone .dark en <body>, así que se redefine ahí para body y sus descendientes. */
.dark {
    --bg-base-100: #060818;
}

/* Sidebar and Header adjustments if they are meant to be slightly different */
.sidebar, 
.sidebar .bg-white, 
.dark .sidebar .dark\:bg-\[\#0e1726\] {
    border-radius: 0 !important; /* Sidebar usually stays square or has its own logic */
}

/* Select2 en modo oscuro: mismos colores que .form-input dark (el tema bootstrap de select2 es solo claro) */
.dark .select2-container .select2-selection,
.dark .select2-container .select2-dropdown,
.dark .select2-container .select2-search .select2-search__field {
    background-color: #121e32;
    border-color: #1b2e4b;
    color: #888ea8;
}
.dark .select2-container .select2-selection .select2-selection__rendered,
.dark .select2-container .select2-selection .select2-selection__placeholder,
.dark .select2-container .select2-results__option {
    color: #888ea8;
}
.dark .select2-container .select2-results__option[aria-selected="true"],
.dark .select2-container .select2-results__option--selected {
    background-color: #1b2e4b;
    color: #e0e6ed;
}
.dark .select2-container .select2-results__option.select2-results__option--highlighted {
    background-color: var(--color-primary);
    color: #fff;
}

/* Valores de los detalles: los IDs largos de Stripe o de Google se cortan donde haga falta, las palabras normales no */
.detail-value { overflow-wrap: anywhere; }

/* Las etiquetas de estatus ("Cargo mensual", "Por aprobar") no se parten en dos renglones dentro de las tablas */
.badge { white-space: nowrap; }

/* Rails envuelve los campos con error en un div; así no rompe el acomodo del formulario (ej. el correo con "@") */
.field_with_errors { display: contents; }

/* El botón flotante "ir arriba" (abajo a la derecha) tapaba el botón "Manual de usuario" del footer */
.footer-manual { margin-inline-end: 3.5rem; }