:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-muted: #eef3ff;
  --line: #dfe7f5;
  --text: #14213d;
  --text-soft: #58667d;
  --primary: #3b82f6;
  --primary-dark: #1d4ed8;
  --primary-fill: #1d4ed8;
  --primary-soft: #dbeafe;
  --primary-glow: #60a5fa;
  --success: #16a34a;
  --success-soft: #dcfce7;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* Palette: one token per legacy color so themes can remap them.
   Generated from the original literals; light values are unchanged. */
:root {
  --on-accent: #ffffff;
  --on-primary: var(--on-accent);
  --on-primary-fill: var(--on-primary);
  --primary-gradient-end: var(--primary-fill);
  --on-success: var(--on-accent);
  --on-warning: #14213d;
  --c-f9fbff: #f9fbff;
  --c-f8faff: #f8faff;
  --c-f6f8ff: #f6f8ff;
  --c-f7f9fd: #f7f9fd;
  --c-fff5f5: #fff5f5;
  --c-f3f7ff: #f3f7ff;
  --c-f5f7fc: #f5f7fc;
  --c-f3f6fc: #f3f6fc;
  --c-f0f9ff: #f0f9ff;
  --c-f0f3ff: #f0f3ff;
  --c-f3f5fb: #f3f5fb;
  --c-eef5ff: #eef5ff;
  --c-eef4ff: #eef4ff;
  --c-f3f5fa: #f3f5fa;
  --c-fff9ed: #fff9ed;
  --c-f1f3fb: #f1f3fb;
  --c-f4f0fb: #f4f0fb;
  --c-f0f3fa: #f0f3fa;
  --c-f9f1f3: #f9f1f3;
  --c-f3f4f6: #f3f4f6;
  --c-eaf6ff: #eaf6ff;
  --c-ede9fe: #ede9fe;
  --c-fff8e8: #fff8e8;
  --c-f0f1f6: #f0f1f6;
  --c-ffe8e7: #ffe8e7;
  --c-eef1f7: #eef1f7;
  --c-eef7f4: #eef7f4;
  --c-edf1f7: #edf1f7;
  --c-eef1f6: #eef1f6;
  --c-edf0f6: #edf0f6;
  --c-f0f1f3: #f0f1f3;
  --c-eaf0f8: #eaf0f8;
  --c-fee2e2: #fee2e2;
  --c-fbe4e8: #fbe4e8;
  --c-e0f2fe: #e0f2fe;
  --c-e7edf7: #e7edf7;
  --c-e8edf4: #e8edf4;
  --c-e5eaf7: #e5eaf7;
  --c-e7eaf3: #e7eaf3;
  --c-dbe7ff: #dbe7ff;
  --c-dbeafe: #dbeafe;
  --c-e9defb: #e9defb;
  --c-e6eaf3: #e6eaf3;
  --c-dcfce7: #dcfce7;
  --c-e5e9f2: #e5e9f2;
  --c-e4e8f2: #e4e8f2;
  --c-fff3d6: #fff3d6;
  --c-fff1d5: #fff1d5;
  --c-e2e7f2: #e2e7f2;
  --c-dce4f7: #dce4f7;
  --c-e0e5f0: #e0e5f0;
  --c-e5e7eb: #e5e7eb;
  --c-d9f5e9: #d9f5e9;
  --c-dce3f1: #dce3f1;
  --c-d9e0ee: #d9e0ee;
  --c-fef3c7: #fef3c7;
  --c-ffedbd: #ffedbd;
  --c-f0caca: #f0caca;
  --c-bfdcf5: #bfdcf5;
  --c-bccaf3: #bccaf3;
  --c-ccd3e2: #ccd3e2;
  --c-cbd5e1: #cbd5e1;
  --c-efbcbc: #efbcbc;
  --c-a5b4fc: #a5b4fc;
  --c-c3cada: #c3cada;
  --c-c4cbd9: #c4cbd9;
  --c-f4a1a6: #f4a1a6;
  --c-93c5fd: #93c5fd;
  --c-aab8cc: #aab8cc;
  --c-60a5fa: #60a5fa;
  --c-9aa3b5: #9aa3b5;
  --c-9aa0b2: #9aa0b2;
  --c-969cac: #969cac;
  --c-8590a7: #8590a7;
  --c-4f46e5: #4f46e5;
  --c-7c3aed: #7c3aed;
  --c-858da0: #858da0;
  --c-e73753: #e73753;
  --c-7984a4: #7984a4;
  --c-7452c8: #7452c8;
  --c-7f879a: #7f879a;
  --c-be5a64: #be5a64;
  --c-3b5bdb: #3b5bdb;
  --c-7a8498: #7a8498;
  --c-73809e: #73809e;
  --c-2563eb: #2563eb;
  --c-5748c5: #5748c5;
  --c-cc3d48: #cc3d48;
  --c-7050b3: #7050b3;
  --c-db2777: #db2777;
  --c-dc2626: #dc2626;
  --c-6f7892: #6f7892;
  --c-f59e0b: #f59e0b;
  --c-c2763c: #c2763c;
  --c-ba4242: #ba4242;
  --c-6b7591: #6b7591;
  --c-c2393d: #c2393d;
  --c-229ed9: #229ed9;
  --c-ea580c: #ea580c;
  --c-bd3434: #bd3434;
  --c-1a8ad4: #1a8ad4;
  --c-6b7280: #6b7280;
  --c-5b6b8c: #5b6b8c;
  --c-69707e: #69707e;
  --c-707070: #707070;
  --c-bb4c24: #bb4c24;
  --c-d97706: #d97706;
  --c-5b21b6: #5b21b6;
  --c-b7791f: #b7791f;
  --c-1e40af: #1e40af;
  --c-0284c7: #0284c7;
  --c-536174: #536174;
  --c-4a5779: #4a5779;
  --c-0ab877: #0ab877;
  --c-475979: #475979;
  --c-465678: #465678;
  --c-a86214: #a86214;
  --c-991b1b: #991b1b;
  --c-987018: #987018;
  --c-4b5563: #4b5563;
  --c-394a6e: #394a6e;
  --c-0d9488: #0d9488;
  --c-0891b2: #0891b2;
  --c-e11d48: #e11d48;
  --c-92400e: #92400e;
  --c-3b4663: #3b4663;
  --c-16805c: #16805c;
  --c-128168: #128168;
  --c-33405c: #33405c;
  --c-075985: #075985;
  --c-8a5a00: #8a5a00;
  --c-303a55: #303a55;
  --c-166534: #166534;
}

:root {
  color-scheme: light;
}


* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(180deg, var(--c-eef5ff) 0%, var(--bg) 120px);
  color: var(--text);
}

body {
  line-height: 1.5;
}

