/* Proff Bilsalg AS - Premium Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Colors - Branding */
  --color-primary: #DC2626;
  /* Vibrant Red */
  --color-primary-hover: #B91C1C;
  --color-secondary: #3B82F6;
  /* Bright Blue */
  --color-dark: #000000;
  /* True Black */
  --color-surface-dark: #111827;
  /* Dark Gray Surface */
  --color-surface-card: #FFFFFF;
  /* White Cards */

  /* Gray Palette */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Colors - Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* Colors - Typography */
  --text-main: #111827;
  --text-muted: #4B5563;
  --text-white: #FFFFFF;
  --text-on-dark: #D1D5DB;

  /* Typography */
  --font-family: 'Inter', -apple-system, system-ui, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-hero: 48px;

  /* Layout - Responsive container widths */
  --container-width: 1280px;
  --container-padding: 24px;
  --spacing-unit: 8px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-hero: 0 20px 40px rgba(0, 0, 0, 0.4);

  /* Spacing scale */
  --section-spacing: 64px;
  --section-spacing-mobile: 40px;
  --card-gap: 24px;
  --card-gap-mobile: 16px;

  --text-primary: var(--text-main);
  --color-focus-ring: rgba(220, 38, 38, 0.12);
  --surface-black: #000000;
  --surface-night: #111827;
  --surface-night-deep: #0B0F19;
}

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

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--color-gray-50);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
  box-sizing: border-box;
}

/* Responsive container padding */
@media (min-width: 1200px) {
  :root {
    --container-padding: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
    --section-spacing: var(--section-spacing-mobile);
    --card-gap: var(--card-gap-mobile);
  }
}

/* Public site header */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  color: #fff;
  background: linear-gradient(135deg, #0a0a0a 0%, #171717 48%, #1f1f1f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

header.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary) 20%, var(--color-primary) 80%, transparent);
  pointer-events: none;
}

.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  position: relative;
}

.site-header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.site-header-logo {
  display: block;
  max-height: 52px;
  max-width: min(220px, 42vw);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.site-header-nav {
  justify-self: center;
  min-width: 0;
}

.site-header-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  margin: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.site-header-nav-list a {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.site-header-nav-list a:hover,
.site-header-nav-list a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.site-header-nav-list a.active {
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.45);
}

.site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.site-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.site-header-cta--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.site-header-cta--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.site-header-cta--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.site-header-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

.site-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.2s;
}

.site-header-phone:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Legacy aliases */
.header-inner {
  display: contents;
}

header nav {
  margin-left: 0;
}

.logo {
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  min-width: max-content;
}

.logo span {
  display: block;
  font-size: 16px;
  border-top: 2px solid var(--color-primary);
  margin-top: 4px;
  padding-top: 4px;
  text-align: center;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

header nav a {
  color: var(--text-white);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: color 0.2s;
}

header nav a:hover,
header nav a.active {
  color: var(--color-primary);
}

/* Public site — mobile drawer navigation (scoped; do not use .mobile-menu-toggle here) */
.public-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-white);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.public-nav-toggle:hover,
.public-nav-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

.public-mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 88vw);
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
  z-index: 1100;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 16px 16px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.public-mobile-menu.is-open {
  right: 0;
}

.public-mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.public-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.public-mobile-menu-brand {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.public-mobile-menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.public-mobile-menu-links li {
  margin: 0;
  width: 100%;
}

.public-mobile-menu-links a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
}

.public-mobile-menu-links a:hover,
.public-mobile-menu-links a:focus-visible,
.public-mobile-menu-links a.active {
  background: #fef2f2;
  color: var(--color-primary);
  outline: none;
}

.public-mobile-menu-extra {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.public-mobile-menu-hours {
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.public-mobile-menu-hours strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-size: 13px;
}

.public-mobile-menu-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}

.public-mobile-menu-call:hover {
  filter: brightness(1.05);
  color: #fff;
}

.public-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1090;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.public-mobile-overlay.is-open {
  display: block;
  opacity: 1;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

.header-phone:hover {
  background: rgba(255, 255, 255, 0.08);
}

.public-mobile-menu-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.public-mobile-menu-quick-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.public-mobile-menu-quick-link--ghost {
  background: #f3f4f6;
  color: var(--text-primary);
}

.public-mobile-menu-quick-link--primary {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 991.98px) {
  .site-header-nav {
    display: none;
  }

  .site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .site-header-brand {
    min-width: 0;
  }

  .site-header-cta {
    display: none;
  }

  .public-nav-toggle {
    display: inline-flex;
  }

  .site-header-phone-text {
    display: none;
  }

  .site-header-phone {
    padding: 10px 12px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }

  .site-header-nav-list a {
    padding: 8px 11px;
    font-size: 12px;
  }

  .site-header-cta--ghost {
    display: none;
  }
}

.btn-admin {
  background: white;
  color: var(--color-primary);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}

/* Hero Section */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&q=80&w=1920');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 120px 0 80px;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 24px;
}

.hero h1 {
  font-size: var(--font-size-hero);
  font-weight: 800;
  max-width: 600px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.hero h1 span {
  color: var(--color-primary);
}

.hero p {
  font-size: 18px;
  color: var(--text-on-dark);
  max-width: 500px;
  margin-bottom: 40px;
}

.hero-btns {
  display: flex;
  gap: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
}

.btn-secondary {
  background: white;
  color: var(--text-main);
}

/* Stats Row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 60px;
  position: relative;
  z-index: 100;
  justify-content: center;
  max-width: 100%;
}

.stats-row .stat-card {
  position: relative;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 24px;
  border-radius: var(--radius-lg);
  color: white;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stats-row .stat-info {
  display: flex;
  flex-direction: column;
}

.stat-card.blue {
  background: #3B82F6;
}

.stat-card.red {
  background: #DC2626;
}

.stat-card.dark {
  background: #1F2937;
}

.stat-card.green {
  background: #10B981;
}

.stat-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-info h4 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 4px 0;
}

.stat-info p {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
}

/* Car Cards - Refined */
.section-title {
  text-align: center;
  margin-bottom: 32px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
}

.section-title p {
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  font-size: 15px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1199px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 899px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.car-card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s;
}

.car-card:hover {
  transform: translateY(-8px);
}

.car-img-wrapper {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.car-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-card-body {
  padding: 16px 20px 20px;
}

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

.car-card-header h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.car-price {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
}

.car-year {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 0;
  margin-bottom: 12px;
  display: block;
}

.car-specs-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.spec-item i {
  color: var(--color-primary);
  font-size: 14px;
}

.view-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

/* Detail Page Redesign */
.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  margin-top: 40px;
}

.detail-gallery img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.detail-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.detail-info-header h1 {
  font-size: 40px;
  font-weight: 800;
}

.detail-info-header .price {
  font-size: 32px;
  color: var(--color-primary);
  font-weight: 800;
}

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

.spec-box {
  background: #F9FAFB;
  padding: 16px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
}

.spec-box i {
  width: 36px;
  height: 36px;
  background: #FFE4E6;
  color: var(--color-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spec-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.spec-value {
  font-weight: 700;
  font-size: 14px;
}

.tax-box {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 20px;
  border-radius: var(--radius-lg);
  margin-top: 32px;
}

/* --- Admin Sidebar Layout --- */
.admin-debug-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  border: 3px solid var(--color-primary);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.35);
  z-index: 10050;
}

.admin-debug-badges {
  pointer-events: none;
}

.admin-debug-badge {
  position: fixed;
  z-index: 10051;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
  pointer-events: none;
}

.admin-debug-badge--tl {
  top: 10px;
  left: 10px;
}

.admin-debug-badge--tr {
  top: 10px;
  right: 10px;
}

.admin-debug-badge--bl {
  bottom: 10px;
  left: 10px;
}

.admin-debug-badge--br {
  bottom: 10px;
  right: 10px;
}

.admin-debug-badge i {
  font-size: 15px;
}

.admin-wrapper {
  display: flex;
  min-height: 100vh;
  background-color: #F3F4F6;
}

.admin-global-search {
  flex: 1;
  max-width: 520px;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 0 12px;
  min-height: 42px;
}

.admin-global-search i {
  color: #6B7280;
  font-size: 14px;
}

.admin-global-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font-size: 14px;
}

.admin-global-search input::placeholder {
  color: #9CA3AF;
}

@media (max-width: 900px) {
  .admin-global-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    width: 100%;
  }
}

.sidebar {
  width: 280px;
  background: var(--color-dark);
  color: white;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  z-index: 100;
}

.sidebar-logo {
  padding: 28px 24px 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 12px;
  transition: background-color .15s ease;
}

.sidebar-logo:hover { background-color: rgba(255,255,255,0.06); }
.sidebar-logo:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.sidebar-logo-img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
}

.sidebar-logo .logo-text {
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 1px;
}

.sidebar-logo .logo-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.sidebar-logo .logo-line {
  flex-grow: 1;
  height: 2px;
  background: var(--color-primary);
}

.sidebar-logo .logo-as {
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.sidebar-menu {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 24px;
  list-style: none;
  scrollbar-color: rgba(156, 163, 175, 0.65) transparent;
  scrollbar-width: thin;
}

.sidebar-menu::-webkit-scrollbar {
  width: 8px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.45);
  border-radius: 999px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
}

.sidebar-menu li {
  margin-bottom: 8px;
}

.sidebar-section {
  margin-bottom: 8px;
}

