/* ═══════════════════════════════════════════════════════════
   Utmark Product Demo — CSS
   ═══════════════════════════════════════════════════════════ */

/* ─── Theme Variables ─────────────────────────────────────── */
:root {
  --bg-primary: #0f1117;
  --bg-surface: #161922;
  --bg-elevated: #1e2230;
  --bg-page: #0a0c12;
  --border: #252a3a;
  --border-accent: rgba(224, 133, 42, 0.15);
  --text-primary: #e4e7ef;
  --text-secondary: #858da0;
  --text-muted: #4e5568;
  --accent: #e0852a;
  --accent-hover: #eda04a;
  --accent-glow: rgba(224, 133, 42, 0.12);
  --green-light: #7db33a;
  --green-dark: #4a7025;
  --success: #7db33a;
  --success-bg: rgba(125, 179, 58, 0.25);
  --danger: #d44040;
  --danger-bg: rgba(212, 64, 64, 0.22);
  --warning: #d4a830;
  --warning-bg: rgba(212, 168, 48, 0.22);
  --na: #4e5568;
  --na-bg: rgba(78, 85, 104, 0.22);
  --gradient-accent: linear-gradient(135deg, #e0852a 0%, #c8601a 100%);
  --gradient-green: linear-gradient(135deg, #7db33a 0%, #4a7025 100%);
  --shadow-card: 0 2px 8px rgba(6, 8, 18, 0.4);
  --shadow-elevated: 0 8px 32px rgba(6, 8, 18, 0.6);
  --shadow-glow: 0 0 20px var(--accent-glow);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 400ms ease;
  --nav-height: 56px;
}

[data-theme="light"] {
  --bg-primary: #f4f5f7;
  --bg-surface: #ffffff;
  --bg-elevated: #ecedf0;
  --bg-page: #ebedf1;
  --border: #d0d3dc;
  --border-accent: rgba(196, 112, 32, 0.12);
  --text-primary: #141620;
  --text-secondary: #4e5568;
  --text-muted: #858da0;
  --accent: #c47020;
  --accent-hover: #a85c18;
  --accent-glow: rgba(196, 112, 32, 0.08);
  --green-light: #6a9a2e;
  --green-dark: #3d5e1c;
  --success: #6a9a2e;
  --success-bg: rgba(106, 154, 46, 0.18);
  --danger: #b83535;
  --danger-bg: rgba(184, 53, 53, 0.16);
  --warning: #b89020;
  --warning-bg: rgba(184, 144, 32, 0.16);
  --na: #b0b5c0;
  --na-bg: rgba(176, 181, 192, 0.18);
  --gradient-accent: linear-gradient(135deg, #c47020 0%, #a85218 100%);
  --gradient-green: linear-gradient(135deg, #6a9a2e 0%, #3d5e1c 100%);
  --shadow-card: 0 2px 8px rgba(20, 22, 32, 0.06);
  --shadow-elevated: 0 8px 32px rgba(20, 22, 32, 0.1);
  --shadow-glow: 0 0 16px var(--accent-glow);
}

/* ─── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  transition: background var(--transition-slow), color var(--transition-slow);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-primary);
}

img { max-width: 100%; display: block; }

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Top Navigation ──────────────────────────────────────── */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: background var(--transition-slow), border-color var(--transition-slow);
}

.top-nav.hidden { transform: translateY(-100%); pointer-events: none; }

.nav-left { display: flex; align-items: center; gap: 16px; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.35rem;
  font-weight: 800;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.nav-logo-icon {
  height: 28px;
  width: auto;
}

.nav-right { display: flex; align-items: center; gap: 8px; }

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
  position: relative;
}
.theme-toggle:hover { background: var(--bg-elevated); }
.theme-toggle svg { width: 18px; height: 18px; }

.theme-icon { position: absolute; transition: opacity var(--transition-slow), transform var(--transition-slow); }
[data-theme="dark"] .theme-icon--dark { opacity: 1; transform: rotate(0deg); }
[data-theme="dark"] .theme-icon--light { opacity: 0; transform: rotate(-360deg); }
[data-theme="light"] .theme-icon--dark { opacity: 0; transform: rotate(360deg); }
[data-theme="light"] .theme-icon--light { opacity: 1; transform: rotate(0deg); }

/* ─── Language Selector ───────────────────────────────────── */
.lang-selector {
  position: relative;
}

.lang-btn {
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font);
}

.lang-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.lang-flag {
  font-size: 1.15rem;
  line-height: 1;
}

.lang-code {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  padding: 4px;
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
  z-index: 1000;
}

.lang-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-option:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.lang-option.active {
  color: var(--accent);
  font-weight: 600;
}

.nav-settings {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-settings:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nav-settings svg { width: 18px; height: 18px; }

/* ─── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.back-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-right: 4px;
  flex-shrink: 0;
}
.back-arrow:hover {
  background: var(--bg-elevated);
  color: var(--accent);
}
.back-arrow svg { width: 16px; height: 16px; }

.breadcrumbs a:not(.back-arrow) {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.breadcrumbs a:not(.back-arrow):hover { color: var(--accent); }

.breadcrumbs .sep {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.breadcrumbs .current {
  color: var(--text-primary);
  font-weight: 500;
}

/* ─── Page Container ──────────────────────────────────────── */
.page-container {
  margin-top: var(--nav-height);
  min-height: calc(100vh - var(--nav-height));
}

.page-content {
  animation: pageIn 200ms ease both;
}

.page-content.page-exit {
  animation: pageOut 150ms ease both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}

/* ─── Landing Page ────────────────────────────────────────── */
.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 44px;
  margin-top: calc(-1 * var(--nav-height));
}

.landing-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  position: relative;
  overflow: hidden;
  background:
    /* Orange accent glow — focal point behind the wordmark */
    radial-gradient(ellipse 600px 400px at 50% 35%, rgba(224, 133, 42, 0.18) 0%, transparent 70%),
    /* Secondary warm glow, offset for depth */
    radial-gradient(ellipse 400px 300px at 30% 60%, rgba(224, 133, 42, 0.06) 0%, transparent 70%),
    /* Cool blue-slate accent for contrast, lower-right */
    radial-gradient(ellipse 500px 400px at 75% 70%, rgba(100, 130, 180, 0.06) 0%, transparent 70%),
    /* Subtle grid pattern — precision / technology feel */
    linear-gradient(rgba(224, 133, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 133, 42, 0.03) 1px, transparent 1px),
    /* Base: rich dark gradient from top to bottom */
    linear-gradient(175deg, var(--bg-surface) 0%, var(--bg-page) 50%, #060810 100%);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    60px 60px,
    60px 60px,
    100% 100%;
}

/* Ensure hero text content stays above decorative pseudo-elements */
.landing-wordmark,
.landing-subtitle,
.landing-actions,
.landing-features {
  position: relative;
  z-index: 1;
}

/* Topographic / contour-line overlay — evokes surveying and terrain mapping */
.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* Concentric rings — topo contour lines */
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 29%, rgba(224, 133, 42, 0.04) 30%, transparent 31%),
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 44%, rgba(224, 133, 42, 0.035) 45%, transparent 46%),
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 59%, rgba(224, 133, 42, 0.03) 60%, transparent 61%),
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 74%, rgba(224, 133, 42, 0.025) 75%, transparent 76%),
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 89%, rgba(224, 133, 42, 0.02) 90%, transparent 91%);
  pointer-events: none;
}

