/* =====================================================================
   CRM REFERENCE UI — MOCKUP PARITY LAYER
   ---------------------------------------------------------------------
   Final visual layer for the complete application. It is intentionally
   loaded after site.css and crm-design-system.css.
   Change only these tokens to retheme the entire CRM.
   ===================================================================== */

:root {
    --crm-ref-primary: #0aa39a;
    --crm-ref-primary-rgb: 10, 163, 154;
    --crm-ref-primary-dark: #078a83;
    --crm-ref-primary-soft: #e8f8f6;
    --crm-ref-primary-border: #bfe9e5;

    --crm-ref-sidebar: #0e2b43;
    --crm-ref-sidebar-deep: #0a2135;
    --crm-ref-sidebar-text: #dce8f2;
    --crm-ref-sidebar-muted: #8096aa;
    --crm-ref-sidebar-hover: rgba(255, 255, 255, .055);
    --crm-ref-sidebar-active: #0b9f98;
    --crm-ref-sidebar-border: rgba(255, 255, 255, .07);

    --crm-ref-topbar: #ffffff;
    --crm-ref-page: #f5f7fb;
    --crm-ref-surface: #ffffff;
    --crm-ref-surface-soft: #f8fafc;
    --crm-ref-surface-muted: #f1f5f9;
    --crm-ref-text: #14213a;
    --crm-ref-muted: #6b778c;
    --crm-ref-faint: #9aa6b5;
    --crm-ref-border: #e3e9f1;
    --crm-ref-border-strong: #d3dce8;

    --crm-ref-success: #19a974;
    --crm-ref-warning: #f59f00;
    --crm-ref-danger: #e7445a;
    --crm-ref-info: #3b82f6;
    --crm-ref-purple: #7c5ce7;

    --crm-ref-sidebar-width: 216px;
    --crm-ref-sidebar-collapsed: 68px;
    --crm-ref-topbar-height: 58px;
    --crm-ref-breadcrumb-height: 36px;
    --crm-ref-content-x: 18px;
    --crm-ref-content-gap: 14px;

    --crm-ref-control-height: 34px;
    --crm-ref-button-height: 32px;
    --crm-ref-table-head: 35px;
    --crm-ref-table-row: 42px;

    --crm-ref-radius-xs: 4px;
    --crm-ref-radius-sm: 6px;
    --crm-ref-radius-md: 8px;
    --crm-ref-radius-lg: 10px;
    --crm-ref-radius-xl: 12px;

    --crm-ref-shadow-xs: 0 1px 2px rgba(15, 31, 54, .035);
    --crm-ref-shadow-sm: 0 3px 12px rgba(15, 31, 54, .055);
    --crm-ref-shadow-md: 0 12px 32px rgba(15, 31, 54, .10);

    /* Backward-compatible aliases used throughout the existing app. */
    --crm-ui-primary: var(--crm-ref-primary);
    --crm-ui-primary-rgb: var(--crm-ref-primary-rgb);
    --crm-ui-primary-hover: var(--crm-ref-primary-dark);
    --crm-ui-sidebar-bg: var(--crm-ref-sidebar);
    --crm-ui-sidebar-bg-deep: var(--crm-ref-sidebar-deep);
    --crm-ui-topbar-bg: var(--crm-ref-topbar);
    --crm-ui-page-bg: var(--crm-ref-page);
    --crm-ui-surface: var(--crm-ref-surface);
    --crm-ui-surface-soft: var(--crm-ref-surface-soft);
    --crm-ui-surface-muted: var(--crm-ref-surface-muted);
    --crm-ui-text: var(--crm-ref-text);
    --crm-ui-text-muted: var(--crm-ref-muted);
    --crm-ui-border: var(--crm-ref-border);
    --crm-ui-border-strong: var(--crm-ref-border-strong);
    --crm-ui-control-height: var(--crm-ref-control-height);
    --crm-ui-button-height: var(--crm-ref-button-height);
    --crm-ui-table-head-height: var(--crm-ref-table-head);
    --crm-ui-table-row-height: var(--crm-ref-table-row);
    --crm-sidebar-width: var(--crm-ref-sidebar-width);
    --crm-sidebar-collapsed-width: var(--crm-ref-sidebar-collapsed);
    --crm-topbar-height: var(--crm-ref-topbar-height);
}

[data-bs-theme="dark"] {
    --crm-ref-topbar: #132237;
    --crm-ref-page: #0e1724;
    --crm-ref-surface: #162335;
    --crm-ref-surface-soft: #1b2a3e;
    --crm-ref-surface-muted: #203147;
    --crm-ref-text: #edf3f8;
    --crm-ref-muted: #9fb0c2;
    --crm-ref-faint: #718398;
    --crm-ref-border: rgba(255,255,255,.085);
    --crm-ref-border-strong: rgba(255,255,255,.14);
    --crm-ref-shadow-xs: 0 1px 2px rgba(0,0,0,.17);
    --crm-ref-shadow-sm: 0 3px 14px rgba(0,0,0,.22);
    --crm-ref-shadow-md: 0 15px 38px rgba(0,0,0,.30);
}

/* ---------------------------------------------------------------------
   Base application shell
   --------------------------------------------------------------------- */
body.crm-reference-ui {
    color: var(--crm-ref-text);
    background: var(--crm-ref-page);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.42;
    letter-spacing: -.003em;
}

body.crm-reference-ui .page {
    min-height: 100vh;
    background: var(--crm-ref-page);
}

body.crm-reference-ui .page-wrapper {
    min-height: 100vh;
    background: var(--crm-ref-page);
}

body.crm-reference-ui .page-body {
    padding: 14px 0 18px !important;
}

body.crm-reference-ui .page-body > .container-fluid,
body.crm-reference-ui .crm-breadcrumb-bar > .container-fluid {
    padding-inline: var(--crm-ref-content-x) !important;
    max-width: 100% !important;
}

/* ---------------------------------------------------------------------
   Sidebar — exact dark SaaS navigation language from the reference
   --------------------------------------------------------------------- */
body.crm-reference-ui .crm-sidebar {
    width: var(--crm-ref-sidebar-width) !important;
    min-width: var(--crm-ref-sidebar-width) !important;
    background: linear-gradient(180deg, var(--crm-ref-sidebar) 0%, var(--crm-ref-sidebar-deep) 100%) !important;
    border-right: 1px solid var(--crm-ref-sidebar-border) !important;
    box-shadow: 2px 0 18px rgba(7, 24, 40, .08);
}

body.crm-reference-ui .crm-sidebar > .container-fluid {
    padding: 0 !important;
}

body.crm-reference-ui .crm-sidebar-brand {
    height: 72px !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--crm-ref-sidebar-border) !important;
}

body.crm-reference-ui .crm-brand-link {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

body.crm-reference-ui .crm-logo-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    border-radius: 9px !important;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(145deg, #10b6ab, #087e79) !important;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 6px 16px rgba(8, 155, 147, .24) !important;
}

body.crm-reference-ui .crm-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.12;
}

body.crm-reference-ui .crm-logo-text {
    color: #fff;
    font-size: 17px !important;
    font-weight: 760 !important;
    letter-spacing: -.02em;
}

body.crm-reference-ui .crm-brand-subtitle {
    margin-top: 4px;
    color: var(--crm-ref-sidebar-muted);
    font-size: 9.5px;
    font-weight: 500;
    white-space: nowrap;
}

body.crm-reference-ui .crm-sidebar-scroll {
    padding: 10px 8px 14px !important;
}

body.crm-reference-ui .crm-sidebar-section-label {
    padding: 8px 10px 5px;
    color: var(--crm-ref-sidebar-muted);
    font-size: 8.5px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.crm-reference-ui .crm-nav-list,
body.crm-reference-ui .crm-shortcut-list,
body.crm-reference-ui .crm-submenu {
    gap: 2px !important;
}

body.crm-reference-ui .crm-nav-link,
body.crm-reference-ui .crm-shortcut-link {
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 6px !important;
    color: var(--crm-ref-sidebar-text) !important;
    font-size: 12px !important;
    font-weight: 550;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

body.crm-reference-ui .crm-nav-link:hover,
body.crm-reference-ui .crm-shortcut-link:hover {
    color: #fff !important;
    background: var(--crm-ref-sidebar-hover) !important;
}

body.crm-reference-ui .crm-nav-link.active,
body.crm-reference-ui .crm-nav-parent.active > .crm-nav-toggle,
body.crm-reference-ui .crm-shortcut-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, var(--crm-ref-sidebar-active), #0c8f89) !important;
    box-shadow: 0 4px 12px rgba(var(--crm-ref-primary-rgb), .18);
}

body.crm-reference-ui .crm-nav-link.active::before {
    display: none !important;
}

body.crm-reference-ui .crm-nav-link .nav-link-icon,
body.crm-reference-ui .crm-shortcut-link .nav-link-icon {
    width: 20px !important;
    min-width: 20px !important;
    margin-right: 7px !important;
    font-size: 15px !important;
    color: currentColor;
}

body.crm-reference-ui .crm-nav-link .nav-link-title {
    font-weight: 590 !important;
}

body.crm-reference-ui .crm-nav-chevron {
    font-size: 12px;
    opacity: .85;
}

body.crm-reference-ui .crm-submenu {
    margin: 2px 0 4px 18px !important;
    padding-left: 8px !important;
    border-left: 1px solid rgba(255,255,255,.08) !important;
}

body.crm-reference-ui .crm-submenu .crm-nav-link {
    min-height: 33px !important;
    padding-block: 6px !important;
    font-size: 11.5px !important;
    border-radius: 5px !important;
}

body.crm-reference-ui .crm-sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 58px;
    padding: 10px 14px !important;
    color: var(--crm-ref-sidebar-muted);
    border-top: 1px solid var(--crm-ref-sidebar-border) !important;
}

body.crm-reference-ui .crm-sidebar-footer strong {
    color: var(--crm-ref-sidebar-text);
    font-size: 10px;
    font-weight: 650;
}

body.crm-reference-ui .crm-sidebar-footer small {
    font-size: 9px;
}

/* ---------------------------------------------------------------------
   Header / top navigation
   --------------------------------------------------------------------- */
body.crm-reference-ui .crm-topbar {
    height: var(--crm-ref-topbar-height) !important;
    min-height: var(--crm-ref-topbar-height) !important;
    color: var(--crm-ref-text) !important;
    background: var(--crm-ref-topbar) !important;
    border-bottom: 1px solid var(--crm-ref-border) !important;
    box-shadow: 0 1px 7px rgba(15, 31, 54, .035) !important;
    backdrop-filter: none !important;
}

