/* CRM Global Styles - Scoped to prevent AppStruct conflicts */

/* Gilroy — the same typeface the AppStruct host uses, so the CRM matches it. */
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

/* ------------------------------------------------------------------ *
 * Scoped baseline reset — replaces Tailwind's preflight now that
 * Tailwind is removed from the build. Wrapped in :where() so it carries
 * ZERO specificity: UIKit component classes (.crm-btn, .crm-card-title,
 * …) and inline styles always win, and nothing leaks to the AppStruct
 * host because every rule is scoped under .crm-tailwind.
 * ------------------------------------------------------------------ */
:where(.crm-tailwind) *,
:where(.crm-tailwind) *::before,
:where(.crm-tailwind) *::after {
  box-sizing: border-box;
}
:where(.crm-tailwind) h1,
:where(.crm-tailwind) h2,
:where(.crm-tailwind) h3,
:where(.crm-tailwind) h4,
:where(.crm-tailwind) h5,
:where(.crm-tailwind) h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
:where(.crm-tailwind) p,
:where(.crm-tailwind) figure,
:where(.crm-tailwind) blockquote,
:where(.crm-tailwind) dl,
:where(.crm-tailwind) dd,
:where(.crm-tailwind) pre,
:where(.crm-tailwind) hr {
  margin: 0;
}
:where(.crm-tailwind) ul,
:where(.crm-tailwind) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.crm-tailwind) a {
  color: inherit;
  text-decoration: inherit;
}
:where(.crm-tailwind) img,
:where(.crm-tailwind) svg,
:where(.crm-tailwind) video,
:where(.crm-tailwind) canvas {
  display: block;
  vertical-align: middle;
}
:where(.crm-tailwind) img,
:where(.crm-tailwind) video {
  max-width: 100%;
  height: auto;
}
:where(.crm-tailwind) button,
:where(.crm-tailwind) input,
:where(.crm-tailwind) optgroup,
:where(.crm-tailwind) select,
:where(.crm-tailwind) textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
:where(.crm-tailwind) button,
:where(.crm-tailwind) select {
  text-transform: none;
}
:where(.crm-tailwind) button,
:where(.crm-tailwind) [type='button'],
:where(.crm-tailwind) [type='reset'],
:where(.crm-tailwind) [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
:where(.crm-tailwind) :disabled {
  cursor: default;
}
:where(.crm-tailwind) table {
  border-collapse: collapse;
}

/* IMPORTANT: CRM container styles */
.crm-tailwind {
  /* CRM base styles — match the AppStruct host typeface */
  font-family:
    'Gilroy',
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  line-height: 1.5;

  /* Ensure proper isolation */
  isolation: isolate;
  contain: style;

  /* CRM-specific CSS custom properties */
  --crm-primary: #3378ff;
  --crm-secondary: #a7b4cc;
  --crm-success: #38cb89;
  --crm-error: #ff224a;
  --crm-warning: #ffad33;
}

/* Theme variants */
.crm-theme-appstruct {
  /* Use AppStruct color palette */
  --crm-primary: #3378ff;
  --crm-background: #fafafa;
  --crm-surface: #ffffff;
  --crm-text: #1e1e2f;
  --crm-border: #e5e5e5;
}

/* Ensure no style leakage */
.crm-tailwind * {
  /* Reset box-sizing for CRM content */
  box-sizing: border-box;
}

/* Prevent global style inheritance issues */
.crm-tailwind button,
.crm-tailwind input,
.crm-tailwind select,
.crm-tailwind textarea {
  font-family: inherit;
  font-size: inherit;
}

/* FullCalendar Styles - Adapted from Next.js template with crm- scoping */
.crm-tailwind .fc .fc-view-harness {
  max-width: 100%;
  overflow-x: auto;
}

.crm-tailwind .fc .fc-toolbar.fc-header-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  padding-top: 1.5rem;
}

@media (min-width: 640px) {
  .crm-tailwind .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: row;
  }
}

.crm-tailwind .fc-button-group {
  gap: 0.5rem;
}

.crm-tailwind .fc-button-group .fc-button {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background-color: transparent;
  color: #374151;
  transition: all 0.2s;
}

.crm-tailwind .fc-button-group .fc-button:hover {
  border-color: #e5e7eb;
  background-color: #f9fafb;
}

.crm-tailwind .fc-button-group .fc-button:focus {
  box-shadow: none;
}

.crm-tailwind .fc-addEventButton-button {
  border-radius: 0.5rem;
  border: none;
  background-color: #3378ff;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
}

.crm-tailwind .fc-addEventButton-button:hover {
  background-color: #2e6ce5;
}

