/* Generated by scripts/build-demo-assets.mjs from the ERP presentation styles. */

/* apps/web/src/styles.css */
* {
  box-sizing: border-box;
}
:root {
  font-family: Inter, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select {
  outline-offset: 4px;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
input,
select,
textarea {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  min-width: 0;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.9px;
  font-weight: 600;
}
h2 {
  font-size: 16px;
  letter-spacing: -0.3px;
  font-weight: 600;
}
h3 {
  font-size: 15px;
  font-weight: 600;
}
p {
  color: var(--muted);
}
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--muted);
  display: block;
  margin-bottom: 9px;
}
.button {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.button:hover {
  background: var(--surface-alt);
  border-color: var(--muted);
}
.button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
[data-theme="dark"] .button.primary {
  color: var(--on-accent);
}
.button.danger {
  color: var(--danger);
}
.button.small {
  padding: 7px 12px;
}
.full {
  width: 100%;
}
.icon-button {
  border: 0;
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--muted);
}
.icon-button:hover {
  background: var(--border);
  color: var(--ink);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -1.5px;
  color: white;
}
.brand-symbol {
  width: 35px;
  height: 35px;
  background: #fafafa;
  color: #171717;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -2px;
  line-height: 1;
}
.brand-erp {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.7px;
  color: var(--nav-text);
  margin-left: 9px;
}
.app-shell {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 238px;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--nav);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  z-index: 30;
  padding: 28px 15px 0;
}
.sidebar > .brand {
  padding: 0 15px;
}
.workspace-label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ffffff16;
  border-radius: 6px;
  padding: 12px 10px;
  margin: 28px 0 22px;
}
.workspace-label strong {
  display: block;
  font-size: 12px;
  color: var(--nav-active-text);
  font-weight: 500;
}
.workspace-label div > span {
  display: block;
  font-size: 11px;
  color: var(--nav-muted);
  margin-top: 2px;
}
.workspace-label > svg {
  margin-left: auto;
  color: var(--nav-muted);
}
.workspace-icon {
  background: #ffffff0d;
  display: grid;
  place-items: center;
  width: 30px;
  height: 32px;
  border-radius: 4px;
}
.sidebar nav {
  overflow: auto;
  flex: 1;
  padding: 0 0 20px;
  scrollbar-width: thin;
}
.nav-group {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--nav-muted);
  display: block;
  margin: 19px 14px 8px;
  font-weight: 500;
}
.sidebar nav > div:first-child .nav-group {
  margin-top: 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  margin: 3px 0;
  border-radius: 5px;
  font-size: 13px;
  color: var(--nav-text);
  transition: background 0.15s;
}
.nav-item svg {
  opacity: 0.88;
  stroke-width: 1.6;
}
.nav-item:hover {
  color: #fff;
  background: #ffffff08;
}
.nav-item.active {
  background: #ffffff11;
  color: #fff;
  box-shadow: inset 2px 0 var(--nav-indicator);
}
.nav-count {
  margin-left: auto;
  background: #ffffff17;
  border-radius: 4px;
  font-size: 10px;
  min-width: 22px;
  text-align: center;
  padding: 1px 4px;
}
.sidebar-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nav-muted);
  font-size: 10px;
  padding: 10px 10px 17px;
}
.sidebar-bottom > span:last-child {
  margin-left: auto;
}
.local-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.user-profile {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  border-top: 1px solid #ffffff13;
  color: var(--nav-text);
  padding: 17px 5px 20px;
}
.user-profile strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--nav-active-text);
}
.user-profile small {
  font-size: 10px;
  display: block;
}
.user-profile > svg {
  margin-left: auto;
}
.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar.small {
  width: 30px;
  height: 30px;
}
.main-shell {
  margin-left: 238px;
  min-width: 0;
  flex: 1;
}
.topbar {
  height: 72px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  gap: 20px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  white-space: nowrap;
}
.breadcrumb > span {
  color: var(--muted);
}
.breadcrumb strong {
  font-weight: 500;
}
.crumb-separator {
  opacity: 0.5;
}
.topbar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-trigger {
  background: transparent;
  border: 0;
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  margin-right: 20px;
}
.search-trigger kbd {
  font: 10px Inter;
  border: 1px solid var(--border);
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 14px;
}
.topbar-divider {
  height: 25px;
  width: 1px;
  background: var(--border);
  margin: 0 5px;
}
.notification-button {
  position: relative;
}
.notification-button > span {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--warning);
  border-radius: 50%;
  top: 6px;
  right: 8px;
}
.mobile-menu {
  display: none;
}
.context-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 29px;
}
.context-select {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 5px;
  padding-left: 11px;
  color: var(--muted);
}
.context-select select {
  padding: 7px 9px;
  border: 0;
  background: transparent;
  font-size: 12px;
  max-width: 200px;
}
.demo-pill {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px;
}
.last-sync {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
}
main {
  padding: 25px 34px 0;
  max-width: 1800px;
  margin: auto;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 27px;
}
.page-heading .eyebrow {
  font-size: 10px;
}
.page-heading p {
  font-size: 13px;
  margin-top: 8px;
}
.page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 25px;
}
.metric {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 19px 21px 14px;
  box-shadow: var(--shadow);
}
.metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.metric-top > svg {
  stroke-width: 1.6;
  color: var(--muted);
}
.metric > strong {
  display: block;
  font-size: 28px;
  letter-spacing: -1px;
  line-height: 1.4;
  margin: 12px 0 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.metric-foot {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
}
.panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.panel-header {
  padding: 20px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.panel-header h2 {
  font-size: 14px;
}
.panel-header p {
  font-size: 11px;
  margin-top: 3px;
}
.panel-body {
  padding: 22px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
}
.status-dot {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}
.status-reserved {
  background: var(--accent-soft);
  color: var(--accent);
}
.status-awaiting_reservation {
  background: var(--surface-alt);
  color: var(--blue);
}
.status-awaiting_materials {
  background: var(--warning-bg);
  color: var(--warning);
}
.status-dispatched {
  background: var(--accent-soft);
  color: var(--accent);
}
.status-cancelled {
  color: var(--muted);
}
.company-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  white-space: nowrap;
}
.company-label > span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.page-footer {
  display: flex;
  justify-content: space-between;
  padding: 25px 0;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
}
.page-footer > span > span {
  margin: 0 7px;
}
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  height: 100dvh;
  max-height: 100dvh;
  width: 560px;
  max-width: 100%;
  border: 0;
  border-left: 1px solid var(--border);
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: -10px 0 40px #0002;
}
.drawer::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(2px);
}
.drawer-inner > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 30px;
  border-bottom: 1px solid var(--border);
}
.drawer-inner > header h2 {
  font-size: 23px;
}
.drawer-inner > header p {
  font-size: 12px;
  margin-top: 5px;
}
.drawer-body {
  padding: 25px 30px;
}
.drawer-body h3 {
  margin: 5px 0 18px;
}
.drawer-body p {
  font-size: 13px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  padding: 0 12px;
  border-radius: 6px;
  color: var(--muted);
  background: var(--surface);
}
.search-field input {
  border: 0;
  background: transparent;
  padding: 10px 0;
  outline: none;
  width: 100%;
  font-size: 12px;
}
.search-results button {
  display: flex;
  align-items: center;
  gap: 13px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 14px 2px;
  width: 100%;
  text-align: left;
  font-size: 13px;
}
.search-results button > span {
  flex: 1;
}
.alert-row {
  display: flex;
  gap: 15px;
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  text-align: left;
  width: 100%;
  color: var(--warning);
}
.alert-row > span {
  flex: 1;
}
.alert-row strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.alert-row small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 11px;
}
.info-panel {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 17px;
  display: flex;
  gap: 13px;
  margin-top: 20px;
  color: var(--muted);
}
.info-panel svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.info-panel strong {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.info-panel p {
  font-size: 12px;
  margin-top: 5px;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-30%);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 17px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 8px;
  z-index: 80;
  font-size: 13px;
  box-shadow: var(--shadow);
  max-width: 90vw;
}
.toast .icon-button {
  color: inherit;
}
.error-box {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--danger);
  border-radius: 7px;
  background: var(--surface);
  color: var(--danger);
  margin: 20px 0;
}
.error-box p {
  font-size: 13px;
  margin-top: 5px;
}
.error-box button {
  margin-left: auto;
}
.empty {
  text-align: center;
  padding: 55px 20px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.empty strong {
  font-weight: 500;
  color: var(--ink);
}
.empty p {
  font-size: 12px;
}
.boot,
.fatal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.boot .brand-symbol {
  background: var(--nav);
  color: #fff;
}
.skeleton {
  background: var(--border);
  border-radius: 8px;
  animation: pulse 1.5s ease-in-out infinite;
}
.skeleton.title {
  width: 240px;
  height: 40px;
  margin: 25px 0;
}
.skeleton.card {
  height: 150px;
}
.skeleton.table {
  height: 330px;
}
@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}
.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-intro {
  background: var(--nav);
  color: var(--nav-active-text);
  padding: 55px 65px;
  display: flex;
  flex-direction: column;
}
.login-copy {
  margin: auto 0;
  max-width: 500px;
  padding: 80px 0;
}
.login-copy .eyebrow {
  color: var(--nav-text);
  margin-bottom: 24px;
}
.login-copy h1 {
  font-size: 42px;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -1.6px;
}
.login-copy > p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--nav-text);
  max-width: 370px;
  margin-top: 25px;
}
.login-features {
  display: grid;
  gap: 19px;
  margin-top: 45px;
  color: var(--nav-text);
  font-size: 13px;
}
.login-features span {
  display: flex;
  align-items: center;
  gap: 14px;
}
.login-features svg {
  color: var(--nav-text);
  stroke-width: 1.5;
}
.login-foot {
  font-size: 11px;
  color: var(--nav-muted);
}
.login-form-area {
  display: grid;
  place-items: center;
  background: var(--surface);
  padding: 50px;
  position: relative;
}
.login-theme {
  position: absolute;
  top: 30px;
  right: 35px;
}
.login-form {
  width: 100%;
  max-width: 350px;
}
.login-form h2 {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -1px;
}
.login-form > p {
  margin: 10px 0 30px;
  font-size: 14px;
}
.login-form label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 18px;
  font-weight: 500;
}
.login-form label input {
  height: 44px;
  font-weight: 400;
}
.login-form > .button {
  margin-top: 5px;
  justify-content: space-between;
}
.login-demo {
  border-top: 1px solid var(--border);
  margin-top: 30px;
  padding-top: 24px;
}
.login-demo p {
  font-size: 12px;
  line-height: 1.8;
  margin: 10px 0 15px;
}
.login-security {
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}
.login-error {
  padding: 12px;
  background: var(--warning-bg);
  color: var(--danger);
  margin-bottom: 10px;
  font-size: 12px;
  border-radius: 5px;
}
@media (min-width: 1600px) {
  main {
    padding: 32px 50px 0;
  }
  .topbar {
    padding: 0 50px;
  }
}
@media (max-width: 1100px) {
  .sidebar {
    width: 212px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .main-shell {
    margin-left: 212px;
  }
  main {
    padding: 22px;
  }
  .topbar {
    padding: 0 22px;
  }
  .search-trigger {
    margin-right: 0;
  }
  .search-trigger kbd {
    display: none;
  }
  .metric {
    padding: 15px;
  }
  .metric > strong {
    font-size: 24px;
  }
  .login-intro {
    padding: 40px;
  }
  .login-copy h1 {
    font-size: 35px;
  }
}
@media (max-width: 800px) {
  .sidebar {
    visibility: hidden;
  }
  .sidebar.is-open {
    visibility: visible;
  }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 238px;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .main-shell {
    margin-left: 0;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .mobile-shade {
    position: fixed;
    inset: 0;
    background: #0007;
    border: 0;
    z-index: 25;
  }
  .topbar {
    height: 62px;
    padding: 0 14px;
  }
  .topbar-actions {
    gap: 5px;
  }
  .search-trigger span,
  .search-trigger kbd,
  .topbar-divider {
    display: none;
  }
  .breadcrumb {
    gap: 8px;
  }
  .breadcrumb > span:first-of-type {
    display: none;
  }
  main {
    padding: 20px 16px 0;
  }
  .context-row {
    flex-wrap: wrap;
    gap: 7px;
  }
  .last-sync {
    font-size: 10px;
  }
  .demo-pill {
    font-size: 9px;
  }
  .page-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .page-heading h1 {
    font-size: 26px;
  }
  .page-actions {
    width: 100%;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .metric > strong {
    font-size: 25px;
  }
  .login-layout {
    grid-template-columns: 1fr;
  }
  .login-intro {
    padding: 28px;
  }
  .login-copy,
  .login-foot {
    display: none;
  }
  .login-form-area {
    padding: 55px 25px;
  }
  .login-theme {
    top: 10px;
    right: 18px;
  }
  .page-footer > span:last-child {
    display: none;
  }
  .toast {
    left: 5%;
    transform: none;
  }
  .drawer-body,
  .drawer-inner > header {
    padding: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Operational surfaces: tables, charts and detail panels share the same tokens. */
.muted {
  color: var(--muted);
}
.text-warning {
  color: var(--warning);
}
.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mono,
code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.text-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  border: 0;
  background: transparent;
  padding: 0;
}
.period-select {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding-left: 11px;
  color: var(--muted);
}
.period-select select {
  border: 0;
  padding: 9px 8px;
  background: transparent;
  font-size: 12px;
}
.dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(285px, 1fr);
  gap: 23px;
}
.dashboard-split > .panel {
  min-width: 0;
}
.chart-body {
  padding: 23px 25px 20px 20px;
  display: flex;
  gap: 18px;
  height: 240px;
}
.chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 26px;
  color: var(--muted);
  font-size: 10px;
  min-width: 63px;
}
.bar-chart {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 22px;
  position: relative;
  background: repeating-linear-gradient(
    to top,
    transparent 0px,
    transparent 79px,
    var(--border) 80px
  );
  background-position: 0 -25px;
}
.chart-column {
  height: 100%;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.chart-column > span {
  font-size: 11px;
  color: var(--muted);
}
.bar-track {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.chart-bar {
  width: 68%;
  max-width: 45px;
  background: var(--chart-bar);
  border-radius: 4px 4px 0 0;
  position: relative;
}
.chart-bar.current {
  background: var(--chart-primary);
}
.chart-legend {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}
.chart-legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--chart-primary);
}
.pipeline-body {
  padding: 19px 23px 20px;
}
.pipeline-total {
  display: flex;
  gap: 13px;
  align-items: baseline;
}
.pipeline-total strong {
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -1px;
}
.pipeline-total span {
  font-size: 11px;
  color: var(--muted);
}
.segmented-bar {
  display: flex;
  gap: 3px;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  margin: 13px 0 18px;
}
.stage-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--muted);
}
.stage-row > strong {
  margin-left: auto;
  font-weight: 500;
  color: var(--ink);
}
.stage-key {
  width: 6px;
  height: 6px;
  border-radius: 2px;
}
.table-scroll {
  overflow: auto;
  max-width: 100%;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
th {
  font-size: 10px;
  letter-spacing: 0.3px;
  font-weight: 500;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 12px 20px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: var(--surface-alt);
}
td small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
  white-space: nowrap;
}
.row-title {
  font-size: 12px;
  display: block;
  font-weight: 500;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
}
button.row-title:hover,
a.row-title:hover {
  color: var(--accent);
}
.panel-bottom {
  border-top: 1px solid var(--border);
  padding: 12px 21px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}
