/*
 * Authenticated workspace responsive primitives.
 * This layer is intentionally scoped to .app-shell so public-page composition
 * and the preserved financial/application work remain untouched.
 */

.app-shell,
.app-shell *,
.app-shell *::before,
.app-shell *::after {
  box-sizing: border-box;
}

.app-shell,
.app-shell .phone-frame,
.app-shell .topbar,
.app-shell .main-content,
.app-shell .view.is-active {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Grid and flex items use min-width:auto by default. These are the shared
   protected-workspace containers that must be allowed to shrink. */
.app-shell :where(
  section,
  article,
  div,
  form,
  fieldset,
  label,
  nav,
  header,
  footer,
  aside
) {
  min-width: 0;
}

.app-shell :where(input, select, textarea) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.app-shell :where(button) {
  max-width: 100%;
}

.app-shell :where(img, svg, canvas, video) {
  max-width: 100%;
}

.app-shell :where(
  .section-heading,
  .exam-header,
  .audio-player-top,
  .audio-storage-card,
  .button-pair,
  .control-row,
  .top-actions,
  .admin-inline-form,
  .admin-toolbar,
  .partner-control-actions,
  .partner-managed-issues article
) > * {
  min-width: 0;
}

.app-shell :where(
  .subject-grid,
  .home-dashboard-grid,
  .daily-plan-grid,
  .action-lab-grid,
  .mode-choice-grid,
  .syllabus-section-grid,
  .audio-layout,
  .audio-form-grid,
  .audio-result-grid,
  .profile-layout,
  .profile-form-grid,
  .subscription-layout,
  .admin-kpi-grid,
  .admin-dashboard-grid,
  .admin-section-grid,
  .partner-metric-grid,
  .partner-code-grid,
  .partner-profile-grid,
  .partner-readonly-fields,
  .partner-profile-form
) > * {
  min-width: 0;
}

/* Data grids that need desktop density remain contained by their deliberate
   local scroll regions rather than widening the application page. */
.app-shell :where(
  .admin-table-scroll,
  .admin-query-table,
  .subscription-history-table-wrap,
  .partner-responsive-table
) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* At small-desktop widths the persistent 286px sidebar leaves substantially
   less content space than the viewport media query suggests. Collapse the
   affected content grids based on that real available width. */
@media (max-width: 1100px) {
  .app-shell :where(
    .section-heading,
    .exam-header,
    .audio-player-top,
    .audio-storage-card,
    .button-pair,
    .control-row,
    .exam-stats
  ) {
    flex-wrap: wrap;
  }

  .app-shell :where(.status-pill, .topic-chip, .xp-pill) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  .app-shell .home-dashboard-grid,
  .app-shell .audio-layout,
  .app-shell .exam-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .audio-layout,
  .app-shell .exam-header {
    display: grid;
  }

  .app-shell :where(
    .partner-code-grid,
    .partner-profile-grid,
    .partner-readonly-fields,
    .partner-profile-form
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell :where(
    .primary-button,
    .secondary-button,
    .full-button,
    .danger-soft-button,
    .compact-button
  ) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 860px) {
  .app-shell .main-content {
    padding-inline: clamp(12px, 4vw, 18px);
  }

  .app-shell :where(
    .section-heading,
    .exam-header,
    .audio-player-top,
    .audio-storage-card,
    .button-pair,
    .control-row,
    .top-actions,
    .admin-inline-form,
    .admin-toolbar,
    .partner-control-actions,
    .partner-managed-issues article
  ) {
    flex-wrap: wrap;
  }

  .app-shell :where(.status-pill, .topic-chip, .xp-pill) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  .app-shell :where(
    .primary-button,
    .secondary-button,
    .full-button,
    .danger-soft-button,
    .audio-control,
    .compact-button
  ) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .app-shell .audio-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .audio-setup-card,
  .app-shell .audio-player-card,
  .app-shell .practice-session-setup,
  .app-shell .session-setup-card,
  .app-shell .question-panel,
  .app-shell .subscription-panel,
  .app-shell .profile-card,
  .app-shell .partner-work-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app-shell .drawer-menu {
    width: min(86vw, 330px);
    max-width: 100vw;
    padding-left: max(16px, env(safe-area-inset-left));
  }

  body[data-role] .support-launcher {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(92px + env(safe-area-inset-bottom));
  }

  body[data-role] .support-drawer {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(148px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 170px - env(safe-area-inset-top));
  }
}

@media (max-width: 520px) {
  .app-shell .topbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .app-shell .top-actions {
    width: 44px;
    flex-wrap: nowrap;
  }

  .app-shell .top-actions :where(.role-pill, #deviceButton, .mobile-logout-button) {
    display: none;
  }

  .app-shell .topbar-title h1 {
    min-width: 0;
  }

  .app-shell :where(.button-pair, .session-count-options) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .app-shell :where(.button-pair, .session-count-options) > button {
    width: 100%;
    min-height: 44px;
  }

  .app-shell :where(
    .practice-session-setup,
    .session-setup-card,
    .audio-setup-card,
    .audio-player-card,
    .question-panel,
    .subscription-panel,
    .profile-card,
    .partner-work-card
  ) {
    padding: clamp(14px, 4vw, 18px);
  }

  body[data-role] .support-launcher {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 4px;
    overflow: hidden;
    border-radius: 50%;
    transform: none;
  }

  body[data-role] .support-launcher .support-launcher-text {
    display: none;
  }

  body[data-role] .support-launcher .support-avatar {
    width: 38px;
    height: 38px;
  }

  .app-shell .student-bottom-nav {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

@media (max-width: 360px) {
  .app-shell :where(.button-pair, .session-count-options) {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell .student-bottom-nav strong {
    display: none;
  }
}