/* ═══════════════════════════════════════════════
   RESPONSIVE — Cross-platform breakpoints.

   Breakpoints (mobile-first overrides, max-width):
     xl  ≤ 1280px  Small laptops / large tablets
     lg  ≤ 1024px  Tablets (landscape)
     md  ≤  768px  Tablets (portrait) & mobile
     sm  ≤  480px  Small phones
   ═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   XL — Small laptops, large tablets (≤1280px)
─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  :root { --sidebar-w: 220px; }

  /* Reflow grids to 2-column */
  .grid-4   { grid-template-columns: repeat(2, 1fr); }
  .grid-3   { grid-template-columns: repeat(2, 1fr); }
  .grid-3-2 { grid-template-columns: 1fr; }
  .grid-2-1 { grid-template-columns: 1fr; }

  .kpi-value { font-size: 24px; }
  .topbar    { padding: 0 20px; gap: 12px; }
  .content   { padding: 20px 24px; }
}

/* ───────────────────────────────────────────────
   LG — Tablets landscape (≤1024px)
─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }

  .topbar-subtitle { display: none; }
  .topbar-time     { display: none; }
  .search-bar      { max-width: 200px; }

  .section-title    { font-size: 18px; }
  .section-title em { font-size: 20px; }
}

/* ───────────────────────────────────────────────
   MD — Tablets portrait & mobile (≤768px)
   Sidebar becomes a fixed slide-in drawer.
─────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Allow vertical scrolling at root level */
  body { overflow: auto; }

  .app {
    flex-direction: column;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  /* ── Sidebar drawer ── */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    transform: translateX(-100%);
    /* transition already declared in layout.css */
    overflow-y: auto;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  }

  /* Show overlay + hamburger on mobile */
  .sidebar-overlay { display: block; }
  .sidebar-toggle  { display: flex; }

  /* ── Main fills viewport height ── */
  .main {
    height: 100dvh;
    min-height: 100dvh;
    width: 100%;
  }

  /* ── Topbar ── */
  .topbar {
    padding: 0 16px;
    gap: 10px;
    height: 52px;
  }

  .topbar-title    { font-size: 14px; }
  .topbar-subtitle { display: none; }
  .topbar-time     { display: none; }
  .live-badge      { display: none; }
  .search-bar      { display: none; }

  /* ── Content ── */
  .content { padding: 16px; }

  /* ── All grids collapse to 1 column ── */
  .grid-4,
  .grid-3,
  .grid-2   { grid-template-columns: 1fr; }
  .grid-3-2,
  .grid-2-1 { grid-template-columns: 1fr; }

  /* ── Typography ── */
  .kpi-value        { font-size: 22px; }
  .section-title    { font-size: 17px; }
  .section-title em { font-size: 19px; }

  /* ── Section headers stack vertically ── */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ── Card padding ── */
  .card, .kpi-card { padding: 16px; }

  /* ── Compliance grid: 1 col ── */
  .compliance-grid { grid-template-columns: 1fr; }

  /* ── Watermark distracts on mobile ── */
  .d365-mark { display: none; }

  /* ── Card headers wrap on mobile ── */
  .card-header {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ───────────────────────────────────────────────
   SM — Small phones (≤480px)
─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .topbar { gap: 8px; }

  /* Hide theme toggle label text, keep icon + track */
  .theme-toggle #themeLabel { display: none; }

  .kpi-value    { font-size: 20px; }
  .card, .kpi-card { padding: 12px; }
  .content      { padding: 12px; }

  /* Ensure table is always scrollable */
  .table-scroll { margin: 0 -12px; padding: 0 12px; }
}

/* ───────────────────────────────────────────────
   TOUCH — Improve tap targets on touch devices
─────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .nav-item    { padding: 12px 20px; }
  .topbar-btn  { width: 40px; height: 40px; }
  .tab-btn     { padding: 8px 16px; }
  .card-action { padding: 4px 0; }
}

/* ───────────────────────────────────────────────
   PRINT — Remove decoration, maximise content
─────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .d365-mark,
  .sidebar-toggle, .sidebar-overlay { display: none !important; }

  .app  { display: block; }
  .main { width: 100%; }

  .content { padding: 0; overflow: visible; }

  .screen { display: block !important; page-break-after: always; }
  .screen:last-child { page-break-after: auto; }
}