/* ============================================
   Huisstijl-overlay in stijl van FalcooHorse
   Primair: teal #00B2B2 / hsl(180,100%,34.81%)
   Donkerblauw: #2A3D52 / hsl(211,29.41%,23.34%)
   Groen accent: #43ac6a
   ============================================ */

/* Select2 — laat de zoekbare dropdown dezelfde hoogte en border-stijl
   aannemen als een Bootstrap 5 form-select, zodat de twee niet uit elkaar
   springen in hetzelfde formulier. */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    line-height: 1.5;
    color: #212529;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem);
    top: 1px;
    right: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Sectiekop in DVW-blauw met subtiele onderlijn — voor de "Aanvrager"
   en "Bezoek"-koppen op het voorafmeldingsformulier. */
.fh-section-header {
    color: #0971B9;
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #0971B9;
}

/* GDPR-cookietoestemmingsbalk — fixed onderaan, in DVW-blauw. */
.fh-cookiebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: #0971B9;
    color: #ffffff;
    padding: 12px 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
    font-family: 'Barlow Semi Condensed', Arial, Helvetica, sans-serif;
}
.fh-cookiebar a { color: #ffffff; text-decoration: underline; }
body { padding-bottom: 80px; } /* ruimte vrijhouden voor de balk */

/* Blauw DVW-header voor de aanvragentabellen (DataTables-vriendelijk —
   inline styles werden tijdens redraw door DataTables verstoord). */
table#aanvragenTabel > thead > tr > th {
    background: #0971B9 !important;
    color: #ffffff !important;
    padding: 0.8rem 0.9rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: none;
}
/* DataTables sort-iconen op donkere achtergrond zichtbaar houden. */
table#aanvragenTabel > thead > tr > th.dt-orderable-asc::before,
table#aanvragenTabel > thead > tr > th.dt-orderable-desc::after,
table#aanvragenTabel > thead > tr > th.dt-ordering-asc::before,
table#aanvragenTabel > thead > tr > th.dt-ordering-desc::after {
    color: #ffffff !important;
    opacity: 0.85;
}

:root {
    --fh-teal:        hsl(180deg, 100%, 34.81%);
    --fh-teal-dark:   hsl(180deg, 100%, 28%);
    --fh-teal-light:  hsl(180deg, 58.49%, 90.44%);
    --fh-teal-bg:     hsl(180deg, 50%, 96.06%);

    --fh-navy:        hsl(211deg, 29.41%, 23.34%);
    --fh-navy-hover:  hsl(212deg, 17.7%, 47.66%);

    /* De Vlaamse Waterweg-blauw (matcht het logo) */
    --fh-blue:        #0971B9;
    --fh-blue-dark:   #075F9A;

    --fh-green:       #43ac6a;

    --fh-content-bg:  hsl(240deg, 23.08%, 97.46%);
    --fh-border:      hsl(240deg, 3.85%, 89.81%);
    --fh-gray-text:   hsl(240deg, 4.17%, 52.95%);

    --fh-warning-bd:  hsl(40deg, 100%, 78.05%);
    --fh-warning-fg:  hsl(40deg, 100%, 46.48%);
    --fh-warning-bg:  hsl(39deg, 100%, 94.91%);
    --fh-success-bd:  hsl(180deg, 58.49%, 58.44%);
    --fh-success-fg:  hsl(181deg, 100%, 27.46%);
    --fh-success-bg:  hsl(180deg, 50%, 96.06%);
    --fh-error-bd:    hsl(15deg, 100%, 82.56%);
    --fh-error-fg:    hsl(15deg, 81.96%, 50.01%);
    --fh-error-bg:    hsl(13deg, 100%, 96.28%);
    --fh-info-bd:     hsl(243deg, 95.74%, 90.77%);
    --fh-info-fg:     hsl(253deg, 100%, 36.04%);
    --fh-info-bg:     hsl(243deg, 100%, 95.48%);

    --fh-radius:      5px;
    --fh-radius-tag:  9px;

    /* Bootstrap primaire kleur overschrijven naar teal */
    --bs-primary: hsl(180deg, 100%, 34.81%);
    --bs-primary-rgb: 0, 177, 177;
    --bs-link-color: hsl(180deg, 100%, 28%);
    --bs-link-color-rgb: 0, 142, 142;
    --bs-link-hover-color: hsl(180deg, 100%, 22%);
}

