/* =====================================================================
   modern.css — modern UI layer
   ---------------------------------------------------------------------
   Loaded AFTER /_webblocks/css/wrapped/wrapped.css so it can refine the
   existing design without touching the LESS-compiled bundle.

   This file lives in a sub-folder of /css so it is NOT picked up by the
   LESS wrapper (which only scans the top level). It is plain, modern CSS
   (custom properties, clamp(), grid) and is linked directly.

   Scope: design tokens, typography, buttons, forms, cards, tables,
   navigation, login, accessibility (focus states), responsive/mobile,
   and reduced-motion. It enhances visuals only and keeps all existing
   markup, routes, validation and JavaScript behaviour intact.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------- */
:root {
    /* Brand-aligned blues (derived from the existing #89c6ff palette but
       darkened to a primary that passes WCAG AA against white text). */
    --c-primary:        #1668ad;
    --c-primary-600:    #115893;
    --c-primary-700:    #0d4a7c;
    --c-primary-soft:   #89c6ff;
    --c-primary-50:     #eaf4fd;
    --c-primary-100:    #d6e9fb;

    /* Accent / status */
    --c-success:        #2f9e51;
    --c-success-50:     #e9f7ee;
    --c-warning:        #d97a06;
    --c-warning-50:     #fdf3e6;
    --c-danger:         #d23f3f;
    --c-danger-50:      #fbeaea;

    /* Warm-tinted neutrals for a trustworthy, professional feel */
    --c-ink:            #1f2933;   /* primary text */
    --c-ink-soft:       #52606d;   /* secondary text */
    --c-ink-muted:      #7b8794;   /* muted text / placeholders */
    --c-line:           #e2e6ea;   /* hairline borders */
    --c-line-strong:    #cbd2d9;
    --c-surface:        #ffffff;   /* cards */
    --c-surface-2:      #f7f9fb;   /* subtle fills */
    --c-bg:             #f4f6f8;   /* app background */

    /* Typography. Open Sans is the only webfont actually loaded (see header.php);
       'Quicksand' used to head this list but was never loaded, so it silently
       fell back. Open Sans is a highly legible humanist sans — ideal for a
       data-dense admin UI — so it leads the stack explicitly. */
    --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Fluid type scale (nudged up slightly for readability) */
    --fs-300: 0.8125rem;                         /* 13px */
    --fs-400: 0.9375rem;                         /* 15px */
    --fs-500: 1rem;                              /* 16px */
    --fs-600: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
    --fs-700: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);

    /* Spacing scale (4px base) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

    /* Radius */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Elevation (soft, layered) */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.12), 0 2px 6px -2px rgba(16, 24, 40, 0.07);
    --shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, 0.22);

    /* Focus ring */
    --ring: 0 0 0 3px rgba(22, 104, 173, 0.35);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.18s;

    /* Touch target minimum */
    --tap: 44px;
}

/* ---------------------------------------------------------------------
   2. Base / resets (additive, low-risk)
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background-color: var(--c-bg); }

body {
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    font-weight: 400;
    line-height: 1.55;             /* roomier leading -> easier to read */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Guard against accidental horizontal scrolling. Use `clip` (not
       `hidden`) so the body does NOT become a scroll container — that
       was breaking 100vh height and the page background on tall pages. */
    overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; }

/* Smooth in-page scrolling (disabled for reduced-motion below) */
html { scroll-behavior: smooth; }

::selection { background: var(--c-primary-100); color: var(--c-primary-700); }

/* ---------------------------------------------------------------------
   3. Accessibility — focus & skip link
   ------------------------------------------------------------------- */
/* Keyboard focus ring on everything interactive, without affecting mouse users */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: fixed;
    top: -60px;
    left: var(--sp-4);
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-weight: 700;
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* Visually-hidden helper for screen-reader-only labels */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.2; }
h1 { font-size: var(--fs-700); }
h2 { font-size: var(--fs-600); }

a { transition: color var(--dur) var(--ease); }

/* ---------------------------------------------------------------------
   5. Buttons
   The existing .btn uses heavy !important, so the modern look is applied
   with matching specificity. Variants (.back/.white/.btn2/3/4) keep their
   intent but gain consistent shape, motion and focus states.
   ------------------------------------------------------------------- */
.btn,
input[type="submit"].btn,
button.btn,
.btn2, .btn3, .btn4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: 0 var(--sp-5) !important;
    border: 1px solid transparent;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease) !important;
    box-shadow: var(--shadow-xs);
}

.btn {
    background-color: var(--c-primary) !important;
    color: #fff !important;
}
.btn:hover {
    background-color: var(--c-primary-600) !important;
    color: #fff !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }

/* Secondary / neutral variants */
.btn.back, .btn.white {
    background-color: var(--c-surface) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-line-strong) !important;
}
.btn.back:hover, .btn.white:hover {
    background-color: var(--c-surface-2) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-ink-muted) !important;
}

/* Positive / destructive helpers if present in markup */
.btn2 { background-color: var(--c-success) !important; color: #fff !important; }
.btn2:hover { background-color: #277f42 !important; color: #fff !important; transform: translateY(-1px); }
.btn3 { background-color: var(--c-ink-soft) !important; color: #fff !important; }
.btn3:hover { background-color: var(--c-ink) !important; color: #fff !important; }
/* Neutral secondary (legacy grey). The legacy hover turned dark grey while
   body.app-vib a:hover kept the text brand-brown — unreadable; keep it a
   light surface with ink text in both states instead. */
.btn4 {
    background-color: var(--c-surface) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-line-strong) !important;
}
.btn4:hover {
    background-color: var(--c-surface-2) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-ink-muted) !important;
    transform: translateY(-1px);
}

button:disabled, .btn[disabled], .btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   6. Forms
   ------------------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="file"],
input[type="number"], input[type="tel"], input[type="email"],
input[type="search"], input[type="date"], textarea, select {
    min-height: var(--tap);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background-color: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

input[type="text"]:hover, input[type="password"]:hover,
input[type="number"]:hover, input[type="tel"]:hover,
input[type="email"]:hover, input[type="search"]:hover,
textarea:hover, select:hover {
    border-color: var(--c-ink-muted);
}

input[type="text"]:focus, input[type="password"]:focus,
input[type="file"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="email"]:focus,
input[type="search"]:focus, input[type="date"]:focus,
textarea:focus, select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: var(--ring);
}

textarea { line-height: 1.5; padding: var(--sp-3); }

::placeholder { color: var(--c-ink-muted); opacity: 1; }

/* Boolean-kolomiconen (o.a. Actief bij medewerkers): donkergroen vinkje.
   De oude regel in main_vib.css mikt op fa-circle-check, maar het
   boolean-type rendert de FA4-naam fa-check-circle en bleef daardoor
   inktkleurig. */
i.fa-check-circle.green,
i.fa-circle-check.green { color: #1d6f42 !important; }

/* Native control accenting (checkbox/radio) */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--c-primary);
    width: 18px; height: 18px;
    cursor: pointer;
}

label { color: var(--c-ink-soft); }

fieldset {
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-surface);
}
legend { color: var(--c-ink); font-weight: 700; }

/* Inline validation message colour token */
.message, .error-message { color: var(--c-danger); }

/* ---------------------------------------------------------------------
   6b. Alerts / notices
   A single, reusable notice component (replaces ad-hoc inline-styled
   error/success boxes). Variants are tinted with the status tokens so
   colour usage stays consistent and readable (AA contrast).
   ------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--c-line);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    color: var(--c-ink);
    font-size: var(--fs-400);
    line-height: 1.45;
}
.alert > i, .alert .alert-icon { margin-top: 2px; flex: 0 0 auto; }

.alert--success { background: var(--c-success-50); border-color: var(--c-success); color: #1f6b39; }
.alert--error,
.alert--danger  { background: var(--c-danger-50);  border-color: var(--c-danger);  color: #9b2a2a; }
.alert--warning { background: var(--c-warning-50); border-color: var(--c-warning); color: #8a4d04; }
.alert--info    { background: var(--c-primary-50); border-color: var(--c-primary); color: var(--c-primary-700); }

/* Modernise the legacy flash classes (.gelukt = success, .mislukt = error)
   in app context. The original rules force a fixed 40px height that clips
   multi-line messages — here they flow naturally and pick up the alert look.
   Scoped to .app-main / .logincontent so we don't fight unrelated widgets. */
.app-main .gelukt, .logincontent .gelukt,
.app-main .mislukt, .logincontent .mislukt {
    display: block;
    height: auto;
    line-height: 1.45;
    width: auto;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border-width: 1px;
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-400);
}
.app-main .gelukt, .logincontent .gelukt {
    background: var(--c-success-50); border-color: var(--c-success); color: #1f6b39;
}
.app-main .mislukt, .logincontent .mislukt {
    background: var(--c-danger-50); border-color: var(--c-danger); color: #9b2a2a;
}

/* ---------------------------------------------------------------------
   7. Cards / content blocks
   The card IS the .boxcontent. The .row/.box/.inner wrappers are unwrapped
   from the DOM by script (see footer.php); these selectors target
   .boxcontent directly so the card renders whether or not the wrappers are
   still present (e.g. before the script runs, or in edge cases).
   ------------------------------------------------------------------- */
.content .box .inner {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.app-main .content .boxcontent {
    background-color: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.app-main .content .title {
    font-weight: 700;
    color: var(--c-ink);
}

/* ---------------------------------------------------------------------
   8. Tables
   ------------------------------------------------------------------- */
.table, table.table, .bootstrap-table .table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.table thead th, .table th,
.cms_table thead td, .cms_table thead th {
    background: var(--c-surface-2) !important;
    color: var(--c-ink-soft) !important;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: var(--fs-300);
    border-bottom: 1px solid var(--c-line-strong);
}
.table thead th .th-inner { text-transform: uppercase; }
.table td, .table th { border-bottom: 1px solid var(--c-line); }
.table tbody tr { transition: background-color var(--dur) var(--ease); }
.table tbody tr:hover { background-color: var(--c-primary-50); }

/* The legacy skin renders cms_table cells in Quicksand at 13px, which reads
   thin next to the rest of the UI. Use the app's Open Sans stack at 14px
   for tbody and tfoot (order lines, totals, VAT rows). */
.cms_table,
.cms_table tbody td,
.cms_table tfoot td {
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

/* Make wide tables scroll horizontally instead of breaking the layout */
.table-container, .bootstrap-table .fixed-table-body {
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   9. Header / top bar
   ------------------------------------------------------------------- */
.container > header {
    box-shadow: var(--shadow-sm);
    background-color: var(--c-surface);
}

/* Language flags: clearer affordance + state */
.languages a.language img.language {
    border-radius: 4px;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.languages a.language:hover img.language { transform: translateY(-1px); opacity: 1; }
.language.opacity { opacity: 0.4; }

/* Header icon buttons (cart / logout) */
.cartHeader a, .logout span, .header-debtor a {
    transition: color var(--dur) var(--ease);
}
.cartHeader a:hover, .logout span:hover { color: var(--c-primary); }

/* Debtor chip */
.header-debtor {
    border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------
   10. Primary navigation (docks) + sidebar nav
   ------------------------------------------------------------------- */
.docks .iconMenu li.dock {
    border-radius: var(--radius-sm);
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.docks .iconMenu li.dock.active,
.docks .iconMenu li.dock.selected {
    background-color: var(--c-primary) !important;
    color: #fff !important;
}

.navholder nav ul li {
    transition: background-color var(--dur) var(--ease);
}
.navholder nav ul li:hover { background-color: var(--c-primary-50); }
.navholder nav ul li.selected { border-left: 3px solid var(--c-primary); }

/* ---------------------------------------------------------------------
   10b. Header dropdowns (language switcher + user/account menu)
   ------------------------------------------------------------------- */
.vib-dropdown { position: relative; }

.vib-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    max-width: 220px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.vib-dropdown-btn:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.vib-dropdown.is-open .vib-dropdown-btn { border-color: var(--c-primary); box-shadow: var(--ring); }

.vib-dd-flag { width: 20px; height: auto; border-radius: 3px; flex: none; }
.vib-dd-avatar { font-size: 1.15rem; color: var(--c-primary); }
.vib-dd-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}
.vib-dd-caret { font-size: 0.75rem; color: var(--c-ink-muted); transition: transform var(--dur) var(--ease); }
.vib-dropdown.is-open .vib-dd-caret { transform: rotate(180deg); }

.vib-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    min-width: 200px;
    padding: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    /* Hidden until opened; animated for a subtle reveal */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
}
.vib-dropdown-menu--right { left: auto; right: 0; }
.vib-dropdown.is-open .vib-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vib-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    min-height: var(--tap);
    border-radius: var(--radius-sm);
    color: var(--c-ink);
    font-size: var(--fs-400);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vib-dropdown-item:hover,
.vib-dropdown-item:focus-visible { background: var(--c-primary-50); color: var(--c-primary-700); }
.vib-dropdown-item[aria-current="true"] { color: var(--c-primary-700); }
.vib-dropdown-item .vib-dd-check { margin-left: auto; color: var(--c-primary); font-size: 0.8rem; }
.vib-dropdown-item--danger { color: var(--c-danger); }
.vib-dropdown-item--danger:hover,
.vib-dropdown-item--danger:focus-visible { background: var(--c-danger-50); color: var(--c-danger); }

.vib-dropdown-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    margin-bottom: var(--sp-1);
    border-bottom: 1px solid var(--c-line);
    color: var(--c-ink);
    line-height: 1.3;
}
.vib-dropdown-header-label { font-size: var(--fs-300); color: var(--c-ink-muted); font-weight: 600; }
.vib-dropdown-header strong { overflow-wrap: anywhere; }

/* Keep the account menu reachable on small screens (compact: icon only).
   The legacy responsive layer hides .logout/.languages below 767px. */
@media (max-width: 767px) {
    .languages.vib-dropdown,
    .logout.vib-dropdown { display: inline-block !important; }
    .vib-dropdown-btn { max-width: none; padding: 0 var(--sp-2); }
    .vib-dropdown-btn .vib-dd-label { display: none; }
}

/* ---------------------------------------------------------------------
   11. Mobile navigation toggle (hamburger)
   Progressive enhancement: hidden on desktop, reveals the docks menu on
   small screens. Driven by a tiny script that toggles body.vib-nav-open.
   ------------------------------------------------------------------- */
.vib-nav-toggle {
    display: none;
    position: relative;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: var(--shadow-xs);
    transition: background-color var(--dur) var(--ease);
}
.vib-nav-toggle:hover { background: var(--c-surface-2); }
/* Custom classes (preserved on the Font Awesome SVG) so icon swapping is
   robust against FA renaming fa-times -> fa-xmark. */
.vib-nav-toggle .vib-ico-close { display: none; }
body.vib-nav-open .vib-nav-toggle .vib-ico-open { display: none; }
body.vib-nav-open .vib-nav-toggle .vib-ico-close { display: inline-block; }

/* ---------------------------------------------------------------------
   12. Login page — clean centered card on a soft hero
   ------------------------------------------------------------------- */
body.loginbg {
    min-height: 100vh;
    position: relative;
    margin: 0;
}
/* Readability overlay over the background image */
body.loginbg::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg,
                rgba(15, 42, 71, 0.55), rgba(22, 104, 173, 0.35));
    z-index: 0;
}

/* The login wrapper is the single, full-viewport centerer (overrides the
   legacy flex helper) so the card can never exceed the viewport width. */
.logincontent {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--sp-5) !important;
    box-sizing: border-box;
}
.logincontent .box,
.logincontent .inner { min-width: 0; max-width: 100%; box-sizing: border-box; }
/* The legacy skin draws a square box-shadow on the outer .box while the
   rounded corners live on the .inner, so the shadow's square corners peek
   out past the radius (visible as dark/brown nibs on a flat background).
   The .inner already carries its own --shadow-lg. */
.logincontent .row .box {
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-lg);
}
.logincontent .row {
    width: 100%;
    max-width: 420px;
    min-width: 0;
    /* Vertical auto margins center the card in the space above the
       brands banner, which sits at the bottom as a footer. */
    margin: auto;
    box-sizing: border-box;
}
.logincontent .box .inner {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
}

/* Language switcher in the card's top-right corner */
.logincontent .login-lang {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    display: flex;
    gap: 6px;
}
.logincontent .login-lang a {
    display: block;
    line-height: 0;
    border-radius: 3px;
    opacity: 0.45;
    transition: opacity var(--dur) var(--ease);
}
.logincontent .login-lang a img {
    display: block;
    width: 22px;
    height: auto;
    border-radius: 3px;
}
.logincontent .login-lang a:hover { opacity: 1; }
.logincontent .login-lang a.active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--c-primary);
}

/* Application logo above the title */
.logincontent .login-logo {
    display: block;
    max-height: 64px;
    max-width: 65%;
    width: auto;
    height: auto;
    margin: var(--sp-3) auto var(--sp-4);
}

/* The (often empty) error/message container must not push the form down
   (legacy .boxcontent carries 20px padding and margin). */
.logincontent .boxcontent {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
}
.logincontent .boxcontent .alert,
.logincontent .boxcontent .gelukt { margin: 0 0 var(--sp-3) !important; }
.logincontent form.login-form { margin-top: var(--sp-3); }

/* Form fields with a visible label and icon addons (input groups).
   The width/padding overrides undo the legacy `label { width: 30% }`. */
.logincontent .form-group { margin-bottom: var(--sp-3); }
.logincontent .form-label {
    display: block;
    width: 100% !important;
    margin: 0 0 6px;
    padding: 0 !important;
    font-size: var(--fs-400);
    font-weight: 600;
    color: var(--c-ink);
    text-align: left;
}
.logincontent .input-group {
    display: flex;
    align-items: stretch;
}
.logincontent .input-group .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex: none;
    padding: 0;
    background: var(--c-surface-2);
    border: 1px solid var(--c-line-strong);
    border-radius: 0;
    color: var(--c-ink-muted);
}
.logincontent .input-group .input-group-text:first-child {
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.logincontent .input-group input {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
    border-radius: 0;
}
.logincontent .input-group input:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.logincontent .input-group button.input-group-text {
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
}
.logincontent .input-group button.input-group-text:hover { color: var(--c-ink); }

/* Submit button icon + loading state */
.logincontent .login-submit .btn-icon { margin-right: 6px; }
.logincontent .login-submit .btn-spinner {
    display: none;
    margin-left: 8px;
}
.logincontent .login-submit.is-loading {
    opacity: 0.75;
    pointer-events: none;
}
.logincontent .login-submit.is-loading .btn-spinner { display: inline-block; }
.logincontent .login-submit.is-loading .btn-icon { display: none; }
.logincontent .box .inner .title {
    font-size: clamp(0.78rem, 0.55rem + 1vw, 0.92rem) !important;
    font-weight: 700;
    line-height: 1.3 !important;
    color: var(--c-ink) !important;
    border-bottom: none !important;
    background: none !important;
    margin: 0 0 var(--sp-3);
    padding: 0 !important;
    height: auto !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.logincontent .box .inner .title i { color: var(--c-primary) !important; }
.logincontent form { padding: 0 !important; }
.logincontent input[type="text"],
.logincontent input[type="password"],
.logincontent input[type="email"] {
    width: 100% !important;
    margin-bottom: var(--sp-3);
}
.logincontent .btn { width: 100%; }
.logincontent .forgot {
    margin-top: var(--sp-4);
    padding: var(--sp-4) 0 0;
    background: transparent;
    border-top: 1px solid var(--c-line);
    text-align: center;
    font-size: var(--fs-400);
    color: var(--c-ink-soft);
}
.logincontent .forgot a { color: var(--c-primary); font-weight: 600; }
.logincontent .forgot a:hover { color: var(--c-primary-700); text-decoration: underline; }

/* Brands banner below the login card, same glass-card look but wider */
.logincontent .login-brands {
    width: 100%;
    max-width: 760px;
    margin-top: var(--sp-4);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-3);
    box-sizing: border-box;
}
.logincontent .login-brands img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------
   12a. App shell — fixed left sidebar layout (logged-in pages)
   The existing <header> becomes the sidebar (logo on top, navigation in
   the middle, language/cart/user controls at the bottom). The primary
   "docks" menu is relocated into .app-sidebar-nav by a small script and
   re-synced after every AJAX navigation, so this stays functional.
   ------------------------------------------------------------------- */
:root { --sidebar-w: 252px; --topbar-h: 60px; }

.app-shell {
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    /* Override the legacy `.container { height: 100% }` so the shell grows
       with content and the sticky footer reaches the bottom. */
    height: auto !important;
    min-height: 100vh;
}

/* --- The sidebar (the <header> element): logo + navigation --- */
.app-shell > header {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    padding: var(--sp-4) 0 0;                 /* no side padding -> items span full width */
    background: var(--c-surface);
    background-image: none !important;       /* override novatexant header bg */
    border-right: 1px solid var(--c-line);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    z-index: 50;
    min-height: 0 !important;
    height: auto !important;
    transition: transform 0.25s var(--ease);
}
.app-shell > header.header-vib { min-height: 0 !important; height: auto !important; }

.app-shell > header .units-row {
    display: block;
    flex: none;
    margin: 0 0 var(--sp-3);
    padding: 0 var(--sp-3);
}
.app-shell > header .unit-20.logo {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}
.app-shell > header .unit-20.logo .logo_image { display: inline-block !important; width: auto !important; }
.app-shell > header .unit-20.logo img { max-width: 100%; height: auto; padding: 0 !important; }

/* Reset the generic `nav { position:fixed }` rule (meant for the legacy
   secondary menu) so our sidebar nav flows under the logo. */
.app-sidebar-nav {
    position: static !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
    z-index: auto !important;
    background: transparent !important;
    flex: 1 1 auto;
    min-height: 0;
}

/* --- Navigation items inside the sidebar --- */
.app-sidebar-nav .docks {
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    margin: 0 !important;   /* reset generic `nav { margin-left:30px }` */
    padding: 0 !important;  /* reset responsive `.docks { padding:0 24px }` */
}
.app-sidebar-nav .iconMenu { max-width: none !important; width: auto !important; background: transparent !important; }
.app-sidebar-nav ul { background: transparent !important; }
.app-sidebar-nav .iconMenu li.dock {
    border-top: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    margin: 0 !important;
    padding: 12px 24px !important;          /* indent; hover bg still spans full width */
    min-height: var(--tap);
    border-radius: 0;
    border-bottom: 1px dotted var(--c-line-strong) !important;   /* dotted divider per item */
    text-transform: none !important;
    font-size: var(--fs-300) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--c-ink-soft) !important;
    text-align: left;
}
.app-sidebar-nav .iconMenu li.dock:last-child { border-bottom: 0 !important; }
.app-sidebar-nav .iconMenu li.dock:hover {
    background: var(--c-primary-50) !important;
    color: var(--c-primary-700) !important;
}
.app-sidebar-nav .iconMenu li.dock.active,
.app-sidebar-nav .iconMenu li.dock.selected {
    background: var(--c-primary) !important;
    color: #fff !important;
}
.app-sidebar-nav .iconMenu li.dock.right,
.app-sidebar-nav .iconMenu li.nohover { display: none !important; }

