/* ============================================================
   NB Knife CRM — Main Stylesheet
   Mobile-first. No framework, no build step.
   All design tokens in :root. All colours via custom properties.
   ============================================================ */

/* ── Design Tokens ───────────────────────────────────────────────────────── */

:root {
  /* Brand colours */
  --color-espresso:   #3c2313;
  --color-walnut:     #5c3820;
  --color-sand:       #c2b59b;
  --color-linen:      #ede8e0;
  --color-off-white:  #faf8f5;
  --color-white:      #ffffff;
  --color-cta:        #c97214;
  --color-cta-hover:  #e08220;
  --color-cta-glow:   rgba(201, 114, 20, 0.25);
  --color-text-muted: #9e9086;
  --color-border:     rgba(255,255,255,0.12);

  /* Dark backgrounds */
  --bg-base:          #1a1612;
  --bg-card:          #252018;
  --bg-card-hover:    #2c2720;
  --bg-elevated:      #2e2820;
  --bg-input:         #201c16;

  /* Borders */
  --border-subtle:    rgba(255, 255, 255, 0.07);
  --border-med:       rgba(255, 255, 255, 0.12);

  /* Text */
  --text-primary:     #f0ebe3;
  --text-secondary:   #9e9086;
  --text-tertiary:    #6a6058;

  /* Semantic — CRM-specific */
  --color-success:      #6aab40;
  --color-success-bg:   #162410;
  --color-error:        #d4736e;
  --color-error-bg:     #2a100e;
  --color-warning:      #c9914a;
  --color-warning-bg:   #2a1a06;

  /* Typography */
  --font-body:    'Work Sans', system-ui, sans-serif;
  --font-heading: 'Work Sans', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Layout */
  --nav-height:    3.5rem;
  --app-max-width: 72rem;    /* 1152px */
  --sidebar-width: 13rem;

  /* Borders & radius */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(60, 35, 19, 0.08);
  --shadow:    0 2px 8px rgba(60, 35, 19, 0.12);
  --shadow-lg: 0 4px 20px rgba(60, 35, 19, 0.16);

  /* Breakpoints (reference only — use in media queries) */
  --bp-md: 48rem;    /* 768px  */
  --bp-lg: 68.75rem; /* 1100px */

  /* Card system */
  --card-radius:  13px;
  --card-shadow:  0 2px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
  --card-border:  0.5px solid var(--border-subtle);
  --card-bg:      var(--bg-card);
  --chip-radius:  99px;

  /* Status chip colours — dark-tuned */
  --status-requested-bg:     #2e1f0a;
  --status-requested-text:   #c9914a;
  --status-requested-border: #4a3318;
  --status-scheduled-bg:     #1a2d40;
  --status-scheduled-text:   #6aabdd;
  --status-scheduled-border: #2a4a6a;
  --status-complete-bg:      #162410;
  --status-complete-text:    #6aab40;
  --status-complete-border:  #2a4020;
  --status-cancelled-bg:     #1e1e1e;
  --status-cancelled-text:   #666;
  --status-cancelled-border: #333;

  /* Overdue urgency */
  --urgency-high:  #c0392b;
  --urgency-med:   #c9914a;

  /* Tags */
  --tag-red-bg:     #2a100e;
  --tag-red-text:   #d4736e;
  --tag-red-border: #5a2020;
  --tag-amber-bg:     #2a1a06;
  --tag-amber-text:   #c9914a;
  --tag-amber-border: #5a3810;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-espresso);
  background: var(--color-off-white);
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-cta);
  text-decoration: underline;
}

a:hover {
  color: var(--color-cta-hover);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ── Focus visible ───────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  cursor: pointer;
}

.btn--cta {
  background: var(--color-cta);
  border-color: var(--color-cta);
  color: var(--color-white);
}

.btn--cta:hover,
.btn--cta:focus-visible {
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  color: var(--color-white);
}

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

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-walnut);
  color: var(--color-walnut);
}

.btn--danger {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn--danger:hover {
  background: var(--color-error);
  color: var(--color-white);
}

.btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.btn--full {
  width: 100%;
}

/* ── Form elements ───────────────────────────────────────────────────────── */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-espresso);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-espresso);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-cta);
  box-shadow: 0 0 0 3px rgba(184, 98, 10, 0.12);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.form-alert--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid rgba(139, 32, 32, 0.25);
}

.form-alert--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(45, 106, 45, 0.25);
}

/* ── Login page ──────────────────────────────────────────────────────────── */

.page-login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-espresso);
  padding: var(--space-6) var(--space-4);
}

.login-wrap {
  width: 100%;
  max-width: 24rem;
}

.login-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.login-brand__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-espresso);
  letter-spacing: -0.01em;
}

.login-brand__badge {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-cta);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-espresso);
  margin-bottom: var(--space-6);
}

.login-form {
  margin-top: var(--space-2);
}

/* ── App shell — nav + main layout ──────────────────────────────────────── */

.page-app {
  min-height: 100dvh;
  background: var(--color-off-white);
}

/* Top nav bar */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--nav-height);
  padding: 0 var(--space-4);
  background: var(--color-espresso);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.app-nav__brand {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-sand);
  white-space: nowrap;
  margin-right: var(--space-2);
  flex-shrink: 0;
}

.app-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.app-nav__links::-webkit-scrollbar {
  display: none;
}

.app-nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(194, 181, 155, 0.75);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.app-nav__link:hover {
  color: var(--color-sand);
  background: rgba(255, 255, 255, 0.06);
}

.app-nav__link--active {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

.app-nav__link--cta {
  color: var(--color-white);
  background: var(--color-cta);
  font-weight: 700;
}

.app-nav__link--cta:hover {
  background: var(--color-cta-hover);
  color: var(--color-white);
}

.app-nav__logout-form {
  margin-left: auto;
  flex-shrink: 0;
}

.app-nav__logout-btn {
  background: none;
  border: 1px solid rgba(194, 181, 155, 0.3);
  color: rgba(194, 181, 155, 0.75);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.app-nav__logout-btn:hover {
  border-color: var(--color-sand);
  color: var(--color-sand);
}

/* Main content area */
.app-main {
  padding: var(--space-6) var(--space-4) var(--space-12);
}

.app-container {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
}

/* Page header */
.page-header {
  margin-bottom: var(--space-6);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Dashboard — scaffold notice ─────────────────────────────────────────── */

.scaffold-notice {
  padding: var(--space-4);
  background: var(--color-linen);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-walnut);
  margin-bottom: var(--space-6);
}

/* ── Stat cards ──────────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 48rem) {
  .stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.stat-card__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.stat-card__value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-espresso);
  line-height: 1;
}

/* ── Health row ──────────────────────────────────────────────────────────── */

.health-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.health-row__label {
  font-weight: 500;
}

.health-row__value--ok {
  color: var(--color-success);
  font-weight: 600;
}

.health-row__value--error {
  color: var(--color-error);
  font-weight: 600;
}

/* ── Error page ──────────────────────────────────────────────────────────── */

.page-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-8);
}

