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

*, *::before, *::after {
  font-family: 'Inter', system-ui, sans-serif;
  box-sizing: border-box;
}

/* ── Skeleton shimmer ───────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton-pulse {
  background: linear-gradient(90deg, #1e293b 25%, #2d3f55 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

/* ── Sidebar — mobile: fixed drawer, desktop: sticky inline ─────── */
@media (max-width: 767px) {
  #sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100vh;
    width: 288px;
    z-index: 50;
    background: #0f172a;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
  }
  #sidebar.open { transform: translateX(0); }
}
@media (min-width: 768px) {
  #sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
    align-self: flex-start;
  }
}

/* ── Text utilities ─────────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Thin scrollbar for filter lists ───────────────────────────── */
.filter-scroll::-webkit-scrollbar { width: 4px; }
.filter-scroll::-webkit-scrollbar-track { background: transparent; }
.filter-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
.filter-scroll { scrollbar-width: thin; scrollbar-color: #334155 transparent; }

/* ── Form controls ──────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] { accent-color: #6366f1; cursor: pointer; }

/* ── Toggle switch ──────────────────────────────────────────────── */
#remote-toggle:checked + .toggle-track { background-color: #6366f1; }
#remote-toggle:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }