/*
 * 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;
}

/* Een dialog die zelf de inhoud is (een editor, een heel document) mag hoger dan de 920px
   hierboven. Die cap houdt een gewoon formulier klein op een groot scherm en dat blijft de
   standaard; hier is de hoogte juist de functie, want een regel die niet in beeld staat is een
   regel die je niet kunt nakijken. Opt-in via `Tall` op CurrentlyDialog. */
.cd-dialog-card.cd-tall {
    max-height: 94vh;
}

/* 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;
}

/* De twee kolommen in de afsprakendialog. Prefix bewust 'appt-' en niet 'ad-': ad-blockers
   verbergen elk element met een 'ad-'-klasse, wat de hele dialog onzichtbaar maakte. */
.appt-panels { display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: 0; }
.appt-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.appt-panel-left { padding-right: 24px; }
.appt-panel-right { padding-left: 24px; }
.appt-divider { background: rgba(255,255,255,0.08); }
.appt-section-head {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 0.06em;
    padding-bottom: 2px;
}
/* Het blok Herinnering in het deel Planning: hetzelfde vak als "Tijd vastzetten", met de keuzelijst erin. */
.appt-reminder {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; background: rgba(255,255,255,0.04); border-radius: 8px;
}
.appt-reminder-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.85);
}
.appt-reminder-check {
    display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
    font-size: 0.8rem; color: rgba(255,255,255,0.7);
}
.appt-reminder-check input { accent-color: var(--mud-palette-primary); width: 16px; height: 16px; margin: 0; }
.appt-reminder-check.off { color: rgba(255,255,255,0.3); cursor: default; }
/* BomPdfExportDialog: per keuze een vinkje met een regel uitleg eronder, in groepjes met een kop. */
.bom-pdf-export-group {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: rgba(255,255,255,0.3); margin: 14px 0 4px;
}
.bom-pdf-export-group:first-child { margin-top: 0; }
.bom-pdf-export-option {
    display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; cursor: pointer; user-select: none;
}
.bom-pdf-export-option input { accent-color: var(--mud-palette-primary); width: 16px; height: 16px; margin: 2px 0 0; flex-shrink: 0; }
.bom-pdf-export-option.is-disabled { opacity: 0.4; cursor: default; }
.bom-pdf-export-label { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.85); }
.bom-pdf-export-hint { display: block; font-size: 0.72rem; line-height: 1.45; color: rgba(255,255,255,0.45); margin-top: 1px; }
@media (max-width: 820px) {
    .appt-panels { grid-template-columns: 1fr; }
    .appt-divider { display: none; }
    .appt-panel-left { padding-right: 0; }
    .appt-panel-right { padding-left: 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 2px; }
}

/* 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,
.bom-form-input:-webkit-autofill:active {
    /* WebKit schildert bij autofill een lichte achtergrond met witte tekst — onleesbaar op het
       donkere thema. Een solide donkere inset-box-shadow overschildert die achtergrond (een
       transparante shadow wordt genegeerd), en text-fill-color zet de tekst weer licht. De lange
       transitie voorkomt de korte gele flits bij het invullen. */
    -webkit-box-shadow: 0 0 0 1000px #262a38 inset !important;
    -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
    caret-color: rgba(255,255,255,0.9);
    transition: background-color 600000s 0s, color 600000s 0s !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;
}

/* Horizontaal scrollbare tab-balk (bv. Projectbestanden-dialog) — dunne scrollbar +
   muis-drag (cd-dragging wordt door cdDragScroll gezet tijdens het slepen). */
.cd-tabscroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.cd-tabscroll.cd-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
}
.cd-tabscroll::-webkit-scrollbar { height: 3px; }
.cd-tabscroll::-webkit-scrollbar-track { background: transparent; }
.cd-tabscroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
}
.cd-tabscroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* ── De gedeelde dialog-schil (CurrentlyDialog) ──────────────────────────────
   De vorm die elke dialog deelt: een overlay, een kaart, een kop met icoontegel
   en titel, een scrollende body en een vaste voet. Kop en voet krimpen niet mee,
   zodat de titel en de knoppen in beeld blijven wanneer de inhoud langer is dan
   het scherm. */

.cd-shell-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Het verplaatsen naar de body zet dit weer aan; tot dat moment blijft de
       kaart onzichtbaar zodat 'ie niet eerst op de verkeerde plek opflitst. */
    visibility: hidden;
}

.cd-shell,
.cd-shell-bare {
    background: var(--mud-palette-surface);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cd-shell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* Een kop met een eigen kleur: het verloop dooft naar rechts uit zodat de titel leesbaar blijft.
   De kleur komt van de dialog mee als --tint. */
.cd-shell-head-tint {
    background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 20%, transparent), transparent 62%);
}

