/* InspectKit UI Phase 1 shared stylesheet - extracted 20260530-110504 */
/* InspectKit Dashboard UI Phase 1 - 2026-05-31 */
:root { --ik-primary: #1e3a8a; --ik-primary-hover: #1e40af; --ik-bg: #f8fafc; --ik-card: #ffffff; --ik-border: #e2e8f0; --ik-text: #0f172a; --ik-muted: #64748b; --ik-success: #059669; --ik-warning: #d97706; --ik-danger: #dc2626; }
body { background: linear-gradient(170deg, #eef2f7 0%, #dde5f0 55%, #d3dcea 100%) no-repeat fixed; color: var(--ik-text); min-height: 100vh; }
.dash-hero { background: linear-gradient(135deg, var(--ik-primary) 0%, var(--ik-primary-hover) 100%); color: white; padding: 2.5rem 2rem; border-radius: 16px; margin-bottom: 1.5rem; box-shadow: 0 10px 30px -10px rgba(30,58,138,0.4); }
.dash-hero-greeting { font-size: 0.875rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem 0; font-weight: 500; }
.dash-hero-title { font-size: 2.25rem; font-weight: 700; margin: 0 0 0.5rem 0; line-height: 1.15; }
.dash-hero-subtitle { font-size: 1.05rem; opacity: 0.92; margin: 0 0 1.75rem 0; }
.dash-hero-cta { display: inline-flex; align-items: center; gap: 0.75rem; background: white; color: var(--ik-primary); padding: 1rem 2rem; border-radius: 10px; font-size: 1.125rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dash-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); color: var(--ik-primary); text-decoration: none; }
.dash-hero-cta i { font-size: 1.35rem; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.dash-stat { background: var(--ik-card); border: 1px solid var(--ik-border); border-radius: 12px; padding: 1.25rem; }
.dash-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ik-muted); font-weight: 600; margin: 0 0 0.4rem 0; }
.dash-stat-value { font-size: 2rem; font-weight: 700; color: var(--ik-text); line-height: 1; margin: 0; }
.dash-stat.warning .dash-stat-value { color: var(--ik-warning); }
.dash-stat.danger .dash-stat-value { color: var(--ik-danger); }
details.dash-drafts { background: var(--ik-card); border: 1px solid var(--ik-border); border-radius: 12px; margin-bottom: 1.5rem; overflow: hidden; }
details.dash-drafts > summary { padding: 1rem 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; user-select: none; }
details.dash-drafts > summary::-webkit-details-marker { display: none; }
details.dash-drafts > summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--ik-muted); transition: transform 0.2s; }
details.dash-drafts[open] > summary::after { transform: rotate(180deg); }
.dash-drafts-summary-left { display: flex; align-items: center; gap: 0.75rem; }
.dash-drafts-count { background: var(--ik-warning); color: white; font-weight: 600; font-size: 0.875rem; padding: 0.2rem 0.7rem; border-radius: 999px; }
.dash-drafts-count.zero { background: var(--ik-border); color: var(--ik-muted); }
.dash-drafts-label { font-weight: 600; color: var(--ik-text); }
details.dash-drafts[open] > .dash-drafts-body { border-top: 1px solid var(--ik-border); padding: 0.5rem 0; }
/* Make the existing draft table look calmer when expanded */
.dash-drafts-body table { background: transparent; }
.dash-drafts-body table tr { background: transparent !important; }
.dash-drafts-body table tr:nth-child(even) { background: var(--ik-bg) !important; }
.dash-quick-links { background: transparent; border: none; box-shadow: none; padding: 0; margin-top: 2rem; }
.dash-quick-links-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ik-muted); font-weight: 600; margin: 0 0 0.75rem 0; }
@media (max-width: 640px) {
  .dash-hero { padding: 1.75rem 1.25rem; }
  .dash-hero-title { font-size: 1.75rem; }
  .dash-hero-cta { width: 100%; justify-content: center; }
  .dash-stat-value { font-size: 1.5rem; }
}

.dash-hero-title, .dash-hero-subtitle, .dash-hero-greeting, .dash-hero .dash-hero-title { color: white !important; text-shadow: none !important; }
.dash-hero h1.dash-hero-title { color: white !important; }
/* Calm today's schedule card */
main#main-content .card { background: var(--ik-card) !important; border: 1px solid var(--ik-border) !important; border-left: 1px solid var(--ik-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; border-radius: 12px !important; }
main#main-content .card .card-title { color: var(--ik-text) !important; font-size: 1.05rem !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }
main#main-content .card .card-title i { color: var(--ik-primary) !important; }
/* Quick links section: drop card chrome on the wrapper */
.dash-quick-links .btn-outline { border-radius: 10px; }
.dash-quick-links-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* === UI Phase 1 Polish: dispatch-grade dashboard === */
body, button, input, select, textarea, .page-title, h1, h2, h3, h4, h5, h6 { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
.dash-hero { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%); }
.dash-hero-title { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.dash-hero-greeting { letter-spacing: 0.12em; font-weight: 700; }
.dash-actions-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; align-items: center; }
.dash-action-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: white; padding: 0.75rem 1.25rem; border-radius: 8px; font-weight: 500; text-decoration: none; transition: background 0.15s, transform 0.15s; }
.dash-action-secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); color: white; text-decoration: none; }
.dash-action-secondary i { font-size: 1rem; }
/* KPI stat strip */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card { background: var(--ik-card); border: 1px solid var(--ik-border); border-radius: 14px; padding: 1.25rem 1.25rem 1.1rem; position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -10px rgba(15,23,42,0.15); }
.kpi-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 14px 0 0 14px; }
.kpi-card.kpi-blue::before { background: var(--ik-primary); }
.kpi-card.kpi-green::before { background: var(--ik-success); }
.kpi-card.kpi-amber::before { background: var(--ik-warning); }
.kpi-card.kpi-red::before { background: var(--ik-danger); }
.kpi-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ik-muted); font-weight: 600; margin: 0 0 0.5rem 0; display: flex; align-items: center; gap: 0.4rem; }
.kpi-label i { font-size: 0.85rem; }
.kpi-value { font-size: 2.25rem; font-weight: 800; color: var(--ik-text); line-height: 1; margin: 0; letter-spacing: -0.025em; }
.kpi-sub { font-size: 0.8rem; color: var(--ik-muted); margin: 0.4rem 0 0 0; }
.kpi-card.kpi-blue .kpi-label i { color: var(--ik-primary); }
.kpi-card.kpi-green .kpi-label i { color: var(--ik-success); }
.kpi-card.kpi-amber .kpi-label i { color: var(--ik-warning); }
.kpi-card.kpi-red .kpi-label i { color: var(--ik-danger); }
/* Header polish */
header { background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
header nav ul li a { font-weight: 500 !important; letter-spacing: 0.02em !important; text-transform: none !important; }
/* Drafts row: bigger touch target */
details.dash-drafts > summary { padding: 1.15rem 1.25rem; }
details.dash-drafts > summary:hover { background: var(--ik-bg); }
@media (max-width: 640px) {
  .dash-actions-row { width: 100%; }
  .dash-action-secondary { flex: 1 1 calc(50% - 0.4rem); justify-content: center; }
  .kpi-value { font-size: 1.75rem; }
}

.kpi-card { display: block; text-decoration: none; color: inherit; }
.kpi-card:hover { text-decoration: none; color: inherit; }
.kpi-card::after { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 1rem; right: 1.1rem; color: var(--ik-muted); font-size: 0.9rem; opacity: 0; transition: opacity 0.15s, transform 0.15s; }
.kpi-card:hover::after { opacity: 1; transform: translateX(3px); }
/* Empty state CTA */
.empty-state-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ik-primary); color: white; padding: 0.6rem 1.1rem; border-radius: 8px; font-weight: 500; text-decoration: none; margin-top: 1rem; transition: background 0.15s, transform 0.15s; font-size: 0.95rem; }
.empty-state-cta:hover { background: var(--ik-primary-hover); transform: translateY(-1px); color: white; text-decoration: none; }
/* Logo polish */
.logo-container { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem 0.35rem 0.5rem; background: white; border-radius: 10px; transition: transform 0.15s; }
.logo-container:hover { transform: scale(1.02); }
.header-logo-img { max-height: 56px !important; width: auto !important; }
/* Make drafts row clickable-looking */
details.dash-drafts > summary { transition: background 0.15s; }
details.dash-drafts > summary:hover .dash-drafts-label { color: var(--ik-primary); }
/* Keyboard focus rings for clickable cards */
.kpi-card:focus-visible, .dash-action-secondary:focus-visible, .dash-hero-cta:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }


