/* ---- Brand tokens ---- */
:root {
  --k-primary: #006242;
  --k-secondary: #3C9B73;
  --bs-primary: var(--k-primary);
  --bs-secondary: var(--k-secondary);
  /* Lovable design system variables */
  --primary: 160 84% 30%;
  --primary-foreground: 0 0% 100%;
}

/* ---- Left rail (KEEP) ---- */
.leftbar-tab-menu .main-icon-menu,
.leftbar-tab-menu .main-icon-menu .simplebar-content,
.leftbar-tab-menu .main-icon-menu .pro-metrica-end {
  background-color: var(--k-primary) !important;
}

.leftbar-tab-menu .main-icon-menu .nav.nav-tabs .nav-link {
  background-color: var(--k-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.leftbar-tab-menu .main-icon-menu .nav.nav-tabs .nav-link:hover,
.leftbar-tab-menu .main-icon-menu .nav.nav-tabs .nav-link:focus,
.leftbar-tab-menu .main-icon-menu .nav.nav-tabs .nav-link.active {
  background-color: var(--k-secondary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.leftbar-tab-menu .main-icon-menu .nav.nav-tabs .nav-link i {
  color: #fff !important;
}

.leftbar-tab-menu .main-menu-inner .menu-body .nav-item .nav-link {
  font: 500 13px/1.2 "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.2px;
}

.leftbar-tab-menu .main-menu-inner .menu-body .nav-item .nav-link.active,
.leftbar-tab-menu .main-menu-inner .menu-body .nav-item .nav-link:focus {
  color: var(--k-primary) !important;
}

.leftbar-tab-menu .main-menu-inner .navbar-vertical .navbar-nav .nav-item .nav .nav-item .nav-link.active:before {
  background: var(--k-primary) !important;
  border: none !important;
}

/* Ensure only the active right pane shows (Bootstrap would normally handle) */
.leftbar-tab-menu .main-menu-inner .main-icon-menu-pane.tab-pane {
  display: none;
}

.leftbar-tab-menu .main-menu-inner .main-icon-menu-pane.tab-pane.show.active {
  display: block;
}

/* ==== HAMBURGER MENU FIX (Desktop only) ==== */
@media (min-width: 992px) {
  /* Always show hamburger button on desktop */
  .topbar .navbar-toggle,
  .topbar .button-menu-mobile,
  .topbar #togglemenu {
    display: inline-flex !important;
  }
  /* When collapsed: keep green icon bar visible, hide only text menu */
  body.enlarge-menu:not(.enlarge-menu-all) .leftbar-tab-menu {
    min-width: 60px !important;
  }
  body.enlarge-menu:not(.enlarge-menu-all) .leftbar-tab-menu .main-icon-menu {
    display: flex !important; /* Green icon bar stays */
  }
  body.enlarge-menu:not(.enlarge-menu-all) .leftbar-tab-menu .main-menu-inner {
    display: none !important; /* Text menu hides */
  }
  /* Adjust layout when collapsed */
  body.enlarge-menu:not(.enlarge-menu-all) .page-wrapper .page-content-tab {
    width: calc(100% - 60px);
  }
  body.enlarge-menu:not(.enlarge-menu-all) .navbar-custom {
    margin-left: 60px;
  }
}
/* (unused separator overrides removed; mobile fix below handles it) */
/* Mobile: ensure the leftbar SimpleBar wrappers fill height to avoid the grey strip */
@media (max-width: 768px) {
  .leftbar-tab-menu .main-icon-menu-body .simplebar-mask,
  .leftbar-tab-menu .main-icon-menu-body .simplebar-offset,
  .leftbar-tab-menu .main-icon-menu-body .simplebar-content-wrapper {
    height: 100% !important;
    max-height: 100% !important;
  }
}
/* Mobile: Konstrukta logo in topbar (after hamburger) */
@media (max-width: 991px) {
  .topbar .mobile-logo-link {
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    margin-left: 8px;
  }
  .topbar .mobile-logo-icon {
    height: 32px;
    width: auto;
  }
  .topbar .mobile-logo {
    height: 28px;
    width: auto;
    margin-left: -6px;
  }
}
/* Mobile: Prevent zoom on input focus (requires 16px minimum font-size) */
@media (max-width: 991px) {
  input[type=text],
  input[type=email],
  input[type=number],
  input[type=tel],
  input[type=password],
  input[type=search],
  input[type=url],
  textarea,
  select,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }
}
/* Left rail height + fix SimpleBar clipping */
.leftbar-tab-menu .main-icon-menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.leftbar-tab-menu .main-icon-menu .main-icon-menu-body {
  flex: 1 1 auto;
  overflow: visible !important;
  max-height: none !important;
}

/* ---- Layout & SimpleBar (avoid double scrollbars) ---- */
.leftbar-tab-menu .main-icon-menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.leftbar-tab-menu .main-icon-menu .main-icon-menu-body {
  flex: 1 1 auto;
  overflow: visible !important;
  max-height: none !important;
}

/* ---- Profile Pages Styling ---- */
/* Profile page background - same as onboarding and login */
body:not(.auth-layout):not(.onboarding-layout) {
  background: linear-gradient(135deg, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 96%) 100%) !important;
  min-height: 100vh;
}

/* Remove white background from main content area */
body:not(.auth-layout):not(.onboarding-layout) .page-wrapper {
  background: transparent !important;
}

body:not(.auth-layout):not(.onboarding-layout) .page-content-tab {
  background: transparent !important;
}

body:not(.auth-layout):not(.onboarding-layout) .container-fluid {
  background: transparent !important;
}

/* Mobile: constrain profile card width to match auth pages */
@media (max-width: 768px) {
  .col-12.col-lg-8.mx-auto {
    max-width: 510px !important;
  }
}
/* Profile card - responsive width */
.profile-card {
  width: 100%;
  background: hsl(0, 0%, 100%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
  padding: 1.5rem;
  margin: 0 auto;
}

/* Mobile: narrow width like auth cards */
@media (max-width: 768px) {
  .profile-card {
    max-width: 510px !important;
  }
}
/* Desktop: wider width */
@media (min-width: 769px) {
  .profile-card {
    max-width: 100% !important;
  }
}
/* Profile avatar styling */
.profile-form .thumb-lg {
  background: hsl(160, 30%, 85%) !important; /* Light secondary color background */
  border: none !important; /* No border */
  border-radius: 0.75rem !important; /* Rounded corners */
  width: 60px !important;
  height: 60px !important;
}

.profile-form .thumb-lg i {
  color: var(--k-primary) !important; /* Green icon */
  font-size: 1.5rem !important; /* Smaller icon */
}

/* Override any conflicting styles */
.profile-form .thumb-lg.bg-light {
  background: hsl(160, 30%, 85%) !important; /* Override bg-light */
}

.profile-form .thumb-lg i.ti-user {
  color: var(--k-primary) !important; /* Override any inline styles */
  font-size: 1.5rem !important;
}

/* Toast positioning - ensure it appears above footer */
.toast-container {
  z-index: 9999 !important; /* Higher than footer */
  position: fixed !important;
  bottom: 2rem !important; /* Position above footer */
  right: 1rem !important;
}

.toast {
  z-index: 9999 !important; /* Ensure toast is above everything */
  position: relative !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Toast text color */
.toast .toast-body {
  color: #303e67 !important;
}

/* Toast close button */
.toast .btn-close {
  opacity: 0.8 !important;
}

.toast .btn-close:hover {
  opacity: 1 !important;
}

.form-control-plaintext {
  color: #495057;
  font-weight: 500;
  min-height: 1.5rem;
  padding: 0.375rem 0;
}

.form-label.fw-semibold {
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

.badge {
  font-size: 0.75rem;
  font-weight: 500;
}

/* ---- Small Profile Buttons ---- */
.profile-form .btn-sm {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  min-width: auto !important;
  width: auto !important;
}

/* ---- Metrica Theme Button Classes ---- */
.btn-de-primary {
  background: var(--k-primary) !important;
  border-color: var(--k-primary) !important;
  color: #fff !important;
}

.btn-de-secondary {
  background: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}

.btn-de-danger {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

/* ---- Buttons (minimal, no gradients) ---- */
.btn-primary,
button.btn-primary,
a.btn.btn-primary {
  background: var(--k-primary) !important;
  border-color: var(--k-primary) !important;
  color: #fff !important;
  background-image: none !important; /* kill theme gradients */
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: color-mix(in srgb, var(--k-primary), black 12%) !important;
  border-color: color-mix(in srgb, var(--k-primary), black 12%) !important;
  color: #fff !important;
}

.btn-secondary {
  background: var(--k-secondary) !important;
  border-color: var(--k-secondary) !important;
  color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background: color-mix(in srgb, var(--k-secondary), black 12%) !important;
  border-color: color-mix(in srgb, var(--k-secondary), black 12%) !important;
  color: #fff !important;
}

/* Outline variants */
.btn-outline-primary {
  color: var(--k-primary) !important;
  border-color: var(--k-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background: var(--k-primary) !important;
  color: #fff !important;
  border-color: var(--k-primary) !important;
}

.btn-outline-secondary {
  color: var(--k-secondary) !important;
  border-color: var(--k-secondary) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background: var(--k-secondary) !important;
  color: #fff !important;
  border-color: var(--k-secondary) !important;
}

/* ---- Nice but small touches ---- */
a {
  color: var(--k-primary);
}

a:hover, a:focus {
  color: color-mix(in srgb, var(--k-primary), black 12%);
}

.card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dropdown-menu.dropdown-lg .notification-menu {
  max-height: 360px;
}

/* ---- Auth page centering ---- */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Center everything */
body.auth-layout,
body.auth-layout #main-wrapper,
body.auth-layout #page-wrapper,
body.auth-layout .page-wrapper,
body.auth-layout .page-content-tab,
body.auth-layout .content-page,
body.auth-layout .container,
body.auth-layout .container-fluid {
  background: linear-gradient(135deg, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 96%) 100%) !important;
  height: 100% !important;
  min-height: 100dvh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 20px 0 !important; /* Bottom padding for fixed footer */
  display: grid !important;
  place-items: center !important;
}

.auth {
  /* Center with max-width, works everywhere */
  width: 100% !important;
  max-width: 510px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.auth-card {
  width: 100%;
  max-width: 510px !important;
  background: hsl(0, 0%, 100%);
  border-radius: 0.75rem; /* 12px like Lovable */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* Lovable shadow */
  border: 1px solid hsl(220, 13%, 91%); /* Lovable border */
  padding: 1.5rem; /* 24px like Lovable */
}

.auth-head {
  display: flex;
  align-items: center;
  gap: 4px; /* Much tighter spacing like Lovable */
  justify-content: center;
  margin-bottom: 1rem; /* 16px like Lovable */
}

.auth-logo {
  height: 3rem; /* Smaller, more appropriate size */
  width: auto;
  object-fit: contain;
}

.auth-brand-logo {
  height: 28px; /* Smaller text logo */
  width: auto;
  object-fit: contain;
}

.auth-title {
  text-align: center;
  font-size: 1.5rem; /* Match Lovable card-title */
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: hsl(224, 71.4%, 4.1%); /* Lovable foreground */
}

.auth-sub {
  text-align: center;
  font-size: 0.875rem; /* Match Lovable card-description */
  color: hsl(220, 8.9%, 46.1%); /* Lovable muted-foreground */
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr; /* grid-cols-2 */
  width: 100%;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 2px;
  margin-bottom: 24px;
}

.auth-tab {
  text-align: center;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s ease;
}

.auth-tab.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.auth-body {
  margin-top: 0;
}

.auth-form .form-field {
  margin-bottom: 16px;
}

.auth-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.auth-form label {
  display: block;
  font-size: 12px; /* text-xs */
  font-weight: 400; /* font-normal */
  color: #374151;
  margin-bottom: 8px;
  line-height: 1; /* leading-none */
}

.auth-form .input {
  display: flex;
  height: 40px; /* h-10 */
  width: 100%;
  border-radius: 6px; /* rounded-md */
  border: 1px solid #d1d5db; /* border-input */
  background: #ffffff; /* bg-background */
  padding: 8px 12px; /* px-3 py-2 */
  font-size: 16px; /* text-base */
  outline: none;
  transition: all 0.2s ease;
}

.auth-form .input:focus {
  border-color: #0d6b52;
  box-shadow: none !important;
  outline: none !important;
}

/* Override browser autofill styling */
.auth-form .input:-webkit-autofill,
.auth-form .input:-webkit-autofill:hover,
.auth-form .input:-webkit-autofill:focus,
.auth-form .input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #000 !important;
  box-shadow: 0 0 0 30px white inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
  border: none;
  cursor: pointer;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  width: 100%;
  text-decoration: none;
}

/* Confirmation banner styling */
.confirmation-banner {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #10b981;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.banner-icon {
  background: #10b981;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
}

.banner-content {
  flex: 1;
}

.banner-title {
  font-weight: 600;
  color: #065f46;
  margin-bottom: 4px;
  font-size: 14px;
}

.banner-message {
  color: #047857;
  font-size: 13px;
  line-height: 1.4;
}

/* Theme footer styling - using Metrica's footer class */
/* CRITICAL: Override Metrica's display:none on footer */
.footer,
footer.footer {
  display: block !important; /* Override Metrica theme hiding footer */
  visibility: visible !important;
  background-color: #f8f9fb;
  border-top: 1px solid #eceff5;
  padding: 15px 0 !important;
  margin-top: auto;
  color: #5a5c61;
  font-size: 14px;
  text-align: center !important; /* Force center the footer text */
  transition: all 0.3s ease; /* Smooth transition */
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Override any theme text alignment */
.footer.text-center {
  text-align: center !important;
}

.footer.text-sm-start {
  text-align: center !important;
}

/* When sidebar is collapsed - footer stays centered */
body.sidebar-collapsed .footer,
body.sidebar-mini .footer,
body.sidebar-condensed .footer,
.sidebar-condensed .footer {
  text-align: center; /* Keep centered when collapsed */
}

/* Add proper spacing from left navigation bar */
.container {
  padding-left: 2rem !important; /* Add more left padding */
  padding-right: 2rem !important;
}

/* Mobile footer fixes */
@media (max-width: 768px) {
  .footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #f8f9fb !important;
    border-top: 1px solid #eceff5 !important;
    padding: 15px 0 !important;
    margin: 0 !important;
  }
}
/* Onboarding layout */
body.onboarding-layout,
body.onboarding-layout #main-wrapper,
body.onboarding-layout #page-wrapper,
body.onboarding-layout .page-wrapper,
body.onboarding-layout .page-content-tab,
body.onboarding-layout .content-page,
body.onboarding-layout .container,
body.onboarding-layout .container-fluid {
  background: linear-gradient(135deg, hsl(0, 0%, 98%) 0%, hsl(0, 0%, 96%) 100%) !important;
  height: 100% !important;
  min-height: 100dvh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 20px 0 !important; /* Bottom padding for fixed footer */
  display: grid !important;
  place-items: center !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Onboarding styles */
.onboarding-container {
  width: min(510px, 100dvw - 32px) !important;
  max-width: 100% !important;
  margin: 0 !important;
  justify-self: center !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Mobile responsive - adjust for smaller screens */
@media (max-width: 768px) {
  .onboarding-container {
    width: min(510px, 100dvw - 32px) !important;
    padding: 0;
  }
  .welcome-card,
  .business-card,
  .tutorial-card {
    max-width: 460px;
    padding: 0.75rem 1rem 1rem 1rem; /* Reduced top padding */
  }
  /* Reduce padding in role cards for mobile */
  .role-card:not(.selected) {
    padding: 14px 10px !important; /* Further reduced */
    min-height: 95px !important; /* Slightly reduced */
  }
  /* Reduce gap between role cards for mobile */
  .role-grid {
    gap: 10px !important; /* Further reduced from 12px */
    margin-bottom: 1.5rem !important; /* Reduced from 32px */
  }
  /* Reduce icon size for mobile */
  .role-icon {
    font-size: 22px !important; /* Further reduced from 24px */
    margin-bottom: 4px !important; /* Further reduced from 8px */
  }
  .role-icon i {
    font-size: 22px !important; /* Further reduced from 24px */
  }
  /* Reduce text size for mobile */
  .role-label {
    font-size: 12px !important; /* Further reduced */
    line-height: 1.3 !important; /* Tighter line height */
    padding: 0 4px !important; /* Small horizontal padding */
  }
  /* Optimize business card titles for mobile */
  .business-title {
    font-size: 1.4rem !important; /* Slightly smaller for mobile */
    line-height: 1.2 !important;
    margin-top: 0 !important; /* Remove top margin */
    margin-bottom: 0.5rem !important; /* Reduced spacing */
  }
  .business-subtitle {
    font-size: 0.85rem !important; /* Slightly smaller for mobile */
    line-height: 1.3 !important;
    margin-bottom: 1rem !important; /* Reduced spacing before grid */
  }
  /* Reduce top controls spacing for mobile */
  .top-controls {
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
  }
}
.top-controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  position: relative;
}

.back-option {
  flex-shrink: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: #374151;
  text-decoration: none;
}

.back-arrow {
  font-size: 16px;
  font-weight: bold;
}

.step-indicators {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: background-color 0.2s ease;
}

.step-dot.active {
  background: var(--k-primary);
}

.welcome-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 480px;
  width: 100%;
}

/* Mobile responsive - stack vertically on small screens */
@media (max-width: 768px) {
  .onboarding-container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .back-option {
    align-self: center;
    margin-top: 0;
  }
}
.welcome-logo {
  margin-bottom: 1.5rem;
}

.logo-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--k-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.logo-text {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.logo-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.welcome-title {
  font-size: 28px;
  font-weight: bold;
  color: #111827;
  margin-bottom: 0.5rem;
}

.welcome-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 1.5rem;
}

.rating-stars {
  margin-bottom: 1rem;
}

.star {
  color: #fbbf24;
  font-size: 18px;
  margin: 0 2px;
}

.trust-message {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 2rem;
}

.auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
}

.auth-links a {
  color: #0d6b52;
  text-decoration: none;
  font-weight: 500;
}

.auth-links a:hover {
  text-decoration: underline;
}

.auth-links .spacer {
  flex: 1;
}

/* (removed duplicate welcome styles block) */
/* --- Business Selection Styles --- */
.business-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 500px;
  width: 100%;
}

/* --- Tutorial Styles --- */
.tutorial-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 500px;
  width: 100%;
}

.business-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.business-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 32px;
}

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

/* Mobile responsive - single column for very small screens */
@media (max-width: 360px) {
  .role-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Further reduce padding for very small screens */
  .role-card:not(.selected) {
    padding: 12px 8px !important;
    min-height: 80px !important;
  }
  .role-icon {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }
  .role-icon i {
    font-size: 20px !important;
  }
  .role-label {
    font-size: 12px !important;
  }
}
.role-card {
  position: relative;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px 16px 24px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.role-card:hover {
  border-color: #0d6b52;
  box-shadow: 0 4px 8px rgba(13, 107, 82, 0.1);
}

.role-card.coming-soon {
  opacity: 0.6;
  cursor: not-allowed;
}

.role-card.coming-soon:hover {
  border-color: #e5e7eb;
  box-shadow: none;
}

.role-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-radio:checked + .role-icon + .role-label {
  color: #0d6b52;
  font-weight: 600;
}

/* Force selected state with high specificity */
.role-grid .role-card.selected {
  border: 2px solid #0d6b52 !important;
  background-color: #f0fdf4 !important;
  box-shadow: 0 4px 8px rgba(13, 107, 82, 0.2) !important;
}

.role-grid .role-card.selected .role-label {
  color: #374151 !important;
  font-weight: normal !important;
}

.role-grid .role-card.selected .role-icon {
  color: #0d6b52 !important;
}

.role-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0;
  cursor: pointer;
}

.role-icon {
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--k-primary);
}

