/* =============================================
   TruckFinder MY — style.css
   ============================================= */

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

:root {
  --navy:       #050d1a;
  --navy2:      #0a1628;
  --navy3:      #0f2040;
  --blue:       #0057ff;
  --blue2:      #1a6eff;
  --cyan:       #00d4ff;
  --gold:       #f5a623;
  --green:      #00e676;
  --red:        #ff4757;
  --text:       #e8f0ff;
  --muted:      #7a91b8;
  --border:     rgba(255,255,255,0.07);
  --card:       rgba(255,255,255,0.04);
  --card-hover: rgba(255,255,255,0.08);
  --radius:     16px;
  --radius-sm:  10px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--navy);
  color: var(--text);
  display: flex;
  height: 100vh;
}

/* ── SIDEBAR ─────────────────────────────────── */
.sidebar {
  width: 260px; min-width: 260px;
  background: var(--navy2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 24px 0;
  overflow-y: auto;
  position: relative; z-index: 10;
}
.sidebar::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:200px;
  background: radial-gradient(ellipse at 30% 0%, rgba(0,87,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.logo-wrap {
  padding: 0 20px 24px;
  border-bottom: 1px solid var(--border);
}
.logo-icon {
  width:44px; height:44px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0,87,255,0.4);
}
.logo-name {
  font-family: 'Syne', sans-serif;
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.3px; line-height: 1.1;
}
.logo-name span { color: var(--cyan); }
.logo-sub { font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0.3px; }

.post-btn {
  margin: 20px 16px;
  background: linear-gradient(135deg, var(--blue), #003ec7);
  border: none; color: white;
  padding: 13px 16px; border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 6px 20px rgba(0,87,255,0.35);
}
.post-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,87,255,0.5); }

.nav-section { padding: 0 12px; margin-top: 8px; }
.nav-label {
  font-size: 10px; font-weight: 600; color: var(--muted);
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 8px 8px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; font-size: 13.5px; color: var(--muted);
  transition: all 0.15s; position: relative;
}
.nav-item:hover { background: var(--card); color: var(--text); }
.nav-item.active { background: rgba(0,87,255,0.15); color: var(--blue2); }
.nav-item.active::before {
  content: '';
  position: absolute; left:0; top:50%; transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--blue2); border-radius: 0 3px 3px 0;
}
.nav-item i { font-size: 16px; width: 18px; }

.filter-section {
  padding: 16px; margin-top: 8px;
  border-top: 1px solid var(--border);
}
.filter-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
}
.filter-group { margin-bottom: 16px; }
.filter-group-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; font-size: 11.5px; color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.chip:hover, .chip.active {
  background: rgba(0,87,255,0.18);
  border-color: rgba(0,87,255,0.5);
  color: var(--blue2);
}

