/* De gedeelde paginaschil. Wat dialogs.css voor CurrentlyDialog doet, doet dit voor
   CurrentlyPage: de breedte, de padding, de kop, de tussenruimte, de laadstaat, de leegstaat en
   de voet staan hier, zodat een pagina alleen nog z'n body levert.

   De schil bezit de doos, niet de inhoud. Wat er in een gebied staat, hoeveel blokken en welke
   vorm die aannemen, bepaalt de pagina. Ontwerp: curr/mockups/pagina-schil-v3.html en verder. */

.cp {
    /* ── de kolom ── */
    --cp-width: 1100px;
    --cp-pad-x: 24px;
    --cp-pad-top: 24px;
    --cp-pad-bottom: 64px;
    --cp-gap: 16px;

    /* ── de kop ── */
    --cp-title-size: 1.4rem;
    --cp-title-weight: 600;
    --cp-sub-size: 0.82rem;
    --cp-sub-width: 720px;
    --cp-lead-size: 42px;
    --cp-lead-radius: 11px;
    --cp-lead-gap: 13px;
    --cp-head-gap: 14px;
    --cp-head-pad: 20px;
    --cp-rule: rgba(255, 255, 255, 0.08);

    /* ── de knoppenbalk in de kop: een strook, geen kader ──
       Een vlak in plaats van een rand: een rand concurreert met de randen van de knoppen zelf en
       maakt de strook verwisselbaar met de pillenbalk uit een toolbar (die staat op fit-content
       mét rand). De tint zit tussen de rij in een lijst (0.02) en de kaart (0.04) in. */
    --cp-actionbar-bg: rgba(255, 255, 255, 0.025);
    --cp-actionbar-radius: 10px;
    --cp-actionbar-pad: 7px 10px;
    --cp-icon-pad: 6px;
    --cp-split-gap: 3px;

    /* Hoeveel loze ruimte er rechts in een icoonknop zit: de padding hierboven plus het randje
       tussen het icoonteken en z'n vak. Gemeten op een renderfoto, niet geschat; met alleen de
       padding bleef er drie pixel scheefstand over. */
    --cp-icon-inset: 9px;

    /* ── de staten ── */
    --cp-loading-height: 60vh;

    /* ── Type=Viewer ── */
    --cp-list-width: 340px;

    max-width: var(--cp-width);
    margin: 0 auto;
    padding: var(--cp-pad-top) var(--cp-pad-x) var(--cp-pad-bottom);
    display: flex;
    flex-direction: column;
    gap: var(--cp-gap);
    min-width: 0;
}

/* ── de breedte-ladder. Genoemde stappen in plaats van losse getallen, zodat een pagina met een
   bredere kolom nog steeds een maat draagt die elders ook bestaat. ── */
.cp-w-xxsmall { --cp-width: 700px; }
.cp-w-xsmall  { --cp-width: 900px; }
.cp-w-small   { --cp-width: 1100px; }
.cp-w-medium  { --cp-width: 1200px; }
.cp-w-large   { --cp-width: 1400px; }
.cp-w-xlarge  { --cp-width: 1500px; }
.cp-w-xxlarge { --cp-width: 1600px; }
.cp-w-full    { --cp-width: none; }

/* ── de lijst-ladder voor een Viewer ── */
.cp-l-small   { --cp-list-width: 320px; }
.cp-l-medium  { --cp-list-width: 340px; }
.cp-l-large   { --cp-list-width: 360px; }
.cp-l-xlarge  { --cp-list-width: 380px; }
.cp-l-max     { --cp-list-width: 400px; }

/* ══ de kop: twee regels. Regel 1 is Lead plus Titles over de volle breedte, regel 2 is de
   knoppenbalk. Zonder knoppen is er geen tweede regel en dus ook geen tussenruimte. ══ */
.cp-head {
    display: flex;
    flex-direction: column;
    gap: var(--cp-head-gap);
    padding-bottom: var(--cp-head-pad);
    border-bottom: 1px solid var(--cp-rule);
}

/* ══ Type=Editor: het venster is de doos ══
   Een editor groeit niet mee met z'n inhoud maar vult het scherm; de panelen erbinnen scrollen
   zelf. Daarom geen onderrand en geen eigen scroll op de kolom.

   De aftrek van het venster is een token, want de drie editors trokken er 100, 100 en 130 af en
   dat verschil was niemand opgevallen. */
.cp-editor {
    --cp-editor-offset: 100px;

    height: calc(100vh - var(--cp-editor-offset));
    min-height: 560px;
    padding-bottom: 0;
    gap: 12px;
}

