/* ════════════════════════════════════════════════════════════════
   RoadWatch — Єдина адаптивна система
   ════════════════════════════════════════════════════════════════
   Mobile First · 7 breakpoints · CSS Custom Properties
   Підключай ПЕРЕД локальними стилями сторінки.

   📱 Mobile    < 480px    1 колонка, compact
   📱 Mobile L  480–767px  2 колонки, ширше
   📟 Tablet    768–1023px 3 колонки, sidebar overlay
   💻 Netbook   1024–1199px sidebar fixed, topbar ховається
   💻 Laptop    1200–1439px 4 колонки, more space
   🖥  Desktop   1440–1919px 3-col layout, великий контент
   🖥  Wide      1920px+    6 колонок, max-width 1600px
════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* ── Кольори (Light) ─────────────────────────── */
  --bg:           #f5f7fa;
  --bg2:          #e2e8f0;
  --surface:      #ffffff;
  --surface2:     #edf0f5;
  --card:         var(--surface);   /* alias */
  --border:       rgba(0, 0, 0, 0.08);
  --shadow:       rgba(15, 23, 42, 0.06);

  --text:         #1a202c;
  --muted:        #64748b;

  --accent:       #2563eb;
  --accent-hover: #1d4ed8;
  --accent2:      #059669;
  --danger:       #dc2626;
  --red:          var(--danger);    /* alias */
  --warn:         #d97706;
  --orange:       var(--warn);      /* alias */
  --ok:           #059669;
  --green:        var(--ok);        /* alias */
  --yellow:       #F5C542;
  --blue:         #3b82f6;

  /* ── Шрифти ──────────────────────────────────── */
  --font-system:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* Aliases used by individual pages */
  --display:      var(--font-display);
  --mono:         var(--font-mono);

  /* ── Responsive layout tokens ────────────────── */
  --page-px:      16px;
  --page-py:      16px;
  --sidebar-w:    0px;
  --content-max:  100%;
  --topbar-h:     48px;
  --bottombar-h:  60px;

  /* ── Typography scale ────────────────────────── */
  --text-xs:      0.625rem;   /* 10px */
  --text-sm:      0.75rem;    /* 12px */
  --text-base:    0.875rem;   /* 14px */
  --text-lg:      1.125rem;   /* 18px */
  --text-xl:      1.375rem;   /* 22px */
  --text-2xl:     1.75rem;    /* 28px */
  --text-3xl:     2.25rem;    /* 36px */

  /* ── Component tokens ────────────────────────── */
  --card-radius:  12px;
  --btn-h:        40px;
  --input-h:      40px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-sm:    0 1px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Motion ──────────────────────────────────── */
  --transition:   0.2s ease;
}

/* ── DARK THEME ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0f172a;
  --bg2:          #1e293b;
  --surface:      #1e293b;
  --surface2:     #334155;
  --card:         var(--surface);
  --border:       rgba(255, 255, 255, 0.08);
  --shadow:       rgba(0, 0, 0, 0.3);

  --text:         #f1f5f9;
  --muted:        #94a3b8;
}

/* ── PREFERS DARK (auto) ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0f172a;
    --bg2:          #1e293b;
    --surface:      #1e293b;
    --surface2:     #334155;
    --card:         var(--surface);
    --border:       rgba(255, 255, 255, 0.08);
    --shadow:       rgba(0, 0, 0, 0.3);
    --text:         #f1f5f9;
    --muted:        #94a3b8;
  }
}

/* ════════════════════════════════════════════════════════════════
   📱 MOBILE LARGE — 480px+
════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  :root {
    --page-px: 20px;
  }
}

/* ════════════════════════════════════════════════════════════════
   📟 TABLET — 768px+
════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --page-px:     24px;
    --page-py:     20px;
    --topbar-h:    52px;
    --bottombar-h: 64px;
    --card-radius: 12px;
    --btn-h:       42px;
    --input-h:     42px;
  }
}

/* ════════════════════════════════════════════════════════════════
   💻 NETBOOK — 1024px+
   Sidebar з'являється, topbar/bottomnav ховаються
════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root {
    --sidebar-w:    220px;
    --page-px:      28px;
    --page-py:      24px;
    --topbar-h:     0px;
    --bottombar-h:  0px;
  }
}

/* ════════════════════════════════════════════════════════════════
   💻 LAPTOP — 1200px+
════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  :root {
    --sidebar-w:    240px;
    --page-px:      32px;
    --content-max:  1100px;
  }
}

/* ════════════════════════════════════════════════════════════════
   🖥  DESKTOP — 1440px+
════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  :root {
    --sidebar-w:    260px;
    --page-px:      40px;
    --content-max:  1280px;
  }
}

/* ════════════════════════════════════════════════════════════════
   🖥  WIDE — 1920px+
════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  :root {
    --sidebar-w:    280px;
    --content-max:  1600px;
  }
}

/* ════════════════════════════════════════════════════════════════
   VISIBILITY UTILITIES
════════════════════════════════════════════════════════════════ */
.rw-show-mobile  { display: block  !important; }
.rw-show-tablet  { display: none   !important; }
.rw-show-desktop { display: none   !important; }
.rw-hide-mobile  { display: none   !important; }

