/*
 * OPS1 shared page shell (2026-08).
 *
 * This stylesheet is injected by NavInjectMiddleware on authenticated HTML
 * pages.  It deliberately uses a page-level rounded frame and straight
 * section rules so dense operational screens use the browser width efficiently.
 * The permission-menu workbench is marked data-s2r-layout="admin-menus" and is
 * intentionally excluded from every rule below.
 */

html[data-s2r-layout="framed"],
html[data-s2r-layout="framed"] body {
  --s2r-shell-bg: #f4f6f8;
  --s2r-shell-surface: #fff;
  --s2r-shell-line: #dfe4ea;
  --s2r-shell-section-line: #e4e8ed;
  --s2r-shell-radius: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
}

html[data-s2r-layout="framed"] body {
  margin: 0;
  background: var(--s2r-shell-bg);
  color: #20252b;
}

/* The fixed desktop drawer reserves 250px on the left; keep the content
 * surface inside the remaining viewport instead of creating horizontal drift. */
html.s2r-pin[data-s2r-layout="framed"] body {
  width: calc(100% - 250px);
  max-width: calc(100% - 250px);
}

html[data-s2r-layout="framed"] *,
html[data-s2r-layout="framed"] *::before,
html[data-s2r-layout="framed"] *::after {
  box-sizing: border-box;
}

/* Every ordinary page gets the full viewport width and one outer frame. */
html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) {
  width: 100% !important;
  max-width: none !important;
  margin: 12px 0 24px !important;
  padding: 0 !important;
  background: var(--s2r-shell-surface) !important;
  border: 1px solid var(--s2r-shell-line) !important;
  border-radius: var(--s2r-shell-radius) !important;
  box-shadow: 0 1px 3px rgba(25, 39, 54, .06) !important;
}

html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) > * {
  max-width: none;
}

/* A few legacy pages put their title directly inside the page root. Keep a
 * small readable inset without reintroducing a fixed-width content column. */
html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) > h1 {
  margin: 0 !important;
  padding: 16px 18px !important;
}

/* Existing cards/panels become flat sections inside the single outer frame. */
html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) > :not(script):not(style) {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The first and last sections inherit the outer frame's soft corners. */
html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) > :first-child {
  border-top-left-radius: var(--s2r-shell-radius) !important;
  border-top-right-radius: var(--s2r-shell-radius) !important;
}
html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) > :last-child {
  border-bottom-left-radius: var(--s2r-shell-radius) !important;
  border-bottom-right-radius: var(--s2r-shell-radius) !important;
}

/* Straight gray separators define adjacent regions. */
html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) > :not(script):not(style) + :not(script):not(style) {
  border-top: 1px solid var(--s2r-shell-section-line);
}

/* Page title/navigation bars remain visible while the document scrolls. */
html[data-s2r-layout="framed"] body > :is(.header, header, .topbar, .page-header),
html[data-s2r-layout="framed"] .nav-sticky,
html[data-s2r-layout="framed"] #s2rContext {
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
}

html[data-s2r-layout="framed"] #s2rContext {
  width: 100%;
  min-height: 48px;
  background: #fff;
  border-bottom: 1px solid var(--s2r-shell-line);
}

html[data-s2r-layout="framed"] body > :is(.header, header, .topbar, .page-header) {
  width: 100% !important;
}

html[data-s2r-layout="framed"] body > .wall > .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
}

/* The dedicated monitor wall keeps its own dashboard composition, but is also
 * allowed to use the full browser width. */
html[data-s2r-layout="framed"][data-s2r-page="monitorwall"] body > .wall {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--line, #dfe4ea) !important;
  border-radius: var(--s2r-shell-radius) !important;
  box-shadow: 0 1px 3px rgba(25, 39, 54, .08) !important;
  background: var(--bg, #f4f6f8);
}

@media (max-width: 767px) {
  html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
  }
}

@media print {
  html[data-s2r-layout="framed"] body > :is(.container, .wrap, .page, .shell) {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}