/*
 * SGLA workspace visual layer v2.
 * The existing route, field, and test selectors remain unchanged. This file
 * only reshapes the shell and presentation so the product no longer reads as
 * a clone of the reference OA site.
 */
:root {
  --v2-canvas: #f2f4f1;
  --v2-surface: #fbfcfa;
  --v2-surface-soft: #eef2ee;
  --v2-ink: #1c2421;
  --v2-ink-soft: #30403a;
  --v2-muted: #6b7771;
  --v2-line: #d5dbd6;
  --v2-line-soft: #e6ebe7;
  --v2-rail: #1c2421;
  --v2-rail-soft: #26332e;
  --v2-accent: #c65a38;
  --v2-accent-soft: #f5e2da;
  --v2-info: var(--ui-primary, #b8202b);
  --v2-info-soft: var(--ui-primary-soft, #fbeaec);
  --v2-success: #687b51;
  --v2-success-soft: #e7eee1;
  --v2-warning: #a87524;
  --v2-warning-soft: #f7eddc;
  --v2-radius: 5px;
  --v2-shadow: 0 6px 22px rgba(28, 36, 33, .055);
}

html,
body {
  background: var(--v2-canvas);
  color: var(--v2-ink);
}

body {
  font-family: "Aptos", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  letter-spacing: 0;
}

/* The nav is a persistent rail. It is still the original nav element, so all
 * existing routes and keyboard behavior continue to work. */
.app-shell,
.app-shell.home-shell,
.app-shell.approval-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 72px 42px minmax(0, 1fr) !important;
  background: var(--v2-canvas) !important;
}

.topbar,
.app-shell.approval-shell .topbar {
  position: relative;
  z-index: 90;
  height: 72px !important;
  display: block !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--v2-line) !important;
  background: var(--v2-surface) !important;
  box-shadow: none !important;
}

.topbar-main {
  height: 72px !important;
  min-width: 0;
  margin-left: 88px;
  display: flex !important;
  align-items: center;
  gap: 0;
  border-bottom: 0 !important;
}

.brand {
  width: 214px !important;
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center;
  border-right: 1px solid var(--v2-line) !important;
  background: var(--v2-surface) !important;
}

.brand img {
  width: 164px !important;
  height: auto;
}

.office-context {
  min-width: 176px;
  height: 72px !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center;
  gap: 9px;
  color: var(--v2-ink) !important;
}

.office-context .office-mark {
  width: 26px !important;
  height: 26px !important;
  border: 1px solid #bbc8c0 !important;
  border-radius: 4px !important;
  color: var(--v2-accent) !important;
}

.office-context b {
  font-size: 12px !important;
}

.office-context small {
  margin-top: 3px !important;
  color: var(--v2-muted) !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.global-search {
  width: min(430px, 38vw) !important;
  height: 37px !important;
  margin-left: 18px !important;
  padding: 0 10px 0 13px !important;
  display: flex !important;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--v2-line) !important;
  border-radius: 4px !important;
  background: var(--v2-surface-soft) !important;
  color: var(--v2-muted) !important;
}

.global-search input {
  min-width: 0;
  color: var(--v2-ink) !important;
}

.global-search input::placeholder {
  color: #89958f !important;
}

.global-search kbd {
  padding: 3px 6px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 3px !important;
  background: var(--v2-surface) !important;
  color: var(--v2-muted) !important;
  font-size: 9px !important;
}

.top-actions {
  height: 72px !important;
  margin-left: auto;
  padding: 0 22px 0 12px !important;
  display: flex !important;
  align-items: center;
  gap: 7px !important;
}

.create-application,
.oa-primary-button,
.btn-strong,
.btn-primary {
  border-color: var(--v2-accent) !important;
  background: var(--v2-accent) !important;
  color: #fff !important;
}

.create-application:hover,
.oa-primary-button:hover,
.btn-strong:hover,
.btn-primary:hover {
  border-color: #a9482e !important;
  background: #a9482e !important;
}

