/* Shared chrome for all dashboard widgets (Currently.Blazor.Client/Shared/Widgets/*).
   One file so every widget — on the dashboard or reused elsewhere — looks identical.
   Per-widget accent colours (count chip / card tint) are set inline on the element. */

.dw-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    /* Elke widget begrensd op 460px hoog; de scrollende lijst eronder vult de resterende ruimte. */
    max-height: 460px;
}

.dw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

/* Kaart-kop-icoon → afgeronde chip met een getinte achtergrond die meekleurt met het icoon
   (mockup .hic). De tint is een 15%-mix van de eigen icoon-kleur (inline op de MudIcon gezet),
   zodat élke widget z'n eigen accent-chip krijgt zonder per-widget markup-aanpassing. */
.dw-head > .mud-icon-root:first-child {
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 15%, transparent);
    box-sizing: border-box;
    flex-shrink: 0;
}

.dw-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

/* Mini-subtitel onder een widget-titel — voor een gedeelde instructie/uitleg die anders op elke
   rij herhaald zou worden. Herbruikbaar over widgets heen. */
.dw-subtitle {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
    line-height: 1.25;
}

/* Count chip — layout only; background/color set inline per widget accent. */
.dw-count {
    margin-left: auto;
    min-width: 24px;
    text-align: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.dw-empty {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

/* Lege widget = doorzichtig "skeleton": dashed outline + diagonale strepen die naar onderen
   wegfaden, gedimde kop. Een kaart die een lege-staat (.dw-empty) bevat detecteert zichzelf via
   :has(), dus geen per-widget markup nodig. Zo springt een gevulde (solide) kaart er meteen uit. */
.dw-card:has(.dw-empty),
.dd-widget:has(.dw-empty),
.td-open-requests-widget:has(.dw-empty) {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005)) !important;
}
.dw-card:has(.dw-empty) > *,
.dd-widget:has(.dw-empty) > *,
.td-open-requests-widget:has(.dw-empty) > * { position: relative; z-index: 1; }
.dw-card:has(.dw-empty)::after,
.dd-widget:has(.dw-empty)::after,
.td-open-requests-widget:has(.dw-empty)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 12px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
/* Gedimde kop + gecentreerde lege-melding binnen een skeleton-kaart. */
.dw-card:has(.dw-empty) .dw-head > .mud-icon-root:first-child {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.35) !important;
}
.dw-card:has(.dw-empty) .dw-title { color: rgba(255, 255, 255, 0.45); }
.dw-card:has(.dw-empty) .dw-count {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.35) !important;
}
/* Toggle-knoppen in de kop (bv. Werkvoorbereiding vrijgegeven/niet-vrijgegeven) ook dimmen. */
.dw-card:has(.dw-empty) button {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.3) !important;
}
.dw-card:has(.dw-empty) .dw-empty,
.dd-widget:has(.dw-empty) .dw-empty,
.td-open-requests-widget:has(.dw-empty) .dw-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    text-align: center;
}
/* Kop-dimming voor de inbox-/open-requests-skeletons (eigen markup, geen .dw-head):
   icoon, titel én telling meekleuren zoals bij de .dw-card-skeletons. */
.dd-widget:has(.dw-empty) .mud-icon-root,
.td-open-requests-widget:has(.dw-empty) .mud-icon-root { color: rgba(255, 255, 255, 0.35) !important; }
.dd-widget:has(.dw-empty) h3,
.td-open-requests-widget:has(.dw-empty) .td-open-requests-header span:not(.dw-count) { color: rgba(255, 255, 255, 0.45) !important; }
.dd-widget:has(.dw-empty) .dd-count,
.td-open-requests-widget:has(.dw-empty) .dw-count {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.35) !important;
}
/* De amber scheidingslijn onder de Open-verzoeken-kop ook grijzen in skeleton. */
.td-open-requests-widget:has(.dw-empty) .td-open-requests-header { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }

.dw-scroll {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.dw-scroll::-webkit-scrollbar { width: 6px; }
.dw-scroll::-webkit-scrollbar-track { background: transparent; }
.dw-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
.dw-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

.dw-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dw-row:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

/* Knop-modus: de rij zelf is niet klikbaar (alleen de actie-knop), maar houdt hover-feedback. */
.dw-row--static { cursor: default; }

/* Gekleurde status-stip aan het begin van een actie-rij (mockup .dot). */
.dw-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Type-icoon-chip aan het begin van een actie-rij — getinte vierkant-chip in de accentkleur van
   het type (zet color:<accent> inline; de achtergrond is een 15%-mix daarvan, net als de kop-chip). */
.dw-tic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, currentColor 15%, transparent);
}