a {
  color: var(--primary-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

.container {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.page-shell {
  min-height: 100vh;
}

.topbar {
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 20px;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--text);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-gradient-end));
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.brand-text {
  font-size: 1.05rem;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.topnav a {
  color: var(--text-soft);
  font-weight: 600;
}

.user-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.menu-toggle {
  display: none;
}

.topnav a[aria-current="page"] {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.notification-affordance,
.role-badge,
.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--text-soft);
  background: var(--panel);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.coming-soon {
  padding: 2px 6px;
  color: var(--primary-dark);
  background: var(--panel-muted);
  font-size: 0.7rem;
}

.user-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.main-content {
  padding: 32px 0 60px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 24px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3 {
  margin: 0 0 10px;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 3vw, 2.5rem);
}

h2 {
  font-size: 1.4rem;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.toolbar input {
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease;
  font-weight: 600;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  color: var(--on-primary-fill);
  background: var(--primary-fill);
}

.btn-secondary {
  background: var(--panel-muted);
  color: var(--text);
  border-color: var(--line);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

form {
  display: block;
}

form p,
.form-grid {
  margin: 0;
}

form p {
  margin-bottom: 14px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text);
}

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-color: var(--primary);
}

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

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.form-actions-split {
  justify-content: space-between;
}

.form-actions-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.data-table th {
  color: var(--text-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--c-f8faff);
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.status-new_lead { background: var(--panel-muted); color: var(--primary-dark); }
.status-couldnt_reach { background: var(--warning-soft); color: var(--c-92400e); }
.status-callback,
.status-payment_date_agreed { background: var(--c-ede9fe); color: var(--c-5b21b6); }
.status-reserved,
.status-debt { background: var(--c-fff3d6); color: var(--c-8a5a00); }
.status-full_payment { background: var(--success-soft); color: var(--c-166534); }
.status-frozen { background: var(--c-e0f2fe); color: var(--c-075985); }
.status-cancelled { background: var(--danger-soft); color: var(--c-991b1b); }
.status-scheduled,
.status-scheduled-flag { background: var(--c-fee2e2); color: var(--c-991b1b); }
.status-scheduled-flag { padding: 2px 8px; font-size: 0.7rem; }

.call-result-select.call-result-callback,
option.call-result-callback { background: var(--c-ede9fe); color: var(--c-5b21b6); }
.call-result-select.call-result-couldnt_reach,
option.call-result-couldnt_reach { background: var(--warning-soft); color: var(--c-92400e); }
.call-result-select.call-result-cancelled,
option.call-result-cancelled { background: var(--danger-soft); color: var(--c-991b1b); }
.call-result-select.call-result-payment_date_agreed,
option.call-result-payment_date_agreed { background: var(--c-dbeafe); color: var(--c-1e40af); }
.call-result-select.call-result-keep,
option.call-result-keep { background: var(--success-soft); color: var(--c-166534); }
.call-result-select.call-result-callback,
.call-result-select.call-result-couldnt_reach,
.call-result-select.call-result-cancelled,
.call-result-select.call-result-payment_date_agreed,
.call-result-select.call-result-keep { font-weight: 700; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  color: var(--text-soft);
}

.pagination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.metric-label {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.metric-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px;
  margin-top: 20px;
}

@media (max-width: 760px) {
  .nav-container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px 0;
  }

  .user-box {
    width: 100%;
    grid-column: 1 / -1;
    border-left: none;
    padding-left: 0;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .menu-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .topnav {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    margin-left: 0;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }

  html.js .topnav:not([data-open="true"]) {
    display: none;
  }

  .user-box form {
    margin-left: auto;
  }

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

  .panel {
    padding: 18px;
  }

  .toolbar,
  .panel-header,
  .form-actions,
  .pagination {
    flex-direction: column;
    align-items: stretch;
  }
}

.auth-shell {
  min-height: calc(100vh - 76px);
  display: grid;
  place-items: center;
  padding: 32px 0;
}

.auth-card {
  width: min(460px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.auth-panel {
  max-width: 620px;
  margin: 0 auto;
}

.form-field {
  margin-bottom: 16px;
}

.form-field ul.errorlist,
form ul.errorlist {
  margin: 6px 0 0;
  padding-left: 20px;
  color: var(--danger);
}

.auth-secondary-link {
  margin: 18px 0 0;
}

.profile-page {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.profile-hero {
  padding: 0;
  overflow: hidden;
}

.profile-hero-cover {
  height: 112px;
  background:
    radial-gradient(circle at 85% -20%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(120deg, var(--primary-dark), var(--primary) 55%, var(--primary-glow));
}

.profile-hero-body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 24px 22px;
  margin-top: -48px;
}

/* Clear the cover so text and buttons sit on the white panel; only the photo overlaps it. */
.profile-identity,
.profile-photo-actions {
  padding-top: 62px;
}

.profile-photo {
  position: relative;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
}

.profile-photo-image,
.profile-photo-initials {
  width: 100%;
  height: 100%;
  border: 4px solid var(--panel);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}

.profile-photo-image {
  display: block;
  object-fit: cover;
  background: var(--panel-muted);
}

.profile-photo-initials {
  display: grid;
  place-items: center;
  color: var(--on-primary);
  background: linear-gradient(145deg, var(--primary), var(--primary-gradient-end));
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.profile-photo-edit {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 34px;
  height: 34px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 3px solid var(--panel);
  border-radius: 50%;
  color: var(--panel);
  background: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.profile-photo-edit:hover,
.profile-photo-edit:focus-within {
  color: var(--on-primary-fill);
  background: var(--primary-fill);
}

.profile-photo-edit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

#avatar-input:focus-visible + label {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.profile-identity {
  flex: 1;
  min-width: 0;
}

.profile-identity h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  overflow-wrap: anywhere;
}

.profile-handle {
  margin: 2px 0 10px;
  color: var(--text-soft);
}

.profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-chips svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 280px;
}

.profile-photo-actions form {
  display: flex;
  gap: 8px;
}

.profile-photo-actions label.btn {
  margin: 0;
}

.profile-photo-actions .btn[hidden] {
  display: none;
}

.profile-photo-actions .is-uploading label.btn {
  opacity: 0.6;
  pointer-events: none;
}

.profile-photo-hint {
  flex-basis: 100%;
  margin: 0;
  text-align: right;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.profile-section-header {
  margin-bottom: 18px;
}

/* An operator's page, opened from the dashboard leaderboard. */
.operator-back {
  margin: 0;
}

.operator-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.operator-period {
  padding-top: 62px;
}

.operator-presence {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 20px;
  height: 20px;
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--c-cbd5e1);
}

.operator-presence.is-online {
  background: var(--success);
}

.operator-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.operator-plan {
  display: grid;
  gap: 6px;
}

.operator-days {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.operator-days li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-muted);
}

.operator-days strong {
  font-variant-numeric: tabular-nums;
}

.profile-section-header h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.profile-section-header p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.theme-picker {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  border: 0;
}

.theme-picker + .theme-picker {
  margin-top: 20px;
}

.theme-picker-legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  padding: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.theme-option {
  padding: 8px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.theme-option:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.theme-option:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}

.theme-option:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.theme-swatch {
  height: 78px;
  padding: 12px 0 0 14px;
  display: flex;
  overflow: hidden;
  border-radius: 9px;
  background: var(--sw-bg);
}

.theme-swatch.is-split {
  background: linear-gradient(90deg, var(--sw-bg) 50%, var(--sw-dark-bg) 50%);
}

.theme-swatch-panel {
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 6px;
  flex: 1;
  border: 1px solid var(--sw-line);
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 0;
  background: var(--sw-panel);
}

.theme-swatch.is-split .theme-swatch-panel {
  background: linear-gradient(90deg, var(--sw-panel) calc(50% - 7px), var(--sw-dark-panel) calc(50% - 7px));
}

.theme-swatch-line {
  width: 70%;
  height: 5px;
  border-radius: 3px;
  background: var(--sw-soft);
  opacity: 0.55;
}

.theme-swatch-line.is-title {
  width: 50%;
  height: 7px;
  background: var(--sw-text);
  opacity: 1;
}

.theme-swatch-button {
  width: 44px;
  height: 14px;
  margin-top: 4px;
  border-radius: 5px;
  background: linear-gradient(120deg, var(--sw-primary), var(--sw-glow));
}

.theme-option-label {
  padding: 0 4px 2px;
  display: grid;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

.theme-option-label small {
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 400;
}

.theme-picker-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 1.5em;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.profile-block-btn {
  width: 100%;
}

@media (max-width: 860px) {
  .profile-grid,
  .profile-grid.operator-grid {
    grid-template-columns: 1fr;
  }

  .operator-period {
    padding-top: 0;
  }

  .profile-hero-body {
    flex-wrap: wrap;
  }

  .profile-photo-actions {
    padding-top: 0;
    flex-basis: 100%;
  }

  .profile-photo-actions {
    max-width: none;
    justify-content: flex-start;
  }

  .profile-photo-hint {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .profile-hero-body {
    padding: 0 18px 18px;
  }

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

.dashboard-intro {
  color: var(--text-soft);
  margin: 0 0 24px;
}

.dashboard-summary {
  margin-top: 20px;
}

.dashboard-summary .metric-value {
  margin: 0 0 10px;
}

.role-empty-state {
  margin: 16px 0 24px;
  border: 1px dashed var(--line);
  border-radius: 14px;
}

.role-empty-state h2 {
  font-size: 1.15rem;
}

.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 18px;
}

.dashboard-greeting {
  margin: 0;
  font-size: 1.4rem;
}

.dashboard-header-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.today-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--panel-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.today-pill svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.today-pill strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.today-pill.is-revenue svg { color: var(--success); }
.today-pill.is-payments svg { color: var(--primary); }
.today-pill.is-shift svg { color: var(--warning); }

.dashboard-period {
  margin: 0;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dashboard-report {
  margin: 0;
}

.report-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.dashboard-date-range {
  position: relative;
  width: 260px;
  max-width: 100%;
}

.dashboard-date-range .date-range-popover {
  right: 0;
  left: auto;
}

@media (max-width: 520px) {
  .dashboard-actions,
  .dashboard-period,
  .dashboard-date-range {
    width: 100%;
  }

  .dashboard-date-range .date-range-popover {
    left: 0;
    right: auto;
  }
}

.sales-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr 1fr;
  gap: 16px;
}

.sales-cards.is-team {
  grid-template-columns: 1fr 1fr 1.6fr;
}

.today-stats {
  margin-top: 20px;
}

.today-stats-title {
  margin: 0 0 10px;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.today-stats-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 1100px) {
  .today-stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

.today-stat {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary-soft);
  border-radius: 12px;
  background: var(--panel);
}

/* Boss and Manager: five wider school-wide figures. */
.today-stats-grid.is-school {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .today-stats-grid.is-school {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

.today-stat dd small {
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

/* A figure that opens a filtered list: the whole box is the link. */
.today-stat.is-link {
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.today-stat.is-link:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.today-stat-link {
  color: inherit;
  text-decoration: none;
}

.today-stat-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.today-stat-link:focus-visible {
  outline: none;
}

.today-stat.is-link:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.today-stat.is-good { border-left-color: var(--success); }
.today-stat.is-warn { border-left-color: var(--warning); }
.today-stat.is-bad { border-left-color: var(--danger); }

.today-stat dt {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-stat dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 1.05rem;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sales-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 22px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.sales-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sales-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

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

.sales-icon.is-sales { color: var(--success); background: var(--success-soft); }
.sales-icon.is-revenue { color: var(--primary); background: var(--primary-soft); }
.sales-icon.is-reserved { color: var(--warning); background: var(--warning-soft); }
.sales-icon.is-bonus { color: var(--c-7c3aed); background: var(--c-ede9fe); }
.sales-icon.is-debt { color: var(--danger); background: var(--danger-soft); }

.sales-label {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.sales-value {
  margin: 16px 0 18px;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-meta {
  margin: -8px 0 18px;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.sales-meta strong {
  color: var(--text);
  font-weight: 650;
}

.sales-of {
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}

.sales-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 18px;
}

.sales-progress {
  flex: 1 1 auto;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--danger-soft);
  appearance: none;
}

.sales-progress::-webkit-progress-bar { background: var(--danger-soft); }
.sales-progress::-webkit-progress-value { border-radius: 999px; background: var(--success); }
.sales-progress::-moz-progress-bar { border-radius: 999px; background: var(--success); }

.sales-percent {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sales-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto -22px 0;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.85rem;
}

.sales-card-foot strong {
  color: var(--text);
  font-weight: 650;
}

.sales-value.is-unset {
  color: var(--text-soft);
  font-size: 1.25rem;
  font-weight: 600;
}

.sales-card-foot .is-unset {
  color: var(--text-soft);
  font-weight: 500;
}

.sales-card-foot .is-positive {
  color: var(--success);
}

.sales-card-foot .is-negative {
  color: var(--danger);
}

.sales-debt {
  padding: 0;
  border: 0;
  background: none;
  color: var(--danger);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sales-debt:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .sales-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .sales-cards {
    gap: 10px;
  }

  .sales-card {
    padding: 14px 14px 0;
    border-radius: 14px;
  }

  .sales-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .sales-icon svg {
    width: 16px;
    height: 16px;
  }

  .sales-label {
    font-size: 0.8rem;
  }

  .sales-value {
    margin: 12px 0 14px;
    font-size: 1.15rem;
    white-space: normal;
  }

  .sales-value.is-unset {
    font-size: 1rem;
  }

  .sales-of {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
  }

  .sales-meta {
    margin: -6px 0 14px;
    font-size: 0.75rem;
  }

  .sales-progress-row {
    margin: -2px 0 14px;
  }

  .sales-card-foot {
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: auto -14px 0;
    padding: 10px 14px;
    font-size: 0.75rem;
  }
}

.leaderboard {
  margin-top: 20px;
}

.leaderboard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.leaderboard-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.leaderboard-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--panel-muted);
}

.leaderboard-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.leaderboard-tab svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leaderboard-tab:hover {
  color: var(--text);
}

.leaderboard-tab.is-active {
  color: var(--primary-dark);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(29, 42, 82, 0.12);
}

.leaderboard-empty {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.leaderboard-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Boss and Manager: a fixed-height list that scrolls, so the page does not grow with the team. */
.leaderboard-list.is-scroll {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
}

.leaderboard-row {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.leaderboard-row.is-me {
  border: 1.5px solid var(--primary);
  background: linear-gradient(180deg, var(--primary-soft), var(--panel));
}

.leaderboard-badge {
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 2px 12px;
  border-radius: 8px;
  color: var(--on-primary);
  background: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.leaderboard-main {
  display: grid;
  grid-template-columns: 28px 64px minmax(120px, 200px) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 14px 18px;
}

.leaderboard-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.leaderboard-rank.is-medal {
  width: 26px;
  height: 30px;
}

.leaderboard-rank.is-medal svg {
  width: 100%;
  height: 100%;
}

.medal-ribbon { fill: var(--c-60a5fa); }
.leaderboard-rank text {
  fill: var(--on-accent);
  font-size: 10px;
  font-weight: 800;
}

.leaderboard-rank.is-top-1 .medal-disc { fill: var(--c-f59e0b); }
.leaderboard-rank.is-top-2 .medal-disc { fill: var(--c-a5b4fc); }
.leaderboard-rank.is-top-3 .medal-disc { fill: var(--c-c2763c); }
.leaderboard-rank.is-top-2 .medal-ribbon { fill: var(--c-93c5fd); }

.leaderboard-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--line);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.leaderboard-avatar.is-color-0 { background: var(--c-7c3aed); }
.leaderboard-avatar.is-color-1 { background: var(--c-2563eb); }
.leaderboard-avatar.is-color-2 { background: var(--c-0d9488); }
.leaderboard-avatar.is-color-3 { background: var(--c-db2777); }
.leaderboard-avatar.is-color-4 { background: var(--c-ea580c); }
.leaderboard-avatar.is-color-5 { background: var(--c-4f46e5); }

.leaderboard-row.is-me .leaderboard-avatar {
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--primary-fill);
}

.leaderboard-avatar::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--c-cbd5e1);
}

/* The photo is positioned so the online dot (::after) still draws on top of it. */
.leaderboard-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.leaderboard-avatar.is-online::after {
  background: var(--success);
}

.leaderboard-name {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name links to the operator's page; its ::after stretches the link over the whole row.
   The debt tile's button is positioned later in the row, so it stays clickable on top. */
.leaderboard-name {
  color: inherit;
  text-decoration: none;
}

.leaderboard-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.leaderboard-row:has(.leaderboard-name:hover) {
  border-color: var(--primary);
}

.leaderboard-name:hover {
  text-decoration: underline;
}

.leaderboard-name:focus-visible {
  outline: none;
}

.leaderboard-name:focus-visible::after {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.leaderboard-name small {
  color: var(--text-soft);
  font-weight: 500;
}

.leaderboard-progress {
  min-width: 0;
}

.leaderboard-amount {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.leaderboard-amount small {
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 500;
}

.plan-percent {
  color: var(--danger);
  font-weight: 500;
}

/* The muted track disappears on the highlighted row's blue background. */
.leaderboard-row.is-me .plan-bar {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.plan-percent.is-reached {
  color: var(--success);
}

.plan-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-muted);
}

.plan-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--danger);
}

.plan-bar.is-reached span {
  background: var(--success);
}

.plan-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 0.8rem;
}

.leaderboard-stats {
  display: flex;
  gap: 10px;
  margin: 0;
}

.plan-stat {
  min-width: 110px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--panel-muted);
}

.plan-stat.is-debt {
  min-width: 130px;
}

.plan-stat.is-debt {
  position: relative;
}

.plan-stat-open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* The whole tile opens the debt list, not just its label. */
.plan-stat-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.plan-stat:has(.plan-stat-open):hover {
  box-shadow: inset 0 0 0 1px var(--danger);
}

.plan-stat dt {
  color: var(--text-soft);
  font-size: 0.78rem;
}

.plan-stat dd {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.plan-stat.is-debt dd {
  color: var(--danger);
}

@media (max-width: 800px) {
  .leaderboard-main {
    grid-template-columns: 26px 44px minmax(0, 1fr);
    gap: 10px;
  }

  .leaderboard-avatar {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .leaderboard-progress,
  .leaderboard-stats {
    grid-column: 1 / -1;
  }

  .leaderboard-stats .plan-stat {
    flex: 1;
  }

  .leaderboard-tabs {
    width: 100%;
  }

  .leaderboard-tab {
    flex: 1 1 0;
    justify-content: center;
    padding: 6px 8px;
  }
}

.auth-card h1 {
  margin-bottom: 24px;
}

.messages {
  margin-bottom: 20px;
}

.alert {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  font-weight: 500;
}

.alert-success {
  background: var(--success-soft);
  border-color: rgba(22, 163, 74, 0.2);
  color: var(--c-166534);
}

.alert-error,
.alert-danger {
  background: var(--danger-soft);
  border-color: rgba(220, 38, 38, 0.2);
  color: var(--c-991b1b);
}

.alert-info {
  background: var(--panel-muted);
  border-color: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary-dark);
}

.alert-warning {
  background: var(--warning-soft);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--c-92400e);
}

.student-setup-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 16px;
  font-size: 0.875rem;
}

.setup-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  font-weight: 600;
  font-size: 0.8rem;
}

.setup-hint {
  font-weight: 400;
}

.empty-state {
  color: var(--text-soft);
  text-align: center;
  padding: 28px 12px;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--c-f9fbff);
  padding: 14px 16px;
}

.timeline-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-soft);
  margin-bottom: 4px;
}

.spacer {
  flex: 1;
}

.field-error {
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 6px;
}

.help-text {
  color: var(--text-soft);
  font-size: 0.8rem;
  margin-top: 6px;
}

.crm-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

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

.crm-heading h1 {
  margin-bottom: 4px;
}

.crm-heading-actions {
  margin-top: 0;
}

.lead-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 20px;
  border: 0;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
}

.lead-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.lead-dialog h2 {
  margin: 0 0 16px;
  font-size: 1.1rem;
}

.lead-dialog .crm-subtitle {
  margin-bottom: 16px;
}

.lead-dialog-actions {
  justify-content: flex-end;
}

.debt-dialog {
  width: min(820px, calc(100vw - 32px));
}

.debt-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.debt-dialog h2 {
  margin-bottom: 4px;
}

.debt-dialog-summary,
.debt-empty {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.debt-dialog-summary strong {
  color: var(--danger);
}

.debt-dialog-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--panel-muted);
  color: var(--text-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.debt-dialog-close:hover {
  color: var(--text);
}

.receipt-dialog {
  width: min(760px, calc(100vw - 32px));
}

.receipt-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.receipt-dialog-body {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--panel-muted);
  overflow: hidden;
}

.receipt-dialog-body img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
}

