@charset "UTF-8";
/* ==========================================================================
   Meem ERP — Design System
   --------------------------------------------------------------------------
   Single source of truth for the visual language of the ERP shell and every
   module. Loaded LAST (after style.css, page CSS, responsive.css and
   mobile-ux.css) so its tokens and component rules win consistently.

   Sections
     1. Tokens (light / dark)          9. Badges & status
     2. Legacy token bridge           10. Alerts & messages
     3. Base                          11. Tabs & segmented controls
     4. App shell & sidebar           12. Modals, popovers, dropdowns
     5. Topbar                        13. Module-specific harmonisation
     6. Page header & layout          14. Dark-mode fixes for inline styles
     7. Surfaces & buttons            15. Responsive
     8. Forms & tables                16. Auth screens / print safety
   ========================================================================== */

/* 1. Tokens ================================================================ */
:root {
    color-scheme: light;

    /* Neutrals */
    --ds-bg: #f5f6f8;
    --ds-surface: #ffffff;
    --ds-surface-2: #f8f9fb;
    --ds-surface-3: #f1f3f6;
    --ds-surface-inset: #f3f4f7;
    --ds-sidebar-bg: #fbfbfc;
    --ds-overlay: rgba(16, 24, 40, 0.42);

    --ds-border: #e5e7eb;
    --ds-border-strong: #d4d8df;
    --ds-divider: #eef0f3;

    --ds-text: #111827;
    --ds-text-2: #344054;
    --ds-muted: #667085;
    --ds-subtle: #98a2b3;

    /* Brand */
    --ds-primary: #0e7a70;
    --ds-primary-hover: #0b675e;
    --ds-primary-active: #09564f;
    --ds-primary-soft: rgba(14, 122, 112, 0.09);
    --ds-primary-soft-2: rgba(14, 122, 112, 0.15);
    --ds-primary-fg: #ffffff;
    --ds-primary-text: #0b675e;
    --ds-primary-rgb: 14, 122, 112;
    --ds-focus-ring: 0 0 0 3px rgba(14, 122, 112, 0.22);

    /* Secondary accent (charts, info highlights) */
    --ds-secondary: #3e5c9a;
    --ds-secondary-soft: rgba(62, 92, 154, 0.1);

    /* Semantic */
    --ds-success: #0f7b55;
    --ds-success-soft: rgba(15, 123, 85, 0.09);
    --ds-success-border: rgba(15, 123, 85, 0.22);
    --ds-warning: #a65b06;
    --ds-warning-soft: rgba(221, 128, 18, 0.11);
    --ds-warning-border: rgba(221, 128, 18, 0.28);
    --ds-danger: #c8321f;
    --ds-danger-soft: rgba(200, 50, 31, 0.08);
    --ds-danger-border: rgba(200, 50, 31, 0.24);
    --ds-info: #1e5fbf;
    --ds-info-soft: rgba(30, 95, 191, 0.08);
    --ds-info-border: rgba(30, 95, 191, 0.22);
    --ds-neutral-soft: rgba(16, 24, 40, 0.05);

    /* Elevation */
    --ds-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --ds-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
    --ds-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --ds-shadow-lg: 0 18px 40px -8px rgba(16, 24, 40, 0.18), 0 4px 10px -4px rgba(16, 24, 40, 0.06);

    /* Shape */
    --ds-r-xs: 4px;
    --ds-r-sm: 6px;
    --ds-r: 8px;
    --ds-r-lg: 10px;
    --ds-r-xl: 12px;
    --ds-r-pill: 999px;

    /* Spacing scale (4px grid) */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;

    /* Typography */
    --ds-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans Arabic", Tahoma, sans-serif;
    --ds-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
    --ds-fs-2xs: 11px;
    --ds-fs-xs: 12px;
    --ds-fs-sm: 12.5px;
    --ds-fs-base: 13.5px;
    --ds-fs-md: 14px;
    --ds-fs-lg: 16px;
    --ds-fs-xl: 18px;
    --ds-fs-2xl: 20px;
    --ds-fs-3xl: 24px;
    --ds-fw-regular: 400;
    --ds-fw-medium: 500;
    --ds-fw-semibold: 600;
    --ds-fw-bold: 700;
    --ds-lh: 1.5;

    /* Motion */
    --ds-ease: cubic-bezier(0.2, 0, 0, 1);
    --ds-dur-fast: 120ms;
    --ds-dur: 180ms;
    --ds-dur-slow: 240ms;
    --ds-transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);

    /* Layout */
    --ds-sidebar-w: 240px;
    --ds-sidebar-w-collapsed: 64px;
    --ds-topbar-h: 56px;
    --ds-page-max: 1680px;
    --ds-page-pad-x: 28px;
    --ds-page-pad-y: 24px;
    --ds-control-h: 36px;
    --ds-control-h-sm: 30px;
    --ds-control-h-lg: 40px;
    --ds-row-h: 40px;

    /* Sidebar palette */
    --ds-nav-text: #475467;
    --ds-nav-text-strong: #111827;
    --ds-nav-icon: #667085;
    --ds-nav-hover: rgba(16, 24, 40, 0.045);
    --ds-nav-active-bg: rgba(14, 122, 112, 0.09);
    --ds-nav-active-text: #0b675e;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --ds-bg: #0c0e11;
    --ds-surface: #131619;
    --ds-surface-2: #171a1e;
    --ds-surface-3: #1d2126;
    --ds-surface-inset: #0f1114;
    --ds-sidebar-bg: #0f1114;
    --ds-overlay: rgba(0, 0, 0, 0.6);

    --ds-border: rgba(255, 255, 255, 0.075);
    --ds-border-strong: rgba(255, 255, 255, 0.13);
    --ds-divider: rgba(255, 255, 255, 0.055);

    --ds-text: #e8eaed;
    --ds-text-2: #c5cad1;
    --ds-muted: #8d96a3;
    --ds-subtle: #646d79;

    --ds-primary: #2fb3a2;
    --ds-primary-hover: #45c4b3;
    --ds-primary-active: #5ad0c0;
    --ds-primary-soft: rgba(47, 179, 162, 0.12);
    --ds-primary-soft-2: rgba(47, 179, 162, 0.2);
    --ds-primary-fg: #04201c;
    --ds-primary-text: #5fd3c3;
    --ds-primary-rgb: 47, 179, 162;
    --ds-focus-ring: 0 0 0 3px rgba(47, 179, 162, 0.28);

    --ds-secondary: #8ea8e0;
    --ds-secondary-soft: rgba(142, 168, 224, 0.12);

    --ds-success: #4cc993;
    --ds-success-soft: rgba(76, 201, 147, 0.11);
    --ds-success-border: rgba(76, 201, 147, 0.26);
    --ds-warning: #f0aa55;
    --ds-warning-soft: rgba(240, 170, 85, 0.11);
    --ds-warning-border: rgba(240, 170, 85, 0.28);
    --ds-danger: #f1776b;
    --ds-danger-soft: rgba(241, 119, 107, 0.11);
    --ds-danger-border: rgba(241, 119, 107, 0.28);
    --ds-info: #78aefc;
    --ds-info-soft: rgba(120, 174, 252, 0.11);
    --ds-info-border: rgba(120, 174, 252, 0.26);
    --ds-neutral-soft: rgba(255, 255, 255, 0.06);

    --ds-shadow-xs: none;
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ds-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --ds-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);

    --ds-nav-text: #a3abb6;
    --ds-nav-text-strong: #e8eaed;
    --ds-nav-icon: #7e8794;
    --ds-nav-hover: rgba(255, 255, 255, 0.045);
    --ds-nav-active-bg: rgba(47, 179, 162, 0.12);
    --ds-nav-active-text: #6ad8c9;
}

/* 2. Legacy token bridge ====================================================
   style.css and page stylesheets reference these names; mapping them here
   makes every existing component follow the new palette in both themes. */
:root,
:root[data-theme="dark"] {
    --bg: var(--ds-bg);
    --panel: var(--ds-surface);
    --panel-alt: var(--ds-surface-2);
    --panel-soft: var(--ds-surface);
    --border: var(--ds-border);
    --text: var(--ds-text);
    --muted: var(--ds-muted);
    --nav: var(--ds-sidebar-bg);
    --nav-soft: var(--ds-surface-3);
    --nav-text: var(--ds-nav-text);
    --primary: var(--ds-primary);
    --primary-strong: var(--ds-primary-hover);
    --primary-light: var(--ds-primary);
    --primary-soft: var(--ds-primary-soft);
    --danger: var(--ds-danger);
    --danger-soft: var(--ds-danger-soft);
    --success: var(--ds-success);
    --success-soft: var(--ds-success-soft);
    --warning: var(--ds-warning);
    --warning-soft: var(--ds-warning-soft);
    --shadow: var(--ds-shadow-sm);
    --shadow-sm: var(--ds-shadow-xs);
    --shadow-topbar: none;
    --shadow-footer: none;
    --gradient-start: var(--ds-bg);
    --gradient-glow: transparent;
    --topbar-bg: var(--ds-surface);
    --topbar-border: var(--ds-border);
    --input-placeholder: var(--ds-subtle);
    --user-bg: var(--ds-surface);
    --user-border: var(--ds-border);
    --backdrop: var(--ds-overlay);
    --brand-divider: var(--ds-border-strong);
    --ghost-bg: transparent;
    --ghost-bg-hover: var(--ds-neutral-soft);
    --danger-border: var(--ds-danger-border);
    --danger-hover: var(--ds-danger-soft);
    --message-success-text: var(--ds-success);
    --message-success-border: var(--ds-success-border);
    --message-error-text: var(--ds-danger);
    --message-error-border: var(--ds-danger-border);
    --message-info-text: var(--ds-info);
    --message-info-bg: var(--ds-info-soft);
    --message-info-border: var(--ds-info-border);
    --message-warning-text: var(--ds-warning);
    --message-warning-border: var(--ds-warning-border);
    --table-header: var(--ds-surface-2);
    --table-zebra: transparent;
    --table-hover: var(--ds-surface-2);
    --kpi-blue-bg: var(--ds-info-soft);
    --kpi-blue-text: var(--ds-info);
    --kpi-green-bg: var(--ds-success-soft);
    --kpi-green-text: var(--ds-success);
    --kpi-orange-bg: var(--ds-warning-soft);
    --kpi-orange-text: var(--ds-warning);
    --kpi-purple-bg: var(--ds-secondary-soft);
    --kpi-purple-text: var(--ds-secondary);
    --radius: var(--ds-r-lg);
    --radius-sm: var(--ds-r);
    --radius-lg: var(--ds-r-xl);
    --sidebar-width: var(--ds-sidebar-w);
    --topbar-space: var(--ds-topbar-h);
    --footer-space: 0px;
    --page-max-width: var(--ds-page-max);
    --control-height: var(--ds-control-h);
    --font-ui: var(--ds-font);

    /* Aliases referenced by CRM / module templates without a definition */
    --border-color: var(--ds-border);
    --surface-subtle: var(--ds-surface-2);
    --text-color: var(--ds-text);
    --accent: var(--ds-primary);
    --border-subtle: var(--ds-divider);
    --border-soft: var(--ds-divider);
    --color-border: var(--ds-border);
    --surface: var(--ds-surface);
    --surface-2: var(--ds-surface-2);
    --surface-color: var(--ds-surface);
    --panel-bg: var(--ds-surface);
    --bg-subtle: var(--ds-surface-2);
    --color-background: var(--ds-surface);
    --color-background-accent: var(--ds-primary-soft);
    --text-primary: var(--ds-text);
    --text-muted: var(--ds-muted);
    --color-text-light: var(--ds-muted);
    --color-primary: var(--ds-primary);
    --primary-color: var(--ds-primary);
    --primary-hover: var(--ds-primary-hover);
    --primary-rgb: var(--ds-primary-rgb);
    --danger-color: var(--ds-danger);
    --warning-text: var(--ds-warning);

    /* CRM stylesheet palette follows the system */
    --crm-primary: var(--ds-primary);
    --crm-primary-soft: var(--ds-primary-soft);
    --crm-success: var(--ds-success);
    --crm-success-soft: var(--ds-success-soft);
    --crm-warning: var(--ds-warning);
    --crm-warning-soft: var(--ds-warning-soft);
    --crm-danger: var(--ds-danger);
    --crm-danger-soft: var(--ds-danger-soft);
    --crm-purple: var(--ds-secondary);
    --crm-purple-soft: var(--ds-secondary-soft);
    --crm-card-bg: var(--ds-surface);
    --crm-card-border: var(--ds-border);
    --crm-text-primary: var(--ds-text);
    --crm-text-secondary: var(--ds-text-2);
    --crm-text-muted: var(--ds-muted);
    --crm-bg-column: var(--ds-surface-2);
    --crm-panel-bg: var(--ds-surface);
}