.sidebar-section-label {
  color: #6B7280;
  padding: 16px 20px 8px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-section:first-child .sidebar-section-label {
  margin-top: 0;
  padding-top: 8px;
}

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

.sidebar-section--collapsible .sidebar-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px 8px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #6B7280;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sidebar-section--collapsible .sidebar-section-toggle:hover,
.sidebar-section--collapsible .sidebar-section-toggle:focus {
  color: #D1D5DB;
  outline: none;
}

.sidebar-section--collapsible .sidebar-section-toggle .sidebar-section-label {
  padding: 0;
  margin: 0;
}

.sidebar-section-chevron {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.sidebar-section--collapsible:not(.sidebar-section--collapsed) .sidebar-section-chevron {
  transform: rotate(180deg);
}

@media (min-width: 1025px) {
  .sidebar-section--collapsible.sidebar-section--collapsed .sidebar-section-items {
    display: none;
  }
}

/* --- Manager dark mode (token-driven palette) --- */
html.admin-dark-mode {
  color-scheme: dark;
  --text-main: #e8edf4;
  --text-muted: #8b9cb3;
  --text-primary: #e8edf4;
  --color-surface-card: #111827;
  --color-gray-50: #151d2b;
  --color-gray-100: #1a2435;
  --color-gray-200: #243044;
  --color-gray-300: #334155;
  --color-gray-400: #64748b;
  --color-dark: #060a12;
  --admin-sidebar-bg: #060a12;
  --admin-bg: #0a0f18;
  --admin-bg-elevated: #111827;
  --admin-bg-muted: #161f2e;
  --admin-bg-subtle: #1c2738;
  --admin-border: #243044;
  --admin-border-subtle: #1c2738;
  --admin-text: #e8edf4;
  --admin-text-muted: #8b9cb3;
  --admin-text-subtle: #64748b;
  --admin-accent: #ef6b6b;
  --admin-accent-strong: #dc4f4f;
  --admin-accent-soft: rgba(239, 107, 107, 0.16);
  --admin-hover: rgba(255, 255, 255, 0.04);
  --admin-hover-strong: #1c2738;
  --admin-input-bg: #0d121c;
  --admin-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.38);
}

html.admin-dark-mode .admin-wrapper {
  background-color: var(--admin-bg);
  color: var(--admin-text);
}

html.admin-dark-mode .admin-topbar {
  background: var(--admin-bg-elevated);
  border-bottom: 1px solid var(--admin-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

html.admin-dark-mode .admin-topbar h1,
html.admin-dark-mode .admin-topbar-title h1 {
  color: var(--admin-text);
}

html.admin-dark-mode .admin-global-search {
  background: var(--admin-input-bg);
  border-color: var(--admin-border);
}

html.admin-dark-mode .admin-global-search i {
  color: var(--admin-text-subtle);
}

html.admin-dark-mode .admin-global-search input {
  color: var(--admin-text);
}

html.admin-dark-mode .admin-global-search input::placeholder {
  color: var(--admin-text-subtle);
}

html.admin-dark-mode .admin-content {
  color: var(--admin-text);
}

html.admin-dark-mode .mobile-menu-toggle {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .mobile-menu-toggle:hover,
html.admin-dark-mode .mobile-menu-toggle:focus {
  background: var(--admin-hover-strong);
  color: var(--admin-text);
}

html.admin-dark-mode .header-icon-btn {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .header-icon-btn:hover,
html.admin-dark-mode .header-icon-btn:focus {
  background: var(--admin-hover-strong);
  color: var(--admin-text);
}

html.admin-dark-mode .header-theme-toggle {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .header-theme-toggle:hover {
  background: var(--admin-hover-strong);
  color: var(--admin-text);
}

html.admin-dark-mode .header-theme-toggle[aria-pressed="true"] {
  background: var(--admin-hover-strong);
  color: #fde68a;
}

html.admin-dark-mode .header-theme-toggle[aria-pressed="true"]:hover {
  color: #fef3c7;
}

html.admin-dark-mode .header-divider {
  background: var(--admin-border);
}

html.admin-dark-mode .header-account-toggle {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .header-account-toggle:hover,
html.admin-dark-mode .header-account-toggle:focus {
  background: var(--admin-hover-strong);
  color: var(--admin-accent);
}

html.admin-dark-mode .header-account-dropdown {
  background: var(--admin-bg-elevated);
  border-color: var(--admin-border);
  box-shadow: var(--admin-shadow);
}

html.admin-dark-mode .header-account-info {
  border-bottom-color: var(--admin-border);
}

html.admin-dark-mode .header-account-name {
  color: var(--admin-text);
}

html.admin-dark-mode .header-account-role {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .header-account-item {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .header-account-item:hover,
html.admin-dark-mode .header-account-item.active {
  background: var(--admin-hover-strong);
  color: var(--admin-text);
}

html.admin-dark-mode .page-help-btn {
  background: var(--admin-input-bg);
  border-color: var(--admin-border);
  color: var(--admin-text-muted);
}

html.admin-dark-mode .page-help-btn:hover,
html.admin-dark-mode .page-help-btn:focus {
  background: var(--admin-hover-strong);
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--admin-accent);
}

html.admin-dark-mode .manager-workspace,
html.admin-dark-mode .inventory-workspace {
  color: var(--admin-text);
}

html.admin-dark-mode .manager-command,
html.admin-dark-mode .inventory-command,
html.admin-dark-mode .manager-state-card,
html.admin-dark-mode .inventory-state-card,
html.admin-dark-mode .table-container,
html.admin-dark-mode .settings-card,
html.admin-dark-mode .account-card,
html.admin-dark-mode .pref-hub-card,
html.admin-dark-mode .ana-card {
  background: var(--admin-bg-elevated);
  border: 1px solid var(--admin-border);
  color: var(--admin-text);
  box-shadow: var(--admin-shadow);
}

html.admin-dark-mode .manager-command p,
html.admin-dark-mode .inventory-command p,
html.admin-dark-mode .ana-info h5,
html.admin-dark-mode .state-note,
html.admin-dark-mode .manager-table-title,
html.admin-dark-mode .inventory-toolbar-title {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .state-label,
html.admin-dark-mode .ana-info .ana-value {
  color: var(--admin-text);
}

html.admin-dark-mode .manager-state-card:hover,
html.admin-dark-mode .inventory-state-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

html.admin-dark-mode .manager-state-card.active,
html.admin-dark-mode .inventory-state-card.active {
  box-shadow:
    0 0 0 2px var(--admin-accent),
    0 8px 24px rgba(248, 113, 113, 0.18);
}

html.admin-dark-mode .state-icon.sale {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}

html.admin-dark-mode .state-icon.sold {
  background: rgba(52, 211, 153, 0.16);
  color: #6ee7b7;
}

html.admin-dark-mode .state-icon.recovery {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
}

html.admin-dark-mode .state-icon.off-market {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}

html.admin-dark-mode .state-count.sale { color: #fca5a5; }
html.admin-dark-mode .state-count.sold { color: #6ee7b7; }
html.admin-dark-mode .state-count.recovery { color: #fcd34d; }
html.admin-dark-mode .state-count.off-market { color: #93c5fd; }

html.admin-dark-mode .ana-icon {
  background: var(--admin-bg-muted);
  color: var(--admin-accent);
}

html.admin-dark-mode .table-toolbar {
  background: var(--admin-bg-muted);
  border-bottom-color: var(--admin-border);
}

html.admin-dark-mode .table-filter label,
html.admin-dark-mode .table-toolbar label {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .enhanced-table th {
  background: var(--admin-bg-muted);
  color: var(--admin-text-muted);
  border-bottom-color: var(--admin-border);
}

html.admin-dark-mode .enhanced-table th:hover,
html.admin-dark-mode .enhanced-table th.no-sort:hover {
  background: var(--admin-hover-strong);
}

html.admin-dark-mode .enhanced-table td {
  color: var(--admin-text);
  border-bottom-color: var(--admin-border-subtle);
}

html.admin-dark-mode .enhanced-table tbody tr:hover {
  background: var(--admin-hover);
}

html.admin-dark-mode .enhanced-table tbody tr.selected {
  background: rgba(248, 113, 113, 0.12);
}

html.admin-dark-mode .manager-notice--warning,
html.admin-dark-mode .inventory-notice--warning {
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.35);
}

html.admin-dark-mode .manager-notice--info,
html.admin-dark-mode .inventory-notice--info {
  background: rgba(129, 140, 248, 0.12);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.35);
}

html.admin-dark-mode .admin-wrapper .alert-flash[style*="background: #D1FAE5"] {
  background: rgba(52, 211, 153, 0.14) !important;
  color: #a7f3d0 !important;
}

html.admin-dark-mode .admin-wrapper .alert-flash[style*="background: #FEE2E2"] {
  background: rgba(248, 113, 113, 0.14) !important;
  color: #fecaca !important;
}

html.admin-dark-mode .admin-wrapper .alert-flash[style*="background: #DBEAFE"] {
  background: rgba(96, 165, 250, 0.14) !important;
  color: #bfdbfe !important;
}

html.admin-dark-mode .admin-wrapper .form-control,
html.admin-dark-mode .admin-wrapper input[type="text"],
html.admin-dark-mode .admin-wrapper input[type="email"],
html.admin-dark-mode .admin-wrapper input[type="password"],
html.admin-dark-mode .admin-wrapper input[type="number"],
html.admin-dark-mode .admin-wrapper input[type="tel"],
html.admin-dark-mode .admin-wrapper input[type="url"],
html.admin-dark-mode .admin-wrapper input[type="date"],
html.admin-dark-mode .admin-wrapper input[type="datetime-local"],
html.admin-dark-mode .admin-wrapper input[type="time"],
html.admin-dark-mode .admin-wrapper input[type="search"],
html.admin-dark-mode .admin-wrapper select,
html.admin-dark-mode .admin-wrapper textarea {
  color: var(--admin-text);
  background-color: var(--admin-input-bg);
  border-color: var(--admin-border);
}

html.admin-dark-mode .admin-wrapper .form-control:hover,
html.admin-dark-mode .admin-wrapper input:hover,
html.admin-dark-mode .admin-wrapper select:hover,
html.admin-dark-mode .admin-wrapper textarea:hover {
  background-color: var(--admin-bg-muted);
  border-color: var(--color-gray-300);
}

html.admin-dark-mode .admin-wrapper .form-control:focus,
html.admin-dark-mode .admin-wrapper input:focus,
html.admin-dark-mode .admin-wrapper select:focus,
html.admin-dark-mode .admin-wrapper textarea:focus {
  background-color: var(--admin-bg-muted);
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px var(--admin-accent-soft);
}

html.admin-dark-mode .admin-wrapper .btn-secondary {
  background: var(--admin-bg-muted);
  border-color: var(--admin-border);
  color: var(--admin-text);
}

html.admin-dark-mode .admin-wrapper .btn-secondary:hover {
  background: var(--admin-hover-strong);
  border-color: var(--color-gray-300);
}

html.admin-dark-mode .pref-hub-nav,
html.admin-dark-mode .pref-hub-sublink,
html.admin-dark-mode .settings-section-title,
html.admin-dark-mode .account-section-title {
  color: var(--admin-text);
  border-color: var(--admin-border);
}

html.admin-dark-mode .pref-hub-sublink {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .pref-hub-sublink:hover,
html.admin-dark-mode .pref-hub-sublink.active {
  background: var(--admin-hover-strong);
  color: var(--admin-text);
}

html.admin-dark-mode .table-mobile-cards tbody tr {
  background: var(--admin-bg-elevated);
  border-color: var(--admin-border);
}

html.admin-dark-mode .table-mobile-cards tbody tr:hover {
  border-color: var(--admin-accent);
}

html.admin-dark-mode .table-mobile-cards tbody tr.row-unread {
  background: rgba(248, 113, 113, 0.1);
  border-left-color: var(--admin-accent);
}

html.admin-dark-mode .table-mobile-cards tbody td::before {
  color: var(--admin-text-subtle);
}

/* --- Dark mode: navigation shell --- */
html.admin-dark-mode .sidebar {
  background: var(--admin-sidebar-bg);
  border-right: 1px solid var(--admin-border);
  color: var(--admin-text);
}

html.admin-dark-mode .sidebar-logo:hover {
  background-color: var(--admin-hover);
}

html.admin-dark-mode .sidebar-section-label,
html.admin-dark-mode .sidebar-section--collapsible .sidebar-section-toggle {
  color: var(--admin-text-subtle);
}

html.admin-dark-mode .sidebar-section--collapsible .sidebar-section-toggle:hover,
html.admin-dark-mode .sidebar-section--collapsible .sidebar-section-toggle:focus {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .sidebar-menu a {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .sidebar-menu a:hover {
  background: var(--admin-hover-strong);
  color: var(--admin-text);
}

html.admin-dark-mode .sidebar-menu a.active {
  background: var(--admin-accent-soft);
  color: #fecaca;
  box-shadow: inset 0 0 0 1px rgba(239, 107, 107, 0.35);
}

html.admin-dark-mode .sidebar-logout-btn {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .sidebar-logout-btn:hover {
  background: rgba(239, 107, 107, 0.12);
  color: #fca5a5;
}

html.admin-dark-mode .sidebar-badge {
  background: var(--admin-accent-strong);
  box-shadow: 0 0 0 2px var(--admin-sidebar-bg);
}

html.admin-dark-mode .sidebar-menu::-webkit-scrollbar-thumb {
  background: var(--admin-border);
}

html.admin-dark-mode.admin-sidebar-collapsed .sidebar-logo::before,
html.admin-dark-mode .admin-wrapper--sidebar-collapsed .sidebar-logo::before {
  background: var(--admin-bg-muted);
  color: var(--admin-text);
}

/* --- Dark mode: workspace surfaces (page-local cards) --- */
html.admin-dark-mode .admin-wrapper .nl-command,
html.admin-dark-mode .admin-wrapper .nl-state-card,
html.admin-dark-mode .admin-wrapper .leads-command,
html.admin-dark-mode .admin-wrapper .leads-state-card,
html.admin-dark-mode .admin-wrapper .messages-command,
html.admin-dark-mode .admin-wrapper .msg-state-card,
html.admin-dark-mode .admin-wrapper .camp-command,
html.admin-dark-mode .admin-wrapper .camp-state-card,
html.admin-dark-mode .admin-wrapper .hero-panel,
html.admin-dark-mode .admin-wrapper .dashboard-card,
html.admin-dark-mode .admin-wrapper .metric-card,
html.admin-dark-mode .admin-wrapper .report-modal,
html.admin-dark-mode .admin-wrapper .health-summary,
html.admin-dark-mode .admin-wrapper .health-check,
html.admin-dark-mode .admin-wrapper .health-cache-card,
html.admin-dark-mode .admin-wrapper .pwa-install-card,
html.admin-dark-mode .admin-wrapper .panel-card,
html.admin-dark-mode .admin-wrapper .license-system-card,
html.admin-dark-mode .admin-wrapper .license-responsibility-card,
html.admin-dark-mode .admin-wrapper .license-compliance-callout,
html.admin-dark-mode .admin-wrapper .pref-hub-nav--workspace,
html.admin-dark-mode .admin-wrapper [style*="background: white"],
html.admin-dark-mode .admin-wrapper [style*="background: #fff"],
html.admin-dark-mode .admin-wrapper [style*="background:#fff"],
html.admin-dark-mode .admin-wrapper [style*="background: #FFF"],
html.admin-dark-mode .admin-wrapper [style*="background:#FFF"] {
  background: var(--admin-bg-elevated) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-text);
  box-shadow: var(--admin-shadow) !important;
}

html.admin-dark-mode .admin-wrapper .nl-command h2,
html.admin-dark-mode .admin-wrapper .leads-command h2,
html.admin-dark-mode .admin-wrapper .messages-command h2,
html.admin-dark-mode .admin-wrapper .camp-command h2,
html.admin-dark-mode .admin-wrapper .hero-panel h2,
html.admin-dark-mode .admin-wrapper .nl-card-label,
html.admin-dark-mode .admin-wrapper .leads-card-label,
html.admin-dark-mode .admin-wrapper .msg-card-label,
html.admin-dark-mode .admin-wrapper .camp-card-label {
  color: var(--admin-text);
}

html.admin-dark-mode .admin-wrapper .nl-command p,
html.admin-dark-mode .admin-wrapper .leads-command p,
html.admin-dark-mode .admin-wrapper .messages-command p,
html.admin-dark-mode .admin-wrapper .camp-command p,
html.admin-dark-mode .admin-wrapper .nl-card-note,
html.admin-dark-mode .admin-wrapper .leads-card-note,
html.admin-dark-mode .admin-wrapper .msg-card-note,
html.admin-dark-mode .admin-wrapper .camp-card-note {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .admin-wrapper .nl-state-card.active,
html.admin-dark-mode .admin-wrapper .leads-state-card.active,
html.admin-dark-mode .admin-wrapper .msg-state-card.active,
html.admin-dark-mode .admin-wrapper .camp-state-card.active {
  box-shadow:
    0 0 0 2px var(--admin-accent),
    0 8px 24px rgba(239, 107, 107, 0.14) !important;
}

html.admin-dark-mode .admin-wrapper .nl-card-icon.subscribed,
html.admin-dark-mode .admin-wrapper .leads-card-icon.COMPLETED,
html.admin-dark-mode .admin-wrapper .msg-card-icon.replied,
html.admin-dark-mode .admin-wrapper .camp-card-icon.sent {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

html.admin-dark-mode .admin-wrapper .nl-card-icon.unsubscribed,
html.admin-dark-mode .admin-wrapper .leads-card-icon.REJECTED,
html.admin-dark-mode .admin-wrapper .msg-card-icon.closed,
html.admin-dark-mode .admin-wrapper .camp-card-icon.draft {
  background: rgba(100, 116, 139, 0.22);
  color: #cbd5e1;
}

html.admin-dark-mode .admin-wrapper .leads-card-icon.NEW,
html.admin-dark-mode .admin-wrapper .msg-card-icon.new,
html.admin-dark-mode .admin-wrapper .camp-card-icon.failed {
  background: rgba(239, 107, 107, 0.18);
  color: #fca5a5;
}

html.admin-dark-mode .admin-wrapper .leads-card-icon.CONTACTED,
html.admin-dark-mode .admin-wrapper .msg-card-icon.open {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

html.admin-dark-mode .admin-wrapper .leads-card-icon.SCHEDULED,
html.admin-dark-mode .admin-wrapper .camp-card-icon.queued {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
}

html.admin-dark-mode .admin-wrapper .nl-card-count.subscribed,
html.admin-dark-mode .admin-wrapper .leads-card-count.COMPLETED,
html.admin-dark-mode .admin-wrapper .msg-card-count.replied,
html.admin-dark-mode .admin-wrapper .camp-card-count.sent {
  color: #6ee7b7;
}

html.admin-dark-mode .admin-wrapper .nl-card-count.unsubscribed,
html.admin-dark-mode .admin-wrapper .leads-card-count.REJECTED,
html.admin-dark-mode .admin-wrapper .msg-card-count.closed,
html.admin-dark-mode .admin-wrapper .camp-card-count.draft {
  color: #94a3b8;
}

html.admin-dark-mode .admin-wrapper .leads-card-count.NEW,
html.admin-dark-mode .admin-wrapper .msg-card-count.new,
html.admin-dark-mode .admin-wrapper .camp-card-count.failed {
  color: #fca5a5;
}

html.admin-dark-mode .admin-wrapper .leads-card-count.CONTACTED,
html.admin-dark-mode .admin-wrapper .msg-card-count.open {
  color: #93c5fd;
}

html.admin-dark-mode .admin-wrapper .leads-card-count.SCHEDULED,
html.admin-dark-mode .admin-wrapper .camp-card-count.queued {
  color: #fcd34d;
}

html.admin-dark-mode .list-link {
  background: var(--admin-bg-muted);
  color: var(--admin-text);
}

html.admin-dark-mode .list-link:hover {
  background: var(--admin-hover-strong);
}

html.admin-dark-mode .empty-state,
html.admin-dark-mode .table-empty {
  color: var(--admin-text-muted);
}

html.admin-dark-mode .empty-state i,
html.admin-dark-mode .table-empty i {
  color: var(--admin-text-subtle);
}

html.admin-dark-mode .empty-state h3,
html.admin-dark-mode .table-empty h3 {
  color: var(--admin-text);
}

html.admin-dark-mode .filter-tab {
  background: var(--admin-bg-muted);
  border-color: var(--admin-border);
  color: var(--admin-text-muted);
}

html.admin-dark-mode .filter-tab:hover,
html.admin-dark-mode .filter-tab.active {
  background: var(--admin-accent-soft);
  border-color: rgba(239, 107, 107, 0.35);
  color: #fecaca;
}

html.admin-dark-mode .pagination-btn {
  background: var(--admin-bg-muted);
  border-color: var(--admin-border);
  color: var(--admin-text-muted);
}

html.admin-dark-mode .pagination-btn:hover:not(:disabled),
html.admin-dark-mode .pagination-btn.active {
  background: var(--admin-hover-strong);
  border-color: var(--color-gray-300);
  color: var(--admin-text);
}

html.admin-dark-mode .btn-outline {
  background: var(--admin-bg-muted);
  border-color: var(--admin-border);
  color: var(--admin-text);
}

html.admin-dark-mode .btn-outline:hover {
  background: var(--admin-hover-strong);
  border-color: var(--color-gray-300);
}

html.admin-dark-mode .health-score-inner {
  background: var(--admin-bg-elevated);
  color: var(--admin-text);
}

html.admin-dark-mode .health-pill.ok { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
html.admin-dark-mode .health-pill.info { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
html.admin-dark-mode .health-pill.warning { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
html.admin-dark-mode .health-pill.critical { background: rgba(239, 107, 107, 0.18); color: #fca5a5; }

html.admin-dark-mode .status-pill {
  filter: saturate(0.85);
}

html.admin-dark-mode .table-search {
  background: var(--admin-input-bg);
  border-color: var(--admin-border);
}

html.admin-dark-mode .table-search input {
  color: var(--admin-text);
}

html.admin-dark-mode .license-developer-card {
  background: var(--admin-sidebar-bg);
  border: 1px solid var(--admin-border);
}

html.admin-dark-mode .license-developer-tagline,
html.admin-dark-mode .license-developer-meta {
  color: var(--admin-text-muted);
}

.sidebar-menu a {
  color: #9CA3AF;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.sidebar-menu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.sidebar-menu a.active {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.sidebar-logout-form {
  margin: 0;
}

.sidebar-logout-btn {
  width: 100%;
  border: none;
  background: transparent;
  color: #9CA3AF;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-family: inherit;
}

.sidebar-logout-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fca5a5;
}

.sidebar-badge {
  background: var(--color-primary);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: auto;
}

.sidebar-footer {
  padding: 24px;
  border-top: 1px solid #1F2937;
}

.admin-main {
  flex-grow: 1;
  margin-left: 280px;
  display: flex;
  flex-direction: column;
}

.sidebar-collapse-toggle {
  display: none;
}

@media (min-width: 1025px) {
  .sidebar,
  .admin-main {
    transition: width 0.22s ease, margin-left 0.22s ease;
  }

  .admin-topbar .sidebar-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--color-gray-200);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .admin-topbar .sidebar-collapse-toggle:hover,
  .admin-topbar .sidebar-collapse-toggle:focus {
    background: #f3f4f6;
    color: var(--text-main);
    border-color: var(--color-gray-300);
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
  }

  .sidebar-collapse-toggle .sidebar-collapse-icon--expand {
    display: none;
  }

  html.admin-sidebar-collapsed .sidebar,
  .admin-wrapper--sidebar-collapsed .sidebar {
    width: 64px;
    border-right: 1px solid #111827;
  }

  html.admin-sidebar-collapsed .admin-main,
  .admin-wrapper--sidebar-collapsed .admin-main {
    margin-left: 64px;
  }

  html.admin-sidebar-collapsed .sidebar-logo,
  .admin-wrapper--sidebar-collapsed .sidebar-logo {
    min-height: 64px;
    padding: 12px 8px 10px;
    justify-content: center;
  }

  html.admin-sidebar-collapsed .sidebar-logo::before,
  .admin-wrapper--sidebar-collapsed .sidebar-logo::before {
    content: "PB";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
  }

  html.admin-sidebar-collapsed .sidebar-logo-img,
  .admin-wrapper--sidebar-collapsed .sidebar-logo-img {
    display: none;
  }

  html.admin-sidebar-collapsed .sidebar-menu,
  .admin-wrapper--sidebar-collapsed .sidebar-menu {
    padding: 8px;
  }

  html.admin-sidebar-collapsed .sidebar-section-label,
  .admin-wrapper--sidebar-collapsed .sidebar-section-label {
    display: none;
  }

  html.admin-sidebar-collapsed .sidebar-section--collapsible .sidebar-section-toggle,
  .admin-wrapper--sidebar-collapsed .sidebar-section--collapsible .sidebar-section-toggle {
    display: none;
  }

  html.admin-sidebar-collapsed .sidebar-section--collapsible .sidebar-section-items,
  .admin-wrapper--sidebar-collapsed .sidebar-section--collapsible .sidebar-section-items,
  html.admin-sidebar-collapsed .sidebar-section--collapsible.sidebar-section--collapsed .sidebar-section-items,
  .admin-wrapper--sidebar-collapsed .sidebar-section--collapsible.sidebar-section--collapsed .sidebar-section-items {
    display: block !important;
  }

  html.admin-sidebar-collapsed .sidebar-menu a,
  .admin-wrapper--sidebar-collapsed .sidebar-menu a {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 12px;
    position: relative;
  }

  html.admin-sidebar-collapsed .sidebar-menu a span:not(.sidebar-badge),
  .admin-wrapper--sidebar-collapsed .sidebar-menu a span:not(.sidebar-badge) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  html.admin-sidebar-collapsed .sidebar-logout-btn,
  .admin-wrapper--sidebar-collapsed .sidebar-logout-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  html.admin-sidebar-collapsed .sidebar-logout-btn span,
  .admin-wrapper--sidebar-collapsed .sidebar-logout-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  html.admin-sidebar-collapsed .sidebar-badge,
  .admin-wrapper--sidebar-collapsed .sidebar-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-size: 10px;
    line-height: 1;
    margin-left: 0;
    box-shadow: 0 0 0 2px #000000;
  }

  html.admin-sidebar-collapsed .sidebar-collapse-toggle .sidebar-collapse-icon--collapse,
  .admin-wrapper--sidebar-collapsed .sidebar-collapse-toggle .sidebar-collapse-icon--collapse {
    display: none;
  }

  html.admin-sidebar-collapsed .sidebar-collapse-toggle .sidebar-collapse-icon--expand,
  .admin-wrapper--sidebar-collapsed .sidebar-collapse-toggle .sidebar-collapse-icon--expand {
    display: block;
  }

  html.admin-sidebar-collapsed .admin-wrapper.rtl .admin-main,
  .admin-wrapper.rtl.admin-wrapper--sidebar-collapsed .admin-main {
    margin-left: 0;
    margin-right: 64px;
  }
}

html.admin-dark-mode .admin-topbar .sidebar-collapse-toggle {
  background: linear-gradient(180deg, #1a2436 0%, #141c2b 100%);
  border-color: var(--admin-border);
  color: var(--admin-text-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.admin-dark-mode .admin-topbar .sidebar-collapse-toggle:hover,
html.admin-dark-mode .admin-topbar .sidebar-collapse-toggle:focus {
  background: var(--admin-hover-strong);
  border-color: var(--color-gray-300);
  color: var(--admin-text);
  box-shadow: 0 0 0 3px var(--admin-accent-soft);
}

.admin-topbar {
  background: white;
  padding: 0 32px;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-200);
}

.page-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.page-title-actions h1 {
  min-width: 0;
}

.page-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  background: #F9FAFB;
  color: #4B5563;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.page-help-btn:hover,
.page-help-btn:focus {
  background: #FEF2F2;
  color: var(--color-primary);
  border-color: #FECACA;
  outline: none;
}

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.header-icon-btn:hover {
  background: #F3F4F6;
  color: var(--text-primary);
}

.header-icon-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
}

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

.header-theme-toggle {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.header-theme-toggle:hover {
  background: #F3F4F6;
  color: var(--text-primary);
}

.header-theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
}

.header-theme-toggle:focus:not(:focus-visible) {
  box-shadow: none;
}

.header-theme-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.header-theme-toggle[aria-pressed="true"] {
  background: #E5E7EB;
  color: #B45309;
}

.header-theme-toggle[aria-pressed="true"]:hover {
  background: #D1D5DB;
  color: #92400E;
}

.header-theme-toggle-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
}

.header-theme-toggle-icon i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-theme-toggle-icon [data-theme-icon="moon"] {
  opacity: 1;
  visibility: visible;
}

.header-theme-toggle-icon [data-theme-icon="sun"] {
  opacity: 0;
  visibility: hidden;
}

.header-theme-toggle[aria-pressed="true"] .header-theme-toggle-icon [data-theme-icon="moon"] {
  opacity: 0;
  visibility: hidden;
}

.header-theme-toggle[aria-pressed="true"] .header-theme-toggle-icon [data-theme-icon="sun"] {
  opacity: 1;
  visibility: visible;
}

.header-divider { width: 1px; height: 24px; background: #E5E7EB; margin: 0 4px; }

.header-divider--compact {
  height: 28px;
  margin: 0 2px;
}

/* ===== Vetrrix Services catalog ===== */
.account-card.vetrrix-services-page {
  padding: 0;
  overflow: hidden;
}

.vetrrix-services {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vetrrix-services-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: stretch;
  padding: 32px 32px 28px;
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(220, 38, 38, 0.18) 0%, transparent 55%),
    linear-gradient(145deg, #0b0f19 0%, #151d2e 48%, #1a2438 100%);
  color: #fff;
}

.vetrrix-services-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fca5a5;
}

.vetrrix-services-title {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  max-width: 28rem;
}

.vetrrix-services-lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.65;
  color: #cbd5e1;
  max-width: 36rem;
}

.vetrrix-services-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vetrrix-services-hero-secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.vetrrix-services-hero-secondary:hover {
  border-color: #fff;
  color: #0b0f19;
  background: #fff;
}

.vetrrix-services-hero-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 168px;
}

.vetrrix-services-stat {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.vetrrix-services-stat-value {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.vetrrix-services-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.35;
}

.vetrrix-services-installed,
.vetrrix-services-catalog {
  padding: 28px 32px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.vetrrix-services-section-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.vetrrix-services-section-title i {
  color: var(--color-primary);
}

.vetrrix-services-section-title--light {
  color: #fff;
}

.vetrrix-services-section-title--light i {
  color: #fca5a5;
}

.vetrrix-services-section-intro {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  max-width: 42rem;
}

.vetrrix-services-section-intro--catalog {
  margin-bottom: 0;
}

.vetrrix-services-installed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vetrrix-services-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #f3f4f6;
  color: var(--text-muted);
}

.vetrrix-services-chip--active {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.vetrrix-services-catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.vetrrix-services-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vetrrix-services-filter {
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.vetrrix-services-filter:hover {
  border-color: #d1d5db;
  color: var(--text-primary);
}

.vetrrix-services-filter.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.vetrrix-services-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.vetrrix-services-app-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.vetrrix-services-app-card:hover {
  border-color: #fecaca;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}

.vetrrix-services-app-card-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: minmax(48px, auto) auto;
  column-gap: 14px;
  row-gap: 12px;
  align-items: start;
}

.vetrrix-services-app-icon {
  grid-row: 1;
  grid-column: 1;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
  border: 1px solid #fecaca;
  color: #b91c1c;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.vetrrix-services-app-badges {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-content: flex-start;
  min-height: 48px;
}

.vetrrix-services-pill {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

.vetrrix-services-pill--category {
  background: #e5e7eb;
  color: #1f2937;
  border: 1px solid #9ca3af;
}

.vetrrix-services-pill--active {
  background: #d1fae5;
  color: #064e3b;
  border: 1px solid #34d399;
}

.vetrrix-services-app-name {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #111827;
}

.vetrrix-services-app-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  flex: 1;
}

.vetrrix-services-app-best {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

.vetrrix-services-app-best span {
  font-weight: 700;
  color: var(--text-primary);
}

.vetrrix-services-outcomes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vetrrix-services-outcomes li {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.vetrrix-services-outcomes--compact li {
  font-size: 10px;
}

.vetrrix-services-app-cta,
.vetrrix-services-addon-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.vetrrix-services-app-cta:hover,
.vetrrix-services-addon-cta:hover {
  background: #fef2f2;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.vetrrix-services-catalog--addons {
  background: #f8fafc;
}

.vetrrix-services-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.vetrrix-services-addon-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vetrrix-services-addon-card:hover {
  border-color: #fecaca;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.06);
}

.vetrrix-services-addon-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fef2f2;
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 17px;
}

.vetrrix-services-addon-name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.vetrrix-services-addon-summary {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.vetrrix-services-addon-cta {
  align-self: center;
  white-space: nowrap;
}

.vetrrix-services-process {
  padding: 28px 32px;
  background: linear-gradient(135deg, #0b0f19 0%, #1a2235 100%);
}

.vetrrix-services-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.vetrrix-services-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vetrrix-services-step-num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
}

.vetrrix-services-steps strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #fff;
}

.vetrrix-services-steps span {
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
}

.vetrrix-services-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 32px 28px;
  background: #fff;
}

.vetrrix-services-footer-text strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--text-primary);
}

.vetrrix-services-footer-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 32rem;
}

@media (max-width: 900px) {
  .vetrrix-services-hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .vetrrix-services-hero-panel {
    grid-template-columns: repeat(3, 1fr);
    min-width: 0;
  }

  .vetrrix-services-installed,
  .vetrrix-services-catalog,
  .vetrrix-services-process,
  .vetrrix-services-footer {
    padding: 22px 20px;
  }

  .vetrrix-services-filters {
    margin-top: 16px;
  }

  .vetrrix-services-addon-card {
    grid-template-columns: auto 1fr;
  }

  .vetrrix-services-addon-cta {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .vetrrix-services-hero-panel {
    grid-template-columns: 1fr;
  }

  .vetrrix-services-app-grid,
  .vetrrix-services-addon-grid {
    grid-template-columns: 1fr;
  }
}

/* Account dropdown */
.header-account-menu { position: relative; }

.header-account-toggle {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
  padding: 0;
}
.header-account-toggle:hover { background: #F3F4F6; color: var(--color-primary); }
.header-account-toggle:focus { outline: none; box-shadow: 0 0 0 2px var(--color-primary); }
.header-account-toggle i { font-size: 22px; line-height: 1; }

.header-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255,255,255,0.3);
}
.header-account-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, #b91c1c 100%);
  color: white;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  flex-shrink: 0;
  pointer-events: none;
}

.header-account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.07);
  border: 1px solid #E5E7EB;
  z-index: 300;
  overflow: hidden;
}

.header-account-info {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #F3F4F6;
  background: #F9FAFB;
}
.header-account-name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-account-role {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.header-account-items { padding: 6px 0; }

.header-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.header-account-item:hover {
  background: #FEF2F2;
  color: var(--color-primary);
}
.header-account-item.active {
  color: var(--color-primary);
  font-weight: 600;
  background: #FEF2F2;
}
.header-account-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #F3F4F6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.header-account-item:hover .header-account-item-icon,
.header-account-item.active .header-account-item-icon {
  background: #FEE2E2;
  color: var(--color-primary);
}
.header-account-divider {
  height: 1px;
  background: #F3F4F6;
  margin: 4px 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.header-icon-btn-danger:hover { background: #FEF2F2; color: #B91C1C; }

.admin-help-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.admin-help-modal.is-open {
  display: flex;
}

.admin-help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.62);
}

.admin-help-dialog {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 32px));
  max-height: min(90vh, 820px);
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.admin-help-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid #E5E7EB;
}

.admin-help-kicker {
  margin: 0 0 4px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-help-header h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.admin-help-header p {
  margin: 6px 0 0;
  color: #4B5563;
  font-size: 14px;
}

.admin-help-close {
  width: 38px;
  height: 38px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #4B5563;
  cursor: pointer;
}

.admin-help-close:hover,
.admin-help-close:focus {
  background: #F3F4F6;
  color: #111827;
  outline: none;
}

.admin-help-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 230px 1fr;
}

.admin-help-tabs {
  background: #F9FAFB;
  border-right: 1px solid #E5E7EB;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.admin-help-tab {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4B5563;
  cursor: pointer;
  font-weight: 700;
  padding: 10px 12px;
  text-align: left;
}

.admin-help-tab:hover,
.admin-help-tab:focus {
  background: #F3F4F6;
  color: #111827;
  outline: none;
}

.admin-help-tab.active {
  background: var(--color-primary);
  color: #FFFFFF;
}

.admin-help-panels {
  padding: 22px 24px 28px;
  overflow-y: auto;
}

.admin-help-panel {
  display: none;
}

.admin-help-panel.active {
  display: block;
}

.admin-help-panel h3 {
  margin: 0 0 16px;
  font-size: 20px;
}

.help-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.help-topic {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 14px;
}

.help-topic h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.help-topic p,
.help-topic li,
.help-steps li {
  color: #374151;
  font-size: 14px;
}

.help-topic p {
  margin: 0;
}

.help-topic ul,
.help-steps {
  margin: 0;
  padding-left: 20px;
}

.help-topic li,
.help-steps li {
  margin-bottom: 10px;
}

.help-steps {
  display: grid;
  gap: 8px;
  max-width: 760px;
}

.admin-content {
  padding: 16px;
  min-width: 0;
  overflow-x: hidden;
}

@media (min-width: 901px) {
  .admin-content {
    padding: 24px 32px;
  }
}

/* Analytics Cards */
.ana-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.ana-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ana-info h5 {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ana-info .ana-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-dark);
}

.ana-icon {
  width: 40px;
  height: 40px;
  background: #F3F4F6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 18px;
}

/* Form Switches & Tables */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D1D5DB;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: var(--color-success);
}

input:checked+.slider:before {
  transform: translateX(20px);
}

/* Footer - Dark */
footer {
  background: var(--color-dark);
  color: var(--text-white);
  padding: 80px 0 40px;
  margin-top: 100px;
}

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

@media (max-width: 1024px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-row {
    display: none;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero {
    padding: 60px 0 70px;
  }

  nav ul {
    display: none;
  }
}

/* Pagination & Progress */
.pagination-container {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pagination-btn {
  padding: 8px 14px;
  font-size: 13px;
  background: white;
  color: var(--text-muted);
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}

.pagination-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.pagination-btn.active:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: white;
}

.inventory-progress-bar {
  flex-grow: 1;
  height: 12px;
  background: #F3F4F6;
  border-radius: 6px;
  overflow: hidden;
}

.inventory-progress-fill {
  height: 100%;
  background: var(--color-primary);
}

/* Admin Table Enhancements */
.row-unread {
  border-left: 4px solid var(--color-primary) !important;
  background-color: #FFF5F5 !important;
}

.car-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--color-gray-200);
}

/* ============================================
   PROFESSIONAL FORM STYLES
   ============================================ */

/* Form Cards */
.form-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .form-card {
    padding: 16px;
    border-radius: 10px;
  }
}

/* Form Sections */
.form-section {
  margin-bottom: 24px;
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-gray-100);
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-section-title i {
  color: var(--color-primary);
  font-size: 16px;
}

/* Form Grid Layout */
.form-grid {
  display: grid;
  gap: 16px;
}

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

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 1024px) {
  .form-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 640px) {
  .form-grid-2,
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Form Groups */
.form-group {
  display: flex;
  flex-direction: column;
}

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

/* Form Labels */
.form-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-label .required {
  color: var(--color-primary);
}

.form-label .optional {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 12px;
}

/* Form Inputs - Universal Styling */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-main);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  transition: all 0.2s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-control:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="search"]:hover,
select:hover,
textarea:hover {
  border-color: var(--color-gray-300);
  background-color: white;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  background-color: white;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

/* Textarea Specific */
textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

textarea.small {
  min-height: 80px;
}

textarea.large {
  min-height: 200px;
}

/* Select Styling */
select {
  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='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

select:focus {
  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='%23DC2626' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* File Input */
input[type="file"] {
  padding: 10px;
  background: var(--color-gray-50);
  border: 2px dashed var(--color-gray-300);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}

input[type="file"]:hover {
  border-color: var(--color-primary);
  background: #FFF5F5;
}

input[type="file"]:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

/* Checkbox and Radio */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Form Help Text */
.form-help {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-help i {
  font-size: 12px;
}

/* Form Errors */
.form-error {
  color: var(--color-error);
  font-size: 13px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-error::before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
}

.form-control.error,
input.error,
select.error,
textarea.error {
  border-color: var(--color-error);
  background-color: #FEF2F2;
}

/* Error Alert Box */
.alert-error {
  background: #FEE2E2;
  color: #991B1B;
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.alert-error::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
}

.alert-success {
  background: #D1FAE5;
  color: #065F46;
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.alert-success::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid var(--color-gray-100);
}

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Button Sizes */
.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}

/* Button Variants */
.btn-danger {
  background: var(--color-error);
  color: white;
}

.btn-danger:hover {
  background: #DC2626;
}

.btn-success {
  background: var(--color-success);
  color: white;
}

.btn-success:hover {
  background: #059669;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-gray-300);
  color: var(--text-main);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ============================================
   ADMIN PAGE LAYOUTS - RESPONSIVE
   ============================================ */

/* Two Column Form Layout */
.admin-layout-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

@media (max-width: 1200px) {
  .admin-layout-split {
    grid-template-columns: 1fr;
  }
}

/* Sidebar Panel */
.sidebar-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .panel-card {
    padding: 16px;
    border-radius: 10px;
  }
}

.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title .count {
  background: var(--color-gray-100);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* Photo Grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

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

.photo-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

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

.photo-item.is-main {
  border: 3px solid var(--color-primary);
}

.photo-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
}

.photo-btn {
  background: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo-btn:hover {
  transform: scale(1.05);
}

.photo-btn.delete {
  background: #FEE2E2;
  color: #991B1B;
}

.photo-btn.delete:hover {
  background: #FECACA;
}

.photo-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: var(--color-primary);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Upload Zone */
.upload-zone {
  border: 2px dashed var(--color-gray-300);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  background: var(--color-gray-50);
  transition: all 0.2s;
  cursor: pointer;
}

.upload-zone:hover {
  border-color: var(--color-primary);
  background: #FFF5F5;
}

.upload-zone i {
  font-size: 32px;
  color: var(--color-gray-400);
  margin-bottom: 12px;
}

.upload-zone p {
  color: var(--text-muted);
  font-size: 14px;
}

.upload-zone input[type="file"] {
  display: none;
}

/* Create car: hidden file control lives inside the main form so multipart submits always include uploads */
.car-create-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.form-card > form:first-of-type {
  position: relative;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-actions .btn {
  width: 100%;
  justify-content: center;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 48px;
  color: var(--color-gray-300);
  margin-bottom: 16px;
}

.empty-state p {
  font-size: 14px;
}

/* ============================================
   MOBILE SIDEBAR - RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .admin-help-body {
    grid-template-columns: 1fr;
  }

  .admin-help-tabs {
    border-right: 0;
    border-bottom: 1px solid #E5E7EB;
    flex-direction: row;
    overflow-x: auto;
  }

  .admin-help-tab {
    white-space: nowrap;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .admin-main {
    margin-left: 0;
  }

  .admin-topbar {
    padding: 0 20px;
  }

  .admin-content {
    padding: 20px;
  }

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

@media (max-width: 640px) {
  .admin-help-modal {
    padding: 12px;
  }

  .admin-help-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .admin-help-header {
    padding: 18px;
  }

  .admin-help-header h2 {
    font-size: 20px;
  }

  .admin-help-panels {
    padding: 18px;
  }

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

  .admin-topbar {
    height: 60px;
    flex-direction: column;
    height: auto;
    padding: 16px 20px;
    gap: 12px;
    align-items: flex-start;
  }

  .admin-topbar h1 {
    font-size: 18px;
  }
}

/* Manager topbar menu toggle (admin only — never style public header with this class) */
.admin-topbar .mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-main);
  cursor: pointer;
  padding: 8px;
}

@media (max-width: 1024px) {
  .admin-topbar .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.sidebar-overlay.active {
  display: block;
}

/* ============================================
   DATA TABLES - RESPONSIVE
   ============================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.data-table th,
.data-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-100);
}

.data-table th {
  background: var(--color-gray-50);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.data-table tbody tr:hover {
  background: var(--color-gray-50);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive Table */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    min-width: 600px;
  }

  .data-table th,
  .data-table td {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-success {
  background: #D1FAE5;
  color: #065F46;
}

.badge-warning {
  background: #FEF3C7;
  color: #92400E;
}

.badge-danger {
  background: #FEE2E2;
  color: #991B1B;
}

.badge-info {
  background: #DBEAFE;
  color: #1E40AF;
}

/* ============================================
   LOGIN PAGE - CENTERED & RESPONSIVE
   ============================================ */

.auth-footer-minimal .footer-grid {
  display: none;
}

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: white;
  padding: 48px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

@media (max-width: 480px) {
  .login-card {
    padding: 32px 24px;
    border-radius: 16px;
  }
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-header h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.login-header p {
  color: var(--text-muted);
  font-size: 15px;
}

.login-footer {
  text-align: center;
  margin-top: 24px;
}

.login-footer a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.login-footer a:hover {
  text-decoration: underline;
}

.login-remember-row .login-remember-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
  margin: 0;
}

.login-remember-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

/* Let browser autofill remain readable on the login card */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--text-main);
  caret-color: var(--text-main);
  transition: background-color 99999s ease-out;
}

.login-remember-help {
  margin: 8px 0 0 28px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

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

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

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

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }

.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.hidden-mobile {
  display: block;
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none;
  }
}

/* ============================================
   ENHANCED DATA TABLES
   ============================================ */

/* Table Container */
.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

/* Table Toolbar */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  align-items: center;
  justify-content: space-between;
}

.table-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  flex: 1;
}

.table-toolbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-toolbar-left,
  .table-toolbar-right {
    width: 100%;
  }
}

/* Search Box */
.table-search {
  position: relative;
  min-width: 280px;
}

.table-search input {
  padding-left: 44px;
  width: 100%;
}

.table-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.table-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  min-width: 0;
  max-width: 100%;
}

.table-card-summary {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Filter Dropdowns */
.table-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.table-filter {
  min-width: 140px;
}

.table-filter select {
  padding: 10px 14px;
  font-size: 14px;
}

/* Enhanced Table */
.enhanced-table {
  width: 100%;
  border-collapse: collapse;
}

.enhanced-table th,
.enhanced-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-100);
}

.enhanced-table th {
  background: white;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.enhanced-table th:hover {
  background: var(--color-gray-50);
}

.enhanced-table th.sortable::after {
  content: "\f0dc";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
  color: var(--color-gray-300);
  font-size: 10px;
}

.enhanced-table th.sort-asc::after {
  content: "\f0de";
  color: var(--color-primary);
}

.enhanced-table th.sort-desc::after {
  content: "\f0dd";
  color: var(--color-primary);
}

.enhanced-table th.no-sort {
  cursor: default;
}

.enhanced-table th.no-sort:hover {
  background: white;
}

.enhanced-table tbody tr {
  transition: background-color 0.15s ease;
}

.enhanced-table tbody tr:hover {
  background: var(--color-gray-50);
}

.enhanced-table tbody tr:last-child td {
  border-bottom: none;
}

.enhanced-table tbody tr.selected {
  background: #FEF2F2;
}

/* Table Actions */
.table-actions {
  display: flex;
  gap: 8px;
}

.table-actions .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--color-gray-100);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

.table-actions .btn-icon:hover {
  background: var(--color-primary);
  color: white;
}

.table-actions .btn-icon.danger:hover {
  background: var(--color-error);
}

/* Table Footer */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

.table-info {
  color: var(--text-muted);
  font-size: 14px;
}

.table-pagination {
  display: flex;
  gap: 8px;
}

/* Status Pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-pill.active {
  background: #D1FAE5;
  color: #065F46;
}

.status-pill.active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
}

.status-pill.sold {
  background: #DBEAFE;
  color: #1E40AF;
}

.status-pill.off-market {
  background: #FEF3C7;
  color: #92400E;
}

.status-pill.deleted {
  background: #FEE2E2;
  color: #991B1B;
}

.status-pill.unread {
  background: #FEE2E2;
  color: #991B1B;
}

.status-pill.read {
  background: var(--color-gray-100);
  color: var(--text-muted);
}

/* Quick Filter Tabs */
.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 10px 20px;
  background: white;
  border: 2px solid var(--color-gray-200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.filter-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.filter-tab .count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-size: 12px;
}

.filter-tab.active .count {
  background: rgba(255, 255, 255, 0.3);
}

.manager-context-note {
  margin: -8px 0 16px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================
   CRM CONTACT WORKSPACE
   ============================================ */

.crm-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crm-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.crm-page-head h2 {
  margin: 4px 0 6px;
  font-size: 26px;
}

.crm-page-head .text-muted {
  max-width: 760px;
  margin: 0;
}

.crm-primary-action {
  white-space: nowrap;
}

.crm-filter-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(320px, 2fr) auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.crm-filter-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  color: var(--text-dark);
}

.crm-filter-panel label span {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.crm-filter-search .table-search {
  min-width: 0;
}

.crm-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.crm-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.crm-filter-actions .btn {
  min-height: 44px;
}

.crm-quick-filters,
.crm-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-filter-chip,
.crm-active-filters span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: white;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.crm-filter-chip:hover,
.crm-filter-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.crm-table-container {
  border-radius: 8px;
}

.crm-list-summary {
  padding: 14px 16px;
}

.crm-list-summary strong {
  font-size: 22px;
}

.crm-contact-table th,
.crm-contact-table td {
  vertical-align: middle;
}

.crm-contact-cell,
.crm-stage-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.crm-contact-name {
  color: var(--text-dark);
  font-weight: 700;
  text-decoration: none;
}

.crm-contact-name:hover {
  color: var(--color-primary);
}

.crm-contact-meta {
  color: var(--text-muted);
  font-size: 13px;
}

.crm-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
}

.crm-stage-cell {
  max-width: 220px;
}

.crm-stage-cell .form-control {
  min-width: 180px;
}

.crm-row-actions {
  justify-content: flex-end;
}

.crm-row-actions form {
  margin: 0;
}

/* CRM list workspace */
.manager-state-grid.crm-pipeline-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.crm-view-toggle {
  display: inline-flex;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.crm-view-btn {
  border: none;
  background: transparent;
  padding: 8px 12px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.crm-view-btn:hover {
  background: #f9fafb;
  color: var(--text-primary);
}

.crm-view-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.crm-view-btn + .crm-view-btn {
  border-left: 1px solid #e5e7eb;
}

.crm-list-table thead th {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.crm-list-table tbody tr {
  transition: background 0.12s;
}

.crm-list-table tbody tr:hover {
  background: #fafbfc;
}

.crm-row-contact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.crm-row-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

.crm-row-identity {
  min-width: 0;
  flex: 1;
}

.crm-row-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 4px;
}

.crm-row-name:hover {
  color: var(--color-primary);
}

.crm-row-channels {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.crm-row-channels a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-row-channels a:hover {
  color: var(--color-primary);
}

.crm-row-channels i {
  width: 14px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
}

.crm-row-source {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.crm-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.crm-pipeline-select-wrap {
  display: block;
  max-width: 200px;
}

.crm-pipeline-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.crm-pipeline-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.crm-pipeline-select.stage-new_lead {
  background-color: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.crm-pipeline-select.stage-contacted {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}

.crm-pipeline-select.stage-appointment {
  background-color: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.crm-pipeline-select.stage-offer {
  background-color: #ede9fe;
  color: #5b21b6;
  border-color: #ddd6fe;
}

.crm-pipeline-select.stage-won {
  background-color: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.crm-pipeline-select.stage-lost {
  background-color: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}

.crm-row-interest {
  font-size: 13px;
  color: var(--text-primary);
  max-width: 220px;
  line-height: 1.45;
}

.crm-row-interest.is-empty {
  color: var(--text-muted);
}

.crm-row-date {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .manager-state-grid.crm-pipeline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .crm-list-table .col-crm-type,
  .crm-list-table .col-crm-status {
    display: none;
  }

  .crm-list-table tbody td.col-crm-type,
  .crm-list-table tbody td.col-crm-status {
    display: none;
  }
}

/* Empty Table State */
.table-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.table-empty i {
  font-size: 48px;
  color: var(--color-gray-300);
  margin-bottom: 16px;
}

.table-empty h3 {
  font-size: 18px;
  color: var(--text-main);
  margin-bottom: 8px;
}

.table-empty p {
  font-size: 14px;
  margin-bottom: 24px;
}

/* Row highlight animation */
@keyframes rowHighlight {
  0% { background-color: #FEF3C7; }
  100% { background-color: transparent; }
}

.row-highlight {
  animation: rowHighlight 2s ease;
}

/* Responsive Table Scroll */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1024px) {
  .enhanced-table:not(.table-mobile-cards) {
    min-width: 800px;
  }

  .enhanced-table th,
  .enhanced-table td {
    padding: 12px 16px;
  }
}

/* Checkbox Column */
.col-checkbox {
  width: 40px;
}

.col-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* Thumbnail Column */
.col-thumb {
  width: 70px;
}

.table-thumb {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--color-gray-200);
}

/* Actions Column */
.col-actions {
  width: 120px;
  text-align: right;
}

/* Role Badges for Users Table */
.status-pill.role-dev {
  background: #DBEAFE;
  color: #1E40AF;
}

.status-pill.role-manager {
  background: #D1FAE5;
  color: #065F46;
}

.status-pill.role-user {
  background: var(--color-gray-100);
  color: var(--text-muted);
}

/* Unread Row Highlight */
.row-unread {
  background: #FFF5F5;
  border-left: 4px solid var(--color-primary);
}

.row-unread:hover {
  background: #FEE2E2;
}

/* Row Highlight (Current User) */
.row-highlight {
  background: #FFFBEB;
}

.row-highlight:hover {
  background: #FEF3C7;
}

/* Action Badges for Logs Table */
.status-pill.action-login,
.status-pill.action-logout {
  background: #DBEAFE;
  color: #1E40AF;
}

.status-pill.action-car_create {
  background: #D1FAE5;
  color: #065F46;
}

.status-pill.action-car_update {
  background: #FEF3C7;
  color: #92400E;
}

.status-pill.action-car_delete {
  background: #FEE2E2;
  color: #991B1B;
}

.status-pill.action-message_read,
.status-pill.action-message_delete {
  background: #F3E8FF;
  color: #7C3AED;
}

.status-pill.action-photo_upload,
.status-pill.action-photo_delete {
  background: #ECFEFF;
  color: #0E7490;
}

/* Text Utilities */
.text-muted {
  color: var(--text-muted);
}

/* Badge Style */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.badge-danger {
  background: #FEE2E2;
  color: #991B1B;
}

.badge-info {
  background: #DBEAFE;
  color: #1E40AF;
}

.badge-secondary {
  background: var(--color-gray-100);
  color: var(--text-muted);
}

/* ============================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
   Target: 360x640, 390x844 viewports
   ============================================ */

/* Global Touch-Friendly Targets (min 44px) */
.btn,
.btn-icon,
.pagination-btn,
.filter-tab,
.view-btn,
.photo-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.btn-icon {
  min-width: 44px;
  min-height: 44px;
}

/* Improved Focus States */
.btn:focus-visible,
.btn-icon:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   PUBLIC HEADER - MOBILE
   ============================================ */
@media (max-width: 768px) {
  .site-header-inner {
    padding: 10px 0;
  }

  .site-header-logo {
    max-height: 44px;
    max-width: min(180px, 48vw);
  }
}

/* ============================================
   PUBLIC FOOTER - MOBILE
   ============================================ */
@media (max-width: 768px) {
  .site-footer {
    padding: 40px 0 24px;
  }

  .footer-grid {
    gap: 24px;
  }

  .footer-section {
    min-width: 100%;
  }

  .footer-section.logo-section {
    min-width: 100%;
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .footer-bottom-links {
    justify-content: center;
  }
}

/* ============================================
   ADMIN SIDEBAR - MOBILE DRAWER
   ============================================ */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .admin-main {
    margin-left: 0;
  }

  .admin-topbar {
    padding: 16px;
    height: auto;
    min-height: 60px;
  }

  .admin-topbar h1 {
    font-size: 18px !important;
  }

  .admin-content {
    padding: 16px;
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.active {
    display: block;
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .admin-topbar {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .admin-topbar > div:last-child {
    margin-left: auto;
  }
}

/* Sidebar menu touch targets */
.sidebar-menu a {
  padding: 14px 20px;
  min-height: 48px;
}

/* ============================================
   DATA TABLES - MOBILE RESPONSIVE
   ============================================ */

/* Mobile-first table card view - active below tablet/compact desktop widths */
@media (max-width: 1180px) {
  .table-container {
    border-radius: 12px;
  }

  .table-toolbar {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
  }

  .table-toolbar-left,
  .table-toolbar-right {
    width: 100%;
  }

  .table-search {
    min-width: 100%;
  }

  .table-filters {
    width: 100%;
    flex-direction: column;
  }

  .table-filter {
    min-width: 100%;
  }

  .table-footer {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    text-align: center;
  }

  .table-pagination {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pagination-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
  }

  /* Table actions on mobile - larger touch targets */
  .table-actions {
    gap: 4px;
  }

  .table-actions .btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Card-style table rows for compact admin content widths */
@media (max-width: 1180px) {
  .crm-page-head,
  .crm-filter-panel {
    grid-template-columns: 1fr;
  }

  .crm-page-head .text-muted {
    max-width: 680px;
  }

  .crm-filter-actions {
    justify-content: flex-start;
  }

  .crm-primary-action,
  .crm-filter-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .crm-contact-table tbody td:first-child::before {
    display: none;
  }

  .crm-contact-table tbody td:first-child {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .crm-stage-cell {
    width: 100%;
    max-width: none;
  }

  .crm-stage-cell .form-control {
    min-width: 0;
    width: 100%;
  }

  .crm-row-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .crm-row-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Hide thead on mobile for card view */
  .table-mobile-cards thead {
    display: none;
  }

  .table-scroll {
    overflow-x: visible;
  }

  .table-mobile-cards {
    min-width: 0 !important;
    width: 100%;
  }

  .table-mobile-cards tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .table-mobile-cards tbody tr {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    padding: 16px;
    gap: 8px;
  }

  .table-mobile-cards tbody tr:hover {
    border-color: var(--color-primary);
  }

  .table-mobile-cards tbody tr.row-unread {
    border-left: 4px solid var(--color-primary);
    background: #FFF5F5;
  }

  .table-mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
    border: none;
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .table-mobile-cards tbody td > * {
    min-width: 0;
  }

  .table-mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    min-width: 80px;
  }

  .table-mobile-cards tbody td:last-child {
    border-top: 1px solid var(--color-gray-100);
    padding-top: 12px;
    margin-top: 4px;
    justify-content: flex-end;
  }

  .table-mobile-cards tbody td:last-child::before {
    display: none;
  }

  .table-mobile-cards tbody td.col-thumb {
    order: -1;
    justify-content: center;
  }

  .table-mobile-cards tbody td.col-thumb::before {
    display: none;
  }

  .table-mobile-cards .table-thumb {
    width: 100%;
    height: 120px;
    border-radius: 8px;
  }

  .enhanced-table:not(.table-mobile-cards) {
    min-width: 500px;
  }

  .enhanced-table:not(.table-mobile-cards) th,
  .enhanced-table:not(.table-mobile-cards) td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .enhanced-table:not(.table-mobile-cards) .col-thumb {
    width: 50px;
  }

  .enhanced-table:not(.table-mobile-cards) .table-thumb {
    width: 40px;
    height: 40px;
  }

  .enhanced-table:not(.table-mobile-cards) .col-actions {
    width: auto;
  }
}

/* ============================================
   FILTER TABS - MOBILE SCROLL
   ============================================ */
@media (max-width: 768px) {
  .crm-page-head h2 {
    font-size: 22px;
  }

  .crm-filter-panel {
    padding: 14px;
  }

  .crm-filter-grid {
    grid-template-columns: 1fr;
  }

  .crm-filter-actions {
    flex-direction: column;
  }

  .crm-quick-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .crm-quick-filters::-webkit-scrollbar {
    display: none;
  }

  .crm-filter-chip {
    flex-shrink: 0;
  }

  .crm-list-summary {
    align-items: flex-start;
  }

  .crm-active-filters {
    width: 100%;
  }

  .filter-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-bottom: 16px;
    gap: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .filter-tab {
    flex-shrink: 0;
    padding: 12px 16px;
    font-size: 13px;
    min-height: 44px;
  }

  .filter-tabs .btn {
    flex-shrink: 0;
    margin-left: 8px;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .filter-tab {
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* ============================================
   FORMS - MOBILE OPTIMIZED
   ============================================ */
@media (max-width: 768px) {
  .form-card {
    padding: 16px;
    border-radius: 12px;
  }

  .form-section {
    margin-bottom: 24px;
  }

  .form-section-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .form-grid-2,
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr;
  }

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

  .form-label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="search"],
  select,
  textarea {
    padding: 14px 16px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 48px;
  }

  textarea {
    min-height: 100px;
  }

  .form-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
  }

  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Upload zone */
  .upload-zone {
    padding: 32px 16px;
  }

  .upload-zone i {
    font-size: 28px;
  }

  /* Photo grid */
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .photo-btn {
    padding: 8px 12px;
    min-width: 40px;
    min-height: 40px;
  }
}

/* ============================================
   ADMIN LAYOUT SPLIT - MOBILE STACK
   ============================================ */
@media (max-width: 1024px) {
  .admin-layout-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sidebar-panel {
    order: -1;
    gap: 16px;
  }

  .panel-card {
    padding: 16px;
  }
}

/* ============================================
   ANALYTICS CARDS - MOBILE
   ============================================ */
@media (max-width: 640px) {
  .ana-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ana-card {
    padding: 16px;
  }

  .ana-info .ana-value {
    font-size: 20px;
  }
}

/* ============================================
   STATS ROW - MOBILE
   ============================================ */
@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: -40px;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .stat-info h4 {
    font-size: 24px;
  }

  .stat-info p {
    font-size: 13px;
  }
}

/* ============================================
   HERO SECTION - MOBILE
   ============================================ */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0 100px;
  }

  .hero h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  .hero p {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .hero-btns {
    flex-direction: column;
    gap: 12px;
  }

  .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   CAR CARDS GRID - MOBILE
   ============================================ */
@media (max-width: 768px) {
  .car-card {
    border-radius: 12px;
  }

  .car-img-wrapper {
    height: 180px;
  }

  .car-card-body {
    padding: 14px 16px 16px;
  }

  .car-card-header h3 {
    font-size: 16px;
  }

  .car-price {
    font-size: 16px;
  }

  .car-specs-mini {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .spec-item {
    font-size: 12px;
  }
}

/* ============================================
   CAR DETAIL PAGE - MOBILE
   ============================================ */
@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
  }

  .detail-info-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 24px;
  }

  .detail-info-header h1 {
    font-size: 24px;
  }

  .detail-info-header .price {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .gallery-main img {
    height: 280px;
  }

  .gallery-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .gallery-thumbnails {
    gap: 6px;
  }

  .gallery-thumb {
    width: 60px;
    height: 45px;
  }

  .spec-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .spec-box {
    padding: 12px;
  }

  .tax-box {
    padding: 16px;
    margin-top: 24px;
  }

  /* Loan calculator - mobile */
  .loan-calculator-box {
    padding: 16px;
  }
}

/* ============================================
   LIGHTBOX - MOBILE
   ============================================ */
@media (max-width: 768px) {
  .lightbox-content {
    max-width: 95vw;
    max-height: 70vh;
  }

  .lightbox-content img {
    max-width: 95vw;
    max-height: 65vh;
  }

  .lightbox-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }

  .lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .lightbox-nav.prev {
    left: 8px;
  }

  .lightbox-nav.next {
    right: 8px;
  }

  .lightbox-thumbnails {
    bottom: 70px;
    max-width: 90vw;
    gap: 6px;
  }

  .lightbox-thumb {
    width: 50px;
    height: 38px;
  }
}

/* ============================================
   SECTION TITLES - MOBILE
   ============================================ */
@media (max-width: 768px) {
  .section-title {
    margin-bottom: 32px;
  }

  .section-title h2 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .section-title p {
    font-size: 14px;
  }
}

/* ============================================
   LOGIN PAGE - MOBILE
   ============================================ */
@media (max-width: 480px) {
  .login-container {
    padding: 16px;
  }

  .login-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .login-header h2 {
    font-size: 24px;
  }

  .login-header p {
    font-size: 14px;
  }
}

/* ============================================
   TABLE ACTIONS - MOBILE
   ============================================ */
@media (max-width: 768px) {
  .table-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .table-actions .btn-icon {
    width: 40px;
    height: 40px;
  }

  .table-actions .btn {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ============================================
   SELL SUBMISSIONS STATS ROW
   ============================================ */
.sell-stats-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sell-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  flex: 1;
  min-width: 200px;
}

.sell-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.sell-stat-info {
  display: flex;
  flex-direction: column;
}

.sell-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.sell-stat-label {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .sell-stats-row {
    gap: 12px;
  }

  .sell-stat-card {
    padding: 14px 16px;
    min-width: 100%;
    flex: 1 1 100%;
  }

  .sell-stat-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .sell-stat-value {
    font-size: 24px;
  }

  .sell-stat-label {
    font-size: 12px;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  .mobile-stack {
    flex-direction: column !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }
}

/* ============================================
   PREVENT HORIZONTAL SCROLL
   ============================================ */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================
   iOS SPECIFIC FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
  /* iOS-specific input styling to prevent zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Fix iOS momentum scrolling */
  .table-scroll,
  .gallery-thumbnails,
  .lightbox-thumbnails,
  .filter-tabs {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  .btn,
  .filter-tab,
  .pagination-btn {
    border: 2px solid currentColor;
  }

  .status-pill {
    border: 1px solid currentColor;
  }
}

/* ============================================
   PWA + MOBILE APP SHELL
   ============================================ */
.pwa-install-btn[hidden] {
  display: none !important;
}

.pwa-install-btn.is-visible {
  display: inline-flex;
}

.pwa-install-section {
  margin-top: 8px;
}

.pwa-install-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
}

.pwa-install-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.pwa-install-card {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 16px;
  background: #F9FAFB;
  display: grid;
  gap: 10px;
  align-content: start;
}

.pwa-install-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pwa-install-card-head i {
  color: var(--color-primary);
  font-size: 18px;
}

.pwa-install-card-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.pwa-install-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.pwa-install-status.is-visible {
  display: flex;
}

.pwa-install-status[hidden] {
  display: none !important;
}

.pwa-install-status i {
  margin-top: 2px;
  color: var(--color-success);
}

.pwa-install-status--guide i,
.pwa-install-status--muted i {
  color: var(--color-primary);
}

.pwa-install-status--installed i {
  color: var(--color-success);
}

.pwa-install-platforms {
  margin-top: 4px;
}

.public-pwa-install {
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.public-pwa-install:hover,
.public-pwa-install:focus {
  background: #FFFFFF;
  color: var(--color-primary);
  outline: none;
}

.admin-topbar-title,
.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-topbar-actions {
  flex: 0 0 auto;
  gap: 6px;
}

.pwa-offline {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #F3F4F6;
}

.pwa-offline-card {
  width: min(460px, 100%);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.pwa-offline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 900;
}

.pwa-offline-card h1 {
  margin: 0 0 10px;
  font-size: 26px;
}

.pwa-offline-card p {
  margin: 0 0 22px;
  color: var(--text-muted);
}

@media (display-mode: standalone) {
  .admin-topbar {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

@media (max-width: 900px) {
  .admin-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .admin-main {
    width: 100%;
  }

  .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title actions"
      "search search";
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    min-height: 0;
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.08);
  }

  .admin-topbar-title {
    grid-area: title;
  }

  .admin-topbar-actions {
    grid-area: actions;
    max-width: min(48vw, 240px);
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-end;
  }

  .admin-topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .admin-global-search {
    grid-area: search;
    order: initial;
    flex-basis: auto;
    min-width: 0;
    min-height: 44px;
    border-radius: 12px;
  }

  .page-title-actions {
    min-width: 0;
    overflow: hidden;
  }

  .page-title-actions h1 {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-icon-btn,
  .admin-topbar .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
  }

  .admin-topbar .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    font-size: 20px;
  }

  .admin-content {
    padding: 14px;
  }
}

@media (max-width: 640px) {
  .admin-topbar {
    padding: 8px 10px 10px;
    gap: 8px;
  }

  .admin-topbar-actions {
    max-width: 46vw;
    gap: 4px;
  }

  .page-help-btn {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .page-title-actions h1 {
    max-width: 31vw;
    font-size: 18px !important;
  }

  .admin-content {
    padding: 12px 10px 72px;
  }

  .filter-tabs {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .table-container {
    margin-left: -2px;
    margin-right: -2px;
    border-radius: 10px;
  }

  .table-mobile-cards tbody {
    padding: 10px;
    gap: 10px;
  }

  .table-mobile-cards tbody tr {
    padding: 14px;
    border-radius: 10px;
  }

  .table-mobile-cards tbody td {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
    justify-content: initial;
    gap: 10px;
    font-size: 14px;
  }

  .table-mobile-cards tbody td::before {
    min-width: 0;
    width: auto;
  }

  .table-mobile-cards tbody td:last-child {
    display: block;
  }

  .table-mobile-cards tbody td:last-child .table-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    gap: 8px;
  }

  .table-mobile-cards tbody td:last-child .btn-icon,
  .table-mobile-cards tbody td:last-child .btn {
    width: 100%;
    justify-content: center;
  }

  .table-search {
    min-height: 44px;
    border-radius: 10px;
  }

  .table-search input {
    padding-left: 44px;
  }
}

@media (max-width: 420px) {
  .admin-topbar-actions {
    max-width: 42vw;
  }

  .page-title-actions h1 {
    max-width: 24vw;
  }

  .public-pwa-install span {
    display: none;
  }
}

/* Compact manager icon rail for tablet and phone widths */
@media (max-width: 1024px) {
  .sidebar {
    width: 64px;
    transform: none;
    transition: width 0.22s ease, transform 0.3s ease;
    z-index: 95;
    border-right: 1px solid #111827;
  }

  .sidebar.open {
    width: 280px;
    transform: none;
    z-index: 110;
  }

  .sidebar-logo {
    min-height: 64px;
    padding: 12px 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .sidebar-logo::before {
    content: "PB";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #FFFFFF;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .sidebar-logo-img {
    display: none;
  }

  .sidebar-logo .logo-text,
  .sidebar-logo .logo-sub,
  .mobile-menu-toggle {
    display: none !important;
  }

  .sidebar-menu {
    padding: 8px;
  }

  .sidebar-section {
    margin-bottom: 6px;
  }

  .sidebar-section-label {
    display: none;
  }

  .sidebar-section--collapsible .sidebar-section-toggle {
    display: none;
  }

  .sidebar-section--collapsible .sidebar-section-items {
    display: block !important;
  }

  .sidebar-menu li {
    margin-bottom: 6px;
  }

  .sidebar-menu a {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 12px;
    position: relative;
  }

  .sidebar-menu a i {
    width: 20px;
    min-width: 20px;
    text-align: center;
    font-size: 17px;
  }

  .sidebar-menu a span:not(.sidebar-badge) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sidebar-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-size: 10px;
    line-height: 1;
    margin-left: 0;
    box-shadow: 0 0 0 2px #000000;
  }

  .sidebar.open .sidebar-logo {
    display: block;
    min-height: 0;
    padding: 28px 24px 24px;
  }

  .sidebar.open .sidebar-logo::before {
    display: none;
  }

  .sidebar.open .sidebar-logo-img {
    display: block;
  }

  .sidebar.open .sidebar-logo .logo-text {
    display: block !important;
  }

  .sidebar.open .sidebar-logo .logo-sub {
    display: flex !important;
  }

  .sidebar.open .sidebar-menu {
    padding: 0 16px 24px;
  }

  .sidebar.open .sidebar-section-label {
    display: block;
  }

  .sidebar.open .sidebar-menu a {
    width: auto;
    height: auto;
    padding: 14px 20px;
    justify-content: flex-start;
    gap: 16px;
  }

  .sidebar.open .sidebar-menu a span:not(.sidebar-badge) {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .sidebar.open .sidebar-badge {
    position: static;
    height: auto;
    min-width: 0;
    padding: 2px 8px;
    font-size: 12px;
    margin-left: auto;
    box-shadow: none;
  }

  .admin-main {
    margin-left: 64px;
    width: calc(100% - 64px);
  }

  .sidebar-overlay.active {
    display: block;
  }
}

@media (max-width: 640px) {
  .page-title-actions h1 {
    max-width: 41vw;
  }

  .admin-content {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 420px) {
  .page-title-actions h1 {
    max-width: 32vw;
  }
}

/* ============================================
   RESPONSIVE MANAGER DATA CARDS
   ============================================ */
@media (max-width: 1180px) {
  .table-container {
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .table-toolbar {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .table-mobile-cards tbody {
    padding: 0;
    gap: 10px;
  }

  .table-mobile-cards tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 12px;
    border: 1px solid #E5E7EB;
    border-left: 4px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  }

  .table-mobile-cards tbody tr.row-unread {
    border-left-color: var(--color-primary);
    background: #FFFFFF;
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.08);
  }

  .table-mobile-cards tbody tr:hover {
    border-color: #CBD5E1;
    border-left-color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }

  .table-mobile-cards tbody td {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: flex-start;
    align-items: start;
    padding: 0;
    font-size: 13px;
    line-height: 1.3;
    color: #111827;
  }

  .table-mobile-cards tbody td::before {
    min-width: 0;
    color: #64748B;
    font-size: 10px;
    line-height: 1.2;
    padding-top: 0;
    letter-spacing: 0.06em;
  }

  .table-mobile-cards tbody td strong {
    font-size: 14px;
    line-height: 1.25;
  }

  .table-mobile-cards tbody td .text-muted,
  .table-mobile-cards tbody td span[style*="font-size: 13px"] {
    color: #475569 !important;
    font-size: 12px !important;
  }

  .table-mobile-cards tbody td:nth-last-child(2) {
    align-items: flex-start;
  }

  .table-mobile-cards tbody td:last-child {
    grid-column: 1 / -1;
    display: block;
    border-top: 1px solid #EEF2F7;
    margin-top: 0;
    padding-top: 10px;
    justify-self: stretch;
    width: 100%;
  }

  .table-mobile-cards tbody td:last-child .table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
  }

  .table-mobile-cards tbody td:last-child .btn-icon,
  .table-mobile-cards tbody td:last-child .btn {
    min-width: 46px;
    height: 38px;
    border-radius: 10px;
  }

  .table-mobile-cards .status-pill {
    justify-self: start;
    min-height: 28px;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
  }

  .table-mobile-cards .status-pill:not(.active):not(.sold):not(.off-market):not(.deleted):not(.unread):not(.read) {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #334155;
  }

  .table-mobile-cards .col-thumb {
    grid-column: 1 / -1;
    padding-bottom: 4px;
  }

  .table-mobile-cards .col-thumb .table-thumb {
    width: 96px;
    height: 72px;
    border-radius: 8px;
  }
}

@media (min-width: 641px) and (max-width: 1180px) {
  .table-mobile-cards tbody td:first-child {
    grid-column: 1 / 2;
  }

  .table-mobile-cards tbody td:nth-child(2) {
    grid-column: 2 / 3;
  }

  .table-mobile-cards tbody td.col-thumb {
    grid-column: 1 / -1;
  }
}

@media (min-width: 801px) and (max-width: 1180px) {
  .table-mobile-cards tbody tr {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr);
  }
}

@media (min-width: 641px) and (max-width: 800px) {
  .table-mobile-cards tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .table-mobile-cards tbody td:first-child,
  .table-mobile-cards tbody td:nth-child(2) {
    padding-bottom: 10px;
    border-bottom: 1px solid #EEF2F7;
  }
}

@media (max-width: 640px) {
  .table-mobile-cards tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 12px;
    border-radius: 12px;
  }

  .table-mobile-cards tbody td:first-child,
  .table-mobile-cards tbody td:nth-child(2) {
    grid-column: 1 / -1;
  }

  .table-mobile-cards tbody td.col-thumb {
    grid-column: 1 / -1;
  }

  .table-mobile-cards tbody td:first-child,
  .table-mobile-cards tbody td:nth-child(2) {
    padding-bottom: 10px;
    border-bottom: 1px solid #EEF2F7;
  }

  .table-mobile-cards tbody td:last-child .table-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  }

  .table-mobile-cards tbody td:last-child .table-actions form {
    display: contents;
  }

  .table-mobile-cards tbody td:last-child .btn-icon {
    width: auto;
    min-width: 44px;
    gap: 8px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .table-mobile-cards tbody td:last-child .btn-icon[title]::after {
    content: attr(title);
    font-size: 12px;
    line-height: 1;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .table-mobile-cards tbody td:last-child .btn-icon.danger::after {
    color: #991B1B;
  }

  #messagesTable tbody tr,
  #submissionsTable tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #messagesTable tbody td[data-label="From"],
  #submissionsTable tbody td[data-label="Contact"] {
    grid-column: 1 / 2;
    order: 1;
    padding-bottom: 0;
    border-bottom: 0;
  }

  #messagesTable tbody td[data-label="Status"],
  #submissionsTable tbody td[data-label="Status"] {
    grid-column: 2 / 3;
    order: 2;
    align-items: flex-end;
    text-align: right;
  }

  #messagesTable tbody td[data-label="Status"]::before,
  #submissionsTable tbody td[data-label="Status"]::before {
    align-self: flex-end;
  }

  #messagesTable tbody td[data-label="Message"],
  #submissionsTable tbody td[data-label="Vehicle"] {
    grid-column: 1 / -1;
    order: 3;
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 1px solid #EEF2F7;
    border-bottom: 1px solid #EEF2F7;
  }

  #messagesTable tbody td[data-label="Car"],
  #submissionsTable tbody td[data-label="Condition"] {
    order: 4;
  }

  #messagesTable tbody td[data-label="CRM"],
  #submissionsTable tbody td[data-label="Seller CRM"] {
    order: 5;
  }

  #messagesTable tbody td[data-label="Date"],
  #submissionsTable tbody td[data-label="Date"] {
    order: 6;
  }

  #messagesTable tbody td.col-actions,
  #submissionsTable tbody td.col-actions {
    order: 7;
  }
}

@media (max-width: 900px) {
  #campaignComposer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #campaignComposer > .form-card,
  #campaignComposer > aside {
    min-width: 0;
    width: 100%;
  }

  #campaignComposer > aside {
    position: static !important;
  }

  #emailPreviewShell {
    padding: 12px !important;
    overflow: hidden;
  }
}

.metric-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.metric-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
}