.crm-tailwind .fc-toolbar-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #1f2937;
}

.crm-tailwind .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child {
  border-radius: 0.5rem;
  background-color: #f3f4f6;
  padding: 0.125rem;
}

.crm-tailwind .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button {
  height: auto;
  width: auto;
  border-radius: 0.375rem;
  border: none;
  background-color: transparent;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

.crm-tailwind .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button:hover {
  color: #374151;
}

.crm-tailwind .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button.fc-button-active {
  color: #111827;
  background-color: white;
}

.crm-tailwind .fc-theme-standard th {
  border-left: none;
  border-right: none;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
  text-align: left;
}

.crm-tailwind .fc-theme-standard td,
.crm-tailwind .fc-theme-standard .fc-scrollgrid {
  border-color: #e5e7eb;
}

.crm-tailwind .fc .fc-col-header-cell-cushion {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #9ca3af;
}

.crm-tailwind .fc .fc-daygrid-day.fc-day-today {
  background-color: transparent;
}

.crm-tailwind .fc .fc-daygrid-day {
  padding: 0.5rem;
}

.crm-tailwind .fc .fc-daygrid-day.fc-day-today .fc-scrollgrid-sync-inner {
  border-radius: 0.125rem;
  background-color: #f3f4f6;
}

.crm-tailwind .fc .fc-daygrid-day-number {
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

/* Event styling */
.crm-tailwind .event-fc-color {
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  padding-right: 0.75rem;
}

.crm-tailwind .event-fc-color .fc-event-title {
  padding: 0;
  font-size: 0.875rem;
  font-weight: normal;
  color: #374151;
}

.crm-tailwind .fc-daygrid-event-dot {
  width: 0.25rem;
  height: 1.25rem;
  margin-left: 0;
  margin-right: 0.75rem;
  border: none;
  border-radius: 0.125rem;
}

.crm-tailwind .event-fc-color.fc-bg-success {
  border-color: #dcfce7;
  background-color: #dcfce7;
}

.crm-tailwind .event-fc-color.fc-bg-danger {
  border-color: #fee2e2;
  background-color: #fee2e2;
}

.crm-tailwind .event-fc-color.fc-bg-primary {
  border-color: #dbeafe;
  background-color: #dbeafe;
}

.crm-tailwind .event-fc-color.fc-bg-warning {
  border-color: #fef3c7;
  background-color: #fef3c7;
}

.crm-tailwind .event-fc-color.fc-bg-success .fc-daygrid-event-dot {
  background-color: #38cb89;
}

.crm-tailwind .event-fc-color.fc-bg-danger .fc-daygrid-event-dot {
  background-color: #ff224a;
}

.crm-tailwind .event-fc-color.fc-bg-primary .fc-daygrid-event-dot {
  background-color: #3378ff;
}

.crm-tailwind .event-fc-color.fc-bg-warning .fc-daygrid-event-dot {
  background-color: #ffad33;
}

/* ==========================================================================
   Modern CRM design system — reusable primitives layered on top of Tailwind.
   Gives every surface a consistent, premium look (soft radii, light borders,
   subtle depth) without rewriting every utility on every page.
   ========================================================================== */
.crm-tailwind {
  --crm-radius: 16px;
  --crm-radius-sm: 12px;
  /* One name for control-sized corners — the record pages had grown nine
     competing radii (6/7/8/9/10/12/16/20) across buttons, chips and inputs. */
  --crm-radius-ctl: 8px;
  --crm-card-border: #eceff4;
  --crm-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  --crm-card-shadow-hover: 0 16px 32px -18px rgba(16, 24, 40, 0.24);
  --crm-ink: #0f172a;
  --crm-muted: #64748b;
  --crm-faint: #94a3b8;
  font-family: 'Gilroy', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Card ---------------------------------------------------------------- */
.crm-card {
  background: #ffffff;
  border: 1px solid var(--crm-card-border);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-card-shadow);
  padding: 24px;
}

.crm-card--interactive {
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.crm-card--interactive:hover {
  box-shadow: var(--crm-card-shadow-hover);
  transform: translateY(-2px);
  border-color: #e0e7f1;
}

.crm-card-title {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--crm-ink);
  margin: 0;
}

.crm-card-sub {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--crm-muted);
  margin: 2px 0 0;
}

/* Stat card ----------------------------------------------------------- */
.crm-stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
  border: 1px solid var(--crm-card-border);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-card-shadow);
  padding: 22px;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.crm-stat:hover {
  box-shadow: var(--crm-card-shadow-hover);
  transform: translateY(-2px);
  border-color: #e0e7f1;
}