/* Horizontal perspective lines — road / vanishing-point feel */
.landing-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(224, 133, 42, 0.03) 60.5%, transparent 61%),
    linear-gradient(180deg, transparent 70%, rgba(224, 133, 42, 0.025) 70.5%, transparent 71%),
    linear-gradient(180deg, transparent 78%, rgba(224, 133, 42, 0.02) 78.5%, transparent 79%),
    linear-gradient(180deg, transparent 84%, rgba(224, 133, 42, 0.015) 84.5%, transparent 85%),
    linear-gradient(180deg, transparent 89%, rgba(224, 133, 42, 0.01) 89.5%, transparent 90%);
  pointer-events: none;
}

/* Light theme: slightly warmer and more visible pattern */
[data-theme="light"] .landing-hero {
  background:
    radial-gradient(ellipse 600px 400px at 50% 35%, rgba(196, 112, 32, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 30% 60%, rgba(196, 112, 32, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 75% 70%, rgba(80, 110, 160, 0.05) 0%, transparent 70%),
    linear-gradient(rgba(196, 112, 32, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 112, 32, 0.04) 1px, transparent 1px),
    linear-gradient(175deg, var(--bg-surface) 0%, var(--bg-page) 50%, #d8dae0 100%);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    60px 60px,
    60px 60px,
    100% 100%;
}

[data-theme="light"] .landing-hero::before {
  background:
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 29%, rgba(196, 112, 32, 0.05) 30%, transparent 31%),
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 44%, rgba(196, 112, 32, 0.045) 45%, transparent 46%),
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 59%, rgba(196, 112, 32, 0.04) 60%, transparent 61%),
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 74%, rgba(196, 112, 32, 0.035) 75%, transparent 76%),
    radial-gradient(ellipse 800px 500px at 50% 40%, transparent 89%, rgba(196, 112, 32, 0.03) 90%, transparent 91%);
}

/* ─── Landing Nav Bar ─────────────────────────────────────── */
.landing-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.landing-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-nav-logo {
  height: 32px;
  width: auto;
}

.landing-nav-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.landing-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.landing-nav .theme-toggle {
  width: 30px;
  height: 30px;
}
.landing-nav .theme-toggle svg {
  width: 15px;
  height: 15px;
}

.btn-sm {
  padding: 5px 14px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.btn-outline:hover {
  border-color: var(--accent);
  background: rgba(224, 133, 42, 0.06);
}
.btn-outline svg {
  width: 14px;
  height: 14px;
}

.landing-logo {
  height: 180px;
  width: auto;
  margin-bottom: 24px;
}

.landing-wordmark {
  font-size: 4.5rem;
  font-weight: 800;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -2px;
  margin-bottom: 16px;
  position: relative;
}

.landing-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin-bottom: 40px;
  line-height: 1.6;
}

.landing-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 80px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(224, 133, 42, 0.3);
}
.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(224, 133, 42, 0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--bg-surface);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.85rem;
}
.btn-sm svg { width: 15px; height: 15px; }

.btn svg { width: 18px; height: 18px; }

/* Feature cards */
.landing-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  width: 100%;
  padding: 0 24px;
  margin-bottom: 60px;
}

.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: all var(--transition-normal);
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}

.feature-card .icon {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224, 133, 42, 0.1);
  border-radius: var(--radius-md);
  color: var(--accent);
}
.feature-card .icon svg { width: 24px; height: 24px; }

.feature-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Social proof */
.landing-social {
  padding: 32px 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.landing-social p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.landing-logos {
  display: flex;
  justify-content: center;
  gap: 40px;
  opacity: 0.4;
}

.landing-logos span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ─── Home Page (new landing) ────────────────────────────── */
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 44px;
  margin-top: calc(-1 * var(--nav-height));
}

/* Hero */
.home-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 80px;
  position: relative;
  overflow: hidden;
  min-height: 520px;
}
.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 13, 11, 0.55) 0%,
    rgba(12, 13, 11, 0.75) 50%,
    rgba(12, 13, 11, 0.90) 100%
  );
}
[data-theme="light"] .home-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(246, 245, 242, 0.50) 0%,
    rgba(246, 245, 242, 0.75) 50%,
    rgba(246, 245, 242, 0.92) 100%
  );
}
/* Fallback when no hero image is loaded */
.home-hero-img[src=""] ~ .home-hero-overlay,
.home-hero-bg:not(:has(img[complete])) ~ .home-hero-inner {
  /* keep the gradient glow as fallback */
}
.home-hero::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(224, 133, 42, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.home-hero-inner {
  position: relative;
  max-width: 720px;
  z-index: 2;
}
.home-headline {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.home-subtitle {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  margin-bottom: 36px;
}
.home-cta-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.btn-lg {
  padding: 14px 32px;
  font-size: 1rem;
}
.home-cta-call {
  min-width: 180px;
}
.home-secondary-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.home-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.home-contact-link:hover {
  color: var(--accent);
}
.home-contact-link svg {
  width: 16px;
  height: 16px;
}
.home-cta-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

/* Sections */
.home-section {
  padding: 64px 24px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}
.home-section--alt {
  max-width: 100%;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-section--alt > * {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.home-section-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 40px;
  text-align: center;
}

/* Steps (How it works) — alternating rows */
.home-steps-visual {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.home-step-row {
  display: flex;
  align-items: center;
  gap: 40px;
}
.home-step-row--reverse {
  flex-direction: row-reverse;
}
.home-step-content {
  flex: 1;
}
.home-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.home-step-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.home-step-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 400px;
}
.home-step-image {
  flex: 1;
  max-width: 420px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.home-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.home-step-image--placeholder {
  background: var(--bg-surface);
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
}
.home-step-image--placeholder svg {
  width: 36px;
  height: 36px;
  opacity: 0.4;
}
.home-step-image--placeholder span {
  font-size: 0.8rem;
  text-align: center;
  max-width: 200px;
  line-height: 1.4;
}

/* Lightbox */
.home-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: fadeIn 0.15s ease;
}
.home-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Industry quotes */
.home-industry-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.home-industry-quote {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home-industry-quote blockquote {
  font-size: 1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 16px;
  position: relative;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}
.home-industry-quote cite {
  font-size: 0.8rem;
  font-style: normal;
  color: var(--text-muted);
  font-weight: 500;
}

/* Value cards (Why Utmark) */
.home-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.home-value-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}
.home-value-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.home-value-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 133, 42, 0.1);
  border-radius: var(--radius-md);
  color: var(--accent);
}
.home-value-icon svg {
  width: 24px;
  height: 24px;
}
.home-value-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.home-value-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Quote */
.home-quote-section {
  padding: 56px 24px;
  text-align: center;
}
.home-blockquote {
  font-size: 1.4rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-primary);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
  letter-spacing: -0.3px;
  opacity: 0.85;
}

