/* ============================================================
   VINTIQUES — visuele stijl geïnspireerd op Claude Monet's
   "Impression, soleil levant" (1872): wazig blauwgrijs water/lucht,
   diepe marineblauwe scheepssilhouetten, levendig koraaloranje zon.
   ============================================================ */

:root {
    --inkt: #223038;
    --papier: #e7ebec;
    --paneel: #f5f7f7;
    --rand: #c7d1d4;
    --groen: #2c3e4a;
    --groen-donker: #1f2d38;
    --messing: #d9714a;
    --messing-licht: #e8a583;
    --bordeaux: #b8503a;
    --tekst-zacht: #64777f;
}

body {
    background-color: var(--papier);
    color: var(--inkt);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, .nav-tabs .nav-link {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--groen-donker);
}

h1 {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: 1px dashed var(--messing-licht);
    padding-bottom: 0.3rem;
}

label.form-label {
    font-weight: 600;
    color: var(--tekst-zacht);
    font-size: 0.92rem;
}

/* Formulier en tabelweergaven als rustige "kaarten" op het papier */
#artikelForm,
.border.rounded.p-3 {
    background-color: var(--paneel);
    border: 1px solid var(--rand) !important;
    border-radius: 10px;
    padding: 1.25rem !important;
}

#artikelForm {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Tabbladen */
.nav-tabs {
    border-bottom: 1px solid var(--rand);
}

.nav-tabs .nav-link {
    color: var(--tekst-zacht);
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 1.02rem;
}

.nav-tabs .nav-link.active {
    color: var(--groen-donker);
    background-color: transparent;
    border-bottom: 3px solid var(--messing);
}

.nav-tabs .nav-link:hover {
    border-bottom: 3px solid var(--messing-licht);
}

/* Knoppen: rustige, herkenbare hiërarchie */
.btn-primary {
    background-color: var(--groen);
    border-color: var(--groen);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--groen-donker);
    border-color: var(--groen-donker);
}

.btn-success {
    background-color: var(--groen);
    border-color: var(--groen);
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--groen-donker);
    border-color: var(--groen-donker);
}

.btn-warning {
    background-color: var(--messing);
    border-color: var(--messing);
    color: #fff;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #8f6a32;
    border-color: #8f6a32;
    color: #fff;
}

.btn-danger {
    background-color: var(--bordeaux);
    border-color: var(--bordeaux);
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #5e2424;
    border-color: #5e2424;
}

.btn-info {
    background-color: var(--tekst-zacht);
    border-color: var(--tekst-zacht);
    color: #fff;
}
.btn-info:hover, .btn-info:focus {
    background-color: var(--groen-donker);
    border-color: var(--groen-donker);
    color: #fff;
}

.btn-secondary {
    background-color: var(--tekst-zacht);
    border-color: var(--tekst-zacht);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--groen-donker);
    border-color: var(--groen-donker);
}

.btn-outline-primary, .btn-outline-dark, .btn-outline-secondary,
.btn-outline-success, .btn-outline-info {
    color: var(--groen-donker);
    border-color: var(--groen);
}
.btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover,
.btn-outline-success:hover, .btn-outline-info:hover {
    background-color: var(--groen);
    border-color: var(--groen);
    color: #fff;
}

.btn-outline-warning {
    color: var(--messing);
    border-color: var(--messing);
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
    background-color: var(--messing);
    border-color: var(--messing);
    color: #fff;
}

.btn-outline-danger {
    color: var(--bordeaux);
    border-color: var(--bordeaux);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: var(--bordeaux);
    border-color: var(--bordeaux);
    color: #fff;
}

/* Duidelijke, goed zichtbare focus-ring — belangrijk voor toetsenbordgebruik */
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 3px solid var(--messing);
    outline-offset: 2px;
}

.form-control:focus, select.form-control:focus {
    border-color: var(--messing);
    box-shadow: 0 0 0 0.2rem rgba(166, 124, 61, 0.25);
}

/* Modals in dezelfde stijl */
.modal-header {
    background-color: var(--groen);
    color: #fff;
    border-bottom: none;
}
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-title {
    font-family: 'Space Grotesk', sans-serif;
}

