/* =========================================================================
   modern.css — Restrained, professional SaaS design layer
   -------------------------------------------------------------------------
   Loaded AFTER wrapped.css (the LESS bundle) so it overrides globally.
   Lives in a subfolder so the wrap pipeline (which only scans the top level
   of _webblocks/css/) does NOT compile it — this lets us use modern CSS
   (custom properties, clamp(), grid, container queries) safely.

   Strategy: improve the SHARED shell + global components so every page
   benefits at once, without touching backend-coupled markup. Restrained:
   refined type, spacing, soft shadows, rounded corners, clear focus/hover.
   ========================================================================= */

/* Gradient-interpolation feature flag (per the modern CSS guide).
   Empty by default; only filled in where `linear-gradient(in oklab, …)` is
   supported, so the SAME gradient declaration stays valid in older browsers
   (which would otherwise treat `in oklab` as a syntax error). Always keep a
   non-empty gradient preamble before `var(--in-oklab)`. */
:root { --in-oklab: ; --in-oklch: ; }
@supports (background: linear-gradient(in oklab, red, blue)) {
    :root { --in-oklab: in oklab; --in-oklch: in oklch; }
}

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
    /* Brand — derived from the existing palette (blue #004B9A, orange #F7941E) */
    --c-brand:            #0b4f96;
    --c-brand-600:        #0a4684;
    --c-brand-700:        #083a6e;
    --c-brand-800:        #06294d;
    --c-brand-050:        #eaf2fb;

    --c-accent:           #f7941e;   /* primary CTA / highlight */
    --c-accent-600:       #e07d0a;
    --c-accent-300:       #fbc06b;

    /* Neutrals / ink */
    --c-ink:              #1f2933;
    --c-ink-soft:         #3e4c59;
    --c-muted:            #67727e;
    --c-faint:            #9aa5b1;

    /* Surfaces */
    --c-bg:               #f4f6f8;   /* app background */
    --c-surface:          #ffffff;   /* cards */
    --c-surface-2:        #f9fafb;   /* subtle zebra / headers */
    --c-border:           #e3e8ee;
    --c-border-strong:    #cbd2d9;

    /* Feedback */
    --c-success:          #2f9e44;
    --c-danger:           #c0392b;
    --c-warning:          #e67e22;
    --c-info:             var(--c-brand);

    /* Typography — Inter (variable) is the modern primary; Open Sans + the
       system stack are graceful fallbacks while the webfont loads or if it is
       blocked. */
    --font-sans: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-base:   14px;
    --lh-base:   1.55;
    --tracking-tight: -0.011em;   /* subtle optical tightening for Inter */

    /* Spacing scale (4px base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Radius */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* Shadows — soft, layered depth (cool brand-tinted ambient + crisp key) */
    --sh-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --sh-2: 0 2px 6px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .08);
    --sh-3: 0 8px 24px rgba(16, 24, 40, .12);
    --sh-4: 0 12px 28px rgba(8, 41, 77, .14), 0 4px 10px rgba(8, 41, 77, .10);
    --sh-brand: 0 6px 18px rgba(11, 79, 150, .28);
    --sh-accent: 0 6px 18px rgba(224, 125, 10, .30);

    /* Gradients (keep a plain preamble before var(--in-oklab) for old browsers) */
    --grad-brand:   linear-gradient(135deg var(--in-oklab), var(--c-brand) 0%, var(--c-brand-700) 100%);
    --grad-accent:  linear-gradient(135deg var(--in-oklab), var(--c-accent) 0%, var(--c-accent-600) 100%);
    --grad-hero:    linear-gradient(150deg var(--in-oklab), var(--c-brand) 0%, var(--c-brand-700) 48%, var(--c-brand-800) 100%);

    /* Glass surfaces (frosted) — used with backdrop-filter where supported */
    --glass-bg:     rgba(255, 255, 255, .72);
    --glass-border: rgba(255, 255, 255, .55);
    --glass-blur:   saturate(160%) blur(14px);

    /* Focus ring */
    --ring: 0 0 0 3px rgba(11, 79, 150, .35);

    /* Motion */
    --ease: cubic-bezier(.2, .6, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);   /* gentle overshoot for entrances */
    --dur:  .18s;
    --dur-2: .28s;

    /* Layout */
    --header-h: 56px;
    --sidenav-w: 300px;
}

/* -------------------------------------------------------------------------
   2. Base / reset niceties
   ------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}
html, body {
    /* Never allow horizontal scroll on small screens */
    max-width: 100%;
    overflow-x: hidden;
}
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Inter looks best with contextual alternates + tabular-ish defaults off */
    font-feature-settings: "cv11", "ss01";
    font-optical-sizing: auto;
}

img, svg, video { max-width: 100%; height: auto; }
/* Embedded media must never push the viewport wider than the screen. The
   dashboard chart (#chart_div) and any embeds/iframes scale to their box. */
iframe, embed, object, canvas { max-width: 100%; }
#chart_div, #chart_div * { max-width: 100%; }

/* The legacy layout uses content-box sizing. Because we add padding to the
   components below, apply border-box to JUST those elements so width:100%
   + padding never overflows the viewport (a common mobile overflow cause).
   Scoped deliberately — we do NOT flip box-sizing globally, which could
   shift the legacy desktop layout. */
.content,
.boxcontent,
.content .row .box .inner,
.content .row .box .inner .title,
.content .row .box .inner .padding,
input, select, textarea,
.btn, input[type="submit"], button.btn,
nav.main-menu ul li,
.navholder > nav,
.tabs ul li div,
body > header .nav-search,
body > header .account-menu,
.app-footer__inner {
    box-sizing: border-box;
}