.error-wrap {
  text-align: center;
}

.error-wrap h1 {
  font-size: var(--text-3xl);
  color: var(--color-espresso);
  margin-bottom: var(--space-4);
}

.error-wrap p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */

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

[hidden] {
  display: none !important;
}

/* =============================================================
   Session 3 — Customer List & Profile
   ============================================================= */

/* ── Flash message (fixed bottom-right) ─────────────────────────────────── */

.flash {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-width: 18rem;
  animation: flash-in 0.15s ease;
}

@keyframes flash-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.flash--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(45, 106, 45, 0.3);
}

.flash--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid rgba(139, 32, 32, 0.25);
}

.flash--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid rgba(122, 79, 0, 0.25);
}

/* ── Field-level save feedback ───────────────────────────────────────────── */

@keyframes saved-flash {
  0%   { box-shadow: 0 0 0 2px rgba(45, 134, 45, 0.55); background-color: rgba(45, 134, 45, 0.08); }
  65%  { box-shadow: 0 0 0 2px rgba(45, 134, 45, 0.55); background-color: rgba(45, 134, 45, 0.08); }
  100% { box-shadow: 0 0 0 2px transparent;              background-color: transparent; }
}

.field-saved {
  border-radius: 3px;
  animation: saved-flash 1.4s ease forwards;
}

/* ── Page header with split layout ──────────────────────────────────────── */

.page-header--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-header__left {}

.page-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.search-input {
  width: 100%;
  max-width: 18rem;
}

/* ── Data table ──────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.table-wrap--flush {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead {
  background: var(--color-linen);
}

.data-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  user-select: none;
}

.data-table th[data-sort]:hover {
  color: var(--color-espresso);
}

.data-table th[aria-sort="ascending"]::after  { content: ' ↑'; }
.data-table th[aria-sort="descending"]::after { content: ' ↓'; }

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-espresso);
  vertical-align: middle;
}

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

.data-table tbody tr:hover td {
  background: var(--color-off-white);
}

.table-empty,
.table-loading {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

.data-table__cell--name { font-weight: 500; }
.data-table__cell--num  { text-align: right; }
.data-table__cell--muted {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Hide email/detail column on small screens */
.col-email { display: none; }

@media (min-width: 48rem) {
  .col-email { display: table-cell; }
}

.col-num { text-align: right; }

.customer-link {
  color: var(--color-espresso);
  text-decoration: none;
  font-weight: 500;
}

.customer-link:hover {
  color: var(--color-cta);
  text-decoration: underline;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge--requested { background: var(--color-linen);      color: var(--color-walnut); }
.badge--scheduled { background: #fff3e0;                 color: var(--color-cta); border: 1px solid rgba(184,98,10,0.25); }
.badge--complete  { background: var(--color-success-bg); color: var(--color-success); }
.badge--cancelled { background: #f0f0f0;                 color: var(--color-text-muted); }

/* ── Profile page ────────────────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumb__link {
  color: var(--color-cta);
  text-decoration: none;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__sep {
  color: var(--color-border);
}

.profile-header {
  margin-bottom: var(--space-6);
}

.profile-header__name {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-espresso);
}

.profile-header__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 68.75rem) {
  .profile-grid {
    grid-template-columns: 21rem 1fr;
  }
}

/* ── Info card ───────────────────────────────────────────────────────────── */

.info-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.info-card__header {
  padding: var(--space-3) var(--space-5);
  background: var(--color-linen);
  border-bottom: 1px solid var(--color-border);
}

.info-card__subheader {
  padding: var(--space-3) var(--space-5);
  background: var(--color-linen);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.info-card__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.info-card__body {
  padding: var(--space-4) var(--space-5);
}

/* ── Field rows ──────────────────────────────────────────────────────────── */

.field-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.field-row:last-child {
  border-bottom: none;
}

.field-row__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.field-row__value {
  font-size: var(--text-sm);
  color: var(--color-espresso);
  min-width: 0;
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  display: block;
}

/* ── Inline editable spans ───────────────────────────────────────────────── */

.editable {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-1);
  margin: -2px calc(-1 * var(--space-1));
  transition: background 0.1s;
  max-width: 100%;
  word-break: break-word;
}

.editable:hover,
.editable:focus-visible {
  background: var(--color-linen);
  outline: none;
}

.editable-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.editable-input--price {
  max-width: 7rem;
}

/* ── Small select variant ────────────────────────────────────────────────── */

.form-select--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  width: auto;
}

/* ── Toggle label (checkbox) ─────────────────────────────────────────────── */

.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.toggle-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-cta);
  cursor: pointer;
}

/* ── Section card (job history, etc.) ───────────────────────────────────── */

.section-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.section-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--color-linen);
  border-bottom: 1px solid var(--color-border);
}

.section-card__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ── Add job form ────────────────────────────────────────────────────────── */

.add-job-form {
  padding: var(--space-5);
  background: var(--color-off-white);
  border-bottom: 1px solid var(--color-border);
}

.add-job-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .add-job-form__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ── Status select (inside job table) ────────────────────────────────────── */

