/* =========================================================
   Forge CRM — Stylesheet
   Brand primary: #e67e22 (dark blue)
   ========================================================= */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:        #e67e22;
  --primary-light:  #2a4f8a;
  --primary-hover:  #142b4d;
  --bg:             #f5f6f8;
  --surface:        #ffffff;
  --border:         #e2e6ea;
  --text:           #1a202c;
  --text-muted:     #6b7280;
  --text-light:     #9ca3af;
  --radius:         6px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08);
  --shadow:         0 2px 8px rgba(0,0,0,.12);

  /* Status colors */
  --s-lead:        #718096;
  --s-estimate:    #dd6b20;
  --s-scheduled:   #3182ce;
  --s-in-progress: #38a169;
  --s-complete:    #2c7a7b;
  --s-invoiced:    #805ad5;
  --s-cancelled:   #e53e3e;

  /* Status backgrounds (light) */
  --sb-lead:        #f0f0f0;
  --sb-estimate:    #feebc8;
  --sb-scheduled:   #ebf8ff;
  --sb-in-progress: #f0fff4;
  --sb-complete:    #e6fffa;
  --sb-invoiced:    #faf5ff;
  --sb-cancelled:   #fff5f5;

  /* Employee colors */
  --emp-0: #dd6b20;
  --emp-1: #744210;
  --emp-2: #276749;
  --emp-3: #234e52;
  --emp-4: #2b6cb0;
  --emp-5: #e67e22;
  --emp-6: #553c9a;
  --emp-7: #97266d;

  /* Engineering status colors */
  --eng-pending:  #a0aec0;
  --eng-drafted:  #ed8936;
  --eng-reviewed: #4299e1;
  --eng-stamped:  #48bb78;
}

html { font-size: 14px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* ---------- Top Bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--primary);
  color: #fff;
  padding: 0 20px;
  height: 56px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-mark {
  background: #fff;
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .5px;
  padding: 4px 7px;
  border-radius: 4px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-main {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
}

.logo-sub {
  font-size: 11px;
  opacity: .65;
  letter-spacing: .3px;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.nav-tab {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.7);
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all .15s;
  height: 36px;
}

.nav-tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-tab.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: .8;
  flex-shrink: 0;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #a0aec0;
  display: inline-block;
}

.status-dot.online  { background: #68d391; }
.status-dot.offline { background: #fc8181; }

/* ---------- Location Selector ---------- */
.location-selector {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 10px;
}

.location-icon {
  font-size: 13px;
  opacity: .85;
}

.location-select {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: var(--radius);
  padding: 4px 26px 4px 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,.7)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: background .15s, border-color .15s;
}

.location-select:hover,
.location-select:focus {
  background-color: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.6);
}

.location-select option {
  background: #333;
  color: #fff;
  font-weight: 500;
}

/* ---------- Location Badge ---------- */
.badge-location {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  background: #fef3e2;
  color: #924d0b;
  border: 1px solid #fdd0a2;
  white-space: nowrap;
}

/* Location switch section in customer detail */
.location-switch-section {
  margin-top: 20px;
  padding: 14px 16px;
  background: #fef9f0;
  border: 1px solid #fdd0a2;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.location-switch-section label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.location-switch-section select {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  outline: none;
  flex: 1;
  min-width: 120px;
}

.location-switch-section select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(230,126,34,.15);
}

/* ---------- Main Content ---------- */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

/* ---------- Tab Panels ---------- */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Section Header ---------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h1 {
  font-size: 20px;
  font-weight: 800;
  color: #1a202c;
}

/* ---------- Pipeline Cards ---------- */
.pipeline-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.pipeline-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--border);
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
}

.pipeline-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.pipeline-card.skeleton {
  height: 90px;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.pipeline-card[data-status="lead"]        { border-color: var(--s-lead); }
.pipeline-card[data-status="estimate"]    { border-color: var(--s-estimate); }
.pipeline-card[data-status="scheduled"]   { border-color: var(--s-scheduled); }
.pipeline-card[data-status="in_progress"] { border-color: var(--s-in-progress); }
.pipeline-card[data-status="complete"]    { border-color: var(--s-complete); }
.pipeline-card[data-status="invoiced"]    { border-color: var(--s-invoiced); }

.card-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.card-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.card-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- Summary Bar ---------- */
.summary-bar {
  display: flex;
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.summary-item {
  flex: 1;
  padding: 14px 20px;
  border-right: 1px solid var(--border);
}

.summary-item:last-child { border-right: none; }

.summary-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.summary-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.card-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: #1a202c;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  background: #f8f9fb;
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  cursor: pointer;
}

.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: #f8f9fb; }
.data-table tbody td { padding: 10px 14px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.loading-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 32px !important;
  font-style: italic;
}

/* ---------- Status Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.badge-lead        { background: var(--sb-lead);        color: var(--s-lead); }
.badge-estimate    { background: var(--sb-estimate);    color: var(--s-estimate); }
.badge-scheduled   { background: var(--sb-scheduled);   color: var(--s-scheduled); }
.badge-in_progress { background: var(--sb-in-progress); color: var(--s-in-progress); }
.badge-complete    { background: var(--sb-complete);    color: var(--s-complete); }
.badge-invoiced    { background: var(--sb-invoiced);    color: var(--s-invoiced); }
.badge-cancelled   { background: var(--sb-cancelled);   color: var(--s-cancelled); }

.badge-eng-pending  { background: #f0f0f0; color: var(--eng-pending); }
.badge-eng-drafted  { background: #feebc8; color: var(--eng-drafted); }
.badge-eng-reviewed { background: #ebf8ff; color: var(--eng-reviewed); }
.badge-eng-stamped  { background: #f0fff4; color: var(--eng-stamped); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }

.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }

.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.btn-danger { background: #e53e3e; color: #fff; }
.btn-danger:hover { background: #c53030; }

.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-icon {
  padding: 6px 10px;
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.btn-icon:hover { background: var(--bg); color: var(--text); }

.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 4px;
  font-weight: 600;
}

/* ---------- Search / Filter ---------- */
.search-bar-wrap { margin-bottom: 14px; }

.search-input {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color .15s;
}

.search-input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(42,79,138,.15); }

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.status-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.filter-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}

