:root {
  --ink: #182b45;
  --muted: #64748b;
  --line: #d7e0ea;
  --paper: #f5f8fc;
  --panel: #ffffff;
  --green: #0057a8;
  --green-2: #d8ebff;
  --gold: #f58220;
  --blue: #0057a8;
  --orange: #f58220;
  --red: #9c3f3a;
  --shadow: 0 18px 40px rgba(20, 60, 110, 0.1);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

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

/* ── Auth overlay ──────────────────────────────────────────────── */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 37, 86, 0.85);
  display: grid;
  place-items: center;
  padding: 20px;
}

.auth-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 37, 86, 0.28);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand h1 {
  font-size: 1.4rem;
  color: var(--blue);
  margin: 0;
}

.auth-brand p {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
}

.auth-tagline {
  font-size: 0.9rem;
  color: var(--ink);
}

.auth-google-btn {
  width: 100%;
  padding: 12px;
  font-size: 0.95rem;
}

.auth-note {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}
.auth-error {
  font-size: 0.8rem;
  color: #c0392b;
  background: #fdf0ef;
  border: 1px solid #e8b4b0;
  border-radius: 6px;
  padding: 8px 12px;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}

/* ── Sync status indicator ────────────────────────────────────── */

.grip-sync-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  align-self: center;
}

.sync-local   { background: #f0f0f0; color: #666; }
.sync-syncing { background: #e3f1ff; color: #0057a8; }
.sync-saved   { background: #d8f1df; color: #147b48; }
.sync-ready   { background: transparent; color: #22a05a; font-weight: 500; }
.sync-error   { background: #fde8e8; color: #9c3f3a; }

.grip-user-display {
  font-size: 0.75rem;
  color: var(--muted);
  align-self: center;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Contractor submissions in detail drawer ─────────────────── */

.contractor-submission {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #f8fbff;
  font-size: 0.82rem;
}

.contractor-submission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.85rem;
}

.contractor-submission-item {
  border-top: 1px solid var(--line);
  padding: 6px 0;
}

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

.app-shell.details-hidden {
  grid-template-columns: 230px minmax(0, 1fr);
}

.app-shell.details-hidden .detail-drawer {
  display: none;
}

.sidebar {
  background: var(--blue);
  color: #ffffff;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mobile-version-button {
  flex: 0 0 auto;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  opacity: 0.85;
  transition: opacity .15s, background .15s;
  white-space: nowrap;
}

.mobile-version-button:hover {
  opacity: 1;
  background: var(--line);
}

.mobile-version-icon {
  flex: 0 0 auto;
}

.mobile-version-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--orange);
  color: #ffffff;
  font-weight: 800;
  flex: 0 0 46px;
  overflow: hidden;
  padding: 0;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand h1,
.topbar h2,
.panel h3 {
  margin: 0;
}

.brand h1 {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.15;
}

.brand p,
.eyebrow,
.panel-header span {
  margin: 0;
  color: #7a8ba0;
  font-size: 0.78rem;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav-button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 12px;
  background: transparent;
  color: #e8f2ff;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.nav-letter-icon {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.nav-letter-icon-wide {
  font-size: 0.5rem;
}

.nav-button:hover,
.nav-button.is-active {
  background: var(--orange);
  color: #fff;
}

.nav-projects-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-sub-button {
  padding: 6px 10px 6px 30px;
  font-size: 0.78rem;
  opacity: 0.92;
  border-radius: 4px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  margin-left: 4px;
}

.nav-sub-button:hover,
.nav-sub-button.is-active {
  background: var(--orange);
  opacity: 1;
  border-left-color: #fff;
}

.nav-more-button,
.mobile-more-menu {
  display: none;
}

.external-links,
.sidebar-actions {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  gap: 8px;
}

.external-links,
.sidebar-actions {
  margin-top: 0;
}

.external-links a,
.external-links button,
.sidebar-actions button {
  font-size: 0.82rem;
  font-weight: 650;
}

.sidebar .brand p,
.sidebar .external-links span,
.sidebar .sidebar-actions span {
  color: #dbeafe;
}

.sidebar .brand p {
  font-size: 0.68rem;
  line-height: 1.15;
  margin-top: 2px;
}

.sidebar .external-links a,
.sidebar .external-links button {
  color: #ffffff;
}

.external-links a,
.external-links button {
  text-decoration: none;
}

.external-links a:hover,
.external-links button:hover {
  color: var(--orange);
}

.external-links button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-align: left;
  padding: 0 10px;
}

.external-links button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--orange);
}

.sidebar-actions button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  padding: 0 10px;
}

.sidebar-actions button:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.workspace {
  padding: 26px;
  min-width: 0;
}

.mobile-quick-add {
  display: none;
}

.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 22px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-shrink: 1;
  min-width: 0;
}

.topbar-user-info {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #f3f4f6;
  border-radius: 20px;
  padding: 3px 10px 3px 5px;
  white-space: nowrap;
}

.topbar-btn {
  font-size: 0.72rem;
  font-weight: 600;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.topbar-btn:hover { background: #f5f5f5; }

.topbar-detail-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: transparent;
  color: #888;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.topbar-detail-toggle:hover { background: #f0f0f0; color: var(--ink); }
.topbar-detail-toggle svg { transition: transform 0.2s; }

.topbar-title {
  flex: 0 0 292px;
  min-width: 292px;
}

.topbar-title {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.topbar h2 {
  font-size: 1.9rem;
  margin: 0;
}

.eyebrow {
  color: var(--orange);
  margin: 0;
  text-transform: uppercase;
  font-weight: 750;
}

.search {
  flex: 1 1 220px;
  min-width: min(180px, 100%);
  max-width: 520px;
  height: 44px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  position: relative;
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

/* ── Global search results overlay ──────────────────────── */
.gs-results {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  right: -1px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  z-index: 120;
  max-height: 420px;
  overflow-y: auto;
}

.gs-group-label {
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 4px;
}

.gs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-radius: 0;
  transition: background .1s;
}

.gs-item:hover, .gs-item:focus {
  background: var(--panel);
  outline: none;
}

.gs-item-icon {
  font-size: 1rem;
  flex: 0 0 20px;
  text-align: center;
}

.gs-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.gs-item-name {
  font-weight: 700;
  font-size: 0.87rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-item-meta {
  font-size: 0.74rem;
  color: var(--muted);
}

.gs-item-badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
}

.gs-empty {
  padding: 18px 14px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

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

.detail-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

#territorySettingsButton {
  min-height: 30px;
  padding: 0 8px;
  font-size: 0.72rem;
}

.view {
  display: none;
}

[hidden] {
  display: none !important;
}

.view.is-active {
  display: block;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kpi,
.panel,
.record-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.kpi {
  padding: 16px;
}

.kpi span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 750;
}

.kpi strong {
  display: block;
  margin-top: 8px;
  font-size: 1.75rem;
}

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

.command-center {
  margin-bottom: 16px;
}

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

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

.command-panel-header h3 {
  margin: 0;
  color: #000;
  font-size: 1rem;
}

.command-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.command-row {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbff;
  color: #000;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: center;
  padding: 8px 10px;
  text-align: left;
}

.command-row strong {
  color: var(--blue);
  font-size: 1rem;
  line-height: 1;
  grid-row: span 2;
}

.command-row span,
.command-row small {
  color: #000;
}

.command-row span {
  font-weight: 800;
  font-size: 0.84rem;
}

.command-row small {
  font-size: 0.72rem;
}

.command-row:hover {
  border-color: var(--orange);
  background: #fff;
}

.command-row-review strong {
  color: var(--orange);
}

.command-row-backup strong {
  color: #107c41;
}

.goal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.quick-filter-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.quick-filter {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: #000;
  cursor: pointer;
  font-weight: 750;
  min-height: 34px;
  padding: 0 10px;
}

.quick-filter:hover {
  border-color: var(--orange);
}

.news-report-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}

.news-report-panel h3 {
  margin: 2px 0 6px;
  color: #000;
}

.news-report-panel p,
.news-copy {
  color: #000;
  line-height: 1.45;
  margin: 0;
}

.news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

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

.news-prompt {
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #000;
  font: 0.92rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 14px;
  resize: vertical;
}

.due-today-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
}

.due-today-item {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange);
  border-radius: 8px;
  background: #fff;
  color: #000;
  cursor: pointer;
  padding: 12px;
  text-align: left;
}

.due-today-item:hover {
  border-color: var(--orange);
  background: #fff7ed;
}

.due-today-item strong {
  font-size: 0.98rem;
}

.due-today-item span,
.due-today-item small {
  color: #000;
}

.due-today-item small {
  font-weight: 850;
}

.daily-alert-snooze-row {
  padding: 10px 20px 16px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}
.daily-alert-snooze-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #64748b;
  cursor: pointer;
  user-select: none;
}
.daily-alert-snooze-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

.task-hero {
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #eef7ff);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 16px;
}

.task-hero h3 {
  color: #000;
  font-size: 1.35rem;
  margin: 2px 0 4px;
}

.task-hero p {
  color: #000;
  margin: 0;
}

.task-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.task-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  color: #000;
  cursor: pointer;
  display: grid;
  gap: 5px;
  min-height: 70px;
  padding: 10px;
  text-align: left;
}

.task-summary-card:hover {
  border-color: var(--orange);
}

.task-summary-card span {
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.task-summary-card strong {
  color: var(--blue);
  font-size: 1.35rem;
  line-height: 1;
}

.task-card {
  display: grid;
  gap: 10px;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.task-card:hover {
  transform: translateY(-1px);
}

.task-card.overdue {
  border-left: 5px solid #bd0808;
}

.task-card.today {
  border-left: 5px solid var(--orange);
}

.task-card.completed {
  background: #f4faf6;
  opacity: 0.82;
}

.task-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.task-card-top h3 {
  margin: 0 0 4px;
}

.task-card-top p,
.task-next-action {
  color: #000;
  margin: 0;
}

.task-check {
  cursor: pointer;
  display: inline-grid;
  height: 24px;
  place-items: center;
  width: 24px;
}

.task-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.task-check span {
  border: 2px solid var(--line);
  border-radius: 50%;
  display: block;
  height: 22px;
  width: 22px;
}

.task-check input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  position: relative;
}

.task-check input:checked + span::after {
  color: #fff;
  content: "✓";
  font-size: 0.82rem;
  font-weight: 900;
  left: 4px;
  position: absolute;
  top: 0;
}

.pill.task-type-call {
  background: #e3f1ff;
  color: #0057a8;
}

.pill.task-type-email {
  background: #ecfdf3;
  color: #147b48;
}

.pill.task-type-follow-up {
  background: #fff0df;
  color: #8a3f00;
}

.pill.task-type-project-related {
  background: #e7e2ff;
  color: #56378f;
}

.pill.task-type-proposal-related {
  background: #ffe8f0;
  color: #9a2455;
}

.pill.task-priority-low {
  background: #eef2f0;
  color: #425466;
}

.pill.task-priority-normal {
  background: #e3f1ff;
  color: #0057a8;
}

.pill.task-priority-high {
  background: #fff0df;
  color: #8a3f00;
}

.pill.task-priority-urgent,
.pill.task-due-overdue {
  background: #bd0808;
  color: #fff;
}

.pill.task-status-completed {
  background: #d8f1df;
  color: #147b48;
}

.pill.task-status-waiting {
  background: #fff4d5;
  color: #6d4f00;
}

.pill.task-status-cancelled {
  background: #e7e7e7;
  color: #333;
}

.pill.task-due-today {
  background: var(--orange);
  color: #fff;
}

.task-thumbs,
.task-attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-thumbs img,
.task-thumbs span {
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.task-thumbs span {
  align-items: center;
  background: #f8fbff;
  color: var(--blue);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 850;
  justify-content: center;
}

/* ── Task form sections ─────────────────────────────────────────── */
.task-section {
  border-top: 1px solid var(--line);
  padding: 16px 0 4px;
}

.task-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 12px;
}

.task-template-strip,
.task-date-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-template-strip {
  margin-bottom: 14px;
}

.task-template-strip button,
.task-date-buttons button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  min-height: 30px;
  padding: 0 10px;
}

.task-template-strip button:hover,
.task-date-buttons button:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.form-grid .task-account-mode {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 7px 8px;
}

.form-grid .task-account-mode legend {
  color: #000;
  font-size: 0.72rem;
  font-weight: 850;
  padding: 0 3px;
}

.form-grid .task-account-mode label {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #000;
  display: inline-flex;
  font-size: 0.78rem;
  gap: 4px;
  min-height: 28px;
  padding: 0 9px;
  width: auto;
}

.form-grid .task-account-mode label:has(input:checked) {
  background: #e3f1ff;
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 850;
}