/* Tekst-midden van een actie-rij — titel + meta-regel (mockup .arow .mid/.nm/.meta). */
.dw-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dw-nm {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dw-meta {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dw-meta .sub { color: rgba(255, 255, 255, 0.3); }
/* Wens-tekst op een aanvraag-rij: één gedempte, cursieve regel die altijd afkapt — ook in
   .dw-list2, waar dw-nm/dw-meta juist mogen wikkelen. */
.dw-msg {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.38);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Eigen regel met de propositie-naam op een actie-rij — iets prominenter dan de meta-regel. */
.dw-prop {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2-koloms rij-raster voor volle-breedte lijstkaarten (Nieuwe aanvragen, Nog in te plannen). */
.dw-list2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
@media (max-width: 760px) { .dw-list2 { grid-template-columns: 1fr; } }
.dw-list2 .dw-row { flex-shrink: 1; }
/* Grid-cellen mogen onder hun inhoudsbreedte krimpen — zonder dit duwt één lange regel
   (bv. een wens-tekst) de rij buiten de kaart. */
.dw-list2 > * { min-width: 0; }
/* In de 2-koloms (volle-breedte) lijst mag de tekst over meerdere regels lopen i.p.v. afkappen —
   de kolommen zijn smal genoeg dat lange namen anders wegvielen. */
.dw-list2 .dw-nm, .dw-list2 .dw-meta { white-space: normal; overflow: visible; text-overflow: clip; }

/* KPI-raster voor de pipeline- en facturatie-kaarten (mockup .kpis / .kpi). */
.dw-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
@media (max-width: 640px) { .dw-kpis { grid-template-columns: repeat(2, 1fr); } }
.dw-kpi { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 11px; padding: 14px 15px; }
.dw-kpi .v { font-size: 1.4rem; font-weight: 800; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; }
.dw-kpi .l { font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); margin-top: 3px; }

/* ── Portaalactiviteit-widget (PortalActivityWidget): KPI-strip + filter + per-dag tijdlijn ── */

/* KPI-strip — 4 slanke kerncijfers met scheidingslijntjes. */
.pa-kpis { display: flex; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 11px; padding: 3px; margin-bottom: 12px; }
.pa-kpi { flex: 1; text-align: center; padding: 11px 6px; position: relative; }
.pa-kpi + .pa-kpi::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(255, 255, 255, 0.06); }
.pa-kpi .v { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.pa-kpi .l { font-size: 0.64rem; color: rgba(255, 255, 255, 0.45); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.pa-kpi .t { font-size: 0.6rem; margin-top: 2px; font-weight: 600; }
@media (max-width: 560px) { .pa-kpis { flex-wrap: wrap; } .pa-kpi { flex: 1 1 45%; } }

/* Filter-balk — segmented Alles / Acties / Weergaven. */
.pa-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pa-seg { display: flex; gap: 3px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 9px; padding: 3px; }
.pa-seg > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.pa-seg > span:hover { color: rgba(255, 255, 255, 0.7); }
.pa-seg > span.on { background: rgba(var(--mud-palette-primary-rgb), 0.15); color: var(--mud-palette-primary); }
.pa-seg .b { font-size: 0.64rem; font-weight: 700; opacity: 0.75; background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 0 6px; }
.pa-seg > span.on .b { background: rgba(var(--mud-palette-primary-rgb), 0.22); }

/* Scrollbare tijdlijn. */
.pa-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.pa-scroll::-webkit-scrollbar { width: 6px; }
.pa-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }

/* Dag-scheidingskop (Vandaag / Gisteren / wo 18 jun). */
.pa-day { display: flex; align-items: center; gap: 9px; padding: 13px 2px 9px; }
.pa-day:first-child { padding-top: 2px; }
.pa-day .d { font-size: 0.7rem; font-weight: 700; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.06em; }
.pa-day .n { font-size: 0.66rem; color: rgba(255, 255, 255, 0.3); }
.pa-day .rule { height: 1px; flex: 1; background: rgba(255, 255, 255, 0.06); }

/* Eén gebeurtenis = rail (gekleurde node + verbindingslijn) + inhoudskaart. */
.pa-evt { display: flex; gap: 13px; }
.pa-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 40px; padding-top: 4px; }
.pa-rail .time { font-size: 0.64rem; color: rgba(255, 255, 255, 0.35); margin-bottom: 5px; white-space: nowrap; line-height: 1; }
.pa-node { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 16%, transparent); }
.pa-line { width: 2px; flex: 1; min-height: 12px; background: rgba(255, 255, 255, 0.06); margin: 4px 0; }
.pa-evt:last-child .pa-line { display: none; }

