:root {
  --app-content-gutter: var(--space-3);
  --app-content-max: none;
  --operational-panel-padding: var(--space-3);
  --operational-grid-gap: var(--space-3);
  --operational-control-height: 2.75rem;
  --operational-panel-radius: var(--radius-lg);
  --operational-border: var(--color-border-light);
  --app-content-min-coverage: 80vw;
  --app-chrome-hero-action-w: 9rem;
  --app-chrome-hero-title: 1.45rem;
  --app-chrome-hero-description: 0.875rem;
  --app-chrome-page-pad-x: var(--app-chrome-hero-pad-x);
}

@media (width >= 768px) {
  :root {
    --app-chrome-hero-action-w: 9.75rem;
    --app-chrome-hero-title: 1.55rem;
  }
}

@media (width >= 1366px) {
  :root {
    --app-chrome-hero-pad-x: var(--quality-gutter-laptop);
    --app-chrome-hero-action-w: 10.25rem;
    --app-chrome-hero-search-w: 24rem;
    --app-chrome-hero-title: 1.65rem;
  }
}

@media (width >= 1920px) {
  :root {
    --app-chrome-hero-pad-x: var(--quality-gutter-desktop);
    --app-chrome-hero-search-w: 28rem;
  }
}

.app-page-layout,
.container-fluid-safe {
  inline-size: 100%;
  min-inline-size: 0;
}

.container-max {
  max-width: var(--app-content-max);
}

app-shell {
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  min-block-size: var(--app-viewport-height, 100dvh);
}

app-shell > main#app,
app-shell > .main-content,
#app.main-content {
  flex: 1 0 auto;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

app-shell #app :is(.container-fluid.cq-dashboard, .container-fluid-safe.cq-dashboard) {
  box-sizing: border-box;
  display: grid;
  gap: var(--app-chrome-page-gap);
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  padding-block: var(--app-chrome-page-pad-block);
  padding-inline: var(--app-chrome-page-pad-x);
}

#app-header {
  color: var(--color-text-primary);
  flex: 0 0 auto;
  inline-size: 100%;
  isolation: isolate;
  position: relative;
  z-index: var(--z-navbar, 1036);
}

.app-page-layout > [data-route-tag],
.operational-page,
[data-shared-page-content="true"] {
  min-inline-size: min(100%, var(--app-content-min-coverage));
  width: 100%;
}

.operational-content {
  width: 100%;
  padding: var(--space-2) var(--app-content-gutter) var(--space-4);
}

.operational-grid {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--operational-grid-gap);
  width: 100%;
}

.operational-panel {
  background: var(--color-surface-elevated);
  border: 1px solid var(--operational-border);
  border-radius: var(--operational-panel-radius);
  min-width: 0;
  overflow: hidden;
  padding: var(--operational-panel-padding);
}

.operational-disclosure {
  min-width: 0;
}

.operational-disclosure > summary {
  align-items: center;
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  justify-content: space-between;
  line-height: 1.25;
  list-style: none;
  min-height: var(--operational-control-height);
}

.operational-disclosure > summary::-webkit-details-marker { display: none; }
.operational-disclosure > summary::after { content: '+'; font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); }
.operational-disclosure[open] > summary { margin-bottom: var(--space-2); }
.operational-disclosure[open] > summary::after { content: '−'; }
.operational-disclosure > :not(summary) { min-width: 0; }

.operational-panel--metrics,
.operational-panel--recent {
  grid-column: 1 / -1;
}

.operational-panel__header {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-2);
  min-width: 0;
}

.operational-panel__header h2 {
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  margin: 0;
}

.operational-panel__body { min-width: 0; overflow-wrap: anywhere; }

.operational-list {
  max-height: min(var(--operational-list-max-height), 64vh);
  overflow: auto;
  overscroll-behavior: contain;
}

.operational-page :is(.btn, .form-control, .form-select, button) {
  min-height: var(--operational-control-height);
}