.form-grid .task-account-mode input[type="radio"] {
  display: none;
}

.task-account-search {
  align-self: end;
}

.task-new-account-fields {
  gap: 8px;
  padding: 8px;
}

.task-new-account-fields label {
  gap: 4px;
}

.task-new-account-fields input,
.task-new-account-fields select {
  min-height: 36px;
}

.task-drop-zone {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.task-drop-zone.is-dragging {
  border-color: var(--orange);
  background: #fff8f0;
}

.task-attachment-chip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 8px;
  min-width: min(100%, 230px);
  padding: 6px;
}

.task-attachment-chip img,
.task-attachment-chip > span {
  border-radius: 6px;
  grid-row: span 2;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.task-attachment-chip > span {
  align-items: center;
  background: #e3f1ff;
  color: var(--blue);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 850;
  justify-content: center;
}

.task-attachment-chip strong,
.task-attachment-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-status.overdue {
  border-color: #bd0808;
}

.punch-hero {
  background: linear-gradient(135deg, #ffffff, #eef7ff);
}

.punch-card {
  display: grid;
  gap: 10px;
}

.punch-card.overdue {
  border-left: 5px solid #bd0808;
}

.punch-card.today {
  border-left: 5px solid var(--orange);
}

.punch-review-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
}

.punch-review-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.punch-review-head h4,
.punch-review-head p {
  margin: 0;
}

.punch-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.punch-comparison section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.punch-comparison p {
  color: #000;
}

.punch-rejection-note {
  border-left: 4px solid #bd0808;
  background: #fff1f1;
  color: #000;
  margin: 0;
  padding: 8px;
}

.punch-item-builder,
.punch-closeout-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

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

.checkline {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: #000;
  display: flex;
  gap: 6px;
  padding: 4px 8px;
  font-size: 0.82rem;
}

.punch-existing-items {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f0f7ff;
  padding: 10px 12px;
}

.punch-existing-items h4 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--blue);
}

.punch-mini-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 4px;
  font-size: 0.8rem;
}

.punch-mini-item strong {
  font-size: 0.82rem;
  grid-column: 1;
}

.punch-mini-item .pill {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  font-size: 0.7rem;
  padding: 2px 6px;
}

.punch-mini-item span,
.punch-mini-item small {
  grid-column: 1 / -1;
  color: #555;
}

.punch-portal-note {
  font-size: 0.78rem;
  color: #666;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  background: #fffbe8;
  margin-top: 6px;
}

.pill.punch-status-draft,
.pill.punch-status-running-punch-list,
.pill.punch-status-open {
  background: #e3f1ff;
  color: #0057a8;
}

.pill.punch-status-sent-to-contractor,
.pill.punch-status-pending-contractor-response {
  background: #fff0df;
  color: #8a3f00;
}

.pill.punch-status-contractor-submitted,
.pill.punch-status-submitted-for-review,
.pill.punch-status-under-review {
  background: #e7e2ff;
  color: #56378f;
}

.pill.punch-status-approved,
.pill.punch-status-closed {
  background: #d8f1df;
  color: #147b48;
}

.pill.punch-status-rejected-needs-correction,
.pill.punch-status-rejected,
.pill.punch-status-needs-additional-correction {
  background: #bd0808;
  color: #fff;
}

.pill.punch-severity-warranty-critical,
.pill.punch-severity-leak-risk,
.pill.punch-severity-safety-issue {
  background: #bd0808;
  color: #fff;
}

.pill.punch-severity-cosmetic,
.pill.punch-severity-cleanup {
  background: #fff4d5;
  color: #6d4f00;
}

.goal-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 6px;
}

.goal-card span,
.goal-card strong,
.goal-card small {
  color: #000;
}

.goal-card span {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.goal-card strong {
  font-size: 1.2rem;
}

.goal-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.goal-values div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fbff;
  padding: 8px;
}

.goal-values small {
  display: block;
  margin-bottom: 4px;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.goal-values strong {
  display: block;
  font-size: 1rem;
}

.goal-bar {
  height: 8px;
  border-radius: 999px;
  background: #e8eef6;
  overflow: hidden;
}

.goal-bar i {
  display: block;
  height: 100%;
  background: var(--orange);
}

.dashboard-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0;
}

.dashboard-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.dashboard-table {
  display: grid;
  gap: 8px;
}

.dashboard-row {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfa;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
}

.dashboard-row.dash-green {
  background: #e9f7ed;
  border-color: #b8dfc2;
}

.dashboard-row.dash-yellow {
  background: #fff4d5;
  border-color: #f0d27a;
}

.dashboard-row.dash-red {
  background: #f9e2e0;
  border-color: #e8aaa5;
}

.dashboard-row.dash-blue {
  background: #e3f1ff;
  border-color: #a9d3f5;
}

.dashboard-row.dash-orange {
  background: #fff0df;
  border-color: #f7c48a;
}

.dashboard-row:hover {
  border-color: var(--orange);
}

.dashboard-row span {
  color: #000;
  overflow-wrap: anywhere;
}

.dashboard-row strong {
  color: #000;
  white-space: nowrap;
}

.call-list-layout {
  display: block;
}

.call-list-tabs,
.sub-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.weekday-tabs {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.weekday-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.weekday-ribbon span:first-child {
  color: #000;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

#callListView[data-mode="setup"] .weekday-ribbon {
  display: none;
}

.call-list-layout[data-mode="today"] .call-list-setup,
.call-list-layout[data-mode="setup"] .call-list-current {
  display: none;
}

.call-list-layout[data-mode="setup"] .call-list-setup {
  display: block;
}

.call-rule-list,
.call-checklist {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.call-rule {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.call-rule span {
  color: var(--ink);
  font-size: 0.9rem;
}

.call-rule-actions,
.call-item-calendar,
.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.calendar-actions .mini-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
  font-weight: 750;
}

.calendar-actions .calendar-file-button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 750;
}

.call-item-calendar {
  margin-left: auto;
}

.call-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 11px;
}

.call-item input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.call-account-button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 3px;
  cursor: pointer;
}

.call-account-button:hover strong {
  color: var(--blue);
  text-decoration: underline;
}

.call-account-button small {
  color: var(--muted);
}

.call-item.is-complete {
  border-color: #78b48f;
  background: #eef8f1;
}

.calendar-tool-list {
  display: grid;
  gap: 10px;
}

.calendar-tool-list > div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbff;
  padding: 9px;
  display: grid;
  gap: 7px;
}

.calendar-tool-list strong {
  color: #000;
}

.calendar-tool-list .calendar-actions {
  justify-content: flex-start;
}

.calendar-tool-list .calendar-actions .mini-button {
  flex: 0 0 auto;
}

.mobile-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-quick-actions > * {
  flex: 1 1 150px;
  justify-content: center;
  text-align: center;
}

.follow-up-item.overdue {
  border-left: 5px solid #bd0808;
}

.follow-up-item.today {
  border-left: 5px solid var(--orange);
}

.follow-up-item.missing {
  border-left: 5px solid #111827;
}

.follow-up-item.soon {
  border-left: 5px solid var(--blue);
}

.panel {
  padding: 18px;
  min-width: 0;
}

.panel.wide {
  grid-row: span 2;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-header h3 {
  font-size: 1rem;
}

.stage-bars {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 210px) 1fr 46px;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.bar-track {
  height: 12px;
  border-radius: 999px;
  background: #edf1ef;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--green);
}

.stack-list {
  display: grid;
  gap: 10px;
}

.stack-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px;
  cursor: pointer;
}

.stack-item:hover,
.record-card:hover {
  border-color: #aebbb5;
}

/* ── Filter field with visible label ────────────────────────────── */
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-field::before {
  content: attr(data-label);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding-left: 2px;
  white-space: nowrap;
}

.filter-field select {
  margin: 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.toolbar-split {
  align-items: center;
  justify-content: space-between;
}

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

.toolbar-group .create-button {
  margin-left: auto;
  min-width: 116px;
}

.toolbar select,
.toolbar-input,
.form-grid input,
.form-grid select,
.form-grid textarea,
.full-field input,
.full-field select,
.add-contractor input,
.inline-form input,
.inline-form select {
  height: 40px;
  min-width: 190px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0 10px;
}

.form-grid textarea {
  height: auto;
  min-height: 72px;
  padding: 9px 10px;
  resize: vertical;
}

.system-builder-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.system-builder-grid {
  margin-top: 12px;
}

.system-tree-root {
  grid-column: 1 / -1;
}

.system-field-hidden {
  display: none !important;
}

#systemNotesInput {
  min-height: 190px;
}

.system-note {
  margin: 10px 0 0;
  color: #000;
  line-height: 1.45;
}

.takeoff-panel,
.takeoff-results-panel,
.price-book-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}

.price-book-uploader {
  border: 1px dashed #b8c7d8;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.price-book-uploader.is-dragging {
  border-color: var(--orange);
  background: #fff6ec;
  box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.16);
}

.price-book-uploader small {
  color: #000;
  display: block;
  margin-top: 8px;
}

.price-book-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.price-book-row {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px;
}

.price-book-row strong,
.price-book-row span {
  display: block;
}

.price-book-row span {
  color: #000;
  font-size: 0.82rem;
}

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.takeoff-header,
.takeoff-result-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.takeoff-header h3 {
  margin: 0;
}

.takeoff-grid {
  align-items: end;
}

.warranty-summary-panel {
  margin-top: 12px;
}

.system-notes-box {
  min-height: 260px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #000;
  padding: 12px;
  resize: vertical;
}

.takeoff-system-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.manual-product-panel {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.add-product-grid {
  align-items: end;
}

.manual-product-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.manual-product-row {
  align-items: center;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
}

.manual-product-row span {
  color: #000;
  font-size: 0.84rem;
  font-weight: 700;
}

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

.takeoff-table {
  border-collapse: collapse;
  min-width: 1260px;
  width: 100%;
}

.takeoff-table th,
.takeoff-table td {
  border-bottom: 1px solid var(--line);
  color: #000;
  padding: 9px;
  text-align: left;
  vertical-align: top;
}

.takeoff-table th {
  background: #f4f8fc;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.takeoff-table a {
  color: var(--blue);
  font-weight: 750;
}

.takeoff-source-note {
  color: #394452;
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 6px;
}

.sort-direction-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--blue);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 900;
}

.sort-direction-button.is-desc {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.toolbar select.control-green,
.toolbar select.control-yellow,
.toolbar select.control-red,
.toolbar select.control-blue,
.toolbar select.control-orange,
.toolbar select.control-purple,
.toolbar select.control-dark,
.toolbar select[class*="control-entity-"] {
  font-weight: 750;
}

.toolbar select.control-green {
  background: #e9f7ed;
  border-color: #b8dfc2;
  color: #0b7f45;
}

.toolbar select.control-yellow {
  background: #fff4d5;
  border-color: #f0d27a;
  color: #4d3a12;
}

.toolbar select.control-red {
  background: #f9e2e0;
  border-color: #e8aaa5;
  color: #9b1111;
}

.toolbar select.control-blue {
  background: #e3f1ff;
  border-color: #a9d3f5;
  color: #0057a8;
}

.toolbar select.control-orange {
  background: #fff0df;
  border-color: #f7c48a;
  color: #9a4a00;
}

.toolbar select.control-purple {
  background: #efe1ff;
  border-color: #d6bbfb;
  color: #623894;
}

.toolbar select.control-dark {
  background: #4b4b4b;
  border-color: #4b4b4b;
  color: #fff;
}

.toolbar select.control-entity-k12,
.pill.entity-k12,
.dashboard-row.entity-k12 {
  background: #ffe59b;
  border-color: #f0d27a;
  color: #3f3214;
}

.toolbar select.control-entity-higher-ed,
.pill.entity-higher-ed,
.dashboard-row.entity-higher-ed {
  background: #ffc6a8;
  border-color: #f1a67f;
  color: #6d3419;
}

.toolbar select.control-entity-healthcare,
.pill.entity-healthcare,
.dashboard-row.entity-healthcare {
  background: #b8def5;
  border-color: #91c9eb;
  color: #0057a8;
}

.toolbar select.control-entity-manufacturing,
.pill.entity-manufacturing,
.dashboard-row.entity-manufacturing {
  background: #eeeeee;
  border-color: #d2d2d2;
  color: #3c3c3c;
}

.toolbar select.control-entity-municipal,
.pill.entity-municipal,
.dashboard-row.entity-municipal {
  background: #bd0808;
  border-color: #bd0808;
  color: #fff;
}

.toolbar select.control-entity-religious,
.toolbar select.control-entity-architect,
.pill.entity-religious,
.pill.entity-architect,
.dashboard-row.entity-religious,
.dashboard-row.entity-architect {
  background: #71459c;
  border-color: #71459c;
  color: #fff;
}

.toolbar select.control-entity-private,
.pill.entity-private,
.dashboard-row.entity-private {
  background: #4b4b4b;
  border-color: #4b4b4b;
  color: #fff;
}

.toolbar select.control-entity-private-school,
.pill.entity-private-school,
.dashboard-row.entity-private-school {
  background: #125fad;
  border-color: #125fad;
  color: #fff;
}

.toolbar select.control-entity-financial,
.pill.entity-financial,
.dashboard-row.entity-financial {
  background: #147b48;
  border-color: #147b48;
  color: #fff;
}

.sort-tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}