/* Icon + label alignment */
.app-sidebar-nav .iconMenu li.dock .dock-icon {
    flex: none;
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
}
.app-sidebar-nav .iconMenu li.dock.active .dock-icon,
.app-sidebar-nav .iconMenu li.dock.selected .dock-icon { color: #fff; }
.app-sidebar-nav .iconMenu li.dock .dock-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* --- Collapsed icon rail (desktop only) --- */
:root { --sidebar-w-collapsed: 76px; }
@media (min-width: 1025px) {
    body.sidebar-collapsed .app-shell > header {
        width: var(--sidebar-w-collapsed);
        padding-left: 0;
        padding-right: 0;
        align-items: stretch;
    }
    body.sidebar-collapsed .app-shell > .app-main { margin-left: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .app-shell .app-main .navholder nav { left: var(--sidebar-w-collapsed) !important; }
    body.sidebar-collapsed .app-shell > header .units-row { padding: var(--sp-2); }
    body.sidebar-collapsed .app-sidebar-nav .iconMenu li.dock {
        justify-content: center;
        gap: 0;
        padding: var(--sp-3) 0 !important;
    }
    body.sidebar-collapsed .app-sidebar-nav .iconMenu li.dock .dock-label { display: none; }
    body.sidebar-collapsed .app-sidebar-nav .iconMenu li.dock .dock-icon { width: auto; font-size: 1.15rem; }
}

/* --- Main content column --- */
.app-shell > .app-main {
    margin-left: var(--sidebar-w);
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
}
/* Sticky footer: content grows to fill, footer sits at the bottom */
.app-shell > .app-main .holder { flex: 1 0 auto; }
.app-shell > .app-main .site-footer { margin-top: auto; }
.app-shell > .app-main .holder,
.app-shell > .app-main .content { max-width: none; width: auto; }

/* Let content use the full available width (was capped at 1300px and
   centred, which left gaps next to the sidebar). */
.app-shell .app-main .n_content_holder {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Tight horizontal margins: no side gutter, cards run edge-to-edge and the
   only left/right whitespace is the 10px inside the card (see .boxcontent). */
.app-shell .app-main .holder { padding: 0; }
/* 10px gap around every card (reliable container padding instead of a margin
   on .boxcontent, which is inline-block/floated and overflows with a margin) */
.app-shell .app-main .content { padding: 0 10px 10px; }
/* The JS adds .full-width (margin-left:30px) / .semi-width (margin-left:320px)
   to .content — left over from the old layout. Remove that left margin. */
.app-shell .app-main .content.full-width,
.app-shell .app-main .content.semi-width { margin-left: 0 !important; }

/* Tighter, consistent card padding. The legacy boxcontent used
   "0 20px 20px" + a 20px bottom margin, which (stacked on the content
   gutter) left far too much space left/right and at the bottom. */
.app-shell .app-main .content .boxcontent {
    padding: 10px;
    margin-top: 10px;   /* gap between stacked cards (the row margin is gone after unwrap) */
}
.app-shell .app-main .content .boxcontent > h1:first-child,
.app-shell .app-main .content .boxcontent > h3:first-child { margin-top: 0; }

/* Page-title header (e.g. "<h1><i class="fa-briefcase"></i> Employees</h1>")
   becomes a clean header row with the icon in a soft accent square. Works
   whether the h1 sits directly in .boxcontent or nested (cart in a <form>,
   promotions in a .left column). */
.app-main .content .boxcontent h1 {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-700);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0 0 var(--sp-4);
}
/* Full-width title gets an underline rule; nested ones don't (would look
   lopsided next to side-by-side action buttons). */
.app-main .content .boxcontent > h1 {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-line);
}
/* Hide the icon in page-title H1's (any layout: .boxcontent or .content-header) */
.app-main .content h1 > i,
.app-main .content h1 > svg { display: none !important; }

/* Legacy secondary submenu (.navholder): it uses the same fixed `nav`
   rule, so push it to the right of the sidebar on desktop and let it flow
   normally on small screens (where the sidebar is off-canvas). */
.app-shell .app-main .navholder nav { left: var(--sidebar-w) !important; }
@media (max-width: 1024px) {
    .app-shell .app-main .navholder nav {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        margin: 0 0 var(--sp-4) !important;
    }
    .app-shell .app-main .content.semi-width { margin-left: 0 !important; }
}

/* --- Top bar: menu button (mobile) + title + actions on the right --- */
.app-topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--topbar-h);
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    top: 0;
    z-index: 30;
}
.app-topbar-title { font-weight: 700; color: var(--c-ink); }

/* Controls grouped on the right */
.app-topbar-actions {
    width: auto !important;
    float: none !important;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.app-topbar-actions .header-left { float: none !important; padding: 0 !important; font-size: var(--fs-300); color: var(--c-ink-soft); }
.app-topbar-actions .header-right {
    float: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.app-topbar-actions .header-right .grayCol { float: none !important; width: auto; margin: 0; }
.app-topbar-actions .cartHeader a {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 40px; padding: 0 var(--sp-3);
    border: 1px solid var(--c-line); border-radius: var(--radius-pill);
    color: var(--c-ink);
}
.app-topbar-actions .cartHeader a:hover { background: var(--c-surface-2); }

/* Debtor context (impersonation): Languages / Assortments chips + name badge */
.app-topbar-actions .header-left {
    float: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.header-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    color: var(--c-ink);
    font-size: var(--fs-300);
    white-space: nowrap;
    max-width: 240px;
}
.header-chip > i { flex: none; color: var(--c-primary); font-size: 0.9rem; }
.header-chip-label { color: var(--c-ink-muted); font-weight: 700; }
.header-chip-label::after { content: ":"; }
.header-chip-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-topbar-actions .header-debtor {
    float: none !important;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: 0 var(--sp-2) 0 var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: var(--fs-400);
    font-weight: 600;
    white-space: nowrap;
}
.app-topbar-actions .header-debtor > i.fa-user { flex: none; color: var(--c-primary); }
.app-topbar-actions .header-debtor a {
    color: var(--c-ink);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-topbar-actions .header-debtor a:hover { color: var(--c-primary); }
.app-topbar-actions .header-debtor span[role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--c-danger);
    flex: none;
    transition: background-color var(--dur) var(--ease);
}
.app-topbar-actions .header-debtor span[role="button"]:hover { background: var(--c-danger-50); }

/* --- Header search: articles / debtors / orders ---
   Selectors carry the .app-topbar prefix to outweigh both the generic
   input[type="search"] form rules (section 6. Forms) and the table-search
   rules under ".app-main input[type=search]" (which also carry !important
   padding and give inputs z-index: 2 — hence the z-index: 3 icon). */
.header-search { position: relative; flex: 1 1 320px; max-width: 520px; min-width: 140px; }
.app-topbar .header-search .header-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--c-ink-muted); pointer-events: none;
    font-size: var(--fs-300);
    z-index: 3;
}
.app-topbar .header-search .header-search-input {
    width: 100%; height: 32px; min-height: 32px; margin: 0;
    padding: 0 var(--sp-3) 0 32px !important;
    border: 1px solid var(--c-line); border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    font-family: var(--font-sans); font-size: var(--fs-300); color: var(--c-ink);
}
.app-topbar .header-search .header-search-input::placeholder { color: var(--c-ink-muted); }
.app-topbar .header-search .header-search-input:focus {
    outline: none; border-color: var(--c-primary);
    background: var(--c-surface);
    box-shadow: 0 0 0 3px var(--c-primary-50);
}
.header-search-results {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: max(100%, 380px);
    max-height: min(60vh, 480px); overflow-y: auto;
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(31, 41, 51, .14);
    z-index: 60;
}
.header-search-group {
    position: sticky; top: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-300); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-ink-muted);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
}
.header-search-group i { margin-right: 4px; }
.header-search-item {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-ink); text-decoration: none;
    border-bottom: 1px solid var(--c-line);
}
.header-search-text {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.header-search-thumb {
    width: 36px; height: 36px; flex: none;
    object-fit: contain;
    border: 1px solid var(--c-line); border-radius: var(--radius-sm);
    background: var(--c-surface);
}
.header-search-thumb--empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--c-ink-muted);
    background: var(--c-surface-2);
}
.header-search-item:last-child { border-bottom: 0; }
.header-search-item:hover,
.header-search-item.is-active { background: var(--c-primary-50); }
.header-search-primary { font-weight: 600; font-size: var(--fs-400); }
.header-search-secondary { font-size: var(--fs-300); color: var(--c-ink-soft); }
.header-search-empty { padding: var(--sp-3); font-size: var(--fs-300); color: var(--c-ink-muted); }

/* Compact these on smaller screens */
@media (max-width: 1100px) {
    .app-topbar-actions .header-chip-label { display: none; }
}
@media (max-width: 820px) {
    .app-topbar-actions .header-left { display: none; }
    .app-topbar-actions .header-debtor a { max-width: 110px; }
    .header-search { flex: 1 1 auto; }
}

/* The top-bar menu button only opens the off-canvas drawer on small
   screens; on desktop the in-sidebar toggle handles collapsing. */
.app-topbar .vib-nav-toggle { display: none; }

/* Hamburger inside the sidebar, above the first menu item */
.vib-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-3);
    width: auto;
    margin: 0 var(--sp-3) var(--sp-3);
    padding: var(--sp-2) 12px;
    min-height: var(--tap);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-ink-soft);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-400);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vib-sidebar-toggle:hover { background: var(--c-surface-2); color: var(--c-ink); }
.vib-sidebar-toggle .dock-icon { flex: none; width: 1.25rem; text-align: center; font-size: 1.15rem; }
.vib-sidebar-toggle .dock-label { display: none; }
@media (min-width: 1025px) {
    body.sidebar-collapsed .vib-sidebar-toggle { justify-content: center; gap: 0; padding: var(--sp-3) 0; }
    body.sidebar-collapsed .vib-sidebar-toggle .dock-label { display: none; }
}

/* Close button inside the sidebar (mobile only) */
.app-sidebar-close { display: none; }

/* Backdrop behind the off-canvas sidebar */
.app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    opacity: 0;
    visibility: hidden;
    z-index: 45;
    transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}

/* --- Off-canvas behaviour on tablets/phones --- */
@media (max-width: 1024px) {
    .app-shell > header {
        width: min(82vw, 300px);
        transform: translateX(-100%);
    }
    body.vib-nav-open .app-shell > header { transform: translateX(0); }
    .app-shell > .app-main { margin-left: 0; }
    .app-topbar .vib-nav-toggle { display: inline-flex; }
    body.vib-nav-open .app-sidebar-backdrop { opacity: 1; visibility: visible; }
}

/* On the smallest screens, drop the user label/title to save room */
@media (max-width: 560px) {
    .app-topbar-title { display: none; }
    .app-topbar-actions .vib-dd-label { display: none; }
    .app-topbar-actions .cartHeader .cartAmount { display: none; }
}

/* ---------------------------------------------------------------------
   12b. Site footer
   ------------------------------------------------------------------- */
.site-footer {
    margin-top: var(--sp-6);
    padding: var(--sp-5) var(--sp-4);
    border-top: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-ink-muted);
    text-align: center;
}
.site-footer .inner { max-width: 1300px; margin: 0 auto; }

/* ---------------------------------------------------------------------
   12c. Page-level refinements (rows, tabs, tiles, buttons)
   ------------------------------------------------------------------- */

/* Cleaner row spacing; neutralise the empty notification box (it was
   showing as a stray shadowed card above the content). */
.app-shell .app-main .content .row { margin-bottom: 10px; }
/* Contain floated children (e.g. management tile columns) so stacked rows
   don't overlap each other. */