.shared-filter-trigger { align-items: center; background: var(--color-surface-elevated); border: 1px solid var(--workspace-line, var(--color-border)); border-radius: var(--radius-md); color: var(--color-text-primary); display: inline-flex; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); gap: var(--space-2); justify-content: center; min-block-size: var(--touch-target-min); padding-inline: var(--space-3); }
.shared-filter-trigger:is(:hover, :focus-visible), .shared-filter-trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--color-brand-primary) 16%, var(--color-surface-elevated)); border-color: var(--color-brand-primary); color: var(--color-brand-primary-800); }
.shared-filter-count { align-items: center; background: color-mix(in srgb, currentColor 14%, transparent); border-radius: var(--radius-pill); display: inline-flex; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); justify-content: center; line-height: 1.4; min-inline-size: 1.15rem; padding-inline: var(--space-1); }
.shared-filter-shell { min-inline-size: 0; }
#app [data-shared-filter-shell="true"] { min-inline-size: 0; }
#app [data-shared-filter-trigger="true"] { min-block-size: var(--touch-target-min, 44px); }
#app [data-shared-filter-trigger="true"] { align-self: start; justify-self: start; }
#app hero-search[data-shared-search="true"] { min-inline-size: 0; }
.shared-filter-panel[hidden], .shared-filter-backdrop[hidden] { display: none; }
.workspace-content:has(.shared-filter-panel:not([hidden])) { z-index: var(--shared-filter-panel-z); }
.card.card:has(.shared-filter-panel:not([hidden])) { contain: style; transform: none; transition: none; z-index: var(--shared-filter-panel-z); }
@media (width < 1366px) {
  #app :has(> .shared-filter-panel:not([hidden])),
  #app :has(> * > .shared-filter-panel:not([hidden])) {
    position: relative;
    z-index: var(--shared-filter-panel-z);
  }
}
.shared-filter-panel__body { min-block-size: 0; min-inline-size: 0; }
#app [data-shared-filter-shell="true"] [data-shared-filter-fields] { display: grid; gap: var(--space-2); min-inline-size: 0; }
.shared-filter-panel [data-shared-filter-actions] { align-items: end; align-self: end; display: flex; }
.shared-filter-panel [data-shared-filter-actions] .btn { align-self: end; inline-size: 100%; min-block-size: var(--operational-control-height); }
.shared-action-popover { background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); gap: var(--space-2); inset: auto; margin: var(--space-2) 0 0; padding: var(--space-2); position: fixed; position-area: block-end span-inline-end; }
.shared-action-popover:popover-open { display: grid; }
.shared-action-popover flagship-button .btn { inline-size: 100%; justify-content: flex-start; }
@media (width >= 1366px) {
  .shared-filter-panel:not([hidden]) { display: block; margin-block-start: var(--space-2); }
  .shared-filter-panel__head { display: none; }
  #app [data-shared-filter-shell="true"] [data-shared-filter-fields]:not([data-shared-filter-own-grid]) {
    align-items: start;
    grid-auto-flow: column;
    grid-auto-columns: var(--shared-filter-inline-field-inline-size);
    grid-template-columns: none;
    grid-template-rows: repeat(var(--shared-filter-inline-rows), auto);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding-block-end: var(--space-1);
    scrollbar-gutter: stable;
  }
  #app .shared-filter-panel [data-shared-filter-fields] > * { grid-column: auto; grid-row: auto; min-inline-size: 0; }
  .shared-filter-panel [data-shared-filter-actions] { grid-row: 1 / span var(--shared-filter-inline-rows); position: sticky; inset-inline-start: 0; background: var(--color-surface-elevated); z-index: 1; }
}
@media (width < 1366px) {
  .shared-filter-trigger { inline-size: 100%; }
  .shared-filter-backdrop:not([hidden]) { background: rgb(0 0 0 / 0.4); display: block; inset: 0; position: fixed; z-index: var(--shared-filter-backdrop-z); }
  .shared-filter-panel:not([hidden]) { background: var(--color-surface-elevated); display: flex; flex-direction: column; inset: var(--navbar-height) 0 0 auto; inline-size: min(var(--shared-filter-drawer-inline-size), 100vw); max-block-size: calc(100dvh - var(--navbar-height)); overflow: hidden; padding: var(--space-3); position: fixed; z-index: var(--shared-filter-panel-z); }
  .shared-filter-panel__head { align-items: center; display: flex; flex: 0 0 auto; justify-content: space-between; margin-block-end: var(--space-3); }
  .shared-filter-panel__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  #app [data-shared-filter-shell="true"] [data-shared-filter-fields] { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; overflow: visible; }
  #app job-list [data-shared-filter-fields] { grid-template-columns: minmax(0, 1fr); }
  #app job-list [data-shared-filter-fields] > * { grid-column: auto; }
  :has(.shared-filter-panel:not([hidden])) { backdrop-filter: none; -webkit-backdrop-filter: none; contain: none; container-type: normal; transform: none; }
}

