#app {
  --crm-canvas: #f3f5f8;
  --crm-surface: #fff;
  --crm-layer: #eaf0f6;
  --crm-ink: #17263a;
  --crm-muted: #475c71;
  --crm-stroke: #c9d5e2;
  --crm-accent: #0057b8;
  --crm-accent-ink: #fff;
  --crm-selection: #e3efff;
  --crm-danger: #a52234;
  --crm-radius: 1.125rem;
  --crm-gap: clamp(.75rem, 1.7vw, 1.35rem);
  --crm-shadow: 0 2px 8px #17263a0b;
}

[data-theme="dark"] #app {
  --crm-canvas: #121b29;
  --crm-surface: #1a283a;
  --crm-layer: #213248;
  --crm-ink: #eff5ff;
  --crm-muted: #bccde1;
  --crm-stroke: #526781;
  --crm-accent: #a9d1ff;
  --crm-accent-ink: #142641;
  --crm-selection: #294765;
  --crm-danger: #ffb7bf;
  --crm-shadow: 0 2px 8px #0003;
}

#app .main-shell {
  background: var(--crm-canvas);
  color: var(--crm-ink);
  font-family: system-ui, sans-serif;
}

#app .topbar {
  gap: var(--crm-gap);
  background: var(--crm-surface) !important;
  border-color: var(--crm-stroke);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow);
}

#app .topbar-title h1 {
  color: var(--crm-ink);
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  font-weight: 750;
  line-height: 1.18;
}

#app .topbar-title p { color: var(--crm-muted); line-height: 1.5; }
#app .sidebar .nav { background: transparent !important; }
#app .sidebar .crm-nav-group > span { color: #e1ecfb; }
#app #viewRoot { min-inline-size: 0; scroll-margin-block-start: 1rem; }

#app #viewRoot :is(.section-head, .feedback-hero, .repair-hero) {
  gap: var(--crm-gap);
  align-items: center;
  flex-wrap: wrap;
}

#app #viewRoot :is(.section-head, .feedback-hero, .repair-hero) > div { min-inline-size: 0; }

#app #viewRoot :is(.section-head, .feedback-hero, .repair-hero) h2 {
  color: var(--crm-ink);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#app #viewRoot :is(.section-head, .feedback-hero, .repair-hero) p {
  color: var(--crm-muted);
  line-height: 1.55;
}

#app #viewRoot :is(.card, .entity-card, .report-card, .quote-management-card, .booking-order-card),
#app #modalRoot .modal {
  min-inline-size: 0;
  border-color: var(--crm-stroke);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow);
}

#app #viewRoot > :is(.card, .customer-finder, .team-toolbar, .invoice-toolbar),
#app #viewRoot :is(.deal-grid > .card, .calendar-layout > .card, .settings-organized-grid > .card) {
  background: var(--crm-surface) !important;
  color: var(--crm-ink);
}

#app #viewRoot :is(.cards-grid, .report-grid, .deal-grid, .calendar-layout, .settings-organized-grid) { gap: var(--crm-gap); }

#app #viewRoot :is(.entity-actions, .section-actions, .segmented-actions, .booking-orders-tabs, .quick-row),
#app #modalRoot .modal-actions {
  flex-wrap: wrap;
  gap: .5rem;
}

#app #viewRoot :is(.entity-actions, .section-actions, .segmented-actions, .booking-orders-tabs, .quick-row, .calendar-subtools) button,
#app #viewRoot :is(.field, .search-box) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea),
#app #modalRoot :is(.modal-close, .modal-actions button) {
  min-block-size: 2.75rem;
}

#app #viewRoot :is(.field, .search-box) :is(input, select, textarea) { min-inline-size: 0; }
#app #viewRoot :is(.field, .search-box) :is(input[type="search"], textarea) { font-size: 1rem; }

#app #viewRoot :is(.segmented-actions, .booking-orders-tabs, .quick-row) :is(.is-active, [aria-pressed="true"]) {
  background: var(--crm-selection) !important;
  color: var(--crm-ink) !important;
  box-shadow: inset 0 -2px var(--crm-accent);
}

