/**
 * Light theme overrides for Plumbing Wizards web app pages.
 * Light is the default preference (html[data-theme="light"] via web-theme.js).
 * Dark uses the base page styles (no data-theme attribute).
 *
 * Brand: navy primary (#0F2A44) + darker orange accent (#8A4F14) so filled
 * buttons keep WCAG AA contrast with white labels.
 */

.portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  cursor: pointer;
  line-height: 1.25;
}
.portal-btn-primary {
  background: #0F2A44 !important;
  color: #fff !important;
}
.portal-btn-primary:hover {
  background: #002447 !important;
}
.portal-btn-danger.portal-btn {
  background: transparent;
  color: #b3261e;
  border-color: rgba(185, 38, 30, 0.55);
}
#incomingCallDeclineBtn {
  background-color: #b3261e !important;
  color: #fff !important;
}
#incomingCallDeclineBtn:hover {
  background-color: #9b1f19 !important;
}

.conversation-row-active {
  background: #0F2A44 !important;
  color: #fff !important;
}

.bw-text-link {
  color: #93c5fd;
  font-weight: 600;
}
.bw-text-link:hover {
  color: #bfdbfe;
}

html[data-theme="light"] body {
  background-color: #f9fafb !important;
  color: #111827 !important;
}

html[data-theme="light"] .card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

html[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-theme="light"] .gradient-bg {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 50%, #e5e7eb 100%) !important;
}