/* Restore visible focus — main.css sets `*{outline:none!important}`,
   which is an accessibility regression. Re-enable for keyboard 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-brand) !important;
    outline-offset: 2px !important;
    border-radius: var(--r-sm);
}

/* Accessible skip target helper */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
h1, .h1 { font-size: clamp(20px, 2.4vw, 24px); color: var(--c-ink); font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-tight); text-wrap: balance; }
h2, .h2 { font-size: clamp(18px, 2vw, 20px);   color: var(--c-ink); font-weight: 700; line-height: 1.3; letter-spacing: var(--tracking-tight); text-wrap: balance; }
h3, .h3 { font-size: 16px; color: var(--c-ink-soft); font-weight: 700; letter-spacing: var(--tracking-tight); }

a { color: var(--c-brand); transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-brand-700); }

/* Tidy long-form copy where it appears inside cards */
.boxcontent p, .padding p { text-wrap: pretty; }

/* -------------------------------------------------------------------------
   4. App header / top bar
   ------------------------------------------------------------------------- */
body > header {
    height: var(--header-h);
    background: var(--c-brand);                /* single solid colour, no gradient */
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, var(--sh-2);
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid rgba(8, 41, 77, .6);
}
body > header .units-row.inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    /* Full-width header: title + search pinned to the left edge, actions to
       the right (no centered max-width gutter). */
    max-width: none;
    margin: 0;
    padding: 0 clamp(var(--sp-3), 3vw, var(--sp-6));
}
body > header .unit-50 { width: auto; float: none; }
body > header .unit-50.logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 1 1 auto;
    min-width: 0;
}
body > header .unit-50.logo > a {
    font-size: 17px !important;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
}
/* Search field in the header */
body > header .nav-search {
    height: 36px !important;
    width: clamp(160px, 26vw, 320px) !important;
    margin: 0 !important;
    padding: 0 var(--sp-3);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body > header .nav-search::placeholder { color: rgba(255, 255, 255, .75); }
body > header .nav-search:focus {
    background: #fff;
    color: var(--c-ink);
    border-color: #fff;
}
body > header .nav-search:focus::placeholder { color: var(--c-muted); }

/* Right-hand action list */
body > header ul.right {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    height: var(--header-h);
    margin: 0;
    float: none;
}
body > header ul.right > li {
    height: auto;
    line-height: 1;
    padding: var(--sp-2) var(--sp-3);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
body > header ul.right > li a { color: #fff !important; }
body > header ul.right > li:hover,
body > header ul.right > li:focus-visible { background: rgba(255, 255, 255, .16); }
body > header ul.right > li i { font-size: 16px !important; margin: 0 !important; }

/* User account dropdown */
body > header ul.right > li.has-dropdown { position: relative; padding: 0; }
body > header .user-menu-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 100%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    transition: background var(--dur) var(--ease);
}
body > header .user-menu-toggle:hover,
body > header li.has-dropdown.is-open .user-menu-toggle { background: rgba(255, 255, 255, .16); }
body > header .user-menu-toggle i { font-size: 16px !important; margin: 0 !important; }
body > header .user-menu-caret {
    font-size: 12px !important;
    transition: transform var(--dur) var(--ease);
}
body > header li.has-dropdown.is-open .user-menu-caret { transform: rotate(180deg); }

body > header .account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    height: auto;          /* override legacy `header ul {height:55px}` */
    margin: 0;
    padding: var(--sp-2);
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    z-index: 80;
}
body > header li.has-dropdown.is-open .account-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
body > header ul.right li.has-dropdown .account-menu li { float: none; height: auto; padding: 0; }
body > header ul.right li.has-dropdown .account-menu a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--c-ink-soft) !important;   /* must beat `ul.right > li a {color:#fff}` */
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
body > header ul.right li.has-dropdown .account-menu a i { width: 18px; text-align: center; color: var(--c-muted) !important; font-size: 15px !important; }
body > header ul.right li.has-dropdown .account-menu a:hover,
body > header ul.right li.has-dropdown .account-menu a:focus-visible {
    background: var(--c-brand-050);
    color: var(--c-brand) !important;
}
body > header ul.right li.has-dropdown .account-menu a:hover i { color: var(--c-brand) !important; }

