/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
#app { min-height:100vh; }

.dashboard-layout {
  display:grid; grid-template-columns:240px 1fr; min-height:100vh;
}

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.sidebar {
  background:var(--surface); border-right:1px solid var(--border-dim);
  display:flex; flex-direction:column; position:fixed;
  top:0; left:0; bottom:0; width:240px; z-index:100;
}
.sidebar-logo {
  display:flex; align-items:center; gap:0.6rem; padding:1.5rem 1.25rem 1rem;
  font-size:1rem; font-weight:700; color:var(--text); border-bottom:1px solid var(--border-dim);
}
.sidebar-logo svg { color:var(--accent); flex-shrink:0; }

.sidebar-nav { flex:1; padding:1rem 0.75rem; display:flex; flex-direction:column; gap:0.25rem; }
.nav-item {
  display:flex; align-items:center; gap:0.75rem; padding:0.7rem 0.875rem;
  border-radius:10px; font-size:0.9375rem; font-weight:500; color:var(--text-muted);
  cursor:pointer; transition:all var(--transition); border:none; background:none;
  width:100%; text-align:left;
}
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:rgba(139,92,246,0.12); color:var(--accent); }
.nav-item svg { flex-shrink:0; }
.nav-item .badge-count {
  margin-left:auto; background:var(--accent); color:#fff;
  font-size:0.7rem; font-weight:700; padding:1px 6px; border-radius:50px; min-width:18px; text-align:center;
}

.sidebar-footer { padding:1rem 0.75rem; border-top:1px solid var(--border-dim); }
.plan-chip {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.25rem 0.6rem; border-radius:50px; font-size:0.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
}
.plan-chip.free      { background:rgba(100,116,139,0.15); color:var(--text-dim); }
.plan-chip.pro       { background:rgba(139,92,246,0.15); color:var(--accent); }
.plan-chip.business  { background:rgba(59,130,246,0.15); color:var(--accent-2); }
.plan-chip.enterprise{ background:rgba(34,197,94,0.15); color:var(--success); }

.sidebar-user { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.875rem; }
.user-avatar {
  width:36px; height:36px; border-radius:50%; background:rgba(139,92,246,0.2);
  color:var(--accent); font-weight:700; font-size:0.875rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.user-info { flex:1; min-width:0; }
.user-name { font-size:0.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-plan { margin-top:3px; }
.btn-logout {
  width:100%; display:flex; align-items:center; gap:0.5rem; padding:0.6rem 0.875rem;
  background:none; border:1px solid var(--border-dim); border-radius:10px;
  color:var(--text-muted); font-size:0.875rem; font-weight:500; cursor:pointer;
  transition:all var(--transition);
}
.btn-logout:hover { border-color:var(--danger); color:var(--danger); background:rgba(239,68,68,0.05); }

/* ═══════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════ */
.main-content { margin-left:240px; display:flex; flex-direction:column; min-height:100vh; }
.topbar {
  padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border-dim); background:var(--bg); position:sticky; top:0; z-index:50;
}
.topbar-title { font-size:1.25rem; font-weight:700; }
.topbar-actions { display:flex; align-items:center; gap:0.75rem; }

.view-body { padding:2rem; flex:1; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.625rem 1.25rem; border-radius:10px; font-weight:600; font-size:0.875rem;
  border:none; cursor:pointer; transition:all var(--transition); font-family:var(--font); line-height:1;
}
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
.btn-primary:hover { opacity:0.9; transform:translateY(-1px); }
.btn-secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border-dim); }
.btn-secondary:hover { border-color:var(--accent); }
.btn-ghost { background:transparent; color:var(--text-muted); }
.btn-ghost:hover { color:var(--text); background:var(--surface-2); }
.btn-block { display:flex; width:100%; }
.btn-sm { padding:0.4rem 0.875rem; font-size:0.8125rem; }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card {
  background:var(--surface); border:1px solid var(--border-dim);
  border-radius:var(--radius); padding:1.5rem;
}
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.stat-card { display:flex; flex-direction:column; gap:0.5rem; }
.stat-card .stat-label { font-size:0.8125rem; color:var(--text-muted); font-weight:500; }
.stat-card .stat-value { font-size:1.75rem; font-weight:800; }
.stat-card .stat-sub { font-size:0.8125rem; color:var(--text-dim); }