.operational-page .list-group-item {
  border-color: var(--operational-border);
}

.app-shell-surface {
  background: var(--color-surface-elevated);
  border-color: var(--operational-border);
}

#app-footer .app-shell-surface {
  background: var(--color-surface-elevated);
  border-color: var(--operational-border);
  box-shadow: none;
}

#app-header .navbar :is(.nav-link, .navbar-brand-label) {
  color: var(--color-text-inverse, var(--app-palette-snow, #ffffff));
}


app-navbar {
  display: block;
  inline-size: 100%;
  min-block-size: var(--app-navbar-height);
}

#app-header .navbar {
  --bs-navbar-padding-y: 0.35rem;
  background: var(--color-brand-primary, #0f69f0);
  border-block-end: 1px solid rgba(var(--color-black-rgb, 0, 0, 0), 0.18);
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(var(--color-black-rgb, 0, 0, 0), 0.18);
  color: var(--color-text-inverse, var(--app-palette-snow, #ffffff));
  min-block-size: var(--app-navbar-height);
  position: relative;
  z-index: var(--z-navbar, 1036);
}

#app-header .navbar > .container-fluid-safe,
#app-header .navbar > .container-max {
  inline-size: 100%;
  max-inline-size: var(--layout-max-width, 1440px);
  min-inline-size: 0;
  padding-inline: var(--app-chrome-hero-pad-x);
}

hero-banner[data-shared-hero-shell][data-hero-shell="shared"] > .shared-hero-shell {
  background: var(--color-brand-primary-800);
  border-radius: 0;
  box-shadow: none;
}

error-boundary { display: block; font-family: var(--font-family-sans); }
.shared-error-boundary .error-container {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-danger);
  border-radius: var(--operational-panel-radius);
  color: var(--color-text-primary);
  margin: var(--space-6) auto;
  max-inline-size: var(--width-container-sm);
  padding: var(--space-6);
  text-align: center;
}
.shared-error-boundary .error-header {
  background: var(--color-danger);
  border-radius: calc(var(--operational-panel-radius) - 1px) calc(var(--operational-panel-radius) - 1px) 0 0;
  color: var(--color-text-inverse);
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
  padding: var(--space-4);
}
.shared-error-boundary .error-title { margin: 0; }
.shared-error-boundary .error-icon { color: var(--color-danger); font-size: var(--font-size-4xl); margin-block-end: var(--space-3); }
.shared-error-boundary .error-message { background: var(--color-surface-soft); border-radius: var(--radius-sm); color: var(--color-danger); font-size: var(--font-size-sm); margin-block: var(--space-4); overflow-x: auto; padding: var(--space-4); text-align: start; }
.shared-error-boundary :is(.error-id, .retry-info) { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-block-start: var(--space-2); }
.shared-error-boundary .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-block-start: var(--space-6); }