.receipt-dialog-body iframe {
  width: 100%;
  height: calc(100vh - 160px);
  border: 0;
}

.debt-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debt-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-muted);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.debt-card:hover,
.debt-card:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(29, 42, 82, 0.08);
}

.debt-card-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.debt-card-name {
  font-weight: 600;
}

.debt-card-code {
  color: var(--text-soft);
  font-size: 0.78rem;
}

.debt-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.debt-card-meta b {
  color: var(--text);
  font-weight: 600;
}

.debt-card-amount {
  color: var(--danger);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.penalty-card:hover {
  border-color: var(--line);
  box-shadow: none;
}

.report-text {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-muted);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.follow-up-quick-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.follow-up-quick-options .btn {
  width: 100%;
  padding: 10px 8px;
  font-size: 0.9rem;
}

.follow-up-quick-options .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Status and Next follow-up cards share the same height. */
.lead-summary {
  align-items: stretch;
}

.follow-up-summary {
  display: flex;
}

.follow-up-summary > .crm-metric-action {
  flex: 1;
}

.crm-subtitle {
  margin: 0;
  color: var(--text-soft);
}

.crm-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.crm-metric,
.crm-section,
.crm-filters {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
}

.crm-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 17px 18px;
}

.crm-metric > span:first-child {
  color: var(--text-soft);
  font-size: 0.82rem;
}

.crm-metric strong {
  font-size: 1.3rem;
}

.crm-metric-action {
  position: relative;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.crm-metric-action::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  background: var(--primary);
  mask: var(--icon-pencil) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.crm-metric-action:hover,
.crm-metric-action:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 20%, transparent);
  transform: translateY(-3px);
}

.crm-metric-action:hover::after,
.crm-metric-action:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.crm-metric-action:active {
  transform: translateY(-1px);
}

.crm-filters {
  padding: 18px;
}

.crm-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
}

.crm-filter-field label {
  font-size: 0.78rem;
}

.crm-filter-field input,
.crm-filter-field select {
  min-height: 42px;
  padding: 8px 10px;
}

.crm-filter-field input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  margin: 11px 0;
  accent-color: var(--primary);
}

.crm-filters .form-actions {
  margin-top: 12px;
}

.pipeline {
  display: grid;
  grid-auto-columns: minmax(260px, 1fr);
  grid-auto-flow: column;
  align-items: start;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scrollbar-color: var(--c-aab8cc) var(--c-eaf0f8);
}

.pipeline-lane {
  min-width: 260px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--c-f7f9fd);
  overflow: hidden;
}

.pipeline-lane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.pipeline-lane-header h2 {
  margin: 0;
  font-size: 0.95rem;
}

.lane-count {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-e7edf7);
  color: var(--text-soft);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
}

.pipeline-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.lead-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.035);
}

.lead-card-top,
.lead-card-meta,
.lead-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lead-card-name {
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lead-card-phone,
.lead-card-meta,
.lead-card-footer,
.lane-pagination {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.lead-card-meta {
  align-items: flex-start;
  flex-direction: column;
}

.lead-card-footer {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--c-edf1f7);
}

.follow-up-label {
  font-weight: 600;
}

.archive-flag {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--c-92400e);
  font-size: 0.7rem;
  font-weight: 700;
}

.archive-flag {
  background: var(--c-e8edf4);
  color: var(--c-536174);
}

.lead-card-archived {
  opacity: 0.78;
}