.sort-tab {
  height: 38px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  padding: 0 12px;
  cursor: pointer;
}

.sort-tab:last-child {
  border-right: 0;
}

.sort-tab.is-active {
  background: var(--green);
  color: #fff;
}

.primary-button,
.secondary-button,
.icon-button,
.add-contractor button {
  border-radius: 6px;
  cursor: pointer;
}

.primary-button {
  min-height: 40px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  padding: 0 14px;
  font-weight: 750;
}

.secondary-button {
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 0 14px;
}

#newTaskButton,
[data-add-task-account] {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
  font-weight: 700;
}
#newTaskButton:hover,
[data-add-task-account]:hover {
  background: #15803d;
}

.mini-button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  text-decoration: none;
  font-size: 0.78rem;
}

.utility-mini {
  min-height: 32px;
  background: #f8fbff;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0 8px;
}

.utility-mini:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.toolbar-menu {
  position: relative;
}

.toolbar-menu summary {
  list-style: none;
}

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

.toolbar-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 190px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
  padding: 8px;
}

.toolbar-menu-panel .mini-button {
  justify-content: flex-start;
  width: 100%;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}

.record-grid.is-list,
.call-checklist.is-list {
  grid-template-columns: 1fr;
}

.record-grid.is-list .record-card {
  padding: 12px 14px;
}

.record-grid.is-kanban {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.kanban-shell {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.kanban-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: 14px;
  align-items: start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 44px 12px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--orange) #dce7f2;
}

.kanban-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
  min-width: 0;
  max-width: 100%;
  scroll-snap-align: start;
}

.kanban-column.is-drop-target {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 2px rgba(245, 130, 32, 0.22);
  background: #fff8f0;
}

.kanban-nav {
  position: absolute;
  top: 10px;
  z-index: 2;
  width: 34px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--blue);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
}

.kanban-nav:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.kanban-nav-left {
  left: 0;
}

.kanban-nav-right {
  right: 0;
}

.kanban-column h3 {
  margin: 0 0 10px;
  font-size: 0.92rem;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.kanban-column h3 span {
  color: var(--muted);
}

.kanban-items {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.kanban-items .record-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.kanban-items .record-card[draggable="true"] {
  cursor: grab;
}

.kanban-items .record-card.is-dragging {
  cursor: grabbing;
  opacity: 0.55;
}

/* ── Proposal drag-to-archive drop bar ─────────────────────────── */
#proposalDropBar {
  position: fixed;
  bottom: -120px;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(15, 15, 30, 0.96);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  transition: bottom 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
#proposalDropBar.is-visible {
  bottom: 0;
  pointer-events: all;
}
.proposal-drop-target {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  border-radius: 12px;
  border: 2px dashed rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  cursor: default;
}
.proposal-drop-target .drop-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.proposal-drop-target[data-proposal-drop="Work Completed"] {
  border-color: rgba(34, 160, 90, 0.45);
  color: #22a05a;
}
.proposal-drop-target[data-proposal-drop="Proposal Rejected"] {
  border-color: rgba(220, 60, 60, 0.45);
  color: #dc3c3c;
}
.proposal-drop-target.is-drag-over {
  border-style: solid;
  transform: scale(1.03);
}
.proposal-drop-target[data-proposal-drop="Work Completed"].is-drag-over {
  background: rgba(34, 160, 90, 0.15);
  border-color: #22a05a;
  color: #fff;
}
.proposal-drop-target[data-proposal-drop="Proposal Rejected"].is-drag-over {
  background: rgba(220, 60, 60, 0.15);
  border-color: #dc3c3c;
  color: #fff;
}

.kanban-items .record-topline > div,
.kanban-items .record-card h3,
.kanban-items .record-card p,
.kanban-items .card-meta {
  min-width: 0;
}

.kanban-items .record-card h3,
.kanban-items .record-card p {
  overflow-wrap: anywhere;
}

.kanban-items .pill {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.record-card {
  padding: 16px;
  cursor: pointer;
}

.view-toggle {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.manage-table {
  display: grid;
  gap: 8px;
}

.record-grid[hidden],
.manage-table[hidden] {
  display: none !important;
}

.activity-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.summary-pill {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 12px;
  display: grid;
  gap: 3px;
}

.summary-pill strong {
  color: #000;
  font-size: 1.25rem;
}

.summary-pill span {
  color: #000;
  font-size: 0.8rem;
  font-weight: 750;
}

.timeline-list {
  display: grid;
  gap: 10px;
}

.timeline-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 12px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  cursor: pointer;
}

.timeline-date {
  display: grid;
  align-content: start;
  gap: 4px;
}

.timeline-date strong,
.timeline-date span,
.timeline-body h3,
.timeline-body p {
  color: #000;
}

.timeline-date span {
  font-size: 0.82rem;
}

.timeline-body h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.timeline-body p {
  margin: 0 0 8px;
  line-height: 1.4;
}

.activity-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.activity-delete-button {
  min-height: 28px;
  border: 1px solid #b72020;
  border-radius: 6px;
  background: #b72020;
  color: #fff;
  cursor: pointer;
  padding: 0 9px;
  font-size: 0.78rem;
  font-weight: 750;
}

.activity-delete-button:hover {
  background: #8f1111;
  border-color: #8f1111;
}

.manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px 12px;
  box-shadow: var(--shadow);
}

.manage-row strong {
  color: #000;
  font-size: 0.95rem;
}

.manage-row p {
  color: #000;
  margin: 3px 0 0;
  font-size: 0.82rem;
}

.manage-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.danger-mini {
  border-color: #bd0808;
  color: #bd0808;
}

.record-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.record-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 7px;
}

.record-card p {
  margin: 0;
  color: #000;
  line-height: 1.35;
}

.card-contact-links,
.profile-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  min-width: 0;
}