.crm-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crm-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crm-stat-label {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--crm-muted);
  margin: 0;
}

.crm-stat-value {
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--crm-ink);
  margin: 6px 0 0;
}

.crm-stat-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.crm-stat-delta--up {
  color: #067647;
  background: #ecfdf3;
}

.crm-stat-delta--down {
  color: #b42318;
  background: #fef3f2;
}

.crm-stat-desc {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--crm-faint);
}

/* Analytics — premium metric tiles ------------------------------------ */
.crm-stat--metric {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 22px;
}
.crm-stat--metric::after {
  content: '';
  position: absolute;
  top: -55px;
  right: -35px;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft, transparent), transparent 68%);
  pointer-events: none;
}
.crm-stat--metric > * {
  position: relative;
  z-index: 1;
}
.crm-stat--metric .crm-stat-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  color: #ffffff;
  background: linear-gradient(140deg, var(--accent, #3378ff), var(--accent-2, #3378ff));
  box-shadow: 0 10px 20px -8px var(--accent, rgba(15, 23, 42, 0.4));
}
.crm-stat--metric .crm-stat-label {
  margin: 0;
  padding-right: 52px;
}
.crm-stat--metric .crm-stat-value {
  margin: 14px 0 0;
  font-size: 33px;
}
.crm-stat--metric .crm-stat-foot {
  margin-top: 16px;
}

/* Compact metric tiles for the board pages (Kanban / Pipeline): kills the
   dead middle gap so the tiles read as a glanceable strip and the board — not
   the metrics — is the focus. Analytics/Contacts keep the tall tiles. */
.crm-stat--metric.crm-stat--compact {
  padding: 14px 16px;
}
.crm-stat--compact .crm-stat-label {
  padding-right: 44px;
}
.crm-stat--compact .crm-stat-value {
  font-size: 24px;
  margin: 4px 0 0;
}
.crm-stat--compact .crm-stat-foot {
  margin-top: 8px;
}
.crm-stat--compact .crm-stat-icon {
  width: 36px;
  height: 36px;
  top: 14px;
  right: 14px;
}

/* Tighter vertical rhythm for board pages (opt-in). */
.crm-page.crm-page--board {
  gap: 16px;
}

.crm-stat-delta svg {
  width: 12px;
  height: 12px;
}

/* KPI mini-tiles (chart summary) -------------------------------------- */
.crm-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.crm-kpi-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--crm-muted);
}
.crm-kpi-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.crm-kpi-value {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--crm-ink);
  margin-top: 5px;
}

/* Header brand badge + live pulse ------------------------------------- */
.crm-hero-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(140deg, #3378ff, #6a5cff);
  box-shadow: 0 10px 22px -10px rgba(51, 120, 255, 0.8);
  flex-shrink: 0;
}
.crm-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #067647;
  background: #ecfdf3;
  border: 1px solid #d1fadf;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.crm-live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
}
.crm-live-dot i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #12b76a;
}
.crm-live-dot i:last-child {
  animation: crmPing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Ranked list rows with share bars (Top Channels / Pages) ------------- */
.crm-rank-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crm-rank-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 0.15s ease;
}
.crm-rank-row:hover {
  background: #f6f8fc;
}
.crm-rank-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(51, 120, 255, 0.12), rgba(51, 120, 255, 0.02));
  z-index: 0;
}
/*
 * Everything EXCEPT the bar sits above it.
 *
 * This was `.crm-rank-row > *`, which also matched .crm-rank-bar. Both selectors
 * are specificity (0,1,0), so the later one won and reset the bar from
 * `position: absolute` back to `relative` — putting it back IN FLOW, where its
 * inline `width: N%` ate the row and squeezed .crm-rank-name (flex: 1) to zero.
 * The label vanished and the badge and count bunched up on the right.
 *
 * `:not()` takes its argument's specificity, so this is (0,2,0) and cannot lose
 * to the bar's own rule however the file is reordered.
 */
.crm-rank-row > *:not(.crm-rank-bar) {
  position: relative;
  z-index: 1;
}
.crm-rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: #eef1f6;
  flex-shrink: 0;
}
.crm-rank-badge--1 {
  color: #b45309;
  background: #fef4e2;
}
.crm-rank-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--crm-ink);
}
.crm-rank-name > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-rank-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--crm-ink);
  flex-shrink: 0;
}

/* Empty state --------------------------------------------------------- */
.crm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
  gap: 4px;
}
.crm-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background: #f1f5f9;
  margin-bottom: 8px;
}

