/*
 * PulseHub desktop viewport system.
 *
 * Keeps control and type sizes stable while allowing the operational canvas
 * to use the extra space available on Full HD, 2K and 4K displays. Mobile is
 * intentionally owned by the existing <= 900px rules in the main stylesheet.
 */

@media (min-width: 901px) {
  :root {
    --ph-desktop-sidebar: clamp(184px, 10.42vw, 216px);
    --ph-desktop-gutter: clamp(18px, 1.35vw, 46px);
    --ph-desktop-content-max: 3200px;
  }

  body .app-shell {
    grid-template-columns: var(--ph-desktop-sidebar) minmax(0, 1fr);
  }

  .app-shell > .main-shell {
    padding-right: var(--ph-desktop-gutter);
    padding-left: var(--ph-desktop-gutter);
  }

  .app-shell .page,
  .app-shell .app-topbar {
    width: 100%;
    max-width: var(--ph-desktop-content-max);
  }
}

/* A compact laptop canvas: preserve room for tables without crowding controls. */
@media (min-width: 901px) and (max-width: 1365px) {
  :root {
    --ph-desktop-sidebar: 184px;
    --ph-desktop-gutter: 16px;
  }
}

/* 4K: use most of the display, but keep a small reading-safe outer frame. */
@media (min-width: 3200px) {
  :root {
    --ph-desktop-sidebar: 216px;
    --ph-desktop-gutter: 46px;
  }
}

/* Keep operational cards at a useful reading width on wide displays. */
@media (min-width: 2300px) {
  .app-shell .funnels-obsidian .funnels-grid,
  .app-shell .accounts-groups-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 3400px) {
  .app-shell .funnels-obsidian .funnels-grid,
  .app-shell .accounts-groups-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}