.role-icon i {
  font-size: 28px;
  color: var(--k-primary);
}

.coming-soon-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #fbbf24;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.account-name-section {
  text-align: left;
  margin-bottom: 24px;
}

.account-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.account-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
  background: #ffffff;
  transition: all 0.2s ease;
}

.account-input:focus {
  border-color: #0d6b52;
  box-shadow: none !important;
  outline: none !important;
}

.form-control:focus {
  border-color: #0d6b52;
  box-shadow: none !important;
  outline: none !important;
}

.error-message {
  color: #dc2626;
  font-size: 12px;
  margin-top: 4px;
}

/* --- Tutorial Screen Styles --- */
.tutorial-screen {
  text-align: center;
  padding: 20px 0;
}

.tutorial-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.tutorial-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 32px;
}

.video-placeholder {
  position: relative;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 60px 20px;
  margin-bottom: 32px;
  border: 2px dashed #d1d5db;
}

.play-button {
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-button:hover {
  transform: scale(1.1);
}

.video-text {
  color: #6b7280;
}

.video-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.video-subtitle {
  font-size: 14px;
  color: #6b7280;
}

/* --- Email Confirmation Styles --- */
.confirmation-banner {
  background: #0d6b52;
  color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.banner-icon {
  background: #ffffff;
  color: #0d6b52;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.banner-content {
  flex: 1;
}

.banner-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.banner-message {
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.4;
}

.confirmation-instructions {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 16px;
  text-align: center;
}

/* ===== MOBILE SCROLL FIX ===== */
/* Fix for mobile scrolling on profile and other pages */
/* IMPORTANT: Excludes auth/onboarding layouts which need height: 100% for centering */
@media screen and (max-width: 768px) {
  /* CORE FIX: Make body scrollable (except auth/onboarding) */
  body:not(.auth-layout):not(.onboarding-layout) {
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 20px !important; /* Footer space */
  }
  /* Page wrapper must be relative, not fixed */
  body:not(.auth-layout):not(.onboarding-layout) .page-wrapper {
    position: relative !important;
    margin-top: 60px !important;
    overflow: visible !important;
    height: auto !important;
  }
  /* Content area natural flow */
  body:not(.auth-layout):not(.onboarding-layout) .page-content-tab {
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    padding-bottom: 80px !important; /* Footer space */
    padding-top: 8px !important; /* Small top padding for content */
    margin-top: 0 !important; /* Remove margin, use padding on page-wrapper instead */
  }
  /* Fixed topbar (all pages) */
  .topbar {
    position: fixed !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  /* Fixed footer (all pages) */
  .footer {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 1000 !important;
  }
}
/* Phones: rail overlays content (don't push canvas). */
@media (max-width: 1025px) {
  .page-wrapper {
    margin-left: 0 !important;
  }
}
/* ===== FIX AVATAR ASPECT RATIO ===== */
/* Ensure avatars maintain proper circular shape and don't stretch */
.thumb-sm,
.thumb-md,
.thumb-lg,
.rounded-circle {
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

/* Navbar avatar - ensure it's a perfect circle */
.navbar-custom .thumb-sm,
.topbar .thumb-sm {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
}

/* Profile page avatar */
.thumb-lg {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
}

/* ===== DASHBOARD STYLES ===== */
/* Mobile-first card-based dashboard matching Lovable design */
.dashboard-container {
  max-width: 1400px;
  margin: 0 auto !important;
  width: 100%;
  box-sizing: border-box;
}

/* Welcome Section */
.dashboard-welcome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.welcome-text {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 400;
}

.badge-role {
  background-color: hsla(160, 84%, 30%, 0.1);
  color: hsl(160, 84%, 30%);
  border: 1px solid hsla(160, 84%, 30%, 0.2);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  text-transform: lowercase;
}

/* Inspection type badges with color coding */
.badge-type {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
}

/* General - Slate/Gray (Neutral, standard inspection) */
.badge-type-regular {
  background-color: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
}

/* Pre - Teal (Before, preparation) */
.badge-type-pre {
  background-color: #ccfbf1;
  color: #0f766e;
  border: 1px solid #5eead4;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
}

/* Post - Indigo (Completion, after) */
.badge-type-post {
  background-color: #e0e7ff;
  color: #4338ca;
  border: 1px solid #a5b4fc;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
}

/* Primary Action Card */
.dashboard-action-card {
  background: linear-gradient(135deg, #e8f5f1 0%, #d1f0e7 100%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dashboard-action-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dashboard-action-card .card-body {
  padding: 1rem;
  max-width: 510px;
}

.action-icon {
  width: 44px;
  height: 44px;
  background: var(--k-primary);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.action-icon i {
  color: white;
  font-size: 1.25rem;
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.125rem;
}

.action-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Stats Cards */
.stat-card {
  background: hsl(0, 0%, 100%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 0;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.stat-card .card-body {
  padding: 0.75rem 0.75rem;
  text-align: center;
}

.stat-icon {
  width: 32px;
  height: 32px;
  background: #f3f4f6;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.25rem;
}

.stat-icon i {
  color: var(--k-primary);
  font-size: 1rem;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 400;
}

/* Stats Row */
.dashboard-stats {
  margin-bottom: 1.5rem;
}

/* Recent Inspections Section */
.dashboard-section {
  background: hsl(0, 0%, 100%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
  margin-bottom: 1.5rem;
}

.dashboard-section .card-body {
  padding: 1.25rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.section-title-group {
  flex: 1;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}

.section-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Inspections List */
.inspections-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inspection-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid hsl(220, 13%, 91%);
  transition: all 0.2s ease;
}

.inspection-item:hover {
  background: hsl(0, 0%, 97%);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.inspection-icon {
  width: 40px;
  height: 40px;
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inspection-icon i {
  color: #6b7280;
  font-size: 1.125rem;
}

.inspection-icon.has-photos {
  background: color-mix(in srgb, var(--k-primary) 10%, white);
  border-color: color-mix(in srgb, var(--k-primary) 30%, transparent);
}

.inspection-icon.has-photos i {
  color: var(--k-primary);
}

.inspection-icon.has-photo-thumbnail {
  padding: 0;
  overflow: hidden;
  background: hsl(220, 13%, 96%);
}

.inspection-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inspection-details {
  flex: 1;
  min-width: 0;
}

.inspection-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}

.inspection-vehicle {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}

.inspection-meta {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.inspection-badges {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.inspection-badges .badge {
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  font-weight: 500;
}

.badge-success {
  background: #d1fae5;
  color: #065f46;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-secondary {
  background: #e5e7eb;
  color: #374151;
}

.badge-info {
  background: #dbeafe;
  color: #1e40af;
}

.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

.badge-status {
  text-transform: capitalize;
}

.inspection-date {
  font-size: 0.8125rem;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 0.125rem;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.empty-state p {
  margin: 0;
  font-size: 0.9375rem;
}

/* Bottom Action Cards */
.dashboard-actions {
  margin-bottom: 2rem;
}

.action-card-secondary {
  background: hsl(0, 0%, 100%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0;
}

.action-card-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.action-card-secondary .card-body {
  padding: 1rem;
  max-width: 510px;
}

.action-icon-secondary {
  width: 36px;
  height: 36px;
  background: #f3f4f6;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.action-icon-secondary i {
  color: #6b7280;
  font-size: 1rem;
}

.action-content-secondary h6 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.125rem;
}

.action-content-secondary p {
  font-size: 0.8125rem;
  color: #6b7280;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .dashboard-container {
    max-width: 510px;
  }
  /* Compact page title on mobile */
  .page-title-box {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
  }
  .page-title {
    font-size: 1.125rem;
    margin-bottom: 0;
  }
  /* Remove row gutters on mobile for cleaner layout */
  .dashboard-container .row {
    margin-left: 0;
    margin-right: 0;
  }
  .dashboard-container .row > [class*=col-] {
    padding-left: 0;
    padding-right: 0;
  }
  /* Compact welcome section on mobile */
  .dashboard-welcome {
    margin-bottom: 0.5rem;
  }
  .welcome-text {
    font-size: 0.8125rem;
  }
  .badge-role {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
  }
  /* Reduce stat card height on mobile, but keep taller than action cards */
  .stat-card .card-body {
    padding: 0.75rem;
    min-height: auto;
  }
  .stat-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 0.25rem;
  }
  .stat-icon i {
    font-size: 0.875rem;
  }
  .stat-number {
    font-size: 1.125rem;
    margin-bottom: 0.125rem;
  }
  .stat-label {
    font-size: 0.6875rem;
  }
  .dashboard-stats {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    margin-bottom: 1rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .dashboard-stats .col-12 {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0 !important;
  }
  .dashboard-stats .stat-card {
    margin-bottom: 0 !important;
  }
  /* Primary action card - more compact on mobile */
  .dashboard-action-card {
    margin-bottom: 0.75rem;
  }
  .dashboard-action-card .card-body {
    padding: 0.75rem;
  }
  .action-icon {
    width: 36px;
    height: 36px;
  }
  .action-icon i {
    font-size: 1rem;
  }
  .action-title {
    font-size: 0.875rem;
  }
  .action-subtitle {
    font-size: 0.75rem;
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.75rem;
  }
  .section-title {
    font-size: 0.875rem;
  }
  .section-subtitle {
    font-size: 0.6875rem;
  }
  .dashboard-section {
    margin-bottom: 1rem;
  }
  .dashboard-section .card-body {
    padding: 0.875rem;
  }
  .inspections-list {
    gap: 0.625rem;
  }
  .inspection-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
  }
  .inspection-details {
    flex: 1;
    min-width: 0;
  }
  .inspection-main {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
  }
  .inspection-vehicle {
    font-size: 0.8125rem;
  }
  .inspection-meta {
    font-size: 0.75rem;
    margin-bottom: 0.375rem;
  }
  .inspection-badges {
    gap: 0.25rem;
  }
  .inspection-date {
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-end;
    margin-top: auto;
  }
  /* Badge sizing for mobile */
  .badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }
  .badge-type,
  .badge-type-regular,
  .badge-type-pre,
  .badge-type-post,
  .badge-type-damage {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
  }
  /* Icon sizing for mobile */
  .inspection-icon {
    width: 40px;
    height: 40px;
  }
  .inspection-icon i {
    font-size: 1.125rem;
  }
  .inspection-thumbnail {
    width: 40px;
    height: 40px;
  }
  /* Bottom action cards - more compact on mobile */
  .dashboard-actions {
    gap: 0.7rem;
  }
  .dashboard-actions .col-12 {
    padding-left: 0;
    padding-right: 0;
  }
  .action-card-secondary .card-body {
    padding: 0.75rem;
  }
  .action-icon-secondary {
    width: 32px;
    height: 32px;
  }
  .action-icon-secondary i {
    font-size: 0.875rem;
  }
  .action-content-secondary h6 {
    font-size: 0.8125rem;
  }
  .action-content-secondary p {
    font-size: 0.75rem;
  }
}
/* Desktop - wider layout */
@media (min-width: 769px) {
  .dashboard-container {
    max-width: 1400px;
  }
}
/* ===== INSPECTION HISTORY PAGE ===== */
.inspection-history-container {
  max-width: 1400px;
  margin: 0 auto !important;
  width: 100%;
  box-sizing: border-box;
}

/* Header Section */
.inspection-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.back-button {
  text-decoration: none;
}

.back-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--k-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.back-circle:hover {
  background: color-mix(in srgb, var(--k-primary), black 12%);
  transform: scale(1.05);
}

.page-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

/* Search & Filter Card */
.search-filter-card {
  background: hsl(0, 0%, 100%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.filter-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-title i {
  font-size: 1.25rem;
  color: var(--k-primary);
}

.filter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-input-wrapper {
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none !important;
  border-color: var(--k-primary) !important;
  box-shadow: none !important;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.filter-select {
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-select:focus {
  outline: none !important;
  border-color: var(--k-primary) !important;
  box-shadow: none !important;
}

/* Results Header */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.results-count {
  font-size: 0.875rem;
  color: #6b7280;
}

.export-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.export-button:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.export-button i {
  font-size: 1rem;
}

/* Inspections Grid */
.inspections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Inspection Card */
.inspection-card {
  background: hsl(0, 0%, 100%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
  padding: 1rem 1.25rem;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.inspection-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  background: hsl(0, 0%, 99%);
  color: inherit;
}

.inspection-card-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.inspection-icon-large {
  width: 48px;
  height: 48px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inspection-icon-large i {
  color: #6b7280;
  font-size: 1.5rem;
}

.inspection-icon-large.has-photo-thumbnail {
  padding: 0;
  overflow: hidden;
  background: hsl(220, 13%, 96%);
}

.inspection-thumbnail-large {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.inspection-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.inspection-card-meta {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.inspection-card-badges {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.inspection-card-date {
  text-align: right;
  font-size: 0.8125rem;
  color: #6b7280;
  flex-shrink: 0;
}

.inspection-card-time {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.125rem;
}

.inspection-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: #6b7280;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}

.inspection-card-detail {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.inspection-card-detail i {
  font-size: 1rem;
  color: #9ca3af;
}

.inspection-card-stats {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-left: auto;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.stat-item i {
  font-size: 1rem;
  color: #9ca3af;
}

/* Empty State */
.empty-state-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
  background: hsl(0, 0%, 100%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
}

.empty-state-large i {
  font-size: 4rem;
  color: #d1d5db;
  margin-bottom: 1rem;
}

.empty-state-large h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.empty-state-large p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .inspection-history-container {
    max-width: 510px;
  }
  /* Page title */
  .inspection-history-container .page-title-box {
    margin-bottom: 0.625rem;
    padding-bottom: 0;
  }
  .inspection-history-container .page-title {
    font-size: 1.125rem;
    margin-bottom: 0;
  }
  /* Search & Filter Card */
  .search-filter-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  .filter-title {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
  }
  .filter-title i {
    font-size: 1rem;
  }
  .filter-form {
    gap: 0.75rem;
  }
  .search-input-wrapper {
    margin-bottom: 0.75rem;
  }
  .search-input {
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
  }
  .filter-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .filter-label {
    font-size: 0.75rem;
    margin-bottom: 0.375rem;
  }
  .filter-select {
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
  }
  /* Results Header */
  .results-header {
    margin-bottom: 0.75rem;
  }
  .results-count {
    font-size: 0.8125rem;
  }
  .export-button {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }
  .export-button i {
    font-size: 0.875rem;
  }
  /* Inspections Grid */
  .inspections-grid {
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  /* Inspection Cards */
  .inspection-card {
    padding: 0.875rem 1rem;
  }
  .inspection-card-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.625rem;
    gap: 0.75rem;
  }
  .inspection-card-title {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    gap: 0.375rem;
  }
  .inspection-card-meta {
    font-size: 0.75rem;
    margin-bottom: 0.375rem;
  }
  .inspection-card-date {
    font-size: 0.75rem;
  }
  .inspection-card-footer {
    grid-template-columns: 1fr;
    font-size: 0.75rem;
    padding-top: 0.625rem;
    margin-top: 0.625rem;
  }
  .inspection-card-detail {
    font-size: 0.75rem;
  }
  .inspection-card-detail i {
    font-size: 0.875rem;
  }
  .inspection-card-stats {
    border-top: none;
    padding-top: 0;
    gap: 0.625rem;
  }
  .stat-item {
    font-size: 0.75rem;
  }
  .stat-item i {
    font-size: 0.875rem;
  }
  .page-heading {
    font-size: 1.25rem;
  }
  /* Badge sizing for mobile */
  .badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }
  .badge-type,
  .badge-type-regular,
  .badge-type-pre,
  .badge-type-post,
  .badge-type-damage {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
  }
  .inspection-card-badges {
    gap: 0.25rem;
  }
  /* Icon sizing for mobile */
  .inspection-icon-large {
    width: 48px;
    height: 48px;
  }
  .inspection-icon-large i {
    font-size: 1.25rem;
  }
  .inspection-thumbnail-large {
    width: 48px;
    height: 48px;
  }
  /* Empty state */
  .empty-state-large {
    padding: 3rem 1rem;
  }
  .empty-state-large i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
  }
  .empty-state-large h3 {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }
  .empty-state-large p {
    font-size: 0.875rem;
  }
}
/* Desktop - wider layout */
@media (min-width: 769px) {
  .inspection-history-container {
    max-width: 1400px;
  }
  .inspections-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .inspection-card-header {
    flex-direction: row;
    align-items: center;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0.75rem;
  }
  .inspection-card-footer {
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 2rem;
  }
  .inspection-card-stats {
    grid-column: auto;
    border-top: none;
    padding-top: 0;
    margin-left: auto;
  }
}
/* ========================================================================
   INSPECTION REPORT PAGE
   Professional, production-ready styles for detailed inspection reports
   ======================================================================== */
/* Report Container */
.inspection-report-container {
  max-width: 1400px;
  margin: 0 auto !important;
  width: 100%;
  box-sizing: border-box;
}

/* ========================================================================
   REPORT HEADER
   ======================================================================== */
.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 0;
  gap: 1rem;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  color: hsl(220, 9%, 46%);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}
.back-button:hover {
  background: hsl(220, 13%, 98%);
  color: hsl(220, 9%, 20%);
  transform: translateX(-2px);
}
.back-button i {
  font-size: 1rem;
}

.report-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin: 0;
}

.report-actions {
  display: flex;
  gap: 0.5rem;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  color: hsl(220, 9%, 46%);
  cursor: pointer;
  transition: all 0.2s;
}
.icon-button:hover {
  background: hsl(220, 13%, 98%);
  color: hsl(220, 9%, 20%);
  transform: translateY(-1px);
}
.icon-button i {
  font-size: 1.125rem;
}

/* ========================================================================
   STATUS BANNER
   ======================================================================== */
.status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(60, 155, 115, 0.06) 0%, rgba(60, 155, 115, 0.03) 100%) !important;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Mobile: Better spacing and layout */
@media (max-width: 768px) {
  .status-banner {
    padding: 0.875rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  .status-banner > div:first-child {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .view-comparison-button,
  .status-banner-button {
    flex: 0 0 auto;
    font-size: 0.75rem;
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
  }
  .status-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
    white-space: nowrap;
  }
  .status-text {
    font-size: 0.6875rem;
    white-space: nowrap;
  }
}
/* Very small phones: Stack vertically if needed */
@media (max-width: 380px) {
  .status-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .view-comparison-button {
    width: 100%;
    text-align: center;
  }
}
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-returned,
.status-out {
  background: hsl(142, 76%, 94%);
  color: hsl(142, 72%, 29%);
}

.status-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 46%);
  white-space: nowrap;
}

.view-comparison-button {
  padding: 0.5rem 1rem;
  background: var(--k-primary);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s;
}
.view-comparison-button:hover {
  background: var(--k-secondary);
  color: white;
}

.status-banner-button {
  padding: 0.5rem 1rem;
  background: var(--k-primary);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.status-banner-button:hover {
  background: var(--k-secondary);
  color: white;
}

/* ========================================================================
   COMPLETION CARD
   ======================================================================== */
.completion-card {
  background: linear-gradient(135deg, hsl(142, 76%, 96%), hsl(142, 76%, 98%));
  border: 1px solid hsl(142, 76%, 90%);
  border-radius: 0.75rem;
  padding: 2.5rem 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.completion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: hsl(142, 76%, 94%);
  border-radius: 50%;
  margin-bottom: 1rem;
}
.completion-icon i {
  font-size: 2rem;
  color: hsl(142, 72%, 29%);
}

.completion-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 0.5rem;
}

.completion-message {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin: 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================================
   MAIN INSPECTION CARD
   ======================================================================== */
.inspection-main-card {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-left: 4px solid var(--k-primary);
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.certification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.blockchain-verified-header {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: linear-gradient(135deg, rgba(0, 98, 66, 0.08) 0%, rgba(60, 155, 115, 0.05) 100%);
  border: 1px solid var(--k-secondary);
  border-radius: 0.375rem;
  color: var(--k-primary);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0;
}
.blockchain-verified-header i {
  color: var(--k-secondary);
  font-size: 1rem;
}

.inspection-id {
  font-weight: 600;
  color: hsl(220, 9%, 46%);
}

.vehicle-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 0.25rem;
}

.vehicle-vin {
  color: hsl(220, 9%, 46%);
  margin-bottom: 1rem;
}

/* Status Badges */
.status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.badge i {
  font-size: 0.875rem;
}

.badge-completed {
  background: hsl(142, 76%, 94%);
  color: hsl(142, 72%, 29%);
}

.badge-in-progress {
  background: hsl(201, 96%, 96%);
  color: hsl(201, 96%, 32%);
}

.badge-draft {
  background: hsl(220, 13%, 96%);
  color: hsl(220, 9%, 46%);
}

.badge-cancelled {
  background: hsl(0, 84%, 96%);
  color: hsl(0, 84%, 40%);
}

.badge-major {
  background: hsl(0, 84%, 96%);
  color: hsl(0, 84%, 40%);
}

.badge-moderate {
  background: hsl(38, 92%, 94%);
  color: hsl(38, 92%, 40%);
}

.badge-minor {
  background: hsl(201, 96%, 96%);
  color: hsl(201, 96%, 32%);
}

.badge-type {
  background: hsl(262, 83%, 96%);
  color: hsl(262, 83%, 48%);
}

/* Details Grid */
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.detail-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(220, 13%, 96%);
  border-radius: 0.5rem;
  color: hsl(220, 9%, 46%);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 20%);
}
.detail-value small {
  color: hsl(220, 9%, 46%);
  font-weight: 400;
  margin-left: 0.25rem;
}

/* ========================================================================
   TABS INTERFACE
   ======================================================================== */
.tabs-container {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 3rem;
}

.tabs-navigation {
  display: flex;
  border-bottom: 1px solid hsl(220, 13%, 91%);
  background: hsl(220, 13%, 98%);
  overflow-x: auto;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: hsl(220, 9%, 46%);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.tab-button i {
  font-size: 1rem;
}
.tab-button:hover {
  background: white;
  color: hsl(220, 9%, 20%);
}
.tab-button.active {
  background: white;
  color: hsl(220, 9%, 20%);
  border-bottom-color: var(--k-primary);
}

/* Tabs for inspection show page only - not for leftbar menu! */
.tabs-container .tab-content {
  display: none;
  padding: 1.5rem;
  animation: fadeIn 0.3s ease-in;
}
.tabs-container .tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========================================================================
   SECTION TITLES
   ======================================================================== */
.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin-bottom: 1.5rem;
}

/* ========================================================================
   AI ANALYSIS SECTION
   ======================================================================== */
.ai-analysis-section {
  margin-bottom: 2rem;
}

.analysis-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.metric-card {
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  text-align: center;
}

.metric-confidence {
  background: linear-gradient(135deg, hsl(142, 76%, 96%), hsl(142, 76%, 98%));
  border: 1px solid hsl(142, 76%, 90%);
}

.metric-images {
  background: linear-gradient(135deg, hsl(201, 96%, 96%), hsl(201, 96%, 98%));
  border: 1px solid hsl(201, 96%, 90%);
}

.metric-issues {
  background: linear-gradient(135deg, hsl(0, 84%, 96%), hsl(0, 84%, 98%));
  border: 1px solid hsl(0, 84%, 90%);
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.125rem;
}

.metric-confidence .metric-value {
  color: hsl(142, 72%, 29%);
}

.metric-images .metric-value {
  color: hsl(201, 96%, 32%);
}

.metric-issues .metric-value {
  color: hsl(0, 84%, 40%);
}

.metric-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(220, 9%, 46%);
}

/* ========================================================================
   DAMAGE SECTION - Modern Table Design
   ======================================================================== */
.damage-section {
  margin-top: 2rem;
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.section-subtitle-sm {
  font-size: 0.8125rem;
  color: hsl(220, 9%, 46%);
  margin: 0.25rem 0 0 0;
}

/* Repair Cost Summary Card */
.repair-cost-card {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.repair-cost-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.repair-cost-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: #147038;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.repair-cost-breakdown {
  display: flex;
  gap: 0;
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
}
.repair-cost-breakdown span {
  display: flex;
  align-items: center;
}
.repair-cost-breakdown span:not(:last-child)::after {
  content: "•";
  margin: 0 0.75rem;
  color: hsl(220, 9%, 60%);
  font-weight: 700;
}

/* Mobile responsive - Repair Cost Card */
@media (max-width: 768px) {
  .repair-cost-card {
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 510px;
  }
  .repair-cost-label {
    font-size: 0.6875rem;
    margin-bottom: 0.25rem;
  }
  .repair-cost-amount {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .repair-cost-breakdown {
    gap: 0;
    font-size: 0.75rem;
  }
}
.issues-table {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  overflow: hidden;
}

.issues-table-header {
  display: grid;
  grid-template-columns: 130px 1.3fr 110px 85px 85px 115px 200px 130px;
  column-gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: hsl(220, 13%, 98%);
  border-bottom: 1px solid hsl(220, 13%, 91%);
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.issues-table-header > div {
  display: flex;
  align-items: center;
}

.issues-table-body {
  display: flex;
  flex-direction: column;
}

.issue-row {
  display: grid;
  grid-template-columns: 130px 1.3fr 110px 85px 85px 115px 200px 130px;
  column-gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid hsl(220, 13%, 94%);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  align-items: center;
}
.issue-row:last-child {
  border-bottom: none;
}
.issue-row:hover {
  background: hsl(220, 13%, 99%);
}

/* Left border accent on hover */
.issue-row-minor:hover {
  border-left-color: #ca8a04;
}

.issue-row-moderate:hover {
  border-left-color: #ea580c;
}

.issue-row-major:hover {
  border-left-color: #dc2626;
}

.issue-row-severe:hover {
  border-left-color: #991b1b;
}

/* Severity Text Column - Simple text, left aligned */
.td-severity {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.severity-text {
  font-size: 0.8125rem;
  font-weight: 500;
}

.severity-text-minor {
  color: #ca8a04;
}

.severity-text-moderate {
  color: #ea580c;
}

.severity-text-major {
  color: #dc2626;
}

.severity-text-severe {
  color: #991b1b;
  font-weight: 600;
}

/* Type Column */
.td-type {
  display: flex;
  align-items: center;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 20%);
}
.type-cell i {
  font-size: 1rem;
  color: hsl(220, 9%, 46%);
  flex-shrink: 0;
}

/* Description Column */
.td-description {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  line-height: 1.5;
}

/* Method Column */
.td-method {
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
}

.method-text {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: capitalize;
}

.method-success {
  color: #147038;
}

.method-estimate {
  color: #d97706;
  font-style: italic;
}

/* Cost Columns Headers */
.th-labor,
.th-parts,
.th-paint {
  justify-content: flex-end !important;
  margin-right: -0.5px !important;
}

.th-total {
  justify-content: flex-end !important;
  margin-right: -0.5px !important;
}

.th-method {
  padding-left: 1.5rem !important;
}

/* Cost Columns Body Cells */
.td-cost-breakdown {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  margin-right: -0.5px;
}

/* Hide mobile cost summary on desktop */
.td-cost-summary-mobile {
  display: none;
}

.td-cost-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: -0.5px;
}

.cost-breakdown-value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(220, 9%, 46%);
}
.cost-breakdown-value.muted {
  color: hsl(220, 9%, 70%);
}

.cost-total-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #147038;
}
.cost-total-value.muted {
  color: hsl(220, 9%, 70%);
}

/* Issues Table Footer - Total Row */
.issues-table-footer {
  display: grid;
  grid-template-columns: 130px 1.3fr 110px 85px 85px 115px 200px 130px;
  column-gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-top: 2px solid hsl(220, 13%, 85%);
  background: hsl(220, 13%, 98%);
  align-items: center;
}

.footer-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-amount {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  margin-right: -0.5px;
}

.footer-total {
  font-size: 1.125rem;
  font-weight: 700;
  color: #147038;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  margin-right: -0.5px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .issues-table-header {
    display: none;
  }
  .issue-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 1rem;
  }
  /* Row 1: Type | Severity */
  .td-type {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .td-severity {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  /* Row 2: Description (full width) */
  .td-description {
    grid-row: 2;
    grid-column: 1/-1;
    padding-top: 0.5rem;
    border-top: 1px solid hsl(220, 13%, 94%);
  }
  /* Row 3: Show mobile summary, hide desktop breakdown */
  .td-cost-summary-mobile {
    display: flex;
    flex-wrap: wrap;
    grid-row: 3;
    grid-column: 1/-1;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    color: hsl(220, 9%, 46%);
  }
  .mobile-cost-label {
    font-weight: 600;
    color: hsl(220, 9%, 60%);
    margin-right: 0.25rem;
  }
  .mobile-cost-value {
    color: hsl(220, 9%, 20%);
    font-weight: 500;
  }
  .mobile-cost-value.muted {
    color: hsl(220, 9%, 70%);
    font-weight: 400;
  }
  .mobile-cost-separator {
    margin: 0 0.5rem;
    color: hsl(220, 9%, 60%);
  }
  /* Hide desktop cost breakdown on mobile */
  .td-cost-breakdown {
    display: none;
  }
  /* Hide method on mobile */
  .td-method {
    display: none;
  }
  /* Row 4: Total (full width) */
  .td-cost-total {
    grid-row: 4;
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid hsl(220, 13%, 94%);
    margin-right: 0;
  }
  .td-cost-total::before {
    content: "Total:";
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(220, 9%, 46%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .cost-total-value {
    font-size: 1.125rem;
  }
  /* Footer should show in simplified format */
  .issues-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
  }
  .footer-label {
    display: none;
  }
  .footer-label:nth-child(3) {
    display: block;
  }
  .footer-amount {
    display: none;
  }
  .footer-total {
    margin-left: auto;
  }
}
/* ========================================================================
   PHOTOS GRID
   ======================================================================== */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 0 1rem;
}

.photo-card {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3/2;
}
.photo-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: hsl(220, 13%, 96%);
  color: hsl(220, 9%, 46%);
}
.photo-placeholder i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.photo-placeholder span {
  font-size: 0.875rem;
}

.photo-caption {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  border-top: 1px solid hsl(220, 13%, 91%);
}

/* ========================================================================
   ANALYSIS TAB
   ======================================================================== */
.analysis-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.analysis-stat {
  padding: 1.5rem;
  background: hsl(220, 13%, 98%);
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(220, 9%, 20%);
}

.severity-distribution {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.severity-count {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
}

.severity-minor {
  background: #fef9c3;
  color: #ca8a04;
}

.severity-moderate {
  background: #ffedd5;
  color: #ea580c;
}

.severity-major {
  background: #fee2e2;
  color: #dc2626;
}

.severity-severe {
  background: #fecaca;
  color: #991b1b;
  font-weight: 600;
}

.damage-breakdown {
  padding: 1.5rem;
  background: hsl(220, 13%, 98%);
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
}
.damage-breakdown h4 {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 1rem;
}

.damage-type-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.damage-type-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
}
.damage-type-list li:last-child {
  margin-bottom: 0;
}

.type-name {
  font-size: 0.875rem;
  color: hsl(220, 9%, 20%);
  font-weight: 500;
}

.type-count {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  background: hsl(220, 13%, 96%);
  color: hsl(220, 9%, 46%);
  border-radius: 9999px;
}

/* ========================================================================
   CHECKLIST TAB
   ======================================================================== */
.checklist-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.checklist-category {
  padding: 1.5rem;
  background: hsl(220, 13%, 98%);
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 1rem;
}
.category-title i {
  font-size: 1.125rem;
}

.checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
}
.checklist-item:last-child {
  margin-bottom: 0;
}
.checklist-item i {
  font-size: 1.125rem;
}

.item-checked {
  border-left: 3px solid hsl(142, 72%, 45%);
}
.item-checked i {
  color: hsl(142, 72%, 29%);
}
.item-checked:hover {
  background: hsl(142, 76%, 99%);
}

.item-flagged {
  border-left: 3px solid hsl(0, 84%, 60%);
}
.item-flagged i {
  color: hsl(0, 84%, 40%);
}
.item-flagged:hover {
  background: hsl(0, 84%, 99%);
}

/* ========================================================================
   EMPTY STATES
   ======================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}
.empty-state i {
  font-size: 3rem;
  color: hsl(220, 9%, 76%);
  margin-bottom: 1rem;
}
.empty-state h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 0.5rem;
}
.empty-state p {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin: 0;
}

/* Notes Section */
.notes-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: hsl(220, 13%, 98%);
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
}

.notes-content {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  line-height: 1.6;
}

/* ========================================================================
   RESPONSIVE DESIGN
   ======================================================================== */
@media (max-width: 768px) {
  .inspection-report-container {
    max-width: 510px;
  }
  /* Header */
  .report-header {
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .page-title {
    font-size: 1.125rem;
    margin-bottom: 0;
  }
  .report-actions {
    gap: 0.375rem;
    flex-shrink: 0;
  }
  .icon-button {
    width: 2rem;
    height: 2rem;
  }
  .icon-button i {
    font-size: 1rem;
  }
  /* Status Banner & Completion Card */
  .status-banner {
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
  }
  .status-badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
  }
  .status-text {
    font-size: 0.8125rem;
  }
  .view-comparison-button {
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
  }
  .completion-card {
    padding: 1.25rem 1rem;
    margin-bottom: 0.75rem;
  }
  .completion-icon i {
    font-size: 2rem;
  }
  .completion-title {
    font-size: 1.125rem;
    margin-bottom: 0.375rem;
  }
  .completion-message {
    font-size: 0.875rem;
  }
  /* Main Inspection Card */
  .inspection-main-card {
    padding: 1rem;
  }
  .certification-header {
    margin-bottom: 0.625rem;
  }
  .blockchain-verified-header {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }
  .inspection-id {
    font-size: 0.6875rem;
  }
  .vehicle-title {
    font-size: 1.125rem;
    margin-bottom: 0.375rem;
  }
  .vehicle-vin {
    font-size: 0.75rem;
    margin-bottom: 0.625rem;
  }
  .status-badges {
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }
  .status-badges .badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }
  /* Details Grid */
  .details-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .detail-item {
    padding: 0.5rem;
  }
  .detail-icon {
    font-size: 1rem;
    width: 1.5rem;
    height: 1.5rem;
  }
  .detail-label {
    font-size: 0.6875rem;
    margin-bottom: 0.25rem;
  }
  .detail-value {
    font-size: 0.875rem;
  }
  .detail-value small {
    font-size: 0.75rem;
  }
  /* Tabs */
  .tabs-container {
    margin-top: 0.75rem;
  }
  .tabs-navigation {
    justify-content: flex-start;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-button {
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .tab-button i {
    font-size: 0.875rem;
  }
  /* Tab Content */
  .tabs-container .tab-content {
    padding: 1rem;
  }
  .section-title {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
  }
  .section-subtitle {
    font-size: 0.75rem;
  }
  .section-subtitle-sm {
    font-size: 0.6875rem;
  }
  /* AI Analysis Section */
  .ai-analysis-section {
    margin-bottom: 1rem;
  }
  .analysis-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .metric-card {
    padding: 0.75rem 0.5rem;
  }
  .metric-value {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }
  .metric-label {
    font-size: 0.6875rem;
  }
  /* Damage Section */
  .damage-section {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  .section-header-row {
    margin-bottom: 0.75rem;
  }
  /* Photos Grid */
  .photos-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .photo-card {
    border-radius: 0.5rem;
  }
  .photo-caption {
    font-size: 0.75rem;
    padding: 0.625rem;
  }
  /* Analysis Overview */
  .analysis-overview {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .analysis-stat {
    padding: 0.75rem;
  }
  .stat-label {
    font-size: 0.75rem;
    margin-bottom: 0.375rem;
  }
  .stat-value {
    font-size: 1rem;
  }
  .severity-distribution {
    gap: 0.375rem;
    flex-wrap: wrap;
  }
  .severity-count {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  /* Damage Breakdown */
  .damage-breakdown {
    margin-top: 1rem;
  }
  .damage-breakdown h4 {
    font-size: 0.9375rem;
    margin-bottom: 0.625rem;
  }
  .damage-type-list li {
    padding: 0.5rem 0;
    font-size: 0.875rem;
  }
  .type-name {
    font-size: 0.875rem;
  }
  .type-count {
    font-size: 0.875rem;
  }
  /* Empty State */
  .empty-state {
    padding: 2rem 1rem;
  }
  .empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
  }
  .empty-state h3 {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }
  .empty-state p {
    font-size: 0.875rem;
  }
  /* Notes Section */
  .notes-section {
    margin-top: 1rem;
  }
  .notes-content {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  /* Share Card */
  .share-card-container {
    margin-bottom: 0.75rem;
  }
  .share-card-header {
    padding: 1rem;
  }
  .share-card-title {
    font-size: 0.9375rem;
  }
  .share-card-title i {
    font-size: 1rem;
  }
  .share-card-close {
    width: 1.75rem;
    height: 1.75rem;
  }
  .share-card-body {
    padding: 1rem;
  }
  .qr-code-container {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  .share-actions {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }
  .share-action-btn {
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
  }
  .share-action-btn i {
    font-size: 1rem;
  }
}
@media (min-width: 769px) {
  .inspection-report-container {
    max-width: 1400px;
  }
  .photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ========================================================================
   SHARE CARD
   QR Code and sharing functionality - Inline card
   ======================================================================== */
.share-card-container {
  margin-bottom: 1.5rem;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.share-card {
  background: hsl(220, 13%, 98%);
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.share-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(220, 13%, 91%);
  background: white;
  border-radius: 0.75rem 0.75rem 0 0;
}

.share-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin: 0;
}
.share-card-title i {
  font-size: 1.125rem;
}

.share-card-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: hsl(220, 9%, 46%);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}
.share-card-close:hover {
  background: hsl(220, 13%, 95%);
  color: hsl(220, 9%, 20%);
}
.share-card-close i {
  font-size: 1.125rem;
}

.share-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
  background: color-mix(in srgb, var(--k-primary) 5%, transparent);
  border-radius: 0.75rem;
  border: none;
}
.qr-code-container canvas {
  border-radius: 0.5rem;
  background: white;
  padding: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.qr-code-container .error {
  color: hsl(0, 84%, 60%);
  text-align: center;
  margin: 0;
}

.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.share-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: white;
  border: 1.5px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  color: hsl(220, 9%, 20%);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.share-action-btn i {
  font-size: 1rem;
}
.share-action-btn:hover {
  background: var(--k-primary);
  color: white;
  border-color: var(--k-primary);
}
.share-action-btn:active {
  background: var(--k-primary);
  opacity: 0.9;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .share-card-header {
    padding: 1rem;
    max-width: 510px;
  }
  .share-card-body {
    padding: 1rem;
    max-width: 510px;
  }
  .qr-code-container {
    padding: 1rem;
    max-width: 510px;
  }
  .share-actions {
    grid-template-columns: 1fr;
  }
}
/* ========================================================================
   PRINT STYLES
   Production-ready for PDF generation and printing
   ======================================================================== */
@media print {
  .inspection-report-container {
    background: white;
    padding: 0;
  }
  .back-button,
  .report-actions,
  .tabs-navigation,
  .share-card-container {
    display: none;
  }
  .tab-content {
    display: block !important;
    page-break-inside: avoid;
  }
  .damage-item,
  .photo-card,
  .checklist-category {
    page-break-inside: avoid;
  }
  .inspection-main-card {
    box-shadow: none;
  }
}
/* ========================================================================
   REPORTS PAGE
   Professional reports listing matching Lovable design
   ======================================================================== */
.reports-container {
  max-width: 1400px;
  margin: 0 auto !important;
  width: 100%;
  box-sizing: border-box;
}

.reports-header {
  margin-bottom: 2rem;
}

.reports-title {
  font-size: 2rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
}

/* Stats Cards */
.reports-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--k-primary);
  margin-bottom: 0.5rem;
}

.stat-card-issues .stat-value {
  color: #d97706;
}

.stat-label {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Search and Filters */
.reports-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
  background: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(220, 13%, 91%);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.reports-search-form {
  display: flex;
  gap: 1rem;
  flex: 1;
  align-items: center;
}

.reports-controls .search-input-wrapper {
  position: relative;
  flex: 1;
}

.reports-controls .search-input-wrapper i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(220, 9%, 46%);
  font-size: 1.25rem;
}

.reports-controls .search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.reports-controls .search-input:focus {
  outline: none;
  border-color: var(--k-primary);
}

.reports-controls .filter-group {
  flex-wrap: nowrap;
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}

.filter-select {
  padding: 0.75rem 1rem;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 150px;
  white-space: nowrap;
}

.filter-select:focus {
  outline: none;
  border-color: var(--k-primary);
}

/* Reports List */
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-card {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.report-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.report-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.report-card-content {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex: 1;
}

.report-card-footer {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.8125rem;
  color: #6b7280;
}

.report-meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.report-meta-item i {
  font-size: 1rem;
  color: #9ca3af;
}

.report-info {
  flex: 1;
}

.report-vehicle-name {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
  margin: 0 0 0.25rem 0;
}

.report-vehicle-plate {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin-bottom: 0.5rem;
}

.report-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.severity-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.severity-minor {
  background: #dbeafe;
  color: #1e40af;
}

.severity-moderate {
  background: #fef3c7;
  color: #92400e;
}

.severity-major {
  background: #fee2e2;
  color: #991b1b;
}

.severity-none {
  background: #dcfce7;
  color: #166534;
}

/* Actions */
.report-actions {
  display: flex;
  align-items: center;
}

.report-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--k-primary);
  font-size: 0.8125rem;
  font-weight: 500;
}

.report-status i {
  font-size: 1rem;
}

.report-buttons {
  display: flex;
  gap: 0.75rem;
}

.report-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.report-btn-download {
  background: white;
  color: hsl(220, 9%, 15%);
  border: 1px solid hsl(220, 13%, 91%);
}

.report-btn-download:hover {
  background: hsl(220, 13%, 98%);
  border-color: hsl(220, 13%, 85%);
}

.report-btn-view {
  background: white;
  color: hsl(220, 9%, 15%);
  border: 1px solid hsl(220, 13%, 91%);
}

.report-btn-view:hover {
  background: hsl(220, 13%, 98%);
  border-color: hsl(220, 13%, 85%);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state i {
  font-size: 4rem;
  color: hsl(220, 9%, 46%);
  margin-bottom: 1rem;
}

.empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: hsl(220, 9%, 46%);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .reports-container {
    max-width: 510px;
  }
  /* Header */
  .reports-header {
    margin-bottom: 1rem;
  }
  .reports-title {
    font-size: 1.5rem;
  }
  /* Stats Cards */
  .reports-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .stat-card {
    padding: 1rem;
  }
  .stat-value {
    font-size: 1.25rem;
  }
  .stat-label {
    font-size: 0.75rem;
  }
  .stat-card:nth-child(3) {
    grid-column: 1/-1;
  }
  /* Controls */
  .reports-controls {
    flex-direction: column;
    padding: 1rem;
    margin-bottom: 1rem;
  }
  .reports-search-form {
    flex-direction: column;
    width: 100%;
  }
  .reports-controls .search-input-wrapper {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .reports-controls .search-input {
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    font-size: 0.8125rem;
  }
  .reports-controls .search-input-wrapper i {
    font-size: 1rem;
    left: 0.75rem;
  }
  .reports-controls .filter-group {
    flex-wrap: nowrap;
    width: 100%;
    flex-direction: row;
    gap: 0.5rem;
  }
  .filter-select {
    flex: 1;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
  /* Report Cards */
  .reports-list {
    gap: 0.75rem;
  }
  .report-card {
    padding: 1rem;
    position: relative;
  }
  .report-card-header {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 0.625rem;
  }
  .report-card-content {
    width: 100%;
    gap: 0.75rem;
    align-items: flex-start;
  }
  /* Vehicle Info Section */
  .report-info {
    width: 100%;
    padding-right: 120px; /* Space for Completed status and icons */
  }
  .report-vehicle-name {
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
  }
  .report-status {
    font-size: 0.75rem;
  }
  .report-status i {
    font-size: 0.875rem;
  }
  .report-vehicle-plate {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }
  .report-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  /* Actions Section at top right - stacked vertically (for reports page only) */
  .reports-container .report-actions {
    position: absolute;
    top: 0;
    right: 0;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-end;
    width: auto;
  }
  .report-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex-shrink: 0;
  }
  .report-btn {
    padding: 0.5rem;
    min-width: auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .report-btn span {
    display: none;
  }
  .report-btn i {
    font-size: 1rem;
    margin: 0;
  }
  /* Footer with meta info */
  .report-card-footer {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.625rem;
  }
  .report-meta-item {
    font-size: 0.6875rem;
  }
  .report-meta-item i {
    font-size: 0.875rem;
  }
  .severity-badge {
    width: fit-content;
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
  }
}
/* ===================================================================
   INSPECTION WIZARD STYLES (Lovable Design)
   =================================================================== */
.inspection-wizard-container {
  min-height: 100vh;
  background: hsl(220, 13%, 98%);
  padding: 1.5rem;
}

/* Header */
.wizard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.wizard-back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(220, 9%, 46%);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.wizard-back-btn:hover {
  color: var(--k-primary);
}

.wizard-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wizard-logo {
  height: 24px;
}

.wizard-brand-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: hsl(220, 9%, 15%);
}

.wizard-step-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wizard-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--k-primary);
  color: white;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: lowercase;
}

.wizard-step-text {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  font-weight: 500;
}

/* Progress Steps */
.wizard-progress {
  background: linear-gradient(135deg, rgba(60, 155, 115, 0.06) 0%, rgba(60, 155, 115, 0.03) 100%);
  padding: 1.75rem 2rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(60, 155, 115, 0.15);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.wizard-progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.wizard-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.wizard-progress-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  border: 2px solid hsl(220, 13%, 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  color: hsl(220, 9%, 46%);
  transition: all 0.3s;
}

.wizard-progress-step.active .wizard-progress-circle {
  background: var(--k-primary);
  border-color: var(--k-primary);
  color: white;
}

.wizard-progress-step.completed .wizard-progress-circle {
  background: var(--k-primary);
  border-color: var(--k-primary);
  color: white;
}

.wizard-progress-label {
  font-size: 0.8125rem;
  color: hsl(220, 9%, 46%);
  font-weight: 500;
}

.wizard-progress-connector {
  width: 80px;
  height: 2px;
  background: hsl(220, 13%, 85%);
  margin-bottom: 1.5rem;
}

.wizard-progress-connector.active {
  background: var(--k-primary);
}

/* Form Card */
.wizard-form-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid hsl(220, 13%, 91%);
  padding: 2.5rem;
  margin-bottom: 2rem;
}

.wizard-form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.wizard-form-icon {
  width: 56px;
  height: 56px;
  background: hsl(220, 13%, 95%);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.wizard-form-icon i {
  font-size: 1.5rem;
  color: var(--k-primary);
}

.wizard-form-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: hsl(220, 9%, 10%);
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.wizard-form-subtitle {
  font-size: 1rem;
  color: hsl(220, 9%, 46%);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* Assessment Badge */
.wizard-assessment-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: hsl(210, 100%, 96%);
  border: 1px solid hsl(210, 100%, 85%);
  border-radius: 0.5rem;
  color: hsl(210, 100%, 45%);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

/* Location Capture Button */
.wizard-location-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 0.5rem;
}

.wizard-location-btn i {
  font-size: 1.125rem;
  color: hsl(220, 9%, 46%);
  transition: color 0.2s ease;
}

.wizard-location-btn span {
  color: hsl(220, 9%, 46%);
  transition: color 0.2s ease;
}

.wizard-location-btn:disabled {
  cursor: not-allowed;
}

.wizard-location-btn.loading i,
.wizard-location-btn.loading span {
  color: var(--k-secondary) !important;
}

/* Location Display */
.wizard-location-display {
  padding: 1rem;
  background: hsla(142, 76%, 36%, 0.05);
  border: 1px solid hsla(142, 76%, 36%, 0.2);
  border-radius: 0.5rem;
  margin-top: 0.75rem;
}

.wizard-location-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.wizard-location-info i {
  color: var(--k-primary);
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

.wizard-location-text {
  font-weight: 600;
  color: hsl(220, 9%, 15%);
  margin: 0 0 0.25rem 0;
  font-size: 0.9375rem;
}

.wizard-location-coords {
  font-size: 0.8125rem;
  color: hsl(220, 9%, 46%);
  margin: 0;
}

/* Form Grid */
.wizard-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.wizard-form-group {
  position: relative;
}

.wizard-form-group-full {
  grid-column: 1/-1;
}

/* Location Button */
.wizard-location-btn {
  width: 100%;
  padding: 0.875rem 1rem;
  background: white;
  border: 1.5px dashed hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--k-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.wizard-location-btn .ti-loader {
  animation: spin 1s linear infinite;
}

.wizard-location-btn.error-state {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #d97706;
  padding: 1rem;
}

.wizard-location-btn.error-state i {
  color: #f59e0b;
}

.location-error-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
}

.location-error-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.location-error-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #d97706;
}

.location-error-instruction {
  font-size: 0.8125rem;
  color: #92400e;
  font-weight: 400;
  line-height: 1.4;
  padding-left: 1.625rem; /* Align with title text (icon width + gap) */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.wizard-location-display {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: hsl(142, 76%, 96%);
  border: 1px solid hsl(142, 76%, 85%);
  border-radius: 0.5rem;
  margin-top: 0.75rem;
}

.wizard-location-display i {
  color: hsl(142, 76%, 36%);
  font-size: 1.125rem;
  margin-top: 0.125rem;
}

.wizard-location-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 15%);
  margin-bottom: 0.25rem;
}

.wizard-location-coords {
  font-size: 0.8125rem;
  color: hsl(220, 9%, 46%);
}

/* Form Actions */
.wizard-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
  padding-top: 2rem;
}

.wizard-btn {
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

.wizard-btn-secondary {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  color: hsl(220, 9%, 46%);
}

.wizard-btn-secondary:hover {
  background: hsl(220, 13%, 98%);
  border-color: hsl(220, 13%, 85%);
}

.wizard-btn-primary {
  background: var(--k-primary);
  color: white;
}

.wizard-btn-primary:hover {
  background: var(--k-secondary);
  color: white;
}

/* Back Link - Secondary Button Style */
.wizard-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(220, 9%, 46%);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  cursor: pointer;
}

.wizard-back-link i {
  font-size: 1.125rem;
  transition: transform 0.2s ease;
}

.wizard-back-link:hover {
  background: var(--k-secondary);
  border-color: var(--k-secondary);
  color: white;
}

.wizard-back-link:hover i {
  transform: translateX(-2px);
  color: white;
}

/* ===================================================================
   PHOTO CAPTURE STYLES (Step 2)
   =================================================================== */
/* Photo Capture Header */
.photo-capture-header {
  margin-bottom: 2rem;
}

.photo-counter-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: hsl(220, 13%, 96%);
  border-radius: 2rem;
  margin-bottom: 1rem;
  border: 1px solid hsl(220, 13%, 90%);
}

.photo-counter-icon {
  display: none;
}

.photo-counter-content {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  color: hsl(220, 9%, 15%);
}

.photo-counter-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
}

.photo-counter-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: hsl(220, 9%, 15%);
}

/* Progress Bar */
.photo-progress-bar {
  height: 6px;
  background: hsl(220, 13%, 92%);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.photo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--k-primary) 0%, var(--k-secondary) 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(20, 112, 56, 0.3);
}

.capture-instruction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: hsl(220, 9%, 55%);
  margin: 0;
}

.capture-instruction i {
  font-size: 1.125rem;
}

/* Car Diagram Container */
.car-diagram-container {
  margin: 0 0 2rem;
  padding: 2.5rem 2rem 3rem 2rem;
  background: white;
  border-radius: 1rem;
  border: 1px solid hsl(220, 13%, 91%);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  max-width: 100%;
}

/* Photo Capture Modal */
.photo-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.photo-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.photo-modal-content {
  position: relative;
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.photo-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: hsl(220, 13%, 96%);
  color: hsl(220, 9%, 46%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.photo-modal-close:hover {
  background: hsl(220, 13%, 91%);
  color: hsl(220, 9%, 26%);
}

.photo-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin: 0 0 1.5rem 0;
}

.photo-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: hsl(220, 13%, 96%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-modal-icon i {
  font-size: 2rem;
  color: hsl(220, 9%, 46%);
}

.photo-modal-text {
  color: hsl(220, 9%, 46%);
  margin: 0 0 1.5rem 0;
  font-size: 0.9375rem;
}

.photo-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.photo-modal-btn {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.photo-modal-btn i {
  font-size: 1.125rem;
}

.photo-modal-btn-primary {
  background: var(--k-primary);
  color: white;
}

.photo-modal-btn-primary:hover {
  background: var(--k-secondary);
  color: white;
}

.photo-modal-btn-secondary {
  background: white;
  color: hsl(220, 9%, 46%);
  border: 1px solid hsl(220, 13%, 91%);
}

.photo-modal-btn-secondary:hover {
  background: hsl(220, 13%, 98%);
  border-color: hsl(220, 13%, 85%);
}

/* Mobile fixes for photo modal buttons */
@media (max-width: 768px) {
  .photo-modal-content,
  .photo-preview-content {
    padding: 1.5rem 1rem !important;
    border-radius: 1.25rem !important;
  }
  .photo-modal-btn {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .photo-modal-btn i {
    font-size: 1rem;
  }
  .photo-modal-actions {
    gap: 0.5rem;
  }
  .photo-preview-loader {
    min-height: 200px;
  }
  .photo-loader-spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
  }
  .photo-loader-text {
    font-size: 0.8125rem;
  }
  .photo-preview-image-container {
    margin: 1rem 0 1.25rem 0 !important;
  }
  .photo-preview-image-container img {
    max-height: 200px !important;
  }
}
/* Photo Preview Modal */
.photo-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.photo-preview-content {
  position: relative;
  background: white;
  border-radius: 1.5rem;
  padding: 2.5rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
  text-align: center;
  animation: modalSlideIn 0.3s ease;
}

.photo-preview-image-container {
  margin: 1.25rem 0 1.5rem 0;
}

.photo-preview-image-frame {
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.photo-preview-image-container img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 280px;
  object-fit: cover;
  border-radius: 0.75rem;
}

.photo-preview-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 1rem;
}

.photo-loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: var(--k-secondary);
  border-radius: 50%;
  animation: photoSpinner 0.8s linear infinite;
}

@keyframes photoSpinner {
  to {
    transform: rotate(360deg);
  }
}
.photo-loader-text {
  font-size: 0.9375rem;
  color: #64748b;
  font-weight: 500;
  margin: 0;
}

/* Success Icon - lighter, more modern treatment */
.photo-success-icon {
  background: rgba(60, 155, 115, 0.1) !important;
  width: 72px !important;
  height: 72px !important;
}

.photo-success-icon i {
  font-size: 3rem !important;
  color: var(--k-secondary) !important;
}

/* Bolder title for preview modal */
.photo-preview-content .photo-modal-title {
  font-weight: 800;
  color: #0f172a;
}

/* Orientation Labels */
.car-orientation-label {
  text-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.car-orientation-top {
  margin-bottom: -2.75rem;
}

.car-orientation-label span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: hsl(220, 9%, 55%);
  text-transform: uppercase;
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: hsl(220, 13%, 96%);
  border-radius: 0.25rem;
}

.car-orientation-bottom {
  margin-top: -2.75rem;
}

.car-orientation-left,
.car-orientation-right {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-90deg);
}

.car-orientation-left {
  margin-right: -6.5rem;
}

.car-orientation-right {
  margin-left: -6.5rem;
  transform: rotate(90deg);
}

/* Wrapper for car with side labels */
.car-diagram-with-sides {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Car Diagram */
.car-diagram {
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 0 0;
  padding: 1.5rem 0.5rem;
}

.car-diagram-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.03));
}

/* Car Zones (Clickable areas) */
.car-zone {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid hsl(220, 13%, 86%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.car-zone:hover {
  border-color: var(--k-primary);
}

.car-zone i {
  display: none;
}

.car-zone.captured {
  background: white;
  border-color: var(--k-primary);
  animation: captureSuccess 0.4s ease;
}

.car-zone.captured i {
  display: flex;
  color: var(--k-primary);
  font-size: 0.75rem;
}

@keyframes captureSuccess {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* Zone Positions - Professional Car Illustration (15 zones) */
/* Front Row (3 zones) - On hood/front bumper */
.car-zone-front-left {
  top: 21%;
  left: 31%;
}

.car-zone-front-center {
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
}

.car-zone-front-right {
  top: 21%;
  right: 31%;
}

/* Left Side - Driver side */
.car-zone-left-middle {
  top: 52%;
  left: 29%;
}

/* Right Side - Passenger side */
.car-zone-right-middle {
  top: 52%;
  right: 29%;
}

/* Interior (3 zones) - Center cabin/roof area */
.car-zone-dashboard {
  top: 33%;
  left: 50%;
  transform: translateX(-50%);
}

.car-zone-front-interior {
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
}

.car-zone-rear-interior {
  top: 63%;
  left: 50%;
  transform: translateX(-50%);
}

/* Rear Row (3 zones) - On trunk/rear bumper */
.car-zone-rear-left {
  bottom: 19%;
  left: 31%;
}

.car-zone-rear-center {
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
}

.car-zone-rear-right {
  bottom: 19%;
  right: 31%;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .inspection-wizard-container {
    padding: 1rem;
  }
  .wizard-header {
    margin-bottom: 1.5rem;
  }
  .wizard-brand-text {
    display: none;
  }
  .wizard-progress {
    padding: 1.25rem 1rem;
  }
  .wizard-progress-steps {
    gap: 0.25rem;
  }
  .wizard-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    text-align: center;
  }
  .wizard-progress-circle {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
    flex-shrink: 0;
  }
  .wizard-progress-label {
    font-size: 0.6875rem;
    white-space: nowrap;
    line-height: 1.2;
    max-width: 70px;
  }
  .wizard-progress-connector {
    width: 30px;
    margin-bottom: 1.25rem;
  }
  .wizard-form-card {
    padding: 1.75rem 1.5rem;
  }
  .wizard-form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .wizard-form-actions {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .wizard-back-link,
  .wizard-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }
  /* Adjust car zone positioning for mobile to prevent overlap */
  .car-zone-front-left {
    top: 24% !important;
    left: 30% !important;
  }
  .car-zone-front-center {
    top: 17% !important;
  }
  .car-zone-front-right {
    top: 24% !important;
    right: 30% !important;
  }
  .car-zone-left-middle {
    top: 50% !important;
    left: 29% !important;
  }
  .car-zone-right-middle {
    top: 50% !important;
    right: 29% !important;
  }
  .car-zone-rear-left {
    bottom: 21% !important;
    left: 30% !important;
  }
  .car-zone-rear-center {
    bottom: 17% !important;
  }
  .car-zone-rear-right {
    bottom: 21% !important;
    right: 30% !important;
  }
  .photo-counter-card {
    padding: 0.5rem 1rem;
  }
  .photo-counter-label,
  .photo-counter-value {
    font-size: 0.8125rem;
  }
  .capture-instruction {
    font-size: 0.75rem;
  }
  .capture-instruction i {
    font-size: 0.875rem;
  }
  .photo-capture-with-sidebar {
    display: block;
  }
  .photo-capture-main {
    width: 100%;
  }
  .critical-angles-tracker {
    width: 100%;
    position: static;
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  }
  .critical-angles-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
  }
  .critical-angles-header i {
    font-size: 1rem;
    color: #64748b;
  }
  .critical-angles-header span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
  }
  /* 2-row grid showing all 8 angles */
  .critical-angles-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 angles per row */
    gap: 0.5rem !important;
    padding: 0 !important;
    flex-direction: row !important; /* Override any flex */
  }
  .critical-angle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .critical-angle-item.captured {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #16a34a;
  }
  .critical-angle-item.recommended {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #d97706;
    animation: pulse-mobile 2s ease-in-out infinite;
  }
  @keyframes pulse-mobile {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
    }
  }
  .critical-angle-name {
    font-size: 0.625rem;
    line-height: 1.2;
  }
  .car-diagram-container {
    padding: 1rem 0.5rem 2rem 0.5rem;
  }
  .car-diagram {
    width: 100%;
    max-width: 500px;
    padding: 2.5rem 0.5rem;
    margin: 0 auto;
    transform: scale(1.1);
  }
  .car-zone {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
  }
  .car-zone i {
    font-size: 0.75rem;
  }
  .car-zone.captured i {
    font-size: 0.5rem;
  }
  .car-orientation-top {
    margin-bottom: -1.5rem;
  }
  .car-orientation-bottom {
    margin-top: -1.5rem;
  }
  .car-orientation-left {
    margin-right: -4rem;
  }
  .car-orientation-right {
    margin-left: -4rem;
  }
}
/* ===== CUSTOM BADGE STYLES ===== */
/* Draft badge - blue theme */
.badge.badge-secondary {
  color: #1e40af !important;
  background-color: #dbeafe !important;
  border: none !important;
}