/* Hamburger — hidden on desktop, shown on mobile (see responsive section) */
.m-nav-toggle {
    display: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.m-nav-toggle:hover { background: rgba(255, 255, 255, .16); }

/* -------------------------------------------------------------------------
   5. Layout shell
   ------------------------------------------------------------------------- */
.holder { background: var(--c-bg); }
/* NOTE: the app toggles `.semi-width` (margin-left:320px) / `.full-width`
   (margin-left:30px) on `.content` via AJAX to make room for the side menu.
   We must NOT set `margin` on `.content` here or we'd break that desktop
   offset. So we only add padding (whitespace) — never margins. The 320px
   margin is neutralised on mobile in the responsive section below. */
.content {
    padding: clamp(var(--sp-4), 2.5vw, var(--sp-6)) clamp(var(--sp-3), 3vw, var(--sp-5));
}

/* Section side navigation */
.navholder > nav {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    overflow: hidden;
}
.navholder > nav a { color: var(--c-ink-soft); }

/* Side-menu items. The legacy markup is
     nav > ul > li > div.padding.clearfix > div.left (icon) + div.left (label)
   and the `.padding` / `.left` helpers are NOT in the loaded CSS, so without
   this the rows render unstyled and cramped. Give them comfortable,
   touch-friendly rows (benefits desktop and mobile alike). */
.navholder > nav ul { list-style: none; margin: 0; padding: var(--sp-2); }
.navholder > nav ul ul { padding: 0 0 0 var(--sp-4); margin: var(--sp-1) 0 0; }
.navholder > nav li { float: none; width: 100%; margin: 0; }
.navholder > nav li > .padding {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 40px;
    padding: 10px var(--sp-3) !important;
    border-radius: var(--r-sm);
    color: var(--c-ink-soft);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navholder > nav li > .padding > .left { float: none; }   /* flatten legacy float */
.navholder > nav li > .padding > .left i { width: 18px; text-align: center; color: var(--c-muted); }
.navholder > nav li > .padding:hover { background: var(--c-brand-050); color: var(--c-brand); }
.navholder > nav li > .padding:hover > .left i { color: var(--c-brand); }
.navholder > nav li.selected > .padding { background: var(--c-brand); color: #fff; }
.navholder > nav li.selected > .padding > .left i { color: #fff; }

/* -------------------------------------------------------------------------
   6. Top "main-menu" (horizontal section nav)
   ------------------------------------------------------------------------- */
nav.main-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    border: 0;
}
nav.main-menu ul li {
    width: auto !important;
    flex: 0 0 auto;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-pill);
    background: var(--c-surface) !important;
    color: var(--c-ink-soft) !important;
    line-height: 1 !important;
    padding: 10px 18px !important;
    font-weight: 600;
    box-shadow: var(--sh-1);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
nav.main-menu ul li:after { display: none !important; }
nav.main-menu ul li:hover { transform: translateY(-1px); border-color: var(--c-border-strong) !important; }
nav.main-menu ul li.selected,
nav.main-menu ul li:hover {
    background: var(--c-brand) !important;
    color: #fff !important;
    border-color: var(--c-brand) !important;
}

/* -------------------------------------------------------------------------
   7. Cards (.row > .box > .inner)
   ------------------------------------------------------------------------- */
.content .row { margin-bottom: var(--sp-5); }
.content .row .box .inner {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
    transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.content .row .box .inner:hover {
    box-shadow: var(--sh-2);
    border-color: var(--c-border-strong);
}
.content .row .box .inner .title {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
}
/* Slim gradient accent rule under the card header for a premium feel.
   Brand-tinted and restrained so dense CRM pages don't feel busy. */
.content .row .box .inner .title::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--grad-brand);
    opacity: .8;
    pointer-events: none;   /* purely decorative — never intercept clicks */
}
.content .row .box .inner .title .right,
.content .row .box .inner .title .btn { margin-left: auto; }
.content .row .box .inner .boxcontent,
.boxcontent {
    background: var(--c-surface);
    padding: var(--sp-5);
    /* Let wide tables scroll inside the card instead of breaking the layout */
    overflow-x: auto;
}
.content .row .box .inner .padding { padding: var(--sp-5); }

/* -------------------------------------------------------------------------
   8. Buttons
   ------------------------------------------------------------------------- */
.btn,
input[type="submit"],
button.btn {
    -webkit-appearance: none;   /* drop native OS button chrome so our bg shows */
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 32px;
    padding: 0 12px !important;  /* beat legacy `.btn { padding:8px !important }` */
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--c-brand) !important;       /* fallback */
    background: var(--grad-brand) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .005em;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--sh-1);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
                filter var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
button.btn:hover:not(:disabled) {
    color: #fff !important;
    box-shadow: var(--sh-2), var(--sh-brand);
    transform: translateY(-1px);
    filter: brightness(1.05) saturate(1.03);
}
.btn:active,
input[type="submit"]:active { transform: translateY(0); box-shadow: var(--sh-1); filter: brightness(.98); }
.btn:disabled, input[type="submit"]:disabled, button.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

.btn i { color: #fff !important; }

/* Accent / primary CTA */
.btn.orange, .btn1.orange, .btn.accent {
    background: var(--c-accent) !important;       /* fallback */
    background: var(--grad-accent) !important;
    border-color: transparent;
}
.btn.orange:hover, .btn1.orange:hover, .btn.accent:hover { box-shadow: var(--sh-2), var(--sh-accent) !important; }

/* White / secondary */
.btn.white {
    background: var(--c-surface) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-border-strong);
}
.btn.white:hover { background: var(--c-surface-2) !important; color: var(--c-ink) !important; }
.btn.white i { color: var(--c-ink) !important; }

/* Status-colored buttons keep their hue but gain the modern shape */
.btn.red    { background: var(--c-danger) !important; }
.btn.green  { background: var(--c-success) !important; }

/* -------------------------------------------------------------------------
   9. Forms
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea {
    font-family: inherit;
    font-size: 14px;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    padding: 10px var(--sp-3);
    min-height: 40px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height: 96px; line-height: var(--lh-base); }
input::placeholder, textarea::placeholder { color: var(--c-faint); }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--c-brand) !important;
    box-shadow: var(--ring);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--c-surface-2);
    color: var(--c-muted);
    cursor: not-allowed;
}

label {
    display: inline-block;
    font-weight: 600;
    color: var(--c-ink-soft);
    margin-bottom: var(--sp-1);
}

/* -------------------------------------------------------------------------
   10. Tables
   ------------------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }
table th {
    text-align: left;
    font-weight: 700;
    color: var(--c-ink-soft);
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-3) var(--sp-4);
    white-space: nowrap;
}
table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-ink);
}
table tbody tr { transition: background var(--dur) var(--ease); }
table tbody tr:hover { background: var(--c-brand-050); }
table tbody tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------------------
   11. Tabs
   ------------------------------------------------------------------------- */
.tabs { height: auto; border-bottom: 1px solid var(--c-border); }
.tabs ul { display: flex; flex-wrap: wrap; gap: var(--sp-1); float: none; }
.tabs ul li { height: auto; line-height: 1; margin: 0; }
.tabs ul li div {
    min-width: 0;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-md) var(--r-md) 0 0;
    color: var(--c-muted);
    font-weight: 600;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tabs ul li div:hover { color: var(--c-brand); background: var(--c-surface-2); }
.tabs ul li.selected div,
.tabs ul li.active div {
    color: var(--c-brand);
    background: var(--c-surface);
    border-bottom: 2px solid var(--c-brand);
}

/* -------------------------------------------------------------------------
   12. Breadcrumbs
   ------------------------------------------------------------------------- */
.breadcrumbs {
    color: var(--c-muted);
    font-size: 13px;
    padding: 0 0 var(--sp-4) 0;
}
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-brand); }