html, body {
    background: var(--fh-content-bg);
    color: #212529;
    font-family: Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Barlow Semi Condensed", Calibri, sans-serif;
    font-weight: 600;
    color: var(--fh-navy);
}
a { color: var(--fh-teal-dark); text-decoration: none; }
a:hover { color: var(--fh-teal); text-decoration: underline; }

/* Topbar — De Vlaamse Waterweg-blauw, matcht het logo */
.fh-topbar {
    background: var(--fh-blue);
    color: #ffffff;
    padding: 8px 0;
}
.fh-topbar a, .fh-topbar a:hover { color: #ffffff; text-decoration: none; }
.fh-brand {
    display: flex; align-items: center; gap: 10px;
}
.fh-brand img {
    display: block;
    height: 40px;
    width: auto;
}
.fh-subtitle { font-size: 0.85rem; opacity: 0.9; }

/* Witte navigatiestrook met onderlijn in DVW-blauw */
.fh-navstrip {
    background: #fff;
    height: 4px;
    box-shadow: inset 0 -3px 0 0 var(--fh-blue);
}

/* Cards */
.card {
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}
.card .card-body { padding: 24px; }
.card.fh-accent { border-top: 3px solid var(--fh-blue); }

/* Knoppen */
.btn {
    border-radius: var(--fh-radius);
    font-weight: 600;
    padding: 0.5rem 1.1rem;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--fh-blue);
    --bs-btn-border-color: var(--fh-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fh-blue-dark);
    --bs-btn-hover-border-color: var(--fh-blue-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--fh-blue-dark);
    --bs-btn-active-border-color: var(--fh-blue-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--fh-blue);
    --bs-btn-disabled-border-color: var(--fh-blue);
}
.btn-outline-primary {
    --bs-btn-color: var(--fh-blue-dark);
    --bs-btn-border-color: var(--fh-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fh-blue);
    --bs-btn-hover-border-color: var(--fh-blue);
    --bs-btn-active-bg: var(--fh-blue);
    --bs-btn-active-border-color: var(--fh-blue);
}
.btn-success {
    --bs-btn-bg: var(--fh-green);
    --bs-btn-border-color: var(--fh-green);
    --bs-btn-hover-bg: #379457;
    --bs-btn-hover-border-color: #379457;
    --bs-btn-active-bg: #379457;
    --bs-btn-active-border-color: #379457;
    --bs-btn-disabled-bg: var(--fh-green);
    --bs-btn-disabled-border-color: var(--fh-green);
}
.btn-outline-success {
    --bs-btn-color: var(--fh-green);
    --bs-btn-border-color: var(--fh-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--fh-green);
    --bs-btn-hover-border-color: var(--fh-green);
}
.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--fh-gray-text);
    --bs-btn-border-color: var(--fh-border);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: var(--fh-content-bg);
    --bs-btn-hover-border-color: var(--fh-gray-text);
}