/* === Phase 1.7 calm legacy buttons + table headers === */
.btn-primary { background: var(--ik-primary) !important; border-color: var(--ik-primary) !important; color: white !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: 8px !important; padding: 0.55rem 1rem !important; transition: background 0.15s, transform 0.15s !important; }
.btn-primary:hover { background: var(--ik-primary-hover) !important; transform: translateY(-1px); }
.btn-secondary, .btn-warning { background: white !important; color: var(--ik-text) !important; border: 1px solid var(--ik-border) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: 8px !important; padding: 0.5rem 0.85rem !important; }
.btn-secondary:hover, .btn-warning:hover { background: var(--ik-bg) !important; border-color: var(--ik-primary) !important; color: var(--ik-primary) !important; }
.btn-outline { color: var(--ik-text) !important; border: 1px solid var(--ik-border) !important; background: white !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: 8px !important; }
.btn-outline:hover { background: var(--ik-bg) !important; border-color: var(--ik-primary) !important; color: var(--ik-primary) !important; }
.btn-danger { background: var(--ik-danger) !important; color: white !important; border-radius: 8px !important; text-transform: none !important; font-weight: 500 !important; }
/* Tone down orange Customer Portal button on customers.html */
a[href*="customer-portal"].btn, a[href*="customer-portal"].btn-warning { background: white !important; color: var(--ik-primary) !important; border: 1px solid var(--ik-border) !important; }
a[href*="customer-portal"].btn:hover { background: var(--ik-primary) !important; color: white !important; border-color: var(--ik-primary) !important; }
/* Calm table headers app-wide */
table thead th, table th.dark, .table-header, .data-table thead th { background: var(--ik-bg) !important; color: var(--ik-muted) !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 600 !important; padding: 0.85rem 1rem !important; border-bottom: 1px solid var(--ik-border) !important; }
table { background: var(--ik-card) !important; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
table td { padding: 0.85rem 1rem !important; border-bottom: 1px solid var(--ik-border) !important; }
table tbody tr:last-child td { border-bottom: 0 !important; }
table tbody tr:hover { background: var(--ik-bg) !important; }
/* Card titles app-wide */
.card-title { color: var(--ik-text) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 1.05rem !important; }
.card-title i { color: var(--ik-primary) !important; }
.card { background: white !important; border: 1px solid var(--ik-border) !important; border-left: 1px solid var(--ik-border) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; border-radius: 12px !important; }
/* Page titles */
.page-title { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--ik-text) !important; }
.page-subtitle { color: var(--ik-muted) !important; }
/* Search inputs */
input[type="search"], input[type="text"][placeholder*="Search"], input[type="text"][placeholder*="search"] { border-radius: 8px !important; border: 1px solid var(--ik-border) !important; padding: 0.6rem 0.85rem !important; }
input[type="search"]:focus, input[type="text"]:focus { outline: 3px solid #93c5fd; outline-offset: -1px; border-color: var(--ik-primary) !important; }
/* Customer links */
table td a { color: var(--ik-primary) !important; font-weight: 500 !important; text-decoration: none !important; }
table td a:hover { text-decoration: underline !important; }
/* Phase 1.10 modal calmer header */
.modal-header { background: white !important; color: var(--ik-text) !important; border-bottom: 1px solid var(--ik-border) !important; padding: 1rem 1.25rem !important; border-radius: 12px 12px 0 0 !important; }
.modal-title { font-family: 'Inter' !important; color: var(--ik-text) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: 1.1rem !important; }
.modal-content { border-radius: 12px !important; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.3) !important; }
.btn-success { background: var(--ik-primary) !important; color: white !important; border-radius: 8px !important; text-transform: none !important; font-weight: 500 !important; }
/* Phase 2 global header bar */
.global-header-bar { display: flex; gap: 1.5rem; align-items: center; padding: 0.4rem 1.2rem; background: rgba(255,255,255,0.06); border-radius: 8px; margin-left: auto; color: white; font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; }
.ghb-greeting { font-weight: 600; line-height: 1.3; }
.ghb-date { font-size: 0.72rem; opacity: 0.7; font-weight: 500; margin-top: 0.1rem; }
.ghb-clock { font-family: 'SF Mono','Roboto Mono',Consolas,monospace; font-size: 1.1rem; font-weight: 600; min-width: 10ch; text-align: center; color: #fef3c7; letter-spacing: 0.02em; }
@media (max-width: 900px) { .global-header-bar { font-size: 0.75rem; gap: 0.7rem; padding: 0.3rem 0.6rem; } .ghb-date, .ghb-greeting { display: none; } .ghb-clock { font-size: 0.9rem; min-width: 8ch; } }
/* Phase 2.1 GHB layout fix */
header { position: relative; }
.global-header-bar { position: absolute !important; top: 0.5rem !important; right: 1rem !important; margin: 0 !important; max-width: 360px; z-index: 50; }
.ghb-greeting, .ghb-date, .ghb-clock, .ghb-w-cur, .ghb-w-rng, .ghb-w-loc { white-space: nowrap; }
.ghb-weather { display: flex; gap: 0.55rem; align-items: center; line-height: 1.2; }
.ghb-w-cur { font-weight: 700; font-size: 1rem; color: #fef3c7; }
.ghb-w-rng, .ghb-w-loc { font-size: 0.7rem; opacity: 0.75; }
@media (max-width: 1100px) { .global-header-bar { display: none !important; } }
/* GHB compact polish */
.global-header-bar { font-size: 0.78rem !important; gap: 0.9rem !important; max-width: 500px !important; padding: 0.35rem 0.9rem !important; }
.global-header-bar .ghb-clock { font-size: 0.95rem !important; min-width: 9ch !important; }
.global-header-bar .ghb-w-cur { font-size: 0.9rem !important; }
.global-header-bar .ghb-w-loc { display: none !important; }
/* GHB contrast fix - readable on dark header */
.global-header-bar .ghb-date { color: #cbd5e1 !important; opacity: 1 !important; }
.global-header-bar .ghb-w-rng { color: #cbd5e1 !important; opacity: 1 !important; }
.global-header-bar .ghb-greeting { color: white !important; }
/* Phase 2.2 inspections explorer list view - 2026-05-30 */
.mobile-cards { display: block !important; }
.mobile-card { display: flex !important; align-items: center; gap: 1rem; padding: 0.6rem 1rem !important; border-bottom: 1px solid var(--ik-border); background: white; border-radius: 0 !important; margin: 0 !important; cursor: pointer; transition: background 0.12s ease; box-shadow: none !important; }
.mobile-card:hover { background: var(--ik-bg) !important; }
.mobile-card:last-child { border-bottom: 0; }
.mobile-card-header { display: flex !important; align-items: center; gap: 1rem; flex: 1; margin: 0 !important; }
.mobile-card-title { font-weight: 600 !important; color: var(--ik-text) !important; font-size: 0.95rem !important; flex: 1; }
.mobile-card-body { font-size: 0.85rem !important; color: var(--ik-muted) !important; padding: 0 !important; flex: 2; }
.mobile-card .status-badge { font-size: 0.7rem !important; padding: 0.2rem 0.55rem !important; }
.card.collapsible-card { margin-bottom: 0.75rem !important; box-shadow: none !important; overflow: hidden !important; }
.collapsible-card .card-title-section { background: #f8fafc !important; border-bottom: 1px solid var(--ik-border) !important; padding: 0.55rem 1rem !important; }
.collapsible-card .card-title-section h2 { text-transform: uppercase !important; letter-spacing: 0.05em !important; font-size: 0.78rem !important; color: var(--ik-muted) !important; font-weight: 700 !important; margin: 0 !important; }
.collapsible-card .collapsible-content { padding: 0 !important; }
@media (max-width: 767px) { main > div:first-child + .card.collapsible-card, main > .card.collapsible-card { scroll-snap-align: start; } }
/* Phase 2.3 GHB left of logo */
.global-header-bar { left: 10rem !important; right: auto !important; max-width: 300px !important; }
.global-header-bar { position: static !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 1.5rem 0 0 !important; }
.global-header-bar .ghb-date { display: none !important; }
.global-header-bar { gap: 0.8rem !important; padding: 0.3rem 0.7rem !important; font-size: 0.75rem !important; }
.global-header-bar .ghb-clock { font-size: 0.9rem !important; min-width: 8ch !important; }
.global-header-bar .ghb-greeting { display: none !important; }
header nav#mainNav { flex-wrap: nowrap !important; }
header nav#mainNav > * { flex-shrink: 0 !important; white-space: nowrap !important; }
#mainNav ul { flex-wrap: nowrap !important; gap: 0.5rem !important; }
/* Set System (settings) apart on the far right, like a normal web app's nav. */
#mainNav ul > li:has(> a[href="system-preferences.html"]) { margin-left: auto !important; }
#mainNav ul > li > a { padding: 0.5rem 0.6rem !important; }
/* Phase 2.4 brand stack grid */
header .header-container { display: grid !important; grid-template-columns: max-content 1fr !important; grid-template-rows: auto auto !important; column-gap: 2rem !important; row-gap: 0.35rem !important; align-items: center !important; }
header .header-container .logo-container { grid-row: 1; grid-column: 1; justify-self: stretch; }
header .header-container .global-header-bar { grid-row: 2; grid-column: 1; justify-self: stretch; justify-content: center; }
header .header-container #mainNav { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
/* Phase 2.4b - restore greeting */
.global-header-bar .ghb-greeting { display: block !important; font-size: 0.78rem !important; text-align: center !important; }
header .header-container .global-header-bar { flex-direction: column !important; gap: 0.2rem !important; align-items: center !important; }
header .header-container .logo-container { justify-self: center !important; }
/* Phase 2.4c conversational copy */
.global-header-bar .ghb-date::before { content: 'Today is '; opacity: 0.85; }
.global-header-bar .ghb-date::after { content: '.'; }
.global-header-bar .ghb-clock::before { content: 'The time is '; opacity: 0.85; }
.global-header-bar .ghb-clock::after { content: '.'; }
.global-header-bar .ghb-weather i { color: #fbbf24 !important; margin-right: 0.35rem; font-size: 1rem; }
/* Phase 2.4d show date + sun icon */
.global-header-bar .ghb-date { display: block !important; font-size: 0.78rem !important; opacity: 0.9 !important; }
.global-header-bar .ghb-weather::before { content: '\2600  '; color: #fbbf24; font-size: 1.1rem; margin-right: 0.3rem; }
/* Phase 2.4e logo match width */
header .header-container .logo-container { justify-self: stretch !important; padding: 0 !important; background: transparent !important; display: flex !important; justify-content: center !important; }
header .header-container .logo-container img { width: 100% !important; height: auto !important; object-fit: contain !important; max-height: 70px !important; }
/* Phase 2.5 inspections 3-col */
@media (min-width: 900px) { body.page-inspections main.container, main.container:has(> .card.collapsible-card + .card.collapsible-card + .card.collapsible-card) { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; align-items: start; }
     main.container:has(> .card.collapsible-card + .card.collapsible-card + .card.collapsible-card) > div:first-child { grid-column: 1 / -1; }
 }
 /* Phase 2.4f unify brand colors */
 header .header-container .global-header-bar { background: white !important; color: #0f172a !important; border-radius: 8px !important; padding: 0.55rem 0.75rem !important; }
 .global-header-bar .ghb-greeting, .global-header-bar .ghb-date, .global-header-bar .ghb-weather { color: #334155 !important; }
 .global-header-bar .ghb-clock { color: #1e40af !important; font-weight: 700 !important; }
 .global-header-bar .ghb-w-rng, .global-header-bar .ghb-w-loc { color: #64748b !important; opacity: 1 !important; }
 /* Phase 2.6 clean 2-tier header */
 header .header-container { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 1rem !important; grid-template-columns: none !important; padding: 1rem 2rem !important; }
 header .header-container .logo-container { order: 1 !important; background: transparent !important; padding: 0 !important; justify-self: auto !important; flex: 0 0 auto !important; }
 header .header-container .logo-container img { width: auto !important; height: 48px !important; max-height: 48px !important; }
 header .header-container .global-header-bar { order: 2 !important; margin-left: auto !important; flex-direction: row !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: 0.78rem !important; gap: 0.85rem !important; align-items: center !important; flex: 0 1 auto !important; }
 header .header-container #mainNav { order: 3 !important; flex: 1 0 100% !important; }
 .global-header-bar .ghb-greeting, .global-header-bar .ghb-date { display: inline !important; color: #e2e8f0 !important; opacity: 1 !important; }
 .global-header-bar .ghb-clock { color: #fef3c7 !important; font-weight: 600 !important; }
 .global-header-bar .ghb-weather, .global-header-bar .ghb-w-cur, .global-header-bar .ghb-w-rng { color: white !important; opacity: 1 !important; }
 /* Phase 2.6b separators */
 .global-header-bar .ghb-date::before { content: ' \00b7  Today is '; opacity: 1; color: #cbd5e1; }
 .global-header-bar .ghb-clock::before { content: ' \00b7  The time is '; opacity: 1; color: #cbd5e1; }
 .global-header-bar .ghb-weather::before { content: ' \00b7  \2600   '; color: #fbbf24; font-size: 0.95rem; margin: 0; }
 /* Phase 2.6c nav edge-to-edge */
 header .header-container #mainNav { width: 100% !important; }
 header .header-container #mainNav ul { justify-content: space-between !important; width: 100% !important; gap: 0.5rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
 header .header-container .global-header-bar { font-size: 0.85rem !important; }
 header .header-container .global-header-bar .ghb-clock, header .header-container .global-header-bar .ghb-weather { font-size: 0.85rem !important; }
 html body header nav#mainNav ul { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; gap: 0.5rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
 /* Phase 2.6d weather fix + logo bigger */
 html body header .header-container .global-header-bar { max-width: none !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
 html body .global-header-bar > * { flex-shrink: 0 !important; white-space: nowrap !important; width: auto !important; min-width: auto !important; }
 html body .global-header-bar .ghb-weather > * { flex-shrink: 0 !important; white-space: nowrap !important; }
 html body header .logo-container img { height: 64px !important; max-height: 64px !important; width: auto !important; }
 /* Phase 2.6e logo bigger + greeting bigger */
 html body header .logo-container img { height: 80px !important; max-height: 80px !important; width: auto !important; }
 html body .global-header-bar { font-size: 0.95rem !important; }
 html body .global-header-bar .ghb-clock { font-size: 0.95rem !important; }
 html body .global-header-bar .ghb-w-cur { font-size: 0.95rem !important; font-weight: 700 !important; }
 /* Phase 2.6f specificity fix */
 html body header .header-container .logo-container img { height: 80px !important; max-height: 80px !important; width: auto !important; }
 html body header .header-container .global-header-bar { font-size: 0.95rem !important; }
 html body header .header-container .global-header-bar .ghb-clock { font-size: 0.95rem !important; }
 html body header .header-container .global-header-bar .ghb-w-cur { font-size: 0.95rem !important; font-weight: 700 !important; }
 /* Phase 2.7 inspections 2-over-1 + file rows */
 @media (min-width: 900px) { main.container:has(> .card.collapsible-card + .card.collapsible-card + .card.collapsible-card) { grid-template-columns: 1fr 1fr !important; }
      main.container:has(> .card.collapsible-card + .card.collapsible-card + .card.collapsible-card) > .card.collapsible-card:last-of-type { grid-column: 1 / -1 !important; }
  }
  /* File explorer row style */
  .mobile-card { padding: 0.5rem 0.85rem !important; gap: 0.85rem !important; }
  .mobile-card-header { flex: 1 1 auto !important; min-width: 0 !important; }
  .mobile-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem !important; }
  .mobile-card-body { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 0.6rem !important; font-size: 0.78rem !important; align-items: center !important; flex: 2 1 0% !important; min-width: 0; }
  .mobile-card-body > div { display: inline-flex !important; align-items: center; inline-flex !important; align-items: center; gap: 0.3rem; flex-shrink: 0; white-space: nowrap; }
  .mobile-card-actions { display: flex !important; gap: 0.25rem !important; flex-shrink: 0; }
  .mobile-card-actions .btn { padding: 0.3rem 0.5rem !important; font-size: 0.72rem !important; min-width: 0 !important; }
  /* Phase 2.8 work orders file-list */
  main .card .inspection-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.85rem !important; padding: 0.6rem 1rem !important; border-bottom: 1px solid var(--ik-border) !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; background: white !important; flex-wrap: wrap !important; }
  .inspection-card:hover { background: var(--ik-bg) !important; }
  .inspection-card .btn { padding: 0.3rem 0.5rem !important; font-size: 0.72rem !important; min-width: 0 !important; }
  /* Phase 2.7c modal-close visible on white header */
  html body .modal .modal-close { color: #64748b !important; background: transparent !important; font-size: 1.5rem !important; cursor: pointer !important; line-height: 1 !important; }
  html body .modal .modal-close:hover { color: var(--ik-danger) !important; background: rgba(0,0,0,0.05) !important; }
  /* Phase 2.7c hide broken close + dup table */
  .modal .modal-body button[onclick*=closeModalAndRefresh] { display: none !important; }
  .card.collapsible-card table { display: none !important; }
  .card.collapsible-card .data-table { display: none !important; }
  html body table.desktop-table { display: none !important; }
  html body .desktop-table { display: none !important; }
/* === Phase 4.1c Mobile inspections fixes === */
@media (max-width: 992px) {
body { padding-bottom: 76px !important; }
main.container { padding: 0.85rem 1rem !important; }
.page-subtitle { display: none !important; }
.page-title { font-size: 1.5rem !important; margin: 0 0 0.75rem !important; }
html body main .mobile-card .mobile-card-actions { display: none !important; }
html body main .mobile-card { display: block !important; padding: 0.9rem 1rem !important; border-bottom: 1px solid var(--ik-border) !important; border-radius: 0 !important; background: white !important; cursor: pointer !important; }
html body main .mobile-card .mobile-card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; margin-bottom: 0.35rem !important; width: 100% !important; }
html body main .mobile-card .mobile-card-title { display: block !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--ik-text) !important; flex: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body main .mobile-card .mobile-card-header .status-badge { flex-shrink: 0 !important; font-size: 0.7rem !important; padding: 0.2rem 0.55rem !important; }
html body main .mobile-card .mobile-card-body { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem 1rem !important; font-size: 0.78rem !important; color: var(--ik-muted) !important; width: 100% !important; }
html body main .mobile-card .mobile-card-body > div { display: inline-flex !important; align-items: center; gap: 0.3rem; white-space: nowrap; }
html body main #completedResultFilter, html body main #completedShowFilter { display: none !important; }
#mobileNav { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background: white !important; border-top: 1px solid var(--ik-border) !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.06) !important; padding: 0.35rem 0 !important; z-index: 100 !important; display: flex !important; justify-content: space-around !important; align-items: center !important; }
#mobileNav .mobile-nav-link { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.2rem !important; padding: 0.4rem 0.3rem !important; text-decoration: none !important; color: var(--ik-muted) !important; font-size: 0.62rem !important; text-transform: uppercase !important; font-weight: 700 !important; }
#mobileNav .mobile-nav-link i { font-size: 1.3rem !important; }
#mobileNav .mobile-nav-link.active { color: var(--brand-primary, var(--ik-primary)) !important; background: transparent !important; }
}
/* Phase 4.1d - hide duplicate status-bar on mobile */
@media (max-width: 992px) {
html body #status-bar { display: none !important; }
html body .status-bar { display: none !important; }
}
/* === Phase 4.2 Mobile Scheduling page === */
@media (max-width: 992px) {
      html body main .calendar { display: none !important; }
        html body main .page-header-row .btn-primary {
                width: 100% !important;
                    justify-content: center !important;
                        padding: 0.85rem 1rem !important;
                            font-size: 1rem !important;
                                margin-top: 0.5rem !important;
                                  }
                              }
                              /* === Phase 4.3 mobile greeting block === */
                              @media (max-width: 992px) {
                                    html body header .header-container { flex-wrap: wrap !important; }
                                      html body header #ghb { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; order: 99 !important; padding: 0.5rem 0.75rem !important; background: rgba(255,255,255,0.05) !important; color: #fff !important; border-top: 1px solid rgba(255,255,255,0.1) !important; margin-top: 0.4rem !important; gap: 0.15rem !important; }
                                  }
                                  /* === Phase 4.3b greeting 2-col grid + fix position === */
                                  @media (max-width: 992px) {
                                        html body header #ghb { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 0.75rem !important; padding: 0.55rem 0.85rem !important; }
                                          html body header #ghb .ghb-greeting { grid-column: 1 !important; grid-row: 1 !important; text-align: left !important; font-size: 0.82rem !important; font-weight: 600 !important; }
                                            html body header #ghb .ghb-date { grid-column: 1 !important; grid-row: 2 !important; text-align: left !important; font-size: 0.7rem !important; opacity: 0.85 !important; }
                                              html body header #ghb .ghb-clock { grid-column: 2 !important; grid-row: 1 !important; text-align: right !important; font-size: 0.82rem !important; font-weight: 600 !important; }
                                                html body header #ghb .ghb-weather { grid-column: 2 !important; grid-row: 2 !important; text-align: right !important; font-size: 0.7rem !important; opacity: 0.85 !important; display: flex !important; gap: 0.35rem !important; justify-content: flex-end !important; }
                                            }
                                            /* === Phase 4.3c fix greeting overflow === */
                                            @media (max-width: 992px) {
                                                  html body header #ghb { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; overflow: hidden !important; box-sizing: border-box !important; }
                                                    html body header #ghb > * { min-width: 0 !important; overflow: hidden !important; }
                                                      html body header #ghb .ghb-greeting { display: flex !important; flex-direction: column !important; align-items: flex-start !important; font-size: 0.78rem !important; line-height: 1.2 !important; }
                                                        html body header #ghb .ghb-greeting .ghb-date { font-size: 0.68rem !important; opacity: 0.8 !important; margin-top: 0.1rem !important; }
                                                          html body header #ghb .ghb-clock { font-size: 0.82rem !important; white-space: nowrap !important; }
                                                            html body header #ghb .ghb-weather { display: flex !important; flex-direction: column !important; align-items: flex-end !important; font-size: 0.68rem !important; line-height: 1.2 !important; opacity: 0.85 !important; }
                                                        }
                                                        /* === Phase 4.3d strip prefixes + clean greeting === */
                                                        @media (max-width: 992px) {
                                                              html body header #ghb .ghb-date::before,
                                                                html body header #ghb .ghb-clock::before,
                                                                  html body header #ghb .ghb-weather::before { content: "" !important; margin: 0 !important; padding: 0 !important; }
                                                                    html body header #ghb > * { overflow: visible !important; }
                                                                      html body header #ghb .ghb-greeting { display: block !important; line-height: 1.25 !important; font-size: 0.78rem !important; }
                                                                        html body header #ghb .ghb-greeting .ghb-date { display: block !important; margin-top: 0.1rem !important; font-size: 0.65rem !important; opacity: 0.8 !important; }
                                                                          html body header #ghb .ghb-weather { display: block !important; line-height: 1.25 !important; }
                                                                            html body header #ghb .ghb-w-loc { display: none !important; }
                                                                        }
                                                                        /* === Phase 4.3e blend + bigger + restore sun === */
                                                                        @media (max-width: 992px) {
                                                                              html body header #ghb { background: transparent !important; border-top: none !important; margin-top: 0.2rem !important; padding: 0.35rem 0.85rem !important; column-gap: 1rem !important; }
                                                                                html body header #ghb .ghb-greeting { font-size: 0.95rem !important; }
                                                                                  html body header #ghb .ghb-greeting .ghb-date { font-size: 0.78rem !important; }
                                                                                    html body header #ghb .ghb-clock { font-size: 0.95rem !important; }
                                                                                      html body header #ghb .ghb-weather { font-size: 0.78rem !important; }
                                                                                        html body header #ghb .ghb-weather::before { content: "\2600  " !important; margin-right: 0.25rem !important; }
                                                                                          html body header #ghb .ghb-date::after,
                                                                                            html body header #ghb .ghb-clock::after { content: "" !important; }
                                                                                        }
                                                                                        /* === Phase 2.7d desktop inspection row grid === */
                                                                                        @media (min-width: 993px) {
                                                                                              html body main .collapsible-card .mobile-card-body { display: grid !important; grid-template-columns: minmax(120px,1fr) minmax(180px,1.8fr) minmax(110px,1fr) minmax(110px,1fr) minmax(80px,0.7fr) !important; align-items: center !important; column-gap: 0.75rem !important; }
                                                                                                html body main .collapsible-card .mobile-card-body > div { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; }
                                                                                            }
                                                                                            /* === Phase 2.7f Service page compress === */
                                                                                            @media (min-width: 993px) {
                                                                                                  body main .inspection-card { padding: 0.75rem 1rem !important; margin-bottom: 0.5rem !important; border-radius: 6px !important; }
                                                                                                    body main .inspection-card div[style*="padding: 1rem"] { padding: 0.4rem 0.6rem !important; }
                                                                                                }
                                                                                                /* === Phase 2.7g Job row single-line compress === */
                                                                                                @media (min-width: 993px) {
                                                                                                      body main .inspection-card div[style*="text-transform: uppercase"] { display: none !important; }
                                                                                                        body main .inspection-card > div:first-child { gap: 1rem !important; flex-wrap: nowrap !important; align-items: center !important; }
                                                                                                          body main .inspection-card > div:first-child > div { font-size: 0.85rem !important; }
                                                                                                      }
                                                                                                      /* === Phase 2.7h Force 5-col grid on Job row === */
                                                                                                      @media (min-width: 993px) {
                                                                                                            body main .inspection-card > div:first-child > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
                                                                                                              body main .inspection-card div[style*="grid-template-columns"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0.6rem !important; margin-bottom: 0 !important; }
                                                                                                          }
                                                                                                          /* === Phase 2.7i Polish Job rows: lose boxes === */
                                                                                                          @media (min-width: 993px) {
                                                                                                                body main .inspection-card div[style*="background: #fafafa"] { background: transparent !important; padding: 0 !important; border-left: none !important; font-size: 0.8rem !important; margin-top: 0.35rem !important; color: #475569 !important; }
                                                                                                                  body main .inspection-card div[style*="background: #f0fdf4"] { background: transparent !important; border: none !important; padding: 0 !important; }
                                                                                                              }

/* === Phase 2.8a Kill IBM Plex Mono bleed-through from industrial.css === */
html body table,
html body table th,
html body table td,
html body .card-title,
html body .mobile-card-title,
html body .mobile-card,
html body .mobile-card *,
html body .desktop-table,
html body .desktop-table *,
html body .desktop-inspection-table,
html body .desktop-inspection-table *,
html body .mobile-inspection-list,
html body .mobile-inspection-list *,
html body .mobile-cards,
html body .mobile-cards *,
html body .badge,
html body .inspection-card,
html body .inspection-card * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* === Phase 2.8b Completed Inspections row right-side button overlap fix === */
html body .desktop-table tbody td:last-child {
    min-width: 220px;
    padding-right: 0.75rem;
    white-space: nowrap;
}
html body .desktop-table tbody td:last-child > div {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.35rem !important;
}
html body .desktop-table tbody td:last-child .btn-sm {
    flex-shrink: 0;
    min-width: 32px;
    padding: 0.4rem 0.5rem;
}
@media (max-width: 1280px) {
    html body .desktop-table tbody td:last-child > div { flex-wrap: wrap; }
}

/* === Phase 2.9 Completed Inspections row organization === */

/* Column header strip — hidden by default (mobile cards stack), shown at desktop */
.mc-col-headers { display: none; }

@media (min-width: 993px) {
    /* Show the column header strip as a 7-column grid matching the rows */
    .mc-col-headers {
        display: grid !important;
        grid-template-columns:
            minmax(180px, 1.4fr)   /* Customer */
            minmax(70px, 90px)      /* Status */
            minmax(120px, 1fr)      /* Building */
            minmax(180px, 1.6fr)    /* Equipment */
            minmax(110px, 1fr)      /* Date */
            minmax(120px, 1fr)      /* Technician */
            minmax(80px, 0.7fr)     /* Type */
            minmax(220px, 1.2fr);   /* Actions */
        column-gap: 0.75rem;
        align-items: center;
        padding: 0.55rem 1rem;
        background: var(--ik-bg);
        border-bottom: 1px solid var(--ik-border);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ik-muted);
        font-family: 'Inter', sans-serif;
    }
    .mc-col-headers .mc-h-actions { text-align: right; padding-right: 0.5rem; }
    .mc-col-headers .mc-h-status { text-align: center; }

    /* Realign rows to the same 7-column grid so columns visually match the headers */
    #completedInspections .mobile-card {
        display: grid !important;
        grid-template-columns:
            minmax(180px, 1.4fr)
            minmax(70px, 90px)
            minmax(120px, 1fr)
            minmax(180px, 1.6fr)
            minmax(110px, 1fr)
            minmax(120px, 1fr)
            minmax(80px, 0.7fr)
            minmax(220px, 1.2fr) !important;
        column-gap: 0.75rem !important;
        padding: 0.55rem 1rem !important;
        align-items: center !important;
    }

    /* Header cell holds Customer + Status badge — split across cols 1 and 2 */
    #completedInspections .mobile-card .mobile-card-header {
        display: contents !important;
    }
    #completedInspections .mobile-card .mobile-card-title {
        grid-column: 1 / span 1 !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--ik-text) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    #completedInspections .mobile-card .mobile-card-header .status-badge {
        grid-column: 2 / span 1 !important;
        justify-self: center !important;
        flex-shrink: 0 !important;
    }

    /* Body holds Building / Equipment / Date / Tech / Type — split across cols 3..7 */
    #completedInspections .mobile-card .mobile-card-body {
        display: contents !important;
    }
    #completedInspections .mobile-card .mobile-card-body > div {
        font-size: 0.8rem !important;
        color: var(--ik-text) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        display: flex !important;
        align-items: center;
        gap: 0.35rem;
    }
    #completedInspections .mobile-card .mobile-card-body > div:nth-child(1) { grid-column: 3; }  /* Building */
    #completedInspections .mobile-card .mobile-card-body > div:nth-child(2) { grid-column: 4; }  /* Equipment */
    #completedInspections .mobile-card .mobile-card-body > div:nth-child(3) { grid-column: 5; }  /* Date */
    #completedInspections .mobile-card .mobile-card-body > div:nth-child(4) { grid-column: 6; }  /* Technician */
    #completedInspections .mobile-card .mobile-card-body > div:nth-child(5) { grid-column: 7; font-size: 0.72rem !important; color: var(--ik-muted) !important; }  /* Type — quieter */

    /* Actions fill col 8, right-aligned, no wrap */
    #completedInspections .mobile-card .mobile-card-actions {
        grid-column: 8 !important;
        display: flex !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 0.3rem !important;
        align-items: center !important;
    }
    #completedInspections .mobile-card .mobile-card-actions .btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.72rem !important;
        padding: 0.35rem 0.55rem !important;
        min-width: 0 !important;
    }

    /* Hide the row icons in tight 7-col layout to free up space */
    #completedInspections .mobile-card .mobile-card-body > div > i.fas { display: none !important; }
}

@media (max-width: 992px) {
    /* On mobile, hide column headers entirely — cards stack vertically */
    .mc-col-headers { display: none !important; }
}

/* === Phase 2.9b Fix Completed Inspections action button clipping === */
/* Phase 2.9 set actions column to minmax(220px, 1.2fr) which clips 5 buttons.
   "Customer Portal" was cut to "omer P", "Remove" to "emove". Widen to 340px
   and ensure the actions container can't clip. */
@media (min-width: 993px) {
    /* Re-set grid template columns for header and rows — only Actions column changes */
    .mc-col-headers,
    #completedInspections .mobile-card {
        grid-template-columns:
            minmax(180px, 1.4fr)
            minmax(70px, 90px)
            minmax(120px, 1fr)
            minmax(180px, 1.6fr)
            minmax(110px, 1fr)
            minmax(120px, 1fr)
            minmax(70px, 0.6fr)
            minmax(340px, 1.4fr) !important;
    }

    /* Actions container can't clip its buttons */
    #completedInspections .mobile-card .mobile-card-actions {
        overflow: visible !important;
        min-width: 0;
    }
    #completedInspections .mobile-card .mobile-card-actions .btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
}

/* === Phase 2.9c Stop forced equal-width on action buttons === */
/* Something upstream is making each button ~63px (likely flex: 1 from a generic
   .mobile-card-actions .btn rule). With "Customer Portal" being ~110px of text,
   the button shows the middle slice "stomer Por". Force buttons to size to
   their content and widen the actions column to fit. */
@media (min-width: 993px) {
    .mc-col-headers,
    #completedInspections .mobile-card {
        grid-template-columns:
            minmax(180px, 1.4fr)
            minmax(70px, 90px)
            minmax(120px, 1fr)
            minmax(180px, 1.6fr)
            minmax(110px, 1fr)
            minmax(120px, 1fr)
            minmax(70px, 0.6fr)
            minmax(380px, 1.6fr) !important;
    }
    #completedInspections .mobile-card .mobile-card-actions .btn,
    #completedInspections .mobile-card .mobile-card-actions a.btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* === Phase 2.9d Shrink Actions column after JS label tightening === */
/* "Customer Portal" -> "Portal" + "Resend Portal" -> "Resend" in inspections.html
   shrank the wide button. Reduce Actions allocation to give other columns more room
   and prevent the row from overflowing the card container at common viewport widths. */
@media (min-width: 993px) {
    .mc-col-headers,
    #completedInspections .mobile-card {
        grid-template-columns:
            minmax(160px, 1.4fr)
            minmax(60px, 80px)
            minmax(110px, 1fr)
            minmax(160px, 1.5fr)
            minmax(100px, 0.9fr)
            minmax(110px, 1fr)
            minmax(60px, 0.6fr)
            minmax(300px, 1.3fr) !important;
        column-gap: 0.6rem !important;
        padding: 0.55rem 0.85rem !important;
    }
    .mc-col-headers { padding: 0.55rem 0.85rem !important; }
}

/* === Phase 2.10 Customers page row organization === */
/* Same column-strip approach as completed inspections — 6-col grid at desktop
   with column headers above. Customers source: name + bldg/equip badge + optional
   contact_name/phone/email + 3 icon buttons (View/Edit/Add Building). */

@media (min-width: 993px) {
    .mc-cust-headers {
        display: grid !important;
        grid-template-columns:
            minmax(180px, 1.6fr)   /* Customer */
            minmax(110px, 0.9fr)    /* Count badge */
            minmax(130px, 1fr)      /* Contact */
            minmax(130px, 1fr)      /* Phone */
            minmax(180px, 1.4fr)    /* Email */
            minmax(130px, 0.8fr) !important; /* Actions */
        column-gap: 0.6rem !important;
        padding: 0.55rem 0.85rem !important;
        background: var(--ik-bg);
        border-bottom: 1px solid var(--ik-border);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ik-muted);
    }
    .mc-cust-headers > span:last-child { text-align: right; padding-right: 0.5rem; }

    /* Customer rows: use display:contents on header/body wrappers to merge into the 6-col grid */
    #customersTable .mobile-card {
        display: grid !important;
        grid-template-columns:
            minmax(180px, 1.6fr)
            minmax(110px, 0.9fr)
            minmax(130px, 1fr)
            minmax(130px, 1fr)
            minmax(180px, 1.4fr)
            minmax(130px, 0.8fr) !important;
        column-gap: 0.6rem !important;
        padding: 0.55rem 0.85rem !important;
        align-items: center !important;
    }

    /* Header (name + badge) splits into cols 1 and 2 */
    #customersTable .mobile-card .mobile-card-header {
        display: contents !important;
    }
    #customersTable .mobile-card .mobile-card-title {
        grid-column: 1 !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--ik-primary) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    #customersTable .mobile-card .mobile-card-badge {
        grid-column: 2 !important;
        justify-self: start !important;
        font-size: 0.7rem !important;
        padding: 0.2rem 0.55rem !important;
        background: var(--ik-bg) !important;
        color: var(--ik-muted) !important;
        border: 1px solid var(--ik-border) !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    /* Body (contact/phone/email) splits into cols 3..5 — but the contact div may be missing.
       Use explicit grid-column assignments based on what icon is inside. */
    #customersTable .mobile-card .mobile-card-body {
        display: contents !important;
    }
    #customersTable .mobile-card .mobile-card-body > div {
        font-size: 0.8rem !important;
        color: var(--ik-text) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    /* Each body div has an <i class="fas fa-X"> child identifying which column it belongs to */
    #customersTable .mobile-card .mobile-card-body > div:has(i.fa-user) { grid-column: 3; }
    #customersTable .mobile-card .mobile-card-body > div:has(i.fa-phone) { grid-column: 4; }
    #customersTable .mobile-card .mobile-card-body > div:has(i.fa-envelope) { grid-column: 5; }
    /* Hide the icons inside cells — column headers identify the data */
    #customersTable .mobile-card .mobile-card-body > div > i.fas { display: none !important; }

    /* Actions go to col 6, right-aligned */
    #customersTable .mobile-card .mobile-card-actions {
        grid-column: 6 !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 0.25rem !important;
        flex-wrap: nowrap !important;
    }
    #customersTable .mobile-card .mobile-card-actions .icon-btn {
        flex-shrink: 0 !important;
        min-width: 32px !important;
        padding: 0.4rem 0.5rem !important;
    }
}

