html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Onafgevangen-fout-balk (App.razor #blazor-error-ui): verborgen tot blazor.web.js hem toont. */
#blazor-error-ui {
    display: none; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1400;
    background: #fff4e5; color: rgba(0, 0, 0, .87); border-top: 3px solid var(--mud-palette-warning, #ff9800);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); padding: .6rem 3rem .7rem 1.25rem; font-size: .9rem;
}
#blazor-error-ui .reload { margin-left: .5rem; color: var(--mud-palette-primary, #1976d2); font-weight: 600; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Verbinding-kwijt-venster (App.razor #components-reconnect-modal). De klassen zijn die van het
   Blazor Web App-template; blazor.web.js zet ze op het dialog-element. Per toestand is één
   tekstregel zichtbaar; de knoppen alleen wanneer de gebruiker iets kan doen. */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation { display: none; }

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { display: block; }

#components-reconnect-modal {
    width: 22rem; max-width: calc(100vw - 2rem); margin: 20vh auto; padding: 2rem;
    border: 0; border-radius: .5rem; background: #fff; color: rgba(0, 0, 0, .87);
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, .3); font-family: inherit;
}
#components-reconnect-modal::backdrop { background: rgba(0, 0, 0, .4); }
.components-reconnect-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
#components-reconnect-modal p { margin: 0; text-align: center; }
#components-reconnect-modal button {
    border: 0; border-radius: 4px; padding: 6px 24px; cursor: pointer; font: inherit;
    background: var(--mud-palette-primary, #1976d2); color: #fff;
}
#components-reconnect-modal button:hover { filter: brightness(.9); }
.components-rejoining-animation { position: relative; width: 80px; height: 80px; }
.components-rejoining-animation div {
    position: absolute; border: 3px solid var(--mud-palette-primary, #1976d2); opacity: 1; border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, .2, .8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2) { animation-delay: -.5s; }
@keyframes components-rejoining-animation {
    0%, 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 80px; height: 80px; opacity: 0; }
}

/* Global search in the Staff app bar: a white field on the blue bar, with dark text/icon
   so it stays legible (the input would otherwise inherit the app bar's white foreground). */
.staff-appbar-search { background: #fff !important; }
.staff-appbar-search .mud-input-root,
.staff-appbar-search input { color: rgba(0, 0, 0, .87); }
.staff-appbar-search input::placeholder { color: rgba(0, 0, 0, .5); opacity: 1; }
.staff-appbar-search .mud-input-adornment .mud-icon-root { color: rgba(0, 0, 0, .54); }
.staff-appbar-search .mud-input-outlined-border { border-color: rgba(0, 0, 0, .23); }

/* Planbord (planning board). The pb-* classes were referenced in PlanningBoard.razor but never
   styled, so the board had no horizontal scroll or column structure. */
.pb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pb-grid { border-collapse: collapse; }
.pb-grid th, .pb-grid td {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    padding: 6px 8px; vertical-align: top; min-width: 92px;
}
.pb-grid thead th {
    background: var(--mud-palette-background-grey, #f5f5f5);
    font-weight: 600; white-space: nowrap; text-align: center;
}
/* Keep the inspector column visible while scrolling the days horizontally. */
.pb-name-col {
    min-width: 180px; position: sticky; left: 0; z-index: 1;
    background: var(--mud-palette-surface, #fff);
}
.pb-daynum { font-size: .72rem; color: var(--mud-palette-text-secondary, #757575); font-weight: 400; }
.pb-today { border-bottom: 2px solid var(--mud-palette-primary, #1976d2); }
.pb-today-cell { background: rgba(25, 118, 210, .06); }
.pb-inactive { opacity: .55; }
.pb-chip { margin: 2px 2px 2px 0; cursor: pointer; }