/* Custom checkbox ----------------------------------------------------- */
.crm-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.crm-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.crm-check-box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.crm-check-box svg {
  width: 12px;
  height: 12px;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.15s ease;
}
.crm-check:hover .crm-check-box {
  border-color: #94a3b8;
}
.crm-check input:checked + .crm-check-box {
  background: linear-gradient(135deg, #3378ff, #5b93ff);
  border-color: #3378ff;
}
.crm-check input:checked + .crm-check-box svg {
  opacity: 1;
  transform: scale(1);
}
.crm-check input:focus-visible + .crm-check-box {
  box-shadow: 0 0 0 3px rgba(51, 120, 255, 0.2);
}
.crm-check-label {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

/* Calendar category rows (borderless, hover-reveal delete) ------------ */
.crm-cal-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}
.crm-cal-cat-row:hover {
  background: #f6f8fc;
}
.crm-cal-cat-row.is-active {
  background: #eef4ff;
  border-color: #dbeafe;
}
.crm-cal-swatch {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  flex-shrink: 0;
}
.crm-cal-count {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  flex-shrink: 0;
}
.crm-cal-cat-row.is-active .crm-cal-count {
  color: #3378ff;
}
.crm-cal-del {
  opacity: 0;
}
.crm-cal-cat-row:hover .crm-cal-del {
  opacity: 1;
}

/* Segmented control --------------------------------------------------- */
.crm-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
}

.crm-segmented button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
  text-transform: capitalize;
}

.crm-segmented button:hover {
  color: #0f172a;
}

.crm-segmented button.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

/* Layout helpers ------------------------------------------------------ */
.crm-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.crm-grid {
  display: grid;
  gap: 24px;
}

.crm-grid-4 {
  /* 2-up (2x2) metric grid on phones instead of a tall single column */
  grid-template-columns: repeat(2, 1fr);
}
.crm-grid-3 {
  grid-template-columns: 1fr;
}
.crm-grid-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .crm-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .crm-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .crm-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .crm-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.crm-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.crm-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Text helpers -------------------------------------------------------- */
.crm-ink {
  color: var(--crm-ink);
}
.crm-muted {
  color: var(--crm-muted);
}
.crm-text-13 {
  font-size: 13px;
  font-weight: 500;
}

/* List rows (Top Channels / Pages, Active Users, etc.) ---------------- */
.crm-list {
  display: flex;
  flex-direction: column;
}
.crm-list-head,
.crm-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.crm-list-head {
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--crm-card-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--crm-muted);
}
.crm-list-row {
  padding: 10px 0;
}
.crm-list-row + .crm-list-row {
  border-top: 1px solid #f4f6fa;
}
.crm-list-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--crm-ink);
}
.crm-list-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--crm-ink);
}

/* Button -------------------------------------------------------------- */
.crm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}
.crm-btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #6d5bf5 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px -8px rgba(63, 94, 251, 0.5);
}
.crm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(63, 94, 251, 0.6);
}
.crm-btn-ghost {
  background: #f4f6fa;
  color: #334155;
  border-color: #eceff4;
}
.crm-btn-ghost:hover {
  background: #eceff4;
  border-color: #cbd5e1;
}

/* Input / select ------------------------------------------------------ */
.crm-input {
  height: 44px;
  width: 100%;
  padding: 0 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--crm-ink);
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.crm-input::-moz-placeholder {
  color: var(--crm-faint);
}
.crm-input::placeholder {
  color: var(--crm-faint);
}
.crm-input:focus {
  border-color: #3378ff;
  box-shadow: 0 0 0 3px rgba(51, 120, 255, 0.15);
}

/* Table --------------------------------------------------------------- */
.crm-table {
  width: 100%;
  border-collapse: collapse;
}
.crm-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--crm-faint);
  border-bottom: 1px solid var(--crm-card-border);
}
.crm-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--crm-ink);
  border-bottom: 1px solid #f4f6fa;
}
.crm-table tbody tr {
  transition: background-color 0.12s ease;
}
.crm-table tbody tr:hover td {
  background: #f8fafc;
}

