/* Connected Verhuur (admin) — huisstijl 2026 (13-10-2026, kennis 63)
   Hetzelfde palet als het huurdersportaal (portal.css) en de nieuwe site: Dennengroen als hoofdkleur (knoppen,
   bovenbalk, actief menu-item), terracotta voor links, ivoor voor vlakken, espresso als tekst; letters Figtree,
   paginatitels in Cormorant Garamond. De ondergrond blijft wit: terracotta haalt 4,5 : 1 op wit, op ivoor niet.
   De statuskleuren van Bootstrap (success, warning, danger, info) blijven: die dragen betekenis. */

:root {
    /* het palet */
    --salie: #9CBF95;
    --perzik: #E9B58F;
    --terra: #C67E13;
    --terra-tekst: #A46A13;
    --ivoor: #FAF6EC;
    --espresso: #3A2E27;
    --den: #385043;
    --pistache: #D8E2C1;
    --nude: #F3DCC7;

    /* oude namen, gebruikt in _Layout en pagina's */
    --primary-color: #385043;
    --primary-dark: #30473A;     /* Avondsalie */
    --primary-light: #9CBF95;

    --ch-muted: #756D68;         /* 5,1 : 1 op wit */
    --ch-line: #E7E2D8;
    --ch-softer: #F1F5E9;        /* pistache licht */

    /* Bootstrap: 'primary' wordt Dennengroen, links terracotta, tekst espresso */
    --bs-primary: #385043;
    --bs-primary-rgb: 56, 80, 67;
    --bs-primary-text-emphasis: #233229;
    --bs-primary-bg-subtle: #E1E6E3;
    --bs-primary-border-subtle: #B4C0B9;
    --bs-link-color: #A46A13;
    --bs-link-color-rgb: 164, 106, 19;
    --bs-link-hover-color: #385043;
    --bs-link-hover-color-rgb: 56, 80, 67;
    --bs-body-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --bs-body-color: #3A2E27;
    --bs-body-color-rgb: 58, 46, 39;
    --bs-emphasis-color: #3A2E27;
    --bs-heading-color: #3A2E27;
    /* doorschijnend espresso, zoals Bootstrap het zelf doet: op wit 5,9 : 1 en ook op gekleurde rijen en meldingen
       minstens 5 : 1 (een vaste #756D68 zakte daar onder 4,5; review 13-10-2026) */
    --bs-secondary-color: rgba(58, 46, 39, .75);
    --bs-border-color: #E7E2D8;
    --bs-focus-ring-color: rgba(56, 80, 67, .25);
    --bs-code-color: #385043;    /* <code> in Dennengroen in plaats van Bootstrap-roze */
}

/* Typography */
body {
    font-family: var(--bs-body-font-family);
    accent-color: var(--den);    /* kale vinkjes en keuzerondjes, zonder .form-check-input */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

/* Paginatitels in Cormorant, altijd met gewone cijfers (anders leest "Kamer 1" als "Kamer I"). */
h1, h2, .modal-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

h2 {
    font-size: 1.75rem;
}

.modal-title {
    font-size: 1.5rem;
}

/* Navigation */
.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

/* Het liggende logo (13-10-2026, Dick): het gewone logo was op 44 px te klein om HAARLEM te lezen */
.navbar-brand img {
    height: 34px;
    width: auto;
    display: block;
}

/* Cards */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(58, 46, 39, 0.06);
    border: 1px solid rgba(58, 46, 39, 0.1);
}

.card-header {
    background-color: var(--ivoor);
    border-bottom: 1px solid rgba(58, 46, 39, 0.1);
}

/* Tables: Bootstrap kleurt elke cel met --bs-table-bg, dus de variabelen zetten (een achtergrond op thead of tr zie je
   niet). .table > thead (0,1,1) wint van .table-light (0,1,0) op hetzelfde element. */
.table > thead {
    --bs-table-bg: var(--ivoor);
    --bs-table-color: var(--espresso);
    --bs-table-border-color: var(--ch-line);
}

.table {
    --bs-table-hover-bg: rgba(56, 80, 67, 0.10);   /* even zichtbaar als Bootstraps eigen grijs */
}

/* terracotta haalt op de hovertint en op grijze en gele rijen geen 4,5 : 1; daar Dennengroen (7 : 1 of meer) */
.table-hover > tbody > tr:hover a:not(.btn):not(.badge),
.table-secondary a:not(.btn):not(.badge),
.table-warning a:not(.btn):not(.badge) {
    color: var(--den);
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: #385043;
    --bs-btn-border-color: #385043;
    --bs-btn-hover-bg: #30473A;
    --bs-btn-hover-border-color: #30473A;
    --bs-btn-active-bg: #2A3C32;
    --bs-btn-active-border-color: #2A3C32;
    --bs-btn-disabled-bg: #385043;
    --bs-btn-disabled-border-color: #385043;
    --bs-btn-focus-shadow-rgb: 56, 80, 67;
}

.btn-outline-primary {
    --bs-btn-color: #385043;
    --bs-btn-border-color: #385043;
    --bs-btn-hover-bg: #385043;
    --bs-btn-hover-border-color: #385043;
    --bs-btn-active-bg: #30473A;
    --bs-btn-active-border-color: #30473A;
    --bs-btn-disabled-color: #385043;
    --bs-btn-disabled-border-color: #385043;
    --bs-btn-focus-shadow-rgb: 56, 80, 67;
}

.btn-link {
    --bs-btn-color: #A46A13;
    --bs-btn-hover-color: #385043;
    --bs-btn-active-color: #385043;
}