#app #viewRoot :is(.primary, .secondary, .danger, .ghost),
#app #modalRoot :is(.primary, .secondary, .danger, .ghost) {
  border-radius: .75rem;
  line-height: 1.35;
  white-space: normal;
}

#app #viewRoot :is(button, summary):active:not(:disabled),
#app #modalRoot :is(button, summary):active:not(:disabled) { box-shadow: inset 0 0 0 2px currentColor; }

#app #viewRoot :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
#app #modalRoot :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
#app #managerMobileDirectory :is(button, a):focus-visible,
#app .topbar :is(button, select):focus-visible {
  outline: 3px solid var(--crm-accent) !important;
  outline-offset: 2px;
  scroll-margin-block: .75rem;
}

#app #viewRoot .empty {
  background: var(--crm-layer);
  color: var(--crm-muted);
  border-color: var(--crm-stroke);
  border-radius: var(--crm-radius);
}

#app #viewRoot .empty b { color: var(--crm-ink); }
#app #viewRoot .report-card strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Calendar and job planning. Keep all seven dates aligned when space is tight. */
#app [data-active-view="calendar"] :is(.weekdays, .month-grid) { min-inline-size: 0; }
#app [data-active-view="calendar"] .month-grid { border: 0; gap: .2rem; }
#app [data-active-view="calendar"] .day-cell {
  border: 1px solid var(--crm-stroke);
  border-radius: .65rem;
  min-inline-size: 0;
  transform: none;
}
#app [data-active-view="calendar"] .day-cell:focus-visible { outline-offset: -3px; }
#app [data-active-view="calendar"] .calendar-subtools { flex-wrap: wrap; }
#app [data-active-view="tomorrow"] .tomorrow-jobs-page { padding: var(--crm-gap); }
#app [data-active-view="deal"] .form-section + .form-section { border-color: var(--crm-stroke); }
#app [data-active-view="deal"] .form-title { color: var(--crm-ink); font-weight: 750; }
#app [data-active-view="deal"] .summary-card { border-block-start: 3px solid var(--crm-accent); }
#app [data-active-view="deal"] #saveDeal {
  background: var(--crm-accent) !important;
  color: var(--crm-accent-ink) !important;
}
#app [data-active-view="deal"] #saveWhatsapp {
  background: var(--crm-surface) !important;
  color: var(--crm-accent) !important;
  border: 1px solid var(--crm-accent) !important;
}

/* Directory, quotes and team. Keep the controls visually attached to their results. */
#app [data-active-view="customers"] .customer-finder,
#app [data-active-view="quotes"] > .field,
#app [data-active-view="technicians"] .team-toolbar {
  padding: var(--crm-gap);
  border: 1px solid var(--crm-stroke);
  border-radius: var(--crm-radius);
  background: var(--crm-surface);
}
#app [data-active-view="technicians"] .worker-management-details > summary { min-block-size: 2.75rem; }

/* Action queues keep a distinct filter surface above the list. */
#app #viewRoot :is(.reminder-page-search, .booking-orders-search-card, .lead-toolbar, .invoice-toolbar, .report-range-card, .settings-command-center) {
  background: var(--crm-surface) !important;
  border: 1px solid var(--crm-stroke);
  border-radius: var(--crm-radius);
  padding: var(--crm-gap);
}
#app #viewRoot :is(.feedback-hero, .repair-hero, .reminder-alert-explainer) {
  background: var(--crm-layer) !important;
  color: var(--crm-ink);
  border: 1px solid var(--crm-stroke);
  border-radius: var(--crm-radius);
  box-shadow: none;
}
#app [data-active-view="declined"] .loss-card { border-inline-start: 3px solid var(--crm-danger); }
#app [data-active-view="bookingOrders"] .booking-orders-tabs {
  padding: .35rem;
  border-radius: var(--crm-radius);
  background: var(--crm-layer);
}
#app [data-active-view="reports"] .report-safe-table { min-inline-size: 0; overscroll-behavior-inline: contain; }
#app [data-active-view="settings"] .settings-sidebar-panel { border-color: var(--crm-stroke); }