/* Form controls */
.form-control, .form-select {
    border-radius: var(--fh-radius);
    border-color: var(--fh-border);
}
.form-control:focus, .form-select:focus {
    border-color: var(--fh-blue);
    box-shadow: 0 0 0 0.2rem rgba(9, 113, 185, 0.15);
}
.form-label { font-weight: 600; color: var(--fh-navy); }
input[readonly] { background-color: #f0f0f0; }

/* Tabellen */
.table thead th {
    background: var(--fh-blue);
    color: #ffffff;
    border-bottom: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.table > :not(caption) > * > * { padding: 0.8rem 0.9rem; }
.table-hover tbody tr:hover { background: var(--fh-teal-bg); }

/* Badges / tags (zachte tinten met radius 9px zoals *-tag) */
.badge {
    border-radius: var(--fh-radius-tag);
    font-weight: 600;
    padding: 0.4em 0.7em;
    border: 1px solid transparent;
}
.badge.bg-secondary {
    background-color: var(--fh-content-bg) !important;
    color: var(--fh-gray-text) !important;
    border-color: var(--fh-border);
}
.badge.bg-success {
    background-color: var(--fh-success-bg) !important;
    color: var(--fh-success-fg) !important;
    border-color: var(--fh-success-bd);
}
.badge.bg-danger {
    background-color: var(--fh-error-bg) !important;
    color: var(--fh-error-fg) !important;
    border-color: var(--fh-error-bd);
}
.badge.bg-dark {
    background-color: var(--fh-navy) !important;
    color: #fff !important;
}
.badge.bg-light {
    background-color: var(--fh-info-bg) !important;
    color: var(--fh-info-fg) !important;
    border-color: var(--fh-info-bd) !important;
}

/* Alerts in dezelfde zachte tag-tinten */
.alert { border-radius: var(--fh-radius); border: 1px solid transparent; }
.alert-success { background: var(--fh-success-bg); color: var(--fh-success-fg); border-color: var(--fh-success-bd); }
.alert-warning { background: var(--fh-warning-bg); color: var(--fh-warning-fg); border-color: var(--fh-warning-bd); }
.alert-danger  { background: var(--fh-error-bg); color: var(--fh-error-fg); border-color: var(--fh-error-bd); }
.alert-info    { background: var(--fh-info-bg); color: var(--fh-info-fg); border-color: var(--fh-info-bd); }

/* Footer */
.fh-footer {
    background: var(--fh-blue);
    color: #c7d0da;
    padding: 10px;
    margin-top: 48px;
    font-size: 0.9rem;
}
.fh-footer a { color: var(--fh-teal); }
.fh-footer a:hover { color: #fff; }

/* Keuze-cards hover */
a.card.fh-accent:hover {
    border-color: var(--fh-blue);
    box-shadow: 0 0.25rem 0.75rem rgba(9, 113, 185, 0.15);
}

/* ISPS-indicator in sluizenlijst */
.fh-check, .fh-cross {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
}
.fh-check { color: var(--fh-green); }
.fh-cross { color: #c0392b; }

/* ============================================
   DataTables.net afstemming op huisstijl
   ============================================ */
/* Kolomtitel zichtbaar in wit op donkere header; voorkomt dat globale .table
   cell-padding de ruimte voor het sorteerpijltje wegneemt. */
table.dataTable thead > tr > th {
    color: #ffffff;
    vertical-align: middle;
}
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc {
    padding-right: 2rem !important;
}
/* Kolomtitels in DataTables forceren zichtbaar — verschillende eigenschappen
   die in theorie de tekst zouden kunnen verbergen worden expliciet teruggezet. */
table.dataTable thead > tr > th > span.dt-column-title,
table.dataTable thead > tr > th > span.dt-column-title[role="button"] {
    color: #ffffff !important;
    font-size: inherit !important;
    line-height: 1.4 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    text-indent: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    text-shadow: none !important;
}

/* Witte sorteer-pijltjes op de donkere header — beide pijltjes zichtbaar,
   actieve sorteerrichting voller wit dan de inactieve. */
table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::after {
    color: #ffffff !important;
    opacity: 0.55 !important;
}
table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Zoekveld + lengte-select in huisstijl */
.dataTables_wrapper .dt-search input,
.dataTables_wrapper .dt-length select,
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    padding: 0.3rem 0.5rem;
}
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
    border-color: var(--fh-blue);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(9, 113, 185, 0.15);
}

/* Actieve paginaknop in DVW-blauw */
.page-item.active .page-link {
    background-color: var(--fh-blue);
    border-color: var(--fh-blue);
}
.page-link { color: var(--fh-teal-dark); }
.page-link:hover { color: var(--fh-teal-dark); }

/* Wat lucht boven/onder de tabelcontrols */
div.dt-container .dt-layout-row { margin-bottom: 0.75rem; }

/* ============================================
   Mobile tweaks (< 576px = sm-breakpoint van Bootstrap)
   ============================================ */
@media (max-width: 575.98px) {
    /* Topbar compacter */
    .fh-topbar { padding: 6px 0; }
    .fh-brand img { height: 32px; }

    /* Hoofdcontainer dichter bij de rand */
    main.container { padding-left: 12px; padding-right: 12px; }
    main.container.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    /* Card-padding kleiner */
    .card .card-body { padding: 16px 14px; }
    .table > :not(caption) > * > * { padding: 0.55rem 0.5rem; }

    /* Kleinere koppen */
    h1.h3 { font-size: 1.25rem; }
    h2.h5 { font-size: 1.05rem; }
    h2.h6 { font-size: 0.95rem; }

    /* DataTables-controlebalk op één lijn houden mag niet — laat ze stapelen */
    div.dt-container .dt-layout-row { display: block; }
    div.dt-container .dt-layout-cell { width: 100% !important; margin-bottom: 0.5rem; }
    div.dt-container .dt-length, div.dt-container .dt-search { text-align: left; }
    div.dt-container .dt-search input { width: 100%; }

    /* Actie-knopjes in tabellen mogen wrappen i.p.v. overflowen */
    td .btn-group { display: inline-flex; flex-wrap: wrap; gap: 4px; }
    td .btn-group > .btn { border-radius: var(--fh-radius); }
}