.alert-error-box {
  background: #FEE2E2;
  color: #991B1B;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-error-box i { font-size: 18px; }

/* ─── Preference hub: shared Settings + Account shells (.pref-hub + legacy aliases) ─── */
.pref-hub,
.settings-container,
.account-hub {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.pref-hub.pref-hub--narrow {
  max-width: 960px;
}

.marketing-settings-page {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.pref-hub-nav,
.settings-tabs,
.account-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 4px;
  background: white;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.pref-hub-tab,
.settings-tab,
.account-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.pref-hub-tab:hover,
.settings-tab:hover,
.account-tab:hover {
  background: #F3F4F6;
  color: var(--text-primary);
}

.pref-hub-tab.active,
.pref-hub-tab[aria-current="page"],
.settings-tab.active,
.account-tab.active {
  background: var(--color-primary);
  color: white;
}

.pref-hub-tab i,
.settings-tab i,
.account-tab i {
  font-size: 16px;
}

.pref-hub-main,
.settings-content-col,
.account-hub-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.pref-hub-crosslink {
  flex-shrink: 0;
}

.pref-hub-crosslink-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pref-hub-crosslink-link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.12);
  color: var(--color-primary);
}

.pref-hub-crosslink-chevron {
  margin-left: auto;
  font-size: 13px;
  opacity: 0.65;
}

.pref-hub-crosslink--muted .pref-hub-crosslink-link {
  background: #FAFBFC;
}

/* Workspace settings: grouped sidebar with in-page section links */
.pref-hub--workspace-settings [id^="section-"],
.pref-hub--workspace-settings .settings-card[id] {
  scroll-margin-top: 28px;
}

.pref-hub-nav.pref-hub-nav--workspace {
  flex-direction: column;
  align-items: stretch;
  overflow-x: visible;
  overflow-y: visible;
  gap: 0;
  flex-wrap: nowrap;
}

.pref-hub-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eef2f6;
}

