/* GoWeb base styles — dark-green palette, bootstrap 5.3 base */

:root {
    --gw-green: #2E7D32;        /* primary */
    --gw-green-dark: #1B5E20;   /* hover / active */
    --gw-green-light: #4CAF50;  /* accents */
    --gw-green-bg: #E8F5E9;     /* soft background wash */
    --gw-lime-accent: #B5E63A;  /* lime accent used in hero corner shape + CTA */
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 0;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: var(--gw-green-dark);
}

a:hover {
    color: var(--gw-green);
}

.text-gw-green {
    color: var(--gw-green-dark) !important;
}

.bg-gw-green {
    background-color: var(--gw-green) !important;
    color: #fff;
}

.bg-gw-green-soft {
    background-color: var(--gw-green-bg) !important;
}

/* Buttons - override bootstrap primary to dark green */
.btn-primary {
    color: #fff;
    background-color: var(--gw-green);
    border-color: var(--gw-green-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--gw-green-dark);
    border-color: var(--gw-green-dark);
}

.btn-outline-primary {
    color: var(--gw-green-dark);
    border-color: var(--gw-green-dark);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--gw-green-dark);
    border-color: var(--gw-green-dark);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--gw-green);
    border-color: var(--gw-green-dark);
}

/* Dark-green navbar — matches the top of the splash gradient */
.navbar.gw-navbar {
    background-color: var(--gw-green-dark);
}

.navbar.gw-navbar .gw-brand,
.navbar.gw-navbar .gw-brand:hover,
.navbar.gw-navbar .gw-brand:focus {
    color: #fff;
}

.navbar.gw-navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.navbar.gw-navbar .navbar-nav .nav-link:hover,
.navbar.gw-navbar .navbar-nav .nav-link:focus,
.navbar.gw-navbar .navbar-nav .nav-link.active,
.navbar.gw-navbar .navbar-nav .show > .nav-link {
    color: #fff;
}

/* Dropdown toggles that should not show the chevron (e.g. icon-only profile button) */
.dropdown-toggle.gw-no-caret::after { display: none !important; }

/* Listview row grouping (gw-group.js) — collapsible header rows + hidden
   data-row state. Reusable across any listview that opts in via the
   data-gw-group-by attribute on the <table>. */
.gw-group-header {
    background-color: var(--gw-green-bg) !important;
    cursor: pointer;
    user-select: none;
}
.gw-group-header td { font-weight: 600; }
.gw-group-collapsed { display: none !important; }

/* Nested dropdown submenu — Bootstrap 5 ships flat menus only. Pattern:
     <li class="gw-submenu">
         <a class="dropdown-item gw-submenu-toggle">…</a>
         <ul class="dropdown-menu">…</ul>
     </li>
   The script in site.js reveals the nested <ul> on hover or click; CSS
   positions it to the right of the parent menu. The chevron sits on the
   far right of the parent item to telegraph the submenu. */
.gw-submenu { position: relative; }
.gw-submenu > .dropdown-menu {
    top: -.5rem;
    left: 100%;
    margin-left: .125rem;
    display: none;
}
.gw-submenu.show > .dropdown-menu,
.gw-submenu:hover > .dropdown-menu { display: block; }
.gw-submenu-toggle { display: flex; justify-content: space-between; align-items: center; }
.gw-submenu-toggle::after {
    content: ""; display: inline-block; width: 0; height: 0; margin-left: .5rem;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    border-left: .3em solid currentColor;
}
/* On narrow viewports the nav collapses into a stacked burger menu —
   showing the submenu to the right would clip; flow it inline instead. */
@media (max-width: 991.98px) {
    .gw-submenu > .dropdown-menu {
        position: static;
        left: auto;
        margin-left: 0;
        box-shadow: none;
        padding-left: 1rem;
    }
}

/* Flag icons in the language picker — thin border so they read on dark green */
.gw-flag {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 2px;
    object-fit: cover;
    vertical-align: middle;
}
.dropdown-menu .gw-flag {
    border-color: rgba(0, 0, 0, .15);
}