.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Action buttons in table ---------- */
.action-btns { display: flex; gap: 6px; align-items: center; }

.btn-reschedule { background: #ebf8ff; color: var(--s-scheduled); border: 1px solid #bee3f8; }
.btn-reschedule:hover { background: #bee3f8; }

.btn-reassign { background: #f0fff4; color: var(--s-in-progress); border: 1px solid #c6f6d5; }
.btn-reassign:hover { background: #c6f6d5; }

.btn-status { background: #faf5ff; color: var(--s-invoiced); border: 1px solid #e9d8fd; }
.btn-status:hover { background: #e9d8fd; }

/* =========================================================
   CALENDAR
   ========================================================= */

.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 16px;
  align-items: start;
}

.calendar-main {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Toolbar */
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

.cal-toolbar-left { display: flex; align-items: center; gap: 8px; }

.cal-date-range {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-left: 4px;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.view-btn {
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: all .15s;
}

.view-btn:last-child { border-right: none; }
.view-btn:hover { background: var(--bg); color: var(--text); }
.view-btn.active { background: var(--primary); color: #fff; }

/* Day headers */
.cal-day-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background: #f8f9fb;
}

.cal-day-hdr {
  padding: 8px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}

/* Grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* Day view */
.cal-grid.view-day,
.cal-grid.view-week {
  grid-template-columns: 1fr;
  min-height: 500px;
}

.cal-grid.view-week {
  grid-template-columns: repeat(7, 1fr);
}

.cal-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 100px;
  padding: 4px;
  vertical-align: top;
  position: relative;
}

.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.other-month .cal-day-num { opacity: .35; }
.cal-cell.today { background: #f0f7ff; }
.cal-cell.today .cal-day-num {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px;
  margin-bottom: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-events { display: flex; flex-direction: column; gap: 2px; }

.cal-event {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .1s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.cal-event:hover { opacity: .8; }

.cal-event-time {
  font-size: 11px;
  opacity: .8;
  flex-shrink: 0;
}

.cal-event-initials {
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(255,255,255,.3);
  border-radius: 2px;
  padding: 0 2px;
}

.cal-event-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Employee color classes */
.emp-color-0 { background: #fde3c7; color: #7b341e; }
.emp-color-1 { background: #e8d5b5; color: #5c3a1e; }
.emp-color-2 { background: #c6f6d5; color: #1c4532; }
.emp-color-3 { background: #b2f5ea; color: #1d4044; }
.emp-color-4 { background: #bee3f8; color: #e67e22; }
.emp-color-5 { background: #c3dafe; color: #e67e22; }
.emp-color-6 { background: #e9d8fd; color: #44337a; }
.emp-color-7 { background: #fed7e2; color: #702459; }

/* Calendar sidebar */
.calendar-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-section {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sidebar-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #f8f9fb;
}

.employee-filters { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }

.emp-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}

.emp-filter input[type="checkbox"] { display: none; }

.emp-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: transform .1s;
}

.emp-filter input:checked + .emp-swatch { transform: scale(1.2); border-color: rgba(0,0,0,.2); }
.emp-filter input:not(:checked) + .emp-swatch { opacity: .35; }

.emp-filter-name { flex: 1; }

.emp-swatch-colors {
  --c0: var(--emp-0); --c1: var(--emp-1); --c2: var(--emp-2); --c3: var(--emp-3);
  --c4: var(--emp-4); --c5: var(--emp-5); --c6: var(--emp-6); --c7: var(--emp-7);
}

/* Pending estimates list */
.pending-list { display: flex; flex-direction: column; }

.pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  transition: background .1s;
}

.pending-item:last-child { border-bottom: none; }
.pending-item:hover { background: var(--bg); }

.pending-name { font-weight: 500; color: var(--text); }
.pending-amount { font-weight: 600; color: var(--s-estimate); font-size: 13px; }
.pending-empty { padding: 16px 14px; color: var(--text-muted); font-size: 13px; font-style: italic; }

/* =========================================================
   DETAIL PANELS
   ========================================================= */

.detail-panel {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 16px;
  overflow: hidden;
}

.detail-panel.hidden { display: none; }

.detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: #f8f9fb;
}

.detail-header h2 { font-size: 16px; font-weight: 700; }

.detail-body { padding: 20px; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.detail-field { display: flex; flex-direction: column; gap: 3px; }
.detail-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 600; }
.detail-field-value { font-size: 14px; color: var(--text); font-weight: 500; }

.detail-section-title {
  font-size: 20px;
  font-weight: 800;
  color: #1a202c;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.notes-list { display: flex; flex-direction: column; gap: 8px; }

.note-item {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
}

.note-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* =========================================================
   ENGINEERING
   ========================================================= */

.eng-data-section { margin-top: 16px; }

.json-viewer {
  background: #f8f9fb;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  overflow: auto;
  max-height: 300px;
  color: var(--text);
  white-space: pre;
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.room-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
}

.room-name { font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.room-dim  { color: var(--text-muted); font-size: 13px; }

/* =========================================================
   MODALS
   ========================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.hidden { display: none; }

.modal {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  width: 100%;
  max-width: 400px;
  margin: 16px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: #f8f9fb;
}

.modal-header h3 { font-size: 14px; font-weight: 700; }

.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
}

.modal-close:hover { background: var(--border); color: var(--text); }

.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-body label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.modal-body input,
.modal-body select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}

.modal-body input:focus,
.modal-body select:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(42,79,138,.15); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: #f8f9fb;
}

/* =========================================================
   TOAST
   ========================================================= */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1a202c;
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  box-shadow: var(--shadow);
  z-index: 2000;
  transform: translateY(0);
  transition: opacity .3s;
  max-width: 340px;
}

.toast.hidden { display: none; }
.toast.success { background: #276749; }
.toast.error   { background: #c53030; }

/* =========================================================
   COMMUNICATIONS TAB
   ========================================================= */

/* Sub-tab bar */
.comms-subtab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}

.comms-subtab {
  padding: 8px 18px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: all .15s;
}

.comms-subtab:hover { color: var(--primary); background: rgba(230,126,34,.05); }
.comms-subtab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* Sub-panel visibility */
.comms-subpanel { display: none; }
.comms-subpanel.active { display: block; }

/* Notice banners */
.comms-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 13px;
}

.comms-notice-icon { font-size: 16px; flex-shrink: 0; }

.comms-notice-podium {
  background: #fff8f0;
  border: 1px solid #fdd0a2;
  color: #7b3a0e;
}

.comms-notice-gmail {
  background: #f0f7ff;
  border: 1px solid #bee3f8;
  color: #1e4d7b;
}

/* ── SMS Layout ── */
.comms-sms-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 540px;
}

.comms-sms-sidebar {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comms-sms-sidebar-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  background: #f8f9fb;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

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

.comms-conv-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}

.comms-conv-item:hover { background: var(--bg); }
.comms-conv-item.active { background: #fff4eb; border-left: 3px solid var(--primary); padding-left: 13px; }
.comms-conv-item:last-child { border-bottom: none; }

.comms-conv-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comms-conv-time {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 400;
}

.comms-conv-preview {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comms-conv-unread .comms-conv-name { color: var(--primary); }
.comms-conv-unread .comms-conv-preview { font-weight: 600; color: var(--text); }

/* Thread panel */
.comms-sms-thread-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comms-sms-thread-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #f8f9fb;
  flex-shrink: 0;
}

.comms-thread-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.comms-thread-phone {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 8px;
}

.comms-sms-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fafbfc;
}

.comms-empty-state {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  margin: auto;
}

/* Message bubbles */
.comms-msg {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.comms-msg.outbound { align-self: flex-end; align-items: flex-end; }
.comms-msg.inbound  { align-self: flex-start; align-items: flex-start; }

.comms-msg-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
}

.comms-msg.outbound .comms-msg-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.comms-msg.inbound .comms-msg-bubble {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.comms-msg-meta {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 3px;
  padding: 0 4px;
}

/* SMS input bar */
.comms-sms-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.comms-sms-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  background: var(--bg);
}

.comms-sms-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230,126,34,.15); }

/* ── Email ── */
.comms-email-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* Compose form */
.comms-compose-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}

.comms-compose-form.hidden { display: none; }

.comms-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #f8f9fb;
}

.comms-compose-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.comms-compose-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comms-compose-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
}

.comms-compose-input,
.comms-compose-textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}

.comms-compose-input:focus,
.comms-compose-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230,126,34,.15); }

.comms-compose-textarea { resize: vertical; }

.comms-compose-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #f8f9fb;
}

/* Email unread row highlight */
.email-row-unread td:first-child { font-weight: 700; }
.email-row-unread { background: #fafbfd; }

.email-preview-cell {
  color: var(--text-muted);
  font-size: 13px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   PAYMENTS
   ========================================================= */

.btn-orange {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  border: none;
}

.btn-orange:hover {
  background: #c96a14;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(230,126,34,.35);
}

.payment-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #f0fff4;
  color: #276749;
  border: 1px solid #c6f6d5;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.payments-list {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.payments-list .data-table thead th {
  font-size: 11px;
}

/* =========================================================
   FACEBOOK LEADS SECTION
   ========================================================= */

.fb-leads-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.fb-leads-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: #f0f4ff;
}

.fb-leads-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fb-leads-title h2 {
  font-size: 20px;
  font-weight: 800;
  color: #1a202c;
}

.fb-icon {
  font-size: 20px;
  line-height: 1;
}

.fb-leads-actions {
  display: flex;
  gap: 8px;
}

.btn-fb {
  background: #1877f2;
  color: #fff;
  border: none;
}
.btn-fb:hover {
  background: #0f65d9;
}

.btn-xs {
  padding: 3px 9px;
  font-size: 13px;
  height: auto;
  border-radius: 4px;
}

.fb-stats-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.fb-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
  border-right: 1px solid var(--border);
}

.fb-stat:last-child {
  border-right: none;
}

.fb-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 3px;
}

.fb-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

.fb-stat-time {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.fb-leads-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.fb-error {
  color: var(--s-cancelled);
}

.fb-leads-table {
  margin: 0;
}

.fb-lead-row {
  transition: background .12s;
}

.fb-lead-row:hover {
  background: #f0f4ff;
}

.fb-lead-imported {
  opacity: .75;
}

.fb-imported-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fb-check {
  font-size: 14px;
}

.fb-cust-link {
  font-size: 13px;
  color: #1877f2;
  text-decoration: underline;
  cursor: pointer;
}

.badge-fb-new {
  display: inline-block;
  padding: 2px 8px;
  background: #e8f0fe;
  color: #1877f2;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #bfd3fb;
}

.badge-fb-imported {
  display: inline-block;
  padding: 2px 8px;
  background: #f0fff4;
  color: #38a169;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #b7e8c7;
}

/* =========================================================
   ESTIMATES TAB
   ========================================================= */

/* Builder header */
.estimate-builder-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.estimate-builder-title {
  flex: 1;
}

.estimate-builder-customer {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.estimate-builder-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.estimate-builder-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Estimate card */
.estimate-card {
  margin-top: 0;
}

/* Estimate table — Estimate Rocket style */
.estimate-table tbody tr:nth-child(even) {
  background: #f8f9fb;
}

.estimate-table tbody tr:nth-child(odd) {
  background: var(--surface);
}

.estimate-table td {
  vertical-align: middle;
}

.estimate-table .estimate-code-cell {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.estimate-table .estimate-desc-cell {
  font-weight: 500;
  color: var(--text);
}

.estimate-table .estimate-category-row td {
  background: #f0f4f8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--primary);
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
}

.estimate-table .estimate-amount-cell {
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.estimate-table .estimate-negative {
  color: #c53030;
}

/* Totals section */
.estimate-totals {
  display: flex;
  justify-content: flex-end;
  padding: 16px 18px;
  border-top: 2px solid var(--border);
  background: #fafbfc;
}

.estimate-totals-right {
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.estimate-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.estimate-total-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.estimate-total-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.estimate-deposit-row {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
}

.estimate-deposit-row .estimate-total-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.estimate-deposit-amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

/* Deposit badge when door order */
.estimate-door-badge {
  font-size: 11px;
  font-weight: 700;
  background: #feebc8;
  color: #7b3a0e;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid #fdd0a2;
  margin-left: 6px;
  white-space: nowrap;
}

/* Estimates list table */
.estimates-table-deposit {
  font-weight: 700;
  color: var(--primary);
}

/* Product Picker — Multi-select */
.modal-lg {
  max-width: 560px;
}

.modal-xl {
  max-width: 640px;
  width: 95vw;
}

.product-picker-modal-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
}

.product-picker-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.product-picker-search {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color .15s;
}
.product-picker-search:focus {
  border-color: var(--primary);
  background: #fff;
}

.product-picker-selection-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}

.product-picker-list {
  flex: 1;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  margin-top: 0;
}

.product-picker-group-header {
  padding: 6px 12px;
  background: #f0f4f8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--primary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Each row is now a <label> for checkbox */
.product-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  user-select: none;
}

.product-picker-item:last-child {
  border-bottom: none;
}

.product-picker-item:hover {
  background: #fff4eb;
}

.product-picker-item.checked {
  background: #fff4eb;
  border-left: 3px solid var(--primary);
  padding-left: 11px;
}

.product-picker-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}

.product-picker-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.product-picker-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.product-picker-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-picker-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.product-picker-price.negative {
  color: #c53030;
}

/* Keep hidden form class for backward compat (not used in new flow) */
.product-picker-form.hidden {
  display: none;
}

/* ── Inline editing on estimate table ── */
.inline-editable {
  cursor: pointer;
  border-bottom: 1px dotted var(--text-muted);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .1s, border-color .1s;
}

.inline-editable::after {
  content: '✏';
  font-size: 11px;
  color: var(--text-light);
  opacity: 0;
  transition: opacity .15s;
}

.inline-editable:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.inline-editable:hover::after {
  opacity: 1;
}

.inline-edit-input {
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}

.inline-edit-input::-webkit-inner-spin-button,
.inline-edit-input::-webkit-outer-spin-button {
  opacity: 1;
}

.estimate-qty-cell {
  text-align: center;
}

/* Btn orange already defined for payments */

/* =========================================================
   TASKS TAB
   ========================================================= */

/* Nav badge */
.tasks-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #e53e3e;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
}

.tasks-badge.hidden { display: none; }

/* Filter bar */
.tasks-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.task-filter-select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  outline: none;
}

.task-filter-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(230,126,34,.12);
}

/* Bulk actions */
.tasks-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.tasks-bulk-actions.hidden { display: none; }

/* Summary row */
.tasks-summary-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.task-summary-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
}

