@import url("localization-layout.css?v=20260911-1");

/* Shared workspace rhythm inspired by fixed/fluid product grids.
 * Keep ordinary screens readable on ultrawide displays, allow dense analysis
 * a little more room, and reserve truly fluid width for spatial workspaces. */

:root {
  --workspace-content-standard-max: 1360px;
  --workspace-content-wide-max: 1500px;
  --workspace-sidebar-width: 228px;
}

.app.sidebar-collapsed {
  --workspace-sidebar-width: 72px;
}

/* Do not expose an authenticated shell before all deferred UI enhancers have
 * had a chance to normalize the first route. app.js can finish its very fast
 * localhost session request before the later deferred scripts are installed;
 * in that case the legacy 1480px Dashboard used to become visible for one or
 * two frames before workspace/starter polish moved it to the settled layout.
 * stabilization-bootstrap-guard.js removes this gate only after a final hidden
 * render and two animation frames. The element keeps its layout box while
 * hidden, so this is a paint gate rather than a second layout mode. */
#app:not([data-first-paint-ready="1"]) {
  visibility: hidden !important;
}

/* Bounded product pages are centered inside the CURRENT workspace, not inside
 * the viewport. This matters because the workspace changes width when the
 * sidebar is collapsed. Planner/calendar are intentionally excluded: spatial
 * workspaces keep using the full available width. */
#content.content[data-workspace-layout="standard"],
#content.content[data-workspace-layout="wide"] {
  margin-left: auto;
  margin-right: auto;
}

#content.content[data-workspace-layout="fluid"] {
  margin-left: 0;
  margin-right: 0;
}

/* Profile widths are resolved from the viewport shell rather than max-width:100%.
 * The latter can inherit a legacy containing block after route switches,
 * which can collapse WIDE back toward STANDARD even when the data attribute
 * is correct. FLUID is different: it already lives in the workspace grid
 * column, so 100% is the authoritative available width. Using 100vw here would
 * include the vertical scrollbar and overflow the workspace by its width. */
#content.content[data-workspace-layout="standard"] {
  width: var(--workspace-content-standard-max) !important;
  max-width: calc(100vw - var(--workspace-sidebar-width)) !important;
}

#content.content[data-workspace-layout="wide"] {
  width: var(--workspace-content-wide-max) !important;
  max-width: calc(100vw - var(--workspace-sidebar-width)) !important;
}

#content.content[data-workspace-layout="fluid"] {
  width: 100% !important;
  max-width: none !important;
}

/* Finance already carries a legacy wide marker; route profile remains the
 * authoritative contract but this keeps first paint stable before JS runs. */
#content.content.finance-content:not([data-workspace-layout]) {
  width: var(--workspace-content-wide-max) !important;
  max-width: calc(100vw - var(--workspace-sidebar-width)) !important;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1050px) and (min-width: 901px) {
  :root {
    --workspace-sidebar-width: 78px;
  }
}

@media (max-width: 900px) {
  #content.content[data-workspace-layout],
  #content.content.finance-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
  }
}