/* ==========================================================================
   CustomsMateWorld UI v2 — "Variation A" light shell
   Single token-based stylesheet implementing the 2026 redesign handoff.
   Loaded LAST in _Layout / _LayoutShell / auth pages; overrides the NiceAdmin
   template (style.css), site.css and the DataTables Bootstrap 5 skin.
   Scoping:
     :root / html[data-theme="dark"]  — design tokens only
     body.cmw-v2                      — app shell + components + grids
     body.cmw-auth                    — standalone auth screens (login, MFA)
   Rules R1–R6 (design system): one action blue; mono for machine data;
   dense but breathable; status = badge; navy for headings/shell; no shadows
   except overlays.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Self-hosted fonts (CSP: no Google Fonts at runtime)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/public-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/public-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/plex-mono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/plex-mono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1 · Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* type */
    --cmw-font-ui: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --cmw-font-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

    /* light palette (all AA-checked per handoff) */
    --cmw-ink: #0b1c3f;
    --cmw-text: #1a2233;
    --cmw-text-2: #3a4356;
    --cmw-muted: #5c6577;
    --cmw-muted-2: #667085;
    --cmw-border: #e3e7ef;
    --cmw-border-strong: #d4dae6;
    --cmw-control-border: #7e8aa5;
    --cmw-row-divider: #eef1f6;
    --cmw-surface: #ffffff;
    --cmw-bg: #f6f7fb;
    --cmw-table-head-bg: #f4f6fa;
    --cmw-tab-strip-bg: #eff1f7;
    --cmw-zebra: #fbfcfe;
    --cmw-row-hover: #f4f7ff;
    --cmw-selection-bg: #eef4ff;
    --cmw-selection-border: #b9c9f2;
    --cmw-primary: #2f5ce6;
    --cmw-primary-hover: #2549c8;
    --cmw-primary-tint: #eef2fd;
    --cmw-azure: #1e8fff;
    --cmw-link: #2f5ce6;
    --cmw-success: #157347;
    --cmw-success-bg: #e4f5ec;
    --cmw-warning: #8a5507;
    --cmw-warning-bg: #fdf3e2;
    --cmw-warning-icon: #b26f12;
    --cmw-danger: #b32d2d;
    --cmw-danger-bg: #fdecec;
    --cmw-info: #1268c3;
    --cmw-info-bg: #e8f2ff;
    --cmw-neutral: #5c6577;
    --cmw-neutral-bg: #eef1f6;
    --cmw-amount-ok-bg: #f2fbf6;
    --cmw-navy-card: #0b1c3f;
    --cmw-focus-ring: 0 0 0 3px rgba(47, 92, 230, 0.15);
    --cmw-overlay: rgba(11, 28, 63, 0.42);
    --cmw-modal-shadow: 0 24px 60px rgba(11, 28, 63, 0.35);

    /* metrics */
    --cmw-header-h: 54px;
    --cmw-sidebar-w: 212px;
    --cmw-sidebar-rail-w: 58px;
    --cmw-radius-card: 10px;
    --cmw-radius-btn: 8px;
    --cmw-radius-tool: 7px;
}

html[data-theme="dark"] {
    --cmw-ink: #e7ebf4;
    --cmw-text: #e7ebf4;
    --cmw-text-2: #aeb7cb;
    --cmw-muted: #aeb7cb;
    --cmw-muted-2: #79839c;
    --cmw-border: #232e4c;
    --cmw-border-strong: #2b3757;
    --cmw-control-border: #6b7796;
    --cmw-row-divider: #1c2540;
    --cmw-surface: #161d2e;
    --cmw-bg: #0e1320;
    --cmw-table-head-bg: #141b2d;
    --cmw-tab-strip-bg: #121829;
    --cmw-zebra: #101627;
    --cmw-row-hover: #182137;
    --cmw-selection-bg: #1a2742;
    --cmw-selection-border: #33477e;
    --cmw-primary: #4d74f5;
    --cmw-primary-hover: #6d8ef7;
    --cmw-primary-tint: rgba(77, 116, 245, 0.14);
    --cmw-link: #6d8ef7;
    --cmw-success: #57d691;
    --cmw-success-bg: rgba(87, 214, 145, 0.15);
    --cmw-warning: #f0b955;
    --cmw-warning-bg: rgba(240, 185, 85, 0.15);
    --cmw-warning-icon: #f0b955;
    --cmw-danger: #f08585;
    --cmw-danger-bg: rgba(240, 133, 133, 0.15);
    --cmw-info: #6cb2f7;
    --cmw-info-bg: rgba(108, 178, 247, 0.15);
    --cmw-neutral: #aeb7cb;
    --cmw-neutral-bg: rgba(174, 183, 203, 0.14);
    --cmw-amount-ok-bg: rgba(87, 214, 145, 0.10);
    --cmw-navy-card: #121a30;
    --cmw-overlay: rgba(4, 8, 18, 0.6);
}

/* ==========================================================================
   2 · App base (body.cmw-v2)
   ========================================================================== */
body.cmw-v2 {
    font-family: var(--cmw-font-ui);
    font-size: 13.5px;
    color: var(--cmw-text);
    background: var(--cmw-bg);
}

body.cmw-v2 h1, body.cmw-v2 h2, body.cmw-v2 h3,
body.cmw-v2 h4, body.cmw-v2 h5, body.cmw-v2 h6 {
    font-family: var(--cmw-font-ui);
    color: var(--cmw-ink);
}

body.cmw-v2 a {
    color: var(--cmw-link);
    text-decoration: none;
}

body.cmw-v2 a:hover { color: var(--cmw-primary-hover); }

/* Machine data — R2 */
body.cmw-v2 .cmw-mono,
body.cmw-v2 code, body.cmw-v2 kbd {
    font-family: var(--cmw-font-mono);
}

/* Focus visibility — WCAG 2.4.7 */
body.cmw-v2 a:focus-visible,
body.cmw-v2 button:focus-visible,
body.cmw-v2 [tabindex]:focus-visible,
body.cmw-v2 input:focus-visible,
body.cmw-v2 select:focus-visible,
body.cmw-v2 textarea:focus-visible,
body.cmw-auth a:focus-visible,
body.cmw-auth button:focus-visible,
body.cmw-auth input:focus-visible,
body.cmw-auth select:focus-visible {
    outline: none;
    border-color: var(--cmw-primary);
    box-shadow: var(--cmw-focus-ring);
}

/* Selection color */
body.cmw-v2 ::selection,
body.cmw-auth ::selection {
    background: rgba(47, 92, 230, 0.18);
}

/* ==========================================================================
   3 · Header (54px, white, 1px border — replaces NiceAdmin shadow chrome)
   ========================================================================== */
body.cmw-v2 .header {
    height: var(--cmw-header-h);
    background: var(--cmw-surface);
    border-bottom: 1px solid var(--cmw-border);
    box-shadow: none;
    padding-left: 20px;
    transition: none;
}

/* Brand lockup: 54px logo bleeding to header edges, tight wordmark */
body.cmw-v2 .logo { line-height: 1; gap: 0; }

@media (min-width: 1200px) {
    body.cmw-v2 .logo { width: var(--cmw-sidebar-w); }
}

/* The production logo PNG has ~14% transparent padding on the left and its
   artwork ends at ~83% of the width. The handoff's -14px/-11px margins clip
   the mark and run the wordmark into the arrow at 54px — use -8px/-6px so the
   mark still bleeds flush to the header edge but nothing collides. */
body.cmw-v2 .logo img {
    max-height: 54px;
    height: 54px;
    width: 54px;
    object-fit: contain;
    margin-left: -8px;
    margin-right: 0;
}

body.cmw-v2 .logo span {
    font-family: var(--cmw-font-ui);
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cmw-ink);
    margin-left: -6px;
    white-space: nowrap;
}

/* The accent is a span nested inside .logo span — it must not inherit the
   outer span's negative lockup margin or "World" collides with "CustomsMate". */
body.cmw-v2 .logo .cmw-wordmark-accent {
    color: var(--cmw-azure);
    margin-left: 0;
    font-size: inherit;
}

body.cmw-v2 .header .toggle-sidebar-btn {
    font-size: 19px;
    color: var(--cmw-muted);
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

body.cmw-v2 .header .toggle-sidebar-btn:hover {
    background: var(--cmw-neutral-bg);
    color: var(--cmw-ink);
}

/* Header search — 300px pill with ⌘K hint */
body.cmw-v2 .header .search-bar { min-width: 340px; padding: 0 20px; }

body.cmw-v2 .search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 300px;
    border: 1px solid var(--cmw-border);
    background: var(--cmw-bg);
    border-radius: var(--cmw-radius-btn);
    padding: 0 10px;
}