.task-summary-pill .pill-count {
  font-size: 14px;
  font-weight: 800;
}

.pill-open     { border-color: #bee3f8; background: #ebf8ff; color: #2b6cb0; }
.pill-inprog   { border-color: #c6f6d5; background: #f0fff4; color: #276749; }
.pill-overdue  { border-color: #fed7d7; background: #fff5f5; color: #c53030; }
.pill-complete { border-color: #e9d8fd; background: #faf5ff; color: #553c9a; }

/* Tasks table */
.tasks-table tbody tr.task-overdue {
  background: #fff5f5;
}

.tasks-table tbody tr.task-overdue:hover {
  background: #fed7d7;
}

/* Priority icon badges */
.priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}

.priority-urgent { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; }
.priority-high   { background: #feebc8; color: #c05621; border: 1px solid #fbd38d; }
.priority-normal { background: #f0f0f0; color: #4a5568; border: 1px solid #e2e8f0; }
.priority-low    { background: #f0fff4; color: #2f855a; border: 1px solid #c6f6d5; }

/* Task status badges */
.task-status-open      { background: #ebf8ff; color: #2b6cb0; }
.task-status-in_progress { background: #f0fff4; color: #276749; }
.task-status-completed { background: #f0f0f0; color: #718096; }
.task-status-overdue   { background: #fff5f5; color: #c53030; }

/* Task type badges */
.task-type-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  background: #f0f4f8;
  color: #4a5568;
  border: 1px solid #e2e8f0;
}

.task-type-engineering { background: #ebf8ff; color: #2b6cb0; border-color: #bee3f8; }
.task-type-door_order  { background: #feebc8; color: #c05621; border-color: #fbd38d; }
.task-type-warranty    { background: #faf5ff; color: #553c9a; border-color: #e9d8fd; }
.task-type-follow_up   { background: #f0fff4; color: #276749; border-color: #c6f6d5; }
.task-type-scheduling  { background: #fff5f5; color: #c53030; border-color: #fed7d7; }
.task-type-payment     { background: #fffbeb; color: #975a16; border-color: #fbd38d; }

/* Sortable headers */
.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover { color: var(--primary); }

.sort-asc::after  { content: ' ▲'; font-size: 11px; }
.sort-desc::after { content: ' ▼'; font-size: 11px; }

/* =========================================================
   PIPELINE STAGE BADGES
   ========================================================= */

.pipeline-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  background: #f0f4f8;
  color: #4a5568;
  border: 1px solid #e2e8f0;
}

/* Stage-specific colors */
.ps-lead              { background: #f0f0f0; color: #718096; border-color: #e2e8f0; }
.ps-intake            { background: #feebc8; color: #c05621; border-color: #fbd38d; }
.ps-sales_assigned    { background: #fef3e2; color: #924d0b; border-color: #fdd0a2; }
.ps-bpe               { background: #ebf8ff; color: #2b6cb0; border-color: #bee3f8; }
.ps-vc                { background: #e9d8fd; color: #553c9a; border-color: #d6bcfa; }
.ps-dse               { background: #fefce8; color: #a16207; border-color: #fde68a; }
.ps-deposit           { background: #f0fff4; color: #276749; border-color: #c6f6d5; }
.ps-job_created       { background: #ebf8ff; color: #1a365d; border-color: #90cdf4; }
.ps-engineering_requested { background: #fff5f5; color: #9b2c2c; border-color: #feb2b2; }
.ps-engineering_in_progress { background: #feebc8; color: #7b341e; border-color: #fbd38d; }
.ps-engineering_complete    { background: #f0fff4; color: #1c4532; border-color: #68d391; }
.ps-permit_submitted  { background: #ebf8ff; color: #2c5282; border-color: #90cdf4; }
.ps-permit_approved   { background: #f0fff4; color: #22543d; border-color: #68d391; }
.ps-scheduling        { background: #faf5ff; color: #44337a; border-color: #d6bcfa; }
.ps-on_hold           { background: #fff5f5; color: #c53030; border-color: #feb2b2; }
.ps-scheduled         { background: #ebf8ff; color: #2b6cb0; border-color: #63b3ed; }
.ps-in_progress       { background: #f0fff4; color: #276749; border-color: #68d391; }
.ps-completed         { background: #e6fffa; color: #234e52; border-color: #81e6d9; }
.ps-payment_final     { background: #fffbeb; color: #975a16; border-color: #fbd38d; }
.ps-warranty          { background: #faf5ff; color: #553c9a; border-color: #d6bcfa; }
.ps-closed            { background: #f0f0f0; color: #2d3748; border-color: #cbd5e0; }

/* Pipeline progress dots in customer detail */
.pipeline-progress {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin: 8px 0;
  overflow: hidden;
}

.pipeline-step {
  display: flex;
  align-items: center;
  gap: 0;
}

.pipeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: background .2s;
}

.pipeline-dot.done    { background: var(--primary); border-color: var(--primary); }
.pipeline-dot.current { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230,126,34,.25); }
.pipeline-dot.future  { background: #e2e8f0; border-color: #e2e8f0; }

.pipeline-line {
  width: 14px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
}

.pipeline-line.done { background: var(--primary); }

.pipeline-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 2px;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .calendar-layout { grid-template-columns: 1fr; }
  .calendar-sidebar { flex-direction: row; }
  .sidebar-section  { flex: 1; }
}

@media (max-width: 640px) {
  html { font-size: 14px; }

  .topbar { gap: 8px; padding: 0 12px; }
  .logo-sub { display: none; }
  .topbar-right { gap: 4px; }
  .status-label { display: none; }
  .location-select { font-size: 13px; padding: 4px 22px 4px 6px; }

  .topbar-nav { overflow-x: auto; }
  .nav-tab { padding: 5px 10px; font-size: 13px; }

  .main-content { padding: 12px 12px 24px; }

  .pipeline-cards { grid-template-columns: repeat(3, 1fr); }
  .summary-bar    { flex-wrap: wrap; }
  .summary-item   { flex: 1 1 45%; border-bottom: 1px solid var(--border); }

  .cal-toolbar    { flex-direction: column; align-items: flex-start; }
  .cal-event-time { display: none; }

  .calendar-sidebar { flex-direction: column; }

  .modal { margin: 12px; }

  .comms-sms-layout { grid-template-columns: 1fr; height: auto; }
  .comms-sms-sidebar { border-right: none; border-bottom: 1px solid var(--border); max-height: 220px; }
  .comms-sms-thread-wrap { height: 400px; }
}


/* =========================================================
   LEADS TAB
   ========================================================= */

/* Lead source cards grid */
.lead-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.lead-source-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--border);
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
  text-align: center;
}

.lead-source-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.lead-source-card.active {
  box-shadow: var(--shadow);
  border-top-width: 4px;
}

.lead-source-icon {
  font-size: 22px;
  margin-bottom: 5px;
  line-height: 1;
}

.lead-source-count {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 3px;
}

.lead-source-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}

/* Source color theming */
.lead-source-facebook  { border-color: #1877f2; }
.lead-source-facebook  .lead-source-count { color: #1877f2; }
.lead-source-instagram { border-color: #e1306c; }
.lead-source-instagram .lead-source-count { color: #e1306c; }
.lead-source-google    { border-color: #4285f4; }
.lead-source-google    .lead-source-count { color: #4285f4; }
.lead-source-website   { border-color: #38a169; }
.lead-source-website   .lead-source-count { color: #38a169; }
.lead-source-referral  { border-color: #e67e22; }
.lead-source-referral  .lead-source-count { color: #e67e22; }
.lead-source-repeat    { border-color: #805ad5; }
.lead-source-repeat    .lead-source-count { color: #805ad5; }
.lead-source-other     { border-color: #718096; }
.lead-source-other     .lead-source-count { color: #718096; }

/* Lead status badges */
.badge-lead-new       { background: #ebf8ff; color: #2b6cb0; }
.badge-lead-contacted { background: #feebc8; color: #c05621; }
.badge-lead-quoted    { background: #faf5ff; color: #553c9a; }
.badge-lead-won       { background: #f0fff4; color: #276749; }
.badge-lead-lost      { background: #fff5f5; color: #c53030; }

/* Lead detail panel */
.lead-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.lead-status-select {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  outline: none;
}

.lead-status-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(230,126,34,.15);
}

.lead-note-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.lead-note-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 70px;
  transition: border-color .15s;
}

.lead-note-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(230,126,34,.15);
}

/* Facebook leads section in Leads tab */
.leads-fb-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}

.leads-fb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #f0f4ff;
}

/* Fix product picker checkbox alignment */
.product-picker-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.product-picker-item input[type="checkbox"] {
    margin-right: 12px;
    flex-shrink: 0;
}


/* Product picker item - single row layout: checkbox | info | price */
.product-picker-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.product-picker-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0 !important;
}
.product-picker-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-picker-code {
    font-size: 11px;
    color: #888;
    font-family: monospace;
}
.product-picker-name {
    font-weight: 600;
    font-size: 14px;
}
.product-picker-price {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 14px;
    text-align: right;
    min-width: 80px;
}

/* =========================================================
   WEBSITE LEADS SECTION
   ========================================================= */

.ws-leads-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.ws-leads-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: #f0fff4;
}

.ws-leads-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ws-leads-title h2 {
  font-size: 20px;
  font-weight: 800;
  color: #1a202c;
}

.ws-icon {
  font-size: 20px;
  line-height: 1;
}

.ws-leads-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ws-days-select {
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.btn-website {
  background: #38a169;
  color: #fff;
  border: none;
}
.btn-website:hover {
  background: #2f855a;
}

.ws-stats-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.ws-stat {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  border-right: 1px solid var(--border);
}

.ws-stat:last-child {
  border-right: none;
}

.ws-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 3px;
  text-align: center;
}

.ws-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #38a169;
}

.ws-stat-time {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.ws-leads-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.ws-error {
  color: var(--s-cancelled);
}

.ws-leads-table {
  margin: 0;
}

.ws-lead-row {
  transition: background .12s;
}

.ws-lead-row:hover {
  background: #f0fff4;
}

.ws-lead-imported {
  opacity: .7;
}

.ws-imported-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-check {
  font-size: 14px;
}

.ws-form-badge {
  display: inline-block;
  padding: 2px 7px;
  background: #ebf8ee;
  color: #276749;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #b7e8c7;
  white-space: nowrap;
}

.badge-ws-new {
  display: inline-block;
  padding: 2px 8px;
  background: #e6ffed;
  color: #276749;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #b7e8c7;
}

.badge-ws-imported {
  display: inline-block;
  padding: 2px 8px;
  background: #f0f0f0;
  color: #718096;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}

/* =========================================================
   CUSTOMER FULL-SCREEN DETAIL VIEW (cfd)
   ========================================================= */

/* Overlay — sits above main content, below modals */
.cfd-overlay {
  position: fixed;
  inset: 56px 0 0 0; /* below topbar */
  background: var(--bg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cfd-overlay.hidden { display: none; }

/* Sticky header */
.cfd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  height: 50px;
}

.cfd-back-btn {
  flex-shrink: 0;
}

.cfd-header-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cfd-header-name > span:first-child {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfd-header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Scrollable body */
.cfd-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
}

/* ── Layout rows ── */
.cfd-top-row {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 12px;
  margin-bottom: 12px;
}

.cfd-mid-row {
  margin-bottom: 12px;
}

.cfd-bot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Cards ── */
.cfd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cfd-card-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1a202c !important;
  margin: 18px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary, #e97a2b);
}
.cfd-card-title:first-child {
  margin-top: 0;
}

.cfd-card-body {
  padding: 8px 10px;
}

/* ── Contact Info ── */
.cfd-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.cfd-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cfd-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-light);
  font-weight: 600;
}

.cfd-field-value {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.cfd-field-value a {
  color: var(--primary);
  text-decoration: none;
}

.cfd-field-value a:hover { text-decoration: underline; }

/* Tags */
.cfd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.cfd-tag {
  display: inline-block;
  padding: 1px 7px;
  background: #fef3e2;
  color: #924d0b;
  border: 1px solid #fdd0a2;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* Internal notes textarea */
.cfd-notes-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  resize: vertical;
  min-height: 60px;
  outline: none;
  transition: border-color .15s;
}

.cfd-notes-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(230,126,34,.12);
}

.cfd-notes-save-label {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 3px;
}

/* ── Financial Summary ── */
.cfd-financial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-bottom: 8px;
}

.cfd-fin-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cfd-fin-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-light);
  font-weight: 600;
}

.cfd-fin-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.cfd-fin-value.fin-due { color: #c53030; }
.cfd-fin-value.fin-paid { color: #276749; }

/* Quick Actions */
.cfd-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Dense tables ── */
.cfd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cfd-table thead th {
  background: #f8f9fb;
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.cfd-table tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}

.cfd-table tbody tr:last-child { border-bottom: none; }
.cfd-table tbody tr:hover { background: #f8f9fb; }
.cfd-table tbody td { padding: 6px 10px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cfd-table-empty {
  padding: 12px 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

/* ── Job inline expand ── */
.cfd-job-expand {
  background: #f8f9fb;
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 13px;
}

.cfd-job-expand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 12px;
}

/* ── Communications log ── */
.cfd-comm-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cfd-comm-item {
  display: flex;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.cfd-comm-item:last-child { border-bottom: none; }

.cfd-comm-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  margin-top: 1px;
}

.cfd-comm-content { flex: 1; }
.cfd-comm-title { font-weight: 600; color: var(--text); }
.cfd-comm-meta { font-size: 11px; color: var(--text-light); margin-top: 1px; }

/* Add note area */
.cfd-add-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: #f8f9fb;
}

.cfd-add-note textarea {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  height: 52px;
  outline: none;
  transition: border-color .15s;
}

.cfd-add-note textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(230,126,34,.12);
}

/* ── Activity timeline ── */
.cfd-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cfd-tl-item {
  display: flex;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: flex-start;
}

.cfd-tl-item:last-child { border-bottom: none; }

.cfd-tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 3px;
}

.cfd-tl-dot.tl-created { background: #48bb78; }
.cfd-tl-dot.tl-updated { background: #4299e1; }
.cfd-tl-dot.tl-status  { background: var(--primary); }

.cfd-tl-content { flex: 1; }
.cfd-tl-event { font-weight: 600; color: var(--text); }
.cfd-tl-date  { font-size: 11px; color: var(--text-light); margin-top: 1px; }

/* ── Files placeholder ── */
.cfd-files-placeholder {
  padding: 16px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.cfd-files-placeholder .cfd-files-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

/* ── Edit overlay ── */
.cfd-edit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.cfd-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.cfd-edit-form input,
.cfd-edit-form select,
.cfd-edit-form textarea {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}

.cfd-edit-form input:focus,
.cfd-edit-form select:focus,
.cfd-edit-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(230,126,34,.12);
}

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

.cfd-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
  grid-column: 1 / -1;
}


/* =========================================================
   Photos & Engineering Files — Job Expand Sections
   ========================================================= */

/* Media badge on job rows (photo count, eng count) */
.cfd-media-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  margin-right: 3px;
}

/* Media section container (Photos / Engineering) inside job expand */
.cfd-media-section {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.cfd-media-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cfd-media-section-title {
  font-size: 20px;
  font-weight: 800;
  color: #1a202c;
  flex: 1;
}

/* Drag-and-drop zone */
.cfd-photo-drop-zone {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-light);
  background: #fafafa;
  cursor: default;
  transition: border-color .15s, background .15s;
  margin-bottom: 6px;
}

.cfd-photo-drop-zone.drag-over {
  border-color: var(--primary);
  background: rgba(230,126,34,.05);
  color: var(--primary);
}

.cfd-drop-hint { pointer-events: none; }

/* Thumbnail grid */
.cfd-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 20px;
}

.cfd-photos-loading,
.cfd-photos-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

.cfd-thumb-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cfd-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: block;
}

.cfd-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.cfd-thumb-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}

.cfd-thumb-wrap:hover .cfd-thumb-del { opacity: 1; }

.cfd-thumb-caption {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Lightbox */
.cfd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.cfd-lightbox.hidden { display: none; }

.cfd-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
  cursor: default;
}

.cfd-lightbox-caption {
  margin-top: 10px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  max-width: 80vw;
  text-align: center;
}

.cfd-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.cfd-lightbox-close:hover { background: rgba(255,255,255,.25); }

/* Engineering file list */
.cfd-eng-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 20px;
}

.cfd-eng-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}

.cfd-eng-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cfd-eng-file-name {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.cfd-eng-file-name:hover { text-decoration: underline; }

.cfd-eng-file-meta {
  font-size: 11px;
  color: var(--text-light);
}

.cfd-eng-file-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Engineering status badges */
.cfd-eng-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.eng-file-pending  { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
.eng-file-approved { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.eng-file-sent     { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }

/* Engineering action buttons */
.btn-eng-approve {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.btn-eng-approve:hover { background: #bbf7d0; }

.btn-eng-send {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}
.btn-eng-send:hover { background: #bfdbfe; }

/* btn-xs modifiers for media section actions */
.btn-xs.btn-danger { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.btn-xs.btn-danger:hover { background: #fecaca; }
.btn-xs.btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-xs.btn-outline:hover { background: rgba(230,126,34,.07); }
.btn-xs.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-xs.btn-primary:hover { background: var(--primary-hover); }
.btn-xs.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn-xs.btn-ghost:hover { background: var(--bg); }
.btn-xs.btn-status { background: var(--sb-estimate); color: var(--s-estimate); border-color: var(--s-estimate); }


/* =========================================================
   Work Order Styles
   ========================================================= */

/* WO status badges */
.wo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.wo-badge-draft        { background: #f0f0f0; color: #718096; border: 1px solid #cbd5e0; }
.wo-badge-sent         { background: #ebf8ff; color: #2b6cb0; border: 1px solid #90cdf4; }
.wo-badge-acknowledged { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.wo-badge-completed    { background: #e6fffa; color: #234e52; border: 1px solid #81e6d9; }

/* WO indicator on jobs table */
.wo-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: #ebf8ff;
  color: #2b6cb0;
  border: 1px solid #90cdf4;
  white-space: nowrap;
}

/* Work Order section inside expanded job row */
.cfd-wo-section {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cfd-wo-section-header {
  background: #f7f8fa;
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cfd-wo-section-title {
  font-size: 20px;
  font-weight: 800;
  color: #1a202c;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cfd-wo-section-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cfd-wo-fields {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  background: #fff;
}

.cfd-wo-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cfd-wo-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.cfd-wo-field-value {
  font-size: 12px;
  color: var(--text);
}

/* Work Order Edit Modal */
.wo-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wo-modal-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

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

.wo-modal-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.wo-modal-field input,
.wo-modal-field textarea,
.wo-modal-field select {
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color .15s;
}

.wo-modal-field input:focus,
.wo-modal-field textarea:focus,
.wo-modal-field select:focus {
  outline: none;
  border-color: var(--primary);
}

.wo-modal-field textarea {
  resize: vertical;
  min-height: 60px;
}


/* ===== Visual Hierarchy — Section Cards ===== */
.cfd-card, .detail-card, .card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.cfd-card h3, .detail-card h3, .card h3,
.cfd-section-title, .section-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1a202c !important;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary, #e97a2b);
}

/* Info labels (Contact Info, Address, Source, etc.) */
.cfd-label, .info-label, .detail-label {
  font-size: 11px;
  font-weight: 700;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

/* Info values */
.cfd-value, .info-value, .detail-value {
  font-size: 13px;
  font-weight: 500;
  color: #1a202c;
  margin-bottom: 6px;
}

/* Alternating row backgrounds for info grids */
.info-row:nth-child(even) {
  background: #f7fafc;
  border-radius: 3px;
  padding: 2px 4px;
}

/* Financial summary card - make it pop */
.cfd-financial, .financial-card {
  background: linear-gradient(135deg, #fff8f0 0%, #fff 100%);
  border: 1px solid #fed7aa;
  border-left: 4px solid var(--primary, #e97a2b);
}

.cfd-financial .cfd-section-title,
.financial-card .section-title {
  color: var(--primary, #e97a2b) !important;
}

/* Quick action buttons row */
.quick-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

/* Internal notes card */
.cfd-notes, .notes-card {
  background: #fffff0;
  border: 1px solid #fefcbf;
  border-left: 4px solid #ecc94b;
}

/* Engineering section */
.cfd-engineering, .engineering-card {
  background: #f0fff4;
  border: 1px solid #c6f6d5;
  border-left: 4px solid #48bb78;
}

/* Photos section */
.cfd-photos, .photos-card {
  background: #ebf8ff;
  border: 1px solid #bee3f8;
  border-left: 4px solid #4299e1;
}

/* Communications/Activity section */
.cfd-activity, .activity-card {
  background: #faf5ff;
  border: 1px solid #e9d8fd;
  border-left: 4px solid #9b59b6;
}

/* Work order section */
.cfd-workorder, .wo-card {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-left: 4px solid #e53e3e;
}

/* Better table headers inside cards */
.cfd-card th, .detail-card th {
  background: #edf2f7;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #4a5568;
  padding: 6px 8px;
}

.cfd-card td, .detail-card td {
  padding: 5px 8px;
  border-bottom: 1px solid #edf2f7;
}

/* Status badges - more prominent */
.badge, .status-badge {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  display: inline-block;
}


/* ===== Consistent Table Formatting ===== */
table {
  width: 100%;
  border-collapse: collapse;
}

/* All table cells: no wrap, ellipsis */
table th, table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 8px;
}

/* Name/primary column: bold */
.data-table tbody td:first-child,
.cfd-table tbody td:first-child {
  font-weight: 600;
}

/* Amount columns: right-aligned, tabular-nums */
.amount-cell, td[data-type="money"], .estimate-amount-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Action button columns must never clip buttons */
.data-table tbody td:last-child,
.cfd-table tbody td:last-child,
td.action-col {
  overflow: visible;
  white-space: nowrap;
}

/* Status/badge columns: centered */
.badge, .status-badge, .pipeline-badge, .priority-badge {
  white-space: nowrap;
}

/* Phone number formatting */
.phone-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Amount/money columns right-align */
.amount-cell, td[data-type="money"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== System Tab Section Headers ===== */
.sys-section .section-header h2,
.sys-section-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1a202c !important;
}

/* ===== CFD Card Title Consistency ===== */
.cfd-card-title,
.cfd-section-title,
.section-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1a202c !important;
}

/* ===== Job number cells: small, gray, right ===== */
td.job-num-cell, th.job-num-cell {
  font-size: 11px;
  color: #888;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* ===== Sidebar title (calendar) consistency ===== */
.sidebar-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1a202c !important;
  text-transform: none;
  letter-spacing: 0;
}


/* ===== Hover Tooltips ===== */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a202c;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1a202c;
  z-index: 9999;
  pointer-events: none;
}