/* Completed badge - green theme */
.badge.badge-success {
  color: #047857 !important;
  background-color: #ecfdf5 !important;
  border: none !important;
}

/* In Progress badge - amber theme */
.badge.badge-info {
  color: #b45309 !important;
  background-color: #fffbeb !important;
  border: none !important;
}

/* Cancelled badge - red theme */
.badge.badge-danger {
  color: #b91c1c !important;
  background-color: #fef2f2 !important;
  border: none !important;
}

/* ===== SEVERITY BADGES ===== */
/* No Damage / Draft badge */
.badge-severity-none {
  background-color: transparent !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0 !important;
}

/* Minor Damage badge */
.badge-severity-minor {
  background-color: transparent !important;
  color: #ca8a04 !important;
  border: 1px solid #fde047 !important;
}

/* Moderate Damage badge */
.badge-severity-moderate {
  background-color: transparent !important;
  color: #ea580c !important;
  border: 1px solid #fdba74 !important;
}

/* Major Damage badge */
.badge-severity-major {
  background-color: transparent !important;
  color: #dc2626 !important;
  border: 1px solid #fca5a5 !important;
}

.badge-severity-severe {
  background-color: transparent !important;
  color: #991b1b !important;
  border: 1px solid #991b1b !important;
  font-weight: 600 !important;
}