/* Audience cards */
.home-audience {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.home-audience-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: border-color var(--transition-normal);
}
.home-audience-card:hover {
  border-color: var(--accent);
}
.home-audience-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.home-audience-icon svg {
  width: 24px;
  height: 24px;
}
.home-audience-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.home-audience-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Contact */
.home-contact {
  padding: 64px 24px;
  text-align: center;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}
.home-contact h2 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.home-contact-text {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.home-contact-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.home-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.home-contact-item:hover {
  opacity: 0.8;
}
.home-contact-item svg {
  width: 20px;
  height: 20px;
}

/* Footer */
.home-footer {
  padding: 32px 24px 24px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.home-footer-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-footer-details {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
}
.home-footer-legal {
  margin-top: 4px;
  font-size: 0.7rem;
}
.home-footer-legal a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.home-footer-legal a:hover {
  color: var(--text-secondary);
}
.home-footer .landing-nav-name {
  font-size: 0.8rem;
}
.home-footer-sep {
  opacity: 0.4;
}

/* Privacy page */
.privacy-page {
  display: flex;
  justify-content: center;
  padding: 48px 24px;
  min-height: 100vh;
  background: var(--bg-page);
}
.privacy-content {
  max-width: 640px;
  width: 100%;
  color: var(--text-primary);
  line-height: 1.7;
}
.privacy-content h1 { font-size: 1.5rem; margin-bottom: 8px; }
.privacy-content h2 { font-size: 1rem; margin-top: 28px; margin-bottom: 8px; color: var(--text-primary); }
.privacy-content p, .privacy-content ul { margin-bottom: 12px; color: var(--text-secondary); font-size: 0.9rem; }
.privacy-content ul { padding-left: 20px; }
.privacy-content li { margin-bottom: 6px; }
.privacy-content a { color: var(--accent); }
.privacy-updated { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 24px; }
.privacy-back {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
}
.privacy-back:hover { color: var(--accent); }

/* Home responsive */
@media (max-width: 768px) {
  .home-headline {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }
  .home-subtitle {
    font-size: 2rem;
    letter-spacing: -1px;
  }
  .home-step-row,
  .home-step-row--reverse {
    flex-direction: column;
  }
  .home-step-image {
    max-width: 100%;
  }
  .home-values,
  .home-audience,
  .home-industry-quotes {
    grid-template-columns: 1fr;
  }
  .home-blockquote {
    font-size: 1.15rem;
  }
}
@media (max-width: 480px) {
  .home-secondary-cta {
    flex-direction: column;
    gap: 8px;
  }
  .home-cta-sep {
    display: none;
  }
  .home-contact-links {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* Login modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 200ms ease;
}

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-elevated);
  animation: modalIn 200ms ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal h2 {
  font-size: 1.4rem;
  margin-bottom: 24px;
  text-align: center;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font);
  transition: border-color var(--transition-fast);
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
}
.form-input.shake {
  animation: shake 300ms ease;
  border-color: var(--danger);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.form-error {
  font-size: 0.8rem;
  color: var(--danger);
  margin-top: 4px;
  display: none;
}
.form-error.visible { display: block; }

.modal .btn { width: 100%; justify-content: center; margin-top: 8px; }

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}

/* ─── Project List Page ───────────────────────────────────── */
.projects-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font);
  transition: border-color var(--transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b90a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  padding-left: 32px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 250ms ease, border-color 200ms ease;
  display: flex;
  gap: 14px;
  align-items: center;
  position: relative;
}
.project-card::before {
  content: '›';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.35;
  transition: opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.project-card:hover::before {
  opacity: 1;
  color: var(--accent);
  animation: chevron-nudge 0.8s ease-in-out infinite;
}
.project-card:hover {
  border-color: color-mix(in srgb, var(--border) 40%, var(--accent));
  background: color-mix(in srgb, var(--bg-primary) 92%, var(--accent));
  box-shadow: var(--shadow-card), var(--shadow-glow);
}
.project-card.hover {
  border-color: var(--accent);
  background: rgba(224, 133, 42, 0.06);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}
.project-card.active {
  border-color: var(--accent);
  background: rgba(224, 133, 42, 0.08);
  box-shadow: var(--shadow-card);
}

.project-score {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.project-score svg {
  transform: rotate(-90deg);
}

.project-score .score-text {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

.project-score .score-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.score-loading::after {
  content: '···';
  animation: score-pulse 1.2s ease-in-out infinite;
}
@keyframes score-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.project-info { flex: 1; min-width: 0; }

.project-info h3 {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-info .meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ─── Collapsible Inline Map ──────────────────────────────── */
.map-collapse {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  overflow: hidden;
}

.map-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}
.map-collapse-header:hover { background: var(--bg-elevated); }

.map-collapse-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.map-collapse-left svg { width: 16px; height: 16px; }

.map-collapse-chevron {
  width: 16px; height: 16px;
  color: var(--text-muted);
  transition: transform var(--transition-normal);
}
.map-collapse.open .map-collapse-chevron { transform: rotate(180deg); }

.map-collapse-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}
.map-collapse.open .map-collapse-body {
  max-height: 500px;
}

.inline-map {
  width: 100%;
  height: 340px;
}

/* ─── Map Styles ──────────────────────────────────────────── */
.map-container {
  width: 100%;
  height: 100%;
}

.map-marker {
  width: 32px; height: 32px;
  cursor: pointer;
  transform: scale(1);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-marker:hover,
.map-marker.highlighted { transform: scale(1.35); }
.map-marker.bounce { animation: markerBounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes markerBounce {
  0%  { transform: scale(1); }
  30% { transform: scale(1.5); }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.15); }
  100%{ transform: scale(1); }
}

.map-marker-inner {
  width: 32px; height: 32px;
  background: var(--accent);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  position: relative;
  transition: box-shadow 300ms ease;
}

.map-marker:hover .map-marker-inner,
.map-marker.highlighted .map-marker-inner {
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 4px rgba(224,133,42,0.25);
}

.map-marker-inner::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 300ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-marker:hover .map-marker-inner::after,
.map-marker.highlighted .map-marker-inner::after {
  opacity: 0.5;
  transform: scale(1.5);
  animation: pulseHover 1.2s ease infinite 300ms;
}

/* Small marker variant */
.map-marker--sm { width: 20px; height: 20px; }
.map-marker--sm .map-marker-inner { width: 20px; height: 20px; border-width: 2px; }
.map-marker--sm .map-marker-inner::after { inset: -4px; }

@keyframes pulseHover {
  0%   { transform: scale(1.3); opacity: 0.5; }
  100% { transform: scale(2.0); opacity: 0; }
}

.map-marker-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0px) scale(0.85);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-marker:hover .map-marker-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-14px) scale(1);
}

