/* LaunchMyHVAC Design System v2 - Option A Enterprise Blue with Warm Accessibility */

:root {
  /* Color Palette - Option A + Warm Accessibility */
  --lmh-primary: #1a56db;           /* Brand blue (unified with shipped pages) */
  --lmh-primary-light: #1565C0;     /* Lighter blue for hover */
  --lmh-primary-lighter: #1976D2;   /* Even lighter for active states */
  --lmh-accent: #FF6F00;            /* Bold orange for CTAs */
  --lmh-accent-light: #FF8F00;      /* Lighter orange for hover */
  --lmh-success: #2E7D32;           /* Professional green */
  --lmh-warning: #F57C00;           /* Warm orange */
  --lmh-danger: #C62828;            /* Professional red */
  --lmh-info: #0288D1;              /* Information blue */
  
  /* Light Gray Background - Warm & Accessible */
  --lmh-bg: #F8FAFB;                /* Subtle warm white-gray */
  --lmh-bg-secondary: #FFFFFF;      /* Pure white for cards */
  --lmh-bg-hover: #F1F3F5;          /* Hover state background */
  
  /* Text Colors - Enterprise Dark */
  --lmh-text-primary: #212121;      /* Dark gray (not pure black) */
  --lmh-text-secondary: #616161;    /* Medium gray */
  --lmh-text-muted: #9E9E9E;        /* Light gray for muted text */
  --lmh-text-inverse: #FFFFFF;      /* White for on dark backgrounds */
  
  /* Borders & Dividers */
  --lmh-border: #dbe3ef;            /* Light gray-blue border (shipped value) */
  --lmh-border-light: #F0F0F0;      /* Very light border */
  --lmh-divider: #EEEEEE;           /* Divider color */
  
  /* Shadows - Modern Depth */
  --lmh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --lmh-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --lmh-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --lmh-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  
  /* Typography */
  --lmh-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --lmh-font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

  /* ── Legacy aliases consumed by in-app page templates (CR-P1 / CR-P2).
        Pages that drop their own :root block inherit these. ── */
  --lmh-blue: var(--lmh-primary);
  --lmh-blue-light: #3b82f6;
  --lmh-link: #1d4ed8;
  --lmh-dark: #f8fafb;
  --lmh-canvas: #f8fafb;
  --lmh-card: #ffffff;
  --lmh-text: #0f172a;
  --lmh-muted: #64748b;
  --lmh-green: #10b981;
  --lmh-red: #ef4444;
  --lmh-orange: #f59e0b;
  --lmh-yellow: #f59e0b;
  --lmh-purple: #8b5cf6;
  --lmh-green-bg: #f0fdf4;
}

/* ===========================
   GLOBAL STYLES
   =========================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--lmh-bg);
  color: var(--lmh-text-primary);
  font-family: var(--lmh-font-family);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Remove Bootstrap's default dark mode reset */
body, .bg-light { background-color: var(--lmh-bg) !important; }

/* ===========================
   TOPBAR / NAVIGATION
   =========================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--lmh-bg-secondary);
  border-bottom: 1px solid var(--lmh-border-light);
  box-shadow: var(--lmh-shadow-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.topbar .wrap {
  padding: 14px 16px;
}

.brand {
  color: var(--lmh-primary);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.brand span {
  color: var(--lmh-accent);
}

/* ===========================
   CONTAINER & WRAPPER
   =========================== */

.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 16px 120px;
}

@media (max-width: 640px) {
  .wrap {
    padding: 16px 12px 120px;
  }
}

/* ===========================
   MODE PILL / STATUS INDICATOR
   =========================== */

.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 8px 12px;
  border: 1px solid rgba(46, 125, 50, 0.3);
  background: rgba(46, 125, 50, 0.08);
  color: var(--lmh-success);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===========================
   CARDS
   =========================== */

.card-lmh {
  background: var(--lmh-bg-secondary);
  border: 1px solid var(--lmh-border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: var(--lmh-shadow-sm);
  transition: all 0.2s ease;
}

.card-lmh:hover {
  box-shadow: var(--lmh-shadow-md);
  border-color: var(--lmh-border);
}

/* ===========================
   METRICS / KPI DISPLAYS
   =========================== */

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}

.metric {
  background: var(--lmh-bg-secondary);
  border: 1px solid var(--lmh-border-light);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--lmh-shadow-sm);
  transition: all 0.2s ease;
}

.metric:hover {
  border-color: var(--lmh-primary-light);
  box-shadow: var(--lmh-shadow-md);
}