#app #modalRoot .modal {
  max-block-size: min(90svh, 54rem);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#app #modalRoot .modal:focus { outline: none; }
#app #modalRoot .modal-close { flex: none; min-inline-size: 2.75rem; }

#app #managerMobileDirectory {
  position: fixed;
  inset: auto max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
  inline-size: min(calc(100% - 1rem), 38rem);
  max-block-size: min(80svh, 39rem);
  margin: 0 auto;
  padding: 0;
  overscroll-behavior: contain;
  border: 1px solid var(--crm-stroke);
  border-radius: 1.3rem;
  background: var(--crm-surface);
  color: var(--crm-ink);
  font: 1rem/1.45 system-ui, sans-serif;
  box-shadow: 0 20px 55px #1019274d;
}

#app #managerMobileDirectory::backdrop { background: #121b2980; }
#app #managerMobileDirectory .crm-mobile-directory-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--crm-surface);
  border-block-end: 1px solid var(--crm-stroke);
}
#app #managerMobileDirectory h2 { margin: 0; font: 750 1.3rem/1.25 system-ui, sans-serif; }
#app #managerMobileDirectory p { margin: .15rem 0 0; color: var(--crm-muted); }
#app #managerMobileDirectory nav { display: grid; gap: .9rem; padding: .9rem 1rem 1.2rem; }
#app #managerMobileDirectory .crm-nav-group > span { color: var(--crm-muted); }
#app #managerMobileDirectory .nav-button {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-block-size: 2.75rem;
  padding: .45rem .65rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  background: var(--crm-layer);
  color: var(--crm-ink);
  text-align: start;
  white-space: normal;
}
#app #managerMobileDirectory .nav-button .nav-badge { margin-inline-start: auto; }
#app #managerMobileDirectory .nav-button[aria-current="page"] {
  background: var(--crm-selection);
  border-color: var(--crm-accent);
}
#app #managerMobileDirectory .nav-button:disabled { opacity: .65; }

#app #aiInsightDockButton[data-side="left"] {
  right: auto !important;
  left: max(.75rem, env(safe-area-inset-left)) !important;
}

#app #managerAiLauncher { display: contents; }
#app #managerAiLauncher [hidden] { display: none !important; }

#app #managerAiMessages details {
  margin-block-start: .65rem;
  border-block-start: 1px solid var(--chat-line);
}
#app #managerAiMessages summary {
  min-block-size: 2.75rem;
  padding-block: .6rem;
  color: var(--chat-accent);
  cursor: pointer;
  font-weight: 700;
}
#app #managerAiMessages details p { white-space: pre-wrap; }
#app #managerAiMessages .crm-report-review { margin-block-start: .4rem; }

@media (min-width: 761px) {
  #app #aiInsightDock[data-side] {
    right: auto !important;
    left: var(--crm-chat-left, max(.75rem, env(safe-area-inset-left))) !important;
  }
  #app #aiInsightDock[data-side="right"]:not([data-placed]) {
    right: max(.75rem, env(safe-area-inset-right)) !important;
    left: auto !important;
  }
  #app #aiInsightDock:not(.is-expanded) .crm-chat-drag-handle {
    align-self: stretch;
    flex: 1;
    cursor: grab;
    touch-action: none;
    user-select: none;
  }
  #app #aiInsightDock:not(.is-expanded) .crm-chat-drag-handle:active { cursor: grabbing; }
}