/* Add more padding to all badges for better spacing */
.badge {
  padding: 0.375rem 0.75rem !important;
}

/* Inspection badges - ensure consistent padding */
.inspection-badges .badge,
.inspection-card-badges .badge,
.badge-type,
.badge-type-regular,
.badge-type-pre,
.badge-type-post,
.badge-type-damage {
  padding: 0.375rem 0.75rem !important;
}

/* Infinite Scroll Loader */
.spinner-border {
  width: 2rem;
  height: 2rem;
  border-width: 0.25em;
}

.spinner-border.text-primary {
  color: var(--k-primary) !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Filter Loading Overlay */
.filter-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}

.filter-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.filter-loading-spinner .spinner {
  width: 3rem;
  height: 3rem;
  border: 4px solid rgba(0, 98, 66, 0.2);
  border-radius: 50%;
  border-top-color: #006242;
  animation: spin 0.8s linear infinite;
}

.filter-loading-spinner span {
  color: #006242;
  font-weight: 500;
  font-size: 0.875rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Skeleton Loading Styles */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skeleton-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.skeleton-avatar {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  flex-shrink: 0;
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-title {
  height: 20px;
  width: 70%;
}

.skeleton-text {
  height: 16px;
  width: 50%;
}

.skeleton-text-full {
  height: 16px;
  width: 100%;
}

.skeleton-badge {
  height: 24px;
  width: 80px;
  border-radius: 12px;
}

.skeleton-footer {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.skeleton-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* Skeleton Grid */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* Hide skeleton when not loading */
.skeleton-wrapper {
  display: none;
}

.skeleton-wrapper.loading {
  display: block;
}

/* ============================================
   STEP 3: AI ANALYSIS SCREEN STYLES
   Matches existing wizard theme
   ============================================ */
/* AI Icon Animation */
.wizard-form-icon.ai-icon {
  background: white !important;
  animation: pulseGlow 2s ease-in-out infinite;
  width: 70px;
  height: 70px;
}

.wizard-form-icon.ai-icon i {
  color: white !important;
  font-size: 1.75rem;
}

.wizard-form-icon.ai-icon .brain-svg {
  width: 3.5rem;
  height: 3.5rem;
  color: #006242 !important;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(20, 112, 56, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(20, 112, 56, 0.5);
  }
}
/* Processing Screen */
.ai-processing-screen {
  text-align: center;
  padding: 2rem 0;
}

.ai-progress-container {
  max-width: 500px;
  margin: 3rem auto;
}

.ai-progress-spinner {
  margin-bottom: 2rem;
}

.ai-progress-spinner .spinner {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border: 4px solid hsl(220, 13%, 91%);
  border-top: 4px solid var(--k-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ai-progress-status {
  margin-bottom: 2rem;
}

.ai-progress-status .status-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
  margin-bottom: 0.5rem;
}

.status-subtext {
  font-size: 0.938rem;
  color: hsl(220, 9%, 46%);
}

/* Progress Bar */
.ai-progress-bar-container {
  margin-top: 2rem;
}

.ai-progress-bar {
  height: 8px;
  background: hsl(220, 13%, 91%);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.ai-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--k-primary), hsl(145, 63%, 49%));
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.ai-progress-percent {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--k-primary);
}

/* Processing Steps */
.ai-processing-steps {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(220, 13%, 91%);
}

.processing-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.processing-step.active {
  opacity: 1;
}

.processing-step.completed {
  opacity: 1;
}

.processing-step .step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: hsl(220, 13%, 91%);
  color: hsl(220, 9%, 46%);
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.processing-step.active .step-icon {
  background: var(--k-primary);
  color: white;
  animation: pulse 2s ease-in-out infinite;
}

.processing-step.completed .step-icon {
  background: var(--k-primary);
  color: white;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.processing-step .step-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 46%);
}