.metric .label {
  color: var(--lmh-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}

.metric .value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--lmh-primary);
  margin-bottom: 4px;
}

.metric .value span {
  font-size: 14px;
  color: var(--lmh-accent);
  margin-left: 6px;
  font-weight: 600;
}

@media (max-width: 560px) {
  .metrics {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   QUICK ACTIONS
   =========================== */

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid var(--lmh-border);
  color: var(--lmh-text-primary);
  text-decoration: none;
  background: var(--lmh-bg-secondary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--lmh-shadow-sm);
}

.quick-btn:hover {
  background: var(--lmh-bg-hover);
  border-color: var(--lmh-primary);
  box-shadow: var(--lmh-shadow-md);
  color: var(--lmh-primary);
}

.quick-btn.primary {
  border: none;
  background: linear-gradient(135deg, var(--lmh-primary) 0%, var(--lmh-primary-light) 100%);
  color: var(--lmh-text-inverse);
  font-weight: 700;
}

.quick-btn.primary:hover {
  background: linear-gradient(135deg, var(--lmh-primary-light) 0%, var(--lmh-primary-lighter) 100%);
  box-shadow: var(--lmh-shadow-lg);
  color: var(--lmh-text-inverse);
}

.quick-btn i {
  font-size: 18px;
}

@media (max-width: 560px) {
  .quick-actions {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   JOB ITEMS
   =========================== */

.job-item {
  border: 1px solid var(--lmh-border);
  border-radius: 10px;
  background: var(--lmh-bg-secondary);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--lmh-shadow-sm);
  transition: all 0.2s ease;
}

.job-item:hover {
  box-shadow: var(--lmh-shadow-md);
  border-color: var(--lmh-primary-light);
}

.job-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.job-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--lmh-text-primary);
}

.job-meta {
  margin-top: 6px;
  color: var(--lmh-text-secondary);
  font-size: 13px;
}

/* ===========================
   STATUS BADGES
   =========================== */