body.crm-reference-ui .crm-topbar-inner {
    height: 100%;
    gap: 12px;
    padding: 0 14px !important;
}

body.crm-reference-ui .crm-topbar-left {
    flex: 0 0 auto;
    min-width: 150px;
    gap: 4px;
}

body.crm-reference-ui .crm-topbar-title {
    color: var(--crm-ref-text) !important;
    font-size: 15px !important;
    font-weight: 720 !important;
    letter-spacing: -.015em;
}

body.crm-reference-ui .crm-topbar-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    color: #4e6078 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
}

body.crm-reference-ui .crm-topbar-icon:hover,
body.crm-reference-ui .crm-user-trigger:hover {
    color: var(--crm-ref-primary) !important;
    background: var(--crm-ref-primary-soft) !important;
}

body.crm-reference-ui .crm-topbar-middle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
}

body.crm-reference-ui .crm-project-switch {
    width: min(210px, 21vw);
    height: 36px;
    padding: 0 34px 0 12px;
    color: var(--crm-ref-text);
    background-color: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border-strong);
    border-radius: 8px;
    font-size: 11.75px;
    font-weight: 600;
    box-shadow: var(--crm-ref-shadow-xs);
}

body.crm-reference-ui .crm-global-search {
    position: relative;
    width: min(330px, 29vw);
}

body.crm-reference-ui .crm-global-search > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 2;
    color: var(--crm-ref-muted);
    transform: translateY(-50%);
}

body.crm-reference-ui .crm-global-search input {
    height: 36px;
    padding: 0 56px 0 35px;
    color: var(--crm-ref-text);
    background: var(--crm-ref-surface-soft);
    border: 1px solid var(--crm-ref-border);
    border-radius: 8px;
    font-size: 12px;
    box-shadow: none;
}

body.crm-reference-ui .crm-global-search input:focus {
    background: var(--crm-ref-surface);
    border-color: rgba(var(--crm-ref-primary-rgb), .45);
    box-shadow: 0 0 0 3px rgba(var(--crm-ref-primary-rgb), .09);
}

body.crm-reference-ui .crm-global-search kbd {
    position: absolute;
    top: 50%;
    right: 8px;
    padding: 2px 5px;
    color: var(--crm-ref-muted);
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-size: 9px;
    transform: translateY(-50%);
}

body.crm-reference-ui .crm-global-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    display: none;
    width: min(420px, calc(100vw - 28px));
    max-height: 360px;
    overflow: auto;
    padding: 6px;
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border);
    border-radius: 10px;
    box-shadow: var(--crm-ref-shadow-md);
}

body.crm-reference-ui .crm-global-search-results.show {
    display: block;
}

body.crm-reference-ui .crm-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 9px;
    color: var(--crm-ref-text);
    border-radius: 7px;
    text-decoration: none;
}

body.crm-reference-ui .crm-search-result:hover,
body.crm-reference-ui .crm-search-result.is-active {
    color: var(--crm-ref-primary-dark);
    background: var(--crm-ref-primary-soft);
}

body.crm-reference-ui .crm-search-result i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--crm-ref-primary);
    background: var(--crm-ref-primary-soft);
    border-radius: 7px;
}

body.crm-reference-ui .crm-search-empty {
    padding: 20px 12px;
    color: var(--crm-ref-muted);
    text-align: center;
}

body.crm-reference-ui .crm-topbar-actions {
    flex: 0 0 auto;
    gap: 4px;
}

body.crm-reference-ui .crm-quick-create {
    color: #fff !important;
    background: var(--crm-ref-primary) !important;
    box-shadow: 0 4px 12px rgba(var(--crm-ref-primary-rgb), .24);
}

body.crm-reference-ui .crm-notification-count {
    top: 1px !important;
    right: 0 !important;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    color: #fff;
    background: var(--crm-ref-danger);
    border: 2px solid var(--crm-ref-topbar);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 750;
    line-height: 12px;
}

body.crm-reference-ui .crm-user-trigger {
    min-height: 42px !important;
    gap: 8px;
    padding: 4px 5px 4px 8px !important;
    border-radius: 9px !important;
}

body.crm-reference-ui .crm-user-copy {
    align-items: flex-end;
    max-width: 185px;
    line-height: 1.08;
}

body.crm-reference-ui .crm-user-name {
    color: var(--crm-ref-text) !important;
    font-size: 11.75px;
    font-weight: 750;
}

body.crm-reference-ui .crm-user-company {
    margin-top: 3px;
    color: var(--crm-ref-muted) !important;
    font-size: 9.5px;
}

body.crm-reference-ui .crm-user-avatar {
    width: 34px !important;
    height: 34px !important;
    border: 2px solid var(--crm-ref-surface);
    box-shadow: 0 0 0 1px var(--crm-ref-border-strong);
}

body.crm-reference-ui .crm-user-chevron {
    color: var(--crm-ref-muted);
    font-size: 11px;
}

body.crm-reference-ui .crm-dropdown > .dropdown-menu,
body.crm-reference-ui .dropdown-menu {
    padding: 6px;
    color: var(--crm-ref-text);
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border);
    border-radius: 9px;
    box-shadow: var(--crm-ref-shadow-md);
}

body.crm-reference-ui .dropdown-item {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 12px;
}

body.crm-reference-ui .dropdown-item:hover,
body.crm-reference-ui .dropdown-item:focus {
    color: var(--crm-ref-primary-dark);
    background: var(--crm-ref-primary-soft);
}

body.crm-reference-ui .crm-breadcrumb-bar {
    height: var(--crm-ref-breadcrumb-height) !important;
    min-height: var(--crm-ref-breadcrumb-height) !important;
    background: var(--crm-ref-surface) !important;
    border-bottom: 1px solid var(--crm-ref-border) !important;
    box-shadow: none !important;
}

body.crm-reference-ui .crm-breadcrumb-bar .breadcrumb {
    height: var(--crm-ref-breadcrumb-height);
    min-height: var(--crm-ref-breadcrumb-height) !important;
    font-size: 11px;
}

body.crm-reference-ui .crm-breadcrumb-bar .breadcrumb-item a {
    color: var(--crm-ref-muted);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
body.crm-reference-ui .crm-reference-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 8px var(--crm-ref-content-x) 12px;
    color: var(--crm-ref-muted);
    font-size: 10px;
}

body.crm-reference-ui .crm-reference-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.crm-reference-ui .crm-reference-footer-status::before {
    width: 6px;
    height: 6px;
    content: "";
    background: var(--crm-ref-success);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(25, 169, 116, .12);
}

/* ---------------------------------------------------------------------
   Reusable page headers, cards and toolbars
   --------------------------------------------------------------------- */
body.crm-reference-ui .crm-ui-page-heading,
body.crm-reference-ui .crm-page-header,
body.crm-reference-ui .crm-form-page-head,
body.crm-reference-ui main > .d-flex.justify-content-between:first-child {
    min-height: auto !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.crm-reference-ui .crm-ui-page-heading h1,
body.crm-reference-ui .crm-ui-page-heading h2,
body.crm-reference-ui .crm-page-header h1,
body.crm-reference-ui .crm-page-header h2,
body.crm-reference-ui .page-title {
    margin: 0;
    color: var(--crm-ref-text);
    font-size: 18px !important;
    font-weight: 760 !important;
    letter-spacing: -.02em;
}

body.crm-reference-ui .crm-ui-page-heading .text-secondary,
body.crm-reference-ui .crm-page-header .text-secondary,
body.crm-reference-ui .crm-form-page-head .text-secondary {
    margin-top: 2px;
    color: var(--crm-ref-muted) !important;
    font-size: 11px !important;
}

body.crm-reference-ui .card,
body.crm-reference-ui .crm-ui-card,
body.crm-reference-ui .crm-form-card,
body.crm-reference-ui .crm-dashboard-card,
body.crm-reference-ui .crm-master-card {
    background: var(--crm-ref-surface) !important;
    border: 1px solid var(--crm-ref-border) !important;
    border-radius: var(--crm-ref-radius-md) !important;
    box-shadow: var(--crm-ref-shadow-xs) !important;
}

body.crm-reference-ui .card-header,
body.crm-reference-ui .crm-form-card-header,
body.crm-reference-ui .crm-dashboard-card-header {
    min-height: 42px !important;
    padding: 9px 12px !important;
    background: var(--crm-ref-surface) !important;
    border-bottom: 1px solid var(--crm-ref-border) !important;
}

body.crm-reference-ui .card-title {
    color: var(--crm-ref-text);
    font-size: 12.75px !important;
    font-weight: 730 !important;
}

body.crm-reference-ui .card-header .text-secondary,
body.crm-reference-ui .crm-section-heading .text-secondary {
    margin-top: 2px;
    color: var(--crm-ref-muted) !important;
    font-size: 10px !important;
}

body.crm-reference-ui .card-body {
    padding: 12px !important;
}

body.crm-reference-ui .card-footer {
    padding: 8px 12px !important;
    background: var(--crm-ref-surface-soft) !important;
    border-top: 1px solid var(--crm-ref-border) !important;
}

body.crm-reference-ui .crm-ui-toolbar,
body.crm-reference-ui .crm-grid-toolbar,
body.crm-reference-ui .crm-grid-toolbar-main {
    min-height: 46px;
    padding: 7px 10px !important;
    background: var(--crm-ref-surface) !important;
    border-bottom: 1px solid var(--crm-ref-border) !important;
}

/* ---------------------------------------------------------------------
   Buttons and badges
   --------------------------------------------------------------------- */
body.crm-reference-ui .btn {
    min-height: var(--crm-ref-button-height);
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none;
}

body.crm-reference-ui .btn-sm,
body.crm-reference-ui .btn-group-sm > .btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 10.75px;
}

body.crm-reference-ui .btn-icon {
    width: 30px;
    min-width: 30px;
    padding-inline: 0;
}

body.crm-reference-ui .btn-primary {
    color: #fff;
    background: var(--crm-ref-primary);
    border-color: var(--crm-ref-primary);
}

body.crm-reference-ui .btn-primary:hover,
body.crm-reference-ui .btn-primary:focus {
    background: var(--crm-ref-primary-dark);
    border-color: var(--crm-ref-primary-dark);
}

body.crm-reference-ui .btn-outline-primary {
    color: var(--crm-ref-primary-dark);
    border-color: rgba(var(--crm-ref-primary-rgb), .55);
}

body.crm-reference-ui .btn-outline-primary:hover {
    color: #fff;
    background: var(--crm-ref-primary);
    border-color: var(--crm-ref-primary);
}