@media (max-width: 992px) {
    .mc-cust-headers { display: none !important; }
}

/* === Phase 2.10b Customer row action buttons — make them readable === */
/* Original .icon-btn was dark-on-dark and all three icons looked identical.
   Dropped the redundant View (the customer-name link opens details).
   Kept Edit + Add Building with proper labels and color coding. */

#customersTable .mobile-card .mobile-card-actions .icon-btn-edit,
#customersTable .mobile-card .mobile-card-actions .icon-btn-add {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0.4rem 0.7rem !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: 1px solid var(--ik-border) !important;
    background: white !important;
    transition: background 0.12s ease, border-color 0.12s ease;
    white-space: nowrap !important;
    line-height: 1 !important;
}
#customersTable .mobile-card .mobile-card-actions .icon-btn-edit {
    color: var(--ik-text) !important;
}
#customersTable .mobile-card .mobile-card-actions .icon-btn-edit:hover {
    background: var(--ik-bg) !important;
    border-color: var(--ik-muted) !important;
}
#customersTable .mobile-card .mobile-card-actions .icon-btn-add {
    background: var(--ik-primary) !important;
    color: white !important;
    border-color: var(--ik-primary) !important;
}
#customersTable .mobile-card .mobile-card-actions .icon-btn-add:hover {
    background: var(--ik-primary-hover) !important;
    border-color: var(--ik-primary-hover) !important;
}
#customersTable .mobile-card .mobile-card-actions .icon-btn-edit i,
#customersTable .mobile-card .mobile-card-actions .icon-btn-add i {
    font-size: 0.85rem !important;
    color: inherit !important;
    display: inline-block !important;
}