.pa-card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 11px 14px; margin-bottom: 9px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.pa-card:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); }
.pa-card.view { background: rgba(255, 255, 255, 0.015); border-color: rgba(255, 255, 255, 0.04); }

.pa-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pa-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pa-nm { font-size: 0.88rem; font-weight: 650; color: rgba(255, 255, 255, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pa-l2 { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.55); min-width: 0; }
.pa-l2 .prop { color: rgba(255, 255, 255, 0.6); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-l2 .email { color: rgba(255, 255, 255, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-l2 .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); flex-shrink: 0; }

.pa-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; text-align: right; }
.pa-dev { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }
.pa-dev .mud-icon-root { color: rgba(255, 255, 255, 0.35); }
.pa-when { font-size: 0.69rem; color: rgba(255, 255, 255, 0.35); white-space: nowrap; }
.pa-badge { padding: 2px 9px; border-radius: 999px; font-size: 0.67rem; font-weight: 600; white-space: nowrap; }
.pa-vcount { font-size: 0.66rem; font-weight: 700; color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), 0.14); border-radius: 999px; padding: 1px 7px; }
.pa-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.64rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }
.pa-status .sdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pa-status b { font-weight: 600; color: rgba(255, 255, 255, 0.6); }

/* ── Portaalactiviteit-PAGINA (/portal-activity) — cockpit-layout bovenop de gedeelde .pa-*-tijdlijn ── */
.pa-page { --pa-view: #F5A623; --pa-accept: #059669; max-width: 1240px; margin: 0 auto; padding: 26px 24px 72px; display: flex; flex-direction: column; gap: 18px; }
.pa-page .pa-card { cursor: default; }

.pa-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.pa-ph-actions { display: flex; align-items: center; gap: 9px; }
.pa-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: 0.76rem; font-weight: 600; cursor: pointer; background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); transition: color 0.15s ease, border-color 0.15s ease; }
.pa-btn:hover { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.25); }
.pa-btn.danger { color: rgba(248, 113, 113, 0.8); border-color: rgba(248, 113, 113, 0.3); }
.pa-btn:disabled { opacity: 0.5; cursor: default; }

.pa-seg2 { display: inline-flex; gap: 3px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 9px; padding: 3px; }
.pa-seg2 > span { padding: 6px 11px; border-radius: 6px; font-size: 0.73rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.pa-seg2 > span:hover { color: rgba(255, 255, 255, 0.7); }
.pa-seg2 > span.on { background: rgba(var(--mud-palette-primary-rgb), 0.15); color: var(--mud-palette-primary); }

/* KPI-cards */
.pa-kpicards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1080px) { .pa-kpicards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .pa-kpicards { grid-template-columns: repeat(2, 1fr); } }
.pa-kc { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 13px; padding: 15px 16px; position: relative; overflow: hidden; }
.pa-kc .ico { position: absolute; right: 11px; top: 11px; font-size: 19px; opacity: 0.55; }
.pa-kc .v { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.pa-kc .l { font-size: 0.71rem; color: rgba(255, 255, 255, 0.45); margin-top: 6px; }
.pa-kc .t { font-size: 0.64rem; font-weight: 600; margin-top: 4px; }

.pa-grid2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: stretch; }
.pa-grid2b { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .pa-grid2, .pa-grid2b { grid-template-columns: 1fr; } }