@media (min-width: 768px) {
  .rw-show-mobile  { display: none  !important; }
  .rw-show-tablet  { display: block !important; }
  .rw-hide-mobile  { display: block !important; }
}
@media (min-width: 1024px) {
  .rw-show-tablet  { display: none  !important; }
  .rw-show-desktop { display: block !important; }
}

/* inline variants */
.rw-show-mobile-inline  { display: inline !important; }
.rw-show-desktop-inline { display: none   !important; }
@media (min-width: 768px)  { .rw-show-mobile-inline { display: none !important; } }
@media (min-width: 1024px) { .rw-show-desktop-inline { display: inline !important; } }

/* ════════════════════════════════════════════════════════════════
   FLEX/GRID UTILITIES
════════════════════════════════════════════════════════════════ */
.rw-flex         { display: flex; }
.rw-flex-col     { flex-direction: column; }
.rw-flex-wrap    { flex-wrap: wrap; }
.rw-items-center { align-items: center; }
.rw-justify-center { justify-content: center; }
.rw-gap-4  { gap: 4px; }
.rw-gap-8  { gap: 8px; }
.rw-gap-12 { gap: 12px; }
.rw-gap-16 { gap: 16px; }
.rw-gap-24 { gap: 24px; }
.rw-flex-1 { flex: 1; }

/* ════════════════════════════════════════════════════════════════
   SPACING UTILITIES
════════════════════════════════════════════════════════════════ */
.rw-mt-8  { margin-top: 8px; }
.rw-mt-16 { margin-top: 16px; }
.rw-mt-24 { margin-top: 24px; }
.rw-mb-8  { margin-bottom: 8px; }
.rw-mb-16 { margin-bottom: 16px; }
.rw-mb-24 { margin-bottom: 24px; }

/* ════════════════════════════════════════════════════════════════
   TEXT UTILITIES
════════════════════════════════════════════════════════════════ */
.rw-text-truncate {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rw-text-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.rw-text-center { text-align: center; }
.rw-text-muted  { color: var(--muted); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE STATS GRID
   2 → 3 → 4 → 4 → 6 колонок
════════════════════════════════════════════════════════════════ */
.rw-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 768px)  { .rw-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .rw-stats-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1920px) { .rw-stats-grid { grid-template-columns: repeat(6, 1fr); } }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE GRID HELPERS
════════════════════════════════════════════════════════════════ */
.rw-grid { display: grid; gap: 12px; }
.rw-grid-1 { grid-template-columns: 1fr; }
@media (min-width: 768px)  { .rw-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rw-grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .rw-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Two-col layout: 2fr+1fr on laptop+ */
.rw-two-col { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1200px) { .rw-two-col { grid-template-columns: 2fr 1fr; gap: 20px; } }

/* Three-col layout: 2fr+1fr+1fr on desktop+ */
.rw-three-col { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1440px) { .rw-three-col { grid-template-columns: 2fr 1fr 1fr; gap: 24px; } }

/* ════════════════════════════════════════════════════════════════
   TOUCH OPTIMIZATION
════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  :root {
    --btn-h:   48px;
    --input-h: 48px;
  }
}

/* ════════════════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════════════ */
@media print {
  .portal-site-nav,
  .topbar,
  .hero-actions,
  .ad-slot,
  .feedback-section,
  .scroll-top-btn,
  .donate-card,
  .map-preview-actions,
  .footer-links {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .wrap {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════════════ */
@media print {
  :root {
    --bg: #fff !important;
    --surface: #fff !important;
    --card: #fff !important;
    --text: #000 !important;
    --border: #ccc !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .portal-site-nav, .portal-nav-trigger,
  .topbar, .bottomnav, .sidebar,
  .hero-actions, .ad-slot, .donate-card,
  .scroll-top-btn, .feedback-section { display: none !important; }
}