/* ═══════════════════════════════════════════
   Desktop Layout — TailAdmin‑style
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }

  .app-sidebar {
    display: block !important;
  }

  .app-nav {
    display: none !important;
  }

  .app-header {
    left: var(--sidebar-width);
    transition: left var(--transition-normal);
  }

  .app-main {
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-normal);
  }

  .app-content {
    max-width: var(--content-max-width-desktop);
  }

  /* 768px–1279px: stats full width, revenue xuống dưới */
  .top-row {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }

  .top-row #stats-container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .top-row #stats-container .stats-row {
    margin-bottom: 0;
    align-content: stretch;
  }

  .top-row .revenue-section {
    width: 100%;
    margin-bottom: 0;
  }

  /* Stats 3 cột */
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Orders grid – 3 cols on desktop */
  body[data-page="orders"] .app-content>div[style*="grid"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* FAB – no bottom nav on desktop */
  .fab {
    bottom: var(--spacing-lg);
  }

  /* Collapsed sidebar adjustments */
  body.sidebar-collapsed .app-header,
  html.sidebar-collapsed-init .app-header {
    left: var(--sidebar-collapsed-width);
  }

  body.sidebar-collapsed .app-main,
  html.sidebar-collapsed-init .app-main {
    margin-left: var(--sidebar-collapsed-width);
  }
}

/* ≥ 1450px: sidebar mở (280px) → side by side */
@media (min-width: 1450px) {
  .top-row {
    flex-direction: row;
    align-items: stretch;
  }

  .top-row #stats-container {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .top-row #stats-container .stats-row {
    flex: 1;
  }

  .top-row .revenue-section {
    flex: 1;
    width: auto;
  }
}

/* ≥ 1104px: sidebar thu (80px) + content ≥ 1024px → side by side */
@media (min-width: 1104px) {
  body.sidebar-collapsed .top-row,
  html.sidebar-collapsed-init .top-row {
    flex-direction: row;
    align-items: stretch;
  }

  body.sidebar-collapsed .top-row #stats-container,
  html.sidebar-collapsed-init .top-row #stats-container {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  body.sidebar-collapsed .top-row #stats-container .stats-row,
  html.sidebar-collapsed-init .top-row #stats-container .stats-row {
    flex: 1;
  }

  body.sidebar-collapsed .top-row .revenue-section,
  html.sidebar-collapsed-init .top-row .revenue-section {
    flex: 1;
    width: auto;
  }
}