/* De kop is één regel: aanloopvak, titels, en de knoppen rechts op diezelfde regel. */
.cp-editor .cp-head {
    flex-direction: row;
    align-items: center;
    gap: var(--cp-lead-gap);
    padding-bottom: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* De regel met het aanloopvak en de titels neemt de ruimte, zodat de knoppen rechts uitkomen. */
.cp-editor .cp-head-row { flex: 1; }
.cp-editor .cp-title { font-size: 1.1rem; }
.cp-editor .cp-sub { font-size: 0.74rem; }

/* Kleiner aanloopvak dan op een gewone pagina: de kop is hier compacter en een vak van 42 duwt
   de regel te hoog. */
.cp-editor .cp-lead {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

/* De body neemt wat er overblijft, zodat de panelen erbinnen zelf kunnen scrollen. */
.cp-editor .cp-area {
    flex: 1;
    min-height: 0;
}

/* ══ de gekleurde kop ══
   Dezelfde kop, maar als getinte kaart met een gloed rechtsboven. De zes kleurwaarden komen als
   custom properties binnen uit PageAccent, afgeleid van één accent uit de tonenlijst; hier staat
   alleen de vorm. Bedoeld voor een pagina die er eentje verdient: als alles kleur heeft, heeft
   niets meer kleur. */
.cp-head.cp-accent {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    border: 1px solid var(--cp-accent-line);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--cp-accent-top) 0%, var(--cp-accent-bottom) 100%);
}

/* De gloed is het enige dat de kaart diepte geeft; zonder blijft 'ie een plat vlak. */
.cp-head.cp-accent::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    pointer-events: none;
    opacity: 0.6;
    background: radial-gradient(circle, var(--cp-accent-glow) 0%, transparent 60%);
}

.cp-head.cp-accent > * {
    position: relative;
    z-index: 1;
}

/* De kaart is hier al de ondergrond; een eigen vlak onder de knoppen leest als een lichtere band
   erin. */
.cp-head.cp-accent .cp-actions {
    background: none;
    padding: 0;
}

.cp-head.cp-accent .cp-lead-tile {
    background: linear-gradient(135deg, var(--cp-accent-tile-a) 0%, var(--cp-accent-tile-b) 100%);
    color: #fff;
    box-shadow: 0 4px 16px -8px var(--cp-accent-glow);
}

.cp-head-row {
    display: flex;
    align-items: center;
    gap: var(--cp-lead-gap);
    min-width: 0;
}

/* Het aanloopvak is even groot wat er ook in staat, zodat de titel op élke pagina op dezelfde x
   begint. Twee vullingen: een icoontegel op een hoofdpagina, een terugknop op een pagina die
   ergens onder hangt. */
.cp-lead {
    width: var(--cp-lead-size);
    height: var(--cp-lead-size);
    border-radius: var(--cp-lead-radius);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-lead-tile {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
}

/* Kaal, zonder rand. Een omrande terugknop leest als een knop die iets uitvoert, terwijl teruggaan
   navigeren is; bovendien concurreert die rand met de randen van de knoppen in de balk eronder. */
.cp-lead-back {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.cp-lead-back:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.cp-titles { min-width: 0; }

/* De titel met wat er bij de titel hoort ernaast: een dossiernummer, een merkje, een stand. Breekt
   af naar een volgende regel zodra het niet meer past, zodat een lange titel niets wegduwt. */
.cp-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.cp-title {
    font-size: var(--cp-title-size);
    font-weight: var(--cp-title-weight);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
}

.cp-sub {
    font-size: var(--cp-sub-size);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
    margin-top: 2px;
    max-width: var(--cp-sub-width);
}

.cp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--cp-actionbar-bg);
    border-radius: var(--cp-actionbar-radius);
    padding: var(--cp-actionbar-pad);
}

/* Een strook zonder inhoud hoort er niet te staan. De schil kan niet weten of een pagina in haar
   keuze-blok iets tekent: die blijft leeg zodra er nog geen gegevens zijn (op de portaalactiviteit
   verschijnt het bereik pas als er activiteit is). Zonder deze regel blijft er dan een lege band
   staan met alleen het vlak van de strook erin. */
.cp-actions:not(:has(button, a, .cp-actions-lead > *)) {
    display: none;
}

/* De keuze links in de strook duwt de knoppen naar rechts. Zo heeft de balk aan beide kanten
   gewicht in plaats van één ding aan één kant en een gat ernaast. */