/* Live "ping" pulse (host-independent, replaces Tailwind animate-ping) */
@keyframes crmPing {
  75%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
.crm-animate-ping {
  animation: crmPing 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Spinner (replaces Tailwind animate-spin) */
@keyframes crmSpin {
  to {
    transform: rotate(360deg);
  }
}
.crm-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #3378ff;
  border-radius: 999px;
  animation: crmSpin 0.8s linear infinite;
}

/* Keyboard focus ring for inline-styled buttons (inline styles can't do :focus-visible) */
.crm-focusable:focus-visible {
  outline: 2px solid #3378ff;
  outline-offset: 2px;
}
/* Zero specificity via :where(), so an element that HAS a radius keeps it. At
   (0,2,0) this declaration outranked .crm-step's 999px and visibly squared off
   whichever lifecycle pill held keyboard focus. */
:where(.crm-focusable:focus-visible) {
  border-radius: 10px;
}

/* Skeleton shimmer (loading placeholders) --------------------------------- */
.crm-skel {
  position: relative;
  overflow: hidden;
  background: #e9edf3;
  border-radius: 8px;
}
.crm-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
  animation: crmShimmer 1.5s infinite;
}
@keyframes crmShimmer {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .crm-skel::after {
    animation: none;
  }
}

/* Confirm dialog (styled replacement for window.confirm) ------------------ */
.crm-cd-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  animation: crmCdFade 0.16s ease;
}
.crm-cd-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid #eceff4;
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.4);
  padding: 24px;
  animation: crmCdPop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.crm-cd-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.crm-cd-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.crm-cd-msg {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #64748b;
}
.crm-cd-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}
.crm-cd-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 10px;
  transition: filter 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.crm-cd-btn:active {
  transform: translateY(1px);
}
.crm-cd-btn-cancel {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.crm-cd-btn-cancel:hover {
  background: #e9eef5;
}
.crm-cd-btn-danger {
  background: #e5484d;
  color: #ffffff;
}
.crm-cd-btn-danger:hover {
  filter: brightness(0.94);
}
.crm-cd-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #6d5bf5);
  color: #ffffff;
}
.crm-cd-btn-primary:hover {
  filter: brightness(1.04);
}
.crm-cd-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
@keyframes crmCdFade {
  from {
    opacity: 0;
  }
}
@keyframes crmCdPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

/* Toast notifications (styled replacement for alert) ---------------------- */
.crm-toast-host {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 2147483001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.crm-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 260px;
  max-width: 380px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #eceff4;
  border-left-width: 4px;
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.28);
  animation: crmToastIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.crm-toast-error {
  border-left-color: #e5484d;
}
.crm-toast-success {
  border-left-color: #12b76a;
}
.crm-toast-info {
  border-left-color: #3378ff;
}
.crm-toast-ico {
  flex: 0 0 auto;
  margin-top: 1px;
}
.crm-toast-body {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
  color: #0f172a;
  font-weight: 500;
}
.crm-toast-close {
  flex: 0 0 auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: #94a3b8;
  line-height: 0;
}
.crm-toast-close:hover {
  color: #64748b;
}
@keyframes crmToastIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .crm-cd-overlay,
  .crm-cd-card,
  .crm-toast {
    animation: none;
  }
}

/* Utility: hidden (toggled by JS for favicon fallbacks) */
.crm-hidden {
  display: none !important;
}

/* Text-only action button (View / Edit / View Details in tables & cards) */
.crm-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #3378ff;
  cursor: pointer;
  transition: color 0.15s ease;
}
.crm-link-btn:hover {
  color: #1f5fe0;
}
.crm-link-btn--muted {
  color: #64748b;
}
.crm-link-btn--muted:hover {
  color: #334155;
}

/* Round initial-letter avatar chip (set width/height/font-size inline) */
.crm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: #eef4ff;
  color: #3378ff;
  font-weight: 600;
}

/* Compact icon button (add / edit / delete chips in tables, calendar, kanban) */
.crm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.crm-icon-btn:hover {
  background: #eceff4;
  color: #334155;
}
.crm-icon-btn--brand {
  background: #eef4ff;
  color: #3378ff;
}
.crm-icon-btn--brand:hover {
  background: #e0ebff;
}
.crm-icon-btn--danger {
  background: none;
  color: #94a3b8;
}
.crm-icon-btn--danger:hover {
  color: #e5484d;
  background: #fef3f2;
}