.status-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  line-height: 1.6;
  background-image: none;
  font-family: inherit;
}
.status-select[data-status="requested"] { background: rgba(201,114,20,0.15); color: var(--color-cta); }
.status-select[data-status="scheduled"] { background: rgba(59,130,246,0.15); color: #60a5fa; }
.status-select[data-status="complete"]  { background: rgba(34,197,94,0.15);  color: #4ade80; }
.status-select[data-status="cancelled"] { background: var(--bg-elevated); color: var(--text-tertiary); }
.status-select option { background: var(--bg-elevated); color: var(--text-primary); }

/* ── Price editable span (in job table) ──────────────────────────────────── */

.price-editable {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-1);
  margin: -2px calc(-1 * var(--space-1));
  transition: background 0.1s;
}

.price-editable:hover,
.price-editable:focus-visible {
  background: var(--color-linen);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 4 — Reminders
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overdue row highlight ───────────────────────────────────────────────── */

.row--overdue td {
  background-color: rgba(184, 98, 10, 0.05);
}

/* ── Days-out muted text ─────────────────────────────────────────────────── */

.days-out {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── Reminder action buttons (tight group) ───────────────────────────────── */

.reminder-actions {
  white-space: nowrap;
}

.reminder-actions .btn + .btn {
  margin-left: var(--space-2);
}

/* ── Badge variants ──────────────────────────────────────────────────────── */

/* badge--muted: snoozed status */
.badge--muted {
  background: var(--color-border);
  color: var(--color-text-muted);
}

/* ── Add reminder form ───────────────────────────────────────────────────── */

.add-reminder-form {
  background: var(--color-linen);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.add-reminder-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .add-reminder-form__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Customer search typeahead ───────────────────────────────────────────── */

.customer-search-wrap {
  position: relative;
}

.customer-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 14rem;
  overflow-y: auto;
}

.customer-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.4;
}

.customer-result:last-child {
  border-bottom: none;
}

.customer-result:hover,
.customer-result:focus-visible {
  background: var(--color-linen);
  outline: none;
}

.customer-result__detail {
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

.search-no-results {
  padding: var(--space-3) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Session 5 — Lifecycle system ─────────────────────────────────────────── */

/* Profile header top row — name + badge/convert side by side */
.profile-header__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Lifecycle badge */
.lifecycle-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.inactive-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  margin-top: 4px;
}

.lifecycle-badge--lead {
  background: var(--color-cta);
  color: var(--color-white);
}

.lifecycle-badge--customer {
  background: var(--color-success);
  color: var(--color-white);
}

/* Small inline badge in customer list table */
.data-table__cell--name .lifecycle-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* Lifecycle filter buttons (customers list page) */
.lifecycle-filter {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.lifecycle-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}

.lifecycle-btn:hover,
.lifecycle-btn:focus-visible {
  border-color: var(--color-cta);
  color: var(--color-cta);
  outline: none;
}

.lifecycle-btn--active {
  background: var(--color-espresso);
  border-color: var(--color-espresso);
  color: var(--color-white);
}

.lifecycle-btn--active:hover,
.lifecycle-btn--active:focus-visible {
  background: var(--color-walnut);
  border-color: var(--color-walnut);
  color: var(--color-white);
}

/* Inquiries panel (profile page) */
.inquiries-list {
  padding: 0 var(--space-6) var(--space-4);
}

.inquiry-card {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.inquiry-card:last-child {
  border-bottom: none;
}

.inquiry-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.inquiry-card__date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-espresso);
  white-space: nowrap;
}

.inquiry-card__detail {
  font-size: var(--text-sm);
  color: var(--color-espresso);
}

.inquiry-card__notes {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-style: italic;
}

/* Source tags (web form vs phone/walk-in) */
.inquiry-source-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: var(--space-2);
}
.inquiry-source-tag--web   { background: #fef3e8; color: var(--color-cta); }
.inquiry-source-tag--phone { background: var(--color-linen); color: var(--color-walnut); }

/* Labeled field rows inside a submission card */
.inquiry-card__fields {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.inquiry-field-row {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.inquiry-field-label {
  width: 110px;
  flex-shrink: 0;
  color: var(--color-walnut);
  font-weight: 500;
}
.inquiry-field-value {
  color: var(--color-espresso);
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 8 — SMS messaging
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Small form input variant ────────────────────────────────────────────── */

.form-input--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* ── Full-height two-panel SMS layout ────────────────────────────────────── */

.app-main--sms {
  display: flex;
  height: calc(100vh - var(--nav-height));
  overflow: hidden;
  padding: 0;          /* override default app-main padding */
}

/* ── SMS page container (‘sms-page’ class on <main>) ────────────────── */

.sms-page {
  display: flex;
  overflow: hidden;
  padding: 0;
  height: calc(100vh - 52px - var(--nav-height)); /* topbar + bottom-nav */
}

.sms-page > .content-shell {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Left sidebar ─────────────────────────────────────────────────────────── */

.sms-sidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sms-sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-linen);
  flex-shrink: 0;
}

.sms-sidebar__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-espresso);
}

.sms-sidebar__search {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  flex-shrink: 0;
}

.sms-conv-list {
  flex: 1;
  overflow-y: auto;
}

.sms-sidebar__loading,
.sms-sidebar__empty {
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Conversation row ────────────────────────────────────────────────────── */

.sms-conv-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  font-family: var(--font-body);
  cursor: pointer;
}

.sms-conv-row:hover,
.sms-conv-row:focus-visible {
  background: var(--color-linen);
  outline: none;
}

.sms-conv-row--active {
  background: var(--color-linen);
  border-left-color: var(--color-cta);
}

.sms-conv-row__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-espresso);
  margin-bottom: 2px;
}

.sms-conv-row__preview {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Right thread panel ──────────────────────────────────────────────────── */

.sms-thread-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-off-white);
}

/* Mobile: swap sidebar ↔ thread panel via class on the layout root */
.sms-page.thread-open .sms-sidebar {
  display: none;
}

.sms-page.thread-open .sms-thread-panel {
  display: flex;
}

/* Desktop: always show both panels */
@media (min-width: 48rem) {
  .sms-sidebar {
    width: 18rem;
  }

  .sms-thread-panel {
    display: flex;
  }

  .sms-page.thread-open .sms-sidebar {
    display: flex;
  }
}

/* ── Thread empty state ──────────────────────────────────────────────────── */

.sms-thread__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

.sms-thread__empty-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 22rem;
}

/* ── Active thread wrapper ───────────────────────────────────────────────── */

.sms-thread__active {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Thread header ───────────────────────────────────────────────────────── */

.sms-thread__header {
  padding: var(--space-3) var(--space-5);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sms-back-btn {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
}

@media (min-width: 48rem) {
  .sms-back-btn {
    display: none;
  }
}

.sms-thread__customer-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-espresso);
}

.sms-thread__customer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: 2px;
  flex-wrap: wrap;
}

.sms-thread__phone,
.sms-thread__profile-link {
  font-size: var(--text-sm);
  color: var(--color-cta);
  text-decoration: none;
}

.sms-thread__phone:hover,
.sms-thread__profile-link:hover {
  text-decoration: underline;
}

