/* Estilos propios del ControlCenter.

   Antes vivían en un <style> embebido dentro de Instances/Index.razor, y para
   colmo dentro del bloque condicional del panel de política: los estilos sólo
   existían mientras ese panel estaba abierto. Aquí son globales y permanentes.

   Hoja global y no CSS aislado (.razor.css) a propósito: el aislamiento de
   Blazor sólo etiqueta elementos HTML escritos en el propio componente, y esta
   página está hecha íntegramente de componentes MudBlazor, cuyos elementos
   renderizados nunca reciben el atributo de ámbito.

   Todo se apoya en las variables de MudBlazor para que tema claro y oscuro
   funcionen sin duplicar reglas. */

.instances-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 18%, transparent),
        color-mix(in srgb, var(--mud-palette-info) 14%, transparent));
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 60%, transparent);
    border-radius: 12px;
}

.hero-icon {
    opacity: .65;
    flex-shrink: 0;
}

.summary-card,
.chart-card {
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 65%, transparent);
    border-radius: 10px;
    height: 100%;
}

.summary-card {
    transition: transform .15s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
}

.tenant-status-chip {
    display: inline-flex;
    width: auto;
    min-width: 96px;
    justify-content: center;
}

.tenant-status-info {
    color: var(--mud-palette-warning);
    cursor: help;
}

/* Franja lateral que codifica el estado de la instancia, para barrer la lista
   sin tener que leer cada chip. */
.instance-card {
    border-radius: 10px;
    border-left: 4px solid var(--mud-palette-lines-default);
    height: 100%;
}

.instance-card.state-ok {
    border-left-color: var(--mud-palette-success);
}

.instance-card.state-warn {
    border-left-color: var(--mud-palette-warning);
}

.instance-card.state-error {
    border-left-color: var(--mud-palette-error);
}

/* Nombres largos y GUIDs no deben empujar contenido fuera de la tarjeta ni
   provocar scroll horizontal en la página. */
.instance-card-title,
.instance-meta {
    overflow-wrap: anywhere;
    min-width: 0;
}

.instance-meta {
    font-variant-numeric: tabular-nums;
}

/* ---------- Diálogos ---------- */

/* Contenido con tablas o gráficos altos: se acota para que el pie con los
   botones nunca quede fuera de la pantalla. */
.cc-dialog-content {
    max-height: min(70vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Las tablas anchas se desplazan dentro de su contenedor en vez de ensanchar
   el diálogo. */
.cc-dialog-content .mud-table-container {
    overflow-x: auto;
}

/* ---------- Móvil ---------- */

@media (max-width: 600px) {
    .hero-icon {
        display: none;
    }

    /* A pantalla completa el scroll lo gestiona el cuerpo del diálogo. */
    .cc-dialog-content {
        max-height: none;
    }

    /* Ocupar toda la pantalla en móvil: un diálogo centrado con márgenes deja
       muy poco espacio útil para tablas y formularios. */
    .cc-dialog.mud-dialog {
        margin: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .cc-dialog.mud-dialog .mud-dialog-content {
        flex: 1 1 auto;
    }

    /* Botones de acción a ancho completo: en dos columnas quedan demasiado
       pequeños para tocarlos con el pulgar. */
    .instance-actions .mud-button-root {
        width: 100%;
    }

    /* El pie del diálogo apila los botones en vez de comprimirlos. */
    .cc-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cc-dialog .mud-dialog-actions .mud-button-root {
        flex: 1 1 100%;
    }
}

/* ---------- Selector de idioma ---------- */

/* El formulario dentro del MudMenuItem debe verse como una opción normal del
   menú, no como un botón suelto. */
.cc-language-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: start;
}

/* Reserva el hueco del check para que las opciones no bailen al cambiar. */
.cc-language-spacer {
    display: inline-block;
    width: 20px;
    flex-shrink: 0;
}