/* ============================================================
   portal.css — Klantportaal (Module O) componentklassen
   ------------------------------------------------------------
   Fase 22Q-5B-2 — CSS-consolidatie.
   - Vervangt veel herhaalde inline-styles uit de portal-views door
     compacte, herbruikbare klassen.
   - Visueel IDENTIEK aan de bestaande inline-styles (zelfde waarden,
     zelfde tokens). Geen kleur-, typografie-, spacing- of brandingwijziging.
   - Gebruikt uitsluitend bestaande CSS-variabelen uit style.css
     (--primary, --text, --text-light, --border, ...). Introduceert geen
     nieuwe merkkleuren.
   - Wordt ALLEEN geladen via layouts/portal.php. Raakt style.css niet en
     heeft geen effect op staff/teacher/admin/publieke pagina's.
   - De mobiele/responsieve regels (22Q-5A) blijven in layouts/portal.php
     staan en worden hier niet aangeraakt.
   - Fase 22R: dark-mode token-pass — hardgecodeerde kleurwaarden vervangen
     door bestaande tokens uit style.css (--surface, --success(-bg),
     --danger(-bg)), zodat het portaal in dark mode correct rendert.
   ============================================================ */

/* Pagina-titel — was: font-size:1.5rem; font-weight:600; margin-bottom:20px; color:var(--text,#333); */
.portal-h1 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 20px;
    color: var(--text, #333);
}

/* Kaart-container — was: background:#fff; border:1px solid var(--border,#e0e0e0); border-radius:8px; padding:20px; margin-bottom:20px; */
.portal-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Sectie-label (uppercase) — was: font-size:0.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-light,#999); margin:0 0 10px; */
.portal-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-light, #999);
    margin: 0 0 10px;
}

/* Lege staat — was: background:#fff; border:1px solid var(--border,#e0e0e0); border-radius:8px; padding:24px; color:var(--text-light,#888); */
.portal-empty {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    padding: 24px;
    color: var(--text-light, #888);
}

/* Tabel-wrapper — was: background:#fff; border:1px solid var(--border,#e0e0e0); border-radius:8px; overflow-x:auto; */
.portal-table-wrap {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    overflow-x: auto;
}

/* Flash-melding — was de inline basis + success/error-ternary.
   Zelfde waarden als voorheen. */
.portal-flash {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9rem;
}
.portal-flash-success {
    background: var(--success-bg, #eafaf1);
    border: 1px solid var(--success, #a9dfbf);
    color: var(--success, #196f3d);
}
.portal-flash-error {
    background: var(--danger-bg, #fdedec);
    border: 1px solid var(--danger, #f5b7b1);
    color: var(--danger, #943126);
}

/* ============================================================
   22Q-5B-3 — Visual polish (additief)
   ------------------------------------------------------------
   Verfijnt bestaande portal-componenten en voegt dashboard-/
   berichten-helpers toe. Uitsluitend bestaande CSS-variabelen;
   geen nieuwe merkkleuren. GEEN @media-regels — de mobiele/
   responsieve waarheid uit 22Q-5A blijft in layouts/portal.php.
   ============================================================ */

/* Zachtere diepte op kaarten/containers (subtiele schaduw uit tokens) */
.portal-card,
.portal-table-wrap {
    box-shadow: var(--shadow);
}

/* Rustiger, gecentreerde lege staat */
.portal-empty {
    box-shadow: var(--shadow);
    text-align: center;
    padding: 32px 24px;
}

/* Strakkere pagina-titel */
.portal-h1 {
    letter-spacing: -0.01em;
}

/* Iets duidelijker sectiekop */
.portal-section-title {
    margin-bottom: 12px;
}

/* Rustige, moderne tabelkoppen (alleen desktop; thead is mobiel verborgen).
   De th-inline zet enkel padding + font-weight; kleur/transform/size hier. */
.portal-table thead th {
    color: var(--text-light);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: .04em;
}

/* Duidelijkere acties: portal-knoppen iets steviger; de primaire actie
   krijgt een subtiele merk-getinte schaduw zodat o.a. "Betaal nu" opvalt. */
.portal-main .btn { font-weight: 600; }
.portal-main .btn-primary {
    box-shadow: 0 1px 2px rgba(22, 48, 43, .25);   /* --primary-dark getint */
}
.portal-main .btn-primary:hover {
    box-shadow: 0 2px 6px rgba(22, 48, 43, .30);
}

/* ── Dashboard: actieblok "Voor u" ─────────────────────────── */
.portal-actions {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 6px 20px 16px;
    margin-bottom: 24px;
}
.portal-actions__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-light, #999);
    margin: 14px 0 4px;
}
.portal-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-top: 1px solid var(--border, #eee);
}
.portal-action-row__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text, #333);
}
.portal-action-row__sub {
    font-size: 0.82rem;
    color: var(--text-light, #888);
    margin-top: 3px;
}
.portal-action-row__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.portal-action-row__link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary, #1E5A50);
    text-decoration: none;
    white-space: nowrap;
}
.portal-action-row__link:hover { color: var(--primary-light); }

/* Prominente rijen: eerstvolgende les + openstaande facturen */
.portal-action-row--highlight {
    margin: 10px 0;
    padding: 14px 16px;
    background: var(--bg, #f8fafc);
    border: 1px solid var(--border-light, #eef);
    border-left: 3px solid var(--primary, #1E5A50);
    border-radius: 6px;
}
.portal-action-row--highlight .portal-action-row__title {
    font-size: 1.05rem;
}

/* Lege actie-staat ("alles bijgewerkt") */
.portal-action-empty {
    border-top: 1px solid var(--border, #eee);
    padding: 16px 0;
    color: var(--text-light, #888);
    font-size: 0.9rem;
}

/* ── Dashboard: telkaarten ─────────────────────────────────── */
.portal-stat {
    display: block;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 20px;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
a.portal-stat:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.portal-stat__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary, #1E5A50);
    line-height: 1.1;
}
.portal-stat__label {
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--text-light, #888);
}

/* ── Berichten: richting-pill (verzonden door u / ontvangen van school) ── */
.portal-dir {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.portal-dir--out {   /* ontvangen van de school */
    background: var(--info-bg, #eff6ff);
    color: var(--info, #3b82f6);
}
.portal-dir--in {    /* verzonden door u */
    background: var(--bg, #f8fafc);
    color: var(--text-light, #64748b);
    border: 1px solid var(--border, #e2e8f0);
}