@media (max-width: 760px) {
  #app #managerAiLauncher {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 8800;
    display: flex;
    align-items: center;
    gap: .35rem;
  }
  #app #managerAiLauncher[data-side="left"] {
    right: auto;
    left: max(12px, env(safe-area-inset-left));
  }
  #app #managerAiLauncher[data-mobile-placed] {
    right: auto !important;
    left: var(--crm-chat-mobile-left) !important;
  }
  #app:has(#modalRoot .schedule-workbench) #managerAiLauncher { visibility: hidden; }
  #app #managerAiLauncher #aiInsightDockButton {
    position: static !important;
    min-block-size: 44px;
    touch-action: pan-y pinch-zoom !important;
    -webkit-user-select: none;
    user-select: none;
  }
  #app #managerAiLauncher[data-edge-tab] {
    top: 46%;
    bottom: auto;
    right: env(safe-area-inset-right, 0px);
    left: auto;
  }
  #app #managerAiLauncher[data-edge-tab][data-side="left"] {
    right: auto;
    left: env(safe-area-inset-left, 0px);
  }
  #app #managerAiLauncherRestore {
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 56px;
    padding: 0;
    border: 1px solid var(--crm-accent);
    border-radius: .7rem 0 0 .7rem;
    background: var(--crm-surface);
    color: var(--crm-accent);
    font: 700 .9rem/1 system-ui, sans-serif;
  }
  #app #managerAiLauncher[data-side="left"] #managerAiLauncherRestore { border-radius: 0 .7rem .7rem 0; }
  #app #managerAiLauncherRestore:focus-visible { outline: 3px solid var(--crm-accent); outline-offset: -3px; }
  #app #aiInsightDock header > div:first-child { min-inline-size: 0; }
  #app #aiInsightDock .ai-dock-head-actions { flex: none; }
}

@keyframes crm-view-appear { from { opacity: .9; } to { opacity: 1; } }
html.manager-soft-transitioning #app #viewRoot {
  animation: crm-view-appear 110ms ease-out both !important;
  will-change: auto;
}

@media (max-width: 850px), (pointer: coarse), (any-pointer: coarse) {
  #app {
    --crm-mobile-nav-safe-bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
    --crm-mobile-nav-height: calc(70px + var(--crm-mobile-nav-safe-bottom));
  }
  #app > .main-shell {
    padding-bottom: calc(var(--crm-mobile-nav-height) + 16px) !important;
  }
  #app .mobile-nav {
    box-sizing: border-box;
    max-width: none !important;
    height: var(--crm-mobile-nav-height) !important;
    min-height: var(--crm-mobile-nav-height) !important;
    max-height: var(--crm-mobile-nav-height) !important;
    padding: 5px max(6px, env(safe-area-inset-right)) max(5px, var(--crm-mobile-nav-safe-bottom)) max(6px, env(safe-area-inset-left)) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    touch-action: manipulation !important;
    background: var(--crm-surface) !important;
    border-color: var(--crm-stroke);
  }
  @supports (height: 100dvh) {
    #app .mobile-nav {
      /* Keep the dock on the visible viewport without the iOS fixed bottom anchor. */
      top: max(0px, calc(100dvh - var(--crm-mobile-nav-height)));
      bottom: auto !important;
    }
  }
  #app .mobile-nav button {
    min-inline-size: 0 !important;
    max-inline-size: none !important;
    width: 100% !important;
    background: transparent !important;
    color: var(--crm-muted) !important;
  }
  #app .mobile-nav button.is-active {
    background: var(--crm-selection) !important;
    color: var(--crm-ink) !important;
    box-shadow: inset 0 -2px var(--crm-accent) !important;
  }
  #app .mobile-nav button:focus-visible { outline-offset: -3px; }
  #app #viewRoot :is(.section-head, .entity-head) { overflow-wrap: anywhere; }
}

@media (max-width: 520px) {
  #app [data-active-view="calendar"] .calendar-card { padding-inline: .45rem; }
  #app [data-active-view="calendar"] .day-cell { padding-inline: .125rem; }
  #app [data-active-view="calendar"] .day-meta { position: static; line-height: 1.2; }
  #app [data-active-view="calendar"] .day-number { inline-size: 1.5rem; block-size: 1.5rem; }
  #app #viewRoot :is(.entity-actions, .section-actions) button { min-inline-size: 0; }
  #app [data-active-view="deal"] .form-grid { grid-template-columns: minmax(0, 1fr); }
  #app #modalRoot .modal-actions > button { flex: 1 1 min(100%, 9rem); }
}