.app-shell .app-main .content .row::after { content: ""; display: block; clear: both; }
.app-shell .app-main .n_content_holder .box .inner {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.app-shell .app-main .n_content_holder .row { margin-bottom: 0; }
.app-shell .app-main .n_content_holder #col_mess_holder:empty { display: none; }

/* Tabs: left-aligned, larger, modern */
.app-main .tabs {
    height: auto !important;
    margin: 10px 0 var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* Action buttons moved onto the tab bar, top-right */
.app-main .tabs .tab-actions {
    float: none !important;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
}
.app-main .tabs .tab-actions .btn,
.app-main .tabs .tab-actions .btn3,
.app-main .tabs .tab-actions .btn4 { margin: 0 !important; }
/* Remove the extra top gap the tab panel/content otherwise adds */
.app-main .tabs + .boxcontent,
.app-main #framework_tabcontent { margin-top: 0; padding-top: 0; }
.app-main #framework_tabcontent > .row:first-child,
.app-main #framework_tabcontent .box:first-child { margin-top: 0; }
.app-main .tabs { float: none !important; text-align: left !important; }
.app-main .tabs ul {
    float: none !important;
    display: flex !important;
    justify-content: flex-start !important;   /* force left alignment */
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 !important;
    padding: 0;
    height: auto !important;   /* was fixed (34/50px) -> wrapped rows overlapped content */
}
.app-main .tabs ul li { height: auto !important; line-height: normal; margin-right: 0 !important; }
.app-main .tabs ul li div,
.app-main .tabs ul li .selected {
    min-width: 0 !important;
    height: auto;
    line-height: 1.2;
    padding: 14px 22px;
    font-size: 15px;
    text-align: left;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--c-surface-2);
    color: var(--c-ink-soft);
}
.app-main .tabs ul li div:hover { background: var(--c-primary-50); color: var(--c-primary-700); }
.app-main .tabs ul li div.selected,
.app-main .tabs ul li .selected { background: var(--c-primary); color: #fff; }

/* Category / brand tiles: clean white blocks with rounded corners */
.app-main .opbrengstgroep,
.app-main .opbrengstgroep-disabled {
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-3);
    text-align: center;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.app-main .opbrengstgroep:hover {
    opacity: 1;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-primary-100);
}
.app-main .opbrengstgroep-afbeelding {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.app-main .opbrengstgroep-omschrijving {
    border-top: 0;
    background: transparent;
    color: var(--c-ink);
    font-size: 14px;
    font-weight: 600;
    padding: var(--sp-3) 0 var(--sp-1);
    min-height: 0;
}
/* Tiles fill the width and stack on phones */
@media (max-width: 768px) {
    .app-main .opbrengstgroep,
    .app-main .opbrengstgroep-disabled {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 var(--sp-4) 0 !important;
    }
    .app-main .opbrengstgroep-afbeelding { width: 100% !important; height: auto !important; }
}

/* Tile grid: keeps every row equal regardless of tile height (replaces floats) */
.app-main .tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    align-items: start;
    margin-top: var(--sp-2);
}
.app-main .tile-grid .opbrengstgroep,
.app-main .tile-grid .opbrengstgroep-disabled {
    float: none;
    min-width: 0;
    margin: 0;
}
@media (max-width: 768px) {
    .app-main .tile-grid { grid-template-columns: 1fr; }
}

/* Management dashboard tiles: soft cards with a clear primary hover */
.app-main .tile {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-xs) !important;
    text-align: center;
    height: 100%;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.app-main .tile a { color: var(--c-ink); font-weight: 600; }
.app-main .tile i,
.app-main .tile svg { color: var(--c-primary); }
.app-main .tile:hover {
    background: var(--c-surface) !important;
    border-color: var(--c-primary-100) !important;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md) !important;
}
/* The inline page style turns the icon/text white on hover, which is
   invisible on the new white hover background — keep them coloured. */
.app-main .tile:hover a,
.app-main .tile a:hover { color: var(--c-ink) !important; }
.app-main .tile:hover i,
.app-main .tile:hover svg,
.app-main .tile a:hover i,
.app-main .tile a:hover svg { color: var(--c-primary-600) !important; }
@media (max-width: 768px) {
    .app-main .row [class^="col"] { width: 100% !important; margin-right: 0 !important; }
}

/* Keep long user names from overflowing the account dropdown button */
.app-topbar-actions .logout .vib-dd-label { max-width: 150px; }

/* Mobile: form/action buttons become full width and stack (but not the
   small inline buttons inside data tables) */
@media (max-width: 768px) {
    /* The .right/.left header columns hold action buttons — let them and
       their buttons go full width so the buttons can stretch. */
    .app-main .boxcontent > .left,
    .app-main .boxcontent > .right { float: none !important; width: 100% !important; }

    .app-main .boxcontent .btn,
    .app-main .boxcontent .btn2,
    .app-main .boxcontent .btn3,
    .app-main .boxcontent .btn4,
    .app-main .line .btn,
    .app-main form .btn {
        display: flex !important;          /* flex keeps the label centred */
        align-items: center;
        justify-content: center;
        width: 100% !important;
        margin: 0 0 var(--sp-2) !important;
        box-sizing: border-box;
    }
    .app-main .table .btn,
    .app-main .fixed-table-container .btn,
    .app-main td .btn {
        display: inline-flex !important;
        width: auto !important;
        margin: 0 !important;
    }
}

/* The legacy grid only collapses .half/.threequarter on small screens and
   forgets .third/.twothird, so two-column pages (e.g. product details) never
   stack. Make all grid fractions full width and stack on tablet/phone. */
@media (max-width: 820px) {
    .app-main .half,
    .app-main .third,
    .app-main .quarter,
    .app-main .twothird,
    .app-main .threequarter {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: var(--sp-4) !important;
        float: none !important;
    }
}

/* ---------------------------------------------------------------------
   12d. More component refinements (Chosen, pagination, boxes, tiles)
   ------------------------------------------------------------------- */

/* Plain content boxes (no grid fraction / no unit-* width) fill the width */
.app-main .content .row > .box:not(.half):not(.third):not(.twothird):not(.quarter):not(.threequarter):not([class*="unit-"]) {
    width: 100%;
    float: none;
}

/* Chosen select replacement — match the modern inputs */
.app-main .chosen-container { font-family: var(--font-sans); }
.app-main .chosen-container-single .chosen-single {
    height: var(--tap);
    line-height: 1.5;
    padding: 9px var(--sp-3);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    box-shadow: none;
    color: var(--c-ink);
}
.app-main .chosen-container-active .chosen-single {
    border-color: var(--c-line-strong);
    box-shadow: var(--shadow-md);
}
/* When open, connect the control to the drop with a soft, neutral border */
.app-main .chosen-container.chosen-with-drop .chosen-single {
    border-color: var(--c-line-strong);
    border-bottom-color: transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    box-shadow: var(--shadow-md);
}
.app-main .chosen-container .chosen-drop {
    border-color: var(--c-line-strong);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
}
/* Search box inside the drop: thin border, no sprite/magnify, clean focus */
.app-main .chosen-container-single .chosen-search { padding: var(--sp-2); }
.app-main .chosen-container-single .chosen-search input[type="text"] {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
}
.app-main .chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: var(--c-primary);
    box-shadow: var(--ring);
    outline: none;
}
/* Vertically centre the caret in the taller single control */
.app-main .chosen-container-single .chosen-single div {
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
.app-main .chosen-container-single .chosen-single div b {
    height: 16px;
    background-position: 0 0;
}
/* Vertically centre the deselect '×' in the taller single control (the
   original chosen.css positions it at top: 6px for the short control) */
.app-main .chosen-container-single .chosen-single abbr {
    top: 50%;
    transform: translateY(-50%);
}
.app-main .chosen-container .chosen-results li.highlighted {
    background: var(--c-primary);
    color: #fff;
}
.app-main .chosen-container-multi .chosen-choices {
    min-height: var(--tap);
    padding: 4px var(--sp-2);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
}
.app-main .chosen-container-multi .chosen-choices li.search-choice {
    border-radius: var(--radius-pill);
    border-color: var(--c-line-strong);
    background: var(--c-primary-50);
    color: var(--c-primary-700);
}

/* Pagination */
.app-main .pagination { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 0; margin-left: 10px !important; }

/* Search inputs: give the placeholder/text some left breathing room */
.app-main input[type="search"],
.app-main .fixed-table-toolbar .search input,
.app-main input.search-input,
.app-main .cms_table_search_box,
.app-main .search input[type="text"] { padding-left: 14px !important; }
/* Gap between the search field and the table */
.app-main .cms_table_search_box_container { margin-bottom: 10px; }
.app-main .cms_table_search_box { margin-bottom: 10px; }
.app-main .pagination .page-link {
    margin-right: 0 !important;
    min-width: 34px;
    text-align: center;
    padding: 7px 11px !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--c-surface) !important;
    color: var(--c-ink-soft) !important;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.app-main .pagination .page-link:hover {
    background: var(--c-primary-50) !important;
    color: var(--c-primary-700) !important;
}
.app-main .pagination .active .page-link {
    border-color: var(--c-primary) !important;
    background: var(--c-primary) !important;
    color: #fff !important;
}
/* Prev/next chevron icons (fa-chevron-left/right, from tables.js) sit inside a
   .page-link. kube's `.pagination span` rule paints a dark (#0f0f0f) box with a
   white glyph on ANY span in pagination, and it must not inflate the button.
   Strip the dark box, use a dark-blue glyph, and keep the icon from adding
   height so prev/next match the numbered links. */
.pagination .page-link [class*="fa-chevron"],
.pagination a [class*="fa-chevron"] {
    background: transparent !important;
    color: var(--c-primary) !important;     /* dark blue, not white */
    font-size: var(--fs-300);
    min-height: 0 !important;
    padding: 0 !important;
    display: inline !important;
    line-height: 1 !important;
}

/* Pagination active/current page: primary blue with white text, replacing the
   legacy kube black (#0f0f0f) background. Not scoped to .app-main so it also
   covers the public/webshop pagination. !important beats the bundled kube
   rules (wrapped.css) which load before this file. */
.pagination li.active a,
.pagination li.active a:hover,
.pagination li.active > span,
.pagination .page-item.active .page-link,
.pagination .active .page-link {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
}
/* Hover/focus: soft blue tint instead of the old black fill. */
.pagination li a:hover,
.pagination li a:focus,
.pagination .page-link:hover,
.pagination .page-link:focus {
    background-color: var(--c-primary-50) !important;
    color: var(--c-primary-700) !important;
}
/* Equal height for the page-link boxes (numbers, prev/next, active). Direct
   child (>) so the chevron icon spans INSIDE links are not force-sized — that
   was making the prev/next buttons taller than the numbered ones. */
.pagination li > a,
.pagination li > span,
.pagination .page-link {
    box-sizing: border-box;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Framework cms_table pagination -> match the bootstrap-table .page-link look
   (used on /management/mailgun/, employees, products; debtors uses bootstrap). */
.app-main .cms_table_page_nav_container { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.app-main .cms_table_page_nav_holder { display: flex; flex-wrap: wrap; gap: 6px; }
.app-main .cms_table_page_nav {
    float: none !important;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink-soft);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.app-main .cms_table_page_nav:hover { background: var(--c-primary-50); color: var(--c-primary-700); }
.app-main .cms_table_page_nav_selected {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
}

/* Mailgun-style layout: wrap the bare content in a card */
.app-main .content-inner .content-holder {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4);
    margin-top: 10px;
}
.app-main .content-inner .content-header h1 { margin-top: 0; }
.app-main .content-inner .text-outer { margin-top: 10px; }

/* Promotions folder/file tiles -> clean white blocks like the webshop */
.app-main .dir,
.app-main .file {
    float: left;
    margin: 0 var(--sp-4) var(--sp-4) 0;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-3);
    text-align: center;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.app-main .dir:hover,
.app-main .file:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-primary-100);
}
.app-main .dir a { color: var(--c-ink); font-weight: 600; }
.app-main .dir i { color: var(--c-primary); }
.app-main .file .file-image { display: block; border-radius: var(--radius-sm); }
@media (max-width: 768px) {
    .app-main .dir,
    .app-main .file { width: 100% !important; margin-right: 0 !important; float: none !important; }
}

/* Tabs must never be width-capped (no inherited 1300px max-width) */
.app-main .content .tabs,
.app-main .content .tabs ul { max-width: none !important; }

/* Homepage: minimise the gap between the main card and the image column,
   and align the image column's top with the main card. The width stretches
   the column to the row's right edge (kube's unit-80 is 79.4%, leaving
   20.6%, minus the 10px gutter), so only the content's 10px right padding
   remains as visible margin. */
.app-main .content .units-row > .unit-20 {
    margin-top: 10px;
}
@media (min-width: 768px) {
    .app-main .content .units-row > .unit-20 {
        margin-left: 10px !important;
        width: calc(20.6% - 10px);
    }
}
/* Mobile: stacked full-width, flush with the main card (10px content padding) */
@media (max-width: 767px) {
    .app-main .content .units-row > .unit-20 {
        margin-left: 0 !important;
        width: 100%;
    }
}

/* Homepage: lists in the description sit flush left with hanging markers.
   The first list gets checkmark bullets; any following lists keep round
   bullets on the same position. */
.app-main .home-description ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.app-main .home-description ul li {
    position: relative;
    padding-left: 1.7em;
}
.app-main .home-description ul li::before {
    content: "\f111";
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2em;
    text-align: center;
    transform: scale(0.55);
}
.app-main .home-description ul:first-of-type li::before {
    content: "\f00c";
    color: var(--c-primary);
    transform: none;
}

/* Nova Texant homepage: there the checklist is the LAST list, not the
   first — swap which list gets the checkmarks. (With a single list,
   first-of-type equals last-of-type and the checkmark rule below wins.) */