/* 3. Base ================================================================== */
html {
    background: var(--ds-bg);
    -webkit-text-size-adjust: 100%;
}

body,
body.app-shell {
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font);
    font-size: var(--ds-fs-base);
    line-height: var(--ds-lh);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ds-text);
    font-weight: var(--ds-fw-semibold);
    letter-spacing: -0.005em;
    line-height: 1.3;
}

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
    letter-spacing: 0;
}

::selection {
    background: var(--ds-primary-soft-2);
}

:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--ds-border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--ds-border-strong);
    border-radius: var(--ds-r-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ds-subtle); }

code, kbd, pre, .code-block { font-family: var(--ds-font-mono); }

hr { border: 0; border-top: 1px solid var(--ds-border); }

.text-muted { color: var(--ds-muted) !important; }
.text-success { color: var(--ds-success) !important; }
.text-danger { color: var(--ds-danger) !important; }
.text-warning { color: var(--ds-warning) !important; }
.text-primary { color: var(--ds-primary-text) !important; }
.num, .text-numeric { font-variant-numeric: tabular-nums; }

/* SVG icon primitive used across shell */
.ds-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ds-icon--sm { width: 16px; height: 16px; }
.ds-icon--xs { width: 14px; height: 14px; }

/* 4. App shell & sidebar ==================================================== */
.shell-layout {
    min-height: 100vh;
    /* No isolated stacking context: the drawer (z 50) must sit above the
       page-level backdrop (z 45) on tablet/mobile. */
    isolation: auto;
}

.shell-backdrop {
    background: var(--ds-overlay);
    z-index: 45;
    transition: opacity var(--ds-dur) var(--ds-ease), visibility var(--ds-dur) var(--ds-ease);
}

html[dir] .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: var(--ds-sidebar-w);
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--ds-sidebar-bg);
    color: var(--ds-nav-text);
    border: 0;
    border-inline-end: 1px solid var(--ds-border);
    box-shadow: none;
    z-index: 50;
    overflow: visible;
    text-align: start;
    transition: width var(--ds-dur-slow) var(--ds-ease), transform var(--ds-dur-slow) var(--ds-ease), visibility var(--ds-dur-slow);
}

.sidebar__header {
    display: flex;
    align-items: center;
    height: var(--ds-topbar-h);
    padding-inline: 16px 12px;
    border-bottom: 1px solid var(--ds-border);
    flex: 0 0 auto;
    overflow: hidden;
}

.sidebar .sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    color: var(--ds-text);
}

/* The brand PNGs ship on large padded canvases; crop to the artwork. */
.brand-crop {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    overflow: hidden;
}

.brand-crop img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    transform: translate(-50%, -50%);
}

.brand-crop--meem { width: 92px; height: 24px; }
.brand-crop--meem img { height: 88px; width: auto; margin-top: 1px; }
.brand-crop--sap { width: 40px; height: 20px; }
.brand-crop--sap img { height: 41px; width: auto; margin-left: 1px; }

.sidebar__brand-divider {
    width: 1px;
    height: 18px;
    background: var(--ds-border-strong);
    flex: 0 0 auto;
}

.sidebar__brand-mono {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: var(--ds-r);
    background: linear-gradient(135deg, #6a4cc0 0%, #2fa9a0 52%, #f0705c 100%);
    color: #fff;
    font-size: 18px;
    font-weight: var(--ds-fw-bold);
    line-height: 1;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
    flex: 0 0 auto;
}

.sidebar .sidebar__scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px 16px;
    scrollbar-color: transparent transparent;
}

.sidebar .sidebar__scroll:hover {
    scrollbar-color: var(--ds-border-strong) transparent;
}

.sidebar .sidebar__scroll::-webkit-scrollbar-thumb { background-color: transparent; }
.sidebar .sidebar__scroll:hover::-webkit-scrollbar-thumb { background-color: var(--ds-border-strong); }

.sidebar .nav-group__title {
    margin: 0 0 6px;
    padding-inline: 10px;
    font-size: var(--ds-fs-2xs);
    font-weight: var(--ds-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-subtle);
    white-space: nowrap;
}

html[lang="ar"] .sidebar .nav-group__title { letter-spacing: 0; }

.nav-list,
.nav-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-node + .nav-node { margin-top: 2px; }

.nav-item-row {
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding-inline: 10px;
    margin: 0;
    border: 0;
    border-radius: var(--ds-r);
    background: transparent;
    color: var(--ds-nav-text);
    font-size: var(--ds-fs-md);
    font-weight: var(--ds-fw-medium);
    text-align: start;
    box-shadow: none;
    transform: none;
    transition: var(--ds-transition);
}

.sidebar .nav-item:hover {
    background: var(--ds-nav-hover);
    color: var(--ds-nav-text-strong);
    transform: none;
}

.sidebar .nav-item .nav-item__icon {
    display: inline-flex;
    color: var(--ds-nav-icon);
    transition: color var(--ds-dur-fast) var(--ds-ease);
}

.sidebar .nav-item:hover .nav-item__icon { color: var(--ds-nav-text-strong); }

.sidebar .nav-item__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .nav-node.is-active > .nav-item-row > .nav-item,
.sidebar .nav-item.is-active {
    background: var(--ds-nav-active-bg);
    color: var(--ds-nav-active-text);
    font-weight: var(--ds-fw-semibold);
    border: 0;
    box-shadow: none;
}

.sidebar .nav-node.is-active > .nav-item-row > .nav-item .nav-item__icon,
.sidebar .nav-item.is-active .nav-item__icon {
    color: var(--ds-nav-active-text);
}

.nav-item__toggle {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    color: var(--ds-nav-active-text);
}

.nav-item__toggle:hover { background: var(--ds-primary-soft); }

.nav-item__toggle .ds-icon {
    transition: transform var(--ds-dur) var(--ds-ease);
}

.nav-node:not(.is-open) > .nav-item-row .nav-item__toggle .ds-icon { transform: rotate(-90deg); }
html[dir="rtl"] .nav-node:not(.is-open) > .nav-item-row .nav-item__toggle .ds-icon { transform: rotate(90deg); }

.nav-node.has-children > .nav-item-row > .nav-item { padding-inline-end: 34px; }

.nav-sub {
    position: relative;
    margin: 2px 0 6px;
    padding-inline-start: 19px;
}

.nav-node:not(.is-open) > .nav-sub { display: none; }

.nav-sub::before {
    content: "";
    position: absolute;
    inset-block: 2px;
    inset-inline-start: 19px;
    width: 1px;
    background: var(--ds-border);
}

.sidebar .subnav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    margin: 1px 0 0;
    padding: 0;
    padding-inline: 14px 8px;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-nav-text);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-regular);
    text-align: start;
    box-shadow: none;
    transform: none;
    transition: var(--ds-transition);
}

.sidebar .subnav-item + .subnav-item { margin-top: 1px; }

.sidebar .subnav-item:hover {
    background: var(--ds-nav-hover);
    color: var(--ds-nav-text-strong);
    transform: none;
}

.sidebar .subnav-item.is-active {
    color: var(--ds-nav-text-strong);
    font-weight: var(--ds-fw-semibold);
    background: var(--ds-nav-hover);
    border: 0;
    box-shadow: none;
}

.sidebar .subnav-item.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -1px;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 2px;
    background: var(--ds-primary);
}

.sidebar .subnav-item .subnav-item__badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 4px;
    border-radius: var(--ds-r-xs);
    background: var(--ds-surface-3);
    color: var(--ds-muted);
    font-size: 10px;
    font-weight: var(--ds-fw-bold);
    letter-spacing: 0.02em;
    border: 0;
}

.sidebar .subnav-item__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__footer {
    flex: 0 0 auto;
    padding: 8px 10px 12px;
    border-top: 1px solid var(--ds-border);
}

.sidebar__collapse {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding-inline: 10px;
    border: 0;
    border-radius: var(--ds-r);
    background: transparent;
    color: var(--ds-muted);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    cursor: pointer;
    transition: var(--ds-transition);
}

.sidebar__collapse:hover {
    background: var(--ds-nav-hover);
    color: var(--ds-nav-text-strong);
}

