/**
 * DoorForce Typography + Contrast System
 * Load LAST (after doorforce-themes.css)
 * Fluid type with clamp(); WCAG AA contrast locks for all themes.
 */

:root,
html[data-df-theme],
html[data-df-theme] body {
  /* Fluid type scale (desktop → tablet → mobile) */
  --df-fs-page: clamp(22px, 1.6vw + 14px, 32px);
  --df-fs-hero: clamp(23px, 1.4vw + 14px, 30px);
  --df-fs-section: clamp(19px, 1.1vw + 12px, 22px);
  --df-fs-card: clamp(16px, 0.6vw + 12px, 18px);
  --df-fs-metric-label: clamp(15px, 0.7vw + 11px, 18px);
  --df-fs-metric-value: clamp(30px, 1.4vw + 20px, 38px);
  --df-fs-body: clamp(15px, 0.35vw + 13px, 16px);
  --df-fs-secondary: clamp(13px, 0.25vw + 11px, 14px);
  --df-fs-button: clamp(14px, 0.3vw + 12px, 15px);
  --df-fs-eyebrow: clamp(11px, 0.2vw + 10px, 12px);

  /* Light surface defaults (overridden per theme) */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #86efac;
  --df-surface-mode: light;
}

/* Light themes — explicit AA surface text */
html[data-df-theme="doorforce-professional"],
html[data-df-theme="industrial-gray"],
html[data-df-theme="construction-orange"],
html[data-df-theme="forest-green"],
html[data-df-theme="american-classic"],
html[data-df-theme="high-contrast"],
html[data-df-theme="doorforce-professional"] body,
html[data-df-theme="industrial-gray"] body,
html[data-df-theme="construction-orange"] body,
html[data-df-theme="forest-green"] body,
html[data-df-theme="american-classic"] body,
html[data-df-theme="high-contrast"] body {
  --df-surface-mode: light;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --df-text: #111827;
  --df-text-secondary: #374151;
  --df-text-muted: #6b7280;
  --text-main: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #86efac;
}

html[data-df-theme="construction-orange"],
html[data-df-theme="construction-orange"] body {
  --hero-eyebrow: #fdba74;
}

html[data-df-theme="forest-green"],
html[data-df-theme="forest-green"] body {
  --hero-eyebrow: #86efac;
}

html[data-df-theme="american-classic"],
html[data-df-theme="american-classic"] body {
  --hero-eyebrow: #fca5a5;
}

html[data-df-theme="high-contrast"],
html[data-df-theme="high-contrast"] body {
  --text-primary: #000000;
  --text-secondary: #000000;
  --text-muted: #111111;
  --surface-text: #000000;
  --df-text: #000000;
  --df-text-secondary: #000000;
  --df-text-muted: #111111;
  --hero-text: #ffffff;
  --hero-text-muted: #ffff00;
  --hero-eyebrow: #ffff00;
}

/* Dark themes — light text on dark surfaces */
html[data-df-theme="dark-mode"],
html[data-df-theme="midnight-blue"],
html[data-df-theme="dark-mode"] body,
html[data-df-theme="midnight-blue"] body {
  --df-surface-mode: dark;
  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-muted: #cbd5e1;
  --surface-text: #ffffff;
  --df-text: #ffffff;
  --df-text-secondary: #e5e7eb;
  --df-text-muted: #cbd5e1;
  --text-main: #ffffff;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #7dd3fc;
}

html[data-df-theme="dark-mode"],
html[data-df-theme="dark-mode"] body {
  --hero-eyebrow: #86efac;
}

/* ---------- Base ---------- */
html[data-df-theme] html,
html[data-df-theme] body {
  font-size: var(--df-fs-body) !important;
  color: var(--text-primary) !important;
  line-height: 1.45 !important;
}

html[data-df-theme] .app-container,
html[data-df-theme] .content-body,
html[data-df-theme] .main-content,
html[data-df-theme] .tab-panel {
  color: var(--text-primary) !important;
}

/* ---------- Page / section / card titles ---------- */
html[data-df-theme] #page-title,
html[data-df-theme] .page-header h1,
html[data-df-theme] .page-title-section h1 {
  font-size: var(--df-fs-page) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  color: var(--text-primary) !important;
  opacity: 1 !important;
  max-width: 100%;
}

html[data-df-theme] h2,
html[data-df-theme] .page-header h2,
html[data-df-theme] .df-tech-home-group h2,
html[data-df-theme] .df-jobs-list-header h2 {
  font-size: var(--df-fs-section) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  opacity: 1 !important;
  line-height: 1.25 !important;
}