.create-application {
  height: 37px !important;
  padding: 0 14px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

.top-action,
.top-actions .top-action,
.oa-icon-button,
.btn-outline,
.btn-ghost {
  border-color: var(--v2-line) !important;
  border-radius: 4px !important;
  background: var(--v2-surface) !important;
  color: var(--v2-muted) !important;
}

.top-action:hover,
.oa-icon-button:hover,
.btn-outline:hover,
.btn-ghost:hover {
  border-color: var(--v2-accent) !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.profile .avatar {
  background: var(--v2-accent) !important;
}

/* Persistent left rail */
.primary-nav,
.app-shell.approval-shell .primary-nav {
  position: fixed !important;
  z-index: 100 !important;
  inset: 0 auto 0 0 !important;
  width: 88px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 15px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  overflow: visible !important;
  background-color: var(--v2-rail) !important;
  background-image: linear-gradient(rgba(184, 32, 43, .24), rgba(184, 32, 43, .42)), url('/static/images/menubg.jpg?v=20260914-menu-bg1') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: #c4d1c9 !important;
}

.primary-nav > button,
.primary-nav .nav-menu-item,
.primary-nav .nav-menu-trigger,
.primary-nav .nav-utility {
  width: 68px !important;
  min-width: 68px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #aabbb0 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

.primary-nav > .nav-home {
  height: 56px !important;
  min-height: 56px !important;
  margin-bottom: 14px !important;
  border-left: 0 !important;
  border-bottom: 1px solid #35443d !important;
  color: #f5f7f4 !important;
  font-size: 22px !important;
}

.primary-nav .nav-home::after {
  display: none !important;
}

.primary-nav .nav-home-brand {
  width: 42px;
  height: 42px;
  display: block;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(8, 18, 14, .28);
}

.primary-nav .nav-home.active .nav-home-brand,
.primary-nav .nav-home:hover .nav-home-brand {
  border-color: #f2a36f;
}

.primary-nav .nav-menu-item {
  position: relative !important;
  display: block !important;
}

.primary-nav .nav-menu-trigger {
  position: relative !important;
  flex-direction: column !important;
  gap: 4px !important;
  white-space: normal !important;
}

.primary-nav .nav-menu-trigger .nav-caret {
  display: none !important;
}

.primary-nav .nav-menu-trigger:hover,
.primary-nav .nav-menu-trigger.active,
.primary-nav .nav-menu-item.desktop-open > .nav-menu-trigger,
.primary-nav .nav-utility:hover,
.primary-nav .nav-home:hover {
  border-left-color: var(--v2-accent) !important;
  background: rgba(184, 32, 43, .76) !important;
  color: #fff !important;
}

.primary-nav .nav-menu-item.active > .nav-menu-trigger {
  border-left-color: var(--v2-accent) !important;
  background: rgba(184, 32, 43, .76) !important;
  color: #fff !important;
}

.primary-nav .nav-utility {
  flex-direction: column !important;
  gap: 4px !important;
  white-space: normal !important;
}

.primary-nav .nav-utility .icon {
  font-size: 17px !important;
}

.primary-nav .nav-spacer {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  border: 0 !important;
}

.primary-nav .nav-dropdown,
.primary-nav .nav-menu-finance .nav-dropdown {
  position: absolute !important;
  z-index: 120 !important;
  top: 0 !important;
  left: 78px !important;
  right: auto !important;
  width: 226px !important;
  min-width: 226px !important;
  padding: 8px !important;
  border: 1px solid #3a4b42 !important;
  border-radius: 0 4px 4px 4px !important;
  background-color: rgba(184, 32, 43, .72) !important;
  background-image: linear-gradient(rgba(184, 32, 43, .2), rgba(184, 32, 43, .38)), url('/static/images/menubg.jpg?v=20260914-menu-bg1') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 8px 12px 28px rgba(12, 18, 16, .28) !important;
}

.primary-nav .nav-menu-business .nav-dropdown.wide,
.primary-nav .nav-menu-administration .nav-dropdown.wide {
  width: 390px !important;
  min-width: 390px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, 40px) !important;
  grid-auto-flow: column !important;
  overflow: hidden !important;
}

.primary-nav .nav-menu-business .nav-dropdown.wide {
  grid-template-rows: repeat(5, 40px) !important;
}

.primary-nav .nav-dropdown.nav-columns-1 {
  width: 184px !important;
  min-width: 184px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(var(--nav-dropdown-rows), 40px) !important;
  grid-auto-flow: column !important;
}

.primary-nav .nav-dropdown.nav-columns-2 {
  width: 292px !important;
  min-width: 292px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--nav-dropdown-rows), 40px) !important;
  grid-auto-flow: column !important;
}

.primary-nav .nav-dropdown.nav-columns-3 {
  width: 390px !important;
  min-width: 390px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--nav-dropdown-rows), 40px) !important;
  grid-auto-flow: column !important;
}

@media (max-width: 820px) {
  .primary-nav .nav-menu-business .nav-dropdown.wide,
  .primary-nav .nav-menu-administration .nav-dropdown.wide {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    overflow: visible !important;
  }

  .primary-nav .nav-dropdown.nav-columns-1,
  .primary-nav .nav-dropdown.nav-columns-2,
  .primary-nav .nav-dropdown.nav-columns-3 {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
  }
}