.processing-step.active .step-label {
  color: var(--k-primary);
  font-weight: 600;
}

/* Results Screen */
.ai-results-screen {
  padding-bottom: 2rem;
}

.ai-results-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.result-summary-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 12px;
}

.summary-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.5rem;
}

.summary-icon.success {
  background: hsl(145, 80%, 95%);
  color: var(--k-primary);
}

.summary-icon.warning {
  background: hsl(38, 92%, 95%);
  color: hsl(38, 92%, 50%);
}

.summary-icon.info {
  background: hsl(217, 91%, 95%);
  color: hsl(217, 91%, 60%);
}

.summary-content h4 {
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(220, 9%, 15%);
  margin: 0;
}

.summary-content p {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin: 0;
}

.summary-content small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: hsl(220, 9%, 46%);
  line-height: 1.2;
}

/* Damage Assessments */
.ai-damage-assessments {
  margin-top: 2rem;
}

.damage-section {
  margin-bottom: 2rem;
}

.damage-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(220, 13%, 15%);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--k-primary);
}

/* Assessment Summary Section */
.assessment-summary-section {
  background: hsl(145, 63%, 97%);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  border: 1px solid hsl(145, 63%, 90%);
}

.summary-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(220, 13%, 15%);
  margin: 0 0 1.5rem 0;
}
.summary-title i {
  font-size: 1.25rem;
  color: var(--k-primary);
}