html[data-df-theme] .card-title,
html[data-df-theme] .df-card-top h2,
html[data-df-theme] .df-card-top strong {
  font-size: var(--df-fs-card) !important;
  font-weight: 700 !important;
  color: var(--surface-text) !important;
  opacity: 1 !important;
  line-height: 1.3 !important;
}

html[data-df-theme] h3,
html[data-df-theme] h4,
html[data-df-theme] h5 {
  font-size: var(--df-fs-card) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

html[data-df-theme] p,
html[data-df-theme] li,
html[data-df-theme] td,
html[data-df-theme] .df-step-help,
html[data-df-theme] .df-jobs-empty {
  font-size: var(--df-fs-body) !important;
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

html[data-df-theme] .text-muted,
html[data-df-theme] small,
html[data-df-theme] .brand-subtitle,
html[data-df-theme] .metric-change {
  font-size: var(--df-fs-secondary) !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

html[data-df-theme] label,
html[data-df-theme] .df-field-label,
html[data-df-theme] .df-login-label {
  font-size: var(--df-fs-secondary) !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* Eyebrows — title case friendly, not oversized */
html[data-df-theme] .df-eyebrow {
  display: inline-block;
  font-size: var(--df-fs-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--df-accent) !important;
  opacity: 1 !important;
  margin-bottom: 4px;
}

html[data-df-theme] .btn,
html[data-df-theme] button.btn,
html[data-df-theme] .df-guided-action-btn,
html[data-df-theme] .df-complete-btn,
html[data-df-theme] .df-job-open-btn,
html[data-df-theme] .df-header-action-btn,
html[data-df-theme] .df-upload-btn {
  font-size: var(--df-fs-button) !important;
  font-weight: 600 !important;
}

/* ---------- Hero banner (always dark surface) ---------- */
html[data-df-theme] .df-executive-hero {
  padding: 16px 20px !important;
  margin-bottom: 18px !important;
  border-radius: 16px !important;
  gap: 16px !important;
  min-height: 0 !important;
  align-items: center !important;
  color: var(--hero-text) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(118, 184, 42, 0.16), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22) !important;
}

html[data-df-theme] .df-executive-hero *,
html[data-df-theme] .df-executive-hero h1,
html[data-df-theme] .df-executive-hero p,
html[data-df-theme] .df-executive-hero .df-eyebrow,
html[data-df-theme] .df-executive-hero span,
html[data-df-theme] .df-executive-hero strong {
  /* Never inherit page text colors into the dark banner */
  color: inherit;
}

html[data-df-theme] .df-executive-hero .df-eyebrow {
  color: var(--hero-eyebrow) !important;
  font-size: var(--df-fs-eyebrow) !important;
  margin-bottom: 2px !important;
}

html[data-df-theme] .df-executive-hero h1 {
  font-size: var(--df-fs-hero) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 4px 0 6px !important;
  color: #ffffff !important;
  max-width: 34ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 1 !important;
}

html[data-df-theme] .df-executive-hero p {
  margin: 0 !important;
  max-width: 62ch !important;
  font-size: var(--df-fs-secondary) !important;
  line-height: 1.4 !important;
  color: #d1d5db !important;
  opacity: 1 !important;
}

html[data-df-theme] .df-hero-actions {
  gap: 8px !important;
  flex-shrink: 0;
}

html[data-df-theme] .df-hero-btn {
  min-height: 44px !important;
  padding: 10px 16px !important;
  font-size: var(--df-fs-button) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  color: #111827 !important;
  background: linear-gradient(135deg, #f3a536, #f59e0b) !important;
}

html[data-df-theme] .df-hero-btn.secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.45) !important;
  box-shadow: none !important;
}

/* ---------- Dashboard metric cards ---------- */
html[data-df-theme] .metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

html[data-df-theme] .metric-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  min-height: 108px;
  background: var(--df-card) !important;
  color: var(--surface-text) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--df-shadow-sm) !important;
}

html[data-df-theme] .metric-info {
  min-width: 0;
  flex: 1 1 auto;
}

html[data-df-theme] .metric-info h3,
html[data-df-theme] .metric-card h3,
html[data-df-theme] .df-ops-kpi > span,
html[data-df-theme] .df-wo-stat > span {
  font-size: var(--df-fs-metric-label) !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1 !important;
}

html[data-df-theme] .metric-value,
html[data-df-theme] .metric-info .metric-value,
html[data-df-theme] .df-ops-kpi > strong,
html[data-df-theme] .df-wo-stat > strong {
  font-size: var(--df-fs-metric-value) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  color: var(--surface-text) !important;
  opacity: 1 !important;
  white-space: nowrap;
}

html[data-df-theme] .metric-icon-wrapper {
  flex: 0 0 48px;
  width: 48px !important;
  height: 48px !important;
  align-self: center;
}

/* ---------- Cards / dark panels contrast ---------- */
html[data-df-theme] .card,
html[data-df-theme] .metric-card,
html[data-df-theme] .df-wo-card,
html[data-df-theme] .df-wo-stat,
html[data-df-theme] .df-job-card,
html[data-df-theme] .df-ops-kpi,
html[data-df-theme] .df-live-map-card,
html[data-df-theme] .df-live-feed-card,
html[data-df-theme] .df-passport-card,
html[data-df-theme] .modal-content,
html[data-df-theme] .df-modal-card,
html[data-df-theme] .df-pause-modal-card,
html[data-df-theme] .table-wrapper,
html[data-df-theme] .top-navbar {
  color: var(--surface-text) !important;
}

html[data-df-theme] .card,
html[data-df-theme] .df-wo-card,
html[data-df-theme] .df-job-card,
html[data-df-theme] .df-ops-kpi {
  padding: 16px 18px !important;
}

html[data-df-theme] .card .card-title,
html[data-df-theme] .card h2,
html[data-df-theme] .card h3,
html[data-df-theme] .card strong,
html[data-df-theme] .metric-card strong,
html[data-df-theme] .df-wo-id,
html[data-df-theme] .df-wo-customer,
html[data-df-theme] .df-job-card-id,
html[data-df-theme] .df-job-card-customer {
  color: var(--surface-text) !important;
  opacity: 1 !important;
}

html[data-df-theme] .card p,
html[data-df-theme] .card li,
html[data-df-theme] .card td,
html[data-df-theme] .card label,
html[data-df-theme] .df-wo-grid span,
html[data-df-theme] .df-job-card-meta span {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

html[data-df-theme] .card .text-muted,
html[data-df-theme] .card small,
html[data-df-theme] .df-ops-kpi small {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* Dark gradient / navy panels outside hero */
html[data-df-theme] .df-dark-brand-panel,
html[data-df-theme] .df-command-banner,
html[data-df-theme] [class*="gradient"].df-banner {
  color: #ffffff !important;
}

html[data-df-theme] .sidebar .brand-subtitle {
  opacity: 1 !important;
  color: var(--df-nav-text) !important;
}

/* Inputs keep surface-appropriate text */
html[data-df-theme] .input-field,
html[data-df-theme] input,
html[data-df-theme] select,
html[data-df-theme] textarea {
  font-size: var(--df-fs-body) !important;
  color: var(--text-primary) !important;
}

html[data-df-theme] .input-field::placeholder,
html[data-df-theme] input::placeholder,
html[data-df-theme] textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1440px) {
  html[data-df-theme] .content-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 1366px) {
  html[data-df-theme] .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-df-theme] .df-executive-hero {
    padding: 14px 16px !important;
  }

  html[data-df-theme] .df-executive-hero h1 {
    max-width: 28ch;
  }
}

@media (max-width: 1024px) {
  html[data-df-theme] {
    --df-fs-page: 26px;
    --df-fs-hero: 25px;
    --df-fs-section: 20px;
    --df-fs-metric-label: 16px;
    --df-fs-metric-value: 32px;
    --df-fs-body: 15px;
    --df-fs-secondary: 14px;
    --df-fs-card: 17px;
    --df-fs-button: 15px;
  }

  html[data-df-theme] .df-executive-hero {
    flex-direction: column;
    align-items: flex-start !important;
  }

  html[data-df-theme] .df-hero-actions {
    width: 100%;
  }

  html[data-df-theme] .df-hero-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  html[data-df-theme] {
    --df-fs-page: 22px;
    --df-fs-hero: 23px;
    --df-fs-section: 19px;
    --df-fs-metric-label: 15px;
    --df-fs-metric-value: 30px;
    --df-fs-body: 15px;
    --df-fs-secondary: 13px;
    --df-fs-card: 16px;
    --df-fs-button: 15px;
  }

  html[data-df-theme] .metrics-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-df-theme] .metric-info h3,
  html[data-df-theme] .metric-card h3 {
    white-space: normal !important;
  }

  html[data-df-theme] .df-executive-hero h1 {
    max-width: 100%;
  }

  html[data-df-theme] .df-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  html[data-df-theme] .df-hero-btn {
    width: 100%;
  }
}

/* Prevent overflow on laptop widths */
@media (min-width: 1025px) and (max-width: 1440px) {
  html[data-df-theme] .dashboard-sections-grid,
  html[data-df-theme] .df-ops-center-grid {
    gap: 16px !important;
  }

  html[data-df-theme] .card,
  html[data-df-theme] .metric-card {
    overflow-wrap: anywhere;
  }

  html[data-df-theme] .metric-info h3 {
    white-space: nowrap !important;
  }
}