.card-contact-links a,
.profile-contact-links a {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 750;
  padding: 4px 8px;
  text-decoration: none;
  min-width: 0;
  max-width: min(100%, 230px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-contact-links a:hover,
.profile-contact-links a:hover {
  background: #eef6ff;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  background: #eef2f0;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.pill.a,
.pill.job {
  background: var(--green-2);
  color: var(--green);
}

.pill.b,
.pill.approved {
  background: #fff1d6;
  color: var(--gold);
}

.pill.rejected {
  background: #f7e0df;
  color: var(--red);
}

.pill.stage-working {
  background: #eeeeee;
  color: #202020;
}

.pill.stage-prospecting {
  background: #ff8908;
  color: #202020;
}

.pill.stage-ramp {
  background: #ff8908;
  color: #202020;
}

.pill.stage-budget {
  background: #4b4b4b;
  color: #fff;
}

.pill.stage-requested {
  background: #dfc5ff;
  color: #623894;
}

.pill.stage-sent {
  background: #ffe59b;
  color: #4d3a12;
}

.pill.stage-approved {
  background: #b8def5;
  color: #0d5ca6;
}

.pill.stage-po {
  background: #125fad;
  color: #fff;
}

.pill.stage-waiting {
  background: #d5efc6;
  color: #0b7f45;
}

.pill.stage-material {
  background: #147b48;
  color: #fff;
}

.pill.stage-scheduled {
  background: #cbe3ea;
  color: #1b6071;
}

.pill.stage-completed {
  background: #225f71;
  color: #fff;
}

.pill.stage-rejected {
  background: #bd0808;
  color: #fff;
}

.pill.stage-hold {
  background: #71459c;
  color: #fff;
}

.pill.score-a {
  background: #d5efc6;
  color: #0b7f45;
}

.pill.score-job {
  background: #125fad;
  color: #fff;
}

.pill.score-b {
  background: #ffe59b;
  color: #4d3a12;
}

.pill.score-c {
  background: #ffc6a8;
  color: #6d3419;
}

.pill.rank-dead-end {
  background: #000;
  color: #fff;
  text-transform: uppercase;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.project-card-system {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding-top: 10px;
}

.project-card-system strong {
  color: #000;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.project-card-system div {
  display: grid;
  gap: 5px;
}

.project-card-system span {
  color: #000;
  font-size: 0.8rem;
  line-height: 1.3;
}

.project-card-system b {
  color: var(--blue);
}

.project-card-system.is-empty span {
  color: #555;
}

.activity-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(23, 33, 31, 0.08);
}

.activity-dot.green {
  background: #16834c;
}

.activity-dot.yellow {
  background: #d7a51f;
}

.activity-dot.red {
  background: #b72020;
}

.activity-dot.dead {
  background: #000;
}

.detail-drawer {
  border-left: 1px solid var(--line);
  background: #fbfcfa;
  padding: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

.drawer-close {
  display: none;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  width: 34px;
  height: 34px;
  margin-left: auto;
}

.detail-content h3 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-content p {
  color: var(--muted);
  line-height: 1.45;
}

.detail-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.detail-actions p {
  margin: 0;
}

.detail-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.edit-button {
  border: 1px solid #125fad;
  border-radius: 6px;
  background: #125fad;
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
  min-height: 30px;
  padding: 0 10px;
}

.detail-section {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}

.relationship-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.relationship-column {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.relationship-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.relationship-node {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  min-width: 0;
  padding: 9px;
}

.relationship-node span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
}

.relationship-node strong {
  color: var(--ink);
  display: block;
  font-size: 0.88rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.account-node {
  border-color: var(--blue);
}

.project-node {
  border-color: #b7d8f1;
}

.proposal-node {
  border-color: var(--orange);
}

.contractor-node {
  border-color: #aed8c3;
}

.call-outcome-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faff;
  padding: 10px;
  margin: 10px 0;
}

.call-outcome-panel > span {
  display: block;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.call-outcome-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.weekly-review-content {
  background: #f7faff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.detail-section h4 {
  margin: 0 0 10px;
  font-size: 0.86rem;
  text-transform: uppercase;
  color: var(--green);
}

.proposal-request-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.proposal-request-list h5 {
  margin: 0;
  color: #000;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.proposal-request-action {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.proposal-request-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proposal-request-action small {
  color: #000;
  font-size: 0.74rem;
  line-height: 1.35;
}

.request-proposal-button {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  text-decoration: none;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.field-grid[hidden],
#noteNewAccountFields[hidden] {
  display: none !important;
}

.field {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel);
}

.field span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 4px;
}

.field strong {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.editable-field {
  cursor: text;
}

.editable-field:hover {
  border-color: #125fad;
}

.editable-field input,
.editable-field select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
}

.editable-field strong:has(.inline-save-button) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.inline-save-button {
  min-height: 32px;
}

.contractor-detail-form {
  display: grid;
  gap: 14px;
}

.contractor-detail-form input {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  color: #000;
}

.contractor-detail-form input[type="color"] {
  padding: 3px;
}

.contractor-detail-save {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.detail-edit-save {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: -2px 0 14px;
  padding-bottom: 12px;
}

.danger-zone {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}

.delete-button {
  width: 100%;
  min-height: 40px;
  border: 1px solid #bd0808;
  border-radius: 6px;
  background: #bd0808;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.note-box {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
}

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

.inline-form label {
  display: grid;
  gap: 6px;
}

.inline-form span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.inline-form button {
  justify-self: start;
}

.support-form {
  margin-top: 12px;
}

.support-add-button {
  margin-top: 12px;
}

.support-contact-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.support-contact-main {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: default;
  display: grid;
  gap: 3px;
}

.support-contact-main strong {
  font-size: 0.95rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-contact-main span {
  color: var(--ink);
  font-size: 0.84rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-contact-main small {
  color: var(--muted);
  font-size: 0.76rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.activity-form {
  display: grid;
  gap: 9px;
}

.activity-form button {
  justify-self: start;
}

.activity-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.activity-entry {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
}

.activity-entry div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.activity-entry .activity-actions {
  margin-bottom: 0;
}

.activity-entry strong {
  font-size: 0.82rem;
}

.activity-entry span {
  color: var(--muted);
  font-size: 0.74rem;
}

.activity-entry p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.activity-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.activity-files a {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 9px;
  text-decoration: none;
}

.upload-grid {
  display: grid;
  gap: 10px;
}

.upload-box {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.upload-box::after,
.contractor-upload::after,
.checklist-upload::after {
  content: "Drop files here";
  display: block;
  margin-top: 8px;
  border: 1px dashed #b8c7d8;
  border-radius: 6px;
  color: #000;
  background: #f4f8fc;
  padding: 8px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 750;
}

.upload-box.is-dragging,
.contractor-upload.is-dragging,
.checklist-upload.is-dragging {
  border-color: var(--orange);
  background: #fff6ec;
  box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.16);
}

.upload-box.is-dragging::after,
.contractor-upload.is-dragging::after,
.checklist-upload.is-dragging::after {
  border-color: var(--orange);
  background: #fff0df;
  color: #000;
}

.upload-box > div:first-child,
.checklist-upload > div:first-child,
.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.file-input {
  display: none;
}

.media-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.media-pick-button {
  min-height: 40px;
  border: 1px solid var(--blue);
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 0.84rem;
  font-weight: 800;
}

.media-pick-button + .media-pick-button {
  border-color: var(--line);
  background: #fff;
  color: var(--blue);
}

.file-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.file-row a {
  color: var(--blue);
  overflow-wrap: anywhere;
}

.checklist-launch-section {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.checklist-launch-section p {
  margin: 4px 0 0;
}

.project-checklist-content {
  display: grid;
  gap: 12px;
  max-height: min(68vh, 760px);
  overflow: auto;
  padding-right: 4px;
}

.checklist-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.checklist-item.is-na {
  background: #f4f4f4;
  opacity: 0.78;
}

.checklist-item.is-na .checklist-question strong {
  color: #555;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.checklist-item-top {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.checklist-question {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.checklist-question span {
  align-items: center;
  background: var(--blue);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 850;
  height: 28px;
  justify-content: center;
  min-width: 28px;
  padding: 0 8px;
}

.checklist-question strong {
  color: #000;
  line-height: 1.35;
}

.na-toggle-button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #000;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 850;
  min-height: 30px;
  padding: 0 10px;
}

.na-toggle-button.is-active {
  border-color: #444;
  background: #444;
  color: #fff;
}

.checklist-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.checklist-fields label,
.checklist-item > label {
  display: grid;
  gap: 5px;
}

.fraction-field > div {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, 0.85fr) minmax(120px, 1fr);
}

.fraction-field select,
.fraction-field input {
  min-width: 0;
  width: 100%;
}

.checklist-check {
  justify-content: flex-start;
}

.checklist-subchecks {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.checklist-upload {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.sticky-actions {
  background: #fff;
  bottom: 0;
  position: sticky;
  z-index: 2;
}

@media (max-width: 560px) {
  .fraction-field > div {
    grid-template-columns: 1fr;
  }
}

.drive-link-form {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1.3fr) minmax(190px, 1.7fr) auto;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #dbe6ef;
  border-radius: 8px;
  background: #f8fbff;
}

.drive-link-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.drive-link-title strong {
  color: #000;
  font-size: 0.82rem;
}

.drive-link-title a {
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 750;
  text-decoration: none;
}

.drive-link-form input {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 9px;
}

.drive-link-form .mini-button {
  white-space: nowrap;
}

.scope-tools {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.scope-tool-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.scope-tool-panel strong {
  color: #000;
  font-size: 0.84rem;
}

.scope-tool-panel select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 0 8px;
}

.scope-database-list {
  display: grid;
  gap: 10px;
}

.scope-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.scope-card h3 {
  margin: 0 0 4px;
  color: #000;
  font-size: 1rem;
}

.scope-card p {
  margin: 0;
  color: #000;
  font-size: 0.84rem;
}

.scope-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.scope-template-preview {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #000;
  min-height: 220px;
  padding: 12px;
  resize: vertical;
  width: 100%;
}

.scope-work-items,
.scope-work-items-list,
.scope-work-item {
  display: grid;
  gap: 10px;
}

.scope-work-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.scope-work-item .mini-button {
  justify-self: end;
}

.empty-state,
.empty-detail {
  color: var(--muted);
}

.modal {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0;
}

.small-modal {
  width: min(560px, calc(100vw - 32px));
}

.checklist-modal {
  width: min(980px, calc(100vw - 24px));
}

.account-profile-modal {
  width: min(1160px, calc(100vw - 24px));
}

.account-profile-shell {
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 22px;
}

.account-profile-heading {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 14px;
}

.account-profile-heading h2,
.account-profile-heading p {
  margin: 0;
}

.account-profile-heading h2 {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 1.35rem;
  gap: 8px;
}

.account-profile-heading p {
  color: #000;
  margin-top: 4px;
}

.account-profile-tabs {
  margin-bottom: 14px;
}

.account-profile-scorecard {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.modal-delete-button {
  width: auto;
  min-height: 38px;
  padding: 0 12px;
}

.compact-activity {
  margin: 12px 0;
  max-height: 190px;
  overflow: auto;
}

.note-taker-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.note-taker-form {
  display: grid;
  gap: 12px;
}

.note-taker-form label,
.note-new-account label {
  display: grid;
  gap: 6px;
}

.note-new-account {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.note-new-account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.note-new-account h4,
.note-new-account p {
  margin: 0;
}

.note-new-account p {
  color: var(--muted);
  font-size: 0.82rem;
}

.note-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.note-media-grid .upload-box {
  min-height: 118px;
}

.territory-settings {
  display: grid;
  gap: 16px;
}

.territory-settings section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.territory-settings h4 {
  margin: 0;
}

.territory-settings label {
  display: grid;
  gap: 6px;
}

.territory-settings input,
.territory-settings select,
.add-territory-row input {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: #000;
}

.add-territory-row {
  display: flex;
  gap: 8px;
}

.add-territory-row input {
  flex: 1;
}

.add-territory-row input[type="color"],
.territory-row input[type="color"] {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  padding: 3px;
}

.territory-list {
  display: grid;
  gap: 8px;
}

.territory-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.territory-row span {
  color: #000;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-block;
}

.quick-client-details {
  margin-bottom: 14px;
}

.quick-client-details a {
  color: var(--blue);
}

.cloud-sync-copy p {
  color: #000;
  margin-top: 0;
}

.modal::backdrop {
  background: rgba(16, 37, 31, 0.42);
}

.modal form {
  padding: 22px;
}

.quick-record-shell {
  padding: 22px;
}

.modal-header,
.modal-actions,
.modal-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.modal-header {
  margin-bottom: 18px;
}

.modal-header h3,
.modal-section-header h4 {
  margin: 0;
}

.form-grid,
.new-client-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label,
.new-client-fields label,
.full-field {
  display: grid;
  gap: 6px;
}

.form-grid span,
.full-field span,
.modal-section-header span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.full-field {
  grid-column: 1 / -1;
}

.project-client-field {
  grid-column: span 1;
}

.project-score-field {
  justify-self: end;
  width: min(220px, 100%);
}

.project-score-field select {
  min-width: 0;
  width: 100%;
}

.new-client-fields {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfa;
}

.inline-alert {
  grid-column: 1 / -1;
  color: var(--green);
  font-weight: 750;
}

.contractor-picker {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.contractor-picker-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.contractor-picker-body[hidden] {
  display: none !important;
}

.add-contractor {
  display: flex;
  gap: 8px;
}

.add-contractor button {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0 12px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.check-tile {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.check-tile input {
  width: 16px;
  height: 16px;
}

.proposal-tracker {
  display: grid;
  gap: 10px;
}

.proposal-contractor-menus {
  display: grid;
  gap: 10px;
}

.proposal-contractor-menus label,
.proposal-contractor-menus div {
  display: grid;
  gap: 6px;
}

.proposal-contractor-menus span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.proposal-contractor-menus select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--panel);
}

.contractor-option-list {
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 7px;
}

.contractor-option-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 5px;
  border-radius: 5px;
}

.contractor-option-list label:hover {
  background: #eef6ff;
}

.contractor-option-list input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.contractor-option-list span {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 650;
}

.selected-contractor-summary {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfa;
  padding: 8px;
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
}

.selected-contractor-summary > strong {
  color: #000;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.selected-contractor-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tracker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  background: var(--panel);
}

.bid-received-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.contractor-upload {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  border: 1px dashed #b8c7d8;
  border-radius: 6px;
  padding: 8px;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.contractor-file-list {
  display: grid;
  gap: 5px;
}

.contractor-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
}

.contractor-file a {
  color: var(--blue);
  overflow-wrap: anywhere;
}

@media print {
  .sidebar,
  .topbar,
  .detail-drawer,
  body:not(.printing-checklist) dialog {
    display: none !important;
  }

  .app-shell {
    display: block;
  }

  .workspace {
    padding: 0;
  }

  .view {
    display: none !important;
  }

  .view.is-active {
    display: block !important;
  }

  .record-card,
  .dashboard-card,
  .goal-card,
  .timeline-item {
    box-shadow: none;
    break-inside: avoid;
  }

  body.printing-checklist {
    background: #fff;
  }

  body.printing-checklist .app-shell > :not(.workspace),
  body.printing-checklist .topbar,
  body.printing-checklist .view,
  body.printing-checklist .detail-drawer,
  body.printing-checklist dialog:not(#projectChecklistDialog),
  body.printing-checklist #cancelProjectChecklistButton,
  body.printing-checklist .sticky-actions,
  body.printing-checklist .na-toggle-button,
  body.printing-checklist .checklist-upload::after {
    display: none !important;
  }

  body.printing-checklist .app-shell,
  body.printing-checklist .workspace {
    display: block !important;
    padding: 0 !important;
  }

  body.printing-checklist #projectChecklistDialog {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.printing-checklist #projectChecklistDialog::backdrop {
    display: none !important;
  }

  body.printing-checklist #projectChecklistDialog form {
    padding: 0 !important;
  }

  body.printing-checklist .modal-header {
    border-bottom: 2px solid #000;
    margin: 0 0 12px !important;
    padding-bottom: 10px;
  }

  body.printing-checklist .modal-header .eyebrow {
    color: #000;
    letter-spacing: 0;
  }

  body.printing-checklist .modal-header h3 {
    font-size: 18pt;
  }

  body.printing-checklist .project-checklist-content {
    max-height: none !important;
    overflow: visible !important;
    gap: 8px;
    padding: 0;
  }

  body.printing-checklist .checklist-item {
    break-inside: avoid;
    border: 1px solid #999;
    border-radius: 0;
    padding: 8px;
    gap: 6px;
  }

  body.printing-checklist .checklist-question span {
    background: #000 !important;
    color: #fff !important;
  }

  body.printing-checklist .checklist-fields {
    grid-template-columns: repeat(3, 1fr);
  }

  body.printing-checklist input,
  body.printing-checklist select,
  body.printing-checklist textarea {
    border: 0 !important;
    border-bottom: 1px solid #999 !important;
    background: transparent !important;
    color: #000 !important;
    min-height: 24px;
    padding: 0 !important;
  }

  body.printing-checklist .fraction-field select {
    display: none !important;
  }

  body.printing-checklist .fraction-field > div {
    display: block;
  }

  body.printing-checklist .file-row,
  body.printing-checklist .empty-state {
    font-size: 9pt;
  }
}

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

  .topbar {
    justify-content: flex-start;
    gap: 10px;
  }

  .topbar-title {
    flex-basis: 292px;
  }

  .search {
    flex-basis: 180px;
    max-width: none;
  }

  #printSummaryButton {
    display: none;
  }

  .detail-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 92vw);
    transform: translateX(100%);
    transition: transform 180ms ease;
    z-index: 10;
  }

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

  .drawer-close {
    display: block;
  }
}

.app-shell.mobile-preview {
  display: block;
  min-height: 100vh;
  max-width: 430px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--paper);
}

.app-shell.mobile-preview .sidebar {
  position: fixed;
  inset: auto auto 0 50%;
  z-index: 40;
  width: min(430px, 100vw);
  height: auto;
  min-height: 0;
  overflow-y: visible;
  transform: translateX(-50%);
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 -10px 28px rgba(0, 37, 86, 0.18);
  gap: 0;
}

.app-shell.mobile-preview .brand,
.app-shell.mobile-preview .brand-mobile-control,
.app-shell.mobile-preview .external-links span,
.app-shell.mobile-preview .external-links a,
.app-shell.mobile-preview .sidebar-actions {
  display: none;
}

.app-shell.mobile-preview .external-links {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.app-shell.mobile-preview #mobileVersionButton {
  position: static;
  width: 34px;
  min-height: 34px;
  justify-content: center;
  padding: 0;
  border-color: var(--orange);
  background: var(--orange);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 37, 86, 0.18);
}

.app-shell.mobile-preview #mobileVersionButton span {
  display: none;
}

/* In mobile-preview, hide the sidebar nav entirely — compact bar takes over */
.app-shell.mobile-preview .nav,
.app-shell.mobile-preview .mobile-more-menu {
  display: none !important;
}

/* ── Compact mobile bottom bar ─────────────────────────────── */
.mobile-compact-bar {
  display: none;
}

.app-shell.mobile-preview .mobile-compact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 10px;
}