.smart-insights-placeholder { min-block-size: 5rem; }
.aging-headline { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.aging-headline__count { color: var(--color-text-primary); font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); line-height: 1; }
.aging-headline__count[data-severity="danger"] { color: var(--color-danger); }
.aging-headline__count[data-severity="success"], .aging-healthy { color: var(--color-success); }
.aging-headline__label, .aging-caption { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.aging-strip { display: flex; gap: var(--space-1); }
.aging-strip__seg { border: 0; border-radius: var(--radius-sm); color: var(--color-text-inverse); flex-basis: var(--aging-seg-basis); flex-grow: max(1, var(--aging-weight, 1)); font-weight: var(--font-weight-bold); min-height: var(--operational-control-height); min-width: var(--aging-seg-basis); }
.aging-strip__seg[data-tone="under"] { background: var(--color-success); }
.aging-strip__seg[data-tone="t3"] { background: var(--color-info); }
.aging-strip__seg[data-tone="t4"] { background: var(--color-warning); color: var(--color-warning-text); }
.aging-strip__seg[data-tone="t5"], .aging-strip__seg[data-tone="past"] { background: var(--color-danger); }
.aging-legend, .performance-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }
.aging-legend__item, .performance-chart__legend span { align-items: center; color: var(--color-text-secondary); display: inline-flex; font-size: var(--font-size-xs); gap: var(--space-1); }
.aging-legend__swatch, .performance-chart__key { background: currentColor; border-radius: var(--radius-sm); display: inline-block; height: var(--aging-swatch-size); width: var(--aging-swatch-size); }
.aging-cta { margin-top: var(--space-3); }
.dashboard-review-jobs-btn { min-width: var(--aging-review-btn-min-width); }
.performance-chart__head { align-items: flex-start; flex-wrap: wrap; }
.performance-chart__head h2 { flex: 1 1 var(--perf-chart-head-flex-basis); }
.performance-window { align-items: center; color: var(--color-text-secondary); display: flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; font-size: var(--font-size-xs); gap: var(--space-1); margin-inline-start: auto; white-space: nowrap; writing-mode: horizontal-tb; }
.performance-window span { white-space: nowrap; }
.performance-chart__plot { display: grid; gap: var(--space-1); padding: 0; }
.performance-chart__bar-groups, .performance-chart__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.performance-chart__day-group { align-items: end; border-inline-start: 1px solid var(--operational-border); display: flex; gap: 1px; min-height: var(--perf-chart-min-height); padding: 0 1px; }
.performance-chart__day-group:first-child { border-inline-start: 0; }
.performance-chart__days { color: var(--color-text-secondary); font-size: var(--font-size-xs); text-align: center; }
.performance-chart__days span { min-width: 0; }
.operational-page .performance-chart__bar { align-self: end; background: transparent; border: 0; flex: 1 1 0; height: 100%; min-height: var(--touch-target-min); min-width: 0; padding: 0; position: relative; }
.performance-chart__bar-fill { align-items: flex-start; background: var(--performance-bar-color); border-radius: var(--radius-sm) var(--radius-sm) 0 0; bottom: 0; display: flex; height: max(var(--perf-bar-fill-min-height), calc(var(--perf-ratio, 0) * 1%)); justify-content: center; left: 0; overflow: visible; position: absolute; width: 100%; }
.performance-chart__bar-value { background: var(--color-surface-elevated); border-radius: var(--radius-sm); color: var(--color-text-primary); direction: ltr; display: inline-flex; font-size: var(--perf-bar-value-font-size); font-weight: var(--font-weight-bold); line-height: 1; margin-top: 2px; padding: 2px; text-orientation: mixed; transform: none; white-space: nowrap; writing-mode: horizontal-tb; }
@media (width < 768px) { .performance-chart__bar-value { font-size: var(--perf-bar-value-font-size-mobile); margin-top: 1px; padding: 1px 0; } }
.operational-page .performance-chart__bar--zero .performance-chart__bar-fill { background: transparent; }
.performance-chart__bar--created_draft { --performance-bar-color: var(--color-brand-secondary); }.performance-chart__key--created_draft { background: var(--color-brand-secondary); }.performance-chart__bar--initiated_job { --performance-bar-color: var(--color-brand-primary); }.performance-chart__key--initiated_job { background: var(--color-brand-primary); }.performance-chart__bar--assigned_designer, .performance-chart__bar--completed { --performance-bar-color: var(--color-success); }.performance-chart__key--assigned_designer, .performance-chart__key--completed { background: var(--color-success); }.performance-chart__bar--awarded { --performance-bar-color: var(--color-warning); }.performance-chart__key--awarded { background: var(--color-warning); }
.performance-chart__top { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-top: var(--space-2); }
.performance-chart__top-item { align-items: center; background: var(--color-surface-soft); border: 1px solid var(--operational-border); border-radius: var(--radius-md); display: flex; gap: var(--space-2); min-width: 0; padding: var(--space-2); }
.performance-chart__top-icon { color: var(--color-brand-primary); display: grid; flex: 0 0 var(--perf-top-icon-size); place-items: center; width: var(--perf-top-icon-size); }.performance-chart__top-icon svg { height: 1.25rem; width: 1.25rem; }
.performance-chart__top-copy { display: grid; min-width: 0; }.performance-chart__top-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operational-list .job-item { align-items: flex-start; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-block: var(--space-2); }.operational-list .job-item > div { min-width: 0; }.operational-list .job-item .badge { align-self: flex-start; }

