/* AI Project Universe V4.8 — universal mobile project layout
   One source of truth for all project pages. The rules activate only on narrow
   screens and preserve each project's desktop visual identity. */

html[data-apu-project-scroll] {
  width: 100%;
  max-width: 100%;
}

.apu-mobile-table-shell {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

@media (max-width: 54rem) {
  html[data-apu-project-scroll],
  html[data-apu-project-scroll] body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html[data-apu-project-scroll] body {
    margin: 0 !important;
    touch-action: pan-y pinch-zoom;
  }

  html[data-apu-project-scroll] *,
  html[data-apu-project-scroll] *::before,
  html[data-apu-project-scroll] *::after {
    box-sizing: border-box;
  }

  html[data-apu-project-scroll] :is(#root,#app,#__next,[data-reactroot]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Unlock page-level application shells that were designed as desktop-only
     internal scrollers. Nested tables and code blocks keep their own scroll. */
  html[data-apu-project-scroll] :is(
    #root > *, #app > *, #__next > *,
    #root > * > *, #app > * > *, #__next > * > *,
    .apu-mobile-document-flow
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
  }

  html[data-apu-project-scroll] :is(
    #root [class*="flex-1"][class*="overflow-hidden"],
    #root [class*="min-h-screen"][class*="overflow-hidden"],
    #root [class*="min-h-svh"][class*="overflow-hidden"],
    #root [class*="min-h-[100dvh]"][class*="overflow-hidden"],
    #app [class*="flex-1"][class*="overflow-hidden"],
    .apu-mobile-document-flow
  ) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-apu-project-scroll] :is(
    main[class*="overflow-auto"],
    main[class*="overflow-y-auto"],
    [role="main"][class*="overflow-auto"],
    #root [class*="flex-1"][class*="overflow-auto"],
    #root [class*="flex-1"][class*="overflow-y-auto"],
    #app [class*="flex-1"][class*="overflow-auto"]
  ) {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  html[data-apu-project-scroll] :is(main,[role="main"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  html[data-apu-project-scroll] :is(section,article,header,footer,nav,aside,form,fieldset) {
    max-width: 100%;
    min-width: 0;
  }

  html[data-apu-project-scroll] :is(img,picture,video,canvas,svg,iframe,embed,object) {
    max-width: 100% !important;
  }
  html[data-apu-project-scroll] :is(img,picture,video,canvas) {
    height: auto;
  }

  html[data-apu-project-scroll] :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,code,pre,a,button,label,span,strong) {
    overflow-wrap: anywhere;
  }
  html[data-apu-project-scroll] h1 {
    font-size: clamp(1.8rem, 9vw, 2.9rem) !important;
    line-height: 1.06 !important;
  }
  html[data-apu-project-scroll] h2 {
    font-size: clamp(1.35rem, 6vw, 2rem);
    line-height: 1.15;
  }

  html[data-apu-project-scroll] :is(input,select,textarea,button) {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html[data-apu-project-scroll] :is(input,select,textarea) {
    width: 100%;
    font-size: 16px !important; /* avoids iOS focus zoom */
  }

  html[data-apu-project-scroll] :is(.apu-mobile-fit,[data-apu-mobile-fit="true"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    transform: none !important;
  }

  /* Main content grids become readable single-column flows. Navigation grids
     are intentionally excluded. */
  html[data-apu-project-scroll] main :is(
    .dashboard-grid,.cards-grid,.card-grid,.content-grid,.stats-grid,.metrics-grid,
    .grid-2,.grid-3,.grid-4,.result-grid,.quick-links,.form-grid,
    [class*="grid-cols-2"],[class*="grid-cols-3"],[class*="grid-cols-4"]
  ):not(nav):not([role="tablist"]) {
    grid-template-columns: minmax(0,1fr) !important;
  }

  html[data-apu-project-scroll] :is(
    .actions,.head-actions,.toolbar,.page-actions,.header-actions,.button-group,
    [class*="actions"],[class*="toolbar"]
  ) {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  html[data-apu-project-scroll] :is(.table-wrap,.table-responsive,.apu-table-wrap,.sp-table-wrap,.apu-mobile-table-shell) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  html[data-apu-project-scroll] table {
    max-width: none;
  }

  html[data-apu-project-scroll] :is(dialog,.modal-card,[role="dialog"]) {
    width: min(94vw, 44rem) !important;
    max-width: 94vw !important;
    max-height: 88dvh !important;
    overflow: auto !important;
  }

  /* Compact cookie choice: it remains readable without covering most of the
     project on a phone. */
  html[data-apu-project-scroll] .apu-cookie-panel {
    left: max(8px,env(safe-area-inset-left)) !important;
    right: max(8px,env(safe-area-inset-right)) !important;
    bottom: max(8px,env(safe-area-inset-bottom)) !important;
    width: calc(100% - 16px) !important;
    max-height: min(46dvh, 390px) !important;
    overflow-y: auto !important;
    gap: 8px !important;
    padding: 11px !important;
    border-width: 2px !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 var(--apu-ink) !important;
  }
  html[data-apu-project-scroll] .apu-cookie-panel h2 {
    margin-bottom: 4px !important;
    font-size: clamp(17px,5.6vw,23px) !important;
    line-height: .98 !important;
  }
  html[data-apu-project-scroll] .apu-cookie-panel p {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }
  html[data-apu-project-scroll] .apu-cookie-panel__actions {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  html[data-apu-project-scroll] .apu-cookie-panel button {
    min-height: 38px !important;
    padding: 6px 7px !important;
    border-width: 2px !important;
    box-shadow: 2px 2px 0 var(--apu-ink) !important;
    font-size: 8px !important;
  }

  /* SentiScope / reusable CRUD studio. */
  html[data-scroll-theme="sentiment-analysis"] .apu-data-studio,
  html[data-scroll-theme="sentiment-analysis"] .apu-studio-shell,
  html[data-scroll-theme="sentiment-analysis"] .apu-studio-grid,
  html[data-scroll-theme="sentiment-analysis"] .apu-studio-grid > *,
  html[data-scroll-theme="sentiment-analysis"] .apu-studio-card,
  html[data-scroll-theme="sentiment-analysis"] .apu-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html[data-scroll-theme="sentiment-analysis"] .apu-data-studio {
    padding: 24px 10px 72px !important;
  }
  html[data-scroll-theme="sentiment-analysis"] .apu-studio-grid,
  html[data-scroll-theme="sentiment-analysis"] .apu-studio-form-grid,
  html[data-scroll-theme="sentiment-analysis"] .apu-toolbar {
    grid-template-columns: minmax(0,1fr) !important;
  }
  html[data-scroll-theme="sentiment-analysis"] .apu-stats,
  html[data-scroll-theme="sentiment-analysis"] .apu-result-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  html[data-scroll-theme="sentiment-analysis"] .apu-studio-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  html[data-scroll-theme="sentiment-analysis"] .apu-table {
    min-width: 720px !important;
  }
  html[data-scroll-theme="sentiment-analysis"] .apu-studio-jump {
    right: 8px !important;
    bottom: max(8px,env(safe-area-inset-bottom)) !important;
    padding: 9px 11px !important;
    font-size: 10px !important;
  }

  /* Student Performance: the sidebar becomes a compact project header rather
     than consuming a whole phone screen. */
  html[data-scroll-theme="student-performance"] .sp-app {
    display: block !important;
    min-height: 100dvh !important;
  }
  html[data-scroll-theme="student-performance"] .sp-sidebar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 12px 12px !important;
    gap: 12px !important;
    border-right: 0 !important;
  }
  html[data-scroll-theme="student-performance"] .sp-brand {
    width: auto !important;
    margin: 0 !important;
  }
  html[data-scroll-theme="student-performance"] .sp-nav {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  html[data-scroll-theme="student-performance"] .sp-nav a {
    min-height: 48px !important;
    padding: 7px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 9px !important;
  }
  html[data-scroll-theme="student-performance"] .sp-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 20px 12px 50px !important;
  }
  html[data-scroll-theme="student-performance"] :is(.sp-grid--2,.sp-grid--3,.sp-grid--4,.sp-form-grid,.sp-toolbar,.sp-predict-output) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  html[data-scroll-theme="student-performance"] .sp-page-head {
    min-height: 0 !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  html[data-scroll-theme="student-performance"] .sp-footer {
    flex-direction: column !important;
  }

  /* AI Architect: promote legibility and use normal document scrolling. */
  html[data-scroll-theme="ai-architect"] .ai-architect-main {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html[data-scroll-theme="ai-architect"] .ai-architect-main > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html[data-scroll-theme="ai-architect"] .ai-architect-header {
    min-height: 56px !important;
    height: auto !important;
    padding: 9px 12px !important;
  }

  /* Malaysia Cost Insights. */
  html[data-scroll-theme="malaysia-cost"] main {
    width: 100% !important;
    padding-inline: 10px !important;
  }
  html[data-scroll-theme="malaysia-cost"] :is(.grid,.form-grid,.result-grid,.compare-grid,.chart-grid) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  html[data-scroll-theme="malaysia-cost"] :is(.topbar,.hero,.card,.panel) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Network Subnet Troubleshooter. */
  html[data-scroll-theme="network-subnet"] #appMain {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 12px 58px !important;
  }
  html[data-scroll-theme="network-subnet"] :is(.grid-2,.grid-3,.grid-4,.result-grid,.quick-links,.form-grid,.seg-row,.history-toolbar) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  html[data-scroll-theme="network-subnet"] .field,
  html[data-scroll-theme="network-subnet"] .field-wide,
  html[data-scroll-theme="network-subnet"] .field-full {
    grid-column: 1 / -1 !important;
  }
  html[data-scroll-theme="network-subnet"] :is(.page-head,.app-footer) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  html[data-scroll-theme="network-subnet"] .binary-row {
    min-width: 620px;
  }

  /* Academic Evidence projects page and other card-heavy portfolios. */
  html[data-scroll-theme="academic-evidence"] main :is(.grid,[class*="grid-cols-"]) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  html[data-scroll-theme="academic-evidence"] :is(.ae-hero-content,.ae-page-content,.ae-content) {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 14px !important;
  }
}

@media (max-width: 25rem) {
  html[data-scroll-theme="student-performance"] .sp-nav {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  html[data-scroll-theme="sentiment-analysis"] .apu-stats,
  html[data-scroll-theme="sentiment-analysis"] .apu-result-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-apu-project-scroll] { scroll-behavior: auto !important; }
}

@media (max-width: 54rem) {
  html[data-apu-project-scroll] main > [class~="h-full"],
  html[data-apu-project-scroll] [role="main"] > [class~="h-full"],
  html[data-apu-project-scroll] main > [class*="h-[calc"],
  html[data-apu-project-scroll] .apu-mobile-document-flow > [class~="h-full"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html[data-scroll-theme="student-performance"] body .sp-app > .sp-sidebar {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}