.sidebar__collapse span { white-space: nowrap; overflow: hidden; }
html[dir="rtl"] .sidebar__collapse .ds-icon { transform: scaleX(-1); }

/* Floating tooltip (positioned by main.js, lives outside the scroll area) */
.nav-tooltip {
    position: fixed;
    z-index: 200;
    padding: 5px 9px;
    border-radius: var(--ds-r-sm);
    background: #111827;
    color: #f9fafb;
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-medium);
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--ds-shadow-md);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}

:root[data-theme="dark"] .nav-tooltip {
    background: #2a2f36;
    color: #f2f4f6;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), var(--ds-shadow-md);
}

.nav-tooltip.is-visible { opacity: 1; transform: none; }

/* Workspace */
.workspace {
    min-width: 0;
    min-height: 100vh;
    padding-bottom: 0;
    overflow-x: clip;
    transition: margin var(--ds-dur-slow) var(--ds-ease);
}

/* Desktop: persistent sidebar ------------------------------------------- */
@media (min-width: 1024px) {
    html[dir] .sidebar {
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }

    .workspace { margin-inline-start: var(--ds-sidebar-w); }

    .shell-backdrop { display: none; }

    .app-shell .topbar .menu-toggle,
    .app-shell .topbar .topbar__brand { display: none; }

    /* Icon-only rail */
    html.is-sidebar-collapsed .sidebar { width: var(--ds-sidebar-w-collapsed); }
    html.is-sidebar-collapsed .workspace { margin-inline-start: var(--ds-sidebar-w-collapsed); }

    html.is-sidebar-collapsed .sidebar__header { padding-inline: 0; justify-content: center; }
    html.is-sidebar-collapsed .sidebar__brand .sidebar__logo,
    html.is-sidebar-collapsed .sidebar__brand .sidebar__brand-divider { display: none; }
    html.is-sidebar-collapsed .sidebar__brand { justify-content: center; }
    html.is-sidebar-collapsed .sidebar__brand-mono { display: inline-flex; }

    html.is-sidebar-collapsed .sidebar .sidebar__scroll { padding-inline: 10px; }
    html.is-sidebar-collapsed .sidebar .nav-group__title {
        height: 1px;
        margin: 0 6px 10px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        background: var(--ds-border);
    }

    html.is-sidebar-collapsed .sidebar .nav-item {
        justify-content: center;
        padding: 0;
        width: 44px;
        height: 38px;
        margin-inline: auto;
    }

    html.is-sidebar-collapsed .sidebar .nav-node.has-children > .nav-item-row > .nav-item { padding: 0; }
    html.is-sidebar-collapsed .sidebar .nav-item__label,
    html.is-sidebar-collapsed .sidebar .nav-item__toggle,
    html.is-sidebar-collapsed .sidebar .subnav-item__label,
    html.is-sidebar-collapsed .sidebar__collapse span { display: none; }

    html.is-sidebar-collapsed .nav-node > .nav-sub {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 4px 0 6px;
        margin: 2px 0 4px;
        border-radius: var(--ds-r);
        background: var(--ds-nav-hover);
    }

    html.is-sidebar-collapsed .nav-sub::before { display: none; }

    html.is-sidebar-collapsed .sidebar .subnav-item {
        justify-content: center;
        width: 38px;
        height: 28px;
        padding: 0;
        margin: 0;
    }

    html.is-sidebar-collapsed .sidebar .subnav-item.is-active::before {
        inset-inline-start: -3px;
        top: 6px;
        bottom: 6px;
    }

    html.is-sidebar-collapsed .sidebar .subnav-item .subnav-item__badge {
        display: inline-flex;
        background: transparent;
        min-width: 0;
    }

    html.is-sidebar-collapsed .sidebar .subnav-item.is-active .subnav-item__badge {
        color: var(--ds-nav-active-text);
        background: var(--ds-nav-active-bg);
    }

    html.is-sidebar-collapsed .sidebar__collapse {
        justify-content: center;
        padding: 0;
    }

    html.is-sidebar-collapsed .sidebar__collapse .ds-icon { transform: scaleX(-1); }
    html.is-sidebar-collapsed[dir="rtl"] .sidebar__collapse .ds-icon { transform: none; }
}

/* Tablet & mobile: off-canvas drawer ------------------------------------- */
@media (max-width: 1023.98px) {
    html[dir] .sidebar {
        width: min(280px, calc(100vw - 48px));
        visibility: hidden;
        pointer-events: none;
        box-shadow: var(--ds-shadow-lg);
    }

    html[dir="ltr"] .sidebar { transform: translate3d(-100%, 0, 0); }
    html[dir="rtl"] .sidebar { transform: translate3d(100%, 0, 0); }

    .app-shell.is-sidebar-open .sidebar,
    html[dir] .app-shell.is-sidebar-open .sidebar {
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar__footer { display: none; }
}

/* 5. Topbar ================================================================ */
.app-shell .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-height: var(--ds-topbar-h);
    height: var(--ds-topbar-h);
    padding-block: 0;
    padding-inline: var(--ds-page-pad-x);
    background: color-mix(in srgb, var(--ds-bg) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--ds-border);
    box-shadow: none;
}

.topbar .topbar__main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
}

.topbar .topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0;
}

.topbar .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r);
    background: var(--ds-surface);
    color: var(--ds-text-2);
    box-shadow: none;
    cursor: pointer;
}

.topbar .menu-toggle:hover { background: var(--ds-surface-2); }

.topbar .topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.topbar__brand .brand-crop--meem { width: 80px; height: 22px; }
.topbar__brand .brand-crop--meem img { height: 78px; }
.topbar__brand .topbar__brand-divider { width: 1px; height: 16px; background: var(--ds-border-strong); }

.topbar__crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--ds-fs-md);
    color: var(--ds-muted);
    white-space: nowrap;
}

.topbar__crumbs a,
.topbar__crumbs span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar__crumbs a:hover { color: var(--ds-text); }

.topbar__crumbs .ds-icon { color: var(--ds-subtle); }
html[dir="rtl"] .topbar__crumbs .ds-icon { transform: scaleX(-1); }

.topbar__crumbs strong {
    color: var(--ds-text);
    font-weight: var(--ds-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Theme switcher — compact segmented icon control */
.topbar .theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r);
    background: var(--ds-surface);
    box-shadow: none;
}

.topbar .theme-switcher__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-muted);
    box-shadow: none;
    cursor: pointer;
    transition: var(--ds-transition);
}

.topbar .theme-switcher__button:hover { color: var(--ds-text); background: var(--ds-surface-2); }

.topbar .theme-switcher__button.is-active {
    background: var(--ds-surface-3);
    color: var(--ds-text);
    box-shadow: none;
}

:root[data-theme="dark"] .topbar .theme-switcher__button.is-active { background: rgba(255, 255, 255, 0.09); }

.topbar .theme-switcher__icon { width: 15px; height: 15px; }

.topbar .theme-switcher__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Language switcher (signed-out only) */
.topbar .language-switcher {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    height: 32px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r);
    background: var(--ds-surface);
}

.topbar .language-switcher__button {
    min-width: 32px;
    height: 26px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-muted);
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-semibold);
    cursor: pointer;
}

.topbar .language-switcher__button.is-active { background: var(--ds-surface-3); color: var(--ds-text); }

/* User menu */
.user-menu {
    position: relative;
}

.user-menu > summary {
    list-style: none;
}

.user-menu > summary::-webkit-details-marker { display: none; }

.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding-inline: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--ds-r);
    color: var(--ds-text);
    cursor: pointer;
    transition: var(--ds-transition);
    user-select: none;
}

.user-menu__trigger:hover,
.user-menu[open] > .user-menu__trigger {
    background: var(--ds-surface);
    border-color: var(--ds-border);
}

.user-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ds-r-sm);
    background: var(--ds-primary-soft-2);
    color: var(--ds-primary-text);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-bold);
    flex: 0 0 auto;
}

.user-menu__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: start;
    min-width: 0;
}

.user-menu__meta strong {
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-semibold);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__meta small {
    font-size: var(--ds-fs-2xs);
    color: var(--ds-muted);
}

.user-menu__trigger > .ds-icon { color: var(--ds-subtle); }

.user-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 60;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-lg);
}

:root[data-theme="dark"] .user-menu__panel { background: var(--ds-surface-2); }

.user-menu__head {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ds-divider);
}

.user-menu__head strong { display: block; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-semibold); }
.user-menu__head small { color: var(--ds-muted); font-size: var(--ds-fs-xs); }

.user-menu__item,
.topbar__logout-form .user-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-text-2);
    font-size: var(--ds-fs-md);
    font-weight: var(--ds-fw-medium);
    text-align: start;
    cursor: pointer;
    transition: var(--ds-transition);
}

.user-menu__item:hover { background: var(--ds-surface-3); color: var(--ds-text); }
.user-menu__item .ds-icon { color: var(--ds-muted); }
.user-menu__item--danger { color: var(--ds-danger); }
.user-menu__item--danger .ds-icon { color: var(--ds-danger); }
.user-menu__item--danger:hover { background: var(--ds-danger-soft); color: var(--ds-danger); }

.topbar .topbar__logout-form { display: block; margin: 0; }

/* 6. Page header & layout =================================================== */
.app-shell .page-shell {
    width: 100%;
    max-width: var(--ds-page-max);
    margin: 0 auto;
    padding-block: var(--ds-page-pad-y) 48px;
    padding-inline: var(--ds-page-pad-x);
}

.app-shell .page-shell:has(.payment-layout),
.app-shell .page-shell:has(.invoice-document-form) {
    max-width: none;
    padding-inline: var(--ds-page-pad-x);
}

.page-shell:has(.crm-pipeline-viewport) {
    height: calc(100vh - var(--ds-topbar-h)) !important;
}

/* The page header: hero, users-header and CRM headers share one treatment. */
.page-shell .hero,
.page-shell .hero--compact,
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 20px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
}

.page-shell .hero > div:first-child,
.page-header__titles { min-width: 0; flex: 1 1 320px; }

.page-shell .hero .section-tag,
.page-header .section-tag { display: none; }

.page-shell .section-title,
.page-header__title,
.page-shell .users-header__title {
    margin: 0;
    font-size: var(--ds-fs-2xl);
    font-weight: var(--ds-fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ds-text);
}

.page-shell .section-copy,
.page-header__subtitle,
.page-shell .users-header__subtitle {
    margin: 4px 0 0;
    max-width: 760px;
    font-size: var(--ds-fs-md);
    line-height: 1.5;
    color: var(--ds-muted);
}