/* Update Phase 2.10 grid to give the now-text-labeled Actions column more room */
@media (min-width: 993px) {
    .mc-cust-headers,
    #customersTable .mobile-card {
        grid-template-columns:
            minmax(170px, 1.5fr)   /* Customer */
            minmax(100px, 0.8fr)    /* Count */
            minmax(120px, 1fr)      /* Contact */
            minmax(130px, 1fr)      /* Phone */
            minmax(170px, 1.3fr)    /* Email */
            minmax(180px, 1fr) !important; /* Actions */
    }
    #customersTable .mobile-card .mobile-card-actions {
        gap: 0.4rem !important;
    }
}

/* === Phase 2.11 Service page — organize Open Deficiencies + Active Jobs === */

/* Shared: column headers + rows for deficiencies and jobs at desktop */
@media (min-width: 993px) {

    /* --- Open Deficiencies (8-col grid: Customer | Priority | Status | Equipment | Building | Date | Description | Actions) --- */
    .mc-def-headers,
    #deficienciesRows .mc-def-row {
        display: grid !important;
        grid-template-columns:
            minmax(140px, 1.3fr)   /* Customer */
            minmax(70px, 0.7fr)     /* Priority */
            minmax(110px, 1fr)      /* Status */
            minmax(160px, 1.4fr)    /* Equipment */
            minmax(100px, 0.9fr)    /* Building */
            minmax(90px, 0.7fr)     /* Date */
            minmax(180px, 1.8fr)    /* Description */
            minmax(280px, 1.5fr) !important; /* Actions */
        column-gap: 0.6rem !important;
        padding: 0.55rem 0.85rem !important;
        align-items: center !important;
    }
    .mc-def-headers {
        background: var(--ik-bg);
        border-bottom: 1px solid var(--ik-border);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ik-muted);
    }
    .mc-def-headers > span:last-child { text-align: right; padding-right: 0.5rem; }

    #deficienciesRows .mc-def-row {
        margin-bottom: 0.4rem !important;
        background: white;
        border-radius: 6px;
    }
    #deficienciesRows .mc-def-row .mobile-card-header { display: contents !important; }
    #deficienciesRows .mc-def-row .mobile-card-title {
        grid-column: 1; font-size: 0.9rem !important; font-weight: 700 !important;
        color: var(--ik-text) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    }
    #deficienciesRows .mc-def-row .mc-def-sev { grid-column: 2; justify-self: start; }
    #deficienciesRows .mc-def-row .mc-def-status { grid-column: 3; justify-self: start; }

    #deficienciesRows .mc-def-row .mobile-card-body { display: contents !important; }
    #deficienciesRows .mc-def-row .mobile-card-body > div {
        font-size: 0.8rem; color: var(--ik-text);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    }
    #deficienciesRows .mc-def-row .mc-def-equip { grid-column: 4; }
    #deficienciesRows .mc-def-row .mc-def-bldg  { grid-column: 5; }
    #deficienciesRows .mc-def-row .mc-def-date  { grid-column: 6; }
    #deficienciesRows .mc-def-row .mc-def-desc  {
        grid-column: 7; color: var(--ik-muted) !important; font-style: italic;
    }

    #deficienciesRows .mc-def-row .mobile-card-actions {
        grid-column: 8 !important;
        display: flex !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 0.3rem !important;
    }
    #deficienciesRows .mc-def-row .mobile-card-actions .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 0.72rem !important;
        padding: 0.35rem 0.55rem !important;
        white-space: nowrap !important;
    }

    /* --- Active Jobs (8-col grid: Job# | Status | Customer | Building | Date | Tech | Total | Actions) --- */
    .mc-job-headers,
    #workOrdersList .mc-job-row {
        display: grid !important;
        grid-template-columns:
            minmax(160px, 1.3fr)   /* Job # */
            minmax(80px, 0.7fr)     /* Status */
            minmax(140px, 1.2fr)    /* Customer */
            minmax(120px, 1fr)      /* Building */
            minmax(100px, 0.9fr)    /* Date */
            minmax(120px, 1fr)      /* Tech */
            minmax(90px, 0.8fr)     /* Total */
            minmax(280px, 1.5fr) !important; /* Actions */
        column-gap: 0.6rem !important;
        padding: 0.6rem 0.85rem !important;
        align-items: center !important;
    }
    .mc-job-headers {
        background: var(--ik-bg);
        border-bottom: 1px solid var(--ik-border);
        /* Match the 3px left border the rows carry so columns line up exactly. */
        border-left: 3px solid transparent !important;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ik-muted);
    }
    .mc-job-headers > span:last-child { text-align: right; padding-right: 0.5rem; }

    #workOrdersList .mc-job-row {
        margin-bottom: 0.5rem !important;
        background: white;
        border-radius: 6px;
    }
    #workOrdersList .mc-job-row .mobile-card-header { display: contents !important; }
    #workOrdersList .mc-job-row .mc-job-num {
        grid-column: 1; font-size: 0.95rem !important; font-weight: 700 !important;
        color: var(--ik-primary) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    }
    #workOrdersList .mc-job-row .mc-job-status { grid-column: 2; justify-self: start; font-size: 0.72rem !important; }

    #workOrdersList .mc-job-row .mobile-card-body { display: contents !important; }
    #workOrdersList .mc-job-row .mobile-card-body > div {
        font-size: 0.85rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    }
    #workOrdersList .mc-job-row .mc-job-customer { grid-column: 3; font-weight: 600; color: var(--ik-text); }
    #workOrdersList .mc-job-row .mc-job-building { grid-column: 4; }
    #workOrdersList .mc-job-row .mc-job-date     { grid-column: 5; }
    #workOrdersList .mc-job-row .mc-job-tech     { grid-column: 6; }
    #workOrdersList .mc-job-row .mc-job-total    {
        grid-column: 7; font-weight: 700 !important; color: var(--ik-success) !important;
        font-size: 0.95rem !important;
    }

    #workOrdersList .mc-job-row .mobile-card-actions {
        grid-column: 8 !important;
        display: flex !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 0.3rem !important;
    }
    #workOrdersList .mc-job-row .mobile-card-actions .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 0.72rem !important;
        padding: 0.35rem 0.55rem !important;
        white-space: nowrap !important;
    }
    #workOrdersList .mc-job-row .mobile-card-actions .mc-job-del {
        color: var(--ik-danger) !important;
        border-color: var(--ik-danger) !important;
    }

    /* Work Description on second visual row, spanning all 8 cols */
    #workOrdersList .mc-job-row .mc-job-desc {
        grid-column: 1 / -1;
        font-size: 0.8rem;
        color: var(--ik-muted);
        background: var(--ik-bg);
        padding: 0.4rem 0.6rem;
        border-radius: 4px;
        margin-top: 0.4rem;
        white-space: normal;
        line-height: 1.35;
    }
}