body.crm-reference-ui .badge {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 720;
    letter-spacing: .005em;
}

/* ---------------------------------------------------------------------
   Professional table system used by every list and grid
   --------------------------------------------------------------------- */
body.crm-reference-ui .crm-ui-table-shell,
body.crm-reference-ui .crm-table-shell,
body.crm-reference-ui .crm-master-card {
    overflow: hidden;
}

body.crm-reference-ui .table-responsive,
body.crm-reference-ui .crm-ui-table-wrap {
    border-radius: inherit;
    scrollbar-color: #b9c5d3 transparent;
    scrollbar-width: thin;
}

body.crm-reference-ui table.table,
body.crm-reference-ui .crm-ui-table,
body.crm-reference-ui .crm-pro-table,
body.crm-reference-ui .crm-grid-table {
    width: 100%;
    margin: 0 !important;
    color: var(--crm-ref-text);
    background: var(--crm-ref-surface);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px !important;
}

body.crm-reference-ui table.table thead th,
body.crm-reference-ui .crm-ui-table thead th,
body.crm-reference-ui .crm-pro-table thead th {
    height: var(--crm-ref-table-head);
    padding: 7px 10px !important;
    color: #55657b !important;
    background: #f7f9fc !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--crm-ref-border) !important;
    font-size: 9.25px !important;
    font-weight: 760 !important;
    letter-spacing: .035em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

body.crm-reference-ui table.table tbody td,
body.crm-reference-ui .crm-ui-table tbody td,
body.crm-reference-ui .crm-pro-table tbody td {
    min-height: var(--crm-ref-table-row);
    padding: 7px 10px !important;
    vertical-align: middle !important;
    background: var(--crm-ref-surface);
    border-bottom: 1px solid var(--crm-ref-border) !important;
    line-height: 1.28;
}

body.crm-reference-ui table.table tbody tr:last-child td {
    border-bottom: 0 !important;
}

body.crm-reference-ui table.table tbody tr:hover td,
body.crm-reference-ui .crm-ui-table tbody tr:hover td {
    background: #fafcfe !important;
}

[data-bs-theme="dark"] body.crm-reference-ui table.table thead th {
    background: rgba(255,255,255,.035) !important;
    color: #b5c1cf !important;
}

[data-bs-theme="dark"] body.crm-reference-ui table.table tbody tr:hover td {
    background: rgba(255,255,255,.025) !important;
}

body.crm-reference-ui .crm-table-primary,
body.crm-reference-ui table.table a.fw-bold,
body.crm-reference-ui table.table button.fw-bold {
    color: #1479d1 !important;
    font-weight: 720 !important;
    text-decoration: none !important;
}

body.crm-reference-ui .crm-actions-column,
body.crm-reference-ui .crm-actions-cell {
    width: 1%;
    min-width: 92px;
    white-space: nowrap;
    text-align: right;
}

body.crm-reference-ui .crm-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

body.crm-reference-ui .crm-actions-cell .btn {
    min-height: 27px;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 10px;
}

body.crm-reference-ui .crm-empty-cell {
    padding: 28px 12px !important;
    color: var(--crm-ref-muted);
    text-align: center;
}

body.crm-reference-ui .crm-pro-table-footer,
body.crm-reference-ui .crm-grid-pagination {
    min-height: 42px;
    padding: 7px 10px !important;
    color: var(--crm-ref-muted);
    background: var(--crm-ref-surface) !important;
    border-top: 1px solid var(--crm-ref-border) !important;
    font-size: 10px;
}

body.crm-reference-ui .crm-page-buttons .btn,
body.crm-reference-ui .crm-pro-table-footer .btn {
    min-width: 29px;
    min-height: 29px;
    padding: 3px 7px;
}

body.crm-reference-ui .crm-person {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

body.crm-reference-ui .crm-person-avatar,
body.crm-reference-ui .avatar.avatar-sm {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 50% !important;
    object-fit: cover;
}

body.crm-reference-ui .crm-person-name {
    color: var(--crm-ref-text);
    font-size: 10.75px;
    font-weight: 680;
}

body.crm-reference-ui .crm-person-meta {
    color: var(--crm-ref-muted);
    font-size: 9px;
}

/* ---------------------------------------------------------------------
   Unified compact form system
   --------------------------------------------------------------------- */
body.crm-reference-ui .crm-ui-form,
body.crm-reference-ui .crm-entry-form {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 10px;
}

body.crm-reference-ui .crm-ui-form > .row,
body.crm-reference-ui .crm-entry-form > .row,
body.crm-reference-ui .crm-field-grid,
body.crm-reference-ui .card-body.row {
    --bs-gutter-x: 12px !important;
    --bs-gutter-y: 10px !important;
}

body.crm-reference-ui .crm-form-card,
body.crm-reference-ui .crm-form-card-ui,
body.crm-reference-ui .crm-entry-form .card {
    margin-bottom: 12px !important;
    border-radius: var(--crm-ref-radius-md) !important;
    box-shadow: var(--crm-ref-shadow-xs) !important;
}

body.crm-reference-ui .crm-section-heading {
    gap: 9px;
}

body.crm-reference-ui .crm-section-icon {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    color: var(--crm-ref-primary);
    background: var(--crm-ref-primary-soft);
    border-radius: 8px;
    font-size: 15px;
}

body.crm-reference-ui .form-label {
    margin-bottom: 4px !important;
    color: #23304a;
    font-size: 10.75px !important;
    font-weight: 680 !important;
}

[data-bs-theme="dark"] body.crm-reference-ui .form-label {
    color: var(--crm-ref-text);
}

body.crm-reference-ui .form-control,
body.crm-reference-ui .form-select,
body.crm-reference-ui .choices__inner {
    min-height: var(--crm-ref-control-height) !important;
    height: var(--crm-ref-control-height);
    padding: 6px 10px !important;
    color: var(--crm-ref-text);
    background-color: var(--crm-ref-surface) !important;
    border: 1px solid var(--crm-ref-border-strong) !important;
    border-radius: 7px !important;
    font-size: 11.5px !important;
    line-height: 1.2;
    box-shadow: none !important;
}

body.crm-reference-ui .form-control::placeholder {
    color: #9ba8b8;
}

body.crm-reference-ui .form-control:focus,
body.crm-reference-ui .form-select:focus,
body.crm-reference-ui .choices.is-focused .choices__inner,
body.crm-reference-ui .choices.is-open .choices__inner {
    border-color: rgba(var(--crm-ref-primary-rgb), .55) !important;
    box-shadow: 0 0 0 3px rgba(var(--crm-ref-primary-rgb), .08) !important;
}

body.crm-reference-ui textarea.form-control {
    min-height: 74px !important;
    height: auto !important;
    padding-top: 8px !important;
    resize: vertical;
}

body.crm-reference-ui textarea.crm-textarea-sm {
    min-height: 68px !important;
}

body.crm-reference-ui textarea.crm-textarea-lg {
    min-height: 94px !important;
}

body.crm-reference-ui .form-hint,
body.crm-reference-ui .form-text,
body.crm-reference-ui .text-danger.field-validation-error {
    margin-top: 3px;
    font-size: 9.5px;
}

body.crm-reference-ui .choices {
    margin: 0;
    font-size: 11.5px;
}

body.crm-reference-ui .choices__inner {
    display: flex;
    align-items: center;
    padding-right: 28px !important;
}

body.crm-reference-ui .choices__list--dropdown,
body.crm-reference-ui .choices__list[aria-expanded] {
    z-index: 1080;
    margin-top: 4px;
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border);
    border-radius: 8px;
    box-shadow: var(--crm-ref-shadow-md);
}

body.crm-reference-ui .choices__list--dropdown .choices__item {
    padding: 8px 10px;
    font-size: 11px;
}

body.crm-reference-ui .choices__list--dropdown .is-highlighted {
    color: var(--crm-ref-primary-dark);
    background: var(--crm-ref-primary-soft);
}

body.crm-reference-ui .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-color: var(--crm-ref-border-strong);
}

body.crm-reference-ui .form-switch .form-check-input {
    width: 30px;
}

body.crm-reference-ui .crm-switch-row {
    min-height: 48px;
    padding: 9px 10px 9px 44px;
    background: var(--crm-ref-surface-soft);
    border: 1px solid var(--crm-ref-border);
    border-radius: 8px;
}

body.crm-reference-ui .crm-switch-row strong,
body.crm-reference-ui .crm-switch-row small {
    display: block;
}

body.crm-reference-ui .crm-switch-row strong {
    font-size: 11px;
}

body.crm-reference-ui .crm-switch-row small {
    margin-top: 2px;
    color: var(--crm-ref-muted);
    font-size: 9.5px;
}

body.crm-reference-ui .crm-upload-zone {
    min-height: 104px;
    padding: 16px;
    color: var(--crm-ref-muted);
    background: var(--crm-ref-surface-soft);
    border: 1px dashed #b8c8d9;
    border-radius: 8px;
}

body.crm-reference-ui .crm-action-card {
    position: sticky;
    top: calc(var(--crm-ref-topbar-height) + var(--crm-ref-breadcrumb-height) + 12px);
}

body.crm-reference-ui .crm-ui-form-actions,
body.crm-reference-ui .modal-footer {
    gap: 7px;
    padding: 9px 12px !important;
    background: var(--crm-ref-surface-soft);
    border-top: 1px solid var(--crm-ref-border);
}

/* ---------------------------------------------------------------------
   Modal system
   --------------------------------------------------------------------- */
body.crm-reference-ui .modal-content {
    overflow: hidden;
    background: var(--crm-ref-surface);
    border: 0;
    border-radius: 11px;
    box-shadow: var(--crm-ref-shadow-md);
}

body.crm-reference-ui .modal-header {
    min-height: 50px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--crm-ref-border);
}

body.crm-reference-ui .modal-title {
    color: var(--crm-ref-text);
    font-size: 14px;
    font-weight: 740;
}

body.crm-reference-ui .modal-body {
    padding: 14px;
}

body.crm-reference-ui .modal-footer {
    min-height: 48px;
}

/* ---------------------------------------------------------------------
   Dashboard mockup parity
   --------------------------------------------------------------------- */
body.crm-reference-ui .crm-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.crm-reference-ui .crm-dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-height: 36px;
}

body.crm-reference-ui .crm-dashboard-toolbar .btn,
body.crm-reference-ui .crm-dashboard-toolbar .form-select {
    min-height: 32px !important;
    height: 32px;
}