.status {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  font-size: 11px;
  padding: 4px 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.status.scheduled {
  background: rgba(13, 71, 161, 0.12);
  color: var(--lmh-primary);
}

.status.en_route {
  background: rgba(255, 111, 0, 0.12);
  color: var(--lmh-accent);
}

.status.arrived {
  background: rgba(46, 125, 50, 0.12);
  color: var(--lmh-success);
}

.status.diagnosing {
  background: rgba(2, 136, 209, 0.12);
  color: var(--lmh-info);
}

.status.waiting_on_part {
  background: rgba(198, 40, 40, 0.12);
  color: var(--lmh-danger);
}

.status.in_progress {
  background: rgba(46, 125, 50, 0.12);
  color: var(--lmh-success);
}

.status.default {
  background: rgba(158, 158, 158, 0.12);
  color: var(--lmh-text-secondary);
}

/* ===========================
   JOB ACTIONS
   =========================== */

.job-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.job-actions.has-alt {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tiny-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--lmh-border);
  background: var(--lmh-bg-hover);
  color: var(--lmh-text-primary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tiny-btn:hover {
  background: var(--lmh-primary);
  border-color: var(--lmh-primary);
  color: var(--lmh-text-inverse);
  box-shadow: var(--lmh-shadow-md);
}

.tiny-btn.alt-complete {
  background: rgba(46, 125, 50, 0.12);
  color: var(--lmh-success);
  border-color: rgba(46, 125, 50, 0.3);
}

.tiny-btn.alt-complete:hover {
  background: var(--lmh-success);
  border-color: var(--lmh-success);
  color: var(--lmh-text-inverse);
}

.tiny-btn i {
  font-size: 14px;
}

@media (max-width: 560px) {
  .job-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  .job-actions.has-alt {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================
   ADMIN LINK
   =========================== */

.admin-link {
  color: var(--lmh-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-link:hover {
  color: var(--lmh-primary);
}

/* ===========================
   HEADINGS & TEXT
   =========================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--lmh-text-primary);
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 16px;
  margin: 0;
  color: var(--lmh-text-primary);
}

p {
  color: var(--lmh-text-secondary);
  margin: 0 0 10px 0;
}

a {
  color: var(--lmh-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--lmh-primary-light);
  text-decoration: underline;
}

/* ===========================
   PRIMARY BOTTOM NAVIGATION (.nav-bottom)
   Used by the standard LMH pages (jobs, customers, schedule, invoices,
   etc.). The field-tech home uses the richer .field-bottom-nav below.
   Migrated out of per-page <style> blocks May 17 2026 (R12b).
   =========================== */

.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid var(--lmh-border);
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-bottom .nav-link {
  color: var(--lmh-muted);
  font-size: 0.7rem;
  text-align: center;
  padding: 8px 0;
}

.nav-bottom .nav-link.active {
  color: var(--lmh-blue);
}

.nav-bottom .nav-link i {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 2px;
}

html[data-lmh-theme="dark"] .nav-bottom {
  background: var(--lmh-card);
}

/* ===========================
   FIELD BOTTOM NAVIGATION
   =========================== */

.field-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  border-top: 1px solid var(--lmh-border);
  background: rgba(248, 250, 251, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.field-bottom-nav a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 10px;
  min-height: 54px;
  border: 1px solid transparent;
  color: var(--lmh-text-secondary);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}

.field-bottom-nav a i {
  font-size: 20px;
  line-height: 1;
  color: var(--lmh-text-secondary);
  transition: all 0.2s ease;
}

.field-bottom-nav a:hover {
  background: var(--lmh-bg-hover);
  color: var(--lmh-primary);
}

.field-bottom-nav a:hover i {
  color: var(--lmh-primary);
}

.field-bottom-nav a.active {
  border-color: var(--lmh-primary);
  background: rgba(13, 71, 161, 0.08);
  color: var(--lmh-primary);
}

.field-bottom-nav a.active i {
  color: var(--lmh-primary);
}

/* ===========================
   UTILITIES
   =========================== */

.text-primary {
  color: var(--lmh-primary) !important;
}

.text-secondary {
  color: var(--lmh-text-secondary) !important;
}

.text-muted {
  color: var(--lmh-text-muted) !important;
}

.text-success {
  color: var(--lmh-success) !important;
}

.text-danger {
  color: var(--lmh-danger) !important;
}

.bg-light {
  background-color: var(--lmh-bg-secondary) !important;
}

.border {
  border-color: var(--lmh-border) !important;
}

/* ===========================
   PENDING BADGE
   =========================== */

.pending-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--lmh-warning);
  background: rgba(255, 111, 0, 0.08);
  border: 1px solid rgba(255, 111, 0, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
}

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

@media (max-width: 768px) {
  .wrap {
    padding: 16px 12px 120px;
  }
  
  .card-lmh {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 12px 10px 120px;
  }
  
  body {
    font-size: 13px;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
  
  .quick-btn {
    min-height: 44px;
  }
}

/* =====================================================================
   LMH DESIGN SYSTEM v3 — UI POLISH SPRINT (May 14, 2026)
   Additions: dark-mode tokens, button intents, form polish, toasts,
   empty states, skeletons, density utilities, mobile, print styles.
   Backwards compatible — all pre-existing classes untouched.
   ===================================================================== */

/* ---------- Extended tokens (spacing/type/radius/dark mode) ---------- */
:root {
  --lmh-space-1: 4px;  --lmh-space-2: 8px;  --lmh-space-3: 12px;
  --lmh-space-4: 16px; --lmh-space-5: 20px; --lmh-space-6: 24px;
  --lmh-space-7: 32px; --lmh-space-8: 40px;

  --lmh-text-xs: 11px; --lmh-text-sm: 12px; --lmh-text-base: 14px;
  --lmh-text-lg: 16px; --lmh-text-xl: 18px; --lmh-text-2xl: 22px;
  --lmh-text-3xl: 28px; --lmh-text-4xl: 36px;

  --lmh-radius-sm: 6px;  --lmh-radius-md: 10px;
  --lmh-radius-lg: 14px; --lmh-radius-pill: 999px;

  --lmh-focus-ring: 0 0 0 3px rgba(13, 71, 161, 0.18);
  --lmh-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode override — opt-in via [data-lmh-theme="dark"] on <html>. */
html[data-lmh-theme="dark"] {
  --lmh-primary: #4FC3F7;
  --lmh-primary-light: #81D4FA;
  --lmh-primary-lighter: #B3E5FC;
  --lmh-accent: #FFB74D;
  --lmh-accent-light: #FFCC80;
  --lmh-success: #66BB6A;
  --lmh-warning: #FFB74D;
  --lmh-danger: #EF5350;
  --lmh-info: #4FC3F7;

  --lmh-bg: #0F1419;
  --lmh-bg-secondary: #1A1F26;
  --lmh-bg-hover: #232A33;

  --lmh-text-primary: #E8EAED;
  --lmh-text-secondary: #B0B7C0;
  --lmh-text-muted: #757D87;
  --lmh-text-inverse: #0F1419;

  --lmh-border: #2A3340;
  --lmh-border-light: #232A33;
  --lmh-divider: #2A3340;

  --lmh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lmh-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --lmh-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.55);
  --lmh-focus-ring: 0 0 0 3px rgba(79, 195, 247, 0.28);
}
html[data-lmh-theme="dark"] body { background: var(--lmh-bg); color: var(--lmh-text-primary); }
html[data-lmh-theme="dark"] body, html[data-lmh-theme="dark"] .bg-light { background-color: var(--lmh-bg) !important; }

/* ---------- R12d Dark-mode parity overrides ----------
   Many LMH pages have inline <style> blocks declaring literal #ffffff
   backgrounds on .navbar-lmh / .card-lmh / .mobile-task-nav / #aiDrawer /
   the AI chat surfaces / search input groups. Those literal hex values
   ignore the design-system vars, so dark theme leaves white cards on a
   dark page. The rules below win via the higher-specificity
   `html[data-lmh-theme="dark"] <selector>` form and use !important on the
   couple of inline-styled elements (search input-group, dashboard
   white-card div) where the inline style="" attr would otherwise win.
   Touching the design-system CSS in one place avoids editing 14 templates. */
html[data-lmh-theme="dark"] .navbar-lmh,
html[data-lmh-theme="dark"] .mobile-task-nav,
html[data-lmh-theme="dark"] .ai-drawer-header,
html[data-lmh-theme="dark"] .ai-drawer-footer,
html[data-lmh-theme="dark"] #aiDrawer {
  background: var(--lmh-bg-secondary);
  border-color: var(--lmh-border);
  color: var(--lmh-text-primary);
}
html[data-lmh-theme="dark"] .card-lmh {
  background: var(--lmh-bg-secondary);
  border-color: var(--lmh-border);
  color: var(--lmh-text-primary);
}
/* Brand wordmark - applies to every page that uses .brand-logo (CR-P? 2026-05-23).
   Previously defined only inline in dashboard.html, leaving Invoices and other pages
   with an unstyled "LaunchMyHVAC" wordmark. Promoting to the design system. */
.brand-logo {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--lmh-primary, #1a56db);
  letter-spacing: -0.5px;
  text-decoration: none;
}
.brand-logo span { color: var(--lmh-text, #0f172a); }
html[data-lmh-theme="dark"] .brand-logo span { color: var(--lmh-text-primary); }
html[data-lmh-theme="dark"] .ai-msg.assistant {
  background: var(--lmh-bg-hover);
  color: var(--lmh-text-primary);
  border-color: var(--lmh-border);
}
html[data-lmh-theme="dark"] #aiAnswer { color: var(--lmh-text-primary); }
html[data-lmh-theme="dark"] .stat-label,
html[data-lmh-theme="dark"] .text-muted {
  color: var(--lmh-text-muted) !important;
}
/* Form controls inside modals/cards */
html[data-lmh-theme="dark"] #addModal .form-control,
html[data-lmh-theme="dark"] .modal-content .form-control,
html[data-lmh-theme="dark"] .modal-content .form-select {
  background: var(--lmh-bg-secondary) !important;
  border-color: var(--lmh-border) !important;
  color: var(--lmh-text-primary) !important;
}
html[data-lmh-theme="dark"] .modal-content {
  background: var(--lmh-bg-secondary);
  color: var(--lmh-text-primary);
}
html[data-lmh-theme="dark"] .modal-header,
html[data-lmh-theme="dark"] .modal-footer {
  border-color: var(--lmh-border);
}
/* Bootstrap input-group prepends (e.g., customer search icon) */
html[data-lmh-theme="dark"] .input-group-text {
  background: var(--lmh-bg-secondary) !important;
  border-color: var(--lmh-border) !important;
  color: var(--lmh-text-muted) !important;
}
/* Bootstrap list-group rows used on jobs/customers/pricebook lists */
html[data-lmh-theme="dark"] .list-group-item {
  background: var(--lmh-bg-secondary);
  color: var(--lmh-text-primary);
  border-color: var(--lmh-border);
}
/* Pricebook category tiles + job-row click rows commonly use inline #f8fafc */
html[data-lmh-theme="dark"] .job-row,
html[data-lmh-theme="dark"] .pricebook-item,
html[data-lmh-theme="dark"] .category-tile {
  background: var(--lmh-bg-secondary);
  border-color: var(--lmh-border);
  color: var(--lmh-text-primary);
}
html[data-lmh-theme="dark"] .job-row:hover,
html[data-lmh-theme="dark"] .pricebook-item:hover,
html[data-lmh-theme="dark"] .category-tile:hover {
  background: var(--lmh-bg-hover);
}
/* Tables (e.g., team list, invoice line items in detail panes) */
html[data-lmh-theme="dark"] .table {
  --bs-table-bg: transparent;
  color: var(--lmh-text-primary);
  border-color: var(--lmh-border);
}
html[data-lmh-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--lmh-text-primary);
  border-color: var(--lmh-border);
}
html[data-lmh-theme="dark"] .table thead th { color: var(--lmh-text-secondary); }
/* Onboarding overlay card already uses var(--lmh-card) — but legacy alias */
html[data-lmh-theme="dark"] {
  --lmh-card: var(--lmh-bg-secondary);
  --lmh-text: var(--lmh-text-primary);
  --lmh-muted: var(--lmh-text-muted);
  --lmh-dark: var(--lmh-bg);
}

/* ---------- Focus visible ring (a11y) ---------- */
*:focus { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  box-shadow: var(--lmh-focus-ring);
  border-color: var(--lmh-primary);
}

/* ---------- Button intent system (.lmh-btn-*).
   Legacy aliases (.btn-primary-lmh / .btn-lmh-primary / .btn-login) get the
   same canonical structural styles so in-app pages adopt them for free where
   they don't override (CR-P6). ---------- */
.lmh-btn, .btn-primary-lmh, .btn-lmh-primary, .btn-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border-radius: var(--lmh-radius-md); border: 1px solid transparent;
  font-family: var(--lmh-font-family);
  font-size: var(--lmh-text-base); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background var(--lmh-transition), border-color var(--lmh-transition),
              color var(--lmh-transition), box-shadow var(--lmh-transition), transform var(--lmh-transition);
  white-space: nowrap; user-select: none;
}
.lmh-btn:active, .btn-primary-lmh:active, .btn-lmh-primary:active, .btn-login:active { transform: translateY(1px); }
.lmh-btn[disabled], .lmh-btn.is-disabled,
.btn-primary-lmh[disabled], .btn-primary-lmh.is-disabled,
.btn-lmh-primary[disabled], .btn-lmh-primary.is-disabled,
.btn-login[disabled], .btn-login.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.lmh-btn.lmh-btn-sm { min-height: 32px; padding: 0 12px; font-size: var(--lmh-text-sm); }
.lmh-btn.lmh-btn-lg { min-height: 48px; padding: 0 20px; font-size: var(--lmh-text-lg); }
.lmh-btn.lmh-btn-block { width: 100%; }

.lmh-btn-primary, .btn-primary-lmh, .btn-lmh-primary, .btn-login { background: var(--lmh-primary); color: var(--lmh-text-inverse); }
.lmh-btn-primary:hover, .btn-primary-lmh:hover, .btn-lmh-primary:hover, .btn-login:hover { background: var(--lmh-primary-light); box-shadow: var(--lmh-shadow-md); color: var(--lmh-text-inverse); }
.lmh-btn-success { background: var(--lmh-success); color: #fff; }
.lmh-btn-success:hover { background: #1B5E20; color: #fff; box-shadow: var(--lmh-shadow-md); }
.lmh-btn-danger { background: var(--lmh-danger); color: #fff; }
.lmh-btn-danger:hover { background: #B71C1C; color: #fff; box-shadow: var(--lmh-shadow-md); }
.lmh-btn-warning { background: var(--lmh-warning); color: #fff; }
.lmh-btn-warning:hover { background: #E65100; color: #fff; box-shadow: var(--lmh-shadow-md); }
.lmh-btn-accent { background: var(--lmh-accent); color: #fff; }
.lmh-btn-accent:hover { background: var(--lmh-accent-light); color: #fff; box-shadow: var(--lmh-shadow-md); }
.lmh-btn-ghost { background: transparent; color: var(--lmh-text-primary); border-color: var(--lmh-border); }
.lmh-btn-ghost:hover { background: var(--lmh-bg-hover); color: var(--lmh-primary); border-color: var(--lmh-primary); }
.lmh-btn-link { background: transparent; color: var(--lmh-primary); padding: 0; min-height: auto; }
.lmh-btn-link:hover { color: var(--lmh-primary-light); text-decoration: underline; }

/* ---------- Bootstrap btn intent retheming (so existing .btn .btn-primary etc adopt our palette) ---------- */
.btn { font-family: var(--lmh-font-family); font-weight: 600; border-radius: var(--lmh-radius-md); transition: var(--lmh-transition); }
.btn-primary, .btn.btn-primary { background-color: var(--lmh-primary) !important; border-color: var(--lmh-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn.btn-primary:hover { background-color: var(--lmh-primary-light) !important; border-color: var(--lmh-primary-light) !important; }
.btn-success, .btn.btn-success { background-color: var(--lmh-success) !important; border-color: var(--lmh-success) !important; }
.btn-danger, .btn.btn-danger { background-color: var(--lmh-danger) !important; border-color: var(--lmh-danger) !important; }
.btn-warning, .btn.btn-warning { background-color: var(--lmh-warning) !important; border-color: var(--lmh-warning) !important; color: #fff !important; }
.btn-info, .btn.btn-info { background-color: var(--lmh-info) !important; border-color: var(--lmh-info) !important; color: #fff !important; }
.btn-secondary, .btn.btn-secondary { background-color: var(--lmh-text-secondary) !important; border-color: var(--lmh-text-secondary) !important; }
.btn-outline-primary { color: var(--lmh-primary) !important; border-color: var(--lmh-primary) !important; }
.btn-outline-primary:hover { background-color: var(--lmh-primary) !important; color: #fff !important; }

/* ---------- Form polish ---------- */
.lmh-form-group { margin-bottom: var(--lmh-space-4); }
.lmh-label {
  display: block; font-size: var(--lmh-text-sm); font-weight: 600;
  color: var(--lmh-text-secondary); margin-bottom: var(--lmh-space-2);
  text-transform: none; letter-spacing: 0;
}
.lmh-label .lmh-required { color: var(--lmh-danger); margin-left: 2px; }
.lmh-input, .lmh-select, .lmh-textarea, input.form-control, select.form-control,
textarea.form-control, .form-control {
  width: 100%;
  background: var(--lmh-bg-secondary);
  border: 1px solid var(--lmh-border);
  color: var(--lmh-text-primary);
  border-radius: var(--lmh-radius-md);
  padding: 10px 12px; min-height: 40px;
  font-family: var(--lmh-font-family); font-size: var(--lmh-text-base);
  line-height: 1.4;
  transition: border-color var(--lmh-transition), box-shadow var(--lmh-transition);
}
.lmh-textarea, textarea.form-control { min-height: 96px; resize: vertical; }
.lmh-input:focus, .lmh-select:focus, .lmh-textarea:focus,
input.form-control:focus, select.form-control:focus, textarea.form-control:focus, .form-control:focus {
  border-color: var(--lmh-primary);
  box-shadow: var(--lmh-focus-ring);
  outline: none;
}
.lmh-input::placeholder, textarea.form-control::placeholder, input.form-control::placeholder {
  color: var(--lmh-text-muted);
}
.lmh-help { font-size: var(--lmh-text-sm); color: var(--lmh-text-muted); margin-top: 4px; }
.lmh-error { font-size: var(--lmh-text-sm); color: var(--lmh-danger); margin-top: 4px; display: none; }
.lmh-form-group.has-error .lmh-error { display: block; }
.lmh-form-group.has-error .lmh-input,
.lmh-form-group.has-error .form-control { border-color: var(--lmh-danger); box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12); }
.lmh-form-group.has-success .lmh-input,
.lmh-form-group.has-success .form-control { border-color: var(--lmh-success); }

/* ---------- Empty state ---------- */
.lmh-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
  background: var(--lmh-bg-secondary);
  border: 1px dashed var(--lmh-border);
  border-radius: var(--lmh-radius-lg);
  color: var(--lmh-text-secondary);
  margin: 16px 0;
}
.lmh-empty-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lmh-bg-hover); color: var(--lmh-primary);
  margin-bottom: var(--lmh-space-4); font-size: 28px;
}
.lmh-empty-title {
  font-size: var(--lmh-text-xl); font-weight: 700;
  color: var(--lmh-text-primary); margin-bottom: var(--lmh-space-2);
}
.lmh-empty-msg { font-size: var(--lmh-text-base); color: var(--lmh-text-secondary); max-width: 360px; margin-bottom: var(--lmh-space-4); }
.lmh-empty-actions { display: flex; gap: var(--lmh-space-3); flex-wrap: wrap; justify-content: center; }

/* ---------- Skeleton loader ---------- */
.lmh-skeleton {
  display: inline-block; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--lmh-bg-hover) 0%, var(--lmh-border-light) 50%, var(--lmh-bg-hover) 100%);
  background-size: 200% 100%;
  animation: lmh-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--lmh-radius-sm); height: 16px; width: 100%;
}
.lmh-skeleton.lmh-skeleton-line { height: 14px; margin-bottom: 8px; }
.lmh-skeleton.lmh-skeleton-line.short { width: 60%; }
.lmh-skeleton.lmh-skeleton-title { height: 22px; width: 50%; margin-bottom: 12px; }
.lmh-skeleton.lmh-skeleton-card { height: 96px; border-radius: var(--lmh-radius-md); }
.lmh-skeleton.lmh-skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
@keyframes lmh-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.lmh-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--lmh-border);
  border-top-color: var(--lmh-primary);
  border-radius: 50%;
  animation: lmh-spinner-rotate 0.7s linear infinite;
  vertical-align: -3px;
}
.lmh-spinner.lmh-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes lmh-spinner-rotate { to { transform: rotate(360deg); } }

/* ---------- Toast notifications ---------- */
#lmh-toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: calc(100vw - 32px);
}
.lmh-toast {
  pointer-events: auto;
  min-width: 280px; max-width: 420px;
  background: var(--lmh-bg-secondary);
  border: 1px solid var(--lmh-border);
  border-left: 4px solid var(--lmh-primary);
  border-radius: var(--lmh-radius-md);
  padding: 12px 16px;
  display: flex; align-items: flex-start; gap: 10px;
  box-shadow: var(--lmh-shadow-lg);
  color: var(--lmh-text-primary);
  font-size: var(--lmh-text-base);
  animation: lmh-toast-slide-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lmh-toast.lmh-toast-success { border-left-color: var(--lmh-success); }
.lmh-toast.lmh-toast-error,
.lmh-toast.lmh-toast-danger { border-left-color: var(--lmh-danger); }
.lmh-toast.lmh-toast-warning { border-left-color: var(--lmh-warning); }
.lmh-toast.lmh-toast-info { border-left-color: var(--lmh-info); }
.lmh-toast-icon { font-size: 18px; line-height: 1; margin-top: 1px; flex-shrink: 0; }
.lmh-toast-success .lmh-toast-icon { color: var(--lmh-success); }
.lmh-toast-error .lmh-toast-icon, .lmh-toast-danger .lmh-toast-icon { color: var(--lmh-danger); }
.lmh-toast-warning .lmh-toast-icon { color: var(--lmh-warning); }
.lmh-toast-info .lmh-toast-icon { color: var(--lmh-info); }
.lmh-toast-body { flex: 1; line-height: 1.4; }
.lmh-toast-title { font-weight: 700; margin-bottom: 2px; }
.lmh-toast-close {
  background: none; border: none; cursor: pointer; color: var(--lmh-text-muted);
  font-size: 16px; padding: 2px 4px; line-height: 1; flex-shrink: 0;
}
.lmh-toast-close:hover { color: var(--lmh-text-primary); }
.lmh-toast.lmh-toast-leaving { animation: lmh-toast-slide-out 200ms ease-in forwards; }
@keyframes lmh-toast-slide-in {
  from { opacity: 0; transform: translateX(120%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lmh-toast-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(120%); }
}

/* ---------- Tour overlay ---------- */
.lmh-tour-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  z-index: 9990; opacity: 0; transition: opacity 200ms ease;
  pointer-events: none;
}
.lmh-tour-backdrop.is-active { opacity: 1; pointer-events: auto; }
.lmh-tour-card {
  position: fixed; z-index: 9991;
  background: var(--lmh-bg-secondary);
  border: 1px solid var(--lmh-border);
  border-radius: var(--lmh-radius-lg);
  box-shadow: var(--lmh-shadow-xl, var(--lmh-shadow-lg));
  padding: 20px; max-width: 360px; width: calc(100vw - 32px);
  color: var(--lmh-text-primary);
}
.lmh-tour-step { font-size: var(--lmh-text-xs); color: var(--lmh-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 6px; }
.lmh-tour-title { font-size: var(--lmh-text-xl); font-weight: 800; color: var(--lmh-text-primary); margin-bottom: 8px; }
.lmh-tour-body { font-size: var(--lmh-text-base); color: var(--lmh-text-secondary); margin-bottom: 16px; line-height: 1.5; }
.lmh-tour-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.lmh-tour-skip { color: var(--lmh-text-muted); background: none; border: none; cursor: pointer; font-size: var(--lmh-text-sm); margin-right: auto; }
.lmh-tour-skip:hover { color: var(--lmh-text-primary); }

/* ---------- Density utilities ---------- */
.lmh-stack > * + * { margin-top: var(--lmh-space-3); }
.lmh-stack-sm > * + * { margin-top: var(--lmh-space-2); }
.lmh-stack-lg > * + * { margin-top: var(--lmh-space-5); }
.lmh-row { display: flex; gap: var(--lmh-space-3); align-items: center; flex-wrap: wrap; }
.lmh-row-tight { gap: var(--lmh-space-2); }
.lmh-grow { flex: 1 1 auto; min-width: 0; }
.lmh-section { margin-top: var(--lmh-space-6); }
.lmh-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lmh-space-3); margin-bottom: var(--lmh-space-4);
  padding-bottom: var(--lmh-space-3); border-bottom: 1px solid var(--lmh-border-light);
}
.lmh-section-title { font-size: var(--lmh-text-xl); font-weight: 700; color: var(--lmh-text-primary); margin: 0; letter-spacing: -0.01em; }

/* ---------- Dark-mode toggle button (anchored top-right) ---------- */
.lmh-theme-toggle {
  position: fixed; bottom: 80px; right: 16px; z-index: 9000;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--lmh-bg-secondary);
  border: 1px solid var(--lmh-border);
  box-shadow: var(--lmh-shadow-md);
  cursor: pointer; color: var(--lmh-text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--lmh-transition); font-size: 18px;
}
.lmh-theme-toggle:hover { background: var(--lmh-bg-hover); color: var(--lmh-primary); transform: translateY(-2px); }
@media print { .lmh-theme-toggle, #lmh-toast-container, .lmh-tour-backdrop, .lmh-tour-card { display: none !important; } }

/* ---------- Customer dashboard summary card ---------- */
.lmh-summary {
  background: linear-gradient(135deg, var(--lmh-primary) 0%, var(--lmh-primary-light) 100%);
  border-radius: var(--lmh-radius-lg);
  padding: var(--lmh-space-5);
  color: #fff;
  margin-bottom: var(--lmh-space-5);
  box-shadow: var(--lmh-shadow-md);
}
.lmh-summary h2 { color: #fff; margin: 0 0 var(--lmh-space-3) 0; font-size: var(--lmh-text-2xl); font-weight: 800; }
.lmh-summary-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lmh-space-3); }
.lmh-summary-stat .label { font-size: var(--lmh-text-xs); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; font-weight: 700; }
.lmh-summary-stat .value { font-size: var(--lmh-text-3xl); font-weight: 800; line-height: 1.1; margin-top: 4px; }
@media (max-width: 640px) { .lmh-summary-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Mobile field-tech surfaces (44px hit targets) ---------- */
@media (max-width: 640px) {
  .lmh-btn, .btn, .quick-btn, .tiny-btn { min-height: 44px; }
  .lmh-input, .form-control, input, select, textarea { font-size: 16px; min-height: 44px; }  /* prevents iOS zoom */
  .lmh-section-header { flex-direction: column; align-items: flex-start; }
  table { font-size: var(--lmh-text-sm); }
  .lmh-summary { padding: var(--lmh-space-4); }
}

/* ---------- Print / PDF ---------- */
@media print {
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .topbar, .sidebar, .lmh-bottom-nav, .no-print, nav, .navbar, .lmh-theme-toggle { display: none !important; }
  .wrap { max-width: 100% !important; padding: 0 !important; }
  .card-lmh, .card { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
  .lmh-btn, .btn { display: none !important; }
  .lmh-print-only { display: block !important; }
  table { page-break-inside: auto; border-collapse: collapse; width: 100%; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  th, td { border: 1px solid #ddd !important; padding: 6px !important; }
  h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
}
.lmh-print-only { display: none; }

/* ---------- Onboarding nudge banner ---------- */
.lmh-nudge {
  background: linear-gradient(135deg, rgba(13, 71, 161, 0.06), rgba(255, 111, 0, 0.05));
  border: 1px solid var(--lmh-primary);
  border-radius: var(--lmh-radius-lg);
  padding: var(--lmh-space-4);
  display: flex; align-items: center; gap: var(--lmh-space-3);
  margin-bottom: var(--lmh-space-4);
}
.lmh-nudge-icon { font-size: 28px; flex-shrink: 0; }
.lmh-nudge-body { flex: 1; }
.lmh-nudge-title { font-weight: 700; color: var(--lmh-primary); margin-bottom: 2px; }
.lmh-nudge-msg { font-size: var(--lmh-text-sm); color: var(--lmh-text-secondary); }
.lmh-nudge-close { background: none; border: none; cursor: pointer; color: var(--lmh-text-muted); font-size: 18px; line-height: 1; }

/* ---------- Lucide icon baseline ---------- */
.lucide,
.lmh-lucide-slot svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  vertical-align: -0.125em;
}
.lmh-lucide-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}