@media (max-width: 992px) {
    .mc-def-headers, .mc-job-headers { display: none !important; }
}

/* === Phase 2.12 Dockable customer windows + bottom taskbar === */

/* Floating customer window — no backdrop, multiple visible at once. */
.cust-window {
    position: fixed;
    width: min(900px, 90vw);
    max-height: calc(100vh - 140px);
    background: white;
    border: 1px solid var(--ik-border);
    border-radius: 10px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.35), 0 4px 12px rgba(15, 23, 42, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    animation: cust-win-pop 0.18s ease-out;
}

@keyframes cust-win-pop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cust-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--ik-bg);
    border-bottom: 1px solid var(--ik-border);
    cursor: move;
    user-select: none;
}

.cust-window-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--ik-text);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.cust-window-title i {
    color: var(--ik-primary);
    flex-shrink: 0;
}
.cust-window-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cust-window-controls {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.cust-win-min,
.cust-win-close {
    width: 30px;
    height: 28px;
    border: 1px solid var(--ik-border);
    background: white;
    border-radius: 5px;
    cursor: pointer;
    color: var(--ik-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cust-win-min:hover {
    background: var(--ik-bg);
    border-color: var(--ik-muted);
}
.cust-win-close:hover {
    background: var(--ik-danger);
    color: white;
    border-color: var(--ik-danger);
}

.cust-window-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
    background: white;
}

/* The global .form-group margin (1.5rem) makes add-building/equipment windows very
   tall — on a phone the submit button sat well below the fold. Tighten the rhythm
   inside cust-windows so more fields (and the save button) are reachable. */
.cust-window-body .form-group { margin-bottom: 0.8rem; }
.cust-window-body .form-group label { margin-bottom: 0.3rem; }
.cust-window-body form > button[type="submit"],
.cust-window-body form > .btn { margin-top: 0.25rem; }
@media (max-width: 600px) {
    .cust-window-body { padding: 1rem; }
    .cust-window-body .form-group { margin-bottom: 0.6rem; }
}

/* Bottom taskbar — Windows-style strip of open windows */
.cust-taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
    border-top: 2px solid var(--ik-primary);
    padding: 0.5rem 0.85rem;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.2);
    color: white;
}

.cust-tb-items {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.cust-tb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.3rem 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    max-width: 240px;
    transition: background 0.12s ease, border-color 0.12s ease;
    user-select: none;
}
.cust-tb-item:hover {
    background: rgba(255, 255, 255, 0.16);
}
.cust-tb-item.active {
    background: var(--ik-primary);
    border-color: var(--ik-primary);
}
.cust-tb-item.minimized {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.04);
    border-style: dashed;
}
.cust-tb-item i {
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}
.cust-tb-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
    flex: 1 1 auto;
    min-width: 0;
}

.cust-tb-close {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.cust-tb-close:hover {
    background: rgba(255, 255, 255, 0.22);
    color: white;
}

/* Make the page bottom-padded when taskbar is visible to prevent content cover */
body:has(.cust-taskbar[style*="block"]) {
    padding-bottom: 56px;
}

@media (max-width: 768px) {
    .cust-window {
        width: 96vw !important;
        top: 1rem !important;
        left: 2vw !important;
    }
    .cust-taskbar {
        padding: 0.4rem 0.5rem;
    }
    .cust-tb-item {
        max-width: 140px;
    }
    .cust-tb-label {
        max-width: 80px;
    }
}

/* === Phase 2.13 Customer detail quick-actions bar + modal compat === */

.cust-detail-quick-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ik-border);
}
.cust-detail-quick-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    padding: 0.45rem 0.85rem;
}

/* createModal compat — when legacy content uses .modal-content / .modal-header
   inside a floating window, strip the now-redundant inner header and let the
   floating window's own header bar do the labeling. */
.cust-window .cust-window-body > .modal-content {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border: 0;
}
.cust-window .cust-window-body .modal-header {
    display: none;
}
.cust-window .cust-window-body .modal-body {
    padding: 0;
}

/* === Phase 2.13b Mobile floating-window mode === */

/* Backdrop only appears on mobile */
.cust-window-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: cust-backdrop-fade 0.18s ease-out;
}
@keyframes cust-backdrop-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* On mobile, the window is fullscreen-ish — no drag, no minimize button */
.cust-window-mobile {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;  /* Phase 2.21n: dvh accounts for iOS Safari toolbar */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.cust-window-mobile .cust-window-header {
    cursor: default !important;
    user-select: auto;
}
.cust-window-mobile .cust-win-min {
    display: none !important;
}
.cust-window-mobile .cust-window-body {
    /* Account for iOS safe-area bottom (home indicator) */
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}

/* Hide the taskbar entirely on mobile — single-window mode means it's not useful */
@media (max-width: 767px) {
    .cust-taskbar { display: none !important; }
    /* Disable the body bottom-padding rule from Phase 2.12 */
    body:has(.cust-taskbar[style*="block"]) {
        padding-bottom: 0 !important;
    }
}

/* === Phase 2.14 Recent customers quick-access strip === */
.recent-customers-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1rem;
    padding: 0.65rem 0.85rem;
    background: var(--ik-bg);
    border: 1px solid var(--ik-border);
    border-radius: 8px;
}
.recent-customers-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ik-muted);
    margin-right: 0.25rem;
}
.recent-customers-label i { font-size: 0.75rem; }
.recent-customer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: white;
    border: 1px solid var(--ik-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ik-text);
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-customer-pill:hover {
    background: var(--ik-primary);
    color: white;
    border-color: var(--ik-primary);
    transform: translateY(-1px);
}
.recent-customer-pill i {
    color: var(--ik-primary);
    flex-shrink: 0;
    font-size: 0.78rem;
}
.recent-customer-pill:hover i { color: white; }

/* === Phase 2.16 Site-wide typography + alignment polish === */

