/*
 * DOTE.CRM shared UI system — Pinterest-informed, implementation-safe layer.
 *
 * This file is intentionally loaded after app.css/control.css. It only changes
 * visual tokens and shared components; routes, markup contracts, data and print
 * composition remain unchanged. All presentation rules are screen-scoped so the
 * existing business-plan A4 output is not affected.
 */

@media screen {
  .crm-ui-surface:not(.control-body) {
    background: #f6f8fc;
    color: var(--crm-ink);
  }

  .crm-ui-surface:not(.control-body) .app-shell {
    background: #f6f8fc;
  }

  .crm-ui-surface:not(.control-body) .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border-inline-end-color: var(--crm-border);
    box-shadow: -8px 0 26px rgba(36, 49, 82, .035);
  }

  .crm-ui-surface:not(.control-body) .brand {
    color: var(--crm-ink);
  }

  .crm-ui-surface:not(.control-body) .brand-mark {
    background: linear-gradient(135deg, #7b70f3, #5548d2);
    box-shadow: 0 9px 19px rgba(98, 87, 223, .22);
  }

  .crm-ui-surface:not(.control-body) .nav-group-toggle,
  .crm-ui-surface:not(.control-body) .nav-item {
    color: #69758a;
    border: 1px solid transparent;
  }

  .crm-ui-surface:not(.control-body) .nav-group-toggle:hover,
  .crm-ui-surface:not(.control-body) .nav-item:hover {
    color: var(--crm-primary-deep);
    border-color: #e3e1fb;
    background: #faf9ff;
  }

  .crm-ui-surface:not(.control-body) .nav-group-toggle.is-active,
  .crm-ui-surface:not(.control-body) .nav-item.active {
    color: var(--crm-primary-deep);
    border-color: #dcd9fb;
    background: linear-gradient(90deg, #f3f1ff, #ebeaff);
    box-shadow: inset -3px 0 0 var(--crm-primary);
  }

  .crm-ui-surface:not(.control-body) .nav-group-items {
    border-inline-start-color: #e1e4ef;
  }

  .crm-ui-surface:not(.control-body) .main-content {
    background: #f6f8fc;
  }

  .crm-ui-surface:not(.control-body) .topbar {
    background: rgba(255, 255, 255, .94);
    border-bottom-color: var(--crm-border);
    box-shadow: 0 2px 12px rgba(33, 47, 79, .025);
  }

  .crm-ui-surface:not(.control-body) .topbar-title h1,
  .crm-ui-surface:not(.control-body) .page-header h2 {
    color: var(--crm-ink);
  }

  .crm-ui-surface:not(.control-body) .content-wrap {
    width: 100%;
    box-sizing: border-box;
  }

  .crm-ui-surface:not(.control-body) .page-header {
    align-items: center;
    margin-bottom: 26px;
  }

  .crm-ui-surface:not(.control-body) .page-header p,
  .crm-ui-surface:not(.control-body) .eyebrow {
    color: var(--crm-muted);
  }

  .crm-ui-surface:not(.control-body) .button {
    min-height: 40px;
    border-radius: 11px;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }

  .crm-ui-surface:not(.control-body) .button.primary {
    background: linear-gradient(135deg, #6b5fe8, #5548d2);
    box-shadow: 0 8px 18px rgba(98, 87, 223, .2);
  }

  .crm-ui-surface:not(.control-body) .button.primary:hover {
    background: linear-gradient(135deg, #5f54d9, #493dbc);
    box-shadow: 0 11px 22px rgba(98, 87, 223, .25);
  }

  .crm-ui-surface:not(.control-body) .button.outline {
    color: var(--crm-ink-soft);
    border-color: var(--crm-border-strong);
    background: #fff;
  }

  .crm-ui-surface:not(.control-body) .button.outline:hover {
    color: var(--crm-primary-deep);
    border-color: #bdb8f4;
    background: #fbfaff;
  }

  .crm-ui-surface:not(.control-body) .stat-card,
  .crm-ui-surface:not(.control-body) .panel,
  .crm-ui-surface:not(.control-body) .table-card {
    border-color: var(--crm-border);
    border-radius: var(--crm-radius-md);
    box-shadow: var(--crm-shadow-sm);
  }

  .crm-ui-surface:not(.control-body) .stat-card {
    min-width: 0;
    background: linear-gradient(145deg, #fff 0%, #fbfcff 100%);
  }

  .crm-ui-surface:not(.control-body) .stat-card-actionable:hover,
  .crm-ui-surface:not(.control-body) .stat-card-actionable:focus-within {
    border-color: #c9c5f5;
    box-shadow: var(--crm-shadow-md);
  }

  .crm-ui-surface:not(.control-body) .stat-card .stat-icon {
    border: 1px solid #dfdcff;
    background: #f1efff;
  }

  .crm-ui-surface:not(.control-body) .stat-value,
  .crm-ui-surface:not(.control-body) .dashboard-metric-value {
    color: #243a61;
  }

  .crm-ui-surface:not(.control-body) .panel-header {
    min-height: 64px;
    border-bottom-color: var(--crm-border);
  }

  .crm-ui-surface:not(.control-body) .panel-header h3 {
    color: var(--crm-ink);
  }

  .crm-ui-surface:not(.control-body) .toolbar {
    margin-bottom: 18px;
  }

  .crm-ui-surface:not(.control-body) .search-box input,
  .crm-ui-surface:not(.control-body) input:not([type="checkbox"]):not([type="radio"]),
  .crm-ui-surface:not(.control-body) select,
  .crm-ui-surface:not(.control-body) textarea {
    border-color: var(--crm-border-strong);
    border-radius: 10px;
    color: var(--crm-ink);
    background: #fff;
  }

  .crm-ui-surface:not(.control-body) .search-box input:focus,
  .crm-ui-surface:not(.control-body) input:not([type="checkbox"]):not([type="radio"]):focus,
  .crm-ui-surface:not(.control-body) select:focus,
  .crm-ui-surface:not(.control-body) textarea:focus {
    border-color: #a9a2ef;
    box-shadow: 0 0 0 3px rgba(98, 87, 223, .12);
    outline: 0;
  }

  .crm-ui-surface:not(.control-body) table thead th {
    color: #68768c;
    background: #f8faff;
  }

  .crm-ui-surface:not(.control-body) table tbody tr:hover {
    background: #fbfaff;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-card,
  .crm-ui-surface:not(.control-body) .dashboard-action-item,
  .crm-ui-surface:not(.control-body) .lead-card {
    border-color: var(--crm-border);
    box-shadow: 0 4px 14px rgba(33, 47, 79, .035);
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-card[href]:hover,
  .crm-ui-surface:not(.control-body) .dashboard-action-item:hover,
  .crm-ui-surface:not(.control-body) .lead-card:hover {
    border-color: #c9c5f5;
    box-shadow: var(--crm-shadow-md);
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-icon,
  .crm-ui-surface:not(.control-body) .dashboard-action-icon,
  .crm-ui-surface:not(.control-body) .detail-empty-icon {
    border: 1px solid #dceaf3;
    background: #eff8fc;
  }

  .crm-ui-surface:not(.control-body) .notice,
  .crm-ui-surface:not(.control-body) .flash-stack > * {
    border-radius: 11px;
  }

  .crm-ui-surface:not(.control-body) .empty-state,
  .crm-ui-surface:not(.control-body) .detail-empty {
    border: 1px dashed #dce3ed;
    border-radius: var(--crm-radius-md);
    background: #fbfcff;
  }

  .crm-ui-surface:not(.control-body) details > summary:focus-visible,
  .crm-ui-surface:not(.control-body) a:focus-visible,
  .crm-ui-surface:not(.control-body) button:focus-visible,
  .crm-ui-surface:not(.control-body) input:focus-visible,
  .crm-ui-surface:not(.control-body) select:focus-visible,
  .crm-ui-surface:not(.control-body) textarea:focus-visible {
    outline: 3px solid rgba(98, 87, 223, .2);
    outline-offset: 2px;
  }

  /* Control panel: dense, calm and easy to scan without touching print rules. */
  .crm-ui-surface.control-body {
    background: #f5f7fb;
    color: #1d2b40;
  }

  .crm-ui-surface.control-body .control-sidebar {
    background: linear-gradient(180deg, #122f4d 0%, #173e62 100%);
    box-shadow: -12px 0 30px rgba(15, 39, 65, .1);
  }

  .crm-ui-surface.control-body .control-brand {
    letter-spacing: -.2px;
  }

  .crm-ui-surface.control-body .control-nav a {
    border: 1px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  }

  .crm-ui-surface.control-body .control-nav-group > summary {
    list-style: none;
  }

  .crm-ui-surface.control-body .control-nav-group > summary::-webkit-details-marker {
    display: none;
  }

  .crm-ui-surface.control-body .control-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #bdcddd;
    cursor: pointer;
    user-select: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  }

  .crm-ui-surface.control-body .control-nav-group-toggle:hover,
  .crm-ui-surface.control-body .control-nav-group-toggle:focus-visible {
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
    background: rgba(255, 255, 255, .09);
    transform: translateX(-2px);
    outline: none;
  }

  .crm-ui-surface.control-body .control-nav-group-toggle.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .08);
  }

  .crm-ui-surface.control-body .control-nav-group-toggle > svg,
  .crm-ui-surface.control-body .control-nav-submenu svg,
  .crm-ui-surface.control-body .control-nav > a > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .crm-ui-surface.control-body .control-nav-group-toggle > span:nth-child(2),
  .crm-ui-surface.control-body .control-nav > a > span,
  .crm-ui-surface.control-body .control-nav-submenu a > span {
    min-width: 0;
  }

  .crm-ui-surface.control-body .control-nav-group-toggle .control-nav-chevron {
    margin-inline-start: auto;
    font-size: 14px;
    opacity: .7;
    transition: transform .16s ease;
  }

  .crm-ui-surface.control-body .control-nav-group[open] .control-nav-chevron {
    transform: rotate(180deg);
  }

  .crm-ui-surface.control-body .control-nav-submenu {
    display: grid;
    gap: 3px;
    margin-inline-start: 18px;
    padding-inline-start: 10px;
    border-inline-start: 1px solid rgba(255, 255, 255, .18);
  }

  .crm-ui-surface.control-body .control-nav-submenu a {
    min-height: 36px;
    padding-inline: 9px;
    font-size: 11px;
  }

  .crm-ui-surface.control-body .control-nav-submenu svg {
    width: 16px;
    height: 16px;
  }

  .crm-ui-surface.control-body .control-nav a:focus-visible {
    outline: 2px solid #85d8cc;
    outline-offset: 2px;
  }

  .crm-ui-surface.control-body .control-nav a:hover {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .09);
    transform: translateX(-2px);
  }

  .crm-ui-surface.control-body .control-nav a.active {
    border-color: rgba(149, 224, 219, .3);
    color: #fff;
    background: linear-gradient(90deg, rgba(82, 192, 184, .25), rgba(255, 255, 255, .12));
    box-shadow: inset -3px 0 0 #75d4c4, 0 6px 15px rgba(7, 25, 45, .12);
  }

  .crm-ui-surface.control-body .control-main {
    background: #f5f7fb;
  }

  .crm-ui-surface.control-body .control-topbar {
    min-height: 82px;
    background: rgba(255, 255, 255, .96);
    border-bottom-color: var(--crm-border);
    box-shadow: 0 2px 12px rgba(33, 47, 79, .03);
  }

  .crm-ui-surface.control-body .control-topbar h1 {
    color: var(--crm-ink);
    letter-spacing: -.2px;
  }

  .crm-ui-surface.control-body .control-content {
    width: 100%;
    box-sizing: border-box;
    max-width: 1540px;
  }

  .crm-ui-surface.control-body .control-card,
  .crm-ui-surface.control-body .control-workspace-selector {
    border-color: var(--crm-border);
    border-radius: var(--crm-radius-md);
    box-shadow: var(--crm-shadow-sm);
  }

  .crm-ui-surface.control-body .control-card {
    background: linear-gradient(145deg, #fff 0%, #fcfdff 100%);
  }

  .crm-ui-surface.control-body .control-card-head {
    min-height: 58px;
    border-bottom-color: var(--crm-border);
  }

  .crm-ui-surface.control-body .control-card-head h2,
  .crm-ui-surface.control-body .control-card-head h3 {
    color: var(--crm-ink);
  }

  .crm-ui-surface.control-body .control-stat {
    position: relative;
    overflow: hidden;
  }

  .crm-ui-surface.control-body .control-stat::after {
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 3px;
    content: "";
    background: linear-gradient(180deg, #786ef0, #56b8ad);
  }

  .crm-ui-surface.control-body .control-stat strong {
    color: #21466c;
  }

  .crm-ui-surface.control-body .control-button {
    min-height: 40px;
    border-radius: 10px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }

  .crm-ui-surface.control-body .control-button.primary {
    background: linear-gradient(135deg, #174b78, #256b8e);
    box-shadow: 0 7px 16px rgba(23, 75, 120, .18);
  }

  .crm-ui-surface.control-body .control-button.primary:hover {
    background: linear-gradient(135deg, #123b61, #1f5d7a);
    box-shadow: 0 10px 20px rgba(23, 75, 120, .24);
  }

  .crm-ui-surface.control-body .control-button.outline {
    border-color: var(--crm-border-strong);
    color: #295476;
  }

  .crm-ui-surface.control-body .control-button.outline:hover {
    border-color: #9ec2d7;
    background: #f5fbfe;
  }

  .crm-ui-surface.control-body .control-table th {
    color: #63758a;
    background: #f7faff;
  }

  .crm-ui-surface.control-body .control-table tbody tr:hover {
    background: #f8fbff;
  }

  .crm-ui-surface.control-body .control-form-grid input,
  .crm-ui-surface.control-body .control-form-grid select,
  .crm-ui-surface.control-body .control-form-grid textarea,
  .crm-ui-surface.control-body .control-workspace-select-label select {
    border-color: var(--crm-border-strong);
    border-radius: 10px;
  }

  .crm-ui-surface.control-body input:focus,
  .crm-ui-surface.control-body select:focus,
  .crm-ui-surface.control-body textarea:focus {
    border-color: #8bb6cf;
    box-shadow: 0 0 0 3px rgba(37, 107, 142, .12);
    outline: 0;
  }

  .crm-ui-surface.control-body .control-notice,
  .crm-ui-surface.control-body .control-empty,
  .crm-ui-surface.control-body .control-badge {
    border-radius: 10px;
  }

  .crm-ui-surface.control-body .control-empty {
    border: 1px dashed #dce4ed;
    background: #fbfcfe;
  }

  .crm-ui-surface.control-body a:focus-visible,
  .crm-ui-surface.control-body button:focus-visible,
  .crm-ui-surface.control-body input:focus-visible,
  .crm-ui-surface.control-body select:focus-visible,
  .crm-ui-surface.control-body textarea:focus-visible {
    outline: 3px solid rgba(37, 107, 142, .2);
    outline-offset: 2px;
  }

  @media (max-width: 860px) {
    .crm-ui-surface:not(.control-body) .content-wrap,
    .crm-ui-surface.control-body .control-content {
      padding-inline: 20px;
    }

    .crm-ui-surface:not(.control-body) .page-header {
      align-items: flex-start;
    }
  }

  @media (max-width: 560px) {
    .crm-ui-surface:not(.control-body) .content-wrap,
    .crm-ui-surface.control-body .control-content {
      padding-inline: 14px;
    }

    .crm-ui-surface:not(.control-body) .page-header,
    .crm-ui-surface.control-body .control-topbar {
      gap: 12px;
    }

    .crm-ui-surface:not(.control-body) .button,
    .crm-ui-surface.control-body .control-button {
      min-height: 42px;
    }
  }

  /* Mobile hardening: keep dense CRM workflows usable on narrow screens. */
  @media (max-width: 760px) {
    .crm-ui-surface:not(.control-body) {
      --crm-mobile-bottom-safe: calc(126px + env(safe-area-inset-bottom));
      scroll-padding-bottom: var(--crm-mobile-bottom-safe);
      overflow-x: clip;
    }

    .crm-ui-surface:not(.control-body) .content-wrap {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      padding-bottom: var(--crm-mobile-bottom-safe) !important;
    }

    .crm-ui-surface:not(.control-body) .content-wrap > *,
    .crm-ui-surface:not(.control-body) .page-header,
    .crm-ui-surface:not(.control-body) .toolbar,
    .crm-ui-surface:not(.control-body) .panel,
    .crm-ui-surface:not(.control-body) .table-card,
    .crm-ui-surface:not(.control-body) .lead-filter-panel,
    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .crm-ui-surface:not(.control-body) .mobile-nav {
      right: 0 !important;
      bottom: 0 !important;
      inset-inline-end: 0 !important;
      width: 100% !important;
      min-height: 72px;
      box-sizing: border-box;
      padding: 6px 10px calc(7px + env(safe-area-inset-bottom)) !important;
      border-radius: 16px 16px 0 0;
    }

    .crm-ui-surface:not(.control-body) .mobile-nav .nav-item {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .crm-ui-surface:not(.control-body) .mobile-nav .nav-item span {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* The bulk editor previously inherited a two-column mobile grid. That
       made long Persian labels and the two destructive/primary actions collide. */
    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar {
      gap: 12px;
      overflow: visible;
    }

    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-selection {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 8px;
    }

    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-select-all,
    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-selection-count {
      min-width: 0;
      width: 100%;
      margin-inline: 0;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-selection-count {
      grid-column: 1;
    }

    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-edit-panel > summary {
      min-height: 44px;
      align-items: flex-start;
    }

    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-edit-panel > summary > * {
      min-width: 0;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-fields {
      grid-template-columns: minmax(0, 1fr) !important;
      align-items: stretch;
      gap: 10px;
    }

    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-fields > label,
    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-fields .multi-picker,
    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-fields input,
    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-fields select,
    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-fields textarea,
    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-fields .multi-picker-trigger {
      min-width: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    .crm-ui-surface:not(.control-body) .lead-bulk-toolbar .bulk-fields > .button {
      grid-column: 1 / -1;
      width: 100%;
      min-height: 46px;
      white-space: normal;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .crm-ui-surface:not(.control-body) .lead-results-table {
      min-width: 0;
      padding-bottom: 24px;
    }

    .crm-ui-surface:not(.control-body) .lead-results-table .table-card:has(.leads-table) {
      max-width: 100%;
      overflow-x: auto !important;
      overscroll-behavior-inline: contain;
      touch-action: pan-x;
    }

    .crm-ui-surface:not(.control-body) .lead-table-scroll-top {
      max-width: calc(100% - 20px);
      touch-action: pan-x;
    }

    .crm-ui-surface:not(.control-body) .lead-sort-control,
    .crm-ui-surface:not(.control-body) .lead-sort-control select,
    .crm-ui-surface:not(.control-body) .lead-global-search-row > *,
    .crm-ui-surface:not(.control-body) .lead-view-switcher > * {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .crm-ui-surface:not(.control-body) .lead-view-switcher button,
    .crm-ui-surface:not(.control-body) .lead-global-search-row button,
    .crm-ui-surface:not(.control-body) .lead-filter-panel button {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .crm-ui-surface:not(.control-body) .form-actions,
    .crm-ui-surface:not(.control-body) .detail-actions,
    .crm-ui-surface:not(.control-body) .toolbar-actions {
      min-width: 0;
      max-width: 100%;
      flex-wrap: wrap;
    }

    .crm-ui-surface:not(.control-body) .form-actions > .button,
    .crm-ui-surface:not(.control-body) .detail-actions > .button,
    .crm-ui-surface:not(.control-body) .toolbar-actions > .button {
      min-width: 0;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    /* Control pages use the same narrow viewport but have denser cards/tables. */
    .crm-ui-surface.control-body {
      --crm-mobile-bottom-safe: calc(28px + env(safe-area-inset-bottom));
      overflow-x: clip;
    }

    .crm-ui-surface.control-body .control-content,
    .crm-ui-surface.control-body .control-main,
    .crm-ui-surface.control-body .control-card,
    .crm-ui-surface.control-body .control-workspace-selector {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .crm-ui-surface.control-body .control-content {
      padding-bottom: var(--crm-mobile-bottom-safe);
    }

    .crm-ui-surface.control-body .control-topbar {
      min-width: 0;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .crm-ui-surface.control-body .control-topbar h1,
    .crm-ui-surface.control-body .control-topbar > * {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .crm-ui-surface.control-body .control-grid,
    .crm-ui-surface.control-body .control-form-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .crm-ui-surface.control-body .control-card-body {
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      touch-action: pan-x;
    }

    .crm-ui-surface.control-body .control-table {
      min-width: 680px;
    }

    .crm-ui-surface.control-body .control-nav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      max-width: 100%;
      overflow: visible;
      gap: 6px;
    }

    .crm-ui-surface.control-body .control-nav > a,
    .crm-ui-surface.control-body .control-nav-group {
      min-width: 0;
    }

    .crm-ui-surface.control-body .control-nav > a,
    .crm-ui-surface.control-body .control-nav-group-toggle,
    .crm-ui-surface.control-body .control-nav-submenu a {
      min-width: 0;
      white-space: normal;
    }

    .crm-ui-surface.control-body .control-nav-group-toggle,
    .crm-ui-surface.control-body .control-nav > a {
      min-height: 42px;
      padding-inline: 9px;
      font-size: 11px;
    }

    .crm-ui-surface.control-body .control-nav-submenu {
      margin-inline-start: 8px;
      padding-inline-start: 6px;
    }

    .crm-ui-surface.control-body .control-nav-submenu a {
      overflow-wrap: anywhere;
      font-size: 10px;
    }
  }

  @media (max-width: 380px) {
    .crm-ui-surface:not(.control-body) .content-wrap {
      padding-inline: 10px !important;
    }

    .crm-ui-surface:not(.control-body) .lead-global-search-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .crm-ui-surface:not(.control-body) .lead-global-search-row > *,
    .crm-ui-surface:not(.control-body) .lead-global-search-row button {
      width: 100%;
    }

    .crm-ui-surface:not(.control-body) .mobile-nav {
      padding-inline: 6px !important;
    }

    .crm-ui-surface:not(.control-body) .mobile-nav .nav-item {
      font-size: 8.5px;
    }
  }
}

/* Shared CRM sidebar refinement: a quiet brand lockup and a single, predictable
   expand affordance for the compact rail. Keep this block after the legacy
   navigation rules so the visual contract is stable on cached hosts. */
@media screen {
  .crm-ui-surface:not(.control-body) .brand-lockup {
    gap: 10px;
    text-decoration: none;
  }

  .crm-ui-surface:not(.control-body) .brand-logo-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
  }

  .crm-ui-surface:not(.control-body) .brand-logo-wrap .brand-mark,
  .crm-ui-surface:not(.control-body) .brand-logo-wrap .brand-image {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.84);
    border-radius: 13px;
    box-shadow: 0 9px 18px rgba(89, 76, 211, .22), inset 0 1px 0 rgba(255,255,255,.28);
  }

  .crm-ui-surface:not(.control-body) .brand-logo-wrap .brand-mark {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #7669ef 0%, #5547d3 72%, #4035b8 100%);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.8px;
  }

  .crm-ui-surface:not(.control-body) .brand-logo-accent {
    position: absolute;
    inset-inline-start: -3px;
    bottom: 1px;
    z-index: 2;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #69d0aa;
    box-shadow: 0 3px 8px rgba(46, 144, 107, .22);
  }

  .crm-ui-surface:not(.control-body) .sidebar-head .brand-name {
    display: inline-flex;
    min-width: 0;
    color: #162e4a;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.35px;
    line-height: 1;
    white-space: nowrap;
  }

  .crm-ui-surface:not(.control-body) .sidebar-head .brand-name strong {
    font: inherit;
  }

  .crm-ui-surface:not(.control-body) .sidebar-reopen-toggle {
    display: none;
  }
}

@media screen and (min-width: 761px) {
  .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-toggle {
    display: grid;
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-head .sidebar-collapse-toggle {
    display: none;
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-reopen-toggle {
    display: grid;
    place-items: center;
    align-self: center;
    width: 42px;
    height: 38px;
    min-height: 38px;
    margin: 12px auto 14px;
    padding: 0;
    border: 1px solid var(--crm-border);
    border-radius: 11px;
    color: var(--crm-ink-soft);
    background: #fff;
    box-shadow: 0 4px 12px rgba(33, 47, 79, .06);
    cursor: pointer;
    font: inherit;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-reopen-toggle:hover,
  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-reopen-toggle:focus-visible {
    color: var(--crm-primary-deep);
    border-color: #c9c4fa;
    background: var(--crm-primary-wash);
    transform: translateY(-1px);
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-reopen-toggle .sidebar-collapse-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: currentColor;
    background: rgba(98, 87, 223, .1);
    font-size: 19px;
    line-height: 1;
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .brand-logo-wrap {
    margin-inline: auto;
  }
}

/* Accounting quick menu in the mobile dock: keep its submenu above the dock
   and preserve the normal horizontal hit targets used by the main sidebar. */
@media screen and (max-width: 760px) {
  .crm-ui-surface:not(.control-body) .mobile-nav .mobile-nav-accounting {
    position: relative;
    min-width: 0;
    overflow: visible;
  }
  .crm-ui-surface:not(.control-body) .mobile-nav .mobile-nav-accounting > summary {
    list-style: none;
    cursor: pointer;
  }
  .crm-ui-surface:not(.control-body) .mobile-nav .mobile-nav-accounting > summary::-webkit-details-marker {
    display: none;
  }
  .crm-ui-surface:not(.control-body) .mobile-nav .mobile-nav-accounting-menu {
    position: absolute;
    z-index: 60;
    inset-inline-end: 0;
    bottom: calc(100% + 10px);
    display: grid;
    gap: 4px;
    min-width: 190px;
    padding: 8px;
    overflow: visible;
    border: 1px solid #dce4ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(24, 39, 65, .18);
  }
  .crm-ui-surface:not(.control-body) .mobile-nav .mobile-nav-accounting-menu .nav-item {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 9px;
    min-height: 42px;
    padding: 8px 10px;
    overflow: visible;
    border-radius: 9px;
    color: var(--ink);
    font-size: 12px;
  }
  .crm-ui-surface:not(.control-body) .mobile-nav .mobile-nav-accounting-menu .nav-item svg {
    flex: 0 0 18px;
  }
  .crm-ui-surface:not(.control-body) .mobile-nav .mobile-nav-accounting-menu .nav-item span {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
}

@media screen and (max-width: 760px) {
  .crm-ui-surface:not(.control-body) .sidebar-reopen-toggle {
    display: none !important;
  }
}

/* v31 — Dashboard presentation layer: role-aware, calm and action-oriented.
   This layer consumes the existing KPI, cache, action-center and recent-lead
   contracts. It changes presentation only and remains screen-scoped. */
@media screen {
  .crm-ui-surface:not(.control-body) .role-dashboard-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0;
    min-width: 0;
    margin: 0 0 16px;
    padding: 18px 20px;
    border: 1px solid #dfe5f3;
    border-inline-start: 4px solid var(--crm-primary);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--crm-shadow-sm);
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-intro > div,
  .crm-ui-surface:not(.control-body) .role-dashboard-intro strong,
  .crm-ui-surface:not(.control-body) .role-dashboard-intro p {
    min-width: 0;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-intro strong {
    color: var(--crm-ink);
    font-size: 18px;
    line-height: 1.5;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.85;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-scope {
    white-space: nowrap;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding-inline: 2px;
    color: var(--crm-muted);
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border-color: var(--crm-border);
    border-radius: 8px;
    background: #fff;
    line-height: 1.5;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-stats,
  .crm-ui-surface:not(.control-body) .dashboard-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-items: start;
    gap: 7px 10px;
    min-height: 124px;
    padding: 16px;
    border-color: var(--crm-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--crm-shadow-sm);
    direction: rtl;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-card[href]:hover,
  .crm-ui-surface:not(.control-body) .dashboard-metric-card[href]:focus-visible {
    transform: translateY(-1px);
    border-color: #c8c3f6;
    box-shadow: var(--crm-shadow-md);
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-icon {
    grid-column: 1;
    grid-row: 1;
    width: 38px;
    height: 38px;
    border: 1px solid #dceaf3;
    border-radius: 10px;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 3px;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-copy strong,
  .crm-ui-surface:not(.control-body) .dashboard-metric-copy small {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-copy strong {
    color: var(--crm-ink);
    font-size: 12px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-copy small {
    color: var(--crm-muted);
    font-size: 10px;
    line-height: 1.65;
    -webkit-line-clamp: 2;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-value {
    grid-column: 2;
    grid-row: 2;
    margin-top: 2px;
    color: #21466c;
    font-size: clamp(1.35rem, 1.7vw, 1.85rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-state {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 23px;
    padding: 4px 8px;
    border-radius: 7px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-message {
    grid-column: 1 / -1;
    grid-row: 4;
    min-width: 0;
    color: var(--crm-muted);
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-card.state-ready {
    border-inline-start: 3px solid #6ab88d;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-card.state-stalled {
    border-inline-start: 3px solid #d4ac3f;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-card.state-error {
    border-inline-start: 3px solid #d66c6c;
  }

  .crm-ui-surface:not(.control-body) .dashboard-metric-card.state-partial {
    border-inline-start: 3px solid #d99a3d;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-center {
    margin: 0;
    border-radius: 13px;
    box-shadow: var(--crm-shadow-sm);
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-center .panel-header {
    min-height: 55px;
    padding: 12px 16px;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 16px 16px;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-item {
    min-height: 66px;
    padding: 11px 12px;
    border-color: var(--crm-border);
    border-radius: 10px;
    background: #fbfdff;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-item.blue .dashboard-action-icon {
    color: #286a8d;
    background: #edf7fc;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-copy strong,
  .crm-ui-surface:not(.control-body) .dashboard-action-copy small {
    display: -webkit-box;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-copy strong {
    -webkit-line-clamp: 2;
    line-height: 1.55;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-copy small {
    -webkit-line-clamp: 2;
    line-height: 1.6;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-value {
    min-width: 2ch;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .9fr);
    align-items: stretch;
    gap: 14px;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-actions,
  .crm-ui-surface:not(.control-body) .role-dashboard-recent,
  .crm-ui-surface:not(.control-body) .role-dashboard-empty {
    min-width: 0;
    height: 100%;
    box-shadow: var(--crm-shadow-sm);
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-actions .quick-actions {
    min-height: 0;
    gap: 8px;
    padding: 12px 14px 14px;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-actions .quick-action {
    min-height: 48px;
    padding: 10px 12px;
    border-color: var(--crm-border);
    border-radius: 9px;
    background: #fbfcff;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-actions .quick-action > svg {
    flex: 0 0 auto;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-actions .quick-action > span:last-child {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-recent .recent-list {
    min-width: 0;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-recent .recent-item {
    min-height: 64px;
    padding: 11px 14px;
    border-bottom-color: #edf1f6;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-recent .recent-item:hover,
  .crm-ui-surface:not(.control-body) .role-dashboard-recent .recent-item:focus-visible {
    background: #fbfaff;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-recent .recent-date {
    font-variant-numeric: tabular-nums;
  }

  .crm-ui-surface:not(.control-body) .role-dashboard-global-note,
  .crm-ui-surface:not(.control-body) .role-dashboard-empty {
    min-height: 190px;
    padding: 22px 18px;
  }

  .crm-ui-surface:not(.control-body) .dashboard-action-item:focus-visible,
  .crm-ui-surface:not(.control-body) .quick-action:focus-visible {
    outline: 3px solid rgba(98, 87, 223, .2);
    outline-offset: 2px;
  }

  @media (min-width: 761px) and (max-width: 1180px) {
    .crm-ui-surface:not(.control-body) .role-dashboard-stats,
    .crm-ui-surface:not(.control-body) .dashboard-metric-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-ui-surface:not(.control-body) .role-dashboard-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 760px) {
    .crm-ui-surface:not(.control-body) .role-dashboard-intro {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      margin-bottom: 12px;
      padding: 14px;
      border-inline-start-width: 3px;
      border-radius: 10px;
    }

    .crm-ui-surface:not(.control-body) .role-dashboard-intro strong {
      font-size: 16px;
    }

    .crm-ui-surface:not(.control-body) .role-dashboard-scope {
      justify-self: start;
      white-space: normal;
    }

    .crm-ui-surface:not(.control-body) .dashboard-metric-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 8px;
    }

    .crm-ui-surface:not(.control-body) .dashboard-metric-meta span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .crm-ui-surface:not(.control-body) .dashboard-metric-meta span:last-child {
      grid-column: 1 / -1;
    }

    .crm-ui-surface:not(.control-body) .dashboard-metric-grid {
      gap: 8px;
    }

    .crm-ui-surface:not(.control-body) .dashboard-metric-card {
      min-height: 112px;
      padding: 13px;
    }

    .crm-ui-surface:not(.control-body) .dashboard-action-center .panel-header {
      min-height: 48px;
      padding: 10px 12px;
      align-items: flex-start;
      flex-direction: column;
      gap: 7px;
    }

    .crm-ui-surface:not(.control-body) .dashboard-action-list {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      padding: 10px 12px 12px;
    }

    .crm-ui-surface:not(.control-body) .dashboard-action-item {
      min-height: 62px;
    }

    .crm-ui-surface:not(.control-body) .role-dashboard-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .crm-ui-surface:not(.control-body) .role-dashboard-actions .quick-actions {
      padding: 10px 12px 12px;
    }

    .crm-ui-surface:not(.control-body) .role-dashboard-recent .recent-item {
      min-height: 58px;
      gap: 8px;
      padding: 10px 12px;
    }

    .crm-ui-surface:not(.control-body) .role-dashboard-recent .recent-date {
      font-size: 9px;
    }
  }

  @media (min-width: 521px) and (max-width: 760px) {
    .crm-ui-surface:not(.control-body) .dashboard-metric-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 520px) {
    .crm-ui-surface:not(.control-body) .dashboard-metric-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* v30 — Minimal operational surface: calmer spacing and clearer hierarchy.
   Screen-only by design; the existing A4 print composition is untouched. */
@media screen {
  .crm-ui-surface {
    --crm-shadow-sm: 0 2px 10px rgba(33, 47, 79, .035);
    --crm-shadow-md: 0 9px 24px rgba(33, 47, 79, .075);
    --crm-radius-sm: 8px;
    --crm-radius-md: 12px;
    --crm-radius-lg: 16px;
  }

  .crm-ui-surface:not(.control-body) .topbar {
    min-height: 76px;
    padding: 14px 28px;
    box-shadow: 0 1px 8px rgba(33, 47, 79, .02);
  }

  .crm-ui-surface:not(.control-body) .content-wrap {
    padding: 24px 32px 36px;
  }

  .crm-ui-surface:not(.control-body) .page-header {
    gap: 14px;
    margin-bottom: 16px;
  }

  .crm-ui-surface:not(.control-body) .page-header h2 {
    font-size: 20px;
  }

  .crm-ui-surface:not(.control-body) .page-header p {
    line-height: 1.75;
  }

  .crm-ui-surface:not(.control-body) .panel,
  .crm-ui-surface:not(.control-body) .table-card,
  .crm-ui-surface:not(.control-body) .stat-card,
  .crm-ui-surface:not(.control-body) .lead-filter-panel,
  .crm-ui-surface:not(.control-body) .filter-toolbar,
  .crm-ui-surface:not(.control-body) .bulk-toolbar {
    border-radius: var(--crm-radius-md);
    box-shadow: var(--crm-shadow-sm);
  }

  .crm-ui-surface:not(.control-body) .panel-header {
    min-height: 54px;
    padding-block: 12px;
  }

  .crm-ui-surface:not(.control-body) .panel-inner {
    padding: 14px 16px;
  }

  .crm-ui-surface:not(.control-body) .stats-grid,
  .crm-ui-surface:not(.control-body) .dashboard-grid {
    gap: 12px;
  }

  .crm-ui-surface:not(.control-body) .stats-grid {
    margin-bottom: 18px;
  }

  .crm-ui-surface:not(.control-body) .stat-card {
    padding: 15px;
  }

  .crm-ui-surface:not(.control-body) .button {
    min-height: 38px;
    padding-block: 6px;
    border-radius: 9px;
    box-shadow: none;
  }

  .crm-ui-surface:not(.control-body) .button.primary:hover,
  .crm-ui-surface:not(.control-body) .stat-card-actionable:hover,
  .crm-ui-surface:not(.control-body) .stat-card-actionable:focus-within {
    box-shadow: var(--crm-shadow-md);
  }

  .crm-ui-surface:not(.control-body) input:not([type="checkbox"]):not([type="radio"]),
  .crm-ui-surface:not(.control-body) select,
  .crm-ui-surface:not(.control-body) textarea {
    min-height: 40px;
    border-radius: 8px;
  }

  .crm-ui-surface:not(.control-body) .form-actions,
  .crm-ui-surface:not(.control-body) .detail-actions,
  .crm-ui-surface:not(.control-body) .toolbar-actions {
    gap: 8px;
  }

  .crm-ui-surface:not(.control-body) .table-card {
    box-shadow: none;
  }

  .crm-ui-surface:not(.control-body) table thead th,
  .crm-ui-surface:not(.control-body) table tbody td {
    padding-block: 9px;
  }

  .crm-ui-surface:not(.control-body) .notice,
  .crm-ui-surface:not(.control-body) .flash-stack > *,
  .crm-ui-surface:not(.control-body) .notification-alert-stack {
    box-shadow: none;
  }

  .crm-ui-surface.control-body .control-content {
    padding: 24px 30px 40px;
  }

  .crm-ui-surface.control-body .control-card,
  .crm-ui-surface.control-body .control-workspace-selector {
    border-radius: var(--crm-radius-md);
    box-shadow: var(--crm-shadow-sm);
  }

  .crm-ui-surface.control-body .control-card-head {
    min-height: 54px;
    padding-block: 12px;
  }

  .crm-ui-surface.control-body .control-card-body {
    padding: 15px 16px;
  }

  .crm-ui-surface.control-body .control-grid {
    gap: 12px;
  }

  .crm-ui-surface.control-body .control-button {
    min-height: 38px;
    box-shadow: none;
  }

  .crm-ui-surface.control-body .control-table th,
  .crm-ui-surface.control-body .control-table td {
    padding-block: 10px;
  }

  @media (min-width: 761px) and (max-width: 1180px) {
    .crm-ui-surface:not(.control-body) .content-wrap,
    .crm-ui-surface.control-body .control-content {
      padding-inline: 20px;
    }

    .crm-ui-surface:not(.control-body) .topbar {
      padding-inline: 20px;
    }

    .crm-ui-surface:not(.control-body) .page-header {
      flex-wrap: wrap;
    }

    .crm-ui-surface:not(.control-body) .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-ui-surface:not(.control-body) .dashboard-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .crm-ui-surface:not(.control-body) .form-grid,
    .crm-ui-surface:not(.control-body) .filters-grid,
    .crm-ui-surface:not(.control-body) .customer-form-grid,
    .crm-ui-surface:not(.control-body) .report-card-form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-ui-surface.control-body .control-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 760px) {
    .crm-ui-surface:not(.control-body) .content-wrap {
      padding-top: 14px;
      padding-inline: 12px;
    }

    .crm-ui-surface:not(.control-body) .topbar {
      min-height: 68px;
      padding: 12px 14px;
    }

    .crm-ui-surface:not(.control-body) .topbar-title h1 {
      max-width: 62vw;
      font-size: 17px;
    }

    .crm-ui-surface:not(.control-body) .page-header {
      align-items: stretch;
      gap: 10px;
      margin-bottom: 12px;
    }

    .crm-ui-surface:not(.control-body) .page-header h2 {
      font-size: 18px;
    }

    .crm-ui-surface:not(.control-body) .page-header h2,
    .crm-ui-surface:not(.control-body) .page-header p,
    .crm-ui-surface:not(.control-body) .panel-header h3 {
      overflow-wrap: anywhere;
    }

    .crm-ui-surface:not(.control-body) .panel,
    .crm-ui-surface:not(.control-body) .table-card,
    .crm-ui-surface:not(.control-body) .stat-card,
    .crm-ui-surface:not(.control-body) .lead-filter-panel,
    .crm-ui-surface:not(.control-body) .filter-toolbar,
    .crm-ui-surface:not(.control-body) .bulk-toolbar {
      border-radius: 10px;
    }

    .crm-ui-surface:not(.control-body) .panel-header {
      min-height: 48px;
      padding: 10px 12px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .crm-ui-surface:not(.control-body) .panel-header > *,
    .crm-ui-surface:not(.control-body) .panel-inner > * {
      min-width: 0;
      max-width: 100%;
    }

    .crm-ui-surface:not(.control-body) .panel-inner {
      padding: 12px;
    }

    .crm-ui-surface:not(.control-body) .stats-grid,
    .crm-ui-surface:not(.control-body) .dashboard-grid,
    .crm-ui-surface:not(.control-body) .form-grid,
    .crm-ui-surface:not(.control-body) .filters-grid,
    .crm-ui-surface:not(.control-body) .customer-form-grid,
    .crm-ui-surface:not(.control-body) .report-card-form-grid,
    .crm-ui-surface:not(.control-body) .product-grid,
    .crm-ui-surface:not(.control-body) .lead-details-grid,
    .crm-ui-surface:not(.control-body) .detail-grid {
      gap: 8px;
    }

    .crm-ui-surface:not(.control-body) .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-ui-surface:not(.control-body) .stat-card {
      padding: 12px;
    }

    .crm-ui-surface:not(.control-body) .stat-value {
      font-size: 22px;
    }

    .crm-ui-surface:not(.control-body) .form-grid,
    .crm-ui-surface:not(.control-body) .filters-grid,
    .crm-ui-surface:not(.control-body) .customer-form-grid,
    .crm-ui-surface:not(.control-body) .report-card-form-grid,
    .crm-ui-surface:not(.control-body) .product-grid,
    .crm-ui-surface:not(.control-body) .lead-details-grid,
    .crm-ui-surface:not(.control-body) .detail-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .crm-ui-surface:not(.control-body) .button,
    .crm-ui-surface.control-body .control-button {
      min-height: 42px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .crm-ui-surface.control-body .control-content {
      padding-top: 14px;
      padding-inline: 12px;
    }

    .crm-ui-surface.control-body .control-card-head {
      padding-inline: 12px;
    }

    .crm-ui-surface.control-body .control-card-body {
      padding: 12px;
    }

    .crm-ui-surface.control-body .control-table {
      min-width: 640px;
    }
  }

  @media (max-width: 380px) {
    .crm-ui-surface:not(.control-body) .content-wrap {
      padding-inline: 10px;
    }

    .crm-ui-surface:not(.control-body) .stats-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-ui-surface *,
  .crm-ui-surface *::before,
  .crm-ui-surface *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media screen {
  /* The lead table owns horizontal scrolling. The card itself stays visible
     so the top scrollbar and sticky columns share one predictable viewport. */
  .crm-ui-surface:not(.control-body) .lead-table-card {
    max-width: 100%;
    overflow: visible !important;
  }

  .crm-ui-surface:not(.control-body) .lead-table-viewport {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    direction: ltr;
    overscroll-behavior-inline: contain;
    scrollbar-color: #8ca0b3 #edf2f6;
    scrollbar-width: thin;
    touch-action: pan-x;
  }

  .crm-ui-surface:not(.control-body) .lead-table-viewport::-webkit-scrollbar {
    height: 10px;
  }

  .crm-ui-surface:not(.control-body) .lead-table-viewport::-webkit-scrollbar-track {
    border-radius: 99px;
    background: #edf2f6;
  }

  .crm-ui-surface:not(.control-body) .lead-table-viewport::-webkit-scrollbar-thumb {
    border: 3px solid #edf2f6;
    border-radius: 99px;
    background: #8ca0b3;
  }

  .crm-ui-surface:not(.control-body) .lead-table-viewport .leads-table {
    direction: rtl;
  }

  .crm-ui-surface:not(.control-body) .lead-table-scroll-top {
    direction: ltr;
    touch-action: pan-x;
  }

  .crm-ui-surface:not(.control-body) .lead-table-scroll-top[hidden] {
    display: none !important;
  }

  /* A compact navigation rail is useful for tablets and remains manually
     expandable through the arrow control. */
  @media (min-width: 761px) {
    .crm-ui-surface:not(.control-body) .sidebar {
      position: relative;
      z-index: 80;
      overflow: visible;
      transition: width .2s ease, flex-basis .2s ease, padding .2s ease, box-shadow .2s ease;
    }

    .crm-ui-surface:not(.control-body) .sidebar-collapse-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      align-self: flex-start;
      min-height: 34px;
      margin: -13px 0 12px;
      padding: 5px 9px;
      border: 1px solid var(--crm-border);
      border-radius: 10px;
      color: var(--crm-ink-soft);
      background: #fff;
      box-shadow: 0 4px 12px rgba(33, 47, 79, .05);
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
    }

    .crm-ui-surface:not(.control-body) .sidebar-collapse-toggle:hover,
    .crm-ui-surface:not(.control-body) .sidebar-collapse-toggle:focus-visible {
      color: var(--crm-primary-deep);
      border-color: #c9c4fa;
      background: var(--crm-primary-wash);
      transform: translateY(-1px);
    }

    .crm-ui-surface:not(.control-body) .sidebar-collapse-icon {
      display: inline-grid;
      place-items: center;
      width: 20px;
      height: 20px;
      border-radius: 7px;
      color: currentColor;
      background: rgba(98, 87, 223, .1);
      font-size: 19px;
      line-height: 1;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed {
      width: 82px;
      flex: 0 0 82px;
      padding: 20px 10px 14px;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .brand {
      justify-content: center;
      padding-inline: 0;
      padding-bottom: 18px;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .brand-name,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-caption,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-bottom .app-landing-link,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .user-card-copy,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .logout-button {
      display: none;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-collapse-toggle {
      align-self: center;
      width: 42px;
      min-height: 38px;
      margin: -7px 0 14px;
      padding: 4px;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-collapse-label {
      display: none;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .main-nav {
      gap: 8px;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .main-nav > .nav-item,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-toggle {
      position: relative;
      justify-content: center;
      width: 52px;
      min-height: 48px;
      margin-inline: auto;
      padding-inline: 0;
      gap: 0;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .main-nav > .nav-item > span,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-toggle > span:not(.nav-group-chevron),
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-toggle .nav-group-chevron {
      display: none;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .main-nav > .nav-item::after,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-toggle::after {
      position: absolute;
      top: 50%;
      inset-inline-start: calc(100% + 9px);
      z-index: 120;
      width: max-content;
      max-width: 210px;
      padding: 7px 10px;
      border: 1px solid #d9dff0;
      border-radius: 8px;
      color: #fff;
      background: #26354c;
      box-shadow: 0 8px 18px rgba(26, 40, 62, .18);
      content: attr(data-nav-label);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) translateX(4px);
      transition: opacity .14s ease, transform .14s ease;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .main-nav > .nav-item:hover::after,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .main-nav > .nav-item:focus-visible::after,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-toggle:hover::after,
    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-toggle:focus-visible::after {
      opacity: 1;
      transform: translateY(-50%);
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group {
      position: relative;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-items {
      display: none;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group[open] > .nav-group-items {
      position: absolute;
      top: 0;
      inset-inline-start: calc(100% + 12px);
      z-index: 110;
      display: grid;
      width: 248px;
      margin: 0;
      padding: 10px;
      border: 1px solid var(--crm-border);
      border-radius: 14px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 16px 34px rgba(33, 47, 79, .16);
      backdrop-filter: blur(12px);
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-items::before {
      display: block;
      margin: 0 2px 7px;
      padding: 2px 8px 9px;
      border-bottom: 1px solid var(--crm-border);
      color: var(--crm-ink);
      content: attr(data-nav-label);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-items .nav-item {
      justify-content: flex-start;
      width: 100%;
      min-height: 42px;
      margin: 0;
      padding-inline: 10px;
      gap: 10px;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-items .nav-item > span {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .nav-group-items .nav-item::after {
      display: none;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-bottom {
      padding-inline: 0;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .user-card {
      justify-content: center;
      padding-inline: 0;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .logout-button {
      justify-content: center;
      width: 52px;
      min-height: 44px;
      margin-inline: auto;
      padding-inline: 0;
    }

    .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .lead-table-scroll-top {
      direction: ltr;
    }
  }

  @media (max-width: 760px) {
    .crm-ui-surface:not(.control-body) .sidebar-collapse-toggle {
      display: none;
    }
  }

  @media (min-width: 761px) and (max-width: 1180px) {
    .crm-ui-surface:not(.control-body) .sidebar.is-expanded {
      width: 256px;
      flex-basis: 256px;
      padding: 24px 16px 18px;
    }

    .crm-ui-surface:not(.control-body) .lead-table-scroll-top {
      display: block;
      height: 14px;
      margin: 0 12px 9px;
      border-radius: 99px;
    }

    .crm-ui-surface:not(.control-body) .lead-table-scroll-top > div {
      height: 1px;
      min-width: 1120px;
    }
  }
}

@media screen {
  .crm-ui-surface:not(.control-body) .sidebar-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-bottom: 16px;
  }

  .crm-ui-surface:not(.control-body) .sidebar-head .brand {
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 38px;
  }

  .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--crm-muted);
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
  }

  .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-toggle:hover,
  .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-toggle:focus-visible {
    color: var(--crm-primary-deep);
    border-color: #d8d3ff;
    background: var(--crm-primary-wash);
    box-shadow: 0 5px 12px rgba(98, 87, 223, .12);
    transform: translateY(-50%);
  }

  .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: transparent;
    font-size: 18px;
    line-height: 1;
  }

  .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-toggle::after {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 8px);
    z-index: 140;
    width: max-content;
    max-width: 190px;
    padding: 6px 9px;
    border: 1px solid #d9dff0;
    border-radius: 8px;
    color: #fff;
    background: #26354c;
    box-shadow: 0 8px 18px rgba(26, 40, 62, .18);
    content: attr(data-tooltip);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(4px);
    transition: opacity .14s ease, transform .14s ease;
  }

  .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-toggle:hover::after,
  .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-toggle:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%);
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-head {
    min-height: 42px;
    margin-bottom: 16px;
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-head .brand {
    min-height: 42px;
    padding: 0;
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-head .sidebar-collapse-toggle {
    width: 30px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0;
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-head .sidebar-collapse-icon {
    width: 24px;
    height: 24px;
  }

  @media (max-width: 760px) {
    .crm-ui-surface:not(.control-body) .sidebar-head {
      min-height: 46px;
      margin-bottom: 14px;
    }

    .crm-ui-surface:not(.control-body) .sidebar-head .brand {
      padding: 0 38px;
    }

    .crm-ui-surface:not(.control-body) .sidebar-head .sidebar-collapse-toggle {
      display: none;
    }
  }
}

/* Keep the collapsed rail affordance deterministic after all shared shell
   layers have loaded. */
@media screen and (min-width: 761px) {
  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-head .sidebar-collapse-toggle {
    display: none !important;
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-collapsed .sidebar-reopen-toggle {
    display: grid !important;
  }
}

/*
 * P1 design-system contract (opt-in).
 * New and migrated PHP views should use data-ui hooks instead of adding
 * page-specific variants. These selectors intentionally do not restyle legacy
 * markup that has not opted into the contract.
 */
@media screen {
  .crm-ui-surface :where([data-ui-density='compact']) {
    --crm-control-min-height: var(--crm-control-height-compact);
    --crm-control-gap: var(--crm-space-2);
  }

  .crm-ui-surface :where([data-ui-density='normal']) {
    --crm-control-min-height: 40px;
    --crm-control-gap: var(--crm-space-3);
  }

  .crm-ui-surface :where([data-ui-density='touch']) {
    --crm-control-min-height: var(--crm-control-height-touch);
    --crm-control-gap: var(--crm-space-3);
  }

  .crm-ui-surface :where([data-ui-component='button']) {
    display: inline-flex;
    min-block-size: var(--crm-control-min-height);
    max-inline-size: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--crm-space-2);
    border-radius: var(--crm-radius-sm);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--crm-motion-fast) ease,
      border-color var(--crm-motion-fast) ease,
      color var(--crm-motion-fast) ease,
      box-shadow var(--crm-motion-fast) ease;
  }

  .crm-ui-surface [data-ui-component='button'][data-ui-size='compact'] {
    min-block-size: var(--crm-control-height-compact);
    padding-block: 6px;
    padding-inline: 10px;
    font-size: var(--crm-font-sm);
  }

  .crm-ui-surface [data-ui-component='button']:disabled,
  .crm-ui-surface [data-ui-component='button'][aria-disabled='true'] {
    cursor: not-allowed;
    opacity: var(--crm-disabled-opacity);
    box-shadow: none;
    transform: none;
  }

  .crm-ui-surface :where([data-ui-component='field-control']) {
    min-block-size: var(--crm-control-min-height);
    min-inline-size: 0;
    border-radius: var(--crm-radius-sm);
    line-height: var(--crm-line-body);
  }

  .crm-ui-surface [data-ui-component='field-control'][aria-invalid='true'] {
    border-color: var(--crm-color-danger);
    box-shadow: 0 0 0 2px rgba(195, 72, 92, .14);
  }

  .crm-ui-surface :where([data-ui-component='field-error']) {
    color: var(--crm-color-danger);
    font-size: var(--crm-font-sm);
    line-height: var(--crm-line-body);
  }

  .crm-ui-surface :where([data-ui-component='toolbar']) {
    display: flex;
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--crm-control-gap);
  }

  .crm-ui-surface :where([data-ui-component='search']) {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: var(--crm-space-2);
  }

  .crm-ui-surface :where([data-ui-component='search'] > *,
    [data-ui-component='filter'] > *) {
    min-inline-size: 0;
  }

  .crm-ui-surface :where([data-ui-component='filter']) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    align-items: end;
    gap: var(--crm-control-gap);
  }

  .crm-ui-surface [data-ui-component='select']:not([multiple]):not([size]):not([data-native-select]) {
    min-block-size: var(--crm-control-min-height);
    border-radius: var(--crm-radius-sm);
  }

  .crm-ui-surface :where([data-ui-component='dialog'], [data-ui-component='drawer']) {
    min-inline-size: 0;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-md);
    color: var(--crm-color-ink);
    background: var(--crm-color-surface);
    box-shadow: var(--crm-shadow-md);
  }

  .crm-ui-surface :where([data-ui-component='status'], [data-ui-component='alert']) {
    display: inline-flex;
    max-inline-size: 100%;
    align-items: center;
    gap: var(--crm-space-2);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius-sm);
    padding-block: 5px;
    padding-inline: 9px;
    color: var(--crm-color-ink-soft);
    background: var(--crm-color-surface-soft);
    line-height: var(--crm-line-body);
  }

  .crm-ui-surface :where([data-ui-component='status'][data-ui-tone='success'],
    [data-ui-component='alert'][data-ui-tone='success']) {
    border-color: #b8e2d4;
    color: #176f58;
    background: #eff9f5;
  }

  .crm-ui-surface :where([data-ui-component='status'][data-ui-tone='warning'],
    [data-ui-component='alert'][data-ui-tone='warning']) {
    border-color: #ead2a7;
    color: #80520f;
    background: #fff8ec;
  }

  .crm-ui-surface :where([data-ui-component='status'][data-ui-tone='danger'],
    [data-ui-component='alert'][data-ui-tone='danger']) {
    border-color: #efc3ca;
    color: #9a3548;
    background: #fff3f4;
  }

  .crm-ui-surface :where([data-ui-component='pagination']) {
    display: flex;
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--crm-space-2);
  }

  .crm-ui-surface :where([data-ui-component='pagination'] [aria-current='page']) {
    font-weight: 800;
  }
}

@media screen and (max-width: 760px) {
  .crm-ui-surface [data-ui-density='touch'] [data-ui-component='button'],
  .crm-ui-surface :is(.button, .control-button, [data-ui-component='button'])[data-ui-size='touch'] {
    min-block-size: var(--crm-control-height-touch);
  }

  .crm-ui-surface :where([data-ui-component='toolbar'][data-ui-mobile='stack']) {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-ui-surface :where([data-ui-component='toolbar'][data-ui-mobile='stack'] > *) {
    max-inline-size: 100%;
  }

  .crm-ui-surface :where([data-ui-component='search'][data-ui-mobile='stack']) {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-ui-surface :where([data-ui-component='filter'][data-ui-mobile='stack']) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (forced-colors: active) {
  .crm-ui-surface :where([data-ui-component='button'], [data-ui-component='field-control'],
    [data-ui-component='status'], [data-ui-component='alert']) {
    border-color: ButtonText;
  }

  .crm-ui-surface :where([data-ui-component='field-control'][aria-invalid='true'],
    [data-ui-component='field-error']) {
    color: CanvasText;
    border-color: CanvasText;
  }
}

/* P2 workflow migration: opt-in dense list/detail surfaces now consume the
   shared compact scale without changing their existing grid or action layout. */
@media screen {
  .crm-ui-surface :where([data-ui-density='compact']) :where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    min-block-size: var(--crm-control-height-compact);
  }

  .crm-ui-surface :where([data-ui-component='filter']) {
    min-inline-size: 0;
  }

  .crm-ui-surface :where([data-ui-scroll='x']) {
    scrollbar-width: thin;
    scrollbar-color: #c5cfdd transparent;
  }

  .crm-ui-surface :where([data-ui-scroll='x'])::-webkit-scrollbar {
    block-size: 7px;
  }

  .crm-ui-surface :where([data-ui-scroll='x'])::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #c5cfdd;
    background-clip: content-box;
  }
}

@media screen and (max-width: 760px) {
  .crm-ui-surface :where([data-ui-density='compact']) :where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    min-block-size: max(40px, var(--crm-control-height-compact));
  }
}

/* P3 responsive and accessibility hardening.
   Keep wide data inside its owned scroller; prevent fixed navigation and
   system controls from creating viewport-level overflow. */
@media screen {
  .crm-ui-surface :where(.topbar-title, .topbar-meta, .workspace-switcher,
    .role-test-switcher, .page-design-toggle) {
    min-inline-size: 0;
  }

  .crm-ui-surface :where(.topbar-title, .topbar-meta) {
    overflow-wrap: anywhere;
  }

  .crm-ui-surface :where(.role-test-switcher-select) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .crm-ui-surface :where(button, [role='button'], a, input, select, textarea, summary, [tabindex]) {
    scroll-margin-block: 12px;
  }
}

@media screen and (min-width: 761px) and (max-width: 1180px) {
  .crm-ui-surface:not(.control-body) .topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    gap: 8px 12px;
    min-block-size: 0;
    padding-block: 12px;
  }

  .crm-ui-surface:not(.control-body) .topbar-title {
    order: 1;
    flex: 1 1 42%;
    min-inline-size: 190px;
  }

  .crm-ui-surface:not(.control-body) .topbar-title h1 {
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .crm-ui-surface:not(.control-body) .topbar-meta {
    order: 2;
    flex: 1 1 180px;
    justify-content: flex-end;
  }

  .crm-ui-surface:not(.control-body) .workspace-switcher {
    order: 3;
    flex: 0 1 176px;
    max-inline-size: 176px;
    margin: 0;
  }

  .crm-ui-surface:not(.control-body) .topbar .role-test-switcher {
    order: 4;
    flex: 0 1 250px;
    inline-size: 250px;
    min-block-size: 44px;
  }

  .crm-ui-surface:not(.control-body) .role-test-switcher-select {
    flex: 1 1 120px;
    min-block-size: 44px;
  }

  .crm-ui-surface:not(.control-body) .topbar .page-design-toggle {
    order: 5;
    flex: 0 0 auto;
    min-block-size: 44px;
    inline-size: auto;
    margin: 0;
    font-size: 11px;
  }
}

@media screen and (max-width: 760px) {
  .crm-ui-surface:not(.control-body) .topbar {
    flex-wrap: wrap;
    gap: 8px;
    min-block-size: 0;
    padding-block: 10px;
  }

  .crm-ui-surface:not(.control-body) .topbar-title {
    order: 1;
    flex: 1 1 auto;
  }

  .crm-ui-surface:not(.control-body) .topbar-title h1 {
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .crm-ui-surface:not(.control-body) .topbar-meta {
    order: 0;
  }

  .crm-ui-surface:not(.control-body) .topbar .menu-toggle,
  .crm-ui-surface:not(.control-body) .topbar-meta .notification-summary {
    inline-size: 44px;
    min-inline-size: 44px;
    block-size: 44px;
    min-block-size: 44px;
  }

  .crm-ui-surface:not(.control-body) .workspace-switcher {
    order: 2;
    flex: 1 1 100%;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
  }

  .crm-ui-surface:not(.control-body) .topbar .role-test-switcher {
    order: 3;
    flex: 1 1 100%;
    inline-size: 100%;
    min-block-size: 44px;
    margin: 0;
  }

  .crm-ui-surface:not(.control-body) .role-test-switcher-select {
    min-block-size: 44px;
  }

  .crm-ui-surface:not(.control-body) .topbar .page-design-toggle {
    order: 4;
    flex: 1 1 100%;
    inline-size: 100%;
    min-block-size: 44px;
    margin: 0;
  }

  /* Anchor the RTL drawer at the visible viewport edge and clip it while
     closed, instead of positioning it beyond the document's scroll area. */
  .crm-ui-surface:not(.control-body) .sidebar {
    inset-inline-start: 0;
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    pointer-events: none;
    transition: clip-path var(--crm-motion-overlay, 220ms) var(--crm-motion-ease-standard, ease), visibility 0s linear var(--crm-motion-overlay, 220ms), box-shadow var(--crm-motion-overlay, 220ms) var(--crm-motion-ease-standard, ease);
  }

  .crm-ui-surface:not(.control-body) .sidebar.is-open {
    clip-path: inset(0);
    visibility: visible;
    pointer-events: auto;
    transition: clip-path var(--crm-motion-overlay, 220ms) var(--crm-motion-ease-standard, ease), visibility 0s, box-shadow var(--crm-motion-overlay, 220ms) var(--crm-motion-ease-standard, ease);
  }
}

@media screen and (forced-colors: active) {
  .crm-ui-surface :where(.role-test-switcher:focus-within, .page-design-toggle:focus-visible,
    .menu-toggle:focus-visible, .notification-summary:focus-visible) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    border-color: Highlight;
    forced-color-adjust: auto;
  }

  .crm-ui-surface :where(.role-test-switcher-select:focus-visible) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}