.mobile-compact-view {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-compact-menu-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.mobile-compact-menu-btn:hover,
.mobile-compact-menu-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.22);
}

/* ── Full nav overlay (all views grid) ─────────────────────── */
.mobile-full-menu {
  display: none;
}

.app-shell.mobile-preview .mobile-full-menu {
  position: fixed;
  left: 50%;
  bottom: 62px;
  z-index: 45;
  width: min(414px, calc(100vw - 16px));
  transform: translateX(-50%);
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px 14px 0 0;
  background: var(--blue);
  box-shadow: 0 -12px 32px rgba(0,37,86,0.28);
  max-height: 70vh;
  overflow-y: auto;
}

.app-shell.mobile-preview .mobile-full-menu.is-open {
  display: grid;
}

.app-shell.mobile-preview .mobile-full-menu .nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  font-size: 0.6rem;
  line-height: 1.15;
  border-radius: 8px;
  padding: 6px 3px;
  text-align: center;
}

.app-shell.mobile-preview .workspace {
  padding: 14px 12px 92px;
}

.mobile-header-toggle {
  display: none;
}

.app-shell.mobile-preview .topbar {
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 5px;
  position: sticky;
  top: 0;
  z-index: 25;
  margin: -14px -12px 14px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(245, 248, 252, 0.96);
  backdrop-filter: blur(12px);
}

.app-shell.mobile-preview .topbar-title {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-shell.mobile-preview .topbar-title-text {
  flex: 1 1 auto;
  min-width: 0;
}

.app-shell.mobile-preview .mobile-header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}

.app-shell.mobile-preview .mobile-header-toggle:hover {
  background: var(--panel);
}

/* Rotate arrow when collapsed */
.app-shell.mobile-preview.header-collapsed .mobile-header-toggle svg {
  transform: rotate(180deg);
}

/* Hide collapsible sections when collapsed */
.app-shell.mobile-preview.header-collapsed .search,
.app-shell.mobile-preview.header-collapsed .detail-toggle,
.app-shell.mobile-preview.header-collapsed .topbar-actions,
.app-shell.mobile-preview.header-collapsed #gripSyncStatus,
.app-shell.mobile-preview.header-collapsed #gripUserDisplay,
.app-shell.mobile-preview.header-collapsed .mobile-quick-add {
  display: none !important;
}
/* Search always visible in mobile regardless of collapse state */
.app-shell.mobile-preview .search,
.app-shell.mobile-preview.header-collapsed .search {
  display: flex !important;
}

.app-shell.mobile-preview .mobile-quick-add {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: -7px 0 12px;
}

.app-shell.mobile-preview .mobile-quick-add button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  min-height: 36px;
  padding: 6px 4px;
}

.app-shell.mobile-preview .search {
  flex: 0 0 auto;
  width: 100%;
  height: 36px;
  max-width: none;
  padding: 0 9px;
  font-size: 0.82rem;
}

.app-shell.mobile-preview .search input {
  font-size: 0.82rem;
}

/* Mobile topbar-actions: stack as a row of compact items */
.app-shell.mobile-preview .topbar-actions {
  flex-wrap: wrap;
  width: 100%;
  gap: 5px;
}

.app-shell.mobile-preview .topbar-btn,
.app-shell.mobile-preview #newTaskButton {
  font-size: 0.72rem;
  min-height: 32px;
  padding: 0 10px;
  width: auto;
}

.app-shell.mobile-preview .topbar-user-info {
  flex: 0 0 auto;
}

/* When details hidden in mobile: collapse topbar-actions, keep toggle */
.app-shell.mobile-preview.details-hidden .topbar-actions > *:not(#detailToggle) {
  display: none !important;
}

.app-shell.mobile-preview #printSummaryButton {
  display: none;
}

.app-shell.mobile-preview .goal-strip,
.app-shell.mobile-preview .goal-values,
.app-shell.mobile-preview .dashboard-grid,
.app-shell.mobile-preview .command-list,
.app-shell.mobile-preview .task-summary-strip,
.app-shell.mobile-preview .punch-summary-strip,
.app-shell.mobile-preview .punch-comparison,
.app-shell.mobile-preview .checklist-grid {
  grid-template-columns: 1fr;
}

.app-shell.mobile-preview .goal-strip {
  display: none;
}

.app-shell.mobile-preview .goal-card {
  padding: 12px;
  gap: 8px;
}

.app-shell.mobile-preview .goal-card span {
  font-size: 0.72rem;
}

.app-shell.mobile-preview .goal-values strong {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.app-shell.mobile-preview .record-grid,
.app-shell.mobile-preview .record-grid.is-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}

.app-shell.mobile-preview #accountsList {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell.mobile-preview #accountsList .record-card {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding: 10px;
}

.app-shell.mobile-preview #accountsList .record-topline {
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
}

.app-shell.mobile-preview #accountsList .record-card h3 {
  font-size: 0.95rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.app-shell.mobile-preview #accountsList .record-card p {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.app-shell.mobile-preview #accountsList .card-meta,
.app-shell.mobile-preview #accountsList .card-contact-links {
  gap: 5px;
  margin-top: 8px;
}