.attention-body {
  padding: 0 21px 17px;
}
.attention-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 19px 0;
  border-bottom: 1px solid var(--border);
}
.attention-item > div {
  flex: 1;
  min-width: 0;
}
.attention-item strong {
  font-size: 12px;
  font-weight: 500;
  display: block;
}
.attention-item p {
  font-size: 11px;
  margin-top: 4px;
}
.attention-item > svg {
  color: var(--muted);
}
.attention-icon {
  background: var(--surface-alt);
  color: var(--blue);
  height: 34px;
  width: 34px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.attention-icon.warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.attention-note {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
  padding-top: 15px;
}
.count-label {
  font-size: 11px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 7px;
  color: var(--muted);
}
.activity-list {
  padding: 0 22px;
}
.activity-item {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child {
  border-bottom: 0;
}
.activity-icon {
  height: 30px;
  width: 30px;
  background: var(--surface-alt);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
}
.activity-item > div {
  flex: 1;
  min-width: 0;
}
.activity-item strong {
  font-size: 12px;
  font-weight: 500;
}
.activity-item p {
  font-size: 11px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.activity-item time {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.table-toolbar > .search-field {
  width: 240px;
}
.tabs {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.tabs button {
  background: transparent;
  border: 0;
  padding: 8px 11px;
  font-size: 12px;
  color: var(--muted);
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tabs button.selected {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.tabs button > span {
  font-size: 10px;
  border-radius: 4px;
  background: var(--surface);
  padding: 0 5px;
}
.filter-notice {
  padding: 12px 20px;
  background: var(--warning-bg);
  font-size: 12px;
  display: flex;
  gap: 12px;
}
.filter-notice.order-filter-summary {
  background: transparent;
  color: inherit;
}
.detail-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 25px 0 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border);
}
.detail-grid > div > span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
}
.detail-grid strong {
  font-size: 13px;
  font-weight: 500;
}
.requirement-list > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.requirement-list > div > span:nth-child(2) {
  flex: 1;
}
.requirement-list strong {
  font-size: 12px;
  display: block;
  font-weight: 500;
}
.requirement-list small {
  font-size: 10px;
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.requirement-list > div > div {
  text-align: right;
}
.resource-icon {
  height: 33px;
  width: 33px;
  border-radius: 5px;
  background: var(--surface-alt);
  display: grid;
  place-items: center;
  color: var(--muted);
}
.operation-steps {
  margin: 25px 0;
}
.operation-steps > div {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 12px;
  padding: 10px 0;
  color: var(--muted);
}
.operation-steps .badge {
  margin-left: auto;
}
.drawer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
}
.confirm-panel {
  margin-top: 20px;
  padding: 17px;
  background: var(--warning-bg);
  border-radius: 6px;
}
.confirm-panel > strong {
  font-size: 13px;
}
.confirm-panel p {
  margin: 8px 0 15px;
  font-size: 12px;
}
.inventory-subfilter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  color: var(--muted);
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}
.inventory-subfilter label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inventory-subfilter input {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}
.group-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 25px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px;
}
.group-banner h2 {
  font-size: 20px;
}
.group-banner p {
  font-size: 12px;
  margin-top: 6px;
}
.group-banner .eyebrow {
  font-size: 10px;
  margin-bottom: 6px;
}
.group-banner > .badge {
  margin-left: auto;
}
.group-mark {
  background: var(--accent-soft);
  color: var(--accent);
  height: 58px;
  width: 58px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}
.company-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.company-card {
  padding: 24px;
  margin: 0;
}
.company-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 19px;
}
.company-initial {
  display: grid;
  place-items: center;
  height: 44px;
  width: 44px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
}
.company-card h2 {
  font-size: 19px;
}
.company-card > p {
  font-size: 12px;
  margin-top: 5px;
}
.company-details {
  padding: 18px 0;
  margin: 15px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 12px;
}
.company-details > span {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
  color: var(--muted);
}
.company-details strong {
  font-weight: 500;
  color: var(--ink);
}
.company-card .button {
  justify-content: flex-start;
}
.company-card .button svg:last-child {
  margin-left: auto;
}
.form-stack {
  display: grid;
  gap: 20px;
}
.form-stack label {
  font-size: 13px;
  display: grid;
  gap: 7px;
}
.integration-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 25px;
}
.ml-mark {
  display: grid;
  place-items: center;
  background: #f4d766;
  color: #4f431b;
  border-radius: 10px;
  width: 55px;
  height: 55px;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}