/* card-kop op de pagina */
.pa-ch { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.pa-ch .t { font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.pa-ch .ic, .pa-ch .mud-icon-root { color: rgba(255, 255, 255, 0.45); font-size: 16px; }
.pa-ch .right { margin-left: auto; font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); }

/* staafgrafiek */
.pa-chart { display: flex; align-items: flex-end; gap: 6px; height: 156px; padding-top: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.pa-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; border-radius: 3px; transition: background 0.15s ease; }
.pa-col:hover { background: rgba(255, 255, 255, 0.04); }
.pa-col .seg-a { background: var(--pa-accept); border-radius: 3px 3px 0 0; }
.pa-col .seg-v { background: var(--pa-view); border-radius: 3px; opacity: 0.9; }
.pa-col:hover .seg-a, .pa-col:hover .seg-v { filter: brightness(1.2); }
.pa-chart-x { display: flex; gap: 6px; margin-top: 7px; }
.pa-chart-x span { flex: 1; text-align: center; font-size: 0.6rem; color: rgba(255, 255, 255, 0.32); white-space: nowrap; overflow: hidden; }
.pa-chart-leg { display: flex; gap: 16px; margin-top: 12px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); }
.pa-chart-leg span { display: inline-flex; align-items: center; gap: 6px; }
.pa-chart-leg .sw { width: 10px; height: 10px; border-radius: 3px; }

/* apparaten */
.pa-devrow { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.pa-devico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.6); flex-shrink: 0; }
.pa-devmain { flex: 1; min-width: 0; }
.pa-devtop { display: flex; justify-content: space-between; font-size: 0.78rem; margin-bottom: 5px; }
.pa-devtop .n { color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.pa-devtop .p { color: rgba(255, 255, 255, 0.45); }
.pa-devtrack { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.pa-devtrack i { display: block; height: 100%; border-radius: 4px; }

/* trechter */
.pa-fnrow { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.pa-fnrow .lab { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); min-width: 104px; }
.pa-fntrack { flex: 1; height: 26px; background: rgba(255, 255, 255, 0.04); border-radius: 7px; overflow: hidden; }
.pa-fntrack i { display: block; height: 100%; border-radius: 7px; transition: width 0.3s ease; }
.pa-fnrow .ct { font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); min-width: 56px; text-align: right; }
.pa-fnrow .ct small { font-weight: 500; color: rgba(255, 255, 255, 0.35); font-size: 0.7rem; margin-left: 7px; }

/* ranglijsten */
.pa-rank { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.pa-rank:last-child { border-bottom: none; }
.pa-rank .badge-n { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; }
.pa-rank .mid { flex: 1; min-width: 0; }
.pa-rank .nm { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-rank .sub { font-size: 0.71rem; color: rgba(255, 255, 255, 0.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-rank .val { font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); flex-shrink: 0; }
.pa-rank .when { font-size: 0.68rem; color: rgba(255, 255, 255, 0.3); flex-shrink: 0; }

/* tijdlijn-balk */
.pa-tlbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pa-searchbox { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.45); min-width: 240px; }
.pa-searchbox input { background: transparent; border: none; outline: none; color: rgba(255, 255, 255, 0.7); font-size: 0.76rem; flex: 1; min-width: 0; }
.pa-searchbox input::placeholder { color: rgba(255, 255, 255, 0.3); }

/* tijdlijn-scrollbox — begrenst de volledige-activiteit-lijst i.p.v. eindeloos doorlopen */
.pa-tlscroll { max-height: 560px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.pa-tlscroll::-webkit-scrollbar { width: 6px; }
.pa-tlscroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }

/* Status-badge op een rij (mockup .badge). Achtergrond/kleur inline per status. */
.dw-badge { padding: 3px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; }

/* Kaart-kop met rechts-uitgelijnde controls (link/knoppen) — mockup .cardh-right. */
.dw-headbtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 0.71rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.dw-headbtn:hover { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.25); }

/* Open client-requests widget — amber-tinted variant (OpenRequestsWidget). */
.td-open-requests-widget {
    padding: 16px 20px;
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.32);
    border-radius: 14px;
}

.td-open-requests-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(245, 166, 35, 0.18);
    margin-bottom: 12px;
}

.td-open-requests-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 760px) {
    .td-open-requests-list { grid-template-columns: 1fr; }
}

