/* ====== Basis layout container: GEEN card/schaduw meer ====== */

.ggrp-fe {
    box-sizing: border-box;
    background: transparent;
    padding: 0 0 40px;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    width: 100%;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ggrp-fe * {
    box-sizing: border-box;
}

/* ====== Header ====== */

.ggrp-fe-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.ggrp-fe-header h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #111827;
}

.ggrp-fe-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.ggrp-fe-header-year {
    display: flex;
    align-items: center;
}

/* Filter (jaar/maand) */

.ggrp-fe-filter-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ggrp-fe-filter-select {
    border: 1px solid #d1d5db;
    background: #ffffff;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    color: #111827;
}

/* Als je nog een losse year-button gebruikt bij andere pagina's */

.ggrp-fe-year-button {
    border: 1px solid #d1d5db;
    background: #ffffff;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #111827;
}

.ggrp-fe-year-button-icon {
    font-size: 11px;
}

/* ====== KPI-cards ====== */

.ggrp-fe-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ggrp-fe-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 18px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 96px;
}

.ggrp-fe-card-title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.ggrp-fe-card-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 4px;
    color: #111827;
}

.ggrp-fe-card-meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
}

.ggrp-fe-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #ff00001f;
    color: #ff2a2a;
}

.ggrp-fe-chip--up {
    background: #ecfdf3;
    color: #15803d;
}

/* ====== Panel / grafiekkaarten ====== */

.ggrp-fe-panel {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 16px;
}