/* warm grijs in plaats van Bootstraps koele #6c757d: 6,0 : 1 op wit, 5,6 op ivoor (kaartkoppen) */
.btn-outline-secondary {
    --bs-btn-color: #6B625D;
    --bs-btn-border-color: #6B625D;
    --bs-btn-hover-bg: #6B625D;
    --bs-btn-hover-border-color: #6B625D;
    --bs-btn-active-bg: #5C544F;
    --bs-btn-active-border-color: #5C544F;
    --bs-btn-disabled-color: #6B625D;
    --bs-btn-disabled-border-color: #6B625D;
}

/* de omlijnde statusknoppen in een donkerder tint, zodat de tekst leesbaar is (5,1 en 8,0 : 1); de vlakken bij hover blijven */
.btn-outline-info {
    --bs-btn-color: #087990;
    --bs-btn-border-color: #087990;
    --bs-btn-hover-bg: #087990;
    --bs-btn-hover-border-color: #087990;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #087990;
    --bs-btn-active-border-color: #087990;
    --bs-btn-active-color: #fff;
}

.btn-outline-warning {
    --bs-btn-color: #664D03;
}

.form-check-input:checked {
    background-color: #385043;
    border-color: #385043;
}

/* het knopje van een schakelaar met focus is in Bootstrap lichtblauw; hier salie */
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239CBF95'/%3e%3c/svg%3e");
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #385043;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #385043;
}

.list-group {
    --bs-list-group-active-bg: #385043;
    --bs-list-group-active-border-color: #385043;
}

.progress, .progress-stacked {
    --bs-progress-bar-bg: #385043;
}

/* Make entire button/link clickable */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-link {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-item {
    width: 100%;
}

/* Sidebar nav items fully clickable */
.nav-pills .nav-link {
    padding: 0.75rem 1rem;
}

/* Table action buttons */
.table-actions .btn {
    min-width: 32px;
    min-height: 32px;
}

/* Badges */
.badge {
    font-weight: 500;
}

/* Bootstrap zet witte tekst op cyaan en geel (2 : 1 of minder); espresso haalt 6,7 en 8,1 : 1. text-dark blijft voorgaan. */
.badge.bg-info,
.badge.bg-warning {
    color: var(--espresso);
}

/* een badge in een paginatitel niet in Cormorant */
.page-header h1 .badge {
    font-family: var(--bs-body-font-family);
    font-size: .6em;
}

/* Kengetallen (dashboard, rapportage) in Figtree: Cormorant is voor titels */
.card-stat h2 {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
}

/* Links in meldingen en op lichte vlakken: een donkerder terracotta (#7E510F), want #A46A13 haalt daar geen 4,5 : 1. */
.alert {
    --bs-link-color-rgb: 126, 81, 15;
}

/* bg-light wordt ivoor (prijsopbouw, kwartaalkoppen, lichte badges) */
.bg-light {
    --bs-light-rgb: 250, 246, 236;
    --bs-link-color-rgb: 126, 81, 15;
}

/* Forms */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.2rem rgba(56, 80, 67, 0.2);
}

/* Pagination */
.pagination {
    --bs-pagination-color: #385043;
    --bs-pagination-hover-color: #30473A;
    --bs-pagination-focus-color: #30473A;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(56, 80, 67, 0.2);
    --bs-pagination-active-bg: #385043;
    --bs-pagination-active-border-color: #385043;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Stats Cards */
.card-stat {
    transition: transform 0.2s;
}

.card-stat:hover {
    transform: translateY(-2px);
}

/* Page Header */
.page-header h1 {
    font-size: 2.1rem;   /* Cormorant oogt kleiner dan een schreefloze letter */
    margin-bottom: 0;
}

.page-header h1 i {
    color: var(--primary-color);
}

/* Table Actions */
.table-actions {
    white-space: nowrap;
    width: 1%;
}

/* Alerts */
.alert {
    border-radius: 0.5rem;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Paginakop: titel links, knoppen rechts; vouwt om op smalle schermen (uniform voor alle pagina's). */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Knoppenbalk die omvouwt i.p.v. buiten beeld loopt (vervangt .btn-group in paginakoppen). */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Tabel in een scroll-container: geen dubbele onderrand/marge. */
.table-responsive > .table {
    margin-bottom: 0;
}

/* Mobile responsive (iPhone 12 mini = 375 px). Regel 1: de pagina wordt nooit breder dan het scherm —
   brede tabellen scrollen binnen hun eigen kaart (.table-responsive), knoppen vouwen om. */
@media (max-width: 767.98px) {
    .sidebar {
        position: static;
        height: auto;
    }

    .main-content {
        padding: 0.75rem !important;
    }

    .page-header h1 {
        font-size: 1.7rem;
    }

    .navbar-brand img {
        height: 30px;
    }

    /* Eerste kolom blijft staan bij horizontaal scrollen; achtergrond via de Bootstrap-tabelvariabelen
       zodat rijkleuren (table-warning e.d.) en hover ook in die cel doorlopen. Alleen op mobiel. */
    .table-sticky-first th:first-child,
    .table-sticky-first td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--bs-table-bg);
        box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))),
                    1px 0 0 var(--bs-border-color);
    }

    .card-body {
        padding: 0.85rem;
    }

    .table-responsive {
        font-size: 0.875rem;
    }

    .table-actions .btn {
        min-width: 36px;
        min-height: 36px;
    }

    .modal-dialog {
        margin: 0.5rem;
    }
}

/* Print styles */
@media print {
    .sidebar,
    .navbar,
    .btn,
    .pagination {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}