.page-shell .hero__actions,
.page-shell .users-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 1 auto;
    margin: 0;
}

.page-shell .hero__actions form,
.page-shell .users-header__actions form { margin: 0; }

.page-shell .users-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.page-shell .users-header__tag { display: none; }
.page-shell .users-page > .users-header { margin-bottom: 0; }

.page-shell .users-page {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    padding-bottom: 0;
}

/* Grid/flex children must be allowed to shrink so wide tables scroll inside
   their own wrapper instead of pushing the page sideways. */
.page-shell .document-form,
.page-shell .invoice-document-form,
.page-shell .financial-document-form,
.page-shell .invoice-erp-card {
    grid-template-columns: minmax(0, 1fr);
}

/* Document header grids: keep proportions, drop the hard pixel minimums
   that overflowed once the persistent sidebar took its share of width. */
.page-shell .invoice-form-grid--header { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.6fr) minmax(0, 0.9fr); }
.page-shell .invoice-form-grid--dates { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.page-shell .invoice-form-grid--remarks { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }

@media (max-width: 1279.98px) {
    .page-shell .invoice-form-grid--header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-shell .invoice-form-grid--header > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .page-shell .invoice-form-grid--header,
    .page-shell .invoice-form-grid--remarks { grid-template-columns: minmax(0, 1fr); }
}

.page-shell .document-form > *,
.page-shell .invoice-erp-card > *,
.page-shell > *,
.page-shell .users-page > *,
.page-shell .layout-grid > *,
.page-shell .payment-layout > * { min-width: 0; }

.page-shell .eyebrow {
    font-size: var(--ds-fs-2xs);
    font-weight: var(--ds-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

.layout-grid { gap: 16px; margin-bottom: 16px; }

.metric-grid,
.users-kpi-grid,
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.metric-grid--three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 7. Surfaces ================================================================ */
.page-shell .panel,
.page-shell .data-panel,
.page-shell .payment-card,
.page-shell .invoice-erp-card,
.page-shell .invoice-lines-card,
.page-shell .form-section,
.page-shell .detail-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-xs);
    backdrop-filter: none;
}

.page-shell .panel {
    padding: 20px;
    overflow: visible;
}

.page-shell .panel + .panel { margin-top: 16px; }

/* Nested surfaces flatten instead of stacking boxes */
.page-shell .panel .panel,
.page-shell .panel--nested,
.page-shell .panel .form-section,
.page-shell .panel .payment-card,
.page-shell .payment-card .payment-card,
.page-shell .users-modal .panel {
    background: var(--ds-surface-2);
    border-color: var(--ds-divider);
    box-shadow: none;
    border-radius: var(--ds-r-lg);
}

:root[data-theme="dark"] .page-shell .panel .panel,
:root[data-theme="dark"] .page-shell .panel--nested,
:root[data-theme="dark"] .page-shell .panel .form-section,
:root[data-theme="dark"] .page-shell .panel .payment-card {
    background: rgba(255, 255, 255, 0.018);
}

.page-shell .panel__header,
.page-shell .panel-header,
.page-shell .payment-card__header,
.page-shell .form-section__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px 16px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
}

.page-shell .panel__header h3,
.page-shell .panel-header h3,
.page-shell .payment-card__header h4,
.page-shell .form-section__header h4,
.page-shell .invoice-lines-header h3 {
    margin: 0;
    font-size: var(--ds-fs-lg);
    font-weight: var(--ds-fw-semibold);
    line-height: 1.35;
    color: var(--ds-text);
}

.page-shell .panel__header p,
.page-shell .panel-header p,
.page-shell .payment-card__header p,
.page-shell .form-section__header p,
.page-shell .invoice-lines-header p {
    margin: 2px 0 0;
    font-size: var(--ds-fs-sm);
    line-height: 1.5;
    color: var(--ds-muted);
}

/* Stat / KPI tiles */
.page-shell .metric-card,
.page-shell .users-kpi-card,
.page-shell .kpi-card,
.page-shell .stat-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    height: auto;
    padding: 14px 16px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-xs);
    backdrop-filter: none;
    overflow: hidden;
}

.page-shell .metric-card__label,
.page-shell .users-kpi-card__label,
.page-shell .kpi-label {
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-muted);
    text-transform: none;
    letter-spacing: 0;
}

.page-shell .metric-card__value,
.page-shell .users-kpi-card__value,
.page-shell .kpi-value {
    font-size: var(--ds-fs-3xl);
    font-weight: var(--ds-fw-semibold);
    line-height: 1.25;
    color: var(--ds-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.page-shell .metric-card__caption,
.page-shell .users-kpi-card__caption {
    margin: 0;
    font-size: var(--ds-fs-xs);
    line-height: 1.45;
    color: var(--ds-muted);
}

/* Launcher tiles (reports / document types) */
.page-shell .module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 0;
}

.page-shell .module-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 0;
    padding: 14px 16px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: none;
    color: var(--ds-text);
    transition: var(--ds-transition);
}

.page-shell a.module-card:hover {
    border-color: var(--ds-border-strong);
    background: var(--ds-surface-2);
    transform: none;
    box-shadow: none;
}

.page-shell .module-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: var(--ds-r);
    background: var(--ds-primary-soft);
    color: var(--ds-primary-text);
    font-size: var(--ds-fs-2xs);
    font-weight: var(--ds-fw-bold);
    letter-spacing: 0.02em;
    border: 0;
    box-shadow: none;
}

.page-shell .module-card h4 { margin: 0 0 2px; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-semibold); }
.page-shell .module-card p { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-muted); line-height: 1.5; }
.page-shell .module-card.is-muted { opacity: 0.55; }

/* Buttons =================================================================== */
.button,
.btn-erp,
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--ds-control-h);
    min-height: var(--ds-control-h);
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--ds-r);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-family: inherit;
    font-size: var(--ds-fs-md);
    font-weight: var(--ds-fw-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transform: none;
    transition: var(--ds-transition);
}

.button:hover,
.btn-erp:hover,
.action-btn:hover { transform: none; }

.button:focus-visible,
.btn-erp:focus-visible,
.action-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}

.button--primary,
.btn-erp--primary,
.action-btn.primary,
.invoice-submit-button {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: var(--ds-primary-fg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.button--primary:hover,
.btn-erp--primary:hover,
.action-btn.primary:hover,
.invoice-submit-button:hover {
    background: var(--ds-primary-hover);
    border-color: var(--ds-primary-hover);
    color: var(--ds-primary-fg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    transform: none;
}

.button--primary:active,
.btn-erp--primary:active { background: var(--ds-primary-active); }

.button--secondary,
.btn-erp--secondary,
.action-btn.secondary,
.action-btn.outline,
.responsive-table-toggle {
    background: var(--ds-surface);
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-xs);
}

:root[data-theme="dark"] .button--secondary,
:root[data-theme="dark"] .btn-erp--secondary,
:root[data-theme="dark"] .action-btn.secondary,
:root[data-theme="dark"] .action-btn.outline {
    background: var(--ds-surface-2);
}

.button--secondary:hover,
.btn-erp--secondary:hover,
.action-btn.secondary:hover,
.action-btn.outline:hover {
    background: var(--ds-surface-2);
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
}

:root[data-theme="dark"] .button--secondary:hover,
:root[data-theme="dark"] .btn-erp--secondary:hover { background: var(--ds-surface-3); }

.button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ds-text-2);
    box-shadow: none;
}

.button--ghost:hover {
    background: var(--ds-neutral-soft);
    color: var(--ds-text);
}

.button--danger {
    background: var(--ds-surface);
    border-color: var(--ds-danger-border);
    color: var(--ds-danger);
    box-shadow: none;
}

.button--danger:hover {
    background: var(--ds-danger-soft);
    border-color: var(--ds-danger);
    color: var(--ds-danger);
}

.button--danger-solid {
    background: var(--ds-danger);
    border-color: var(--ds-danger);
    color: #fff;
}

.button--success {
    background: var(--ds-success);
    border-color: var(--ds-success);
    color: #fff;
}

:root[data-theme="dark"] .button--success { color: #03170f; }

.button--success:hover { filter: brightness(1.06); }

.button--small,
.btn-small,
.btn-erp--small {
    height: var(--ds-control-h-sm);
    min-height: var(--ds-control-h-sm);
    padding: 0 10px;
    font-size: var(--ds-fs-sm);
    border-radius: var(--ds-r-sm);
}

.button--large {
    height: var(--ds-control-h-lg);
    min-height: var(--ds-control-h-lg);
    padding: 0 18px;
}

.button--icon,
.icon-button {
    width: var(--ds-control-h);
    padding: 0;
}

.button--block { width: 100%; }

.button:disabled,
.button[aria-disabled="true"],
.button.is-disabled,
.btn-erp:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ds-border-strong);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-weight: var(--ds-fw-medium);
    box-shadow: none;
}

.btn-small:hover { background: var(--ds-surface-2); color: var(--ds-text); }

/* Icon-only action buttons used inside tables */
.users-icon-btn,
.users-action-btn,
.input-with-button .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-muted);
    box-shadow: none;
    transition: var(--ds-transition);
}

.users-icon-btn:hover,
.users-action-btn:hover {
    background: var(--ds-surface-3);
    border-color: var(--ds-border);
    color: var(--ds-text);
    transform: none;
}

.users-icon-btn--toggle,
.users-action-btn--toggle { color: var(--ds-warning); }
.users-icon-btn--toggle:hover,
.users-action-btn--toggle:hover { background: var(--ds-warning-soft); color: var(--ds-warning); border-color: transparent; }
.users-icon-btn--danger,
.users-action-btn--danger { color: var(--ds-danger); }
.users-icon-btn--danger:hover,
.users-action-btn--danger:hover { background: var(--ds-danger-soft); color: var(--ds-danger); border-color: transparent; }

.input-with-button .icon-button {
    width: var(--ds-control-h);
    height: var(--ds-control-h);
    border-color: var(--ds-border-strong);
    background: var(--ds-surface);
}

/* 8. Forms ================================================================== */
.page-shell input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"])),
.page-shell select,
.page-shell textarea,
.form-control,
.users-modal input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"])),
.users-modal select,
.users-modal textarea,
.login-card input:where(:not([type="checkbox"], [type="hidden"])) {
    min-height: var(--ds-control-h);
    padding: 0 10px;
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r);
    background-color: var(--ds-surface);
    color: var(--ds-text);
    font-family: inherit;
    font-size: var(--ds-fs-md);
    line-height: 1.4;
    box-shadow: var(--ds-shadow-xs);
    transition: var(--ds-transition);
}