/* -------------------------------------------------------------------------
   12b. Empty states (404, "no results", etc.)
   ------------------------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
    padding: var(--sp-8) var(--sp-4);
    color: var(--c-muted);
}
.empty-state__icon { font-size: 44px; color: var(--c-faint); line-height: 1; }
.empty-state__text { margin: 0; font-size: 15px; color: var(--c-ink-soft); }

/* Compact section subtitle (e.g. above the orders overview table) — a tidy
   alternative to Bootstrap's oversized `.lead`. */
.section-subtitle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    font-size: 14px !important;
    font-weight: 700;
    color: var(--c-ink-soft);
    letter-spacing: var(--tracking-tight);
}
.section-subtitle i { color: var(--c-muted); font-size: 14px; }

/* Dashboard — Chart.js revenue chart container (sized parent so the responsive
   canvas can fill it) + KPI trend badge. */
.chart-wrap {
    position: relative;
    width: 100%;
    height: clamp(240px, 38vw, 340px);
    margin-top: var(--sp-4);
}
.chart-wrap canvas { max-width: 100%; }
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.5;
}
.kpi-trend--up   { background: #eaf7ee; color: var(--c-success); }
.kpi-trend--down { background: #fdecea; color: var(--c-danger); }

/* -------------------------------------------------------------------------
   13. SweetAlert2 modals
   ------------------------------------------------------------------------- */
.swal2-popup {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-3) !important;
    font-family: var(--font-sans) !important;
}
.swal2-styled.swal2-confirm {
    background: var(--c-brand) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--sh-1) !important;
}
.swal2-styled.swal2-cancel {
    background: var(--c-surface) !important;
    color: var(--c-ink) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: var(--r-md) !important;
}

/* -------------------------------------------------------------------------
   14. Overlay / loadbar / notifications
   ------------------------------------------------------------------------- */
.overlay { backdrop-filter: blur(2px); background: rgba(16, 24, 40, .35); }
#loadbar .lcontainer { background: var(--c-accent); }
.notifications { z-index: 70; }

/* -------------------------------------------------------------------------
   15. Login / public pages
   ------------------------------------------------------------------------- */
body.loginbg {
    min-height: 100vh;          /* fallback */
    min-height: 100dvh;         /* avoids mobile URL-bar jump */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--sp-4), 4vw, var(--sp-8));
    /* Original login photo background. */
    background-size: cover;
    background-position: center;
    background-image: url('/_webblocks/images/bg.jpg');
}

/* Visible field labels on the login form */
.logincontent .login-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-soft);
    margin: 0 0 var(--sp-1);
}
.logincontent .login-label + input { margin-bottom: var(--sp-4); }
.logincontent { width: 100%; }
.logincontent .row { display: flex; justify-content: center; }
.logincontent .box {
    width: 100%;
    max-width: 420px;
}
.logincontent .box .inner {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    overflow: hidden;
}
/* Brand-blue header bar — high specificity to beat `.content .row .box .inner
   .title {background:#fff}` (the .logincontent div is also a .content). */
.logincontent .row .box .inner .title.login-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--c-brand);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    padding: var(--sp-4) var(--sp-6);
    border: 0;
}
.logincontent .row .box .inner .title.login-title i { font-size: 18px; line-height: 1; color: #fff; }
.logincontent .row .box .inner .title.login-title .clearfix { display: none; }
.logincontent .box .inner .boxcontent {
    color: var(--c-muted);
    padding: var(--sp-5) var(--sp-6) var(--sp-4);
    background: var(--c-surface);
}
.logincontent form { padding: 0 var(--sp-6) var(--sp-6) !important; }
.logincontent .forgot {
    margin-top: var(--sp-2);
    padding: var(--sp-5) var(--sp-6);
    text-align: center;
    font-size: 13px;
    border-top: 1px solid var(--c-border);   /* clear separation above the link */
}
.logincontent .mislukt {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    background: #fdecea;
    color: var(--c-danger);
    border: 1px solid #f5c6c0;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: 13px;
    line-height: 1.45;   /* reset legacy fixed line-height:37px */
    height: auto;        /* reset legacy fixed height so padding shows */
}
/* Success message — mirrors .mislukt for the password-reset confirmation */
.logincontent .gelukt {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: #eaf7ee;
    color: var(--c-success);
    border: 1px solid #bfe5cb;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: 13px;
    line-height: 1.45;
}
.logincontent .gelukt i { font-size: 15px; }
.logincontent input[type="text"],
.logincontent input[type="email"],
.logincontent input[type="password"] { width: 100%; margin-bottom: var(--sp-3); }
.logincontent input[type="submit"] { width: 100%; }


@media (prefers-reduced-motion: reduce) {
    .logincontent .row.login-shell { animation: none; }
    .login-hero::before { animation: none; }
}

/* -------------------------------------------------------------------------
   15b. Footers
   ------------------------------------------------------------------------- */
.app-footer {
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-muted);
    font-size: 13px;
}
.app-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--sp-4) clamp(var(--sp-3), 3vw, var(--sp-6));
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.app-footer a { color: var(--c-muted); }
.app-footer a:hover { color: var(--c-brand); }
.app-footer__sep { color: var(--c-border-strong); }

.public-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: var(--sp-3);
    color: var(--c-muted);
    font-size: 12px;
}

/* =========================================================================
   15c. Bootstrap 5 + custom dock components
   Newer dock pages (orders/edit, settings, users, mailgun…) use Bootstrap
   utilities and a few custom classes (.title2, .btn-submit, .form_row).
   Harmonise them with the same restrained design tokens so every page is
   consistent.
   ========================================================================= */

