:root {
  --brand-950: #031d3f;
  --brand-900: #062f64;
  --brand-800: #0a407c;
  --brand-700: #145a95;
  --brand-100: #dce9f6;
  --brand-50: #f1f6fb;
  --solar-600: #d89500;
  --solar-500: #ffb000;
  --solar-300: #ffd36a;
  --solar-100: #fff4d1;
  --ink-950: #13201e;
  --ink-800: #263734;
  --ink-700: #3d4f4c;
  --ink-600: #596b68;
  --ink-500: #71817e;
  --surface: #ffffff;
  --surface-soft: #f7f9f8;
  --surface-muted: #eef3f1;
  --line: #dce5e2;
  --line-strong: #c6d3cf;
  --danger-700: #a42b2b;
  --danger-100: #fde2e2;
  --warning-700: #8a5500;
  --warning-100: #fff0cc;
  --success-700: #176b46;
  --success-100: #dcf5e8;
  --info-700: #245ba4;
  --info-100: #e1edfc;
  --shadow-xs: 0 1px 2px rgba(3, 29, 63, 0.05);
  --shadow-sm: 0 6px 18px rgba(3, 29, 63, 0.08);
  --shadow-md: 0 18px 44px rgba(3, 29, 63, 0.16);
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --header-height: 68px;
  --sidebar-width: 248px;
  --content-max: 1500px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink-950);
  background: var(--surface-soft);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink-950);
  background: var(--surface-soft);
  font-size: 15px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body.nav-open,
body.dialog-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

a {
  color: var(--brand-700);
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--brand-900);
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid rgba(242, 165, 43, 0.78);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.eyebrow,
.breadcrumb,
.dialog-eyebrow,
.nav-label {
  margin-bottom: 0.35rem;
  color: var(--brand-700);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Login */
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(460px, 1.1fr);
  background: var(--surface);
}

.login-visual {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 68% 32%, rgba(255, 211, 119, 0.26), transparent 16%),
    linear-gradient(145deg, var(--brand-950), var(--brand-800) 62%, #155a92);
}

.solar-sun {
  position: absolute;
  top: 18%;
  left: 50%;
  width: clamp(130px, 18vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffd787, var(--solar-500));
  box-shadow: 0 0 80px rgba(242, 165, 43, 0.3);
}

.solar-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
}

.solar-orbit-large {
  top: 7%;
  left: 18%;
  width: 72%;
  aspect-ratio: 1;
}

.solar-orbit-small {
  top: 14%;
  left: 35%;
  width: 43%;
  aspect-ratio: 1;
}

.solar-horizon {
  position: absolute;
  right: -12%;
  bottom: -16%;
  left: -10%;
  height: 47%;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(168deg, transparent 0 31%, rgba(255, 255, 255, 0.06) 31.2% 32%, transparent 32.2%),
    linear-gradient(12deg, transparent 0 48%, rgba(255, 255, 255, 0.06) 48.2% 49%, transparent 49.2%),
    linear-gradient(180deg, #0c3c70, #062750);
  transform: rotate(-4deg);
}

.login-visual-copy {
  position: absolute;
  right: 10%;
  bottom: 9%;
  left: 10%;
  z-index: 1;
  max-width: 520px;
}

.login-visual-copy .eyebrow {
  color: var(--solar-300);
}

.login-statement {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3.3vw, 3.5rem);
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.login-panel {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 3rem clamp(1.25rem, 6vw, 6rem);
}

.login-card {
  width: min(100%, 430px);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink-950);
  text-decoration: none;
}

.brand-logo {
  width: 196px;
  height: 58px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.brand-login {
  margin-bottom: clamp(3.5rem, 9vh, 7rem);
}

.brand-login .brand-logo {
  width: min(100%, 340px);
  height: 100px;
}

.login-heading {
  margin-bottom: 2rem;
}

.login-heading h1 {
  max-width: 390px;
  margin-bottom: 0.8rem;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  letter-spacing: -0.045em;
}

.login-heading > p:last-child {
  margin-bottom: 0;
  color: var(--ink-600);
}

.field-group {
  display: grid;
  gap: 0.38rem;
  margin-bottom: 1rem;
}

.field-group label,
.field-label {
  color: var(--ink-800);
  font-size: 0.86rem;
  font-weight: 700;
}

.field-hint {
  margin: 0.3rem 0 0;
  color: var(--ink-500);
  font-size: 0.78rem;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.68rem 0.78rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-950);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  min-height: 112px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #9eb0ab;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-700);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(36, 107, 96, 0.13);
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
  color: var(--ink-600);
  background: var(--surface-muted);
  cursor: not-allowed;
}

input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  accent-color: var(--brand-700);
}

input[type="file"] {
  height: auto;
  min-height: 46px;
  padding: 0.5rem;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 4.5rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
}

.text-button {
  min-height: 34px;
  padding: 0.35rem 0.5rem;
  border-radius: 5px;
  color: var(--brand-700);
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 750;
}

.text-button:hover {
  background: var(--brand-50);
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 760;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:active:not(:disabled) {
  transform: translateY(0);
}

.button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.button-primary {
  color: #fff;
  background: var(--brand-900);
  border-color: var(--brand-900);
}

.button-primary:hover:not(:disabled) {
  background: var(--brand-800);
  border-color: var(--brand-800);
}

.button-solar {
  color: #352000;
  background: var(--solar-500);
  border-color: var(--solar-500);
}

.button-secondary {
  color: var(--ink-800);
  background: var(--surface);
  border-color: var(--line-strong);
}

.button-secondary:hover:not(:disabled) {
  background: var(--surface-soft);
  border-color: #a9bab5;
}

.button-danger {
  color: var(--danger-700);
  background: var(--surface);
  border-color: #e6aaaa;
}

.button-warning {
  color: #4b3100;
  background: var(--warning-100);
  border-color: #e1bd75;
}

.button-quiet {
  color: var(--brand-700);
  background: transparent;
}

.button-block {
  width: 100%;
  margin-top: 0.45rem;
}

.button-small {
  min-height: 36px;
  padding: 0.45rem 0.7rem;
  font-size: 0.8rem;
}

.form-status {
  min-height: 1.4rem;
  margin: 0.75rem 0 0;
  color: var(--ink-600);
  font-size: 0.85rem;
}

.form-status.is-error {
  color: var(--danger-700);
}

.form-status.is-success {
  color: var(--success-700);
}

.login-help {
  margin: 1.5rem 0 0;
  color: var(--ink-500);
  font-size: 0.8rem;
  text-align: center;
}

/* App shell */
.app-shell {
  min-height: 100vh;
}

.app-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

.header-leading,
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.icon-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 10px;
  color: var(--ink-700);
  background: transparent;
  cursor: pointer;
}

.icon-button:hover {
  color: var(--brand-800);
  background: var(--brand-50);
}

.icon-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.mobile-menu-button {
  display: inline-grid;
}

.menu-lines {
  width: 21px;
  display: grid;
  gap: 4px;
}

.menu-lines i {
  width: 100%;
  height: 2px;
  display: block;
  border-radius: 99px;
  background: currentColor;
}

.notification-count,
.nav-count {
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 99px;
  color: #fff;
  background: var(--danger-700);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

.notification-count {
  position: absolute;
  top: 2px;
  right: 1px;
}

.connection-status {
  padding: 0.25rem 0.55rem;
  border-radius: 99px;
  color: var(--danger-700);
  background: var(--danger-100);
  font-size: 0.72rem;
  font-weight: 800;
}

.account-menu {
  position: relative;
}

.account-menu summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.5rem;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu summary:hover,
.account-menu[open] summary {
  background: var(--surface-muted);
}

.avatar {
  width: 36px;
  height: 36px;
  display: inline-grid;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-700);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.avatar-large {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.account-summary-copy,
.account-menu-identity > span:last-child {
  min-width: 0;
  display: grid;
}

.account-summary-copy strong,
.account-menu-identity strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary-copy small,
.account-menu-identity small {
  color: var(--ink-500);
  font-size: 0.72rem;
}

.summary-chevron {
  color: var(--ink-500);
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(290px, calc(100vw - 1.25rem));
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.account-menu-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.4rem;
}

.menu-action {
  width: 100%;
  min-height: 40px;
  padding: 0.55rem 0.65rem;
  border-radius: 7px;
  color: var(--ink-800);
  background: transparent;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 650;
  text-align: left;
}

.menu-action:hover {
  background: var(--surface-muted);
}

.menu-action-danger {
  color: var(--danger-700);
}

.app-body {
  min-height: 100vh;
  padding-top: var(--header-height);
}

.sidebar {
  position: fixed;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  z-index: 40;
  width: min(86vw, 300px);
  display: flex;
  flex-direction: column;
  padding: 1rem 0.8rem;
  border-right: 1px solid var(--line);
  background: var(--surface);
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(-105%);
  transition: transform 0.2s ease, visibility 0.2s ease;
  box-shadow: var(--shadow-md);
}

.sidebar.is-open {
  visibility: visible;
  transform: translateX(0);
}

.nav-scrim {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 35;
  background: rgba(3, 20, 43, 0.42);
}

.nav-list {
  flex: 1;
}

.nav-label {
  margin: 1.05rem 0.65rem 0.38rem;
  color: var(--ink-500);
  font-size: 0.66rem;
}

.nav-label:first-child {
  margin-top: 0.2rem;
}

.nav-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.12rem 0;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  color: var(--ink-600);
  background: transparent;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 680;
  text-align: left;
}

.nav-item:hover {
  color: var(--brand-800);
  background: var(--brand-50);
}

.nav-item.is-active {
  color: var(--brand-900);
  background: var(--brand-100);
  font-weight: 800;
}

.nav-icon {
  width: 23px;
  height: 23px;
  display: grid;
  flex: 0 0 23px;
  place-items: center;
  color: currentColor;
  font-size: 1.05rem;
}

.nav-item .nav-count,
.future-pill {
  margin-left: auto;
}

.future-pill {
  padding: 0.16rem 0.42rem;
  border-radius: 99px;
  color: var(--warning-700);
  background: var(--solar-100);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-footer {
  padding: 0.9rem 0.7rem 0.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-500);
}

.sidebar-footer p {
  margin-bottom: 0.1rem;
  font-size: 0.75rem;
  font-weight: 750;
}

.sidebar-footer small {
  font-size: 0.68rem;
}

.main-content {
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  margin-left: 0;
  padding: clamp(1.15rem, 2.5vw, 2.25rem);
}

.page-heading,
.view-root,
.global-status {
  width: min(100%, var(--content-max));
  margin-right: auto;
  margin-left: auto;
}

.page-heading {
  min-height: 76px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.35rem;
}

.page-heading h1 {
  margin-bottom: 0.28rem;
  font-size: clamp(1.65rem, 2.7vw, 2.35rem);
  letter-spacing: -0.04em;
}

.page-description {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: 0.9rem;
}

.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.dialer-page-action-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.global-status {
  min-height: 0;
}

.global-status:not(:empty) {
  margin-top: -0.55rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  background: var(--surface);
}

.global-status.is-error {
  border-color: #efb9b9;
  color: var(--danger-700);
  background: #fff8f8;
}

.view-root {
  min-height: 300px;
}

/* Shared content */
.card,
.section-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.card {
  padding: 1rem;
}

.section-card {
  padding: 1.1rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.section-header h2,
.section-header h3,
.section-card > h2,
.section-card > h3,
.card > h2,
.card > h3 {
  margin-bottom: 0.2rem;
  color: var(--ink-950);
  font-size: 1rem;
}

.section-header p,
.section-card > p,
.card > p {
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: 0.82rem;
}

.section-actions,
.inline-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.muted {
  color: var(--ink-500) !important;
}

.small {
  font-size: 0.78rem !important;
}

.nowrap {
  white-space: nowrap;
}

.divider {
  height: 1px;
  margin: 1rem 0;
  background: var(--line);
}

.loading-state,
.empty-state,
.error-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}

.state-content {
  max-width: 480px;
}

.state-content h2 {
  margin-bottom: 0.45rem;
  font-size: 1.05rem;
}

.state-content p {
  margin-bottom: 1rem;
  color: var(--ink-600);
  font-size: 0.86rem;
}

.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 0.8rem;
  border: 3px solid var(--brand-100);
  border-top-color: var(--brand-700);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.status-badge,
.stage-badge,
.role-badge,
.count-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  padding: 0.22rem 0.5rem;
  border-radius: 99px;
  color: var(--ink-700);
  background: var(--surface-muted);
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.25;
  white-space: nowrap;
}

.status-badge::before,
.stage-badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-success { color: var(--success-700); background: var(--success-100); }
.status-warning { color: var(--warning-700); background: var(--warning-100); }
.status-danger { color: var(--danger-700); background: var(--danger-100); }
.status-info { color: var(--info-700); background: var(--info-100); }

