/* BuildUpQuote shared UI helpers -- plain CSS (Tailwind CDN doesn't run @apply) */
/* Contractor theme: amber/orange accents (#F59E0B / #EA580C), slate navy, crisp cards. */

.bq-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.dark .bq-card { background: #1e293b; border-color: #334155; }

/* Touch targets (clinerules section 3): contractors tap these outdoors with
   gloved hands, so every control clears 44px. min-height wins over a utility
   height in a template's class list, which is the point -- a control cannot
   quietly shrink below the minimum. */
.bq-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  color: #1e293b;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bq-input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.dark .bq-input { border-color: #475569; background: #0f172a; color: #f1f5f9; }

.bq-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 44px;
  border-radius: .5rem;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #fff;
  padding: .5rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(234, 88, 12, .25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bq-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 22px -8px rgba(234, 88, 12, .55);
}
.bq-btn:active { transform: translateY(0) scale(.99); }
.bq-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.dark .bq-btn { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; }
.dark .bq-btn:hover { background: linear-gradient(135deg, #d97706, #c2410c); }

.bq-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 44px;
  border-radius: .5rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  padding: .5rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.bq-btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .35);
  background: #fffbeb;
  border-color: #f59e0b;
  color: #b45309;
}
.bq-btn-secondary:active { transform: translateY(0); }
.dark .bq-btn-secondary { border-color: #475569; background: #1e293b; color: #e2e8f0; }
.dark .bq-btn-secondary:hover { background: #334155; border-color: #f59e0b; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7); }

/* Always-dark panels: the quote cockpit cards (bg-[#111827]), the financial
   cockpit and the drawers/modals whose surface is near-black whatever the theme
   toggle says. This block must stay AFTER the .dark rules above: same
   specificity, so source order is what makes it win.
   Why it exists (quote #Q-58): a child of one of these panels sees the LIGHT
   theme, so `class="bq-input"` painted a white box with slate-800 ink on a
   near-black card, and a heading written `text-slate-900 dark:text-white` stayed
   invisible until someone flipped the toggle -- a quote title and a money column
   that read as empty fields. Markup inside these panels uses always-on colors
   (text-white / text-slate-100/300); the .dark: variants are irrelevant here. */
.bq-cockpit { color: #e2e8f0; }
.bq-cockpit .bq-input {
  background: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}
.bq-cockpit .bq-input::placeholder { color: #94a3b8; }
.bq-cockpit .bq-input:focus { border-color: #f59e0b; }
.bq-cockpit .bq-btn-secondary { background: #1e293b; border-color: #475569; color: #e2e8f0; }
.bq-cockpit .bq-btn-secondary:hover { background: #334155; border-color: #f59e0b; color: #fbbf24; }
.bq-cockpit table.grid-table th { color: #cbd5e1; border-color: #334155; }
.bq-cockpit table.grid-table td { color: #e2e8f0; border-color: #1e293b; }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: .125rem .625rem;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-draft { background: #fef3c7; color: #92400e; }
.dark .badge-draft { background: #78350f; color: #fde68a; }
.badge-sent { background: #dbeafe; color: #1d4ed8; }
.dark .badge-sent { background: #1e3a8a; color: #bfdbfe; }
.badge-accepted { background: #d1fae5; color: #047857; }
.dark .badge-accepted { background: #064e3b; color: #a7f3d0; }

table.grid-table th {
  text-align: left;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
  padding: .5rem .5rem;
  border-bottom: 1px solid #e2e8f0;
}
table.grid-table td { padding: .35rem .5rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.dark table.grid-table th { color: #94a3b8; border-color: #334155; }
.dark table.grid-table td { border-color: #1e293b; }

/* ------------------------------------------------------------------ */
/* Design system: page hero, icon chips, empty states                  */
/* ------------------------------------------------------------------ */

.bq-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #293548 100%);
  color: #fff;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 10px 25px -12px rgba(15, 23, 42, .45);
}
.bq-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 200px at 88% -30%, rgba(245, 158, 11, .4), transparent 60%),
    radial-gradient(480px 200px at 5% 130%, rgba(234, 88, 12, .28), transparent 60%);
}
.dark .bq-hero { box-shadow: 0 10px 25px -12px rgba(0, 0, 0, .7); }

.bq-hero .hero-content { position: relative; z-index: 1; }
.bq-hero .hero-eyebrow { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: #fbbf24; }
.bq-hero h1 { margin-top: .25rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.bq-hero p.hero-sub { margin-top: .25rem; font-size: .875rem; color: #cbd5e1; }
.bq-hero .hero-actions { position: relative; z-index: 1; }

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  flex-shrink: 0;
}
.icon-chip.sm { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }

.card-title {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
}




/* Green flash for voice-recognized fields / rows */
@keyframes bq-flash { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(16, 185, 129, 0.22); } }
.bq-flash { animation: bq-flash 0.9s ease-in-out 2; border-radius: 0.5rem; }