/* F3 OS desktop viewport containment v2
   The sidebar and workspace must always fit inside the browser width.
   Only genuinely wide working surfaces may scroll internally. */

@media (min-width: 901px) {
  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  .app-shell {
    display: flex !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    flex: 0 0 230px !important;
    width: 230px !important;
    max-width: 230px !important;
    min-width: 230px !important;
    overflow-x: hidden !important;
  }

  .main-content {
    flex: 1 1 0 !important;
    width: calc(100vw - 230px) !important;
    max-width: calc(100vw - 230px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .topbar,
  .view {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #main-nav,
  .nav-item,
  .sidebar-bottom,
  .profile-button,
  .topbar > *,
  .topbar-title,
  .topbar-title > div,
  .view > *,
  .view > * > * {
    min-width: 0;
    max-width: 100%;
  }

  .topbar-actions {
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .view img,
  .view video,
  .view canvas,
  .view iframe,
  .view svg {
    max-width: 100%;
  }

  .view :where(
    .panel,
    .panel-header,
    .toolbar,
    .toolbar-left,
    .hero-grid,
    .hero-card,
    .daily-card,
    .metric-grid,
    .metric-card,
    .dashboard-grid,
    .today-grid,
    .today-pressure,
    .card-grid,
    .connection-grid,
    .statement-card,
    .campaign-detail-grid,
    .campaign-live-row,
    .social-schedule-toolbar,
    .social-schedule-filters,
    .social-schedule-row,
    .expense-ai-capture,
    .commerce-product-strip,
    .cost-kpis,
    .cost-allocation,
    .product-funnel,
    .support-scorebar,
    .support-ticket,
    .support-detail-grid,
    .snippet-edit-row
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Dashboard: explicitly size every track from the available workspace. */
  .hero-grid {
    grid-template-columns: minmax(0, 4fr) minmax(190px, 1fr) !important;
  }

  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .today-grid {
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr) !important;
  }

  .daily-card .date-big,
  .daily-card .month,
  .metric-card strong,
  .panel-header h2,
  .panel-header p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .campaign-live-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .7fr) auto;
  }

  .social-schedule-row {
    grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) minmax(110px, 150px) minmax(64px, 80px);
  }

  .social-schedule-filters {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, .85fr)) auto;
  }

  .data-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  .data-table th,
  .data-table td {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .table-wrap,
  .kanban,
  .social-schedule-panel,
  .support-transcript {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }
}

/* Typical laptop / PWA widths. Preserve the nav, then reflow the dashboard
   instead of creating a second horizontal canvas. */
@media (min-width: 901px) and (max-width: 1350px) {
  .topbar {
    align-items: flex-start;
  }

  .topbar-actions {
    max-width: 46%;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 200px !important;
  }

  .hero-card h2 {
    font-size: clamp(34px, 4vw, 50px);
  }

  .daily-card .date-big {
    font-size: 64px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .today-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .social-schedule-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .campaign-live-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .campaign-live-row > div:first-child {
    grid-column: 1 / -1;
  }

  .campaign-live-row em {
    justify-self: end;
  }

  .search {
    min-width: 0;
    width: min(300px, 100%);
  }
}