/*
 * Gedeelde regel-toevoeger — zelfstandige styling (los van Tailwind).
 *
 * Het widget (public/js/regel-toevoeger.js) bouwt z'n UI in JavaScript en draait in
 * twee contexten: de moderne Blade-editor (waar Tailwind wél geladen is) en de legacy
 * Froala-doc-editor (waar Tailwind NIET geladen is). Dit eigen, geprefixte stylesheet
 * (.rtv-*) zorgt dat het widget in beide contexten identiek oogt, zonder afhankelijkheid
 * van Tailwind en zonder globale preflight-vervuiling. Kleuren volgen het design-system
 * (pa-blue #396BC4 + zinc-schaal); de gebakken tabel + PDF blijven inline-styled.
 */
.rtv {
    --rtv-blue: #396BC4;
    --rtv-blue-zacht: rgba(57, 107, 196, 0.05);
    --rtv-zinc-100: #f4f4f5;
    --rtv-zinc-200: #e4e4e7;
    --rtv-zinc-400: #a1a1aa;
    --rtv-zinc-500: #71717a;
    --rtv-zinc-600: #52525b;
    --rtv-zinc-700: #3f3f46;
    --rtv-zinc-800: #27272a;
    --rtv-rood: #ef4444;
    --rtv-rood-donker: #b91c1c;

    --rtv-blue-kop: #eef3fb;
    --rtv-blue-rand: #d9e3f5;
    --rtv-rij-rand: #eceef2;

    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 12.8px;
    color: var(--rtv-zinc-800);
    /* Punt 6 feedback: meer witruimte vóór het regels-blok. */
    margin-top: 18px;
}

/* Kop met "+ regel" */
.rtv-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rtv-kop-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rtv-zinc-400); }
.rtv-add { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 4px; background: var(--rtv-blue); color: #fff; padding: 4px 10px; font-size: 12px; font-weight: 500; cursor: pointer; }
.rtv-add:hover { opacity: 0.9; }

/* Tabel */
.rtv-scroll { overflow-x: auto; }
/* border:0 op het table-element zelf: Tailwind's reboot geeft <table> border-color:inherit
   (→ resolveert naar de donkere tekstkleur) en het app-bundel zet er een breedte op, wat
   anders een zwarte buitenrand op boven/links/rechts geeft (onder wint de cel-onderlijn). */
.rtv-tabel { width: 100%; border-collapse: collapse; font-size: 12px; border: 0 !important; }
/* Froala (.fr-view) legt standaard een cel-grid (1px #DDD) op tabellen; daarnaast geven de
   Tailwind/Bootstrap-reboots thead/tbody/tr een 1px border met border-color:inherit (→ de
   donkere tekstkleur), wat met border-collapse een zwarte buitenrand oplevert. Reset daarom
   ALLE tabel-onderdelen (table/thead/tbody/tfoot/tr/td/th); de eigen onderlijnen zetten we
   hieronder gericht terug. */
.rtv-tabel thead, .rtv-tabel tbody, .rtv-tabel tfoot, .rtv-tabel tr,
.rtv-tabel td, .rtv-tabel th { border: 0 !important; }
.rtv-tabel td { background: transparent !important; }
/* De gebakken tabel + server-tabel dragen fr-no-borders, maar die class reset alleen
   table + td. thead/tbody/tr krijgen via de reboot alsnog een donkere rand → ook die weg. */
.fr-no-borders thead, .fr-no-borders tbody, .fr-no-borders tfoot, .fr-no-borders tr { border: 0 !important; }
/* Rustige lichtblauwe kopregel; bedragen rechts uitgelijnd. */
.rtv-thead-rij { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rtv-zinc-800); font-weight: 600; }
.rtv-thead-rij th { background: var(--rtv-blue-kop) !important; border-bottom: 1px solid var(--rtv-blue-rand) !important; }
.rtv-thead-rij th:first-child { border-top-left-radius: 6px; }
.rtv-thead-rij th:last-child { border-top-right-radius: 6px; }
.rtv-th-oms { padding: 8px 10px; text-align: left; }
.rtv-th-getal { padding: 8px 10px; text-align: right; }
.rtv-th-totaal { padding: 8px 10px; text-align: right; }

/* Samenvattingsrij — subtiele scheidingslijn tussen verrichtingen (op de cellen, zodat
   het de Froala-grid-override overleeft). */
.rtv-rij { cursor: pointer; vertical-align: top; }
.rtv-rij td { border-bottom: 1px solid var(--rtv-rij-rand) !important; }
.rtv-rij:hover td, .rtv-rij--open td { background: var(--rtv-blue-zacht) !important; }
.rtv-cel-oms { padding: 8px 10px; }
.rtv-oms-titel { font-weight: 500; color: var(--rtv-zinc-800); }
.rtv-oms-meta { font-size: 10px; color: var(--rtv-zinc-400); }
.rtv-cel-getal { padding: 8px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.rtv-cel-totaal { padding: 8px 10px; text-align: right; font-weight: 500; color: var(--rtv-zinc-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rtv-leeg { padding: 12px 0; color: var(--rtv-zinc-400); font-style: italic; }

/* Inline editor */
.rtv-editor-cel { padding: 0 !important; border-bottom: 1px solid var(--rtv-rij-rand) !important; background: transparent !important; }
.rtv-editor-box { background: var(--rtv-blue-zacht); border-left: 2px solid var(--rtv-blue); padding: 12px; }
.rtv-editor-grid { display: grid; gap: 8px; align-items: end; }
.rtv-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rtv-veld-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rtv-zinc-500); }
.rtv-input, .rtv-input-groot { width: 100%; border: 1px solid var(--rtv-zinc-200); border-radius: 4px; background: #fff; box-sizing: border-box; }
.rtv-input { padding: 4px 8px; font-size: 12px; }
.rtv-input-groot { padding: 6px 8px; font-size: 14px; }
.rtv-input:focus, .rtv-input-groot:focus { border-color: var(--rtv-blue); outline: none; }
.rtv-select { width: 100%; }
.rtv-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rtv-editor-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(228, 228, 231, 0.7); margin-top: 12px; padding-top: 8px; }
.rtv-del { border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--rtv-rood); }
.rtv-del:hover { color: var(--rtv-rood-donker); }
.rtv-klaar { border: 1px solid var(--rtv-zinc-200); border-radius: 4px; background: #fff; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.rtv-klaar:hover { background: #fafafa; }

/* Totalen — subtotalen gegroepeerd in één blok, eindtotaal uitgelicht. */
.rtv-totalen-wrap { display: flex; justify-content: flex-end; margin-top: 16px; }
.rtv-totalen { width: 280px; max-width: 100%; font-size: 13px; border-top: 1px solid var(--rtv-blue-rand); padding-top: 8px; }
.rtv-totaal-rij { display: flex; justify-content: space-between; gap: 16px; color: var(--rtv-zinc-600); padding: 3px 10px; }
.rtv-totaal-rij + .rtv-totaal-rij { margin-top: 2px; }
.rtv-totaal-rij--groot { margin-top: 8px; padding: 9px 10px; background: var(--rtv-blue-kop); border-radius: 6px; font-size: 15px; font-weight: 700; color: var(--rtv-zinc-800); }
.rtv-getal { font-variant-numeric: tabular-nums; text-align: right; }

/* md-breakpoint: type (160px) + product (1fr) naast elkaar; getallen over volle breedte in 4 kolommen. */
@media (min-width: 768px) {
    .rtv-editor-grid { grid-template-columns: 160px 1fr; }
    .rtv-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: span 2 / span 2; }
}