.td-open-requests-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.td-open-requests-item:hover {
    border-color: rgba(245, 166, 35, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

/* Inbox-widgets (Onder voorbehoud / Acties uit formulieren) — zelfde 400px-begrenzing als .dw-card;
   de inline scrolllijst erin krijgt flex:1 + min-height:0 zodat 'ie de resterende ruimte vult. */
.dd-widget { display: flex; flex-direction: column; max-height: 460px; }

/* Acties-uit-formulieren inbox — inklapbare accordion per klant (FormActionFlagInboxWidget). */
.fa-acc {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    /* In de flex-kolom scrollbox niet meekrimpen — anders klemt een uitgeklapte accordion z'n
       eigen body af tegen de onderrand i.p.v. de box te laten scrollen. */
    flex-shrink: 0;
}

/* Een groep met een niet-behaald voorbehoud krijgt een rode tint. */
.fa-acc.failed {
    border-color: rgba(239, 83, 80, 0.4);
    background: rgba(239, 83, 80, 0.05);
}

.fa-acc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.fa-acc-head:hover { background: rgba(255, 255, 255, 0.03); }

.fa-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.14);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.3);
}

.fa-acc-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-acc-mgr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.fa-acc-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.fa-acc-dots { display: inline-flex; gap: 3px; }
.fa-acc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

.fa-acc-count {
    padding: 1px 9px;
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

.fa-chev { transition: transform 0.18s ease; color: rgba(255, 255, 255, 0.4); }
.fa-acc.open .fa-chev { transform: rotate(90deg); }

.fa-acc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 11px 11px;
}

.fa-acc-preview {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    padding: 0 13px 11px;
    margin-top: -4px;
    overflow: hidden;
}

.fa-pv-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Agenda-afspraak-regel — Vandaag/Deze week widgets (AppointmentRow). */
.ag-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ag-row:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); }

.ag-time { width: 52px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.ag-s { font-size: 0.82rem; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.ag-e { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); }
.ag-allday { font-size: 0.66rem; font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.03em; }

.ag-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.ag-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ag-type { flex-shrink: 0; padding: 1px 7px; border-radius: 4px; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.ag-cat { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 4px; font-size: 0.66rem; font-weight: 500; }
.ag-title { font-size: 0.84rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-note { font-size: 0.74rem; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ag-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; text-align: right; }
.ag-who { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); }
.ag-city { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.38); }

.ag-breakdown { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 14px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); }
.ag-breakdown b { font-weight: 600; }

.ag-day { display: flex; align-items: center; gap: 8px; padding: 10px 2px 4px; }
.ag-day .d { font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.72); text-transform: capitalize; }
.ag-day .n { font-size: 0.68rem; color: rgba(255, 255, 255, 0.35); }
.ag-day .rule { height: 1px; flex: 1; background: rgba(255, 255, 255, 0.06); }

