/*
 * Het dashboard met de cijfers per maand (templates/portaal/_dashboard.html.twig).
 *
 * Een eigen bestand omdat het op twee schermen staat: het simpele overzicht en het
 * geavanceerde. Beide basissjablonen laden het, bovenop centrale.css; simpel.css zet daar
 * alleen nog de indeling van de simpele kant overheen. Dezelfde regel als daar: tokens, geen
 * kleuren -- zie de kop van centrale.css.
 */

.dashboard,
.simpel {
    --s-hoek: 10px;
}

.dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Zelf ook een flexkind (van het werkblad): zonder dit wordt het werkblad zo breed als de
       maandtabel, en schuift elk paneel op de pagina rechts buiten beeld. */
    min-width: 0;
}

/* Een flexkind krijgt anders de breedte van zijn breedste inhoud -- een tabel met twaalf
   maanden duwt dan op een telefoon de hele pagina opzij, ook al staat hij in een schuifvak. */
.dashboard > *,
.s-paneel > * { min-width: 0; }

.s-kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.s-kop__boven {
    margin: 0;
    font-size: 0.85rem;
    color: var(--inkt-dof);
}

.s-kop__titel {
    margin: 0.15rem 0 0;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--inkt-fel);
    letter-spacing: -0.01em;
}

.s-kop__titel::first-letter { text-transform: uppercase; }

.s-kop__onder {
    margin: 0.4rem 0 0;
    max-width: 60ch;
    color: var(--inkt-dof);
}

.s-maandkeuze {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.s-maandkeuze__label {
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
}

.s-maandkeuze select {
    min-height: var(--besturing);
    padding: 0 0.6rem;
    border: var(--regel);
    border-radius: 6px;
    background: var(--paneel-1);
    font: inherit;
    color: var(--inkt-fel);
}

.s-uitleg {
    margin: 0;
    font-size: 0.85rem;
    color: var(--inkt-dof);
    max-width: 70ch;
}

/* --------------------------------------------------------------- kaarten -- */

.s-kaarten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.s-kaart {
    padding: 1.3rem 1.4rem 1.2rem;
    background: var(--paneel-1);
    border: var(--regel);
    border-radius: var(--s-hoek);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.s-kaart--hoofd {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--paneel-3));
    background: color-mix(in srgb, var(--accent) 4%, var(--paneel-1));
}

.s-kaart__label {
    margin: 0;
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
}

.s-kaart__getal {
    margin: 0.2rem 0 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--inkt-fel);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.s-kaart--hoofd .s-kaart__getal { color: var(--accent); }

.s-kaart__eenheid {
    font-size: 1rem;
    font-weight: 500;
    color: var(--inkt-dof);
    letter-spacing: 0;
}

.s-kaart__klein {
    margin: 0;
    font-size: 0.82rem;
    color: var(--inkt-dof);
}

.s-kaart__vergelijk {
    margin: 0.8rem 0 0;
    padding-top: 0.75rem;
    border-top: var(--regel);
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: baseline;
}

.s-kaart__tegen { color: var(--inkt-dof); }

/* Omhoog en omlaag in dezelfde kleur. Meer gesprekken is drukte en geen fout; een groene of
   rode pijl zou een oordeel geven dat hier niet hoort. */
.s-verschil {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--inkt-fel);
    font-variant-numeric: tabular-nums;
}

.s-verschil span[aria-hidden] { font-size: 0.7rem; color: var(--accent); }
.s-verschil__wat { font-weight: 500; color: var(--inkt-dof); }
.s-verschil--gelijk { color: var(--inkt-dof); font-weight: 500; }

/* --------------------------------------------------------------- panelen -- */

.s-paneel {
    padding: 1.3rem 1.4rem;
    background: var(--paneel-1);
    border: var(--regel);
    border-radius: var(--s-hoek);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.s-paneel__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.s-paneel__titel {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--inkt-fel);
}

.s-paneel .leeg { padding: 1.5rem 0.5rem; }

.s-twee {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
}

.s-opbouw { margin: 0; }

.s-opbouw > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--paneel-3);
}

.s-opbouw dt { color: var(--inkt); }
.s-opbouw dd { margin: 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.s-opbouw__totaal { border-bottom: 0 !important; font-weight: 600; }
.s-opbouw__totaal dt, .s-opbouw__totaal dd { color: var(--inkt-fel); }

/* --------------------------------------------------------------- grafiek -- */

.s-grafiek {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 0.5rem;
    height: 12rem;
    padding-top: 0.5rem;
}

.s-grafiek__maand {
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    align-items: end;
    height: 100%;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.2rem 0 0.3rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: background var(--duur-kort) ease;
}

.s-grafiek__maand:hover { background: var(--paneel-2); text-decoration: none; }
.s-grafiek__maand--gekozen { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.s-grafiek__waarde {
    font-family: var(--font-data);
    font-size: 0.68rem;
    color: var(--inkt-dof);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.s-grafiek__waarde { grid-row: 1; }
.s-grafiek__naam { grid-row: 3; }

/* De staaf staat vast in de middelste rij. Zonder `grid-row` schuift hij een rij op zodra de
   waarde erboven verborgen is (op een telefoon), en dan is zijn hoogte een percentage van
   een rij zonder hoogte: een plat streepje. */
.s-grafiek__staaf {
    grid-row: 2;
    align-self: end;
    width: 70%;
    max-width: 2.4rem;
    min-height: 3px;
    border-radius: 4px 4px 0 0;
    background: color-mix(in srgb, var(--accent) 45%, var(--paneel-1));
}

.s-grafiek__maand--gekozen .s-grafiek__staaf { background: var(--accent); }

/* De lopende maand gestreept: hij is nog niet af. */
.s-grafiek__staaf--lopend {
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--accent) 55%, var(--paneel-1)) 0 4px,
        color-mix(in srgb, var(--accent) 25%, var(--paneel-1)) 4px 8px
    );
}

