/* ═══════════════════════════════════════════════════
   sidebar.css — Sidebar panel: filters, sort, results bar
   ═══════════════════════════════════════════════════ */

/* ── Full-width Filter + Sort bar ── */
#filter-sort-bar {
  display: none;
  align-items: center;
  height: 46px;
  background: rgba(8,11,16,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.tir-parking-filter {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  overflow-x: auto;
  height: 100%;
  border-right: 1px solid var(--border);
  scrollbar-width: none;
}
.tir-parking-filter::-webkit-scrollbar { display: none; }
.fsb-sort {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 100%;
}
.fsb-sort .sort-btn { flex: 1; height: 30px; }

#sidebar {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  background: rgba(8,11,16,.45);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[data-theme="light"] #sidebar { background: rgba(255,255,255,.5); }

/* ── Filter chips row (used in drawer and filter-sort-bar) ── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.f-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--gap-sm) clamp(8px, 1.5vw, 11px);
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.f-chip:hover { background: var(--glass-hover); border-color: var(--accent); color: var(--text); }
.f-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.f-chip.on {
  background: rgba(var(--accent-rgb),.1);
  border-color: rgba(var(--accent-rgb),.3);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.08);
}

/* ── Sort buttons ── */
.sort-row {
  display: flex;
  gap: 5px;
  padding: 6px 12px;
}
.sort-btn {
  flex: 1;
  padding: 6px 4px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--muted);
  transition: all .15s;
  text-align: center;
}
.sort-btn:hover { background: var(--glass-hover); border-color: var(--accent); color: var(--text); }
.sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sort-btn.on {
  background: rgba(var(--accent-rgb),.1);
  border-color: rgba(var(--accent-rgb),.3);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.08);
}

/* ── Results bar ── */
.results-bar {
  padding: 8px 14px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 38px;
}
.results-count {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--font-md);
  font-weight: 600;
}
.results-count .num {
  color: var(--accent);
  font-size: var(--font-lg);
}

.results-bar-actions { display: flex; align-items: center; gap: 6px; }

/* ── Refresh list button ── */
.refresh-list-btn {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.refresh-list-btn:hover { border-color: var(--accent); color: var(--accent); }
.refresh-list-btn:active { transform: scale(.92); }
.refresh-list-btn.flash {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(59,130,246,.12);
}

/* ── AI progress indicator ── */
.ai-progress {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  color: var(--ai);
}
.ai-progress.show { display: flex; }
.ai-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(167,139,250,.2);
  border-top-color: var(--ai);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ── Card list scroll container ── */
#card-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-md) var(--gap-md) 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile-first sidebar defaults ── */
.sidebar-filters { display: none; }
.fsb-sort { display: none; }

.filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.f-chip { flex-shrink: 0; padding: 5px 10px; }

.sort-row { padding: 6px 10px; }
.sort-btn  { font-size: 10px; padding: 5px 2px; }

.results-bar { padding: 6px 10px; min-height: 32px; }
.results-count { font-size: 12px; }
.results-count .num { font-size: 15px; }

#card-list { padding: 7px 8px 14px; gap: 8px; }

/* ── List sub-tabs (Locații / Hartă) ── */
/* list-subtabs — round chip buttons, fixed at bottom */
.list-subtabs {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: calc(var(--z-drawer-overlay, 599) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--glass-border);
  background: rgba(8, 11, 16, .5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.list-subtab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
  min-height: var(--touch-min, 44px);
}
.list-subtab:hover { background: var(--glass-hover); color: var(--text); }
.list-subtab:active { transform: scale(.96); }
.list-subtab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), .35);
}
/* Favorites content inside sidebar fills available space */
#sidebar #favorites-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
/* My Locations content inside sidebar fills available space */
#sidebar #my-locations-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
/* Restrictions content inside sidebar fills available space */
#sidebar #restrictions-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
/* Map container inside sidebar fills available space */
#sidebar #map-container {
  flex: 1 1 0;
  min-height: 0;
}

/* ── Map inside sidebar (mobile-first) ── */
#sidebar #map-container {
  flex: 1;
  position: relative;
}
#sidebar #map-container .map-fab-row {
  display: flex;
  position: absolute;
  bottom: 24px;
  left: 16px;
  right: 16px;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}
#sidebar #map-container .map-fab {
  display: flex;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #000;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb),.4), 0 2px 8px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: auto;
}
#sidebar #map-container .map-fab.fab-hidden { display: none !important; }
#sidebar #map-container .map-fab-locate {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--blue, #3b82f6);
  padding: 0;
  width: 44px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#sidebar #map-container .map-fab-ghost {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 0;
  width: 44px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#sidebar #map-container .map-fab-ghost.ghost-active {
  background: rgba(239,68,68,.2);
  border-color: rgba(239,68,68,.5);
  color: #ef4444;
}
#sidebar #map-container .map-fab-panel {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--accent, #4fc3f7);
  padding: 0;
  width: 44px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#sidebar #map-container .map-fab:active { transform: scale(.95); }
