/* ==================================================
   MudBlazor Custom Overrides - Placismo.NetCloud
   Versión: 1.0 | Fecha: 15 de enero de 2026
   ================================================== */

/* ==================================================
   APPBAR
   ================================================== */

.mud-appbar {
    background-color: var(--brand-secondary) !important;
}

.mud-appbar .mud-icon-button {
    color: white !important;
}

/* ==================================================
   DRAWER (MENU LATERAL)
   ================================================== */

.mud-drawer {
    background-color: var(--bg-card) !important;
    border-right: 1px solid var(--border-color) !important;
}

.mud-drawer .mud-nav-item {
    color: var(--text-main) !important;
}

.mud-drawer .mud-nav-item .mud-icon-root {
    color: var(--text-secondary) !important;
}

.mud-drawer .mud-nav-item:hover {
    background-color: var(--bg-hover) !important;
}

.mud-drawer .mud-nav-item.active {
    background-color: rgba(31, 106, 225, 0.1) !important;
    color: var(--brand-primary) !important;
    font-weight: 600;
}

.mud-drawer .mud-nav-item.active .mud-icon-root {
    color: var(--brand-primary) !important;
}

/* ==================================================
   TABLES
   ================================================== */

.mud-table {
    background-color: var(--bg-card) !important;
}

.mud-table-head {
    background-color: var(--bg-elevated) !important;
}

.mud-table-head .mud-table-cell {
    color: var(--text-main) !important;
    font-weight: 600;
}

.mud-table-row:hover {
    background-color: var(--bg-hover) !important;
}

.mud-table-cell {
    color: var(--text-main) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Ensure striped rows have proper contrast */
.mud-table-striped .mud-table-row:nth-of-type(odd) {
    background-color: var(--bg-card) !important;
}

.mud-table-striped .mud-table-row:nth-of-type(even) {
    background-color: var(--bg-elevated) !important;
}

/* Table pagination */
.mud-table-pagination {
    color: var(--text-main) !important;
}

.mud-table-pagination .mud-table-pagination-caption,
.mud-table-pagination .mud-table-pagination-select {
    color: var(--text-main) !important;
}

/* Dark theme table fixes for black background */
[data-theme="dark"] .mud-table,
[data-theme="dark"] .mud-table-container,
[data-theme="dark"] .mud-table-head,
[data-theme="dark"] .mud-table-body,
[data-theme="dark"] .mud-table-row {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .mud-table-head {
    background-color: var(--bg-elevated) !important;
}

[data-theme="dark"] .mud-table-cell,
[data-theme="dark"] .mud-table-pagination,
[data-theme="dark"] .mud-table-pagination .mud-table-pagination-caption,
[data-theme="dark"] .mud-table-pagination .mud-table-pagination-select {
    color: var(--text-main) !important;
}

[data-theme="dark"] .mud-table-pagination .mud-select,
[data-theme="dark"] .mud-table-pagination .mud-input-slot,
[data-theme="dark"] .mud-table-pagination .mud-icon-root,
[data-theme="dark"] .mud-table-pagination .mud-svg-icon,
[data-theme="dark"] .mud-table-pagination .mud-icon-button {
    color: var(--text-main) !important;
}

/* ==================================================
   PAPER / CARDS
   ================================================== */

.mud-paper {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.mud-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ==================================================
   INPUTS
   ================================================== */

.mud-input {
    color: var(--text-main) !important;
}

.mud-input-outlined {
    /* No forzamos fondo aquí para no romper el efecto glass */
    color: var(--text-main) !important;
}

.mud-input-outlined .mud-input-slot {
    color: var(--text-main) !important;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color) !important;
    border-width: 1px !important;
    opacity: 1 !important; /* Asegurar que no sea semitransparente */
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--brand-primary) !important;
    border-width: 2px !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--brand-primary) !important;
    border-width: 2px !important;
}

/* Fix para que los labels de inputs outlined cubran el borde correctamente */
.mud-input-label-outlined {
    background-color: var(--bg-card) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: -2px; /* Pequeño ajuste para centrar con el adornment si existe */
}

/* En tarjetas glass, el label debe imitar el fondo de la tarjeta */
.glass-card .mud-input-label-outlined {
    background: rgba(26, 35, 50, 0.9) !important; /* Aproximación del fondo dark glass */
}

.mud-theme-light .glass-card .mud-input-label-outlined {
    background: #FFFFFF !important; /* En luz el glass es muy blanco */
}

/* Asegurar que el slot no tenga fondo propio que cree "bloques" */
.mud-input-outlined .mud-input-slot {
    background-color: transparent !important;
}

.mud-input-label {
    color: var(--text-secondary) !important;
}

.mud-input-adornment {
    color: var(--text-secondary) !important;
    background-color: transparent !important; /* Evitar bloques de color en iconos */
}

/* Fix específico para que los adornments de inicio no tengan fondo */
.mud-input-adornment-start {
    background-color: transparent !important;
}

/* ==================================================
   BUTTONS
   ================================================== */

.mud-button-filled-primary {
    background-color: var(--brand-primary) !important;
    color: white !important;
}

.mud-button-filled-primary:hover {
    background-color: var(--brand-secondary) !important;
}