/* Bootstrap form fields */
.form-control,
.form-select {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    color: var(--c-ink);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    padding: 10px var(--sp-3);
    min-height: 40px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea.form-control { min-height: 96px; }
.form-control:focus,
.form-select:focus {
    border-color: var(--c-brand);
    box-shadow: var(--ring);
    outline: 0;
}
.form-control::placeholder { color: var(--c-faint); }
.form-label {
    font-weight: 600;
    color: var(--c-ink-soft);
    margin-bottom: var(--sp-1);
}
.form_row { margin-bottom: var(--sp-4); }

/* Custom submit button → match the primary button */
.btn-submit {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 36px;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 14px !important;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--c-brand) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sh-1);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-submit:hover { background: var(--c-brand-600) !important; box-shadow: var(--sh-2); transform: translateY(-1px); }

/* Custom card header (.title2) → clean header bar */
.title2 {
    display: flex !important;
    align-items: center;
    gap: var(--sp-2);
    height: auto !important;
    line-height: 1.3 !important;
    color: var(--c-ink) !important;
    font-weight: 700;
    font-size: 16px !important;
    background: var(--c-surface-2) !important;
    border: 1px solid var(--c-border);
    border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--sp-4) var(--sp-5) !important;
}
.title2 i, .title2 i.fa { margin-right: 0 !important; color: var(--c-muted); }

/* Bootstrap utility card used as the card body; flatten its top when it
   follows a .title2 header so the two read as one card. */
.shadow.rounded,
.bg-body.rounded {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-1) !important;
}
.box + .shadow.rounded,
.box + .bg-body.rounded {
    border-top: 0;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Page heading / breadcrumb (the <h1> at the top of dock edit pages) */
.content .inner > .row h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    color: var(--c-ink);
    margin: 0 0 var(--sp-4);
}
.content .inner > .row h1 a { color: var(--c-brand); }
.content .inner > .row h1 i { color: var(--c-muted); }

/* Bootstrap nav-tabs → align with the restrained tab look */
.nav-tabs {
    border-bottom: 1px solid var(--c-border);
    gap: var(--sp-1);
}
.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    color: var(--c-muted);
    font-weight: 600;
    padding: var(--sp-3) var(--sp-5);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-tabs .nav-link:hover { color: var(--c-brand); background: var(--c-surface-2); border: 0; }
.nav-tabs .nav-link.active {
    color: var(--c-brand);
    background: var(--c-surface);
    border: 0;
    border-bottom: 2px solid var(--c-brand);
}
.tab-content { padding-top: var(--sp-4); }

/* =========================================================================
   16. Responsive — mobile first refinements
   Breakpoints exercised: 320, 375, 390, 414, 768, 820, 1024
   ========================================================================= */

/* Tablet & below: collapse the fixed side-nav offset so content uses the
   full width and never overflows horizontally. */