.integration-banner h2 {
  font-size: 20px;
}
.integration-banner p {
  font-size: 13px;
  margin-top: 5px;
}
.integration-banner > .badge {
  margin-left: auto;
}
.integration-rows {
  padding: 0 22px;
}
.integration-row {
  display: flex;
  align-items: center;
  gap: 17px;
  border-bottom: 1px solid var(--border);
  padding: 21px 0;
}
.integration-row:last-child {
  border-bottom: 0;
}
.account-icon {
  background: var(--surface-alt);
  border-radius: 7px;
  height: 42px;
  width: 42px;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.integration-row > div {
  flex: 1;
}
.integration-row strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}
.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.connector-card {
  display: flex;
  gap: 19px;
  padding: 25px;
}
.connector-card > svg {
  color: var(--muted);
  flex-shrink: 0;
}
.connector-card p {
  font-size: 13px;
  margin: 9px 0 18px;
}
.checklist > div {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.checklist > div > span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.checklist p {
  color: var(--ink);
  font-size: 14px;
  flex: 1;
}
.checklist svg {
  color: var(--muted);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 23px;
}
.service {
  border-right: 1px solid var(--border);
  padding: 0 22px;
}
.service:first-child {
  padding-left: 0;
}
.service:last-child {
  border: 0;
}
.service > svg {
  color: var(--muted);
  margin-bottom: 13px;
}
.service strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.service p {
  font-size: 11px;
  margin: 6px 0 12px;
}
.toolbar-controls {
  display: flex;
  gap: 10px;
}
.toolbar-controls select {
  font-size: 12px;
  padding: 8px;
}
.toolbar-controls .search-field {
  width: 200px;
}
.log-list {
  max-height: 470px;
  overflow: auto;
}
.log-row {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.log-row:last-child {
  border-bottom: 0;
}
.log-row time {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 61px;
  padding-top: 2px;
}
.log-row > div {
  flex: 1;
  min-width: 0;
}
.log-row strong {
  font-size: 12px;
  font-weight: 500;
}
.log-row small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.log-row code {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.log-row p {
  font-size: 12px;
  margin: 5px 0;
  overflow-wrap: anywhere;
}
.log-level {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
  min-width: 43px;
  text-align: center;
  background: var(--surface-alt);
  color: var(--blue);
}
.log-level.warn {
  background: var(--warning-bg);
  color: var(--warning);
}
.log-level.error {
  color: var(--danger);
  background: var(--warning-bg);
}
.settings-panel {
  max-width: 850px;
}
.theme-options {
  display: flex;
  gap: 25px;
  padding: 25px;
}
.theme-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  flex: 1;
  text-align: left;
}
.theme-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.theme-card > span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  margin-top: 15px;
}
.theme-card > span > svg:last-child {
  margin-left: auto;
}
.theme-preview {
  display: flex;
  gap: 10px;
  height: 130px;
  border-radius: 5px;
  padding: 11px;
  background: #f5f5f5;
}
.theme-preview > span {
  width: 28%;
  height: 100%;
  background: #111111;
  border-radius: 3px;
}
.theme-preview > div {
  flex: 1;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}
.theme-preview i {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
}
.theme-preview i:last-child {
  grid-column: span 2;
}
.theme-preview.dark {
  background: #000000;
}
.theme-preview.dark > span {
  background: #080808;
}
.theme-preview.dark i {
  background: #181818;
  border-color: #2b2b2b;
}
.settings-rows {
  padding: 0 25px;
}
.settings-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.settings-rows > div:last-child {
  border: 0;
}
.settings-rows > div > span:first-child {
  color: var(--muted);
}
.settings-rows strong {
  font-weight: 500;
}
.documentation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.doc-card {
  display: block;
  padding: 25px;
  text-align: left;
  margin: 0;
  transition: border-color 0.15s;
}
.doc-card:hover {
  border-color: var(--accent);
}
.doc-icon {
  height: 40px;
  width: 40px;
  background: var(--surface-alt);
  color: var(--accent);
  border-radius: 6px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
}
.doc-card .eyebrow {
  font-size: 10px;
}
.doc-card h2 {
  font-size: 17px;
}
.doc-card p {
  font-size: 13px;
  line-height: 1.8;
  margin: 10px 0 24px;
  min-height: 68px;
}
.document-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink);
}
.module-plan {
  max-width: 850px;
  padding: 30px;
}
.module-plan-heading {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border);
}
.module-icon {
  height: 70px;
  width: 70px;
  border-radius: 9px;
  background: var(--surface-alt);
  color: var(--muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.module-plan-heading h2 {
  font-size: 20px;
  margin: 10px 0 5px;
}
.module-plan-heading p {
  font-size: 13px;
}
.module-plan-footer {
  margin-top: 25px;
}
/* Keep operational text legible; compact sizes are reserved for secondary metadata. */
.nav-item,
.button,
.page-heading p,
.tabs button,
.search-field input,
.row-title,
table,
.company-label,
.stage-row,
.metric-top,
.attention-item strong,
.detail-grid strong,
.requirement-list strong,
.operation-steps,
.form-stack label {
  font-size: 14px;
}
.badge,
.context-select select,
.breadcrumb,
.search-trigger,
.period-select select,
th,
td small,
.metric-foot,
.attention-item p,
.panel-bottom,
.activity-item p,
.activity-item time,
.last-sync,
.demo-pill,
.company-details > span,
.service p,
.log-row small,
.inventory-subfilter,
.sidebar-bottom,
.user-profile small,
.workspace-label div > span,
.nav-count,
.tabs button > span,
.chart-scale,
.chart-column > span,
.chart-legend,
.pipeline-total span,
.attention-note,
.detail-grid > div > span,
.requirement-list small,
.log-row time,
.log-row code,
.log-level {
  font-size: 12px;
}
.panel-header h2,
.activity-item strong,
.log-row strong,
.service strong {
  font-size: 14px;
}
.nav-group,
.eyebrow,
.page-heading .eyebrow,
.group-banner .eyebrow,
.doc-card .eyebrow,
.login-foot,
.login-security,
.workspace-label strong,
.user-profile strong,
.page-footer {
  font-size: 12px;
}
.nav-group {
  letter-spacing: 1px;
  margin-top: 17px;
}
.sidebar {
  padding-top: 25px;
}
.workspace-label {
  margin: 25px 0 20px;
}
.nav-item {
  padding: 9px 13px;
}
.metric-grid {
  gap: 16px;
}
.metric > strong {
  font-size: 30px;
}
.metric-foot {
  line-height: 1.5;
  gap: 8px;
  min-height: 40px;
}
.page-heading {
  margin-bottom: 25px;
}
.page-heading h1 {
  font-size: 29px;
}
.chart-body {
  height: 258px;
}
.pipeline-body {
  padding-top: 15px;
}
.stage-row {
  padding: 7px 0;
}
.bar-chart {
  gap: 20px;
}
.attention-item {
  padding: 19px 0;
}
.table-scroll td {
  padding: 15px 19px;
}
.table-scroll th {
  padding: 11px 19px;
}
.service-grid {
  row-gap: 23px;
}
.doc-card p {
  min-height: 80px;
}
@media (max-width: 1250px) {
  .dashboard-split {
    grid-template-columns: minmax(0, 1.6fr) minmax(270px, 1fr);
    gap: 16px;
  }
  .metric {
    padding: 17px;
  }
  .metric-top {
    font-size: 13px;
    gap: 9px;
  }
  .metric > strong {
    font-size: 26px;
  }
  .documentation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lower {
    grid-template-columns: 1fr;
  }
  .attention-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .attention-item {
    border-bottom: 0;
  }
  .attention-note {
    grid-column: 1/-1;
    padding-top: 0;
  }
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service:nth-child(3) {
    padding-left: 0;
  }
  .service:nth-child(2) {
    border: 0;
  }
}
@media (max-width: 950px) {
  .dashboard-split {
    grid-template-columns: 1fr;
  }
  .company-grid {
    gap: 15px;
  }
  .company-details > span {
    display: block;
  }
  .company-details strong {
    display: block;
    margin-top: 5px;
  }
  .integration-row {
    flex-wrap: wrap;
  }
  .integration-row > div {
    min-width: 50%;
  }
  .two-columns {
    grid-template-columns: 1fr;
  }
  .service {
    padding-left: 15px;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-actions {
    flex-wrap: wrap;
  }
  .table-toolbar > .search-field {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .company-grid,
  .documentation-grid {
    grid-template-columns: 1fr;
  }
  .attention-body {
    display: block;
  }
  .attention-item {
    border-bottom: 1px solid var(--border);
  }
  .attention-note {
    padding-top: 15px;
  }
  .group-banner {
    flex-wrap: wrap;
  }
  .group-banner > .badge {
    margin-left: 0;
  }
  .group-banner > div:nth-child(2) {
    flex: 1;
    min-width: 150px;
  }
  .integration-banner {
    flex-wrap: wrap;
  }
  .integration-banner > div {
    flex: 1;
    min-width: 170px;
  }
  .integration-banner > .badge {
    margin-left: 75px;
  }
  .toolbar-controls {
    flex-wrap: wrap;
    width: 100%;
  }
  .toolbar-controls .search-field {
    flex: 1;
    min-width: 150px;
  }
  .activity-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .activity-item time {
    margin-left: 43px;
  }
  .metric {
    padding: 15px;
  }
  .metric-top {
    font-size: 12px;
  }
  .metric > strong {
    font-size: 24px;
  }
  .metric-foot {
    font-size: 11px;
  }
  .panel-header {
    padding: 18px;
  }
  .panel-bottom {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .chart-body {
    padding-left: 13px;
    padding-right: 18px;
    gap: 10px;
  }
  .bar-chart {
    gap: 12px;
  }
  .theme-options {
    gap: 12px;
    padding: 18px;
  }
  .theme-preview {
    height: 100px;
  }
  .theme-card > span {
    font-size: 12px;
    gap: 5px;
  }
  .service-grid {
    padding: 18px;
  }
  .service strong {
    font-size: 12px;
  }
  .service p {
    font-size: 11px;
  }
  .service .badge {
    font-size: 10px;
    white-space: normal;
  }
  .service {
    padding-right: 10px;
  }
  .inventory-subfilter {
    align-items: flex-start;
    gap: 10px;
  }
  .inventory-subfilter > span {
    display: none;
  }
  .module-plan {
    padding: 22px;
  }
  .module-plan-heading {
    align-items: flex-start;
  }
  .module-plan-heading p {
    font-size: 12px;
  }
  .module-icon {
    height: 48px;
    width: 48px;
  }
  .log-row {
    gap: 9px;
    padding: 13px;
  }
  .log-row time {
    font-size: 10px;
    min-width: 48px;
  }
  .log-row strong {
    font-size: 12px;
  }
  .audit-row {
    flex-direction: column;
  }
  .context-row .last-sync {
    width: 100%;
    justify-content: flex-end;
  }
  .company-card .button {
    white-space: normal;
  }
  .settings-rows > div {
    flex-wrap: wrap;
  }
}

.fiscal-readiness {
  padding: 16px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
}
.field-help {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.field-help a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fiscal-readiness > strong {
  display: block;
  margin-top: 12px;
}
.fiscal-readiness ul {
  padding-left: 20px;
}
.company-details > span {
  flex-wrap: wrap;
  gap: 6px;
}
.company-details strong {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* apps/web/src/components/brand.css */
.cavigon-brand {
  --brand-width: 218px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: var(--brand-width);
  max-width: 100%;
  vertical-align: middle;
  line-height: 0;
}
.cavigon-wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1620 / 365;
  overflow: hidden;
}
.sidebar .cavigon-brand {
  --brand-width: 185px;
}
.login-intro .cavigon-brand {
  --brand-width: 260px;
}
.site-footer .cavigon-brand {
  --brand-width: 195px;
}
.site-brand-signature .cavigon-brand {
  --brand-width: 420px;
}
@media (max-width: 1100px) {
  .sidebar .cavigon-brand {
    --brand-width: 165px;
  }
  .site-header .cavigon-brand {
    --brand-width: 190px;
  }
}
@media (max-width: 900px) {
  .site-header .cavigon-brand {
    --brand-width: 170px;
  }
}
@media (max-width: 800px) {
  .sidebar .cavigon-brand {
    --brand-width: 185px;
  }
}
@media (max-width: 760px) {
  .site-header .cavigon-brand {
    --brand-width: clamp(112px, 32vw, 180px);
  }
  .login-intro .cavigon-brand {
    --brand-width: 210px;
  }
  .site-brand-signature .cavigon-brand {
    --brand-width: min(340px, 82vw);
  }
}

/* apps/web/src/responsive.css */
/* Fit the available viewport; preserve browser zoom and text scaling. */
html {
  -webkit-text-size-adjust: 100%;
}
.main-shell > main {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
}
.topbar .breadcrumb {
  min-width: 0;
}
.topbar .breadcrumb strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions {
  flex-shrink: 0;
}
.site-header-inner > a {
  min-width: 0;
  flex-shrink: 0;
}
.site-hero > *,
.site-connect > *,
.site-feature-grid > * {
  min-width: 0;
}
@media (min-width: 761px) and (max-width: 900px) {
  .site-header-inner {
    gap: 16px;
    padding-inline: 24px;
  }
  .site-nav {
    gap: 15px;
  }
  .site-header-actions {
    gap: 14px;
  }
  .site-hero h1 {
    font-size: clamp(40px, 5.7vw, 51px);
  }
  .site-connect {
    gap: 32px;
  }
}
@media (max-width: 760px) {
  .site-header .site-login,
  .site-header .site-menu {
    min-height: 40px;
  }
  .site-header .site-menu {
    width: 36px;
    align-items: center;
    justify-content: center;
  }
  .site-header .compact {
    min-height: 40px;
  }
  .site-header-inner {
    padding-inline: 16px;
    gap: 8px;
  }
  .site-header-actions {
    gap: 8px;
  }
  .site-hero {
    min-height: 0;
  }
  .site-hero-copy > p {
    max-width: 100%;
  }
  .automation-steps li > div {
    min-width: 0;
  }
  .automation-steps p {
    overflow-wrap: break-word;
  }
}
@media (max-width: 480px) {
  .topbar {
    gap: 8px;
  }
  .topbar-actions > .avatar,
  .breadcrumb .crumb-separator {
    display: none;
  }
  .breadcrumb {
    flex: 1;
  }
  .main-shell > main {
    padding-inline: 14px;
  }
  .page-actions {
    gap: 8px;
  }
  .page-actions .button {
    white-space: normal;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric-top {
    flex-wrap: wrap;
  }
  .metric-foot {
    overflow-wrap: anywhere;
  }
  .login-form-area {
    padding-inline: 22px;
  }
  .site-container {
    padding-inline: 20px;
  }
  .site-hero h1 {
    font-size: clamp(35px, 9.4vw, 45px);
    letter-spacing: -1.8px;
  }
  .site-start h2 {
    font-size: clamp(30px, 8.3vw, 39px);
  }
  .automation-sources .shopee span {
    font-size: 12px;
  }
  .automation-sources .shopee img {
    max-width: 18px;
  }
  .automation-steps strong {
    font-size: 13px;
  }
  .automation-step-icon {
    flex-basis: 40px;
    height: 40px;
  }
  .automation-steps li:not(:last-child)::after {
    left: 19px;
  }
}
@media (max-width: 380px) {
  .site-header-inner {
    padding-inline: 12px;
  }
  .site-header-actions {
    gap: 6px;
  }
  .site-header .site-login {
    min-width: 32px;
  }
  .site-header .compact {
    padding-inline: 8px;
  }
  .site-hero-actions {
    gap: 20px;
  }
  .site-footer {
    gap: 16px;
  }
}

/* apps/web/src/density.css */
/* Desktop density requested by the owner: approximately the previous UI at
   90% browser zoom. Resize components rather than scaling the document, so
   fixed panels, viewport heights and the user's own zoom continue to work. */
@media (min-width: 801px) {
  .app-shell,
  .login-layout {
    font-size: 13px;
  }
  .cavigon-brand {
    width: calc(var(--brand-width) * 0.9);
  }
  .sidebar {
    width: 214px;
    padding: 22px 13px 0;
  }
  .sidebar > .brand {
    padding-inline: 13px;
  }
  .main-shell {
    margin-left: 214px;
  }
  .main-shell > main {
    max-width: 1512px;
    padding: 23px 30px 0;
  }
  .topbar {
    height: 65px;
    padding-inline: 30px;
    gap: 18px;
  }
  .workspace-label {
    margin: 22px 0 18px;
    padding: 10px 9px;
    gap: 9px;
  }
  .nav-group {
    margin-top: 15px;
    font-size: 11px;
  }
  .nav-item {
    padding: 8px 11px;
    gap: 10px;
    font-size: 13px;
  }
  .nav-item > svg {
    width: 17px;
    height: 17px;
  }
  .sidebar-bottom {
    padding: 9px 9px 15px;
    font-size: 11px;
  }
  .user-profile {
    padding: 15px 4px 18px;
    gap: 8px;
  }
  .user-profile strong,
  .user-profile small,
  .workspace-label strong {
    font-size: 11px;
  }
  .avatar {
    width: 31px;
    height: 31px;
  }
  .avatar.small {
    width: 27px;
    height: 27px;
  }
  .context-row {
    margin-bottom: 12px;
    gap: 10px;
  }
  .page-heading {
    margin-bottom: 22px;
    gap: 18px;
  }
  .page-heading h1 {
    font-size: 26px;
  }
  .page-heading p,
  .button,
  .tabs button,
  .search-field input,
  .row-title,
  .company-label,
  .stage-row,
  .metric-top,
  .attention-item strong,
  .detail-grid strong,
  .requirement-list strong,
  .operation-steps,
  .form-stack label,
  .panel-header h2,
  .activity-item strong {
    font-size: 13px;
  }
  .button {
    padding: 9px 13px;
    gap: 8px;
  }
  .button.small {
    padding: 6px 10px;
  }
  .app-shell input,
  .app-shell select,
  .app-shell textarea {
    padding: 9px 11px;
  }
  .metric-grid {
    gap: 14px;
    margin-bottom: 22px;
  }
  .metric {
    padding: 17px 19px 13px;
  }
  .metric > strong {
    font-size: 27px;
    margin: 11px 0 14px;
  }
  .metric-foot {
    min-height: 36px;
  }
  .panel {
    margin-bottom: 21px;
  }
  .panel-header {
    padding: 18px 21px;
  }
  .panel-body {
    padding: 20px;
  }
  .table-scroll table {
    font-size: 13px;
  }
  .table-scroll td {
    padding: 13px 17px;
  }
  .table-scroll th {
    padding: 10px 17px;
  }
  .chart-body {
    height: 232px;
  }
  .attention-item {
    padding-block: 17px;
  }
  .drawer {
    width: 504px;
  }
  .drawer-inner > header {
    padding: 27px;
  }
  .drawer-inner > header h2 {
    font-size: 21px;
  }
  .drawer-body {
    padding: 23px 27px;
  }
  .login-intro {
    padding: 49px 58px;
  }
  .login-copy {
    padding-block: 72px;
  }
  .login-copy h1 {
    font-size: 38px;
  }
  .login-copy > p {
    font-size: 14px;
    margin-top: 22px;
  }
  .login-features {
    margin-top: 40px;
    gap: 17px;
  }
  .login-form-area {
    padding: 45px;
  }
  .login-form {
    max-width: 315px;
  }
  .login-form h2 {
    font-size: 26px;
  }
  .login-form > p {
    font-size: 13px;
    margin-bottom: 27px;
  }
  .login-form label {
    margin-bottom: 16px;
  }
  .login-form label input {
    height: 40px;
  }

  .site-container {
    max-width: 1152px;
    padding-inline: 43px;
  }
  .site-header-inner {
    max-width: 1253px;
    padding: 17px 43px;
    gap: 22px;
  }
  .site-nav {
    gap: 27px;
  }
  .site-header-actions {
    gap: 25px;
  }
  .site-hero {
    min-height: 666px;
    padding-block: 72px 76px;
    gap: 47px;
  }
  .site-hero h1 {
    font-size: clamp(41px, 4.5vw, 63px);
    letter-spacing: -2.7px;
  }
  .site-hero-copy > p {
    max-width: 400px;
    font-size: 13px;
    margin-top: 24px;
  }
  .site-hero-actions {
    margin-top: 30px;
    gap: 22px;
  }
  .site-pilot {
    margin-top: 34px;
  }
  .site-button {
    min-height: 49px;
    padding: 13px 21px;
    gap: 27px;
    font-size: 12px;
  }
  .site-button.compact {
    min-height: 36px;
    padding: 9px 14px;
    gap: 16px;
  }
  .automation-visual {
    padding-block: 23px 11px;
  }
  .automation-visual-heading {
    padding-bottom: 15px;
  }
  .automation-sources {
    margin-top: 22px;
  }
  .automation-sources .marketplace-logo {
    height: 42px;
  }
  .automation-inbound {
    height: 32px;
  }
  .automation-steps li {
    padding-block: 14px;
    gap: 15px;
  }
  .automation-steps strong {
    font-size: 13px;
  }
  .automation-step-icon {
    flex-basis: 40px;
    height: 40px;
  }
  .automation-step-icon > svg {
    width: 19px;
    height: 19px;
  }
  .automation-steps li:not(:last-child)::after {
    left: 19px;
    top: calc(50% + 20px);
    bottom: -14px;
  }
  .automation-caption {
    padding-top: 15px;
    margin-top: 11px;
  }
  .site-principles > .site-container {
    padding-block: 22px;
  }
  .site-marketplaces {
    padding-top: 58px;
  }
  .site-marketplaces-heading h2 {
    font-size: 28px;
  }
  .site-section {
    padding-block: 99px 81px;
  }
  .site-section-heading {
    margin-bottom: 36px;
    gap: 49px;
  }
  .cavigon-site h2 {
    font-size: clamp(25px, 2.8vw, 36px);
  }
  .site-feature-grid {
    gap: 16px;
  }
  .site-feature-grid article {
    padding: 26px 24px;
  }
  .site-feature-top {
    margin-bottom: 36px;
  }
  .site-feature-grid h3 {
    font-size: 19px;
    margin-bottom: 15px;
  }
  .site-feature-bottom {
    margin-top: 27px;
    padding-top: 18px;
  }
  .site-connect {
    gap: 90px;
    padding-block: 27px 90px;
  }
  .factory-schedule {
    padding-block: 25px;
  }
  .factory-schedule-top {
    margin-bottom: 30px;
  }
  .factory-phase {
    padding-bottom: 31px;
  }
  .factory-phase h3 {
    font-size: 15px;
  }
  .site-control {
    padding-block: 67px 76px;
  }
  .site-control-grid {
    gap: 45px;
  }
  .site-control-grid h3 {
    font-size: 16px;
  }
  .site-start {
    max-width: 720px;
    padding-block: 94px 70px;
  }
  .site-start h2 {
    font-size: 47px;
  }
  .site-brand-signature {
    padding-block: 58px 67px;
  }
  .site-brand-signature p {
    font-size: clamp(25px, 3.6vw, 41px);
  }
  .site-footer {
    padding-block: 31px;
  }
  .marketplace-tile > .marketplace-logo {
    height: 83px;
    padding: 20px;
  }
  .marketplace-tile-info {
    padding: 19px 21px;
  }
}

@media (min-width: 801px) {
  .app-shell.cascade-shell {
    --module-width: 204px;
  }
  .cascade-shell .main-shell > main {
    padding: 18px 24px 0;
    max-width: none;
  }
  .cascade-shell .topbar {
    height: 58px;
    padding-inline: 24px;
    gap: 12px;
  }
  .cascade-shell .rail-brand {
    height: 68px;
    padding: 16px;
  }
  .cascade-shell .module-button {
    min-height: 36px;
    padding-block: 7px;
  }
  .cascade-shell .module-list {
    gap: 3px;
  }
}
.status-in_transit {
  background: var(--info-bg);
  color: var(--blue);
}
.status-delivered {
  background: var(--success-bg);
  color: var(--success);
}
/* Fit desktop navigation to the available height, including Windows scaling. */
@media (min-width: 801px) and (max-height: 800px) {
  .app-shell.cascade-shell .rail-brand {
    height: 56px;
    padding: 12px 16px;
  }
  .app-shell.cascade-shell .module-list {
    gap: 2px;
    padding-block: 6px;
    min-height: 0;
  }
  .app-shell.cascade-shell .module-button {
    min-height: 32px;
    padding-block: 4px;
    flex-shrink: 0;
  }
  .app-shell.cascade-shell .rail-status {
    padding-block: 9px;
  }
  .app-shell.cascade-shell .topbar {
    min-height: 56px;
    height: auto;
    padding-block: 6px;
  }
  .app-shell.cascade-shell .main-shell > main {
    padding-top: 12px;
  }
  .app-shell.cascade-shell .context-row {
    margin-bottom: 8px;
  }
  .app-shell.cascade-shell .page-heading {
    margin-bottom: 14px;
  }
  .app-shell.cascade-shell .page-heading h1 {
    font-size: 24px;
  }
  .app-shell.cascade-shell .page-heading .eyebrow {
    margin-bottom: 4px;
  }
  .app-shell.cascade-shell .table-toolbar {
    padding: 10px 16px;
  }
  .app-shell.cascade-shell .table-scroll td {
    padding-block: 9px;
  }
  .app-shell.cascade-shell .page-footer {
    margin-top: 12px;
    padding-block: 12px;
  }
}
@media (min-width: 801px) and (max-height: 650px) {
  .app-shell.cascade-shell .rail-brand {
    height: 48px;
  }
  .app-shell.cascade-shell .module-button {
    min-height: 30px;
    padding-block: 3px;
  }
  .app-shell.cascade-shell .module-list {
    gap: 1px;
    padding-block: 4px;
  }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .sidebar {
    width: 191px;
    padding-inline: 9px;
  }
  .main-shell {
    margin-left: 191px;
  }
  .main-shell > main {
    padding: 20px;
  }
  .topbar {
    padding-inline: 20px;
  }
  .login-intro {
    padding: 36px;
  }
  .login-copy h1 {
    font-size: 32px;
  }
}
@media (min-width: 801px) and (max-width: 1050px) {
  .site-header-inner {
    padding-inline: 25px;
    gap: 18px;
  }
  .site-nav {
    gap: 18px;
  }
  .site-header-actions {
    gap: 14px;
  }
  .site-container {
    padding-inline: 29px;
  }
  .site-hero {
    gap: 22px;
  }
  .site-hero h1 {
    font-size: 48px;
  }
  .site-connect {
    gap: 40px;
  }
  .site-feature-grid article {
    padding: 22px 19px;
  }
  .metric > strong {
    font-size: 24px;
  }
}
@media (min-width: 801px) and (max-width: 900px) {
  .site-header-inner {
    gap: 14px;
    padding-inline: 22px;
  }
  .site-nav {
    gap: 13px;
  }
  .site-hero h1 {
    font-size: clamp(36px, 5.13vw, 46px);
  }
}

/* apps/web/src/workflow-ui.css */
.app-shell input,
.app-shell select,
.app-shell textarea,
.app-shell select option {
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--border);
  color-scheme: light;
}
:root[data-theme="dark"] .app-shell input,
:root[data-theme="dark"] .app-shell select,
:root[data-theme="dark"] .app-shell textarea,
:root[data-theme="dark"] .app-shell select option {
  color-scheme: dark;
}
.app-shell .context-select,
.app-shell .topbar-company,
.app-shell .header-company-copy {
  background: var(--surface);
  color: var(--ink);
}
.app-shell .context-select select {
  background: transparent;
  color: var(--ink);
}
.app-shell .search-field {
  background: var(--surface);
}
.app-shell .search-field input {
  background: transparent;
}
.app-shell .context-row {
  margin-bottom: 8px;
}
.app-shell .page-heading {
  margin-bottom: 14px;
  gap: 12px;
}
.app-shell .page-heading .eyebrow {
  margin-bottom: 4px;
  font-size: 10px;
}
.app-shell .page-heading h1 {
  font-size: 24px;
  line-height: 1.25;
}
.app-shell .page-heading p {
  margin-top: 5px;
  line-height: 1.45;
}
.app-shell .panel-header {
  padding: 13px 17px;
}
.app-shell .table-toolbar {
  padding: 12px 17px;
  gap: 12px;
}
.app-shell .ops-heading,
.app-shell .inventory-heading {
  gap: 12px;
  margin-bottom: 12px;
}
.app-shell .ops-heading h1,
.app-shell .inventory-heading h1 {
  font-size: 24px;
}
.app-shell .ops-heading p,
.app-shell .inventory-heading p {
  margin-top: 5px;
}
.app-shell .operations-dashboard {
  gap: 12px;
}
.app-shell .ops-two-columns {
  gap: 12px;
}
.app-shell .ops-two-columns .panel {
  margin-bottom: 0;
}
.app-shell .tabs {
  gap: 6px;
}
.app-shell .tabs button {
  padding: 9px 12px;
}
.state-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
.state-warning,
.app-shell .contact-status-pending {
  background: var(--warning-bg);
  color: var(--warning);
}
.state-danger,
.app-shell .contact-status-blocked {
  background: var(--danger-bg);
  color: var(--danger);
}
.state-success,
.app-shell .contact-status-approved {
  background: var(--success-bg);
  color: var(--success);
}
.state-info {
  background: var(--info-bg);
  color: var(--accent);
}
.state-neutral {
  background: var(--surface-alt);
  color: var(--muted);
}
.state-marketplace {
  background: var(--warning-bg);
  color: var(--warning);
}
:root[data-theme="dark"] .app-shell .state-pill,
:root[data-theme="dark"] .app-shell .contact-status-pending,
:root[data-theme="dark"] .app-shell .contact-status-approved,
:root[data-theme="dark"] .app-shell .contact-status-blocked {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--ink);
  font-weight: 500;
}
:root[data-theme="dark"] .app-shell .state-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--muted);
}
:root[data-theme="dark"] .app-shell .state-warning::before {
  background: var(--warning);
}
:root[data-theme="dark"] .app-shell .state-danger::before {
  background: var(--danger);
}
:root[data-theme="dark"] .app-shell .state-success::before {
  background: var(--success);
}
:root[data-theme="dark"] .app-shell .state-info::before {
  background: var(--accent);
}
:root[data-theme="dark"] .app-shell .stock-quantity {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0;
  padding-left: 0;
}
:root[data-theme="dark"] .app-shell .topbar-company,
:root[data-theme="dark"] .app-shell .topbar-company select,
:root[data-theme="dark"] .app-shell .header-company-copy {
  background-color: var(--surface);
  color: var(--ink);
}
:root[data-theme="dark"] .app-shell tbody tr:hover {
  background: var(--surface-alt);
}
:root[data-theme="dark"] .app-shell .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
:root[data-theme="dark"] .app-shell .button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}
.item-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--ink);
  font: inherit;
  min-width: 0;
}
.fiscal-source-caption {
  color: var(--blue);
}
.catalog-fiscal-source {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: 6px;
}
.fiscal-source-note {
  margin-bottom: 14px;
  padding: 11px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  font-size: 12px;
}
.fiscal-source-note p {
  color: var(--muted);
  line-height: 1.5;
  margin: 4px 0 0;
}
button.item-identity {
  cursor: pointer;
}
.app-shell .text-button {
  background: transparent;
  color: var(--accent);
  border: 0;
  padding: 3px 0;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}