body.cmw-v2 .search-form:focus-within {
    border-color: var(--cmw-primary);
    box-shadow: var(--cmw-focus-ring);
}

body.cmw-v2 .search-form input {
    border: 0;
    background: transparent;
    font-size: 12.5px;
    color: var(--cmw-text);
    padding: 7px 4px;
    width: 100%;
    outline: none;
    box-shadow: none !important;
}

body.cmw-v2 .search-form input::placeholder { color: var(--cmw-muted-2); }

body.cmw-v2 .search-form button {
    border: 0;
    background: transparent;
    color: var(--cmw-muted-2);
    font-size: 13px;
    padding: 0 2px;
    order: -1;
}

body.cmw-v2 .search-form .cmw-kbd-hint {
    font-family: var(--cmw-font-mono);
    font-size: 10px;
    color: var(--cmw-muted-2);
    background: var(--cmw-surface);
    border: 1px solid var(--cmw-border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: auto;
    white-space: nowrap;
}

/* Header right side */
body.cmw-v2 .header-nav .nav-icon {
    font-size: 16px;
    color: var(--cmw-muted);
    margin-right: 18px;
}

body.cmw-v2 .header-nav .nav-icon:hover { color: var(--cmw-ink); }

body.cmw-v2 .header-nav .badge-number {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 4px;
    inset: -4px -7px auto auto;
    background: var(--cmw-danger) !important;
    color: #fff !important;
    border-radius: 8px;
}

/* Language trigger — globe + code + chevron (mock 1a) */
body.cmw-v2 .cmw-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.cmw-v2 .cmw-lang-trigger .cmw-lang-code {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cmw-muted);
    letter-spacing: 0.02em;
}

body.cmw-v2 .cmw-lang-trigger .cmw-lang-chevron { font-size: 9px; color: var(--cmw-muted); }

/* Tenant chip */
body.cmw-v2 .cmw-navbar-tenant {
    background: var(--cmw-primary-tint);
    border-radius: 6px;
    padding: 3px 10px 3px 4px;
    margin-right: 16px;
    gap: 7px;
}

body.cmw-v2 .cmw-navbar-tenant .cmw-navbar-tenant-logo,
body.cmw-v2 .cmw-navbar-tenant .cmw-navbar-tenant-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--cmw-surface);
    border: 1px solid var(--cmw-border-strong);
    object-fit: contain;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--cmw-ink);
}

body.cmw-v2 .cmw-navbar-tenant-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cmw-muted);
}

/* Theme toggle */
body.cmw-v2 .cmw-theme-toggle {
    background: none;
    border: none;
    color: var(--cmw-muted);
    font-size: 15px;
    padding: 4px 6px;
    border-radius: 6px;
    margin-right: 12px;
    cursor: pointer;
    line-height: 1;
}

body.cmw-v2 .cmw-theme-toggle:hover { background: var(--cmw-neutral-bg); color: var(--cmw-ink); }

html[data-theme="dark"] body.cmw-v2 .cmw-theme-toggle { color: #f0b955; }

/* Profile — initials avatar treatment on the existing img + name */
body.cmw-v2 .header-nav .nav-profile { color: var(--cmw-text); }

body.cmw-v2 .header-nav .nav-profile img,
body.cmw-v2 .cmw-profile-avatar {
    max-height: 28px;
    width: 28px;
    height: 28px;
    object-fit: cover;
    background: var(--cmw-ink);
}

body.cmw-v2 .header-nav .nav-profile span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cmw-text);
}

body.cmw-v2 .cmw-dept-badge {
    font-size: 10.5px;
    font-weight: 600;
    background: var(--cmw-neutral-bg);
    color: var(--cmw-muted);
    border-radius: 999px;
}

/* Header dropdown panels */
body.cmw-v2 .header-nav .dropdown-menu,
body.cmw-v2 .dropdown-menu {
    border: 1px solid var(--cmw-border);
    border-radius: var(--cmw-radius-card);
    box-shadow: 0 12px 32px rgba(11, 28, 63, 0.12);
    font-size: 12.5px;
    background: var(--cmw-surface);
    color: var(--cmw-text);
}

body.cmw-v2 .dropdown-menu .dropdown-item {
    color: var(--cmw-text-2);
    font-size: 12.5px;
}

body.cmw-v2 .dropdown-menu .dropdown-item:hover,
body.cmw-v2 .dropdown-menu .dropdown-item:focus {
    background: var(--cmw-primary-tint);
    color: var(--cmw-primary);
}

body.cmw-v2 .dropdown-menu .dropdown-header,
body.cmw-v2 .dropdown-menu .dropdown-footer a {
    color: var(--cmw-muted);
}

body.cmw-v2 .dropdown-menu .dropdown-divider { border-color: var(--cmw-row-divider); opacity: 1; }

/* ==========================================================================
   4 · Sidebar (212px white, grouped, collapsible to 58px rail)
   ========================================================================== */
body.cmw-v2 .sidebar {
    top: var(--cmw-header-h);
    width: var(--cmw-sidebar-w);
    background: var(--cmw-surface);
    border-right: 1px solid var(--cmw-border);
    box-shadow: none;
    padding: 14px 8px 20px;
    transition: width 0.15s ease, left 0.3s;
    overflow-y: auto;
    scrollbar-width: thin;
}

@media (min-width: 1200px) {
    body.cmw-v2 #main, body.cmw-v2 #footer { margin-left: var(--cmw-sidebar-w); }
    body.cmw-v2.toggle-sidebar .sidebar { left: 0; width: var(--cmw-sidebar-rail-w); }
    body.cmw-v2.toggle-sidebar #main, body.cmw-v2.toggle-sidebar #footer { margin-left: var(--cmw-sidebar-rail-w); }
}

body.cmw-v2 .sidebar-nav .nav-item { margin-bottom: 1px; }

body.cmw-v2 .sidebar-nav .nav-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmw-muted-2);
    margin: 14px 0 4px 12px;
}

body.cmw-v2 .sidebar-nav .nav-item:first-child .nav-heading,
body.cmw-v2 .sidebar-nav > .nav-heading:first-child { margin-top: 0; }

body.cmw-v2 .sidebar-nav .nav-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cmw-text-2);
    background: transparent;
    padding: 8px 10px;
    border-radius: var(--cmw-radius-tool);
    gap: 9px;
    transition: none;
}

/* Mock 1a: nav labels never wrap to a second line */
body.cmw-v2 .sidebar-nav .nav-link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

body.cmw-v2 .sidebar-nav .nav-link i {
    font-size: 14px;
    margin-right: 0;
    color: var(--cmw-muted-2);
    flex: none;
}

body.cmw-v2 .sidebar-nav .nav-link { gap: 8px; }

body.cmw-v2 .sidebar-nav .nav-link .bi-chevron-down { flex: none; font-size: 9px; margin-left: auto; }

body.cmw-v2 .sidebar-nav .nav-link.collapsed {
    color: var(--cmw-text-2);
    background: transparent;
}

body.cmw-v2 .sidebar-nav .nav-link.collapsed i { color: var(--cmw-muted-2); }

body.cmw-v2 .sidebar-nav .nav-link:hover {
    background: var(--cmw-neutral-bg);
    color: var(--cmw-ink);
}

body.cmw-v2 .sidebar-nav .nav-link:hover i { color: var(--cmw-ink); }

/* Active item (non-collapsed top-level link = active section) */
body.cmw-v2 .sidebar-nav .nav-link:not(.collapsed) {
    background: var(--cmw-primary-tint);
    color: var(--cmw-primary);
    font-weight: 700;
}

body.cmw-v2 .sidebar-nav .nav-link:not(.collapsed) i { color: var(--cmw-primary); }

/* Sub-items */
body.cmw-v2 .sidebar-nav .nav-content { padding: 3px 0 6px; margin: 0; }

body.cmw-v2 .sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--cmw-text-2);
    padding: 6px 12px 6px 32px;
    border-radius: var(--cmw-radius-tool);
    transition: none;
}

body.cmw-v2 .sidebar-nav .nav-content a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

body.cmw-v2 .sidebar-nav .nav-content a i {
    font-size: 5px;
    margin-right: 8px;
    line-height: 0;
    color: var(--cmw-muted-2);
}

body.cmw-v2 .sidebar-nav .nav-content a:hover {
    background: var(--cmw-neutral-bg);
    color: var(--cmw-ink);
}

body.cmw-v2 .sidebar-nav .nav-content a.active {
    background: var(--cmw-primary-tint);
    color: var(--cmw-primary);
    font-weight: 600;
}

body.cmw-v2 .sidebar-nav .nav-content a.active i { color: var(--cmw-primary); }

