/* Minimale basis; de rest van de styling komt van MudBlazor (dark theme). */

html, body {
    height: 100%;
    margin: 0;
    background: #14161B;
    color: #F2F4F8;
    font-family: Roboto, system-ui, -apple-system, sans-serif;
}

/* ---- Wachtrij-grid (uitgelijnde kolommen, responsive) ---- */
.queue-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 56px 110px minmax(180px, 1fr) 150px 200px 150px 100px;
    align-items: center;
    gap: 12px;
}

/* smal scherm (portret / telefoon): val terug op 2 kolommen, klant over volle breedte */
@media (max-width: 860px) {
    .queue-grid {
        grid-template-columns: auto 1fr;
        gap: 4px 12px;
    }
    .queue-grid > .queue-customer {
        grid-column: 1 / -1;
    }
}

/* ---- Reconnect-melding (Blazor Server circuit) ---- */
/* Blazor schakelt de classes: components-reconnect-show / -hide / -failed / -rejected */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 16, .72);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex !important;
}

#components-reconnect-modal .reconnect-box {
    background: #1E2129;
    border: 1px solid #333845;
    border-radius: 12px;
    padding: 28px 36px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
    max-width: 90vw;
}

#components-reconnect-modal .reconnect-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 4px solid #333845;
    border-top-color: #E5485A;
    border-radius: 50%;
    animation: reconnect-spin 0.9s linear infinite;
}

#components-reconnect-modal .reconnect-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #F2F4F8;
}

#components-reconnect-modal .reconnect-sub {
    margin-top: 6px;
    color: #aab1bd;
}

#components-reconnect-modal .reconnect-reload {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 18px;
    background: #E5485A;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

/* Standaard tonen we de "server down / opnieuw verbinden"-tekst,
   en verbergen we de "verbinding verbroken"-tekst (die enkel bij failed/rejected toont). */
#components-reconnect-modal .reconnect-when-failed { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-when-down,
#components-reconnect-modal.components-reconnect-rejected .reconnect-when-down { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-when-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-when-failed { display: block; }

@keyframes reconnect-spin {
    to { transform: rotate(360deg); }
}

/* Blazor-foutbalk donker maken */
#blazor-error-ui {
    background: #E5485A;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}