.page-shell textarea,
textarea.form-control,
.users-modal textarea {
    min-height: 76px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

.page-shell select:not([multiple]),
select.form-control:not([multiple]),
.users-modal select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

html[dir="rtl"] .page-shell select:not([multiple]),
html[dir="rtl"] select.form-control:not([multiple]),
html[dir="rtl"] .users-modal select:not([multiple]) {
    background-position: left 10px center;
}

:root[data-theme="dark"] .page-shell select:not([multiple]),
:root[data-theme="dark"] select.form-control:not([multiple]),
:root[data-theme="dark"] .users-modal select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d96a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.page-shell select[multiple] { padding: 6px; min-height: 96px; }

:root[data-theme="dark"] .page-shell input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"])),
:root[data-theme="dark"] .page-shell select,
:root[data-theme="dark"] .page-shell textarea,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .users-modal input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"])),
:root[data-theme="dark"] .users-modal select,
:root[data-theme="dark"] .users-modal textarea,
:root[data-theme="dark"] .login-card input:where(:not([type="checkbox"], [type="hidden"])) {
    background-color: var(--ds-surface-inset);
    border-color: var(--ds-border-strong);
}

.page-shell input::placeholder,
.page-shell textarea::placeholder,
.form-control::placeholder { color: var(--ds-subtle); opacity: 1; }

.page-shell input:where(:not([type="checkbox"], [type="radio"])):hover:not(:focus):not([readonly]):not(:disabled),
.page-shell select:hover:not(:focus):not(:disabled),
.page-shell textarea:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: var(--ds-subtle);
}

.page-shell input:focus,
.page-shell select:focus,
.page-shell textarea:focus,
.form-control:focus,
.users-modal input:focus,
.users-modal select:focus,
.users-modal textarea:focus,
.login-card input:focus {
    outline: none;
    border-color: var(--ds-primary);
    box-shadow: var(--ds-focus-ring);
}

.page-shell input[readonly],
.page-shell input:disabled,
.page-shell select:disabled,
.page-shell textarea[readonly],
.page-shell textarea:disabled {
    background-color: var(--ds-surface-2);
    color: var(--ds-text-2);
    box-shadow: none;
    cursor: default;
}

:root[data-theme="dark"] .page-shell input[readonly],
:root[data-theme="dark"] .page-shell input:disabled,
:root[data-theme="dark"] .page-shell select:disabled,
:root[data-theme="dark"] .page-shell textarea[readonly] {
    background-color: rgba(255, 255, 255, 0.025);
    border-color: var(--ds-border);
}

.page-shell input[type="checkbox"],
.page-shell input[type="radio"],
.users-modal input[type="checkbox"],
.users-modal input[type="radio"] {
    accent-color: var(--ds-primary);
    width: 16px;
    height: 16px;
}

.page-shell input[type="date"],
.page-shell input[type="datetime-local"],
.page-shell input[type="month"],
.page-shell input[type="time"] {
    font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .page-shell input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .page-shell input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .page-shell input[type="month"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .page-shell input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .ceo input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}

.page-shell input[type="number"] { font-variant-numeric: tabular-nums; }

.page-shell .form-grid { gap: 14px 16px; }

.page-shell .form-field,
.users-modal .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.page-shell .form-field > span:first-child,
.page-shell .form-field > label,
.page-shell .form-label,
.page-shell .invoice-field > span,
.page-shell .sq-label,
.users-modal .form-field > span:first-child,
.login-card .form-field > span {
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-2);
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

.page-shell .form-field__help,
.users-modal .form-field__help {
    font-size: var(--ds-fs-xs);
    color: var(--ds-muted);
    line-height: 1.45;
}

.page-shell .form-field__error,
.users-modal .form-field__error,
.page-shell .errorlist {
    font-size: var(--ds-fs-xs);
    color: var(--ds-danger);
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-shell .is-invalid,
.page-shell .form-field--has-error input,
.page-shell .form-field--has-error select,
.page-shell .form-field--has-error textarea {
    border-color: var(--ds-danger) !important;
}

.page-shell .is-invalid:focus { box-shadow: 0 0 0 3px var(--ds-danger-soft) !important; }

.page-shell .form-field--has-error span { color: var(--ds-danger); }

.required-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    height: 18px;
    border-radius: var(--ds-r-xs);
    background: var(--ds-danger-soft);
    color: var(--ds-danger);
    font-size: 10px;
    font-weight: var(--ds-fw-semibold);
}

.page-shell .readonly-box {
    min-height: var(--ds-control-h);
    padding: 8px 10px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-r);
    background: var(--ds-surface-2);
    color: var(--ds-text-2);
}

.page-shell .toggle-field {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r);
    background: var(--ds-surface);
    padding: 10px 12px;
}

.page-shell .form-actions,
.page-shell .payment-actions,
.page-shell .invoice-submit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.page-shell .invoice-submit-bar,
.page-shell .payment-actions--footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 16px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--ds-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-md);
}

/* Series picker / option lists */
.page-shell .series-picker__group,
.users-modal .series-picker__group {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    background: var(--ds-surface-2);
}

.page-shell .series-option,
.users-modal .series-option {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r);
    background: var(--ds-surface);
}

/* Tables ==================================================================== */
.page-shell .table-wrap,
.page-shell .table-wrapper,
.page-shell .invoice-lines-scroll,
.page-shell .statement-table-wrap,
.page-shell .tracking-modal__table-wrap,
.users-modal .table-wrap {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    background: var(--ds-surface);
    box-shadow: none;
    overflow: auto;
}

.page-shell .panel > .table-wrap,
.page-shell .panel > .table-wrapper,
.page-shell .panel .erp-desktop-table.table-wrap { border-radius: var(--ds-r-lg); }

.page-shell table {
    border-collapse: separate;
    border-spacing: 0;
}

.page-shell .data-table,
.page-shell table.table,
.page-shell .data-table--banking,
.page-shell .data-table--users,
.page-shell .statement-table,
.page-shell .journal-lines-table,
.page-shell .invoice-lines-table,
.page-shell .invoice-detail-table,
.page-shell .tracking-modal__table,
.page-shell .crm-table,
.users-modal .data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ds-fs-base);
    color: var(--ds-text);
    background: transparent;
    font-variant-numeric: tabular-nums;
}

.page-shell .data-table thead th,
.page-shell .data-table > tr:first-child > th,
.page-shell table.table thead th,
.page-shell .data-table--banking thead th,
.page-shell .data-table--users thead th,
.page-shell .statement-table thead th,
.page-shell .journal-lines-table thead th,
.page-shell .invoice-lines-table thead th,
.page-shell .invoice-detail-table thead th,
.page-shell .tracking-modal__table thead th,
.page-shell .crm-table thead th,
.page-shell .table-wrap thead th,
.users-modal .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 36px;
    padding: 0 12px;
    background: var(--ds-surface-2);
    color: var(--ds-muted);
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-semibold);
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    text-align: start;
    border: 0;
    border-bottom: 1px solid var(--ds-border);
    box-shadow: none;
    vertical-align: middle;
}

:root[data-theme="dark"] .page-shell table thead th { background: #16191d; }

.page-shell .data-table td,
.page-shell table.table td,
.page-shell .data-table--banking tbody td,
.page-shell .data-table--users td,
.page-shell .statement-table td,
.page-shell .journal-lines-table td,
.page-shell .invoice-detail-table td,
.page-shell .tracking-modal__table td,
.page-shell .crm-table td,
.page-shell .table-wrap tbody td,
.users-modal .data-table td {
    height: var(--ds-row-h);
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--ds-divider);
    background: transparent;
    color: var(--ds-text);
    vertical-align: middle;
    line-height: 1.4;
}

.page-shell .invoice-lines-table td {
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid var(--ds-divider);
    background: transparent;
    vertical-align: middle;
}

.page-shell .invoice-lines-table tbody tr:nth-child(even) td,
.page-shell .data-table--banking tbody tr:nth-child(even),
.page-shell .data-table tbody tr:nth-child(even) { background: transparent; }

.page-shell tbody tr:last-child > td { border-bottom: 0; }

.page-shell .data-table tbody tr,
.page-shell table.table tbody tr,
.page-shell .data-table--banking tbody tr,
.page-shell .data-table--users tbody tr,
.page-shell .statement-table tbody tr,
.page-shell .crm-table tbody tr,
.page-shell .table-wrap tbody tr {
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
}

.page-shell .data-table tbody tr:hover > td,
.page-shell table.table tbody tr:hover > td,
.page-shell .data-table--banking tbody tr:hover > td,
.page-shell .data-table--users tbody tr:hover > td,
.page-shell .statement-table tbody tr:hover > td,
.page-shell .invoice-lines-table tbody tr:hover > td,
.page-shell .crm-table tbody tr:hover > td,
.page-shell .table-wrap tbody tr:hover > td {
    background: var(--ds-surface-2);
}

:root[data-theme="dark"] .page-shell tbody tr:hover > td { background: rgba(255, 255, 255, 0.025); }

.page-shell .data-table--banking tbody tr:hover { background: transparent; }

.page-shell tbody tr.is-selected > td,
.page-shell tbody tr[aria-selected="true"] > td,
.page-shell tbody tr:has(> td > input[type="checkbox"]:checked) > td {
    background: var(--ds-primary-soft);
}

.page-shell td.text-right,
.page-shell th.text-right,
.page-shell td.num,
.page-shell th.num,
.page-shell .amount-cell,
.page-shell .sq-num-cell { text-align: end; font-variant-numeric: tabular-nums; }

html[dir="rtl"] .page-shell td.text-right,
html[dir="rtl"] .page-shell th.text-right { text-align: left; }

.page-shell td a:not(.button):not(.btn-small) { color: var(--ds-primary-text); font-weight: var(--ds-fw-medium); }
.page-shell td a:not(.button):not(.btn-small):hover { text-decoration: underline; text-underline-offset: 2px; }

.page-shell td .button--small,
.page-shell td .btn-small { height: 26px; min-height: 26px; padding: 0 8px; font-size: var(--ds-fs-xs); }

/* Inline inputs inside data grids stay compact */
.page-shell td input:where(:not([type="checkbox"], [type="radio"])),
.page-shell td select,
.page-shell .invoice-line-input,
.page-shell .sq-cell-input {
    min-height: 30px;
    height: 30px;
    padding-inline: 8px;
    font-size: var(--ds-fs-sm);
    border-radius: var(--ds-r-sm);
    box-shadow: none;
}