/* Collapsed 58px rail: icons only, centered, tooltips via title attr */
@media (min-width: 1200px) {
    body.cmw-v2.toggle-sidebar .sidebar { padding: 14px 8px 20px; overflow-x: hidden; }

    body.cmw-v2.toggle-sidebar .sidebar-nav .nav-heading { display: none; }

    body.cmw-v2.toggle-sidebar .sidebar-nav .nav-link {
        justify-content: center;
        padding: 9px 0;
    }

    body.cmw-v2.toggle-sidebar .sidebar-nav .nav-link span,
    body.cmw-v2.toggle-sidebar .sidebar-nav .nav-link .bi-chevron-down { display: none; }

    body.cmw-v2.toggle-sidebar .sidebar-nav .nav-content a {
        justify-content: center;
        padding: 8px 0;
    }

    body.cmw-v2.toggle-sidebar .sidebar-nav .nav-content a span { display: none; }

    body.cmw-v2.toggle-sidebar .sidebar-nav .nav-content a i { font-size: 7px; margin: 0; }
}

/* ==========================================================================
   5 · Main area + tab strip
   ========================================================================== */
body.cmw-v2 #main {
    margin-top: var(--cmw-header-h);
    transition: margin-left 0.15s ease;
}

body.cmw-v2 #main.has-tabs { height: calc(100vh - var(--cmw-header-h)); }

/* Tab strip — browser-style tabs on #eff1f7, never wraps */
body.cmw-v2 .cmw-tab-bar-wrapper {
    position: relative;
    background: var(--cmw-tab-strip-bg);
    border-bottom: 1px solid var(--cmw-border);
    min-height: 38px;
    align-items: flex-end;
}

body.cmw-v2 .cmw-tab-bar {
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
    background: transparent;
    padding: 6px 4px 0 12px;
    gap: 4px;
    align-items: flex-end;
}

body.cmw-v2 .cmw-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--cmw-muted);
    min-width: 44px;
    max-width: 180px;
    flex: 0 1 auto;
    gap: 7px;
    transition: background-color 0.15s ease;
}

body.cmw-v2 .cmw-tab:hover { background: rgba(255, 255, 255, 0.6); color: var(--cmw-text); }

html[data-theme="dark"] body.cmw-v2 .cmw-tab:hover { background: rgba(255, 255, 255, 0.05); }

body.cmw-v2 .cmw-tab.active {
    background: var(--cmw-bg);
    border-color: var(--cmw-border);
    border-bottom: 1px solid var(--cmw-bg);
    margin-bottom: -1px;
    font-weight: 600;
    color: var(--cmw-text);
}

body.cmw-v2 .cmw-tab .cmw-tab-icon {
    font-size: 12px;
    color: var(--cmw-muted-2);
    flex: none;
    line-height: 1;
}

body.cmw-v2 .cmw-tab.active .cmw-tab-icon { color: var(--cmw-primary); }

body.cmw-v2 .cmw-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    min-width: 0;
}

body.cmw-v2 .cmw-tab-close {
    margin-left: 2px;
    font-size: 14px;
    color: var(--cmw-muted-2);
    opacity: 0.7;
    flex: none;
}

body.cmw-v2 .cmw-tab-close:hover {
    opacity: 1;
    background: var(--cmw-neutral-bg);
    color: var(--cmw-danger);
}

body.cmw-v2 .cmw-tab-updated { border-top: 2px solid var(--cmw-primary); }

body.cmw-v2 .cmw-tab-updated .cmw-tab-title { color: var(--cmw-primary); }

body.cmw-v2 .cmw-tab-placeholder {
    background: var(--cmw-primary-tint);
    border: 2px dashed var(--cmw-primary);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

/* Hidden (overflowed) tabs + the "+N more" menu */
body.cmw-v2 .cmw-tab.cmw-tab-overflowed { display: none; }

body.cmw-v2 .cmw-tab-overflow-btn {
    display: none;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--cmw-muted);
    font-family: var(--cmw-font-ui);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 8px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    flex: none;
    align-self: center;
}

body.cmw-v2 .cmw-tab-overflow-btn.visible { display: inline-flex; }

body.cmw-v2 .cmw-tab-overflow-btn:hover { background: rgba(255, 255, 255, 0.7); color: var(--cmw-ink); }

html[data-theme="dark"] body.cmw-v2 .cmw-tab-overflow-btn:hover { background: rgba(255, 255, 255, 0.06); }

body.cmw-v2 .cmw-tab-overflow-menu {
    position: absolute;
    z-index: 1050;
    min-width: 200px;
    max-width: 280px;
    background: var(--cmw-surface);
    border: 1px solid var(--cmw-border);
    border-radius: var(--cmw-radius-card);
    box-shadow: 0 12px 32px rgba(11, 28, 63, 0.16);
    padding: 5px;
    display: none;
}

body.cmw-v2 .cmw-tab-overflow-menu.open { display: block; }

body.cmw-v2 .cmw-tab-overflow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font-family: var(--cmw-font-ui);
    font-size: 12.5px;
    color: var(--cmw-text-2);
    padding: 7px 9px;
    border-radius: 6px;
    cursor: pointer;
}

body.cmw-v2 .cmw-tab-overflow-item:hover,
body.cmw-v2 .cmw-tab-overflow-item:focus-visible {
    background: var(--cmw-primary-tint);
    color: var(--cmw-primary);
}

body.cmw-v2 .cmw-tab-overflow-item i { font-size: 12px; color: var(--cmw-muted-2); flex: none; }

body.cmw-v2 .cmw-tab-overflow-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.cmw-v2 .cmw-tab-actions { padding: 0 10px; align-self: center; }

body.cmw-v2 .cmw-tab-action {
    width: auto;
    height: 26px;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cmw-muted-2);
    padding: 0 7px;
    border-radius: 6px;
}

body.cmw-v2 .cmw-tab-action:hover { background: var(--cmw-neutral-bg); color: var(--cmw-danger); }

body.cmw-v2 .cmw-tab-action .cmw-tab-action-label { white-space: nowrap; }

/* Iframe page body (inside tabs) */
body.cmw-v2.in-iframe { background: var(--cmw-bg); }

/* Page overlay */
body.cmw-v2 #cmw-page-overlay > div {
    border: 1px solid var(--cmw-border);
    border-radius: var(--cmw-radius-card);
    background: var(--cmw-surface) !important;
    color: var(--cmw-text);
    font-size: 12.5px;
}

/* ==========================================================================
   6 · Page furniture: titles, breadcrumbs, cards
   ========================================================================== */
body.cmw-v2 .pagetitle h1 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cmw-ink);
}

body.cmw-v2 .pagetitle .cmw-count {
    font-family: var(--cmw-font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--cmw-muted-2);
}

body.cmw-v2 .breadcrumb {
    font-size: 11.5px;
    color: var(--cmw-muted-2);
}

body.cmw-v2 .breadcrumb .breadcrumb-item a { color: var(--cmw-muted-2); }

body.cmw-v2 .breadcrumb .breadcrumb-item.active { color: var(--cmw-muted); }

body.cmw-v2 .card {
    border: 1px solid var(--cmw-border);
    border-radius: var(--cmw-radius-card);
    box-shadow: none;
    background: var(--cmw-surface);
    margin-bottom: 14px;
    color: var(--cmw-text);
}

body.cmw-v2 .card-title {
    font-family: var(--cmw-font-ui);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cmw-text);
    padding: 14px 0 10px 0;
}

body.cmw-v2 .card-title span { color: var(--cmw-muted-2); font-size: 12px; font-weight: 500; }

/* Card header band (mock 1a): a leading title gets a divider separating it
   from the card content. Stat cards and the navy live card stay divider-free. */
body.cmw-v2 .card-body > .card-title:first-child {
    border-bottom: 1px solid var(--cmw-row-divider);
    margin-bottom: 14px;
}

body.cmw-v2 .info-card .card-body > .card-title:first-child,
body.cmw-v2 .cmw-navy-card .card-body > .card-title:first-child {
    border-bottom: none;
    margin-bottom: 0;
}

body.cmw-v2 .info-card .card-title { padding: 12px 0 6px; }

body.cmw-v2 .cmw-navy-card .card-title { padding: 12px 0 8px; }

/* Dashboard stat cards (NiceAdmin .info-card) */
body.cmw-v2 .info-card .card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmw-muted);
    padding-bottom: 6px;
}

body.cmw-v2 .info-card h6 {
    font-family: var(--cmw-font-mono);
    font-size: 26px;
    font-weight: 600;
    color: var(--cmw-ink);
}

body.cmw-v2 .info-card .card-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 9px;
    background: var(--cmw-primary-tint) !important;
    color: var(--cmw-primary) !important;
}

body.cmw-v2 .info-card.revenue-card .card-icon { background: var(--cmw-success-bg) !important; color: var(--cmw-success) !important; }

body.cmw-v2 .info-card.customers-card .card-icon { background: var(--cmw-warning-bg) !important; color: var(--cmw-warning-icon) !important; }