/* Bedrag- en account-manager-chip op actie-rijen (Aandacht/Stille/Voorbereide/Nog in te plannen). */
.dw-amt {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.dw-mgr {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.69rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.dw-when {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

/* ── Dashboard-paginalayout: secties, 2-koloms raster, context-balk, triage-strip ── */

/* Context-balk: begroeting + datum/week links, filters rechts. */
.dash-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.dash-greeting { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-greeting .g { font-size: 1.5rem; font-weight: 750; color: rgba(255, 255, 255, 0.92); line-height: 1.2; letter-spacing: -0.01em; }
.dash-greeting .d {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.85rem; color: rgba(255, 255, 255, 0.45); text-transform: capitalize;
}
.dash-greeting .d .wk {
    text-transform: none; font-weight: 600; color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 1px 8px;
}

.dash-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Triage-strip: omrande balk met telling-chips. Alleen het getal is gekleurd (mockup .triage). */
.dash-triage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.dash-triage-chip {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: default;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dash-triage-chip .n { font-size: 1.3rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.dash-triage-chip .l { font-size: 0.73rem; color: rgba(255, 255, 255, 0.55); font-weight: 500; line-height: 1.2; }

/* Klikbare chip springt naar z'n widget-bakje (dash-anchor) toe. */
.dash-triage-chip--clickable { cursor: pointer; }
.dash-triage-chip--clickable:hover { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.06); }

/* Anker rond een dashboard-widget: transparant, erft de grid-/flex-plaatsing van het bakje.
   display:flex + stretch zodat het widget-bakje de volle breedte én (in een 2-koloms rij) de
   gelijke rijhoogte behoudt die het als directe grid-cel had. border-radius laat de highlight-ring
   de afgeronde hoeken van het bakje volgen. */
.dash-anchor { display: flex; min-width: 0; border-radius: 14px; }
.dash-anchor > * { flex: 1 1 auto; min-width: 0; }

/* Gedeelde deeplink-highlight: korte blauwe puls die de aandacht naar één element trekt
   (proposal-card in het dossier, widget-bakje op het dashboard, afspraak in de agenda).
   Capped op 5 pulsen zodat 'ie na ~4,5s vanzelf stopt en niet intrusief blijft staan; de
   scroll-highlight.js-helper haalt de class daarna weg. Blauw = indigo (rgba(99,102,241,…)). */
.curr-focus-highlight { animation: currFocusPulse 1.1s ease-in-out 3; }
@keyframes currFocusPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); background-color: transparent; }
    50%      { box-shadow: 0 0 0 3px rgba(99,102,241,0.35), 0 0 20px 2px rgba(99,102,241,0.4); background-color: rgba(99,102,241,0.10); }
}

/* Herbruikbare lijst-herorden-affordance (ReorderGrip.razor / ReorderArrows.razor + list-reorder.js).
   Altijd zichtbaar maar subtiel; oplichtend op eigen hover, zodat de componenten niet afhangen van
   een specifieke rij-klasse en overal inzetbaar zijn. */
.reorder-grip { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); cursor: grab; }
.reorder-grip:hover { color: rgba(255,255,255,0.7); }
.reorder-grip:active { cursor: grabbing; }
.reorder-arrows { display: inline-flex; flex-direction: column; vertical-align: middle; margin-right: 4px; }
.reorder-arrow { border: 0; background: transparent; cursor: pointer; color: rgba(255,255,255,0.45); padding: 0; height: 15px; line-height: 1; border-radius: 4px; display: inline-flex; align-items: center; }
.reorder-arrow:hover:not(:disabled) { color: var(--mud-palette-primary); }
.reorder-arrow:disabled { color: rgba(255,255,255,0.15); cursor: default; }
/* Drop-indicator tijdens het slepen: blauwe lijn boven/onder de doelrij (op de cellen zodat de
   box-shadow over de volle rijbreedte zichtbaar is). */
.reorder-dragging { opacity: 0.4; }
.reorder-drop-before > td { box-shadow: inset 0 2px 0 0 var(--mud-palette-primary); }
.reorder-drop-after > td { box-shadow: inset 0 -2px 0 0 var(--mud-palette-primary); }

/* Secties + responsive 2-koloms raster (mockup .sec + .grid2, auto-fit). */
.dash-section { display: flex; flex-direction: column; gap: 18px; }

.dash-section-head { display: flex; align-items: center; gap: 11px; margin: 10px 2px 0; }
.dash-section-head .mud-icon-root { color: rgba(255, 255, 255, 0.45); }
.dash-section-head .t {
    font-size: 0.76rem; font-weight: 700; color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.dash-section-head .rule { height: 1px; flex: 1; background: rgba(255, 255, 255, 0.08); }

/* auto-fit: 1 kaart → volle breedte; 2+ → naast elkaar in 2 kolommen. Lege/zelf-verbergende
   widgets renderen geen element en laten dus geen lege cel achter. */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 18px;
    align-items: stretch;
}
.dash-grid > * { min-width: 0; }

/* Volle-breedte widgets (KPI-balken, annuleer-verzoeken, accordeons, portaal) spannen alle kolommen. */
.dash-full { grid-column: 1 / -1; min-width: 0; }

@media (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Gedeelde instellingen-widgets (Shared/Settings/*Widget.razor)
   Deze klassen worden gebruikt op Portaal Instellingen én Tour
   Instellingen; ze staan hier globaal zodat de widgets op elke
   pagina identiek renderen.
   ============================================================ */
.portal-section-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.3s ease;
}
.portal-section-card:hover {
    border-color: rgba(255,255,255,0.22) !important;
}
.portal-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.portal-card-header-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.portal-form-label {
    display: block;
    font-size: 0.69rem;
    font-weight: 500;
    color: rgba(255,255,255,0.42);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.portal-form-label-required::after {
    content: ' *';
    color: #F87171;
    font-size: 0.65rem;
}
.portal-form-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}
.portal-form-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
}
.portal-form-input::placeholder { color: rgba(255,255,255,0.22); }
.portal-form-input.input-error {
    border-color: rgba(239,68,68,0.7) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
}
.portal-field-error {
    display: block;
    font-size: 0.69rem;
    color: #F87171;
    margin-top: 4px;
    line-height: 1.4;
}