.pref-hub-nav-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 4px;
}

.pref-hub-nav-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 0.15s, color 0.15s;
}

.pref-hub-nav-group-head:hover {
  background: #f3f4f6;
  color: var(--text-primary);
}

.pref-hub-nav-group-head i {
  font-size: 14px;
  opacity: 0.85;
  color: var(--color-primary);
}

.pref-hub-nav-group--active .pref-hub-nav-group-head i {
  color: inherit;
  opacity: 1;
}

.pref-hub-nav-group-title {
  flex: 1;
  min-width: 0;
}

.pref-hub-nav-group--active .pref-hub-nav-group-head,
.pref-hub-nav-group-head.pref-hub-nav-group-head--current {
  background: var(--color-primary);
  color: #fff;
}

.pref-hub-nav-group--active .pref-hub-nav-group-head:hover,
.pref-hub-nav-group-head.pref-hub-nav-group-head--current:hover {
  background: var(--color-primary);
  color: #fff;
  filter: brightness(0.96);
}

.pref-hub-nav-sublinks {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 0 2px 6px;
}

.pref-hub-sublink {
  display: block;
  padding: 7px 10px 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  border-left: 2px solid transparent;
  margin-left: 4px;
}

.pref-hub-sublink:hover {
  background: #f3f4f6;
  color: var(--text-primary);
  border-left-color: #e5e7eb;
}

