/* ═══════════════════════════════════════════════════
   Subscreener — Global Stylesheet
   ═══════════════════════════════════════════════════ */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Geist+Mono:wght@400;500;600;700&display=swap');

/* ─── CSS Variables (Theme) ─── */
:root {
  --bg:         #09090b;
  --raised:     #0f0f11;
  --surface:    #161618;
  --card:       #1a1a1d;
  --border:     #232326;
  --border-lt:  #2e2e33;
  --hover:      #17171b;
  --text:       #ececef;
  --text2:      #9898a0;
  --text3:      #5a5a64;
  --up:         #22ab94;
  --up-dim:     #22ab9430;
  --dn:         #f7525f;
  --dn-dim:     #f7525f30;
  --accent:     #d4d4d8;
  --accent-dim: #d4d4d814;
  --gold:       #eab308;
  --purple:     #a78bfa;
  --radius:     8px;
  --radius-sm:  6px;
  --ff:         'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --fm:         'Geist Mono', 'JetBrains Mono', 'SF Mono', monospace;
}

/* ─── Reset ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── Base ─── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-lt);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text3);
}

/* ─── Animations ─── */
@keyframes panelIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Bubble float animations */
@keyframes b2float0 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-0.8px, 1.5px); } 75% { transform: translate(0.8px, 0.8px); } }
@keyframes b2float1 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1.2px, -1.15px); } 50% { transform: translate(-0.95px, 1.7px); } 75% { transform: translate(0.95px, 0.6px); } }
@keyframes b2float2 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1.4px, -1.3px); } 50% { transform: translate(-1.1px, 1.9px); } 75% { transform: translate(1.1px, 0.4px); } }
@keyframes b2float3 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1.6px, -1.45px); } 50% { transform: translate(-1.25px, 2.1px); } 75% { transform: translate(1.25px, 0.2px); } }
@keyframes b2float4 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1.8px, -1.6px); } 50% { transform: translate(-1.4px, 2.3px); } 75% { transform: translate(1.4px, 0px); } }
@keyframes b2float5 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2px, -1.75px); } 50% { transform: translate(-1.55px, 2.5px); } 75% { transform: translate(1.55px, -0.2px); } }
@keyframes b2float6 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2.2px, -1.9px); } 50% { transform: translate(-1.7px, 2.7px); } 75% { transform: translate(1.7px, -0.4px); } }
@keyframes b2float7 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2.4px, -2.05px); } 50% { transform: translate(-1.85px, 2.9px); } 75% { transform: translate(1.85px, -0.6px); } }

/* ─── Selection ─── */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ─── Light mode overrides ─── */
body.light ::selection {
  background: #3a3a40;
  color: #ffffff;
}

body.light ::-webkit-scrollbar-track {
  background: #f4f4f6;
}

body.light ::-webkit-scrollbar-thumb {
  background: #c0c0c6;
}

body.light ::-webkit-scrollbar-thumb:hover {
  background: #8a8a94;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px)
   Desktop layout is UNTOUCHED — these only activate
   on smaller screens.
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ss-summary {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .ss-status,
  .ss-header,
  .ss-summary,
  .ss-filters,
  .ss-table,
  .ss-cards,
  .ss-bubble,
  .ss-heatmap,
  .ss-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .ss-detail {
    width: 560px !important;
  }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Status bar ─── */
  .ss-status {
    padding: 8px 14px !important;
    font-size: 10px !important;
  }

  .ss-status-right span:last-child {
    display: none;
  }

  /* ─── Header ─── */
  .ss-header {
    padding: 16px 14px !important;
  }

  .ss-header-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .ss-header-controls {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .ss-header-controls button {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-height: 36px;
  }

  /* ─── Summary cards ─── */
  .ss-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 14px 14px 0 !important;
    gap: 8px !important;
  }

  /* ─── Filters ─── */
  .ss-filters {
    padding: 14px 14px 0 !important;
    gap: 6px !important;
  }

  .ss-filters input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .ss-filters button {
    min-height: 36px;
  }

  /* ─── Controls bar ─── */
  .ss-controls {
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    width: 100%;
    margin-top: 4px;
  }

  /* ─── Table ─── */
  .ss-table {
    padding: 14px !important;
  }

  .ss-table-inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .ss-table table {
    width: auto !important;
    min-width: 800px !important;
  }

  /* ─── Cards ─── */
  .ss-cards {
    padding: 14px !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 8px !important;
  }

  /* ─── Bubble ─── */
  .ss-bubble {
    padding: 14px !important;
  }

  /* ─── Heatmap ─── */
  .ss-heatmap {
    padding: 14px !important;
  }

  .ss-heatmap-rows {
    min-width: 900px;
  }

  /* ─── Detail panel ─── */
  .ss-detail {
    width: 100% !important;
    border-left: none !important;
  }

  .ss-detail-inner {
    padding: 20px 16px !important;
  }

  .ss-detail-inner svg {
    max-width: 100%;
    height: auto;
  }

  /* ─── Footer ─── */
  .ss-footer {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 14px !important;
    align-items: flex-start !important;
  }

  .ss-footer-right {
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Small Mobile (≤480px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .ss-status {
    padding: 6px 10px !important;
  }

  .ss-header {
    padding: 12px 10px !important;
  }

  .ss-summary,
  .ss-filters,
  .ss-table,
  .ss-cards,
  .ss-bubble,
  .ss-heatmap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ss-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  .ss-detail-inner {
    padding: 16px 12px !important;
  }

  .ss-footer {
    padding: 14px 10px !important;
  }
}