.cd-shell-head-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cd-shell-head-extra {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.cd-shell-tile {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-shell-titles { min-width: 0; }

.cd-shell-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

.cd-shell-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    line-height: 1.35;
}

.cd-shell-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.cd-shell-body {
    padding: 20px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;

    /* De body is het enige deel dat mag krimpen. Zonder deze twee regels weigert een flex-kind
       kleiner te worden dan z'n inhoud: de kaart loopt dan tegen z'n maximumhoogte aan, knipt de
       onderkant af en er valt niets te scrollen. */
    flex: 1 1 auto;
    min-height: 0;
}

.cd-shell-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* Het meldingsblok in een dialog (DialogNotice). Kleur en rand komen per toon uit
   DialogTones; de vorm staat hier, zodat alle meldingen dezelfde maatvoering delen. */
.cd-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
}

/* Het icoon krijgt een eigen kolom en blijft bovenaan staan, zodat 'ie bij de eerste regel
   hoort en niet in het midden van een blok van drie regels gaat zweven. */
.cd-notice-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* min-width nul, anders weigert een lange link zonder spaties te breken en duwt 'ie het
   blok breder dan z'n kader. */
.cd-notice-body {
    flex: 1;
    min-width: 0;
}

.cd-notice-body p { margin: 0; }

.cd-notice-body p + p { margin-top: 8px; }

/* De lege ruimte tussen de knoppen links in de voet en het paar annuleren-bevestigen rechts.
   Een eigen element in plaats van margin-right:auto op de laatste linkerknop, want dan hangt de
   uitlijning af van hoeveel knoppen er toevallig links staan. */
.cd-shell-foot-spacer {
    flex: 1;
}

/* Tekst links in de voet, naast de knoppen: een telling, een bedrag, een waarschuwing. Kleiner en
   gedempt, want het is toelichting bij de knop en geen knop. */
.cd-shell-foot-info {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

/* Afboeken van een meerwerkbon: links de artikeltabel, rechts het boekingenlogboek. */
.aw-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    margin-top: 12px;
    min-height: 0;
    align-items: start;
}

@media (max-width: 1200px) {
    .aw-split { grid-template-columns: minmax(0, 1fr); }
}

.aw-log {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 12px 14px;
    max-height: 520px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.aw-log-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
}

.aw-log-count {
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aw-log-empty {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.38);
    padding: 10px 0 4px;
    line-height: 1.5;
}

.aw-log-list {
    overflow-y: auto;
    min-height: 0;
}

.aw-log-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
}

.aw-log-row + .aw-log-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.aw-log-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aw-log-body {
    min-width: 0;
}

.aw-log-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.8rem;
}

.aw-log-qty {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.aw-log-action {
    color: rgba(255, 255, 255, 0.7);
}

.aw-log-article {
    margin-top: 1px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 4px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

.aw-log-warehouse {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

/* ── Dialoog met onderwerpen: zijbalk links, inhoud rechts (DialogSideNav) ─────────────────────
   De indeling heft de vulling van de body op en geeft zichzelf één vaste hoogte, zodat wisselen van
   onderwerp de kaart niet laat verspringen. Alleen de inhoud rechts scrolt. */
.cd-split {
    display: grid;
    grid-template-columns: 232px 1fr;
    margin: -20px -24px;
    height: min(640px, calc(94vh - 170px));
}
.cd-split-pane { overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 24px; min-width: 0; }
.cd-split-head { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.cd-split-hint { margin: 0 0 16px; font-size: 0.78rem; line-height: 1.5; color: rgba(255, 255, 255, 0.45); }

.cd-sidenav {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.12);
    overflow-y: auto;
}
.cd-sidenav-item {
    display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; width: 100%;
    padding: 10px 11px; border-radius: 10px; border: 1px solid transparent;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cd-sidenav-item:hover { background: rgba(255, 255, 255, 0.04); }
.cd-sidenav-item.on { background: rgba(245, 166, 35, 0.08); border-color: rgba(245, 166, 35, 0.28); }
.cd-sidenav-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.cd-sidenav-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-sidenav-title { font-size: 0.84rem; font-weight: 700; color: rgba(255, 255, 255, 0.88); }
.cd-sidenav-status { font-size: 0.72rem; line-height: 1.35; margin-top: 2px; color: rgba(255, 255, 255, 0.45); }
.cd-sidenav-foot { margin-top: auto; padding: 10px 11px; font-size: 0.72rem; line-height: 1.45; color: rgba(255, 255, 255, 0.35); }