/*
 * Dialog portal — gedeelde fade/slide-up animatie voor alle modal dialogs.
 *
 * Markup-pattern (zie PortalDialogBase.cs voor de plumbing):
 *   <div id="myDialogRoot" class="cd-dialog-backdrop"
 *        style="position:fixed; inset:0; ...; visibility:hidden;">
 *       <div class="cd-dialog-card" style="...">
 *           ...content...
 *       </div>
 *   </div>
 *
 * Anim-speed of -curve aanpassen kan hier in één plek voor alle dialogs.
 */

@keyframes cdDialogBackdropFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cdDialogCardSlideUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cd-dialog-backdrop {
    animation: cdDialogBackdropFade 0.18s ease-out both;
}

.cd-dialog-card {
    animation: cdDialogCardSlideUp 0.22s ease-out both;

    /* Viewport-clamps zodat dialogs niet uit beeld zakken op kleinere displays
       (1280×720 laptops, 1920×1080 tweede schermen). Inline `max-height` /
       `width` / `height` op de dialog zelf blijven leidend wanneer ze
       restrictiever zijn — deze regels werken als fallback. De 920px cap
       voorkomt dat enorme dialogs op 4K-displays onnodig groot worden. */
    max-width: 95vw;
    max-height: min(90vh, 920px);

    /* Default fallback voor dialogs zonder eigen body-scrollcontainer: de hele
       card scrollt als content overloopt. Type-split dialogs (header/body/footer
       met `overflow:hidden` op de card + `overflow-y:auto` op een inner body)
       overrulen dit via hun inline `overflow:hidden` — Blazor's inline-style
       wint van class-property bij dezelfde specificity. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* MudBlazor popover z-index — fix voor MudBlazor 8.15 stacking-bug:

   Het probleem: bij MudMenu/MudSelect rendert MudBlazor een ".mud-overlay"
   (alleen die base-class, geen -popover/-dialog/-drawer modifier) met INLINE
   z-index: 1401 via component-param. Onze popover-class-rule op 1400 verloor
   het van die overlay → overlay vangt clicks → items niet klikbaar.

   Daarnaast: MudBlazor 8.15 ruimt closed-overlay DOM-nodes niet altijd op;
   dezelfde overlay-id verschijnt soms twee keer (orphan). Bij stacked orphans
   wordt het issue cumulatief erger.

   Fix: bump popover-content boven 1401 via een !important die de inline
   overlay-z-index verslaat. 1410 ligt comfortabel boven het overlay-niveau
   en onder MudBlazor's tooltip (1500) en snackbar (1500). */
:root {
    --mud-zindex-popover: 1409;
}

.mud-popover {
    z-index: 1410 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Agenda-dialog card — global zodat AppointmentDialog ook werkt buiten de
   Agenda-pagina (bv. via "Afspraak inplannen" op de propositie-card in
   DossierDetail).
   ═══════════════════════════════════════════════════════════════════════ */
.agenda-dialog {
    background: var(--mud-palette-surface);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 0;
    width: 520px;
    max-height: 85vh;
    overflow-y: auto;
}
.agenda-dialog-header {
    display: flex; align-items: center; gap: 10px; padding: 24px 28px 0;
}
.agenda-dialog-body {
    padding: 20px 28px 28px;
    display: flex; flex-direction: column; gap: 14px;
}

/* bom-form-input states die page-scoped in Agenda.razor zaten — hier global zodat
   AppointmentDialog buiten Agenda (bv. via DossierDetail's "Planningsverzoek aanmaken")
   exact dezelfde styling heeft: readonly = grijze + not-allowed cursor, focus = accent border. */
.bom-form-input:disabled,
.bom-form-input[readonly] {
    opacity: 0.5;
    cursor: not-allowed;
}
.bom-form-input::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
}
.bom-form-input:-webkit-autofill,
.bom-form-input:-webkit-autofill:hover,
.bom-form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 9999px transparent inset !important;
    -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
    background-color: transparent !important;
}
select.bom-form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
select.bom-form-input option {
    background: #1e1e1e;
    color: rgba(255,255,255,0.9);
}