.pref-hub-nav-group--active .pref-hub-sublink:hover {
  border-left-color: rgba(220, 38, 38, 0.35);
}

.pref-hub-card,
.settings-card,
.account-card {
  background: white;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pref-hub-main .settings-card,
.pref-hub-main .account-card {
  margin-top: 0;
}

.pref-hub-section,
.settings-section,
.account-section {
  margin-bottom: 28px;
}

.pref-hub-section:last-child,
.settings-section:last-child,
.account-section:last-child {
  margin-bottom: 0;
}

.pref-hub-section-title,
.settings-section-title,
.account-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pref-hub-section-title i,
.settings-section-title i,
.account-section-title i {
  color: var(--color-primary);
}

/* Data Tools (Account → import/export) */
.data-tools-workspace .data-tools-warning-body {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.data-tools-workspace .data-tools-page-intro {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

.data-tools-workspace .data-tools-preview-panel {
  background: white;
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.data-tools-workspace .data-tools-preview-summary {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.data-tools-workspace .data-tools-preview-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 13px;
}

.data-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.data-tools-subheading {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-tools-subheading i {
  color: var(--color-primary);
}

.data-tools-subheading .text-muted {
  font-weight: 400;
  font-size: 12px;
}

.data-tools-stack {
  display: grid;
  gap: 8px;
}

.data-tools-stack--forms {
  gap: 12px;
}

.data-tools-export-row,
.data-tools-import-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

.data-tools-import-form {
  display: grid;
  gap: 8px;
  align-items: stretch;
}

.data-tools-import-form label {
  font-weight: 700;
  font-size: 14px;
}

.data-tools-import-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.data-tools-export-row span {
  font-size: 14px;
}

.data-tools-export-row .btn {
  white-space: nowrap;
}

.data-tools-demo-section {
  border-top: 1px solid #E5E7EB;
  padding-top: 24px;
}

.data-tools-demo-heading {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-tools-demo-heading i {
  color: #B45309;
}

.data-tools-demo-intro {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 16px;
  max-width: 720px;
}

.data-tools-demo-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
}

.data-tools-demo-counts .manager-state-card {
  padding: 12px;
}

.data-tools-demo-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.data-tools-form-generate,
.data-tools-form-purge {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 10px;
}

.data-tools-form-generate {
  border: 1px solid #E5E7EB;
  background: #FFFBEB;
}

.data-tools-form-purge {
  border: 1px solid #FECACA;
  background: #FEF2F2;
}

.data-tools-form-purge .btn-danger-outline {
  border-color: #DC2626;
  color: #DC2626;
}

.data-tools-field {
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.data-tools-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.data-tools-check--top {
  align-items: flex-start;
  margin-top: 4px;
}

/* Manager global search results */
.search-page {
  display: grid;
  gap: 18px;
}

.search-hero {
  background: white;
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.search-hero h2 {
  margin: 0;
  font-size: 22px;
}

.search-hero p {
  margin: 6px 0 0;
  color: var(--text-muted);
}

.search-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.search-card {
  background: white;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.search-card h3 {
  margin: 0 0 14px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-card h3 i {
  color: var(--color-primary);
}

.search-result-list {
  display: grid;
  gap: 10px;
}

.search-result {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: #F9FAFB;
  color: inherit;
  text-decoration: none;
  border: 1px solid #F3F4F6;
}

.search-result:hover {
  border-color: rgba(220, 38, 38, 0.28);
  background: #FFF7F7;
}

.search-result .result-title {
  font-weight: 800;
}

.search-result .result-meta {
  color: var(--text-muted);
  font-size: 13px;
}

.search-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 22px 10px;
}

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

/* License & App page: in-card section tabs */
.license-page-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-card.license-page-tabs-shell {
  padding: 0;
  overflow: hidden;
}

.license-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%);
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.license-tabs::-webkit-scrollbar {
  height: 6px;
}

.license-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.license-tab:hover {
  background: #fff;
  color: var(--text-primary);
  border-color: #e5e7eb;
}

.license-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.license-tab i {
  font-size: 15px;
  opacity: 0.9;
}

.license-tab-panels {
  padding: 24px 28px 28px;
}

.license-tab-panel {
  display: none;
}

.license-tab-panel.active {
  display: block;
}

.license-tab-panel[id^="section-"] {
  scroll-margin-top: 24px;
}

.settings-card.marketing-settings-tabs-shell {
  padding: 0;
  overflow: hidden;
}

.marketing-settings-intro {
  padding: 24px 28px 0;
}

.marketing-settings-intro h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.marketing-settings-intro p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 52rem;
}

.marketing-settings-tabs.license-tabs {
  margin-top: 20px;
}

.marketing-settings-save-row {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.marketing-test-email-inline .settings-actions {
  flex-wrap: wrap;
}

.license-tab-panel .account-section:last-child,
.license-tab-panel .settings-section:last-child {
  margin-bottom: 0;
}

.license-tab-panel .manager-workspace.manager-ui-patterns {
  padding: 0;
}

@media (max-width: 640px) {
  .license-tab span {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .license-tab-panels {
    padding: 18px 16px 20px;
  }
}

.license-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 20px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #fafbfc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.license-hero-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.license-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}

.license-hero-meta {
  margin: 0 0 14px;
  font-size: 14px;
}

.license-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.license-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.license-status-pill--active {
  background: #d1fae5;
  color: #065f46;
}

.license-status-pill--inactive {
  background: #fef3c7;
  color: #92400e;
}

.license-status-pill--neutral {
  background: #e5e7eb;
  color: #374151;
}

.license-hero-stats {
  display: grid;
  gap: 10px;
  min-width: 140px;
}

.license-stat {
  padding: 10px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.license-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.license-stat-value {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.license-section-block {
  margin-bottom: 28px;
}

.license-section-block:last-child {
  margin-bottom: 0;
}

.license-section-heading {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.license-section-heading i {
  color: var(--color-primary);
}

.license-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.license-module-card {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.license-module-card--on {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.license-module-card--off {
  opacity: 0.72;
}

.license-module-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.license-module-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  display: grid;
  place-items: center;
  color: var(--color-primary);
}

.license-module-state {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
}

.license-module-card--on .license-module-state {
  color: #059669;
}

.license-module-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

.license-module-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.license-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.license-snapshot-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.license-snapshot-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.1);
}

.license-snapshot-icon {
  color: var(--color-primary);
  font-size: 16px;
}

.license-snapshot-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}

.license-snapshot-label {
  font-size: 12px;
  color: var(--text-muted);
}

.license-quick-links {
  display: grid;
  gap: 10px;
}

.license-system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.license-system-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  background: #f9fafb;
}

.license-system-card-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.license-system-list,
.license-system-checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.license-system-list li,
.license-system-checks li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f6;
  font-size: 13px;
}

.license-system-list li:last-child,
.license-system-checks li:last-child {
  border-bottom: none;
}

.license-system-list span {
  color: var(--text-muted);
}

.license-check-label {
  color: var(--text-primary);
  font-weight: 600;
}

.license-platform-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.8;
}

.license-compliance-callout {
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.license-responsibility-grid {
  display: grid;
  gap: 12px;
}

.license-responsibility-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

.license-responsibility-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fef2f2;
  color: var(--color-primary);
  display: grid;
  place-items: center;
}

.license-responsibility-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

.license-responsibility-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.license-developer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 18px;
  background: #0b0f19;
  border-radius: 10px;
  color: white;
}

.license-developer-name {
  font-weight: 700;
  font-size: 15px;
}

.license-developer-tagline {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

.license-developer-meta {
  font-size: 12px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .license-hero {
    grid-template-columns: 1fr;
  }

  .license-hero-stats {
    grid-template-columns: repeat(3, 1fr);
    min-width: 0;
  }
}

.pref-hub-grid,
.settings-grid,
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.pref-hub-field,
.settings-field,
.account-field {
  margin-bottom: 0;
}

.pref-hub-field label,
.settings-field label,
.account-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.pref-hub-field .form-control,
.settings-field .form-control,
.account-field .form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pref-hub-field .form-control:focus,
.settings-field .form-control:focus,
.account-field .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(224, 32, 32, 0.1);
}

.pref-hub-field .form-control[readonly],
.settings-field .form-control[readonly],
.account-field .form-control[readonly] {
  background: #F9FAFB;
  color: var(--text-muted);
}

.pref-hub-field textarea.form-control,
.settings-field textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

.pref-hub-help,
.settings-field .help-text,
.account-field .help-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.pref-hub-actions,
.settings-actions,
.account-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.marketing-settings-intro {
  background: white;
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.marketing-settings-intro h2 {
  margin: 0;
  font-size: 20px;
}

.marketing-settings-intro p {
  margin: 6px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Account hub: profile callout + merged hero */
.account-profile-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  margin-bottom: 24px;
}

.account-profile-callout-body strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
  color: #1E3A5F;
}

.account-profile-callout-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
  max-width: 560px;
}

.account-profile-callout-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

.account-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 24px;
  align-items: start;
  padding: 20px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #0B0F19 0%, #1F2937 100%);
  border-radius: 12px;
}

.account-profile-hero-id {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  min-width: 0;
}

.account-profile-hero-upload {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 16px;
}

.account-photo-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-profile-hero-upload .account-field label,
.account-profile-hero-upload .settings-field label {
  color: rgba(255, 255, 255, 0.92);
}

.account-profile-hero-upload .help-text {
  color: rgba(255, 255, 255, 0.55);
}

.account-profile-hero-upload .form-control {
  background: rgba(255, 255, 255, 0.95);
}

.account-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.25);
  display: block;
}

.account-avatar-img--hidden {
  display: none !important;
}

.account-avatar-placeholder--hidden {
  display: none !important;
}

.account-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 3px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-avatar-letter {
  font-size: 32px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}

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

.account-profile-name {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin: 0 0 4px;
}

.account-profile-email {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 8px;
}

.account-profile-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(220, 38, 38, 0.35);
  color: #FCA5A5;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-inline-field {
  display: flex;
  gap: 10px;
  align-items: center;
}