.page-shell td select:not([multiple]) { padding-inline-end: 26px; background-position: right 8px center; }
html[dir="rtl"] .page-shell td select:not([multiple]) { background-position: left 8px center; }

.page-shell .row-opening-balance > td,
.page-shell .row-closing-balance > td {
    background: var(--ds-surface-2);
    font-weight: var(--ds-fw-semibold);
}

:root[data-theme="dark"] .page-shell .row-closing-balance > td,
:root[data-theme="dark"] .row-closing-balance { background: rgba(255, 255, 255, 0.03); color: var(--ds-text); }

.page-shell .users-table-empty,
.page-shell .invoices-table__empty,
.page-shell td.empty,
.page-shell .empty-state {
    color: var(--ds-muted);
    text-align: center;
    padding: 28px 16px;
}

/* Filter bars & pagination */
.page-shell .users-filter-bar,
.page-shell .banking-filter-bar,
.page-shell .invoice-toolbar,
.page-shell .statement-toolbar,
.page-shell .tracking-modal__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 0 0 14px;
    margin: 0 0 4px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.page-shell .users-filter-bar { align-items: center; }

.page-shell .users-filter-bar__search .users-search-input { padding-inline: 34px 10px; }
.page-shell .users-search-icon { inset-inline-start: 11px; color: var(--ds-subtle); }

.page-shell .users-search-input,
.page-shell .users-filter-select,
.page-shell .users-size-select {
    height: var(--ds-control-h);
    min-height: var(--ds-control-h);
    border-radius: var(--ds-r);
}

.page-shell .users-filter-count,
.page-shell .crm-pill-tab__count {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--ds-r-pill);
    background: var(--ds-neutral-soft);
    color: var(--ds-muted);
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-semibold);
}

.page-shell .users-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 0;
    border: 0;
    background: none;
}

.page-shell .users-pagination__info { font-size: var(--ds-fs-sm); color: var(--ds-muted); }

.page-shell .users-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-sm);
    background: var(--ds-surface);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    box-shadow: none;
}

.page-shell .users-pag-btn:hover:not(:disabled) { background: var(--ds-surface-2); border-color: var(--ds-border-strong); color: var(--ds-text); }

.page-shell .users-pag-btn.users-pag-num.is-active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: var(--ds-primary-fg);
}

.page-shell .btn-clear-filters {
    height: var(--ds-control-h-sm);
    padding: 0 10px;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-muted);
    font-size: var(--ds-fs-sm);
}

.page-shell .btn-clear-filters:hover { background: var(--ds-neutral-soft); color: var(--ds-text); }

/* 9. Badges & status ======================================================== */
.badge,
.status-pill,
.badge-erp,
.status-badge,
.auto-badge,
.audit-badge,
.cash-badge,
.cash-more,
.stack-item__tag,
.invoice-list__type,
.invoice-list__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--ds-r-sm);
    background: var(--ds-neutral-soft);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-medium);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
    vertical-align: middle;
}

.badge--success, .badge-success, .status-pill--success, .badge-erp--success, .status-badge.status-pill--success {
    background: var(--ds-success-soft);
    color: var(--ds-success);
    border-color: var(--ds-success-border);
}

.badge--danger, .badge-danger, .status-pill--danger, .badge-erp--danger, .status-badge.status-pill--danger {
    background: var(--ds-danger-soft);
    color: var(--ds-danger);
    border-color: var(--ds-danger-border);
}

.badge--warning, .badge-warning, .status-pill--warning, .badge-erp--warning, .status-badge.status-pill--warning {
    background: var(--ds-warning-soft);
    color: var(--ds-warning);
    border-color: var(--ds-warning-border);
}

.badge--info, .badge-info, .status-pill--info {
    background: var(--ds-info-soft);
    color: var(--ds-info);
    border-color: var(--ds-info-border);
}

.badge--primary {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-text);
    border-color: transparent;
}

.badge--neutral, .badge--muted, .status-pill--muted, .badge-erp--muted, .status-badge.status-pill--muted {
    background: var(--ds-neutral-soft);
    color: var(--ds-muted);
    border-color: var(--ds-border);
}

.cash-badge {
    background: var(--ds-surface-2);
    border-color: var(--ds-border);
    color: var(--ds-text-2);
    font-family: var(--ds-font-mono);
    font-size: var(--ds-fs-2xs);
}

.cash-more { background: transparent; color: var(--ds-primary-text); padding: 0 4px; }

.status-indicator-dot,
.status-badge__dot { width: 6px; height: 6px; border-radius: 50%; }

/* 10. Alerts & messages ===================================================== */
.message-stack { display: grid; gap: 8px; margin-bottom: 16px; }

.message,
.form-alert,
.payment-status-banner,
.invoice-result-banner,
.invoice-summary {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--ds-border);
    border-inline-start-width: 3px;
    border-radius: var(--ds-r);
    background: var(--ds-surface);
    color: var(--ds-text-2);
    font-size: var(--ds-fs-md);
    line-height: 1.5;
    box-shadow: none;
}

.invoice-summary:empty { display: none; }
.invoice-summary--muted { border-inline-start-color: var(--ds-border-strong); color: var(--ds-muted); }

.message--success,
.payment-status-banner--success,
.invoice-summary--success {
    background: var(--ds-success-soft);
    border-color: var(--ds-success-border);
    border-inline-start-color: var(--ds-success);
    color: var(--ds-text);
}

.message--error,
.message--danger,
.form-alert,
.payment-status-banner--danger,
.invoice-summary--error,
.invoice-summary--danger {
    background: var(--ds-danger-soft);
    border-color: var(--ds-danger-border);
    border-inline-start-color: var(--ds-danger);
    color: var(--ds-text);
}

.message--warning,
.payment-status-banner--warning,
.invoice-summary--warning {
    background: var(--ds-warning-soft);
    border-color: var(--ds-warning-border);
    border-inline-start-color: var(--ds-warning);
    color: var(--ds-text);
}

.message--info,
.payment-status-banner--muted,
.invoice-summary--info {
    background: var(--ds-info-soft);
    border-color: var(--ds-info-border);
    border-inline-start-color: var(--ds-info);
    color: var(--ds-text);
}

.page-shell .module-note {
    padding: 10px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r);
    background: var(--ds-surface-2);
    color: var(--ds-muted);
    font-size: var(--ds-fs-sm);
}

/* Key/value lists */
.page-shell .config-list__row,
.page-shell .totals-list__row {
    border-color: var(--ds-divider);
    background: transparent;
}

.page-shell .config-list__row span,
.page-shell .totals-list__row span,
.page-shell .detail-card__label,
.page-shell .snapshot-item span { color: var(--ds-muted); font-size: var(--ds-fs-sm); }

.page-shell .config-list__row strong,
.page-shell .totals-list__row strong,
.page-shell .detail-card__value,
.page-shell .snapshot-item strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }

/* 11. Tabs & segmented controls ============================================= */
.page-shell .tabs__nav,
.page-shell .panel-tabs,
.page-shell .crm-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ds-border);
    background: none;
    border-radius: 0;
}

.page-shell .tabs__button,
.page-shell .panel-tabs .tab,
.page-shell .crm-tab-bar > button,
.page-shell .crm-tab-bar > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ds-muted);
    font-size: var(--ds-fs-md);
    font-weight: var(--ds-fw-medium);
    box-shadow: none;
    cursor: pointer;
}

.page-shell .tabs__button:hover,
.page-shell .panel-tabs .tab:hover { color: var(--ds-text); }

.page-shell .tabs__button.is-active,
.page-shell .panel-tabs .tab.active,
.page-shell .crm-tab-bar > .active,
.page-shell .crm-tab-bar > .is-active {
    color: var(--ds-text);
    border-bottom-color: var(--ds-primary);
    background: transparent;
}

.page-shell .users-filter-bar__tabs,
.page-shell .crm-pill-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r);
    background: var(--ds-surface-2);
}

.page-shell .filter-tab,
.page-shell .crm-pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-muted);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    box-shadow: none;
}

.page-shell .filter-tab:hover,
.page-shell .crm-pill-tab:hover { color: var(--ds-text); background: transparent; }

.page-shell .filter-tab--active,
.page-shell .crm-pill-tab.is-active,
.page-shell .crm-pill-tab.active,
.page-shell .crm-pill-tab[aria-selected="true"] {
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-sm);
    border-color: transparent;
}

:root[data-theme="dark"] .page-shell .filter-tab--active,
:root[data-theme="dark"] .page-shell .crm-pill-tab.is-active,
:root[data-theme="dark"] .page-shell .crm-pill-tab.active { background: var(--ds-surface-3); }

/* 12. Modals, popovers & dropdowns ========================================== */
.users-modal__backdrop,
.statement-modal__backdrop,
.tracking-modal__backdrop,
.template-modal__backdrop,
.modal-backdrop,
dialog::backdrop {
    background: var(--ds-overlay) !important;
    backdrop-filter: blur(2px);
}

.users-modal__panel,
.statement-modal__panel,
.tracking-modal__panel,
.template-modal__dialog,
.modal__dialog,
.modal-content,
.page-shell dialog,
body > dialog {
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-lg);
}

:root[data-theme="dark"] .users-modal__panel,
:root[data-theme="dark"] .statement-modal__panel,
:root[data-theme="dark"] .tracking-modal__panel,
:root[data-theme="dark"] .template-modal__dialog,
:root[data-theme="dark"] .page-shell dialog,
:root[data-theme="dark"] body > dialog { background: var(--ds-surface-2); }

.users-modal__panel { animation: ds-pop var(--ds-dur) var(--ds-ease); }

@keyframes ds-pop {
    from { opacity: 0; transform: translateY(4px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

.users-modal__header,
.statement-modal__header,
.tracking-modal__header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ds-border);
    background: transparent;
}

.users-modal__title,
.statement-modal__header h3,
.tracking-modal__header h3 { font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-semibold); margin: 0; }

.users-modal__close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-muted);
}

.users-modal__close:hover { background: var(--ds-neutral-soft); color: var(--ds-text); }

/* Autocomplete / dropdown lists */
.crm-autocomplete__dropdown,
.autocomplete-list,
.autocomplete-results,
.autocomplete-dropdown,
.erp-autocomplete__list,
.erp-autocomplete-list,
.lookup-results,
.search-results,
[role="listbox"]:not(select),
.crm-notif-dropdown {
    background: var(--ds-surface) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-r-lg) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}