.lane-empty {
  margin: 0;
  padding: 18px 10px;
  color: var(--text-soft);
  text-align: center;
  font-size: 0.84rem;
}

.lane-pagination {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 12px;
}

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

.lead-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.lead-main-column,
.lead-side-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.lead-side-column {
  position: relative;
}

/* Activity history matches the left column's height and scrolls inside it. */
.lead-side-column > .history-section {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.crm-section {
  padding: 20px;
}

.crm-section h2 {
  margin: 0;
  font-size: 1.1rem;
}

.section-heading {
  margin-bottom: 16px;
}

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

.crm-form-wide {
  grid-column: 1 / -1;
}

.crm-form-grid input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.lead-detail-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.lead-detail-list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
}

.lead-detail-list dt {
  color: var(--text-soft);
  font-weight: 600;
}

.lead-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.lead-detail-list.lead-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.lead-detail-list.lead-detail-grid > div {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid var(--border, var(--c-e5e9f2));
  border-radius: 10px;
  background: var(--c-f8faff);
}

.lead-detail-grid dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lead-detail-grid dd {
  font-weight: 600;
}

@media (max-width: 520px) {
  .lead-detail-list.lead-detail-grid {
    grid-template-columns: 1fr;
  }
}

.lead-created-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.lead-created-value {
  padding: 11px 0;
  color: var(--text-soft);
}

.lead-meta-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lead-meta-inline .lead-created-label {
  margin-bottom: 0;
}

.lead-meta-inline .lead-created-value {
  padding: 0;
}

.status-change-form {
  margin: 0;
}

.status-change-form .status-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 9px 34px 9px 12px;
  border: 1px solid currentColor;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

.status-change-form .status-select option {
  font-weight: 600;
}

.archive-section {
  border-color: var(--c-f0caca);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--c-efbcbc);
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--c-991b1b);
  cursor: pointer;
  font-weight: 700;
}

.history-section {
  margin-top: 0;
}

.history-section .timeline {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.history-section .section-heading .crm-subtitle {
  font-size: 0.84rem;
}

.timeline-item p {
  margin: 6px 0;
  overflow-wrap: anywhere;
}

.history-actor {
  color: var(--text-soft);
  font-size: 0.78rem;
}

/* App shell and pipeline visual system */
html,
body {
  min-height: 100%;
  background: var(--c-f6f8ff);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  padding: 24px 17px 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--c-edf0f6);
  background: var(--panel);
  z-index: 20;
}

.sidebar-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.app-brand:hover {
  text-decoration: none;
}

.app-brand > span:last-child {
  display: block;
}

.sidebar-brand-text {
  min-width: 0;
}

.app-brand small {
  display: block;
  margin-top: 2px;
  color: var(--c-9aa0b2);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0;
}

.app-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--on-primary);
  background: linear-gradient(140deg, var(--primary), var(--primary-gradient-end));
  box-shadow: 0 5px 12px color-mix(in srgb, var(--primary) 20%, transparent);
  font-size: 1rem;
  font-weight: 750;
}

.app-nav {
  display: grid;
  gap: 6px;
  margin-top: 34px;
}

.app-nav-link {
  min-height: 42px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 9px;
  color: var(--c-7984a4);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease;
}

.app-nav-link:hover,
.app-nav-link.is-active {
  color: var(--primary-dark);
  background: var(--panel-muted);
  text-decoration: none;
}

.app-nav-link.is-active {
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: 0 5px 13px color-mix(in srgb, var(--primary) 20%, transparent);
}

.app-nav-link svg,
.sidebar-logout svg,
.menu-toggle svg,
.sidebar-toggle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--c-e7eaf3);
  border-radius: 8px;
  color: var(--c-7f879a);
  background: var(--panel);
  cursor: pointer;
}

.sidebar-toggle:hover {
  color: var(--primary-dark);
  background: var(--panel-muted);
}

.sidebar-toggle svg {
  width: 17px;
  height: 17px;
}

.app-nav-sub-link {
  min-height: 36px;
  margin-left: 12px;
  padding-left: 10px;
  font-size: 0.8rem;
}

.app-nav-sub-link svg {
  width: 15px;
  height: 15px;
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-week {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.sidebar-week-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px;
}

.sidebar-week-item + .sidebar-week-item {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.week-ring {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
}

.week-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 3.5;
}

.week-ring-track {
  stroke: var(--panel-muted);
}

.week-ring-fill {
  stroke: var(--danger);
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}

.week-ring.is-reached .week-ring-fill {
  stroke: var(--success);
}

.week-ring > span {
  color: var(--text);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sidebar-week-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.sidebar-week-text > small {
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 600;
}

.sidebar-week-text strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-week-text strong span {
  color: var(--text-soft);
  font-weight: 500;
}

.sidebar-week-text strong.is-unset {
  color: var(--text-soft);
  font-weight: 600;
}

.sidebar-profile {
  min-width: 0;
  padding-top: 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--c-f0f1f6);
}

.sidebar-profile-link {
  min-width: 0;
  padding: 4px;
  margin: -4px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.sidebar-profile-link:hover,
.sidebar-profile-link:focus-visible,
.sidebar-profile-link.is-active {
  background: var(--c-f1f3fb);
}

.profile-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid var(--panel);
  border-radius: 50%;
  color: var(--on-primary);
  background: linear-gradient(145deg, var(--primary), var(--primary-gradient-end));
  font-size: 0.72rem;
  font-weight: 700;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sidebar-profile-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1;
}

.sidebar-profile-meta strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-meta small {
  color: var(--c-969cac);
  font-size: 0.68rem;
}

.sidebar-profile form {
  flex: 0 0 auto;
}

.sidebar-logout {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--c-7f879a);
  background: transparent;
}

.sidebar-logout:hover {
  color: var(--primary-dark);
  background: var(--panel-muted);
}

.sidebar-logout svg {
  width: 16px;
  height: 16px;
}

.app-main.main-content {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 30px clamp(18px, 3vw, 44px) 36px;
}

.app-shell.is-sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}

.app-shell.is-sidebar-collapsed .app-sidebar {
  padding-right: 12px;
  padding-left: 12px;
}

.app-shell.is-sidebar-collapsed .sidebar-header {
  flex-direction: column;
}

.app-shell.is-sidebar-collapsed .app-brand {
  justify-content: center;
}

.app-shell.is-sidebar-collapsed .sidebar-brand-text,
.app-shell.is-sidebar-collapsed .app-nav-link span,
.app-shell.is-sidebar-collapsed .sidebar-profile-meta,
.app-shell.is-sidebar-collapsed .sidebar-week-text {
  display: none;
}

.app-shell.is-sidebar-collapsed .sidebar-week {
  justify-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
}

.app-shell.is-sidebar-collapsed .sidebar-week-item {
  padding: 0;
  border: 0;
}

.app-shell.is-sidebar-collapsed .app-nav {
  margin-top: 28px;
}

.app-shell.is-sidebar-collapsed .app-nav-link {
  justify-content: center;
  padding: 0;
}

.app-shell.is-sidebar-collapsed .app-nav-sub-link {
  margin-left: 0;
}

.app-shell.is-sidebar-collapsed .sidebar-profile {
  flex-direction: column;
  justify-content: center;
}

.app-shell.is-sidebar-collapsed .sidebar-profile-link {
  flex: 0 0 auto;
  margin: 0;
}

.app-shell.is-sidebar-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

.mobile-topbar,
.guest-topbar {
  display: none;
}

.guest-topbar {
  min-height: 72px;
  padding: 0 max(20px, calc((100vw - 1100px) / 2));
  align-items: center;
  border-bottom: 1px solid var(--c-edf0f6);
  background: var(--panel);
}

.guest-shell .main-content {
  padding-top: 36px;
}

.pipeline-page {
  gap: 18px;
}

.pipeline-summary {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--c-e5eaf7);
  border-radius: 14px;
  background: var(--c-f3f5fb);
}

.overview-stat {
  min-width: 0;
  min-height: 58px;
  padding: 7px 10px;
  border: 1px solid var(--c-dce4f7);
  border-radius: 11px;
  background: var(--panel);
}

.overview-stat strong {
  display: block;
  color: var(--primary-dark);
  font-size: 1.08rem;
  line-height: 1.2;
}

.overview-stat span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--c-475979);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-stat:nth-child(2) strong { color: var(--c-5748c5); }
.overview-stat:nth-child(3) strong { color: var(--c-987018); }
.overview-stat:nth-child(4) strong { color: var(--c-c2393d); }
.overview-stat:nth-child(5) strong { color: var(--c-bb4c24); }
.overview-stat:nth-child(6) strong { color: var(--c-128168); }
.overview-stat:nth-child(7) strong { color: var(--c-707070); }
.overview-stat:nth-child(8) strong { color: var(--c-bd3434); }

a.overview-stat {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-color: var(--c-bccaf3);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.overview-stat::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 12px;
  height: 12px;
  background: var(--primary);
  mask: var(--icon-arrow-right) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

a.overview-stat:hover,
a.overview-stat:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 20%, transparent);
  transform: translateY(-3px);
}

a.overview-stat:hover::after,
a.overview-stat:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

a.overview-stat:active {
  transform: translateY(-1px);
}

a.overview-stat.is-active {
  border-color: var(--primary);
  background: var(--panel-muted);
  box-shadow: inset 0 0 0 1px var(--primary);
}

a.overview-stat.is-active::after {
  mask-image: var(--icon-x);
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  a.overview-stat,
  a.overview-stat::after {
    transition: none;
  }

  a.overview-stat:hover,
  a.overview-stat:focus-visible {
    transform: none;
  }

  .crm-metric-action,
  .crm-metric-action::after {
    transition: none;
  }

  .crm-metric-action:hover,
  .crm-metric-action:focus-visible {
    transform: none;
  }
}

.pipeline-panel {
  min-width: 0;
  padding: 22px 19px 18px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--panel) 95%, transparent);
  border-radius: 19px;
  background: var(--panel);
  box-shadow: 0 12px 35px rgba(40, 54, 110, 0.055);
}

.archive-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.archive-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 2px;
}

.archive-header-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
}

.archive-header h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.archive-header p {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: 0.8rem;
}

.archive-toolbar,
.archive-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 35px rgba(40, 54, 110, 0.055);
}

