body[data-mode="dark"] {
    background: #0d0e11;
  }

  body[data-mode="gray"] {
    background: #2f3136;
  }

  body {
    overflow-x: hidden;
  }

  body[data-mode="light"] {
    background: #f4f6f3;
    --crm-light-bg: #f4f6f3;
    --crm-light-surface: #fbfaf6;
    --crm-light-surface-muted: #f0f2ed;
    --crm-light-surface-soft: #f7f7f2;
    --crm-light-border: #dde1d8;
    --crm-light-border-soft: #e7e8e1;
  }

  #root {
    min-height: 100dvh;
  }

  body[data-mode="light"] .mantine-AppShell-main,
  body[data-mode="light"] .mantine-AppShell-navbar,
  body[data-mode="light"] .mantine-AppShell-header,
  body[data-mode="light"] .mantine-Drawer-content {
    background: var(--crm-light-bg);
  }

  body[data-mode="light"] .mantine-Card-root,
  body[data-mode="light"] .mantine-Paper-root,
  body[data-mode="light"] .mantine-Modal-content,
  body[data-mode="light"] .mantine-Accordion-item,
  body[data-mode="light"] .mantine-Popover-dropdown,
  body[data-mode="light"] .mantine-Menu-dropdown {
    background: var(--crm-light-surface);
    border-color: var(--crm-light-border);
  }

  body[data-mode="light"] .mantine-Input-input,
  body[data-mode="light"] .mantine-Select-input,
  body[data-mode="light"] .mantine-MultiSelect-input,
  body[data-mode="light"] .mantine-Textarea-input {
    background: var(--crm-light-surface-soft);
    border-color: var(--crm-light-border);
  }

  body[data-mode="light"] .mantine-Input-input:focus,
  body[data-mode="light"] .mantine-Select-input:focus,
  body[data-mode="light"] .mantine-MultiSelect-input:focus,
  body[data-mode="light"] .mantine-Textarea-input:focus {
    border-color: color-mix(in srgb, var(--mantine-color-teal-6) 72%, var(--crm-light-border));
  }

  body[data-mode="light"] .mantine-Table-th {
    background: var(--crm-light-surface-muted);
    border-bottom-color: var(--crm-light-border);
  }

  body[data-mode="light"] .mantine-Table-td {
    border-bottom-color: var(--crm-light-border-soft);
  }

  body[data-mode="light"] .mantine-Table-tr:hover,
  body[data-mode="light"] .crm-data-table-card .mantine-Table-tr:hover {
    background: color-mix(in srgb, var(--mantine-color-teal-6) 4%, var(--crm-light-surface));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mantine-color-teal-6) 34%, transparent);
  }

  body[data-mode="light"] .mantine-Badge-root[data-variant="light"],
  body[data-mode="light"] .mantine-Pill-root {
    background: color-mix(in srgb, currentColor 8%, var(--crm-light-surface-soft));
    border: 1px solid color-mix(in srgb, currentColor 14%, var(--crm-light-border));
  }

  body[data-mode="light"] .mantine-Button-root[data-variant="light"],
  body[data-mode="light"] .mantine-ActionIcon-root[data-variant="light"] {
    background: color-mix(in srgb, currentColor 7%, var(--crm-light-surface-soft));
    border-color: color-mix(in srgb, currentColor 12%, var(--crm-light-border));
  }

  body[data-mode="light"] .mantine-Button-root[data-variant="light"]:hover,
  body[data-mode="light"] .mantine-ActionIcon-root[data-variant="light"]:hover {
    background: color-mix(in srgb, currentColor 11%, var(--crm-light-surface-soft));
  }

  body[data-mode="light"] .mantine-Alert-root[data-variant="light"] {
    background: color-mix(in srgb, currentColor 7%, var(--crm-light-surface-soft));
    border: 1px solid color-mix(in srgb, currentColor 12%, var(--crm-light-border));
  }

  body[data-mode="light"] .crm-mobile-record-card,
  body[data-mode="light"] .crm-mobile-scroll-card,
  body[data-mode="light"] .crm-metric-card,
  body[data-mode="light"] .crm-counter-card,
  body[data-mode="light"] .crm-task-bucket,
  body[data-mode="light"] .crm-today-summary-card,
  body[data-mode="light"] .crm-today-focus-panel,
  body[data-mode="light"] .crm-today-kanban-column,
  body[data-mode="light"] .crm-today-task-card {
    background: var(--crm-light-surface);
    border-color: var(--crm-light-border);
  }

  body[data-mode="light"] .crm-counter-card:hover,
  body[data-mode="light"] .crm-today-summary-card:hover,
  body[data-mode="light"] .crm-today-task-card:hover {
    background: var(--crm-light-surface-soft);
  }

  body[data-mode="light"] .crm-detail-shell {
    background: var(--crm-light-bg);
  }

  body[data-mode="light"] .crm-detail-header {
    background: var(--crm-light-surface);
    border-bottom-color: var(--crm-light-border);
  }

  body[data-mode="light"] .crm-detail-content .mantine-Card-root,
  body[data-mode="light"] .crm-detail-content .mantine-Accordion-item {
    background: var(--crm-light-surface);
    border-color: var(--crm-light-border);
  }

  body[data-mode="light"] .crm-detail-activity-item {
    background: var(--crm-light-surface-muted);
  }

  .crm-header-tools {
    min-width: 0;
  }

  .crm-header-search {
    width: 320px;
  }

  .mantine-Table-tr {
    height: 76px;
    transition: background-color 120ms ease, box-shadow 120ms ease;
  }

  .crm-data-table-card {
    overflow: hidden;
  }

  .crm-data-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .mantine-Table-th,
  .mantine-Table-td {
    vertical-align: middle;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .mantine-Table-td {
    height: 76px;
    padding-top: 12px;
    padding-bottom: 12px;
    color: color-mix(in srgb, var(--mantine-color-text) 88%, var(--mantine-color-dimmed) 12%);
  }

  .crm-data-table .mantine-Table-th:first-child,
  .crm-data-table .mantine-Table-td:first-child {
    padding-left: 22px;
  }

  .mantine-Table-th {
    color: var(--mantine-color-dimmed);
    font-size: 0.76rem;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .mantine-Table-td .mantine-Text-root {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .crm-data-table .mantine-Table-td:first-child .mantine-Text-root:first-child,
  .crm-mobile-card-primary .mantine-Text-root:first-child {
    color: var(--mantine-color-text);
    font-weight: 800;
  }

  .crm-data-table .mantine-Table-td:first-child .mantine-Text-root:not(:first-child),
  .crm-mobile-card-secondary .mantine-Text-root {
    color: var(--mantine-color-dimmed);
  }

  .mantine-Table-td .mantine-Badge-root,
  .mantine-Table-td .mantine-Pill-root,
  .mantine-Table-td .mantine-Button-root {
    max-width: 100%;
  }

  .mantine-Table-td .mantine-Badge-label,
  .mantine-Table-td .mantine-Pill-label,
  .mantine-Table-td .mantine-Button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .crm-map-picker {
    width: 100%;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mantine-color-gray-4) 70%, transparent);
  }

  .crm-map-picker .leaflet-container {
    width: 100%;
    height: 100%;
  }

  body[data-mode="gray"] .mantine-AppShell-main,
  body[data-mode="gray"] .mantine-AppShell-navbar,
  body[data-mode="gray"] .mantine-AppShell-header,
  body[data-mode="gray"] .mantine-Drawer-content {
    background: #2f3136;
  }

  body[data-mode="gray"] .mantine-Card-root,
  body[data-mode="gray"] .mantine-Paper-root,
  body[data-mode="gray"] .mantine-Modal-content,
  body[data-mode="gray"] .mantine-Accordion-item {
    background: #393b41;
    border-color: #555862;
  }

  body[data-mode="gray"] .mantine-Table-th,
  body[data-mode="gray"] .mantine-Table-td {
    border-color: #555862;
  }

  body[data-mode="gray"] .mantine-Input-input {
    background: #34363c;
    border-color: #5b5e68;
  }

  @media (max-width: 48em) {
    .mantine-AppShell-main {
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .mantine-Card-root,
    .mantine-Paper-root {
      border-radius: 14px;
    }

    .mantine-Table-tr,
    .mantine-Table-td {
      height: auto;
      min-height: 62px;
    }

    .mantine-Table-th,
    .mantine-Table-td {
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 0.88rem;
    }

    .mantine-Button-root,
    .mantine-ActionIcon-root,
    .mantine-Input-input,
    .mantine-Select-input,
    .mantine-MultiSelect-input,
    .mantine-Textarea-input {
      min-height: 42px;
    }

    .crm-section-title {
      min-width: 0;
      flex: 1;
    }

    .crm-section-title .mantine-Title-root {
      font-size: 1.45rem;
      line-height: 1.18;
    }

    .crm-section-actions,
    .crm-section-actions > .mantine-Group-root,
    .crm-section-actions > .mantine-Box-root {
      width: 100%;
    }

    .crm-section-actions .mantine-Button-root,
    .crm-section-actions .mantine-MultiSelect-root,
    .crm-section-actions .mantine-TextInput-root {
      width: 100%;
    }

    .crm-header-title .mantine-Text-root {
      display: none;
    }

    .crm-header-search {
      width: 100%;
    }

    .crm-mobile-scroll-card {
      margin-left: -8px;
      margin-right: -8px;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
    }

    .crm-mobile-record-card {
      background: light-dark(var(--mantine-color-white), #1a1b1e);
      border-color: light-dark(var(--mantine-color-gray-2), #2c2d31);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }

    .crm-mobile-card-actions .mantine-ActionIcon-root {
      min-width: 34px;
      min-height: 34px;
    }

    .crm-mobile-card-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
      padding-top: 4px;
    }

    .crm-mobile-card-score {
      padding-top: 2px;
      padding-bottom: 2px;
    }

    .crm-mobile-card-field {
      min-width: 0;
    }

    .crm-mobile-card-field .mantine-Text-root {
      word-break: break-word;
    }

    .crm-mobile-scroll-card .mantine-Table-root {
      font-size: 0.86rem;
    }

    .crm-mobile-scroll-card .mantine-ScrollArea-viewport > div {
      min-width: min-content;
    }

    .crm-map-picker {
      height: 260px;
    }

    .crm-detail-header {
      padding: 14px;
    }

    .crm-detail-content {
      padding: 12px;
    }

    .crm-detail-header-actions,
    .crm-detail-header-actions .mantine-Button-root {
      width: 100%;
    }

    .mantine-Popover-dropdown {
      max-width: calc(100vw - 20px);
    }
  }

  @media (max-width: 30em) {
    .crm-section-title .mantine-Title-root {
      font-size: 1.25rem;
      line-height: 1.2;
    }

    .mantine-Title-root {
      overflow-wrap: anywhere;
    }

    .mantine-Badge-root,
    .mantine-Pill-root {
      max-width: 100%;
    }

    .mantine-Badge-label,
    .mantine-Pill-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* Metric cards - actionable, neutral styling */
  .crm-metric-card {
    border: 1px solid var(--mantine-color-gray-2);
    background: var(--mantine-color-gray-0);
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
  }

  .crm-counter-grid {
    margin-bottom: 2px;
  }

  .crm-counter-card {
    background: light-dark(var(--mantine-color-gray-0), #17181b);
    border-color: light-dark(var(--mantine-color-gray-2), #2c2d31);
    min-height: 78px;
  }

  .crm-counter-card:hover {
    background: light-dark(var(--mantine-color-gray-1), #1d1f24);
  }

  .crm-task-bucket {
    background: light-dark(var(--mantine-color-white), #1a1b1e);
  }

  .crm-today-summary-card,
  .crm-today-focus-panel,
  .crm-today-kanban-column,
  .crm-today-task-card {
    background: light-dark(var(--mantine-color-white), #1a1b1e);
  }

  .crm-today-summary-card:hover,
  .crm-today-task-card:hover {
    background: light-dark(var(--mantine-color-gray-0), #1d1f24);
  }

  .crm-today-focus-panel {
    min-width: 0;
  }

  .crm-today-filter-bar {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .crm-today-filter-bar .mantine-Group-root {
    min-width: max-content;
  }

  .crm-today-kanban-column {
    align-self: stretch;
  }

  .crm-today-task-card {
    transition: background-color 120ms ease, border-color 120ms ease;
  }

  .crm-detail-drawer .mantine-Drawer-body,
  .crm-detail-modal .mantine-Modal-body {
    padding: 0;
  }

  .crm-detail-shell {
    min-height: 0;
    background: light-dark(var(--mantine-color-gray-0), #111216);
  }

  .crm-detail-header {
    padding: 16px;
    border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), #2c2d31);
    background: light-dark(var(--mantine-color-white), #17181b);
  }

  .crm-detail-header .mantine-Title-root {
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .crm-detail-header-actions .mantine-Button-root {
    min-width: 0;
  }

  .crm-detail-content {
    padding: 12px;
  }

  .crm-client-detail-modal .mantine-Modal-content {
    max-width: calc(100vw - 48px);
  }

  .crm-client-detail-tabs .mantine-Tabs-list {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .crm-client-detail-tabs .mantine-Tabs-tab {
    min-width: max-content;
  }

  .crm-detail-content .mantine-Card-root,
  .crm-detail-content .mantine-Accordion-item {
    background: light-dark(var(--mantine-color-white), #1a1b1e);
    border-color: light-dark(var(--mantine-color-gray-2), #2c2d31);
  }

  .crm-detail-content .mantine-Card-root {
    border-radius: 8px;
  }

  .crm-detail-activity-item {
    background: light-dark(var(--mantine-color-gray-0), #17181b);
  }

  @media (min-width: 62em) {
    .crm-today-focus-panel {
      grid-column: span 3;
    }
  }

  @media (max-width: 48em) {
    .crm-client-detail-modal .mantine-Modal-content {
      max-width: 100vw;
    }
  }

  body[data-mode="dark"] .mantine-AppShell-main,
  body[data-mode="dark"] .mantine-AppShell-navbar,
  body[data-mode="dark"] .mantine-AppShell-header,
  body[data-mode="dark"] .mantine-Drawer-content {
    background: #0d0e11;
  }

  body[data-mode="dark"] .mantine-Card-root,
  body[data-mode="dark"] .mantine-Paper-root,
  body[data-mode="dark"] .mantine-Modal-content,
  body[data-mode="dark"] .mantine-Accordion-item,
  body[data-mode="dark"] .mantine-Popover-dropdown,
  body[data-mode="dark"] .mantine-Menu-dropdown {
    background: #1a1b1e;
    border-color: #2c2d31;
  }

  body[data-mode="dark"] .crm-mobile-scroll-card {
    background: #1a1b1e;
    border-color: #2c2d31;
  }

  body[data-mode="dark"] .mantine-Table-th {
    background: #17181b;
    border-bottom-color: #2c2d31;
  }

  body[data-mode="dark"] .mantine-Table-td {
    border-bottom-color: #2c2d31;
  }

  body[data-mode="dark"] .mantine-Table-tr:hover {
    background: rgba(75, 139, 255, 0.045);
    box-shadow: inset 3px 0 0 rgba(75, 139, 255, 0.55);
  }

  body[data-mode="dark"] .crm-data-table-card .mantine-Table-tr:hover {
    background: rgba(75, 139, 255, 0.04);
  }

  body[data-mode="dark"] .mantine-Badge-root[data-variant="light"] {
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }

  body[data-mode="dark"] .mantine-Input-input,
  body[data-mode="dark"] .mantine-Select-input,
  body[data-mode="dark"] .mantine-MultiSelect-input,
  body[data-mode="dark"] .mantine-Textarea-input {
    background: #141519;
    border-color: #2c2d31;
  }

  .crm-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
  }