.sms-thread__no-phone {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Message bubbles ─────────────────────────────────────────────────────── */

.sms-thread__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sms-thread__loading,
.sms-thread__no-messages {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  align-self: center;
  margin-top: var(--space-6);
}

.sms-bubble {
  max-width: 72%;
  display: flex;
  flex-direction: column;
}

.sms-bubble--outbound {
  align-self: flex-end;
  align-items: flex-end;
  margin-left: auto;
}

.sms-bubble--inbound {
  align-self: flex-start;
  align-items: flex-start;
}

.sms-bubble__body {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.sms-bubble--outbound .sms-bubble__body {
  background: var(--color-cta);
  color: var(--color-white);
  border-bottom-right-radius: var(--radius-sm);
}

.sms-bubble--inbound .sms-bubble__body {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-espresso);
  border-bottom-left-radius: var(--radius-sm);
}

.sms-bubble__time {
  margin-top: var(--space-1);
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

/* ── Compose area ────────────────────────────────────────────────────────── */

.sms-compose {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sms-compose__input {
  flex: 1;
  resize: none;
  min-height: 2.75rem;
  max-height: 8rem;
  margin: 0;
}

.sms-compose__send {
  flex-shrink: 0;
  align-self: flex-end;
}
/* ── Profile SMS card ──────────────────────────────────────────────────────── */

.profile-sms-thread {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.profile-sms-compose {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.profile-sms-compose-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.profile-sms-error {
  font-size: var(--text-sm);
  color: #c0392b;
}

/* ── SMS Inbox (conversation list) ────────────────────────────────────── */

.sms-inbox { padding: var(--space-2) 0; }

.sms-inbox-empty {
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.sms-inbox-row {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-sand);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.1s;
}

.sms-inbox-row:hover,
.sms-inbox-row:focus-visible {
  background: var(--color-linen);
  outline: none;
}

.sms-inbox-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sms-inbox-row__name {
  font-weight: 700;
  color: var(--color-espresso);
  font-size: var(--text-sm);
}

.sms-inbox-row__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: var(--space-3);
}

.sms-inbox-row__preview {
  font-size: var(--text-xs);
  color: var(--color-walnut);
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 7 — Dashboard stats + Quick-add customer form
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Quick-add form wrapper ──────────────────────────────────────────────── */

.quick-add-wrap {
  max-width: 36rem;
}

.quick-add-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* ── Two-column form row (name fields side by side on wider screens) ─────── */

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-4);
}

@media (min-width: 48rem) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Address field: editable text + Maps link ────────────────────────────── */

.address-field-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.address-maps-link {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-cta);
  text-decoration: none;
  white-space: nowrap;
}

.address-maps-link:hover {
  color: var(--color-cta-hover);
  text-decoration: underline;
}

/* ── Form label optional hint ────────────────────────────────────────────── */

.form-label__optional {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ── Job table: Actions column ───────────────────────────────────────────── */

.col-actions {
  width: 4rem;
  text-align: right;
  white-space: nowrap;
}

/* ── Inline job edit row ─────────────────────────────────────────────────── */

.job-edit-row td {
  padding: 0;
  border-bottom: 2px solid var(--color-cta);
}

.job-edit-cell {
  padding: 0 !important;
}

.job-edit-form {
  padding: var(--space-5);
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border);
}

/* 2-col on mobile, 5-col on ≥768px */
.job-edit-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .job-edit-form__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 10 — Delete job + SMS unread badge
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SMS nav badge ───────────────────────────────────────────────────────── */

.sms-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  margin-left: 0.3rem;
  background: var(--color-cta);
  color: var(--color-white);
  border-radius: 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  pointer-events: none; /* let clicks fall through to the nav link */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 6 — Dashboard 4-zone layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Today's Run + Coming Up side-by-side grid ─────────────────────── */

.dash-top-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .dash-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  /* Zones inside the grid have no bottom margin — the grid gap handles spacing */
  .dash-top-grid .dash-zone {
    margin-bottom: 0;
  }
}

/* Wrapper itself needs bottom margin matching the zone spacing */
.dash-top-grid {
  margin-bottom: var(--space-6);
}

/* Date label in Coming Up rows */
.dash-job__date {
  font-weight: 600;
  color: var(--color-walnut);
}

/* ── Dashboard zone wrapper ──────────────────────────────────────────────── */

.dash-zone {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.dash-zone__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-off-white);
}

.dash-zone__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-espresso);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* Numeric count bubble next to zone title */
.dash-zone__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.35rem;
  background: var(--color-cta);
  color: var(--color-white);
  border-radius: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

.dash-zone__body {
  padding: var(--space-2) 0;
}

/* ── Today's Run job rows ─────────────────────────────────────────────────── */

.dash-job-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.dash-job-row:last-child {
  border-bottom: none;
}

.dash-job-row:hover,
.dash-job-row:focus-visible {
  background: var(--color-linen);
  outline: none;
}

.dash-job__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.dash-job__name {
  font-weight: 600;
  color: var(--color-espresso);
  font-size: var(--text-base);
}

.dash-job__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dash-job__area {
  font-weight: 500;
  color: var(--color-walnut);
}

/* Google Maps link in Today's Run address */
.dash-maps-link {
  color: var(--color-walnut);
  text-decoration: none;
  font-weight: 500;
}

.dash-maps-link:hover {
  text-decoration: underline;
  color: var(--color-espresso);
}

.dash-job__time {
  font-weight: 500;
}

.dash-job__items {
  font-weight: 500;
}

/* ── Status badge (used in Zone 1 and elsewhere) ─────────────────────────── */

.dash-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

.dash-status--scheduled {
  background: #dbeafe;
  color: #1e40af;
}

.dash-status--requested {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.dash-status--complete {
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* ── Phone link (tap-to-call) ────────────────────────────────────────────── */

.dash-phone {
  color: var(--color-cta);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.dash-phone:hover {
  color: var(--color-cta-hover);
  text-decoration: underline;
}

/* ── Zone 2: Needs Attention two-column grid ─────────────────────────────── */

.dash-attention-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .dash-attention-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dash-attention-grid .dash-panel:first-child {
    border-right: 1px solid var(--color-border);
  }
}

/* ── Panel (sub-section within Zone 2) ──────────────────────────────────── */

.dash-panel + .dash-panel {
  border-top: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
  .dash-panel + .dash-panel {
    border-top: none;
  }
}

.dash-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-off-white);
}

/* Count bubble inside panel titles */
.dash-panel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  background: var(--color-cta);
  color: var(--color-white);
  border-radius: 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.dash-panel__body {
  padding: var(--space-2) 0;
}

/* ── Generic item row (Zones 2 & 3) ─────────────────────────────────────── */

.dash-item-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.dash-item-row:last-child {
  border-bottom: none;
}

.dash-item-row:hover,
.dash-item-row:focus-visible {
  background: var(--color-linen);
  outline: none;
}

.dash-item__name {
  font-weight: 600;
  color: var(--color-espresso);
  font-size: var(--text-base);
}