.item-identity strong {
  font-weight: 500;
  line-height: 1.4;
  display: block;
}
.item-identity small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}
.item-thumbnail {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  color: var(--muted);
  background: var(--surface-alt);
}
.item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.app-shell .products-directory-table td,
.app-shell .inventory-table td {
  padding: 8px 14px;
}
.products-directory-table td:first-child {
  width: 40%;
}
.app-shell .products-directory-table td small {
  font-size: 10px;
  line-height: 1.45;
  max-width: 290px;
}
.workflow-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.workflow-filter > label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
}
.workflow-filter select {
  font-size: 12px;
}
.workflow-footnote {
  margin: 0;
  padding: 10px 17px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}
.workflow-note {
  margin: 0;
  padding: 9px 17px;
  font-size: 12px;
}
.stock-kind-tabs {
  display: flex;
  gap: 7px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.stock-kind {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.stock-kind.selected {
  font-weight: 600;
}
.stock-kind.kind-finished {
  color: var(--accent);
}
.stock-kind.kind-packaging {
  color: var(--success);
}
.stock-kind.kind-raw_material {
  color: var(--purple);
}
.stock-kind.kind-consumable {
  color: var(--warning);
}
.stock-kind.kind-finished.selected {
  background: var(--info-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.stock-kind.kind-packaging.selected {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success);
}
.stock-kind.kind-raw_material.selected {
  background: var(--purple-bg);
  color: var(--purple);
  border-color: var(--purple);
}
.stock-kind.kind-consumable.selected {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning);
}
.item-photo-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.item-photo-editor .item-thumbnail {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
}
.item-photo-editor small {
  max-width: 270px;
  color: var(--muted);
  font-size: 11px;
}
.warehouse-assignment {
  max-width: 620px;
}
.warehouse-assignment fieldset {
  display: grid;
  gap: 12px;
  border: 0;
  padding: 0;
}
.workflow-steps {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}
.workflow-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
}
.workflow-step > span:first-child {
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
}
.workflow-step > div {
  flex: 1;
  min-width: 0;
}
.workflow-step small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.45;
}
.workflow-step .button {
  margin-top: 6px;
}
.app-shell .info-panel {
  background: var(--info-bg);
  color: var(--ink);
  border: 1px solid var(--border);
}
.app-shell .info-panel p {
  color: var(--muted);
}
:root[data-theme="dark"] .app-shell .status-in_transit {
  background: var(--info-bg);
  color: var(--blue);
}
:root[data-theme="dark"] .app-shell .status-delivered {
  background: var(--success-bg);
  color: var(--success);
}
.ops-metrics > article:nth-child(1),
.ops-metrics > .finance-metric:nth-child(1) {
  border-top: 3px solid var(--accent);
}
.ops-metrics > article:nth-child(2),
.ops-metrics > .finance-metric:nth-child(2) {
  border-top: 3px solid var(--warning);
}
.ops-metrics > article:nth-child(3),
.ops-metrics > .finance-metric:nth-child(3) {
  border-top: 3px solid var(--success);
}
.ops-metrics > article:nth-child(4),
.ops-metrics > .finance-metric:nth-child(4) {
  border-top: 3px solid var(--purple);
}
@media (min-width: 801px) {
  .app-shell.cascade-shell .main-shell > main {
    padding-top: 12px;
  }
  .app-shell .context-row {
    min-height: 24px;
  }
  .app-shell .page-heading > .page-actions {
    align-self: center;
  }
}
@media (max-width: 800px) {
  .workflow-filter {
    width: 100%;
  }
  .workflow-filter label {
    flex: 1;
  }
  .products-directory-table td:first-child {
    width: auto;
  }
  .stock-kind {
    min-height: 38px;
  }
  .item-photo-editor small {
    max-width: 100%;
  }
  .app-shell .page-heading h1 {
    font-size: 23px;
  }
}

