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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0a;
  color: #e0e0e0;
  min-height: 100vh;
}

a { color: #ff4444; text-decoration: none; }
a:hover { text-decoration: underline; }

.app-container { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 240px;
  background: #1a1a1a;
  padding: 20px 0;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  border-right: 1px solid #2a2a2a;
}
.sidebar-header { padding: 0 20px 20px; border-bottom: 1px solid #2a2a2a; }
.sidebar-header h2 { color: #ff4444; font-size: 1.3rem; }
.nav-links { list-style: none; padding: 10px 0; }
.nav-links li a {
  display: block; padding: 12px 20px; color: #888;
  transition: all 0.2s; font-size: 0.95rem;
}
.nav-links li a:hover { background: rgba(255,68,68,0.1); color: #fff; text-decoration: none; }
.nav-links li a.active { background: rgba(255,68,68,0.15); color: #ff4444; border-left: 3px solid #ff4444; }
.nav-divider { border-top: 1px solid #2a2a2a; margin: 10px 0; }

/* Content */
.content { margin-left: 240px; padding: 30px; flex: 1; min-width: 0; }

.page-header { margin-bottom: 25px; }
.page-header h1 { font-size: 1.8rem; color: #fff; }
.page-header p { color: #666; margin-top: 4px; }

/* Cards */
.card {
  background: #141414;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid #222;
}
.card h3 { color: #fff; margin-bottom: 16px; font-size: 1.1rem; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 12px; border-bottom: 2px solid #2a2a2a;
  color: #666; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.data-table td { padding: 12px; border-bottom: 1px solid #1a1a1a; }
.data-table tr:hover { background: rgba(255,68,68,0.05); }
.primary-row { background: rgba(255,68,68,0.08); }

/* Buttons */
.btn {
  display: inline-block; padding: 8px 16px; border: none; border-radius: 6px;
  cursor: pointer; font-size: 0.9rem; color: #fff; transition: opacity 0.2s;
}
.btn:hover { opacity: 0.85; text-decoration: none; }
.btn-accent { background: #cc0000; }
.btn-green { background: #00c853; }
.btn-danger { background: #ff1744; }
.btn-sm { padding: 4px 10px; font-size: 0.8rem; }

/* Badges */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.75rem; color: #fff; margin-left: 8px;
}

/* Search */
.search-section { margin-top: 20px; }
.search-bar { display: flex; gap: 10px; }
.search-bar input {
  flex: 1; padding: 10px 14px; border-radius: 6px; border: 1px solid #2a2a2a;
  background: #0a0a0a; color: #e0e0e0; font-size: 0.95rem;
}
.search-bar input:focus { outline: none; border-color: #ff4444; }

.search-results { margin-top: 12px; }
.search-result-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: #0a0a0a; border-radius: 6px; margin-bottom: 8px;
  border: 1px solid #1a1a1a;
}
.search-result-item:hover { border-color: #333; }
.search-result-item .info { flex: 1; }
.search-result-item .info strong { color: #fff; }
.search-result-item .info span { display: block; color: #666; font-size: 0.85rem; }

/* Setup */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .setup-grid { grid-template-columns: 1fr; } }

.dealer-badge {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 8px;
}
.dealer-badge.primary { background: rgba(255,68,68,0.1); border: 1px solid #cc0000; }
.dealer-badge.competitor { background: rgba(255,255,255,0.03); border: 1px solid #333; }
.dealer-badge strong { color: #fff; }
.dealer-id { color: #666; font-size: 0.85rem; }
.dealer-url { color: #ff4444; font-size: 0.85rem; }

/* Alerts */
.alerts-bar { margin-bottom: 20px; }
.alert {
  padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; font-size: 0.9rem;
}
.alert-warning { background: rgba(255,145,0,0.1); border-left: 4px solid #ff9100; }
.alert-danger { background: rgba(255,23,68,0.1); border-left: 4px solid #ff1744; }
.alert-success { background: rgba(0,200,83,0.1); border-left: 4px solid #00c853; }
.alert-info { background: rgba(255,68,68,0.1); border-left: 4px solid #ff4444; }

/* Tabs */
.tabs { display: flex; gap: 4px; }
.tab {
  padding: 10px 20px; background: #141414; border: 1px solid #222; color: #666;
  cursor: pointer; border-radius: 8px 8px 0 0; font-size: 0.95rem;
}
.tab.active { background: #1a1a1a; color: #ff4444; border-bottom-color: #1a1a1a; }

/* Controls */
.controls-row { display: flex; align-items: center; gap: 12px; }
.controls-row select {
  padding: 8px 12px; border-radius: 6px; border: 1px solid #2a2a2a;
  background: #0a0a0a; color: #e0e0e0; font-size: 0.95rem;
}
.controls-row select:focus { outline: none; border-color: #ff4444; }
.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* Colors */
.text-green { color: #00c853; font-weight: 600; }
.text-red { color: #ff1744; font-weight: 600; }
.text-orange { color: #ff9100; }
.muted { color: #555; }

/* Sync */
.sync-status { margin-top: 12px; }
.sync-status .sync-item { padding: 6px 0; font-size: 0.9rem; }

/* Summary Stats */
.summary-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.stat-card {
  flex: 1; min-width: 120px; text-align: center; padding: 16px;
  background: #0a0a0a; border-radius: 8px; border: 1px solid #1a1a1a;
}
.stat-card .stat-number { font-size: 2rem; font-weight: 700; color: #fff; }
.stat-card .stat-label { font-size: 0.8rem; color: #666; text-transform: uppercase; margin-top: 4px; }
.stat-card.stat-danger .stat-number { color: #ff1744; }
.stat-card.stat-success .stat-number { color: #00c853; }

/* Head-to-Head Cards */
.h2h-card { margin-bottom: 16px; }
.card-border-red { border-left: 4px solid #ff1744; }
.card-border-green { border-left: 4px solid #00c853; }

.h2h-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.h2h-title { font-size: 1.05rem; color: #fff; }
.h2h-position { font-size: 0.9rem; font-weight: 700; }

.h2h-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .h2h-comparison { grid-template-columns: 1fr; } }

.h2h-side { padding: 16px; background: #0a0a0a; border-radius: 8px; border: 1px solid #1a1a1a; }
.h2h-side-header {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: #666; margin-bottom: 8px; font-weight: 600;
}
.h2h-yours .h2h-side-header { color: #ff4444; }
.h2h-theirs .h2h-side-header { color: #666; }

.h2h-price-range { font-size: 1.2rem; font-weight: 700; color: #fff; }
.h2h-miles { font-size: 0.85rem; color: #555; margin-top: 4px; }

.h2h-vehicles { margin-top: 12px; }
.h2h-vehicle {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid #1a1a1a; font-size: 0.85rem;
}
.h2h-vehicle:last-child { border-bottom: none; }
.h2h-v-price { color: #fff; font-weight: 600; }
.h2h-v-miles { color: #888; }
.h2h-v-dom { color: #ff9100; font-size: 0.8rem; }

/* Badges */
.badge-new { background: #cc0000; }
.badge-used { background: #444; }

/* Filter group */
.filter-group { display: flex; gap: 12px; align-items: center; }
.filter-group label { display: flex; align-items: center; gap: 4px; cursor: pointer; color: #888; font-size: 0.9rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* Login */
.login-container {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: #0a0a0a;
}
.login-card {
  background: #141414; border: 1px solid #222; border-radius: 12px;
  padding: 40px; width: 100%; max-width: 400px;
}
.login-header { text-align: center; margin-bottom: 30px; }
.login-header h1 { color: #ff4444; font-size: 2rem; }
.login-header p { color: #666; margin-top: 4px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; color: #888; font-size: 0.85rem; margin-bottom: 6px; }
.form-group input, .form-group select {
  width: 100%; padding: 10px 14px; border-radius: 6px; border: 1px solid #2a2a2a;
  background: #0a0a0a; color: #e0e0e0; font-size: 0.95rem;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: #ff4444; }
.btn-block { width: 100%; padding: 12px; font-size: 1rem; }

/* Sidebar extras */
.sidebar-badge {
  display: inline-block; background: #cc0000; color: #fff; font-size: 0.65rem;
  padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px;
}
.sidebar-dealer-name { display: block; color: #888; font-size: 0.8rem; margin-top: 6px; }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid #2a2a2a; margin-top: auto; position: absolute; bottom: 0; left: 0; right: 0; }

/* Admin forms */
.inline-form { display: flex; gap: 10px; align-items: center; }
.inline-form input { flex: 1; padding: 10px 14px; border-radius: 6px; border: 1px solid #2a2a2a; background: #0a0a0a; color: #e0e0e0; }
.inline-form input:focus { outline: none; border-color: #ff4444; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .form-group select { width: 100%; padding: 10px 14px; border-radius: 6px; border: 1px solid #2a2a2a; background: #0a0a0a; color: #e0e0e0; }

/* Badge for roles */
.badge-role { background: #333; font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; }

/* MSRP reference bar */
.h2h-msrp-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #1a1a1a;
  border: 1px dashed #333;
  border-radius: 6px;
  margin: 8px 0 4px 0;
  font-size: 0.85rem;
}
.h2h-msrp-label {
  color: #888;
  font-weight: 600;
}
.h2h-msrp-compare {
  color: #aaa;
}
.h2h-v-msrp {
  font-size: 0.75rem;
  margin-left: 4px;
}

/* Package/option tags on vehicle lines */
.h2h-v-packages {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 100%;
  overflow: hidden;
}
.pkg-tag {
  font-size: 0.6rem;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.badge-pkg {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.badge-opt {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Keep h2h columns contained */
.h2h-side {
  min-width: 0;
  overflow: hidden;
}
.h2h-vehicle {
  overflow: hidden;
}
.h2h-all-grid {
  overflow: hidden;
}