/* VehFinder — Main Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body { font-family: 'Inter', sans-serif; background: #f3f4f6; color: #0f1115; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── NAV ── */
.nav { background: #1a1d23; border-bottom: 3px solid #e8381e; position: sticky; top: 0; z-index: 100; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 52px; gap: 16px; }
.nav-logo { font-size: 15px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 10px; }
.nav-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e8381e; display: inline-block; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.nav-links { display: flex; gap: 20px; list-style: none; flex: 1; justify-content: center; }
.nav-links a { color: #9ca3af; font-size: 12px; font-weight: 500; padding: 4px 0; transition: color 0.15s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-police-link { color: #93c5fd !important; }
.nav-admin-link { color: #fca5a5 !important; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-email { font-size: 11px; color: #6b7280; }
.nav-btn-ghost { background: transparent; border: 1px solid #374151; color: #9ca3af; font-size: 11px; font-weight: 500; padding: 5px 12px; transition: all 0.15s; }
.nav-btn-ghost:hover { border-color: #6b7280; color: #fff; }
.nav-btn-primary { background: #e8381e; border: none; color: #fff; font-size: 11px; font-weight: 600; padding: 6px 14px; transition: background 0.15s; white-space: nowrap; }
.nav-btn-primary:hover { background: #c8301a; }

/* ── TICKER ── */
.ticker-wrap { background: #1a1d23; border-bottom: 1px solid #2d3139; padding: 7px 0; overflow: hidden; }
.ticker-inner { display: flex; gap: 0; animation: ticker 40s linear infinite; white-space: nowrap; }
.ticker-item { font-size: 11px; color: #6b7280; padding: 0 32px; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.ticker-item strong { color: #d1d5db; font-family: 'Courier New', monospace; letter-spacing: 1px; }
.ticker-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ticker-dot.red { background: #e8381e; animation: pulse 2s infinite; }
.ticker-dot.amber { background: #d97706; }
.ticker-dot.green { background: #16a34a; }
@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ── HERO ── */
.hero { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 36px 24px 32px; }
.hero-inner { max-width: 680px; }
.hero h1 { font-size: 24px; font-weight: 600; color: #0f1115; margin-bottom: 8px; letter-spacing: -0.3px; }
.hero-sub { font-size: 14px; color: #6b7280; margin-bottom: 24px; line-height: 1.6; }
.search-wrap { display: flex; border: 2px solid #1a1d23; background: #fff; max-width: 540px; }
.search-wrap:focus-within { border-color: #e8381e; }
.search-input { flex: 1; border: none; outline: none; font-family: 'Courier New', monospace; font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; padding: 12px 16px; color: #0f1115; }
.search-input::placeholder { color: #d1d5db; letter-spacing: 2px; font-weight: 400; }
.search-btn { background: #1a1d23; color: #fff; border: none; font-size: 12px; font-weight: 600; padding: 0 22px; white-space: nowrap; transition: background 0.15s; }
.search-btn:hover { background: #e8381e; }
.search-hints { margin-top: 10px; font-size: 11px; color: #9ca3af; display: flex; gap: 16px; flex-wrap: wrap; }
.search-hints span::before { content: '✓ '; color: #16a34a; font-weight: 600; }

/* ── STATS BAR ── */
.stats-bar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0 24px; display: flex; gap: 0; overflow-x: auto; }
.stat { padding: 14px 28px 14px 0; margin-right: 28px; border-right: 1px solid #e5e7eb; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.stat:last-child { border-right: none; }
.stat-num { font-size: 20px; font-weight: 600; color: #0f1115; letter-spacing: -0.5px; line-height: 1; }
.stat-num.red { color: #e8381e; }
.stat-label { font-size: 10px; color: #9ca3af; font-weight: 500; letter-spacing: 0.2px; }

/* ── SECTIONS ── */
.section { padding: 24px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
.section-title { font-size: 14px; font-weight: 600; color: #0f1115; }
.section-meta { font-size: 11px; color: #9ca3af; display: flex; align-items: center; gap: 6px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; display: inline-block; animation: pulse 2s infinite; }

/* ── REPORT CARDS GRID ── */
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: #e5e7eb; border: 1px solid #e5e7eb; }
.report-card { background: #fff; padding: 16px; position: relative; border-left: 3px solid #e8381e; transition: background 0.15s; }
.report-card:hover { background: #fafafa; }
.report-card.recovered { border-left-color: #16a34a; }
.report-card.sighted { border-left-color: #d97706; }
.rc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.rc-status-line { font-size: 10px; color: #6b7280; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rc-dot.red { background: #e8381e; }
.rc-dot.amber { background: #d97706; }
.rc-dot.green { background: #16a34a; }
.rc-dot.blink { animation: pulse 2s infinite; }
.rc-sight-count { font-size: 18px; font-weight: 600; color: #d1d5db; line-height: 1; }
.rc-sight-count.amber { color: #d97706; }
.rc-sight-count.green { color: #16a34a; font-size: 14px; }
.rc-plate { display: block; font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: #0f1115; margin-bottom: 4px; }
.rc-plate:hover { color: #e8381e; }
.rc-vehicle { font-size: 12px; color: #374151; margin-bottom: 10px; }
.rc-meta { font-size: 11px; color: #9ca3af; display: flex; gap: 12px; flex-wrap: wrap; }
.verified-badge { background: #dbeafe; color: #1e40af; font-size: 9px; font-weight: 600; padding: 1px 6px; letter-spacing: 0.5px; }

/* ── TABLE ── */
.vf-table { width: 100%; border-collapse: collapse; background: #fff; }
.vf-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: #9ca3af; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; background: #fafafa; white-space: nowrap; }
.vf-table td { padding: 11px 16px; border-bottom: 1px solid #f3f4f6; font-size: 12px; vertical-align: middle; }
.vf-table tr:last-child td { border-bottom: none; }
.vf-table tr:hover td { background: #fafafa; }
.td-plate { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: #0f1115; }
.td-muted { color: #9ca3af; font-size: 11px; }

/* ── STATUS BADGES ── */
.badge { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 8px; display: inline-block; }
.badge-active { background: #fee2e2; color: #991b1b; }
.badge-sighted { background: #fef3c7; color: #92400e; }
.badge-recovered { background: #dcfce7; color: #166534; }
.badge-hidden { background: #f3f4f6; color: #6b7280; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-approved { background: #dcfce7; color: #166534; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-verified { background: #dbeafe; color: #1e40af; }
.badge-police { background: #1d4ed8; color: #fff; }
.badge-super { background: #1a1d23; color: #fff; }
.badge-mod { background: #e5e7eb; color: #374151; }

/* ── PANELS ── */
.panel { background: #fff; border: 1px solid #e5e7eb; margin-bottom: 16px; }
.panel-head { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; }
.panel-title { font-size: 13px; font-weight: 600; color: #0f1115; }
.panel-meta { font-size: 11px; color: #9ca3af; }
.panel-body { padding: 16px; }

/* ── FORMS ── */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #6b7280; margin-bottom: 5px; }
.form-control { width: 100%; border: 1px solid #d1d5db; background: #fff; color: #0f1115; padding: 8px 11px; font-size: 13px; outline: none; transition: border-color 0.15s; }
.form-control:focus { border-color: #1a1d23; }
.form-control.plate { font-family: 'Courier New', monospace; font-size: 15px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; padding: 10px 14px; font-size: 12px; margin-bottom: 16px; }
.form-success { background: #dcfce7; border: 1px solid #86efac; color: #166534; padding: 10px 14px; font-size: 12px; margin-bottom: 16px; }
.btn { border: none; font-size: 12px; font-weight: 600; padding: 9px 20px; cursor: pointer; transition: background 0.15s; display: inline-block; }
.btn-primary { background: #1a1d23; color: #fff; }
.btn-primary:hover { background: #e8381e; }
.btn-danger { background: #e8381e; color: #fff; }
.btn-danger:hover { background: #c8301a; }
.btn-ghost { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.btn-ghost:hover { background: #e5e7eb; }
.btn-green { background: #16a34a; color: #fff; }
.btn-green:hover { background: #15803d; }
.btn-police { background: #1d4ed8; color: #fff; }
.btn-police:hover { background: #1e40af; }
.btn-sm { padding: 5px 12px; font-size: 11px; }

/* ── PAGE HEADER ── */
.page-head { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 20px 24px; }
.page-head h1 { font-size: 20px; font-weight: 600; color: #0f1115; margin-bottom: 4px; }
.page-head p { font-size: 13px; color: #6b7280; }

/* ── REPORT VIEW ── */
.report-view { padding: 20px 24px; display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.report-view-main { display: flex; flex-direction: column; gap: 16px; }
.report-view-side { display: flex; flex-direction: column; gap: 16px; }
.report-plate-head { background: #1a1d23; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
.report-plate-main { font-family: 'Courier New', monospace; font-size: 24px; font-weight: 700; letter-spacing: 4px; color: #fff; }
.report-plate-vehicle { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* ── TIMELINE ── */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: #e5e7eb; }
.tl-item { position: relative; margin-bottom: 16px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { position: absolute; left: -19px; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e5e7eb; }
.tl-dot.red { background: #e8381e; }
.tl-dot.amber { background: #d97706; }
.tl-dot.blue { background: #2563eb; }
.tl-dot.green { background: #16a34a; }
.tl-label { font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.tl-label.red { color: #e8381e; }
.tl-label.amber { color: #d97706; }
.tl-label.blue { color: #2563eb; }
.tl-label.green { color: #16a34a; }
.tl-title { font-size: 12px; font-weight: 600; color: #0f1115; margin-bottom: 2px; }
.tl-detail { font-size: 11px; color: #6b7280; line-height: 1.4; }
.tl-time { font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* ── NEAR ME ── */
.controls-bar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 12px 24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.location-input-wrap { display: flex; border: 1.5px solid #d1d5db; flex: 1; min-width: 200px; max-width: 340px; }
.location-input-wrap:focus-within { border-color: #1a1d23; }
.location-input { flex: 1; border: none; outline: none; font-size: 13px; padding: 7px 11px; color: #0f1115; }
.geo-btn { background: #f9fafb; border: none; border-left: 1px solid #e5e7eb; padding: 0 12px; font-size: 11px; font-weight: 600; color: #374151; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.geo-btn:hover { background: #e5e7eb; }
.radius-wrap { display: flex; align-items: center; gap: 8px; background: #f9fafb; border: 1.5px solid #e5e7eb; padding: 7px 12px; }
.radius-wrap label { font-size: 10px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.radius-wrap input[type=range] { width: 90px; accent-color: #1a1d23; }
.radius-val { font-size: 12px; font-weight: 600; color: #0f1115; min-width: 40px; }
.filter-wrap { display: flex; border: 1.5px solid #e5e7eb; overflow: hidden; }
.filter-btn { background: #fff; border: none; border-right: 1px solid #e5e7eb; padding: 7px 12px; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; transition: all 0.15s; }
.filter-btn:last-child { border-right: none; }
.filter-btn.active { background: #1a1d23; color: #fff; }
.filter-btn:hover:not(.active) { background: #f3f4f6; }
.result-meta-bar { padding: 8px 24px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; }

/* ── MAP ── */
#map { height: 320px; background: #e8eaed; border-bottom: 1px solid #e5e7eb; }

/* ── ADMIN ── */
.admin-wrap { padding: 20px 24px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.admin-stat-card { background: #fff; border: 1px solid #e5e7eb; padding: 14px 16px; }
.admin-stat-num { font-size: 24px; font-weight: 600; color: #0f1115; line-height: 1; margin-bottom: 4px; }
.admin-stat-num.red { color: #e8381e; }
.admin-stat-num.amber { color: #d97706; }
.admin-stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #9ca3af; }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── POLICE PORTAL ── */
.police-banner { background: #1d4ed8; padding: 8px 24px; font-size: 11px; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 8px; }
.police-banner strong { color: #fff; }
.police-only-label { display: inline-flex; align-items: center; gap: 4px; background: #dbeafe; color: #1e40af; font-size: 9px; font-weight: 700; padding: 2px 7px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }

/* ── CASE NOTES ── */
.case-note { background: #f0f9ff; border-left: 3px solid #2563eb; padding: 10px 14px; margin-bottom: 8px; font-size: 12px; color: #0f1115; line-height: 1.5; }
.case-note-meta { font-size: 10px; color: #6b7280; margin-top: 4px; }

/* ── PRIVACY NOTE ── */
.privacy-note { background: #fffbeb; border: 1px solid #fde68a; padding: 10px 14px; font-size: 11px; color: #92400e; line-height: 1.5; margin-top: 12px; }

/* ── FOOTER ── */
.footer { background: #1a1d23; border-top: 1px solid #2d3139; padding: 14px 24px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-logo { font-size: 13px; font-weight: 600; color: #6b7280; }
.footer-text { font-size: 11px; color: #374151; }
.footer-text a { color: #6b7280; }
.footer-text a:hover { color: #9ca3af; }

/* ── ERROR PAGE ── */
.error-page { padding: 60px 24px; text-align: center; }
.error-page h1 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.error-page p { color: #6b7280; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .report-view { grid-template-columns: 1fr; }
  .admin-two-col { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nav-inner { padding: 0 16px; }
  .stats-bar { padding: 0 16px; }
  .section, .admin-wrap, .page-head { padding: 16px; }
  .controls-bar { padding: 10px 16px; }
}