.app-main .home-description--novatexant ul:first-of-type li::before {
    content: "\f111";
    color: inherit;
    transform: scale(0.55);
}
.app-main .home-description--novatexant ul:last-of-type li::before {
    content: "\f00c";
    color: var(--c-primary);
    transform: none;
}

/* Homepage: the three shortcut blocks (Webshop / Order history / Promotion)
   become real cards */
.app-main .topDiv,
.app-main .middleDiv,
.app-main .bottomDiv {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 10px;
    margin-bottom: 10px !important;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.app-main .topDiv:hover,
.app-main .middleDiv:hover,
.app-main .bottomDiv:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.app-main .topDiv h2,
.app-main .middleDiv h2,
.app-main .bottomDiv h2 {
    margin: 0 0 8px !important;
    font-size: var(--fs-400);
    color: var(--c-ink);
}
.app-main .topDiv img,
.app-main .middleDiv img,
.app-main .bottomDiv img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* Table thumbnails: rounded with a subtle border */
.app-main .cms_table tbody td img,
.app-main .table tbody td img {
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-line);
    max-width: 100%;
    height: auto;
}

/* Product image cells (Afbeelding column / product details). The visible
   frame is the .artikel-afbeelding wrapper, which carries a square grey
   border + white background — so round the wrapper itself and clip its
   contents, and drop the inner <img>'s own border to avoid doubling up. */
.app-main .artikel-afbeelding {
    display: inline-block;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.app-main .artikel-afbeelding:hover {
    border-color: var(--c-ink-muted);
    box-shadow: var(--shadow-sm);
}
.app-main .artikel-afbeelding {
    max-width: 100%;
}
.app-main .artikel-afbeelding img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Space below the table's "add" button so it doesn't touch the table */
.app-main .cms_table_add { margin-bottom: 10px; }
/* Legacy pushed the plus icon 10px down and forced it white; align it with
   the flex button layout and let it follow the button's text colour. */
.app-main .cms_table_add i {
    margin-top: 0 !important;
    color: inherit !important;
}

/* Zebra rows for label/value lists (e.g. debtor details): each pair of
   li's forms one row; alternate rows get the light brand tint (beige on
   VIB). Desktop: label 40% / value 60% without gutters so the stripe runs
   uninterrupted; mobile keeps the stacked full-width layout. */
.app-main .list-zebra {
    /* kube's .blocks-2 draagt een negatieve linkermarge die normaal door de
       3%-marges van de li's wordt gecompenseerd; hier zijn beide nul. */
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.app-main .list-zebra > li {
    margin: 0 !important;
    padding: 8px 12px;
    box-sizing: border-box;
}
.app-main .list-zebra > li:nth-child(4n+1),
.app-main .list-zebra > li:nth-child(4n+2) {
    background: var(--c-primary-50);
}
@media (min-width: 768px) {
    .app-main .list-zebra > li:nth-child(odd) { width: 40%; clear: left; }
    .app-main .list-zebra > li:nth-child(even) { width: 60%; }
}

/* Status badge inside a page heading (e.g. order details) */
.app-main h1 .status-badge {
    vertical-align: middle;
    margin-left: 10px;
}

/* Status badge (e.g. mailgun OK / ERROR column) */
.app-main .status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-300);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.app-main .status-badge--ok { background: var(--c-success-50); color: var(--c-success); }
.app-main .status-badge--error { background: var(--c-danger-50); color: var(--c-danger); }
.app-main .status-badge--neutral { background: var(--c-surface-2); color: var(--c-ink-soft); }

/* Web Login toggle (debtor details -> contacts table): a clickable pill in
   the status-badge visual language, with a status dot. The dot is a ::before
   so the JS toggle (which replaces the button text) leaves it intact. */
.app-main .button-web-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 104px;
    min-height: 28px;
    padding: 3px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    color: var(--c-ink-soft);
    font-family: inherit;
    font-size: var(--fs-300);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.app-main .button-web-login::before {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.app-main .button-web-login:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}
.app-main .button-web-login-active {
    background: var(--c-success-50);
    color: var(--c-success);
}
.app-main .button-web-login-active:hover {
    border-color: var(--c-success);
    box-shadow: var(--shadow-xs);
}
.app-main .button-web-login-inactive {
    background: var(--c-danger-50);
    color: var(--c-danger);
}
.app-main .button-web-login-inactive:hover {
    border-color: var(--c-danger);
    box-shadow: var(--shadow-xs);
}

/* Round icon buttons next to the toggle (mail account details / login as).
   Font Awesome nests an <svg> inside, so the circle sits on the outer tag. */
.app-main .icon-circle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    border: 1px solid var(--c-line-strong);
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-ink-soft);
    font-size: var(--fs-300);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.app-main .icon-circle-button:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-50);
    color: var(--c-primary);
}
.app-main .icon-circle-button:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Card-header action buttons (.btn-container.right used a -50px hack that now
   crosses the title underline) -> anchor to the card's top-right corner. */
.app-main .content .boxcontent { position: relative; }
.app-main .content .boxcontent .btn-container.right {
    position: absolute;
    top: 10px;
    right: 10px;
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
}
.app-main .content .boxcontent .btn-container.right .btn,
.app-main .content .boxcontent .btn-container.right .btn3,
.app-main .content .boxcontent .btn-container.right .btn4 { margin: 0 !important; }

/* On phones the absolutely-positioned Back button overlaps long titles, so
   let it flow normally (below the title, which precedes it in the DOM). */
@media (max-width: 767px) {
    .app-main .content .boxcontent .btn-container.right {
        position: static;
        margin: var(--sp-3) 0 0 !important;
        justify-content: flex-start;
    }
}

/* On desktop, long titles must wrap before they run underneath the
   absolutely-positioned button bar: reserve right padding on the heading,
   scaled by the number of buttons in the bar. */
@media (min-width: 768px) {
    .app-main .content .boxcontent:has(> .btn-container.right) > h1 {
        padding-right: 190px;
        box-sizing: border-box;
    }
    .app-main .content .boxcontent:has(> .btn-container.right > :nth-child(2)) > h1 {
        padding-right: 360px;
    }
    .app-main .content .boxcontent:has(> .btn-container.right > :nth-child(3)) > h1 {
        padding-right: 530px;
    }
}

/* ---------------------------------------------------------------------
   13. Responsive — mobile-first refinements
   Breakpoints cover 320/375/390/414/768/820/1024 common widths.
   The desktop layout is preserved; these rules only adjust small screens.
   ------------------------------------------------------------------- */
@media (max-width: 820px) {
    /* Reveal the hamburger and turn the docks bar into a dropdown panel
       (covers phones and iPad portrait; landscape/desktop keep the bar). */
    .vib-nav-toggle { display: inline-flex; }

    .docks .iconMenu {
        display: none;
        padding: var(--sp-2);
    }
    body.vib-nav-open .docks .iconMenu { display: block; }

    .docks .iconMenu li.dock {
        float: none !important;
        display: block;
        width: 100%;
        text-align: left;
        margin: 2px 0;
        min-height: var(--tap);
        line-height: 1.4;
    }
    .docks .iconMenu li.dock.right { display: none; }

    /* Comfortable tap targets and spacing on tablets/phones */
    .app-main .content .boxcontent { border-radius: var(--radius); }

    /* Tables become horizontally scrollable rather than overflowing */
    .table-container,
    .fixed-table-body,
    .bootstrap-table .fixed-table-container {
        overflow-x: auto;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* Full-width, easy-to-use form controls on touch devices */
    input[type="text"], input[type="password"], input[type="file"],
    input[type="number"], input[type="tel"], input[type="email"],
    input[type="search"], textarea, select {
        width: 100% !important;
    }
    label { width: 100% !important; }

    /* Buttons span the width so they are easy to tap (except inline nav) */
    form .btn, form input[type="submit"].btn { width: 100%; }

    /* Avoid sideways scrolling of the whole page */
    .container, .holder, .content { max-width: 100%; }
}

@media (max-width: 480px) {
    :root { --sp-6: 1.5rem; --sp-7: 2rem; }

    .app-main .content .boxcontent { border-radius: var(--radius); }
    .logincontent { max-width: 100%; }

    /* Stack header utility items with breathing room */
    .header-right .grayCol { margin-bottom: var(--sp-1); }
}

@media (max-width: 380px) {
    /* Smallest phones (iPhone SE / 320–375): tighten without clipping */
    .docks .iconMenu li.dock { font-size: var(--fs-400); }
}

/* ---------------------------------------------------------------------
   14. Reduced motion — respect user preference
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .btn2:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   15. Statistics page (/management/stats/)
   The legacy .statistics/.row wrappers (and the white .row background that
   showed behind the cards) were removed from the template; each section is
   now a plain .boxcontent card. The rules below port the styling that used
   to be scoped under .statistics, and lay the cards out in clean rows.
   ------------------------------------------------------------------- */
/* Three KPI tiles side by side with a consistent 10px gutter, charts 2-up */
.stats-page .stats-tiles,
.stats-page .stats-charts { display: flex; gap: 10px; align-items: stretch; }
.stats-page .stats-tiles > .boxcontent,
.stats-page .stats-charts > .boxcontent { flex: 1 1 0; min-width: 0; }

/* KPI number */
.stats-page .blue-tiled-number {
    font-size: 28px;
    font-weight: 700;
    margin-top: 10px;
    color: #005c91;
}

/* Date-range picker line height */
.stats-page #reportrange span,
.stats-page #reportrange i { line-height: 38px; }

/* Drilldown day/week/month toggle -> clean segmented control.
   Inactive: light surface + muted text. Active: solid primary blue + white
   text, so the selected period is unmistakable. (.active a is targeted
   explicitly because the visible text lives in the <a>, which otherwise
   inherits the global anchor colour.) */
.stats-page .drilldown { margin: 0 10px; float: left; }
.stats-page .drilldown ul { margin: 0; padding: 0; list-style: none; display: flex; }
.stats-page .drilldown .drilldown-btn {
    background-color: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-right: none;
}
.stats-page .drilldown .drilldown-btn a {
    display: block;
    padding: 0 16px;
    line-height: 38px;
    color: var(--c-ink-soft);
    font-weight: 600;
    text-decoration: none;
}
.stats-page .drilldown .drilldown-btn:hover { background-color: var(--c-surface-2); }
.stats-page .drilldown .drilldown-btn:hover a { color: var(--c-ink); }
/* !important: wrapped.css bevat een globale `.active { background: #fff
   !important }` die de actieve periode anders wit maakt (wit-op-wit). */
.stats-page .drilldown .drilldown-btn.active,
.stats-page .drilldown .drilldown-btn.active:hover {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
}
/* Actieve periode (Dag/Week/Maand): tekst nadrukkelijk wit, ook bij hover
   (de algemene hoverregel maakte hem donker op de donkere achtergrond). */
.stats-page .drilldown .drilldown-btn.active a,
.stats-page .drilldown .drilldown-btn.active:hover a { color: #fff !important; }
.stats-page .drilldown .drilldown-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.stats-page .drilldown .drilldown-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-right: 1px solid var(--c-line-strong);
}

/* Daterangepicker: de globale `.active { background:#fff !important }` uit
   wrapped.css maakt ook de geselecteerde dag en het gekozen bereik wit
   (wit-op-wit). Herstel de eigen selectiekleur van de picker. De popup
   rendert op body, dus niet onder .stats-page. */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--c-primary) !important;
    color: #fff !important;
}
.daterangepicker .ranges li.active {
    background-color: var(--c-primary) !important;
    color: #fff !important;
}

/* Filter selects keep their legacy widths */
.stats-page #employee_chosen { width: 230px !important; }
.stats-page #debtor_chosen { width: 300px !important; }

/* Overview / visitor tables: comfortable padding + zebra striping */
.stats-page #total-overview-table th,
.stats-page #total-overview-table td,
.stats-page #visitor-table th,
.stats-page #visitor-table td { padding: 0.5em 0.75em; }
.stats-page #total-overview-table tr:nth-child(2n),
.stats-page #visitor-table tr:nth-child(2n) { background-color: var(--c-surface-2); }
.stats-page #total-overview-table tr:hover,
.stats-page #visitor-table tr:hover { background-color: var(--c-primary-50); }