/* Backgrounds */
html[data-theme="light"] .bg-black { background-color: #f9fafb !important; }
html[data-theme="light"] .bg-gray-950 { background-color: #f3f4f6 !important; }
html[data-theme="light"] .bg-gray-900 { background-color: #ffffff !important; }
html[data-theme="light"] .bg-gray-800 { background-color: #f3f4f6 !important; }
html[data-theme="light"] .bg-gray-700 { background-color: #e5e7eb !important; }

html[data-theme="light"] .bg-black\/70,
html[data-theme="light"] .bg-black\/80,
html[data-theme="light"] .bg-black\/95,
html[data-theme="light"] header.bg-black\/80,
html[data-theme="light"] nav.bg-black\/80,
html[data-theme="light"] .portal-tabbar.bg-black\/80 {
  background-color: rgba(249, 250, 251, 0.92) !important;
}

html[data-theme="light"] .bg-green-900\/40 {
  background-color: rgba(220, 252, 231, 0.9) !important;
}

html[data-theme="light"] .bg-red-900\/40,
html[data-theme="light"] .bg-red-900\/50 {
  background-color: rgba(254, 226, 226, 0.85) !important;
}

html[data-theme="light"] .bg-amber-900\/40,
html[data-theme="light"] .bg-gray-900.border-amber-700\/50 {
  background-color: #fffbeb !important;
}

/* Text */
html[data-theme="light"] .text-white { color: #111827 !important; }
html[data-theme="light"] .text-gray-100 { color: #1f2937 !important; }
html[data-theme="light"] .text-gray-200 { color: #374151 !important; }
html[data-theme="light"] .text-gray-300 { color: #4b5563 !important; }
html[data-theme="light"] .text-gray-400 { color: #4b5563 !important; }
html[data-theme="light"] .text-gray-500 { color: #6b7280 !important; }
html[data-theme="light"] .text-green-200 { color: #166534 !important; }
html[data-theme="light"] .text-green-400 { color: #15803d !important; }
html[data-theme="light"] .text-amber-200 { color: #92400e !important; }
html[data-theme="light"] .text-orange-400 { color: #8A4F14 !important; }
html[data-theme="light"] .text-red-400,
html[data-theme="light"] .text-red-300 { color: #b91c1c !important; }
html[data-theme="light"] .hover\:text-red-300:hover { color: #991b1b !important; }
html[data-theme="light"] .bw-text-link { color: #0F2A44 !important; }
html[data-theme="light"] .bw-text-link:hover { color: #002447 !important; text-decoration: underline; }

html[data-theme="light"] .hover\:text-white:hover { color: #111827 !important; }

/* Borders */
html[data-theme="light"] .border-gray-700,
html[data-theme="light"] .border-gray-800 { border-color: #e5e7eb !important; }
html[data-theme="light"] .border-green-700 { border-color: #86efac !important; }
html[data-theme="light"] .border-amber-700\/50 { border-color: #fcd34d !important; }

/* Form controls */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color: #111827;
}

html[data-theme="light"] input.bg-gray-900,
html[data-theme="light"] select.bg-gray-900,
html[data-theme="light"] textarea.bg-gray-900,
html[data-theme="light"] input.bg-gray-800,
html[data-theme="light"] select.bg-gray-800,
html[data-theme="light"] textarea.bg-gray-800 {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

html[data-theme="light"] input[readonly],
html[data-theme="light"] input:disabled {
  background-color: #f3f4f6 !important;
  color: #6b7280 !important;
}

/* Hover states */
html[data-theme="light"] .hover\:bg-gray-700:hover { background-color: #e5e7eb !important; }
html[data-theme="light"] .hover\:bg-gray-600:hover { background-color: #d1d5db !important; }
html[data-theme="light"] .hover\:bg-gray-800:hover { background-color: #e5e7eb !important; }

/* Portal tab bar — quiet selected state is defined in portal.html */
html[data-theme="light"] .portal-tab-btn.bg-gray-800 {
  background-color: transparent !important;
  color: #4b5563 !important;
}
html[data-theme="light"] .portal-tab-btn.active {
  background-color: #0F2A44 !important;
  color: #fff !important;
}

/* Filled CTAs keep white labels in light mode (body.text-white remaps to ink) */
html[data-theme="light"] .bw-accent-btn,
html[data-theme="light"] .portal-btn-primary,
html[data-theme="light"] .portal-btn-primary:hover,
html[data-theme="light"] .bw-accent-btn:hover,
html[data-theme="light"] .portal-chip-active,
html[data-theme="light"] .pending-alert-btn,
html[data-theme="light"] a.bg-red-600,
html[data-theme="light"] button.bg-red-600,
html[data-theme="light"] button.bg-green-600,
html[data-theme="light"] a.bg-green-600,
html[data-theme="light"] button.bg-green-700,
html[data-theme="light"] .portal-topup-btn,
html[data-theme="light"] button.bg-teal-600,
html[data-theme="light"] button.bg-pink-600,
html[data-theme="light"] button.bg-amber-600,
html[data-theme="light"] button.bg-blue-600,
html[data-theme="light"] #incomingCallDeclineBtn,
html[data-theme="light"] .conversation-row-active,
html[data-theme="light"] .bg-red-700 {
  color: #fff !important;
}

/* Connect / call page components */
html[data-theme="light"] .app-banner {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
  border-bottom-color: #d1d5db !important;
}

html[data-theme="light"] #gate-card-element,
html[data-theme="light"] #gate-card-element-payment {
  background: #ffffff !important;
  border-color: #d1d5db !important;
}

/* Messages */
html[data-theme="light"] .message-bubble-received {
  background: #e5e7eb !important;
  color: #111827 !important;
}

html[data-theme="light"] .attachment-btn {
  background: #e5e7eb !important;
  color: #374151 !important;
}

html[data-theme="light"] .attachment-btn:hover {
  background: #d1d5db !important;
}

html[data-theme="light"] .reply-quote {
  border-left-color: rgba(17, 24, 39, 0.25) !important;
}

html[data-theme="light"] .message-bubble-received .reply-quote {
  border-left-color: rgba(17, 24, 39, 0.2) !important;
}

html[data-theme="light"] .js-edit-composer textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

html[data-theme="light"] .js-edit-composer .btn-cancel {
  background: #e5e7eb !important;
  color: #374151 !important;
}

html[data-theme="light"] .js-edit-composer .btn-save {
  background: #0F2A44 !important;
  color: #ffffff !important;
}

/* Portal booking page builder (inline dark styles) */
html[data-theme="light"] .bpb-workflow {
  background: linear-gradient(145deg, #f9fafb 0%, #ffffff 50%, #f3f4f6 100%) !important;
  border-color: #e5e7eb !important;
}

html[data-theme="light"] .bpb-preview-wrap {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

html[data-theme="light"] .bpb-step-dot {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #6b7280 !important;
}

/* Live preview mirrors the published booking page — keep its palette, not portal light theme */
html[data-theme="light"] .bpb-preview-frame {
  color: #f3f4f6 !important;
}

html[data-theme="light"] .bpb-preview-frame .bpb-preview-header {
  background: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] .bpb-preview-frame .bpb-preview-field {
  background: rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="light"] .bpb-preview-frame .bpb-preview-btn {
  color: #ffffff !important;
}

html[data-theme="light"] .bpb-input {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

html[data-theme="light"] .bpb-input::placeholder {
  color: #9ca3af !important;
}

html[data-theme="light"] .bpb-chip,
html[data-theme="light"] .bpb-vibe {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

html[data-theme="light"] .bpb-chip:hover,
html[data-theme="light"] .bpb-vibe:hover {
  border-color: #9ca3af !important;
  color: #111827 !important;
}

html[data-theme="light"] .bpb-chip.selected,
html[data-theme="light"] .bpb-vibe.selected {
  border-color: #0F2A44 !important;
  background: rgba(0, 51, 102, 0.08) !important;
  color: #0F2A44 !important;
}

/* Modals keep a dark scrim for contrast */
html[data-theme="light"] .fixed.inset-0.bg-black,
html[data-theme="light"] .fixed.inset-0.bg-black.bg-opacity-75 {
  background-color: rgba(17, 24, 39, 0.55) !important;
}

/* Booking pages: keep surfaces light even when CSS vars were authored for dark */
html[data-theme="light"] {
  --surface-color: #ffffff;
  --border-color: #e5e7eb;
}