/* ═══════════════════════════════════════════
   THEME — theme.css (light / dark mode)
   Harbor & Helm theme
   ════════════════════════════════════════════ */

/* ── Dark Mode Overrides ── */
[data-theme="dark"] {
  --color-bg:           #07111C;
  --color-surface:      #0D1E2E;
  --color-surface-2:    #132636;
  --color-border:       #1C3350;
  --color-text:         #DCE8F0;
  --color-text-muted:   #6B8099;
  --color-text-subtle:  #374F63;

  --color-gray-50:  #091520;
  --color-gray-100: #0D1E2E;
  --color-gray-200: #132636;
  --color-gray-300: #1C3350;

  --color-accent-light: rgba(184,132,42,0.12);

  --color-info-bg:    rgba(29,95,166,0.18);
  --color-success-bg: rgba(26,122,74,0.18);
  --color-warning-bg: rgba(192,122,16,0.18);
  --color-danger-bg:  rgba(192,53,42,0.18);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.25);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.35);
}

/* Dark: input/select backgrounds */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border);
}
/* Preserve date status highlights in dark mode */
[data-theme="dark"] .lead-field-wrapper.lead-field-past-due  input[type="date"] {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}
[data-theme="dark"] .lead-field-wrapper.lead-field-due-today input[type="date"] {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-subtle);
}

/* Dark: hide custom select arrow (uses native or no arrow) */
[data-theme="dark"] select {
  background-image: none;
}

/* Dark: invert the browser-native date picker calendar icon */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Dark: table rows */
[data-theme="dark"] .leads-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}
[data-theme="dark"] .leads-table tbody tr:hover {
  background: rgba(184,132,42,0.09);
}
[data-theme="dark"] .leads-table thead {
  background: var(--color-surface-2);
}

/* Dark: modal */
[data-theme="dark"] .modal {
  background: var(--color-surface);
}
[data-theme="dark"] .modal-footer {
  background: var(--color-surface-2);
}

/* Dark: toast */
[data-theme="dark"] .toast {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Dark: sidebar stays dark — just adjust accent */
[data-theme="dark"] .sidebar {
  background: #05101A;
}

/* Dark: onboarding */
[data-theme="dark"] .onboarding-overlay {
  background: linear-gradient(135deg, #050F1A 0%, #0A1F33 100%);
}

/* Dark: card header hover */
[data-theme="dark"] .card-header.collapsible:hover {
  background: var(--color-surface-2);
}

/* Dark: field items */
[data-theme="dark"] .field-item:hover {
  background: var(--color-surface-2);
}
[data-theme="dark"] .field-item.drag-over {
  background: rgba(184,132,42,0.10);
}

/* Dark: template card */
[data-theme="dark"] .template-card:hover {
  background: rgba(184,132,42,0.10);
}

/* Dark: resize grip */
[data-theme="dark"] .resize-grip {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
[data-theme="dark"] .field-size-picker {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme="dark"] .size-btn:hover {
  background: var(--color-surface-2);
}

/* Smooth theme transition */
body,
.sidebar,
.card,
.modal,
input,
select,
textarea,
.top-header,
.leads-table tbody tr {
  transition:
    background-color var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow);
}