.summary-stats-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 2rem;
}

@media (max-width: 768px) {
  .summary-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.stat-number.minor {
  color: #ca8a04; /* Match badge-severity-minor */
}

.stat-number.moderate {
  color: #ea580c; /* Match badge-severity-moderate */
}

.stat-number.major {
  color: #dc2626; /* Match badge-severity-major */
}

.stat-number.severe {
  color: #991b1b; /* Match badge-severity-severe */
}

.stat-label {
  font-size: 0.75rem;
  color: hsl(220, 9%, 46%);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.recommendation-text {
  font-size: 0.9375rem;
  color: hsl(220, 13%, 15%);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid hsl(145, 63%, 90%);
}
.recommendation-text strong {
  color: hsl(220, 13%, 15%);
}

/* Inspector Notes Section */
.inspector-notes-section {
  margin: 2rem 0;
}

.notes-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(220, 13%, 15%);
  margin: 0 0 1rem 0;
}
.notes-title i {
  font-size: 1.25rem;
  color: hsl(220, 9%, 46%);
}

.notes-textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-family: inherit;
  resize: vertical;
  transition: all 0.2s ease;
}
.notes-textarea:focus {
  outline: none;
  border-color: var(--k-primary);
  box-shadow: 0 0 0 3px rgba(var(--k-primary-rgb), 0.1);
}
.notes-textarea::placeholder {
  color: hsl(220, 9%, 66%);
}

.damage-photo-group,
.damage-part-group {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.photo-group-header,
.part-group-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid hsl(220, 13%, 91%);
}

.part-info {
  flex: 1;
}

.part-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
  margin: 0 0 0.25rem 0;
}

.part-severity-text {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin: 0;
}

.part-severity-badge {
  flex-shrink: 0;
}

.photo-preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.photo-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-gallery {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.photo-info {
  flex: 1;
}

.photo-category {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
  margin: 0 0 0.5rem 0;
}

.photo-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.confidence-text {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
}

/* Damages List (Step 3 - AI Analysis Results) */
.damages-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.damages-list .damage-item {
  background: hsl(220, 13%, 98%);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.2s ease;
  /* Mobile: More compact damage cards */
}
@media (max-width: 768px) {
  .damages-list .damage-item {
    padding: 0.75rem;
    border-radius: 6px;
  }
}

.damage-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.damage-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: white;
  color: var(--k-primary);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.damage-main {
  flex: 1;
}

.damage-type {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
  margin: 0 0 0.25rem 0;
}

.damage-description {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin: 0;
}

.damage-severity {
  flex-shrink: 0;
}

.severity-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: capitalize;
  border: 1px solid;
}

.severity-badge.severity-minor {
  background-color: transparent;
  color: #ca8a04;
  border-color: #fde047;
}

.severity-badge.severity-moderate {
  background-color: transparent;
  color: #ea580c;
  border-color: #fdba74;
}

.severity-badge.severity-major {
  background-color: transparent;
  color: #dc2626;
  border-color: #fca5a5;
}

.severity-badge.severity-severe {
  background-color: transparent;
  color: #991b1b;
  border-color: #991b1b;
  font-weight: 600;
}

.severity-badge.severity-false_positive {
  background-color: transparent;
  color: hsl(220, 9%, 46%);
  border-color: hsl(220, 13%, 85%);
}

/* Damage Details */
.damage-details {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid hsl(220, 13%, 91%);
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 46%);
}

.detail-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
}

/* Override Controls */
.damage-override {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 0;
  background: hsl(220, 13%, 98%);
  border-radius: 8px;
}

.override-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 46%);
  white-space: nowrap;
}

/* Mobile-specific layout for override controls */
@media (max-width: 768px) {
  .damage-override {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
  }
  .override-label {
    font-size: 0.8125rem;
    margin-bottom: 0;
  }
}
.override-select {
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 2px solid hsl(220, 13%, 91%);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: hsl(220, 9%, 15%);
  background: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  cursor: pointer;
  min-width: 150px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.2s ease;
}

.override-select:hover {
  border-color: var(--k-primary);
  background-color: hsl(220, 13%, 98%);
}

.override-select:focus {
  outline: none;
  border-color: var(--k-primary);
  box-shadow: 0 0 0 3px rgba(var(--k-primary-rgb), 0.1);
  background-color: white;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
  .override-select {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 0.875rem;
    font-size: 0.9375rem;
    min-height: 44px; /* Better touch target */
    border-width: 1.5px;
  }
}
.override-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: hsl(220, 13%, 95%);
  color: hsl(220, 9%, 46%);
}

/* No Damages Card */
.no-damages-card {
  text-align: center;
  padding: 3rem 2rem;
  background: hsl(145, 80%, 98%);
  border: 1px solid hsl(145, 63%, 85%);
  border-radius: 12px;
}

.no-damages-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: white;
  color: var(--k-primary);
  font-size: 2.5rem;
}

.no-damages-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(220, 9%, 15%);
  margin: 0 0 0.5rem 0;
}

.no-damages-card p {
  font-size: 1rem;
  color: hsl(220, 9%, 46%);
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .ai-results-summary {
    grid-template-columns: 1fr;
  }
  .ai-processing-steps {
    gap: 1.5rem;
  }
  .processing-step .step-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  .photo-group-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .damage-header {
    flex-direction: column;
  }
  .damage-details {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
  }
  .damage-header {
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .damage-icon {
    width: 36px;
    height: 36px;
  }
  .part-group-header {
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    flex-wrap: wrap;
  }
  .photo-gallery {
    width: 100%;
    order: -1;
    margin-bottom: 0.75rem;
  }
  .damage-part-group {
    margin-bottom: 1.25rem;
  }
}
/* ===================================================================
   PHOTO CAPTURE GUIDE & CRITICAL ANGLES
   =================================================================== */
/* Photo Guide Section */
.photo-guide-section {
  margin-bottom: 2rem;
  background: white;
  border-radius: 1rem;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
}

.photo-guide-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--k-primary) 0%, #005234 100%);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 600;
}

.photo-guide-toggle:hover {
  background: linear-gradient(135deg, #005234 0%, var(--k-primary) 100%);
}

.photo-guide-toggle i:first-child {
  font-size: 1.5rem;
  margin-right: 0.75rem;
}

.photo-guide-toggle span {
  flex: 1;
  text-align: left;
}

.photo-guide-toggle i:last-child {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.photo-guide-toggle.active {
  border-radius: 1rem 1rem 0 0;
}

.photo-guide-toggle:not(.active) {
  border-radius: 1rem;
}

.photo-guide-toggle.active i:last-child {
  transform: rotate(180deg);
}

/* First-time tooltip */
.photo-guide-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  z-index: 1000;
  animation: tooltipFadeIn 0.5s ease-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.photo-guide-tooltip-content {
  position: relative;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  min-width: 280px;
  max-width: 320px;
}

.photo-guide-tooltip-arrow {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #e2e8f0;
}

.photo-guide-tooltip-arrow::after {
  content: "";
  position: absolute;
  top: 2px;
  left: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
}

.photo-guide-tooltip-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.photo-guide-tooltip-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.photo-guide-tooltip-icon {
  text-align: center;
  margin-bottom: 0.75rem;
}

.photo-guide-tooltip-icon i {
  font-size: 2rem;
  color: var(--k-primary);
  animation: tooltipPulse 2s ease-in-out infinite;
}

@keyframes tooltipPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.photo-guide-tooltip-text {
  margin: 0;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
}

.photo-guide-tooltip-text strong {
  color: #1e293b;
  font-weight: 600;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .photo-guide-tooltip-content {
    min-width: 240px;
    max-width: 280px;
    padding: 1rem 1.25rem;
  }
  .photo-guide-tooltip-text {
    font-size: 0.875rem;
  }
}
.photo-guide-content {
  padding: 1.5rem;
  background: hsl(220, 13%, 98%);
  border-radius: 0 0 1rem 1rem;
}

.photo-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.photo-guide-item {
  background: white;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.photo-guide-item:hover {
  /* No hover effect */
}

.photo-guide-example {
  margin-bottom: 1rem;
  position: relative;
  border-radius: 8px;
  border: 2px solid hsl(220, 13%, 91%);
}

.photo-guide-image-wrapper {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-guide-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.photo-guide-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.photo-guide-text {
  color: hsl(220, 9%, 30%);
}

.photo-guide-text strong {
  display: block;
  margin-bottom: 0.5rem;
  color: hsl(220, 9%, 15%);
  font-size: 0.9375rem;
}

.photo-guide-text p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.photo-guide-tips {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid hsl(220, 13%, 91%);
}

.photo-guide-tips-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  color: #1e293b;
  font-size: 1rem;
  font-weight: 600;
}

.photo-guide-tips-header i {
  color: var(--k-primary);
  font-size: 1.25rem;
}

.photo-guide-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .photo-guide-tips-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }
}
.photo-tip-card {
  display: flex;
  gap: 0.875rem;
  padding: 1rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.photo-tip-card:hover {
  /* No hover effect */
}

.photo-tip-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.photo-tip-icon-lighting {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #b45309;
}

.photo-tip-icon-vehicle {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
}

.photo-tip-icon-coverage {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  color: #be185d;
}

.photo-tip-icon-height {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #c2410c;
}

.photo-tip-icon-lens {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4338ca;
}

.photo-tip-icon-steady {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #15803d;
}

.photo-tip-content h5 {
  margin: 0 0 0.25rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
}

.photo-tip-content p {
  margin: 0;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.4;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .photo-guide-tips-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .photo-tip-card {
    padding: 0.875rem;
  }
  .photo-tip-icon {
    width: 36px;
    height: 36px;
    font-size: 1.125rem;
  }
}
/* Critical Angles Tracker - Desktop */
@media (min-width: 769px) {
  .photo-capture-with-sidebar {
    display: block;
  }
  .photo-capture-main {
    width: 100%;
  }
  .critical-angles-tracker {
    width: 100%;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  }
  .critical-angles-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #475569;
  }
  .critical-angles-header i {
    font-size: 1rem;
    color: #64748b;
  }
  .critical-angles-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.75rem;
  }
  .critical-angle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 0.5rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .critical-angle-item:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
  }
  .critical-angle-item.captured {
    background: #dcfce7;
    border-color: #16a34a;
    color: #15803d;
  }
  .critical-angle-item.recommended {
    background: #fef3c7;
    border-color: #f59e0b;
    animation: pulse-border 2s ease-in-out infinite;
  }
  .critical-angle-name {
    font-size: 0.6875rem;
    line-height: 1.2;
  }
}
/* Capture instruction with smart suggestions */
.capture-instruction {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  color: #64748b;
  font-weight: 500;
  justify-content: center;
}