/* Buttons: kill any forced uppercase from old industrial.css, use a single
   consistent type style. Inspectors and admins shouldn't see "SYNC NOW" in
   one place and "Start Inspection" in another. */
html body .btn,
html body button.btn,
html body a.btn {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-weight: 500 !important;
}

/* Sub-action row (Start Inspection / Deficiencies / Schedule / Bulk Add /
   SYNC NOW / Create Job etc.) — consistent height, padding, alignment. */
html body main .btn {
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.1;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
}
html body main .btn.btn-sm {
    min-height: 2rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
}
html body main .btn.btn-lg {
    min-height: 2.8rem;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
}

/* KPI strip: at desktop, force a clean 4-column row when possible. The default
   auto-fit/minmax let 3 + 1 wrap on the inspections page (with Today's Schedule
   stealing space on the right). Tighten the minimum so 4 fit. */
@media (min-width: 993px) {
    html body main .kpi-strip {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        align-items: stretch;
    }
    html body main .kpi-card { display: flex; flex-direction: column; }
    html body main .kpi-value { margin-top: auto; }
}

/* Section headings inside .card — match the labeling style of the KPI strip
   so all card titles read as a consistent type. */
html body main .card .card-title,
html body main .card h2,
html body main .card h2.card-title {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--ik-text) !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    line-height: 1.25 !important;
    margin: 0 0 0.75rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Section titles outside of .card (e.g. "Active Jobs", "Open Deficiencies"
   anchor headings) — same treatment. */
html body main h2:not(.dash-hero-title):not(.page-title) {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--ik-text) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

/* Page title (h1) — slightly tighter so it doesn't dwarf the action row beside it. */
html body main h1.page-title {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 0.35rem 0 !important;
}
html body main .page-subtitle {
    font-size: 0.875rem !important;
    color: var(--ik-muted) !important;
    margin: 0 0 1.25rem 0 !important;
}

/* Status badges site-wide — consistent pill style. */
html body .badge,
html body .status-badge {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

/* Card padding consistency — most cards have varied inline padding. */
html body main > .card,
html body main .card.collapsible-card {
    padding: 1.1rem 1.25rem !important;
    border-radius: 12px !important;
}

/* Empty-state alignment inside any card — center the icon + text consistently. */
html body main .card > div[style*="text-align: center"] {
    padding: 1.5rem 1rem !important;
    color: var(--ik-muted);
}

/* Action button rows (right side of headers) — vertical alignment with the title. */
html body main .card > div > h2,
html body main .card .card-title {
    align-self: center;
}

/* === Phase 2.17 Header + nav visual unification === */
/* The logo (graphic, brand-heavy) and the nav (typographic) were clashing.
   Tighten the logo, add brand-orange accents on the nav, and put a thin
   gradient line under the header to tie the dark zone to the light content. */

/* Tighter logo so it doesn't dominate the bar */
html body header .header-container .logo-container img,
html body header .header-container .logo-container .header-logo-img {
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    display: block;
}

/* Less header padding for a tighter feel */
html body header .header-container {
    padding: 0.7rem 1.5rem !important;
    gap: 1rem !important;
}

/* Nav items: clean typographic chips, subtle hover, prominent active state */
html body header nav#mainNav ul li a {
    position: relative;
    padding: 0.45rem 0.85rem !important;
    border-radius: 6px;
    font-weight: 500 !important;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78) !important;
    transition: color 0.15s ease, background 0.15s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
}
html body header nav#mainNav ul li a i {
    font-size: 0.85rem;
    opacity: 0.85;
}
html body header nav#mainNav ul li a:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.06);
}
/* Active nav: brand orange (flame) underline + brighter text */
html body header nav#mainNav ul li a.active {
    color: white !important;
    background: rgba(34, 211, 238, 0.18) !important;
    box-shadow: inset 0 -2px 0 0 #22d3ee;
}
html body header nav#mainNav ul li a.active i {
    color: #67e8f9 !important;
    opacity: 1;
}

/* Logout link styling — quiet on the right */
html body header nav#mainNav ul li a[href*="logout"],
html body header nav#mainNav ul li.logout a,
html body header .logout-link {
    color: rgba(249, 115, 22, 0.8) !important;
}
html body header nav#mainNav ul li a[href*="logout"]:hover {
    color: #67e8f9 !important;
    background: rgba(249, 115, 22, 0.1);
}

/* Brand accent line under the header — soft orange-to-blue gradient */
html body header {
    border-bottom: 0 !important;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06),
                0 2px 0 0 rgba(34, 211, 238, 0.35);
}

/* Subtle logo container framing — gives the logo "room" without a hard box */
html body header .header-container .logo-container {
    padding: 0.15rem 0.4rem !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
}
html body header .header-container .logo-container:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Greeting/clock/weather strip — quiet, light text on the dark header */
html body header .header-container .global-header-bar {
    background: transparent !important;
    color: #cbd5e1 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 0.78rem !important;
}
html body header .header-container .global-header-bar .ghb-greeting,
html body header .header-container .global-header-bar .ghb-date,
html body header .header-container .global-header-bar .ghb-weather,
html body header .header-container .global-header-bar .ghb-w-cur,
html body header .header-container .global-header-bar .ghb-w-rng {
    color: #cbd5e1 !important;
}
html body header .header-container .global-header-bar .ghb-clock {
    color: #fef3c7 !important;
    font-weight: 600 !important;
}

/* === Phase 2.17c Header redesign — clean white, slate type, navy active === */
/* Moves off the heavy dark navy header in favor of a quiet white surface that
   lets the customer's logo carry the brand. Active state uses a confident
   navy underline with no background fill. Direction inspired by Stripe / Linear
   / Vercel dashboards — quietly premium, less competing visual weight. */

html body header {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

/* Logo: no frame, smaller, sits flush */
html body header .header-container .logo-container {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
html body header .header-container .logo-container:hover {
    background: transparent !important;
    border: 0 !important;
}
html body header .header-container .logo-container img,
html body header .header-container .logo-container .header-logo-img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    display: block;
}

/* Tighter header padding */
html body header .header-container {
    padding: 0.85rem 1.75rem !important;
    background: transparent !important;
}

/* Nav items: slate type, no background by default */
html body header nav#mainNav ul {
    background: transparent !important;
}
html body header nav#mainNav ul li a {
    color: #475569 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    letter-spacing: -0.005em;
    padding: 0.5rem 0.9rem !important;
    border-radius: 6px;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
}
html body header nav#mainNav ul li a i {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-size: 0.85rem;
}

/* Hover: gentle slate-100 pill */
html body header nav#mainNav ul li a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
html body header nav#mainNav ul li a:hover i {
    color: #475569 !important;
}

/* Active: navy text + thin navy underline, no background, no shadow */
html body header nav#mainNav ul li a.active {
    color: #1e3a8a !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
html body header nav#mainNav ul li a.active::after {
    content: '';
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: -0.4rem;
    height: 2px;
    background: #1e3a8a;
    border-radius: 1px;
}
html body header nav#mainNav ul li a.active i {
    color: #1e3a8a !important;
}

/* Greeting strip: quiet slate, monospace clock pops in navy, temp number gets a warm amber tick */
html body header .header-container .global-header-bar {
    background: transparent !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
html body header .header-container .global-header-bar .ghb-greeting,
html body header .header-container .global-header-bar .ghb-date,
html body header .header-container .global-header-bar .ghb-weather,
html body header .header-container .global-header-bar .ghb-w-rng,
html body header .header-container .global-header-bar .ghb-w-loc {
    color: #64748b !important;
    opacity: 1 !important;
}
html body header .header-container .global-header-bar .ghb-clock {
    color: #1e3a8a !important;
    font-weight: 600 !important;
    font-family: 'SF Mono', 'Roboto Mono', Consolas, monospace !important;
}
html body header .header-container .global-header-bar .ghb-w-cur {
    color: #b45309 !important;
    font-weight: 600 !important;
}
html body header .header-container .global-header-bar .ghb-weather i {
    color: #d97706 !important;
}

/* Logout: soft red, doesn't compete */
html body header nav#mainNav ul li a[href*="logout"],
html body header nav#mainNav ul li.logout a,
html body header .logout-link {
    color: #dc2626 !important;
}
html body header nav#mainNav ul li a[href*="logout"] i {
    color: #ef4444 !important;
}
html body header nav#mainNav ul li a[href*="logout"]:hover {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

/* Page title gets a touch more contrast now that the header is light */
html body main h1.page-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* The thin separator pseudo-elements (Phase 2.6b) — keep them but quieter */
html body header .header-container .global-header-bar .ghb-date::before {
    color: #cbd5e1 !important;
}
html body header .header-container .global-header-bar .ghb-clock::before {
    color: #cbd5e1 !important;
}
html body header .header-container .global-header-bar .ghb-weather::before {
    color: #d97706 !important;
}

/* === Phase 2.17d Dark monochrome header — Vercel/Linear style === */
/* Back to dark background. Pure white as the active accent — no color picking,
   no muddy oranges or fighting cyans. Maximum contrast on dark = white. */

html body header {
    background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%) !important;
    background-image: linear-gradient(180deg, #0b1220 0%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* Logo: stays small + frameless, sits flush on dark */
html body header .header-container .logo-container {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
html body header .header-container .logo-container:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 0 !important;
}
html body header .header-container .logo-container img,
html body header .header-container .logo-container .header-logo-img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    display: block;
}

html body header .header-container {
    padding: 0.85rem 1.75rem !important;
    background: transparent !important;
}

/* Nav inactive: muted white text */
html body header nav#mainNav ul {
    background: transparent !important;
}
html body header nav#mainNav ul li a {
    color: rgba(255, 255, 255, 0.62) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    letter-spacing: -0.005em;
    padding: 0.5rem 0.9rem !important;
    border-radius: 6px;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s ease, background 0.15s ease;
}
html body header nav#mainNav ul li a i {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
    font-size: 0.85rem;
}

/* Hover: subtle white pill */
html body header nav#mainNav ul li a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: white !important;
}
html body header nav#mainNav ul li a:hover i {
    color: white !important;
}

/* Active: pure white text + 2px white underline, NO background tint */
html body header nav#mainNav ul li a.active {
    color: white !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
html body header nav#mainNav ul li a.active::after {
    content: '';
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: -0.4rem;
    height: 2px;
    background: white;
    border-radius: 1px;
}
html body header nav#mainNav ul li a.active i {
    color: white !important;
}

/* Greeting strip — quiet white-with-opacity */
html body header .header-container .global-header-bar {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 0.78rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
html body header .header-container .global-header-bar .ghb-greeting,
html body header .header-container .global-header-bar .ghb-date,
html body header .header-container .global-header-bar .ghb-weather,
html body header .header-container .global-header-bar .ghb-w-rng,
html body header .header-container .global-header-bar .ghb-w-loc {
    color: rgba(255, 255, 255, 0.58) !important;
    opacity: 1 !important;
}
html body header .header-container .global-header-bar .ghb-clock {
    color: #fef3c7 !important;
    font-weight: 600 !important;
    font-family: 'SF Mono', 'Roboto Mono', Consolas, monospace !important;
}
html body header .header-container .global-header-bar .ghb-w-cur {
    color: #fbbf24 !important;
    font-weight: 600 !important;
}
html body header .header-container .global-header-bar .ghb-weather i {
    color: #fbbf24 !important;
}
html body header .header-container .global-header-bar .ghb-date::before,
html body header .header-container .global-header-bar .ghb-clock::before {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Logout — soft red on dark */
html body header nav#mainNav ul li a[href*="logout"],
html body header nav#mainNav ul li.logout a,
html body header .logout-link {
    color: rgba(248, 113, 113, 0.78) !important;
}
html body header nav#mainNav ul li a[href*="logout"] i {
    color: rgba(248, 113, 113, 0.78) !important;
}
html body header nav#mainNav ul li a[href*="logout"]:hover {
    background: rgba(248, 113, 113, 0.12) !important;
    color: #fca5a5 !important;
}

/* Page title contrast — dark text on light body content (unchanged) */
html body main h1.page-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* === Phase 2.17e Bigger logo + visible mobile hamburger === */