/* Navy live-stats card (dashboard right rail, mock 1a) */
body.cmw-v2 .cmw-navy-card {
    background: var(--cmw-navy-card);
    border-color: var(--cmw-navy-card);
}

body.cmw-v2 .cmw-navy-card .card-title { color: #fff; }

body.cmw-v2 .cmw-navy-card .card-title span { color: #9fb0d4; }

body.cmw-v2 .cmw-navy-card .info-card {
    background: transparent;
    border: none !important;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
}

body.cmw-v2 .cmw-navy-card .info-card .card-body { padding: 8px 4px; }

body.cmw-v2 .cmw-navy-card .info-card .card-title {
    color: #9fb0d4;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    padding-bottom: 4px;
}

body.cmw-v2 .cmw-navy-card .info-card .card-icon { display: none !important; }

body.cmw-v2 .cmw-navy-card .info-card h6 {
    font-family: var(--cmw-font-mono);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

body.cmw-v2 .cmw-navy-card .bonded-tile + .bonded-tile .info-card {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.cmw-v2 .text-success { color: var(--cmw-success) !important; }

body.cmw-v2 .text-danger { color: var(--cmw-danger) !important; }

body.cmw-v2 .text-muted { color: var(--cmw-muted-2) !important; }

/* ==========================================================================
   7 · Buttons
   ========================================================================== */
body.cmw-v2 .btn {
    font-family: var(--cmw-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--cmw-radius-btn);
    padding: 7px 14px;
    line-height: 1.4;
    box-shadow: none !important;
}

body.cmw-v2 .btn:focus-visible { box-shadow: var(--cmw-focus-ring) !important; }

body.cmw-v2 .btn-primary,
body.cmw-v2 .btn-info {
    background: var(--cmw-primary);
    border-color: var(--cmw-primary);
    color: #fff;
}

body.cmw-v2 .btn-primary:hover, body.cmw-v2 .btn-primary:active, body.cmw-v2 .btn-primary:focus,
body.cmw-v2 .btn-info:hover, body.cmw-v2 .btn-info:active, body.cmw-v2 .btn-info:focus {
    background: var(--cmw-primary-hover);
    border-color: var(--cmw-primary-hover);
    color: #fff;
}

body.cmw-v2 .btn-secondary,
body.cmw-v2 .btn-outline-primary,
body.cmw-v2 .btn-outline-secondary,
body.cmw-v2 .btn-light,
body.cmw-v2 .btn-default {
    background: var(--cmw-surface);
    border: 1px solid var(--cmw-border-strong);
    color: var(--cmw-text);
}

body.cmw-v2 .btn-secondary:hover, body.cmw-v2 .btn-outline-primary:hover,
body.cmw-v2 .btn-outline-secondary:hover, body.cmw-v2 .btn-light:hover,
body.cmw-v2 .btn-default:hover {
    background: var(--cmw-surface);
    border-color: var(--cmw-primary);
    color: var(--cmw-primary);
}

body.cmw-v2 .btn-danger,
body.cmw-v2 .btn-outline-danger {
    background: var(--cmw-danger-bg);
    border-color: var(--cmw-danger-bg);
    color: var(--cmw-danger);
}

body.cmw-v2 .btn-danger:hover, body.cmw-v2 .btn-outline-danger:hover {
    background: var(--cmw-danger);
    border-color: var(--cmw-danger);
    color: #fff;
}

/* Navy gated action (Generate XML) */
body.cmw-v2 .btn-navy, body.cmw-v2 .btn-dark {
    background: var(--cmw-navy-card);
    border-color: var(--cmw-navy-card);
    color: #fff;
}

body.cmw-v2 .btn-navy:hover, body.cmw-v2 .btn-dark:hover {
    background: #142b57;
    border-color: #142b57;
    color: #fff;
}

html[data-theme="dark"] body.cmw-v2 .btn-navy,
html[data-theme="dark"] body.cmw-v2 .btn-dark {
    background: var(--cmw-primary);
    border-color: var(--cmw-primary);
}

body.cmw-v2 .btn:disabled, body.cmw-v2 .btn.disabled {
    background: var(--cmw-surface);
    border-color: var(--cmw-border-strong);
    color: #8a93a6;
    opacity: 1;
}

body.cmw-v2 .btn-sm {
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: var(--cmw-radius-tool);
}

/* ==========================================================================
   8 · Status badges — dot + pill, never colored text (R4)
   ========================================================================== */
body.cmw-v2 .cmw-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.35;
    white-space: nowrap;
}

body.cmw-v2 .cmw-badge .cmw-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: currentColor;
    flex: none;
}

body.cmw-v2 .cmw-badge--success { background: var(--cmw-success-bg); color: var(--cmw-success); }
body.cmw-v2 .cmw-badge--warning { background: var(--cmw-warning-bg); color: var(--cmw-warning); }
body.cmw-v2 .cmw-badge--danger { background: var(--cmw-danger-bg); color: var(--cmw-danger); }
body.cmw-v2 .cmw-badge--info { background: var(--cmw-info-bg); color: var(--cmw-info); }
body.cmw-v2 .cmw-badge--primary { background: var(--cmw-primary-tint); color: var(--cmw-primary); }
body.cmw-v2 .cmw-badge--neutral { background: var(--cmw-neutral-bg); color: var(--cmw-neutral); }

/* Restyle legacy Bootstrap badges to the pill spec */
body.cmw-v2 .badge.bg-success { background: var(--cmw-success-bg) !important; color: var(--cmw-success) !important; }
body.cmw-v2 .badge.bg-warning { background: var(--cmw-warning-bg) !important; color: var(--cmw-warning) !important; }
body.cmw-v2 .badge.bg-danger { background: var(--cmw-danger-bg) !important; color: var(--cmw-danger) !important; }
body.cmw-v2 .badge.bg-secondary { background: var(--cmw-neutral-bg) !important; color: var(--cmw-neutral) !important; }
body.cmw-v2 .badge.bg-info { background: var(--cmw-info-bg) !important; color: var(--cmw-info) !important; }

body.cmw-v2 .badge {
    font-weight: 600;
    font-size: 11px;
    border-radius: 999px;
    padding: 3px 9px;
}

/* Keep count badges on primary buttons legible */
body.cmw-v2 .btn .badge { font-family: var(--cmw-font-mono); }

/* Grid toolbar: selection chip + XML readiness note (mock 1d) */
body.cmw-v2 .cmw-sel-chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--cmw-primary);
    background: var(--cmw-primary-tint);
    border-radius: var(--cmw-radius-tool);
    padding: 6px 12px;
    margin-right: 6px;
    vertical-align: middle;
}

body.cmw-v2 .cmw-xml-ready-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--cmw-muted-2);
    margin-left: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

body.cmw-v2 .cmw-xml-ready-note i { color: var(--cmw-success); }

body.cmw-v2 .cmw-xml-ready-note--blocked i { color: var(--cmw-warning-icon); }

/* "+N more" pill (importer overflow) */
body.cmw-v2 .cmw-more-pill,
body.cmw-v2 .cmw-importeur-more {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--cmw-primary);
    background: var(--cmw-primary-tint);
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
    text-decoration: none;
}

/* ==========================================================================
   9 · Forms & inputs
   ========================================================================== */
body.cmw-v2 .form-label,
body.cmw-v2 label.col-form-label,
body.cmw-v2 .cmw-field-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmw-muted);
    margin-bottom: 5px;
}

body.cmw-v2 .form-control,
body.cmw-v2 .form-select {
    font-family: var(--cmw-font-ui);
    font-size: 13px;
    color: var(--cmw-text);
    background-color: var(--cmw-surface);
    border: 1px solid var(--cmw-border-strong);
    border-radius: var(--cmw-radius-btn);
    padding: 7px 12px;
}

body.cmw-v2 .form-control:focus,
body.cmw-v2 .form-select:focus {
    border-color: var(--cmw-primary);
    box-shadow: var(--cmw-focus-ring);
    background-color: var(--cmw-surface);
    color: var(--cmw-text);
}

body.cmw-v2 .form-control::placeholder { color: var(--cmw-muted-2); }

body.cmw-v2 .form-control:disabled, body.cmw-v2 .form-control[readonly] {
    background-color: var(--cmw-bg);
    color: var(--cmw-muted);
}

body.cmw-v2 .form-check-input {
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--cmw-control-border);
    border-radius: 4px;
}

body.cmw-v2 .form-check-input:checked {
    background-color: var(--cmw-primary);
    border-color: var(--cmw-primary);
}

body.cmw-v2 .form-check-input:focus { box-shadow: var(--cmw-focus-ring); border-color: var(--cmw-primary); }

body.cmw-v2 .invalid-feedback,
body.cmw-v2 .text-danger.field-validation-error {
    font-size: 11px;
    color: var(--cmw-danger);
}