.archive-toolbar {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.archive-toolbar input,
.archive-toolbar select {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.85rem;
}

.archive-toolbar .btn {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
}

.archive-search-field {
  position: relative;
  flex: 1 1 280px;
  margin: 0;
  font-weight: 400;
}

.archive-search-field svg {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}

.archive-search-field input {
  padding-left: 38px;
}

.archive-operator-field {
  flex: 0 1 220px;
  min-width: 160px;
}

.archive-card {
  overflow: hidden;
}

.archive-table-wrap {
  overflow-x: auto;
}

.archive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.archive-table th,
.archive-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.archive-table th {
  background: var(--panel-muted);
  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.archive-table tbody tr {
  position: relative;
  transition: background 0.15s ease;
}

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

.archive-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.archive-table small {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.74rem;
}

.archive-lead {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 200px;
}

.archive-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.85rem;
}

.archive-lead-text {
  min-width: 0;
}

.archive-lead a {
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

/* Stretch the name link so the whole row is clickable. */
.archive-lead a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.archive-lead small {
  font-variant-numeric: tabular-nums;
}

.archive-pill {
  display: inline-block;
  max-width: 180px;
  padding: 3px 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-muted);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.archive-muted {
  color: var(--text-soft);
}

.archive-operator .archive-muted {
  font-style: italic;
}

.archive-date {
  white-space: nowrap;
}

.archive-reason {
  max-width: 340px;
  color: var(--text);
}

.archive-reason span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.archive-chevron {
  width: 32px;
  color: var(--text-soft);
}

.archive-table tbody tr:hover .archive-chevron {
  color: var(--primary);
}

.archive-pagination {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.8rem;
}

.archive-pagination-links {
  display: flex;
  gap: 6px;
}

.archive-pagination .btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.8rem;
}

.archive-empty {
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.archive-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-muted);
  color: var(--text-soft);
}

.archive-empty h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.archive-empty p {
  margin: 6px 0 16px;
  color: var(--text-soft);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .archive-search-field,
  .archive-operator-field,
  .archive-toolbar .btn {
    flex: 1 1 100%;
  }

  .archive-page .archive-table thead {
    display: none;
  }

  .archive-page .archive-table,
  .archive-page .archive-table tbody {
    display: block;
  }

  .archive-page .archive-table tbody tr {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    border-bottom: 1px solid var(--line);
  }

  .archive-page .archive-table tbody tr:last-child {
    border-bottom: 0;
  }

  .archive-page .archive-table td {
    padding: 0;
    border: 0;
  }

  .archive-lead {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .archive-date {
    text-align: right;
  }

  .archive-reason {
    grid-column: 1 / -1;
    max-width: none;
  }

  .archive-chevron {
    display: none;
  }
}

.pipeline-heading {
  margin: 0 2px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.pipeline-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.pipeline-add {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-gradient-end));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 17%, transparent);
  font-size: 0.82rem;
  white-space: nowrap;
}

.pipeline-filter-form {
  margin: 0 2px 14px;
  padding: 0;
}

.pipeline-filter-primary,
.pipeline-filter-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pipeline-filter-primary {
  margin-bottom: 8px;
}

.pipeline-filter-secondary {
  flex-wrap: wrap;
}

.pipeline-filter-field {
  min-width: 0;
}

.pipeline-search-field {
  flex: 1 1 240px;
}

.pipeline-operator-field {
  flex: 0 1 215px;
}

.bulk-mode-toggle.is-active {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--c-eef4ff);
}

.pipeline-filter-field input,
.pipeline-filter-field select {
  width: 100%;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--c-dce3f1);
  border-radius: 10px;
  color: var(--c-394a6e);
  background: var(--panel);
  font-size: 0.76rem;
}

.pipeline-search-field input {
  min-height: 42px;
}

.pipeline-date-range {
  position: relative;
  flex: 0 1 390px;
  min-width: 250px;
}

.date-range-trigger {
  width: 100%;
  min-height: 41px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--primary-dark);
  border-radius: 10px;
  color: var(--primary-dark);
  background: var(--panel-muted);
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}

.date-range-trigger:focus-visible,
.date-range-day:focus-visible,
.date-range-nav:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.date-range-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-range-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-range-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  width: min(312px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--c-e0e5f0);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(29, 42, 82, 0.16);
}

.date-range-popover[hidden] {
  display: none;
}

.date-range-header {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 0.8rem;
}

.date-range-nav {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  color: var(--c-394a6e);
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.date-range-nav:hover {
  background: var(--panel-muted);
}

.date-range-weekdays,
.date-range-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-range-weekdays {
  margin-bottom: 4px;
  color: var(--c-73809e);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.date-range-day {
  height: 34px;
  border: 0;
  border-radius: 8px;
  color: var(--c-303a55);
  background: transparent;
  font-size: 0.75rem;
  cursor: pointer;
}

.date-range-day:hover {
  background: var(--panel-muted);
}

.date-range-day.is-today {
  box-shadow: inset 0 0 0 1px var(--primary);
}

.date-range-day.is-in-range {
  border-radius: 0;
  color: var(--primary-dark);
  background: var(--c-dbe7ff);
}

.date-range-day.is-start,
.date-range-day.is-end {
  color: var(--on-primary);
  font-weight: 650;
  background: var(--primary);
}

.date-range-footer {
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--c-eef1f7);
}

.date-range-hint {
  margin: 0;
  color: var(--c-73809e);
  font-size: 0.66rem;
  line-height: 1.35;
}

.date-range-clear {
  padding: 2px 0;
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.pipeline-filter-pill {
  flex: 0 1 130px;
}

.pipeline-filter-pill select {
  min-height: 35px;
  padding: 5px 26px 5px 10px;
  border-radius: 18px;
  font-size: 0.71rem;
}

.follow-up-filter {
  position: relative;
  flex: 0 1 160px;
}

.follow-up-filter > summary {
  min-height: 35px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-dce3f1);
  border-radius: 18px;
  color: var(--c-394a6e);
  background: var(--panel);
  cursor: pointer;
  font-size: 0.71rem;
  list-style: none;
  white-space: nowrap;
}

.follow-up-filter > summary::-webkit-details-marker {
  display: none;
}

.follow-up-selected-count {
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 10px;
  color: var(--on-primary);
  background: var(--primary);
  font-size: 0.64rem;
  text-align: center;
}

.follow-up-chevron {
  margin-left: auto;
  color: var(--c-8590a7);
}

.follow-up-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  width: 292px;
  padding: 12px 14px;
  border: 1px solid var(--c-e0e5f0);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(29, 42, 82, 0.16);
}

.follow-up-options-heading {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-73809e);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.follow-up-clear {
  padding: 2px 0;
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 650;
}

.follow-up-option {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-303a55);
  cursor: pointer;
  font-size: 0.75rem;
}

.follow-up-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--primary);
}

.follow-up-option-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.follow-up-option-count {
  min-width: 30px;
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--c-465678);
  background: var(--c-f0f3fa);
  font-size: 0.67rem;
  font-weight: 650;
  text-align: center;
}

.follow-up-option:nth-child(2) .follow-up-option-count {
  color: var(--c-ba4242);
  background: var(--c-ffe8e7);
}

.follow-up-option:nth-child(3) .follow-up-option-count {
  color: var(--c-a86214);
  background: var(--c-fff1d5);
}

.follow-up-option:nth-child(4) .follow-up-option-count,
.follow-up-option:nth-child(5) .follow-up-option-count {
  color: var(--primary-dark);
  background: var(--panel-muted);
}

.follow-up-option:nth-child(6) .follow-up-option-count {
  color: var(--c-69707e);
  background: var(--c-f0f1f3);
}

.follow-up-empty {
  margin: 8px 0;
  color: var(--c-73809e);
  font-size: 0.72rem;
}

.pipeline-filter-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pipeline-filter-actions .btn {
  min-height: 35px;
  padding: 0 12px;
  border-radius: 18px;
  font-size: 0.72rem;
}

.pipeline-submit {
  border-color: var(--c-dce3f1);
  color: var(--c-394a6e);
  background: var(--panel);
  box-shadow: none;
}

.pipeline-clear {
  border-color: var(--c-f4a1a6);
  color: var(--c-cc3d48);
  background: var(--c-fff5f5);
}

.pipeline-board {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  align-items: start;
  gap: 9px;
  overflow-x: auto;
  padding: 0 0 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-ccd3e2) transparent;
}

.pipeline-lane {
  min-width: 200px;
  height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-e2e7f2);
  border-radius: 11px;
  background: var(--c-f3f6fc);
}

.pipeline-lane-couldnt_reach { background: var(--c-fff9ed); }
.pipeline-lane-scheduled,
.pipeline-lane-callback,
.pipeline-lane-payment_date_agreed { background: var(--c-f4f0fb); }
.pipeline-lane-reserved,
.pipeline-lane-debt { background: var(--c-fff8e8); }
.pipeline-lane-full_payment { background: var(--c-eef7f4); }
.pipeline-lane-frozen { background: var(--c-f0f9ff); }
.pipeline-lane-cancelled { background: var(--c-f9f1f3); }
.pipeline-lane-archived { background: var(--c-f3f4f6); }

.pipeline-lane-header {
  min-height: 36px;
  margin: 7px 7px 5px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.pipeline-lane-couldnt_reach .pipeline-lane-header { color: var(--c-92400e); background: var(--c-fef3c7); }
.pipeline-lane-scheduled .pipeline-lane-header,
.pipeline-lane-callback .pipeline-lane-header,
.pipeline-lane-payment_date_agreed .pipeline-lane-header { color: var(--c-7050b3); background: var(--c-e9defb); }
.pipeline-lane-reserved .pipeline-lane-header,
.pipeline-lane-debt .pipeline-lane-header { color: var(--c-8a5a00); background: var(--c-ffedbd); }
.pipeline-lane-full_payment .pipeline-lane-header { color: var(--c-16805c); background: var(--c-d9f5e9); }
.pipeline-lane-frozen .pipeline-lane-header { color: var(--c-075985); background: var(--c-e0f2fe); }
.pipeline-lane-cancelled .pipeline-lane-header { color: var(--c-be5a64); background: var(--c-fbe4e8); }
.pipeline-lane-archived .pipeline-lane-header { color: var(--c-4b5563); background: var(--c-e5e7eb); }

.pipeline-lane-header h2 {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lane-marker {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.pipeline-lane-header .lane-count {
  min-width: 22px;
  margin-left: auto;
  padding: 2px 5px;
  color: var(--c-858da0);
  background: var(--panel);
  font-size: 0.64rem;
}

.pipeline-lane-header {
  flex: 0 0 auto;
}

.pipeline-cards {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 7px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-c3cada) transparent;
}

.pipeline-page .lead-card {
  --card-pad: 12px;
  --card-avatar: 28px;
  --card-gap: 8px;
  position: relative;
  /* Never squash cards to fit the fixed-height lane; .pipeline-cards scrolls instead.
     Scheduled cards use overflow: hidden, which drops their min-height to 0. */
  flex: 0 0 auto;
  gap: 9px;
  margin: 0 0 8px;
  padding: var(--card-pad);
  border-color: var(--c-e4e8f2);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(42, 51, 94, 0.05);
}

.pipeline-page .lead-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 14px rgba(42, 51, 94, 0.1);
}

.pipeline-page .lead-card-name::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Avatar | name | follow-up chip on the first line; the phone spans the full width below,
   so "+998-90-123-45-67" never wraps at its hyphens next to the chip. */
.pipeline-page .lead-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--card-gap);
  row-gap: 1px;
}