@media (max-width: 768px) {
    /* Stack tiles and charts on narrow screens */
    .stats-page .stats-tiles,
    .stats-page .stats-charts { flex-direction: column; }
}

/* ---------------------------------------------------------------------
   16. Clickable affordances (cursor) for icon-only controls
   The "Actief" boolean toggle and the "Send details" envelope on
   /employees/ are clickable icons; give them a pointer cursor. (Font
   Awesome renders <i> as <svg>, so cover both.)
   ------------------------------------------------------------------- */
.app-main .tiptip.editable,
.app-main .tiptip.editable i,
.app-main .tiptip.editable svg,
.app-main .button-mail-accountdetails,
.app-main .button-mail-accountdetails svg { cursor: pointer; }

/* ---------------------------------------------------------------------
   17. Free-shipping notification -> clear green "success" alert
   The legacy style (cart.css) was pale yellow with light-grey text, easy to
   miss. Make it a positive green callout with readable text and a green
   truck icon (the icon carries an inline grey colour, hence !important).
   ------------------------------------------------------------------- */
.cart-free-shipping-notification {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    padding: var(--sp-4) var(--sp-5);
    background-color: var(--c-success-50);
    border: 1px solid var(--c-success);
    border-left-width: 5px;
    border-radius: var(--radius-sm);
    color: #1c6b39;                 /* dark green, high contrast on the tint */
    font-size: var(--fs-400);
    font-weight: 600;
    line-height: 1.45;
}
/* Hidden via class (not jQuery .hide()) so the flex layout is preserved when
   it is shown again after a cart +/- change. */
.cart-free-shipping-notification.cart-free-shipping-hidden { display: none !important; }

/* ---------------------------------------------------------------------
   18. Header cart "attention" pulse
   When the visitor is NOT on a /cart/ page, the header cart blinks every few
   seconds to draw the eye back to it. The .cart-attention class is toggled
   by script (see footer.php) based on the current path. Two quick blinks at
   the start of a 5s cycle reads as "occasional", not a constant flash.
   ------------------------------------------------------------------- */
@keyframes vib-cart-attention {
    0%, 18%, 100% { transform: scale(1); color: inherit; }
    4%            { transform: scale(1.3); color: var(--c-primary); }
    8%            { transform: scale(1); }
    12%           { transform: scale(1.3); color: var(--c-primary); }
}
.cartHeader.cart-attention a i,
.cartHeader.cart-attention a svg {
    transform-origin: center;
    animation: vib-cart-attention 5s ease-in-out infinite;
    will-change: transform;
}
.cart-free-shipping-notification i {
    color: var(--c-success) !important;
    font-size: 1.25em;
    flex-shrink: 0;
}
.cart-free-shipping-notification strong { color: #14502b; }

/* ---------------------------------------------------------------------
   19. Product quantity stepper (Afbeelding / cart amount column)
   Replaces the old minus.png / plus.png images with a modern segmented
   stepper: rounded pill, two icon buttons flanking the amount. The legacy
   cart.css colours these via !important, hence the !important overrides.
   ------------------------------------------------------------------- */
.app-main .cart-stepper {
    display: inline-flex;
    flex: 0 0 auto;            /* never stretch to fill the column */
    align-self: flex-start;
    width: auto;
    align-items: center;
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
    line-height: 1;
    box-sizing: border-box;
}
.app-main .cart-stepper .cart-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--c-ink-soft) !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.app-main .cart-stepper .cart-stepper-btn:hover {
    background: var(--c-primary-50) !important;
    color: var(--c-primary) !important;
}
.app-main .cart-stepper .cart-stepper-btn:active { background: var(--c-primary-100) !important; }
.app-main .cart-stepper .cart-stepper-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring) inset !important;
}
.app-main .cart-stepper .cart-stepper-value {
    min-width: 34px;
    padding: 0 var(--sp-1);
    text-align: center;
    font-weight: 700;
    color: var(--c-ink);
    border-left: 1px solid var(--c-line);
    border-right: 1px solid var(--c-line);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

/* Editable amount input variant (cart + product details page): strip the
   default input chrome so it sits flush inside the stepper pill. */
.app-main .cart-stepper input.cart-stepper-input {
    width: 64px;
    min-height: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 var(--sp-1) !important;
    text-align: center;
    font-weight: 700;
    color: var(--c-ink);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--c-line);
    border-right: 1px solid var(--c-line);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}
.app-main .cart-stepper input.cart-stepper-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--c-line);
}
/* The stepper buttons already cover stepping; hide the native number spinners. */
.app-main .cart-stepper input.cart-stepper-input::-webkit-outer-spin-button,
.app-main .cart-stepper input.cart-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.app-main .cart-stepper input.cart-stepper-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Row that pairs the stepper with the unit label on the details page */
.app-main .product-amount-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.app-main .product-amount-row .product-amount-unit { color: var(--c-ink-soft); }

/* ---------------------------------------------------------------------
   20. Product details page (/products/details/id:*/)
   Two-column top row as a flex layout with a tight 10px gutter (replaces the
   floated kube grid so columns top-align and the gap is consistent), cards
   stack on tablet/mobile, info rows get separators, and the add-to-cart
   button is pushed well clear of the +/- stepper so touch users (iPad) can
   tap the stepper without hitting submit.
   ------------------------------------------------------------------- */
/* Establish a block formatting context so the first row's top margin is
   contained (shows as a real gap) instead of collapsing through the wrapper. */
.product-details-page { display: flow-root; }

/* Breathing room under each product image (large + small). */
.product-details-page .artikel-afbeelding { margin-bottom: var(--sp-4); }
.product-details-page .artikel-afbeelding img { display: block; }

/* Product image slideshow: one large image at a time, arrows over the image
   and dots below it (both only rendered when there is more than one image). */
.product-details-page .product-slider { position: relative; }
.product-details-page .product-slider .product-slide { display: none; }
.product-details-page .product-slider .product-slide.is-active { display: block; }
.product-details-page .product-slider .artikel-afbeelding {
    display: block;
    margin-bottom: 0;
}
.product-details-page .product-slider .artikel-afbeelding img {
    width: 100%;
    height: auto;
}
.product-details-page .product-slider-prev,
.product-details-page .product-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-ink-soft);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--shadow-xs);
    transition: color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.product-details-page .product-slider-prev { left: 10px; }
.product-details-page .product-slider-next { right: 10px; }
.product-details-page .product-slider-prev:hover,
.product-details-page .product-slider-next:hover {
    color: var(--c-primary);
    border-color: var(--c-ink-muted);
    box-shadow: var(--shadow-sm);
}
.product-details-page .product-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: var(--sp-3) 0 0;
}
.product-details-page .product-slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-line);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.product-details-page .product-slider-dot:hover { background: var(--c-ink-muted); }
.product-details-page .product-slider-dot.is-active { background: var(--c-primary); }

/* The info column's inner .left wrapper is floated (kube) so it shrinks to
   content; make it full width so the info table can span the whole card. */
.product-details-page .twothird > .left {
    float: none;
    width: 100%;
}

/* Product info table (label / value pairs) — clean and borderless */
.product-details-page .product-info-table {
    width: 100%;
    border-collapse: collapse;
}
.product-details-page .product-info-table th,
.product-details-page .product-info-table td {
    padding: var(--sp-2) 12px;
    text-align: left;
    vertical-align: top;
    font-size: var(--fs-400);
}
.product-details-page .product-info-table th {
    width: 42%;
    padding-right: var(--sp-3);
    font-weight: 600;
    color: var(--c-ink-soft);
}
.product-details-page .product-info-table td { color: var(--c-ink); }

/* EAN code left, barcode right (scannable from screen) */
.product-details-page .ean-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.product-details-page .ean-barcode { margin: 0; }
.product-details-page .ean-barcode svg {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
}
/* Zebra rows in the brand tint (beige on VIB), like the debtor details */
.product-details-page .product-info-table tr:nth-child(odd) {
    background: var(--c-primary-50);
}

/* Data tables (Properties / Images / Synonyms): full width with zebra rows,
   and hide the noisy single-page "1 - 4 from 4 |" footer + nav arrows. */
.product-details-page .cms_table { width: 100%; }
.product-details-page .cms_table tbody tr:nth-child(2n) { background-color: var(--c-surface-2); }
.product-details-page .cms_table tbody tr:hover { background-color: var(--c-primary-50); }
.product-details-page .cms_table_info,
.product-details-page .cms_table_page_nav_container { display: none !important; }

/* The two-column top row as flex with a tight 10px gutter. After the JS unwrap
   the single-card rows (Properties/Images/Synonyms) are no longer .row, so the
   only remaining .row is this two-column one. */
.product-details-page .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 0;
}
.product-details-page .row > .twothird,
.product-details-page .row > .third {
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
}
.product-details-page .row > .twothird { flex: 2 1 0; }
.product-details-page .row > .third { flex: 1 1 0; }
/* Safety for the brief pre-unwrap moment: a single-card row stays full width. */
.product-details-page .row > .box:only-child,
.product-details-page .row > .boxcontent:only-child { flex: 1 1 100%; }

/* Narrower quantity input on the details page (single-/double-digit amounts).
   Needs !important: the kube grid sets `.third input[type="text"] { width:100%
   !important }`, which otherwise stretches it to fill the stepper. */
.product-details-page .cart-stepper input.cart-stepper-input {
    width: 34px !important;
    flex: 0 0 auto;
}

/* Add-to-cart button: a tight 10px gap on desktop, but more breathing room on
   touch devices (tablet/phone) so the stepper can't be mis-tapped as submit. */
.product-details-page .product-amount-row { margin-bottom: var(--sp-2); }
/* NB: needs higher specificity than the global mobile rule
   `.app-main .boxcontent .btn { margin: 0 0 var(--sp-2) !important }` (0,0,3,0),
   which otherwise resets the top margin to 0 on small screens. */
.app-main .product-details-page input[name="add_to_shopping_cart"] {
    margin-top: 10px !important;
}

@media (max-width: 820px) {
    /* Tablet portrait & phones: stack the two columns full-width. */
    .product-details-page .row { flex-direction: column; }
    .product-details-page .row > .twothird,
    .product-details-page .row > .third { flex: 1 1 auto; width: 100% !important; }

    /* More space above the submit button on touch screens. */
    .app-main .product-details-page input[name="add_to_shopping_cart"] {
        margin-top: var(--sp-6) !important;
    }
}

/* =====================================================================
   21. State-of-the-art polish
   ===================================================================== */

/* --- 21.1 Extended design tokens (merge into :root) --- */
:root {
    /* Signature gradients */
    --grad-primary:      linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-700) 100%);
    --grad-primary-soft: linear-gradient(135deg, var(--c-primary-50), var(--c-surface));
    --grad-sidebar:      linear-gradient(180deg, #ffffff 0%, var(--c-surface-2) 100%);

    /* Glass surfaces (used behind @supports for backdrop-filter) */
    --glass-bg:     color-mix(in srgb, var(--c-surface) 78%, transparent);
    --glass-border: color-mix(in srgb, var(--c-surface) 60%, transparent);
    --glass-blur:   saturate(180%) blur(12px);

    /* Coloured elevation for primary/interactive surfaces */
    --shadow-primary: 0 10px 26px -10px color-mix(in srgb, var(--c-primary) 55%, transparent);
    --shadow-primary-sm: 0 4px 12px -4px color-mix(in srgb, var(--c-primary) 45%, transparent);

    /* Thin, modern scrollbars */
    --scroll-thumb: color-mix(in srgb, var(--c-ink-muted) 55%, transparent);
}

/* color-mix has wide support, but keep solid fallbacks for older engines so
   nothing renders transparent. @supports gates the modern value. */
@supports not (color: color-mix(in srgb, red, blue)) {
    :root {
        --glass-bg: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(255, 255, 255, 0.6);
        --shadow-primary: 0 10px 26px -10px rgba(22, 104, 173, 0.5);
        --shadow-primary-sm: 0 4px 12px -4px rgba(22, 104, 173, 0.4);
        --scroll-thumb: rgba(123, 135, 148, 0.55);
    }
}