/* Reveal a child (e.g. row delete) only on parent hover */
.crm-note-row .crm-reveal-on-hover {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.crm-note-row:hover .crm-reveal-on-hover {
  opacity: 1;
}

/* Detail-page main/sidebar grid.
   The breakpoint is a CONTAINER query, not a viewport one: the CRM box is
   viewport − left menu (256) − host gutters (64), so a viewport-based
   `min-width:1024px` fired when the column was really only ~700px wide and
   produced a squeezed 2fr/1fr split. `.crm-record-body` is the query container.
   It must wrap ONLY the grid — `container-type` applies layout containment,
   which would make it the containing block for any `position:fixed` descendant
   (the same trap documented for `contain:layout` on the host MF wrapper), so
   modals and toasts stay outside it. */
.crm-record-body {
  container-type: inline-size;
  container-name: crmrecord;
}
.crm-grid-detail {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@container crmrecord (min-width: 1000px) {
  .crm-grid-detail {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}
/* Fallback for engines without container queries: the old viewport rule, but at
   a width that accounts for the 320px of host chrome. */
@supports not (container-type: inline-size) {
  @media (min-width: 1360px) {
    .crm-grid-detail {
      grid-template-columns: minmax(0, 1fr) 320px;
      align-items: start;
    }
  }
}

/* ==========================================================================
   Record-page primitives (contact / company / deal detail). Every selector
   below is new — no existing CRM page changes appearance until it opts in.
   ========================================================================== */

/* Record pages read as documents, not dashboards: cap the measure so a wide
   monitor doesn't stretch a 150px label column beside a 2000px value column.
   Left-aligned (no auto margins) so the page's left edge still lines up with
   every list page. */
.crm-page--record {
  max-width: 1400px;
}

/* Identity header ----------------------------------------------------- */
/* flex-start, not center: once the meta row wraps to two or three lines the
   identity block grows tall, and a centred avatar drifts down away from the
   name it labels. */
.crm-record-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 14px;
}
/* basis 200, not 300: at 300 the identity block could no longer share a line
   with the 52px avatar below ~430px of card width, so the avatar was stranded
   alone on its own row above the name it labels. */
.crm-record-header__id {
  flex: 1 1 200px;
  min-width: 0;
}
.crm-record-header__id h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--crm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-record-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 6px;
  margin-top: 7px;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--crm-muted);
}
/* margin-left:auto, not space-between: a lone wrapped child stays right-aligned
   instead of collapsing to flex-start (which is why the buttons used to land
   bottom-left under the avatar). */
.crm-record-header__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Card header: icon chip + title + right slot + hairline ---------------- */
.crm-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--crm-card-border);
}
.crm-card-head--inset {
  padding: 15px 18px;
  margin-bottom: 0;
}
.crm-card-head__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--crm-radius-ctl);
  background: #f1f5fd;
  color: #3378ff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.crm-card-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--crm-ink);
}

/* Lifecycle stepper ---------------------------------------------------- */
/* Wraps rather than scrolling horizontally: an auto-scroller inside a squeezed
   column hides controls behind no visible affordance. There are no per-gap
   connector elements, so a wrapped row can never leave a line dangling at its
   edge — progression is carried by the fill states plus .crm-meter below. */
.crm-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
}
.crm-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: var(--crm-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.crm-step.is-done {
  background: #e7f8ef;
  border-color: #a6f4c5;
  color: #067647;
}
.crm-step.is-current {
  /* #2b68e0, not #3378ff: white on #3378ff is 3.99:1, under AA for 13px text. */
  background: #2b68e0;
  border-color: #2b68e0;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(51, 120, 255, 0.16);
}
.crm-step.is-blocked {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}
/* Hover states come AFTER the state classes — at equal specificity source order
   decides, so declaring :hover first left done/blocked/current steps with no
   hover feedback at all. */
.crm-step:hover {
  background: #eef4ff;
  border-color: #c7dbff;
  color: #1f5fe0;
}
.crm-step.is-done:hover {
  background: #d5f2e2;
  border-color: #86e6ad;
  color: #05603a;
}
.crm-step.is-current:hover {
  background: #1f5fe0;
  border-color: #1f5fe0;
  color: #ffffff;
}
.crm-step.is-blocked:hover {
  background: #fee4e2;
  border-color: #f5b5b0;
  color: #912018;
}

/* Inline banner (negative outcome, undo, empty-with-action) ------------- */
.crm-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--crm-radius-sm);
  border: 1px solid;
  font-size: 13px;
  font-weight: 600;
}
.crm-banner--danger {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}

/* One uppercase micro-label (the page had five sizes of this) ----------- */
.crm-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --crm-faint (#94a3b8) is 2.6:1 on white — too low for 11px text. */
  color: var(--crm-muted);
}

/* Button variants ------------------------------------------------------ */
.crm-btn--sm {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--crm-radius-ctl);
}
.crm-btn-danger-ghost {
  background: #ffffff;
  color: #b42318;
  border-color: #fecdca;
}
.crm-btn-danger-ghost:hover {
  background: #fef3f2;
  border-color: #f5b5b0;
}
.crm-btn-dashed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed var(--crm-card-border);
  border-radius: var(--crm-radius-ctl);
  background: transparent;
  color: var(--crm-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}
.crm-btn-dashed:hover {
  border-color: #3378ff;
  background: #f5f9ff;
  color: #1f5fe0;
}