.pipeline-page .lead-card-top > .lead-card-avatar {
  grid-row: 1 / span 2;
}

.pipeline-page .lead-card-top > .archive-flag,
.pipeline-page .lead-card-top > .lead-card-followup {
  grid-row: 1;
}

.pipeline-page .lead-card-avatar {
  width: var(--card-avatar);
  height: var(--card-avatar);
  font-size: 0.8rem;
}

.lead-card-avatar {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--on-primary);
  background: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
}

.pipeline-lane-couldnt_reach .lead-card-avatar { background: var(--c-d97706); }
.pipeline-lane-scheduled .lead-card-avatar,
.pipeline-lane-callback .lead-card-avatar,
.pipeline-lane-payment_date_agreed .lead-card-avatar { background: var(--c-7452c8); }
.pipeline-lane-reserved .lead-card-avatar,
.pipeline-lane-debt .lead-card-avatar { background: var(--c-b7791f); }
.pipeline-lane-full_payment .lead-card-avatar { background: var(--c-0ab877); }
.pipeline-lane-frozen .lead-card-avatar { background: var(--c-0284c7); }
.pipeline-lane-cancelled .lead-card-avatar { background: var(--c-e73753); }
.pipeline-lane-archived .lead-card-avatar { background: var(--c-6b7280); }

.pipeline-page .lead-card-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-page .archive-flag {
  padding: 2px 6px;
  font-size: 0.6rem;
}

/* Name and phone join the .lead-card-top grid directly. */
.pipeline-page .lead-card-identity {
  display: contents;
}

.pipeline-page .lead-card-identity > .lead-card-name {
  grid-column: 2;
  grid-row: 1;
}

.pipeline-page .lead-card-identity > .lead-card-phone {
  grid-column: 2 / -1;
  grid-row: 2;
  white-space: nowrap;
}

.pipeline-page .lead-card-followup {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: var(--c-eef4ff);
  font-size: 0.66rem;
  font-weight: 650;
  white-space: nowrap;
}

.pipeline-page .lead-card-followup.is-fresh { color: var(--c-166534); background: var(--c-dcfce7); }
.pipeline-page .lead-card-followup.is-late { color: var(--c-8a5a00); background: var(--c-fef3c7); }
.pipeline-page .lead-card-followup.is-overdue { color: var(--c-991b1b); background: var(--c-fee2e2); }

.pipeline-page .lead-card-operator {
  margin-bottom: -4px;
  overflow: hidden;
  color: var(--c-5b6b8c);
  font-size: 0.72rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-page .lead-card-operator.is-empty {
  color: var(--c-9aa3b5);
  font-weight: 500;
}

/* Scheduled-lane cards carry a top label with the lead's stage, tinted in that stage's color.
   One hue per meaning: blue new, violet talking, teal money agreed, amber unreachable,
   cyan reserved, rose debt. */
.pipeline-page .lead-card-due {
  --stage-color: var(--c-7452c8);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stage-color) 35%, var(--panel));
}

.pipeline-page .lead-card-due.stage-new_lead { --stage-color: var(--c-3b5bdb); }
.pipeline-page .lead-card-due.stage-callback { --stage-color: var(--c-7452c8); }
.pipeline-page .lead-card-due.stage-payment_date_agreed { --stage-color: var(--c-0d9488); }
.pipeline-page .lead-card-due.stage-couldnt_reach { --stage-color: var(--c-d97706); }
.pipeline-page .lead-card-due.stage-reserved { --stage-color: var(--c-0891b2); }
.pipeline-page .lead-card-due.stage-debt { --stage-color: var(--c-e11d48); }

.pipeline-page .lead-card-due-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
  padding: 3px var(--card-pad);
  border-bottom: 1px solid color-mix(in srgb, var(--stage-color) 18%, var(--panel));
  /* Darkened for text contrast; amber and cyan are too light as-is on a pale tint. */
  color: color-mix(in srgb, var(--stage-color) 78%, #000);
  background: color-mix(in srgb, var(--stage-color) 10%, var(--panel));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pipeline-page .lead-card-due-banner::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stage-color);
}

.pipeline-page .lead-card-due-banner > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-page .lead-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pipeline-page .lead-card-badges .status {
  padding: 3px 8px;
  font-size: 0.7rem;
}

.pipeline-page .lead-card-missed {
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--c-92400e);
  background: var(--warning-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.pipeline-page .lead-card-calls {
  margin-left: auto;
  color: var(--c-6b7591);
  font-weight: 600;
}

.pipeline-page .lead-card-tg {
  position: relative;
  z-index: 1;
  padding: 3px 9px;
  border: 1px solid var(--c-bfdcf5);
  border-radius: 6px;
  color: var(--c-1a8ad4);
  background: var(--c-eaf6ff);
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
}

.pipeline-page .lead-card-tg:hover {
  color: var(--on-accent);
  background: var(--c-229ed9);
  border-color: var(--c-229ed9);
}

/* Proportional digits and tight tracking keep "+998-90-123-45-67" compact on the card. */
.pipeline-page .lead-card-phone {
  color: var(--c-6b7591);
  font-size: 0.7rem;
  font-variant-numeric: proportional-nums;
  letter-spacing: -0.01em;
}

.pipeline-page .lead-card-note {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--c-f5f7fc);
  color: var(--c-3b4663);
  font-size: 0.76rem;
  line-height: 1.45;
}

.pipeline-page .lead-card-note strong {
  margin-bottom: 1px;
  color: var(--c-6b7591);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lead-card-note {
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--c-4a5779);
  background: var(--c-f0f3ff);
  font-size: 0.68rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lead-card-note strong {
  display: block;
  margin-bottom: 2px;
  color: var(--primary-dark);
  font-size: 0.64rem;
}

.pipeline-page .lead-card-meta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.7rem;
}

.pipeline-page .lead-card-meta > span:last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--c-6b7591);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-source {
  max-width: 58%;
  overflow: hidden;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--on-primary);
  background: var(--primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-page .lead-source {
  max-width: 60%;
  padding: 3px 8px;
  border: 1px solid var(--c-d9e0ee);
  border-radius: 999px;
  color: var(--c-33405c);
  background: var(--c-f3f5fa);
  font-size: 0.7rem;
  font-weight: 600;
}

.pipeline-page .lead-source.is-empty {
  border: 1px dashed var(--c-c4cbd9);
  background: transparent;
  color: var(--c-7a8498);
  font-weight: 500;
}

.pipeline-page .lead-card-footer {
  margin-top: 0;
  padding-top: 8px;
  border-top-color: var(--c-eef1f6);
  color: var(--c-7a8498);
  font-size: 0.68rem;
}

.pipeline-page .lead-card-footer a {
  color: var(--primary-dark);
  font-weight: 650;
}

.pipeline-page .lane-empty {
  padding: 20px 9px;
  font-size: 0.72rem;
}

.bulk-assign-button {
  gap: 6px;
}

.bulk-assign-button[hidden] {
  display: none;
}

.bulk-assign-dialog {
  width: min(420px, calc(100vw - 32px));
}

.bulk-assign-empty {
  margin: 0;
  color: var(--c-394a6e);
  font-size: 0.76rem;
}

.bulk-operator-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.bulk-operator-button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 0.74rem;
}

.bulk-operator-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bulk-select-input {
  display: none;
}