.cp-actions-lead {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Een icoonknop heeft geen rand, dus de zichtbare rand is het icoontje zelf en niet z'n vak. Die
   eigen ruimte binnen het vak staat hier vast, want de scheiding hieronder rekent ermee. */
.cp-actions .mud-icon-button {
    padding: var(--cp-icon-pad);
}

/* De grens tussen de kale icoonknoppen en de omrande tekstknoppen. Een icoontje pal naast een pil
   leest als een knop die z'n rand kwijt is; met een streepje ertussen leest het als twee soorten.
   Lager dan de knoppen zelf, want het moet scheiden en niet meedoen.

   Symmetrie is hier niet gelijke marges maar gelijke zichtbare ruimte: aan de kant van een pil
   meet je vanaf de rand, aan de kant van een icoonknop vanaf het icoonteken, en daartussen zit de
   loze ruimte van die knop. Aan wélke kant die zit hangt af van de volgorde, en die bepaalt de
   pagina, dus de aftrek gaat naar de kant waar het icoontje staat. */
.cp-actions-split {
    width: 1px;
    height: 20px;
    flex-shrink: 0;
    margin: 0 var(--cp-split-gap);
    background: rgba(255, 255, 255, 0.14);
}

.cp-actions-split.is-after-icon {
    margin-left: calc(var(--cp-split-gap) - var(--cp-icon-inset));
}

.cp-actions-split.is-before-icon {
    margin-right: calc(var(--cp-split-gap) - var(--cp-icon-inset));
}

/* ══ de gebieden zijn stapels: de schil zet de tussenruimte, de pagina de inhoud ══ */
.cp-area {
    display: flex;
    flex-direction: column;
    gap: var(--cp-gap);
    min-width: 0;
}

/* ══ Type=Viewer: de lijst links, het detail rechts ══ */
.cp-split {
    display: grid;
    grid-template-columns: minmax(0, var(--cp-list-width)) minmax(0, 1fr);
    gap: var(--cp-gap);
    align-items: start;
    min-width: 0;
}

.cp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* ══ de voet ══
   position:sticky met bottom:0 pint alleen vast wanneer de eigen plek van de voet ónder de
   onderkant van het venster zou vallen. Past de pagina in het venster, dan gebeurt er niets en
   staat de voet gewoon onder de inhoud. Dat is precies het gedrag dat je wil: pas een balk zodra
   het krap wordt.

   Daarom staat er GEEN schaduw. Die schaduw was altijd zichtbaar en maakte er ook op een korte
   pagina een losgekoppelde balk van. De achtergrond blijft wel dekkend, want zodra 'ie wél pint
   moet de inhoud er niet dwars doorheen scrollen; op een korte pagina is die achtergrond gelijk
   aan die van de pagina en dus onzichtbaar.

   Leesrichting gelijk aan de dialogschil: het lichtste links, de hoofdactie rechts. */
.cp-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--cp-rule);
    background: var(--mud-palette-background);
}

/* Wat er links in de voet staat duwt de knoppen naar rechts. */
.cp-foot-info {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ══ de staten ══ */
.cp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--cp-loading-height);
}

/* ══ De lege staat ══
   Eén vorm voor de hele toepassing, van een hele pagina tot een regel in een kaart. De maat
   bepaalt de ruimte, de omlijsting bepaalt wat de rand vertelt. */
.es {
    text-align: center;
    border-radius: 12px;
    background: transparent;
}

.es-normal { padding: 48px 40px; }
.es-compact { padding: 28px 20px; }

.es-none { border: 0; }
.es-dashed { border: 2px dashed rgba(255, 255, 255, 0.12); }

/* Het bakje bestaat al, het is alleen nog niet gevuld. Dezelfde schuine arcering als de
   betaalbalk voor een termijn die nog moet komen. */
.es-skeleton {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-image: repeating-linear-gradient(135deg,
        rgba(255, 255, 255, 0.045) 0 6px, rgba(255, 255, 255, 0.015) 6px 12px);
}

.es-icon { font-size: 48px; opacity: 0.25; }
.es-compact .es-icon { font-size: 32px; }

.es-title { font-size: 1rem; margin: 16px 0 6px; color: rgba(255, 255, 255, 0.75); }
.es-compact .es-title { font-size: 0.88rem; margin: 10px 0 4px; }
.es:not(:has(.es-icon)) .es-title { margin-top: 0; }

.es-text { font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); line-height: 1.6; }
.es-extra { margin-top: 16px; }
.es-action { margin-top: 18px; }
.es-compact .es-action { margin-top: 12px; }

/* De lege staat van een Viewer: de lijst staat er wel, er is alleen niets gekozen. */
.cp-nothing {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.3);
}

.cp-nothing-icon { font-size: 40px; opacity: 0.3; }
.cp-nothing-text { font-size: 0.88rem; margin-top: 12px; }