.stage-new-lead { color: #315f87; background: #e6f1fb; }
.stage-appointment-scheduled { color: #5b4aa1; background: #ede9fe; }
.stage-appointment-completed { color: #147260; background: #dff5ef; }
.stage-needs-reschedule { color: #a05b00; background: #fff0d2; }
.stage-follow-up { color: #8b477f; background: #f9e8f6; }
.stage-contracts-sent { color: #2c639e; background: #e3effc; }
.stage-closed-won { color: #176b46; background: #dcf5e8; }
.stage-closed-lost { color: #8b3a3a; background: #f8e4e4; }

/* Static stage accents keep runtime UI compatible with the production CSP. */
.stage-new-lead { --stage-accent: #4c82ad; }
.stage-appointment-scheduled { --stage-accent: #7663bd; }
.stage-appointment-completed { --stage-accent: #278875; }
.stage-needs-reschedule { --stage-accent: #d78318; }
.stage-follow-up { --stage-accent: #a75b98; }
.stage-contracts-sent { --stage-accent: #3f79b6; }
.stage-closed-won { --stage-accent: #28845b; }
.stage-closed-lost { --stage-accent: #a65454; }

/* Dashboard */
.dashboard-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid #d4e5df;
  border-radius: var(--radius-md);
  background: linear-gradient(110deg, var(--brand-50), #fff9eb);
}

.dashboard-intro h2 {
  margin-bottom: 0.25rem;
  font-size: 1.12rem;
}

.dashboard-intro p {
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: 0.83rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.metric-card {
  position: relative;
  min-height: 120px;
  display: grid;
  align-content: space-between;
  gap: 0.7rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-950);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.metric-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--stage-accent, var(--brand-700));
  content: "";
}

.metric-card:hover {
  border-color: var(--stage-accent, var(--brand-700));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.dashboard-card-stack {
  display: grid;
  gap: 1rem;
}

.metric-label {
  color: var(--ink-600);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.metric-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.metric-foot {
  color: var(--ink-500);
  font-size: 0.7rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
  gap: 1rem;
}

.dashboard-grid-single {
  grid-template-columns: 1fr;
}

.dashboard-summary-card {
  display: grid;
  gap: 0.75rem;
}

.dashboard-summary-value {
  color: var(--brand-900);
  font-size: 2.3rem;
  letter-spacing: -0.045em;
}

.dashboard-rate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.dashboard-rate-grid .analytics-metric {
  box-shadow: none;
}

.dashboard-insight-list {
  display: grid;
}

.dashboard-insight-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.66rem 0;
  border-bottom: 1px solid var(--line);
}

.dashboard-insight-item:last-child {
  border-bottom: 0;
}

.dashboard-insight-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-800);
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-insight-item > span:last-child {
  color: var(--ink-500);
  font-size: 0.7rem;
  text-align: right;
}

.dashboard-list,
.compact-list {
  display: grid;
  gap: 0;
}

.dashboard-list-item,
.compact-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--line);
}

.dashboard-list-item:last-child,
.compact-list-item:last-child {
  border-bottom: 0;
}

.dashboard-list-item button,
.compact-list-item button {
  min-width: 0;
  padding: 0;
  color: var(--ink-950);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  text-align: left;
}

.list-primary {
  min-width: 0;
}

.list-primary strong,
.list-primary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-primary span {
  margin-top: 0.14rem;
  color: var(--ink-500);
  font-size: 0.74rem;
}

/* Filters and tables */
.filter-card {
  margin-bottom: 0.85rem;
  padding: 0.85rem;
}

.filter-bar {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(160px, 0.65fr)) auto;
  gap: 0.65rem;
  align-items: end;
}

.filter-bar-users {
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 0.4fr);
}

.owner-commission-filter {
  grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 0.55fr) auto auto;
}

.owner-commission-table {
  min-width: 1080px;
}

.commission-money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.filter-control {
  display: grid;
  gap: 0.3rem;
}

.filter-control label {
  color: var(--ink-600);
  font-size: 0.72rem;
  font-weight: 780;
}

.search-field {
  position: relative;
}

.search-field input {
  padding-left: 2.25rem;
}

.search-field::before {
  position: absolute;
  top: 50%;
  left: 0.78rem;
  z-index: 1;
  color: var(--ink-500);
  content: "⌕";
  font-size: 1rem;
  transform: translateY(-50%);
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 0.78rem;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table-wrap-always {
  display: block !important;
}

.data-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 0.72rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  color: var(--ink-500);
  background: var(--surface-soft);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover td {
  background: #fbfdfc;
}

.row-link {
  padding: 0;
  color: var(--brand-800);
  background: transparent;
  cursor: pointer;
  font-weight: 780;
  text-align: left;
}

.row-link:hover {
  text-decoration: underline;
}

.cell-primary {
  display: block;
  color: var(--ink-950);
  font-weight: 720;
}

.cell-secondary {
  display: block;
  margin-top: 0.16rem;
  color: var(--ink-500);
  font-size: 0.7rem;
}

.mobile-card-list {
  display: none;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
}

.pagination p {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.75rem;
}

/* Pipeline */
.pipeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.pipeline-help {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.77rem;
}

.pipeline-mobile-stage {
  display: none;
}

.pipeline-board-wrap {
  margin: 0 calc(clamp(1.15rem, 2.5vw, 2.25rem) * -1);
  padding: 0 clamp(1.15rem, 2.5vw, 2.25rem) 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.pipeline-board {
  min-width: 2180px;
  display: grid;
  grid-template-columns: repeat(8, minmax(250px, 1fr));
  gap: 0.7rem;
}

.pipeline-column {
  min-height: 560px;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  transition: border 0.15s ease, background 0.15s ease;
}

.pipeline-column.is-drag-over {
  border-color: var(--brand-700);
  background: var(--brand-50);
}

.pipeline-column-header {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin: -0.05rem 0 0.55rem;
  padding: 0.35rem 0.25rem 0.55rem;
  border-bottom: 2px solid var(--stage-accent, var(--brand-700));
}

.pipeline-column-header h2 {
  margin: 0;
  font-size: 0.78rem;
}

.pipeline-column-header span {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  color: var(--ink-600);
  background: var(--surface);
  font-size: 0.7rem;
  font-weight: 800;
}

.pipeline-card-list {
  display: grid;
  gap: 0.55rem;
}

.pipeline-card {
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.pipeline-card[draggable="true"] {
  cursor: grab;
}

.pipeline-card.is-dragging {
  opacity: 0.48;
  cursor: grabbing;
}

.pipeline-card-title {
  width: 100%;
  padding: 0;
  color: var(--ink-950);
  background: transparent;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 780;
  text-align: left;
}

.pipeline-card-title:hover {
  color: var(--brand-700);
}

.pipeline-card-meta {
  display: grid;
  gap: 0.16rem;
  margin: 0.42rem 0 0.55rem;
  color: var(--ink-500);
  font-size: 0.69rem;
}

.pipeline-stage-select {
  min-height: 36px;
  padding: 0.4rem 0.48rem;
  font-size: 0.7rem;
}

.pipeline-load-more,
.activity-load-more {
  width: 100%;
  margin-top: 0.15rem;
}

.column-empty {
  padding: 1.1rem 0.5rem;
  color: var(--ink-500);
  font-size: 0.72rem;
  text-align: center;
}

/* Lead workspace */
.lead-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(115deg, #fff, var(--brand-50));
}

.lead-identity {
  min-width: 0;
}

.lead-identity h2 {
  margin: 0.35rem 0 0.3rem;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: -0.03em;
}

.lead-identity p {
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: 0.82rem;
}

.lead-quick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.lead-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.72fr);
  gap: 0.9rem;
  align-items: start;
}

.lead-main-column,
.lead-side-column {
  display: grid;
  gap: 0.9rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-span-full {
  grid-column: 1 / -1;
}

.close-won-form {
  display: grid;
  gap: 0.9rem;
}

.close-won-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.close-won-summary > div {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
  padding: 0.68rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.close-won-summary span,
.close-won-person-label {
  color: var(--ink-500);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.close-won-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-800);
  font-size: 0.78rem;
}

.close-won-section {
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.close-won-section-heading {
  margin-bottom: 0.8rem;
}

.close-won-section-heading h3 {
  margin: 0 0 0.18rem;
  color: var(--ink-950);
  font-size: 0.95rem;
}

.close-won-section-heading p {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.76rem;
}

.close-won-section .field-group {
  margin-bottom: 0;
}

.close-won-install {
  display: grid;
  gap: 0.75rem;
}

.close-won-install-fields {
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.close-won-install-fields[hidden] {
  display: none;
}

.close-won-toggle {
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.close-won-credit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.close-won-credit .close-won-toggle {
  grid-column: 1 / -1;
}

.close-won-person {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.close-won-person strong,
.close-won-person > span:last-child {
  overflow-wrap: anywhere;
}

.close-won-person strong {
  color: var(--ink-800);
  font-size: 0.8rem;
}

.close-won-person > span:last-child:not(.close-won-person-label) {
  color: var(--ink-500);
  font-size: 0.7rem;
}

.close-won-completion {
  margin: 0;
  padding: 0.58rem 0.7rem;
  border-radius: 8px;
  color: var(--warning-700);
  background: var(--warning-100);
  font-size: 0.76rem;
  font-weight: 780;
}

.close-won-completion.is-complete {
  color: var(--success-700);
  background: var(--success-100);
}

.close-won-alert {
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-700);
  background: var(--surface-soft);
  font-size: 0.76rem;
}

.close-won-alert strong {
  display: block;
  color: var(--ink-800);
}

.close-won-alert p,
.close-won-alert ul {
  margin: 0.24rem 0 0;
}

.close-won-alert ul {
  padding-left: 1.1rem;
}

.close-won-alert.is-warning {
  border-color: #efd5a4;
  color: var(--warning-700);
  background: var(--warning-100);
}

.close-won-alert.is-danger {
  border-color: #efb9b9;
  color: var(--danger-700);
  background: var(--danger-100);
}

.close-won-alert.is-info {
  border-color: var(--line-strong);
  color: var(--brand-800);
  background: var(--brand-50);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.read-only-note {
  margin: 0 0 0.8rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  background: var(--surface-muted);
  font-size: 0.78rem;
}

.detail-list {
  display: grid;
  gap: 0;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-label {
  color: var(--ink-500);
  font-size: 0.72rem;
}

.detail-value {
  min-width: 0;
  color: var(--ink-950);
  font-size: 0.78rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.appointment-message-history {
  display: grid;
  gap: 0.7rem;
}

.appointment-message-history-item {
  min-width: 0;
  display: grid;
  gap: 0.52rem;
  padding: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.appointment-message-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.appointment-message-history-heading strong {
  color: var(--ink-800);
  font-size: 0.82rem;
}

.appointment-message-history-body {
  margin: 0;
  padding: 0.68rem 0.74rem;
  border-left: 3px solid var(--brand-700);
  border-radius: 0 8px 8px 0;
  color: var(--ink-800);
  background: var(--surface);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.appointment-message-history-meta,
.appointment-message-history-error {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.69rem;
  line-height: 1.45;
}

.appointment-message-history-error {
  color: var(--danger-700);
}

.lead-assignment-list {
  display: grid;
  gap: 0.6rem;
}

.lead-assignment-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.lead-assignment-copy {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.lead-assignment-copy strong {
  overflow: hidden;
  color: var(--ink-800);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-assignment-row .button {
  flex: 0 0 auto;
}

.lead-assignment-hint {
  margin: 0.65rem 0 0;
}

.lead-transfer-dialog {
  display: grid;
  gap: 0.85rem;
}

.lead-transfer-dialog > .read-only-note,
.lead-transfer-dialog .field-group {
  margin: 0;
}

.lead-transfer-summary {
  padding: 0.1rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.address-links {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.address-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--brand-700);
  background: var(--surface);
  font-size: 0.73rem;
  font-weight: 750;
  text-decoration: none;
}

.address-link:hover {
  background: var(--brand-50);
}

.note-composer {
  margin-bottom: 0.6rem;
}

.note-composer textarea {
  min-height: 86px;
}

.note-list,
.timeline {
  display: grid;
  gap: 0;
}

.note-item,
.timeline-item {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.3rem;
  border-left: 2px solid var(--line);
  margin-left: 0.3rem;
}

.note-item::before,
.timeline-item::before {
  position: absolute;
  top: 1rem;
  left: -5px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--brand-700);
  box-shadow: 0 0 0 1px var(--brand-700);
  content: "";
}

.note-item:last-child,
.timeline-item:last-child {
  padding-bottom: 0;
}

.note-meta,
.timeline-meta {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  color: var(--ink-500);
  font-size: 0.68rem;
  flex-wrap: wrap;
}

.note-meta strong,
.timeline-meta strong {
  color: var(--ink-800);
}

.note-body,
.timeline-body {
  margin: 0;
  color: var(--ink-800);
  font-size: 0.78rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.document-list {
  display: grid;
  gap: 0.45rem;
}

.document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.document-copy {
  min-width: 0;
}

.document-copy strong,
.document-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-copy strong {
  font-size: 0.76rem;
}

.document-copy span {
  margin-top: 0.12rem;
  color: var(--ink-500);
  font-size: 0.66rem;
}

.document-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.history-panel {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.history-panel h3 {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
}

.compact-timeline .timeline-item {
  background: transparent;
}

.activity-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 0.65rem;
}

.activity-filter .filter-control {
  min-width: 0;
}

/* Analytics */
.analytics-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.analytics-toolbar > div:first-child {
  display: grid;
  gap: 0.18rem;
}

.analytics-toolbar > div:first-child span,
.analytics-generated {
  color: var(--ink-500);
  font-size: 0.75rem;
}

.analytics-period {
  width: min(100%, 190px);
}

.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.analytics-metric {
  min-width: 0;
  display: grid;
  gap: 0.38rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-700);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.analytics-metric-success {
  border-top-color: var(--success-700);
}

.analytics-metric-danger {
  border-top-color: var(--danger-700);
}

.analytics-metric-label {
  color: var(--ink-600);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.analytics-metric-value {
  color: var(--ink-950);
  font-size: 1.65rem;
  letter-spacing: -0.035em;
}

.analytics-metric-description {
  color: var(--ink-500);
  font-size: 0.68rem;
}

.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.analytics-table-card {
  min-width: 0;
  margin-bottom: 1rem;
}

.analytics-grid .analytics-table-card {
  margin-bottom: 0;
}

.analytics-table th,
.analytics-table td {
  white-space: nowrap;
}

.analytics-generated {
  margin: -0.25rem 0 0;
  text-align: right;
}

/* Manager portal */
.manager-overview-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.manager-overview-filters .field-group,
.manager-overview-filters .form-status {
  margin: 0;
}

.manager-date-presets {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.manager-overview-filter-actions,
.manager-audio-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.manager-overview-filters > .form-status {
  grid-column: 1 / -1;
}

.manager-live-page {
  display: grid;
  gap: 0.85rem;
}

.manager-monitoring-notice {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
  color: var(--brand-900);
  background: var(--brand-50);
}

.manager-monitoring-notice.is-warning {
  border-color: var(--warning-100);
  color: var(--warning-700);
  background: var(--warning-100);
}

.manager-monitoring-notice p {
  margin: 0.18rem 0 0;
  font-size: 0.78rem;
}

.manager-audio-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem 1rem;
}

.manager-audio-panel > .section-header {
  margin: 0;
}

.manager-audio-panel > .form-status {
  grid-column: 1 / -1;
  margin: 0;
}

.manager-listening-rail {
  position: sticky;
  top: calc(var(--header-height) + 0.45rem);
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-color: var(--brand-700);
  box-shadow: 0 10px 28px rgba(3, 29, 63, 0.12);
}

.manager-listening-rail > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.manager-listening-rail > div > span:last-child {
  min-width: 0;
  display: grid;
}

.manager-listening-rail small {
  overflow: hidden;
  color: var(--ink-500);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-live-pulse {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--danger-700);
  box-shadow: 0 0 0 0 rgba(164, 43, 43, 0.35);
  animation: manager-live-pulse 1.8s ease-out infinite;
}

@keyframes manager-live-pulse {
  70% { box-shadow: 0 0 0 8px rgba(164, 43, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(164, 43, 43, 0); }
}

.manager-live-table {
  min-width: 900px;
}

.manager-live-test-marker {
  display: block;
  margin-top: 0.28rem;
}

.manager-live-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.manager-live-card > .button {
  width: 100%;
}

/* Organization settings */
.organization-settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.organization-settings-form > .section-card:nth-of-type(3),
.organization-settings-form > .settings-save-bar {
  grid-column: 1 / -1;
}

.settings-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.settings-option,
.settings-toggle {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  cursor: pointer;
}

.settings-option:hover,
.settings-toggle:hover {
  border-color: var(--brand-700);
  background: var(--brand-50);
}

.settings-option input,
.settings-toggle input {
  margin-top: 0.1rem;
}

.settings-option span,
.settings-option strong,
.settings-option small {
  min-width: 0;
  display: block;
}

.settings-option strong {
  color: var(--ink-800);
  font-size: 0.78rem;
}

.settings-option small {
  margin-top: 0.16rem;
  color: var(--ink-500);
  font-size: 0.68rem;
  line-height: 1.35;
}

.settings-toggle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.settings-toggle span {
  color: var(--ink-800);
  font-size: 0.78rem;
  font-weight: 680;
}

.settings-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.settings-save-bar .form-status {
  margin: 0;
}

.settings-reference-grid {
  margin-top: 0;
}

.upload-box {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.7rem;
  padding: 0.75rem;
  border: 1px dashed #aebeba;
  border-radius: 9px;
  background: var(--surface-soft);
}

.workflow-status {
  display: grid;
  gap: 0.6rem;
}

.workflow-status-item {
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.workflow-status-item h4 {
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
}

.workflow-status-item p {
  margin: 0.38rem 0 0;
  color: var(--ink-500);
  font-size: 0.7rem;
}

.integration-delivery-details {
  margin-top: 0.65rem;
}

.integration-error {
  padding: 0.6rem;
  border: 1px solid #efb9b9;
  border-radius: 7px;
  color: var(--danger-700);
  background: #fff8f8;
}

.integration-error strong {
  font-size: 0.7rem;
}

.integration-error p {
  color: var(--danger-700);
  overflow-wrap: anywhere;
}

/* Notifications */
.notification-list {
  display: grid;
  gap: 0.55rem;
}

.notification-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.notification-item.is-unread {
  border-color: #b8d8cf;
  background: var(--brand-50);
}

.notification-dot {
  width: 10px;
  height: 10px;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.notification-item.is-unread .notification-dot {
  background: var(--solar-500);
}

.notification-copy button {
  padding: 0;
  color: var(--ink-950);
  background: transparent;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 750;
  text-align: left;
}

.notification-copy p {
  margin: 0.25rem 0 0;
  color: var(--ink-600);
  font-size: 0.76rem;
}

.notification-time {
  color: var(--ink-500);
  font-size: 0.67rem;
  white-space: nowrap;
}

.notification-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  background: var(--surface);
  font-size: 0.75rem;
}

/* Admin */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.integration-card {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
}

.integration-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.integration-head h2 {
  margin-bottom: 0.22rem;
  font-size: 1rem;
}

.integration-head p {
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: 0.77rem;
}

.copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.copy-field .button {
  white-space: nowrap;
}

.analytics-unavailable {
  border-color: #efd5a4;
  background: #fffaf1;
}

.toggle-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.toggle-row label {
  font-size: 0.8rem;
  font-weight: 720;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 0.9rem;
}

.account-settings-grid {
  align-items: start;
}

.account-profile-form {
  min-width: 0;
}

.account-access-note {
  margin-top: 0.9rem;
}

.stage-order-list {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.stage-order-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  font-size: 0.77rem;
  font-weight: 680;
}

.stage-order-number {
  width: 23px;
  height: 23px;
  display: grid;
  flex: 0 0 23px;
  place-items: center;
  border-radius: 50%;
  color: var(--brand-900);
  background: var(--brand-100);
  font-size: 0.67rem;
  font-weight: 850;
}

.permission-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
}

.permission-table th,
.permission-table td {
  padding: 0.55rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  text-align: left;
}

.permission-table th {
  color: var(--ink-500);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.permission-yes {
  color: var(--success-700);
  font-weight: 800;
}

.permission-no {
  color: var(--ink-500);
}

.future-panel {
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 18%, rgba(242, 165, 43, 0.18), transparent 27%),
    linear-gradient(160deg, #fff, var(--brand-50));
  text-align: center;
}

.future-panel-content {
  max-width: 620px;
}

.future-symbol {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 24px;
  color: var(--warning-700);
  background: var(--solar-100);
  font-size: 2rem;
}

.future-panel h2 {
  margin-bottom: 0.6rem;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
}

.future-panel p {
  margin-bottom: 0;
  color: var(--ink-600);
}

.future-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.35rem;
}

.future-list span {
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-600);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 650;
}

/* Dialogs */
dialog {
  padding: 0;
  border: 0;
  color: var(--ink-950);
  background: transparent;
}

dialog::backdrop {
  background: rgba(3, 20, 43, 0.56);
  backdrop-filter: blur(3px);
}

.app-dialog {
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.app-dialog-wide {
  width: min(1040px, calc(100vw - 2rem));
}

.dialog-shell {
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem 1.1rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.dialog-header h2 {
  margin-bottom: 0;
  font-size: 1.15rem;
}

.dialog-eyebrow:empty {
  display: none;
}

.dialog-close {
  margin: -0.3rem -0.35rem 0 0;
  font-size: 1.5rem;
}

.dialog-content {
  min-height: 0;
  padding: 1rem 1.1rem;
  overflow-y: auto;
}

.dialog-status {
  margin: 0;
  padding: 0 1.1rem;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.confirm-dialog {
  width: min(440px, calc(100vw - 2rem));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.confirm-shell {
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

.confirm-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  color: var(--warning-700);
  background: var(--warning-100);
  font-size: 1.2rem;
  font-weight: 850;
}

.confirm-shell h2 {
  margin-bottom: 0.45rem;
  font-size: 1.1rem;
}

.confirm-shell > p {
  margin-bottom: 0.9rem;
  color: var(--ink-600);
  font-size: 0.83rem;
}

.confirm-shell .dialog-actions {
  padding: 0.75rem 0 0;
}

.appointment-message-confirmation {
  display: grid;
  gap: 0.9rem;
}

.appointment-message-confirmation > .read-only-note,
.appointment-message-confirmation .field-group {
  margin: 0;
}

.appointment-confirmation-summary {
  padding: 0.1rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.appointment-message-preview {
  padding: 0.82rem;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--brand-50);
}

.appointment-message-preview-label {
  display: block;
  margin-bottom: 0.42rem;
  color: var(--brand-800);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.appointment-message-preview-body {
  margin: 0;
  color: var(--ink-950);
  font-size: 0.82rem;
  line-height: 1.58;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.appointment-message-character-count {
  color: var(--ink-500);
  font-size: 0.69rem;
  font-variant-numeric: tabular-nums;
}

.appointment-message-extra textarea {
  min-height: 86px;
}

.appointment-message-consent {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  gap: 0.62rem;
  padding: 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
}

.appointment-message-consent input {
  flex: 0 0 auto;
  margin-top: 0.08rem;
}

.appointment-message-consent label {
  color: var(--ink-800);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.45;
}

/* Toast */
.toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  width: min(390px, calc(100vw - 2rem));
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-700);
  border-radius: var(--radius-sm);
  color: var(--ink-800);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: 0.82rem;
  animation: toast-in 0.2s ease-out;
}

.toast.is-error {
  border-left-color: var(--danger-700);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

.noscript-message {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: #fff;
  background: var(--brand-950);
  text-align: center;
}

/* Responsive */
/* Dialer */
.nav-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-left: auto;
  border: 1px solid #aab8b5;
  border-radius: 50%;
  background: var(--surface-muted);
}

.nav-live-dot.dialer-agent-available,
.nav-live-dot.dialer-agent-on-call {
  border-color: var(--success-700);
  background: #3bb879;
  box-shadow: 0 0 0 3px rgba(59, 184, 121, 0.13);
}

.nav-live-dot.dialer-agent-wrap-up,
.nav-live-dot.dialer-agent-break {
  border-color: var(--warning-700);
  background: var(--solar-500);
}

.dialer-page,
.dialer-main-column,
.dialer-side-column,
.dialer-admin {
  display: grid;
  gap: 0.9rem;
}

.dialer-agent-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.dialer-agent-identity,
.dialer-agent-controls,
.dialer-device-state,
.dialer-customer-heading,
.dialer-admin-card-head,
.dialer-agent-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.dialer-agent-identity > div,
.dialer-admin-card-head > div,
.dialer-agent-row > div {
  min-width: 0;
  display: grid;
}

.dialer-agent-identity strong,
.dialer-admin-card-head strong,
.dialer-agent-row strong {
  color: var(--ink-950);
  font-size: 0.84rem;
}

.dialer-agent-identity > div > .dialer-session-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.dialer-agent-identity span.status-badge.dialer-internal-test-badge {
  color: var(--warning-700);
  background: var(--warning-100);
  font-size: 0.64rem;
}

.dialer-agent-identity span:not(.dialer-presence),
.dialer-admin-card-head span:not(.status-badge),
.dialer-agent-row span:not(.dialer-presence) {
  color: var(--ink-500);
  font-size: 0.7rem;
}

.dialer-presence {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: #9ba8a5;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.dialer-presence.dialer-agent-success {
  background: #32ae70;
  box-shadow: 0 0 0 1px var(--success-700);
}

.dialer-presence.dialer-agent-info {
  background: #4386d6;
  box-shadow: 0 0 0 1px var(--info-700);
}

.dialer-presence.dialer-agent-warning {
  background: var(--solar-500);
  box-shadow: 0 0 0 1px var(--warning-700);
}

.dialer-status-select {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.dialer-status-select label,
.dialer-campaign-picker label {
  color: var(--ink-600);
  font-size: 0.7rem;
  font-weight: 780;
}

.dialer-status-select select {
  width: auto;
  min-width: 130px;
  min-height: 38px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.dialer-workspace {
  display: grid;
  grid-template-columns: minmax(500px, 1.35fr) minmax(340px, 0.8fr);
  grid-template-areas:
    "softphone queue"
    "callbacks queue";
  gap: 0.9rem;
  align-items: start;
}

.dialer-page.is-wrap-up .dialer-workspace {
  grid-template-areas:
    "disposition queue"
    "softphone queue"
    "callbacks queue";
}

.dialer-panel-softphone { grid-area: softphone; }
.dialer-panel-disposition { grid-area: disposition; }
.dialer-panel-queue { grid-area: queue; }
.dialer-panel-callbacks { grid-area: callbacks; }

.dialer-collapsible-panel > .dialer-collapsible-content {
  min-width: 0;
}

.dialer-collapsible-panel > .dialer-collapsible-content[hidden] {
  display: none !important;
}

.dialer-collapsible-panel.is-collapsed > .section-header {
  margin-bottom: 0;
}

.dialer-section-title-row {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.dialer-section-title-row > h2,
.dialer-section-title-row > h3 {
  margin: 0;
}

.dialer-section-toggle {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--ink-700);
  background: transparent;
  cursor: pointer;
}

.dialer-section-toggle:hover:not(:disabled) {
  color: var(--brand-800);
  background: transparent;
}

.dialer-section-toggle-icon {
  display: inline-block;
  width: 1rem;
  color: currentColor;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.dialer-collapsible-panel.is-pinned-open .dialer-section-toggle {
  opacity: 0.65;
  color: var(--ink-600);
  background: transparent;
  cursor: default;
}

.dialer-agent-bar.dialer-collapsible-panel {
  display: block;
}

.dialer-agent-bar > .dialer-collapsible-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.softphone-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 27%, rgba(242, 165, 43, 0.1), transparent 26%),
    var(--surface);
}

.softphone-screen {
  display: grid;
  place-items: center;
  padding: 0.5rem 0 0;
  text-align: center;
}

.softphone-state {
  margin-bottom: 0.9rem;
  padding: 0.22rem 0.55rem;
  border-radius: 99px;
  color: var(--ink-600);
  background: var(--surface-muted);
  font-size: 0.67rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.softphone-state.is-ringing {
  color: var(--warning-700);
  background: var(--warning-100);
  animation: dialer-ring 1.2s ease-in-out infinite;
}

.softphone-state.is-connected {
  color: var(--success-700);
  background: var(--success-100);
}

@keyframes dialer-ring {
  50% { transform: scale(1.04); }
}

.softphone-avatar,
.dialer-customer-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-700), var(--brand-900));
  font-weight: 820;
}

.softphone-avatar {
  width: 78px;
  height: 78px;
  margin-bottom: 0.7rem;
  font-size: 1.3rem;
  box-shadow: 0 8px 24px rgba(3, 29, 63, 0.16);
}

.dialer-customer-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  font-size: 0.75rem;
}

.softphone-screen h2 {
  max-width: 95%;
  margin-bottom: 0.22rem;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.softphone-screen > p:not(.form-status) {
  margin-bottom: 0.4rem;
  color: var(--ink-500);
  font-size: 0.78rem;
}

.softphone-timer {
  margin-bottom: 1.1rem;
  color: var(--ink-700);
  font-feature-settings: "tnum";
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

.incoming-call-actions {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.softphone-controls {
  width: min(100%, 570px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.softphone-control {
  min-width: 0;
  min-height: 68px;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  padding: 0.42rem 0.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-700);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 730;
}

.softphone-control:hover:not(:disabled),
.softphone-control.is-active {
  border-color: var(--brand-700);
  color: var(--brand-800);
  background: var(--brand-50);
}

.softphone-control.is-danger:not(:disabled) {
  border-color: #e6aaaa;
  color: var(--danger-700);
  background: #fff9f9;
}

.softphone-control:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.softphone-control-icon {
  min-height: 24px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
}

.dialer-keypad {
  width: min(100%, 250px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.dialer-quality-warning {
  width: min(100%, 570px);
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--warning-700);
  background: var(--warning-100);
  font-size: 0.72rem;
}

.dialer-key {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-800);
  background: var(--surface-soft);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 750;
}

.mobile-call-note {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 0.7rem;
  text-align: center;
}

.dialer-context-card .empty-state,
.dialer-queue-card .empty-state,
.dialer-history-card .empty-state,
.dialer-admin .empty-state {
  min-height: 145px;
  padding: 1rem;
  box-shadow: none;
}

.dialer-customer-heading {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line);
}

.dialer-customer-heading h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.dialer-script {
  margin-top: 0.8rem;
  padding: 0.7rem;
  border: 1px solid #e8dcc0;
  border-radius: var(--radius-sm);
  background: #fffaf0;
}

.dialer-script-dialog {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.dialer-script-dialog .dialer-script {
  margin-top: 0;
}

/* A separate dialog keeps the conversation workspace mounted under SMS review. */
.call-workspace-dialog {
  width: min(1740px, calc(100vw - 24px));
  max-width: none;
  height: min(1040px, calc(100dvh - 24px));
  max-height: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f6f8fb;
  color: var(--ink-900);
  overflow: hidden;
}
.team-card, .campaign-access-card { margin-bottom: 1rem; }
.team-editor, .team-member-choices { display: grid; gap: .65rem; }
.team-editor > label { display: grid; gap: .35rem; }
.team-member-choices { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); max-height: 260px; overflow: auto; }
.team-member-choice { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem; background: var(--surface-muted); border-radius: 8px; }
.team-member-choice input { width: 18px; height: 18px; flex: 0 0 auto; }
.campaign-access-card > summary { cursor: pointer; padding: .4rem 0; }
.campaign-access-list { display: grid; gap: .6rem; margin-top: 1rem; }
.campaign-access-row { display: grid; grid-template-columns: minmax(150px,1fr) minmax(150px,1fr) auto; gap: .5rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--line); }
.campaign-access-row > div { display: grid; gap: .2rem; }
.campaign-access-row .form-status { grid-column: 1 / -1; margin: 0; }
.campaign-access-row .form-status:empty { display: none; }
.stats-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; margin-bottom: 1rem; }
.stats-toolbar label { display: grid; gap: .3rem; }
.stats-toggle { display: flex; gap: .4rem; }
.stats-definitions { margin: 1rem 0; }
@media(max-width:600px) {
  .campaign-access-row { grid-template-columns: minmax(0,1fr) auto; }
  .campaign-access-row > div { grid-column: 1 / -1; }
  .stats-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-toolbar > label, .stats-toolbar input { min-width: 0; width: 100%; }
  .stats-toolbar > select, .stats-toolbar > .button { width: 100%; grid-column: 1 / -1; }
  .stats-toggle { width: 100%; grid-column: 1 / -1; }
  .stats-toggle .button { flex: 1; }
  .stats-scorecard.analytics-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.call-workspace-dialog[open] { display: flex; flex-direction: column; }
.call-workspace-dialog::backdrop { background: rgba(6, 24, 49, .64); }
.workspace-header { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; background: white; border-bottom: 1px solid var(--line); }
.workspace-header h2 { margin: 0; font-size: 1.1rem; }
.workspace-header .eyebrow { margin: 0; font-size: .65rem; }
.workspace-header > .button { margin-left: auto; }
.workspace-call-controls.dialer-modal-call-rail { position: static; display: flex; margin: 0; padding: .35rem .55rem; gap: .6rem; flex-wrap: nowrap; box-shadow: none; }
.workspace-call-controls.dialer-modal-call-rail > .button,
.workspace-call-controls.dialer-modal-call-rail > .button:last-child { width: auto; flex: 0 0 auto; }
.workspace-call-timer { min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.workspace-columns { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(285px, .95fr) minmax(350px, 1.35fr) minmax(310px, 1fr); }
.workspace-column { min-width: 0; min-height: 0; overflow: auto; padding: 1rem; overscroll-behavior: contain; }
.workspace-column + .workspace-column { border-left: 1px solid var(--line); }
.workspace-column h3 { font-size: .9rem; margin: 0 0 .65rem; }
.workspace-customer .section-card { padding: .8rem; }
.workspace-customer .dialer-customer-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-customer .dialer-customer-edit-grid .field-group.is-wide { grid-column: 1 / -1; }
.workspace-customer .field-group { min-width: 0; }
.workspace-customer input, .workspace-customer select { min-width: 0; width: 100%; }
.workspace-script { display: flex; flex-direction: column; background: #fffdf7; }
.workspace-script .dialer-script { flex: 1; min-height: 200px; overflow: auto; margin: 0; border: 0; padding: .5rem 0; background: none; }
.workspace-script .dialer-script p { font-size: 1rem; line-height: 1.75; color: var(--ink-900); }
.workspace-notes { flex: 0 0 auto; margin-top: 1rem; border-top: 1px solid #e8dcc0; padding-top: .8rem; }
.workspace-notes textarea { width: 100%; min-height: 100px; resize: vertical; }
.workspace-notes .field-hint { font-size: .7rem; }
.workspace-notes .form-status { margin: .3rem 0 0; font-size: .7rem; }
.workspace-booking { display: grid; gap: .7rem; padding: .9rem; background: white; border: 1px solid var(--line); border-radius: 12px; }
.workspace-booking input { min-width: 0; width: 100%; }
.click-datetime-control, .click-datetime-editor, .schedule-slot-picker { min-width: 0; width: 100%; }
.schedule-picker-value { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.schedule-picker-toggle { justify-content: flex-start; text-align: left; white-space: normal; min-height: 44px; }
.click-datetime-editor { margin-top: .7rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
.schedule-slot-picker { display: grid; gap: .65rem; }
.schedule-slot-picker .calendar-toolbar { margin: 0; }
.schedule-slot-picker .appointment-calendar-grid { min-width: 0; gap: 3px; }
.schedule-slot-picker .appointment-calendar-grid.is-compact .appointment-calendar-day { min-height: 44px; padding: .3rem; min-width: 0; }
.schedule-slot-picker .appointment-calendar-event { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-time-slots { min-width: 0; padding: .75rem; border: 1px solid #f4d888; border-radius: 14px; background: #fffaf0; display: grid; gap: .6rem; }
.schedule-time-slots[hidden], .click-datetime-editor[hidden] { display: none; }
.schedule-time-slots h4 { margin: 0; font-size: .9rem; }
.schedule-periods { display: flex; gap: .3rem; flex-wrap: wrap; }
.schedule-period { border: 1px solid var(--line); background: #fff; color: #193c61; min-height: 36px; padding: .35rem .5rem; }
.schedule-period.is-selected { background: #173d64; color: #fff; border-color: #173d64; }
.schedule-slot-bubbles { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: .4rem; }
.schedule-slot { cursor: pointer; border: 1px solid #d6dfeb; border-radius: 999px; background: #fff; color: #173d64; min-height: 44px; padding: .55rem .45rem; font: inherit; font-size: .85rem; font-weight: 600; }
.schedule-slot:hover { background: #fff0c6; border-color: #dca427; }
.schedule-slot.is-selected { background: #173d64; color: #fff; border-color: #173d64; box-shadow: 0 0 0 2px #ffc343; }
.schedule-slot:focus-visible, .schedule-period:focus-visible, .schedule-picker-toggle:focus-visible { outline: 3px solid #eaa719; outline-offset: 2px; }
.schedule-selection-summary { margin: 0; font-weight: 650; color: #173d64; }
.schedule-review { min-height: 44px; width: 100%; }
.schedule-exact-time summary { cursor: pointer; font-size: .85rem; padding: .35rem 0; }
.click-time-control { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; min-width: 0; }
.click-time-control select { min-width: 0; width: 100%; min-height: 44px; }
.schedule-calendar-status { margin: 0; }
@media (max-width: 600px) {
  .click-datetime-editor { padding: .45rem; }
  .schedule-time-slots { padding: .55rem; }
  .schedule-slot-picker .appointment-calendar-event { display: none; }
  .schedule-slot-picker .appointment-calendar-day.has-appointments .appointment-calendar-day-number::after { content: " •"; color: #dba300; }
}
.workspace-booking .calendar-toolbar { gap: .3rem; margin: 0; }
.workspace-booking .calendar-toolbar strong { font-size: .82rem; }
.workspace-booking .appointment-calendar-grid { min-width: 0; gap: 3px; }
.workspace-booking .appointment-calendar-grid.is-compact .appointment-calendar-day { min-height: 42px; padding: .2rem; border-radius: 6px; }
.workspace-booking .appointment-calendar-event { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .55rem; }
.workspace-booking .appointment-calendar-weekday { font-size: .6rem; }
.workspace-booking .dialer-schedule-grid { grid-template-columns: 1fr; }
.workspace-booking .dialer-schedule-field:first-child { display: none; }
.workspace-booking .field-hint { margin: 0; }
.workspace-callback summary { cursor: pointer; font-size: .75rem; color: var(--brand-800); }
.workspace-queue { margin-top: 1rem; padding: .75rem; }
.workspace-queue .dialer-attempt-list { max-height: 220px; overflow: auto; }
.workspace-queue .dialer-queue-summary, .workspace-queue .dialer-attempt-heading { display: none; }
.workspace-queue .dialer-attempt-item { gap: .4rem; padding: .6rem; }
.workspace-map-card { margin-top: 1rem; }
.workspace-map-card h3 { margin: 0; }
.workspace-map-card .field-label-with-action { flex-wrap: wrap; gap: .3rem; }
.workspace-map-address { font-size: .72rem; overflow-wrap: anywhere; }
.workspace-property-map { height: 280px; width: 100%; background: #e7ecf1; border: 1px solid var(--line); border-radius: 10px; isolation: isolate; }
.workspace-property-map .leaflet-control-attribution { font-size: 9px; }
.workspace-property-map .leaflet-control-zoom a { min-width: 36px; min-height: 36px; line-height: 36px; }
.workspace-tabs { display: none; }
@media (max-width: 1040px) {
  .call-workspace-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 10px; }
  .workspace-header { flex-wrap: wrap; padding: .6rem; gap: .5rem; }
  .workspace-header .workspace-call-controls { order: 3; width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .workspace-header .workspace-call-controls .button { min-height: 44px; }
  .workspace-tabs { display: flex; gap: .4rem; padding: .5rem; background: white; border-bottom: 1px solid var(--line); }
  .workspace-tabs .button { flex: 1; min-height: 44px; }
  .workspace-tabs .button[aria-selected="true"],
  .workspace-tabs .button[aria-selected="true"]:hover { background: var(--brand-800); color: white; }
  .workspace-columns { display: block; overflow: hidden; }
  .workspace-column { display: none; height: 100%; border: 0 !important; padding: .65rem; }
  .call-workspace-dialog[data-tab="Customer"] .workspace-customer { display: block; }
  .call-workspace-dialog[data-tab="Script"] .workspace-script { display: flex; }
  .call-workspace-dialog[data-tab="Booking"] .workspace-actions { display: block; }
  .workspace-property-map { height: 300px; }
}

.dialer-script > span {
  color: var(--warning-700);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dialer-script p {
  margin: 0.3rem 0 0;
  color: var(--ink-700);
  font-size: 0.76rem;
  white-space: pre-wrap;
}

.dialer-context-card.is-editable {
  border-color: #b8d8c9;
}

.dialer-customer-edit-form,
.dialer-wrap-customer {
  display: grid;
  gap: 0.8rem;
}

.dialer-customer-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.dialer-customer-edit-grid .field-group {
  min-width: 0;
  margin: 0;
}

.dialer-customer-edit-grid .field-group.is-wide {
  grid-column: 1 / -1;
}

.dialer-customer-edit-grid input {
  min-height: 40px;
  padding: 0.55rem 0.65rem;
}

.dialer-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.dialer-schedule-field {
  min-width: 0;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.dialer-schedule-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink-800);
  font-size: 0.78rem;
  font-weight: 750;
}

.dialer-schedule-value {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.dialer-schedule-value strong {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.dialer-schedule-value span {
  color: var(--ink-500);
  font-size: 0.68rem;
}

.dialer-schedule-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}

.dialer-customer-edit-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.dialer-customer-edit-actions .form-status,
.dialer-customer-edit-actions .field-hint {
  margin: 0;
}

.dialer-customer-edit-actions .button {
  flex: 0 0 auto;
}

.field-label-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dialer-wrap-customer,
.dialer-outcome-policy {
  grid-column: 1 / -1;
}

.dialer-wrap-customer {
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.dialer-wrap-customer > summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--brand-800);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
}

.dialer-outcome-policy {
  margin: 0;
  padding: 0.7rem;
  border: 1px solid #e6c88c;
  border-radius: 8px;
  color: var(--warning-700);
  background: var(--warning-100);
  font-size: 0.76rem;
}

.button-ghost {
  border-color: transparent;
  color: var(--brand-700);
  background: transparent;
}

.button-ghost:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--brand-50);
}

/* Appointment calendar */
.calendar-page,
.calendar-layout,
.dialer-appointment-dialog {
  display: grid;
  gap: 1rem;
}

.calendar-layout {
  grid-template-columns: minmax(600px, 1.55fr) minmax(300px, 0.7fr);
  align-items: start;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.calendar-toolbar h2,
.calendar-toolbar h3 {
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
}

.calendar-month-button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.45rem;
}

.appointment-calendar-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.appointment-calendar-weekday {
  padding: 0.45rem 0.3rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-600);
  background: var(--surface-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.appointment-calendar-day {
  min-width: 0;
  min-height: 112px;
  display: block;
  padding: 0.42rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink-800);
  background: var(--surface);
  overflow: hidden;
  text-align: left;
}

button.appointment-calendar-day {
  width: 100%;
  cursor: pointer;
}

button.appointment-calendar-day:hover {
  background: var(--brand-50);
}

.appointment-calendar-day.is-outside {
  background: var(--surface-soft);
}

.appointment-calendar-day.is-selected-draft {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--solar-500);
}

.appointment-calendar-day-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.28rem;
}

.appointment-calendar-day-number {
  font-size: 0.74rem;
  font-weight: 800;
}

.appointment-calendar-event {
  min-width: 0;
  display: block;
  padding: 0.25rem 0.34rem;
  border-radius: 5px;
  color: var(--brand-900);
  background: var(--brand-100);
  font-size: 0.65rem;
  font-weight: 690;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-calendar-more {
  color: var(--ink-500);
  font-size: 0.64rem;
  font-weight: 750;
}

.calendar-appointment-list {
  display: grid;
  gap: 0.55rem;
}

.calendar-appointment-item {
  display: grid;
  grid-template-columns: minmax(118px, 0.55fr) minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.calendar-appointment-item:last-child {
  border-bottom: 0;
}

.calendar-appointment-item time {
  color: var(--brand-800);
  font-size: 0.74rem;
  font-weight: 800;
}

.calendar-appointment-item > div {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.calendar-appointment-item strong {
  font-size: 0.8rem;
}

.calendar-appointment-item span {
  color: var(--ink-500);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.calendar-appointment-item > .button {
  grid-column: 2;
  width: fit-content;
}

.appointment-calendar-grid.is-compact .appointment-calendar-day {
  min-height: 84px;
}

.dialer-appointment-dialog .loading-state {
  min-height: 250px;
}

.dialer-modal-call-rail {
  position: sticky;
  top: -0.1rem;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid #b8d8c9;
  border-radius: 9px;
  background: var(--success-100);
  box-shadow: var(--shadow-sm);
}

.dialer-modal-call-rail > div {
  min-width: 0;
  display: grid;
}

.dialer-modal-call-rail strong {
  color: var(--success-700);
  font-size: 0.78rem;
}

.dialer-modal-call-rail span {
  overflow: hidden;
  color: var(--ink-700);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialer-appointment-input {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.dialer-campaign-picker {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
}

.dialer-queue-list,
.dialer-history-list,
.dialer-callback-list,
.dialer-campaign-grid,
.dialer-agent-list {
  display: grid;
  gap: 0.5rem;
}

.dialer-queue-list {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialer-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.dialer-queue-item.is-selected {
  border-color: var(--brand-700);
  background: var(--brand-50);
  box-shadow: 0 0 0 2px rgba(36, 107, 96, 0.08);
}

.dialer-queue-select {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.dialer-queue-select:hover {
  background: rgba(220, 238, 234, 0.45);
}

.dialer-queue-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-600);
  background: var(--surface-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.dialer-queue-copy {
  min-width: 0;
  display: grid;
}

.dialer-queue-copy strong {
  overflow: hidden;
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialer-queue-copy small {
  overflow: hidden;
  color: var(--ink-500);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialer-safety-copy {
  margin: 0.25rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 0.67rem;
}

.dialer-disposition-card.is-required {
  border-color: #e6c88c;
  box-shadow: 0 0 0 3px rgba(242, 165, 43, 0.08);
}

.dialer-disposition-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) minmax(220px, 0.8fr);
  gap: 0.75rem;
  align-items: end;
}

.dialer-disposition-form .field-group {
  margin-bottom: 0;
}

.dialer-disposition-notes,
.dialer-disposition-submit {
  grid-column: 1 / -1;
}

.dialer-disposition-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.dialer-disposition-submit .form-status {
  margin: 0;
}

.dialer-history-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
}

.dialer-history-item:last-child {
  border-bottom: 0;
}

.dialer-history-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand-700);
  background: var(--brand-50);
  font-weight: 800;
}

.dialer-history-item > div:nth-child(2) {
  min-width: 0;
  display: grid;
}

.dialer-history-item > div:nth-child(2) > span {
  overflow: hidden;
  color: var(--ink-500);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialer-history-result {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
}

.dialer-history-badges,
.call-history-mobile-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.dialer-history-result > span:last-child {
  color: var(--ink-500);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.dialer-callback-list {
  gap: 0;
}

.dialer-callback-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.dialer-callback-item:last-child {
  border-bottom: 0;
}

.dialer-callback-item > div {
  min-width: 0;
  display: grid;
}

.dialer-callback-item strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialer-callback-item > div > span {
  color: var(--ink-500);
  font-size: 0.68rem;
}

.dialer-admin {
  margin-top: 0.45rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
}

.campaigns-page {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.dialer-admin-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.dialer-admin-heading h2 {
  margin-bottom: 0.2rem;
  font-size: 1.2rem;
}

.dialer-admin-heading > div > p:last-child {
  margin-bottom: 0;
  color: var(--ink-600);
  font-size: 0.8rem;
}

.dialer-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 0.9rem;
  align-items: start;
}

.dialer-admin-card {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.dialer-admin-card.is-internal-test {
  border-color: #e3b968;
  box-shadow: inset 3px 0 0 var(--solar-500);
}

.dialer-admin-card-head {
  justify-content: space-between;
}

.dialer-campaign-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.dialer-campaign-details > summary::-webkit-details-marker {
  display: none;
}

.dialer-campaign-summary::after {
  content: "›";
  flex: 0 0 auto;
  color: var(--ink-500);
  font-size: 1.15rem;
  font-weight: 800;
  transform: rotate(90deg);
  transition: transform 140ms ease;
}

.dialer-campaign-details[open] > .dialer-campaign-summary::after {
  transform: rotate(-90deg);
}

.dialer-campaign-summary-badges {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.dialer-internal-test-badge {
  border: 1px solid rgba(175, 111, 4, 0.22);
  box-shadow: 0 1px 2px rgba(108, 70, 6, 0.08);
  letter-spacing: 0.015em;
}

.dialer-campaign-card-body {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.dialer-admin-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.dialer-admin-metrics > span {
  display: grid;
  padding: 0.45rem;
  border-radius: 7px;
  background: var(--surface);
}

.dialer-admin-metrics small {
  color: var(--ink-500);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.dialer-admin-metrics strong {
  color: var(--ink-800);
  font-size: 0.85rem;
}

.dialer-internal-test-dialog {
  align-items: start;
}

.dialer-internal-test-dialog textarea {
  min-height: 150px;
  font-variant-numeric: tabular-nums;
}

.dialer-internal-test-current {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #efd5a4;
  border-radius: 8px;
  color: var(--warning-700);
  background: #fffaf0;
  font-size: 0.74rem;
  font-weight: 700;
}

.dialer-internal-test-current > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dialer-internal-test-policy {
  display: grid;
  gap: 0.2rem;
  align-self: stretch;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-600);
  background: var(--surface-soft);
  font-size: 0.74rem;
}

.dialer-internal-test-policy strong {
  color: var(--ink-800);
}

.dialer-internal-test-disable {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.dialer-agent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.dialer-agent-row:last-child {
  border-bottom: 0;
}

.dialer-session-rail {
  position: sticky;
  top: calc(var(--header-height) + 0.45rem);
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(300px, 1.15fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  border-color: var(--line-strong);
  box-shadow: 0 10px 28px rgba(3, 29, 63, 0.12);
}

.dialer-session-campaign {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.dialer-session-campaign > label {
  color: var(--ink-600);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dialer-session-campaign-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
}

.dialer-session-campaign-controls select {
  min-width: 0;
  min-height: 42px;
}

.dialer-readiness-button {
  min-width: 104px;
  min-height: 44px;
}

.dialer-recovery-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #e6c88c;
  border-radius: var(--radius-md);
  background: var(--warning-100);
}

.dialer-recovery-state strong {
  color: var(--warning-700);
  font-size: 0.8rem;
}

.dialer-recovery-state p {
  margin: 0.15rem 0 0;
  color: var(--ink-700);
  font-size: 0.72rem;
}

.dialer-page.is-wrap-up .dialer-disposition-card {
  border-color: var(--warning-700);
  box-shadow: 0 0 0 4px rgba(242, 165, 43, 0.12);
}

.dialer-action-dock {
  position: sticky;
  bottom: 0.4rem;
  z-index: 12;
  padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
}

.dialer-action-dock > :only-child {
  grid-column: 1 / -1;
}

.dialer-action-dock > :first-child:nth-last-child(2),
.dialer-action-dock > :first-child:nth-last-child(2) ~ * {
  grid-column: span 3;
}

.dialer-queue-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.dialer-queue-summary > span {
  min-width: 0;
  display: grid;
  padding: 0.65rem;
  border-radius: 8px;
  background: var(--surface-soft);
}

.dialer-queue-summary small {
  color: var(--ink-500);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.dialer-queue-summary strong {
  color: var(--ink-900);
  font-size: 1rem;
}

.dialer-attempt-activity {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.dialer-attempt-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.dialer-attempt-heading h3 {
  margin: 0;
  color: var(--ink-800);
  font-size: 0.8rem;
}

.dialer-attempt-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem 0.55rem;
  color: var(--ink-600);
  font-size: 0.62rem;
  font-weight: 720;
}

.dialer-attempt-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.dialer-attempt-legend > span::before,
.dialer-attempt-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--ink-500);
  content: "";
}

.dialer-attempt-legend .is-dialing::before,
.dialer-attempt-item.is-dialing .dialer-attempt-dot {
  background: #d99b20;
}

.dialer-attempt-legend .is-connected::before,
.dialer-attempt-item.is-connected .dialer-attempt-dot {
  background: #2c9b62;
}

.dialer-attempt-legend .is-no-answer::before,
.dialer-attempt-item.is-no-answer .dialer-attempt-dot {
  background: #ce5d5d;
}

.dialer-attempt-list {
  max-height: 360px;
  display: grid;
  gap: 0.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialer-attempt-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
}

.dialer-attempt-item.is-dialing {
  border-color: #ead39e;
  background: #fffaf0;
}

.dialer-attempt-item.is-connected {
  border-color: #b8dcc9;
  background: #eefaf4;
}

.dialer-attempt-item.is-no-answer {
  border-color: #eccaca;
  background: #fff2f2;
}

.dialer-attempt-phone {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-800);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialer-attempt-target {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.dialer-attempt-target .dialer-attempt-phone {
  max-width: 100%;
}

.dialer-attempt-state {
  display: grid;
  grid-template-columns: 8px auto;
  align-items: center;
  gap: 0.18rem 0.35rem;
  text-align: right;
}

.dialer-attempt-state strong {
  color: var(--ink-800);
  font-size: 0.7rem;
}

.dialer-attempt-state small {
  grid-column: 2;
  color: var(--ink-500);
  font-size: 0.62rem;
}

.dialer-import-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.dialer-import-form .field-group,
.dialer-import-form .form-status {
  margin: 0;
}

.dialer-import-form .form-status {
  grid-column: 1 / -1;
}

.dialer-import-form input[type="file"] {
  min-width: 0;
  padding: 0.42rem;
  font-size: 0.72rem;
}

.dialer-analytics {
  min-width: 0;
}

.dialer-analytics-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(145px, 0.55fr)) auto;
  align-items: end;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.dialer-analytics-filters .field-group,
.dialer-analytics-filters .form-status {
  margin: 0;
}

.dialer-analytics-filters > .form-status {
  grid-column: 1 / -1;
}

.dialer-analytics-filter-actions {
  display: flex;
  gap: 0.4rem;
}

.dialer-analytics-content {
  display: grid;
  gap: 0.9rem;
}

.dialer-analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.dialer-analytics-metric {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.18rem;
  min-height: 88px;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.dialer-analytics-metric > span {
  color: var(--ink-500);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dialer-analytics-metric > strong {
  color: var(--ink-900);
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

.dialer-analytics-metric > small {
  color: var(--ink-500);
  font-size: 0.65rem;
}

.dialer-analytics-outcomes,
.dialer-analytics-reps {
  min-width: 0;
  padding-top: 0.2rem;
}

.dialer-analytics-outcomes h3,
.dialer-analytics-reps h3 {
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
}

.dialer-analytics-outcomes ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dialer-analytics-outcomes li {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.55rem;
  border-radius: 8px;
  background: var(--surface-soft);
  font-size: 0.72rem;
  text-transform: capitalize;
}

.dialer-rep-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  overscroll-behavior-inline: contain;
}

.dialer-rep-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.dialer-rep-table th,
.dialer-rep-table td {
  padding: 0.62rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.dialer-rep-table th:first-child,
.dialer-rep-table td:first-child {
  text-align: left;
}

.dialer-rep-table td:last-child {
  min-width: 190px;
  white-space: normal;
}

.dialer-rep-table thead th {
  color: var(--ink-600);
  background: var(--surface-soft);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dialer-rep-table tbody tr:last-child th,
.dialer-rep-table tbody tr:last-child td {
  border-bottom: 0;
}

.dialer-settings {
  display: grid;
  gap: 0.7rem;
}

.dialer-provider-fields {
  margin-top: 0.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.dialer-provider-fields[hidden] {
  display: none;
}

.dialer-caller-id-field {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.dialer-caller-id-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.dialer-caller-id-heading .field-hint {
  max-width: 680px;
  margin-top: 0.2rem;
}

.dialer-caller-id-pool {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.dialer-caller-id-row {
  display: grid;
  grid-template-columns: 72px minmax(180px, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.dialer-caller-id-row label {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.72rem;
  font-weight: 800;
}

.dialer-caller-id-remove:disabled {
  visibility: hidden;
}

.provider-webhook-copy {
  overflow-wrap: anywhere;
}

.dialer-verified-section {
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.dialer-verified-section h3 {
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
}

.dialer-verified-section > p {
  color: var(--ink-600);
  font-size: 0.76rem;
}

.verified-number-list {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.verified-number-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.35rem 0.3rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink-700);
  background: var(--surface-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.verified-number-remove {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--danger-700);
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
}

.verified-number-remove:hover {
  background: var(--danger-100);
}

.verified-number-add {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 0.5rem;
}

.call-history-page {
  display: grid;
  gap: 0.85rem;
}

.call-history-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: end;
  gap: 0.65rem;
}

.call-history-filters .field-group,
.call-history-filters .form-status {
  margin: 0;
}

.call-history-search {
  grid-column: span 2;
}

.call-history-filter-actions {
  display: flex;
  gap: 0.45rem;
}

.call-history-filter-actions .button {
  flex: 1 1 0;
}

.call-history-filters > .form-status {
  grid-column: 1 / -1;
}

.call-history-player {
  position: sticky;
  top: calc(var(--header-height) + 0.45rem);
  z-index: 24;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(280px, 1.4fr) auto;
  align-items: center;
  gap: 0.75rem;
  border-color: var(--line-strong);
  box-shadow: 0 10px 28px rgba(3, 29, 63, 0.12);
}

.call-history-player[hidden] {
  display: none;
}

.call-history-player-copy {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.call-history-player-copy strong,
.call-history-player-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-history-player-copy strong {
  color: var(--ink-900);
  font-size: 0.82rem;
}

.call-history-player-copy span {
  color: var(--ink-500);
  font-size: 0.7rem;
}

.call-history-player audio {
  width: 100%;
  min-width: 0;
}

.call-history-table {
  min-width: 1180px;
}

.call-history-table .call-history-actions-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--surface);
  box-shadow: 2px 0 0 var(--line);
}

.call-history-table th.call-history-actions-cell {
  z-index: 3;
}

.recording-recovery-status {
  flex-basis: 100%;
  white-space: normal;
  font-size: 0.75rem;
}

.call-history-test-marker {
  display: block;
  margin-top: 0.28rem;
}

.call-history-actions {
  align-items: center;
  flex-wrap: wrap;
}

.call-history-mobile-card > .cell-secondary {
  margin-top: -0.3rem;
}

.call-history-mobile-card .mobile-data-card-grid > span:last-child {
  grid-column: 1 / -1;
}

.call-history-mobile-card .status-badge {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

@media (max-width: 1180px) {
  .calendar-layout {
    grid-template-columns: 1fr;
  }

  .manager-overview-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .manager-overview-filter-actions {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .call-history-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .lead-workspace-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .lead-side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .filter-bar {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 0.55fr));
  }

  .filter-bar > .button {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .analytics-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .dialer-workspace,
  .dialer-admin-grid {
    grid-template-columns: 1fr;
  }

  .dialer-workspace {
    grid-template-areas:
      "softphone"
      "queue"
      "callbacks";
  }

  .dialer-page.is-wrap-up .dialer-workspace {
    grid-template-areas:
      "disposition"
      "softphone"
      "queue"
      "callbacks";
  }

  .dialer-session-rail {
    grid-template-columns: minmax(170px, 0.65fr) minmax(280px, 1fr) auto;
  }

  .dialer-analytics-summary,
  .dialer-analytics-outcomes ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dialer-side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .manager-overview-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-history-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-history-player {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .call-history-player audio {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  :root {
    --header-height: 62px;
  }

  .mobile-menu-button {
    display: inline-grid;
  }

  .app-header {
    padding: 0 0.65rem;
  }

  .account-summary-copy,
  .summary-chevron {
    display: none;
  }

  .account-menu summary {
    padding: 0.3rem;
  }

  .sidebar {
    top: var(--header-height);
    width: min(86vw, 300px);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-md);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .nav-scrim {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 35;
    background: rgba(3, 20, 43, 0.42);
  }

  .main-content {
    width: 100%;
    margin-left: 0;
    padding: 1rem;
  }

  .page-heading {
    min-height: auto;
  }

  .pipeline-board-wrap {
    margin-right: -1rem;
    margin-left: -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-bar .filter-control:first-child {
    grid-column: 1 / -1;
  }

  .filter-bar > .button {
    grid-column: auto;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .calendar-month-card,
  .dialer-calendar-scroll {
    overflow-x: auto;
  }

  .appointment-calendar-grid {
    min-width: 610px;
  }

  .manager-overview-filter-actions .button,
  .manager-audio-controls .button {
    flex: 1 1 0;
  }

  .call-history-filter-actions {
    grid-column: 1 / -1;
  }

  .call-history-actions .button {
    flex: 1 1 150px;
  }

  .login-screen {
    display: block;
  }

  .login-visual {
    display: none;
  }

  .login-panel {
    min-height: 100vh;
    padding: 2rem 1.2rem;
    background:
      radial-gradient(circle at 85% 4%, rgba(242, 165, 43, 0.19), transparent 24%),
      var(--surface);
  }

  .brand-login {
    margin-bottom: 3.5rem;
  }

  .page-heading {
    display: grid;
    gap: 0.85rem;
  }

  .page-actions {
    justify-content: flex-start;
  }

  .page-actions .button {
    flex: 1 1 auto;
  }

  .page-heading.is-dialer-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.55rem;
  }

  .page-heading.is-dialer-heading > :first-child {
    min-width: 0;
  }

  .page-heading.is-dialer-heading .dialer-page-actions {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    flex-wrap: nowrap;
  }

  .page-heading.is-dialer-heading .dialer-page-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    padding: 0;
  }

  .page-heading.is-dialer-heading .dialer-page-action-label {
    display: none;
  }

  .dashboard-intro {
    display: grid;
  }

  .dashboard-rate-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .metric-card {
    min-height: 112px;
    padding: 0.78rem;
  }

  .metric-label {
    font-size: 0.66rem;
  }

  .metric-value {
    font-size: 1.5rem;
  }

  .pipeline-toolbar {
    align-items: flex-start;
  }

  .pipeline-mobile-stage {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  .pipeline-mobile-stage label {
    color: var(--ink-700);
    font-size: 0.78rem;
    font-weight: 760;
  }

  .pipeline-board-wrap {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    overflow-x: visible;
  }

  .pipeline-board {
    min-width: 0;
    display: block;
  }

  .pipeline-column {
    display: none;
    min-height: 0;
  }

  .pipeline-column.is-mobile-active {
    display: block;
  }

  .pipeline-card-title,
  .pipeline-stage-select {
    min-height: 44px;
  }

  .pipeline-card-title {
    display: flex;
    align-items: center;
  }

  .card-grid,
  .admin-grid,
  .lead-side-column,
  .history-grid {
    grid-template-columns: 1fr;
  }

  .activity-filter {
    grid-template-columns: 1fr;
  }

  .activity-filter .inline-actions .button {
    flex: 1 1 0;
  }

  .analytics-toolbar {
    display: grid;
    align-items: stretch;
  }

  .analytics-period {
    width: 100%;
  }

  .analytics-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-settings-form,
  .settings-option-grid,
  .settings-toggle-list {
    grid-template-columns: 1fr;
  }

  .organization-settings-form > .section-card:nth-of-type(3),
  .organization-settings-form > .settings-save-bar {
    grid-column: auto;
  }

  .table-wrap {
    display: none;
  }

  .mobile-card-list {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
  }

  .mobile-data-card {
    display: grid;
    gap: 0.58rem;
    padding: 0.78rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
  }

  .mobile-data-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
  }

  .mobile-data-card-head button {
    padding: 0;
    color: var(--brand-800);
    background: transparent;
    cursor: pointer;
    font-weight: 780;
    text-align: left;
  }

  .mobile-data-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .mobile-data-card-grid span {
    min-width: 0;
    color: var(--ink-500);
    font-size: 0.67rem;
  }

  .mobile-data-card-grid strong {
    display: block;
    margin-top: 0.08rem;
    color: var(--ink-800);
    font-size: 0.73rem;
    overflow-wrap: anywhere;
  }

  .form-grid,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .close-won-summary,
  .close-won-credit {
    grid-template-columns: 1fr;
  }

  .close-won-section {
    padding: 0.78rem;
  }

  .lead-hero {
    display: grid;
  }

  .lead-quick-actions {
    justify-content: flex-start;
  }

  .notification-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-time {
    grid-column: 2;
  }

  .future-list {
    grid-template-columns: 1fr;
  }

  .app-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }

  .dialog-shell {
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
  }

  .dialog-actions {
    position: sticky;
    bottom: 0;
  }

  .dialog-actions .button {
    flex: 1 1 0;
  }

  .dialer-agent-bar {
    align-items: stretch;
    display: grid;
  }

  .dialer-agent-bar > .dialer-collapsible-content {
    align-items: stretch;
    display: grid;
  }

  .dialer-page {
    min-width: 0;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .dialer-session-rail {
    top: calc(var(--header-height) + 0.25rem);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.55rem;
  }

  .dialer-session-rail .dialer-agent-identity {
    min-width: 0;
  }

  .dialer-session-campaign {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dialer-session-rail .dialer-agent-controls {
    grid-column: 2;
    grid-row: 1;
  }

  .dialer-session-rail .dialer-device-state .status-badge,
  .dialer-session-rail .dialer-device-state .button {
    display: none;
  }

  .dialer-readiness-button {
    min-width: 88px;
  }

  .dialer-recovery-state {
    align-items: stretch;
    display: grid;
  }

  .softphone-card {
    overflow: visible;
  }

  .dialer-action-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    max-height: 42dvh;
    padding: 0.5rem max(0.65rem, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.65rem, env(safe-area-inset-left));
    border-top: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -10px 30px rgba(3, 29, 63, 0.18);
    backdrop-filter: blur(12px);
  }

  .dialer-agent-controls {
    justify-content: space-between;
  }

  .dialer-side-column {
    grid-template-columns: 1fr;
  }

  .softphone-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .softphone-control {
    min-height: 72px;
  }

  .dialer-admin-heading {
    align-items: stretch;
    display: grid;
  }

  .dialer-admin-heading > .button {
    width: 100%;
  }

  .dialer-analytics-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dialer-analytics-filters > .field-group:first-child,
  .dialer-analytics-filter-actions {
    grid-column: 1 / -1;
  }

  .dialer-analytics-filter-actions .button {
    flex: 1 1 0;
  }
}

@media (max-width: 520px) {
  .lead-assignment-row {
    align-items: stretch;
    display: grid;
  }

  .lead-assignment-row .button {
    width: 100%;
  }

  .dialer-modal-call-rail {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dialer-modal-call-rail > .button:last-child {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dialer-customer-edit-grid,
  .dialer-schedule-grid {
    grid-template-columns: 1fr;
  }

  .dialer-customer-edit-grid .field-group.is-wide {
    grid-column: auto;
  }

  .dialer-customer-edit-actions {
    display: grid;
  }

  .dialer-customer-edit-actions .button,
  .dialer-schedule-actions .button {
    width: 100%;
  }

  .calendar-appointment-item {
    grid-template-columns: 1fr;
  }

  .calendar-appointment-item > .button {
    grid-column: 1;
    width: 100%;
  }

  .manager-overview-filters,
  .manager-audio-panel {
    grid-template-columns: 1fr;
  }

  .manager-overview-filter-actions,
  .manager-audio-controls {
    width: 100%;
  }

  .manager-overview-filter-actions,
  .manager-date-presets {
    display: grid;
    grid-template-columns: 1fr;
  }

  .manager-audio-panel > .form-status {
    grid-column: 1;
  }

  .manager-listening-rail {
    position: static;
    display: grid;
  }

  .manager-listening-rail > .button {
    width: 100%;
  }

  .call-history-filters,
  .call-history-player {
    grid-template-columns: 1fr;
  }

  .call-history-search,
  .call-history-filter-actions,
  .call-history-player audio {
    grid-column: 1;
  }

  .call-history-player audio {
    grid-row: auto;
  }

  .call-history-player > .button {
    width: 100%;
  }

  .app-header .brand-logo {
    width: 112px;
    height: 42px;
  }

  .header-actions {
    gap: 0.2rem;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 100px;
  }

  .dashboard-insight-item {
    display: grid;
  }

  .dashboard-insight-item > span:last-child {
    text-align: left;
  }

  .analytics-summary-grid {
    grid-template-columns: 1fr;
  }

  .analytics-metric {
    min-height: 110px;
  }

  .settings-save-bar {
    display: grid;
  }

  .settings-save-bar .button {
    width: 100%;
  }

  .filter-bar {
    grid-template-columns: 1fr;
  }

  .filter-bar .filter-control:first-child,
  .filter-bar > .button {
    grid-column: auto;
  }

  .page-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .section-header {
    display: grid;
  }

  .section-actions .button {
    flex: 1 1 auto;
  }

  .lead-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .pipeline-toolbar {
    display: grid;
  }

  .document-item {
    display: grid;
  }

  .document-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .document-actions .button,
  .document-actions a {
    width: 100%;
    min-height: 44px;
  }

  .copy-field,
  .notification-pagination {
    display: grid;
    grid-template-columns: 1fr;
  }

  .copy-field .button,
  .notification-pagination .button {
    width: 100%;
  }

  .pagination {
    display: grid;
  }

  .pagination .inline-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .confirm-shell .dialog-actions {
    grid-template-columns: 1fr 1fr;
  }

  .dialer-agent-controls,
  .dialer-device-state,
  .dialer-status-select {
    align-items: stretch;
    display: grid;
  }

  .dialer-status-select select,
  .dialer-device-state .button {
    width: 100%;
  }

  .softphone-card {
    margin-right: -0.35rem;
    margin-left: -0.35rem;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .softphone-controls {
    gap: 0.38rem;
  }

  .softphone-control {
    min-height: 68px;
  }

  .dialer-queue-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .dialer-queue-item > .button {
    width: 100%;
  }

  .dialer-queue-select {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .dialer-queue-select .stage-badge {
    grid-column: 2;
  }

  .dialer-disposition-form,
  .verified-number-add {
    grid-template-columns: 1fr;
  }

  .dialer-caller-id-heading,
  .dialer-caller-id-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .dialer-caller-id-heading {
    display: grid;
  }

  .dialer-caller-id-heading > .button,
  .dialer-caller-id-remove {
    width: 100%;
  }

  .dialer-disposition-submit {
    align-items: stretch;
    display: grid;
  }

  .dialer-history-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .dialer-history-item > .button {
    grid-column: 2;
    width: fit-content;
  }

  .dialer-callback-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dialer-callback-item > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dialer-history-result {
    grid-column: 2;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
  }

  .dialer-history-badges,
  .call-history-mobile-badges {
    justify-content: flex-start;
  }

  .dialer-admin-metrics {
    grid-template-columns: 1fr;
  }

  .dialer-campaign-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .dialer-campaign-summary > div:first-child {
    flex: 1 1 100%;
  }

  .dialer-campaign-summary-badges {
    justify-content: flex-start;
  }

  .dialer-internal-test-current {
    align-items: flex-start;
    display: grid;
  }

  .dialer-internal-test-disable .button {
    width: 100%;
  }

  .dialer-queue-summary,
  .dialer-import-form,
  .dialer-analytics-filters {
    grid-template-columns: 1fr;
  }

  .dialer-attempt-heading,
  .dialer-attempt-item {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .dialer-attempt-heading {
    display: grid;
  }

  .dialer-attempt-legend {
    justify-content: flex-start;
  }

  .dialer-attempt-state {
    width: fit-content;
    text-align: left;
  }

  .dialer-import-form > .button,
  .dialer-analytics-filter-actions {
    grid-column: 1;
    width: 100%;
  }

  .dialer-import-form > .button {
    min-height: 44px;
  }

  .dialer-analytics-summary,
  .dialer-analytics-outcomes ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dialer-rep-table {
    min-width: 0;
  }

  .dialer-rep-table,
  .dialer-rep-table tbody,
  .dialer-rep-table tr,
  .dialer-rep-table th,
  .dialer-rep-table td {
    display: block;
  }

  .dialer-rep-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .dialer-rep-table tbody tr {
    padding: 0.7rem;
    border-bottom: 1px solid var(--line);
  }

  .dialer-rep-table tbody tr:last-child {
    border-bottom: 0;
  }

  .dialer-rep-table tbody th {
    padding: 0 0 0.45rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.82rem;
    text-align: left;
  }

  .dialer-rep-table tbody td {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.34rem 0;
    border: 0;
    text-align: right;
  }

  .dialer-rep-table tbody td:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .dialer-rep-table tbody td::before {
    color: var(--ink-500);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .dialer-rep-table tbody td:nth-of-type(1)::before { content: "Attempts"; }
  .dialer-rep-table tbody td:nth-of-type(2)::before { content: "Answered"; }
  .dialer-rep-table tbody td:nth-of-type(3)::before { content: "Contacts"; }
  .dialer-rep-table tbody td:nth-of-type(4)::before { content: "Connect rate"; }
  .dialer-rep-table tbody td:nth-of-type(5)::before { content: "Abandoned"; }
  .dialer-rep-table tbody td:nth-of-type(6)::before { content: "Talk time"; }
  .dialer-rep-table tbody td:nth-of-type(7)::before { content: "Average talk"; }
  .dialer-rep-table tbody td:nth-of-type(8)::before { content: "Outcomes"; }
}

@media (max-width: 380px) {
  .main-content {
    padding-right: 0.6rem;
    padding-left: 0.6rem;
  }

  .dialer-session-rail {
    margin-right: -0.25rem;
    margin-left: -0.25rem;
  }

  .dialer-session-campaign-controls {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .dialer-agent-identity span:not(.dialer-presence) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dialer-analytics-summary,
  .dialer-analytics-outcomes ul {
    grid-template-columns: 1fr;
  }

  .dialer-action-dock {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
  }

  .softphone-control {
    min-height: 64px;
    font-size: 0.62rem;
  }
}

.customer-messages-page {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.8fr);
  gap: 1rem;
  align-items: start;
}

.customer-messages-page > .section-card { margin: 0; min-width: 0; }
.customer-message-configuration, .customer-message-page-status { grid-column: 1 / -1; }
.customer-message-page-status { margin: 0; }
.customer-message-configuration {
  padding: 1rem;
  border: 1px solid var(--solar-300);
  border-radius: var(--radius-md);
  background: var(--solar-100);
}
.customer-message-configuration p { margin: 0.4rem 0; }
.customer-message-configuration code { overflow-wrap: anywhere; }
.customer-conversations { padding: 1rem; }
.customer-conversations > h2 { margin: 0 0 0.8rem; font-size: 1rem; }
.customer-message-search { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.customer-message-search input { width: 100%; min-width: 0; }
.customer-conversation-list { display: grid; gap: 0.35rem; max-height: 65vh; overflow-y: auto; }
.customer-conversation {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0.25rem;
  padding: 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.customer-conversation:hover { background: var(--surface-soft); }
.customer-conversation.is-selected { background: var(--brand-50); border-color: var(--brand-100); }
.customer-conversation-top { display: flex; gap: 0.5rem; justify-content: space-between; align-items: baseline; }
.customer-conversation-top strong { overflow-wrap: anywhere; }
.customer-conversation-top time { flex-shrink: 0; font-size: 0.7rem; color: var(--ink-600); }
.customer-conversation-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-600); font-size: 0.82rem; }
.customer-message-thread { padding: 0; overflow: hidden; }
.customer-message-thread-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.customer-message-identity { flex: 1; min-width: 140px; overflow-wrap: anywhere; }
.customer-message-identity h2 { margin: 0; font-size: 1.1rem; }
.customer-message-identity p { margin: 0.15rem 0 0; }
.customer-message-back { display: none; }
.customer-message-history { display: flex; flex-direction: column; gap: 0.8rem; min-height: 220px; max-height: 49vh; overflow-y: auto; padding: 1rem; background: var(--surface-soft); }
.customer-message-bubble { padding: 0.8rem; border: 1px solid var(--line); border-radius: 12px; max-width: 88%; min-width: 0; }
.customer-message-bubble.is-incoming { align-self: flex-start; background: white; border-bottom-left-radius: 3px; }
.customer-message-bubble.is-outgoing { align-self: flex-end; background: var(--brand-50); border-color: var(--brand-100); border-bottom-right-radius: 3px; }
.customer-message-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; justify-content: space-between; color: var(--ink-600); font-size: 0.7rem; }
.customer-message-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.55rem 0; }
.customer-message-attachments { display: grid; gap: 0.4rem; margin: 0.5rem 0; overflow-wrap: anywhere; }
.customer-message-composer { padding: 1rem; border-top: 1px solid var(--line); }
.customer-message-composer > label { display: block; font-weight: 650; margin-bottom: 0.4rem; }
.customer-message-composer textarea { display: block; width: 100%; resize: vertical; min-height: 80px; }
.customer-message-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.6rem; }
.customer-message-composer .form-status:empty { display: none; }
.customer-message-review { display: grid; gap: 1rem; }
.customer-message-consent { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; }
.customer-message-consent input { flex-shrink: 0; margin-top: 0.2rem; }
.customer-message-thread > .read-only-note { margin: 0; padding: 1rem; border-radius: 0; }

@media (max-width: 760px) {
  .customer-messages-page { grid-template-columns: minmax(0, 1fr); }
  .customer-messages-page:not(.has-conversation) .customer-message-thread,
  .customer-messages-page.has-conversation .customer-conversations { display: none; }
  .customer-message-back { display: inline-flex; flex-basis: 100%; justify-content: flex-start; }
  .customer-message-history { max-height: 43vh; padding: 0.65rem; }
  .customer-message-bubble { max-width: 95%; }
  .customer-message-thread-heading, .customer-message-composer { padding: 0.8rem; }
  .customer-message-composer textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .app-header,
  .sidebar,
  .page-actions,
  .lead-quick-actions,
  .form-actions,
  .note-composer,
  .upload-box {
    display: none !important;
  }

  .main-content {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .card,
  .section-card {
    break-inside: avoid;
    box-shadow: none;
  }
}
.live-panel-host { display: contents; }
.pitch-page, .pitch-editor { display: grid; gap: 1rem; min-width: 0; }
.pitch-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
.pitch-reading-panel { min-width: 0; }
.pitch-reading-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.pitch-editor textarea { width: 100%; min-height: 12rem; resize: vertical; }
.pitch-objections { margin-top: 1rem; }
.pitch-objections summary { cursor: pointer; padding: .7rem 0; font-weight: 650; }
.manager-mode-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) {
  .pitch-grid { grid-template-columns: minmax(0, 1fr); }
  .manager-listening-rail { flex-wrap: wrap; gap: .75rem; }
  .manager-mode-controls { width: 100%; }
  .manager-mode-controls button { min-height: 44px; flex: 1 1 120px; }
}
.call-history-contact { border-top: 1px solid var(--border, #d9e1e5); }
.call-history-contact-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: 1rem; cursor: pointer; }
.call-history-contact-summary::before { content: "▶"; font-size: .7rem; }
.call-history-contact[open] > .call-history-contact-summary::before { content: "▼"; }
.call-history-contact-summary > span:first-of-type { flex: 1; min-width: 140px; }
.call-history-contact-body { padding: 0 .5rem .5rem; min-width: 0; }
/* Management reporting and draft-only customer follow-up. */
.management-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: end; }
.management-filter-grid input, .management-filter-grid select, .management-filter-grid .filter-control { min-width: 0; width: 100%; }
.management-filter-grid .form-status { grid-column: 1 / -1; }
.filtered-lead-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 320px); gap: 14px; overflow-x: auto; padding: 16px; align-items: start; }
.filtered-lead-column { padding: 12px; background: var(--surface-muted, #f5f7fa); border-radius: 12px; min-width: 0; }
.filtered-lead-column > h3 { margin: 0 0 12px; font-size: 14px; }
.filtered-lead-column h3 small { display: block; font-weight: 400; margin-top: 4px; }
.filtered-lead-column .mobile-data-card { display: block; margin-bottom: 10px; overflow-wrap: anywhere; }
.drip-campaign-list, .drip-steps { display: grid; gap: 16px; }
.drip-step { border: 1px solid var(--border, #dce2e9); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
.drip-step h3 { margin: 0; }
.drip-step label { display: grid; gap: 6px; }
.drip-step textarea, .drip-step input { width: 100%; }
.drip-preview { display: grid; gap: 14px; padding-left: 24px; }
.drip-preview p { margin: 6px 0; overflow-wrap: anywhere; }
.customer-message-search { flex-wrap: wrap; }
.customer-message-search select { width: 100%; min-width: 0; }
.customer-conversations .pagination { flex-wrap: wrap; padding: 12px 0; }
.customer-conversations .pagination p { font-size: 12px; }
.calendar-toolbar > .field-group { grid-column: 1 / -1; width: 100%; min-width: 0; }
.calendar-toolbar > .field-group select { width: 100%; min-width: 0; }
.analytics-mobile-list .mobile-data-card > span { display: grid; gap: 3px; margin-bottom: 12px; color: var(--text-muted, #68757f); font-size: 12px; }
.analytics-mobile-list .mobile-data-card > span:last-child { margin-bottom: 0; }
.analytics-mobile-list .mobile-data-card > span > strong { display: block; color: var(--text, #1d292f); font-size: 14px; overflow-wrap: anywhere; }
.stage-dq-shade, .stage-dq-roof { --stage-color: #85715a; }
.stage-dq-credit { --stage-color: #9c6a81; }
.stage-canceled-not-interested { --stage-color: #a65454; }
.availability-form, .availability-hours, .availability-blocks { display: grid; gap: 16px; }
.availability-hour-row { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(2, minmax(170px, 1fr)) auto; gap: 12px; align-items: center; }
.availability-block-row { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)) minmax(140px, 1fr) auto; gap: 12px; align-items: center; }
.availability-hour-row > *, .availability-block-row > * { min-width: 0; }
.availability-form > .button { justify-self: start; }
.verified-slot-picker .schedule-slot-bubbles { max-height: 320px; overflow-y: auto; }
.verified-slot-picker .schedule-slot { min-height: 44px; white-space: normal; }
@media (max-width: 1000px) {
  .availability-hour-row, .availability-block-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
}
@media (max-width: 600px) {
  .availability-hour-row, .availability-block-row { grid-template-columns: 1fr; }
  .management-filter-grid { grid-template-columns: 1fr; }
  .filtered-lead-board { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; }
  .calendar-toolbar { flex-wrap: wrap; }
}

/* Setter overview: current work stays distinct from date-filtered booking credit. */
.setter-dashboard-operations { display: grid; gap: 1rem; margin: 1rem 0; }
.setter-dashboard-queues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.setter-pipeline-summary { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 800px) { .setter-dashboard-queues { grid-template-columns: 1fr; } }

/* Shared Leads & Pipeline workspace */
.lead-workspace-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.lead-workspace-toolbar .field-hint { margin: 0; }
.lead-view-toggle { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.lead-view-toggle .button { min-width: 6.5rem; min-height: 44px; }
.lead-pipeline-results { min-width: 0; }
.pipeline-board.pipeline-board-single { min-width: 0; grid-template-columns: minmax(250px, 520px); }

/* Optional predictive screening control beside the campaign Join button. */
.dialer-session-campaign-controls { grid-template-columns: minmax(0, 1fr) auto auto; }
.dialer-detection-toggle { white-space: nowrap; }
.dialer-detection-toggle[aria-checked="true"]::before { content: "●"; margin-right: .4rem; }

/* Admin campaign membership browsing; independent of the pipeline. */
.campaign-leads-filters { display:flex; flex-wrap:wrap; gap:14px; align-items:end; padding:20px; margin-bottom:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.campaign-leads-filters .field-group { flex:1 1 175px; min-width:0; }
.campaign-leads-filters .field-group:first-child { flex-basis:300px; }
.campaign-leads-filters .checkbox-label { align-self:center; }
.campaign-leads-campaigns { display:grid; gap:12px; }
.campaign-leads-campaign { display:flex; align-items:center; justify-content:space-between; gap:24px; color:inherit; text-decoration:none; margin:0; }
.campaign-leads-campaign:hover { border-color:var(--brand-700); }
.campaign-leads-campaign h3,.campaign-leads-campaign p { margin:0 0 6px; }
.campaign-leads-count { display:flex; flex-direction:column; min-width:105px; }
.campaign-leads-count strong { font-size:1.7rem; }
.campaign-leads-metrics { margin:20px 0; }
.campaign-leads-table { min-width:1150px; }
.campaign-leads-table td { max-width:260px; overflow-wrap:anywhere; vertical-align:top; }
.campaign-leads-table td small { display:block; margin-top:6px; color:var(--ink-600); }
.campaign-leads-source { padding:16px; white-space:normal; }
.campaign-leads-source-fields { display:grid; grid-template-columns:minmax(120px,1fr) minmax(180px,3fr); gap:8px 20px; }
.campaign-leads-source-fields dt { font-weight:600; }
.campaign-leads-source-fields dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.campaign-leads-receipt + .campaign-leads-receipt { border-top:1px solid var(--line); margin-top:20px; padding-top:12px; }
@media(max-width:700px) { .campaign-leads-campaign { display:grid; grid-template-columns:1fr auto; gap:14px; } .campaign-leads-filters .inline-actions { flex-wrap:wrap; } }

/* Unified reporting and evidence-based daily rep timelines. */
.reports-nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-bottom:22px; }
.reports-tab { padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); text-align:left; color:var(--ink-700); cursor:pointer; }
.reports-tab strong,.reports-tab small { display:block; }
.reports-tab strong { font-size:15px; margin-bottom:4px; }
.reports-tab small { font-size:12px; line-height:1.45; }
.reports-tab:hover { border-color:var(--brand-700); }
.reports-tab.is-active { background:var(--brand-50); border-color:var(--brand-700); color:var(--brand-900); box-shadow:inset 0 3px 0 var(--brand-700); }
.reports-tab:focus-visible { outline:3px solid var(--solar-500); outline-offset:3px; }
.rep-activity-filters { display:flex; align-items:end; flex-wrap:wrap; gap:16px; }
.rep-activity-filters label { display:grid; gap:6px; flex:1; min-width:200px; font-weight:600; }
.rep-activity-filters .form-status:empty { display:none; }
.rep-activity-legend { display:flex; flex-wrap:wrap; gap:10px 20px; padding:10px 0 18px; font-size:12px; color:var(--ink-700); }
.rep-activity-legend>span { display:inline-flex; align-items:center; gap:7px; }
.rep-activity-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; }
.rep-activity-card { margin-bottom:16px; }
.rep-activity-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.rep-activity-heading h2 { margin:0; font-size:17px; }
.rep-activity-heading p { margin:4px 0 12px; font-size:12px; }
.rep-activity-chart { padding:12px 0; }
.rep-activity-axis { display:flex; justify-content:space-between; gap:4px; font-size:10px; color:var(--ink-600); margin-bottom:8px; }
.rep-activity-track { position:relative; height:30px; overflow:hidden; border-radius:7px; background:#f0f2f4; border:1px solid var(--line); }
.rep-activity-segment { position:absolute; height:100%; top:0; }
.rep-activity-dialer_ready { background:#177d72; }
.rep-activity-in_call { background:#2869b5; }
.rep-activity-wrap_up { background:#7b56a8; }
.rep-activity-break { background:#d58a16; }
.rep-activity-signed_in { background:#7c8d9e; }
.rep-activity-unobserved { background:repeating-linear-gradient(135deg,#e8ecef,#e8ecef 5px,#f5f7f8 5px,#f5f7f8 10px); }
.rep-activity-future { position:absolute; top:0; right:0; height:100%; background:#fafbfc; border-left:1px dashed #71817e; }
.rep-activity-totals { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:12px; color:var(--ink-700); padding:6px 0; }
.rep-activity-totals strong { color:var(--ink-950); }
.rep-activity-details { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.rep-activity-details>summary { cursor:pointer; color:var(--brand-800); font-weight:600; }
.rep-activity-details .section-card { margin-top:12px; box-shadow:none; }
@media(max-width:700px) {
 .reports-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .reports-tab { padding:12px; }
 .reports-tab small { font-size:11px; }
 .rep-activity-filters { display:grid; grid-template-columns:1fr; }
 .rep-activity-filters label { min-width:0; }
 .rep-activity-axis span:nth-child(even) { display:none; }
 .rep-activity-heading { flex-wrap:wrap; }
 .rep-activity-legend { gap:8px 12px; }
 .rep-activity-totals { gap:6px 12px; }
}

.rep-activity-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.rep-activity-period-list { list-style:none; padding:0; margin:14px 0; }
.rep-activity-period-list li { display:grid; grid-template-columns:minmax(0,1fr) 170px 85px; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; }
.rep-activity-period-list strong { display:flex; align-items:center; gap:8px; font-weight:600; }
.rep-activity-period-list i { width:10px; height:10px; flex-shrink:0; border-radius:3px; }
.rep-activity-period-clock,.rep-activity-period-duration { font-variant-numeric:tabular-nums; color:var(--ink-700); }
.rep-activity-period-duration { text-align:right; }
@media(min-width:1250px) { .rep-activity-metrics { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:700px) {
 .rep-activity-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .rep-activity-metrics .analytics-metric { padding:14px; }
 .rep-activity-metrics .analytics-metric-value { font-size:25px; }
 .rep-activity-period-list li { grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; }
 .rep-activity-period-clock { grid-column:1; grid-row:2; font-size:12px; }
 .rep-activity-period-duration { grid-column:2; grid-row:1 / span 2; }
}

/* Productivity/performance reports only; calling surfaces are unchanged. */
.reports-focused-nav { grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto; align-items:start; }
.reports-additional { position:relative; padding:14px 12px; font-size:13px; color:var(--ink-700); }
.reports-additional>summary { cursor:pointer; padding:8px 0; }
.reports-additional>div { display:grid; gap:8px; margin-top:10px; }
.productivity-report { display:grid; gap:18px; }
.productivity-report>.section-card,.productivity-report>.pagination { margin:0; }
.productivity-intro,.productivity-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.productivity-intro h2 { font-size:22px; margin:0 0 6px; }
.productivity-intro p { margin:0; color:var(--ink-700); font-size:13px; }
.productivity-scope { font-size:12px; color:var(--ink-600); max-width:260px; text-align:right; }
.productivity-section-heading h2,.productivity-section-heading h3 { margin:0; font-size:17px; }
.productivity-section-heading>strong { color:var(--brand-800); font-size:18px; }
.productivity-allocation { display:flex; height:16px; margin:22px 0 18px; background:var(--surface-2,#f1f5f4); overflow:hidden; border-radius:5px; }
.productivity-allocation>span { height:100%; }
.productivity-allocation-labels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.productivity-allocation-labels>div { display:grid; gap:7px; }
.productivity-allocation-labels>div>span { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-700); }
.productivity-allocation-labels i { width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.productivity-allocation-labels strong { font-size:21px; font-variant-numeric:tabular-nums; }
.productivity-allocation-labels small { font-size:11px; color:var(--ink-600); }
.productivity-chart-controls { display:flex; flex-wrap:wrap; gap:12px; }
.productivity-chart-controls label,.productivity-performance label { display:flex; align-items:center; gap:8px; font-size:12px; }
.productivity-chart-controls select,.productivity-performance select { padding:8px 10px; min-height:36px; max-width:220px; }
.productivity-board .rep-activity-legend { padding-top:20px; }
.productivity-grid-axis,.productivity-row-summary { display:grid; grid-template-columns:160px minmax(180px,1fr) repeat(3,76px); gap:16px; align-items:center; }
.productivity-grid-axis { padding:0 12px 10px; color:var(--ink-600); font-size:11px; }
.productivity-grid-axis>span:nth-last-child(-n+3) { text-align:right; }
.productivity-axis { display:flex; justify-content:space-between; gap:3px; font-size:10px; color:var(--ink-600); font-variant-numeric:tabular-nums; }
.productivity-row { margin:0; border-top:1px solid var(--line); }
.productivity-row-summary { list-style:none; cursor:pointer; padding:18px 12px; border-radius:6px; }
.productivity-row-summary::-webkit-details-marker { display:none; }
.productivity-row-summary:hover,.productivity-row[open]>.productivity-row-summary { background:var(--brand-50); }
.productivity-row-summary:focus-visible,.productivity-performance-button:focus-visible { outline:3px solid var(--solar-500); outline-offset:2px; }
.productivity-rep-name { display:grid; gap:6px; }
.productivity-rep-name strong { font-size:13px; overflow-wrap:anywhere; }
.productivity-rep-name strong::before { content:'›'; display:inline-block; width:14px; color:var(--brand-700); }
.productivity-row[open] .productivity-rep-name strong::before { content:'⌄'; }
.productivity-rep-name small { font-size:11px; color:var(--ink-600); padding-left:14px; }
.productivity-row-track { min-width:0; }
.productivity-row-track>.productivity-axis { display:none; }
.productivity-row .rep-activity-track { height:26px; border-radius:4px; }
.productivity-row-value { text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.productivity-row-value small { display:none; }
.productivity-row-details { padding:20px; background:#fbfcfd; border-top:1px solid var(--line); }
.productivity-row-details .rep-activity-totals { margin-top:12px; }
.productivity-performance { margin:20px 0; }
.productivity-performance-bars { display:grid; gap:4px; margin-top:20px; }
.productivity-performance-button { border:0; border-radius:5px; background:transparent; padding:11px 8px; width:100%; color:var(--ink-950); text-align:left; cursor:pointer; }
.productivity-performance-button:hover { background:var(--brand-50); }
.productivity-performance-row { display:grid; grid-template-columns:170px minmax(30px,1fr) 65px; gap:18px; align-items:center; font-size:13px; }
.productivity-performance-row>span:first-child { overflow-wrap:anywhere; }
.productivity-performance-row>strong { text-align:right; font-variant-numeric:tabular-nums; }
.productivity-performance-track { display:block; height:21px; border-radius:4px; overflow:hidden; background:#edf3f2; }
.productivity-performance-track>span { display:block; height:100%; background:#177d72; border-radius:4px; }
@media(max-width:1150px) {
 .productivity-grid-axis,.productivity-row-summary { grid-template-columns:130px minmax(140px,1fr) repeat(3,62px); gap:10px; }
 .productivity-chart-controls { gap:6px; }
 .productivity-chart-controls select { max-width:175px; }
 .productivity-section-heading { flex-wrap:wrap; }
 .productivity-allocation-labels { gap:10px; }
}
@media(max-width:850px) {
 .reports-focused-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .reports-additional { grid-column:1/-1; padding:0 4px; }
 .reports-additional>div { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .productivity-intro { align-items:start; flex-direction:column; gap:8px; }
 .productivity-scope { max-width:none; text-align:left; }
 .productivity-allocation-labels { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 10px; }
 .productivity-grid-axis { display:none; }
 .productivity-row-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 8px; padding:18px 0; }
 .productivity-rep-name { grid-column:1/-1; }
 .productivity-row-track { grid-column:1/-1; }
 .productivity-row-track>.productivity-axis { display:flex; margin-bottom:7px; }
 .productivity-row-value { text-align:left; display:grid; gap:4px; }
 .productivity-row-value small { display:block; color:var(--ink-600); font-size:11px; }
 .productivity-row-details { padding:16px 8px; }
 .productivity-performance-row { grid-template-columns:110px minmax(30px,1fr) 35px; gap:10px; }
}
@media(max-width:480px) {
 .productivity-allocation-labels { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .productivity-chart-controls { display:grid; width:100%; }
 .productivity-chart-controls label { justify-content:space-between; }
 .productivity-chart-controls select { max-width:200px; }
 .productivity-axis span:nth-child(even) { display:none; }
 .productivity-report .section-card { padding:16px; }
 .productivity-section-heading>strong { font-size:16px; }
}

/* Rep schedule planner and observed accountability. */
.schedule-toolbar, .schedule-policy, .schedule-pagination, .schedule-revision-line { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.schedule-toolbar label, .schedule-policy label { display:grid; gap:6px; font-size:.86rem; font-weight:600; }
.schedule-toolbar input, .schedule-toolbar select { min-width:140px; }
.schedule-toolbar h2 { margin:0; margin-right:auto; }
.schedule-policy { margin:16px 0; }
.schedule-policy input { max-width:220px; }
.schedule-grid-scroll { overflow-x:auto; padding:0; }
.schedule-grid { width:100%; min-width:1150px; border-collapse:collapse; table-layout:fixed; }
.schedule-grid th, .schedule-grid td { padding:10px; border-bottom:1px solid var(--border,#e0e5eb); vertical-align:top; text-align:left; }
.schedule-grid th:first-child { width:150px; background:var(--surface,#fff); }
.schedule-grid th small, .schedule-cell small, .schedule-cell-period { display:block; margin-top:6px; }
.schedule-cell { width:100%; min-height:118px; padding:10px; text-align:left; background:#f7f9fc; color:#172b45; border:1px solid #dde5ee; border-radius:10px; cursor:pointer; font:inherit; font-size:.8rem; }
.schedule-cell:hover, .schedule-cell:focus-visible { border-color:#2563eb; background:#eff6ff; }
.schedule-cell-period { padding:4px 6px; border-radius:5px; }
.schedule-work { background:#c8ddff; color:#153d78; }
.schedule-break { background:#fbe8bc; color:#634704; }
.schedule-leave { background:#e8ddfa; color:#553081; }
.schedule-excused { background:#bbebd7; color:#145941; z-index:2; }
.schedule-period-editor { display:grid; gap:10px; margin:12px 0; }
.schedule-period-editor > button { justify-self:start; }
.schedule-period-row { display:grid; grid-template-columns:140px 1fr 1fr 1.4fr auto; gap:10px; align-items:center; padding:12px; border:1px solid #dee5ed; border-radius:10px; }
.schedule-period-row > label { display:grid; gap:5px; }
.schedule-period-row input[type=time] { min-width:115px; }
.schedule-period-row .checkbox-label { font-size:.76rem; font-weight:400; }
.schedule-definition details { padding:14px 0; }
.schedule-definition summary, .schedule-pattern-days summary { cursor:pointer; font-weight:600; padding:8px 0; }
.schedule-targets { display:flex; flex-wrap:wrap; gap:12px; max-height:200px; overflow:auto; margin:16px 0; border:1px solid #dee5ed; border-radius:10px; }
.schedule-preview-list { max-height:430px; overflow:auto; border:1px solid #dee5ed; border-radius:10px; padding:12px; margin:12px 0; }
.schedule-preview-list > div, .schedule-revision { padding:10px 0; border-bottom:1px solid #dee5ed; }
.schedule-preview-list p { margin:4px 0; }
.schedule-pagination { justify-content:flex-end; margin:16px 0; }
.schedule-pagination > span { margin-right:auto; }
.accountability-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.accountability-summary > div { display:grid; gap:8px; padding:20px; background:var(--surface,#fff); border:1px solid #dfe6ed; border-radius:14px; }
.accountability-summary strong { font-size:1.6rem; }
.accountability-summary span { color:#52657b; font-size:.85rem; }
.accountability-rows { display:grid; gap:12px; }
.accountability-rep > summary { display:flex; gap:20px; align-items:center; flex-wrap:wrap; cursor:pointer; list-style:none; }
.accountability-rep > summary > div:first-child { display:grid; gap:7px; min-width:140px; margin-right:auto; }
.accountability-rep > summary > span { font-size:.82rem; }
.accountability-rep > summary::after { content:"Expand ▾"; color:#4b607a; font-size:.8rem; }
.accountability-rep[open] > summary::after { content:"Collapse ▴"; }
.accountability-rep > p { margin-top:18px; }
.accountability-status { display:inline-block; width:max-content; font-size:.78rem; padding:4px 9px; border-radius:20px; background:#edf1f5; color:#46556b; }
.accountability-needs_review { background:#fff0ca; color:#785012; }
.accountability-needs_attention { background:#ffe3db; color:#8c3224; }
.accountability-on_track { background:#d6f4e4; color:#215d40; }
.accountability-score { display:grid; gap:4px; }
.accountability-score strong { font-size:1.35rem; }
.accountability-score small { color:#52657b; }
.accountability-day { border-top:1px solid #dfe6ed; padding:14px 0; }
.accountability-day > summary { display:flex; gap:15px; flex-wrap:wrap; align-items:center; cursor:pointer; }
.accountability-day > summary > strong { margin-right:auto; }
.accountability-day > summary > span { font-size:.82rem; }
.accountability-tracks { margin:18px 0; }
.accountability-tracks > div:not(.accountability-axis) { display:grid; grid-template-columns:85px 1fr; gap:12px; align-items:center; margin:10px 0; font-size:.8rem; }
.accountability-track { height:22px; position:relative; background:#edf0f4; border:1px solid #d5dce6; border-radius:5px; overflow:hidden; }
.accountability-block { position:absolute; top:0; bottom:0; min-width:1px; }
.accountability-axis { display:flex; justify-content:space-between; margin-left:97px; color:#627186; font-size:.7rem; }
.accountability-day-metrics { font-size:.83rem; line-height:1.8; }
.accountability-gaps { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.personal-schedule { margin:20px 0; }
.personal-schedule-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0; }
.personal-schedule-days > div { border:1px solid #dfe6ed; border-radius:10px; padding:12px; }
.personal-schedule-days p { font-size:.82rem; margin:6px 0; }
.personal-schedule .accountability-rep { box-shadow:none; padding:12px 0; border:0; }
@media(max-width:800px) {
  .schedule-period-row { grid-template-columns:1fr 1fr; }
  .schedule-period-row > select, .schedule-period-row > input[type=text] { grid-column:1/-1; }
  .accountability-summary { grid-template-columns:1fr 1fr; }
  .accountability-rep > summary { gap:12px; }
  .accountability-rep > summary > span { width:calc(50% - 12px); }
  .schedule-toolbar > label { flex:1; min-width:125px; }
}
@media(max-width:440px) {
  .accountability-summary > div { padding:14px; }
  .accountability-summary strong { font-size:1.2rem; }
  .schedule-toolbar > button { flex:1; }
  .accountability-day > summary { gap:8px; }
  .accountability-tracks > div:not(.accountability-axis) { grid-template-columns:64px 1fr; gap:7px; }
  .accountability-axis { margin-left:71px; }
}
.accountability-legend { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 8px; font-size:.76rem; color:#4d627a; }
.accountability-legend > span { display:inline-flex; gap:5px; align-items:center; }
.accountability-legend i { display:inline-block; width:10px; height:10px; border:1px solid #9aaaba; border-radius:3px; }
.reports-focused-nav { grid-template-columns:repeat(3,minmax(160px,1fr)) auto; }
@media(max-width:900px) { .reports-focused-nav { grid-template-columns:repeat(3,minmax(0,1fr)); } .reports-additional { grid-column:1/-1; } }
@media(max-width:560px) { .reports-focused-nav { grid-template-columns:1fr; } .reports-tab small { display:none; } }

/* Read-only closer schedules and linked team overviews. */
.closer-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.closer-week-day { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); }
.closer-week-day h3 { margin: 0 0 8px; font-size: .9rem; }
.closer-week-day p { margin: 4px 0; font-size: .85rem; overflow-wrap: anywhere; }
.team-overview-link { display: block; color: inherit; text-decoration: none; padding: 12px; margin: -12px -12px 14px; border-radius: 10px; }
.team-overview-link:hover, .team-overview-link:focus-visible { background: var(--surface-muted); outline: 2px solid var(--border); }
.team-overview-link h2 { margin-top: 0; }
@media (max-width: 1100px) { .closer-week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .closer-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }