/* ---------------------------------------------------------------------------
   Huisstijl — dezelfde blauwtinten als de website (httpdocs/index.php).
   Overschrijft het standaardblauw van Bootstrap.
   --------------------------------------------------------------------------- */
:root {
    --sz-blauw:       #356f92;  /* navigatiebalk, wit leest hierop 5,47:1 */
    --sz-blauw-don:   #2b5c7a;  /* donkerder, voor hover en actieve staat */
    --sz-blauw-diep:  #2a4b8d;  /* logo-blauw, voor accenten */
    --sz-link:        #2a6ea8;  /* linkkleur, 4,9:1 op wit */

    /* Bootstrap-variabelen omzetten naar de huisstijl */
    --bs-primary:            #356f92;
    --bs-primary-rgb:        53, 111, 146;
    --bs-link-color:         #2a6ea8;
    --bs-link-color-rgb:     42, 110, 168;
    --bs-link-hover-color:   #1f5580;
}

body {
    background-color: #f8f9fa;
}

/* --- Knoppen --- */
.btn-primary {
    --bs-btn-bg:             var(--sz-blauw);
    --bs-btn-border-color:   var(--sz-blauw);
    --bs-btn-hover-bg:       var(--sz-blauw-don);
    --bs-btn-hover-border-color: var(--sz-blauw-don);
    --bs-btn-active-bg:      var(--sz-blauw-don);
    --bs-btn-active-border-color: var(--sz-blauw-don);
    --bs-btn-disabled-bg:    var(--sz-blauw);
    --bs-btn-disabled-border-color: var(--sz-blauw);
}

.btn-outline-primary {
    --bs-btn-color:          var(--sz-link);
    --bs-btn-border-color:   var(--sz-blauw);
    --bs-btn-hover-bg:       var(--sz-blauw);
    --bs-btn-hover-border-color: var(--sz-blauw);
    --bs-btn-active-bg:      var(--sz-blauw);
    --bs-btn-active-border-color: var(--sz-blauw);
}

/* --- Vlakken en tekst --- */
.bg-primary    { background-color: var(--sz-blauw) !important; }
.text-primary  { color: var(--sz-link) !important; }
.border-primary{ border-color: var(--sz-blauw) !important; }

/* --- Links --- */
a { color: var(--sz-link); }
a:hover { color: #1f5580; }

/* --- Formulierfocus --- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sz-blauw);
    box-shadow: 0 0 0 .25rem rgba(53, 111, 146, .25);
}
.form-check-input:checked {
    background-color: var(--sz-blauw);
    border-color: var(--sz-blauw);
}

.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* De lichtere huisstijl-blauw vraagt om meer contrast in de navigatie
   dan Bootstrap standaard geeft. */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    background: rgba(0,0,0,.12);
    border-radius: 4px;
}
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    font-weight: 600;
}

.card {
    border-radius: 10px;
}

.table th {
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Productkaart hover */
.card:has(.fav-btn):hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    transition: box-shadow .15s ease;
}

/* Statusbadges iets ronder */
.badge {
    border-radius: 6px;
    font-weight: 500;
    font-size: .78rem;
    padding: .3em .6em;
}

/* Winkelwagen badge in nav */
.navbar .badge {
    font-size: .65rem;
}

/* Formulier labels */
.form-label {
    font-weight: 500;
    font-size: .9rem;
    margin-bottom: .25rem;
}

/* Login pagina */
body.bg-light .card {
    border: none;
}

/* Sidebar categorieën */
.list-group-item.active {
    background-color: var(--sz-blauw);
    border-color: var(--sz-blauw);
}

/* Admin tabs */
.nav-tabs .nav-link {
    color: #495057;
}
.nav-tabs .nav-link.active {
    font-weight: 600;
}

@media (max-width: 576px) {
    .table-responsive table td,
    .table-responsive table th {
        font-size: .82rem;
        padding: .35rem .4rem;
    }
    .cart-widget .inp-aantal {
        width: 32px !important;
    }
    .cart-widget .btn {
        padding: .2rem .3rem !important;
    }
    .cart-widget {
        gap: 2px !important;
    }
    /* Verberg foto-kolom op mobiel */
    .col-foto-mobiel {
        display: none !important;
    }
    /* Verberg winkelwagen prijs/btw kolommen op mobiel */
    .col-prijs-mobiel {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
    }
}

@media print {
    .navbar, .btn, form, .no-print { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
    body { background: #fff !important; }
    .container { max-width: 100% !important; padding: 0 !important; }
}