@media (max-width: 1024px) {
    .content.semi-width,
    .content.full-width { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
    nav.main-menu ul li { padding: 9px 14px !important; font-size: 13px; }

    /* The side menu is pulled into the left gutter on desktop via an inline
       `position:fixed/absolute` set by framework_nav_position.js. On tablet &
       phone the content offset is removed (above), so force the menu back into
       normal flow — otherwise it floats over the page content. `!important`
       is required to beat the JS-applied inline style. */
    .navholder > nav,
    nav.main-menu {
        position: static !important;
        width: auto !important;
        max-width: 100%;
        top: auto !important;
        left: auto !important;
    }
    .navholder { margin-bottom: var(--sp-4); }
}

/* Phones & small tablets */
@media (max-width: 767px) {
    :root { --header-h: 52px; }

    /* Reveal hamburger, condense header */
    .m-nav-toggle { display: inline-flex; order: -1; }
    body > header .units-row.inner { gap: var(--sp-2); padding: 0 var(--sp-3); }
    body > header .nav-search { display: none; }     /* search moves into the menu */

    /* Right-hand actions become a slide-down panel toggled by the hamburger */
    body > header ul.right {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--c-brand);
        box-shadow: var(--sh-2);
        padding: var(--sp-2);
        display: none;
    }
    body > header ul.right.is-open { display: flex; }
    body > header ul.right > li {
        width: 100%;
        min-height: 48px;            /* comfortable touch target */
        padding: var(--sp-3) var(--sp-4);
        border-radius: var(--r-sm);
    }

    /* User dropdown renders inline inside the mobile panel (not a popover) */
    body > header ul.right > li.has-dropdown { padding: 0; min-height: 0; }
    body > header .user-menu-toggle { width: 100%; min-height: 48px; justify-content: flex-start; }
    body > header .user-menu-caret { margin-left: auto; }
    body > header .account-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        min-width: 0;
        margin: var(--sp-1) 0 0;
        padding: 0 0 0 var(--sp-5);
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    body > header li.has-dropdown.is-open .account-menu { display: block; }
    body > header ul.right li.has-dropdown .account-menu a { color: #fff !important; min-height: 44px; }
    body > header ul.right li.has-dropdown .account-menu a i { color: rgba(255,255,255,.8) !important; }
    body > header ul.right li.has-dropdown .account-menu a:hover,
    body > header ul.right li.has-dropdown .account-menu a:focus-visible { background: rgba(255,255,255,.16); color: #fff !important; }
    body > header ul.right li.has-dropdown .account-menu a:hover i { color: #fff !important; }

    /* Stack any unit-based grid rows */
    body > header .unit-50,
    .content [class*="unit-"] { width: 100% !important; float: none !important; }

    /* Cards & spacing */
    .content { padding: var(--sp-4) var(--sp-3); }
    .content .row .box .inner .title { padding: var(--sp-4); flex-wrap: wrap; }
    .content .row .box .inner .boxcontent,
    .content .row .box .inner .padding { padding: var(--sp-4); }

    /* Section nav full-width, stacked */
    nav.main-menu ul { flex-direction: column; }
    nav.main-menu ul li { width: 100% !important; border-radius: var(--r-md); }
    .navholder > nav { margin-bottom: var(--sp-4); }

    /* Tables: allow horizontal scroll within their container, momentum scroll */
    .boxcontent, .padding { -webkit-overflow-scrolling: touch; }

    /* Slightly larger tap targets on touch screens (kept modest per request) */
    .btn, input[type="submit"], button.btn { min-height: 38px; }
}

/* -------------------------------------------------------------------------
   18. Popups / modals — make the legacy fixed-width popup responsive
   (.popup-box has min-width:500px; left:50%; margin-left:-250px) so it does
   not overflow on small screens.
   ------------------------------------------------------------------------- */
@media (max-width: 540px) {
    .popup-box {
        min-width: 0 !important;
        width: calc(100vw - var(--sp-6)) !important;
        max-width: calc(100vw - var(--sp-6)) !important;
        left: var(--sp-3) !important;
        right: var(--sp-3) !important;
        margin-left: 0 !important;
    }
}

/* Very small phones (iPhone SE / 320–375) */
@media (max-width: 380px) {
    body > header .unit-50.logo > a { font-size: 15px !important; }
    .content { padding: var(--sp-3) var(--sp-3); }
}

/* =========================================================================
   19. Targeted fixes (data-table toolbar, footer, chosen, dashboard, etc.)
   ========================================================================= */

/* --- (1 + 6) Table toolbar: keep add / export / search on one row ---------
   array2table renders `.table-topbar > .cms_table_add.btn + .cms_table_export.btn
   + input.cms_table_search_box.right`; query2table renders the search inside
   `.cms_table_search_box_container.right`. Flex lays them out side by side and
   pushes the search field to the right (float is ignored inside flex). */
.table-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
/* (25) Right-align the search field. legacy table.css forces
   `input[type=text]{margin:10px!important}`, so we need !important to win. */
.table-topbar > .cms_table_search_box,
.table-topbar > .cms_table_search_box_container { margin-left: auto !important; }
.table-topbar .cms_table_holder { margin-left: auto; }   /* pager stays right */

/* (6 + 25) Search input height = button height (≈34px), not the 40px form
   default. Keep the left padding so the magnifier icon (set by table.css as a
   left background image) does not overlap the "Zoeken" placeholder text. */
.cms_table_search_box {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 var(--sp-3) 0 34px !important;
    border-radius: var(--r-sm);
    float: none;             /* neutralise legacy `.right` float inside flex */
    width: clamp(180px, 28vw, 280px);
}
.cms_table_search_box_container { float: none; display: inline-flex; }
.cms_table_search_box_container .cms_table_search_box { width: 100%; }

/* (2) Uppercase table headers */
table th,
.cms_table thead td,
table thead td.title2 {
    text-transform: uppercase;
    letter-spacing: .045em;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-muted);
}

/* (3) Sticky footer that sits at the bottom of short pages, 30px above */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.holder { flex: 1 0 auto; }
.app-footer { flex-shrink: 0; margin-top: 30px; }

/* (5) Chosen dropdown — align with the design system */
.chosen-container { font-family: inherit; font-size: 14px; }
.chosen-container-single .chosen-single {
    height: 40px;
    line-height: 24px;
    padding: 7px var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    box-shadow: none;
    color: var(--c-ink);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-active .chosen-single {
    border-color: var(--c-brand);
    box-shadow: var(--ring);
    border-radius: var(--r-md);
}
.chosen-container-single .chosen-single div b {
    background-position: 0 8px;   /* keep the caret vertically centred */
}
.chosen-container .chosen-drop {
    border: 1px solid var(--c-border-strong);
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--sh-2);
    margin-top: 2px;
}
.chosen-container-single .chosen-search input[type="text"] {
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    min-height: 32px;
}
.chosen-container .chosen-results { margin: var(--sp-1); padding: 0; }
.chosen-container .chosen-results li {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
}
.chosen-container .chosen-results li.highlighted {
    background: var(--c-brand);
    color: #fff;
}
.chosen-container .chosen-results li.result-selected {
    color: var(--c-brand);
    font-weight: 600;
    background: var(--c-brand-050);
}
.chosen-container-multi .chosen-choices {
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    padding: 3px var(--sp-2);
}
.chosen-container-multi .chosen-choices li.search-choice {
    background: var(--c-brand-050);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    color: var(--c-brand);
    box-shadow: none;
}

/* (7) Data tables: a single horizontal scroll container.
   query2table nests `.table_container > .table_inner > table`; make only the
   inner wrapper scroll and stop any card body from adding a second scrollbar. */
.table_inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table_container { overflow: visible; }
.boxcontent:has(.table_container),
.boxcontent:has(.table-responsive),
.tab-content:has(.table_container) { overflow-x: visible; }

/* (8) Order details: right-align the "Wijzigen" buttons inside .title2.
   .float-end can't float inside our flex .title2, so use auto margin. */
.title2 .float-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }

/* (10) Order-details breadcrumb (the linked <h1> at the top of the page) */
h1.order-crumbs {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--c-muted);
    margin: 0 0 var(--sp-3) !important;
    letter-spacing: 0;
}
h1.order-crumbs i.fa-inbox { color: var(--c-muted); font-size: 13px; }
h1.order-crumbs a { color: var(--c-muted); font-weight: 600; }
h1.order-crumbs a:hover { color: var(--c-brand); }
h1.order-crumbs strong { color: var(--c-ink); font-weight: 700; }
h1.order-crumbs .sep { color: var(--c-border-strong) !important; margin: 0 2px; }

