/* ============================================================
   responsive.css — Desktop-first breakpoints
   Targets: 1440+ primary · 1280 laptop · tablet landscape ·
   mobile fallback (layout must not break)
   ============================================================ */

/* ---------- Large laptop (<= 1439px): tighten density ---------- */
@media (max-width: 1439px) {
  .content {
    padding: var(--sp-5) var(--sp-6);
  }
  .kpi-grid {
    gap: var(--sp-4);
  }
  .header-search {
    width: 260px;
  }
}

/* ---------- Laptop (<= 1279px) ---------- */
@media (max-width: 1279px) {
  :root {
    --sidebar-w: 236px;
  }
  .kpi-grid.kpi-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-2-equal {
    grid-template-columns: 1fr;
  }
  .program-range {
    display: none; /* keep header readable on smaller laptops */
  }
  .header-user-meta {
    display: none;
  }
}

/* ---------- Tablet landscape (<= 1023px): sidebar off-canvas ---------- */
@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w) !important; /* never icon-collapsed off-canvas */
    transform: translateX(-105%);
    transition: transform var(--t-med);
    box-shadow: var(--sh-lg);
  }
  body.sb-open .sidebar {
    transform: translateX(0);
  }
  body.sb-collapsed .sidebar {
    width: var(--sidebar-w) !important;
  }
  /* keep the off-canvas sidebar fully expanded (never icon-only mode) */
  .sidebar .nav-label { display: inline !important; }
  .sidebar .brand-text { display: flex !important; }
  .sidebar .side-badge { display: block !important; }
  .sidebar .profile-meta { display: flex !important; }
  .sidebar .nav-section { display: block !important; }
  .sidebar .collapse-btn { display: inline-flex !important; margin-left: auto; transform: none; }
  .sidebar .nav-link,
  .sidebar .profile-card {
    justify-content: flex-start;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(7, 23, 41, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med);
    z-index: calc(var(--z-sidebar) - 1);
  }
  body.sb-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .page-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Mobile / small viewport (<= 767px): must not break ---------- */
@media (max-width: 767px) {
  .header-search {
    display: none; /* global search hidden on small screens */
  }
  .farm-picker-label {
    display: none;
  }
  .content {
    padding: var(--sp-4);
  }
  .kpi-grid.kpi-grid-4,
  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .topbar-title h2 {
    font-size: var(--fs-16);
  }
  .header-actions {
    gap: var(--sp-2);
  }
  .drawer-panel {
    width: min(100vw, 400px);
  }
  .toast-stack {
    left: var(--sp-3);
    right: var(--sp-3);
    align-items: stretch;
  }
  .data-table-wrap {
    overflow-x: auto; /* allow horizontal scroll for wide tables */
  }
  .timeline {
    padding-left: var(--sp-6);
  }
  .page-head-actions {
    width: 100%;
  }
  .page-head-actions .btn {
    flex: 1;
    justify-content: center;
  }
}