body.crm-reference-ui .crm-dashboard-period {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    color: var(--crm-ref-text);
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border);
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 600;
}

body.crm-reference-ui .crm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

body.crm-reference-ui .crm-kpi-card {
    display: flex;
    align-items: center;
    min-height: 84px;
    gap: 11px;
    padding: 12px;
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border);
    border-radius: 8px;
    box-shadow: var(--crm-ref-shadow-xs);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.crm-reference-ui a.crm-kpi-card:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--crm-ref-primary-rgb), .30);
    box-shadow: var(--crm-ref-shadow-sm);
}

body.crm-reference-ui .crm-kpi-icon {
    display: grid;
    width: 38px;
    height: 38px;
    min-width: 38px;
    place-items: center;
    border-radius: 9px;
    font-size: 19px;
}

body.crm-reference-ui .crm-kpi-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.14;
}

body.crm-reference-ui .crm-kpi-label {
    color: #516176;
    font-size: 9.5px;
    font-weight: 650;
}

body.crm-reference-ui .crm-kpi-value {
    margin-top: 4px;
    color: var(--crm-ref-text);
    font-size: 20px !important;
    font-weight: 780;
    letter-spacing: -.03em;
}

body.crm-reference-ui .crm-kpi-hint {
    margin-top: 4px;
    color: var(--crm-ref-success);
    font-size: 9px;
    font-weight: 620;
}