/* (11) Fieldset / legend — rounded, tidy (used by table filters etc.) */
fieldset {
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    margin: 0 0 var(--sp-4);
}
legend {
    width: auto;
    padding: var(--sp-1) var(--sp-3);
    margin-left: var(--sp-2);
    background: var(--c-brand-050);
    color: var(--c-brand);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* (12) Header account dropdown — more compact rows */
body > header ul.right li.has-dropdown .account-menu li { line-height: 1.3; }
body > header ul.right li.has-dropdown .account-menu a {
    padding: var(--sp-2) var(--sp-3);
    line-height: 1.3;
    min-height: 0;
}

/* (13) Homepage dashboard reuses .title2 on <tr> header rows and .title on
   metric rows built from the legacy unit grid — neither is a card header, so
   undo the card-header treatment there (it was jumbling the figures and
   misaligning the columns). */
tr.title2 {
    display: table-row !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
tr.title2 td {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    color: var(--c-muted);
}
td.text-right { text-align: right; }
/* The Omzet summary blocks use .title>.units-row as data rows, not headers. */
.inner .title:has(.units-row) {
    display: block;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}
.inner .title:has(.units-row)::after { display: none; }
/* (19) The Omzet 20xx summary = 3 stacked rows, each "label | amount | %".
   A shared grid template makes the columns line up vertically across rows. */
.inner .title .units-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: var(--sp-4);
}
.inner .title .units-row [class*="unit-"] { float: none; width: auto; margin: 0; min-width: 0; }
.inner .title .units-row .text-right { text-align: right; }
.inner .title .units-row [class*="unit-"]:nth-child(2),
.inner .title .units-row [class*="unit-"]:nth-child(3) { min-width: 90px; text-align: right; }

/* (16) Add button: small offset from the toolbar edge, per request.
   table.css sets `.cms_table_add { margin: 0 !important }`, so override. */
.cms_table_add { margin-left: 10px !important; margin-top: 10px !important; }

/* (28) Bootstrap Table (the /orders/ tables) toolbar: the built-in search
   input is a 40px .form-control — shrink it to match the toolbar buttons
   (.btn-table, via data-buttons-class="table"). */
.fixed-table-toolbar .search .form-control,
.fixed-table-toolbar .search input {
    height: 34px;
    min-height: 34px;
    padding: 0 var(--sp-3);
}
.fixed-table-toolbar .btn,
.fixed-table-toolbar .btn-table { min-height: 34px; }

/* (17) Mailgun details — zebra-striped, aligned label/value rows */
.mailgun-rows .form_row {
    display: flex;
    gap: var(--sp-3);
    align-items: baseline;
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
}
.mailgun-rows .form_row:nth-of-type(even) { background: var(--c-surface-2); }
.mailgun-rows .form_row > label {
    flex: 0 0 140px;
    margin: 0;
    color: var(--c-muted);
    font-weight: 600;
}
.mailgun-rows .form_row > textarea { flex: 1 1 auto; }

/* (20) Header search results render as a dropdown anchored under the input */
.nav-search-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-search-wrap .search-loader {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.nav_search_holder {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(620px, 80vw);
    z-index: 90;
}
.search-results-dropdown {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    overflow: hidden auto;
    max-height: 70vh;
}
.search-result { font-size: 13px; line-height: 1.45; }
.search-result a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-ink-soft);
    text-decoration: none;
}
.search-result.even { background: var(--c-surface-2); }
.search-result a:hover { background: var(--c-brand-050); color: var(--c-brand); }
.search-result strong { color: var(--c-ink); }
.search-result .order-badge { float: right; margin-left: 6px; }

/* (24) Tabs: no underline on hover */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.tabs ul li div:hover,
.tabs ul li:hover { text-decoration: none; }

/* (21) Form fields: thin grey border, and a single thin blue border on focus.
   The legacy reset added `outline: 2px solid` (offset) on focus which, stacked
   on our focus ring, read as a doubled blue border — drop it for form fields. */
.boxcontent input[type="text"],
.boxcontent input[type="password"],
.boxcontent input[type="email"],
.boxcontent input[type="number"],
.boxcontent input[type="tel"],
.boxcontent input[type="url"],
.boxcontent select,
.boxcontent textarea {
    border: 1px solid var(--c-border-strong);
}
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible,
.form-control:focus, .form-select:focus {
    outline: none !important;
    border: 1px solid var(--c-brand) !important;
    box-shadow: var(--ring);
}

/* (32) Header account dropdown: solid light-blue hover instead of the legacy
   rounded-corner background sprite. */
body > header ul.right li.has-dropdown .account-menu a:hover,
body > header ul.right li.has-dropdown .account-menu a:focus-visible {
    background: var(--c-brand-050) !important;
    background-image: none !important;
    color: var(--c-brand) !important;
    border-radius: var(--r-sm);
}

/* (33) Brand title + search field flush to the left of the header */
body > header .unit-50.logo {
    justify-content: flex-start;
    gap: var(--sp-3);
}
body > header .unit-50.logo > a { margin-left: 0; }
body > header .nav-search-wrap { margin-left: 0; margin-right: auto; }

/* …and the right-side actions group (incl. the account dropdown) pinned to
   the right edge. */
body > header .unit-50:not(.logo) { margin-left: auto; }
body > header ul.right { justify-content: flex-end; }
body > header .account-menu { right: 0; left: auto; }

/* (41) Per-tab accent colour on /orders/ (#myTab) — coloured icon + active
   bottom border, so each section is recognisable at a glance. Scoped to
   #myTab so other pages' nav-tabs are unaffected. */
#myTab.nav-tabs .nav-link[data-id="tab-overview"]        { --tab-c: var(--c-brand); }
#myTab.nav-tabs .nav-link[data-id="tab-completed"]       { --tab-c: var(--c-success); }
#myTab.nav-tabs .nav-link[data-id="tab-product-failure"] { --tab-c: var(--c-danger); }
#myTab.nav-tabs .nav-link[data-id="tab-backorder"]       { --tab-c: var(--c-accent); }
#myTab.nav-tabs .nav-link[data-id="tab-alternative"]     { --tab-c: #0a9ca8; }
#myTab.nav-tabs .nav-link[data-id="tab-reminder"]        { --tab-c: #7048c4; }
#myTab .nav-link i { color: var(--tab-c, var(--c-muted)); }
#myTab .nav-link:hover { color: var(--tab-c, var(--c-brand)); }
#myTab .nav-link.active {
    color: var(--tab-c, var(--c-brand)) !important;
    border-bottom-color: var(--tab-c, var(--c-brand)) !important;
}