/* --- 21.2 Modern typography niceties --- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, .boxcontent { text-wrap: pretty; }
/* Lining, tabular figures keep data-dense tables and KPIs aligned */
.table, .cms_table, .stats-tile, .stats-value, .cartAmount, td, th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- 21.3 Thin scrollbars (sidebar + scroll containers) --- */
.app-shell > header,
.table-container,
.bootstrap-table .fixed-table-body,
.vib-dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
.app-shell > header::-webkit-scrollbar { width: 8px; height: 8px; }
.app-shell > header::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: var(--radius-pill);
}
.app-shell > header::-webkit-scrollbar-track { background: transparent; }

/* --- 21.4 Glass sticky top bar --- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .app-shell .app-main .app-topbar {
        background: var(--glass-bg);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        border-bottom-color: var(--glass-border);
    }
}
/* A hairline shadow only once the bar is doing its sticky job feels premium;
   it is always-on here (cheap) and reads as a crisp separation from content. */
.app-shell .app-main .app-topbar { box-shadow: 0 1px 0 var(--c-line), var(--shadow-xs); }

/* --- 21.5 Refined sidebar + gradient active state --- */
.app-shell > header { background-image: var(--grad-sidebar) !important; }

/* Hover: a subtle accent rail slides in via inset shadow (no layout shift) */
.app-sidebar-nav .iconMenu li.dock {
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease) !important;
}
.app-sidebar-nav .iconMenu li.dock:hover {
    box-shadow: inset 3px 0 0 var(--c-primary);
}
/* Active item: gradient fill + soft coloured glow for a clear, premium state */
.app-sidebar-nav .iconMenu li.dock.active,
.app-sidebar-nav .iconMenu li.dock.selected {
    background-image: var(--grad-primary) !important;
    box-shadow: var(--shadow-primary-sm);
}
.app-sidebar-nav .iconMenu li.dock.active:hover,
.app-sidebar-nav .iconMenu li.dock.selected:hover {
    box-shadow: var(--shadow-primary-sm), inset 3px 0 0 rgba(255, 255, 255, 0.6);
}

/* --- 21.6 Gradient buttons with focus glow + micro-interactions --- */
.btn { background-image: var(--grad-primary); }
.btn:hover {
    background-image: var(--grad-primary);
    box-shadow: var(--shadow-primary);
}
.btn2 { background-image: linear-gradient(135deg, var(--c-success) 0%, #277f42 100%); }
/* Pressed feedback (sharper, snappier than hover) */
.btn:active, .btn2:active, .btn3:active { transform: translateY(0) scale(0.99); }

/* --- 21.7 Card hover micro-interactions --- */
.app-main .content .boxcontent {
    transition: box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}
/* Content cards: gentle elevation on hover (no lift — they can be tall). */
.app-main .content .boxcontent:hover {
    border-color: var(--c-line-strong);
    box-shadow: var(--shadow-md);
}
/* KPI / stat tiles are compact + glanceable, so a tiny lift feels right. */
.stats-page .stats-tile {
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stats-page .stats-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* --- 21.8 Modern modals --- */
/* SweetAlert2 */
.swal2-popup {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: var(--font-sans) !important;
}
.swal2-title { color: var(--c-ink) !important; font-weight: 700 !important; }
.swal2-html-container { color: var(--c-ink-soft) !important; }
.swal2-styled.swal2-confirm {
    border-radius: var(--radius-sm) !important;
    background-image: var(--grad-primary) !important;
    box-shadow: var(--shadow-xs) !important;
    font-weight: 700 !important;
}
.swal2-styled.swal2-confirm:focus-visible { box-shadow: var(--ring) !important; }
.swal2-styled.swal2-cancel {
    border-radius: var(--radius-sm) !important;
    background: var(--c-surface) !important;
    color: var(--c-ink) !important;
    border: 1px solid var(--c-line-strong) !important;
    font-weight: 700 !important;
}
/* jQuery UI dialog (confirm_nav) */
.ui-dialog {
    border: 1px solid var(--c-line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
    font-family: var(--font-sans) !important;
}
.ui-dialog .ui-dialog-titlebar {
    background: var(--c-surface-2) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    color: var(--c-ink) !important;
    font-weight: 700 !important;
}
/* Ruime padding rond de dialoogtekst: met de krappe jQuery UI-standaard
   raakt de onderste regel de lijn van de knoppenbalk. */
.ui-dialog .ui-dialog-content {
    padding: var(--sp-4) !important;
    line-height: 1.5 !important;
}
.ui-dialog .ui-dialog-buttonpane button {
    border-radius: var(--radius-sm) !important;
    background-image: var(--grad-primary) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700 !important;
}
.ui-widget-overlay {
    background: rgba(16, 24, 40, 0.45) !important;
    opacity: 1 !important;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ui-widget-overlay { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
}

/* --- 21.9 Enhanced login hero --- */
/* Layer a soft radial "mesh" of brand light over the existing gradient
   overlay for depth. Sits above the photo, below the card. */
body.loginbg::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38rem 38rem at 12% 8%,  rgba(137, 198, 255, 0.35), transparent 60%),
        radial-gradient(34rem 34rem at 88% 92%, rgba(22, 104, 173, 0.30), transparent 60%);
    animation: vib-hero-float 18s var(--ease) infinite alternate;
}
@keyframes vib-hero-float {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to   { transform: translate3d(1.5%, 1%, 0) scale(1.05); }
}
/* Crisper card edge + slightly deeper glass now the backdrop is richer */
.logincontent .box .inner {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

/* --- 21.10 Reduced-motion: neutralise the new hover/idle motion --- */
@media (prefers-reduced-motion: reduce) {
    .stats-page .stats-tile:hover,
    .btn:active, .btn2:active, .btn3:active { transform: none; }
    body.loginbg::after { animation: none; }
}

/* =====================================================================
   22. Flash messages (col_mess) — modern alert look
   The legacy .col_mess (white text on a solid fill, text-shadow, dead
   icon-remove-sign close icon) is replaced with the same tokenised alert
   styling as .alert. Markup is generated by framework_col_mess.js, so this
   is CSS-only and keeps the close behaviour intact.
   ===================================================================== */
#col_mess_holder:not(:empty) { margin-top: var(--sp-3); }
.col_mess {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    width: auto;
    padding: var(--sp-3) var(--sp-4) !important;
    margin-bottom: var(--sp-4) !important;
    border: 1px solid var(--c-line);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    text-shadow: none !important;
    font-size: var(--fs-400);
    line-height: 1.45;
}
.col_mess_notification {
    background: var(--c-success-50) !important;
    border-color: var(--c-success) !important;
    color: #1f6b39 !important;
}
.col_mess_error {
    background: var(--c-danger-50) !important;
    border-color: var(--c-danger) !important;
    color: #9b2a2a !important;
}
/* Close affordance: push to the end and render a reliable "×" (the legacy
   icon-remove-sign glyph doesn't exist in the Font Awesome 6 SVG build). */
.col_mess .col_mess_close {
    float: none !important;
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.col_mess .col_mess_close:hover { opacity: 1; background: rgba(16, 24, 40, 0.08); }
.col_mess .col_mess_close i { display: none; }
.col_mess .col_mess_close::before { content: "\00d7"; font-size: 18px; line-height: 1; }

/* =====================================================================
   23. Responsive cart table (/cart/)
   Two layers: a horizontal-scroll wrapper for medium widths, and a
   stacked label/value card layout on phones. All scoped to #cart so the
   other shared .cms_table tables are untouched.
   ===================================================================== */
.cart-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The legacy bundle dims all tfoot text to rgba(0,0,0,0.4), which is too
   faint for the cart totals. Restore readable labels/amounts and make the
   grand total (last row) black. Applies on desktop and mobile. */
#cart tfoot td,
#cart tfoot th { color: var(--c-ink-soft); }
#cart tfoot tr:last-child td { color: var(--c-ink); font-weight: 700; }

/* Row hover in brand tint (legacy hardcodes a grey-blue with !important) */
.cms_table tbody tr:hover {
    background-color: var(--c-primary-50) !important;
}

/* Same legacy dimming affects the order totals (and any other cms_table
   tfoot): restore readable text and a black grand-total row. */
.app-main .cms_table tfoot td,
.app-main .cms_table tfoot th { color: var(--c-ink-soft); }
.app-main .cms_table tfoot tr:last-child td { color: var(--c-ink); }

/* Order details: the order meta data (date / ordered by / status) as a
   compact block on the left — bold label with the value below it, matching
   the address blocks underneath. */
.app-main .order-meta {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
}
.app-main .order-meta > li {
    margin: 0;
    color: var(--c-ink-soft);
}
.app-main .order-meta > li:nth-child(odd) {
    margin-top: var(--sp-3);
    font-weight: 700;
    color: var(--c-ink);
}
.app-main .order-meta > li:first-child { margin-top: 0; }

@media (max-width: 720px) {
    .cart-table-responsive { overflow-x: visible; }

    /* Hide the column header row; labels are reproduced per-cell via
       data-label. */
    #cart thead {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap; border: 0;
    }
    #cart, #cart tbody, #cart tfoot, #cart tr, #cart td { display: block; width: auto; }
    #cart { border: 0; }

    /* Category divider becomes a soft section label */
    #cart tr.cart-category-row td {
        background: var(--c-surface-2) !important;
        border: 0;
        border-radius: var(--radius-sm);
        margin: var(--sp-4) 0 var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
        font-weight: 700;
    }

    /* Each product row -> a self-contained card */
    #cart tbody tr:not(.cart-category-row) {
        position: relative;
        background: var(--c-surface);
        border: 1px solid var(--c-line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-xs);
        padding: var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-3);
    }

    /* Product name/number: full-width card title (leaves room for the × ) */
    #cart tbody tr:not(.cart-category-row) .cart-cell-title {
        padding: 0 var(--sp-6) var(--sp-2) 0;
        margin-bottom: var(--sp-2);
        border-bottom: 1px solid var(--c-line);
        font-weight: 700;
        color: var(--c-ink);
        text-align: left !important;
    }

    /* Label / value pairs */
    #cart tbody tr:not(.cart-category-row) td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: var(--sp-1) 0;
        border: 0;
        text-align: right !important;
    }
    #cart tbody tr:not(.cart-category-row) td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--fs-300);
        font-weight: 600;
        color: var(--c-ink-soft);
        text-align: left;
    }
    #cart tbody tr:not(.cart-category-row) td[data-label] .cart-stepper { margin-left: auto; }

    /* Remove control -> floating × in the card corner */
    #cart tbody tr:not(.cart-category-row) .cart-cell-remove {
        position: absolute;
        top: var(--sp-2);
        right: var(--sp-2);
        padding: 0;
        border: 0;
    }
    #cart tbody tr:not(.cart-category-row) .cart-cell-remove a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        border-radius: var(--radius-sm);
        transition: background-color var(--dur) var(--ease);
    }
    #cart tbody tr:not(.cart-category-row) .cart-cell-remove a:hover { background: var(--c-danger-50); }

    /* Footer totals: label left, amount right; drop the empty trailing cell */
    #cart tfoot tr {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: var(--sp-1) 0;
    }
    #cart tfoot td { padding: 0; border: 0; text-align: right !important; }
    #cart tfoot td[colspan="6"] { text-align: left !important; color: var(--c-ink-soft); }
    #cart tfoot td:last-child:empty { display: none; }
    /* A clearer separation before the totals block */
    #cart tfoot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 2px solid var(--c-line); }
    #cart tfoot tr:last-child { font-weight: 700; color: var(--c-ink); }
}

/* =====================================================================
   24. Responsive address tables (/cart/step2/)
   Invoice / shipping / contact address pickers collapse into selectable
   cards on phones. Reuses the .cart-table-responsive scroll wrapper for
   medium widths. Scoped to .cart-address-table.
   ===================================================================== */