body.cmw-v2 .is-invalid,
body.cmw-v2 input.input-validation-error {
    border: 1.5px solid var(--cmw-danger) !important;
    box-shadow: 0 0 0 3px rgba(179, 45, 45, 0.12) !important;
}

/* Select2 — match the input spec */
body.cmw-v2 .select2-container--bootstrap .select2-selection,
body.cmw-v2 .select2-container .select2-selection--single,
body.cmw-v2 .select2-container .select2-selection--multiple {
    font-size: 13px;
    border: 1px solid var(--cmw-border-strong);
    border-radius: var(--cmw-radius-btn);
    background: var(--cmw-surface);
    color: var(--cmw-text);
    box-shadow: none;
    min-height: 34px;
}

body.cmw-v2 .select2-container--bootstrap .select2-selection__rendered { color: var(--cmw-text); }

body.cmw-v2 .select2-container--bootstrap.select2-container--focus .select2-selection,
body.cmw-v2 .select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--cmw-primary);
    box-shadow: var(--cmw-focus-ring);
}

.select2-dropdown {
    border: 1px solid var(--cmw-border, #e3e7ef);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(11, 28, 63, 0.14);
    background: var(--cmw-surface, #fff);
    color: var(--cmw-text, #1a2233);
    font-size: 13px;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background: var(--cmw-primary, #2f5ce6);
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--cmw-border-strong, #d4dae6);
    border-radius: 6px;
}

/* ==========================================================================
   10 · Modals (Bootstrap + DataTables Editor)
   ========================================================================== */
body.cmw-v2 .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: var(--cmw-modal-shadow);
    background: var(--cmw-surface);
    color: var(--cmw-text);
}

body.cmw-v2 .modal-backdrop.show { opacity: 1; background: var(--cmw-overlay); }

body.cmw-v2 .modal-header {
    border-bottom: 1px solid var(--cmw-row-divider);
    padding: 14px 20px;
}

body.cmw-v2 .modal-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cmw-ink);
}

body.cmw-v2 .modal-footer {
    border-top: 1px solid var(--cmw-row-divider);
    background: var(--cmw-zebra);
    padding: 12px 20px;
    border-radius: 0 0 12px 12px;
}

/* DataTables Editor (bootstrap skin) */
body.cmw-v2 div.DTE_Header,
body.cmw-v2 div.DTE div.modal-header {
    border-bottom: 1px solid var(--cmw-row-divider);
}

body.cmw-v2 div.DTE_Footer { border-top: 1px solid var(--cmw-row-divider); background: var(--cmw-zebra); }

body.cmw-v2 div.DTE label,
body.cmw-v2 div.DTE_Field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmw-muted);
}

body.cmw-v2 div.DTE_Field input:not([type=checkbox]):not([type=radio]),
body.cmw-v2 div.DTE_Field select,
body.cmw-v2 div.DTE_Field textarea {
    font-size: 13px;
    border: 1px solid var(--cmw-border-strong);
    border-radius: var(--cmw-radius-btn);
    padding: 7px 12px;
    background: var(--cmw-surface);
    color: var(--cmw-text);
    width: 100%;
}

body.cmw-v2 div.DTE_Field input:focus,
body.cmw-v2 div.DTE_Field select:focus,
body.cmw-v2 div.DTE_Field textarea:focus {
    outline: none;
    border-color: var(--cmw-primary);
    box-shadow: var(--cmw-focus-ring);
}

body.cmw-v2 div.DTE_Field_Error,
body.cmw-v2 div.DTE div.DTE_Field div.multi-restore,
body.cmw-v2 div.DTE_Field .DTE_Field_Message {
    font-size: 11px;
    color: var(--cmw-danger);
}

body.cmw-v2 div.DTE_Field.DTE_Field_StateError input {
    border: 1.5px solid var(--cmw-danger);
    box-shadow: 0 0 0 3px rgba(179, 45, 45, 0.12);
}

body.cmw-v2 div.DTE_Form_Error { color: var(--cmw-danger); font-size: 12px; }

/* ==========================================================================
   11 · DataTables — dense grid spec (BS5 skin base)
   ========================================================================== */
body.cmw-v2 .dataTables_wrapper { font-size: 12.5px; color: var(--cmw-text); }

/* DataTables' own selection shading reads these RGB triplets */
body.cmw-v2 {
    --dt-row-selected: 238, 244, 255;
    --dt-row-selected-text: 26, 34, 51;
    --dt-row-selected-link: 47, 92, 230;
}

html[data-theme="dark"] body.cmw-v2 {
    --dt-row-selected: 26, 39, 66;
    --dt-row-selected-text: 231, 235, 244;
    --dt-row-selected-link: 109, 142, 247;
}

body.cmw-v2 table.dataTable {
    border-color: var(--cmw-border);
    color: var(--cmw-text);
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Header row */
body.cmw-v2 table.dataTable thead th,
body.cmw-v2 table.dataTable thead td {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmw-muted);
    background: var(--cmw-table-head-bg);
    border-bottom: 1px solid var(--cmw-border) !important;
    border-top: 1px solid var(--cmw-border);
    padding: 9px 12px;
    white-space: nowrap;
}

body.cmw-v2 table.dataTable thead th.sorting_asc,
body.cmw-v2 table.dataTable thead th.sorting_desc { color: var(--cmw-primary); }

/* Footer label rows: every DataTables-initialized grid's <tfoot> just
   duplicates the column names (no grid uses footerCallback; the two tables
   with real footer totals are plain .table elements, never .dataTable).
   The mock has no grid footers — hide them. */
body.cmw-v2 table.dataTable tfoot { display: none; }

/* Cells — 32–34px rows */
body.cmw-v2 table.dataTable tbody td {
    font-size: 12.5px;
    color: var(--cmw-text);
    padding: 7px 12px;
    border-bottom: 1px solid var(--cmw-row-divider);
    vertical-align: middle;
    background-color: transparent;
    box-shadow: none !important;
}

body.cmw-v2 table.dataTable tbody tr { background: var(--cmw-surface); }

body.cmw-v2 table.dataTable.stripe tbody tr.odd,
body.cmw-v2 table.dataTable.display tbody tr.odd,
body.cmw-v2 table.dataTable > tbody > tr:nth-of-type(odd) {
    background: var(--cmw-zebra);
}

body.cmw-v2 table.dataTable.hover tbody tr:hover,
body.cmw-v2 table.dataTable.display tbody tr:hover,
body.cmw-v2 table.dataTable > tbody > tr:hover {
    background: var(--cmw-row-hover);
}

/* Selection — tint + 3px primary left border (single selection model).
   Cell-level because the BS5 skin paints selection on cells. */
body.cmw-v2 table.dataTable tbody tr.selected,
body.cmw-v2 table.dataTable.display tbody tr.selected,
body.cmw-v2 table.dataTable > tbody > tr.selected {
    background: var(--cmw-selection-bg) !important;
    color: var(--cmw-text);
}

body.cmw-v2 table.dataTable tbody tr.selected td { color: var(--cmw-text); }

body.cmw-v2 table.dataTable > tbody > tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--cmw-primary) !important;
}

/* select-checkbox column */
body.cmw-v2 table.dataTable tr.selected td.select-checkbox:before,
body.cmw-v2 table.dataTable tr.selected th.select-checkbox:before { content: "✓"; color: #fff; }

body.cmw-v2 table.dataTable tbody td.select-checkbox:before,
body.cmw-v2 table.dataTable tbody th.select-checkbox:before {
    border: 1.5px solid var(--cmw-control-border);
    border-radius: 4px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
}

body.cmw-v2 table.dataTable tr.selected td.select-checkbox:before,
body.cmw-v2 table.dataTable tr.selected th.select-checkbox:before {
    background: var(--cmw-primary);
    border-color: var(--cmw-primary);
    text-align: center;
    font-size: 9px;
    line-height: 12px;
}

body.cmw-v2 table.dataTable tr.selected td.select-checkbox:after,
body.cmw-v2 table.dataTable tr.selected th.select-checkbox:after { content: none; }

/* Machine-data columns */
body.cmw-v2 table.dataTable td.cmw-col-mono,
body.cmw-v2 table.dataTable td.dt-type-numeric,
body.cmw-v2 table.dataTable td.dt-type-date {
    font-family: var(--cmw-font-mono);
    font-size: 12px;
}

/* Toolbar: length / filter / buttons / info / pagination */
body.cmw-v2 .dataTables_wrapper .dataTables_length,
body.cmw-v2 .dataTables_wrapper .dataTables_filter,
body.cmw-v2 .dataTables_wrapper .dataTables_info,
body.cmw-v2 .dataTables_wrapper .dataTables_paginate {
    font-size: 12px;
    color: var(--cmw-muted-2);
    padding-top: 6px;
    padding-bottom: 4px;
}

body.cmw-v2 .dataTables_wrapper .dataTables_info b,
body.cmw-v2 .dataTables_wrapper .dataTables_info strong { color: var(--cmw-text); }

body.cmw-v2 .dataTables_wrapper .dataTables_filter input {
    font-size: 12px;
    border: 1px solid var(--cmw-border-strong);
    border-radius: var(--cmw-radius-tool);
    padding: 5px 10px;
    background: var(--cmw-surface);
    color: var(--cmw-text);
    margin-left: 6px;
    width: 190px;
}

body.cmw-v2 .dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--cmw-primary);
    box-shadow: var(--cmw-focus-ring);
}