.account-inline-field .form-control {
  flex: 1;
}

.account-inline-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.account-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.account-info-row-spaced {
  margin-bottom: 12px;
}

.account-info-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.account-info-row-value {
  font-size: 13px;
  color: var(--text-muted);
}

.account-license-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.account-license-item {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 14px;
}

.account-license-item-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.account-license-item-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.account-help-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s, border-color 0.15s;
}

.account-help-link:hover {
  background: #FEF2F2;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.account-help-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: white;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.account-help-link-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.account-help-link-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.account-help-link:hover .account-help-link-desc {
  color: inherit;
}

.account-logout-form {
  margin: 0;
}

.account-logout-btn {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

@media (min-width: 1100px) {
  .pref-hub,
  .settings-container,
  .account-hub {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .pref-hub-nav,
  .settings-tabs,
  .account-tabs {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    top: 16px;
    position: sticky;
    overflow: visible;
    margin-bottom: 0;
  }

  .pref-hub-tab,
  .settings-tab,
  .account-tab {
    justify-content: flex-start;
  }

  .pref-hub--workspace-settings {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .pref-hub--workspace-settings .pref-hub-nav--workspace {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

@media (max-width: 768px) {
  .pref-hub-nav,
  .settings-tabs,
  .account-tabs {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    gap: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .pref-hub-nav::-webkit-scrollbar,
  .settings-tabs::-webkit-scrollbar,
  .account-tabs::-webkit-scrollbar {
    display: none;
  }

  .pref-hub-tab,
  .settings-tab,
  .account-tab {
    padding: 12px 16px;
    font-size: 13px;
    flex-shrink: 0;
    min-height: 44px;
  }

  .pref-hub-card,
  .settings-card,
  .account-card {
    padding: 16px;
  }

  .pref-hub-section,
  .settings-section,
  .account-section {
    margin-bottom: 20px;
  }

  .pref-hub-section-title,
  .settings-section-title,
  .account-section-title {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .pref-hub-grid,
  .settings-grid,
  .account-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pref-hub-field .form-control,
  .settings-field .form-control {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 48px;
  }

  .pref-hub-actions,
  .settings-actions {
    flex-direction: column;
  }

  .pref-hub-actions .btn,
  .settings-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .account-profile-hero {
    grid-template-columns: 1fr;
  }

  .account-profile-name {
    font-size: 18px;
  }

  .account-inline-field {
    flex-direction: column;
    align-items: stretch;
  }

  .account-inline-btn {
    width: 100%;
    justify-content: center;
  }

  .account-info-row {
    flex-direction: column;
    align-items: stretch;
  }

  .account-profile-callout {
    flex-direction: column;
  }

  .account-profile-callout-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .pref-hub-tab span,
  .settings-tab span,
  .account-tab span {
    display: none;
  }

  .pref-hub-tab i,
  .settings-tab i,
  .account-tab i {
    margin: 0;
  }

  .pref-hub-tab,
  .settings-tab,
  .account-tab {
    padding: 12px 14px;
  }
}

/* ─── Manager workspace (queues & list pages). Legacy .inventory-* classes stay aliases. ─── */
.manager-workspace,
.inventory-workspace {
  display: grid;
  gap: 18px;
}
.manager-command,
.inventory-command {
  background: white;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-left: 4px solid var(--color-primary);
}
.manager-command h2,
.inventory-command h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}
.manager-command p,
.inventory-command p {
  margin: 6px 0 0;
  color: var(--text-muted);
  max-width: 720px;
  line-height: 1.5;
}
.manager-command-actions,
.inventory-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.manager-state-grid,
.inventory-state-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.manager-state-card,
.inventory-state-card {
  background: white;
  border-radius: 12px;
  padding: 0;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  border: 1px solid #e5e7eb;
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
  position: relative;
}
.manager-state-card:hover,
.inventory-state-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
.manager-state-card.active,
.inventory-state-card.active {
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--color-primary),
    0 4px 12px rgba(220, 38, 38, 0.12);
}
.state-accent {
  height: 4px;
  width: 100%;
}
.state-accent.sale {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}
.state-accent.sold {
  background: linear-gradient(90deg, #047857, #10b981);
}
.state-accent.recovery {
  background: linear-gradient(90deg, #b45309, #f59e0b);
}
.state-accent.off-market {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.state-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.state-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.state-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.state-icon.sale {
  background: #fee2e2;
  color: #dc2626;
}
.state-icon.sold {
  background: #d1fae5;
  color: #047857;
}
.state-icon.recovery {
  background: #fef3c7;
  color: #b45309;
}
.state-icon.off-market {
  background: #dbeafe;
  color: #2563eb;
}
.state-count {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.state-count.sale {
  color: #dc2626;
}
.state-count.sold {
  color: #047857;
}
.state-count.recovery {
  color: #b45309;
}
.state-count.off-market {
  color: #2563eb;
}
.state-meta {
  margin-top: auto;
}
.state-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, var(--text-primary));
}
.state-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}
.state-arrow {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.16s;
}
.state-arrow.sale {
  background: #fee2e2;
  color: #dc2626;
}
.state-arrow.sold {
  background: #d1fae5;
  color: #047857;
}
.state-arrow.recovery {
  background: #fef3c7;
  color: #b45309;
}
.state-arrow.off-market {
  background: #dbeafe;
  color: #2563eb;
}
.manager-state-card:hover .state-arrow,
.inventory-state-card:hover .state-arrow {
  opacity: 1;
}
.manager-table-title,
.inventory-toolbar-title {
  font-weight: 800;
  margin-bottom: 4px;
}
.manager-notice,
.inventory-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}
.manager-notice i,
.inventory-notice i {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.manager-notice--warning,
.inventory-notice--warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.manager-notice--info,
.inventory-notice--info {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}

.manager-state-grid.pipeline-state-grid,
.inventory-state-grid.pipeline-state-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.state-accent.pipe-all {
  background: linear-gradient(90deg, #4b5563, #9ca3af);
}
.state-accent.pipe-lead {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.state-accent.pipe-appraisal {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.state-accent.pipe-negotiation {
  background: linear-gradient(90deg, #b45309, #fbbf24);
}
.state-accent.pipe-purchased {
  background: linear-gradient(90deg, #047857, #34d399);
}
.state-accent.pipe-rejected {
  background: linear-gradient(90deg, #b91c1c, #f87171);
}
.state-icon.pipe-all {
  background: #f3f4f6;
  color: #4b5563;
}
.state-icon.pipe-lead {
  background: #dbeafe;
  color: #2563eb;
}
.state-icon.pipe-appraisal {
  background: #ede9fe;
  color: #6d28d9;
}
.state-icon.pipe-negotiation {
  background: #fef3c7;
  color: #b45309;
}
.state-icon.pipe-purchased {
  background: #d1fae5;
  color: #047857;
}
.state-icon.pipe-rejected {
  background: #fee2e2;
  color: #b91c1c;
}
.state-count.pipe-all {
  color: #374151;
}
.state-count.pipe-lead {
  color: #1d4ed8;
}
.state-count.pipe-appraisal {
  color: #5b21b6;
}
.state-count.pipe-negotiation {
  color: #b45309;
}
.state-count.pipe-purchased {
  color: #047857;
}
.state-count.pipe-rejected {
  color: #b91c1c;
}
.state-arrow.pipe-all {
  background: #f3f4f6;
  color: #4b5563;
}
.state-arrow.pipe-lead {
  background: #dbeafe;
  color: #2563eb;
}
.state-arrow.pipe-appraisal {
  background: #ede9fe;
  color: #6d28d9;
}
.state-arrow.pipe-negotiation {
  background: #fef3c7;
  color: #b45309;
}
.state-arrow.pipe-rejected {
  background: #fee2e2;
  color: #b91c1c;
}

/* ─── Car form tabs (edit/create) ─── */
.form-card--tabs {
  padding: 0;
  overflow: hidden;
}
.form-card--tabs > form {
  display: flex;
  flex-direction: column;
}
.car-form-alert {
  margin: 20px 24px 0;
  padding: 16px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
}
.car-form-tabs-shell {
  overflow: hidden;
}
.car-form-tabs.license-tabs {
  margin: 0;
}
.car-form-tab-panels.license-tab-panels {
  padding: 20px 24px 8px;
}
/* Car form — vehicle tab (photos | basic fields) */
.car-form-two-col {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* Car form — buy & sell tab (vehicle sidebar | purchase + sale columns) */
.car-form-deals-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.car-form-deals-sidebar {
  position: sticky;
  top: 80px;
}
.car-form-deals-hero {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.car-form-deals-hero-photo {
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  margin-bottom: 12px;
}
.car-form-deals-hero-photo img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
.car-form-deals-hero-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  color: #9ca3af;
  font-size: 2.5rem;
}
.car-form-deals-vehicle-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-primary, #111827);
}
.car-form-deals-vehicle-year {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}
.car-form-deals-photos-link {
  margin: 10px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #dc2626);
  cursor: pointer;
  text-decoration: underline;
  text-align: left;
}
.car-form-deals-photos-link:hover {
  color: var(--color-primary-dark, #991b1b);
}
.car-form-deals-people {
  padding: 14px 16px 16px;
}
.car-form-deals-people-heading {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
}
.car-form-deals-person {
  padding: 10px 0;
  border-top: 1px solid #f3f4f6;
}
.car-form-deals-person:first-of-type {
  border-top: none;
  padding-top: 0;
}
.car-form-deals-person-role {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.car-form-deals-person-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #111827);
}
.car-form-deals-person-name a {
  color: inherit;
  text-decoration: none;
}
.car-form-deals-person-name a:hover {
  color: var(--color-primary, #dc2626);
  text-decoration: underline;
}
.car-form-deals-person-meta,
.car-form-deals-person-empty,
.car-form-deals-person-hint {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
.car-form-deals-person-link {
  margin: 6px 0 0;
  font-size: 12px;
}
.car-form-deals-person-link .text-link {
  font-weight: 600;
}
.car-form-deals-person--editable .form-control {
  margin-top: 6px;
  font-size: 13px;
}
.car-form-deals-person--editable .car-form-deals-person-role {
  display: block;
  margin-bottom: 0;
}
.car-form-deals-crm-label {
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}
.car-form-deals-main {
  min-width: 0;
}
.car-form-deals-intro {
  margin: 0 0 14px;
  font-size: 13px;
}
.car-form-deals-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  min-width: 0;
}
.car-form-deals-col {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.car-form-section-card-body--deals {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding: 16px 18px 18px;
}
.car-form-deals-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.car-form-deals-fields .form-status-picker-field {
  margin: 0;
}
.car-form-deals-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
}
.car-form-deals-field-grid .form-group {
  margin: 0;
}
.car-form-deals-list-price {
  margin: 0;
  padding: 10px 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #111827);
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.car-form-deals-col .form-status-picker-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}
.car-form-deals-col .form-status-chip {
  width: 100%;
  margin: 0;
}
.car-form-deals-snapshot {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.car-form-deals-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  align-items: end;
}
.car-form-deals-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.car-form-deals-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.car-form-deals-stat-value {
  font-size: 17px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}
.car-form-deals-stat-value.is-positive {
  color: var(--color-success, #059669);
}
.car-form-deals-stat-value.is-negative {
  color: var(--color-error, #dc2626);
}
.car-form-deals-stat--highlight .car-form-deals-stat-value {
  font-size: 20px;
}
.car-form-deals-metrics {
  margin-top: 16px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.car-form-deals-metrics--sale {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.car-form-deals-metrics-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #374151;
}
.car-form-deals-metrics-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.car-form-deals-metrics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  margin: 0;
}
.car-form-deals-metrics-row dt {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.car-form-deals-metrics-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  text-align: right;
  white-space: nowrap;
}
.car-form-deals-metrics-row dd.is-positive {
  color: var(--color-success, #059669);
}
.car-form-deals-metrics-row dd.is-negative {
  color: var(--color-error, #dc2626);
}
.car-form-deals-metrics-row--emphasis dd {
  font-size: 16px;
}
/* Legacy alias if referenced elsewhere */
.car-form-three-col {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.car-form-col {
  min-width: 0;
}
.car-form-col-photos .car-form-photos-panel {
  position: sticky;
  top: 88px;
  margin: 0;
  height: fit-content;
  max-height: calc(100vh - 108px);
  overflow: auto;
}
.car-form-photos-panel--column .car-form-photos-panel-body {
  padding: 0 16px 16px;
}
.car-form-photos-panel--column .panel-title {
  padding: 14px 16px;
}
.car-form-photos-panel .car-form-photos-upload-btn {
  width: 100%;
  margin-top: 10px;
}
.car-form-photos-panel .car-form-photos-grid {
  margin-top: 14px;
  grid-template-columns: 1fr;
  gap: 14px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}
.car-form-photos-panel .photo-item {
  aspect-ratio: 16 / 10;
  min-height: 140px;
}
.car-form-photos-create-help {
  margin: 0 0 12px;
  font-size: 13px;
}
.upload-zone--car-form {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 20px 16px;
  min-height: 112px;
  margin-bottom: 0;
}
.upload-zone--car-form .upload-zone-visual {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  border: 1px dashed var(--color-gray-300);
}
.upload-zone--car-form .upload-zone-visual i {
  font-size: 26px;
  margin: 0;
  color: var(--color-gray-400);
}
.upload-zone--car-form .upload-zone-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.upload-zone--car-form .upload-zone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #111827);
}
.upload-zone--car-form .upload-zone-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.car-form-photos-tips {
  margin: 14px 0 0;
  padding: 12px 0 0 18px;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.car-form-photos-tips li {
  margin-bottom: 4px;
}
.car-form-col-center {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.car-form-section-card {
  margin: 0;
}
.car-form-section-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.car-form-section-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary, #111827);
}
.car-form-section-card-body {
  padding: 16px 18px 18px;
}
.car-form-section-lead {
  margin: 0 0 14px;
  font-size: 13px;
}
.car-form-acquisition-notice {
  margin: 0 0 16px;
  padding: 12px 14px;
}
.car-form-acquisition-notice-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #111827);
}
.car-form-acquisition-notice .car-form-section-lead {
  margin: 0;
}
.car-form-status-panel-body {
  padding: 0 16px 16px;
}
.car-form-status-panel .panel-title {
  padding: 14px 16px;
}
.car-form-status-panel .form-status-picker-chips {
  flex-direction: column;
  align-items: stretch;
}
.car-form-status-panel .form-status-chip {
  width: 100%;
}
.car-form-status-sale-fields {
  margin-top: 4px;
}
.car-form-status-hint {
  margin: 12px 0 0;
  font-size: 13px;
}
.car-form-status-hint a {
  font-weight: 600;
}
@media (max-width: 1280px) {
  .car-form-deals-columns {
    grid-template-columns: 1fr;
  }
  .car-form-deals-col .form-status-picker-chips {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .car-form-deals-col .form-status-chip {
    width: auto;
  }
}
@media (max-width: 900px) {
  .car-form-two-col,
  .car-form-deals-layout,
  .car-form-three-col {
    grid-template-columns: 1fr;
  }
  .car-form-col-photos .car-form-photos-panel,
  .car-form-deals-sidebar {
    position: static;
    max-height: none;
  }
  .car-form-photos-panel .car-form-photos-grid {
    grid-template-columns: repeat(2, 1fr);
    max-height: none;
  }
}
.car-form-tab-panels .form-section--tab-panel {
  margin-bottom: 20px;
  padding-bottom: 0;
  border-bottom: none;
}
.car-form-tab-panels .form-section--tab-panel:last-child {
  margin-bottom: 0;
}
.form-subsection-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #111827);
}
.car-form-margin-banner {
  background: var(--color-gray-50, #f9fafb);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}
.car-form-margin-banner--success {
  background: #ecfdf5;
}
.car-form-foot {
  margin-top: 0;
  padding: 20px 24px 24px;
  background: #eef0f3;
  border-top: 3px solid #d1d5db;
}
.car-form-internal-panel {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  margin-bottom: 18px;
  overflow: hidden;
}
.car-form-internal-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
  border-bottom: 1px solid #fde68a;
}
.car-form-internal-panel-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.car-form-internal-panel-lead {
  margin: 0;
  font-size: 13px;
  color: #b45309;
  line-height: 1.45;
  max-width: 40rem;
}
.car-form-internal-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  padding: 6px 12px;
}
.car-form-internal-panel-body {
  margin: 0;
  padding: 16px 20px 20px;
}
.car-form-actions {
  padding: 0;
  margin: 0;
  background: transparent;
}
.car-form-preview-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 10px;
}
.car-form-preview-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.car-form-preview-intro {
  margin: 0;
  max-width: 36rem;
}
.car-form-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.car-form-preview-actions .btn-sm {
  font-size: 12px;
  padding: 6px 11px;
}
.car-form-preview-actions .btn.is-disabled {
  pointer-events: none;
  opacity: 0.45;
}
.car-form-preview-notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.car-form-preview-notice.is-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.car-form-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 18px;
  align-items: start;
}
.car-form-preview-card {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  text-decoration: none;
  color: inherit;
  max-width: 100%;
}
.car-form-preview-card--static {
  pointer-events: none;
  cursor: default;
}
.car-form-preview-card:hover {
  transform: translateY(-2px);
}
.car-form-preview-image-wrap {
  min-height: 140px;
}
.car-form-preview-image-wrap img {
  height: 100%;
  min-height: 140px;
  object-fit: cover;
}
.car-form-preview-image-wrap img.brand-placeholder {
  object-fit: contain;
  padding: 24px;
  background: #050505;
}
.car-form-preview-card-body {
  min-width: 0;
}
.car-form-preview-excerpt {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.car-form-summary-ops {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
}
.car-form-summary-ops-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.car-form-summary-ops-grid {
  display: grid;
  gap: 10px;
  margin: 0;
}
.car-form-summary-ops-item {
  margin: 0;
}
.car-form-summary-ops-item dt {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.car-form-summary-ops-item dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
@media (max-width: 900px) {
  .car-form-preview-layout {
    grid-template-columns: 1fr;
  }
  .car-form-preview-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .car-form-tab-panels.license-tab-panels,
  .car-form-foot,
  .car-form-alert {
    padding-left: 16px;
    padding-right: 16px;
  }
  .car-form-internal-panel-head {
    flex-direction: column;
  }
}

/* Car form — full summary tab */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-backdrop.is-open {
  display: flex;
}
.report-modal {
  background: #fff;
  width: min(680px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 22px;
}
.report-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.report-modal-header h3 {
  margin: 0;
  font-size: 20px;
}
.modal-close {
  border: 0;
  background: var(--color-gray-100, #f3f4f6);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  flex-shrink: 0;
}
.car-export-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.car-export-notes-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.car-export-notes-option input {
  margin-top: 3px;
}
.car-export-notes-warning {
  margin: 0;
}
.car-export-format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.car-export-format-btn {
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  min-height: 72px;
}
.car-export-format-btn i {
  font-size: 20px;
}
.car-export-modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.car-form-summary--full {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.car-form-summary-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.car-form-summary-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}
.car-form-summary-intro {
  margin: 0;
  max-width: 40rem;
}
.car-form-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.car-form-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.car-form-summary-block {
  margin: 0;
  min-width: 0;
}
.car-form-summary-block--wide {
  grid-column: 1 / -1;
}
.car-form-summary-block-head {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.car-form-summary-block-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.car-form-summary-block-title .count {
  margin-left: auto;
}
.car-form-summary-dl {
  margin: 0;
  padding: 12px 16px 14px;
  display: grid;
  gap: 8px;
}
.car-form-summary-dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: baseline;
}
.car-form-summary-dl dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.car-form-summary-dl dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.car-form-summary-specs {
  padding: 0 16px 14px;
}
.car-form-summary-deals-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 12px 16px 14px;
}
.car-form-summary-subtitle {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary, #dc2626);
}
.car-form-summary-text {
  margin: 0;
  padding: 12px 16px 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.car-form-summary-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 12px 16px 16px;
}
.car-form-summary-photo {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  position: relative;
}
.car-form-summary-photo.is-main {
  border: 2px solid var(--color-primary);
}
.car-form-summary-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.car-form-summary-photo figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.car-form-summary-preview-block .car-form-preview-card {
  margin: 12px 16px 16px;
  max-width: 420px;
}
@media (max-width: 900px) {
  .car-form-summary-grid {
    grid-template-columns: 1fr;
  }
  .car-form-summary-deals-cols {
    grid-template-columns: 1fr;
  }
}

/* ─── Form status pickers (car edit/create) — compact chips ─── */
.form-status-picker-field {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
}
.form-status-picker-field .form-label {
  margin-bottom: 8px;
}
.form-status-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.form-status-chip {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.form-status-chip-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.form-status-chip-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color 0.14s, background 0.14s, color 0.14s, box-shadow 0.14s;
}
.form-status-chip-inner i {
  font-size: 11px;
  opacity: 0.85;
}
.form-status-chip:hover .form-status-chip-inner {
  border-color: #d1d5db;
  background: #fff;
}
.form-status-chip:has(.form-status-chip-input:checked) .form-status-chip-inner {
  border-color: var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.form-status-chip--sale .form-status-chip-inner {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.form-status-chip--sale:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
}
.form-status-chip--sold .form-status-chip-inner {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.form-status-chip--sold:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #047857;
  border-color: #047857;
  color: #fff;
  box-shadow: 0 1px 3px rgba(4, 120, 87, 0.3);
}
.form-status-chip--off-market .form-status-chip-inner {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.form-status-chip--off-market:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.form-status-chip--neutral .form-status-chip-inner {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #4b5563;
}
.form-status-chip--neutral:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #4b5563;
  border-color: #4b5563;
  color: #fff;
}
.form-status-chip--pipe-lead .form-status-chip-inner {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.form-status-chip--pipe-lead:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.form-status-chip--pipe-appraisal .form-status-chip-inner {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}
.form-status-chip--pipe-appraisal:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}
.form-status-chip--pipe-negotiation .form-status-chip-inner {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}
.form-status-chip--pipe-negotiation:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}
.form-status-chip--pipe-purchased .form-status-chip-inner {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.form-status-chip--pipe-purchased:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #047857;
  border-color: #047857;
  color: #fff;
}
.form-status-chip--pipe-rejected .form-status-chip-inner {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.form-status-chip--pipe-rejected:has(.form-status-chip-input:checked) .form-status-chip-inner {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* ─── Manager UI patterns reference page ─── */
.manager-ui-patterns > * {
  min-width: 0;
}

@media (max-width: 1100px) {
  .manager-state-grid.pipeline-state-grid,
  .inventory-state-grid.pipeline-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .manager-state-grid,
  .inventory-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .manager-command,
  .inventory-command {
    grid-template-columns: 1fr;
  }
  .manager-command-actions,
  .inventory-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .manager-state-grid,
  .inventory-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .manager-command,
  .inventory-command {
    padding: 16px;
  }
  .manager-command-actions .btn,
  .inventory-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .state-body {
    padding: 12px 14px 14px;
  }
  .state-count {
    font-size: 26px;
  }
}

/* ============================================
   ADMIN MOBILE APP SHELL (native-style)
   ============================================ */
.admin-bottom-nav,
.admin-mobile-more,
.admin-mobile-search-toggle {
  display: none;
}

@media (max-width: 900px) {
  .admin-wrapper {
    background: #eef0f4;
  }

  .sidebar,
  .sidebar-overlay,
  .sidebar-collapse-toggle,
  .mobile-menu-toggle {
    display: none !important;
  }

  .admin-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 100dvh;
    background: #eef0f4;
  }

  .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 10px;
    min-height: 56px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: none;
    grid-template-columns: none;
    grid-template-areas: none;
  }

  .admin-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .page-title-actions h1,
  .admin-topbar h1 {
    max-width: none !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
  }

  .admin-topbar-actions {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    gap: 6px;
  }

  .admin-mobile-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #f3f4f6;
    color: #111827;
    font-size: 16px;
    cursor: pointer;
  }

  .admin-global-search {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 6px);
    z-index: 130;
    display: none;
    min-height: 44px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  }

  .admin-topbar.admin-topbar--search-open .admin-global-search {
    display: flex;
  }

  .header-theme-toggle,
  .header-divider,
  .admin-topbar .header-icon-btn {
    display: none !important;
  }

  .header-account-toggle {
    width: 40px;
    height: 40px;
  }

  .header-account-dropdown {
    right: 0;
    left: auto;
  }

  .admin-content {
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 0px));
    background: #eef0f4;
  }

  .admin-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
  }

  .admin-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 2px;
    border-radius: 14px;
    color: #6b7280;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
  }

  .admin-bottom-nav-item i {
    font-size: 18px;
  }

  .admin-bottom-nav-item.active {
    color: var(--color-primary);
    background: rgba(220, 38, 38, 0.08);
  }

  .admin-bottom-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  .admin-bottom-nav-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }

  .admin-mobile-more {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
  }

  .admin-mobile-more[hidden] {
    display: none !important;
  }

  .admin-mobile-more-overlay {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.42);
    cursor: pointer;
  }

  .admin-mobile-more-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 40px rgba(15, 23, 42, 0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(0);
    animation: admin-mobile-sheet-in 0.24s ease;
  }

  @keyframes admin-mobile-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .admin-mobile-more-handle {
    width: 42px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #d1d5db;
  }

  .admin-mobile-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 8px;
  }

  .admin-mobile-more-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
  }

  .admin-mobile-more-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    background: #f3f4f6;
    color: #111827;
    cursor: pointer;
  }

  .admin-mobile-more-body {
    overflow: auto;
    padding: 8px 12px 18px;
  }

  .admin-mobile-more-section + .admin-mobile-more-section {
    margin-top: 14px;
  }

  .admin-mobile-more-label {
    padding: 0 8px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ca3af;
  }

  .admin-mobile-more-links {
    display: grid;
    gap: 4px;
  }

  .admin-mobile-more-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 14px;
    color: #111827;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border: 0;
    background: transparent;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
  }

  .admin-mobile-more-link i {
    width: 20px;
    text-align: center;
    color: var(--color-primary);
  }

  .admin-mobile-more-link.active {
    background: rgba(220, 38, 38, 0.08);
    color: var(--color-primary);
  }

  .admin-mobile-more-link[data-mobile-theme-icon="sun"] {
    display: none;
  }

  html.admin-dark-mode .admin-mobile-more-link[data-mobile-theme-icon="moon"] {
    display: none;
  }

  html.admin-dark-mode .admin-mobile-more-link[data-mobile-theme-icon="sun"] {
    display: inline-block;
  }

  .admin-mobile-more-logout {
    margin-top: 16px;
    padding: 0 4px;
  }

  .admin-mobile-more-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }

  .manager-workspace,
  .settings-card,
  .table-container,
  .manager-command,
  .inventory-command,
  .dashboard-hero .hero-panel,
  .dashboard-hero .metric-panel,
  .operations-grid > *,
  .report-grid > * {
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.04) !important;
  }

  .table-toolbar {
    border-radius: 16px 16px 0 0 !important;
  }

  .manager-split-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pref-hub--workspace-settings {
    gap: 12px;
  }

  .pref-hub-nav--workspace {
    position: sticky;
    top: calc(56px + env(safe-area-inset-top, 0px));
    z-index: 10;
    margin: 0 -4px;
    padding: 4px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  }

  .settings-actions .btn,
  .pref-hub-main .btn-primary {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
  }
}

@media (max-width: 900px) {
  html.admin-dark-mode .admin-wrapper,
  html.admin-dark-mode .admin-main,
  html.admin-dark-mode .admin-content {
    background: var(--admin-bg);
  }

  html.admin-dark-mode .admin-topbar,
  html.admin-dark-mode .admin-bottom-nav {
    background: rgba(20, 28, 43, 0.96);
    border-color: var(--admin-border);
  }

  html.admin-dark-mode .admin-mobile-search-toggle,
  html.admin-dark-mode .admin-mobile-more-close {
    background: var(--admin-bg-muted);
    color: var(--admin-text);
  }

  html.admin-dark-mode .admin-bottom-nav-item {
    color: var(--admin-text-muted);
  }

  html.admin-dark-mode .admin-bottom-nav-item.active {
    color: var(--admin-accent);
    background: var(--admin-accent-soft);
  }

  html.admin-dark-mode .admin-mobile-more-sheet {
    background: var(--admin-bg-elevated);
    color: var(--admin-text);
  }

  html.admin-dark-mode .admin-mobile-more-link {
    color: var(--admin-text);
  }

  html.admin-dark-mode .admin-mobile-more-link.active {
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
  }

  html.admin-dark-mode .manager-workspace,
  html.admin-dark-mode .settings-card,
  html.admin-dark-mode .table-container,
  html.admin-dark-mode .pref-hub-nav--workspace {
    background: var(--admin-bg-elevated) !important;
    border-color: var(--admin-border) !important;
  }
}