.capture-instruction i {
  font-size: 1.125rem;
  color: #64748b;
  flex-shrink: 0;
}

.capture-instruction.suggestion {
  background: transparent;
  border: none;
  color: #92400e;
  font-weight: 600;
}

.capture-instruction.suggestion i {
  color: #f59e0b;
  animation: none;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
/* Car zone highlighting for next suggested angle */
.car-zone.suggested {
  animation: pulse-zone 2s ease-in-out infinite;
}

@keyframes pulse-zone {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    transform: scale(1.05);
  }
}
/* ============================================
   PHOTO REVIEW SCREEN (Step 3 - Before AI)
   ============================================ */
.photo-review-screen {
  padding: 0;
}

/* Critical Angles Summary Box - Modern SaaS Style */
.critical-angles-summary {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9e7 100%);
  border: 1px solid #fde68a;
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(245, 158, 11, 0.08);
}

.critical-angles-summary .summary-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: #92400e;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.critical-angles-summary .summary-header i {
  font-size: 1.375rem;
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.critical-angles-summary .summary-progress {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.progress-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  font-weight: 800;
  flex-shrink: 0;
  position: relative;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.progress-circle.complete {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border: 4px solid #16a34a;
  color: #15803d;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

.progress-circle.incomplete {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 4px solid #f59e0b;
  color: #92400e;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.progress-fraction {
  position: relative;
  z-index: 2;
}

.progress-fraction {
  font-variant-numeric: tabular-nums;
}

.progress-details {
  flex: 1;
}

.progress-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 0 0.5rem 0;
}

.progress-status.success {
  color: #15803d;
}

.progress-status.success i {
  color: #16a34a;
  font-size: 1.5rem;
}

.progress-status.warning {
  color: #92400e;
}

.progress-status.warning i {
  color: #f59e0b;
  font-size: 1.5rem;
}

.missing-angles {
  margin: 0;
  color: #78350f;
  font-size: 0.875rem;
}

.missing-angles strong {
  color: #92400e;
}

.summary-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem;
  background: white;
  border-radius: 12px;
  border: 1px solid #fde68a;
  margin-top: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.summary-note i {
  color: #f59e0b;
  font-size: 1.375rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-note span {
  color: #78350f;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 500;
}

/* Photo Grid */
.photo-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .photo-review-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
.photo-review-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.photo-review-item.critical-angle {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fffbeb 0%, white 100%);
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08), 0 2px 6px rgba(245, 158, 11, 0.06);
}

.photo-review-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio */
  background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
  overflow: hidden;
}

.photo-review-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.critical-badge {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: white;
  border-radius: 24px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35), 0 4px 16px rgba(245, 158, 11, 0.2);
  backdrop-filter: blur(8px);
}

.critical-badge i {
  font-size: 1rem;
  animation: star-pulse 2s ease-in-out infinite;
}

@keyframes star-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }
}
.photo-review-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: white;
  border-top: 1px solid #e5e7eb;
}

.photo-review-label i {
  color: var(--k-primary);
  font-size: 1rem;
}

.photo-review-label span {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
}

/* Add More Photos Card */
.add-more-card {
  border: 2px dashed #d1d5db;
  background: linear-gradient(135deg, #f9fafb 0%, white 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-more-card:hover {
  border-color: var(--k-primary);
  background: linear-gradient(135deg, #ecfdf5 0%, white 100%);
}

.add-more-content {
  text-align: center;
  color: #6b7280;
  padding: 2rem;
}

.add-more-content i {
  font-size: 3rem;
  color: #9ca3af;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.add-more-card:hover .add-more-content i {
  color: var(--k-primary);
  transform: scale(1.1);
}

.add-more-content p {
  font-weight: 600;
  color: #374151;
  font-size: 1rem;
  margin: 0 0 0.25rem 0;
}

.add-more-content span {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .critical-angles-summary {
    padding: 1rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
  }
  .critical-angles-summary .summary-header {
    font-size: 0.9375rem;
    margin-bottom: 0.875rem;
  }
  .critical-angles-summary .summary-header i {
    font-size: 1.125rem;
  }
  .critical-angles-summary .summary-progress {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }
  .progress-circle {
    width: 56px;
    height: 56px;
    font-size: 1.125rem;
    border-width: 3px;
  }
  .progress-details {
    flex: 1;
  }
  .progress-status {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  .missing-angles {
    font-size: 0.8125rem;
    margin: 0;
  }
  .summary-note {
    padding: 0.875rem 1rem;
    gap: 0.75rem;
    margin-top: 0.75rem;
    border-radius: 10px;
  }
  .summary-note i {
    font-size: 1.125rem;
  }
  .summary-note span {
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  .photo-review-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
}
/* ========================================================================
   COMPARISON VIEW
   ======================================================================== */
.comparison-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  .comparison-container {
    padding: 1rem;
  }
}

.comparison-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}
.comparison-header .page-title {
  margin: 0;
}

.comparison-actions .icon-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--k-primary);
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
}
.comparison-actions .icon-button:hover {
  background: var(--k-secondary);
}

.comparison-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Reuse existing .inspection-main-card style for comparison info cards */
.comparison-info-card {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: hsl(220, 13%, 98%);
  border-bottom: 1px solid hsl(220, 13%, 91%);
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.info-card-header i {
  font-size: 1rem;
}

.info-card-body {
  padding: 1rem;
}

.info-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 0.5rem;
}

.info-card-detail {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin-bottom: 0.25rem;
}
.info-card-detail:last-child {
  margin-bottom: 0;
}

.comparison-section {
  margin-bottom: 2rem;
}

.damage-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.damage-overview-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.damage-overview-new {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.03) 0%, rgba(239, 68, 68, 0.01) 100%);
}

.damage-overview-existing {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.03) 0%, rgba(245, 158, 11, 0.01) 100%);
}

.damage-overview-resolved {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, rgba(34, 197, 94, 0.01) 100%);
}

.damage-overview-cost {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(59, 130, 246, 0.01) 100%);
}

.damage-overview-icon {
  font-size: 1.5rem;
}
.damage-overview-new .damage-overview-icon {
  color: hsl(0, 84%, 60%);
}
.damage-overview-existing .damage-overview-icon {
  color: hsl(45, 93%, 47%);
}
.damage-overview-resolved .damage-overview-icon {
  color: hsl(142, 72%, 29%);
}
.damage-overview-cost .damage-overview-icon {
  color: hsl(217, 91%, 60%);
}

.damage-overview-content {
  flex: 1;
}

.damage-overview-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.damage-overview-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(220, 9%, 20%);
}

.comparison-tabs-container {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.75rem;
  overflow: hidden;
}
.comparison-tabs-container .tab-content {
  display: none;
  padding: 1.5rem;
}
.comparison-tabs-container .tab-content.active {
  display: block;
}

.visual-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 1.5rem;
}

.visual-comparison-column h4 {
  margin-bottom: 1rem;
}
.visual-comparison-column .photos-grid {
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
}

.visual-comparison-title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 1rem;
}

.damage-analysis-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 1.5rem;
}

.damage-analysis-column h4 {
  margin-bottom: 1rem;
}

.damage-analysis-title {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin-bottom: 1rem;
}

.damage-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.damage-list .damage-item {
  padding: 1rem;
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  border-left: 3px solid;
}
.damage-list .damage-item-existing {
  border-left-color: hsl(45, 93%, 47%);
}
.damage-list .damage-item-new {
  border-left-color: hsl(0, 84%, 60%);
}
.damage-list .damage-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.damage-list .damage-item-type {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
}
.damage-list .damage-item-description {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin-bottom: 0.25rem;
}
.damage-list .damage-item-location {
  font-size: 0.75rem;
  color: hsl(220, 9%, 60%);
}

.empty-state-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: hsl(220, 9%, 60%);
}
.empty-state-small i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: hsl(142, 72%, 29%);
}
.empty-state-small p {
  font-size: 0.875rem;
}

.timeline {
  padding: 1.5rem;
}

.timeline-item {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2rem;
  position: relative;
}
.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  width: 2px;
  height: calc(100% - 24px);
  background: hsl(220, 13%, 91%);
}
.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid;
  background: white;
  flex-shrink: 0;
}

.timeline-marker-start {
  border-color: var(--k-primary);
}

.timeline-marker-end {
  border-color: hsl(220, 9%, 46%);
}

.timeline-content {
  flex: 1;
  padding-top: 0.125rem;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.timeline-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  margin: 0;
}

.timeline-date {
  font-size: 0.875rem;
  color: hsl(220, 9%, 60%);
}

.timeline-details {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  margin-bottom: 0.75rem;
}

.timeline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--k-primary);
  text-decoration: none;
  font-weight: 500;
}
.timeline-link:hover {
  color: var(--k-secondary);
  text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .comparison-container {
    max-width: 510px;
  }
  .comparison-header {
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
  }
  .comparison-header .page-title {
    font-size: 1.125rem;
    flex: 1;
    min-width: 0;
  }
  .comparison-info-grid {
    grid-template-columns: 1fr;
  }
  .visual-comparison-grid,
  .damage-analysis-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0;
  }
  .visual-comparison-title {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
    padding: 0 1rem;
  }
  .visual-comparison-column .photos-grid {
    grid-template-columns: 1fr;
  }
  .damage-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ============================================
   VIN SCANNER STYLES
   ============================================ */
/* VIN field with simple scan icon */
.vin-field-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.vin-field-group .form-control {
  flex: 1;
}

.vin-scan-icon-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding: 0.25rem;
}

.vin-scan-icon-btn:hover {
  color: #006242;
  transform: scale(1.1);
}

.vin-scan-icon-btn:active {
  transform: scale(1);
}

/* VIN Processing Modal Styles */
.vin-loader-spinner {
  width: 60px;
  height: 60px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--k-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.vin-processing-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 0 1rem;
}

.vin-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  color: #64748b;
  font-weight: 500;
  transition: all 0.3s ease;
}

.vin-step i {
  font-size: 1.25rem;
  color: #cbd5e1;
  transition: all 0.3s ease;
}

.vin-step i.ti-loader {
  color: var(--k-primary);
  animation: spin 0.8s linear infinite;
}

.vin-step.active {
  color: #1e293b;
}

.vin-step.active i {
  color: var(--k-primary);
}

.vin-step-success {
  background: #f0fdf4;
  color: #475569;
  border: 1px solid #bbf7d0;
}

.vin-step-success i {
  color: var(--k-secondary);
}

.vin-step-error {
  color: #dc2626;
}

.vin-step-error i {
  color: #dc2626;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vin-processing-steps {
    max-width: 100%;
  }
  .vin-scan-icon-btn {
    font-size: 1.375rem;
  }
}
/* VIN Scanner Modal - Clean Minimal Design */
.photo-modal-content {
  position: relative;
  background: white;
  border-radius: 1.5rem;
  max-width: 420px;
  width: 90%;
  padding: 2.5rem 2.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: modalSlideIn 0.3s ease;
}

/* Close Button - Top Right */
.photo-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  padding: 0;
}

.photo-modal-close:hover {
  background: #f1f5f9;
  color: #334155;
}

/* Large Scan Icon */
.photo-modal-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, #006242 0%, #00794f 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Remove background when containing spinner */
.photo-modal-icon:has(.vin-loader-spinner) {
  background: none;
  border-radius: 0;
}

.photo-modal-icon i {
  font-size: 2.75rem;
  color: white;
}

/* Title */
.photo-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.75rem 0;
}

/* Description Text */
.photo-modal-text {
  font-size: 0.9375rem;
  color: #64748b;
  margin: 0 0 2rem 0;
  line-height: 1.5;
}