body.cmw-v2 .dataTables_wrapper .dataTables_length select {
    font-size: 12px;
    border: 1px solid var(--cmw-border-strong);
    border-radius: var(--cmw-radius-tool);
    padding: 4px 24px 4px 8px;
    background-color: var(--cmw-surface);
    color: var(--cmw-text);
}

/* Grid toolbar buttons. DataTables emits .dt-button; the views tag semantic
   classes (create / edit / overview / delete / generatexml) plus the export
   trio (buttons-copy / buttons-excel / buttons-print). */
body.cmw-v2 .dataTables_wrapper .dt-buttons .btn,
body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cmw-text);
    background: var(--cmw-surface);
    border: 1px solid var(--cmw-border-strong);
    padding: 6px 12px;
    margin-right: 6px;
    border-radius: var(--cmw-radius-tool);
    box-shadow: none;
    transition: none;
}

body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button:hover:not(.disabled) {
    background: var(--cmw-surface);
    border-color: var(--cmw-primary);
    color: var(--cmw-primary);
}

body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.disabled,
body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button:disabled {
    color: #8a93a6;
    background: var(--cmw-surface);
    border-color: var(--cmw-border-strong);
    opacity: 1;
    cursor: not-allowed;
}

/* Primary action (New …) */
body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.create:not(.disabled) {
    background: var(--cmw-primary);
    border-color: var(--cmw-primary);
    color: #fff;
}

body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.create:hover:not(.disabled) {
    background: var(--cmw-primary-hover);
    border-color: var(--cmw-primary-hover);
    color: #fff;
}

/* Destructive (red tint) */
body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.delete:not(.disabled) {
    background: var(--cmw-danger-bg);
    border-color: var(--cmw-danger-bg);
    color: var(--cmw-danger);
}

body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.delete:hover:not(.disabled) {
    background: var(--cmw-danger);
    border-color: var(--cmw-danger);
    color: #fff;
}

/* Gated navy action (Generate XML) */
body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.generatexml:not(.disabled) {
    background: var(--cmw-navy-card);
    border-color: var(--cmw-navy-card);
    color: #fff;
}

body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.generatexml:hover:not(.disabled) {
    background: #142b57;
    border-color: #142b57;
    color: #fff;
}

html[data-theme="dark"] body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.generatexml:not(.disabled) {
    background: var(--cmw-primary);
    border-color: var(--cmw-primary);
}

/* Export trio: quiet segmented group */
body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.buttons-copy {
    border-radius: var(--cmw-radius-tool) 0 0 var(--cmw-radius-tool);
    margin-right: 0;
    font-size: 11.5px;
    color: var(--cmw-muted);
}

body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.buttons-excel {
    border-radius: 0;
    border-left: none;
    margin-right: 0;
    font-size: 11.5px;
    color: var(--cmw-muted);
}

body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.buttons-print {
    border-radius: 0 var(--cmw-radius-tool) var(--cmw-radius-tool) 0;
    border-left: none;
    font-size: 11.5px;
    color: var(--cmw-muted);
}

body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.buttons-copy:hover:not(.disabled),
body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.buttons-excel:hover:not(.disabled),
body.cmw-v2 .dataTables_wrapper div.dt-buttons .dt-button.buttons-print:hover:not(.disabled) {
    background: var(--cmw-neutral-bg);
    border-color: var(--cmw-border-strong);
    color: var(--cmw-ink);
}

/* Pagination */
body.cmw-v2 .dataTables_wrapper .pagination { --bs-pagination-focus-box-shadow: var(--cmw-focus-ring); }

body.cmw-v2 .dataTables_wrapper .pagination .page-link,
body.cmw-v2 .dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 12px;
    color: var(--cmw-muted);
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    margin: 0 1px;
    background: transparent;
}

body.cmw-v2 .dataTables_wrapper .pagination .page-item.active .page-link,
body.cmw-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.cmw-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cmw-primary) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700;
}

body.cmw-v2 .dataTables_wrapper .pagination .page-link:hover,
body.cmw-v2 .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cmw-neutral-bg) !important;
    color: var(--cmw-ink) !important;
    border: none !important;
}

body.cmw-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.cmw-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--cmw-control-border) !important;
    background: transparent !important;
}

/* Classic-skin leftovers (transition safety): kill the gradient header */
body.cmw-v2 table.dataTable thead .sorting,
body.cmw-v2 table.dataTable thead .sorting_asc,
body.cmw-v2 table.dataTable thead .sorting_desc {
    background-color: var(--cmw-table-head-bg);
}

/* Scroll containment */
body.cmw-v2 .dataTables_wrapper .dataTables_scrollBody { border-bottom: 1px solid var(--cmw-row-divider) !important; }

/* ==========================================================================
   12 · Outlook three-panel workspace (Container Overview)
   ========================================================================== */
body.cmw-v2 .outlook-container { gap: 0; }

body.cmw-v2 .outlook-panel {
    background: var(--cmw-surface);
    border: 1px solid var(--cmw-border) !important;
    border-radius: var(--cmw-radius-card);
    box-shadow: none;
}

body.cmw-v2 .outlook-panel .panel-header {
    background: var(--cmw-surface);
    border-bottom: 1px solid var(--cmw-row-divider);
    padding: 10px 13px;
}

body.cmw-v2 .outlook-panel .panel-header-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cmw-text);
}

body.cmw-v2 .outlook-panel .panel-header-title i { color: var(--cmw-primary); font-size: 13px; }

body.cmw-v2 .outlook-panel .panel-header-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 6px;
    border: 1px solid var(--cmw-border);
    background: var(--cmw-surface);
    color: var(--cmw-muted);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.cmw-v2 .outlook-panel .panel-header-btn:hover {
    background: var(--cmw-primary-tint);
    color: var(--cmw-primary);
    border-color: var(--cmw-primary-tint);
}

/* Tree rows (customers / invoices / lines) — selection = tint + 1px border */
body.cmw-v2 .tree-item {
    border-radius: 7px;
    border: 1px solid transparent;
    color: var(--cmw-text);
}

body.cmw-v2 .tree-item:hover { background: var(--cmw-row-hover); }

body.cmw-v2 .tree-item.selected,
body.cmw-v2 .tree-item.selected:hover {
    background: var(--cmw-selection-bg);
    border-color: var(--cmw-selection-border);
    color: var(--cmw-text);
}

body.cmw-v2 .tree-item:focus-visible {
    outline: none;
    border-color: var(--cmw-primary);
    box-shadow: var(--cmw-focus-ring);
}

body.cmw-v2 .tree-item-primary { font-size: 12px; font-weight: 600; color: var(--cmw-text); }

body.cmw-v2 .tree-item.selected .tree-item-primary { color: var(--cmw-text); font-weight: 700; }

body.cmw-v2 .tree-item-secondary { font-size: 10.5px; color: var(--cmw-muted-2); }

body.cmw-v2 .tree-item-tertiary { font-family: var(--cmw-font-mono); font-size: 10.5px; }

/* Summary/settings tiles (Manifest Entry header) */
body.cmw-v2 .summary-tile {
    background: var(--cmw-surface);
    border: 1px solid var(--cmw-border);
    border-radius: var(--cmw-radius-btn);
    box-shadow: none;
}

body.cmw-v2 .summary-tile-icon { color: var(--cmw-primary); }

body.cmw-v2 .summary-tile-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmw-muted-2);
}

body.cmw-v2 .summary-tile-value { font-size: 12px; font-weight: 600; color: var(--cmw-text); }

/* Split.js gutters */
body.cmw-v2 .gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
}

body.cmw-v2 .gutter:hover { background-color: var(--cmw-primary-tint); }

/* Amount check footer */
body.cmw-v2 .cmw-amount-check--ok { background: var(--cmw-amount-ok-bg); }

body.cmw-v2 .cmw-amount-check--bad { background: var(--cmw-danger-bg); }

/* Container/Invoice amount-check sub-panels (Overview): the JS toggles
   bg-success / bg-danger on the header and border-* on the card — restyle
   those states to the tinted spec instead of solid Bootstrap colors. */