/* Semantic status colors remain legible in both themes without tinting rows. */
.app-shell .status-cancelled,
.app-shell .contact-status-blocked,
.app-shell .state-cancelled {
  color: var(--cancel-text);
  background: var(--cancel-surface);
}
.app-shell .contact-status-pending,
.app-shell .state-warning,
.app-shell .status-awaiting_materials,
.app-shell .state-review {
  color: var(--review-text);
  background: var(--review-surface);
}
.app-shell .contact-header-status select {
  border-color: currentColor;
  color: inherit;
  background: var(--surface);
}
.contact-header-status {
  min-width: 160px;
  max-width: 220px;
}
.contact-header-status .contact-field {
  font-size: 12px;
  gap: 5px;
}
.account-issuer-card {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(240px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.account-issuer-card:last-child {
  border-bottom: 0;
}
.account-issuer-card label,
.manual-order-form label,
.publication-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.account-issuer-card small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}
.manual-order-lines input {
  max-width: 140px;
}
.manual-order-form,
.publication-form {
  padding: 20px;
  display: grid;
  gap: 18px;
}
.manual-order-form fieldset,
.publication-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 16px;
}
.manual-order-form .form-grid,
.publication-form .form-grid,
.publication-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.publication-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
}
.manual-order-form .form-grid label,
.publication-form .form-grid label {
  min-width: 0;
}
.manual-order-form textarea {
  min-height: 64px;
}
.manual-order-form label.checkbox-row,
.publication-form label.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 9px;
}
.manual-order-form > fieldset > .button {
  justify-self: start;
}
.manual-order-lines td:first-child {
  min-width: 230px;
}
.manual-order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.manual-order-form input[type="checkbox"],
.publication-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.account-selector {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  margin-right: 12px;
}
@media (max-width: 1050px) {
  .account-issuer-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .account-issuer-card > .button {
    justify-self: start;
  }
}
@media (max-width: 900px) {
  .manual-order-form .form-grid,
  .publication-form .form-grid,
  .publication-controls {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .manual-order-form,
  .publication-form {
    padding: 16px;
  }
  .account-issuer-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-form-header {
    flex-wrap: wrap;
  }
  .contact-header-status {
    max-width: none;
  }
}

.app-shell .tabs button.state-cancelled {
  color: var(--cancel-text);
  background: var(--cancel-surface);
  border-color: color-mix(in srgb, var(--cancel-text) 25%, var(--border));
}
.app-shell .tabs button.state-review {
  color: var(--review-text);
  background: var(--review-surface);
  border-color: color-mix(in srgb, var(--review-text) 25%, var(--border));
}

/* apps/web/src/theme.css */
/* Shared palette: neutral surfaces in both modes; semantic colors retain meaning. */
:root {
  color-scheme: light;
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-alt: #fafafa;
  --surface-soft: #f0f0f0;
  --ink: #171717;
  --muted: #666666;
  --border: #e2e2e2;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff4ff;
  --on-accent: #ffffff;
  --blue: #2563eb;
  --nav: #101010;
  --nav-text: #c7c7c7;
  --nav-muted: #a3a3a3;
  --nav-border: #2a2a2a;
  --nav-hover: #242424;
  --nav-active: #252525;
  --nav-active-text: #ffffff;
  --nav-indicator: #60a5fa;
  --shadow: 0 2px 10px #00000006;
  --popover-shadow: 0 12px 36px #0000001a;
  --overlay: #00000066;
  --success: #187447;
  --success-bg: #edf7f0;
  --danger: #b52c3c;
  --danger-bg: #fff0f2;
  --warning: #876008;
  --warning-bg: #fff8e5;
  --info-bg: #eff4ff;
  --purple: #7453a3;
  --purple-bg: #f4effa;
  --review-text: var(--warning);
  --review-surface: var(--warning-bg);
  --cancel-text: var(--danger);
  --cancel-surface: var(--danger-bg);
  --chart-primary: #2563eb;
  --chart-secondary: #8a8a8a;
  --chart-muted: #d4d4d4;
  --chart-bar: #6d8fc7;
  --chart-grid: #ebebeb;
  --scroll-thumb: #c5c5c5;
  --photo-surface: #fafafa;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #111111;
  --surface-alt: #181818;
  --surface-soft: #202020;
  --ink: #f5f5f5;
  --muted: #a3a3a3;
  --border: #2b2b2b;
  --accent: #f5f5f5;
  --accent-hover: #d4d4d4;
  --accent-soft: #252525;
  --on-accent: #111111;
  --blue: #d4d4d4;
  --nav: #080808;
  --nav-text: #bdbdbd;
  --nav-muted: #939393;
  --nav-border: #252525;
  --nav-hover: #1b1b1b;
  --nav-active: #252525;
  --nav-active-text: #ffffff;
  --nav-indicator: #f5f5f5;
  --shadow: none;
  --popover-shadow: 0 12px 40px #00000080;
  --overlay: #000000b3;
  --success: #83caa0;
  --success-bg: #14221a;
  --danger: #f098a0;
  --danger-bg: #29171a;
  --warning: #e1c376;
  --warning-bg: #282316;
  --info-bg: #202020;
  --purple: #c5b3df;
  --purple-bg: #231e2b;
  --chart-primary: #f5f5f5;
  --chart-secondary: #929292;
  --chart-muted: #505050;
  --chart-bar: #949494;
  --chart-grid: #242424;
  --scroll-thumb: #454545;
  --photo-surface: #202020;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
input[type="checkbox"],
input[type="radio"],
progress {
  accent-color: var(--accent);
}
select option {
  background: var(--surface);
  color: var(--ink);
}
body,
.table-scroll,
.cascade-level {
  scrollbar-color: var(--scroll-thumb) transparent;
}
.button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.button.primary:disabled {
  opacity: 0.55;
}
.chart-bar {
  background: var(--chart-bar);
}
.chart-bar.current,
.chart-legend i {
  background: var(--chart-primary);
}
.ops-legend .in:before,
.ops-bars .in {
  background: var(--chart-primary);
}
.ops-legend .out:before,
.ops-bars .out {
  background: var(--chart-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .chart-bar,
  .button,
  .module-button {
    transition: none;
  }
}

/* apps/demo/presentation.css */
/* Demo-specific presentation. Shared ERP styles are prepended by the asset build. */
@media (min-width:801px){#menu,#menu-shade{display:none}}
.mobile-shade[hidden] {
  display: none;
}
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-profile > [data-icon] {
  margin-left: auto;
}
.search-trigger [data-icon] {
  display: inline-flex;
}
@font-face {
  font-family: Inter;
  src: url("/inter.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
.sidebar .brand svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1620/365;
}
.sidebar .brand {
  display: block;
}
.sidebar .workspace-label {
  flex-shrink: 0;
}
.sidebar .nav-item {
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
}
.sidebar .nav-item.active {
  background: #ffffff11;
}
.sidebar .nav-item:hover {
  background: #ffffff08;
}
.sidebar nav {
  scrollbar-color: #32445d transparent;
}
.demo-session {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0 16px;
  margin-top: -10px;
  color: var(--muted);
  font-size: 11px;
  flex-wrap: wrap;
}
.session-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}
.text-button {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 11px;
  padding: 4px 0;
}
.text-button:hover {
  text-decoration: underline;
}
#timer {
  font-variant-numeric: tabular-nums;
}
.muted {
  color: var(--muted);
}
.panel > .button {
  margin: 18px 21px;
}
.panel-header > div {
  min-width: 0;
}
.numeric {
  font-variant-numeric: tabular-nums;
}
.table-scroll td strong {
  display: block;
  font-weight: 500;
}
.table-scroll td small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
.table-scroll td .button {
  font-size: 11px;
  padding: 6px 9px;
}
.empty {
  padding: 30px;
  color: var(--muted);
}
.badge.new {
  color: var(--blue);
}
.badge.blocked {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge.reserved,
.badge.invoiced,
.badge.shipped {
  background: var(--accent-soft);
  color: var(--accent);
}
.badge:before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.info-box {
  padding: 17px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 22px;
}
.activity {
  list-style: none;
  margin: 0;
  padding: 0 22px 18px;
}
.activity li {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.activity time {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.activity p {
  font-size: 12px;
  color: var(--ink);
}
.demo-chart {
  display: block;
  width: 100%;
  height: 210px;
}
.demo-chart .grid-line {
  stroke: var(--border);
  stroke-width: 1;
}
.demo-chart rect {
  fill: var(--accent-soft);
}
.demo-chart rect.current {
  fill: var(--accent);
}
.demo-chart text {
  fill: var(--muted);
  font: 11px Inter;
}
.demo-stages .stage-row {
  padding: 8px 0;
}
.demo-stages .stage-row button {
  border: 0;
  background: none;
  text-align: left;
  padding: 0;
  color: var(--ink);
  font-size: 12px;
}
.demo-stages .stage-row strong {
  margin-left: auto;
}
.demo-stages .stage-row:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
}
.demo-stages {
  padding-top: 14px;
}
.demo-pipeline-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.demo-pipeline-head strong {
  font-size: 28px;
}
.demo-pipeline-head span {
  font-size: 12px;
  color: var(--muted);
}
dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  max-width: 600px;
  width: calc(100% - 32px);
  max-height: calc(100dvh - 40px);
  box-shadow: var(--shadow);
}
dialog::backdrop {
  background: #101c2a66;
  backdrop-filter: blur(2px);
}
#details {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: 504px;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  padding: 27px;
}
.dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dialog-top .eyebrow {
  margin: 0;
}
#detail-title {
  font-size: 23px;
  margin-bottom: 8px;
}
#detail-content > .badge {
  margin-top: 16px;
}
.order-product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-block: 1px solid var(--border);
  padding: 20px 0;
  margin: 22px 0;
}
.order-product small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
}
.workflow {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.workflow li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
}
.workflow li > div {
  flex: 1;
}
.workflow strong {
  font-size: 12px;
}
.workflow small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}
.workflow .button {
  padding: 7px 9px;
  font-size: 11px;
}
.step-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 11px;
  flex-shrink: 0;
}
.step-number.done {
  color: var(--accent);
  background: var(--accent-soft);
}
#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  background: var(--ink);
  color: var(--surface);
  padding: 16px 22px;
  border-radius: 8px;
  font-size: 12px;
  max-width: 430px;
  box-shadow: var(--shadow);
}
#toast[hidden] {
  display: none;
}
#ended h2 {
  margin: 12px 0;
}
#ended p {
  margin-bottom: 18px;
}
#ended .button {
  margin: 5px 8px 0 0;
}
.demo-footer {
  margin: 12px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.skip {
  position: fixed;
  top: -60px;
  z-index: 100;
  background: var(--surface);
  padding: 10px;
}
.skip:focus {
  top: 0;
}
.demo-search {
  width: 100%;
  margin: 18px 0;
}
.demo-search-results {
  display: grid;
  gap: 8px;
}
.demo-search-results button {
  justify-content: flex-start;
}
@media (max-width: 1100px) {
  .split-grid {
    grid-template-columns: 1fr;
  }
  .demo-footer {
    flex-wrap: wrap;
  }
}
@media (max-width: 800px) {
  .sidebar {
    visibility: hidden;
  }
  .sidebar.is-open {
    visibility: visible;
  }
  #menu {
    display: inline-flex;
  }
  .main-shell > main {
    padding-top: 18px;
  }
  .context-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .last-sync {
    display: none;
  }
  .demo-session {
    margin-top: 0;
  }
  .demo-footer {
    font-size: 9px;
  }
  .demo-chart {
    height: 190px;
  }
  #details {
    padding: 23px 18px;
  }
  .workflow li {
    gap: 8px;
  }
  .workflow strong {
    font-size: 11px;
  }
  .workflow .button {
    font-size: 10px;
  }
  .demo-session > span:first-child {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Shared cascade shell, with demo controls kept out of the module rail. */
#demo-navigation { display: contents; }
.cascade-shell .demo-session { margin-top: 0; padding: 0 0 12px; }
.cascade-shell .demo-footer { border-top: 1px solid var(--border); margin-top: 12px; padding-block: 12px; }
@media (min-width: 801px) and (max-width: 1279px) { .cascade-shell #menu { display: inline-flex; } }

.app-shell.cascade-shell .search-trigger [data-icon] { display: inline-flex; }