@media (max-width: 359px) {
  #app [data-active-view="calendar"] .day-event-list { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.manager-soft-transitioning #app #viewRoot { animation: none !important; }
}

@media (prefers-contrast: more) {
  #app { --crm-stroke: var(--crm-muted); }
}

@media (forced-colors: active) {
  #app #viewRoot :focus-visible,
  #app #modalRoot :focus-visible,
  #app #managerMobileDirectory :focus-visible { outline-color: Highlight !important; }
}

#app .deal-business-details {
  border: 1px solid var(--crm-stroke);
  border-radius: 1rem;
  background: var(--crm-layer);
  overflow: clip;
}
#app .deal-business-details summary {
  cursor: pointer;
  padding: .8rem 1rem;
  color: var(--crm-ink);
  min-block-size: 44px;
}
#app .deal-business-details summary small {
  display: block;
  margin-block-start: .15rem;
  color: var(--crm-muted);
}
#app .deal-business-fields {
  padding: .8rem 1rem 1rem;
  border-block-start: 1px solid var(--crm-stroke);
}

#app .lead-details { display: grid; gap: .5rem; margin: .6rem 0; }
#app .lead-details div { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .65rem; }
#app .lead-details dt, #app .lead-campaign-summary li span { color: var(--crm-muted); }
#app .lead-details dd { margin: 0; overflow-wrap: anywhere; }
#app .lead-campaign-summary ul { display: grid; gap: .5rem; list-style: none; padding: 0; margin: .5rem 0 0; }
#app .lead-campaign-summary li { display: flex; justify-content: space-between; align-items: start; gap: .7rem; }
#app .lead-campaign-summary li span { flex: none; }
#app .lead-wait-clock {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 3rem;
  block-size: 3rem;
  border: 2px solid var(--crm-accent);
  border-radius: 50%;
  color: var(--crm-ink);
  font: 650 .69rem/1.15 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#app .lead-safe-card summary { cursor: pointer; padding: .5rem 0; min-block-size: 44px; }
#app .lead-safe-card details ul { padding-inline-start: 1.3rem; margin-block: .2rem .6rem; overflow-wrap: anywhere; }
#app .crm-recovery { max-inline-size: 30rem; margin: 1.25rem auto; padding: 1.25rem; border-radius: 1.2rem; }
#app .crm-recovery-mark {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: .8rem;
  background: var(--crm-selection);
  color: var(--crm-accent);
  font-size: 1.45rem;
}

#app .lead-alert-controls { display: grid; gap: .65rem; min-inline-size: 0; }
#app .lead-alert-controls .entity-head p { margin: .2rem 0 0; }
#app .lead-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  min-block-size: 44px;
  padding: .55rem .7rem;
  border: 1px solid var(--crm-border, currentColor);
  border-radius: .8rem;
}
#app .lead-alert-row small { display: block; line-height: 1.45; margin-block-start: .15rem; }
#app .lead-alert-row input[role="switch"] {
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  inline-size: 2.85rem;
  block-size: 1.65rem;
  margin: 0;
  border: 1px solid #68758a;
  border-radius: 1rem;
  background: #68758a;
  cursor: pointer;
  direction: ltr;
}
#app .lead-alert-row input[role="switch"]::before {
  content: "";
  position: absolute;
  inset-block-start: .14rem;
  inset-inline-start: .14rem;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background: #fff;
}
#app .lead-alert-row input[role="switch"]:checked { background: #166441; border-color: #166441; }
#app .lead-alert-row input[role="switch"]:checked::before { inset-inline-start: 1.34rem; }
#app .lead-alert-row input[role="switch"]:focus-visible { outline: 2px solid var(--crm-accent, #1463ac); outline-offset: 3px; }
#app .lead-alert-row input[role="switch"]:disabled { opacity: .6; cursor: wait; }
#app .lead-alert-device, #app .lead-alert-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
#app .lead-alert-device { justify-content: space-between; }
#app .lead-alert-device button, #app .lead-alert-actions button { min-block-size: 44px; }
#app .lead-alert-status { white-space: nowrap; font-size: .85em; font-weight: 650; }