/* Logo: bump up so it reads as a brand mark, not a thumbprint */
html body header .header-container .logo-container img,
html body header .header-container .logo-container .header-logo-img {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
}

/* Give the logo a touch of padding so it has room without a hard frame */
html body header .header-container .logo-container {
    padding: 0.15rem 0.5rem !important;
    border-radius: 8px;
    transition: background 0.15s ease;
}
html body header .header-container .logo-container:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Mobile hamburger — hide on desktop, show as visible white button on mobile only */
html body header .mobile-menu-toggle,
html body header button.mobile-menu-toggle,
html body header #mobileMenuToggle {
    display: none !important;
}
@media (max-width: 768px) {
    html body header .mobile-menu-toggle,
    html body header button.mobile-menu-toggle,
    html body header #mobileMenuToggle {
        display: inline-flex !important;
        color: white !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        padding: 0.5rem 0.7rem !important;
        font-size: 1.1rem !important;
        cursor: pointer;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    html body header .mobile-menu-toggle i,
    html body header #mobileMenuToggle i {
        color: white !important;
        font-size: 1.2rem !important;
    }
    html body header .mobile-menu-toggle:hover,
    html body header #mobileMenuToggle:hover {
        background: rgba(255, 255, 255, 0.16) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }
}

/* Mobile header padding tightens so the bigger logo still fits */
@media (max-width: 768px) {
    html body header .header-container {
        padding: 0.6rem 1rem !important;
    }
    html body header .header-container .logo-container img,
    html body header .header-container .logo-container .header-logo-img {
        height: 48px !important;
        max-height: 48px !important;
    }
}

/* === Phase 2.18 Users page row alignment (6-col grid + header strip) === */
@media (min-width: 993px) {
    .mc-user-headers,
    #usersList .mc-user-row {
        display: grid !important;
        grid-template-columns:
            minmax(150px, 1.3fr)   /* Name */
            minmax(90px, 0.7fr)     /* Role */
            minmax(180px, 1.5fr)    /* Email */
            minmax(90px, 0.7fr)     /* Status */
            minmax(130px, 1fr)      /* Last Login */
            minmax(280px, 1.4fr) !important; /* Actions */
        column-gap: 0.65rem !important;
        padding: 0.55rem 0.9rem !important;
        align-items: center !important;
    }
    .mc-user-headers {
        background: var(--ik-bg);
        border-bottom: 1px solid var(--ik-border);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ik-muted);
    }
    .mc-user-headers > span:last-child { text-align: right; padding-right: 0.5rem; }

    #usersList .mc-user-row {
        margin-bottom: 0.4rem !important;
        background: white;
        border-radius: 6px;
    }
    #usersList .mc-user-row .mobile-card-header { display: contents !important; }
    #usersList .mc-user-row .mobile-card-title {
        grid-column: 1;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--ik-text) !important;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0;
    }
    /* Role badge sits in column 2 */
    #usersList .mc-user-row .mobile-card-header > span:not(.mobile-card-title) {
        grid-column: 2;
        justify-self: start;
    }
    /* Body: email | status | last login → columns 3, 4, 5 */
    #usersList .mc-user-row .mobile-card-body { display: contents !important; }
    #usersList .mc-user-row .mobile-card-body > div {
        font-size: 0.82rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0;
    }
    #usersList .mc-user-row .mobile-card-body > div > i.fas { display: none !important; }
    #usersList .mc-user-row .mobile-card-body > div:nth-child(1) { grid-column: 3; }
    #usersList .mc-user-row .mobile-card-body > div:nth-child(2) { grid-column: 4; }
    #usersList .mc-user-row .mobile-card-body > div:nth-child(3) { grid-column: 5; color: var(--ik-muted); }

    /* Actions in column 6, right-aligned */
    #usersList .mc-user-row .mobile-card-actions {
        grid-column: 6 !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 0.3rem !important;
        flex-wrap: nowrap !important;
    }
    #usersList .mc-user-row .mobile-card-actions .btn {
        flex: 0 0 auto !important;
        font-size: 0.72rem !important;
        padding: 0.35rem 0.55rem !important;
        white-space: nowrap !important;
    }
}
@media (max-width: 992px) {
    .mc-user-headers { display: none !important; }
}

/* === Phase 2.19 Recent Activity blade on Inspections === */
#recentActivityCard {
    border: 1px solid var(--ik-border);
    background: white;
    border-radius: 12px;
    padding: 1rem 1.25rem !important;
}
#recentActivityCard .card-title {
    color: var(--ik-text);
    font-weight: 700;
    font-size: 1.05rem;
}
#recentActivityCard .card-title i {
    color: var(--ik-primary);
    margin-right: 0.4rem;
}
.recent-activity-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.recent-activity-empty {
    color: var(--ik-muted);
    font-size: 0.88rem;
    padding: 0.5rem 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.recent-activity-empty i {
    color: var(--ik-muted);
    font-size: 0.85rem;
    opacity: 0.7;
}
.recent-activity-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    background: var(--ik-bg);
    border: 1px solid var(--ik-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ik-text);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.recent-activity-item:hover {
    background: white;
    border-color: var(--ik-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.recent-activity-item > i.fas {
    color: var(--ik-primary);
    font-size: 1rem;
    flex-shrink: 0;
}
.recent-activity-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 500;
}
.recent-activity-meta {
    color: var(--ik-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}
.recent-activity-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--ik-primary);
    color: white;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    flex-shrink: 0;
}


/* === Phase 2.21: mobile modal usability fixes === */

/* The 30x28 close button was below Apple's 44pt touch target. Bump it up on
   mobile so the X is actually tappable. Same for the taskbar close. */
@media (max-width: 768px) {
    .cust-window-mobile .cust-win-close {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.15rem !important;
        border-radius: 8px !important;
    }
    .cust-window-mobile .cust-window-header {
        padding: 0.75rem 1rem !important;
        min-height: 56px !important;
    }
    /* Make the entire header tap-friendly so swipe-down accidental gestures
       don't bubble; also keeps title legible. */
    .cust-window-mobile .cust-window-title {
        font-size: 1rem !important;
    }
}

/* When any floating window is open on mobile, hide the bottom nav and the FAB
   so they don't sit on top of the modal at z-index 99999 / 1000 and steal
   bottom-of-screen taps. Body class is set by customer-windows.js. */
@media (max-width: 768px) {
    body.cust-window-open #mobileNav,
    body.cust-window-open .fab-container,
    body.cust-window-open #fabContainer {
        display: none !important;
    }
    /* Lock body scroll while the modal is up to prevent rubber-band scroll
       on iOS Safari that visually detaches the modal from the chrome. */
    body.cust-window-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Bump cust-window above any legacy z-index 99999 nav. The window itself is
   z-index 2000+ in JS; this safety net handles cases where another element
   has pushed z-index way up. */
.cust-window {
    z-index: 100000;
}
.cust-window-backdrop {
    z-index: 99999;
}

/* === Phase 2.21: legacy .modal mobile usability (syncModal, etc.) === */
@media (max-width: 768px) {
    /* Hide mobile nav + FAB whenever a legacy .modal is showing as flex.
       :has() is widely supported in 2026 iOS Safari/Chrome. */
    body:has(.modal[style*="display: flex"]) #mobileNav,
    body:has(.modal[style*="display: flex"]) .fab-container,
    body:has(.modal[style*="display: flex"]) #fabContainer,
    body:has(.modal[style*="display: block"]) #mobileNav,
    body:has(.modal[style*="display: block"]) .fab-container,
    body:has(.modal[style*="display: block"]) #fabContainer {
        display: none !important;
    }
    .modal {
        z-index: 100000 !important;
    }
}


/* === Phase 2.21b: KPI card click safety on mobile === */
/* Ensure KPI cards stay clickable on mobile even if some absolutely-positioned
   element sneaks above them. position:relative + z-index:1 keeps the anchor's
   click target reachable; pointer-events:auto neutralizes any inherited none. */
@media (max-width: 768px) {
    .kpi-strip a.kpi-card,
    .kpi-card {
        position: relative !important;
        z-index: 1 !important;
        pointer-events: auto !important;
        cursor: pointer;
    }
    /* Inner children should not block the parent anchor's click — let pointer
       events fall through unless a child explicitly stops them. */
    .kpi-card .kpi-label,
    .kpi-card .kpi-value,
    .kpi-card .kpi-sub,
    .kpi-card .kpi-label i {
        pointer-events: none;
    }
}