/* Rollup tile band on a record page.
   auto-fit + a 210px floor, NOT .crm-grid-4: that grid switches to four-up on a
   VIEWPORT media query, but these tiles live inside .crm-grid-detail's main
   column — which at a 1024px viewport is only ~650px wide, so the query fires
   and a formatted currency figure overflows a ~150px tile. */
.crm-rollup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

/* Progress meter ------------------------------------------------------- */
.crm-meter {
  height: 6px;
  border-radius: 999px;
  background: #eef4ff;
  overflow: hidden;
}
.crm-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: #3378ff;
  transition: width 0.25s ease;
}

/* Key/value list used by the record sidebar ---------------------------- */
.crm-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
}
.crm-kv + .crm-kv {
  border-top: 1px solid #f4f6fa;
}
.crm-kv dt {
  color: var(--crm-muted);
  flex: none;
}
.crm-kv dd {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  color: var(--crm-ink);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modifiers */
.crm-card--compact {
  padding: 16px;
}
.crm-avatar--solid {
  background: #3378ff;
  color: #ffffff;
}
.crm-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kanban column shell + neutral "Final" pill */
.crm-kanban-column {
  display: flex;
  flex-direction: column;
  min-width: 360px;
  width: 360px;
  min-height: 200px;
  padding: 16px;
  border-radius: 16px;
  background: #f7f8fa;
  border: 1px solid #eceff4;
  transition: all 0.2s ease;
}
.crm-pill-final {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #eceff4;
}

/* Badge / pill -------------------------------------------------------- */
.crm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
   Record details panel (shared by contact / company / deal).
   A record can carry 3 fields or 30, and most of them are usually empty, so
   the rhythm is dense-but-breathing and the empty state whispers instead of
   repeating the word "Empty" down the page. Rows carry their own separator
   via the adjacent-sibling rule, which drops it on the first row of every
   section for free.
   ========================================================================== */
.crm-fields {
  padding: 6px 18px 14px;
}
.crm-fields__group + .crm-fields__group {
  margin-top: 16px;
}
.crm-fields__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.crm-fields__legend::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #f1f5f9;
}

.crm-field {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  row-gap: 2px;
  align-items: flex-start;
  padding: 4px 0;
}
.crm-field + .crm-field {
  border-top: 1px solid #f4f7fa;
}
.crm-field__label {
  flex: 0 1 172px;
  min-width: 132px;
  padding-top: 9px;
}
.crm-field__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.3;
}
/* The type glyph is decoration for scanning a long list; it must not compete
   with the label itself, and it must not shrink the label's wrap width. */
.crm-field__glyph {
  flex: none;
  display: inline-flex;
  color: #b3bfcf;
}
.crm-field__req {
  color: #e5484d;
}
.crm-field__hint {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #a2aebd;
}
.crm-field__value {
  flex: 1 1 220px;
  min-width: 0;
}

/* Click-to-edit target. Negative inline margin lets the hover plate bleed to
   the row's optical edge without shifting the text off the label baseline. */
.crm-field__btn {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 9px;
  margin: 0 -9px;
  background: transparent;
  cursor: text;
  min-height: 34px;
  font: inherit;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.crm-field__btn:hover {
  background: #f8fafc;
  border-color: #eef2f7;
}
.crm-field__btn:focus-visible {
  outline: none;
  background: #ffffff;
  border-color: #3378ff;
  box-shadow: 0 0 0 3px rgba(51, 120, 255, 0.15);
}
/* Empty rows read as a quiet dash until pointed at, then offer the verb. */
.crm-field__dash {
  color: #cbd5e1;
  font-size: 13.5px;
}
.crm-field__add {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #93a3b6;
}
.crm-field__btn:hover .crm-field__dash,
.crm-field__btn:focus-visible .crm-field__dash {
  display: none;
}
.crm-field__btn:hover .crm-field__add,
.crm-field__btn:focus-visible .crm-field__add {
  display: inline-flex;
}
.crm-field__read {
  padding: 7px 0;
  font-size: 13.5px;
  color: #0f172a;
  min-height: 34px;
}

/* "Show/hide empty" pill in the panel header. */
.crm-fields__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #e7ecf3;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}
.crm-fields__toggle:hover {
  background: #f6f9fc;
  color: #334155;
  border-color: #dbe3ee;
}

/* Non-native dropdown ------------------------------------------------- */
.crm-pickbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid #3378ff;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(51, 120, 255, 0.12);
  font: inherit;
  font-size: 13.5px;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
}
.crm-pickbtn__caret {
  flex: none;
  color: #94a3b8;
  transition: transform 0.15s ease;
}
.crm-pickbtn[aria-expanded='true'] .crm-pickbtn__caret {
  transform: rotate(180deg);
}
/* Rendered through a portal to escape the card's overflow:hidden and the
   record grid's container-type containment, so it is positioned in viewport
   coordinates and cannot inherit the panel's stacking context. */
