/* PTW Enterprise Application Shell - Phase 2.
   This stylesheet owns the outer framework only. Page content remains legacy until
   the later, bounded migration phases described in migration-plan.md. */

@layer ptw-design-system-shell {
  .app-layout[data-shell="ptw"] {
    --ptw-shell-header-height: 68px;
    background: var(--ds-color-background);
    color: var(--ds-color-text);
    display: grid;
    grid-template-rows: var(--ptw-shell-header-height) minmax(0, 1fr);
    min-height: 100dvh;
  }

  .app-layout[data-shell="ptw"] .ds-skip-link {
    background: var(--ds-color-surface-floating);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-2);
    color: var(--ds-color-text);
    left: var(--ds-space-4);
    padding: var(--ds-space-2) var(--ds-space-3);
    position: fixed;
    text-decoration: none;
    top: var(--ds-space-2);
    transform: translateY(-200%);
    transition: transform var(--ds-transition-interactive);
    z-index: var(--ds-z-tooltip);
  }

  .app-layout[data-shell="ptw"] .ds-skip-link:focus { transform: translateY(0); }

  .app-layout[data-shell="ptw"] [data-shell-region="header"] {
    align-items: center;
    background: var(--ds-color-surface-1);
    border-bottom: 1px solid var(--ds-color-border);
    box-shadow: var(--ds-shadow-xs);
    display: grid;
    grid-row: 1;
    min-height: var(--ptw-shell-header-height);
    position: relative;
    z-index: var(--ds-z-sticky);
  }

  /* Quick Actions is a compact touch affordance, not a second desktop navigation surface. */
  .app-layout[data-shell="ptw"] #quickActionsShell { display: none !important; }

  .app-layout[data-shell="ptw"][data-page-type="workspace"] {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .app-layout[data-shell="ptw"][data-page-type="workspace"] [data-shell-region="workspace"] {
    min-height: calc(100dvh - var(--ptw-shell-header-height));
    overflow: visible;
  }

  .app-layout[data-shell="ptw"][data-page-type="workspace"] [data-shell-region="sidebar"] {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-layout[data-shell="ptw"][data-page-type="workspace"] [data-shell-region="content"] {
    height: auto;
    min-height: 0;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .app-layout[data-shell="ptw"][data-page-type="document"] {
    min-height: 100dvh;
    overflow: visible;
  }

  .app-layout[data-shell="ptw"][data-page-type="document"] [data-shell-region="header"] {
    position: sticky;
    top: 0;
  }

  .app-layout[data-shell="ptw"][data-page-type="document"] [data-shell-region="workspace"] {
    min-height: calc(100dvh - var(--ptw-shell-header-height));
  }

  .app-layout[data-shell="ptw"] [data-shell-region="workspace"] {
    display: grid;
    grid-template-columns: var(--ds-sidebar-width) minmax(0, 1fr);
  }

  .app-layout[data-shell="ptw"] [data-shell-region="sidebar"] {
    background: var(--ds-color-neutral-900);
    border-right: 1px solid var(--ds-color-neutral-800);
    min-width: 0;
    padding: var(--ds-space-4);
  }

  .app-layout[data-shell="ptw"] [data-shell-region="content"] {
    margin: 0 auto;
    max-width: var(--ds-content-max-width);
    min-width: 0;
    padding: var(--ds-space-6);
    width: 100%;
  }

  .app-layout[data-shell="ptw"] .section-head,
  .app-layout[data-shell="ptw"] .admin-page-header {
    background: var(--ds-color-background);
    margin-top: calc(var(--ds-space-6) * -1);
    padding-top: var(--ds-space-6);
    position: sticky;
    top: 0;
    z-index: var(--ds-z-sticky);
  }

  .app-layout[data-shell="ptw"][data-page-type="document"] .section-head,
  .app-layout[data-shell="ptw"][data-page-type="document"] .admin-page-header {
    top: var(--ptw-shell-header-height);
  }

  .app-layout[data-shell="ptw"] .section-head h2,
  .app-layout[data-shell="ptw"] .admin-page-header h2 {
    color: var(--ds-color-text);
  }

  .app-layout[data-shell="ptw"] .section-head .eyebrow,
  .app-layout[data-shell="ptw"] .admin-page-header .eyebrow {
    display: none;
  }

  .app-layout[data-shell="ptw"] .drawer-backdrop {
    background: var(--ds-color-overlay);
    z-index: var(--ds-z-drawer);
  }

  @media (max-width: 1279px) {
    .app-layout[data-shell="ptw"] { --ptw-shell-header-height: 64px; }
    .app-layout[data-shell="ptw"] [data-shell-region="workspace"] { grid-template-columns: 240px minmax(0, 1fr); }
    .app-layout[data-shell="ptw"] [data-shell-region="content"] { padding: var(--ds-space-5); }
  }

  @media (max-width: 1023px) {
    .app-layout[data-shell="ptw"] { --ptw-shell-header-height: 60px; }
    .app-layout[data-shell="ptw"] [data-shell-region="workspace"] { display: block; min-height: calc(100dvh - var(--ptw-shell-header-height)); }
    .app-layout[data-shell="ptw"] [data-shell-region="sidebar"] { height: 100%; max-width: var(--ds-sidebar-width); position: fixed; top: var(--ptw-shell-header-height); bottom: 0; z-index: var(--ds-z-drawer); }
    .app-layout[data-shell="ptw"] #quickActionsShell { display: block !important; }
    .app-layout[data-shell="ptw"] [data-shell-region="content"] { max-width: none; padding: var(--ds-space-5); }
    .app-layout[data-shell="ptw"][data-page-type="workspace"] [data-shell-region="content"] { height: auto; min-height: 0; overflow: visible; }
  }

  @media (max-width: 767px) {
    .app-layout[data-shell="ptw"] [data-shell-region="content"] { padding: var(--ds-space-4); }
    .app-layout[data-shell="ptw"] .section-head,
    .app-layout[data-shell="ptw"] .admin-page-header { margin-top: calc(var(--ds-space-4) * -1); padding-top: var(--ds-space-4); }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-layout[data-shell="ptw"] *,
    .app-layout[data-shell="ptw"] *::before,
    .app-layout[data-shell="ptw"] *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  }
}