.s-grafiek__staaf--leeg { height: 3px !important; background: var(--paneel-3); }

.s-grafiek__naam {
    font-family: var(--font-data);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--inkt-zeer-dof);
}

.s-grafiek__maand--gekozen .s-grafiek__naam { color: var(--accent); font-weight: 600; }

.s-tabel { overflow-x: auto; }
.s-tabel .data { width: 100%; }
.s-tabel td { white-space: nowrap; }
.s-rij--gekozen td { background: color-mix(in srgb, var(--accent) 6%, transparent); }


@media (max-width: 860px) {
    .s-kaarten { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .s-grafiek { gap: 0.2rem; height: 9rem; }
    .s-grafiek__waarde { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .s-grafiek__maand { transition: none; }
}

/* ------------------------------------------------- geld (beheer) -- */

/* Vier kaarten in plaats van drie: omzet, kosten, marge en marge in procent. */
.s-kaarten--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-kaart__getal--rood,
.s-kaart--hoofd .s-kaart__getal--rood { color: var(--rood); }
.s-rood { color: var(--rood); }

.s-legenda { display: inline-flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--inkt-dof); }
.s-legenda__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.s-legenda__blok { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.s-legenda__blok--omzet { background: var(--accent); }
.s-legenda__blok--kosten { background: color-mix(in srgb, var(--let-op) 55%, var(--paneel-1)); }

/* Twee staven per maand naast elkaar. Het paar neemt de middelste rij van de maand in; de
   staven zelf staan daarbinnen onderaan, met hun hoogte als deel van die rij. */
.s-grafiek--paar .s-grafiek__paar {
    grid-row: 2;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 100%;
}

.s-grafiek--paar .s-grafiek__staaf {
    width: 40%;
    max-width: 1.4rem;
    background: var(--accent);
}

.s-grafiek--paar .s-grafiek__staaf--kosten {
    background: color-mix(in srgb, var(--let-op) 55%, var(--paneel-1));
}

.s-grafiek--paar .s-grafiek__staaf--lopend {
    background: repeating-linear-gradient(
        -45deg,
        var(--accent) 0 4px,
        color-mix(in srgb, var(--accent) 45%, var(--paneel-1)) 4px 8px
    );
}

.s-grafiek--paar .s-grafiek__staaf--leeg { height: 3px !important; background: var(--paneel-3); }
.s-grafiek__waarde--rood { color: var(--rood); }

/* ------------------------------------------------- dagen (verloop) -- */

/* Belminuten per dag. Elke dag een baan van volle hoogte in een lichte tint, met de staaf
   erin: een dag zonder gesprekken is dan een lege baan en geen streepje dat op bijna nul
   lijkt. */
.s-dagen {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    grid-template-rows: 8.5rem auto;
    column-gap: 0.5rem;
    row-gap: 0.3rem;
}

.s-dagen__as {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-family: var(--font-data);
    font-size: 0.66rem;
    color: var(--inkt-zeer-dof);
    line-height: 1;
}

.s-dagen__staven {
    grid-row: 1;
    grid-column: 2;
    display: grid;
    gap: 3px;
    align-items: stretch;
    background-image: linear-gradient(to top, var(--paneel-3) 1px, transparent 1px);
}

.s-dag {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: 3px 3px 0 0;
    background: color-mix(in srgb, var(--paneel-2) 70%, transparent);
    cursor: default;
    transition: background var(--duur-kort) ease;
}

.s-dag--weekend { background: color-mix(in srgb, var(--paneel-3) 35%, transparent); }
.s-dag:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.s-dag__staaf {
    width: 100%;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
}

.s-dag--stil .s-dag__staaf { display: none; }

.s-dagen__namen {
    grid-row: 2;
    grid-column: 2;
    display: grid;
    gap: 3px;
    font-family: var(--font-data);
    font-size: 0.62rem;
    color: var(--inkt-zeer-dof);
    text-align: center;
}

@media (max-width: 1100px) {
    .s-kaarten--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .s-kaarten--vier { grid-template-columns: 1fr; }
    .s-dagen { grid-template-columns: 2.4rem minmax(0, 1fr); }
    .s-dagen__staven, .s-dagen__namen { gap: 1px; }
}

/* De opbouw van de kosten in de kaart: klein, onder het getal, in dezelfde posten als
   Onder de streep. */
.s-kaart__opbouw { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--inkt-dof); }
.s-kaart__opbouw > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.s-kaart__opbouw dd { margin: 0; font-family: var(--font-data); font-variant-numeric: tabular-nums; }