@media (max-width: 720px) {
    .cart-address-table thead {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap; border: 0;
    }
    .cart-address-table,
    .cart-address-table tbody,
    .cart-address-table tr,
    .cart-address-table td { display: block; width: auto; }
    .cart-address-table { border: 0; }

    /* Each address -> a selectable card */
    .cart-address-table tbody tr {
        position: relative;
        background: var(--c-surface);
        border: 1px solid var(--c-line);
        border-radius: var(--radius);
        box-shadow: var(--shadow-xs);
        padding: var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-3);
    }
    /* Highlight the chosen address */
    .cart-address-table tbody tr:has(input[type="radio"]:checked) {
        border-color: var(--c-primary);
        box-shadow: var(--shadow-primary-sm);
    }

    /* Radio selector pinned to the card's top-right corner */
    .cart-address-table .addr-cell-select {
        position: absolute;
        top: var(--sp-3);
        right: var(--sp-3);
        padding: 0;
        border: 0;
    }

    /* Name = card title */
    .cart-address-table .addr-cell-title {
        padding: 0 var(--sp-6) var(--sp-2) 0;
        margin-bottom: var(--sp-2);
        border-bottom: 1px solid var(--c-line);
        font-weight: 700;
        color: var(--c-ink);
        text-align: left !important;
    }
    /* Contact table has no detail rows: drop the title divider */
    .cart-address-table .addr-cell-title:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* Label / value pairs */
    .cart-address-table td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: var(--sp-1) 0;
        border: 0;
        text-align: right !important;
    }
    .cart-address-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--fs-300);
        font-weight: 600;
        color: var(--c-ink-soft);
        text-align: left;
    }
    /* Drop detail rows that have no value */
    .cart-address-table td[data-label]:empty { display: none; }
}

/* =====================================================================
   25. Cart overview / confirmation (/cart/step3/)
   The two address columns sit side by side as soft cards; they stack on
   small screens. The products table reuses the shared #cart styling.
   ===================================================================== */
/* Present the invoice/shipping addresses as light cards */
.cart-overview .invoice-address-data,
.cart-overview .shipping-address-data {
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    line-height: 1.6;
    color: var(--c-ink);
}

/* Both address columns are .half (48.4% + a 2.39% right gutter). The grid
   zeroes that gutter on :last-child, but the trailing .clear sibling means
   the shipping column is never :last-child — so two gutters push the total
   past 100% and the second column wraps. Drop the gutter here so they sit
   side by side again (mobile stacks them via the rule below). */
.cart-overview .left:has(.shipping-address-data) { margin-right: 0; }

@media (max-width: 720px) {
    /* Stack the two address columns full-width (precisely the address
       columns via :has(), so the Previous/Place-order .left buttons and
       other floated helpers are left alone). */
    .cart-overview .left:has(.invoice-address-data),
    .cart-overview .left:has(.shipping-address-data) {
        float: none !important;
        width: 100% !important;
        margin: 0 0 var(--sp-4) !important;
    }
}

/* Action/status icons (fa-2x): keep them big and stable across viewports.
   Font Awesome's .fa-2x uses font-size: 2em, which is relative to the parent
   cell — so the icon shrinks wherever responsive rules reduce table text on
   mobile. Pin to a fixed rem (root font-size is not scaled here) so edit /
   delete / show / exchange / status icons stay full size on every device.
   !important overrides FA's all.css, which loads after this file. */
.fa-2x {
    font-size: 1.75rem !important;
}
/* -------------------------------------------------------------------
   Language flags (tables, e.g. Management > Homepage)
   ------------------------------------------------------------------- */
.language-flag-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Mail template editor: available-tags reference box */
.app-main .mail-template-tags {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-primary-50);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}
.app-main .mail-template-tags p {
    margin: var(--sp-1) 0 var(--sp-2);
    color: var(--c-ink-soft);
    font-size: var(--fs-300);
}
.app-main .mail-template-tags ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.app-main .mail-template-tags li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: 2px 0;
}
.app-main .mail-template-tags code {
    flex: none;
    min-width: 110px;
    font-weight: 700;
    color: var(--c-primary-700);
}
.app-main textarea.mail-template-text {
    min-height: 360px;
    font-family: var(--font-mono, ui-monospace, monospace);
}

/* Mail template detail page: HTML preview + test mail form */
.app-main .mail-template-meta {
    margin-bottom: var(--sp-4);
}
.app-main .mail-template-preview {
    display: block;
    width: 100%;
    height: 640px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius);
    background: #eee;
    margin-bottom: var(--sp-4);
}
.app-main .mail-template-test {
    margin-bottom: var(--sp-4);
}
.app-main .mail-template-test .form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
.app-main .mail-template-test-controls {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    max-width: 480px;
}
.app-main .mail-template-test-controls input[type="email"] {
    flex: 1;
    min-width: 0;
}
.app-main .mail-template-test-controls .btn {
    flex: none;
}
.app-main .mail-template-test-note {
    margin: var(--sp-2) 0 0;
    color: var(--c-ink-muted);
    font-size: var(--fs-300);
}
/* Management password gate (/management/login/): compact centered card
   instead of a full-width form with the input glued to the left edge. */
.app-main .management-login {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--sp-6) 0;
}
.app-main .management-login .form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
.app-main .management-login-controls {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
}
.app-main .management-login-controls input[type="password"] {
    flex: 1;
    min-width: 0;
}
.app-main .management-login-controls .btn {
    flex: none;
}
/* Wachtwoordsterkte-indicator (/pages/password/ en /pages/change_password/):
   balk + label in de input-kolom (70%, zie forms.css), gevuld op basis van
   .level-0 t/m .level-4. Ook gescoped op .loginbg omdat change_password op
   de publieke layout (zonder .app-main) rendert. */
.app-main .password-strength, .loginbg .password-strength {
    width: 70%;
    box-sizing: border-box;
    padding: 8px 0;
}
.app-main .password-strength-bar, .loginbg .password-strength-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--c-line-strong, #e0e0e0);
    overflow: hidden;
}
.app-main .password-strength-fill, .loginbg .password-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width .25s ease, background-color .25s ease;
}
.app-main .password-strength-label, .loginbg .password-strength-label {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--fs-300);
    color: var(--c-ink-muted);
}
.app-main .password-strength.level-0 .password-strength-fill, .loginbg .password-strength.level-0 .password-strength-fill { width: 20%; background: var(--c-danger, #d9534f); }
.app-main .password-strength.level-1 .password-strength-fill, .loginbg .password-strength.level-1 .password-strength-fill { width: 40%; background: #e8833a; }
.app-main .password-strength.level-2 .password-strength-fill, .loginbg .password-strength.level-2 .password-strength-fill { width: 60%; background: #d4a72c; }
.app-main .password-strength.level-3 .password-strength-fill, .loginbg .password-strength.level-3 .password-strength-fill { width: 80%; background: #7bb662; }
.app-main .password-strength.level-4 .password-strength-fill, .loginbg .password-strength.level-4 .password-strength-fill { width: 100%; background: var(--c-success, #4f9d69); }
/* Header row on the detail page: title left, Back/Edit top-right */
.app-main .mail-template-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.app-main .mail-template-head h1 {
    margin-right: auto;
}
.app-main .mail-template-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex: none;
}

/* Config default shown grey in a table cell when the field itself is empty
   (e.g. mail template sender columns) */
.app-main .table-default-value {
    color: var(--c-ink-muted);
}

/* Config default hint under a cms form field (e.g. mail template sender).
   Inputs float right at 70% width; the note mirrors that so it lines up
   directly under its field. */
.app-main .line .form-field-default {
    float: right;
    clear: right;
    width: 70%;
    margin-top: 4px;
    color: var(--c-ink-muted);
    font-size: var(--fs-300);
}

/* Mailgun log details: zebra rows for the message metadata */
.app-main .mailgun-details {
    margin-bottom: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
}
.app-main .mailgun-details .form_row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: 10px 14px;
    margin: 0;
}
.app-main .mailgun-details .form_row:nth-child(odd) {
    background: var(--c-surface-2);
}
.app-main .mailgun-details .form_row label {
    flex: 0 0 160px;
    width: auto !important;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: var(--c-ink-soft);
}
.app-main .mailgun-details-value {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.app-main .mailgun-event-note {
    margin-top: 2px;
    font-size: var(--fs-300);
    color: var(--c-ink-muted);
}

/* -------------------------------------------------------------------
   VIB house style: warm brown + beige replaces the blue palette.
   Beige: Pantone 9183 C / 12-0000 TCX -> #e4d7c5
   Brown: Pantone 2468 U / 18-1232 TCX (Coconut Shell) -> #874e3c
   Scoped to body.app-vib so Novatexant keeps the blue theme.
   ------------------------------------------------------------------- */
body.app-vib {
    --c-primary:        #874e3c;
    --c-primary-600:    #75422f;
    --c-primary-700:    #63392a;
    --c-primary-soft:   #e4d7c5;
    --c-primary-50:     #f7f2ea;
    --c-primary-100:    #eee2d2;
    --ring: 0 0 0 3px rgba(135, 78, 60, 0.35);

    /* Warm neutrals: the app background is the brand beige, fills, borders
       and text tones move from grey-blue to warm brown-greys. */
    --c-bg:             #e4d7c5;
    --c-surface-2:      #f6efe4;
    --c-line:           #e6dccc;
    --c-line-strong:    #cfc0aa;
    --c-ink:            #2b231c;
    --c-ink-soft:       #5d5043;
    --c-ink-muted:      #8a7a67;

    /* Composite tokens are computed on :root with the blue palette, so they
       must be redeclared here to pick up the brown/beige values. */
    --grad-primary:      linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-700) 100%);
    --grad-primary-soft: linear-gradient(135deg, var(--c-primary-50), var(--c-surface));
    --grad-sidebar:      linear-gradient(180deg, #ffffff 0%, var(--c-surface-2) 100%);
    --shadow-primary:    0 10px 26px -10px color-mix(in srgb, var(--c-primary) 55%, transparent);
    --shadow-primary-sm: 0 4px 12px -4px color-mix(in srgb, var(--c-primary) 45%, transparent);
}

/* The <html> element paints --c-bg too, but tokens on <body> don't reach it */
html:has(body.app-vib) { background-color: #e4d7c5; }

/* Buttons that sit directly on the beige page background (the action
   buttons on the tab bar, e.g. the article list downloads) get a light
   keyline and a stronger shadow so they don't sink into it. */
body.app-vib .tabs .tab-actions .btn,
body.app-vib .tabs .tab-actions .btn2,
body.app-vib .tabs .tab-actions .btn3,
body.app-vib .tabs .tab-actions .btn4 {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Buttons follow the brown primary tokens; secondary/back buttons keep the
   neutral surface style. The grey .btn3 becomes brown as well. */
body.app-vib .btn3 {
    background-color: var(--c-primary) !important;
    background-image: var(--grad-primary) !important;
    color: #fff !important;
}
body.app-vib .btn3:hover {
    background-color: var(--c-primary-600) !important;
    background-image: var(--grad-primary) !important;
    color: #fff !important;
}

/* Links in the dark brand brown (legacy skin still colours them blue) */
body.app-vib a { color: var(--c-primary); }
body.app-vib a:hover { color: var(--c-primary-700); }

/* Daterangepicker: replace its hardcoded blues with the brand tokens
   (brown for VIB, blue for Novatexant). */
.daterangepicker td.in-range {
    background-color: var(--c-primary-50);
    color: var(--c-ink);
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--c-primary);
    color: #fff;
}
.daterangepicker .ranges li.active {
    background-color: var(--c-primary);
    color: #fff;
}

/* Login: plain beige background, no photo and no gradient overlays.
   The overlay layers (::before/::after) exist for readability over the
   Novatexant photo; on a flat beige they would only muddy the colour. */
body.app-vib.loginbg { background: var(--c-bg); }
body.app-vib.loginbg::before,
body.app-vib.loginbg::after { content: none; }

/* -------------------------------------------------------------------
   Chosen-dropdowns: de plugin-CSS kleurt de tekst bijna-wit (#eaeaea)
   en lichtgrijs, wat op het beige thema onleesbaar is; hier leesbaar
   gemaakt met de huisstijltokens.
   ------------------------------------------------------------------- */
.chosen-container,
.chosen-container-single .chosen-single,
.chosen-container-single .chosen-single span,
.chosen-container .chosen-results li {
    color: var(--c-ink) !important;
}
.chosen-container-single .chosen-single {
    background: var(--c-surface) !important;
    border-color: var(--c-line-strong) !important;
}
.chosen-container .chosen-search input[type="text"] {
    color: var(--c-ink) !important;
}
.chosen-container .chosen-results li.highlighted {
    background: var(--c-primary) !important;
    color: #fff !important;
}