.mud-button-outlined {
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.mud-button-outlined:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--brand-primary) !important;
}

.mud-button-text {
    color: var(--text-main) !important;
}

.mud-button-text:hover {
    background-color: var(--bg-hover) !important;
}

/* ==================================================
   DIALOGS
   ================================================== */

.mud-dialog {
    background-color: var(--bg-card) !important;
}

.mud-dialog-title {
    color: var(--text-main) !important;
}

/* ==================================================
   SNACKBAR
   ================================================== */

.mud-snackbar {
    background-color: var(--bg-elevated) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-lg) !important;
}

.mud-snackbar.mud-snackbar-success {
    background-color: var(--success) !important;
    color: white !important;
}

.mud-snackbar.mud-snackbar-error {
    background-color: var(--error) !important;
    color: white !important;
}

.mud-snackbar.mud-snackbar-warning {
    background-color: var(--warning) !important;
    color: white !important;
}

.mud-snackbar.mud-snackbar-info {
    background-color: var(--info) !important;
    color: white !important;
}

/* ==================================================
   CHIPS & BADGES
   ================================================== */

.mud-chip {
    color: var(--text-main) !important;
}

.mud-chip.mud-chip-outlined {
    border-color: var(--border-color) !important;
}

/* ==================================================
   ICONS & AVATARS
   ================================================== */

.mud-icon-root {
    color: inherit;
}

.mud-avatar {
    color: white !important;
}

/* ==================================================
   TEXT & TYPOGRAPHY
   ================================================== */

.mud-typography {
    color: var(--text-main) !important;
}

/* ==================================================
   SELECTION CONTROLS (Checkboxes, Radio, etc)
   ================================================== */

.mud-select {
    color: var(--text-main) !important;
}

.mud-select-input {
    color: var(--text-main) !important;
}

/* ==================================================
   PROGRESS INDICATORS
   ================================================== */

.mud-progress-linear {
    background-color: var(--bg-elevated) !important;
}

.mud-progress-circular {
    color: var(--brand-primary) !important;
}

/* ==================================================
   GLASSMORPHISM OVERRIDES
   ================================================== */

/* Ensure glass cards don't get overridden by MudBlazor */
.mud-card.glass-card {
    background: rgba(17, 27, 46, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.mud-theme-light .mud-card.glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(31, 106, 225, 0.2) !important;
}

/* Text colors on glass cards - Dark theme (default) */
.glass-card .mud-typography,
.glass-card .mud-text,
.glass-card h1, .glass-card h2, .glass-card h3,
.glass-card h4, .glass-card h5, .glass-card h6 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Text colors on glass cards - Light theme */
.mud-theme-light .glass-card .mud-typography,
.mud-theme-light .glass-card .mud-text,
.mud-theme-light .glass-card h1, .mud-theme-light .glass-card h2,
.mud-theme-light .glass-card h3, .mud-theme-light .glass-card h4,
.mud-theme-light .glass-card h5, .mud-theme-light .glass-card h6 {
    color: #0F172A !important;
}

/* Override inline styles - Dark theme */
.glass-card [style*="color: rgba(255, 255, 255"] {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Divider color in glass cards */
.glass-card .mud-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.mud-theme-light .glass-card .mud-divider {
    border-color: rgba(31, 106, 225, 0.2) !important;
}

/* Force primary color for links/text buttons in light theme glass card */
.mud-theme-light .glass-card .mud-button-text-primary {
    color: var(--brand-primary) !important;
}

/* Override inline styles - Light theme */
.mud-theme-light .glass-card [style*="color: rgba(255, 255, 255"] {
    color: #0F172A !important;
}

/* Input focus states for glass inputs */
.glass-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: rgba(79, 163, 255, 0.7) !important;
    border-width: 2px !important;
}

.mud-theme-light .glass-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #1F6AE1 !important;
}

/* Footer text in auth layout */
.auth-footer-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

.mud-theme-light .auth-footer-text {
    color: rgba(15, 23, 42, 0.7) !important;
}

/* Glass input icons and adornments - More specific selectors */
.glass-input .mud-input-adornment svg,
.glass-input .mud-input-adornment .mud-icon-root,
.glass-input .mud-input-adornment .mud-svg-icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

.mud-theme-light .glass-input .mud-input-adornment svg,
.mud-theme-light .glass-input .mud-input-adornment .mud-icon-root,
.mud-theme-light .glass-input .mud-input-adornment .mud-svg-icon {
    color: var(--brand-primary) !important;
    opacity: 1 !important;
}

/* Ensure adornment text is visible */
.mud-theme-light .glass-input .mud-input-adornment {
    color: #1F6AE1 !important;
    opacity: 1 !important;
}

/* Glass input button states */
.glass-input .mud-input-adornment button {
    color: rgba(255, 255, 255, 0.8) !important;
}

.mud-theme-light .glass-input .mud-input-adornment button {
    color: #1F6AE1 !important;
}

.glass-input .mud-input-adornment button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.mud-theme-light .glass-input .mud-input-adornment button:hover {
    background-color: rgba(31, 106, 225, 0.15) !important;
}