#app .lead-filter-toolbar { display: grid; gap: .65rem; min-inline-size: 0; }
#app .lead-filter-toolbar .api-field { min-inline-size: 0; }
#app .lead-filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
#app .lead-filter-toolbar input, #app .lead-filter-toolbar select { min-block-size: 44px; inline-size: 100%; }
#app .lead-filter-toolbar summary { min-block-size: 44px; padding: .55rem 0; cursor: pointer; }
#app .lead-filter-toolbar > button { min-block-size: 44px; justify-self: start; }
#app #leadApplyDates { min-block-size: 44px; margin-block-start: .5rem; }

#modalRoot .lead-wa-modal { inline-size: min(100%, 36rem); }
#modalRoot .lead-wa-content { display: grid; gap: .85rem; min-inline-size: 0; }
#modalRoot .lead-wa-recipient { font-weight: 700; margin: 0; overflow-wrap: anywhere; }
#modalRoot .lead-wa-note { color: var(--muted, inherit); margin: 0; }
#modalRoot .lead-wa-options,
#modalRoot .lead-wa-editor { display: grid; gap: .55rem; min-inline-size: 0; border: 0; padding: 0; margin: 0; }
#modalRoot .lead-wa-options legend { font-weight: 700; margin-block-end: .35rem; }
#modalRoot .lead-wa-option,
#modalRoot .lead-wa-edit-row { border: 1px solid var(--line, #8a9bb3); border-radius: 1rem; padding: .75rem; }
#modalRoot .lead-wa-option { display: flex; align-items: start; gap: .65rem; cursor: pointer; min-block-size: 44px; }
#modalRoot .lead-wa-option:has(input:checked) { outline: 2px solid var(--crm-accent, #1463ac); outline-offset: -2px; }
#modalRoot .lead-wa-option:focus-within { outline: 2px solid var(--crm-accent, #1463ac); outline-offset: 2px; }
#modalRoot .lead-wa-option input { inline-size: 1.2rem; block-size: 1.2rem; flex: none; margin: .15rem 0 0; accent-color: var(--crm-accent, #1463ac); }
#modalRoot .lead-wa-option small { display: block; margin-block-start: .2rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
#modalRoot .lead-wa-option strong { overflow-wrap: anywhere; }
#modalRoot .lead-wa-rows,
#modalRoot .lead-wa-edit-row { display: grid; gap: .6rem; min-inline-size: 0; }
#modalRoot .lead-wa-edit-row button,
#modalRoot .lead-wa-editor > button { justify-self: start; }
#modalRoot .lead-wa-modal button,
#modalRoot .lead-wa-edit-row input { min-block-size: 44px; }
#modalRoot .lead-wa-edit-row textarea { resize: vertical; }
#modalRoot .lead-wa-feedback { margin: 0; min-block-size: 1.5em; }

/* On schedule return, measure real card heights before restoring the worker's position. */
#app .worker-grid > .worker-card { contain-intrinsic-size: auto 360px; }
#app .team-schedule-return .worker-grid > .worker-card { content-visibility: visible; }