:root[data-theme="dark"] .crm-autocomplete__dropdown,
:root[data-theme="dark"] .autocomplete-list,
:root[data-theme="dark"] .autocomplete-results,
:root[data-theme="dark"] .autocomplete-dropdown,
:root[data-theme="dark"] .erp-autocomplete__list,
:root[data-theme="dark"] .erp-autocomplete-list,
:root[data-theme="dark"] .lookup-results,
:root[data-theme="dark"] .search-results,
:root[data-theme="dark"] [role="listbox"]:not(select),
:root[data-theme="dark"] .crm-notif-dropdown { background: var(--ds-surface-2) !important; }

[role="option"]:hover,
[role="option"][aria-selected="true"],
.crm-autocomplete__item:hover,
.crm-autocomplete__item.is-active { background: var(--ds-surface-3) !important; }

/* Native select options in dark */
:root[data-theme="dark"] option,
:root[data-theme="dark"] optgroup { background: var(--ds-surface-2); color: var(--ds-text); }

/* Generic tooltips used in the users page */
[data-tooltip]::after {
    background: #111827 !important;
    color: #f9fafb !important;
    border-radius: var(--ds-r-sm) !important;
    font-size: var(--ds-fs-2xs) !important;
    font-weight: var(--ds-fw-medium) !important;
    box-shadow: var(--ds-shadow-md) !important;
}

/* Spinner */
.erp-spinner,
.users-modal__spinner,
.button-spinner {
    border-color: var(--ds-border-strong) !important;
    border-top-color: var(--ds-primary) !important;
}

/* 13. Module-specific harmonisation ========================================= */
/* Dashboard */
.dashboard-kpis { margin-bottom: 20px; }

.dashboard-empty {
    padding: 28px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-r-xl);
    color: var(--ds-muted);
    text-align: center;
    font-size: var(--ds-fs-md);
}

/* Users management */
.page-shell .profile-avatar {
    background: var(--ds-primary-soft-2);
    color: var(--ds-primary-text);
    border-radius: var(--ds-r-lg);
}

.page-shell .profile-dashboard-card,
.users-modal .profile-dashboard-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: none;
}

.page-shell .profile-dashboard-card:hover { transform: none; border-color: var(--ds-border-strong); box-shadow: none; }

/* Payment & invoice documents */
.page-shell .panel--payment-workspace { padding: 20px; }

.page-shell .invoice-list__item,
.page-shell .invoice-detail-card,
.page-shell .partner-snapshot,
.page-shell .snapshot-item,
.page-shell .invoice-metric,
.page-shell .stack-item,
.page-shell .checklist-item,
.page-shell .activity-item,
.page-shell .timeline__item {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: none;
}

.page-shell .snapshot-item,
.page-shell .invoice-metric { background: var(--ds-surface-2); border-color: var(--ds-divider); }

.page-shell .invoice-metric--total {
    background: var(--ds-primary-soft);
    border-color: transparent;
}

.page-shell .invoice-metric--total strong { color: var(--ds-primary-text); }

.page-shell .invoice-section-kicker {
    background: none;
    padding: 0;
    color: var(--ds-muted);
    font-size: var(--ds-fs-2xs);
    font-weight: var(--ds-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-shell .tracking-cell__summary,
.page-shell .journal-line-hint { color: var(--ds-muted); font-size: var(--ds-fs-xs); }

/* GRPO + reports keep using the shared components above */

/* CRM headers align with the shared page header */
.page-shell .crm-header {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-inline: 0 !important;
}

.page-shell .crm-header__eyebrow { display: none; }

/* CRM dashboard: hero card becomes a flat page header */
.page-shell .crm-dashboard .crm-dashboard__hero {
    padding: 0 0 4px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    align-items: flex-end;
}

.page-shell .crm-dashboard .crm-dashboard__hero-title {
    font-size: var(--ds-fs-2xl);
    font-weight: var(--ds-fw-semibold);
    letter-spacing: -0.01em;
    gap: 10px;
}

.page-shell .crm-dashboard .crm-dashboard__hero-title svg { display: none; }
.page-shell .crm-dashboard .crm-dashboard__hero-badge { display: none; }
.page-shell .crm-dashboard .crm-dashboard__hero-subtitle { font-size: var(--ds-fs-md); }

.page-shell .crm-dashboard [class*="__kpi-card"],
.page-shell .crm-dashboard [class*="-panel"]:not([class*="__panel-"]),
.page-shell .crm-dashboard [class*="__card"]:not([class*="__card-"]) {
    border-radius: var(--ds-r-xl);
    border-color: var(--ds-border);
    box-shadow: var(--ds-shadow-xs);
}

.page-shell .crm-header__title {
    font-size: var(--ds-fs-2xl);
    font-weight: var(--ds-fw-semibold);
    color: var(--ds-text);
    letter-spacing: -0.01em;
}

.page-shell .crm-kpi-chip {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r);
    box-shadow: none;
    color: var(--ds-text-2);
}

.page-shell .crm-kpi-chip--primary {
    background: var(--ds-primary-soft);
    border-color: transparent;
    color: var(--ds-primary-text);
}

.page-shell .crm-kanban-column {
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: none;
}

:root[data-theme="dark"] .page-shell .crm-kanban-column { background: rgba(255, 255, 255, 0.02); }

.page-shell .crm-opportunity-card,
.page-shell .crm-kanban-card,
.page-shell .kanban-card,
.page-shell .erp-record-card,
.page-shell .sq-detail-card,
.page-shell .crm-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-shadow-xs);
}

.page-shell .erp-record-card:hover,
.page-shell .crm-opportunity-card:hover,
.page-shell .kanban-card:hover { border-color: var(--ds-border-strong); transform: none; }

.page-shell .sq-input,
.page-shell .sq-select { border-color: var(--ds-border-strong); background-color: var(--ds-surface); color: var(--ds-text); }

/* CEO Finance and other legacy dashboards keep their own layout; KPI icons */
.kpi-icon { border-radius: var(--ds-r); }

/* 14. Dark-mode fixes for hard-coded inline colours ==========================
   Many CRM and banking templates set light colours directly in style=""
   attributes. These selectors re-map those literals to theme tokens in dark
   mode only, leaving light mode unchanged and markup untouched. */
:root[data-theme="dark"] .page-shell [style*="background: #fff"],
:root[data-theme="dark"] .page-shell [style*="background:#fff"],
:root[data-theme="dark"] .page-shell [style*="background: white"],
:root[data-theme="dark"] .page-shell [style*="background:white"],
:root[data-theme="dark"] .page-shell [style*="background-color: #fff"],
:root[data-theme="dark"] .page-shell [style*="background-color:#fff"],
:root[data-theme="dark"] .page-shell [style*="background-color: white"],
:root[data-theme="dark"] .page-shell [style*="background: #fbfdff"],
:root[data-theme="dark"] .users-modal [style*="background: #fff"],
:root[data-theme="dark"] .users-modal [style*="background: white"] {
    background: var(--ds-surface) !important;
}

:root[data-theme="dark"] .page-shell [style*="background: #f8fafc"],
:root[data-theme="dark"] .page-shell [style*="background:#f8fafc"],
:root[data-theme="dark"] .page-shell [style*="background-color: #f8fafc"],
:root[data-theme="dark"] .page-shell [style*="background: #f1f5f9"],
:root[data-theme="dark"] .page-shell [style*="background:#f1f5f9"],
:root[data-theme="dark"] .page-shell [style*="background-color: #f1f5f9"],
:root[data-theme="dark"] .page-shell [style*="background: #edf2f7"],
:root[data-theme="dark"] .page-shell [style*="background: #f9fafb"],
:root[data-theme="dark"] .page-shell [style*="background: #f3f4f6"],
:root[data-theme="dark"] .page-shell [style*="background: #e2e8f0"],
:root[data-theme="dark"] .page-shell [style*="background: #f0f9ff"],
:root[data-theme="dark"] .page-shell [style*="background: #eff6ff"] {
    background: var(--ds-surface-2) !important;
}

:root[data-theme="dark"] .page-shell [style*="background: #fef2f2"],
:root[data-theme="dark"] .page-shell [style*="background:#fef2f2"],
:root[data-theme="dark"] .page-shell [style*="background: #fee2e2"],
:root[data-theme="dark"] .page-shell [style*="background-color: #fef2f2"] {
    background: var(--ds-danger-soft) !important;
}

:root[data-theme="dark"] .page-shell [style*="background: #fffbeb"],
:root[data-theme="dark"] .page-shell [style*="background:#fffbeb"],
:root[data-theme="dark"] .page-shell [style*="background: #fef3c7"],
:root[data-theme="dark"] .page-shell [style*="background: #fff7ed"] {
    background: var(--ds-warning-soft) !important;
}

:root[data-theme="dark"] .page-shell [style*="background: #ecfdf5"],
:root[data-theme="dark"] .page-shell [style*="background:#ecfdf5"],
:root[data-theme="dark"] .page-shell [style*="background: #f0fdf4"],
:root[data-theme="dark"] .page-shell [style*="background: #dcfce7"],
:root[data-theme="dark"] .page-shell [style*="background: #d1fae5"] {
    background: var(--ds-success-soft) !important;
}

:root[data-theme="dark"] .page-shell [style*="color: #0f172a"],
:root[data-theme="dark"] .page-shell [style*="color:#0f172a"],
:root[data-theme="dark"] .page-shell [style*="color: #1e293b"],
:root[data-theme="dark"] .page-shell [style*="color:#1e293b"],
:root[data-theme="dark"] .page-shell [style*="color: #111827"],
:root[data-theme="dark"] .page-shell [style*="color: #334155"],
:root[data-theme="dark"] .page-shell [style*="color: #1f2937"],
:root[data-theme="dark"] .page-shell [style*="color: #000"],
:root[data-theme="dark"] .page-shell [style*="color:#5a5a5a"] {
    color: var(--ds-text) !important;
}

:root[data-theme="dark"] .page-shell [style*="color: #475569"],
:root[data-theme="dark"] .page-shell [style*="color:#475569"],
:root[data-theme="dark"] .page-shell [style*="color: #64748b"],
:root[data-theme="dark"] .page-shell [style*="color:#64748b"],
:root[data-theme="dark"] .page-shell [style*="color: #6b7280"] {
    color: var(--ds-muted) !important;
}

