/* =========================================================================
   BRINGBUY.CSS
   Kaartstijlen voor alle Bring & Buy-pagina's. Er zijn er precies twee:

   1. PANEEL — een blok met inhoud: een formulier, een stuk uitleg, de
      samenvatting bovenaan, een stap uit het stappenplan.
      Papier, donkere rand van 1,5px, radius-md, één zachte schaduw.
   2. TEGEL — een blok in een lijst of raster: een cijfer in het beheer, een
      tabelregel die op mobiel een kaart wordt.
      Papier, dunne lijnrand van 1px, radius-sm, geen schaduw.

   De bestaande klassen (.form-card, .description-card, .summary-card,
   .step-card, .stat-card) houden hun naam, zodat alle regels voor hun inhoud
   blijven werken; hier wordt alleen hun uiterlijk gelijkgetrokken. Alles hangt
   onder .bb-pagina, dus dezelfde klassen elders op de site veranderen niet.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. PANEEL
   ------------------------------------------------------------------------- */
.bb-pagina .form-card,
.bb-pagina .description-card,
.bb-pagina .summary-card,
.bb-pagina .step-card {
    background: var(--paper);
    border: 1.5px solid var(--dark);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 28px -18px rgba(31, 40, 32, 0.4);
    transform: none;   /* de samenvatting en de stappen stonden schuin */
    margin-left: 0;
}

.bb-pagina .form-card,
.bb-pagina .description-card,
.bb-pagina .step-card {
    padding: 26px 28px;
    margin-bottom: 24px;
}
.bb-pagina .summary-card { margin-bottom: 24px; }   /* de cellen hebben hun eigen padding */

.bb-pagina .step-card:hover {
    border-color: var(--dark);
    box-shadow: 0 18px 28px -18px rgba(31, 40, 32, 0.4);
}
.bb-pagina .step-card:nth-child(n) { transform: none; margin-left: 0; }

/* -------------------------------------------------------------------------
   2. TEGEL
   ------------------------------------------------------------------------- */
.bb-pagina .stat-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
    padding: 14px 16px;
}

@media (max-width: 768px) {
    /* Tabellen worden hier kaarten; dat zijn tegels, geen panelen */
    .bb-pagina .styled-table tbody tr,
    .bb-pagina .styled-table tbody tr:last-child {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        box-shadow: none;
        padding: 12px 14px;
        margin-bottom: 8px;
    }
    /* Op data-kolom en niet op data-label: dat label is vertaald ("Name") */
    .bb-pagina .styled-table td[data-kolom="naam"] { border-bottom: 1px solid var(--line); }

    /* Een cel zonder inhoud (bijvoorbeeld Acties bij een spel dat niet meer
       te wijzigen is) hoort in de kaartweergave geen eigen regel te krijgen. */
    .bb-pagina .styled-table td.cel-leeg { display: none; }
    /* De regel vóór een verborgen cel is dan de laatste, dus zonder streep. */
    .bb-pagina .styled-table td:has(+ td.cel-leeg) { border-bottom: none; }

    .bb-pagina .form-card,
    .bb-pagina .description-card,
    .bb-pagina .step-card { padding: 20px 18px; margin-bottom: 18px; }
}

/* -------------------------------------------------------------------------
   3. UITBETAALGEGEVENS IN DE SAMENVATTING
   Zes cellen in plaats van vier, dus drie kolommen; het potlood staat
   rechtsboven in de kaart en wisselt de twee velden om naar invoervelden.
   ------------------------------------------------------------------------- */
.bb-pagina .summary-card { grid-template-columns: repeat(3, 1fr); }
.bb-pagina .summary-cell:nth-of-type(3n) { border-right: none; }
.bb-pagina .summary-cell:nth-of-type(-n+3) { border-bottom: 1.5px dashed var(--line); }
.bb-pagina .summary-cell:first-child { padding-right: 46px; }   /* ruimte voor het potlood op smalle schermen */

.bb-gegevens-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: var(--paper);
}
.bb-waarde--tekst { text-transform: none; }

.bb-invoer {
    width: 100%;
    max-width: 100%;
    margin-top: 2px;
    padding: 6px 8px;
    font-family: 'General Sans', sans-serif;
    font-size: 0.92rem;
    color: var(--dark);
    background: var(--paper-soft);
    border: 1.5px solid var(--dark);
    border-radius: var(--radius-sm);
}
.bb-invoer:focus { outline: none; border-color: var(--accent); }

@media (max-width: 768px) {
    .bb-pagina .summary-card { grid-template-columns: repeat(2, 1fr); }
    .bb-pagina .summary-cell:nth-of-type(3n) { border-right: 1.5px dashed var(--line); }
    .bb-pagina .summary-cell:nth-of-type(2n) { border-right: none; }
    .bb-pagina .summary-cell:nth-of-type(-n+4) { border-bottom: 1.5px dashed var(--line); }
}

@media (max-width: 480px) {
    .bb-pagina .summary-card { grid-template-columns: 1fr; }
    .bb-pagina .summary-cell { border-right: none; }
    .bb-pagina .summary-cell:not(:last-child) { border-bottom: 1.5px dashed var(--line); }
}

/* -------------------------------------------------------------------------
   4. UITBETAALD-PILL in de verkoperstabel
   Groter en gecentreerd (twee regels: 'Uitbetaald' plus datum en tijd), met
   rechts ernaast een icoonknop (draaipijl) om het afvinken terug te draaien.
   ------------------------------------------------------------------------- */
/* Uit te betalen bedrag per verkoper: groot en vet; bij nul blijft de cel leeg (cel-leeg) */
.bb-pagina .bb-uitbetaling { font-size: 1.15rem; font-weight: 700; color: var(--dark); }

.bb-pagina .bb-uitbetaald-cel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bb-pagina .bb-uitbetaald-pill {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    line-height: 1.35;
    padding: 8px 18px;
    margin-bottom: 0;
}

/* Verkopersblok op de beheerpagina: korte fade terwijl een volgende pagina wordt opgehaald */
#bb-verkopers-blok { transition: opacity 0.15s ease; }
#bb-verkopers-blok.is-laden { opacity: 0.45; pointer-events: none; }

/* Het kruisje in het zoekveld van de verkoperslijst is een link (werkt zonder JavaScript) */
a.kassa-zoek-wis { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* Samenvatting met zeven cellen (verkoperdetailpagina): vier kolommen, dus twee rijen op een breed scherm */
@media (min-width: 769px) {
    .bb-pagina .summary-card--vier { grid-template-columns: repeat(4, 1fr); }
    .bb-pagina .summary-card--vier .summary-cell:nth-of-type(3n) { border-right: 1.5px dashed var(--line); }
    .bb-pagina .summary-card--vier .summary-cell:nth-of-type(4n) { border-right: none; }
    .bb-pagina .summary-card--vier .summary-cell { border-bottom: none; }
    .bb-pagina .summary-card--vier .summary-cell:nth-of-type(-n+4) { border-bottom: 1.5px dashed var(--line); }
    .bb-pagina .summary-card--vier .summary-cell:first-child { padding-right: 0; }
}