/* Kaartjes in de artikellijst */
#artikellijst .card, #artikellijst > div {
    border: 1px solid var(--rand);
    border-radius: 8px;
    background-color: var(--paneel);
}

.container{
    max-width:800px;
}

/* Op laptop/desktop mag de tabel (en de rest van de app) meer breedte gebruiken,
   zodat er minder kolommen afgesneden worden. Op mobiel verandert er niets,
   want daar is het scherm toch smaller dan deze waarde. */
@media (min-width: 992px) {
    .container {
        max-width: 1400px;
    }
}

/* Compacte weergave voor de Volledige tabel, in lijn met "Snel aanvullen" */
#tabulatorTabel {
    font-family: 'Inter', sans-serif;
}

#tabulatorTabel .tabulator-col-title,
#tabulatorTabel .tabulator-cell {
    font-size: 1rem;
    padding: 6px 8px;
}

#tabulatorTabel .tabulator-header {
    min-height: 36px;
    background-color: var(--paneel);
}

#tabulatorTabel .tabulator-row {
    min-height: 36px;
}

#tabulatorTabel .tabulator-cell input,
#tabulatorTabel .tabulator-cell select {
    font-size: 1rem;
    padding: 3px 6px;
}

@media (min-width: 992px) {
    #tabulatorTabel .tabulator-col-title,
    #tabulatorTabel .tabulator-cell {
        font-size: 0.85rem;
        padding: 4px 6px;
    }

    #tabulatorTabel .tabulator-header {
        min-height: 30px;
    }

    #tabulatorTabel .tabulator-row {
        min-height: 30px;
    }
}

/* "Excelgevoel": kolomkoppen blijven vast staan bij het naar beneden scrollen,
   en duidelijke rasterlijnen tussen alle cellen zoals in een spreadsheet. */
#tabulatorTabel .tabulator-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

#tabulatorTabel .tabulator-col,
#tabulatorTabel .tabulator-cell {
    border-right: 1px solid #d0d0d0 !important;
    border-bottom: 1px solid #d0d0d0 !important;
}

#tabulatorTabel .tabulator-row {
    border-bottom: 1px solid #d0d0d0;
}

#tabulatorTabel {
    border: 1px solid #d0d0d0;
}

#tabulatorTabel .tabulator-col-title {
    padding-right: 16px;
}

#tabelFilterKnoppen,
#tabTabel .dropdown.d-inline-block {
    vertical-align: top;
}

#tabelFilterKnoppen .btn,
#kolommenKnop,
#actiesMenuKnop {
    height: 31px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

.oog-verberg-kolom {
    cursor: pointer;
    opacity: 0.6;
    font-size: 1em;
    margin-left: 6px;
    margin-right: 12px;
    display: inline-block;
}
.oog-verberg-kolom:hover {
    opacity: 1;
}

#tabulatorTabel .tabulator-col-sorter,
#tabulatorTabel .tabulator-arrow {
    opacity: 0.75;
    transform: scale(1.3);
}
#tabulatorTabel .tabulator-col-title.tabulator-col-sorter-changed .tabulator-arrow,
#tabulatorTabel [aria-sort="ascending"] .tabulator-arrow,
#tabulatorTabel [aria-sort="descending"] .tabulator-arrow {
    opacity: 1;
}

/* Grotere, makkelijker aan te tikken knoppen — overal in de Voorraad-
   kaartjeslijst en de bulk-actiebalk (niet enkel op mobiel), met wat meer
   ruimte ertussen zodat je niet per ongeluk de verkeerde knop raakt. */
#artikellijst .btn,
#bulkActiesBalk .btn,
#selectieSomBalk .btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 1rem;
    margin: 3px;
}
#artikellijst .artikel-kaart-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
@media (max-width: 767px) {
    #artikellijst .artikel-selectie-checkbox {
        width: 24px;
        height: 24px;
    }
}