.app-shell.mobile-preview #accountsList .pill,
.app-shell.mobile-preview #accountsList .card-contact-links a {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .app-shell {
    display: block;
    min-height: 100vh;
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    height: auto;
    overflow-y: visible;
    min-height: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 -10px 28px rgba(0, 37, 86, 0.18);
    gap: 0;
  }

  .brand,
  .external-links,
  .sidebar-actions {
    display: none;
  }

  #mobileVersionButton {
    position: static;
    width: 34px;
    min-height: 34px;
    justify-content: center;
    padding: 0;
    border-color: var(--orange);
    background: var(--orange);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 37, 86, 0.18);
  }

  #mobileVersionButton span {
    display: none;
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    padding: 0;
  }

  .nav-button {
    min-width: 0;
    min-height: 54px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    padding: 6px 3px;
    text-align: center;
    flex-direction: column;
    font-size: 0.62rem;
    line-height: 1.12;
  }

  .nav > .nav-button:not([data-view="today"]):not([data-view="accounts"]):not([data-view="projects"]):not([data-view="tasks"]):not([data-view="callList"]):not(.nav-more-button) {
    display: none;
  }

  .nav-sub-button,
  .nav-projects-group .nav-sub-button {
    display: none;
  }

  .nav-more-button {
    display: flex;
  }

  .mobile-more-menu {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 45;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: var(--blue);
    box-shadow: 0 -10px 28px rgba(0, 37, 86, 0.22);
  }

  .mobile-more-menu.is-open {
    display: grid;
  }

  .mobile-more-menu .nav-button {
    display: flex;
    width: 100%;
  }

  .nav-button > span,
  .nav-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: 0.95rem;
  }

  .nav-icon svg {
    width: 18px;
    height: 18px;
  }

  .workspace {
    padding: 14px 12px 16px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
    position: sticky;
    top: 0;
    z-index: 25;
    margin: -14px -12px 14px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(245, 248, 252, 0.96);
    backdrop-filter: blur(12px);
  }

  .topbar-title {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }

  .mobile-quick-add {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: -8px 0 12px;
  }

  .mobile-quick-add button {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    min-height: 36px;
    padding: 6px 4px;
  }

  .topbar h2 {
    font-size: 1.35rem;
  }

  .eyebrow {
    font-size: 0.64rem;
  }

  .search {
    flex: 0 0 auto;
    height: 36px;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0 9px;
    font-size: 0.82rem;
  }

  .search input {
    font-size: 0.82rem;
  }

  .detail-toggle,
  .topbar > .secondary-button {
    width: auto;
    min-width: 0;
    padding: 0 10px;
    font-size: 0.72rem;
    min-height: 32px;
    white-space: nowrap;
  }

  #gripSignOutButton {
    display: none !important;
  }

  #detailToggle {
    display: none !important;
  }

  #newTaskButton {
    padding: 0 12px;
    font-size: 0.75rem;
    min-height: 32px;
    width: auto !important;
  }

  #territorySettingsButton {
    width: auto;
    min-width: 0;
    min-height: 32px;
    align-self: flex-start;
    padding: 0 10px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  #printSummaryButton {
    display: none;
  }

  #gripSignOutButton {
    display: none !important;
  }

  #newTaskButton {
    width: auto;
    min-width: 0;
    padding: 0 10px;
    font-size: 0.72rem;
    min-height: 32px;
    align-self: flex-start;
    white-space: nowrap;
  }

  .kpi-grid,
  .dashboard-grid,
  .command-list,
  .call-list-layout,
  .goal-strip,
  .goal-values,
  .task-summary-strip,
  .punch-summary-strip,
  .punch-comparison,
  .checklist-grid,
  .activity-summary,
  .note-taker-layout,
  .note-media-grid,
  .timeline-item {
    grid-template-columns: 1fr;
  }

  .kpi,
  .panel,
  .dashboard-card,
  .goal-card,
  .record-card,
  .timeline-item,
  .call-item,
  .news-report-panel {
    box-shadow: 0 10px 24px rgba(20, 60, 110, 0.08);
  }

  .kpi {
    padding: 13px;
  }

  .goal-strip {
    gap: 8px;
  }

  .goal-card {
    padding: 12px;
    gap: 8px;
  }

  .goal-card span {
    font-size: 0.72rem;
  }

  .goal-values strong {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
  }

  .kpi strong {
    font-size: 1.45rem;
  }

  .quick-filter-strip,
  .call-list-tabs,
  .sub-tabs,
  .weekday-tabs,
  .view-toggle,
  .sort-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .quick-filter,
  .sort-tab,
  .view-toggle .mini-button,
  .sub-tabs .secondary-button,
  .call-list-tabs .secondary-button,
  .weekday-tabs .mini-button {
    flex: 0 0 auto;
  }

  .toolbar,
  .toolbar-group {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .toolbar-split {
    align-items: stretch;
  }

  .toolbar select,
  .toolbar-input,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .full-field input,
  .full-field select,
  .add-contractor input,
  .inline-form input,
  .inline-form select {
    min-width: 0;
    width: 100%;
  }

  .toolbar-group > *,
  .toolbar > * {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 100%;
  }

  .toolbar-group .toolbar-input,
  .toolbar .toolbar-input {
    flex: 1 1 180px;
  }

  .toolbar-group .create-button {
    margin-left: 0;
    min-width: 112px;
  }

  .weekday-ribbon {
    align-items: stretch;
    flex-direction: column;
  }

  .bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .record-grid,
  .record-grid.is-list,
  .call-checklist,
  .call-checklist.is-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .record-card {
    padding: 12px;
  }

  .workspace,
  .view,
  .dashboard-card,
  .goal-card,
  .record-card,
  .call-item,
  .timeline-item,
  .stack-item,
  .tracker-row,
  .manage-row,
  .support-contact-card,
  .scope-card,
  .territory-row,
  .price-book-row,
  .manual-product-row,
  .field {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .record-card h3 {
    font-size: 1rem;
  }

  .record-card p {
    font-size: 0.86rem;
  }

  .record-card h3,
  .record-card p,
  .stack-item,
  .field strong,
  .field strong a,
  .dashboard-card h3,
  .dashboard-table,
  .takeoff-table td,
  .takeoff-table th {
    overflow-wrap: anywhere;
  }

  .card-contact-links a,
  .profile-contact-links a {
    max-width: 100%;
  }

  .record-topline,
  .manage-row,
  .manual-product-row,
  .support-contact-card {
    align-items: stretch;
    flex-direction: column;
  }

  .pill,
  .record-topline > .pill {
    align-self: flex-start;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .record-grid.is-kanban {
    display: block;
  }

  .kanban-board {
    grid-auto-columns: minmax(82vw, 88vw);
    gap: 10px;
    padding: 0 38px 12px;
  }

  .kanban-column {
    min-width: 0;
    padding: 9px;
  }

  .kanban-nav {
    width: 30px;
    height: 42px;
  }

  .news-report-panel {
    flex-direction: column;
  }

  .news-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .news-actions > * {
    flex: 1 1 140px;
  }

  .news-prompt {
    min-height: 340px;
    font-size: 0.8rem;
  }

  .call-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .call-account-button {
    min-width: 0;
  }

  .call-item-calendar,
  .call-rule-actions,
  .calendar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .calendar-actions .mini-button,
  .call-rule-actions .mini-button,
  .call-rule-actions .calendar-actions {
    flex: 0 1 auto;
  }

  .calendar-actions .calendar-file-button {
    flex: 0 1 auto;
  }

  .toolbar-menu,
  .toolbar-menu summary {
    width: 100%;
  }

  .toolbar-menu-panel {
    position: static;
    width: 100%;
    margin-top: 6px;
  }

  .price-book-row {
    align-items: stretch;
    flex-direction: column;
  }

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

  .form-grid,
  .new-client-fields,
  .inline-form {
    grid-template-columns: 1fr;
  }

  .modal-section-header,
  .modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .modal {
    width: min(100vw - 14px, 560px);
    max-height: calc(100dvh - 14px);
    overflow-x: hidden;
  }

  .modal form,
  .quick-record-shell,
  .account-profile-shell {
    max-width: 100%;
    overflow-x: hidden;
    padding: 16px;
  }

  .account-profile-heading {
    align-items: stretch;
    flex-direction: column;
  }

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

  .add-contractor {
    width: 100%;
  }

  .add-contractor input {
    min-width: 0;
    width: 100%;
  }

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

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

  .tracker-row,
  .call-rule,
  .territory-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    flex-direction: column;
  }

  .bid-received-toggle {
    justify-self: start;
  }

  .proposal-request-buttons,
  .scope-card-actions,
  .detail-actions,
  .manage-actions,
  .activity-actions,
  .support-contact-actions,
  .detail-header-actions,
  .mobile-quick-actions,
  .modal-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .proposal-request-buttons .mini-button,
  .scope-card-actions .mini-button,
  .detail-actions .mini-button,
  .detail-actions .primary-button,
  .detail-actions .secondary-button,
  .manage-actions .mini-button,
  .activity-actions .mini-button,
  .activity-delete-button,
  .support-contact-actions .mini-button,
  .detail-header-actions > *,
  .mobile-quick-actions > *,
  .modal-actions .primary-button,
  .modal-actions .secondary-button,
  .delete-button {
    flex: 1 1 38px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .detail-drawer {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 60;
    padding: 12px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    border-left: 0;
    transform: translateX(100%);
  }

  .app-shell.details-hidden .detail-drawer {
    display: block;
  }

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

  .drawer-close {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: #ffffff;
  }

  .detail-content h3 {
    font-size: 1.15rem;
  }

  .relationship-map {
    grid-template-columns: 1fr;
  }

  .add-territory-row {
    flex-direction: column;
  }

  .add-territory-row input[type="color"],
  .territory-row input[type="color"] {
    width: 100%;
    flex-basis: 40px;
  }
}

/* ─── GRIP Assistant — Chief of Staff UI ────────────────────── */
.asst-root {
  display: flex; height: calc(100vh - 56px); overflow: hidden;
  background: #f0f4f8; font-family: inherit;
}

/* Sidebar */
.asst-sidebar {
  width: 180px; min-width: 160px; background: #0f1f35; color: #c8d8ec;
  display: flex; flex-direction: column; padding: 18px 10px; gap: 2px; overflow-y: auto; flex-shrink: 0;
}
.asst-logo {
  font-size: 15px; font-weight: 700; color: #fff; padding: 0 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; letter-spacing: .5px;
}
.asst-agent-label {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #6a85a4;
  text-transform: uppercase; padding: 8px 6px 4px;
}
.asst-agent-btn {
  background: none; border: none; color: #c8d8ec; font-size: 13px; text-align: left;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; transition: all .15s;
}
.asst-agent-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.asst-agent-btn.active { background: #0057a8; color: #fff; font-weight: 600; }

/* Main area */
.asst-main { flex: 1; overflow-y: auto; padding: 20px; }

.asst-panel { max-width: 760px; margin: 0 auto; }

.asst-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; gap: 12px;
}
.asst-panel-title { font-size: 18px; font-weight: 700; color: #0f1f35; }
.asst-panel-sub { font-size: 13px; color: #64748b; margin-top: 2px; }

/* Chat */
.asst-chat-window {
  background: #fff; border-radius: 12px; padding: 16px;
  min-height: 300px; max-height: 50vh; overflow-y: auto;
  border: 1px solid #d7e0ea; margin-bottom: 12px;
}
.asst-welcome { text-align: center; padding: 40px 20px; }
.asst-welcome-icon { font-size: 36px; margin-bottom: 10px; }
.asst-welcome-title { font-size: 20px; font-weight: 700; color: #0f1f35; margin-bottom: 8px; }
.asst-welcome-sub { font-size: 14px; color: #64748b; max-width: 420px; margin: 0 auto; }

.asst-bubble { display: flex; gap: 10px; margin-bottom: 14px; }
.asst-bubble-user { flex-direction: row-reverse; }
.asst-bubble-avatar {
  width: 32px; height: 32px; background: #0057a8; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.asst-bubble-body {
  max-width: 80%; background: #f0f4f8; border-radius: 12px; padding: 10px 14px;
  font-size: 13.5px; line-height: 1.55; color: #0f1f35;
}
.asst-bubble-user .asst-bubble-body { background: #0057a8; color: #fff; }
.asst-bubble-body h2 { font-size: 15px; margin: 8px 0 4px; }
.asst-bubble-body h3 { font-size: 14px; margin: 8px 0 4px; }
.asst-bubble-body h4 { font-size: 13px; margin: 6px 0 3px; }
.asst-bubble-body ul { margin: 4px 0; padding-left: 18px; }
.asst-bubble-body table { border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.asst-bubble-body td { border: 1px solid #d7e0ea; padding: 4px 8px; }
.asst-bubble-body code { background: rgba(0,0,0,.07); padding: 1px 4px; border-radius: 3px; font-size: 12px; }

.asst-typing { display: flex; gap: 5px; align-items: center; padding: 12px 14px !important; }
.asst-typing span {
  width: 7px; height: 7px; background: #94a3b8; border-radius: 50%;
  animation: asst-bounce .9s ease-in-out infinite;
}
.asst-typing span:nth-child(2) { animation-delay: .15s; }
.asst-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes asst-bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

.asst-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.asst-quick-btn {
  border: 1px solid #d7e0ea; background: #fff; border-radius: 20px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; color: #334155; transition: all .15s;
}
.asst-quick-btn:hover { border-color: #0057a8; color: #0057a8; background: #f0f7ff; }

.asst-chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.asst-chat-input {
  flex: 1; border: 1px solid #d7e0ea; border-radius: 10px; padding: 10px 14px;
  font-size: 14px; font-family: inherit; resize: none; outline: none;
  line-height: 1.45; background: #fff; color: #0f1f35;
}
.asst-chat-input:focus { border-color: #0057a8; box-shadow: 0 0 0 2px rgba(0,87,168,.1); }
.asst-send-btn {
  background: #0057a8; color: #fff; border: none; border-radius: 10px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.asst-send-btn:hover { background: #004a8f; }
.asst-send-btn:disabled { opacity: .5; cursor: not-allowed; }

.asst-clear-btn {
  background: none; border: 1px solid #d7e0ea; border-radius: 7px; padding: 5px 12px;
  font-size: 12px; color: #64748b; cursor: pointer;
}
.asst-clear-btn:hover { border-color: #94a3b8; color: #0f1f35; }

/* Agent Forms */
.asst-form { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #d7e0ea; margin-bottom: 16px; }
.asst-label { display: block; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 5px; }
.asst-label:first-child { margin-top: 0; }
.asst-input {
  width: 100%; border: 1px solid #d7e0ea; border-radius: 8px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; outline: none; color: #0f1f35; background: #fff;
}
.asst-input:focus { border-color: #0057a8; box-shadow: 0 0 0 2px rgba(0,87,168,.1); }
.asst-select {
  width: 100%; border: 1px solid #d7e0ea; border-radius: 8px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; outline: none; color: #0f1f35; background: #fff; cursor: pointer;
}
.asst-select:focus { border-color: #0057a8; }
.asst-textarea {
  width: 100%; border: 1px solid #d7e0ea; border-radius: 8px; padding: 9px 12px;
  font-size: 13.5px; font-family: inherit; resize: vertical; outline: none; color: #0f1f35; min-height: 80px;
}
.asst-textarea:focus { border-color: #0057a8; box-shadow: 0 0 0 2px rgba(0,87,168,.1); }
.asst-textarea-tall { min-height: 160px; }
.asst-mt { margin-top: 8px; }

.asst-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.asst-form-col { display: flex; flex-direction: column; }
.asst-input-row { display: flex; gap: 10px; align-items: center; }
.asst-input-row .asst-select { flex: 1; }
.asst-input-row .asst-input { flex: 1; }
.asst-or { font-size: 12px; color: #94a3b8; flex-shrink: 0; }

.asst-radio-group { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
.asst-radio-label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #334155; cursor: pointer; }
.asst-radio-label input { cursor: pointer; }

/* Searchable account picker */
.asst-acct-picker { position: relative; }
.asst-acct-search { padding-right: 28px; }
.asst-acct-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background: #fff; border: 1px solid #d7e0ea; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto; margin-top: 2px;
}
.asst-acct-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; font-size: 13px; color: #0f1f35; cursor: pointer;
}
.asst-acct-opt:hover { background: #f0f7ff; }
.asst-acct-rank {
  font-size: 11px; color: #64748b; background: #f0f4f8;
  border-radius: 99px; padding: 1px 7px; flex-shrink: 0;
}
.asst-acct-selected {
  font-size: 12px; color: #0057a8; font-weight: 600; margin-top: 4px;
}

.asst-checklist { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.asst-check-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.asst-check-label input { cursor: pointer; width: 15px; height: 15px; }

.asst-action-btn {
  width: 100%; background: #0057a8; color: #fff; border: none; border-radius: 9px;
  padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 16px; transition: background .15s;
}
.asst-action-btn:hover { background: #004a8f; }

/* Results */
.asst-result { background: #fff; border-radius: 12px; border: 1px solid #d7e0ea; overflow: hidden; }
.asst-result:empty { display: none; }
.asst-result-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #f0f7ff; border-bottom: 1px solid #d7e0ea;
  font-size: 13px; font-weight: 600; color: #0f1f35;
}
.asst-result-body {
  padding: 16px; font-size: 13.5px; line-height: 1.6; color: #0f1f35;
}
.asst-result-body h2 { font-size: 16px; margin: 16px 0 6px; border-bottom: 1px solid #d7e0ea; padding-bottom: 4px; }
.asst-result-body h3 { font-size: 14px; margin: 14px 0 4px; color: #0057a8; }
.asst-result-body h4 { font-size: 13px; margin: 10px 0 3px; }
.asst-result-body ul { margin: 4px 0; padding-left: 20px; }
.asst-result-body table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 8px 0; }
.asst-result-body td { border: 1px solid #d7e0ea; padding: 6px 10px; }
.asst-result-body tr:first-child td { background: #f8fafc; font-weight: 600; }

.asst-copy-btn {
  background: #0057a8; color: #fff; border: none; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; flex-shrink: 0;
}
.asst-copy-btn:hover { background: #004a8f; }

/* Loading */
.asst-loading {
  display: flex; align-items: center; gap: 10px; padding: 20px 16px;
  font-size: 13px; color: #64748b;
}
.asst-spinner {
  width: 16px; height: 16px; border: 2px solid #0057a8; border-top-color: transparent;
  border-radius: 50%; animation: asst-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes asst-spin { to { transform: rotate(360deg); } }

.asst-error { padding: 14px 16px; color: #dc2626; font-size: 13px; }

/* Slots */
.asst-slots { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.asst-slot {
  border: 1px solid #d7e0ea; border-radius: 9px; padding: 12px 14px; background: #f8fafc;
}
.asst-slot-label { font-size: 14px; font-weight: 600; color: #0f1f35; }
.asst-slot-reason { font-size: 12px; color: #64748b; margin-top: 3px; }

/* Prospect cards */
.asst-prospects { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.asst-prospect-card {
  border: 1px solid #d7e0ea; border-radius: 9px; padding: 14px; background: #f8fafc;
}
.asst-prospect-name { font-size: 15px; font-weight: 700; color: #0f1f35; }
.asst-prospect-meta { font-size: 12px; color: #64748b; margin: 3px 0 6px; }
.asst-prospect-reason { font-size: 13px; color: #334155; margin-bottom: 6px; }
.asst-prospect-action { font-size: 12px; color: #0057a8; font-weight: 500; }

/* Account Hub Card */
.asst-hub-card {
  background: #fff; border: 1px solid #d7e0ea; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px;
}
.asst-hub-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.asst-hub-name { font-size: 16px; font-weight: 700; color: #0f1f35; }
.asst-hub-rank { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.asst-hub-meta { font-size: 12px; color: #64748b; margin-bottom: 12px; }
.asst-hub-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.asst-hub-btn {
  flex: 1; min-width: 70px; background: #f0f7ff; border: 1px solid #bfdbfe;
  border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 500;
  color: #0057a8; cursor: pointer; text-align: center; transition: all .15s;
}
.asst-hub-btn:hover { background: #0057a8; color: #fff; border-color: #0057a8; }

/* Daily brief loading */
.asst-brief-loading {
  text-align: center; color: #64748b; font-size: 14px;
  padding: 40px 20px; animation: asst-pulse 1.5s ease-in-out infinite;
}
@keyframes asst-pulse { 0%,100% { opacity:.5 } 50% { opacity:1 } }

/* Result action buttons */
.asst-result-actions { display: flex; gap: 6px; align-items: center; }
.asst-save-btn {
  background: #dcfce7; color: #15803d; border: none; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.asst-save-btn:hover { background: #16a34a; color: #fff; }
.asst-save-btn:disabled { opacity: .6; cursor: default; }

/* Inline draft email button in chat bubbles */
.asst-inline-draft {
  display: inline-block; margin-top: 8px; background: #f0f7ff;
  border: 1px solid #bfdbfe; border-radius: 20px; padding: 5px 12px;
  font-size: 12px; color: #0057a8; cursor: pointer; font-weight: 500;
}
.asst-inline-draft:hover { background: #0057a8; color: #fff; border-color: #0057a8; }

/* Bottom nav (mobile only) */
.asst-bottom-nav { display: none; }
.asst-more-menu { display: none; }

/* Mobile */
@media (max-width: 640px) {
  .asst-root { flex-direction: column; height: calc(100vh - 56px); }
  .asst-sidebar { display: none; }
  .asst-main { padding: 12px; padding-bottom: 70px; flex: 1; overflow-y: auto; }
  .asst-form-row { grid-template-columns: 1fr; }
  .asst-input-row { flex-direction: column; align-items: stretch; }
  .asst-or { display: none; }
  .asst-quick-actions { gap: 6px; }
  .asst-quick-btn { font-size: 11px; padding: 5px 10px; }
  .asst-chat-window { max-height: 38vh; }
  .asst-bubble-body { max-width: 90%; }
  .asst-hub-actions { gap: 6px; }
  .asst-hub-btn { font-size: 12px; padding: 7px 8px; }

  .asst-bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: #0f1f35; border-top: 1px solid rgba(255,255,255,.1);
    padding: 0; height: 58px;
  }
  .asst-bnav-btn {
    flex: 1; background: none; border: none; color: #8aa4c0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 18px; cursor: pointer; padding: 6px 0;
  }
  .asst-bnav-btn span { font-size: 10px; font-weight: 500; }
  .asst-bnav-btn.active { color: #fff; }
  .asst-bnav-btn.active span { color: #60a5fa; }

  .asst-more-menu {
    position: fixed; bottom: 58px; right: 0; left: 0; z-index: 199;
    background: #0f1f35; border-top: 1px solid rgba(255,255,255,.1);
    padding: 8px;
  }
  .asst-more-item {
    display: block; width: 100%; text-align: left; background: none; border: none;
    color: #c8d8ec; font-size: 15px; padding: 12px 16px; cursor: pointer; border-radius: 8px;
  }
  .asst-more-item:hover { background: rgba(255,255,255,.08); }
}

/* ── Web search row ────────────────────────────────────────────── */
.asst-web-search-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.asst-web-search-btn {
  background: #0f4c8a; color: #fff; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer;
  white-space: nowrap; transition: background .15s; flex-shrink: 0;
}
.asst-web-search-btn:hover { background: #0a3a6e; }
.asst-web-search-btn:disabled { opacity: .6; cursor: not-allowed; }
.asst-web-search-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.asst-label-hint { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }

/* ── Due badge ─────────────────────────────────────────────────── */
.asst-due-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px;
  margin-left: 6px; line-height: 1;
}

/* ── Follow-up due list ─────────────────────────────────────────── */
.asst-followup-due {
  background: #fff8f0; border: 1.5px solid var(--gold); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px;
}
.asst-followup-due-title {
  font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em;
}
.asst-followup-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-top: 1px solid #fde8cc;
}
.asst-followup-item-info { flex: 1; font-size: 13px; color: var(--ink); }
.asst-followup-day { font-size: 11px; color: var(--muted); margin-left: 6px; }
.asst-followup-gen-btn {
  background: var(--gold); color: #fff; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}

/* ── Sequence offer ─────────────────────────────────────────────── */
.asst-sequence-offer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f0f7ff; border: 1.5px solid var(--blue); border-radius: 8px;
  padding: 10px 12px; margin-top: 10px;
}
.asst-sequence-offer-text { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; }
.asst-sequence-yes {
  background: var(--blue); color: #fff; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer;
}
.asst-sequence-no {
  background: none; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; font-size: 12px; padding: 6px 12px; cursor: pointer;
}
.asst-sequence-done { font-size: 13px; color: #2a7a2a; font-weight: 600; }

/* ── Memory offer ───────────────────────────────────────────────── */
.asst-memory-offer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f3f0ff; border: 1.5px solid #7c5cbf; border-radius: 8px;
  padding: 10px 12px; margin-top: 10px;
}
.asst-memory-offer-text { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; }
.asst-memory-yes {
  background: #7c5cbf; color: #fff; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer;
}
.asst-memory-no {
  background: none; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; font-size: 12px; padding: 6px 12px; cursor: pointer;
}

/* ── Voice debrief ──────────────────────────────────────────────── */
.asst-voice-controls {
  display: flex; align-items: center; gap: 12px; margin: 12px 0;
}
.asst-voice-btn {
  background: var(--ink); color: #fff; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; padding: 10px 20px; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.asst-voice-btn.asst-voice-active {
  background: #c0392b; animation: asst-pulse 1.2s ease-in-out infinite;
}
@keyframes asst-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
.asst-voice-status { font-size: 13px; color: var(--muted); }

/* ── Territory ──────────────────────────────────────────────────── */
.asst-territory-map {
  padding: 0 16px 8px; margin-bottom: 4px;
}
.asst-territory-title {
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 8px; padding-top: 12px;
}
.asst-county-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px;
}
.asst-county-name { width: 140px; min-width: 140px; color: var(--ink); truncate: ellipsis; overflow: hidden; white-space: nowrap; }
.asst-county-bar { flex: 1; background: var(--paper); border-radius: 4px; height: 8px; overflow: hidden; }
.asst-county-fill { display: block; height: 100%; background: var(--blue); border-radius: 4px; transition: width .4s; }
.asst-county-count { width: 24px; text-align: right; color: var(--muted); font-weight: 600; }

/* ── Memory bank ─────────────────────────────────────────────────── */
.asst-memory-search { padding: 8px 16px 0; }
.asst-mem-list { padding: 0 16px 80px; overflow-y: auto; }
.asst-memory-empty { padding: 24px 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; }
.asst-mem-account {
  margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--panel);
}
.asst-mem-acct-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.asst-mem-acct-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.asst-mem-acct-date { font-size: 11px; color: var(--muted); }
.asst-mem-facts { padding: 8px 0; }
.asst-mem-fact {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 14px;
  border-bottom: 1px solid var(--paper);
}
.asst-mem-fact:last-child { border-bottom: none; }
.asst-mem-fact-text { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.45; }
.asst-mem-delete {
  flex-shrink: 0; background: none; border: none; color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 0 2px; margin-top: 1px;
  opacity: .5; transition: opacity .15s;
}
.asst-mem-delete:hover { opacity: 1; color: var(--red); }

/* ── All <dialog> elements: force light theme so --ink stays readable ── */
.modal-dialog {
  color-scheme: light;
  background: #ffffff;
  color: #182b45;
  border: none;
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,.22);
  padding: 0;
  max-width: min(92vw, 540px);
  width: min(92vw, 540px);
  max-height: min(92vh, 820px);
}
.modal-dialog[open] {
  display: flex;
  flex-direction: column;
}
.modal-dialog.modal-dialog-wide { max-width: min(96vw, 680px); width: min(96vw, 680px); }
.modal-dialog::backdrop { background: rgba(0,0,0,.45); }
.modal-dialog .modal-header {
  padding: 20px 22px 0;
  margin-bottom: 0;
  border-bottom: 1px solid #d7e0ea;
  padding-bottom: 14px;
}
.modal-dialog .modal-header h3 { font-size: 16px; font-weight: 700; color: #182b45; margin: 0; }
.modal-dialog .modal-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: #64748b; padding: 0 2px; line-height: 1;
}
.modal-dialog .modal-close:hover { color: #182b45; }
.modal-dialog .modal-body { padding: 18px 22px; }
.modal-dialog .modal-form { padding: 18px 22px 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-dialog .modal-footer {
  padding: 14px 22px 18px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  border-top: 1px solid #d7e0ea; margin-top: 4px;
}
.modal-dialog .form-label { color: #182b45; }
.modal-dialog .form-input,
.modal-dialog .form-textarea,
.modal-dialog select,
.modal-dialog input,
.modal-dialog textarea {
  color: #182b45;
  background: #f5f8fc;
  border-color: #d7e0ea;
}
.modal-dialog .muted-note { color: #64748b; font-size: 12px; }

/* ── Inline modal dialogs ─────────────────────────────────────── */
.grip-modal-dialog {
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  padding: 24px;
  width: min(90vw, 360px);
  background: var(--panel);
}
.grip-modal-dialog::backdrop {
  background: rgba(0,0,0,.35);
}
.grip-modal-message {
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.5;
  white-space: pre-line;
}
.grip-modal-input {
  width: 100%;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.grip-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Offline banner ───────────────────────────────────────────── */
.grip-offline-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #92400e;
  color: #fff;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 16px;
  z-index: 9999;
}

/* ── Follow-up queue nav badge ────────────────────────────────── */
.nav-due-badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ── Last synced label ────────────────────────────────────────── */
.grip-sync-time {
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
}

/* ── Task mini records in account detail ──────────────────────── */
.task-mini-record {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.task-mini-record:last-child { border-bottom: none; }
.task-mini-record.task-mini-done .task-mini-title {
  text-decoration: line-through;
  color: var(--muted);
}
.task-mini-record.overdue .task-mini-title { color: #dc2626; }
.task-mini-record.today  .task-mini-title { color: #d97706; }
.task-mini-check { display: flex; align-items: center; padding-top: 1px; }
.task-mini-check input { margin: 0; width: 16px; height: 16px; cursor: pointer; }
.task-mini-body { flex: 1; min-width: 0; }
.task-mini-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.task-mini-meta  { font-size: 11px; color: var(--muted); }

/* ── Outreach / Payton — modern redesign ─────────────────────────── */
#outreachView { display: none; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }
#outreachView.is-active { display: flex; }

/* ── Outreach header & toolbar ───────────────────────────────────── */
/* ── Outreach header ─────────────────────────────────────────────── */
.outreach-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 18px 12px;
  flex-shrink: 0;
}
.outreach-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.outreach-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.outreach-settings-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.outreach-settings-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ── Assistant setup steps ───────────────────────────────────── */
.asst-setup-steps {
  background: #f0f6ff;
  border: 1px solid #c5dbf7;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.asst-setup-steps-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue);
  margin: 0 0 10px;
}
.asst-setup-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asst-setup-step-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: #1a2b4a;
  line-height: 1.45;
}
.asst-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.asst-setup-step-list a {
  color: var(--blue);
  text-decoration: underline;
}
.asst-setup-step-list code {
  font-family: monospace;
  background: #dce8f8;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* ── Assistant settings inline field rows ────────────────────── */
.asst-field-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.asst-field-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 10px;
}
.asst-field-row--full {
  grid-template-columns: 170px 1fr;
  align-items: flex-start;
}
.asst-field-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #182b45;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asst-field-label small {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.25;
}
.outreach-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.outreach-campaign-info { flex: 1; min-width: 0; }

.outreach-gmail-status {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.outreach-gmail-status.connected { color: #059669; font-weight: 600; }
.outreach-gmail-status.expiring  { color: #d97706; font-weight: 600; }

/* ── Campaign card ───────────────────────────────────────────────── */
.payton-empty-campaign {
  font-size: 14px;
  color: var(--muted);
  padding: 4px 0;
}
.payton-campaign-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  flex-wrap: wrap;
}
.payton-campaign-left { min-width: 0; }
.payton-campaign-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.payton-campaign-date {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.payton-date-edit-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.payton-date-edit-btn:hover { color: var(--accent); }
.payton-date-inline-input {
  font-size: 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 6px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.payton-stat-row {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 6px;
}
.payton-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  border-right: 1px solid var(--line);
}
.payton-stat:last-child { border-right: none; }
.payton-stat-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.payton-stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
  white-space: nowrap;
}
.payton-stat-accent { color: #059669; }
.payton-stat-warn .payton-stat-num  { color: #d97706; }
.payton-stat-warn .payton-stat-label { color: #d97706; }
.payton-campaign-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.payton-switch-btn,
.payton-cal-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.payton-switch-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.payton-cal-btn:hover { background: #1a73e8; color: #fff; border-color: #1a73e8; }

/* ── Body layout ─────────────────────────────────────────────────── */
.outreach-body {
  display: grid;
  grid-template-columns: 1fr 270px;
  flex: 1;
  overflow: hidden;
}
@media (max-width: 768px) {
  .outreach-body { grid-template-columns: 1fr; }
  .outreach-panel-side { display: none; }
}
.outreach-panel { overflow-y: auto; border-right: 1px solid var(--line); }
.outreach-panel-side { border-right: none; background: var(--bg); }
.outreach-panel-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.outreach-panel-side .outreach-panel-title { background: var(--bg); }
.outreach-prospect-list {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.outreach-fup-list {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Prospect cards ──────────────────────────────────────────────── */
.prospect-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.prospect-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.07);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.prospect-card--due { border-left: 3px solid #d97706; }

.prospect-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.avatar-cold      { background: #f1f5f9; color: #64748b; }
.avatar-contacted { background: #dbeafe; color: #1d4ed8; }
.avatar-replied   { background: #e0e7ff; color: #4338ca; }
.avatar-warm      { background: #fef9c3; color: #92400e; }
.avatar-qualified { background: #d1fae5; color: #065f46; }
.avatar-meeting   { background: #bbf7d0; color: #15803d; }
.avatar-unsub     { background: #fee2e2; color: #991b1b; }

.prospect-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prospect-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.prospect-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.prospect-due-dot { color: #d97706; font-size: 10px; }
.prospect-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prospect-email {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.8;
}
.prospect-email:hover { text-decoration: underline; opacity: 1; }

.prospect-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex-shrink: 0;
}
.prospect-last {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.prospect-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Follow-up queue cards ───────────────────────────────────────── */
.fup-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--line);
  transition: box-shadow 0.12s;
}
.fup-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.fup-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fup-card-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.fup-card-company {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fup-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fup-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── Payton micro-buttons ────────────────────────────────────────── */
.payton-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.payton-btn:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
}
.payton-btn--accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.payton-btn--accent:hover { opacity: 0.85; }
.payton-select {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.payton-remove {
  font-size: 13px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.payton-remove:hover { background: #fee2e2; color: #dc2626; }

/* ── Status badges ───────────────────────────────────────────────── */
.outreach-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.status-cold       { background: #f1f5f9; color: #64748b; }
.status-contacted  { background: #dbeafe; color: #1d4ed8; }
.status-replied    { background: #e0e7ff; color: #4338ca; }
.status-warm       { background: #fef9c3; color: #92400e; }
.status-qualified  { background: #d1fae5; color: #065f46; }
.status-meeting    { background: #bbf7d0; color: #15803d; }
.status-unsub      { background: #f1f5f9; color: #94a3b8; }

/* ── Campaign switcher ───────────────────────────────────────────── */
.outreach-campaign-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.outreach-campaign-item:last-child { border-bottom: none; }
.outreach-campaign-item strong { font-size: 14px; color: var(--ink); display: block; font-weight: 600; }
.outreach-campaign-item.is-active { opacity: 0.65; }
.outreach-active-label { font-size: 11px; color: #059669; font-weight: 700; }

/* ── Import list ─────────────────────────────────────────────────── */
.import-grip-list { max-height: 360px; overflow-y: auto; margin-top: 10px; }
.import-grip-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
  border-radius: 6px;
}
.import-grip-item:hover { background: var(--bg); }
.import-grip-item:last-child { border-bottom: none; }
.import-grip-item strong { display: block; color: var(--ink); font-weight: 600; }
.import-grip-item span { color: var(--muted); font-size: 12px; }

/* Import filters */
.import-grip-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.import-grip-filters .search-input { flex: 1; min-width: 120px; }
.import-grip-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.import-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #e2e8f0;
  color: #475569;
  white-space: nowrap;
  font-weight: 600;
}
.import-tag-entity { background: #dbeafe; color: #1d4ed8; }

/* ── Email compose ───────────────────────────────────────────────── */
.outreach-email-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.outreach-email-field {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.outreach-email-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  width: 52px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.outreach-email-field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--ink);
  padding: 0;
}
.outreach-email-body-wrap {
  padding: 14px 0 4px;
}
.outreach-email-body {
  width: 100%;
  min-height: 260px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  resize: vertical;
  padding: 0;
}

/* ── Misc ────────────────────────────────────────────────────────── */
.btn-sm { font-size: 12px !important; padding: 4px 10px !important; }
.select-sm {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.form-hint { display: block; font-size: 11px; color: var(--muted); margin: 2px 0 5px; }
.form-section-label { margin: 12px 0 4px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.campaign-custom-city-row.hidden { display: none; }

/* Sync button clickable */
button#gripSyncStatus { cursor: pointer; background: none; border: none; padding: 0; }
button#gripSyncStatus:hover { opacity: 0.75; }

/* ══════════════════════════════════════════════════════════════════
   TODAY DASHBOARD
   ══════════════════════════════════════════════════════════════════ */
#todayView { overflow-y: auto; }
.td-page { padding: 20px 24px; max-width: 1100px; margin: 0 auto; }
.td-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.td-greeting { font-size: 24px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.02em; }
.td-date { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.td-topbar-actions { display: flex; gap: 8px; align-items: center; }
.td-quicklog-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700; padding: 9px 18px; cursor: pointer;
  transition: opacity .15s;
}
.td-quicklog-btn:hover { opacity: .88; }

.td-kpi-row {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;
}
.td-kpi {
  flex: 1; min-width: 100px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; text-align: center;
}
.td-kpi--accent { border-color: var(--accent); }
.td-kpi--warn   { border-color: #d97706; }
.td-kpi--green  { border-color: #059669; }
.td-kpi-num { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.td-kpi--accent .td-kpi-num { color: var(--accent); }
.td-kpi--warn   .td-kpi-num { color: #d97706; }
.td-kpi--green  .td-kpi-num { color: #059669; }
.td-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 5px; }

.td-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px) { .td-grid { grid-template-columns: 1fr; } }

.td-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.td-card-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.td-card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.td-card-subtitle { font-size: 11px; color: var(--muted); margin-left: auto; }
.td-card-badge {
  font-size: 11px; font-weight: 800; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: var(--line); color: var(--muted);
}
.td-card-badge--active { background: var(--accent); color: #fff; }
.td-card-body { padding: 8px 0; }
.td-empty { font-size: 13px; color: var(--muted); padding: 12px 16px; margin: 0; }

.td-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  border-bottom: 1px solid var(--line); transition: background .1s;
}
.td-row:last-child { border-bottom: none; }
.td-row:hover { background: var(--bg); }
.td-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-row-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.td-row-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.td-badge--warn  { background: #fef3c7; color: #92400e; }
.td-badge--blue  { background: #dbeafe; color: #1d4ed8; }
.td-badge--muted { background: #f1f5f9; color: #64748b; }
.td-link-btn {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.td-link-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   PIPELINE DASHBOARD
   ══════════════════════════════════════════════════════════════════ */
#pipelineView { overflow-y: auto; }
.pl-page { display: flex; flex-direction: column; height: 100%; }
.pl-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); flex-shrink: 0;
}
.pl-topbar-left { display: flex; align-items: baseline; gap: 12px; }
.pl-topbar-right { display: flex; align-items: center; gap: 10px; }
.pl-headline { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.02em; }
.pl-pipeline-value { font-size: 13px; color: var(--muted); font-weight: 600; }
.pl-tab-group { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pl-tab { font-size: 12px; font-weight: 600; padding: 5px 14px; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.pl-tab--active { background: var(--accent); color: #fff; }
.pl-add-btn {
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 8px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
}
.pl-add-btn:hover { opacity: .88; }
.pl-content { flex: 1; overflow: hidden; }

/* Kanban board */
.pl-board {
  display: flex; gap: 10px; padding: 14px; height: 100%; overflow-x: auto; overflow-y: hidden;
  align-items: flex-start;
}
.pl-col {
  flex: 0 0 220px; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.pl-col-header {
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; background: var(--surface);
}
.pl-col-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pl-col-meta { font-size: 10px; color: var(--muted); }
.pl-col-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; flex: 1; min-height: 60px; }
.pl-col-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 20px 8px; }

.pl-deal-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; transition: box-shadow .15s, border-color .15s;
}
.pl-deal-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--accent); }
.pl-deal-name { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.pl-deal-account { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.pl-deal-footer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pl-deal-amount { font-size: 13px; font-weight: 700; color: var(--ink); }
.pl-deal-age { font-size: 10px; color: var(--muted); }
.pl-deal-close { font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.pl-deal-actions { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.pl-stage-select { font-size: 10px; flex: 1; padding: 2px 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink); }
.pl-edit-btn, .pl-del-btn { font-size: 12px; padding: 2px 6px; border: none; background: transparent; cursor: pointer; border-radius: 4px; color: var(--muted); }
.pl-edit-btn:hover { color: var(--accent); background: var(--bg); }
.pl-del-btn:hover  { color: #dc2626; background: #fee2e2; }

/* Analytics */
.pl-analytics { padding: 18px; overflow-y: auto; height: 100%; }
.pl-kpi-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.pl-kpi { flex: 1; min-width: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; text-align: center; }
.pl-kpi--accent { border-color: var(--accent); }
.pl-kpi--green  { border-color: #059669; }
.pl-kpi-num { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.pl-kpi--accent .pl-kpi-num { color: var(--accent); }
.pl-kpi--green  .pl-kpi-num { color: #059669; }
.pl-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }
.pl-analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pl-analytics-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.pl-analytics-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; }
.pl-analytics-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pl-analytics-row:last-child { border-bottom: none; }
.pl-empty { font-size: 13px; color: var(--muted); margin: 0; }
.pl-stage-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.pl-deal-table { display: flex; flex-direction: column; gap: 6px; }
.pl-deal-table-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pl-deal-table-row:last-child { border-bottom: none; }
.pl-deal-table-name { font-size: 13px; font-weight: 600; color: var(--ink); display: block; }
.pl-deal-table-account { font-size: 11px; color: var(--muted); }
.pl-deal-table-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════
   TERRITORY MAP
   ══════════════════════════════════════════════════════════════════ */
#territoryView { overflow: hidden; display: flex; flex-direction: column; }
.territory-page { display: flex; flex-direction: column; height: 100%; }
.territory-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); flex-shrink: 0; flex-wrap: wrap;
}
.territory-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.territory-count { font-size: 12px; color: var(--muted); }
.territory-control-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.territory-select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; }
.territory-map-container { flex: 1; min-height: 0; }
.territory-legend {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 16px;
  border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0;
}
.territory-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.territory-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Map popup */
.territory-popup { font-family: inherit; min-width: 160px; }
.territory-popup strong { font-size: 13px; font-weight: 700; color: #182b45; display: block; margin-bottom: 3px; }
.territory-popup-meta { font-size: 11px; color: #64748b; margin-bottom: 2px; }
.territory-popup-poc  { font-size: 12px; color: #182b45; margin-bottom: 2px; }
.territory-popup-last { font-size: 11px; color: #64748b; margin-bottom: 8px; }
.territory-popup-btn {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  background: #0057a8; color: #fff; border: none; cursor: pointer; width: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   PRE-VISIT DOSSIER
   ══════════════════════════════════════════════════════════════════ */
.dossier { display: flex; flex-direction: column; gap: 0; }
.dossier-section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.dossier-section:last-child { border-bottom: none; }
.dossier-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; }
.dossier-grid { display: grid; grid-template-columns: 120px 1fr; gap: 5px 12px; font-size: 13px; }
.dossier-label { color: var(--muted); font-size: 12px; }
.dossier-deal { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.dossier-deal:last-child { border-bottom: none; }
.dossier-deal span:first-child { flex: 1; font-weight: 600; }
.dossier-stage { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #f1f5f9; color: #475569; }
.dossier-activity { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.dossier-activity:last-child { border-bottom: none; }
.dossier-act-date { font-size: 11px; color: var(--muted); white-space: nowrap; min-width: 80px; }