:root[data-theme="dark"] .page-shell [style*="color: #92400e"],
:root[data-theme="dark"] .page-shell [style*="color: #b45309"] { color: var(--ds-warning) !important; }
:root[data-theme="dark"] .page-shell [style*="color: #991b1b"],
:root[data-theme="dark"] .page-shell [style*="color: #b91c1c"],
:root[data-theme="dark"] .page-shell [style*="color: #dc2626"] { color: var(--ds-danger) !important; }
:root[data-theme="dark"] .page-shell [style*="color: #065f46"],
:root[data-theme="dark"] .page-shell [style*="color: #166534"],
:root[data-theme="dark"] .page-shell [style*="color: #16a34a"] { color: var(--ds-success) !important; }
:root[data-theme="dark"] .page-shell [style*="color: #0369a1"],
:root[data-theme="dark"] .page-shell [style*="color: #1d4ed8"],
:root[data-theme="dark"] .page-shell [style*="color: #2563eb"],
:root[data-theme="dark"] .page-shell [style*="color: #0284c7"] { color: var(--ds-info) !important; }

:root[data-theme="dark"] .page-shell [style*="border: 1px solid #e2e8f0"],
:root[data-theme="dark"] .page-shell [style*="border:1px solid #e2e8f0"],
:root[data-theme="dark"] .page-shell [style*="border: 1px solid #cbd5e1"],
:root[data-theme="dark"] .page-shell [style*="border: 1px solid #f1f5f9"],
:root[data-theme="dark"] .page-shell [style*="border: 1px solid #e5e7eb"] {
    border-color: var(--ds-border-strong) !important;
}

:root[data-theme="dark"] .page-shell [style*="border-bottom: 1px solid #e2e8f0"],
:root[data-theme="dark"] .page-shell [style*="border-bottom: 1px solid #f1f5f9"],
:root[data-theme="dark"] .page-shell [style*="border-top: 1px solid #f1f5f9"],
:root[data-theme="dark"] .page-shell [style*="border-top: 1px solid #e2e8f0"] {
    border-color: var(--ds-divider) !important;
}

:root[data-theme="dark"] .page-shell [style*="background: #fafafa"],
:root[data-theme="dark"] .page-shell [style*="background:#fafafa"],
:root[data-theme="dark"] .page-shell [style*="background: #f5f5f5"] {
    background: var(--ds-surface-2) !important;
}

:root[data-theme="dark"] .page-shell [style*="background: #ede9fe"],
:root[data-theme="dark"] .page-shell [style*="background: #dbeafe"],
:root[data-theme="dark"] .page-shell [style*="background: #e0f2fe"] {
    background: var(--ds-info-soft) !important;
}

:root[data-theme="dark"] .page-shell [style*="color: #5b21b6"],
:root[data-theme="dark"] .page-shell [style*="color: #6d28d9"],
:root[data-theme="dark"] .page-shell [style*="color:#6d28d9"] { color: var(--ds-secondary) !important; }

:root[data-theme="dark"] .page-shell .user-overview-table th { color: var(--ds-muted); background: var(--ds-surface-2); }

/* Page <style> blocks and CRM stylesheets with light literals */
:root[data-theme="dark"] .page-shell .summary,
:root[data-theme="dark"] .page-shell .event-group-title,
:root[data-theme="dark"] .page-shell .event-rule-row:hover,
:root[data-theme="dark"] .page-shell .user-overview-table tr:hover td,
:root[data-theme="dark"] .page-shell .var-chip,
:root[data-theme="dark"] .page-shell .audit-diff,
:root[data-theme="dark"] .page-shell .audit-badge--local,
:root[data-theme="dark"] .page-shell .provider-badge--custom,
:root[data-theme="dark"] .crm-notif-status-badge--read,
:root[data-theme="dark"] .crm-notif-category-badge,
:root[data-theme="dark"] .crm-notif-details,
:root[data-theme="dark"] .crm-notif-btn-sm:hover,
:root[data-theme="dark"] .crm-sales-quotation .sq-total-chip {
    background: var(--ds-surface-3);
    color: var(--ds-text-2);
}

:root[data-theme="dark"] .crm-notif-counters,
:root[data-theme="dark"] .crm-notif-select,
:root[data-theme="dark"] .crm-notif-prefs-panel,
:root[data-theme="dark"] .template-modal__dialog {
    background: var(--ds-surface-2);
    color: var(--ds-text);
    border-color: var(--ds-border);
}

:root[data-theme="dark"] .page-shell .user-overview-table td,
:root[data-theme="dark"] .crm-sales-quotation .sq-total-chip__val { color: var(--ds-text); }

:root[data-theme="dark"] .page-shell .audit-diff-arrow,
:root[data-theme="dark"] .crm-notif-item--read .crm-notif-item__title,
:root[data-theme="dark"] .crm-notif-details__label,
:root[data-theme="dark"] .crm-sales-quotation .sq-total-chip__label,
:root[data-theme="dark"] .crm-sales-quotation .sq-totals-hint { color: var(--ds-muted); }

:root[data-theme="dark"] .crm-sales-quotation .sq-total-divider { background: var(--ds-border); }

:root[data-theme="dark"] .page-shell .audit-badge--ld,
:root[data-theme="dark"] .page-shell .audit-badge--sap,
:root[data-theme="dark"] .page-shell .provider-badge--office365,
:root[data-theme="dark"] .crm-notif-card__rec-action { background: var(--ds-info-soft); color: var(--ds-info); }

:root[data-theme="dark"] .page-shell .audit-badge--act,
:root[data-theme="dark"] .page-shell .sq-detail-badge--sap,
:root[data-theme="dark"] .crm-notif-counter-pill--high,
:root[data-theme="dark"] .crm-notif-counter-pill--medium,
:root[data-theme="dark"] .crm-notif-badge-pill--high,
:root[data-theme="dark"] .crm-notif-badge-pill--medium { background: var(--ds-warning-soft); color: var(--ds-warning); }

:root[data-theme="dark"] .page-shell .audit-badge--opp { background: var(--ds-secondary-soft); color: var(--ds-secondary); }

:root[data-theme="dark"] .page-shell .audit-badge--success,
:root[data-theme="dark"] .page-shell .sq-detail-badge--crm,
:root[data-theme="dark"] .crm-notif-counter-pill--low,
:root[data-theme="dark"] .crm-notif-badge-pill--low { background: var(--ds-success-soft); color: var(--ds-success); }

:root[data-theme="dark"] .page-shell .audit-badge--failed,
:root[data-theme="dark"] .page-shell .provider-badge--gmail,
:root[data-theme="dark"] .crm-notif-status-badge--unread,
:root[data-theme="dark"] .crm-notif-counter-pill--critical,
:root[data-theme="dark"] .crm-notif-badge-pill--critical { background: var(--ds-danger-soft); color: var(--ds-danger); }

/* Remaining white surfaces from page stylesheets */
:root[data-theme="dark"] .page-shell .bg-white,
:root[data-theme="dark"] .page-shell .card,
:root[data-theme="dark"] .page-shell .crm-dash-card,
:root[data-theme="dark"] .page-shell .crm-kpi-card,
:root[data-theme="dark"] .page-shell .crm-panel {
    background-color: var(--ds-surface);
    border-color: var(--ds-border);
}

/* 15. Responsive ============================================================ */
@media (max-width: 1279.98px) {
    :root { --ds-page-pad-x: 22px; }
}

@media (max-width: 1023.98px) {
    :root { --ds-page-pad-x: 18px; --ds-page-pad-y: 18px; }

    .topbar__crumbs { display: none; }
    .user-menu__meta { display: none; }
    .user-menu__trigger { padding-inline: 3px; }
    .user-menu__trigger > .ds-icon { display: none; }
}

@media (max-width: 767.98px) {
    :root { --ds-page-pad-x: 14px; --ds-page-pad-y: 14px; --ds-topbar-h: 52px; }

    .app-shell .topbar { gap: 8px; }
    .topbar .topbar__actions { gap: 6px; }
    .topbar .theme-switcher__button { width: 26px; }

    .page-shell .hero,
    .page-shell .users-header,
    .page-header { flex-direction: column; align-items: stretch; margin-bottom: 16px; }

    .page-shell .hero__actions,
    .page-shell .users-header__actions { justify-content: flex-start; }

    /* In column direction a flex-basis becomes a height: reset it. */
    .page-shell .hero > div:first-child,
    .page-header__titles { flex: 0 0 auto; }

    .page-shell .section-title,
    .page-shell .users-header__title { font-size: var(--ds-fs-xl); }

    .page-shell .panel { padding: 16px; border-radius: var(--ds-r-lg); }

    .metric-grid,
    .users-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .page-shell .metric-card,
    .page-shell .users-kpi-card { padding: 12px; }

    .page-shell .metric-card__value,
    .page-shell .users-kpi-card__value { font-size: var(--ds-fs-xl); }

    .layout-grid--equal,
    .layout-grid--2-1 { grid-template-columns: minmax(0, 1fr); }

    /* 16px inputs prevent iOS zoom */
    .page-shell input:where(:not([type="checkbox"], [type="radio"])),
    .page-shell select,
    .page-shell textarea { font-size: 16px; min-height: 40px; }

    .page-shell td input:where(:not([type="checkbox"], [type="radio"])),
    .page-shell td select { font-size: 14px; }

    .button { height: 38px; min-height: 38px; }
    .button--small { height: 32px; min-height: 32px; }
}

@media (max-width: 479.98px) {
    .metric-grid,
    .users-kpi-grid { grid-template-columns: minmax(0, 1fr); }
    .topbar .theme-switcher__button { width: 24px; }
    .topbar .menu-toggle { width: 32px; min-width: 32px; height: 32px; }
}

/* 16. Auth / standalone screens ============================================= */
body.login-screen {
    background: var(--ds-bg);
}

.login-screen .login-copy,
.login-screen .login-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-md);
    backdrop-filter: none;
}

.login-screen .login-copy { background: var(--ds-surface-2); box-shadow: none; }

.login-screen .login-card__header h2 { font-size: var(--ds-fs-2xl); font-weight: var(--ds-fw-semibold); }
.login-screen .login-card__header p { color: var(--ds-muted); font-size: var(--ds-fs-md); }
.login-screen .section-tag {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-text);
    border-radius: var(--ds-r-sm);
    padding: 4px 8px;
    font-size: var(--ds-fs-2xs);
}

.login-screen .form-field { display: flex; flex-direction: column; gap: 6px; }
.login-screen .login-card input { min-height: 40px; }
.login-screen .button { height: 40px; }


@media print {
    .sidebar, .topbar, .shell-backdrop, .nav-tooltip { display: none !important; }
    .workspace { margin: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}