#app .lead-work-queue {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  padding: .4rem;
  margin-block: 0 .8rem;
  border: 1px solid var(--line, #8596ae);
  border-radius: 1rem;
  background: var(--soft, #eff4f8);
}
#app .reminder-work-queue { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#app .lead-work-queue button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  min-inline-size: 0;
  min-block-size: 44px;
  border: 1px solid var(--line, #a3b4c8);
  border-radius: .75rem;
  box-shadow: none;
  padding: .5rem .6rem;
  text-align: start;
  line-height: 1.25;
}
#app .lead-work-queue button[aria-pressed="true"] { color: #fff; background: #18569a; border-color: #18569a; }
#app .lead-work-queue button b { font-variant-numeric: tabular-nums; font-size: .82em; }
#app .lead-work-queue button:active { opacity: .8; }
#app :is(.lead-work-queue,.lead-card-disclosure,.reminder-card-disclosure,.lead-campaign-summary) :focus-visible { outline: 2px solid #2870b6; outline-offset: 3px; }
#app :is(.lead-card-disclosure,.reminder-card-disclosure,.reminder-delivery-settings,.lead-campaign-summary) > summary,
#app .lead-campaign-summary details > summary { min-block-size: 44px; padding-block: .65rem; cursor: pointer; font-weight: 700; }
#app :is(.lead-card-disclosure,.reminder-card-disclosure) { border-block-start: 1px solid var(--line,#a7b5c6); min-inline-size: 0; }
#app .lead-card-disclosure { padding-block-start: .4rem; }
#app .lead-card-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding-inline: .8rem;
  border-radius: .75rem;
  background: color-mix(in srgb, currentColor 6%, transparent);
  list-style: none;
}
#app .lead-card-disclosure > summary::-webkit-details-marker { display: none; }
#app .lead-card-disclosure > summary::after {
  content: '';
  flex: none;
  inline-size: .48rem;
  block-size: .48rem;
  margin-inline-end: .2rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
#app .lead-card-disclosure[open] > summary::after { transform: rotate(225deg); }
#app .lead-card-disclosure > summary:active {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  #app .lead-card-disclosure > summary::after { transition: none; }
}
#app .lead-compact-card { gap: .55rem; overflow-wrap: anywhere; }
#app .lead-compact-card .lead-primary-action > button { min-block-size: 44px; inline-size: 100%; }
#app :is(.lead-callback-label,.lead-meta-delivery) { display: block; line-height: 1.45; font-weight: 650; }
#app .lead-card-disclosure .entity-actions { margin-block: .55rem; }
#app .lead-campaign-summary li { display: block; }
#app .lead-campaign-summary li > button {
  display: grid;
  gap: .3rem;
  inline-size: 100%;
  min-block-size: 44px;
  padding: .65rem;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
}
#app .lead-campaign-summary li > button[aria-pressed="true"] { outline: 2px solid #2870b6; outline-offset: -2px; }
#app .reminder-quick-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
#app :is(.reminder-quick-actions,.reminder-card-disclosure) button { min-block-size: 44px; }
html[data-theme="dark"] #app .lead-work-queue { background: #192a3b; }
html[data-theme="dark"] #app .lead-work-queue button[aria-pressed="true"] { background: #82b9ee; border-color: #9ecaf1; color: #071c32; }
@media (max-width: 560px) {
  #app .lead-work-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .reminder-work-queue { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #app .reminder-work-queue button { grid-column: span 2; padding-inline: .35rem; }
  #app .reminder-work-queue button:nth-last-child(-n+2) { grid-column: span 3; }
  #app .lead-compact-card .entity-head > div { min-inline-size: 0; }
  #app .lead-compact-card .lead-wait-clock { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  #app :is(.lead-work-queue,.lead-compact-card,.reminder-quick-actions) button { transition: none; }
}

#modalRoot #reminderCompleteForm { display: grid; gap: .45rem; }
#modalRoot #reminderCompleteForm button { min-block-size: 44px; }
#modalRoot .reminder-complete-feedback { margin: 0; min-block-size: 1.2em; }

#app .lead-tool-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .5rem; }
#app .lead-tool-actions button { min-block-size: 44px; }

#app .lead-page-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6.5rem, auto); gap: .5rem; }
#app .lead-page-actions button { min-block-size: 44px; min-inline-size: 0; }
#app #leadRefresh { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
#app #leadRefresh[aria-busy="true"] { cursor: progress; }
#app #leadRefresh[aria-busy="true"]::before {
  content: "";
  inline-size: .85rem;
  block-size: .85rem;
  flex: none;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: lead-refresh-spin .8s linear infinite;
}
#app .lead-refresh-status:not(:empty) { display: block; font-size: .85em; margin-block-start: .25rem; }
@keyframes lead-refresh-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  #app #leadRefresh[aria-busy="true"]::before { animation: none; }
}