/* ═══════════════════════════════════════
   CAR CARDS
═══════════════════════════════════════ */
.cars-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }
.car-card {
  background:var(--surface); border:1px solid var(--border-dim); border-radius:var(--radius);
  overflow:hidden; transition:all var(--transition); cursor:pointer;
}
.car-card:hover { border-color:rgba(139,92,246,0.4); box-shadow:0 8px 24px rgba(0,0,0,0.3); transform:translateY(-3px); }
.car-img {
  height:160px; background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:0.8125rem; position:relative; overflow:hidden;
}
.car-img img { width:100%; height:100%; object-fit:cover; }
.car-portal-tag {
  position:absolute; top:0.625rem; left:0.625rem;
  padding:0.2rem 0.6rem; border-radius:50px; font-size:0.7rem; font-weight:700;
  background:rgba(13,19,36,0.85); color:var(--text); backdrop-filter:blur(4px);
}
.car-body { padding:1rem; }
.car-title { font-size:0.9375rem; font-weight:600; margin-bottom:0.375rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.car-price { font-size:1.25rem; font-weight:800; color:var(--accent); margin-bottom:0.625rem; }
.car-meta { display:flex; gap:0.5rem; flex-wrap:wrap; }
.car-chip { padding:0.2rem 0.55rem; border-radius:6px; font-size:0.75rem; font-weight:500; background:var(--surface-2); color:var(--text-muted); }
.car-actions { display:flex; gap:0.5rem; padding:0.75rem 1rem; border-top:1px solid var(--border-dim); }

/* ═══════════════════════════════════════
   NOTIFICATIONS
═══════════════════════════════════════ */
.notif-list { display:flex; flex-direction:column; gap:0.75rem; }
.notif-item {
  display:flex; align-items:flex-start; gap:1rem; padding:1rem 1.25rem;
  background:var(--surface); border:1px solid var(--border-dim); border-radius:12px;
  transition:border-color var(--transition);
}
.notif-item.unread { border-left:3px solid var(--accent); }
.notif-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.notif-icon.price_drop   { background:rgba(34,197,94,0.15); color:var(--success); }
.notif-icon.new_listing  { background:rgba(139,92,246,0.15); color:var(--accent); }
.notif-icon.watchlist_hit{ background:rgba(234,179,8,0.15); color:var(--warning); }
.notif-body { flex:1; min-width:0; }
.notif-title { font-size:0.9375rem; font-weight:600; margin-bottom:0.25rem; }
.notif-sub { font-size:0.8125rem; color:var(--text-muted); }
.notif-time { font-size:0.75rem; color:var(--text-dim); white-space:nowrap; }

/* ═══════════════════════════════════════
   LOGIN
═══════════════════════════════════════ */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:2rem;
  background-image:radial-gradient(ellipse at 50% 0%,rgba(139,92,246,0.1) 0%,transparent 60%);
}
.login-card {
  width:100%; max-width:420px; background:var(--surface);
  border:1px solid var(--border); border-radius:24px; padding:2.5rem;
  box-shadow:0 24px 64px rgba(0,0,0,0.4);
}
.login-logo { display:flex; align-items:center; gap:0.6rem; font-size:1.125rem; font-weight:700; margin-bottom:2rem; }
.login-logo svg { color:var(--accent); }
.login-title { font-size:1.5rem; font-weight:800; margin-bottom:0.5rem; }
.login-sub { color:var(--text-muted); font-size:0.9375rem; margin-bottom:2rem; }
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:0.875rem; font-weight:600; margin-bottom:0.5rem; }
.form-input {
  width:100%; padding:0.75rem 1rem; background:var(--surface-2); color:var(--text);
  border:1px solid var(--border-dim); border-radius:10px; font-size:0.9375rem;
  font-family:var(--font); outline:none; transition:border-color var(--transition);
}
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(139,92,246,0.1); }
.form-input::placeholder { color:var(--text-dim); }
.form-error { margin-top:0.5rem; font-size:0.8125rem; color:var(--danger); display:none; }
.form-error.visible { display:block; }
.login-footer { margin-top:1.5rem; text-align:center; font-size:0.875rem; color:var(--text-muted); }
.login-footer a { color:var(--accent); }

/* ═══════════════════════════════════════
   EMPTY / LOADING STATES
═══════════════════════════════════════ */
.state-container {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:4rem 2rem; text-align:center; min-height:300px;
}
.state-icon { font-size:3rem; margin-bottom:1.25rem; opacity:0.4; }
.state-title { font-size:1.25rem; font-weight:700; margin-bottom:0.5rem; }
.state-sub { color:var(--text-muted); font-size:0.9375rem; margin-bottom:1.75rem; max-width:380px; }

.skeleton {
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:400%; animation:shimmer 1.4s ease infinite; border-radius:8px;
}
@keyframes shimmer { 0%{background-position:100% 0}100%{background-position:-100% 0} }
.sk-card { height:240px; border-radius:var(--radius); }
.sk-line { height:14px; margin-bottom:8px; }
.sk-line.short { width:60%; }

/* Spinner */
.spinner {
  width:20px; height:20px; border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
#toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  display:flex; flex-direction:column; gap:0.625rem;
}
.toast {
  padding:0.875rem 1.25rem; border-radius:12px; font-size:0.9rem; font-weight:500;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,0.4); animation:toastIn 0.3s ease; max-width:320px;
  display:flex; align-items:center; gap:0.75rem;
}
.toast.success { border-color:rgba(34,197,94,0.4); }
.toast.error   { border-color:rgba(239,68,68,0.4); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none} }

/* ═══════════════════════════════════════
   PROFILE
═══════════════════════════════════════ */
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.profile-card h3 { font-size:1rem; font-weight:700; margin-bottom:1.25rem; padding-bottom:0.75rem; border-bottom:1px solid var(--border-dim); }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:0.6rem 0; border-bottom:1px solid var(--border-dim); }
.info-row:last-child { border-bottom:none; }
.info-label { font-size:0.875rem; color:var(--text-muted); }
.info-value { font-size:0.9375rem; font-weight:600; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width:900px) {
  .dashboard-layout { grid-template-columns:1fr; }
  .sidebar { transform:translateX(-100%); transition:transform 0.3s ease; }
  .sidebar.open { transform:translateX(0); box-shadow:8px 0 24px rgba(0,0,0,0.4); }
  .main-content { margin-left:0; }
  .topbar { padding:1rem; }
  .view-body { padding:1.25rem; }
  .profile-grid { grid-template-columns:1fr; }
}