body.crm-reference-ui .crm-tone-blue,
body.crm-reference-ui .crm-tone-azure,
body.crm-reference-ui .crm-tone-indigo { color: #2563eb; background: #eef3ff; }
body.crm-reference-ui .crm-tone-yellow,
body.crm-reference-ui .crm-tone-orange { color: #e78b00; background: #fff6e4; }
body.crm-reference-ui .crm-tone-red { color: var(--crm-ref-danger); background: #fff0f3; }
body.crm-reference-ui .crm-tone-green,
body.crm-reference-ui .crm-tone-teal { color: var(--crm-ref-success); background: #ebf8f2; }
body.crm-reference-ui .crm-tone-purple { color: var(--crm-ref-purple); background: #f2efff; }

body.crm-reference-ui .crm-dashboard-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.crm-reference-ui .crm-ref-card {
    overflow: hidden;
    min-width: 0;
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border);
    border-radius: 8px;
    box-shadow: var(--crm-ref-shadow-xs);
}

body.crm-reference-ui .crm-ref-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--crm-ref-border);
}

body.crm-reference-ui .crm-ref-card-title {
    margin: 0;
    color: var(--crm-ref-text);
    font-size: 12px;
    font-weight: 730;
}

body.crm-reference-ui .crm-ref-card-link {
    color: #1479d1;
    font-size: 9.5px;
    font-weight: 650;
    text-decoration: none;
}

body.crm-reference-ui .crm-ref-card-link:hover {
    color: var(--crm-ref-primary-dark);
}

body.crm-reference-ui .crm-ref-list {
    display: flex;
    flex-direction: column;
}

body.crm-reference-ui .crm-ref-list-row {
    display: flex;
    align-items: center;
    min-height: 51px;
    gap: 9px;
    padding: 8px 11px;
    color: var(--crm-ref-text);
    background: var(--crm-ref-surface);
    border-bottom: 1px solid var(--crm-ref-border);
    text-decoration: none;
}

body.crm-reference-ui .crm-ref-list-row:last-child {
    border-bottom: 0;
}

body.crm-reference-ui .crm-ref-list-row:hover {
    background: #fafcfe;
}

body.crm-reference-ui .crm-ref-check {
    display: grid;
    width: 23px;
    height: 23px;
    min-width: 23px;
    place-items: center;
    color: #6d7f92;
    background: #f3f6fa;
    border: 1px solid #dfe7f0;
    border-radius: 50%;
    font-size: 12px;
}

body.crm-reference-ui .crm-ref-list-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    line-height: 1.2;
}

body.crm-reference-ui .crm-ref-list-copy strong {
    overflow: hidden;
    color: var(--crm-ref-text);
    font-size: 10.75px;
    font-weight: 690;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.crm-reference-ui .crm-ref-list-copy small {
    overflow: hidden;
    margin-top: 3px;
    color: var(--crm-ref-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.crm-reference-ui .crm-ref-task-meta {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 3px;
    color: var(--crm-ref-muted);
    font-size: 9px;
}

body.crm-reference-ui .crm-ref-priority {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--crm-ref-text);
    font-size: 9px;
    font-weight: 620;
}

body.crm-reference-ui .crm-ref-priority::before {
    width: 6px;
    height: 6px;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

body.crm-reference-ui .crm-ref-priority.is-high { color: var(--crm-ref-danger); }
body.crm-reference-ui .crm-ref-priority.is-medium { color: var(--crm-ref-warning); }
body.crm-reference-ui .crm-ref-priority.is-low { color: var(--crm-ref-success); }

body.crm-reference-ui .crm-board-row {
    display: flex;
    align-items: center;
    min-height: 51px;
    gap: 10px;
    padding: 8px 12px;
    color: var(--crm-ref-text);
    border-bottom: 1px solid var(--crm-ref-border);
    text-decoration: none;
}

body.crm-reference-ui .crm-board-row:last-child { border-bottom: 0; }
body.crm-reference-ui .crm-board-row:hover { background: #fafcfe; }

body.crm-reference-ui .crm-board-count {
    display: grid;
    width: 29px;
    height: 29px;
    min-width: 29px;
    place-items: center;
    color: #2563eb;
    background: #eef3ff;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 750;
}

body.crm-reference-ui .crm-board-count.is-green { color: var(--crm-ref-success); background: #eaf8f1; }
body.crm-reference-ui .crm-board-count.is-orange { color: var(--crm-ref-warning); background: #fff5df; }
body.crm-reference-ui .crm-board-count.is-purple { color: var(--crm-ref-purple); background: #f2efff; }
body.crm-reference-ui .crm-board-count.is-teal { color: var(--crm-ref-primary); background: var(--crm-ref-primary-soft); }

body.crm-reference-ui .crm-board-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

body.crm-reference-ui .crm-board-copy strong { font-size: 10.5px; }
body.crm-reference-ui .crm-board-copy small { margin-top: 2px; color: var(--crm-ref-muted); font-size: 9px; }
body.crm-reference-ui .crm-board-row > i { color: var(--crm-ref-muted); font-size: 13px; }

body.crm-reference-ui .crm-dashboard-notifications,
body.crm-reference-ui .crm-ref-inbox {
    display: flex;
    flex-direction: column;
}

body.crm-reference-ui .crm-dashboard-notification {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 51px;
    gap: 9px;
    padding: 8px 11px;
    color: var(--crm-ref-text);
    border-bottom: 1px solid var(--crm-ref-border);
    text-decoration: none;
}

body.crm-reference-ui .crm-dashboard-notification:last-child { border-bottom: 0; }
body.crm-reference-ui .crm-dashboard-notification:hover { background: #fafcfe; }
body.crm-reference-ui .crm-dashboard-notification.is-unread { background: rgba(37,99,235,.025); }

body.crm-reference-ui .crm-notification-dot {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 740;
}

body.crm-reference-ui .crm-notification-time {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--crm-ref-muted);
    font-size: 8.75px;
    white-space: nowrap;
}

body.crm-reference-ui .crm-notification-time::after {
    width: 6px;
    height: 6px;
    content: "";
    background: #2563eb;
    border-radius: 50%;
}

body.crm-reference-ui .crm-work-calendar {
    min-height: 220px;
}

body.crm-reference-ui .crm-calendar-grid {
    border-top: 0;
}

body.crm-reference-ui .crm-calendar-weekday {
    height: 27px;
    color: #55657b;
    background: #f7f9fc;
    font-size: 8.75px;
    font-weight: 720;
}

body.crm-reference-ui .crm-calendar-day {
    min-height: 42px;
    padding: 4px;
    border-color: var(--crm-ref-border);
}

body.crm-reference-ui .crm-calendar-date { font-size: 9px; }
body.crm-reference-ui .crm-calendar-event { padding: 2px 4px; border-radius: 3px; font-size: 7.5px; }

body.crm-reference-ui .crm-dashboard-projects {
    display: flex;
    flex-direction: column;
}

body.crm-reference-ui .crm-dashboard-project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 105px 35px;
    align-items: center;
    min-height: 51px;
    gap: 10px;
    padding: 8px 12px;
    color: var(--crm-ref-text);
    border-bottom: 1px solid var(--crm-ref-border);
    text-decoration: none;
}

body.crm-reference-ui .crm-dashboard-project:last-child { border-bottom: 0; }
body.crm-reference-ui .crm-dashboard-project:hover { background: #fafcfe; }

body.crm-reference-ui .crm-project-progress {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.crm-reference-ui .crm-project-progress .progress {
    flex: 1 1 auto;
    height: 4px;
    background: #edf1f6;
}

body.crm-reference-ui .crm-project-progress .progress-bar { background: var(--crm-ref-success); }
body.crm-reference-ui .crm-project-progress strong { font-size: 9px; }

body.crm-reference-ui .crm-dashboard-workload {
    display: flex;
    flex-direction: column;
}

body.crm-reference-ui .crm-workload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 150px) 38px;
    align-items: center;
    min-height: 51px;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--crm-ref-border);
}

body.crm-reference-ui .crm-workload-row:last-child { border-bottom: 0; }
body.crm-reference-ui .crm-workload-progress .progress { height: 4px; background: #edf1f6; }
body.crm-reference-ui .crm-workload-progress .progress-bar { background: #3b82f6; }
body.crm-reference-ui .crm-workload-progress small { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--crm-ref-muted); font-size: 8.5px; }
body.crm-reference-ui .crm-workload-status { font-size: 8.75px; font-weight: 700; text-align: right; }
body.crm-reference-ui .crm-workload-status.is-busy { color: var(--crm-ref-danger); }
body.crm-reference-ui .crm-workload-status.is-free { color: var(--crm-ref-success); }

body.crm-reference-ui .crm-developer-table-wrap {
    overflow-x: auto;
}

body.crm-reference-ui .crm-developer-table {
    min-width: 1160px;
}

body.crm-reference-ui .crm-developer-table tbody td {
    font-size: 9.75px !important;
}

body.crm-reference-ui .crm-availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 8.75px;
    font-weight: 720;
}

body.crm-reference-ui .crm-availability-pill::before {
    width: 6px;
    height: 6px;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

body.crm-reference-ui .crm-availability-pill.is-busy { color: #dc334f; background: #fff0f3; }
body.crm-reference-ui .crm-availability-pill.is-free { color: #149764; background: #eaf8f1; }
body.crm-reference-ui .crm-live-duration { color: var(--crm-ref-success); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 720; }

body.crm-reference-ui .crm-dashboard-empty {
    display: flex;
    min-height: 126px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 18px;
    color: var(--crm-ref-muted);
    text-align: center;
}

body.crm-reference-ui .crm-dashboard-empty i { color: var(--crm-ref-primary); font-size: 24px; }
body.crm-reference-ui .crm-dashboard-empty strong { color: var(--crm-ref-text); font-size: 11px; }
body.crm-reference-ui .crm-dashboard-empty span { font-size: 9.5px; }

body.crm-reference-ui .crm-dashboard-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 4px;
    color: var(--crm-ref-muted);
    font-size: 9px;
}

/* ---------------------------------------------------------------------
   Collapsed sidebar and responsive layout
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
    body.crm-reference-ui .page-wrapper {
        margin-left: var(--crm-ref-sidebar-width) !important;
        width: calc(100% - var(--crm-ref-sidebar-width)) !important;
    }

    body.crm-reference-ui.crm-sidebar-collapsed .crm-sidebar {
        width: var(--crm-ref-sidebar-collapsed) !important;
        min-width: var(--crm-ref-sidebar-collapsed) !important;
    }

    body.crm-reference-ui.crm-sidebar-collapsed .page-wrapper {
        margin-left: var(--crm-ref-sidebar-collapsed) !important;
        width: calc(100% - var(--crm-ref-sidebar-collapsed)) !important;
    }

    body.crm-reference-ui.crm-sidebar-collapsed .crm-brand-copy,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-sidebar-section-label,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-sidebar-footer strong,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-sidebar-footer small,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-nav-link .nav-link-title,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-nav-chevron,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-soon-badge {
        display: none !important;
    }

    body.crm-reference-ui.crm-sidebar-collapsed .crm-sidebar-brand,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-nav-link,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-shortcut-link {
        justify-content: center;
    }

    body.crm-reference-ui.crm-sidebar-collapsed .crm-nav-link .nav-link-icon,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-shortcut-link .nav-link-icon {
        margin-right: 0 !important;
    }

    body.crm-reference-ui.crm-sidebar-collapsed .crm-submenu {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: 0 !important;
    }
}

@media (max-width: 1399.98px) {
    body.crm-reference-ui .crm-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.crm-reference-ui .crm-global-search { width: min(280px, 27vw); }
    body.crm-reference-ui .crm-project-switch { width: min(180px, 18vw); }
}

@media (max-width: 1199.98px) {
    body.crm-reference-ui .crm-dashboard-grid-3 { grid-template-columns: 1fr 1fr; }
    body.crm-reference-ui .crm-dashboard-grid-3 > :last-child { grid-column: 1 / -1; }
    body.crm-reference-ui .crm-topbar-middle .crm-project-switch { display: none; }
    body.crm-reference-ui .crm-global-search { width: min(300px, 36vw); }
}

@media (max-width: 991.98px) {
    body.crm-reference-ui .crm-sidebar {
        transform: translateX(-100%);
    }

    body.crm-reference-ui.crm-sidebar-mobile-open .crm-sidebar {
        transform: translateX(0);
    }

    body.crm-reference-ui .page-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.crm-reference-ui .crm-topbar-left { min-width: 0; }
    body.crm-reference-ui .crm-topbar-middle { display: none; }
    body.crm-reference-ui .crm-user-copy { display: none !important; }
    body.crm-reference-ui .crm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.crm-reference-ui .crm-dashboard-grid-3 { grid-template-columns: 1fr; }
    body.crm-reference-ui .crm-dashboard-grid-3 > :last-child { grid-column: auto; }
    body.crm-reference-ui .crm-form-side-sticky { position: static !important; }
}

@media (max-width: 575.98px) {
    :root {
        --crm-ref-content-x: 10px;
        --crm-ref-content-gap: 10px;
    }

    body.crm-reference-ui .crm-topbar-inner { padding-inline: 7px !important; }
    body.crm-reference-ui .crm-back-button { display: none !important; }
    body.crm-reference-ui .crm-topbar-title { max-width: 145px; }
    body.crm-reference-ui .crm-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    body.crm-reference-ui .crm-kpi-card { min-height: 76px; padding: 10px; }
    body.crm-reference-ui .crm-kpi-icon { width: 34px; height: 34px; min-width: 34px; }
    body.crm-reference-ui .crm-kpi-value { font-size: 18px !important; }
    body.crm-reference-ui .crm-dashboard-toolbar { justify-content: space-between; overflow-x: auto; }
    body.crm-reference-ui .crm-reference-footer { align-items: flex-start; flex-direction: column; }
    body.crm-reference-ui .crm-actions-cell { min-width: 76px; }
}

/* ---------------------------------------------------------------------
   Dark theme parity adjustments
   --------------------------------------------------------------------- */
body.crm-reference-ui .crm-back-button {
    width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 0 !important;
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-topbar-icon,
[data-bs-theme="dark"] body.crm-reference-ui .crm-user-chevron {
    color: #c3cfdd !important;
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-user-name,
[data-bs-theme="dark"] body.crm-reference-ui .crm-topbar-title {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-global-search input,
[data-bs-theme="dark"] body.crm-reference-ui .crm-project-switch {
    color: #edf3f8;
    background: #1a2a3e !important;
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-global-search kbd {
    color: #9fb0c2;
    background: #213149;
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-ref-list-row:hover,
[data-bs-theme="dark"] body.crm-reference-ui .crm-board-row:hover,
[data-bs-theme="dark"] body.crm-reference-ui .crm-dashboard-notification:hover,
[data-bs-theme="dark"] body.crm-reference-ui .crm-dashboard-project:hover {
    background: rgba(255,255,255,.025);
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-ref-check,
[data-bs-theme="dark"] body.crm-reference-ui .crm-calendar-weekday {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-workload-progress .progress,
[data-bs-theme="dark"] body.crm-reference-ui .crm-project-progress .progress {
    background: rgba(255,255,255,.09);
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-upload-zone,
[data-bs-theme="dark"] body.crm-reference-ui .crm-switch-row {
    background: rgba(255,255,255,.025);
    border-color: rgba(255,255,255,.10);
}

/* =====================================================================
   RC20 SHELL, DROPDOWN, CASCADE AND TABLE-EXPORT HARDENING
   ===================================================================== */
:root {
    /* Slightly wider navigation so long enterprise menu labels do not clip. */
    --crm-ref-sidebar-width: 248px;
}

body.crm-reference-ui .page-wrapper,
body.crm-reference-ui .crm-topbar,
body.crm-reference-ui .crm-topbar-inner,
body.crm-reference-ui .crm-topbar-actions,
body.crm-reference-ui .crm-dropdown {
    overflow: visible !important;
}

body.crm-reference-ui .crm-topbar {
    z-index: 1120 !important;
}

body.crm-reference-ui .crm-breadcrumb-bar {
    z-index: 1030 !important;
}

body.crm-reference-ui .crm-dropdown > .dropdown-menu,
body.crm-reference-ui .crm-dropdown > .dropdown-menu.show,
body.crm-reference-ui .dropdown-menu.show {
    z-index: 1250 !important;
}

body.crm-reference-ui .crm-dropdown > .dropdown-menu.show {
    display: block !important;
}

body.crm-reference-ui .crm-user-menu {
    width: min(310px, calc(100vw - 20px)) !important;
    max-height: min(620px, calc(100vh - 76px));
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.crm-reference-ui .crm-global-search {
    display: flex;
    align-items: center;
    height: 36px;
}

body.crm-reference-ui .crm-global-search > i {
    top: 0 !important;
    bottom: 0;
    left: 12px !important;
    display: inline-flex;
    align-items: center;
    height: 36px;
    line-height: 1;
    transform: none !important;
    pointer-events: none;
}

body.crm-reference-ui .crm-global-search input {
    width: 100%;
    padding-left: 36px !important;
}

body.crm-reference-ui .crm-global-search kbd {
    line-height: 1.1;
}

body.crm-reference-ui select[aria-busy="true"] + .choices .choices__inner,
body.crm-reference-ui .choices.is-disabled .choices__inner {
    cursor: wait;
    opacity: .72;
    background: var(--crm-ref-surface-muted) !important;
}

body.crm-reference-ui .crm-parent-overview-item .crm-nav-link {
    color: #fff !important;
    background: rgba(var(--crm-ref-primary-rgb), .12);
    border: 1px solid rgba(var(--crm-ref-primary-rgb), .12);
}

body.crm-reference-ui .crm-parent-overview-item .crm-nav-link:hover,
body.crm-reference-ui .crm-parent-overview-item .crm-nav-link.active {
    background: rgba(var(--crm-ref-primary-rgb), .26) !important;
}

/* Common export tools added to every application table. */
body.crm-reference-ui .crm-table-tools-host,
body.crm-reference-ui .crm-table-header-tools,
body.crm-reference-ui .crm-table-tools-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.crm-reference-ui .crm-table-tools-left,
body.crm-reference-ui .crm-table-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

body.crm-reference-ui .crm-table-tools-bar {
    min-height: 42px;
    padding: 6px 10px;
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border);
    border-bottom: 0;
    border-radius: var(--crm-ref-radius-md) var(--crm-ref-radius-md) 0 0;
}

body.crm-reference-ui .crm-table-export {
    display: inline-flex;
}

body.crm-reference-ui .crm-export-trigger {
    min-width: 82px;
    justify-content: center;
}

body.crm-reference-ui .crm-table-export .dropdown-menu {
    min-width: 145px;
}

body.crm-reference-ui .crm-table-export .dropdown-item {
    display: flex;
    align-items: center;
}

/* Client acceptance action density and audit-entry controls. */
body.crm-reference-ui .crm-acceptance-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

body.crm-reference-ui .crm-admin-override-note {
    padding: 8px 10px;
    color: #8a5a00;
    background: #fff8e7;
    border: 1px solid #f2d99b;
    border-radius: 7px;
    font-size: 10.5px;
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-admin-override-note {
    color: #ffd486;
    background: rgba(245, 159, 0, .10);
    border-color: rgba(245, 159, 0, .24);
}

@media (max-width: 1399.98px) {
    :root { --crm-ref-sidebar-width: 238px; }
}

@media (max-width: 1199.98px) {
    body.crm-reference-ui .crm-global-search { width: min(270px, 34vw); }
}

/* =====================================================================
   RC21 TABLER FEEDBACK, ADMIN LISTS, LOGIN AND EXPORT HARDENING
   ===================================================================== */

/* Authentication form: centered controls and reliably aligned login CTA. */
body.crm-auth-body .crm-login-card {
    width: min(100%, 430px);
}

body.crm-auth-body .crm-login-form {
    display: flex;
    flex-direction: column;
}

body.crm-auth-body .crm-login-form .input-icon {
    display: flex;
    align-items: stretch;
}

body.crm-auth-body .crm-login-form .input-icon-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    min-width: 2.6rem;
}

body.crm-auth-body .crm-login-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    padding-inline: 1rem;
    font-weight: 750;
    line-height: 1;
}

body.crm-auth-body .crm-login-submit .ti {
    margin: 0 !important;
    font-size: 1.1rem;
}

/* Shared admin-list header and compact toolbar alignment. */
body.crm-reference-ui .crm-admin-list-header {
    margin: 0 0 10px !important;
    padding: 0 1px !important;
}

body.crm-reference-ui .crm-admin-list-header .row {
    min-height: 50px;
}

body.crm-reference-ui .crm-admin-list-header .crm-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    font-size: 17px;
}

body.crm-reference-ui .crm-admin-list-card {
    overflow: visible !important;
}

body.crm-reference-ui .crm-admin-list-toolbar,
body.crm-reference-ui .crm-grid-toolbar.crm-admin-list-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px 12px !important;
    min-height: 50px;
    padding: 8px 10px !important;
    background: var(--crm-ref-surface) !important;
    border-bottom: 1px solid var(--crm-ref-border) !important;
}

body.crm-reference-ui .crm-admin-filter-form,
body.crm-reference-ui .crm-grid-toolbar-main.crm-admin-filter-form {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 620px;
    gap: 7px !important;
    min-width: 0;
    margin: 0 !important;
}

body.crm-reference-ui .crm-admin-filter-form .crm-grid-search {
    flex: 1 1 360px;
    width: auto !important;
    max-width: 520px;
    min-width: 220px;
}

body.crm-reference-ui .crm-admin-filter-form .input-icon-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    color: var(--crm-ref-muted);
    pointer-events: none;
}

body.crm-reference-ui .crm-admin-filter-form .form-control,
body.crm-reference-ui .crm-admin-filter-form .form-select,
body.crm-reference-ui .crm-admin-filter-form .btn,
body.crm-reference-ui .crm-admin-toolbar-actions .btn {
    min-height: 34px !important;
    height: 34px !important;
}

body.crm-reference-ui .crm-admin-module-filter {
    flex: 0 1 220px;
    max-width: 220px;
}

body.crm-reference-ui .crm-admin-toolbar-actions,
body.crm-reference-ui .crm-grid-toolbar-actions.crm-admin-toolbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin-left: auto !important;
    white-space: nowrap;
}

body.crm-reference-ui .crm-admin-stats .crm-stat-card .card-body {
    min-height: 68px;
    padding: 10px 12px !important;
}

body.crm-reference-ui .crm-admin-table th,
body.crm-reference-ui .crm-admin-table td,
body.crm-reference-ui .crm-admin-list-card .crm-grid-table th,
body.crm-reference-ui .crm-admin-list-card .crm-grid-table td {
    vertical-align: middle !important;
}

body.crm-reference-ui .crm-admin-list-card .crm-actions-column,
body.crm-reference-ui .crm-admin-list-card td.text-end {
    min-width: 112px;
    text-align: right !important;
    white-space: nowrap;
}

body.crm-reference-ui .crm-person-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

body.crm-reference-ui .crm-person-cell-avatar {
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    background-position: center;
    background-size: cover;
    border: 1px solid var(--crm-ref-border);
}

body.crm-reference-ui .crm-master-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
}

/* Export trigger and menu: force readable labels in light and dark modes. */
body.crm-reference-ui .crm-table-export {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    isolation: isolate;
}

body.crm-reference-ui .crm-export-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 92px !important;
    height: 34px !important;
    padding: 0 11px !important;
    color: var(--crm-ref-text) !important;
    background: var(--crm-ref-surface) !important;
    border-color: var(--crm-ref-border-strong) !important;
    opacity: 1 !important;
}

body.crm-reference-ui .crm-export-trigger:hover,
body.crm-reference-ui .crm-export-trigger[aria-expanded="true"] {
    color: var(--crm-ref-primary-dark) !important;
    background: var(--crm-ref-primary-soft) !important;
    border-color: var(--crm-ref-primary) !important;
}

body.crm-reference-ui .crm-export-trigger .crm-export-label,
body.crm-reference-ui .crm-export-trigger .crm-export-chevron,
body.crm-reference-ui .crm-export-trigger > i,
body.crm-reference-ui .crm-export-item > span,
body.crm-reference-ui .crm-export-item > i {
    display: inline-flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit;
}

body.crm-reference-ui .crm-export-menu,
body.crm-reference-ui .crm-table-export .dropdown-menu {
    display: none;
    min-width: 170px !important;
    padding: 6px !important;
    color: var(--crm-ref-text) !important;
    background: var(--crm-ref-surface) !important;
    border: 1px solid var(--crm-ref-border) !important;
    box-shadow: var(--crm-ref-shadow-md) !important;
    z-index: 1400 !important;
}

body.crm-reference-ui .crm-export-menu.show,
body.crm-reference-ui .crm-table-export .dropdown-menu.show {
    display: block !important;
}

body.crm-reference-ui .crm-export-item,
body.crm-reference-ui .crm-table-export .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 34px;
    padding: 7px 9px !important;
    color: var(--crm-ref-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.crm-reference-ui .crm-export-item:hover,
body.crm-reference-ui .crm-table-export .dropdown-item:hover {
    color: var(--crm-ref-primary-dark) !important;
    background: var(--crm-ref-primary-soft) !important;
}

/* Tabler-style action toasts. */
.crm-toast-host {
    top: 62px !important;
    right: 12px !important;
    z-index: 1600 !important;
    width: min(390px, calc(100vw - 24px));
    padding: 0 !important;
}

.crm-toast {
    width: 100%;
    margin-bottom: 9px;
    color: var(--crm-ref-text);
    background: var(--crm-ref-surface);
    border: 1px solid var(--crm-ref-border) !important;
    border-left-width: 4px !important;
    border-radius: 10px !important;
    box-shadow: var(--crm-ref-shadow-md) !important;
    overflow: hidden;
}

.crm-toast-success { border-left-color: var(--crm-ref-success) !important; }
.crm-toast-danger { border-left-color: var(--crm-ref-danger) !important; }
.crm-toast-warning { border-left-color: var(--crm-ref-warning) !important; }
.crm-toast-info { border-left-color: var(--crm-ref-info) !important; }

.crm-toast .crm-toast-header {
    min-height: 40px;
    padding: 7px 10px;
    color: var(--crm-ref-text);
    background: var(--crm-ref-surface);
    border-bottom: 1px solid var(--crm-ref-border);
}

.crm-toast .toast-body {
    padding: 9px 12px 11px 45px;
    color: var(--crm-ref-muted);
    font-size: 12px;
    line-height: 1.45;
}

.crm-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 8px;
    border-radius: 7px;
    font-size: 15px;
}

.crm-toast-icon-success { color: var(--crm-ref-success); background: rgba(25,169,116,.11); }
.crm-toast-icon-danger { color: var(--crm-ref-danger); background: rgba(231,68,90,.11); }
.crm-toast-icon-warning { color: #ad6b00; background: rgba(245,159,0,.14); }
.crm-toast-icon-info { color: var(--crm-ref-info); background: rgba(59,130,246,.11); }

/* Tabler confirmation modal; no browser-native confirm dialog. */
.crm-confirm-modal .modal-dialog {
    max-width: 410px;
}

.crm-confirm-modal .modal-content {
    border: 1px solid var(--crm-ref-border);
    border-radius: 13px;
    box-shadow: var(--crm-ref-shadow-md);
    overflow: hidden;
}

.crm-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 27px;
}

.crm-confirm-icon-warning { color: #a66300; background: rgba(245,159,0,.14); }
.crm-confirm-icon-danger { color: var(--crm-ref-danger); background: rgba(231,68,90,.12); }
.crm-confirm-icon-info { color: var(--crm-ref-info); background: rgba(59,130,246,.12); }
.crm-confirm-icon-primary { color: var(--crm-ref-primary); background: var(--crm-ref-primary-soft); }

.crm-confirm-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px 14px;
    background: var(--crm-ref-surface-soft);
    border-top: 1px solid var(--crm-ref-border);
}

.crm-confirm-footer .btn {
    min-width: 110px;
}

@media (max-width: 767.98px) {
    body.crm-reference-ui .crm-admin-filter-form,
    body.crm-reference-ui .crm-grid-toolbar-main.crm-admin-filter-form {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    body.crm-reference-ui .crm-admin-filter-form .crm-grid-search,
    body.crm-reference-ui .crm-admin-module-filter {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: none;
    }

    body.crm-reference-ui .crm-admin-toolbar-actions {
        width: 100%;
        justify-content: flex-end !important;
    }
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-export-trigger,
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-menu,
[data-bs-theme="dark"] .crm-toast,
[data-bs-theme="dark"] .crm-toast .crm-toast-header,
[data-bs-theme="dark"] .crm-confirm-modal .modal-content {
    color: var(--crm-ref-text) !important;
    background: var(--crm-ref-surface) !important;
}

body.crm-reference-ui .crm-grid-column-menu,
body.crm-reference-ui .crm-grid-column-menu .dropdown-item,
body.crm-reference-ui .crm-grid-column-menu label,
body.crm-reference-ui .crm-grid-column-menu span {
    color: var(--crm-ref-text) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =====================================================================
   RC22 ACCOUNT, USER IMAGE, DROPDOWN AND EXPORT HARDENING
   ===================================================================== */
:root {
    --crm-auth-control-height: 42px;
    --crm-auth-radius: 9px;
    --crm-auth-border: #d6dee9;
    --crm-auth-focus: #0e9f98;
}

/* Login: clean alignment, no icon/text collision, compact enterprise card. */
body.crm-auth-body .crm-login-shell-v2 {
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
}

body.crm-auth-body .crm-login-brand {
    background: linear-gradient(145deg, #17385d 0%, #235ba7 58%, #2869bf 100%);
}

body.crm-auth-body .crm-login-brand-content {
    max-width: 38rem;
}

body.crm-auth-body .crm-login-eyebrow {
    margin-bottom: 10px;
    color: rgba(255,255,255,.64);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

body.crm-auth-body .crm-login-brand-title {
    margin: 0;
    color: #fff;
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -.04em;
}

body.crm-auth-body .crm-login-brand-subtitle {
    margin: 12px 0 8px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
}

body.crm-auth-body .crm-login-brand-copy {
    max-width: 35rem;
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: .95rem;
    line-height: 1.65;
}

body.crm-auth-body .crm-login-feature-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    color: rgba(255,255,255,.82);
    font-size: .84rem;
}

body.crm-auth-body .crm-login-feature-list span {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.crm-auth-body .crm-login-form-panel {
    padding: clamp(24px, 5vw, 64px);
}

body.crm-auth-body .crm-login-card-v2 {
    max-width: 420px;
}

body.crm-auth-body .crm-login-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

body.crm-auth-body .crm-login-heading-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: var(--crm-ref-primary-dark, #087f79);
    background: var(--crm-ref-primary-soft, #e8f8f6);
    font-size: 20px;
}

body.crm-auth-body .crm-login-heading h2 {
    margin: 0 0 2px;
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

body.crm-auth-body .crm-login-heading p {
    margin: 0;
    color: var(--crm-ref-muted, #66758a);
    font-size: .82rem;
}

body.crm-auth-body .crm-auth-field {
    margin-bottom: 15px;
}

body.crm-auth-body .crm-auth-field .form-label {
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 700;
}

.crm-auth-control,
.crm-password-field {
    position: relative;
}

body.crm-auth-body .crm-auth-control .form-control,
.crm-password-field .form-control {
    height: var(--crm-auth-control-height) !important;
    min-height: var(--crm-auth-control-height) !important;
    border: 1px solid var(--crm-auth-border) !important;
    border-radius: var(--crm-auth-radius) !important;
    background: var(--crm-ref-surface, #fff) !important;
    box-shadow: none !important;
}

body.crm-auth-body .crm-auth-control .form-control {
    padding-left: 40px !important;
}

body.crm-auth-body .crm-password-field .form-control,
.crm-password-field .form-control {
    padding-right: 42px !important;
}

body.crm-auth-body .crm-auth-control .form-control:focus,
.crm-password-field .form-control:focus {
    border-color: var(--crm-auth-focus) !important;
    box-shadow: 0 0 0 3px rgba(14,159,152,.10) !important;
}

.crm-auth-leading-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: #8190a4;
    font-size: 17px;
    pointer-events: none;
}

.crm-password-toggle {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 5px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.crm-password-toggle:hover,
.crm-password-toggle:focus-visible {
    color: var(--crm-ref-primary-dark, #087f79);
    background: var(--crm-ref-primary-soft, #e8f8f6);
    outline: none;
}

body.crm-auth-body .crm-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 3px 0 19px;
}

body.crm-auth-body .crm-login-submit {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
    font-size: .86rem;
}

body.crm-auth-body .crm-login-footnote {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 18px;
    color: var(--crm-ref-muted, #66758a);
    font-size: .74rem;
    line-height: 1.45;
}

body.crm-auth-body .crm-login-validation:empty {
    display: none;
}

/* User image preview uses a real image element so nested upload paths are reliable. */
.crm-profile-image-preview {
    width: 112px;
    height: 112px;
    display: block;
    margin-inline: auto;
    object-fit: cover;
    border: 3px solid var(--crm-ref-surface, #fff);
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--crm-ref-border, #dce4ed), 0 8px 24px rgba(15,23,42,.08);
    background: #eef3f8;
}

/* User dropdown: never inherit invisible/white menu text from the topbar. */
body.crm-reference-ui .crm-user-menu {
    min-width: 300px !important;
    padding: 7px !important;
    color: var(--crm-ref-text, #1f2937) !important;
    background: var(--crm-ref-surface, #fff) !important;
}

body.crm-reference-ui .crm-user-menu .dropdown-item,
body.crm-reference-ui .crm-user-menu button.dropdown-item,
body.crm-reference-ui .crm-user-menu a.dropdown-item {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    color: var(--crm-ref-text, #1f2937) !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

body.crm-reference-ui .crm-user-menu .dropdown-item i {
    width: 20px;
    flex: 0 0 20px;
    color: var(--crm-ref-muted, #64748b) !important;
}

body.crm-reference-ui .crm-user-menu .dropdown-item:hover,
body.crm-reference-ui .crm-user-menu .dropdown-item:focus {
    color: var(--crm-ref-primary-dark, #087f79) !important;
    background: var(--crm-ref-primary-soft, #e8f8f6) !important;
}

body.crm-reference-ui .crm-user-menu .dropdown-item.text-danger,
body.crm-reference-ui .crm-user-menu .dropdown-item.text-danger i {
    color: var(--crm-ref-danger, #d63939) !important;
}

/* Export: force label/menu readability even when legacy table CSS is present. */
body.crm-reference-ui .crm-export-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 96px !important;
    color: #334155 !important;
    background: #fff !important;
    border-color: #aebbc9 !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

body.crm-reference-ui .crm-export-trigger .crm-export-label,
body.crm-reference-ui .crm-export-trigger .crm-export-chevron,
body.crm-reference-ui .crm-export-trigger > i {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    color: #334155 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.crm-reference-ui .crm-export-menu,
body.crm-reference-ui .crm-table-export .dropdown-menu {
    min-width: 176px !important;
    color: #1f2937 !important;
    background: #fff !important;
}

body.crm-reference-ui .crm-export-item,
body.crm-reference-ui .crm-export-item span,
body.crm-reference-ui .crm-export-item i,
body.crm-reference-ui .crm-table-export .dropdown-item,
body.crm-reference-ui .crm-table-export .dropdown-item span,
body.crm-reference-ui .crm-table-export .dropdown-item i {
    color: #1f2937 !important;
    font-size: 12px !important;
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.crm-reference-ui .crm-export-item .text-success { color: #2fb344 !important; }
body.crm-reference-ui .crm-export-item .text-primary { color: #206bc4 !important; }

[data-bs-theme="dark"] body.crm-reference-ui .crm-export-trigger,
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-menu,
[data-bs-theme="dark"] body.crm-reference-ui .crm-table-export .dropdown-menu {
    color: #e7edf5 !important;
    background: #182433 !important;
    border-color: #3a495c !important;
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-export-trigger .crm-export-label,
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-trigger .crm-export-chevron,
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-trigger > i,
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-item,
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-item span,
[data-bs-theme="dark"] body.crm-reference-ui .crm-table-export .dropdown-item,
[data-bs-theme="dark"] body.crm-reference-ui .crm-table-export .dropdown-item span {
    color: #e7edf5 !important;
}

@media (max-width: 991.98px) {
    body.crm-auth-body .crm-login-shell-v2 { display: block; }
    body.crm-auth-body .crm-login-form-panel { min-height: 100vh; padding: 22px; }
}

/* RC22 avatar rendering consistency across header, team, dashboard and workflow lists. */
img[data-crm-avatar] {
    object-fit: cover;
    object-position: center;
}

/* RC23 - Role configurable dashboard profiles */
.crm-role-dashboard { display: grid; gap: 1rem; }
.crm-role-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--crm-ref-border, #dce4ec);
    border-radius: .8rem;
    background: var(--crm-ref-surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.crm-role-hero h1 { margin: .1rem 0 .25rem; font-size: 1.3rem; letter-spacing: -.025em; }
.crm-role-hero p { margin: 0; color: var(--tblr-secondary-color, #667085); font-size: .875rem; }
.crm-role-kicker { display: block; color: var(--crm-ref-primary, #0f8b87); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.crm-role-hero-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.crm-dashboard-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.crm-client-dashboard .crm-role-hero { background: linear-gradient(135deg, rgba(15,139,135,.08), rgba(255,255,255,.96)); }
[data-bs-theme="dark"] .crm-client-dashboard .crm-role-hero { background: linear-gradient(135deg, rgba(15,139,135,.15), rgba(24,36,51,.96)); }
@media (max-width: 991.98px) {
    .crm-role-hero { align-items: flex-start; flex-direction: column; }
    .crm-dashboard-grid-2 { grid-template-columns: 1fr; }
}

/* ==============================================================
   RC32 - export portal + search icon alignment hardening
   ============================================================== */
body.crm-reference-ui .crm-export-floating-menu {
    position: fixed !important;
    z-index: 99999 !important;
    display: none !important;
    min-width: 176px !important;
    padding: 6px !important;
    color: #1f2937 !important;
    background: #fff !important;
    border: 1px solid var(--crm-ref-border, #dce4ec) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18) !important;
    transform: none !important;
}
body.crm-reference-ui .crm-export-floating-menu.show {
    display: block !important;
}
body.crm-reference-ui .crm-export-floating-menu .crm-export-item,
body.crm-reference-ui .crm-export-floating-menu .crm-export-item > span,
body.crm-reference-ui .crm-export-floating-menu .crm-export-item > i {
    display: flex !important;
    align-items: center !important;
    color: #1f2937 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-indent: 0 !important;
}
body.crm-reference-ui .crm-export-floating-menu .crm-export-item {
    width: 100% !important;
    min-height: 36px !important;
    gap: 9px !important;
    padding: 8px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    text-align: left !important;
}
body.crm-reference-ui .crm-export-floating-menu .crm-export-item:hover,
body.crm-reference-ui .crm-export-floating-menu .crm-export-item:focus {
    color: var(--crm-ref-primary-dark, #087f79) !important;
    background: var(--crm-ref-primary-soft, #e8f8f6) !important;
}
body.crm-reference-ui .crm-export-floating-menu .text-success { color: #2fb344 !important; }
body.crm-reference-ui .crm-export-floating-menu .text-primary { color: #206bc4 !important; }
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-floating-menu {
    color: #e7edf5 !important;
    background: #182433 !important;
    border-color: #3a495c !important;
}
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-floating-menu .crm-export-item,
[data-bs-theme="dark"] body.crm-reference-ui .crm-export-floating-menu .crm-export-item > span {
    color: #e7edf5 !important;
}

/* Keep search glyphs vertically centered in the header and reusable table toolbars. */
body.crm-reference-ui .crm-global-search > i {
    top: 50% !important;
    bottom: auto !important;
    left: 12px !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 16px !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}
body.crm-reference-ui .input-icon {
    position: relative;
}
body.crm-reference-ui .input-icon > .input-icon-addon {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 34px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transform: none !important;
    z-index: 3 !important;
    pointer-events: none !important;
}
body.crm-reference-ui .input-icon > .input-icon-addon > i {
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.crm-reference-ui .input-icon > input.form-control {
    padding-left: 34px !important;
}

/* =====================================================================
   RC33 SIDEBAR POLISH - calmer hierarchy, wider labels, leaf-first active
   ===================================================================== */
:root {
    --crm-ref-sidebar-width: 258px;
    --crm-ref-sidebar-collapsed: 70px;
}

body.crm-reference-ui .crm-sidebar {
    box-shadow: 3px 0 20px rgba(6, 22, 37, .075) !important;
}

body.crm-reference-ui .crm-sidebar-brand {
    height: 68px !important;
    min-height: 68px !important;
    padding: 11px 14px !important;
}

body.crm-reference-ui .crm-sidebar-scroll {
    padding: 8px 7px 12px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.11) transparent;
}

body.crm-reference-ui .crm-sidebar-scroll::-webkit-scrollbar { width: 3px; }
body.crm-reference-ui .crm-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
body.crm-reference-ui .crm-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.11);
    border-radius: 999px;
}
body.crm-reference-ui .crm-sidebar-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); }

body.crm-reference-ui .crm-sidebar-section-label {
    padding: 8px 11px 5px !important;
    margin: 0 !important;
    font-size: 8px !important;
    letter-spacing: .14em !important;
    opacity: .82;
}

body.crm-reference-ui .crm-nav-list { gap: 3px !important; }

body.crm-reference-ui .crm-nav-list > .nav-item > .crm-nav-link {
    min-height: 38px !important;
    padding: 7px 10px !important;
    border-radius: 7px !important;
    font-size: 11.8px !important;
}

body.crm-reference-ui .crm-nav-link {
    position: relative;
    overflow: hidden;
}

body.crm-reference-ui .crm-nav-link .nav-link-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.008em;
}

body.crm-reference-ui .crm-nav-link .nav-link-icon {
    width: 19px !important;
    min-width: 19px !important;
    margin-right: 8px !important;
    font-size: 15px !important;
    opacity: .92;
}

/* Parent branches are intentionally restrained. Only the selected leaf is strong. */
body.crm-reference-ui .crm-nav-parent.active > .crm-nav-toggle,
body.crm-reference-ui .crm-nav-parent > .crm-nav-toggle[aria-expanded="true"] {
    color: #fff !important;
    background: rgba(255,255,255,.065) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

body.crm-reference-ui .crm-nav-parent.active > .crm-nav-toggle .nav-link-icon,
body.crm-reference-ui .crm-nav-parent > .crm-nav-toggle[aria-expanded="true"] .nav-link-icon {
    color: #67d8d0 !important;
}

body.crm-reference-ui .crm-nav-parent.active > .crm-nav-toggle::after,
body.crm-reference-ui .crm-nav-parent > .crm-nav-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 99px;
    background: rgba(78, 211, 201, .74);
}

body.crm-reference-ui .crm-nav-link.active:not(.crm-nav-toggle) {
    color: #fff !important;
    background: linear-gradient(90deg, #0c9f98, #0c8e89) !important;
    box-shadow: 0 4px 11px rgba(var(--crm-ref-primary-rgb), .17) !important;
}

body.crm-reference-ui .crm-nav-link.active:not(.crm-nav-toggle)::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #59e1d8;
}

body.crm-reference-ui .crm-submenu {
    margin: 3px 0 5px 5px !important;
    padding-left: 2px !important;
    border-left: 1px solid rgba(255,255,255,.065) !important;
    gap: 1px !important;
}

body.crm-reference-ui .crm-submenu .crm-nav-link {
    min-height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    font-size: 10.2px !important;
    color: rgba(238, 246, 252, .78) !important;
}

body.crm-reference-ui .crm-submenu .crm-submenu {
    margin-left: 13px !important;
    padding-left: 7px !important;
    border-left-color: rgba(255,255,255,.055) !important;
}

body.crm-reference-ui .crm-submenu .crm-submenu .crm-nav-link {
    min-height: 31px !important;
    padding-block: 5px !important;
    font-size: 10.8px !important;
}

body.crm-reference-ui .crm-submenu .crm-nav-parent.active > .crm-nav-toggle,
body.crm-reference-ui .crm-submenu .crm-nav-parent > .crm-nav-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,.045) !important;
    box-shadow: none !important;
}

body.crm-reference-ui .crm-nav-chevron {
    margin-left: 6px !important;
    font-size: 11px !important;
    opacity: .58 !important;
    transition: transform .16s ease, opacity .16s ease;
}
body.crm-reference-ui .crm-nav-toggle[aria-expanded="true"] .crm-nav-chevron {
    transform: rotate(90deg);
    opacity: .9 !important;
}

body.crm-reference-ui .crm-nav-placeholder { opacity: .63; }
body.crm-reference-ui .crm-soon-badge { font-size: 7.5px !important; }

@media (min-width: 992px) {
    body.crm-reference-ui.crm-sidebar-collapsed .crm-submenu { display: none !important; }
    body.crm-reference-ui.crm-sidebar-collapsed .crm-nav-list > .nav-item > .crm-nav-link {
        margin-inline: 3px !important;
        padding-inline: 0 !important;
    }
    body.crm-reference-ui.crm-sidebar-collapsed .crm-nav-parent.active > .crm-nav-toggle::after,
    body.crm-reference-ui.crm-sidebar-collapsed .crm-nav-parent > .crm-nav-toggle[aria-expanded="true"]::after {
        display: none;
    }
}

@media (max-width: 1399.98px) {
    :root { --crm-ref-sidebar-width: 250px; }
}

/* =====================================================================
   RC22 TOPBAR IDENTITY + APPROVAL NOTIFICATION HARDENING
   Long user names never resize or misalign the application header.
   ===================================================================== */
body.crm-reference-ui .crm-user-dropdown {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 236px;
}

body.crm-reference-ui .crm-user-trigger {
    width: 100%;
    max-width: 236px !important;
    min-width: 0;
    overflow: hidden;
}

body.crm-reference-ui .crm-user-trigger .crm-user-avatar {
    flex: 0 0 34px;
}

body.crm-reference-ui .crm-user-copy {
    flex: 0 1 154px;
    width: 154px;
    max-width: 154px !important;
    min-width: 0;
    align-items: stretch !important;
    text-align: left;
    overflow: hidden;
}

body.crm-reference-ui .crm-user-name {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

body.crm-reference-ui .crm-user-name-text {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.crm-reference-ui .crm-user-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    margin-top: 3px;
    line-height: 1;
}

body.crm-reference-ui .crm-user-company {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    margin-top: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

body.crm-reference-ui .crm-user-session-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 16px;
    padding: 2px 5px;
    color: #b45309;
    background: #fff4df;
    border: 1px solid #f9d89c;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .01em;
    white-space: nowrap;
}

body.crm-reference-ui .crm-user-chevron {
    flex: 0 0 auto;
}

/* Preserve header geometry on medium enterprise laptop widths. */
@media (max-width: 1399.98px) {
    body.crm-reference-ui .crm-user-dropdown,
    body.crm-reference-ui .crm-user-trigger {
        max-width: 202px !important;
    }

    body.crm-reference-ui .crm-user-copy {
        flex-basis: 120px;
        width: 120px;
        max-width: 120px !important;
    }
}

@media (max-width: 1199.98px) {
    body.crm-reference-ui .crm-user-copy {
        display: none !important;
    }

    body.crm-reference-ui .crm-user-dropdown,
    body.crm-reference-ui .crm-user-trigger {
        width: auto;
        max-width: 52px !important;
    }

    body.crm-reference-ui .crm-user-chevron {
        display: none;
    }
}

[data-bs-theme="dark"] body.crm-reference-ui .crm-user-session-badge {
    color: #ffd28a;
    background: rgba(245, 159, 0, .12);
    border-color: rgba(245, 159, 0, .28);
}

body.crm-reference-ui .crm-notification-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 8px;
    align-items: start;
    gap: 8px;
    border-radius: 7px;
}

body.crm-reference-ui .crm-notification-item.is-unread {
    background: rgba(var(--crm-ref-primary-rgb), .055);
}

body.crm-reference-ui .crm-notification-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--crm-ref-primary);
    background: var(--crm-ref-primary-soft);
    border-radius: 7px;
    font-size: 15px;
}

body.crm-reference-ui .crm-notification-item-copy {
    min-width: 0;
}

body.crm-reference-ui .crm-notification-unread-dot {
    width: 6px;
    height: 6px;
    margin-top: 7px;
    background: var(--crm-ref-primary);
    border-radius: 999px;
}

/* =====================================================================
   RC34 SIDEBAR ACTIVE STATE
   Root branch keeps a calm selected background; only the exact leaf page
   receives the teal selection fill. Nested parent toggles never compete
   with the selected leaf.
   ===================================================================== */
body.crm-reference-ui .crm-nav-list > .crm-nav-parent.crm-nav-branch-active > .crm-nav-toggle {
    color: #fff !important;
    background: rgba(20, 117, 132, .22) !important;
    box-shadow: inset 0 0 0 1px rgba(103, 216, 208, .16) !important;
}

body.crm-reference-ui .crm-nav-list > .crm-nav-parent.crm-nav-branch-active > .crm-nav-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #52d6cd;
}

body.crm-reference-ui .crm-nav-list > .crm-nav-parent:not(.crm-nav-branch-active) > .crm-nav-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,.045) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

body.crm-reference-ui .crm-submenu .crm-nav-parent.crm-nav-branch-active > .crm-nav-toggle,
body.crm-reference-ui .crm-submenu .crm-nav-parent > .crm-nav-toggle[aria-expanded="true"] {
    color: rgba(255,255,255,.92) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.crm-reference-ui .crm-submenu .crm-nav-parent.crm-nav-branch-active > .crm-nav-toggle::after,
body.crm-reference-ui .crm-submenu .crm-nav-parent > .crm-nav-toggle[aria-expanded="true"]::after {
    display: none !important;
}

body.crm-reference-ui .crm-submenu .crm-nav-parent.crm-nav-branch-active > .crm-nav-toggle .nav-link-icon {
    color: #67d8d0 !important;
}

body.crm-reference-ui .crm-nav-leaf.active {
    color: #fff !important;
    background: linear-gradient(90deg, #0c9f98 0%, #0c8e89 100%) !important;
    box-shadow: 0 4px 11px rgba(var(--crm-ref-primary-rgb), .17) !important;
}

body.crm-reference-ui .crm-nav-leaf.active .nav-link-icon {
    color: #fff !important;
    opacity: 1 !important;
}

body.crm-reference-ui .crm-submenu .crm-nav-leaf.active {
    font-weight: 700 !important;
}