/* Permission-aware global search */
.global-search-wrap{position:relative;z-index:120;flex:0 1 auto;min-width:0}
.global-search-wrap .global-search{margin-left:18px!important}
.global-search-submit,.global-search-clear,.global-search-mobile-close,.mobile-global-search{flex:0 0 auto;padding:0;border:0;background:transparent;color:#66766f;cursor:pointer}
.global-search-submit{width:24px;height:28px;font-size:17px}
.global-search-clear{width:24px;height:28px;font-size:14px}
.global-search-submit:hover,.global-search-clear:hover{color:var(--v2-accent)}
.global-search-wrap .global-search:focus-within{border-color:#87a99a!important;background:#fff!important;box-shadow:0 0 0 3px rgba(73,119,99,.1)}
.global-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.global-search-panel{position:absolute;top:45px;left:18px;width:min(620px,calc(100vw - 150px));max-height:min(520px,calc(100dvh - 100px));display:flex;flex-direction:column;overflow:hidden;border:1px solid #d5dfda;border-radius:6px;background:#fff;box-shadow:0 16px 42px rgba(38,65,53,.18)}
.global-search-panel>header{min-height:42px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ebe8;color:#283b33;font-size:13px}
.global-search-panel>header span{color:#78867f;font-size:11px}
.global-search-panel-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.global-search-group+.global-search-group{border-top:1px solid #e8edea}
.global-search-group h3{height:32px;margin:0;padding:0 14px;display:flex;align-items:center;gap:7px;background:#f6f8f7;color:#607068;font-size:11px;font-weight:600}
.global-search-group h3 span{color:#8a9791;font-weight:400}
.global-search-group>div{display:grid}
.global-search-result{width:100%;min-height:58px;padding:9px 14px;display:grid;align-content:center;gap:5px;border:0;border-bottom:1px solid #edf1ef;background:#fff;color:#2d4037;text-align:left;cursor:pointer}
.global-search-result:last-child{border-bottom:0}
.global-search-result:hover,.global-search-result:focus-visible{outline:0;background:#eef5f1}
.global-search-result-main{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.global-search-result strong,.global-search-result small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.global-search-result strong{font-size:13px;font-weight:600}
.global-search-result em{flex:0 0 auto;color:#66766f;font-size:11px;font-style:normal;font-weight:400}
.global-search-result small{color:#77867f;font-size:11px}
.global-search-state{min-height:132px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#7b8882;font-size:12px;text-align:center}
.global-search-state strong{color:#405149;font-size:13px}
.global-search-state.error strong{color:#b24b55}
.global-search-state.error button{height:30px;margin-top:4px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border:1px solid #c7d4ce;border-radius:4px;background:#fff;color:#35624e;cursor:pointer}
.global-search-state.loading{flex-direction:row;gap:6px}
.global-search-state.loading span{width:7px;height:7px;border-radius:50%;background:#78998a;animation:global-search-pulse 900ms ease-in-out infinite alternate}
.global-search-state.loading span:nth-child(2){animation-delay:150ms}.global-search-state.loading span:nth-child(3){animation-delay:300ms}
@keyframes global-search-pulse{from{opacity:.35;transform:translateY(1px)}to{opacity:1;transform:translateY(-2px)}}
.global-search-mobile-close,.mobile-global-search{display:none}
@media (prefers-reduced-motion:reduce){.global-search-state.loading span{animation:none}}
@media (max-width:820px){
  .mobile-global-search{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:#31463d;font-size:18px}
  .global-search-wrap{display:none}
  .global-search-wrap.mobile-open{position:fixed;z-index:240;inset:0;padding:58px 12px 12px;display:flex;flex-direction:column;background:rgba(245,248,246,.98)}
  .global-search-wrap.mobile-open .global-search{width:100%!important;height:42px!important;margin:0!important;display:flex!important;background:#fff!important}
  .global-search-mobile-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
  .global-search-panel{position:static;width:100%;max-height:none;margin-top:10px;flex:1;box-shadow:none}
  .global-search-panel-body{flex:1}
}

.primary-nav .nav-menu-finance .nav-dropdown {
  overflow: hidden !important;
}

.primary-nav .nav-dropdown-link {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #d6e2da !important;
  font-size: 11px !important;
}

.primary-nav .nav-dropdown-link:hover,
.primary-nav .nav-dropdown-link.active {
  background: rgba(184, 32, 43, .78) !important;
  color: #fff !important;
}

.nav-backdrop {
  z-index: 95 !important;
}

/* Route tabs and workspace canvas */
.tab-strip,
.app-shell.approval-shell .tab-strip {
  grid-row: 2 !important;
  position: static !important;
  z-index: 20 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 34px 0 110px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tab-scroll,
.app-shell.approval-shell .tab-scroll {
  height: 42px !important;
  background: transparent !important;
}

.route-tab,
.app-shell.approval-shell .route-tab {
  min-width: 125px !important;
  width: auto !important;
  max-width: 220px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
  font-size: 11px !important;
}

.route-tab:hover,
.route-tab.active,
.app-shell.approval-shell .route-tab:hover,
.app-shell.approval-shell .route-tab.active {
  border-bottom-color: var(--v2-accent) !important;
  background: transparent !important;
  color: var(--v2-ink) !important;
  font-weight: 650 !important;
}

.tab-grid {
  height: 42px !important;
  border: 0 !important;
  border-left: 1px solid var(--v2-line) !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
}

.workspace-wrap,
.app-shell.approval-shell .workspace-wrap {
  grid-row: 3 !important;
  min-height: 0 !important;
  padding: 0 34px 28px 110px !important;
  background: var(--v2-canvas) !important;
}

.workspace,
.app-shell.approval-shell .workspace {
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page {
  min-height: 100% !important;
  background: transparent !important;
}

.page-body {
  padding: 24px 0 38px !important;
}

.page-title,
.oa-dashboard-heading h1,
.oa-project-heading h1 {
  color: var(--v2-ink) !important;
  font-family: "Aptos", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.page-subtitle,
.oa-muted,
.oa-heading-side time {
  color: var(--v2-muted) !important;
}

.table-frame,
.project-table-frame,
.filing-approval-table-frame,
.project-page .project-main-inner,
.oa-panel,
.pw-section,
.pw-panel,
.pw-stage-panel,
.pw-task-panel,
.pw-approval-detail {
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  background: var(--v2-surface) !important;
  box-shadow: var(--v2-shadow) !important;
}

.data-table th,
.project-table th,
.filing-approval-table th {
  height: 43px !important;
  background: var(--v2-surface-soft) !important;
  color: var(--v2-muted) !important;
  border-color: var(--v2-line-soft) !important;
  font-size: 10px !important;
}

.data-table td,
.project-table td,
.filing-approval-table td {
  height: 50px !important;
  color: var(--v2-ink-soft) !important;
  border-color: var(--v2-line-soft) !important;
  font-size: 11px !important;
}

.data-table tr:hover td,
.project-table tr:hover td,
.filing-approval-table tr:hover td {
  background: #f5f7f4 !important;
}

.search-box,
.project-search,
.filing-approval-search {
  height: 36px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 4px !important;
  background: var(--v2-surface) !important;
}

.filter-select,
.project-toolbar select {
  height: 36px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 4px !important;
  background: var(--v2-surface) !important;
  color: var(--v2-muted) !important;
}

.status.success,
.oa-status.active,
.pw-status.success,
.pw-hero-meta > div > span.success {
  color: var(--v2-success) !important;
  background: var(--v2-success-soft) !important;
}

.status.warning,
.oa-status.pending,
.pw-status.warning,
.pw-hero-meta > div > span.warning {
  color: var(--v2-warning) !important;
  background: var(--v2-warning-soft) !important;
}

.status.danger,
.oa-status.danger,
.pw-status.danger,
.pw-hero-meta > div > span.danger {
  color: var(--v2-accent) !important;
  background: var(--v2-accent-soft) !important;
}

/* Home dashboard */
.home-shell .workspace {
  overflow: auto !important;
}

.oa-dashboard {
  width: 100% !important;
  max-width: 1420px !important;
  margin: 0 auto !important;
  padding: 24px 0 44px !important;
}

.oa-dashboard-heading,
.oa-project-heading {
  min-height: 72px !important;
  margin-bottom: 20px !important;
  align-items: flex-end !important;
}

.oa-eyebrow,
.pw-section-kicker,
.oa-detail-kicker {
  color: var(--v2-accent) !important;
  font-size: 9px !important;
  letter-spacing: .09em !important;
}

.oa-dashboard-heading h1,
.oa-project-heading h1 {
  margin: 3px 0 5px !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
}

.oa-primary-button {
  min-height: 36px !important;
  border-radius: 4px !important;
}

.oa-metric-strip {
  margin-bottom: 18px !important;
  border: 0 !important;
  border-top: 3px solid var(--v2-ink) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  background: var(--v2-surface) !important;
  box-shadow: none !important;
}

.oa-metric-strip > button {
  min-height: 112px !important;
  padding: 17px 18px !important;
  border-right: 1px solid var(--v2-line-soft) !important;
}

.oa-metric-strip span {
  color: var(--v2-muted) !important;
  font-size: 10px !important;
}

.oa-metric-strip b {
  color: var(--v2-ink) !important;
  font-family: Consolas, "SFMono-Regular", monospace !important;
  font-size: 28px !important;
  font-weight: 650 !important;
}

.oa-metric-strip > button:nth-child(2) b,
.oa-metric-strip > button:first-child b.red {
  color: var(--v2-accent) !important;
}

.oa-metric-strip small {
  color: var(--v2-muted) !important;
  font-size: 10px !important;
}

.oa-metric-strip em,
.green-text,
.oa-metric-strip .green-text {
  color: var(--v2-success) !important;
}

.red-text,
.oa-metric-strip .red-text {
  color: var(--v2-accent) !important;
}

.oa-dashboard-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr) !important;
  gap: 18px !important;
}

.oa-dashboard-main,
.oa-dashboard-side {
  gap: 18px !important;
}

.oa-panel-head {
  min-height: 59px !important;
  padding: 11px 18px !important;
  border-bottom: 1px solid var(--v2-line-soft) !important;
}

.oa-panel-head h2 {
  color: var(--v2-ink) !important;
  font-size: 16px !important;
}

.oa-text-button {
  color: var(--v2-accent) !important;
}

.oa-queue-list {
  grid-template-columns: minmax(0, 1fr) !important;
}

.oa-queue-item {
  min-height: 74px !important;
  padding: 13px 18px !important;
  grid-template-columns: 86px minmax(0, 1fr) 16px !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--v2-line-soft) !important;
  background: var(--v2-surface) !important;
}

.oa-queue-item:last-child {
  border-bottom: 0 !important;
}

.oa-queue-item:hover {
  background: #f5f7f4 !important;
}

.oa-queue-count {
  width: 60px !important;
  height: 30px !important;
  border-radius: 3px !important;
  background: var(--v2-info-soft) !important;
  color: var(--v2-info) !important;
  font-family: Consolas, "SFMono-Regular", monospace !important;
  font-size: 14px !important;
}

.oa-queue-count.red,
.oa-queue-count.amber {
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.oa-queue-count.green {
  background: var(--v2-success-soft) !important;
  color: var(--v2-success) !important;
}

.oa-queue-copy b {
  color: var(--v2-ink) !important;
  font-size: 12px !important;
}

.oa-queue-copy small {
  color: var(--v2-muted) !important;
}

.oa-project-panel table {
  min-width: 760px !important;
}

.oa-project-panel th {
  height: 42px !important;
  background: var(--v2-surface-soft) !important;
  color: var(--v2-muted) !important;
}

.oa-project-panel td {
  height: 56px !important;
  border-top: 1px solid var(--v2-line-soft) !important;
  color: var(--v2-ink-soft) !important;
}

.oa-project-name:hover {
  color: var(--v2-accent) !important;
}

.oa-agenda-date > b {
  color: var(--v2-accent) !important;
  font-family: Consolas, "SFMono-Regular", monospace !important;
}

.agenda-time {
  color: var(--v2-accent) !important;
}

.oa-quick-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px !important;
  background: var(--ui-primary-soft) !important;
}

.oa-quick-action { grid-template-columns: 32px minmax(0, 1fr) 12px; }
.oa-quick-action:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; }
.oa-quick-action:hover .home-shortcut-icon { color: var(--ui-primary-hover); border-color: var(--ui-primary); }

.oa-quick-action:hover {
  color: var(--v2-accent) !important;
  background: #f5f7f4 !important;
}

/* Project list and project context */
.project-page,
.approval-page {
  min-height: 100% !important;
  padding: 24px 0 34px !important;
  background: transparent !important;
}

.project-page .project-sidebar {
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  background: var(--v2-surface) !important;
  box-shadow: var(--v2-shadow) !important;
}

.project-page .project-sidebar button.active {
  border-left: 2px solid var(--v2-accent) !important;
  border-radius: 0 !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.oa-project-metrics {
  border: 0 !important;
  border-top: 3px solid var(--v2-ink) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  background: var(--v2-surface) !important;
  box-shadow: none !important;
}

.oa-project-metrics > div {
  min-height: 84px !important;
  border-right: 1px solid var(--v2-line-soft) !important;
}

.oa-project-metrics b {
  color: var(--v2-ink) !important;
  font-family: Consolas, "SFMono-Regular", monospace !important;
}

.project-workspace-page {
  background: transparent !important;
}

.pw-hero {
  min-height: 112px !important;
  padding: 19px 22px !important;
  border: 0 !important;
  border-top: 3px solid var(--v2-ink) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  background: var(--v2-surface) !important;
  color: var(--v2-ink) !important;
  box-shadow: none !important;
}

.pw-hero-title h1 {
  color: var(--v2-ink) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

.pw-hero-title h1::before {
  display: none !important;
}

.pw-hero-meta > div > span {
  border: 1px solid var(--v2-line) !important;
  border-radius: 3px !important;
  background: var(--v2-surface-soft) !important;
  color: var(--v2-muted) !important;
}

.pw-tabs {
  min-height: 45px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v2-line) !important;
  background: var(--v2-surface) !important;
}

.pw-tabs button {
  height: 45px !important;
  border-bottom: 2px solid transparent !important;
  color: var(--v2-muted) !important;
  font-size: 11px !important;
}

.pw-tabs button.active {
  border-bottom-color: var(--v2-accent) !important;
  background: transparent !important;
  color: var(--v2-ink) !important;
}

.pw-scroll {
  padding: 16px 0 34px !important;
  background: transparent !important;
}

.pw-section,
.pw-panel,
.pw-stage-panel,
.pw-task-panel {
  box-shadow: var(--v2-shadow) !important;
}

.pw-section > header,
.pw-panel > header,
.pw-stage-panel > header,
.pw-task-panel > header {
  border-bottom-color: var(--v2-line-soft) !important;
  background: var(--v2-surface) !important;
}

.pw-section > header h2,
.pw-panel > header h2,
.pw-stage-panel h2,
.pw-task-panel h2 {
  color: var(--v2-ink) !important;
}

.pw-info-grid > div,
.pw-task-panel li {
  border-color: var(--v2-line-soft) !important;
}

.pw-stage-panel li.current > span {
  border-color: var(--v2-accent) !important;
  background: var(--v2-accent) !important;
}

.pw-stage-panel li.done > span {
  border-color: var(--v2-success) !important;
  background: var(--v2-success) !important;
}

/* Filing form and contract workbench */
.workspace-wrap:has(.filing-parity) {
  padding: 0 34px 16px 110px !important;
}

.filing-page.filing-parity {
  --filing-original-canvas: var(--v2-canvas) !important;
  --filing-original-control: #f0f3ef !important;
  --filing-original-line: var(--v2-line-soft) !important;
  background: transparent !important;
}

.filing-parity .filing-heading {
  min-height: 52px !important;
  margin: 0 0 8px !important;
  padding: 8px 20px !important;
  border: 0 !important;
  border-top: 3px solid var(--v2-ink) !important;
  border-radius: 0 !important;
  background: var(--v2-surface) !important;
  color: var(--v2-ink) !important;
  box-shadow: none !important;
}

.filing-parity .filing-heading h1 {
  color: var(--v2-ink) !important;
  font-size: 23px !important;
  font-weight: 700 !important;
}

.filing-parity .filing-scroll {
  background: transparent !important;
}

.filing-parity #filing-form .filing-section {
  margin: 0 0 10px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  background: var(--v2-surface) !important;
  box-shadow: var(--v2-shadow) !important;
}

.filing-parity #filing-form .filing-section > header {
  min-height: 38px !important;
  border-left: 3px solid var(--v2-accent) !important;
  border-bottom: 1px solid var(--v2-line-soft) !important;
  background: var(--v2-surface) !important;
}

.filing-parity #filing-form .filing-section > header h2 {
  color: var(--v2-ink) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

.filing-parity #filing-form .filing-section > header h2 .filing-section-info {
  background: var(--v2-accent) !important;
}

.filing-parity #filing-form .filing-field input,
.filing-parity #filing-form .filing-field select,
.filing-parity #filing-form .filing-field textarea,
.filing-parity #filing-form .filing-picker-button,
.filing-parity #filing-form .filing-person-control,
.filing-parity #filing-form .filing-payment-node input,
.filing-parity #filing-form .filing-payment-node select,
.filing-parity #filing-form .filing-cascader-trigger,
.filing-parity #filing-form .filing-department-trigger,
.filing-parity #filing-form .filing-party-value {
  border-color: var(--v2-line) !important;
  border-radius: 3px !important;
  background: #f0f3ef !important;
  color: var(--v2-ink) !important;
}

.filing-parity #filing-form .filing-field input:focus,
.filing-parity #filing-form .filing-field select:focus,
.filing-parity #filing-form .filing-field textarea:focus,
.filing-parity #filing-form .filing-person-control:focus-within {
  border-color: var(--v2-accent) !important;
  box-shadow: 0 0 0 2px var(--v2-accent-soft) !important;
}

.filing-parity #filing-form .filing-segmented button,
.filing-parity #filing-form .filing-signing-method button {
  border-color: var(--v2-line) !important;
  border-radius: 3px !important;
  background: #f0f3ef !important;
  color: var(--v2-muted) !important;
}

.filing-parity #filing-form .filing-segmented button.active,
.filing-parity #filing-form .filing-signing-method button.active {
  border-color: var(--v2-accent) !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.filing-parity #filing-form .filing-template-contract {
  border-color: var(--v2-line) !important;
  border-radius: 3px !important;
  background: var(--v2-info-soft) !important;
}

.filing-parity #filing-form .filing-template-contract > button {
  border-color: var(--v2-accent) !important;
  border-radius: 3px !important;
  background: var(--v2-accent) !important;
}

.filing-actions {
  background: rgba(251, 252, 250, .97) !important;
  border-top-color: var(--v2-line) !important;
  box-shadow: 0 -6px 18px rgba(28, 36, 33, .06) !important;
}

.filing-contract-workspace-backdrop {
  background: rgba(28, 36, 33, .55) !important;
}

.filing-contract-workspace {
  border: 1px solid var(--v2-line) !important;
  border-top: 3px solid var(--v2-accent) !important;
  border-radius: var(--v2-radius) !important;
  background: var(--v2-surface) !important;
  box-shadow: 0 22px 70px rgba(28, 36, 33, .25) !important;
}

.filing-contract-workspace > header,
.filing-contract-workspace > footer {
  border-color: var(--v2-line-soft) !important;
  background: var(--v2-surface) !important;
}

.filing-contract-workspace > header h2 {
  color: var(--v2-ink) !important;
}

.filing-contract-fields {
  border-right-color: var(--v2-line) !important;
  background: #f6f8f5 !important;
}

.filing-contract-fields-head,
.filing-contract-preview-toolbar {
  border-color: var(--v2-line-soft) !important;
  background: var(--v2-surface-soft) !important;
}

.filing-contract-fields-head strong {
  color: var(--v2-accent) !important;
}

.filing-contract-workspace-group {
  border-bottom-color: var(--v2-line-soft) !important;
}

.filing-contract-workspace-group h3 {
  color: var(--v2-ink) !important;
}

.filing-contract-workspace-field input,
.filing-contract-workspace-field select,
.filing-contract-workspace-field textarea,
.filing-contract-workspace-field output,
.filing-contract-workspace-field .filing-person-control {
  border-color: var(--v2-line) !important;
  border-radius: 3px !important;
  background: var(--v2-surface) !important;
  color: var(--v2-ink) !important;
}

.filing-contract-workspace-field input:focus,
.filing-contract-workspace-field select:focus,
.filing-contract-workspace-field textarea:focus {
  border-color: var(--v2-accent) !important;
  box-shadow: 0 0 0 2px var(--v2-accent-soft) !important;
}

.filing-contract-workspace-field .filing-person-token {
  border-color: #dfb6a8 !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.filing-contract-workspace-field .filing-signing-method button.active {
  border-color: var(--v2-accent) !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.filing-contract-preview {
  background: #e7ece8 !important;
}

.filing-contract-preview-stage.live-pdf {
  background: #e7ece8 !important;
}

.filing-contract-live-preview-paper,
.filing-contract-word-preview {
  border-color: var(--v2-line) !important;
  border-radius: 3px !important;
  background: var(--v2-surface) !important;
  box-shadow: var(--v2-shadow) !important;
}

.filing-contract-preview-controls button {
  border-color: var(--v2-line) !important;
  border-radius: 3px !important;
  color: var(--v2-accent) !important;
}

/* Approval workbench */
.app-shell.approval-shell .workspace-wrap {
  padding-top: 0 !important;
}

.approval-page {
  grid-template-columns: 188px minmax(0, 1fr) !important;
  gap: 16px !important;
}

.approval-process-nav {
  width: 188px !important;
  min-width: 188px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 10px !important;
  overflow: auto !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  background: var(--v2-surface) !important;
  box-shadow: var(--v2-shadow) !important;
}

.approval-process-scroll {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
}

.approval-process-item {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

.approval-process-trigger {
  width: 100% !important;
  min-width: 0 !important;
  height: 37px !important;
  min-height: 37px !important;
  padding: 0 10px !important;
  justify-content: flex-start !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
  font-size: 11px !important;
  text-align: left !important;
}

.approval-process-item.active > .approval-process-trigger,
.approval-process-trigger:hover {
  border-left-color: var(--v2-accent) !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.approval-process-dropdown {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 2px 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f6f8f5 !important;
  box-shadow: none !important;
}

.approval-process-item.open .approval-process-dropdown {
  display: block !important;
}

.approval-process-view {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 8px 0 24px !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
  font-size: 10px !important;
  text-align: left !important;
}

.approval-process-view:hover,
.approval-process-view.active {
  border-left-color: var(--v2-accent) !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.approval-view-tabs {
  margin-top: 10px !important;
  padding: 10px 0 0 !important;
  display: grid !important;
  gap: 2px !important;
  border-top: 1px solid var(--v2-line-soft) !important;
}

.approval-view-tabs .approval-process-view {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  padding-left: 10px !important;
}

.seal-workflow {
  background: transparent !important;
  color: var(--v2-ink) !important;
}

.seal-heading {
  min-height: 70px !important;
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid var(--v2-line-soft) !important;
  background: var(--v2-surface) !important;
}

.seal-heading h1 {
  color: var(--v2-ink) !important;
  font-size: 18px !important;
}

.seal-heading span {
  color: var(--v2-muted) !important;
}

.seal-toolbar {
  padding: 10px 18px 14px !important;
  border-bottom-color: var(--v2-line-soft) !important;
  background: var(--v2-surface) !important;
}

.seal-search input,
.seal-toolbar-actions select,
.seal-toolbar-actions input {
  border-color: var(--v2-line) !important;
  border-radius: 3px !important;
  background: var(--v2-surface-soft) !important;
  color: var(--v2-ink) !important;
}

.seal-search .btn,
.seal-toolbar-actions .btn-primary {
  border-color: var(--v2-accent) !important;
  background: var(--v2-accent) !important;
}

.seal-body {
  padding: 16px 18px !important;
  background: var(--v2-canvas) !important;
}

.seal-table-wrap {
  border-color: var(--v2-line) !important;
  background: var(--v2-surface) !important;
}

.seal-table th {
  background: var(--v2-surface-soft) !important;
  color: var(--v2-muted) !important;
  border-bottom-color: var(--v2-line) !important;
}

.seal-table td {
  color: var(--v2-ink-soft) !important;
  border-bottom-color: var(--v2-line-soft) !important;
}

.seal-table tbody tr:hover {
  background: #f5f7f4 !important;
}

.seal-status.success {
  background: var(--v2-success-soft) !important;
  color: var(--v2-success) !important;
}

.seal-status.warning {
  background: var(--v2-warning-soft) !important;
  color: var(--v2-warning) !important;
}

.seal-status.danger {
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.seal-row-actions button {
  color: var(--v2-accent) !important;
}

.seal-row-actions button:hover {
  background: var(--v2-accent-soft) !important;
}

.seal-pagination {
  color: var(--v2-muted) !important;
}

.seal-pagination button {
  border-color: var(--v2-line) !important;
  background: var(--v2-surface) !important;
}

.approval-process-trigger,
.approval-process-view {
  border-radius: 3px !important;
  color: var(--v2-muted) !important;
  background: transparent !important;
}

.approval-process-item.active .approval-process-trigger,
.approval-process-trigger:hover,
.approval-process-view:hover,
.approval-process-view.active {
  border-left-color: var(--v2-accent) !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
}

.approval-content {
  min-height: 0 !important;
  padding-top: 0 !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  background: var(--v2-surface) !important;
  box-shadow: var(--v2-shadow) !important;
}

.approval-head {
  height: auto !important;
  min-height: 61px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--v2-line-soft) !important;
}

.approval-head .search-box input {
  border-color: var(--v2-line) !important;
  border-radius: 3px !important;
  background: var(--v2-surface-soft) !important;
}

.approval-head .search-submit,
.filing-approval-apply {
  border-color: var(--v2-accent) !important;
  border-radius: 3px !important;
  background: var(--v2-accent) !important;
}

.approval-view-tabs {
  border-bottom-color: var(--v2-line-soft) !important;
}

.approval-view-tabs .approval-process-view.active {
  border-bottom-color: var(--v2-accent) !important;
  background: transparent !important;
}

/* Responsive shell. The rail becomes the existing mobile drawer. */
@media (max-width: 1180px) {
  .topbar-main {
    margin-left: 78px;
  }
  .brand {
    width: 180px !important;
    padding: 0 16px !important;
  }
  .brand img {
    width: 145px !important;
  }
  .office-context {
    display: none !important;
  }
  .global-search {
    width: min(350px, 34vw) !important;
  }
  .tab-strip,
  .app-shell.approval-shell .tab-strip {
    margin-left: 96px !important;
    margin-right: 18px !important;
  }
  .workspace-wrap,
  .app-shell.approval-shell .workspace-wrap {
    padding-left: 96px !important;
    padding-right: 18px !important;
  }
  .oa-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }
}

@media (max-width: 820px) {
  .app-shell,
  .app-shell.home-shell,
  .app-shell.approval-shell {
    grid-template-rows: 60px 42px minmax(0, 1fr) !important;
  }
  .topbar,
  .app-shell.approval-shell .topbar {
    height: 60px !important;
  }
  .topbar-main {
    height: 60px !important;
    margin-left: 0;
  }
  .mobile-menu {
    width: 42px !important;
    height: 60px !important;
    display: block !important;
    color: var(--v2-ink) !important;
  }
  .brand {
    width: auto !important;
    height: 60px !important;
    flex: 1 1 auto !important;
    padding: 0 8px !important;
    border-right: 0 !important;
  }
  .brand img {
    width: 136px !important;
  }
  .global-search {
    display: none !important;
  }
  .top-actions {
    height: 60px !important;
    padding: 0 8px !important;
  }
  .create-application {
    width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  .create-application .icon {
    font-size: 17px !important;
  }
  .top-actions .top-action {
    display: none !important;
  }
  .profile {
    min-width: 36px !important;
    width: 36px !important;
    padding: 0 !important;
  }
  .profile > span {
    display: none !important;
  }
  .primary-nav,
  .app-shell.approval-shell .primary-nav {
    position: fixed !important;
    inset: 60px auto 0 0 !important;
    width: 250px !important;
    height: calc(100dvh - 60px) !important;
    min-height: 0 !important;
    padding: 10px !important;
    display: none !important;
    align-items: stretch !important;
    overflow: auto !important;
    box-shadow: 12px 0 28px rgba(12, 18, 16, .28) !important;
  }
  .primary-nav.open,
  .app-shell.approval-shell .primary-nav.open {
    display: flex !important;
  }
  .primary-nav > button,
  .primary-nav .nav-menu-item,
  .primary-nav .nav-menu-trigger,
  .primary-nav .nav-utility {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 14px !important;
    border-left: 2px solid transparent !important;
    text-align: left !important;
    font-size: 12px !important;
  }
  .primary-nav > .nav-home {
    height: 46px !important;
    min-height: 46px !important;
    margin-bottom: 5px !important;
    border-bottom: 1px solid #35443d !important;
  }
  .primary-nav .nav-dropdown,
  .primary-nav .nav-menu-finance .nav-dropdown {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .primary-nav .nav-dropdown-link {
    height: 38px !important;
    padding-left: 38px !important;
  }
  .tab-strip,
  .app-shell.approval-shell .tab-strip {
    height: 42px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
  }
  .workspace-wrap,
  .app-shell.approval-shell .workspace-wrap {
    padding: 0 12px 22px !important;
  }
  .route-tab {
    min-width: 110px !important;
  }
  .page-body {
    padding: 16px 0 30px !important;
  }
  .oa-dashboard {
    padding: 16px 0 32px !important;
  }
  .oa-dashboard-heading,
  .oa-project-heading {
    min-height: 0 !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 9px !important;
  }
  .oa-dashboard-heading h1,
  .oa-project-heading h1 {
    font-size: 25px !important;
  }
  .oa-heading-side {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .oa-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .oa-metric-strip > button {
    min-height: 88px !important;
    padding: 14px !important;
    border-bottom: 1px solid var(--v2-line-soft) !important;
  }
  .oa-metric-strip > button:nth-child(2n) {
    border-right: 0 !important;
  }
  .oa-metric-strip > button:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }
  .oa-dashboard-grid,
  .oa-dashboard-side {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .oa-queue-item {
    grid-template-columns: 70px minmax(0, 1fr) 14px !important;
  }
  .project-page,
  .approval-page {
    padding: 16px 0 26px !important;
  }
  .project-page .project-sidebar {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .oa-project-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .oa-project-metrics > div {
    min-height: 70px !important;
  }
  .project-workspace-page {
    height: auto !important;
    min-height: calc(100dvh - 102px) !important;
    grid-template-rows: auto auto auto !important;
  }
  .pw-hero {
    min-height: 100px !important;
    padding: 14px !important;
  }
  .pw-hero-title h1 {
    font-size: 18px !important;
  }
  .pw-hero-actions {
    position: static !important;
    margin-top: 10px !important;
  }
  .pw-tabs {
    padding: 0 8px !important;
  }
  .pw-tabs button {
    min-width: max-content !important;
    padding: 0 11px !important;
  }
  .pw-scroll {
    padding: 10px 0 26px !important;
  }
  .pw-basic {
    display: block !important;
  }
  .pw-basic-main,
  .pw-basic-side {
    gap: 10px !important;
  }
  .pw-section,
  .pw-panel,
  .pw-stage-panel,
  .pw-task-panel {
    margin-bottom: 10px !important;
  }
  .workspace-wrap:has(.filing-parity) {
    padding: 0 10px 12px !important;
  }
  .filing-parity .filing-heading {
    min-height: 48px !important;
    margin-bottom: 8px !important;
    padding: 6px 14px !important;
  }
  .filing-parity .filing-heading h1 {
    font-size: 19px !important;
  }
  .filing-parity #filing-form .filing-section {
    margin-bottom: 10px !important;
  }
  .filing-contract-workspace-backdrop {
    padding: 8px !important;
    place-items: end center !important;
  }
  .filing-contract-workspace {
    width: 100% !important;
    height: calc(100dvh - 16px) !important;
    grid-template-rows: 60px 42px minmax(0, 1fr) 62px !important;
  }
  .filing-contract-workspace > header {
    padding: 0 12px !important;
  }
  .filing-contract-workspace > main {
    display: block !important;
    overflow: auto !important;
  }
  .filing-contract-workspace-mobile-tabs {
    min-height: 42px !important;
    display: flex !important;
    border-bottom: 1px solid var(--v2-line) !important;
    background: var(--v2-surface) !important;
  }
  .filing-contract-workspace-mobile-tabs button {
    flex: 1 1 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--v2-muted);
    font-size: 11px;
  }
  .filing-contract-workspace-mobile-tabs button.active {
    border-bottom-color: var(--v2-accent);
    color: var(--v2-accent);
  }
  .filing-contract-fields,
  .filing-contract-preview {
    display: none !important;
    min-height: 0 !important;
    border-right: 0 !important;
  }
  .filing-contract-fields.mobile-active,
  .filing-contract-preview.mobile-active {
    display: block !important;
  }
  .filing-contract-preview.mobile-active {
    display: grid !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .filing-contract-preview-stage {
    min-height: 0 !important;
  }
  .filing-contract-workspace > footer {
    padding: 0 10px !important;
    gap: 6px !important;
  }
  .filing-contract-workspace > footer .btn {
    min-width: max-content !important;
    padding: 0 9px !important;
  }
  .approval-page {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(520px, auto) !important;
    overflow-y: auto !important;
  }
  .approval-process-nav {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
  .approval-process-scroll {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    overflow-x: auto !important;
  }
  .approval-process-item,
  .approval-process-trigger,
  .approval-process-view {
    width: auto !important;
    min-width: max-content !important;
  }
  .approval-process-trigger {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
  }
  .approval-process-dropdown {
    display: none !important;
  }
  .approval-content {
    min-height: 520px !important;
  }
}

/* Approval navigation uses two persistent horizontal levels. */
.approval-page {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
}

.approval-process-nav {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 82px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  background: var(--v2-surface) !important;
  box-shadow: none !important;
}

.approval-process-scroll,
.approval-view-tabs {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

.approval-process-scroll {
  height: 43px !important;
  border-bottom: 1px solid var(--v2-line-soft) !important;
  background: var(--v2-surface) !important;
}

.approval-process-item {
  width: auto !important;
  min-width: max-content !important;
  height: 43px !important;
  flex: 0 0 auto !important;
}

.approval-process-trigger,
.approval-view-tabs .approval-process-view {
  width: auto !important;
  min-width: max-content !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.approval-process-trigger {
  height: 43px !important;
  min-height: 43px !important;
  padding: 0 15px !important;
  justify-content: center !important;
  font-size: 12px !important;
  text-align: center !important;
}

.approval-process-item.active .approval-process-trigger,
.approval-process-trigger:hover,
.approval-process-trigger:focus-visible {
  border-bottom-color: var(--v2-accent) !important;
  background: var(--v2-accent-soft) !important;
  color: var(--v2-accent) !important;
  outline: none !important;
}

.approval-view-tabs {
  height: 38px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  gap: 2px !important;
  border: 0 !important;
  background: var(--v2-surface-soft) !important;
  box-sizing: border-box !important;
}

.approval-view-tabs .approval-process-view {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  flex: 0 0 auto !important;
  font-size: 11px !important;
  text-align: center !important;
}

.approval-view-tabs .approval-process-view:hover,
.approval-view-tabs .approval-process-view:focus-visible,
.approval-view-tabs .approval-process-view.active {
  border-bottom-color: var(--v2-accent) !important;
  background: var(--v2-surface) !important;
  color: var(--v2-accent) !important;
  outline: none !important;
}

@media (max-width: 820px) {
  .approval-page {
    grid-template-rows: auto minmax(520px, auto) !important;
    overflow-y: auto !important;
  }
  .approval-process-nav {
    min-height: 82px !important;
  }
  .approval-content {
    min-height: 520px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Keep the seal filter and its results in normal document flow at tablet sizes. */
@media (max-width: 1260px) {
  .approval-page:has(.seal-workflow) {
    grid-template-rows: auto auto !important;
  }

  .approval-page:has(.seal-workflow) .approval-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .approval-page:has(.seal-workflow) .seal-workflow {
    height: auto !important;
    flex: 0 0 auto !important;
  }

  .approval-page:has(.seal-workflow) .seal-toolbar {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  .approval-page:has(.seal-workflow) .seal-body {
    flex: 0 0 auto !important;
    min-height: 500px !important;
    overflow: visible !important;
  }
}

/* Keep mobile navigation levels in flow and give project pages one scroll owner. */
@media (max-width: 820px) {
  .primary-nav .nav-menu-item.mobile-open {
    height: auto !important;
    min-height: 46px !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  .primary-nav .nav-menu-item.mobile-open .nav-dropdown {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .primary-nav .nav-menu-item.mobile-open .nav-dropdown-link {
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }

  .app-shell.project-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    grid-template-rows: 60px 42px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .app-shell.project-shell .workspace-wrap {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .app-shell.project-shell .workspace {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto !important;
  }

  .app-shell.project-shell .project-page {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  .app-shell.project-shell .project-main,
  .app-shell.project-shell .project-main-inner {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .app-shell.project-shell .project-table-frame {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .app-shell.project-shell .project-workspace-page {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-rows: auto auto auto !important;
  }

  .app-shell.project-shell .pw-scroll {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: initial !important;
  }
}