.dash-item__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.dash-item__preview {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-item__age {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ── Overdue tag ─────────────────────────────────────────────────────────── */

.dash-overdue-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.dash-empty {
  padding: var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ── Zone 4: CTA zone ────────────────────────────────────────────────────── */

.dash-zone--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border: 2px solid var(--color-cta);
  background: var(--color-off-white);
}

.dash-cta-btn {
  display: inline-block;
  padding: var(--space-4) var(--space-10);
  background: var(--color-cta);
  color: var(--color-white);
  font-size: var(--text-xl);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 24rem;
}

.dash-cta-btn:hover,
.dash-cta-btn:focus-visible {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  outline: none;
}

@media (min-width: 48rem) {
  .dash-cta-btn {
    font-size: var(--text-2xl);
  }
}

/* ── Zone 4 secondary badges ─────────────────────────────────────────────── */

.dash-cta-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.dash-mini-badge {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #f5c56a;
}

.dash-mini-badge:hover {
  filter: brightness(0.95);
  text-decoration: underline;
}

.dash-mini-badge--neutral {
  background: var(--color-linen);
  color: var(--color-walnut);
  border-color: var(--color-border);
  cursor: default;
}

.dash-mini-badge--neutral:hover {
  filter: none;
  text-decoration: none;
}

/* Reminders-due badge lives in the zone header — push it to the far right */
.dash-zone__header .dash-mini-badge {
  margin-left: auto;
}

/* ── Session 9: Notes expand modal ───────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 35, 19, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 500;
}

.modal {
  background: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--color-linen);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  flex-shrink: 0;
}

.modal__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm, 0.25rem);
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.modal__close:hover {
  background: var(--color-border);
  color: var(--color-espresso);
}

.modal__body {
  padding: var(--space-5);
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Large textarea only in the notes expand modal */
#notes-modal .form-textarea {
  flex: 1;
  min-height: 22rem;
}

/* Customer name subtitle inside Log Contact modal */
.modal__customer-name {
  margin: 0;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-espresso);
}

/* Date input in modals — constrain width */
.form-input--date {
  max-width: 12rem;
}

.modal__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-off-white);
  border-radius: 0 0 var(--radius) var(--radius);
  flex-shrink: 0;
}

/* ── Reminder inline reschedule form (inside actions cell) ────────────────── */

.reminder-action-btns,
.reminder-reschedule-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Compact date input inside the reschedule inline form */
.reschedule-date-input {
  width: auto;
  max-width: 9.5rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* ── Profile page — Scheduled Reminders panel ─────────────────────────────── */

/* One reminder entry inside the info-card__body */
.profile-reminder-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.profile-reminder-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profile-reminder-row:first-child {
  padding-top: 0;
}

/* Date + badge(s) + channel — left info cluster */
.profile-reminder-row__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.profile-reminder-row__date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-espresso);
}

.profile-reminder-row__channel {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: auto; /* push to right on same line */
}

/* Action button cluster */
.profile-reminder-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Add reminder inline form — 2-col grid */
.profile-add-reminder-form {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.profile-add-reminder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

/* ── Job photo panel (Session 11) ────────────────────────────────────────── */

.job-photos-cell {
  padding: var(--space-4);
  background: var(--color-linen);
  border-bottom: 2px solid var(--color-border);
}

.photo-panel__header {
  margin-bottom: var(--space-3);
}

.photo-panel__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-espresso);
}

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.photo-thumb {
  position: relative;
  width: 120px;
  flex-shrink: 0;
}

.photo-thumb img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.photo-thumb img:hover {
  border-color: var(--color-walnut);
}

.photo-thumb__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-1);
  min-height: 1.2em;
}

.photo-thumb__delete {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.photo-thumb:hover .photo-thumb__delete,
.photo-thumb:focus-within .photo-thumb__delete {
  opacity: 1;
}

.photo-upload-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.photo-file-input {
  /* Visually hidden — triggered via the <label> */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.photo-upload-status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-select--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  height: auto;
}

/* UI/UX OVERHAUL */
.card { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; }

.status-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: var(--chip-radius); border: 0.5px solid; }
.chip-requested { background: var(--status-requested-bg); color: var(--status-requested-text); border-color: var(--status-requested-border); }
.chip-scheduled { background: var(--status-scheduled-bg); color: var(--status-scheduled-text); border-color: var(--status-scheduled-border); }
.chip-complete  { background: var(--status-complete-bg);  color: var(--status-complete-text);  border-color: var(--status-complete-border); }
.chip-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-text); border-color: var(--status-cancelled-border); }

