/* Placement of application screens around atk-ui components. */
body { overflow-x: hidden; }
.app-main { padding: var(--space-8); }
.settings-nav { max-width: 1280px; margin: 24px auto 0; padding: 0 var(--space-8); }
.board-page { height: calc(100dvh - var(--header-height) - 64px); gap: var(--space-4); }
.board-page.panel-open { margin-right: calc(var(--panel-width) - 32px); }
.board-page > .board { flex: 1; min-height: 0; }
.ticket-panel { position: fixed; top: var(--header-height); right: 0; bottom: 0; z-index: 30; width: var(--panel-width); overflow-y: auto; scrollbar-gutter: stable; border-left: 1px solid var(--border); }
.ticket-panel > * { flex-shrink: 0; }
.ticket-panel.expanded { width: 100%; border-left: 0; }
.ticket-panel > .save-bar { bottom: calc(-1 * var(--space-8)); margin: 0 calc(-1 * var(--panel-pad)) calc(-1 * var(--space-8)); padding-inline: var(--panel-pad); }
.panel-expanded .board-page > :not(.ticket-panel), .panel-expanded .epics-page > :not(.ticket-panel) { visibility: hidden; }
.epics-page.panel-open .epics-view { margin-right: calc(var(--panel-width) - 32px); }
@media (max-width: 1279px) {
  .ticket-panel { width: 100%; border: 0; }
  .board-page.panel-open { margin-right: 0; }
  .board-page.panel-open > :not(.ticket-panel), .epics-page.panel-open > :not(.ticket-panel) { visibility: hidden; }
}
@media (max-width: 860px) {
  .settings-nav { margin-top: 12px; padding: 0 var(--space-4); }
  .app-main { padding: var(--space-4); }
  .board-page { height: calc(100dvh - 88px); }
}