/* =====================================================================
   Responsive rules: desktop ≥1024px, tablet 640–1023px, mobile <640px
   ===================================================================== */
@media (max-width: 1279px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-side { position: static; }
}

@media (max-width: 1023px) {
  /* Sidebar becomes an off-canvas drawer */
  .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-lg); }
  .nav-open .sidebar { transform: none; }
  .nav-open .nav-overlay { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(15, 23, 42, 0.45); }
  .app-main { margin-left: 0; }
  .nav-toggle { display: inline-grid; }
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .page-content { padding: 16px 16px 40px; gap: 16px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .landing-menu-btn { display: inline-grid; }
  .landing-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 4px; padding: 12px 16px 16px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .landing-nav-open .landing-links { display: flex; }
  .landing-links > a:not(.btn) { padding: 10px 4px; }
}

@media (max-width: 760px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field-check { padding-top: 0; }
}

@media (max-width: 639px) {
  body { font-size: 14px; }
  h1 { font-size: 1.2rem; }
  .page-heading p { display: none; }
  .page-actions { width: 100%; justify-content: stretch; }
  .page-actions .btn { flex: 1; }
  .hide-sm { display: none; }
  .card { padding: 16px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { flex-direction: column; gap: 10px; padding: 14px; }
  .stat-icon { width: 34px; height: 34px; border-radius: 10px; }
  .stat-value { font-size: 1.08rem; }
  .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .filter-bar > .field:first-child, .filter-bar .field-grow, .custom-range { grid-column: 1 / -1; }
  .custom-range .field { flex: 1; }
  .chart-box { height: 210px; }
  .table-summary .btn { margin-left: 0; }
  .dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; max-width: 100vw; }
  .dialog-footer { border-radius: 0; }
  .dialog-footer .btn { flex: 1; }
  .feature-grid, .steps { grid-template-columns: 1fr; }
  .hero { padding: 40px 0; }
  .section { padding: 48px 0; }
  .auth-card { padding: 24px 20px; }
  .preview-rows div { grid-template-columns: 1fr auto; }
  .preview-rows span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .sidebar, .topbar, .page-actions, .filter-bar, .actions, .pagination, .btn { display: none !important; }
  .app-main { margin: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}