#sidebar #map-container .map-fab i,
#sidebar #map-container .map-fab svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
#sidebar #map-container .map-modal-close { display: none; }

/* ── Empty state ── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(20px, 5vw, 40px) clamp(12px, 3vw, 20px);
  text-align: center;
}
.empty-icon  { font-size: clamp(32px, 5vw, 44px); opacity: .35; }
.empty-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--muted);
}
.empty-sub {
  font-size: var(--font-sm);
  color: var(--muted);
  max-width: 280px;
  line-height: 1.5;
}

/* ── AI filter progress bar ── */
.ai-filter-bar {
  width: 200px;
  height: 3px;
  background: var(--glass-strong);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
  position: relative;
}
.ai-filter-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ai2), var(--ai), var(--ai2));
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ── Keywords bar ── */
#keywords-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: 38px;
}
#keywords-bar { display: none; }
.kw-bar-empty {
  font-size: var(--font-sm);
  color: var(--muted);
  font-style: italic;
}
.kw-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text);
}
.kw-tag-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all .15s;
}
.kw-tag-x:hover {
  background: rgba(239,68,68,.15);
  color: #ef4444;
}

/* ── Category bar ── */
#category-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
#category-bar::-webkit-scrollbar { display: none; }
.cat-btn {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  user-select: none;
}
.cat-btn:hover { border-color: var(--accent); color: var(--text); }
.cat-btn.on {
  background: rgba(var(--accent-rgb),.1);
  border-color: rgba(var(--accent-rgb),.3);
  color: var(--accent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.1);
}

/* ── Nearby checkbox bar ── */
#nearby-checkbox-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#nearby-checkbox-bar::-webkit-scrollbar { display: none; }
.nearby-cb-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  transition: background .15s, border-color .15s;
  user-select: none;
}
.nearby-cb-label:hover { border-color: var(--accent); }
.nearby-cb-label:has(:checked) {
  background: rgba(167,139,250,.1);
  border-color: rgba(167,139,250,.25);
  color: var(--accent);
}
.nearby-cb {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  margin: 0;
}

/* ═══ Inline restrictions (inside sidebar) ═══════ */
#restr-list {
  padding: 12px 16px 30px;
}
#restr-list .restr-range {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
#restr-list .restr-range-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
#restr-list .restr-range-btn:hover { border-color: var(--accent); color: var(--text); }
#restr-list .restr-range-btn.active {
  background: rgba(var(--accent-rgb), .15);
  border-color: var(--accent);
  color: var(--accent);
}
#restr-list .restr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}
#restr-list .restr-chip {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
#restr-list .restr-chip:hover { border-color: var(--accent); color: var(--text); }
#restr-list .restr-chip.active {
  background: rgba(var(--accent-rgb), .15);
  border-color: var(--accent);
  color: var(--accent);
}
#restr-list .restr-date-group { margin-bottom: 16px; }
#restr-list .restr-date-hdr {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
#restr-list .restr-date-hdr.today { color: var(--accent); }
#restr-list .restr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  transition: background .15s;
  gap: 10px;
}
#restr-list .restr-row:hover { background: var(--glass); }
#restr-list .restr-country {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  min-width: 100px;
}
#restr-list .restr-details {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#restr-list .restr-times {
  color: var(--red);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
#restr-list .restr-tonnage {
  background: rgba(239, 147, 43, .15);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
#restr-list .restr-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
#restr-list .restr-status {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
#restr-list .restr-status.error { color: var(--red); }
#restr-list .restr-retry {
  margin-top: 12px;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
}
#restr-list .restr-retry:hover { background: var(--accent2); }
#restr-list .restr-spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--glass-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: restr-spin .8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes restr-spin { to { transform: rotate(360deg); } }
.restr-tonnage-sign {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.restr-tonnage-sign svg text {
  font-family: 'Inter', sans-serif;
}

/* ═══ FAB Add Location (Locații sub-tab) ═══════ */
.fab-add {
  position: fixed;
  bottom: 110px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), .4);
  z-index: 50;
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.fab-add:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(var(--accent-rgb), .5); }
.fab-add:active { transform: scale(.95); }
.fab-add i,
.fab-add svg { width: 20px; height: 20px; }
/* === DESKTOP LAYOUT (activează când ai design desktop) ===
@media (min-width: 801px) {
  #filter-sort-bar { display: flex; }
  #sidebar { width: var(--sidebar-w); }
  .sidebar-filters { display: block; }
  #keywords-bar { display: block; }
  .fsb-sort { display: flex; }
  .list-subtabs { display: none; }
  .fab-add { display: none; }
}
=== END DESKTOP LAYOUT === */