.bulk-assign-form.is-selecting .bulk-select-input {
  display: block;
  position: absolute;
  top: calc(var(--card-pad) + (var(--card-avatar) - 16px) / 2);
  right: var(--card-pad);
  z-index: 2;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.bulk-assign-form.is-selecting .lead-card.is-selectable .lead-card-top {
  padding-right: 24px;
}

.bulk-assign-form.is-selecting .lead-card.is-selectable {
  cursor: pointer;
}

.bulk-assign-form.is-selecting .lead-card.is-selected {
  border-color: var(--primary);
  background: var(--c-f3f7ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.guest-shell .guest-topbar {
  display: flex;
}

@media (max-width: 1150px) {
  .app-shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .app-shell.is-sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .app-main.main-content {
    padding: 22px 18px 28px;
  }

  .pipeline-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 9px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    display: block;
  }

  .sidebar-toggle {
    display: none;
  }

  .app-shell.is-sidebar-collapsed .app-sidebar {
    padding: 24px 17px 18px;
  }

  .app-shell.is-sidebar-collapsed .sidebar-header {
    flex-direction: row;
  }

  .app-shell.is-sidebar-collapsed .app-brand {
    justify-content: flex-start;
  }

  .app-shell.is-sidebar-collapsed .sidebar-brand-text,
  .app-shell.is-sidebar-collapsed .app-nav-link span,
  .app-shell.is-sidebar-collapsed .sidebar-profile-meta {
    display: block;
  }

  .app-shell.is-sidebar-collapsed .sidebar-week-text {
    display: grid;
  }

  .app-shell.is-sidebar-collapsed .sidebar-week {
    justify-items: stretch;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
  }

  .app-shell.is-sidebar-collapsed .sidebar-week-item {
    padding: 4px;
  }

  .app-shell.is-sidebar-collapsed .sidebar-week-item + .sidebar-week-item {
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .app-shell.is-sidebar-collapsed .app-nav {
    margin-top: 34px;
  }

  .app-shell.is-sidebar-collapsed .app-nav-link {
    justify-content: flex-start;
    padding: 0 11px;
  }

  .app-shell.is-sidebar-collapsed .sidebar-profile {
    flex-direction: row;
  }

  .app-shell.is-menu-open::before {
    position: fixed;
    z-index: 15;
    inset: 0;
    background: rgba(21, 26, 45, 0.28);
    content: "";
  }

  .app-sidebar {
    position: fixed;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(270px, calc(100vw - 42px));
    min-height: 0;
    height: 100vh;
    box-shadow: 10px 0 30px rgba(21, 26, 45, 0.14);
    transform: translateX(-110%);
    transition: transform 0.2s ease;
  }

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

  .app-main.main-content {
    padding: 0 12px 22px;
  }

  .mobile-topbar {
    min-height: 64px;
    margin: 0 -12px 17px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--c-edf0f6);
    background: var(--panel);
  }

  .mobile-topbar .app-brand {
    font-size: 0.9rem;
  }

  .mobile-topbar .app-brand-mark {
    width: 31px;
    height: 31px;
  }

  .menu-toggle {
    width: 37px;
    height: 37px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-e6eaf3);
    border-radius: 9px;
    color: var(--c-6f7892);
    background: var(--panel);
  }

  .pipeline-page {
    gap: 12px;
  }

  .pipeline-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
  }

  .overview-stat {
    min-height: 52px;
    padding: 6px 8px;
  }

  .pipeline-panel {
    padding: 15px 10px 12px;
    border-radius: 15px;
  }

  .pipeline-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 13px;
  }

  .pipeline-heading h1 {
    font-size: 1.2rem;
  }

  .pipeline-add {
    min-height: 35px;
  }

  .pipeline-filter-primary {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .pipeline-search-field {
    flex-basis: 100%;
  }

  .pipeline-operator-field {
    flex: 1 1 140px;
  }

  .pipeline-date-range {
    flex: 1 1 100%;
  }

  .pipeline-filter-secondary {
    align-items: stretch;
  }

  .pipeline-filter-pill {
    flex: 1 1 30%;
  }

  .pipeline-filter-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  .pipeline-board {
    grid-template-columns: repeat(5, minmax(205px, 1fr));
  }

  .guest-shell .main-content {
    padding-top: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  *::backdrop {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 900px) {
  .crm-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-search-field {
    grid-column: span 2;
  }

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

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

  .lead-side-column > .history-section {
    position: static;
  }

  .history-section .timeline {
    max-height: 420px;
  }
}

@media (max-width: 600px) {
  .crm-heading,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .crm-heading-actions {
    width: 100%;
  }

  .crm-heading-actions > a,
  .crm-heading-actions > button {
    flex: 1;
  }

  .crm-metrics {
    gap: 8px;
  }

  .crm-metric {
    padding: 13px;
  }

  .crm-metric strong {
    font-size: 1.08rem;
    overflow-wrap: anywhere;
  }

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

  .crm-search-field,
  .crm-form-wide {
    grid-column: auto;
  }

  .lead-detail-list > div {
    grid-template-columns: 95px 1fr;
  }
}

@keyframes crm-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes crm-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes crm-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes crm-dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

/* Entrance motion only when arriving from another page (base.html adds .animate-in),
   so reloads, auto-refreshes and filter changes don't replay it. */
.animate-in .app-main > section {
  animation: crm-fade-up 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* The sidebar width only animates while its toggle is clicked (see navigation.js). */
.app-shell.is-sidebar-animating {
  transition: grid-template-columns 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Labels clip instead of wrapping while the column is mid-resize. */
.app-shell.is-sidebar-animating .app-sidebar {
  overflow: hidden;
}

.app-shell.is-sidebar-animating .app-sidebar * {
  white-space: nowrap;
}

.messages .alert {
  animation: crm-slide-down 0.3s ease backwards;
}

.animate-in .summary-grid > .metric-card,
.animate-in .pipeline-board > .pipeline-lane {
  animation: crm-fade-up 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.animate-in .summary-grid > .metric-card:nth-child(2),
.animate-in .pipeline-board > .pipeline-lane:nth-child(2) { animation-delay: 40ms; }
.animate-in .summary-grid > .metric-card:nth-child(3),
.animate-in .pipeline-board > .pipeline-lane:nth-child(3) { animation-delay: 80ms; }
.animate-in .pipeline-board > .pipeline-lane:nth-child(n + 4) { animation-delay: 120ms; }

.lead-dialog[open] {
  animation: crm-dialog-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lead-dialog[open]::backdrop {
  animation: crm-fade-in 0.2s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* UZS amounts: keep "2,000,000 UZS" on one line and digits aligned. */
.money-cell,
input[data-money] {
  font-variant-numeric: tabular-nums;
}

.money-cell {
  white-space: nowrap;
}

.balance-owed {
  color: var(--danger);
  font-weight: 600;
}

.balance-credit {
  color: var(--success);
  font-weight: 600;
}

.ledger-charge td {
  background: rgba(220, 38, 38, 0.03);
}

.payment-logs-section {
  margin-top: 18px;
}

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

/* High Contrast theme: heavier borders and an unmistakable focus ring. */
:root[data-theme="high_contrast"] .panel,
:root[data-theme="high_contrast"] input,
:root[data-theme="high_contrast"] select,
:root[data-theme="high_contrast"] textarea,
:root[data-theme="high_contrast"] .btn {
  border-width: 2px;
}

:root[data-theme="high_contrast"] :focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Payments page (Boss, Dev, Manager). Builds on the .archive-* page styles. */
.payment-heading {
  flex-wrap: wrap;
}

.archive-header .payment-total {
  margin: 0 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}

.archive-header .payment-total strong {
  margin-left: 4px;
  color: var(--text);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.payment-date-range {
  position: relative;
  flex: 0 1 230px;
  min-width: 190px;
}

.payment-toolbar .date-range-trigger {
  height: 40px;
  min-height: 40px;
  font-size: 0.82rem;
}

.payment-select-field {
  flex: 0 1 230px;
  min-width: 170px;
}

.payment-sort-field {
  flex-basis: 140px;
  min-width: 120px;
}

.payment-table td {
  white-space: nowrap;
}

.payment-date,
/* Formatted phones ("+998-90-123-45-67") must not break at their hyphens. */
.payment-phone,
.phone-text {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payment-student a {
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

.payment-student a:hover,
.payment-receipt:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* The whole row opens the lead, not just the name. */
.payment-table tbody tr {
  cursor: pointer;
}

.payment-table .payment-student a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.payment-table tbody tr:hover .payment-student a {
  color: var(--primary);
}

/* Other controls in the row stay clickable above the row link. */
.payment-table .payment-receipt,
.payment-table .payment-review-actions {
  position: relative;
  z-index: 1;
}

.payment-receipt {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.payment-table .is-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.payment-back {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.payment-review-link {
  margin-left: auto;
  min-height: 43px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.payment-review-link:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.payment-review-link + .payment-total {
  margin-left: 0;
}

.payment-review-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-muted);
  color: var(--text-soft);
  font-size: 0.74rem;
  text-align: center;
}

.payment-review-link.has-pending .payment-review-count {
  background: var(--warning);
  color: var(--on-warning);
}

.payment-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 650;
}

.payment-status.is-pending {
  background: var(--warning-soft);
  color: var(--warning);
}

.payment-status.is-approved {
  background: var(--success-soft);
  color: var(--success);
}

.payment-status.is-disapproved {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Each row takes the tint of its status badge (not on Tekshiruv, where every row is pending). */
.payment-table:not(.is-review) .payment-row.is-pending {
  background: color-mix(in srgb, var(--warning-soft) 55%, transparent);
}

.payment-table:not(.is-review) .payment-row.is-approved {
  background: color-mix(in srgb, var(--success-soft) 55%, transparent);
}

.payment-table:not(.is-review) .payment-row.is-disapproved {
  background: color-mix(in srgb, var(--danger-soft) 55%, transparent);
}

.payment-table:not(.is-review) .payment-row.is-pending:hover {
  background: var(--warning-soft);
}

.payment-table:not(.is-review) .payment-row.is-approved:hover {
  background: var(--success-soft);
}

.payment-table:not(.is-review) .payment-row.is-disapproved:hover {
  background: var(--danger-soft);
}

/* Joy band students who have since been enrolled into a group. */
.reserved-table tbody tr.is-enrolled {
  background: color-mix(in srgb, var(--success-soft) 55%, transparent);
}

.reserved-table tbody tr.is-enrolled:hover {
  background: var(--success-soft);
}

.payment-row.is-disapproved .is-amount {
  color: var(--text-soft);
  text-decoration: line-through;
}

.payment-review-actions {
  display: flex;
  gap: 6px;
}

.payment-review-actions .btn {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 650;
}

.payment-approve {
  border-color: transparent;
  background: var(--success);
  color: var(--on-success);
}

.payment-approve:hover {
  filter: brightness(0.92);
}

.payment-disapprove {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}

.payment-disapprove:hover {
  border-color: var(--danger);
}

@media (max-width: 720px) {
  .archive-header .payment-total {
    margin-left: 0;
    flex: 1 1 auto;
  }

  .payment-date-range,
  .payment-select-field {
    flex: 1 1 100%;
  }

  /* Card order: student + amount, then date + operator, phone + type, receipt. */
  .payment-table td:nth-child(2) { order: 1; }
  .payment-table td:nth-child(4) { order: 2; }
  .payment-table td:nth-child(1) { order: 3; }
  .payment-table td:nth-child(6) { order: 4; }
  .payment-table td:nth-child(3) { order: 5; }
  .payment-table td:nth-child(5) { order: 6; }
  .payment-table td:nth-child(7) { order: 7; }
  .payment-table td:nth-child(7):has(.archive-muted) { display: none; }
  .payment-table td:nth-child(8) { order: 8; grid-column: 1 / -1; }

  .payment-review-actions .btn {
    flex: 1;
  }

  .archive-header .payment-review-link {
    margin-left: 0;
  }

  .payment-table td:nth-child(4),
  .payment-table td:nth-child(5),
  .payment-table td:nth-child(6) {
    text-align: right;
  }

  .payment-table .payment-date small {
    display: inline;
    margin-left: 6px;
  }
}

/* Debt and Joy band pages. */
.archive-header-icon.is-debt {
  background: var(--danger-soft);
  color: var(--danger);
}

.archive-header-icon.is-reserved {
  background: var(--warning-soft);
  color: var(--warning);
}

.payment-total strong.is-debt,
.payment-table td.is-debt {
  color: var(--danger);
}

.debt-due.is-today {
  color: var(--warning);
  font-weight: 700;
}

.debt-due.is-overdue {
  color: var(--danger);
  font-weight: 700;
}

/* Boss and Manager: a sales card whose label opens the matching list; the whole card is the link. */
.sales-card.is-link {
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sales-card.is-link:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.sales-card-link {
  color: inherit;
  text-decoration: none;
}

.sales-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

a.sales-debt {
  display: inline-block;
}

/* Dev dashboard: the view switcher above the panel and the technical health cards. */
.view-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.view-switch-operator {
  display: flex;
  gap: 8px;
}

.view-switch-operator select {
  min-width: 0;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.dev-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Holat: answers "is anything broken?" first; colour is used for status only. */
.dev-status {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 35px rgba(40, 54, 110, 0.055);
}

.dev-status.is-ok { border-left-color: var(--success); }
.dev-status.is-warn { border-left-color: var(--warning); }
.dev-status.is-bad { border-left-color: var(--danger); }

.dev-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dev-status-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
}

.dev-status-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.dev-status.is-ok .dev-status-summary { color: var(--success); }
.dev-status.is-warn .dev-status-summary { color: var(--warning); }
.dev-status.is-bad .dev-status-summary { color: var(--danger); }

.dev-status-ok {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.dev-issues {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.dev-issue {
  padding: 9px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.dev-issue::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

.dev-issue.is-bad::before { background: var(--danger); }
.dev-issue.is-warn::before { background: var(--warning); }

.dev-issue-text {
  flex: 1;
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.dev-issue-text code {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--panel-muted);
  color: var(--text-soft);
  font-size: 0.76rem;
}

.dev-issue-link {
  flex: none;
  color: var(--primary-dark);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.dev-issue-link:hover {
  text-decoration: underline;
}

/* Three headline numbers, each with what it is compared against. */
.dev-trends {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dev-trend {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.dev-trend dt {
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 600;
}

.dev-trend dd {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 750;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dev-trend dd.is-bad {
  color: var(--danger);
}

.dev-trend dd small {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.dev-trend .dev-trend-change {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 500;
}

.dev-layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.dev-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card grid for the Dev tools pages. */
.dev-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
  gap: 20px;
}

.dev-card.is-wide {
  grid-column: 1 / -1;
}

.dev-card {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 35px rgba(40, 54, 110, 0.055);
}

.dev-card-head {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dev-card-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.dev-card-link {
  color: var(--primary-dark);
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.dev-card-link:hover {
  text-decoration: underline;
}

.dev-card-meta,
.dev-card-note,
.dev-empty {
  margin: 0 0 8px;
  color: var(--text-soft);
  font-size: 0.8rem;
}

.dev-card-head .dev-card-meta {
  margin: 0;
}

.dev-card-meta strong {
  color: var(--text);
}

.dev-card-meta .is-negative {
  color: var(--danger);
}

.dev-card-note {
  margin: 10px 0 0;
  font-size: 0.72rem;
}

.dev-subhead {
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dev-subhead span {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--panel-muted);
  letter-spacing: 0;
}

.dev-card-meta + .dev-subhead,
.dev-card-head + .dev-subhead {
  margin-top: 0;
}

.dev-sub {
  display: block;
  margin-top: 1px;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 500;
}

.dev-muted {
  color: var(--text-soft);
  font-size: 0.76rem;
  white-space: nowrap;
}

.dev-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-muted);
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.dev-badge.is-good { background: var(--success-soft); color: var(--success); }
.dev-badge.is-warn { background: var(--warning-soft); color: var(--warning); }
.dev-badge.is-bad { background: var(--danger-soft); color: var(--danger); }
.dev-badge.is-info { background: var(--primary-soft); color: var(--primary-dark); }

a.dev-badge:hover {
  text-decoration: underline;
}

.dev-chips {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.intake-list,
.balance-list,
.dev-events,
.dev-people {
  margin: 0;
  padding: 0;
  list-style: none;
}

.intake-row,
.balance-list li {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 64px;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.intake-row:last-child,
.balance-list li:last-child {
  border-bottom: 0;
}

.intake-row:target {
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.balance-list li {
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 32px;
  gap: 10px;
}

.intake-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.intake-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.intake-label {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intake-bars {
  height: 34px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.intake-bars span {
  flex: 1;
  min-height: 3px;
  border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--primary) 55%, transparent);
}

.intake-bars span.is-empty {
  background: var(--line);
}

.intake-bars span.is-today {
  background: var(--primary);
}

.intake-bars span.is-today.is-empty {
  background: var(--line);
}

.intake-row.is-silent .intake-bars span.is-today {
  min-height: 34px;
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  box-shadow: inset 0 -3px 0 var(--danger);
}

.intake-count {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.intake-count small {
  color: var(--text-soft);
  font-size: 0.74rem;
}

.intake-axis {
  padding: 4px 0 0;
}

.intake-axis-labels {
  display: flex;
  justify-content: space-between;
  color: var(--text-soft);
  font-size: 0.68rem;
}

.plan-bar.is-neutral span {
  background: var(--primary);
}

.dev-events li,
.dev-people li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}

.dev-events li:last-child,
.dev-people li:last-child {
  border-bottom: 0;
}

.dev-event-main,
.dev-person {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.dev-person {
  flex: 1;
  font-weight: 600;
}

.dev-person a {
  color: inherit;
  text-decoration: none;
}

.dev-person a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.dev-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-muted);
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 1150px) {
  .dev-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .dev-trends {
    grid-template-columns: minmax(0, 1fr);
  }

  .dev-issue {
    flex-wrap: wrap;
  }

  .dev-issue-link {
    margin-left: 18px;
  }

  .intake-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
  }

  .intake-bars {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .intake-axis {
    display: none;
  }

  .dev-card {
    padding: 14px;
  }
}

/* Dev tools page. */
.dev-tools-head {
  flex-wrap: wrap;
}

.dev-tools-head h1 {
  margin: 0 0 4px;
}

.dev-toolbar {
  flex-wrap: wrap;
  align-items: center;
}

.dev-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 360px;
}

.dev-filter input {
  flex: 1 1 200px;
  width: auto;
}

.dev-filter select {
  flex: 0 1 180px;
  width: auto;
}

.dev-tools .data-table th small,
.dev-tools .data-table td small {
  text-transform: none;
  letter-spacing: 0;
}

.dev-tools .data-table tbody th {
  background: none;
  color: var(--text);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
}

.dev-tools tr.is-muted {
  opacity: 0.6;
}

.dev-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.dev-narrow {
  max-width: 560px;
}

.check-field label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.check-field input,
.dev-radio input {
  width: auto;
}

.dev-radios {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.dev-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.dev-radio:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.key-reveal {
  border-color: var(--warning);
}

.key-reveal h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.key-reveal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.key-reveal code {
  flex: 1 1 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-muted);
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------
   Design polish: self-hosted Inter, Lucide icons ({% icon %} tag),
   consistent button/icon spacing and a visible keyboard focus ring.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
  --icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

html,
body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
}

table,
.money-cell,
.week-ring,
.follow-up-option-count {
  font-variant-numeric: tabular-nums;
}

/* Icons: 1em by default so they follow the text they sit next to.
   Context rules (e.g. `.app-nav-link svg`) and the tag's `size` win. */
.icon {
  flex: 0 0 auto;
  vertical-align: -0.125em;
}

.icon:not([width]) {
  width: 1em;
  height: 1em;
}

.app-nav-link svg,
.sidebar-logout svg,
.menu-toggle svg,
.sidebar-toggle svg,
.today-pill svg,
.leaderboard-tab svg,
.sales-icon svg,
.date-range-trigger svg,
.report-button svg {
  stroke-width: 1.75;
}

.btn,
.dev-card-link,
.payment-back,
.today-stat-link,
.sales-debt,
.sales-card-link,
.plan-stat-open,
.dev-issue-link {
  gap: 6px;
}

.dev-card-link,
.payment-back,
.today-stat-link,
.sales-card-link,
.dev-issue-link {
  display: inline-flex;
  align-items: center;
}

.link-arrow {
  width: 0.95em;
  height: 0.95em;
  transition: transform 0.15s ease;
}

a:hover > .link-arrow,
button:hover > .link-arrow,
a:focus-visible > .link-arrow,
button:focus-visible > .link-arrow {
  transform: translateX(2px);
}

/* Buttons: hover feedback for the quiet variants, crisp focus for all. */
.btn-ghost:hover {
  background: var(--panel-muted);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

.btn-secondary:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  color: var(--primary-dark);
}

.btn-primary {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  border-radius: 8px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--primary);
}

/* Filter menus on the lead pipeline: tinted icons instead of emoji. */
.filter-icon {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -0.2em;
}

.filter-icon.is-danger { color: var(--danger); }
.filter-icon.is-warning { color: var(--warning); }
.filter-icon.is-success { color: var(--success); }
.filter-icon.is-primary,
.filter-icon.is-info { color: var(--primary); }
.filter-icon.is-muted { color: var(--text-soft); }

.follow-up-chevron.icon {
  width: 15px;
  height: 15px;
  transition: transform 0.18s ease;
}

.follow-up-filter[open] > summary .follow-up-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .link-arrow,
  .follow-up-chevron.icon {
    transition: none;
  }
}

/* Notification toasts, stacked in the top-right corner (see notifications.js). */
.notification-toasts {
  position: fixed;
  z-index: 40;
  right: 16px;
  top: 16px;
  width: min(340px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.notification-toast {
  padding: 11px 10px 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(21, 26, 45, 0.16);
  pointer-events: auto;
  animation: notification-toast-in 0.22s ease-out;
}

.notification-toast.is-scheduled {
  border-left-color: var(--warning);
}

.notification-toast a {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.notification-toast a:hover {
  color: var(--primary-dark);
}

.notification-toast a small {
  display: block;
  margin-bottom: 2px;
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.notification-toast button {
  width: 24px;
  height: 24px;
  flex: none;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.notification-toast button:hover {
  background: var(--panel-muted);
}

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

@media (prefers-reduced-motion: reduce) {
  .notification-toast { animation: none; }
}