.dashboard-status-label { align-items: center; background: var(--color-surface-muted); border: 1px solid var(--operational-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); display: inline-flex; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); justify-content: center; max-width: 100%; min-height: var(--status-label-min-height); padding: 0 var(--space-2); text-align: center; }
.dashboard-status-label--primary { background: var(--color-surface-active); border-color: color-mix(in srgb, var(--color-brand-primary) 30%, var(--operational-border)); color: var(--color-brand-primary-800); }.dashboard-status-label--success { background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 30%, var(--operational-border)); color: var(--color-success-700); }.dashboard-status-label--warning { background: var(--color-warning-soft); border-color: color-mix(in srgb, var(--color-warning) 30%, var(--operational-border)); color: var(--color-warning-text); }.dashboard-status-label--orange { background: var(--color-warning-soft); color: var(--color-warning-900); }
.dashboard-status-label--danger, .dashboard-status-label--critical { background: var(--color-danger-soft); border-color: color-mix(in srgb, var(--color-danger) 30%, var(--operational-border)); color: var(--color-danger-900); }.dashboard-status-label--info { background: var(--color-info-soft); color: var(--color-info-900); }.dashboard-status-label--steel { background: color-mix(in srgb, var(--color-brand-secondary) 10%, var(--color-surface-elevated)); color: var(--color-brand-secondary-700); }.dashboard-status-label--battery { background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface-elevated)); color: var(--color-info-700); }

@media (width >= 1366px) { .operational-list .job-item { align-items: center; flex-direction: row; justify-content: space-between; }.operational-list .job-item .badge { align-self: auto; } }

@media (width >= 768px) {
  :root { --app-content-gutter: var(--space-4); }
  .operational-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operational-panel--performance { grid-column: 1 / -1; }
  .operational-panel--aging { grid-column: 1 / -1; }
  .performance-chart__plot { gap: 0; }
}

@media (width >= 1366px) {
  :root { --app-content-gutter: var(--space-5); --operational-grid-gap: var(--space-4); }
  .operational-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "metrics metrics"
      "sales-performance design-performance"
      "sales-overdue design-overdue"
      "recent outstanding";
  }
  .operational-panel--metrics { grid-area: metrics; }
  .operational-panel--performance[data-tile="sales-performance"] { grid-area: sales-performance; }
  .operational-panel--performance[data-tile="design-performance"] { grid-area: design-performance; }
  .operational-panel--performance[data-tile="sales-aging"] { grid-area: sales-overdue; }
  .operational-panel--aging[data-tile="design-aging"] { grid-area: design-overdue; }
  .operational-panel--recent { grid-area: recent; }
  .operational-panel--jobs[data-tile="myjobs"] { grid-area: outstanding; }
  .operational-panel--performance .operational-disclosure,
  .operational-panel[data-tile="sales-aging"] .operational-disclosure { display: contents; }
  .operational-panel--performance .operational-disclosure > summary,
  .operational-panel[data-tile="sales-aging"] .operational-disclosure > summary { display: none; }
  .operational-panel--performance .operational-disclosure > div,
  .operational-panel[data-tile="sales-aging"] .operational-disclosure > div { display: block; }
  .operational-panel--jobs .operational-disclosure { display: block; }
  .operational-panel--jobs .operational-disclosure > summary { display: flex; }
}

@media (width >= 1920px) {
  :root { --app-content-gutter: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .operational-page *, .operational-page *::before, .operational-page *::after { transition: none; }
}

.viewport-popover {
    position: fixed;
    z-index: var(--z-dropdown-floating, var(--z-dropdown, 1050));
}

.viewport-popover--end-sheet {
    inset: 0 0 0 auto;
    inline-size: min(28rem, 92vw);
    max-inline-size: 92vw;
    max-block-size: 100dvh;
    overflow-y: auto;
    transform: none;
}

.select-skeleton {
    block-size: var(--input-height-md);
}

#nprogress {
    pointer-events: none;
    position: fixed;
    z-index: var(--z-max);
    inset: 0 auto auto 0;
    inline-size: 100%;
    block-size: 3px;
    display: block;
}

#nprogress[hidden] {
    display: none;
}

#nprogress {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-brand-primary);
}

#nprogress::-webkit-progress-bar {
    background: transparent;
}

#nprogress::-webkit-progress-value {
    background: var(--color-brand-primary);
    transition: inline-size 200ms linear;
}

#nprogress::-moz-progress-bar {
    background: var(--color-brand-primary);
    transition: inline-size 200ms linear;
}