/* Rich marker tooltip (issue hover card) */
.map-marker-tooltip--rich {
  white-space: normal;
  width: 200px;
  padding: 0;
  overflow: hidden;
}
.marker-crop {
  width: 100%;
  height: 80px;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-primary) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marker-crop-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.marker-crop svg { opacity: 0.18; }
.marker-crop-signs {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
  z-index: 2;
}
.marker-crop-signs img {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.marker-card-body {
  padding: 8px 10px;
}
.marker-card-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--danger);
  margin-bottom: 2px;
}
.marker-card-comment {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Leaflet overrides — prevent marker background, fix z-index */
.leaflet-div-icon { background: none; border: none; }
.leaflet-container { font-family: var(--font); }

/* ─── Project Summary Page ────────────────────────────────── */
.project-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all var(--transition-normal);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  border-color: color-mix(in srgb, var(--border) 50%, var(--accent));
}

.kpi-card .kpi-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.kpi-card .kpi-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}

.kpi-card .kpi-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.kpi-card .kpi-value[data-color="success"] { color: var(--success); }
.kpi-card .kpi-value[data-color="danger"] { color: var(--danger); }
.kpi-card .kpi-value[data-color="accent"] { color: var(--accent); }

/* Section blocks */
.section-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.section-block h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-block h3 svg { width: 18px; height: 18px; color: var(--accent); }

/* Latest inspection box */
.latest-insp {
  background: var(--bg-surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 28px;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: 0 0 0 1px var(--accent-glow), var(--shadow-card);
}
.latest-insp:hover {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 1px var(--accent-glow), var(--shadow-card), 0 0 30px var(--accent-glow);
  transform: translateY(-2px);
}
.latest-insp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.latest-insp-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.latest-insp-label svg { width: 16px; height: 16px; color: var(--accent); }
.latest-insp-center {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 20px;
}
.latest-insp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  flex-shrink: 0;
}
.latest-insp-score {
  font-family: var(--font-mono);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  flex-shrink: 0;
}
.latest-insp-score-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  white-space: nowrap;
}