/* (41) Order-status badges — used in the header search results, colour-matched
   to the order tabs. */
.order-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    border: 1px solid transparent;
    vertical-align: middle;
}
.order-badge--overview        { background: #eaf2fb; color: #0b4f96; border-color: #cfe0f5; }
.order-badge--completed       { background: #eaf7ee; color: #2f9e44; border-color: #bfe5cb; }
.order-badge--product-failure { background: #fdecea; color: #c0392b; border-color: #f5c6c0; }
.order-badge--backorder       { background: #fdf0df; color: #c57400; border-color: #f8d9a8; }
.order-badge--alternative     { background: #e3f6f8; color: #0a7d86; border-color: #bce8ec; }
.order-badge--reminder        { background: #efeaf9; color: #5a37a8; border-color: #d6c9f0; }

/* (42 + 43) Bootstrap Table row-expand toggle: force a consistent icon size
   and a comfortable, always-clickable hit box across every order tab (on some
   tabs the icon inherited a tiny font-size, leaving almost nothing to click). */
.fixed-table-container td .detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 1;
    color: var(--c-brand);
    cursor: pointer;
}
.fixed-table-container td .detail-icon i,
.fixed-table-container td .detail-icon .svg-inline--fa {
    font-size: 16px !important;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}
.fixed-table-container td .detail-icon:hover { color: var(--c-brand-700); }

/* (44) The toolbar "Columns" dropdown (.btn-table.dropdown-toggle) must float
   ABOVE the table, not get clipped into a scrollable frame. The outer
   .table-responsive (overflow:auto) was clipping it — and it's also a
   redundant scrollbar, since Bootstrap Table's own .fixed-table-body already
   scrolls. Drop the outer clipping so the dropdown can escape. */
.table-responsive:has(.bootstrap-table) { overflow: visible; }
.bootstrap-table .fixed-table-toolbar,
.bootstrap-table { overflow: visible; }
.fixed-table-toolbar { position: relative; z-index: 30; }
.fixed-table-toolbar .columns,
.fixed-table-toolbar .keep-open,
.fixed-table-toolbar .dropdown { position: relative; }
.fixed-table-toolbar .dropdown-menu {
    z-index: 1050;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    padding: var(--sp-1);
}
.fixed-table-toolbar .dropdown-menu label,
.fixed-table-toolbar .dropdown-menu .dropdown-item {
    display: block;
    padding: var(--sp-1) var(--sp-2);
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--r-sm);
    white-space: nowrap;
}
.fixed-table-toolbar .dropdown-menu label:hover,
.fixed-table-toolbar .dropdown-menu .dropdown-item:hover { background: var(--c-brand-050); }

/* (45) Bootstrap Table toolbar buttons (.btn-table) — neutral grey, not the
   blue primary button. */
.btn-table,
.fixed-table-toolbar .btn-table {
    background: var(--c-surface) !important;
    background-image: none !important;
    color: var(--c-ink-soft) !important;
    border: 1px solid var(--c-border-strong) !important;
    box-shadow: var(--sh-1) !important;
}
.btn-table:hover,
.fixed-table-toolbar .btn-table:hover {
    background: var(--c-surface-2) !important;
    color: var(--c-ink) !important;
    filter: none !important;
}
/* FontAwesome renders these as <svg> (its JS swaps the <i>), so target both
   <i> and the svg, and set fill too. */
.btn-table i,
.btn-table svg,
.btn-table .svg-inline--fa,
.fixed-table-toolbar .btn-table i,
.fixed-table-toolbar .btn-table svg {
    color: var(--c-ink-soft) !important;
    fill: var(--c-ink-soft) !important;
}
.btn-table:hover i,
.btn-table:hover svg,
.btn-table:hover .svg-inline--fa,
.fixed-table-toolbar .btn-table:hover i,
.fixed-table-toolbar .btn-table:hover svg,
.fixed-table-toolbar .btn-table:hover .svg-inline--fa {
    color: var(--c-brand-700) !important;
    fill: var(--c-brand-700) !important;
}

/* =========================================================================
   20. Responsive — dense dashboard (homepage) + order-detail page
   These pages use Bootstrap's NON-breakpoint columns (.col-3/.col-6/.col-9,
   which stay fixed at every width) and the legacy float grid
   (.unit-40/.unit-50/.unit-60). Neither collapses on its own, so stack them
   and let wide tables scroll on narrow screens.
   ========================================================================= */
@media (max-width: 991px) {
    /* Stack Bootstrap fixed columns (order-detail two-column layout, button
       rows, the inner Klantopmerking/Notities/Contactmomenten splits). */
    .content .row > [class^="col-"],
    .content .row > [class*=" col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .content [class*="offset-"] { margin-left: 0 !important; }

    /* Stack the legacy float grid (dashboard cards). */
    .content [class*="unit-"] { width: 100% !important; float: none !important; }
    .content .units-row > .box + .box { margin-top: var(--sp-5); }

    /* Wide dashboard tables: scroll inside their card instead of overflowing
       the viewport. Scoped to cards that wrap a table directly, so it doesn't
       double up with the order-detail tables that already use
       .table-responsive. */
    .content .shadow:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content .shadow:has(> table) > table { min-width: 560px; }
}

@media (max-width: 767px) {
    /* Order-detail status buttons wrap with vertical spacing. */
    .btn-action { margin-bottom: var(--sp-1); }

    /* The top-right action buttons (Bestellen / Factuur / Terug) drop below
       and align left once their column is full width. */
    .content .col-6 > .float-end { float: none !important; margin-top: var(--sp-2); }
    .content .col-6 > .float-end .btn { margin-bottom: var(--sp-1); }

    /* Card headers wrap so the "Wijzigen" button can drop to its own line. */
    .title2 { flex-wrap: wrap; }
    .title2 .float-end { margin-top: var(--sp-1); }
}

/* -------------------------------------------------------------------------
   17. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, nav.main-menu ul li:hover { transform: none; }
}