/* mobile-app.css — Global mobile-FIRST native-app feel for all pages
 * Owns: card depth, badge pills, action buttons, section headers,
 *       stats rows, bottom nav dark theme, header bar, layout lock, typography
 * Does NOT own: desktop layout (>1024px), page-specific JS, routing
 * Single source of truth for mobile styling. Loaded on EVERY page.
 * Mobile-first: base rules are mobile, min-width queries add desktop overrides.
 */

/* 1. GLOBAL CARD STYLE — depth everywhere */
.card, .stat-card, .kpi-card, .lead-card, .proposal-card,
.agent-card, .feedback-card, .worker-card, .health-card,
.metric-card, .training-card, .ai-card, .progress-card,
.install-card, .role-card, .profile-card, .doc-card,
.history-card, .join-card, .unlock-card, .path-card,
.error-card, .loading-card,
.msh-job-card, .msh-stat-card, .msh-sched-card {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 2. GLOBAL STATUS BADGE PILLS — pill shape, 11px, coloured */
.badge, .status-badge, .lead-badge, .role-badge,
.topbar-badge, .agent-status-badge, .hero-badge,
.header-badge, .badge-pill, .draft-type-badge,
.status-chip, [class*="badge-"] {
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
/* Status colour mapping */
.badge-blue, .badge[data-status="new_lead"], .badge[data-status="new"] {
  background: rgba(59,130,246,0.15) !important; color: #3B82F6 !important;
}
.badge-orange, .badge-amber, .badge[data-status="contacted"] {
  background: rgba(245,158,11,0.15) !important; color: #F59E0B !important;
}
.badge-purple, .badge[data-status="survey_requested"] {
  background: rgba(139,92,246,0.15) !important; color: #8B5CF6 !important;
}
.badge-green, .badge[data-status="survey_booked"],
.badge[data-status="active"], .badge-approved, .badge-verified {
  background: rgba(16,185,129,0.15) !important; color: #10B981 !important;
}
.badge[data-status="quoted"], .badge[data-status="quote_sent"] {
  background: rgba(249,115,22,0.15) !important; color: #F97316 !important;
}
.badge-red, .badge-rejected, .badge-banned {
  background: rgba(239,68,68,0.12) !important; color: #EF4444 !important;
}
.badge-gray, .badge-pending, .badge-inactive, .badge-suspended {
  background: rgba(156,163,175,0.12) !important; color: #6B7280 !important;
}

/* 3. GLOBAL ACTION BUTTONS — pill, thumb-friendly (44px min touch target) */
.btn, .btn-primary, .btn-secondary, .btn-ghost,
.btn-danger, .btn-success, .btn-sm, .btn-action,
.btn-approve, .btn-reject, .action-btn, .tool-btn,
.btn-cta, .btn-send, .btn-submit, .btn-cancel, .btn-confirm {
  border-radius: 20px !important;
  min-height: var(--touch-min, 44px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
.btn-call, .btn-success, .btn-approve {
  background: #10B981 !important; color: #fff !important; border: none !important;
}
/* Action button rows: wrap with gaps */
.card-actions, .lead-card-actions, .job-actions, [class*="-actions"] {
  display: flex !important; flex-wrap: wrap !important;
  gap: 8px !important; margin-top: 10px !important;
}

/* 4. GLOBAL SECTION HEADERS — 12px ALL CAPS amber */
.section-header, .section-title, .section-label, .section-hd,
.page-section-title, .detail-section-title,
.msh-section-title, .category-header {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #F59E0B !important;
  font-weight: 700 !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}
/* Section count badge — orange pill */
.section-count, .stage-count, .count-badge {
  background: rgba(249,115,22,0.15) !important; color: #F97316 !important;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 2px 10px !important; border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important;
}

/* 5. GLOBAL STATS ROW — dark tiles, bold numbers, muted labels */
.stats-row, .stat-grid, .kpi-row, .kpi-grid,
.msh-stat-row, .stats, .dashboard-cards, .biz-stat-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important; margin-bottom: 16px !important;
}
@media (min-width: 769px) {
  .stats-row, .stat-grid, .kpi-row, .kpi-grid,
  .msh-stat-row, .stats, .dashboard-cards, .biz-stat-row {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
.stat-card, .kpi-card, .msh-stat-card, .kpi, .biz-stat {
  background: linear-gradient(145deg, #1a1d2e 0%, #111827 100%) !important;
  border-radius: 12px !important; padding: 14px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.stat-value, .stat-num, .kpi-value, .msh-stat-num, .biz-stat-value {
  font-size: 28px !important; font-weight: 700 !important;
  line-height: 1.1 !important; margin-bottom: 4px !important;
}
.stat-value.amber, .stat-num.amber, .msh-stat-num.amber,
.kpi-value.amber, .stat-card.highlight-amber .stat-value { color: #F59E0B !important; }
.stat-value.green, .stat-num.green, .msh-stat-num.green,
.kpi-value.green, .stat-card.highlight-green .stat-value { color: #10B981 !important; }
.stat-value.red, .stat-num.red, .msh-stat-num.red, .kpi-value.red { color: #EF4444 !important; }
.stat-label, .kpi-label, .msh-stat-label, .biz-stat-label {
  font-size: 11px !important; text-transform: uppercase !important;
  color: #6B7280 !important; letter-spacing: 0.05em !important; font-weight: 600 !important;
}

/* 6. GLOBAL BOTTOM NAV BAR — dark bg, orange active, iOS safe area */
.mn-bottom-nav {
  background: #1a1a2e !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 8px 0 env(safe-area-inset-bottom, 10px) !important;
  min-height: var(--bottom-nav-height, 56px) !important;
}
.mn-nav-icon { color: #6B7280 !important; }
.mn-nav-label { color: #6B7280 !important; font-size: 10px !important; font-weight: 500 !important; }
.mn-nav-item.active .mn-nav-icon { color: #F59E0B !important; filter: drop-shadow(0 0 4px rgba(245,158,11,0.4)) !important; }
.mn-nav-item.active .mn-nav-label { color: #F59E0B !important; font-weight: 600 !important; }
/* Dashboard mobileShell bottom nav */
.msh-nav {
  background: #1a1a2e !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding-bottom: env(safe-area-inset-bottom, 10px) !important;
  min-height: var(--bottom-nav-height, 56px) !important;
}
.msh-nav-item.active .msh-nav-icon { color: #F59E0B !important; filter: drop-shadow(0 0 4px rgba(245,158,11,0.4)) !important; }
.msh-nav-item.active .msh-nav-label { color: #F59E0B !important; font-weight: 600 !important; }
.msh-nav-icon { color: #6B7280 !important; }
.msh-nav-label { color: #6B7280 !important; font-size: 10px !important; }

/* 7. GLOBAL HEADER BAR — dark, brand name, VIP badge */
.mn-header {
  background: #1a1a2e !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  min-height: 52px !important;
}
.mn-title { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; }
.mn-hamburger, .mn-notif-bell { color: #fff !important; opacity: 0.7 !important; }
.mn-hamburger:active, .mn-notif-bell:active { opacity: 1 !important; background: rgba(255,255,255,0.06) !important; }
.msh-header { background: #1a1a2e !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.msh-tier-badge { border-radius: 20px !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 8px !important; }

/* 8. MOBILE LAYOUT LOCK — sidebar hidden, full-width, bottom nav visible */
.sidebar, #sidebar, .sidebar.collapsed {
  display: none !important; width: 0 !important; min-width: 0 !important;
}
.main-content { width: 100% !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; }
.app-layout { flex-direction: column !important; width: 100% !important; }
html.mn-active .topbar, html.mn-active .desktop-header { display: none !important; }

/* Desktop: restore sidebar + layout */
@media (min-width: 769px) {
  .sidebar, #sidebar {
    display: flex !important; width: 248px !important; min-width: auto !important;
  }
  .sidebar.collapsed {
    width: 0 !important; min-width: 0 !important; display: flex !important; opacity: 0;
  }
  .main-content { margin-left: 0 !important; }
  .app-layout { flex-direction: row !important; }
}

/* 9. TYPOGRAPHY */
body { font-size: 14px !important; line-height: 1.5 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }
h1, .page-title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.lead-card-name, .msh-job-name, .msh-sched-name,
.crm-card-name, .card-title, .customer-name {
  font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important;
}
.lead-card-contact, .lead-card-row, .msh-job-meta, .msh-sched-meta,
.crm-card-company, .card-meta, .card-subtitle, .postcode, .customer-meta {
  font-size: 13px !important; color: #6B7280 !important; line-height: 1.4 !important;
}

/* UTILITY: Touch targets */
a, button, [role="button"], input[type="submit"], input[type="button"] { -webkit-tap-highlight-color: transparent; }
/* Prevent nav items from inheriting global btn pill */
.mn-nav-item, .msh-nav-item { min-height: auto !important; border-radius: 0 !important; padding: 6px 12px !important; font-size: inherit !important; }
.stage-nav .stage-nav-dot { min-height: auto !important; border-radius: 50% !important; }
.topbar-btn, .topbar-nav-btn, .topbar-back { min-height: 36px !important; border-radius: 8px !important; }

/* Scroll & overflow */
html { max-width: 100vw !important; overflow-x: hidden !important; }
body { padding-bottom: var(--bottom-nav-height, 56px) !important; }
@media (min-width: 769px) {
  body { padding-bottom: 0 !important; }
}

/* TOOLS: App-grade grid tiles */
.mn-tools-sheet { background: #1a1a2e !important; border-radius: 20px 20px 0 0 !important; }
.mn-tool-tile { border-radius: 14px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.08) !important; padding: 16px 8px !important; }
.mn-tool-tile:active { background: rgba(249,115,22,0.15) !important; border-color: rgba(249,115,22,0.3) !important; }

/* FORMS: Touch-friendly inputs (16px prevents iOS zoom) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select, textarea {
  font-size: 16px !important;
  border-radius: 10px !important;
  padding: 12px !important;
  min-height: var(--touch-min, 44px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* MODALS: Full-width bottom sheet on mobile, centered on desktop */
.modal, .modal-box, .dialog { border-radius: 16px 16px 0 0 !important; max-width: 100vw !important; width: 100% !important; }
@media (min-width: 769px) {
  .modal, .modal-box, .dialog {
    border-radius: 16px !important;
    max-width: 560px !important;
    width: auto !important;
    margin: auto !important;
  }
}

/* ── Responsive table wrapper ── */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
@media (min-width: 1025px) {
  .table-scroll-wrapper { overflow-x: visible; }
}

/* ── Sticky action buttons — Save/Next/Submit pinned to bottom on mobile ── */
.sticky-actions {
  position: sticky;
  bottom: 0;
  padding: 12px 16px;
  background: var(--bg-card, #111827);
  border-top: 1px solid var(--border-ds, #1F2937);
  z-index: 10;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
@media (min-width: 1025px) {
  .sticky-actions {
    position: static;
    border-top: none;
    padding: 16px 0 0;
    background: transparent;
  }
}

/* ── Responsive card grid ── */
.responsive-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .responsive-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  .responsive-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .responsive-card-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Narrow phones */
@media (max-width: 380px) { h1, .page-title { font-size: 16px !important; } }