body.cmw-v2 .outlook-panel .card { margin-bottom: 0; }

body.cmw-v2 .outlook-panel .card-header.bg-success {
    background: var(--cmw-amount-ok-bg) !important;
    color: var(--cmw-success) !important;
    font-size: 11.5px;
    font-weight: 700;
    border-bottom: none;
}

body.cmw-v2 .outlook-panel .card-header.bg-danger {
    background: var(--cmw-danger-bg) !important;
    color: var(--cmw-danger) !important;
    font-size: 11.5px;
    font-weight: 700;
    border-bottom: none;
}

body.cmw-v2 .outlook-panel .card-header.bg-success .btn,
body.cmw-v2 .outlook-panel .card-header.bg-danger .btn { color: inherit; background: transparent; border: none; }

body.cmw-v2 .outlook-panel .card.border-success { border-color: #bfe6d0 !important; }

body.cmw-v2 .outlook-panel .card.border-danger { border-color: #f1c4c4 !important; }

body.cmw-v2 .outlook-panel .card.border-success .card-body { background: var(--cmw-amount-ok-bg); font-size: 11.5px; }

body.cmw-v2 .outlook-panel .card.border-danger .card-body { background: var(--cmw-danger-bg); font-size: 11.5px; }

body.cmw-v2 #containerTotalDisplay, body.cmw-v2 #containerRegisteredTotal, body.cmw-v2 #containerDifference,
body.cmw-v2 #invoiceTotalDisplay, body.cmw-v2 #invoiceRegisteredTotal, body.cmw-v2 #invoiceDifference {
    font-family: var(--cmw-font-mono);
    font-weight: 600;
}

/* ==========================================================================
   13 · Drop zones (OCR import) — whole panel is the click target
   ========================================================================== */
body.cmw-v2 .cmw-drop-zone,
body.cmw-v2 .cmw-manifest-drop-zone {
    border: 1.5px dashed var(--cmw-selection-border);
    border-radius: var(--cmw-radius-card);
    background: var(--cmw-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.cmw-v2 .cmw-drop-zone:hover,
body.cmw-v2 .cmw-drop-zone.dragover,
body.cmw-v2 .cmw-drop-zone.drag-over,
body.cmw-v2 .cmw-manifest-drop-zone:hover,
body.cmw-v2 .cmw-manifest-drop-zone.dragover {
    border-color: var(--cmw-primary);
    background: #f7f9ff;
}

html[data-theme="dark"] body.cmw-v2 .cmw-drop-zone:hover,
html[data-theme="dark"] body.cmw-v2 .cmw-drop-zone.dragover,
html[data-theme="dark"] body.cmw-v2 .cmw-drop-zone.drag-over,
html[data-theme="dark"] body.cmw-v2 .cmw-manifest-drop-zone:hover,
html[data-theme="dark"] body.cmw-v2 .cmw-manifest-drop-zone.dragover {
    background: var(--cmw-selection-bg);
}

/* Manifest OCR zone layout: icon chip left, copy right (mock 1e) */
body.cmw-v2 .cmw-manifest-drop-zone {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    align-items: center;
    text-align: left;
    padding: 18px 22px;
}

body.cmw-v2 .cmw-manifest-drop-zone .cmw-drop-icon {
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--cmw-primary-tint);
    color: var(--cmw-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

body.cmw-v2 .cmw-manifest-drop-zone .cmw-drop-text {
    font-size: 12.5px;
    color: var(--cmw-muted);
}

body.cmw-v2 .cmw-manifest-drop-zone .cmw-drop-text b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--cmw-text);
}

body.cmw-v2 .cmw-manifest-drop-zone small {
    font-family: var(--cmw-font-mono);
    font-size: 11px;
    color: var(--cmw-muted-2) !important;
}

/* Excel mode (manifest selected): success-tinted variant */
body.cmw-v2 .cmw-manifest-drop-zone.excel-mode {
    border-color: #9fd4b6;
    background: var(--cmw-surface);
}

body.cmw-v2 .cmw-manifest-drop-zone.excel-mode .cmw-drop-icon {
    background: var(--cmw-success-bg);
    color: var(--cmw-success);
}

body.cmw-v2 .cmw-manifest-drop-zone.excel-mode:hover,
body.cmw-v2 .cmw-manifest-drop-zone.excel-mode.dragover {
    border-color: var(--cmw-success);
    background: var(--cmw-amount-ok-bg);
}

body.cmw-v2 .cmw-drop-icon,
body.cmw-v2 .cmw-drop-zone-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--cmw-primary-tint);
    color: var(--cmw-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

/* ==========================================================================
   14 · Toasts, alerts, progress
   ========================================================================== */
body.cmw-v2 .alert { border-radius: var(--cmw-radius-card); font-size: 12.5px; border: 1px solid transparent; }

body.cmw-v2 .alert-success { background: var(--cmw-success-bg); color: var(--cmw-success); border-color: var(--cmw-success-bg); }

body.cmw-v2 .alert-warning { background: var(--cmw-warning-bg); color: var(--cmw-warning); border-color: var(--cmw-warning-bg); }

body.cmw-v2 .alert-danger { background: var(--cmw-danger-bg); color: var(--cmw-danger); border-color: var(--cmw-danger-bg); }

body.cmw-v2 .alert-info { background: var(--cmw-info-bg); color: var(--cmw-info); border-color: var(--cmw-info-bg); }

body.cmw-v2 .progress {
    height: 5px;
    border-radius: 3px;
    background: var(--cmw-neutral-bg);
}

body.cmw-v2 .progress-bar { background-color: var(--cmw-primary); }

body.cmw-v2 .progress-bar.bg-success { background-color: var(--cmw-success) !important; }

body.cmw-v2 .progress-bar.bg-warning { background-color: var(--cmw-warning-icon) !important; }

body.cmw-v2 .progress-bar.bg-danger { background-color: var(--cmw-danger) !important; }

/* ==========================================================================
   15 · Dark-mode fixups for third-party chrome
   ========================================================================== */
html[data-theme="dark"] body.cmw-v2 .header,
html[data-theme="dark"] body.cmw-v2 .sidebar {
    background: var(--cmw-surface);
}

html[data-theme="dark"] body.cmw-v2 .logo span { color: #fff; }

html[data-theme="dark"] body.cmw-v2 img.cmw-logo-tile,
html[data-theme="dark"] body.cmw-v2 .logo img {
    background: #fff;
    border-radius: 7px;
    padding: 3px;
    height: 34px;
    width: 34px;
    max-height: 34px;
    margin-left: 0;
}

html[data-theme="dark"] body.cmw-v2 .logo span { margin-left: 8px; font-size: 15px; }

html[data-theme="dark"] body.cmw-v2 .logo span .cmw-wordmark-accent {
    color: var(--cmw-azure);
    margin-left: 0;
    font-size: inherit;
}

html[data-theme="dark"] body.cmw-v2 .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aeb7cb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] body.cmw-v2 .modal-content,
html[data-theme="dark"] body.cmw-v2 .card { background: var(--cmw-surface); }

html[data-theme="dark"] body.cmw-v2 table.dataTable tbody tr { background: var(--cmw-surface); }

html[data-theme="dark"] body.cmw-v2 #cmw-page-overlay { background: rgba(8, 12, 24, 0.6) !important; }

/* ==========================================================================
   16 · Auth screens (body.cmw-auth) — login 1g
   ========================================================================== */
/* Auth pages don't load Bootstrap, so there's no global border-box reset —
   without it, width:100% inputs grow by their padding/border and stop
   lining up with the submit button. */
body.cmw-auth,
body.cmw-auth *,
body.cmw-auth *::before,
body.cmw-auth *::after {
    box-sizing: border-box;
}

body.cmw-auth {
    margin: 0;
    font-family: var(--cmw-font-ui);
    font-size: 13.5px;
    color: var(--cmw-text);
    background: #f6f7fb;
    min-height: 100vh;
}

.cmw-auth-split {
    display: flex;
    min-height: 100vh;
}

/* Brand panel — light gradient, never navy (logo needs a light surface) */
.cmw-auth-brand {
    width: 46%;
    background: linear-gradient(165deg, #ffffff 0%, #eef3fc 55%, #dfe9fa 100%);
    border-right: 1px solid #e3e7ef;
    padding: 44px 46px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.cmw-auth-brand-ring-1 {
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 60px solid rgba(30, 143, 255, 0.08);
    pointer-events: none;
}

.cmw-auth-brand-ring-2 {
    position: absolute;
    right: 60px;
    top: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 40px solid rgba(47, 92, 230, 0.08);
    pointer-events: none;
}

.cmw-auth-brand-lockup { display: flex; align-items: center; }

.cmw-auth-brand-lockup img {
    width: 124px;
    height: 124px;
    object-fit: contain;
    margin: -30px -8px -26px -22px;
}

.cmw-auth-brand-lockup span {
    font-size: 37px;
    font-weight: 800;
    color: #0b1c3f;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

.cmw-auth-brand-lockup .cmw-wordmark-accent { color: #1e8fff; }

.cmw-auth-brand-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cmw-auth-headline {
    font-size: 27px;
    font-weight: 800;
    color: #0b1c3f;
    line-height: 1.25;
    letter-spacing: -0.01em;
    max-width: 340px;
}

/* Auth pages don't load Bootstrap — provide the utility the controller uses */
body.cmw-auth .d-none { display: none !important; }

.cmw-auth-subline {
    font-size: 13px;
    color: #5c6577;
    line-height: 1.6;
    max-width: 420px;
}

.cmw-auth-chips { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }

.cmw-auth-chip {
    font-size: 11px;
    font-weight: 600;
    color: #3a4356;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cmw-auth-chip i { color: #2f5ce6; }

/* Form column */
.cmw-auth-form-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f7fb;
    padding: 32px 24px;
}

.cmw-auth-form {
    width: 360px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cmw-auth-form-logo {
    width: 380px;
    max-width: 100%;
    height: 315px;
    object-fit: contain;
    align-self: center;
    margin: -75px 0 -18px;
}

.cmw-auth-title { font-size: 21px; font-weight: 700; color: #0b1c3f; }

.cmw-auth-title-sub { font-size: 12.5px; color: #667085; margin-top: 3px; }

.cmw-auth-field { display: flex; flex-direction: column; gap: 6px; }

.cmw-auth-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5c6577;
}

.cmw-auth-label-row { display: flex; justify-content: space-between; align-items: baseline; }

/* Forgot-password link sits below the password box, right-aligned. */
.cmw-auth-forgot { text-align: right; margin-top: 6px; }

.cmw-auth-input {
    font-family: var(--cmw-font-ui);
    font-size: 13.5px;
    padding: 10px 13px;
    border-radius: 8px;
    border: 1px solid #d4dae6;
    background: #fff;
    color: #1a2233;
    outline: none;
    width: 100%;
}

.cmw-auth-input:focus {
    border-color: #2f5ce6;
    box-shadow: 0 0 0 3px rgba(47, 92, 230, 0.15);
}

.cmw-auth-link {
    font-size: 11.5px;
    font-weight: 600;
    color: #2f5ce6;
    text-decoration: none;
}

.cmw-auth-link:hover { color: #2549c8; }

.cmw-auth-caps {
    font-size: 11px;
    color: #8a5507;
    display: none;
    align-items: center;
    gap: 5px;
}

.cmw-auth-caps.visible { display: inline-flex; }

.cmw-auth-error {
    font-size: 12px;
    color: #b32d2d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cmw-auth-error:empty { display: none; }

.cmw-auth-success { font-size: 12px; color: #157347; }

.cmw-auth-submit {
    font-family: var(--cmw-font-ui);
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px;
    border-radius: 8px;
    border: none;
    background: #2f5ce6;
    color: #fff;
    cursor: pointer;
    width: 100%;
}

.cmw-auth-submit:hover { background: #2549c8; }

.cmw-auth-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    color: #667085;
}

.cmw-auth-footer .cmw-auth-lang {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: #667085;
    font-size: 10.5px;
    font-family: var(--cmw-font-ui);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.cmw-auth-footer .cmw-auth-lang:hover { color: #1a2233; }

/* MFA extras */
.cmw-auth-qr {
    display: flex;
    justify-content: center;
    background: #fff;
    border: 1px solid #e3e7ef;
    border-radius: 10px;
    padding: 16px;
}

.cmw-auth-secret {
    font-family: var(--cmw-font-mono);
    font-size: 13px;
    color: #0b1c3f;
    background: #fff;
    border: 1px solid #d4dae6;
    border-radius: 8px;
    padding: 8px 12px;
    letter-spacing: 0.08em;
    word-break: break-all;
}

.cmw-auth-otp {
    font-family: var(--cmw-font-mono);
    font-size: 18px;
    letter-spacing: 0.35em;
    text-align: center;
}

.cmw-auth-title i { color: #2f5ce6; }

.cmw-auth-processing {
    position: fixed;
    inset: 0;
    background: rgba(246, 247, 251, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    font-size: 13px;
    color: #3a4356;
}

/* Small screens: stack, hide brand panel decoration */
@media (max-width: 900px) {
    .cmw-auth-brand { display: none; }
    .cmw-auth-form-logo { height: 220px; margin: -40px 0 -10px; }
}

/* ==========================================================================
   16b · Getting Started system tab content
   ========================================================================== */
body.cmw-v2 .cmw-getting-started-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.cmw-v2 .cmw-whats-new-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.cmw-v2 .cmw-whats-new-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cmw-text-2);
}

body.cmw-v2 .cmw-whats-new-list li i {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--cmw-primary-tint);
    color: var(--cmw-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

body.cmw-v2 .cmw-whats-new-list li b { color: var(--cmw-text); }

/* Onboarding wizard (own shell tab) */
body.cmw-v2 .cmw-wizard { display: flex; flex-direction: column; gap: 0; }

/* Wizard cards carry no leading .card-title, so give their bodies the top
   padding NiceAdmin's card-body (padding-top: 0) expects a title to provide. */
body.cmw-v2 .cmw-wizard-step .card-body { padding-top: 18px; }

body.cmw-v2 .cmw-wizard-progress-row { padding-top: 16px; }

body.cmw-v2 .cmw-wizard-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

body.cmw-v2 .cmw-wizard-progress { width: 320px; max-width: 100%; margin-top: 6px; }

body.cmw-v2 .cmw-wizard-progress-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmw-muted);
}

body.cmw-v2 .cmw-wizard-complete {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cmw-success);
    background: var(--cmw-success-bg);
    border-radius: 999px;
    padding: 6px 14px;
}

body.cmw-v2 .cmw-wizard-step-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

body.cmw-v2 .cmw-wizard-step-check i {
    font-size: 20px;
    color: var(--cmw-control-border);
    line-height: 1;
}

body.cmw-v2 .cmw-wizard-step--done .cmw-wizard-step-check i { color: var(--cmw-success); }

body.cmw-v2 .cmw-wizard-step-title { font-size: 13.5px; font-weight: 700; color: var(--cmw-text); }

body.cmw-v2 .cmw-wizard-step--done .cmw-wizard-step-title { color: var(--cmw-muted); }

body.cmw-v2 .cmw-wizard-optional {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmw-muted-2);
    background: var(--cmw-neutral-bg);
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

body.cmw-v2 .cmw-wizard-step-sub { font-size: 12.5px; color: var(--cmw-muted); margin-top: 2px; line-height: 1.5; }

body.cmw-v2 .cmw-wizard-step-count {
    margin-left: auto;
    font-family: var(--cmw-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--cmw-muted-2);
    padding-top: 2px;
}

body.cmw-v2 .cmw-wizard-quickform {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    margin-left: 32px;
    max-width: 640px;
    flex-wrap: wrap;
}

body.cmw-v2 .cmw-wizard-quickform .form-control { width: 160px; }

body.cmw-v2 .cmw-wizard-quickform .cmw-wizard-grow { flex: 1; min-width: 200px; }

body.cmw-v2 .cmw-wizard-step-actions { margin-top: 12px; margin-left: 32px; }

body.cmw-v2 .cmw-manual-slice {
    background: var(--cmw-surface);
    border: 1px solid var(--cmw-border);
    border-radius: var(--cmw-radius-card);
    padding: 20px 26px;
}

/* ==========================================================================
   17 · Accessibility & motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.cmw-v2 .sidebar,
    body.cmw-v2 #main,
    body.cmw-v2 .cmw-tab,
    body.cmw-v2 .cmw-drop-zone,
    body.cmw-v2 .cmw-manifest-drop-zone {
        transition: none !important;
    }

    body.cmw-v2 .cmw-tab-updated .cmw-tab-title { animation: none !important; }
}

/* Hit targets ≥ 24×24: row action icons */
body.cmw-v2 .cmw-row-action {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cmw-muted-2);
    font-size: 11px;
    cursor: pointer;
    border: none;
    background: transparent;
}

body.cmw-v2 .cmw-row-action--edit:hover { background: var(--cmw-primary-tint); color: var(--cmw-primary); }

body.cmw-v2 .cmw-row-action--delete:hover { background: var(--cmw-danger-bg); color: var(--cmw-danger); }

/* Print: keep the report output plain */
@media print {
    body.cmw-v2 .header,
    body.cmw-v2 .sidebar,
    body.cmw-v2 .cmw-tab-bar-wrapper { display: none !important; }

    body.cmw-v2 #main { margin: 0 !important; }
}