.ggrp-fe-panel-header {
    padding: 16px 20px 10px;
    border-bottom: 0px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ggrp-fe-panel-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.ggrp-fe-panel-body {
    padding: 0px 0px 20px;
}

.ggrp-fe-panel-body--chart {
    height: 380px;
}

.ggrp-fe-panel-body--chart-small {
    height: 260px;
}

.ggr-positie-grafiek-wrapper {
    width: 100%;
    height: 100%;
}

.ggrp-fe-empty-chart {
    font-size: 13px;
    color: #6b7280;
}

/* Rij met 2 dividendgrafieken */

.ggrp-fe-chart-row {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.ggrp-fe-chart-row .ggrp-fe-panel {
    flex: 1;
}

/* === Transacties lay-out === */

.ggrp-fe--transacties {
    padding-bottom: 4rem;
}

/* Panel zelf is visueel "doorzichtig" zodat de cards los staan */
.ggrp-fe-panel--transacties {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
}

/* Header-rij (Type / BIJ-AF / etc.) */
.ggrp-fe-trans-head {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1.5fr;
    align-items: center;
    padding: 0.9rem 1.7rem;
    margin-bottom: 0.75rem;
    border-radius: 14px;
    background: #f4f5f7;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
}

/* Cards */
.ggrp-fe-trans-row {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eef0f4;
    margin-bottom: 0.8rem;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.ggrp-fe-trans-row.is-open {
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.ggrp-fe-trans-row-main {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1.5fr;
    align-items: center;
    padding: 1rem 1.7rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.ggrp-fe-trans-row-main:hover {
    background: #f9fafb;
}

.ggrp-fe-trans-col {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ggrp-fe-trans-col--type strong {
    font-weight: 600;
}

.ggrp-fe-trans-sub {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}

.ggrp-fe-trans-col--status {
    justify-content: flex-start;
}

/* --- Uitlijning transactieregels --- */

/* Type transactie links */
.ggrp-fe-trans-col--type {
    justify-content: flex-start;
    text-align: left;
}

/* Middenkolommen (BIJ/AF, Bedrag, Status) gecentreerd */
.ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(2),
.ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(3),
.ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(4) {
    justify-content: center;
    text-align: center;
}

/* Datum rechts */
.ggrp-fe-trans-row-main .ggrp-fe-trans-col:last-child {
    justify-content: flex-end;
    text-align: right;
}

/* Header-tekst dezelfde uitlijning geven */
.ggrp-fe-trans-head span:nth-child(1) {
    text-align: left;
}
.ggrp-fe-trans-head span:nth-child(2),
.ggrp-fe-trans-head span:nth-child(3),
.ggrp-fe-trans-head span:nth-child(4) {
    text-align: center;
}
.ggrp-fe-trans-head span:nth-child(5) {
    text-align: right;
}


/* Extra details - uitklapbaar */
.ggrp-fe-trans-extra {
    border-top: 1px solid #eceff3;
    padding: 0 1.7rem;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    font-size: 0.88rem;
    color: #4b5563;

    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.25s ease;
}

.ggrp-fe-trans-row.is-open .ggrp-fe-trans-extra {
    padding-top: 0.85rem;
    padding-bottom: 0.9rem;
    max-height: 260px; /* voldoende voor 2 regels tekst */
    opacity: 1;
    visibility: visible;
}

.ggrp-fe-trans-extra-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ggrp-fe-trans-extra-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}

.ggrp-fe-trans-extra-value {
    font-size: 0.88rem;
}

/* PDF-knop */
.ggrp-fe-trans-extra-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* extra ruimte onder netto geldmutatie */
.ggrp-fe-trans-netto {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* footer in open kaart: ID links, PDF rechts */
.ggrp-fe-trans-extra-footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.1rem; /* zorgt voor extra ruimte tussen netto-mutatie en ID */
    padding-top: 0.75rem;
    border-top: 1px solid #eceff3;
    font-size: 0.8rem;
    color: #6b7280;
}

.ggrp-fe-trans-id {
    font-size: 0.8rem;
    color: #9ca3af;
}

.ggrp-fe-trans-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    font-size: 0.8rem;
    color: #374151;
    text-decoration: none;
    gap: 0.35rem;
}

.ggrp-fe-trans-pdf-btn::before {
    content: "ðŸ“„";
    font-size: 0.95rem;
}

.ggrp-fe-trans-pdf-btn:hover {
    background: #e5e7eb;
}

/* Status-badges â€“ kleuren op basis van slug uit PHP */
.ggrp-fe-status-badge {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.ggrp-fe-status-badge--voltooid {
    background: #ecfdf3;
    color: #166534;
    border-color: #bbf7d0;
}

.ggrp-fe-status-badge--verwerken,
.ggrp-fe-status-badge--in-behandeling {
    background: #fef9c3;
    color: #854d0e;
    border-color: #facc15;
}

.ggrp-fe-status-badge--afgekeurd,
.ggrp-fe-status-badge--geweigerd {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* Lege staat */
.ggrp-fe-empty-transactions {
    padding: 1.5rem 1.7rem 2rem;
    font-size: 0.9rem;
    color: #6b7280;
}

/* Year selector rechtsboven */
.ggrp-fe-year-filter-form {
    margin: 0;
}

.ggrp-fe-year-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    font-size: 0.85rem;
}

.ggrp-fe-year-select-icon {
    font-size: 1rem;
}

.ggrp-fe-year-select {
    border: none;
    background: transparent;
    appearance: none;
    padding-right: 1.1rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.ggrp-fe-year-select:focus {
    outline: none;
}

.ggrp-fe-year-select-caret {
    position: absolute;
    right: 0.65rem;
    font-size: 0.75rem;
    pointer-events: none;
}

/* ---------------------------------------------
   GGR Portal - Berichten styling
   Hele file, kant-en-klaar
--------------------------------------------- */

:root {
    --ggr-accent: #f29f75;
    --ggr-accent-soft: rgba(242, 158, 117, 0.1); 
    --ggr-border-soft: rgba(41, 40, 47, 0.2);
    --ggr-border-strong: #f29f75;
    --ggr-text-main: #111827;
    --ggr-text-muted: #6b7280;
    --ggr-text-light: #9ca3af;
    --ggr-card-radius: 22px;
    --ggr-card-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* Wrapper & titel --------------------------------------------------------- */

.ggr-berichten-wrapper {
    max-width: 100%;
    margin: 0 auto 4rem;
    padding: 0rem 0 0rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ggr-text-main);
}

.ggr-berichten-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 1.8rem 0;
}

/* Hoofdkaarten ------------------------------------------------------------ */

.ggr-berichten-card {
    border-radius: var(--ggr-card-radius);
    padding: 0rem 0rem 0rem;
    margin-bottom: 1.6rem;
}

.ggr-berichten-card--detail {
    background: #ffffff;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.ggr-berichten-card--options {
    background: #ffffff;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
 
}

/* Toolbar bovenin --------------------------------------------------------- */

.ggr-berichten-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.ggr-berichten-select-all {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--ggr-accent);
    text-decoration: underline;
}

.ggr-berichten-select-all:hover {
    opacity: 0.85;
}

/* Actieknoppen rechts (gelezen / ongelezen) */

.ggr-berichten-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ggr-berichten-toolbar-actions button {
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--ggr-text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.ggr-berichten-toolbar-actions button:hover {
    background: #eef2f7;
    color: var(--ggr-text-main);
    border-color: #cbd5e1;
}

/* Lege staat -------------------------------------------------------------- */

.ggr-berichten-empty {
    font-size: 0.95rem;
    color: var(--ggr-text-muted);
    padding: 0.6rem 0.2rem 0.4rem;
}

/* Maand-groepen ----------------------------------------------------------- */

.ggr-berichten-list {
    margin-top: 0.3rem;
}

.ggr-berichten-month-group {
    margin-top: 0.9rem;
}

.ggr-berichten-month-header {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ggr-text-light);
    padding: 0.1rem 1rem 0.4rem;
}

/* Bericht-rijen: basis ---------------------------------------------------- */

.ggr-bericht-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.35rem;
    border-radius: 13px;
    border: 1px solid var(--ggr-border-soft);
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
    min-height: 40px!important;
}

/* Ongelezen (unread):
   - lichtgrijze achtergrond
   - donkere tekst (valt op) --------------------------------------------- */

.ggr-bericht-row--unread {
    background: #f3f4f6;
    border-color: #d1d5db;
    font-weight: 600;
}

.ggr-bericht-row--unread .ggr-bericht-title {
    color: #111827;
}

.ggr-bericht-row--unread .ggr-bericht-date {
    color: #4b5563;
}

/* Gelezen (read):
   - witte achtergrond
   - lichte tekst (valt weg) -------------------------------------------- */

.ggr-bericht-row--read {
    background: #ffffff;
    border-color: #e5e7eb;
    font-weight: 400;
}

.ggr-bericht-row--read .ggr-bericht-title {
    color: #9ca3af;
}

.ggr-bericht-row--read .ggr-bericht-date {
    color: #c4cbd3;
}

/* Hover gedrag ------------------------------------------------------------ */

.ggr-bericht-row--unread:hover {
    background: #e5e7eb;
    border-color: #cbd5e1;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.ggr-bericht-row--read:hover {
    background: #fafafa;
    border-color: #e5e7eb;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

/* Checkbox --------------------------------------------------------------- */

.ggr-bericht-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--ggr-accent);
}

/* Inhoud / link ---------------------------------------------------------- */

.ggr-bericht-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-decoration: none;
    color: var(--ggr-text-main);
    font-size: 0.98rem;
}

.ggr-bericht-title {
    flex: 1;
    line-height: 1.45;
}

.ggr-bericht-date {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Hover-underline alleen op titel */
.ggr-bericht-main:hover .ggr-bericht-title {
    text-decoration: underline;
}

.ggr-berichten-card--detail {
    background: #ffffff;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Detail-weergave -------------------------------------------------------- */

.ggr-bericht-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
    color: var(--ggr-text-muted);
}

.ggr-bericht-back {
    text-decoration: none;
    color: var(--ggr-accent);
    font-weight: 500;
}

.ggr-bericht-back:hover {
    text-decoration: underline;
}

.ggr-bericht-detail-date {
    color: var(--ggr-text-muted);
}

.ggr-bericht-detail-title {
    font-size: 1.45rem;
    font-weight: 600;
    margin: 0.3rem 0 1.1rem;
}

.ggr-bericht-detail-body {
    font-size: 0.98rem;
    line-height: 1.6;
}

.ggr-trans-table {
    border-collapse: collapse !important;
    width: 100%;
    table-layout: fixed; /* alle kolommen even breed */
}

.ggr-trans-table th {
    border: 1px solid var(--ggr-border-soft);
    padding: 10px;
    text-align: left;
    font-size: 14px;
    background: #f3f4f6;
    /* width: 100%;  <-- verwijderen! */
}

.ggr-trans-table td { 
    border: 1px solid var(--ggr-border-soft);
    padding: 10px;
    padding-top: 0px!important;
    text-align: left;
    font-size: 14px;
}



/* =========================
   TRANSACTIE-OVERZICHT – DESKTOP
   ========================= */
@media (min-width: 768px) {

    
/* Options-kaart onder detail --------------------------------------------- */

.ggr-bericht-options-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.ggr-bericht-options-divider {
    border: 0;
    border-top: 1px solid var(--ggr-border-soft);
    margin: 0 0 0.9rem;
}

.ggr-bericht-options-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--ggr-text-main);
    padding: 0.4rem 0.2rem;
}

}
@media (max-width: 768px) {

    /* Tabel op mobiel als "cards" */
    .ggr-trans-table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }

    .ggr-trans-table thead {
        display: none; /* header rij verbergen */
    }

    .ggr-trans-table tbody,
    .ggr-trans-table tr {
        display: block;
        width: 100%;
    }

    .ggr-trans-table tr {
        background: #f9fafb; /* overal dezelfde achtergrond */
        margin-bottom: 12px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid var(--ggr-border-soft); /* nette card-rand */
    }

    .ggr-trans-table td {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto; /* links label+datum, rechts waarde */
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid var(--ggr-border-soft); /* alleen horizontale lijnen */
    }

    /* onderste rij geen extra rand */
    .ggr-trans-table tr:last-child td:last-child {
        border-bottom: 0;
    }

    /* Titel (label) links */
    .ggr-trans-table td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
    }

    /* Waarde rechts, komma's blijven heel */
    .ggr-trans-table .ggr-trans-value {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: flex-end;
        white-space: nowrap; /* 4.987,35 breekt niet meer op een nieuwe regel */
    }
    
    .ggr-berichten-card--detail {
    background: #ffffff;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    }

    .ggr-berichten-card--options {
    background: #ffffff;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
 
    }
}