.icon-btn { width: 34px; height: 34px; border-radius: 8px; background: #f5f5f3; border: 0.5px solid rgba(0,0,0,0.1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; text-decoration: none; flex-shrink: 0; }
.icon-btn svg { width: 15px; height: 15px; stroke: #666; stroke-width: 1.8; fill: none; }
.icon-btn:hover { background: #ebe8e3; }
.icon-btn--primary { background: #fff5ed; border-color: #f5c8a0; }
.icon-btn--primary svg { stroke: var(--color-cta); }
.icon-btn--primary:hover { background: #fde8d0; }
.icon-btn--danger { background: #fff0f0; border-color: #ffc0c0; }
.icon-btn--danger svg { stroke: #c0392b; }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 2px; }
.section-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #666; }
.section-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.section-count { background: var(--color-cta); color: #fff; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 99px; line-height: 1.6; }
.section-count--quiet { background: #f0ede8; color: #888; border: 0.5px solid #ddd; }
.section-link { font-size: 12px; color: var(--color-cta); text-decoration: none; }
.section { margin-bottom: 16px; }

.topbar { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 0.5px solid rgba(0,0,0,0.08); padding: 0 16px; height: 52px; display: flex; align-items: center; }
.topbar-logo { font-size: 15px; font-weight: 500; color: var(--color-espresso); }
.topbar-logo span { color: var(--color-cta); }
.topbar-actions { display: flex; align-items: center; gap: 8px; position: relative; }
.notif-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--color-cta); border-radius: 50%; border: 1.5px solid #fff; }

.page-content { padding: 12px 12px 80px; }
.date-banner { font-size: 13px; color: #888; padding: 4px 2px 10px; }
.date-banner strong { color: #333; font-weight: 500; }

.fab { position: fixed; bottom: 84px; right: max(16px, calc(50% - 344px)); width: 52px; height: 52px; border-radius: 50%; background: var(--color-cta); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(184,98,10,0.35); z-index: 50; text-decoration: none; }
.fab svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; fill: none; }
.fab:hover { background: var(--color-cta-hover); }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 0.5px solid rgba(0,0,0,0.08); z-index: 100; padding-bottom: env(safe-area-inset-bottom); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 0 12px; gap: 3px; text-decoration: none; color: #888; font-size: 10px; position: relative; }
.nav-item svg { width: 20px; height: 20px; stroke: #999; stroke-width: 1.8; fill: none; }
.nav-item.active { color: var(--color-cta); }
.nav-item.active svg { stroke: var(--color-cta); }
.nav-badge { position: absolute; top: 6px; right: calc(50% - 14px); width: 8px; height: 8px; background: var(--color-cta); border-radius: 50%; border: 1.5px solid #fff; }
/* ── Content shell ─────────────────────────────────────────────────────────── */
.content-shell { max-width: 960px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.topbar > .content-shell { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.bottom-nav > .content-shell { display: flex; }

.job-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.06); cursor: pointer; }
.job-row:last-child { border-bottom: none; }
.customer-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-linen); color: var(--color-walnut); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; flex-shrink: 0; }
.job-info { flex: 1; min-width: 0; }
.job-name { font-size: 14px; font-weight: 500; color: #222; }
.job-meta { font-size: 12px; color: #888; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-chips { margin-top: 5px; }
.job-actions { display: flex; gap: 6px; flex-shrink: 0; }

.attn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.attn-card { background: #fff; border: 0.5px solid rgba(0,0,0,0.08); border-radius: var(--card-radius); padding: 12px; box-shadow: var(--card-shadow); }
.attn-card-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 10px; }
.attn-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid rgba(0,0,0,0.05); text-decoration: none; color: inherit; }
.attn-item:last-child { border-bottom: none; padding-bottom: 0; }
.attn-name { font-size: 13px; font-weight: 500; color: #222; }
.attn-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-amber { background: #ef9f27; }
.dot-blue  { background: #378add; }
.attn-empty { font-size: 12px; color: #bbb; padding: 4px 0; }

.overdue-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.06); text-decoration: none; color: inherit; }
.overdue-row:last-child { border-bottom: none; }
.overdue-bar { width: 3px; height: 36px; border-radius: 2px; flex-shrink: 0; }
.bar-red   { background: #e24b4a; }
.bar-amber { background: #ef9f27; }
.overdue-info { flex: 1; min-width: 0; }
.overdue-name { font-size: 14px; font-weight: 500; color: #222; }
.overdue-sub  { font-size: 12px; color: #888; margin-top: 2px; }
.overdue-tag  { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 99px; flex-shrink: 0; }
.tag-red   { background: #fff0f0; color: #a32d2d; border: 0.5px solid #f7c1c1; }
.tag-amber { background: #faeeda; color: #854f0b; border: 0.5px solid #fac775; }

.all-clear-icon { width: 52px; height: 52px; background: #fff5ed; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.all-clear-icon svg { width: 24px; height: 24px; stroke: var(--color-cta); fill: none; }

.empty-state { padding: 32px 20px; text-align: center; color: #aaa; }
.empty-icon { width: 32px; height: 32px; opacity: 0.4; margin: 0 auto 10px; display: block; }
.empty-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; }
.empty-state p { font-size: 13px; margin: 0; }

.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.skeleton-row:last-child { border-bottom: none; }
.skel { background: linear-gradient(90deg, #f0ede8 25%, #e8e4df 50%, #f0ede8 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; }
.skel-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skel-line { height: 12px; }
.skel-line--wide { width: 65%; }
.skel-line--narrow { width: 40%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.search-wrap { position: relative; margin-bottom: 12px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: #aaa; pointer-events: none; fill: none; }
.search-input-new { width: 100%; padding: 10px 12px 10px 38px; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; box-shadow: var(--card-shadow); }
.search-input-new:focus { outline: none; border-color: var(--color-cta); }

.customer-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.06); text-decoration: none; color: inherit; }
.customer-row:last-child { border-bottom: none; }
.customer-row:active { background: #faf8f5; }
.customer-info { flex: 1; min-width: 0; }
.customer-name { font-size: 14px; font-weight: 500; color: #222; }
.customer-meta { font-size: 12px; color: #888; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.profile-header-card { padding: 16px; margin-bottom: 12px; }
.profile-avatar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.profile-avatar-lg { width: 48px; height: 48px; border-radius: 50%; background: var(--color-linen); color: var(--color-walnut); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; flex-shrink: 0; }
.profile-name-block { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.profile-name-lg { font-size: 18px; font-weight: 500; margin: 0; }
.lifecycle-chip { display: inline-flex; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 99px; background: #eaf3de; color: #3b6d11; border: 0.5px solid #c0dd97; width: fit-content; }
.lifecycle-chip--lead { background: #fef3e2; color: #8a5010; border-color: #f8d7a0; }
.profile-contact-grid { display: flex; flex-direction: column; gap: 8px; }
.contact-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.contact-row svg { width: 14px; height: 14px; stroke: #aaa; fill: none; flex-shrink: 0; }
.contact-row a { color: var(--color-cta); text-decoration: none; }

.job-entry { padding: 12px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.job-entry:last-child { border-bottom: none; }
.job-entry-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.job-entry-date { font-size: 13px; font-weight: 500; color: #222; }
.job-entry-detail { font-size: 12px; color: #888; margin-top: 2px; }
.job-entry-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.job-entry-meta { font-size: 12px; color: #999; margin-top: 6px; }
.job-entry-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.job-entry-notes { font-style: italic; }

/* Inline edit/photos panels that insert after a .job-entry */
.job-edit-entry { background: #faf8f5; border-bottom: 0.5px solid rgba(0,0,0,0.06); padding: 12px 14px; }
.job-edit-entry:last-child { border-bottom: none; }
.job-photos-entry { background: #faf8f5; border-bottom: 0.5px solid rgba(0,0,0,0.06); padding: 12px 14px; }
.job-photos-entry:last-child { border-bottom: none; }

.btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--color-cta); color: #fff; border: none; padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.btn-primary:hover { background: var(--color-cta-hover); }
.btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #333; border: 0.5px solid rgba(0,0,0,0.15); padding: 9px 16px; border-radius: 9px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s; }
.btn-secondary:hover { background: #f5f5f3; }
.btn-danger { background: #fff0f0; color: #c0392b; border-color: #ffc0c0; }
.btn-danger:hover { background: #ffe0e0; }

.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #888; text-decoration: none; padding: 8px 2px; }
.back-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.back-link:hover { color: var(--color-cta); }

.profile-page-content { padding: 0 12px 80px; }


/* ============================================================
   Dark Mode Overrides (always-on — dark is the permanent default)
   ============================================================ */

/* ── Base & structure ─────────────────────────────────────────────────────── */
body {
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: var(--bg-base);
  border-bottom: 0.5px solid var(--border-subtle);
}

.topbar-logo {
  color: #c8b8a2;
}

.topbar-logo img {
  height: 22px;
  width: auto;
  display: block;
}

.topbar-logo .crm-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 0.04em;
  align-self: flex-end;
  margin-bottom: 1px;
}

.topbar-logo {
  display: flex;
  align-items: center;
}

.bottom-nav {
  background: var(--bg-card);
  border-top: 0.5px solid var(--border-subtle);
}

.nav-item {
  color: var(--text-tertiary);
}

.nav-item svg {
  stroke: var(--text-tertiary);
}

.nav-item.active {
  color: var(--color-cta);
}

.nav-item.active svg {
  stroke: var(--color-cta);
}

.page-content {
  background: var(--bg-base);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
}

.section-title { color: var(--text-secondary); }
.section-icon  { stroke: var(--text-tertiary); }

.section-count--quiet {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  border: 0.5px solid var(--border-subtle);
}

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.customer-avatar,
.cust-avatar,
.profile-avatar-lg {
  background: #2e2318;
  border: 0.5px solid #4a3520;
  color: #c2a882;
}

/* ── Icon buttons ─────────────────────────────────────────────────────────── */
.icon-btn {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-med);
  color: var(--text-secondary);
}

.icon-btn svg { stroke: var(--text-secondary); }

.icon-btn--primary {
  background: #3a2410;
  border-color: #6a3e18;
}

.icon-btn--primary svg { stroke: var(--color-cta); }

/* ── Topbar bell badge ────────────────────────────────────────────────────── */
.topbar-badge {
  position: absolute;
  top: 1px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-cta);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1.5px solid var(--bg-base);
  pointer-events: none;
}

.topbar-actions { position: relative; }

/* ── Search ───────────────────────────────────────────────────────────────── */
.search-input,
.search-input-new {
  background: var(--bg-input);
  border: 0.5px solid var(--border-med);
  color: var(--text-primary);
}

.search-input::placeholder,
.search-input-new::placeholder {
  color: var(--text-tertiary);
}

.search-input:focus,
.search-input-new:focus {
  border-color: var(--color-cta);
  outline: none;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state { color: var(--text-tertiary); }
.empty-state p { color: var(--text-tertiary); }

/* ── Customer rows ────────────────────────────────────────────────────────── */
.customer-row { color: var(--text-primary); }
.customer-row:active { background: var(--bg-elevated); }
.customer-name { color: var(--text-primary); }
.customer-meta { color: var(--text-secondary); }

/* ── Dashboard: Needs Attention ───────────────────────────────────────────── */
.attn-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border-subtle);
}

.attn-card-label { color: var(--text-tertiary); }
.attn-name { color: var(--text-primary); }
.attn-sub { color: var(--text-tertiary); }
.attn-empty { color: var(--text-tertiary); }
.attn-dot.dot-amber { background: #c9914a; }
.attn-dot.dot-blue  { background: #4a8fcc; }

/* ── Overdue tags ─────────────────────────────────────────────────────────── */
.tag-red   { background: var(--tag-red-bg);   color: var(--tag-red-text);   border: 0.5px solid var(--tag-red-border); }
.tag-amber { background: var(--tag-amber-bg); color: var(--tag-amber-text); border: 0.5px solid var(--tag-amber-border); }
.overdue-bar.bar-red   { background: var(--urgency-high); }
.overdue-bar.bar-amber { background: var(--urgency-med); }
.overdue-name { color: var(--text-primary); }
.overdue-sub  { color: var(--text-secondary); }

/* ── Job / overdue rows ───────────────────────────────────────────────────── */
.job-row { color: var(--text-primary); }
.job-name { color: var(--text-primary); }
.job-meta { color: var(--text-secondary); }
.overdue-row { color: var(--text-primary); }

/* ── All-clear card ───────────────────────────────────────────────────────── */
.all-clear-icon {
  background: #2a1e0c;
  border: 0.5px solid #5a3e18;
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
.skel {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    #3a3228 50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ── FAB glow ─────────────────────────────────────────────────────────────── */
.fab {
  box-shadow: 0 4px 16px var(--color-cta-glow), 0 2px 6px rgba(0,0,0,0.5);
}

/* ── Profile page ─────────────────────────────────────────────────────────── */
.profile-header-card { background: var(--bg-card); }
.profile-name-lg { color: var(--text-primary); }

.info-card__title { color: var(--text-secondary); }
.info-card__subheader { border-bottom-color: var(--border-subtle); }

.field-row { border-bottom-color: var(--border-subtle); }
.field-row__label { color: var(--text-tertiary); }
.field-row__value { color: var(--text-primary); }
.editable { color: var(--text-primary); }
.field-hint { color: var(--text-tertiary); }

/* ── Job entries ──────────────────────────────────────────────────────────── */
.job-entry { border-bottom-color: var(--border-subtle); }
.job-entry-date { color: var(--text-primary); }
.job-entry-detail { color: var(--text-secondary); }
.job-entry-meta { color: var(--text-secondary); }

.job-edit-entry {
  background: var(--bg-elevated);
  border-bottom: 0.5px solid var(--border-subtle);
}

.job-photos-entry {
  background: var(--bg-elevated);
  border-bottom: 0.5px solid var(--border-subtle);
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  background: var(--bg-input);
  border-color: var(--border-med);
  color: var(--text-primary);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-cta);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-tertiary);
}

.form-label { color: var(--text-secondary); }
.form-label__optional { color: var(--text-tertiary); }

/* ── Modals ───────────────────────────────────────────────────────────────── */
.modal-overlay { background: rgba(0,0,0,0.6); }
.modal {
  background: var(--bg-card);
  border: 0.5px solid var(--border-med);
}
.modal__header { border-bottom-color: var(--border-subtle); }
.modal__title { color: var(--text-primary); }
.modal__close { color: var(--text-tertiary); }
.modal__footer { border-top-color: var(--border-subtle); }

/* ── Date banner ──────────────────────────────────────────────────────────── */
.date-banner { color: var(--text-secondary); }
.date-banner strong { color: var(--text-primary); }

/* ── SMS page ─────────────────────────────────────────────────────────────── */
.sms-sidebar {
  background: var(--bg-card);
  border-right-color: var(--border-subtle);
}
.sms-sidebar__title { color: var(--text-primary); }
.sms-sidebar__loading,
.sms-sidebar__empty { color: var(--text-tertiary); }
.sms-conv-row { color: var(--text-primary); border-bottom-color: var(--border-subtle); }
.sms-conv-row:hover { background: var(--bg-elevated); }
.sms-conv-row--active { background: var(--bg-elevated); }
.sms-conv-row__name { color: var(--text-primary); }
.sms-conv-row__preview { color: var(--text-tertiary); }

.sms-thread-panel { background: var(--bg-base); }
.sms-thread__header { background: var(--bg-card); border-bottom-color: var(--border-subtle); }
.sms-thread__customer-name { color: var(--text-primary); }
.sms-thread__phone,
.sms-thread__profile-link { color: var(--color-cta); }
#profile-sms-thread .sms-bubble--outbound .sms-bubble__body { background: #c97214; color: #fff; }
#profile-sms-thread .sms-bubble--inbound  .sms-bubble__body { background: #ede8e0; color: #3c2313; }
.sms-bubble__time { color: var(--text-tertiary); }
.sms-compose { background: var(--bg-card); border-top-color: var(--border-subtle); }
.profile-sms-compose { background: var(--bg-card); border-top-color: var(--border-subtle); }
.sms-inbox-row { border-bottom-color: var(--border-subtle); }
.sms-inbox-row:hover { background: var(--bg-elevated); }
.sms-inbox-row__name { color: var(--text-primary); }
.sms-inbox-row__preview { color: var(--text-secondary); }
.sms-inbox-row__time { color: var(--text-tertiary); }

/* ── Reminders page ───────────────────────────────────────────────────────── */
.reminder-row { border-bottom-color: var(--border-subtle); color: var(--text-primary); }
.reminder-customer { color: var(--text-primary); }
.reminder-due { color: var(--text-secondary); }
.reminder-channel-badge { background: var(--bg-elevated); color: var(--text-secondary); }

/* ── Lifecycle badge ──────────────────────────────────────────────────────── */
.lifecycle-badge--lead {
  background: var(--status-requested-bg);
  color: var(--status-requested-text);
  border-color: var(--status-requested-border);
}

/* ── Section link ─────────────────────────────────────────────────────────── */
.section-link { color: var(--color-cta); }

/* ── Address maps link ────────────────────────────────────────────────────── */
.address-maps-link { color: var(--color-cta); }

/* ── Toggle label ─────────────────────────────────────────────────────────── */
.toggle-label { color: var(--text-primary); }

/* ── Flash messages ───────────────────────────────────────────────────────── */
.flash--success { background: var(--color-success-bg); color: var(--color-success); }
.flash--error   { background: var(--color-error-bg);   color: var(--color-error); }

/* ── Quick add page ───────────────────────────────────────────────────────── */
.quick-add-form { background: var(--bg-card); }

/* ── Lifecycle filter buttons ─────────────────────────────────────────────── */
.lifecycle-btn {
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-subtle);
  color: var(--text-secondary);
}

.lifecycle-btn--active {
  background: var(--color-cta);
  color: #fff;
  border-color: var(--color-cta);
}

/* ── Page meta ────────────────────────────────────────────────────────────── */
.page-meta { color: var(--text-tertiary); }

/* ── Back link ────────────────────────────────────────────────────────────── */
.back-link { color: var(--text-secondary); }
.back-link svg { stroke: var(--text-secondary); }

/* ── sms-badge (nav) ──────────────────────────────────────────────────────── */
.sms-badge { border-color: var(--bg-card); }

/* ============================================================
   Desktop Layout  (>= 768px) -- Profile 2-column grid
   ============================================================ */

@media (min-width: 768px) {

  /* Profile: 2-column layout */
  .profile-desktop-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items: start;
  }

  .profile-desktop-sidebar {
    position: sticky;
    top: 68px;  /* topbar height + gap */
  }

  .profile-desktop-main {
    min-width: 0;
  }
}

/* ============================================================
   Dark Mode — Additional Overrides (Session 13)
   ============================================================ */

/* Ghost buttons: dark brown text -> readable secondary */
.btn--ghost {
  color: var(--text-secondary);
  border-color: var(--border-med);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* Log Contact modal header: linen bg -> card bg */
.modal__header {
  background: var(--bg-elevated);
}

/* Modal customer name: dark espresso -> readable primary */
.modal__customer-name {
  color: var(--text-primary);
}

/* Profile reminder row dates: dark espresso -> secondary */
.profile-reminder-row__date {
  color: var(--text-secondary);
}

/* SMS sidebar top (Messages header bar): linen bg -> elevated bg */
.sms-sidebar__top {
  background: var(--bg-elevated);
}

  .inquiry-card__date,
  .inquiry-card__detail,
  .inquiry-card__notes,
  .inquiry-field-value { color: var(--color-espresso); }
  .inquiry-field-label { color: var(--color-walnut); }
  .inquiry-source-tag--web   { background: #fef3e8; color: var(--color-cta); }
  .inquiry-source-tag--phone { background: var(--color-linen); color: var(--color-walnut); }

/* ============================================================
   Topbar Nav (desktop only)
   ============================================================ */

/* Hidden on mobile — revealed by the desktop media query below */
.topbar-nav {
  display: none;
}

/* ============================================================
   Desktop Layout — Nav in Topbar  (>= 768px)
   ============================================================ */

@media (min-width: 768px) {

  /* Show nav links in topbar */
  .topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  /* Horizontal pill-style nav items */
  .topbar-nav .nav-item {
    flex-direction: row;
    flex: none;
    padding: 6px 10px;
    font-size: 13px;
    gap: 5px;
    border-radius: 6px;
    color: var(--text-tertiary);
  }
  .topbar-nav .nav-item svg {
    width: 15px;
    height: 15px;
    stroke: var(--text-secondary);
  }
  .topbar-nav .nav-item.active {
    color: var(--color-cta);
    background: rgba(201, 114, 20, 0.1);
  }
  .topbar-nav .nav-item.active svg { stroke: var(--color-cta); }
  .topbar-nav .nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
  .topbar-nav .nav-item:hover svg { stroke: var(--text-primary); }

  /* Hide bottom nav on desktop */
  .bottom-nav { display: none; }

  /* Remove extra bottom padding (was clearance for fixed bottom nav) */
  .page-content { padding-bottom: 24px; }

  /* SMS page height: bottom nav gone, so recalc without nav-height */
  .sms-page { height: calc(100vh - 52px); }

  /* FAB — no longer needs to clear bottom nav */
  .fab { bottom: 24px; right: max(24px, calc(50% - 480px)); }
}