/* ── MAIN ────────────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ── TOPBAR ──────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--navy2); gap: 16px;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.ai-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.25);
  padding: 6px 14px; border-radius: 20px;
}
.ai-dot {
  width: 7px; height: 7px;
  background: var(--cyan); border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.8); }
}
.ai-badge-text { font-size: 12px; font-weight: 600; color: var(--cyan); letter-spacing: 0.5px; }
.topbar-title  { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; }

.lang-btn {
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); padding: 7px 12px; border-radius: 8px;
  font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
.login-btn {
  background: linear-gradient(135deg, var(--blue), #003ec7);
  color: white; border: none; padding: 8px 20px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: all 0.2s; box-shadow: 0 4px 14px rgba(0,87,255,0.35);
}
.login-btn:hover { transform: translateY(-1px); }

/* ── CONTENT AREA ────────────────────────────── */
.content-area { flex:1; display:flex; overflow:hidden; }
.center-panel  { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ── SEARCH PANEL ────────────────────────────── */
.search-panel {
  padding: 20px 24px 0;
  background: var(--navy2);
  border-bottom: 1px solid var(--border);
}
.search-inner {
  background: var(--navy3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  position: relative; overflow: hidden;
}
.search-inner::before {
  content: '';
  position: absolute; top:-30px; right:-30px;
  width:200px; height:200px;
  background: radial-gradient(circle, rgba(0,87,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.chat-messages { min-height: 80px; margin-bottom: 16px; }

/* Chat bubbles */
.msg {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 12px; animation: fadeUp 0.4s ease;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.msg.user { flex-direction: row-reverse; }
.msg-avatar {
  width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.msg-avatar.ai      { background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.msg-avatar.user-av { background: rgba(245,166,35,0.2); color: var(--gold); border:1px solid rgba(245,166,35,0.3); }
.msg-bubble {
  padding: 10px 14px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; max-width: 80%;
}
.msg.ai   .msg-bubble { background: var(--card); border: 1px solid var(--border); color: var(--text); }
.msg.user .msg-bubble { background: linear-gradient(135deg, var(--blue), #003ec7); color: white; }
.msg-time { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* Search bar */
.search-bar { display: flex; gap: 10px; align-items: center; }
.search-input-wrap { flex:1; position: relative; }
.search-input {
  width: 100%;
  background: var(--navy); border: 1.5px solid var(--border);
  border-radius: 12px; color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  padding: 14px 44px 14px 16px; outline: none;
  transition: border-color 0.2s;
}
.search-input:focus { border-color: rgba(0,87,255,0.6); box-shadow: 0 0 0 3px rgba(0,87,255,0.1); }
.search-input::placeholder { color: var(--muted); }
.search-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.search-btn {
  background: linear-gradient(135deg, var(--blue), #003ec7);
  color: white; border: none; padding: 14px 22px; border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: all 0.2s; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,87,255,0.4);
}
.search-btn:hover    { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,87,255,0.5); }
.search-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

.browse-btn {
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,87,255,0.15));
  border: 1.5px solid rgba(0,212,255,0.4);
  color: var(--cyan);
  padding: 14px 20px; border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: all 0.2s; white-space: nowrap;
}
.browse-btn:hover    { background: rgba(0,212,255,0.25); border-color: rgba(0,212,255,0.7); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,212,255,0.2); }
.browse-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.btn-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.example-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ex-chip {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px;
  font-size: 12px; color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.ex-chip:hover { background: rgba(0,87,255,0.12); border-color: rgba(0,87,255,0.4); color: var(--blue2); }

/* ── RESULTS ─────────────────────────────────── */
.results-area { flex:1; overflow-y:auto; padding: 20px 24px; scroll-behavior: smooth; }
.results-area::-webkit-scrollbar       { width: 4px; }
.results-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.results-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.results-count {
  font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.count-badge {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
}
.sort-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sort-select {
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; cursor: pointer; outline: none;
}

/* AI understanding strip */
.ai-understanding {
  background: rgba(0,212,255,0.06); border: 1px solid rgba(0,212,255,0.2);
  border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 16px;
  display: flex; align-items: flex-start; gap: 12px; animation: fadeUp 0.4s ease;
}
.ai-understanding i { color: var(--cyan); margin-top: 2px; font-size: 16px; }
.ai-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.ai-tag.truck  { background: rgba(0,87,255,0.2);    color: var(--blue2); }
.ai-tag.loc    { background: rgba(0,230,118,0.15);  color: var(--green); }
.ai-tag.cargo  { background: rgba(245,166,35,0.15); color: var(--gold);  }

/* ── TRUCK CARDS ─────────────────────────────── */
.truck-grid { display: flex; flex-direction: column; gap: 12px; }
.truck-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; gap: 16px; align-items: flex-start;
  cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
}
.truck-card::before {
  content: ''; position: absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(to bottom, var(--blue), var(--cyan));
  opacity: 0; transition: opacity 0.2s;
}
.truck-card:hover { background: var(--card-hover); border-color: rgba(0,87,255,0.3); transform: translateX(3px); }
.truck-card:hover::before { opacity: 1; }
.google-card { border-color: rgba(0,212,255,0.2) !important; }
.google-card:hover { border-color: rgba(0,212,255,0.5) !important; }
.google-card::before { background: linear-gradient(to bottom, var(--cyan), var(--blue)) !important; }

.company-logo {
  width:60px; height:60px; border-radius:12px;
  background: var(--navy3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  font-family: 'Syne', sans-serif; font-weight: 800; color: var(--blue2);
}
.card-body { flex:1; min-width:0; }
.card-top  { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px; }
.company-name {
  font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.verified-badge { color: var(--blue2); font-size: 14px; }
.status-pill { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.status-pill.available   { background: rgba(0,230,118,0.15); color: var(--green); border: 1px solid rgba(0,230,118,0.3); }
.status-pill.busy        { background: rgba(255,165,0,0.15);  color: #ffa500;      border: 1px solid rgba(255,165,0,0.3); }
.status-pill.maintenance { background: rgba(255,71,87,0.15);  color: var(--red);   border: 1px solid rgba(255,71,87,0.3); }

.card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.meta-item i { font-size: 12px; }
.meta-sep  { width:3px; height:3px; background: var(--border); border-radius: 50%; }

.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tag { padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 500; }
.tag.type     { background: rgba(0,87,255,0.12);   color: var(--blue2); }
.tag.region   { background: rgba(0,230,118,0.1);   color: var(--green); }
.tag.capacity { background: rgba(245,166,35,0.1);  color: var(--gold);  }

.card-actions { display: flex; gap: 8px; }
.btn-call, .btn-wa, .btn-view {
  padding: 7px 14px; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; border: none;
  display: flex; align-items: center; gap: 6px; transition: all 0.15s;
}
.btn-call { background: rgba(255,255,255,0.06); color: var(--text);   border: 1px solid var(--border); }
.btn-call:hover { background: rgba(255,255,255,0.1); }
.btn-wa   { background: rgba(37,211,102,0.15);  color: #25d366;        border: 1px solid rgba(37,211,102,0.3); }
.btn-wa:hover   { background: rgba(37,211,102,0.25); }
.btn-view { background: linear-gradient(135deg, var(--blue), #003ec7); color: white; box-shadow: 0 3px 10px rgba(0,87,255,0.3); }
.btn-view:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,87,255,0.4); }
.btn-save { background: rgba(0,212,255,0.1); color: var(--cyan); border: 1px solid rgba(0,212,255,0.3); }
.btn-save:hover { background: rgba(0,212,255,0.2); }

/* ── RIGHT PANEL ─────────────────────────────── */
.right-panel {
  width: 300px; min-width: 300px;
  border-left: 1px solid var(--border);
  background: var(--navy2);
  display: flex; flex-direction: column; overflow: hidden;
}
.map-section  { padding: 16px; border-bottom: 1px solid var(--border); }
.panel-title  {
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
  margin-bottom: 12px; color: var(--muted);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.map-frame {
  width:100%; height:190px; border-radius:12px;
  overflow:hidden; border:1px solid var(--border);
  background: var(--navy3);
}
.map-frame iframe { width:100%; height:100%; border:none; }

.quick-filters { padding: 16px; border-bottom: 1px solid var(--border); }
.qf-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  transition: all 0.15s; margin-bottom: 4px;
}
.qf-item:hover { background: var(--card); }
.qf-left  { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.qf-dot   { width:8px; height:8px; border-radius:50%; }
.qf-count {
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.08);
  padding: 2px 8px; border-radius: 10px; color: var(--muted);
}

.stats-section { padding: 16px; }
.stat-cards    { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px;
}
.stat-num   { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 2px; }
.stat-label { font-size: 10px; color: var(--muted); font-weight: 500; }
.stat-card.blue .stat-num  { color: var(--blue2); }
.stat-card.cyan .stat-num  { color: var(--cyan);  }
.stat-card.green .stat-num { color: var(--green); }
.stat-card.gold .stat-num  { color: var(--gold);  }

.post-job-cta {
  margin: 16px;
  background: linear-gradient(135deg, rgba(0,87,255,0.15), rgba(0,212,255,0.08));
  border: 1px solid rgba(0,87,255,0.3);
  border-radius: 12px; padding: 16px; text-align: center;
}
.cta-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.cta-sub   { font-size: 11px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.cta-btn {
  background: linear-gradient(135deg, var(--blue), #003ec7);
  color: white; border: none; padding: 9px 20px; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ── WHATSAPP FLOAT ──────────────────────────── */
.wa-float {
  position: fixed; bottom: 28px; right: 24px;
  background: linear-gradient(135deg, #25d366, #128c3e);
  color: white; padding: 12px 20px; border-radius: 50px;
  font-size: 13px; font-weight: 700; cursor: pointer; z-index: 100;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(37,211,102,0.45);
  transition: all 0.2s; font-family: 'DM Sans', sans-serif;
}
.wa-float:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 32px rgba(37,211,102,0.55); }

/* ── EMPTY STATE ─────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; color: var(--muted); text-align: center;
  animation: fadeUp 0.6s ease;
}
.empty-icon  { font-size: 52px; margin-bottom: 20px; opacity: 0.4; }
.empty-title { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty-sub   { font-size: 13px; line-height: 1.6; max-width: 320px; }

/* ── SKELETON LOADER ─────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position:100%; } 100% { background-position:-100%; } }
.skel-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  display: flex; gap: 16px; margin-bottom: 12px;
}
.skel-logo { width:60px; height:60px; border-radius:12px; flex-shrink:0; }
.skel-body { flex:1; display:flex; flex-direction:column; gap:8px; }
.skel-line { height: 12px; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1100px) { .right-panel { display: none; } }
@media (max-width: 768px)  { .sidebar { display: none; } .topbar-title { font-size: 14px; } }