/* Dashboard stat cards — coloured icon block + big number, hover lifts */
.gw-stat-card {
    transition: transform .12s ease, box-shadow .12s ease;
}
a:hover > .gw-stat-card,
a:focus > .gw-stat-card {
    transform: translateY(-2px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08) !important;
}
.gw-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.gw-stat-icon--green  { background: #E8F5E9; color: #2E7D32; }
.gw-stat-icon--blue   { background: #E3F2FD; color: #1565C0; }
.gw-stat-icon--orange { background: #FFF3E0; color: #E65100; }
.gw-stat-icon--purple { background: #F3E5F5; color: #6A1B9A; }
.gw-stat-icon--teal   { background: #E0F2F1; color: #00695C; }

/* ----- Scanner-state dot (employee Documenten tab) -----
   Small coloured circle next to a status line. Mirrors the API-status
   traffic-light pattern from /Pallets but with five states. */
.gw-scan-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    flex-shrink: 0;
}
.gw-scan-dot--idle    { background: #adb5bd; }                       /* grey  */
.gw-scan-dot--working { background: #ffc107; animation: gw-pulse 1s ease-in-out infinite alternate; } /* amber */
.gw-scan-dot--ready   { background: #28a745; }                       /* green */
.gw-scan-dot--error   { background: #dc3545; }                       /* red   */
@keyframes gw-pulse   { from { opacity: .55; } to { opacity: 1; } }

/* ----- Wizard step indicator (employee onboarding etc.) -----
   Numbered circles + labels, connected by a thin track. The active step
   is brand-green; completed steps stay green so progress reads forward;
   pending steps are muted. Lives at the top of a wizard modal body. */
.gw-wiz-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    position: relative;
}
.gw-wiz-steps::before {
    content: "";
    position: absolute;
    top: 14px; /* vertically centred on the 28px circle */
    left: 14px;
    right: 14px;
    height: 2px;
    background: #dee2e6;
    z-index: 0;
}
.gw-wiz-step {
    flex: 1 1 0;
    text-align: center;
    position: relative;
    z-index: 1;
}
.gw-wiz-step__circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #dee2e6;
    color: #6c757d;
    font-weight: 600;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.gw-wiz-step__label {
    display: block;
    font-size: .75rem;
    color: #6c757d;
    margin-top: .35rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.gw-wiz-step.is-active .gw-wiz-step__circle,
.gw-wiz-step.is-done   .gw-wiz-step__circle {
    background: var(--gw-green);
    border-color: var(--gw-green);
    color: #fff;
}
.gw-wiz-step.is-active .gw-wiz-step__label {
    color: var(--gw-green-dark);
    font-weight: 600;
}

/* Reusable drag-and-drop / click-to-pick image dropzone (modal forms etc.) */
.gw-dropzone {
    min-height: 200px;
    border: 2px dashed #ced4da;
    border-radius: 10px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
}
.gw-dropzone:hover,
.gw-dropzone:focus {
    border-color: var(--gw-green);
    background: var(--gw-green-bg);
    outline: none;
}
.gw-dropzone--active {
    border-color: var(--gw-green-dark);
    background: var(--gw-green-bg);
}
.gw-dropzone img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    display: block;
}

/* Card-view tile for /Settings/Crates (also reusable for any image-first card grid).
   Thin outline border, square image area on top, hover lifts subtly. */
.gw-crate-card {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.gw-crate-card:hover,
.gw-crate-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .06);
    outline: none;
}
.gw-crate-card__img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--bs-border-color);
}
.gw-crate-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .25rem;
}
.gw-crate-card__del {
    line-height: 1;
    padding: .15rem .35rem;
    opacity: 0;
    transition: opacity .12s ease;
}
.gw-crate-card:hover .gw-crate-card__del,
.gw-crate-card:focus-visible .gw-crate-card__del,
.gw-crate-card__del:focus-visible {
    opacity: 1;
}

/* Sortable table headers — pointer + hover affordance, neutral arrow stays muted */
.gw-sortable th.gw-sort-th {
    cursor: pointer;
    user-select: none;
}
.gw-sortable th.gw-sort-th:hover {
    background-color: var(--gw-green-bg);
}
.gw-sortable th .gw-sort-icon {
    opacity: 0.85;
}

/* Dropdown items: green on hover, white text */
.navbar.gw-navbar .dropdown-item:hover,
.navbar.gw-navbar .dropdown-item:focus {
    background-color: var(--gw-green);
    color: #fff;
}

.navbar.gw-navbar .dropdown-item.active,
.navbar.gw-navbar .dropdown-item:active {
    background-color: var(--gw-green-dark);
    color: #fff;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* Focus ring using the green */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--gw-green-light);
}

/* Dimona bulk-select checkboxes in the employee listview + the document Sign
   template checklist — green border so they stand out against the row (the
   default grey was barely visible). */
.dimona-row-check,
#dimonaSelectAll,
.sign-tpl {
    border-color: var(--gw-green-dark);
}
.dimona-row-check:checked,
#dimonaSelectAll:checked,
.sign-tpl:checked {
    background-color: var(--gw-green-dark);
    border-color: var(--gw-green-dark);
}

/* Brand wordmark in navbar */
.gw-brand {
    font-size: 1.35rem;
    letter-spacing: -.01em;
    /* Keep the wordmark intact even when the navbar is tight — without
       this it can wrap one-letter-per-line at narrow widths above the
       collapse breakpoint (landscape phones in the dead zone). */
    white-space: nowrap;
    flex-shrink: 0;
}

/* Sticky navbar — flat at rest, lifts on scroll */
.navbar.sticky-top {
    transition: box-shadow .25s ease;
}

.navbar.sticky-top.gw-navbar-scrolled {
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
}

/* Hero — split panel: greenhouse photo on the right, dark-green panel
   with curved edge on the left, lime accent in the bottom-right corner. */
.gw-hero {
    position: relative;
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    overflow: hidden;
    background: var(--gw-green-dark);
    color: #fff;
}

.gw-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.gw-hero-shapes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.gw-hero-container {
    position: relative;
    z-index: 2;
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    display: flex;
    align-items: center;
    padding: 3rem 1rem;
}

.gw-hero-container > .row {
    width: 100%;
    margin: 0;
}

.gw-hero-content {
    color: #fff;
}

.gw-hero-logo {
    display: block;
    width: clamp(300px, 39vw, 510px);
    height: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .35));
}

.gw-hero-tagline {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, .95);
    margin: 0 0 2.5rem;
    max-width: 32em;
}