/* Inspection pill */
.insp-pill {
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.insp-pill--loading {
  background: var(--bg-elevated);
  color: transparent;
  min-width: 80px;
  display: inline-block;
}
.insp-pill--ok { background: var(--success-bg); color: var(--success); }
.insp-pill--warn { background: rgba(240,160,48,0.15); color: var(--warning); }
.insp-pill--danger { background: var(--danger-bg); color: var(--danger); }
.insp-pill--accent { background: rgba(79,140,255,0.12); color: var(--accent); }
.latest-insp-pct {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0;
}
.latest-insp-score.score--good { color: var(--success); }
.latest-insp-score.score--warn { color: var(--warning); }
.latest-insp-score.score--bad { color: var(--danger); }
.latest-insp-stats {
  display: flex;
  flex: 1;
  gap: 6px;
}
.latest-insp-stat {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.latest-insp-stat-value {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.latest-insp-stat-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.latest-insp-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  float: right;
  transition: gap var(--transition-fast);
}
.latest-insp-cta svg { width: 16px; height: 16px; }
.latest-insp:hover .latest-insp-cta { gap: 10px; }
@media (max-width: 700px) {
  .latest-insp { padding: 18px 20px; }
  .latest-insp-center { flex-direction: column; align-items: flex-start; gap: 16px; }
  .latest-insp-score { font-size: 2.5rem; }
  .latest-insp-stats { flex-wrap: wrap; }
  .latest-insp-stat { flex: 0 0 auto; }
}

/* Heatmap table */
.hm-wrap { overflow-x: auto; }
.hm-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.hm-th { padding: 6px 10px; font-weight: 600; white-space: nowrap; text-align: center; border-bottom: 2px solid var(--border); color: var(--text-secondary); }
.hm-th--corner { text-align: left; }
.hm-th--date { min-width: 44px; }
.hm-cell { padding: 6px 10px; text-align: center; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hm-cell--label { text-align: left; white-space: nowrap; font-weight: 500; color: var(--text-primary); }
.hm-cell--pass { background: var(--success-bg); color: transparent; }
.hm-cell--fail { background: var(--danger-bg); color: var(--danger); font-weight: 600; }

/* Charts */
.chart-container {
  position: relative;
  width: 100%;
  height: 280px;
}

.chart-container.donut {
  height: 240px;
  max-width: 240px;
  margin: 0 auto;
}

/* ─── Tables ──────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}

.data-table tbody tr:hover {
  background: var(--bg-elevated);
}

.data-table tbody tr td:first-child {
  position: relative;
  padding-left: 24px;
}

.data-table tbody tr td:first-child::before {
  content: '›';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.35;
  transition: opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.data-table tbody tr:hover td:first-child::before {
  opacity: 1;
  color: var(--accent);
  animation: chevron-nudge 0.8s ease-in-out infinite;
}

/* ─── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-pass { background: var(--success-bg); color: var(--success); }
.badge-fail { background: var(--danger-bg); color: var(--danger); }
.badge-na { background: var(--bg-elevated); color: var(--text-muted); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: rgba(224, 133, 42, 0.12); color: var(--accent); }

/* Stagger animation for badges */
.badge-stagger { animation: badgePop 300ms ease both; }
@keyframes badgePop {
  from { transform: scale(0); }
  60% { transform: scale(1.05); }
  to { transform: scale(1); }
}

/* ─── Inspection Page ─────────────────────────────────────── */
.inspection-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.inspection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 24px;
}

.inspection-header .meta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.meta-item {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.meta-item svg { width: 14px; height: 14px; }

.inspection-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}

/* ─── APK Form — collapsible wrapper ─────────────────────── */
.apk-form {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.apk-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid var(--accent);
  transition: background var(--transition-fast);
}
.apk-form-header:hover { background: var(--bg-elevated); }
.apk-form-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.apk-form-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.apk-form.open .apk-form-chevron { transform: rotate(90deg); }
.apk-form-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.apk-form-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
/* Issues summary strip */
.apk-issues-strip {
  display: flex;
  gap: 24px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}
.apk-issues-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.apk-issues-stat-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.apk-issues-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.apk-issues--bad { color: var(--danger); }
.apk-issues--good { color: var(--success); }
.apk-issues--delta { font-size: 1.1rem; }
.apk-form:not(.open) .apk-issues-strip { display: none; }

.apk-form-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
  padding: 0 12px;
}
.apk-form.open .apk-form-body {
  max-height: 20000px;
  padding: 12px;
}
/* When collapsed, hide the bottom border on the header */
.apk-form:not(.open) .apk-form-header {
  border-bottom-color: transparent;
}

/* Export PDF button */
.apk-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.apk-export-btn:hover {
  color: var(--text-primary);
  background: var(--border);
}
.apk-export-btn svg {
  width: 14px;
  height: 14px;
}

/* ─── Fine Impact Card (inspection page) ─────────────────── */
.fine-impact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fine-impact-total {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.fine-impact-delta {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fine-delta--up { color: var(--danger); }
.fine-delta--down { color: var(--success); }
.fine-impact-tiers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.fine-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.fine-tier-label {
  font-weight: 600;
  min-width: 70px;
}
.fine-tier-count {
  color: var(--text-muted);
  min-width: 36px;
}
.fine-tier-amount {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ─── Fine Bilaga — Appendix section ─────────────────────── */
.fine-bilaga {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.fine-bilaga-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid var(--warning);
  transition: background var(--transition-fast);
}
.fine-bilaga-header:hover { background: var(--bg-elevated); }
.fine-bilaga:not(.open) .fine-bilaga-header { border-bottom-color: transparent; }
.fine-bilaga.open .apk-form-chevron { transform: rotate(90deg); }
.fine-bilaga-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.fine-bilaga-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.fine-bilaga-total {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--warning);
  white-space: nowrap;
}
.fine-bilaga-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
  padding: 0 12px;
}
.fine-bilaga.open .fine-bilaga-body {
  max-height: 20000px;
  padding: 12px;
}
.fine-disclaimer {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 16px 0;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warning);
}

/* Fine table */
.fine-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.fine-th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.fine-th--amount, .fine-th--count { text-align: right; }
.fine-cell {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.fine-cell--id {
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  width: 60px;
}
.fine-cell--q { color: var(--text-primary); }
.fine-cell--count { text-align: right; font-family: var(--font-mono); font-weight: 600; }
.fine-cell--amount {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--warning);
  white-space: nowrap;
}
.fine-offender-row:hover { background: var(--bg-elevated); }

/* Severity badges */
.fine-sev {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.fine-sev--critical { background: var(--danger-bg); color: var(--danger); }
.fine-sev--serious  { background: var(--warning-bg); color: var(--warning); }
.fine-sev--standard { background: rgba(142,146,134,0.15); color: var(--text-secondary); }
.fine-sev--minor    { background: rgba(142,146,134,0.08); color: var(--text-muted); }

/* Focus area badge */
.fine-focus-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: 4px;
  vertical-align: middle;
}

/* KPI card variant for fines */
.kpi-card--fine {
  border-color: var(--warning);
  border-width: 1px;
  border-style: solid;
}

/* 5-column KPI grid */
.kpi-grid--5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .kpi-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .kpi-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Print styles — matches Trafikverket APK Väg 2026 PDF ──
   The official APK form uses sage/olive green (#c5d4a0) for section
   headers and table column headers, black grid borders, white row
   backgrounds, and no other colors. Our PDF export replicates that
   palette so the output looks like the real government document.
   The web version intentionally uses our own brand palette (orange
   accent, dark/light themes). See docs/apk-design-decisions.md.    */
@media print {
  /* --- Force light theme --- */
  html { data-theme: light !important; color-scheme: light !important; }

  /* --- Reset: white page, no dark backgrounds anywhere --- */
  body, .page-container, .page-content, .project-page, .inspection-page {
    background: white !important;
    color: black !important;
    font-size: 10pt !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  * {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;

  /* --- Hide everything except the APK form --- */
  nav, .top-nav, .breadcrumbs,
  .map-collapse, .map-container, .leaflet-container, .btn, .apk-export-btn,
  .apk-form-chevron,
  .section-block, .chart-container,
  .kpi-grid, .two-col,
  .latest-insp,
  .inspection-header,
  .project-header, .project-meta,
  #inspTable, .data-table,
  h3:has(+ .chart-container),
  .project-page > p, .project-page > h2,
  .apk-section-header .chevron,
  .apk-sec-pct, .apk-sec-fail, .apk-sec-soon, .apk-section-meta,
  .hm-wrap, .hm-table,
  .failure-card, .failure-card::before,
  .fine-bilaga,
  .toast-container,
  .home-lightbox { display: none !important; }
  .inspection-grid { display: block !important; }

  /* --- Expand all collapsed sections --- */
  .apk-form, .apk-form-body, .apk-section-body {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  .apk-form-body { padding: 0 !important; }

  /* --- Form wrapper --- */
  .apk-form {
    border: none !important;
    background: white !important;
  }

  /* --- Form title bar — sage green (Trafikverket) --- */
  .apk-form-header {
    background: #c5d4a0 !important;
    border: 1px solid #333 !important;
    padding: 8px 12px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .apk-form-header-left { gap: 8px; }
  .apk-form-title {
    color: black !important;
    font-size: 12pt !important;
    font-weight: 700 !important;
  }
  .apk-form-subtitle {
    color: #333 !important;
    font-size: 9pt !important;
  }

  /* --- Section headers — sage green --- */
  .apk-section {
    break-inside: avoid;
    border: none !important;
    margin-bottom: 0 !important;
    background: white !important;
  }
  .apk-section, .apk-section.open { overflow: visible; }
  .apk-section-header {
    background: #c5d4a0 !important;
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    border-left: 1px solid #333 !important;
    border-right: 1px solid #333 !important;
    padding: 6px 10px !important;
    cursor: default !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .apk-section-header h4 {
    color: black !important;
    font-size: 10pt !important;
    font-weight: 700 !important;
  }

  /* --- Subsection headers — bold, white background --- */
  .apk-subheader td {
    background: white !important;
    color: black !important;
    font-weight: 700 !important;
    font-size: 9pt !important;
    padding: 6px 8px 3px !important;
    border-bottom: 1px solid #333 !important;
  }

  /* --- Column headers — sage green --- */
  .apk-th {
    background: #c5d4a0 !important;
    color: black !important;
    font-size: 7pt !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #333 !important;
    border-right: 1px solid #999 !important;
    padding: 4px 6px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .apk-th:last-child { border-right: none !important; }

  /* --- Table cells — white, thin borders --- */
  .apk-table {
    border: 1px solid #333 !important;
    font-size: 8.5pt !important;
    background: white !important;
  }
  .apk-cell {
    background: white !important;
    color: black !important;
    border-bottom: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    padding: 4px 6px !important;
  }
  .apk-cell:last-child { border-right: none !important; }
  .apk-cell--num { color: black !important; font-weight: 600 !important; }
  .apk-cell--q { color: black !important; }
  .apk-cell--ref { color: #444 !important; font-size: 7pt !important; }

  /* --- Verdict marks — plain black, no colored icons --- */
  .apk-mark--yes, .apk-mark--no { color: black !important; background: none !important; }
  .apk-mark--na { color: #666 !important; background: none !important; }

  /* --- Failed rows — white, no highlight --- */
  .apk-row--fail .apk-cell { background: white !important; box-shadow: none !important; }

  /* --- Soon rows --- */
  .apk-row--soon .apk-cell { opacity: 0.45; }
  .apk-soon-badge { display: none !important; }

  /* --- Pass-rate pills — no colored pills --- */
  .apk-rate { background: none !important; color: black !important; padding: 0 !important; font-weight: 700 !important; }
  .apk-rate--na { color: #888 !important; }
  .apk-fail-count { color: black !important; background: none !important; }

  /* --- Badges — plain text in print --- */
  .badge { background: none !important; color: black !important; border: none !important; padding: 0 !important; }

  /* --- Signs, evidence, comments --- */
  .apk-signs, .apk-evidence { display: none !important; }
  .apk-comment { color: #333 !important; font-size: 7.5pt !important; }
}

/* APK Section Accordion */
.apk-section {
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  overflow: hidden;
}

.apk-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}
.apk-section-header:hover { background: var(--bg-elevated); }

.apk-section-header h4 {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.apk-section-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.apk-section-header .chevron {
  width: 16px; height: 16px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.apk-section.open .chevron { transform: rotate(90deg); }
.apk-section:not(.open) .apk-section-header:hover .chevron {
  animation: chevron-nudge-inline 0.8s ease-in-out infinite;
}
@keyframes chevron-nudge-inline {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
@keyframes chevron-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(3px); }
}

.apk-sec-pct {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 32px;
  text-align: right;
}
.apk-sec-fail {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-bg);
  padding: 2px 8px;
  border-radius: 100px;
}
.apk-sec-delta {
  font-weight: 400;
  opacity: 0.8;
}
.apk-sec-delta--up { color: var(--danger); }
.apk-sec-delta--down { color: var(--success); }
.apk-sec-soon {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: 100px;
}

.apk-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}
.apk-section.open .apk-section-body {
  max-height: 5000px;
}

/* APK Table */
.apk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.45;
}

.apk-th {
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.apk-th--num { width: 32px; text-align: center; }
.apk-th--q { }
.apk-th--ref { width: 180px; }
.apk-th--v { width: 40px; text-align: center; }

/* Subsection header row */
.apk-subheader td {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 10px 10px 4px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.01em;
}

/* Item rows */
.apk-row {
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.apk-row:hover { background: var(--bg-elevated); }

.apk-row > .apk-cell--num {
  position: relative;
  padding-left: 22px;
}
.apk-row > .apk-cell--num::before {
  content: '›';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.35;
  transition: opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.apk-row:hover > .apk-cell--num::before {
  opacity: 1;
  color: var(--accent);
  animation: chevron-nudge 0.8s ease-in-out infinite;
}
.apk-row--soon > .apk-cell--num::before { display: none; }

.apk-cell {
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  vertical-align: top;
}
.apk-cell--num {
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
}
.apk-cell--q {
  color: var(--text-primary);
}
.apk-cell--ref {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.apk-cell--verdict {
  text-align: center;
  vertical-align: middle;
  width: 40px;
}

/* Verdict marks */
.apk-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}
.apk-verdict-loading {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-primary) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.apk-mark--yes {
  background: var(--success-bg);
  color: var(--success);
}
.apk-mark--no {
  background: var(--danger-bg);
  color: var(--danger);
}
.apk-mark--na {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.7rem;
}

/* Failed row highlight */
.apk-row--fail .apk-cell {
  background: var(--danger-bg);
}
.apk-row--fail:hover .apk-cell {
  background: color-mix(in srgb, var(--danger-bg) 70%, var(--bg-elevated));
}

/* "Soon" row — greyed out */
.apk-row--soon {
  cursor: default;
}
.apk-row--soon .apk-cell {
  opacity: 0.45;
}
.apk-row--soon .apk-cell--q {
  opacity: 1;
}
.apk-row--soon .apk-q-text {
  opacity: 0.45;
}
.apk-row--soon:hover {
  background: transparent;
}

/* "Snart" badge */
.apk-soon-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Inline sign icons */
.apk-signs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.apk-signs img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* Evidence icon */
.apk-evidence {
  width: 14px;
  height: 14px;
  color: var(--accent);
  opacity: 0.6;
  margin-left: 6px;
  vertical-align: middle;
}
.apk-row:hover .apk-evidence { opacity: 1; }

/* Pass-rate pill (project aggregate view) */
.apk-rate {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
}
.apk-rate--good { background: var(--success-bg); color: var(--success); }
.apk-rate--warn { background: var(--warning-bg); color: var(--warning); }
.apk-rate--bad  { background: var(--danger-bg); color: var(--danger); }
.apk-rate--na   { color: var(--na); }

/* Fail count (project aggregate view) */
.apk-fail-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--danger);
}

/* Comment below question */
.apk-comment {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 3px;
  padding-left: 2px;
}

/* ─── APK Item Detail Page ────────────────────────────────── */
.item-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px;
}

.verdict-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  text-align: center;
}

.verdict-card .verdict-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.verdict-card .verdict-icon.pass { background: var(--success-bg); color: var(--success); }
.verdict-card .verdict-icon.fail { background: var(--danger-bg); color: var(--danger); }
.verdict-card .verdict-icon.na { background: var(--na-bg); color: var(--na); }
.verdict-card .verdict-icon svg { width: 32px; height: 32px; }

.verdict-card h2 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.verdict-card .verdict-comment {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 600px;
  margin: 0 auto;
}

.verdict-card .verdict-ref {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Evidence gallery */
.evidence-gallery {
  margin-bottom: 24px;
}

.evidence-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
}

.evidence-thumb {
  width: 160px; height: 100px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}
.evidence-thumb:hover { border-color: var(--accent); transform: scale(1.02); }
.evidence-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Resolution timeline */
.resolution-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 20px 0;
}

.timeline-step {
  flex: 1;
  text-align: center;
  position: relative;
}

.timeline-step::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
}

.timeline-step:first-child::before { left: 50%; }
.timeline-step:last-child::before { right: 50%; }

.timeline-step.done::before { background: var(--success); }

.timeline-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
  position: relative;
  z-index: 1;
}
.timeline-step.done .timeline-dot {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.timeline-dot svg { width: 14px; height: 14px; }

.timeline-step .step-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.timeline-step .step-date {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Sparkline */
.sparkline-container {
  height: 80px;
}

/* ─── Log Page ────────────────────────────────────────────── */
.log-layout {
  display: flex;
  height: calc(100vh - var(--nav-height));
}

.log-timeline {
  width: 420px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
}

.log-map {
  flex: 1;
  position: relative;
}

.timeline-event {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: var(--radius-sm);
  padding-left: 8px;
  padding-right: 8px;
}
.timeline-event:hover { background: var(--bg-elevated); }
.timeline-event.active { background: rgba(224, 133, 42, 0.08); }

.timeline-event .event-time {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 48px;
  flex-shrink: 0;
}

.timeline-event .event-line {
  width: 2px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
}

.timeline-event .event-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  position: absolute;
  top: 4px;
  left: -4px;
}

.timeline-event .event-content {
  flex: 1;
}

.timeline-event .event-title {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2px;
}

.timeline-event .event-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.time-marker {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* Data files section */
.data-files {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.data-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.data-file:hover { background: var(--bg-elevated); }
.data-file svg { width: 16px; height: 16px; color: var(--text-muted); }
.data-file .filename {
  font-size: 0.85rem;
  flex: 1;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
}
.data-file:hover .filename { text-decoration-color: var(--accent); }
.data-file .filesize { font-size: 0.75rem; color: var(--text-muted); }

/* ─── Settings Page ───────────────────────────────────────── */
.settings-page {
  max-width: 500px;
  margin: 0 auto;
  padding: 60px 24px;
}

.settings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.settings-card .avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--gradient-accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}

.settings-card h2 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.settings-card .email {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }

.settings-row label {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Toggle switch */
.toggle {
  width: 44px; height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.toggle.active { background: var(--accent); }
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition-fast);
}
.toggle.active::after { transform: translateX(20px); }

.settings-card .btn-signout {
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-align: center;
  transition: all var(--transition-fast);
}
.settings-card .btn-signout:hover {
  background: var(--danger);
  color: #fff;
}

/* ─── Toast ───────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  animation: toastIn 300ms ease;
  min-width: 280px;
}

.toast.leaving { animation: toastOut 200ms ease forwards; }

.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.success svg { color: var(--success); }
.toast.error svg { color: var(--danger); }
.toast.info svg { color: var(--accent); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(8px) scale(0.95); }
}

/* ─── Count-up Animation ──────────────────────────────────── */
.count-up {
  display: inline-block;
}

/* ─── Two Column Layout ───────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ─── Lightbox ────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: fadeIn 200ms ease;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
}

/* ─── Inspection small map ────────────────────────────────── */
.inspection-map {
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ─── Bar chart section ───────────────────────────────────── */
.bar-chart-container {
  height: 200px;
}

/* ─── Inspection section breakdown bars ───────────────────── */
.insp-section-list { display: flex; flex-direction: column; gap: 6px; }
.insp-sec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.insp-sec-item--pass { opacity: 0.7; }
.insp-sec-item--fail { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.insp-sec-check {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
}
.insp-sec-badge {
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.insp-sec-badge--fail {
  color: var(--danger);
  background: var(--danger-bg);
}
.insp-sec-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-state h3 { font-size: 1rem; margin-bottom: 8px; color: var(--text-primary); }
.empty-state p { font-size: 0.85rem; }

/* ─── Sign icons in items ─────────────────────────────────── */
.sign-icons {
  display: flex;
  gap: 4px;
  align-items: center;
}
.sign-icons img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* ─── Date picker (mock) ──────────────────────────────────── */
.date-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-picker input {
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.85rem;
}

/* ─── Date Range Selector ────────────────────────────────── */
.date-range-selector {
  margin-bottom: 20px;
}

.date-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.date-preset {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.date-preset:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.date-preset.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.date-range-inputs {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.date-range-inputs.visible {
  display: flex;
}

.date-range-inputs input[type="date"] {
  padding: 6px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.85rem;
}

.date-range-inputs span {
  color: var(--text-muted);
}

/* ─── Pass Rate Bar ──────────────────────────────────────── */
.pass-rate-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-elevated);
  width: 100%;
  max-width: 240px;
}

.pr-seg { height: 100%; }
.pr-pass { background: var(--success); }
.pr-fail { background: var(--danger); }
.pr-na { background: var(--text-muted); opacity: 0.4; }

.pass-rate-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ─── Item Header Card ───────────────────────────────────── */
.item-header-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  gap: 16px;
}

.item-header-left {
  flex: 1;
  min-width: 0;
}

.item-header-id {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.item-header-question {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.item-header-ref {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.item-header-rate {
  margin-top: 8px;
}

.item-header-signs {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.item-header-sign {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* ─── Criteria Panel ─────────────────────────────────────── */
.criteria-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.criteria-toggle:hover { color: var(--accent); }
.criteria-toggle .criteria-chevron {
  width: 16px; height: 16px;
  transition: transform 0.2s ease;
}
.criteria-toggle.open .criteria-chevron { transform: rotate(90deg); }

.criteria-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  opacity: 0;
}
.criteria-panel.open {
  max-height: 1200px;
  opacity: 1;
}

.criteria-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  border-left: 3px solid var(--border);
  padding-left: 16px;
}
.criteria-bullet {
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.criteria-bullet + .criteria-bullet {
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.criteria-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.criteria-ref {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.8;
  margin-top: 1px;
}

/* ─── Inspector Link Button ──────────────────────────────── */
.inspector-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.inspector-link-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb, 79,140,255), 0.3);
}
.inspector-link-btn i { width: 16px; height: 16px; }

/* ─── Failure Cards ──────────────────────────────────────── */
.failure-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.failure-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  padding-left: 32px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.failure-card::before {
  content: '›';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.failure-card:hover {
  background: var(--bg-elevated);
  border-left-color: var(--accent);
}

.failure-card:hover::before {
  opacity: 1;
  color: var(--accent);
  animation: chevron-nudge 0.8s ease-in-out infinite;
}

.failure-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
}

.failure-card-date {
  font-weight: 700;
  color: var(--text-primary);
}

.failure-card-inspector {
  color: var(--text-secondary);
}

.failure-card-resolve {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.failure-card-comment {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 6px;
  font-style: italic;
}

/* ─── Row fail highlight ─────────────────────────────────── */
.row-fail {
  background: var(--danger-bg);
}

/* ─── KPI grid 4-col variant ─────────────────────────────── */
.kpi-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .inspection-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kpi-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .landing-features {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {
  .top-nav {
    padding: 0 16px;
  }

  .breadcrumbs {
    display: none;
  }

  .inline-map {
    height: 240px;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .landing-features {
    grid-template-columns: 1fr;
  }

  .landing-wordmark {
    font-size: 3rem;
  }

  .log-layout {
    flex-direction: column;
  }

  .log-timeline {
    width: 100%;
    max-height: 50vh;
  }

  .log-map {
    min-height: 300px;
  }
}

/* ─── Project Header (with edit button) ──────────────────── */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.project-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.project-meta-item svg { width: 14px; height: 14px; }

.project-meta-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
}
.project-meta-link:hover {
  text-decoration-color: var(--accent);
}

/* ─── Project Edit Page ──────────────────────────────────── */
.project-edit-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
}
.project-edit-page h2 { margin-bottom: 24px; }

.edit-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.edit-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.edit-form .form-group--wide {
  grid-column: 1 / -1;
}

.edit-form label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.edit-form input[type="text"],
.edit-form input[type="url"],
.edit-form input[type="date"] {
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast);
}
.edit-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.edit-form .form-section {
  margin-bottom: 24px;
}
.edit-form .form-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.edit-form .form-section h3 svg { width: 18px; height: 18px; }

.edit-form .form-help {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.map-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.map-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.map-tool-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg-surface);
}
.map-tool-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.map-tool-btn svg { width: 14px; height: 14px; }

.map-tool-btn--primary {
  background: var(--gradient-accent);
  color: #fff;
  border-color: transparent;
}
.map-tool-btn--primary:hover:not(:disabled) {
  border-color: transparent;
  filter: brightness(1.1);
}

.map-tool-btn--danger {
  color: var(--danger);
}
.map-tool-btn--danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.map-tool-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.map-tool-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 8px;
}

.edit-map {
  height: 400px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Leaflet.draw — hide default toolbar (we use custom buttons) */
.leaflet-draw-toolbar { display: none !important; }

/* Leaflet.draw — edit vertex handles */
.leaflet-editing-icon {
  width: 14px !important;
  height: 14px !important;
  margin-left: -7px !important;
  margin-top: -7px !important;
  border-radius: 50% !important;
  background: #e0852a !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
  cursor: grab !important;
}
.leaflet-editing-icon:hover {
  background: #eda04a !important;
  transform: scale(1.25);
}
.leaflet-editing-icon:active {
  cursor: grabbing !important;
}

/* Midpoint handles (add new vertex) — smaller + translucent */
.leaflet-marker-icon.leaflet-editing-icon:not(.leaflet-div-icon) {
  opacity: 0.6;
  width: 10px !important;
  height: 10px !important;
  margin-left: -5px !important;
  margin-top: -5px !important;
}

/* Leaflet.draw — draw mode guide lines + tooltip */
.leaflet-draw-guide-dash {
  border-color: #e0852a !important;
  opacity: 0.6;
}
.leaflet-draw-tooltip {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 8px !important;
  font-family: var(--font) !important;
  font-size: 0.8rem !important;
  box-shadow: var(--shadow-card) !important;
}
.leaflet-draw-tooltip:before {
  border-top-color: var(--border) !important;
}
.leaflet-draw-tooltip-single {
  margin-top: -14px !important;
}

@media (max-width: 600px) {
  .edit-form .form-grid {
    grid-template-columns: 1fr;
  }
  .project-header {
    flex-direction: column;
  }
}

/* ─── Project page mobile ────────────────────────────────── */
@media (max-width: 768px) {
  /* Reduce padding on cards/blocks */
  .section-block { padding: 16px; }
  .chart-container { height: 220px; }

  /* KPI grids: 2 cols on tablet, stack nicely */
  .kpi-grid--5 { grid-template-columns: repeat(2, 1fr); }

  /* Heatmap: smaller cells */
  .hm-th, .hm-cell { padding: 4px 6px; font-size: 0.7rem; }
  .hm-th--date { min-width: 36px; }

  /* APK form: hide ref column, tighten padding */
  .apk-cell--ref { display: none; }
  .apk-th--ref { display: none; }
  .apk-cell { padding: 6px 8px; font-size: 0.8rem; }
  .apk-th { padding: 6px 8px; font-size: 0.75rem; }

  /* Fine table: let question wrap, tighter cells */
  .fine-cell { padding: 6px 8px; font-size: 0.8rem; }
  .fine-th { padding: 6px 8px; font-size: 0.75rem; }
  .fine-cell--q { word-break: break-word; }
  .section-block:has(.fine-table) { overflow-x: auto; }
  .fine-table { min-width: 480px; }

  /* Data table: allow parent to scroll horizontally */
  .section-block:has(.data-table) { overflow-x: auto; }
  .data-table { min-width: 500px; }

  /* Bilaga header: stack total below title */
  .fine-bilaga-header { flex-wrap: wrap; gap: 4px; }
  .fine-bilaga-total { width: 100%; text-align: left; padding-left: 28px; }
}

@media (max-width: 480px) {
  /* KPI: single column */
  .kpi-grid, .kpi-grid--4, .kpi-grid--5 { grid-template-columns: 1fr; }
  .kpi-card { padding: 12px; }
  .kpi-card .kpi-value { font-size: 1.4rem; }

  /* Even tighter section blocks */
  .section-block { padding: 12px; margin-bottom: 16px; }
  .chart-container { height: 180px; }

  /* APK form sections */
  .apk-section-header h4 { font-size: 0.85rem; }
  .apk-form-header, .fine-bilaga-header { padding: 10px 12px; }
  .apk-form-title, .fine-bilaga-title { font-size: 0.95rem; }
  .apk-form-subtitle, .fine-bilaga-subtitle { font-size: 0.75rem; }

  /* Fine table: hide severity column on very small screens */
  .fine-th--sev, .fine-cell--sev { display: none; }

  /* Tighter two-col gap */
  .two-col { gap: 16px; }
}