.crm-picklist {
  position: fixed;
  /* The portal lands outside .crm-tailwind, so the scoped border-box reset
     doesn't reach it and the measured width would gain the padding. */
  box-sizing: border-box;
  z-index: 4000;
  padding: 6px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow:
    0 16px 32px rgba(19, 22, 41, 0.14),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  max-height: 288px;
  overflow-y: auto;
  /* Portalled onto <body>, i.e. outside .crm-tailwind — `inherit` would pick up
     the host page's default (a serif in a bare document), so state it. */
  font-family: 'Gilroy', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.crm-pickopt {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  white-space: nowrap;
}
.crm-pickopt.is-active {
  background: #f4f7fb;
}
.crm-pickopt.is-selected {
  font-weight: 600;
  color: #1f5fe0;
}
.crm-pickopt--clear {
  color: #94a3b8;
  font-weight: 500;
}
.crm-picklist__rule {
  height: 1px;
  margin: 5px 6px;
  background: #f1f5f9;
}

@media (max-width: 640px) {
  .crm-fields {
    padding: 6px 14px 12px;
  }
  .crm-field__label {
    flex-basis: 100%;
    padding-top: 6px;
  }
}

/* ------------------------------------------------------------------ *
 * Phone polish (≤640px): reclaim horizontal space and give controls
 * finger-friendly hit areas. Targets shared classes, so every CRM
 * page benefits without per-page changes. Inline padding (e.g. tables
 * with padding:0) still wins, so nothing that opts out is affected.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .crm-tailwind .crm-page {
    padding: 16px;
    gap: 16px;
  }
  .crm-tailwind .crm-page.crm-page--board {
    gap: 14px;
  }
  /* Trim the desktop 24px card padding on phones */
  .crm-tailwind .crm-card {
    padding: 16px;
  }
  /* Stat / metric tiles: tighter on phones (also covers the compact board tiles) */
  .crm-tailwind .crm-stat {
    padding: 16px;
  }
  /* Finger-friendly icon buttons (~38px) and segmented controls (≥40px) */
  .crm-tailwind .crm-icon-btn {
    padding: 9px;
  }
  .crm-tailwind .crm-segmented button {
    min-height: 40px;
  }
  /* Text link buttons (card footers) get a real tap area */
  .crm-tailwind .crm-link-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
  }
  /* Toasts never exceed the viewport */
  .crm-tailwind .crm-toast {
    max-width: calc(100vw - 32px);
  }

  /* Metric tiles: compact so the 2x2 grid is a glanceable strip, not a
     wall of full-height cards you must scroll past to reach the content. */
  .crm-tailwind .crm-grid {
    gap: 12px;
  }
  .crm-tailwind .crm-stat--metric {
    padding: 14px;
  }
  .crm-tailwind .crm-stat--metric .crm-stat-value {
    font-size: 20px;
    margin-top: 6px;
  }
  .crm-tailwind .crm-stat--metric .crm-stat-label {
    padding-right: 36px;
    font-size: 12px;
  }
  .crm-tailwind .crm-stat--metric .crm-stat-foot {
    margin-top: 8px;
  }
  .crm-tailwind .crm-stat--metric .crm-stat-icon {
    width: 32px;
    height: 32px;
    top: 12px;
    right: 12px;
  }
  .crm-tailwind .crm-stat--metric::after {
    width: 110px;
    height: 110px;
    top: -42px;
    right: -30px;
  }
  /* Header subtitles wrap instead of clipping at the screen edge */
  .crm-tailwind .crm-card-sub {
    white-space: normal !important;
    max-width: 100% !important;
  }
}


/* The checkbox's real <input> is transparent, so a focus ring on it would be
   invisible. Move the ring to the painted box beside it, and only for keyboard
   focus — a mouse click on a checkbox should not leave a ring behind. */
.crm-checkbox-box {
  box-shadow: 0 0 0 0 rgba(51, 120, 255, 0);
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}
input:focus-visible + .crm-checkbox-box {
  box-shadow: 0 0 0 3px rgba(51, 120, 255, 0.28);
  border-color: #3378ff;
}
input:hover:not(:disabled) + .crm-checkbox-box {
  border-color: #94b6ff;
}

@media (prefers-reduced-motion: reduce) {
  .crm-checkbox-box { transition: none; }
}