.gw-hero-cta {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-width: 22rem;
}

.gw-hero-cta .btn {
    border-radius: 999px;
    padding: .85rem 1.6rem;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gw-hero-cta .btn .bi {
    transition: transform .2s ease;
}

.gw-hero-cta .btn:hover .bi {
    transform: translateX(3px);
}

.gw-btn-lime {
    background: var(--gw-lime-accent);
    color: var(--gw-green-dark);
    border: 1px solid var(--gw-lime-accent);
}

.gw-btn-lime:hover,
.gw-btn-lime:focus {
    background: #C8F352;
    border-color: #C8F352;
    color: var(--gw-green-dark);
}

.gw-hero-cta .btn-outline-light {
    border-width: 1.5px;
    font-weight: 500;
}

/* Mobile (<768px): hide the photo + curved overlays, fall back to a
   flat green hero so the text stays legible on small screens. */
@media (max-width: 767.98px) {
    .gw-hero-photo,
    .gw-hero-shapes {
        display: none;
    }
    .gw-hero {
        background: linear-gradient(180deg, var(--gw-green-dark) 0%, var(--gw-green) 100%);
    }
    .gw-hero-cta {
        max-width: 100%;
    }
}

/* ====== Public contact form (/Contact) ====== */

.gw-contact-wrap .gw-pill,
.gw-contact-wrap .gw-textarea {
    border-radius: 999px;
    padding: .75rem 1.25rem;
    border-color: #e2e2e2;
}

.gw-contact-wrap .gw-textarea {
    border-radius: 18px;
    padding: .85rem 1.25rem;
    resize: vertical;
}

.gw-contact-wrap .gw-pill:focus,
.gw-contact-wrap .gw-textarea:focus {
    border-color: var(--gw-green);
    box-shadow: 0 0 0 .2rem rgba(46, 125, 50, .15);
}

/* Honeypot — visually offscreen but still in the layout for bots that
   inspect the form. display:none would let them skip the field. */
.gw-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Step tabs (pills at the top of the wizard) */
.gw-step-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    background: #f3f4f3;
    border-radius: 999px;
    padding: .35rem;
}

.gw-step-tab {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .95rem;
    color: #6c757d;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.gw-step-tab:hover {
    color: var(--gw-green-dark);
}

.gw-step-tab.is-active {
    background: #fff;
    color: var(--gw-green-dark);
    font-weight: 600;
    box-shadow: 0 .15rem .6rem rgba(0, 0, 0, .08);
}

.gw-step-tab.is-done {
    color: var(--gw-green);
}

.gw-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e9ecef;
    color: inherit;
    font-size: .8rem;
    font-weight: 600;
}

.gw-step-tab.is-active .gw-step-number {
    background: var(--gw-green-dark);
    color: #fff;
}

.gw-step-tab.is-done .gw-step-number {
    background: var(--gw-lime-accent);
    color: var(--gw-green-dark);
}

/* Lime progress bar under the tabs */
.gw-step-progress {
    height: 8px;
    background: #f1f3f1;
    border-radius: 999px;
    overflow: hidden;
}

.gw-step-progress-fill {
    height: 100%;
    width: 33.33%;
    background: var(--gw-lime-accent);
    border-radius: 999px;
    transition: width .25s ease;
}

