/* =====================================================================
   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; }

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; }

/* 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); }

/* 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;
    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;
    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; }
.logincontent .row {
    width: 100%;
    max-width: 420px;
    min-width: 0;
    margin: 0 auto;
    box-sizing: border-box;
}
.logincontent .box .inner {
    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);
}
.logincontent .box .inner .title {
    font-size: clamp(0.85rem, 0.6rem + 1.4vw, 1.05rem) !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; }

/* ---------------------------------------------------------------------
   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); }

/* 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; }
}

/* 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;
}
.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. */
.app-main .content .units-row > .unit-20 {
    margin-left: 10px !important;
    margin-top: 10px;
}

/* 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; }

/* 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); }

/* 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;
    }
}

/* ---------------------------------------------------------------------
   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); }
.stats-page .drilldown .drilldown-btn.active {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}
.stats-page .drilldown .drilldown-btn.active a { color: #fff; }
.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);
}

/* 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 (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: 44px;
    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);
}

/* 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; }

/* 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) 0;
    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); }

/* 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;
}
.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 {
    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; }

@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;
}