/* Simpel “PDF-icoon” via pseudo-element --------------------------------- */

.ggr-bericht-options-item--pdf::before {
    content: "PDF";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

/* Responsive tweaks ------------------------------------------------------ */

@media (max-width: 768px) {
    
    .ggr-berichten-card {
        border-radius: 18px;
        
    }

    .ggr-berichten-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }

    .ggr-berichten-toolbar-actions {
        align-self: flex-end;
    }

    .ggr-bericht-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .ggr-bericht-date {
        margin-top: 0.15rem;
    }

    .ggr-bericht-detail-header {
        flex-direction: row;
        gap: 0.75rem;
    }
   
/*===========================*/ 
/*TABEL IN MESSAGES OP MOBIEL*/
    
    /* Mobiel: tabel omzetten naar "cards" onder elkaar */
     .ggr-trans-table,
    .ggr-trans-table tbody,
    .ggr-trans-table tr,
    .ggr-trans-table td {
        display: block;
    }

    .ggr-trans-table thead {
        display: none; /* headers verstoppen op mobiel */
    }

    .ggr-trans-table tr {
        margin-bottom: 16px;
        border: 1px solid var(--ggr-border-soft);
        background: #fff;      /* overal dezelfde achtergrond */
    }

    .ggr-trans-table td {
        padding: 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Label + datum links */
    .ggr-trans-table td::before {
        content: attr(data-label) "\A" attr(data-date);
        white-space: pre-line;    /* \A => nieuwe regel */
        font-weight: 600;
        margin-right: 12px;
        flex: 1 1 auto;
    }

    /* Waarde rechts, komma's niet laten breken */
    .ggr-trans-table .ggr-trans-value {
        flex: 0 0 auto;
        white-space: nowrap;      /* 4.987,35 blijft op één regel */
    }
}




/* ====== Responsive ====== */

@media (max-width: 1100px) {
    .ggrp-fe {
        padding: 0 0 32px;
    }
}

@media (max-width: 960px) {
    .ggrp-fe-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ggrp-fe-row-main,
    .ggrp-fe-table-head {
        grid-template-columns: 2fr 0.7fr 1.2fr 1fr;
    }

    .ggrp-fe-row-main > .ggrp-fe-row-col:last-child,
    .ggrp-fe-table-head > span:last-child {
        display: none; /* Datum kolom verbergen */
    }

    .ggrp-fe-chart-row {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .ggrp-fe {
        padding: 0 0 24px;
    }

    .ggrp-fe-kpi-row {
        grid-template-columns: 1fr;
    }

    .ggrp-fe-header {
        flex-direction: column;
        gap: 8px;
    }
}


/* =========================
   MIJN ACCOUNT
   ========================= */

.ggrp-fe--account {
    margin: 0 auto 4rem;
}

.ggrp-fe--account .ggrp-fe-header {
    margin-bottom: 1.75rem;
}

.ggrp-fe-account-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Kaart layout */

.ggrp-fe-account-card {
    background: #ffffff;
    border-radius: 13px;
    padding: 22px 26px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.ggrp-fe-account-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ggrp-fe-account-card-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.ggrp-fe-account-card-body {
    margin-top: 8px;
}

/* View-rij: label | value | Edit */

.ggrp-fe-account-row {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto;
    column-gap: 2rem;
    row-gap: 0.25rem;
    align-items: flex-start;
    padding: 6px 0;
}

.ggrp-fe-account-label {
    font-size: 0.875rem;
    color: #6b7280;
    white-space: nowrap;
}

.ggrp-fe-account-value {
    font-size: 0.95rem;
    color: #111827;
}

.ggrp-fe-account-value > div + div {
    margin-top: 2px;
}

.ggrp-fe-account-row-edit {
    font-size: 0.875rem;
    color: #f97316;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    align-self: flex-start;
    margin-left: 1.5rem;
}

.ggrp-fe-account-row-edit:hover {
    text-decoration: underline;
}

/* Separator */

.ggrp-fe-account-separator {
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    margin: 10px 0 10px;
}

/* Form-rij (standaard verborgen) */

.ggrp-fe-account-row-form {
    display: none;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto;
    column-gap: 2rem;
    padding: 4px 0 10px;
}

.ggrp-fe-account-row-form.is-visible {
    display: grid;
}

.ggrp-fe-account-form {
    display: contents; /* label links, velden midden, buttons rechts */
}

.ggrp-fe-account-form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    font-size: 0.875rem;
    color: #111827;
}

.ggrp-fe-account-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ggrp-fe-account-form-row label {
    font-size: 0.8rem;
    color: #6b7280;
}

.ggrp-fe-account-input {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 10px!important;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}


.ggrp-fe-account-input:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 1px #fed7aa;
}

/* Buttons */

.ggrp-fe-account-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.ggrp-fe-account-btn {
    border-radius: 0px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    padding: 6px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ggrp-fe-account-btn--primary {
    background-color: #f29e75;
    color: #ffffff;
    border-color: #f29e75;
}

.ggrp-fe-account-btn--primary:hover {
    background-color: #709aa7;
    border-color: #709aa7;
}

.ggrp-fe-account-btn--ghost {
    background-color: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

.ggrp-fe-account-btn--ghost:hover {
    background-color: #f9fafb;
}

/* Als een rij in edit staat: alleen label laten zien, value + Edit verbergen */

.ggrp-fe-account-row.is-editing .ggrp-fe-account-value,
.ggrp-fe-account-row.is-editing .ggrp-fe-account-row-edit {
    display: none;
}

/* Responsief */

@media (max-width: 768px) {
    
    .ggrp-fe--account {
        margin: 0 1rem 3rem;
    }

    .ggrp-fe-account-card {
        padding: 18px 18px;
    }

    .ggrp-fe-account-row,
    .ggrp-fe-account-row-form {
        grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    }

    .ggrp-fe-account-row-edit {
        grid-column: 2 / 3;
        justify-self: flex-start;
        margin-left: 0;
        margin-top: 6px;
    }

    .ggrp-fe-account-actions {
        margin-top: 8px;
        align-items: flex-start;
    }

    .ggrp-fe-account-form-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================
   TRANSACTIES – MOBIEL
   ========================= */

@media (max-width: 640px) {

    /* Header-balk verbergen op mobiel */
    .ggrp-fe-panel--transacties .ggrp-fe-trans-head {
        display: none;
    }

    /* Kaart zelf iets compacter maken */
    .ggrp-fe-trans-row {
        border-radius: 14px;
        margin-bottom: 0.9rem;
    }

    /* Hoofdregel van de kaart: van tabel -> stacked kaart */
    .ggrp-fe-trans-row-main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 0.9rem 1.2rem;
    }

    .ggrp-fe-trans-row-main:hover {
        background: #ffffff; /* geen rare hoverkleur op heel de kaart */
    }

    .ggrp-fe-trans-col {
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 0.9rem;
        gap: 0.25rem;
    }

    /* Titel van de transactie iets prominenter */
    .ggrp-fe-trans-col--type strong {
        font-size: 1rem;
    }

    /* BIJ/AF + bedrag op één regel als "pill" onder de titel */
    .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(2),
    .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(3) {
        display: inline-flex;
        align-items: center;
        font-size: 0.85rem;
        color: #4b5563;
    }

    .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(2)::before {
        content: "BIJ/AF:";
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9ca3af;
        margin-right: 0.35rem;
    }

    .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(3)::before {
        content: "Bedrag:";
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9ca3af;
        margin-right: 0.35rem;
    }

    /* Status + datum samen onderaan rechts → nu gewoon één info-regel */
    .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(4),
    .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(5) {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.82rem;
        color: #6b7280;
    }

    .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(4) {
        margin-top: 0.15rem;
    }

    .ggrp-fe-status-badge {
        font-size: 0.75rem;
    }

    /* Uitklapgedeelte: van 3 kolommen -> 1 kolom onder elkaar */
    .ggrp-fe-trans-extra {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.6rem;
        padding: 0 1.2rem;
    }

    .ggrp-fe-trans-row.is-open .ggrp-fe-trans-extra {
        max-height: 500px; /* meer ruimte op mobiel */
        padding-top: 0.7rem;
        padding-bottom: 0.9rem;
    }

    .ggrp-fe-trans-extra-label {
        font-size: 0.75rem;
    }

    .ggrp-fe-trans-extra-value {
        font-size: 0.88rem;
    }

    /* Footer (Transactie ID + eventuele PDF) onder elkaar */
    .ggrp-fe-trans-extra-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding-top: 0.65rem;
    }

    .ggrp-fe-trans-id {
        font-size: 0.78rem;
    }

    .ggrp-fe-trans-pdf-btn {
        font-size: 0.78rem;
        padding: 0.45rem 0.8rem;
    }
}


/* =========================
   TRANSACTIES – MOBIEL FIX
   ========================= */

@media (max-width: 768px) {
    
    .ggr-berichten-title {
        display: none;
    }


    /* 1. Tabel-header verbergen */
    body .ggrp-fe--transacties .ggrp-fe-trans-head {
        display: none !important;
    }

    /* 2. Kaart-hoofdregel omzetten naar stacked layout */
    body .ggrp-fe--transacties .ggrp-fe-trans-row-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
        padding: 0.9rem 1.2rem !important;
    }

    body .ggrp-fe--transacties .ggrp-fe-trans-row-main:hover {
        background: #ffffff !important;
    }

    body .ggrp-fe--transacties .ggrp-fe-trans-row-main .ggrp-fe-trans-col {
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 0.9rem !important;
        gap: 0.25rem !important;
    }

    /* Titel wat groter */
    body .ggrp-fe--transacties .ggrp-fe-trans-col--type strong {
        font-size: 1rem !important;
    }

    /* 3. BIJ/AF + Bedrag met label erboven */
    body .ggrp-fe--transacties .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(2),
    body .ggrp-fe--transacties .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(3) {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.85rem !important;
        color: #4b5563 !important;
    }

    body .ggrp-fe--transacties .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(2)::before {
        content: "BIJ/AF:" !important;
        font-size: 0.78rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: #9ca3af !important;
        margin-right: 0.35rem !important;
    }

    body .ggrp-fe--transacties .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(3)::before {
        content: "Bedrag:" !important;
        font-size: 0.78rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: #9ca3af !important;
        margin-right: 0.35rem !important;
    }

    /* 4. Status + datum onder elkaar als kleine info */
    body .ggrp-fe--transacties .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(4),
    body .ggrp-fe--transacties .ggrp-fe-trans-row-main .ggrp-fe-trans-col:nth-child(5) {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        font-size: 0.82rem !important;
        color: #6b7280 !important;
    }

    body .ggrp-fe--transacties .ggrp-fe-status-badge {
        font-size: 0.75rem !important;
    }

    /* 5. Opengeklapt deel: 1 kolom onder elkaar */
    body .ggrp-fe--transacties .ggrp-fe-trans-extra {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 0.6rem !important;
        padding: 0 1.2rem !important;
    }

    body .ggrp-fe--transacties .ggrp-fe-trans-row.is-open .ggrp-fe-trans-extra {
        max-height: 500px !important;
        padding-top: 0.7rem !important;
        padding-bottom: 0.9rem !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 6. Footer onder elkaar */
    body .ggrp-fe--transacties .ggrp-fe-trans-extra-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
        padding-top: 0.65rem !important;
    }
}

/* Container bepaalt de iconkleur */
.ggr-mobile-actions {
    color: #5b21b6; /* voorbeeld: jouw paarse merk-kleur, of var(--ggr-purple) */
}

/* Icon-buttons: geen “link-styling” */
.ggr-mobile-icon-btn,
.ggr-mobile-icon-btn:link,
.ggr-mobile-icon-btn:visited,
.ggr-mobile-icon-btn:hover,
.ggr-mobile-icon-btn:active {
    text-decoration: none;       /* geen underline */
    color: inherit;              /* neem de kleur van .ggr-mobile-actions over */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon zelf erft gewoon van de button */
.ggr-mobile-icon-btn i {
    font-size: 20px;             /* wat jij mooi vindt */
    line-height: 1;
}

/* Actieve pagina: andere kleur, bijv. gevuld / accent */
.ggr-mobile-icon-btn.is-active {
    color: #f97316;              /* of een andere accentkleur */
}