/* Step panel transitions */
.gw-step-panel[hidden] {
    display: none;
}

/* Step nav row (back / continue buttons) */
.gw-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.gw-step-nav .btn {
    border-radius: 999px;
    padding: .65rem 1.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Category checkbox grid (step 2) */
.gw-category-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .35rem .75rem;
    margin-top: .25rem;
}

/* Captcha input — narrow, doesn't need full-width like other pill inputs */
.gw-captcha-input {
    max-width: 130px;
}

@media (max-width: 575.98px) {
    .gw-step-tab .gw-step-label {
        display: none;   /* show just the numbers on very narrow viewports */
    }
}

.gw-scroll-hint {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: 1.75rem;
    text-decoration: none;
    animation: gw-bounce 2.2s ease-in-out infinite;
    z-index: 2;
}

.gw-scroll-hint:hover {
    color: #fff;
}

@keyframes gw-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 10px); }
}

@media (prefers-reduced-motion: reduce) {
    .gw-scroll-hint { animation: none; }
}

/* Marketing-page solutions carousel — image-led with a gradient-overlay caption.
   Fixed image height so a 4000×3000 photo doesn't dominate the viewport.
   Caption sits inside the rounded container; its background fade keeps text
   readable over varied photo content. */
.gw-home-carousel .gw-carousel-img {
    height: 480px;
    object-fit: cover;
    object-position: center;
}

.gw-home-carousel .gw-carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 3rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

@media (max-width: 768px) {
    .gw-home-carousel .gw-carousel-img { height: 320px; }
    .gw-home-carousel .gw-carousel-caption { padding: 1rem 1.25rem; }
    .gw-home-carousel .gw-carousel-caption h3 { font-size: 1.15rem; }
    .gw-home-carousel .gw-carousel-caption p  { font-size: .85rem; }
}

/* Highlight / feature cards — image-on-top editorial layout */
.gw-feature-card {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.gw-feature-card-media {
    aspect-ratio: 4 / 3;
    background: #e9ecef center/cover no-repeat;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}

.gw-feature-card:hover .gw-feature-card-media {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
}

.gw-feature-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.gw-feature-card-media img:focus-visible {
    outline: 3px solid var(--gw-lime-accent);
    outline-offset: -3px;
}

/* Lightbox for the feature-card images. Pure CSS/JS, no library.
   Hidden by default (display:none); JS toggles .is-open to show.
   z-index 1080 sits above sticky-top navbar (1030) and any Bootstrap
   modal backdrop (1050). */
.gw-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 1.5rem;
    cursor: zoom-out;
    animation: gw-lightbox-fade .15s ease;
}

.gw-lightbox.is-open {
    display: flex;
}

.gw-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5);
    cursor: default;
}

.gw-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}

.gw-lightbox-close:hover,
.gw-lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.25);
    outline: none;
}

@keyframes gw-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gw-feature-card-title {
    color: var(--gw-green-dark);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.25;
    margin-bottom: .85rem;
}

.gw-feature-card-text {
    color: #6c757d;
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .gw-feature-card-title { font-size: 1.25rem; }
}

/* Video card thumbnail */
.gw-video-thumb {
    aspect-ratio: 16/9;
    /* background-image is set inline per-tile (poster). The colour
       fallback is a soft GoWeb-green tint so a missing poster still
       reads as "video tile" rather than a broken image box. */
    background: #d8e9d8 center/cover no-repeat;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gw-video-thumb .bi-play-circle-fill {
    color: #fff;
    font-size: 3rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* The whole tile is a clickable <button>; lift slightly on hover so
   it reads as interactive without an anchor underline. */
.gw-video-tile { transition: transform .12s ease; }
.gw-video-tile:hover { transform: translateY(-2px); }
.gw-video-tile:focus-visible {
    outline: 2px solid var(--bs-success, #2e7d32);
    outline-offset: 2px;
    border-radius: 12px;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== gw-paginate ===== */
/* Set by the pagination helper to hide rows that aren't on the current
   page. Composes with `d-none` (search filter) — a row is visible only
   when neither class is present. */
.gw-page-hidden { display: none !important; }
/* Compact controls strip below paginated tables. */
.gw-paginate-controls .pagination .page-link { cursor: pointer; }

/* Employee modal: keep the tabbed area at the height of the tallest tab
   (Persoonsgegevens) so switching to a smaller tab doesn't collapse the
   dialog and shift the tab nav around. min-height lets the modal grow if
   future tab content is even taller, but it never shrinks below this. */
#employeeModal .tab-content { min-height: 70vh; }