/* ═══════════════════════════════════════════════════════════
   desktop.css — persistent-sidebar desktop shell (≥1024px)

   Loaded AFTER app.css, so at equal specificity these rules win.
   EVERYTHING here is gated behind @media (min-width:1024px) — mobile
   and tablet (<1024px) render exactly as app.css defines them.

   Uses the same design tokens as app.css (--space-*, --header-bg,
   --card, --border, --accent, …) so it themes with every palette and
   dark mode automatically (theme.js sets those vars on :root).
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ── App shell → two-column grid ─────────────────────────────
     Column 1 is the persistent sidebar (spans both rows); column 2
     stacks the app bar over the scrolling content. minmax(0,1fr)
     lets wide children (tables, charts) shrink/scroll instead of
     blowing out the column width. */
  #app {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar main";
    min-height: 100vh;
  }

  /* Mobile-only chrome has no place in the persistent layout. */
  #sidebar-overlay,
  #sidebar-close,
  .hamburger-btn,
  .bottom-nav {
    display: none !important;
  }

  /* Desktop-only chrome, hidden in app.css: the drag-and-drop week
     organizer only makes sense with a pointer and a 7-column board. */
  .rt-organize-btn { display: inline-flex; }

  /* ── Persistent sidebar ──────────────────────────────────────
     Static, always visible, pinned to the viewport while content
     scrolls. Reads as a real product rail, not a frozen drawer. */
  #sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 0;
    left: auto;
    align-self: start;
    width: auto;
    height: 100vh;
    transform: none;
    transition: none;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.10);
  }

  .sidebar-top {
    padding: 20px 18px 12px;
  }
  .sidebar-user-info {
    padding: 12px 18px 16px;
  }

  .sidebar-nav {
    padding: 8px 10px;
    gap: 2px;
  }

  /* Nav items become inset pills so hover/active read as discrete
     targets — the product-sidebar look. */
  #sidebar .nav-btn {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
  }
  #sidebar .nav-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
  }
  #sidebar .nav-btn.active {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 3px 0 0 0 var(--accent);
  }

  /* ── Admin group: always expanded, no accordion ──────────────
     There's vertical room on desktop, so show the whole group and
     turn the toggle into a static section label. !important beats
     the inline display:none/flex that app.js toggles, so we never
     fight its state. */
  #admin-nav-items {
    display: flex !important;
  }
  #admin-nav-arrow {
    display: none !important;
  }
  .nav-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-group-toggle {
    pointer-events: none;
    cursor: default;
    padding: 8px 12px 4px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
  }
  .nav-group-toggle:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
  }
  #sidebar .nav-btn.nav-sub {
    padding-left: 12px;
    font-size: var(--fs-base);
    opacity: 1;
  }

  .sidebar-logout {
    margin: 8px 10px 0;
    padding: 12px;
    border-radius: var(--radius-md);
    border-top: none;
  }
  .sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  /* ── App bar (header, column 2) ──────────────────────────────
     Sticks to the top of the content column as a clean desktop bar. */
  .app-header {
    grid-area: header;
    padding: 14px 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .header-title {
    font-size: var(--fs-xl);
  }
  #header-date {
    font-size: var(--fs-sm);
  }

  /* ── Content column ──────────────────────────────────────────
     Drop the 700px phone cap; give a comfortable desktop measure
     with generous gutters and no bottom-nav padding to reserve. */
  .app-main {
    grid-area: main;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 36px 56px;
  }

  /* ═══════════════════════════════════════════════════════════
     Admin dashboard — multi-column executive layout
     Lay the panel's direct children onto a named grid so we control
     placement independent of DOM order (no reordering = mobile DOM
     is byte-for-byte unchanged). Cards keep their own classes; we
     just place them. */
  #tab-dashboard.active {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    align-content: start;
    grid-template-areas:
      "dtitle    dtitle    dtitle    dtitle"
      "dstats    dstats    dstats    dstats"
      "doutst    doutst    doutst    doutst"
      "drevenue  drevenue  drevenue  drecent"
      "dcarousel dcarousel dcarousel dcarousel";
  }
  /* Kill per-card bottom margins (incl. inline ones) — the grid gap
     owns spacing now — and top-align every item so a tall Recent
     Payments list doesn't stretch the chart beside it. */
  #tab-dashboard.active > * {
    margin-bottom: 0 !important;
    align-self: start;
  }

  #tab-dashboard.active > .dash-title       { grid-area: dtitle; }
  #tab-dashboard.active > .stat-grid        { grid-area: dstats; }
  #tab-dashboard.active > .dash-outstanding { grid-area: doutst; }
  #tab-dashboard.active > .dash-revenue     { grid-area: drevenue; }
  #tab-dashboard.active > .dash-recent      { grid-area: drecent; }
  #tab-dashboard.active > .dash-carousel-wrap { grid-area: dcarousel; }

  /* Four stat cards across the top in a single row. */
  #tab-dashboard.active > .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  /* Give the headline revenue chart real presence at desktop width. */
  #tab-dashboard.active .dash-revenue .chart-wrap {
    height: 340px;
    margin-bottom: 0;
  }

  /* ── Carousel → static multi-column card grid ────────────────
     No swiping on desktop: the two donut cards sit side by side and
     the 12-month chemical-cost trend spans the full width beneath. */
  #tab-dashboard.active .dash-carousel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    overflow: visible;
    scroll-snap-type: none;
  }
  #tab-dashboard.active .dash-carousel > .dash-slide {
    flex: none;
    width: auto;
    scroll-snap-align: none;
  }
  #tab-dashboard.active .dash-carousel > .dash-slide:nth-child(3) {
    grid-column: 1 / -1;
  }
  /* Dots carry an inline display:flex — override needs !important. */
  #tab-dashboard.active .dash-carousel-dots {
    display: none !important;
  }
}