/* === Phase 2.21c: maximize button + maximized state === */
.cust-win-max {
    width: 30px;
    height: 28px;
    border: 1px solid var(--ik-border);
    background: white;
    border-radius: 5px;
    cursor: pointer;
    color: var(--ik-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cust-win-max:hover {
    background: var(--ik-bg);
    border-color: var(--ik-muted);
}

/* Maximized state — fill viewport with a small inset; no rounded corners. */
.cust-window.cust-window-maximized {
    border-radius: 0 !important;
    box-shadow: 0 0 0 1px var(--ik-border);
    max-height: calc(100vh - 80px) !important;
    max-width: calc(100vw - 16px) !important;
}
.cust-window.cust-window-maximized .cust-window-header {
    cursor: default;
}

/* Mobile: hide max button (mobile is already fullscreen). */
@media (max-width: 768px) {
    .cust-window-mobile .cust-win-max {
        display: none !important;
    }
}


/* === Phase 2.21e (revised in 2.21f): pinned taskbar items === */
/* The base .cust-tb-item is white text on a dark rgba bg (inside the dark
   taskbar). Pinned items use a light gradient bg, so we MUST flip text color
   to dark navy or the label is invisible. */
.cust-tb-item.pinned {
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
    border-color: #c7d2fe;
    color: #1e3a5f !important;
}
.cust-tb-item.pinned i {
    color: #1e3a5f;
}
.cust-tb-item.pinned .cust-tb-label {
    color: #1e3a5f;
    font-weight: 600;
}
.cust-tb-item.pinned.pin {
    /* Not currently open — slightly muted */
    opacity: 0.92;
}
.cust-tb-item.pinned.pin:hover {
    opacity: 1;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}
.cust-tb-item.pinned.active {
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
    color: #1e3a8a !important;
}
.cust-tb-item.pinned.active i,
.cust-tb-item.pinned.active .cust-tb-label {
    color: #1e3a8a;
}
.cust-tb-item.pinned .cust-tb-gear,
.cust-tb-item.pinned .cust-tb-unpin,
.cust-tb-item.pinned .cust-tb-pin {
    color: #1e3a5f;
}

.cust-tb-gear,
.cust-tb-pin,
.cust-tb-unpin {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 4px;
    border-radius: 3px;
    font-size: 0.8rem;
    opacity: 0.65;
    transition: opacity 0.12s, background 0.12s;
}
.cust-tb-gear:hover,
.cust-tb-pin:hover,
.cust-tb-unpin:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}
.cust-tb-item.pinned .cust-tb-gear {
    color: #1e3a8a;
}

/* When openMaximized is ON the gear is highlighted. JS sets title="...ON";
   target via title-attr substring matching. */
.cust-tb-gear[title*="ON"] {
    color: #f59e0b;
    opacity: 1;
}
.cust-tb-gear[title*="ON"]::after {
    content: '\2713'; /* ✓ */
    font-size: 0.6rem;
    margin-left: 2px;
}

/* Mobile: show the taskbar (it's the single surface now). Trim padding,
   hide labels on pinned items to save space — leave icons only. */
@media (max-width: 767px) {
    .cust-taskbar { display: block !important; }
    .cust-tb-items { padding: 0.35rem 0.5rem; gap: 0.35rem; }
    .cust-tb-item .cust-tb-label { display: none; }
    .cust-tb-item { padding: 0.4rem 0.6rem; }
    /* Reserve space at the bottom so content doesn't sit under the taskbar. */
    body:has(.cust-taskbar[style*="block"]) {
        padding-bottom: 52px !important;
    }
    /* Lift the mobile nav above the taskbar so both are reachable. The taskbar
       sits at z 5000, mobileNav at 99999 — they stack visually with taskbar
       just above the nav due to bottom positioning. */
    .cust-taskbar { bottom: 64px !important; }
}


/* === Phase 2.21i: iframe-mode floating windows === */
/* When an iframe is the body content, the body needs an explicit height so
   the iframe has something to fill. Default cust-window doesn't size-to-content
   for iframes the same way it does for HTML. */
.cust-window {
    min-height: 400px;
}
.cust-window:not(.cust-window-mobile) .cust-window-body:has(> iframe) {
    height: calc(80vh - 56px);
    min-height: 500px;
}
.cust-window.cust-window-maximized .cust-window-body:has(> iframe) {
    height: calc(100vh - 88px);
}
.cust-window-mobile .cust-window-body:has(> iframe) {
    height: calc(100vh - 64px);
}


/* === Phase 2.21j: mobile taskbar restyle ===
   The dark navy gradient taskbar from Phase 2.21e was reading on phones as a
   "blue bar" sitting against the rest of the light UI. Now it's a light
   surface dock with a subtle top border + shadow, so the pinned items pop as
   chips rather than a heavy banner. Desktop taskbar styling is unchanged. */
@media (max-width: 767px) {
    .cust-taskbar {
        background: rgba(255, 255, 255, 0.98) !important;
        color: #1e3a5f !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08) !important;
        padding: 0.45rem 0.6rem !important;
    }
    .cust-taskbar .cust-tb-items {
        gap: 0.4rem;
    }
    /* Generic (non-pinned) items: light chip on white */
    .cust-tb-item {
        background: #f1f5f9 !important;
        color: #1e3a5f !important;
        border-color: #cbd5e1 !important;
    }
    .cust-tb-item i {
        color: #1e3a5f !important;
    }
    /* Pinned items: soft blue chip — already light from 2.21f, just ensure
       they keep contrast against the new white taskbar. */
    .cust-tb-item.pinned {
        background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
        color: #1e3a8a !important;
        border-color: #93c5fd !important;
    }
    .cust-tb-item.pinned.active {
        background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
        border-color: #60a5fa !important;
    }
    /* Action buttons on items keep dark navy ink for clarity */
    .cust-tb-close,
    .cust-tb-gear,
    .cust-tb-pin,
    .cust-tb-unpin {
        color: #1e3a5f !important;
    }
}


/* === Phase 2.21k: global tabs (auto-registered "recent records" in taskbar) === */
.cust-tb-item.cust-tb-tab {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fbbf24;
    color: #78350f;
}
.cust-tb-item.cust-tb-tab i {
    color: #78350f;
}
.cust-tb-item.cust-tb-tab .cust-tb-label {
    color: #78350f;
    font-weight: 600;
}
.cust-tb-item.cust-tb-tab.active {
    background: linear-gradient(180deg, #fde68a 0%, #fcd34d 100%);
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) inset;
}
.cust-tb-item.cust-tb-tab .cust-tb-close {
    color: #78350f;
}
@media (max-width: 767px) {
    /* On mobile, keep tab chip readable on the new light dock */
    .cust-tb-item.cust-tb-tab {
        background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
        color: #78350f !important;
        border-color: #fbbf24 !important;
    }
    .cust-tb-item.cust-tb-tab i,
    .cust-tb-item.cust-tb-tab .cust-tb-label,
    .cust-tb-item.cust-tb-tab .cust-tb-close {
        color: #78350f !important;
    }
}


/* === Phase 2.21m: hide the global taskbar on mobile (phone) ===
   Scott's call — the bottom dock with NFPA + Templates pins is a desktop/tablet
   concept. On phones it's noise. Templates access is restored via a top-row
   action button on the main pages (inspections, customers, work-orders).
   Breakpoint 639px covers up to small tablets / large phones; tablets and
   desktop keep the dock unchanged. */
@media (max-width: 639px) {
    .cust-taskbar { display: none !important; }
    /* Drop the body bottom-padding we reserved for the dock */
    body:has(.cust-taskbar[style*="block"]) {
        padding-bottom: 0 !important;
    }
}


/* === Phase 2.21n: sticky action row inside floating window modals === */
/* Any modal whose content includes a .cust-window-actions row gets its
   action buttons (Download PDF, Close, etc.) pinned to the bottom of the
   modal body so they stay reachable regardless of scroll position. Critical
   on iOS Safari where the bottom toolbar can swallow non-sticky controls. */
.cust-window-actions {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 10;
    margin: 1rem -1.25rem -1.25rem -1.25rem !important;
    padding: 0.85rem 1.25rem !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
}
@media (max-width: 767px) {
    .cust-window-actions {
        margin: 1rem -1.25rem 0 -1.25rem !important;
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
    }
    .cust-window-mobile .cust-window-body {
        /* Action row provides its own bottom padding via env(safe-area-inset);
           clear the body's existing reservation so it doesn't double up. */
        padding-bottom: 0 !important;
    }
}


/* === Phase 2.21o: broken-photo placeholder === */
.photo-broken {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 120px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem;
}
.photo-broken i {
    font-size: 1.5rem;
    color: #94a3b8;
}

/* Mobile bottom-nav brand accent — reactive to the tenant brand color set by
   branding.js (--brand-primary), so it's never a hardcoded orange. (prep70) */
#mobileNav { border-top-color: var(--brand-primary, #f97316) !important; }

/* ============================================================================
   DARK THEME  (System Preferences -> Theme -> Dark, or Match system)
   Applied app-wide by branding.js via <html data-theme="dark">. Most surfaces
   use the --ik-* tokens, so redefining them flips the bulk of the app; the rest
   are explicit overrides for hardcoded-white surfaces and common inline colors.
   ============================================================================ */
[data-theme="dark"] {
    --ik-bg: #0f172a;
    --ik-card: #1a2436;
    --ik-border: #2c3a52;
    --ik-text: #e6edf6;
    --ik-muted: #9fb0c4;
    --ik-card-hover: #22304a;
    color-scheme: dark;
}
[data-theme="dark"] body { background: var(--ik-bg) !important; color: var(--ik-text) !important; }

/* Cards / panels / containers */
[data-theme="dark"] .card,
[data-theme="dark"] main#main-content .card,
[data-theme="dark"] .mobile-card,
[data-theme="dark"] .cust-card,
[data-theme="dark"] .inspection-card,
[data-theme="dark"] .form-section,
[data-theme="dark"] .sp-panel,
[data-theme="dark"] .cust-window,
[data-theme="dark"] .cust-window-body {
    background: var(--ik-card) !important;
    border-color: var(--ik-border) !important;
    color: var(--ik-text) !important;
}
[data-theme="dark"] .cust-window-header,
[data-theme="dark"] .cust-taskbar { background: #0f1a2b !important; color: var(--ik-text) !important; border-color: var(--ik-border) !important; }

/* Form controls */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-section input,
[data-theme="dark"] .form-section select,
[data-theme="dark"] .form-section textarea {
    background: #0e1a2c !important;
    color: var(--ik-text) !important;
    border-color: var(--ik-border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6b7e96 !important; }

/* Tables */
[data-theme="dark"] table,
[data-theme="dark"] .desktop-table { background: var(--ik-card) !important; color: var(--ik-text) !important; }
[data-theme="dark"] table td,
[data-theme="dark"] table th { border-color: var(--ik-border) !important; }
[data-theme="dark"] table tbody tr:hover,
[data-theme="dark"] .mobile-card:hover,
[data-theme="dark"] .cust-bldg-row:hover { background: var(--ik-card-hover) !important; }

/* Mobile bottom nav goes dark (it is white in light mode) */
[data-theme="dark"] #mobileNav { background: #0f1a2b !important; border-top-color: var(--brand-primary, #f97316) !important; }
[data-theme="dark"] #mobileNav .mobile-nav-link { color: var(--ik-muted) !important; }

/* Headings + body text that use the token stay readable; common inline LIGHT
   backgrounds (used across modals/cards) get darkened by value. */
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f1f5f9"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #eff6ff"],
[data-theme="dark"] [style*="background: #f0f9ff"] {
    background-color: #1a2436 !important;
    background-image: none !important;
    color: var(--ik-text) !important;
}
/* Common inline DARK text colors -> readable on dark */
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #475569"] { color: var(--ik-text) !important; }

/* Empty-state / muted helper text */
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #94a3b8"] { color: var(--ik-muted) !important; }

/* Dark theme — white/outline buttons + org-group header */
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .quick-actions-container .qa-secondary,
[data-theme="dark"] .quick-actions-container .qa-accent {
    background: var(--ik-card) !important;
    color: var(--ik-text) !important;
    border-color: var(--ik-border) !important;
}
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .qa-secondary:hover { background: var(--ik-card-hover) !important; }
/* Organization roll-up header (light #eef2f7 in light mode) */
[data-theme="dark"] [style*="#eef2f7"],
[data-theme="dark"] [style*="#e0f2fe"],
[data-theme="dark"] [style*="#f0f4f8"] {
    background: #16223a !important;
    color: var(--ik-text) !important;
}

/* ============================================================================
   DARK THEME — contrast fixes from the 2026-06-03 audit (class-based colors the
   token/inline overrides above didn't reach). 143 low-contrast elements found.
   ============================================================================ */
/* Page titles were #0f172a on the dark page bg = invisible */
[data-theme="dark"] .page-header h1,
[data-theme="dark"] main h1, [data-theme="dark"] main h2,
[data-theme="dark"] main h3, [data-theme="dark"] main h4 { color: var(--ik-text) !important; }
/* Help icon (used var(--concrete), never redefined for dark) + faint helper icons */
[data-theme="dark"] .help-icon, [data-theme="dark"] .help-icon i { color: var(--ik-muted) !important; }
[data-theme="dark"] .help-icon:hover, [data-theme="dark"] .help-icon:hover i { color: var(--ik-text) !important; }
/* Navy/blue accent text + icons vanish on dark cards -> readable light blue */
[data-theme="dark"] [style*="color: #0a3161"],[data-theme="dark"] [style*="color:#0a3161"],
[data-theme="dark"] [style*="color: #1e3a5f"],[data-theme="dark"] [style*="color: #1e3a8a"],
[data-theme="dark"] [style*="color: #1e40af"],[data-theme="dark"] [style*="color: #1d4ed8"],
[data-theme="dark"] [style*="color: #1e3a95"] { color: #8ab4f8 !important; }
/* Stat cards + calendar kept WHITE backgrounds in dark mode -> dark surface, light text */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .calendar, [data-theme="dark"] .calendar-view-toggle,
[data-theme="dark"] .agenda-day,
[data-theme="dark"] .calendar td, [data-theme="dark"] .calendar th,
[data-theme="dark"] .mobile-calendar-day {
  background-color: #1a2436 !important; background-image: none !important;
  border-color: var(--ik-border) !important; color: var(--ik-text) !important;
}
[data-theme="dark"] .calendar td.today, [data-theme="dark"] .mobile-calendar-day.today { background-color: #1e3050 !important; }
[data-theme="dark"] .calendar td.has-inspection, [data-theme="dark"] .mobile-calendar-day.has-inspection { background-color: #16263f !important; }
/* Inline light status tints (deficiency severity boxes etc.) -> dark */
[data-theme="dark"] [style*="#fef2f2"],[data-theme="dark"] [style*="#fee2e2"],[data-theme="dark"] [style*="#fef3c7"],
[data-theme="dark"] [style*="#fffbeb"],[data-theme="dark"] [style*="#fefce8"],[data-theme="dark"] [style*="#f0fdf4"],
[data-theme="dark"] [style*="#fff7ed"],[data-theme="dark"] [style*="#ecfdf5"] { background-color: #1a2436 !important; background-image: none !important; }
/* Calendar cells: once the cell goes dark, force ALL its text light (day numbers,
   labels, chips) so nothing is dark-on-dark. */
[data-theme="dark"] .calendar td, [data-theme="dark"] .calendar td *,
[data-theme="dark"] .calendar th, [data-theme="dark"] .calendar th *,
[data-theme="dark"] .mobile-calendar-day, [data-theme="dark"] .mobile-calendar-day *,
[data-theme="dark"] .agenda-day, [data-theme="dark"] .agenda-day * { color: var(--ik-text) !important; }