/* Action Buttons */
.photo-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.photo-modal-btn {
  width: 100%;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.photo-modal-btn-primary {
  background: var(--k-primary);
  color: white;
}

.photo-modal-btn-primary:hover {
  background: var(--k-secondary);
}

.photo-modal-btn-secondary {
  background: white;
  color: #475569;
  border: 1.5px solid #e2e8f0;
  font-weight: 500;
}

.photo-modal-btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

.photo-modal-btn i {
  font-size: 1.25rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .photo-modal-content {
    width: 92%;
    padding: 2rem 1.75rem;
    border-radius: 1.25rem;
  }
  /* Larger close button for easier thumb tapping */
  .photo-modal-close {
    width: 44px;
    height: 44px;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1.625rem;
  }
  .photo-modal-icon {
    width: 85px;
    height: 85px;
    margin-bottom: 1rem;
  }
  .photo-modal-icon i {
    font-size: 2.5rem;
  }
  .photo-modal-title {
    font-size: 1.375rem;
  }
  .photo-modal-text {
    font-size: 0.875rem;
  }
  /* Ensure buttons meet 48px minimum touch target */
  .photo-modal-btn {
    padding: 0.9375rem 1.25rem;
    font-size: 0.9375rem;
  }
}
/* Very small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
  .photo-modal-content {
    width: 95%;
    padding: 1.75rem 1.5rem;
  }
  .photo-modal-icon {
    width: 75px;
    height: 75px;
  }
  .photo-modal-icon i {
    font-size: 2.25rem;
  }
  .photo-modal-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  .photo-modal-text {
    font-size: 0.8125rem;
    margin-bottom: 1.5rem;
  }
}
/* Wizard Button Wrapper */
.wizard-btn-wrapper {
  position: relative;
  display: inline-block;
}

.wizard-btn.disabled {
  cursor: not-allowed;
  transition: opacity 0.2s ease;
}

/* ==== Photo Zoom Modal ==== */
.photo-zoom-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-zoom-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.photo-zoom-content {
  position: relative;
  max-width: 95%;
  max-height: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.photo-zoom-image {
  max-width: 100%;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.photo-zoom-close {
  position: absolute;
  top: -12px;
  right: -10px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  z-index: 10001;
}

.photo-zoom-close i {
  font-size: 24px;
  color: #333;
}

@media (max-width: 768px) {
  .photo-zoom-close {
    position: absolute;
    top: -21px;
    right: -6px;
    width: 40px;
    height: 40px;
  }
  .photo-zoom-close i {
    font-size: 22px;
  }
}
/* ========================================
   BLOCKCHAIN VERIFICATION TAB STYLES
   ======================================== */
.blockchain-status {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.blockchain-status i {
  font-size: 24px;
  margin-top: 2px;
}
.blockchain-status strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.blockchain-status p {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.blockchain-verified {
  background: linear-gradient(135deg, rgba(0, 98, 66, 0.08) 0%, rgba(60, 155, 115, 0.05) 100%);
  border-color: var(--k-secondary);
  color: var(--k-primary);
}
.blockchain-verified i {
  color: var(--k-secondary);
}

.blockchain-pending {
  background: linear-gradient(135deg, #fff3e0 0%, #fef8f1 100%);
  border-color: #ff9800;
  color: #e65100;
}
.blockchain-pending i {
  color: #ff9800;
}

.blockchain-field {
  margin-bottom: 1.75rem;
}

.blockchain-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: #555;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blockchain-value-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.blockchain-code {
  flex: 1;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.75rem;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.8rem;
  color: #333;
  word-break: break-all;
  display: block;
}

.btn-copy-small {
  background: var(--k-primary);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.btn-copy-small:hover {
  background: var(--k-secondary);
}
.btn-copy-small i {
  font-size: 16px;
}

.blockchain-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--k-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.2s ease;
}
.blockchain-link:hover {
  color: var(--k-secondary);
}
.blockchain-link i {
  font-size: 16px;
}

.blockchain-help {
  font-size: 0.825rem;
  color: #777;
  margin-top: 0.25rem;
  font-style: italic;
}

.json-container {
  background: #1e1e1e;
  border-radius: 8px;
  overflow: auto;
  border: 1px solid #333;
  max-height: 400px;
}

.json-pre {
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.json-code {
  display: block;
  padding: 1rem;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #d4d4d4;
  white-space: pre;
  word-wrap: break-word;
}

.blockchain-info-box {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 1.5rem;
}
.blockchain-info-box .info-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.blockchain-info-box .info-header i {
  font-size: 22px;
  color: var(--k-primary);
}
.blockchain-info-box .info-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}
.blockchain-info-box p {
  margin-bottom: 0.75rem;
  color: #555;
  font-size: 0.9rem;
}

.verification-list {
  margin: 0;
  padding-left: 1.5rem;
  color: #555;
}
.verification-list li {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.verification-list li:last-child {
  margin-bottom: 0;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: #555;
}
.feature-list li:last-child {
  margin-bottom: 0;
}
.feature-list li i {
  font-size: 18px;
  color: var(--k-secondary);
  margin-top: 2px;
}

.inline-code {
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0.15rem 0.4rem;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.85em;
  color: #c7254e;
}

/* Independent Verification Guide */
.blockchain-verification-guide {
  background: rgba(0, 98, 66, 0.02);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 2rem;
  transition: all 0.2s ease;
}
.blockchain-verification-guide[open] {
  background: linear-gradient(135deg, rgba(0, 98, 66, 0.03) 0%, rgba(60, 155, 115, 0.02) 100%);
  border-color: var(--k-secondary);
  border-width: 2px;
  padding: 1.5rem;
}

.verification-guide-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none; /* Remove default details marker */
  user-select: none;
  transition: opacity 0.2s ease;
}
.verification-guide-header::-webkit-details-marker {
  display: none; /* Remove default marker in webkit browsers */
}
.verification-guide-header:hover {
  opacity: 0.8;
}
.verification-guide-header i.ti-shield-lock {
  font-size: 20px;
  color: var(--k-secondary);
  flex-shrink: 0;
}
.verification-guide-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--k-primary);
  flex: 1;
}
.verification-guide-header .verification-chevron {
  font-size: 18px;
  color: #999;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* When expanded, make header more prominent */
details[open] .verification-guide-header {
  margin-bottom: 1rem;
}
details[open] .verification-guide-header i.ti-shield-lock {
  font-size: 28px;
}
details[open] .verification-guide-header h4 {
  font-size: 1.25rem;
  font-weight: 700;
}
details[open] .verification-guide-header .verification-chevron {
  color: var(--k-primary);
}

/* Rotate chevron when open */
details[open] .verification-chevron {
  transform: rotate(180deg);
}

.verification-guide-intro {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.verification-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.verification-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--k-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.step-content {
  flex: 1;
}
.step-content strong {
  display: block;
  font-size: 1rem;
  color: var(--k-primary);
  margin-bottom: 0.375rem;
}
.step-content p {
  margin: 0 0 0.5rem 0;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.5;
}
.step-content p:last-child {
  margin-bottom: 0;
}

.verify-hash-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: var(--k-primary);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 98, 66, 0.2);
  margin: 0.75rem 0;
}
.verify-hash-button:hover {
  background: var(--k-secondary);
  color: white;
  text-decoration: none;
}
.verify-hash-button:visited {
  color: white;
}
.verify-hash-button:active {
  color: white;
}
.verify-hash-button:focus {
  color: white;
  outline: 2px solid var(--k-secondary);
  outline-offset: 2px;
}
.verify-hash-button i {
  font-size: 18px;
}
.verify-hash-button i:last-child {
  font-size: 16px;
}

.verification-tools {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}
.verification-tools li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.verification-tools li:last-child {
  margin-bottom: 0;
}
.verification-tools li a {
  color: var(--k-primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.verification-tools li a:hover {
  color: var(--k-secondary);
  text-decoration: underline;
}
.verification-tools li a i {
  font-size: 14px;
}

.verification-guide-footer {
  background: rgba(255, 255, 255, 0.7);
  border-left: 4px solid var(--k-secondary);
  padding: 1rem;
  border-radius: 4px;
  display: flex;
  gap: 0.3rem;
  align-items: flex-start;
}
.verification-guide-footer i {
  font-size: 20px;
  color: var(--k-secondary);
  margin-top: 2px;
  flex-shrink: 0;
}
.verification-guide-footer p {
  margin: 0;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}
.verification-guide-footer p strong {
  color: var(--k-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .blockchain-code {
    font-size: 0.7rem;
    padding: 0.6rem;
  }
  .json-code {
    font-size: 0.7rem;
    padding: 0.75rem;
  }
  .blockchain-value-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .blockchain-code {
    flex: 1;
    min-width: 0;
    word-break: break-all;
  }
  .verification-guide-header h4 {
    font-size: 0.9rem;
  }
  .verification-guide-header i.ti-shield-lock {
    font-size: 18px;
  }
  details[open] .verification-guide-header h4 {
    font-size: 1.1rem;
  }
  details[open] .verification-guide-header i.ti-shield-lock {
    font-size: 24px;
  }
  .verification-chevron {
    font-size: 16px;
  }
  .blockchain-verification-guide {
    padding: 0.875rem;
  }
  .blockchain-verification-guide[open] {
    padding: 1rem;
  }
  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
  .step-content strong {
    font-size: 0.95rem;
  }
  .verify-hash-button {
    width: 100%;
    justify-content: center;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }
  .blockchain-field {
    margin-bottom: 1.5rem;
  }
  .blockchain-status {
    padding: 1rem;
  }
  .blockchain-label {
    font-size: 0.8rem;
  }
  .blockchain-help {
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .blockchain-link {
    font-size: 0.875rem;
  }
  .blockchain-verification-guide {
    padding: 1rem;
  }
  .verification-guide-intro {
    font-size: 0.9rem;
  }
  .step-content p {
    font-size: 0.875rem;
  }
  .verification-tools li {
    font-size: 0.8rem;
  }
  /* Inline label + copy button containers */
  .blockchain-field > div[style*="display: flex"] {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
  .btn-copy-small {
    flex-shrink: 0;
    padding: 0.5rem 0.65rem;
    font-size: 13px;
  }
}
/* Public Inspection Report Styles */
/* All styles scoped under .public-report to prevent conflicts with internal pages */
/* Container */
.public-report {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* Hero Section */
.public-report .report-hero {
  background: white;
  border: 1px solid #e9ecef;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--k-primary);
}

.public-report .hero-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #f8f9fa;
  flex-wrap: wrap;
  gap: 1rem;
}

.public-report .hero-title h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
}

.public-report .hero-title .subtitle {
  font-size: 0.95rem;
  color: #7f8c8d;
}

.public-report .verified-badge {
  background: #d1f4e0;
  color: #198754;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.public-report .vehicle-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.public-report .detail-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.public-report .detail-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.public-report .detail-value {
  font-size: 0.8rem;
  color: #495057;
  font-weight: 500;
  line-height: 1.4;
}

.public-report .detail-value i {
  color: #198754;
  margin-right: 0.5rem;
}

/* Status Cards */
.public-report .status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.public-report .status-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid #e9ecef;
}

.public-report .status-card .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #198754;
  margin-bottom: 0.5rem;
}

.public-report .status-card .label {
  font-size: 0.875rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Section Styles */
.public-report .report-section {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.public-report .section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f8f9fa;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.public-report .section-header i {
  font-size: 1.5rem;
  color: #198754;
  order: 1;
}

.public-report .section-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: #495057;
  order: 2;
  text-align: left;
  flex-shrink: 0;
}

/* Cost Summary */
.public-report .cost-summary-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #dee2e6;
}

.public-report .total-cost-display {
  text-align: center;
  margin-bottom: 1.5rem;
}

.public-report .total-cost-display .label {
  font-size: 0.875rem;
  color: #6c757d;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.public-report .total-cost-display .amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: #198754;
}

.public-report .cost-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.public-report .breakdown-card {
  background: white;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
  border: 1px solid #dee2e6;
}

.public-report .breakdown-card .value {
  font-weight: 700;
  font-size: 1.25rem;
  color: #495057;
  margin-bottom: 0.5rem;
}

.public-report .breakdown-card .label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  font-weight: 600;
}

/* Damage Section */
.public-report .damage-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: none;
  border: none;
  padding: 0;
}

.public-report .section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.public-report .section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

.public-report .section-subtitle-sm {
  font-size: 0.8125rem;
  color: hsl(220, 9%, 46%);
  margin: 0.25rem 0 0 0;
}

/* Issues Table */
.public-report .issues-table {
  background: white;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 0.5rem;
  overflow: hidden;
}

.public-report .issues-table-header {
  display: grid;
  grid-template-columns: 130px 1.3fr 110px 85px 85px 115px 200px 130px;
  column-gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: hsl(220, 13%, 98%);
  border-bottom: 1px solid hsl(220, 13%, 91%);
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.public-report .issues-table-header > div {
  display: flex;
  align-items: center;
}

.public-report .th-labor,
.public-report .th-parts,
.public-report .th-paint,
.public-report .th-total {
  justify-content: flex-end !important;
  margin-right: -0.5px !important;
}

.public-report .th-method {
  padding-left: 1.5rem !important;
}

.public-report .issues-table-body {
  display: flex;
  flex-direction: column;
}

.public-report .issue-row {
  display: grid;
  grid-template-columns: 130px 1.3fr 110px 85px 85px 115px 200px 130px;
  column-gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid hsl(220, 13%, 94%);
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
  align-items: center;
}

.public-report .issue-row:last-child {
  border-bottom: none;
}

.public-report .issue-row:hover {
  background: hsl(220, 13%, 99%);
}

.public-report .issue-row-minor:hover {
  border-left-color: #ca8a04;
}

.public-report .issue-row-moderate:hover {
  border-left-color: #ea580c;
}

.public-report .issue-row-major:hover {
  border-left-color: #dc2626;
}

.public-report .issue-row-severe:hover {
  border-left-color: #991b1b;
}

.public-report .td-type {
  display: flex;
  align-items: center;
}

.public-report .type-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 20%);
}

.public-report .type-cell i {
  font-size: 1rem;
  color: hsl(220, 9%, 46%);
  flex-shrink: 0;
}

.public-report .td-description {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  line-height: 1.5;
}

.public-report .td-severity {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.public-report .td-cost-breakdown {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.public-report .cost-breakdown-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(220, 9%, 46%);
}

.public-report .cost-breakdown-value.muted {
  color: hsl(220, 9%, 70%);
  font-weight: 400;
}

.public-report .td-method {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.public-report .method-text {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
}

.public-report .td-cost-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.public-report .cost-total-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #147038;
}

.public-report .cost-total-value.muted {
  color: hsl(220, 9%, 70%);
  font-weight: 400;
  font-size: 0.875rem;
}

.public-report .td-cost-summary-mobile {
  display: none;
}

.public-report .issues-table-footer {
  display: grid;
  grid-template-columns: 130px 1.3fr 110px 85px 85px 115px 200px 130px;
  column-gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-top: 2px solid hsl(220, 13%, 85%);
  background: hsl(220, 13%, 98%);
  align-items: center;
}

.public-report .footer-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(220, 9%, 46%);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.public-report .footer-amount {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(220, 9%, 20%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.public-report .footer-total {
  font-size: 1.125rem;
  font-weight: 700;
  color: #147038;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

/* Photo Gallery */
.public-report .photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.public-report .photo-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
  aspect-ratio: 4/3;
  border: 1px solid #e9ecef;
}

.public-report .photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
}

.public-report .photo-item:hover img {
  transform: scale(1.05);
}

.public-report .photo-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 1rem;
  font-size: 0.875rem;
}

/* Notes Section */
.public-report .notes-content {
  font-size: 0.875rem;
  color: hsl(220, 9%, 46%);
  line-height: 1.6;
}

/* Empty State */
.public-report .empty-message {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

.public-report .empty-message i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .public-report {
    padding: 0 1rem 3rem;
  }
  .public-report .report-hero {
    padding: 1rem;
  }
  .public-report .hero-title h1 {
    font-size: 1.5rem;
  }
  .public-report .report-section {
    padding: 1.5rem;
  }
  .public-report .photo-gallery {
    grid-template-columns: 1fr;
  }
  .public-report .total-cost-display .amount {
    font-size: 2rem;
  }
  .public-report .damage-section {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .public-report .section-header-row {
    margin-bottom: 0.75rem;
  }
  .public-report .section-title {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }
  .public-report .section-subtitle-sm {
    font-size: 0.6875rem;
  }
  .public-report .section-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .public-report .section-header i {
    display: inline-flex !important;
    font-size: 1.5rem;
  }
  .public-report .section-header h2 {
    font-size: 1.125rem;
    white-space: nowrap;
  }
  /* Mobile Issues Table */
  .public-report .issues-table-header {
    display: none;
  }
  .public-report .issue-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 1rem;
  }
  .public-report .td-type {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .public-report .td-severity {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .public-report .td-description {
    grid-row: 2;
    grid-column: 1/-1;
    padding-top: 0.5rem;
    border-top: 1px solid hsl(220, 13%, 94%);
  }
  .public-report .td-cost-summary-mobile {
    display: flex;
    flex-wrap: wrap;
    grid-row: 3;
    grid-column: 1/-1;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    color: hsl(220, 9%, 46%);
  }
  .public-report .mobile-cost-label {
    font-weight: 600;
    color: hsl(220, 9%, 60%);
    margin-right: 0.25rem;
  }
  .public-report .mobile-cost-value {
    color: hsl(220, 9%, 20%);
    font-weight: 500;
  }
  .public-report .mobile-cost-value.muted {
    color: hsl(220, 9%, 70%);
    font-weight: 400;
  }
  .public-report .mobile-cost-separator {
    margin: 0 0.5rem;
    color: hsl(220, 9%, 60%);
  }
  .public-report .td-cost-breakdown {
    display: none;
  }
  .public-report .td-method {
    display: none;
  }
  .public-report .td-cost-total {
    grid-row: 4;
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid hsl(220, 13%, 94%);
    margin-right: 0;
  }
  .public-report .td-cost-total::before {
    content: "Total:";
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(220, 9%, 46%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .public-report .cost-total-value {
    font-size: 1.125rem;
    font-weight: 700;
  }
  .public-report .issues-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
  }
  .public-report .footer-label {
    display: none;
  }
  .public-report .footer-label:nth-child(3) {
    display: block;
  }
  .public-report .footer-amount {
    display: none;
  }
  .public-report .footer-total {
    margin-left: auto;
  }
}
/* Print Styles */
@media print {
  .public-report .report-section {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #dee2e6;
  }
}