/* Op laptop/desktop: eenvoudige velden van het artikelformulier netjes naast
   elkaar in twee kolommen, om beter gebruik te maken van de breedte. Bredere
   onderdelen (omschrijving, foto's, afmetingen, ...) krijgen de klasse
   "veld-volledige-breedte" en blijven de volle breedte innemen. */
@media (min-width: 992px) {
    #artikelForm {
        display: flex;
        flex-wrap: wrap;
        column-gap: 24px;
    }
    #artikelForm > .mb-3 {
        flex: 0 0 calc(50% - 12px);
    }
    #artikelForm > .veld-volledige-breedte,
    #artikelForm > button,
    #artikelForm > hr,
    #artikelForm > #eigenVeldenContainer {
        flex: 0 0 100%;
    }

    /* Dezelfde 2-koloms-indeling, maar dan bínnen elke gekleurde sectiekader
       (die zelf de volle breedte van het formulier inneemt). */
    .sectie-flex-grid {
        display: flex;
        flex-wrap: wrap;
        column-gap: 24px;
    }
    .sectie-flex-grid > .mb-3 {
        flex: 0 0 calc(50% - 12px);
    }
    .sectie-flex-grid > .veld-volledige-breedte {
        flex: 0 0 100%;
    }
}

/* Elke sectie in "Stock toevoegen" krijgt een eigen, licht gekleurd kader,
   zodat meteen duidelijk is waar de ene sectie eindigt en de volgende begint. */
.sectie-kader {
    border-radius: 12px;
    border: 1px solid var(--messing-licht);
}
.sectie-kader-1 {
    background: linear-gradient(180deg, #f2f0eb, #e9e6df);
}
.sectie-kader-2 {
    background: linear-gradient(180deg, #eef2f2, #e2e9ea);
}
.sectie-kader-3 {
    background: linear-gradient(180deg, #fbe9e1, #f5d9cb);
}

/* Zorgt dat een sectiekop zichtbaar blijft onder de sticky header bovenaan de
   pagina, wanneer je via de "Ga naar:"-knoppen naar een sectie springt. */
#titelSectieBasisinfo,
#titelSectieDetails,
#titelSectieVerkoop {
    scroll-margin-top: 260px;
}


/* ============================================================
   Donkere modus — activeer met class "donkere-modus" op <body>
   ============================================================ */
body.donkere-modus {
    --inkt: #e7ebec;
    --papier: #1a2226;
    --paneel: #23303a;
    --rand: #3a4a53;
    --groen: #6a8fa8;
    --groen-donker: #8fb3c9;
    --messing: #e8935f;
    --messing-licht: #f0b48f;
    --bordeaux: #d97e6a;
    --tekst-zacht: #9fb0b8;
}
body.donkere-modus .card,
body.donkere-modus .modal-content,
body.donkere-modus #artikelForm,
body.donkere-modus .border.rounded.p-3,
body.donkere-modus .catalogus-item {
    background-color: var(--paneel);
    color: var(--inkt);
}
body.donkere-modus .form-control,
body.donkere-modus select.form-control,
body.donkere-modus .form-select {
    background-color: #2a3841;
    color: var(--inkt);
    border-color: var(--rand);
}
body.donkere-modus .table {
    color: var(--inkt);
}
body.donkere-modus #tabulatorTabel .tabulator-header,
body.donkere-modus #tabulatorTabel .tabulator-row {
    background-color: var(--paneel);
    color: var(--inkt);
}

/* Vaste onderbalk op mobiel/smalle schermen, voor snelle navigatie met één
   hand, i.p.v. de bovenaan soms afgeknipte tabbladenrij. */
#mobieleOnderbalk {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    background: var(--paneel);
    border-top: 1px solid var(--rand);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
#mobieleOnderbalk button {
    flex: 1;
    background: none;
    border: none;
    padding: 6px 2px 8px;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--tekst-zacht);
}
#mobieleOnderbalk button span {
    font-size: 0.65rem;
    font-family: 'Inter', sans-serif;
    margin-top: 2px;
}
#mobieleOnderbalk button.actief {
    color: var(--messing);
}
@media (max-width: 767px) {
    body { padding-bottom: 60px; }
}