/* Lianyi VIS presentation layer. Keep route and mobile scroll layouts intact. */
:root {
  --ui-primary: #b8202b;
  --ui-primary-hover: #981a24;
  --ui-primary-soft: #fbeaec;
  --ui-accent-ink: #a21c27;
  --ui-surface: #fff;
  --ui-soft: #f6f5f6;
  --ui-ink: #343034;
  --ui-muted: #716a70;
  --ui-line: #ded9dc;
  --ui-overlay-background: rgba(45, 41, 45, .42);
  --ui-overlay-blur: 6px;
  --ui-dialog-gap-x: 32px;
  --ui-dialog-gap-y: 40px;
  --v2-canvas: #f3f3f4;
  --v2-surface: #fff;
  --v2-surface-soft: #f6f5f6;
  --v2-ink: #2d292d;
  --v2-ink-soft: #484148;
  --v2-muted: #716a70;
  --v2-line: #ded9dc;
  --v2-line-soft: #ece8eb;
  --v2-rail: #faf6f7;
  --v2-rail-soft: #fbeaec;
  --v2-accent-soft: var(--ui-primary-soft);
  --v2-shadow: 0 3px 14px rgba(56, 36, 42, .065);
  --oa-ink: var(--v2-ink);
  --oa-muted: var(--v2-muted);
  --oa-red: var(--ui-primary);
  --oa-red-soft: var(--ui-primary-soft);
  --oa-canvas: var(--v2-canvas);
  --oa-surface: var(--v2-surface);
  --oa-line: var(--v2-line);
  --oa-line-soft: var(--v2-line-soft);
  --brand-soft: var(--ui-primary-soft);
  --brand-pale: #fff7f8;
  --ink: var(--v2-ink);
  --muted: var(--v2-muted);
  --line: var(--v2-line);
  --canvas: var(--v2-canvas);
}

/* Apply the approval report's backdrop to dialogs and drawers, including nested pickers. */
.modal-backdrop,
.drawer-backdrop,
.bulletin-modal-backdrop,
.client-detail-backdrop,
.client-list-modal-backdrop,
.client-modal-backdrop,
.client-person-backdrop,
.clue-modal-backdrop,
.conflict-import-backdrop,
.contract-seal-backdrop,
.enhanced-drawer-backdrop,
.enhanced-modal-backdrop,
.express-dialog-backdrop,
.fad-modal-backdrop,
.fad-preview-backdrop,
.filing-contract-workspace-backdrop,
.filing-missive-backdrop,
.finance-modal-backdrop,
.finance-overlay,
.finance-record-detail-overlay,
.home-settings-backdrop,
.hr-modal-backdrop,
.legal-modal-backdrop,
.market-modal-backdrop,
.meeting-dialog-backdrop,
.missive-modal-backdrop,
.mr-dialog-backdrop,
.opposite-modal-backdrop,
.pw-conflict-report-backdrop,
.pw-modal-backdrop,
.schedule-modal-backdrop,
.seal-modal-backdrop,
.task-modal-backdrop,
.warehousing-modal-backdrop,
.workflow-detail-modal-backdrop,
.workflow-invoice-project-dialog,
.workflow-invoice-history {
  background: var(--ui-overlay-background) !important;
  -webkit-backdrop-filter: blur(var(--ui-overlay-blur));
  backdrop-filter: blur(var(--ui-overlay-blur));
}

/* Project and finance dialogs cover the whole application, including its navigation. */
.pw-modal-backdrop,
.finance-overlay,
.workflow-invoice-history {
  position: fixed;
  inset: 0;
  z-index: 200 !important;
}

.toast-stack { z-index: 4000; }

/* Let finance dialogs rise above the header instead of staying in the workspace's layer. */
.app-shell.finance-shell .workspace-wrap:has([aria-modal="true"]) {
  z-index: auto;
}

/* Shared frame for ordinary dialogs. Drawers and PDF workspaces keep their layouts. */
:is(.modal-backdrop, .bulletin-modal-backdrop, .client-list-modal-backdrop,
    .client-person-backdrop, .clue-modal-backdrop, .conflict-import-backdrop,
    .enhanced-modal-backdrop, .express-dialog-backdrop,
    .fad-modal-backdrop:not(.fad-preview-backdrop), .finance-overlay:has(> .finance-dialog),
    .home-settings-backdrop, .hr-modal-backdrop, .legal-modal-backdrop,
    .market-modal-backdrop, .meeting-dialog-backdrop, .missive-modal-backdrop,
    .mr-dialog-backdrop, .opposite-modal-backdrop, .pw-modal-backdrop,
    .schedule-modal-backdrop, .seal-modal-backdrop, .task-modal-backdrop,
    .warehousing-modal-backdrop, .workflow-detail-modal-backdrop,
    .workflow-invoice-project-dialog, .workflow-invoice-history) {
  padding: var(--ui-dialog-gap-y) var(--ui-dialog-gap-x) !important;
  align-items: center;
  justify-items: center;
}

:is(.modal-backdrop, .bulletin-modal-backdrop, .client-list-modal-backdrop,
    .client-person-backdrop, .clue-modal-backdrop, .conflict-import-backdrop,
    .enhanced-modal-backdrop, .express-dialog-backdrop,
    .fad-modal-backdrop:not(.fad-preview-backdrop), .finance-overlay:has(> .finance-dialog),
    .home-settings-backdrop, .hr-modal-backdrop, .legal-modal-backdrop,
    .market-modal-backdrop, .meeting-dialog-backdrop, .missive-modal-backdrop,
    .mr-dialog-backdrop, .opposite-modal-backdrop, .pw-modal-backdrop,
    .schedule-modal-backdrop, .seal-modal-backdrop, .task-modal-backdrop,
    .warehousing-modal-backdrop, .workflow-detail-modal-backdrop)
    > :is([role="dialog"], [role="document"]),
.workflow-invoice-project-dialog > section,
.workflow-invoice-history-panel {
  max-width: min(1280px, calc(100vw - 2 * var(--ui-dialog-gap-x)));
  max-height: calc(100dvh - 2 * var(--ui-dialog-gap-y));
}

/* Keep a visible backdrop around selection dialogs; document workspaces retain their size. */
.filing-original-backdrop,
.client-person-backdrop {
  padding: 40px 32px;
}

.filing-original-dialog,
.client-person-dialog {
  width: min(1120px, calc(100vw - 64px));
  height: min(760px, calc(100dvh - 80px));
  max-height: calc(100dvh - 80px);
  border-radius: 10px;
}

/* The filing approver picker keeps the original filing workspace dimensions. */
.filing-original-backdrop {
  padding: 20px 5%;
}

.filing-original-dialog.filing-picker-modal {
  width: min(1296px, calc(100vw - 72px));
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 2px;
}

.app-shell,
.app-shell.home-shell,
.app-shell.approval-shell {
  background: var(--v2-canvas) url('assets/lianyi-vis/bg1.jpg') center / cover no-repeat fixed !important;
}

.workspace-wrap,
.app-shell.approval-shell .workspace-wrap {
  background: transparent !important;
}

.topbar,
.app-shell.approval-shell .topbar {
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 2px 12px rgba(56, 36, 42, .045) !important;
}

.brand {
  width: 284px !important;
  flex: 0 0 284px;
  padding: 0 20px !important;
  background: transparent !important;
}

.brand img {
  width: 244px !important;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
}

.global-search-wrap {
  flex-shrink: 1;
}

.global-search-wrap .global-search {
  width: min(350px, 28vw) !important;
  max-width: calc(100% - 18px);
  background: #f7f6f7 !important;
}

.global-search-wrap .global-search:focus-within {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px var(--ui-primary-soft) !important;
}

/* The outer search shell owns the focus treatment. An inner focus-visible
   outline creates a second, square red frame and conflicts with the shell. */
#app .global-search-wrap .global-search input:focus,
#app .global-search-wrap .global-search input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.primary-nav,
.app-shell.approval-shell .primary-nav {
  background: #faf6f7 url('assets/lianyi-vis/sidebar-bg2.jpg') center / cover no-repeat !important;
  border-right: 1px solid #dfd3d7;
  box-shadow: 3px 0 12px rgba(76, 37, 46, .055);
  color: var(--v2-ink) !important;
}

.primary-nav > button,
.primary-nav .nav-menu-item,
.primary-nav .nav-menu-trigger,
.primary-nav .nav-utility {
  color: #423238 !important;
}

.primary-nav > .nav-home {
  border-bottom-color: #dbcbd0 !important;
}

.primary-nav .nav-home-brand {
  object-fit: contain;
  border-radius: 6px;
  border: 0;
  padding: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(79, 33, 42, .08);
}

.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-menu-item.active > .nav-menu-trigger,
.primary-nav .nav-menu-item.mobile-open > .nav-menu-trigger,
.primary-nav > button.active,
.primary-nav .nav-utility:hover,
.primary-nav .nav-home:hover {
  background: var(--ui-primary) !important;
  border-left-color: #7f1720 !important;
  color: #fff !important;
}

/* Atlas buttons are used as compact visual anchors; the existing text remains the accessible label. */
.primary-nav .nav-menu-trigger::before,
.primary-nav > button[data-menu-id="analytics"]::before,
.primary-nav .nav-utility::before {
  content: '';
  display: block;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.primary-nav .nav-menu-approval .nav-menu-trigger::before { background-image: url('assets/lianyi-vis/nav-approval.png'); }
.primary-nav .nav-menu-business .nav-menu-trigger::before { background-image: url('assets/lianyi-vis/nav-business.png'); }
.primary-nav .nav-menu-administration .nav-menu-trigger::before { background-image: url('assets/lianyi-vis/nav-administration.png'); }
.primary-nav .nav-menu-tool .nav-menu-trigger::before { background-image: url('assets/lianyi-vis/nav-tool.png'); }
.primary-nav .nav-menu-knowledge .nav-menu-trigger::before { background-image: url('assets/lianyi-vis/nav-knowledge.png?v=20260924-red1'); }
.primary-nav .nav-menu-finance .nav-menu-trigger::before { background-image: url('assets/lianyi-vis/nav-finance.png?v=20260924-red1'); }
.primary-nav .nav-menu-analytics .nav-menu-trigger::before,
.primary-nav > button[data-menu-id="analytics"]::before { background-image: url('assets/lianyi-vis/nav-analytics.png'); }
.primary-nav > button[data-menu-id="analytics"] {
  flex-direction: column !important;
  gap: 4px !important;
}
.primary-nav .nav-utility > .icon { display: none !important; }
.primary-nav .nav-utility[data-route="/CaseList1"]::before { background-image: url('assets/lianyi-vis/nav-project.png'); }
.primary-nav .nav-utility[data-route="/CollectionCenter"]::before { background-image: url('assets/lianyi-vis/nav-favorite.png?v=20260924-red1'); }

.primary-nav .nav-utility {
  border-radius: 12px !important;
}

.primary-nav .nav-utility.active {
  border-left-color: #7f1720 !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
}

.primary-nav > button.active::after,
.primary-nav .nav-menu-item.active > .nav-menu-trigger::after,
.primary-nav .nav-menu-trigger.active::after {
  display: none !important;
}

.primary-nav .nav-dropdown-link:hover::after,
.primary-nav .nav-dropdown-link:focus-visible::after,
.primary-nav .nav-dropdown-link.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block !important;
  height: 2px;
  background: var(--ui-primary);
}

.primary-nav .nav-dropdown,
.primary-nav .nav-menu-finance .nav-dropdown {
  background: linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)), url('assets/lianyi-vis/menu-bg2.jpg') center / cover no-repeat !important;
  border-color: #e1cdd2 !important;
  border-top: 2px solid var(--ui-primary) !important;
  box-shadow: 6px 10px 26px rgba(65, 32, 41, .16) !important;
}

.primary-nav .nav-dropdown-link {
  color: var(--v2-ink) !important;
  font-weight: 500 !important;
}

.primary-nav .nav-dropdown-link:hover,
.primary-nav .nav-dropdown-link.active {
  background: #fbeaec !important;
  color: var(--ui-accent-ink) !important;
}

.primary-nav button:focus-visible {
  outline: 2px solid var(--ui-primary) !important;
  outline-offset: 2px;
}

.page-title,
.oa-dashboard-heading h1,
.oa-project-heading h1,
.oa-eyebrow {
  letter-spacing: 0 !important;
}

.oa-metric-strip,
.oa-project-metrics,
.pw-hero {
  border-top-color: var(--ui-primary) !important;
}

.oa-panel-head {
  background: #fff !important;
}

.oa-panel-head h2 {
  border-left: 3px solid var(--ui-primary);
  padding-left: 9px;
}

.oa-queue-item:hover,
.oa-quick-action:hover,
.data-table tr:hover td,
.project-table tr:hover td {
  background: #fff7f8 !important;
}

.create-application:hover,
.oa-primary-button:hover,
.btn-strong:hover,
.btn-primary:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

/* Subpage surfaces share the brand palette; status and document colors stay semantic. */
#app .enhanced-page {
  --enhanced-accent: var(--ui-primary);
  --enhanced-accent-strong: var(--ui-primary-hover);
  --enhanced-line: var(--v2-line);
  --enhanced-line-strong: #cfc2c8;
  --enhanced-canvas: #f7f5f6;
  --enhanced-text: var(--v2-ink);
  --enhanced-muted: var(--v2-muted);
}

#app .enhanced-page-dossiers {
  --archive-blue: var(--ui-primary);
  --archive-blue-hover: var(--ui-primary-hover);
  --archive-border: var(--v2-line);
  --archive-header: #f7f2f4;
}

#app :is(.enhanced-page, .hr-page, .finance-page, .client-list-main) {
  color: var(--v2-ink);
  background-color: #fff !important;
}

#app :is(.enhanced-heading, .finance-detail-heading, .enhanced-section > header) {
  background: #fff !important;
  border-bottom-color: var(--v2-line) !important;
}

#app :is(.enhanced-heading h1, .finance-detail-heading h1, .filing-missive-application-header h1) {
  color: var(--v2-ink);
  border-left: 3px solid var(--ui-primary);
  padding-left: 10px;
}

#app :is(.enhanced-body, .filing-contract-fields) {
  background: #f7f5f6 !important;
}

#app :is(.project-toolbar, .approval-toolbar, .finance-toolbar, .client-toolbar,
  .archive-toolbar, .hr-toolbar, .enhanced-toolbar, .seal-toolbar) {
  background-color: #fff !important;
  box-shadow: 0 1px 0 var(--v2-line-soft);
}

#app :is(.enhanced-table-wrap, .finance-table-frame, .client-table-frame,
  .hr-table-frame, .archive-table-shell, .project-table-frame) {
  border-color: var(--v2-line) !important;
  box-shadow: none !important;
}

#app :is(.project-table, .data-table, .finance-table, .client-table, .hr-table,
  .archive-table, .enhanced-table, .filing-approval-table, .seal-table) th {
  background: #f7f2f4 !important;
  color: #54434b !important;
  border-color: #e6dde1 !important;
  font-weight: 600 !important;
}

#app :is(.project-table, .data-table, .finance-table, .client-table, .hr-table,
  .archive-table, .enhanced-table, .filing-approval-table, .seal-table) td {
  border-color: var(--v2-line-soft) !important;
}

#app :is(.finance-table, .client-table, .hr-table, .archive-table, .enhanced-table) tbody tr:hover td {
  background: #fff7f8 !important;
}

#app :is(.finance-text-link, .client-link, .project-link, .archive-link-button,
  .archive-number, .enhanced-link, .hr-link, .hr-row-link):not(.danger) {
  color: var(--ui-accent-ink) !important;
}

#app :is(.finance-search, .client-search, .project-search, .hr-search) {
  background: #f7f5f6 !important;
  border-color: var(--v2-line) !important;
}

#app .finance-primary-select {
  background: #fff !important;
  color: var(--v2-ink) !important;
  border: 1px solid var(--v2-line) !important;
}

#app :is(.enhanced-tabs, .finance-center-nav, .finance-detail-tabs, .approval-view-tabs, .pw-tabs) {
  background: #f7f5f6 !important;
  border-color: var(--v2-line) !important;
}

#app :is(.enhanced-tabs, .finance-detail-tabs) button.active {
  color: var(--ui-accent-ink) !important;
  border-color: var(--ui-primary) !important;
  background: #fff !important;
}

#app .finance-center-nav button {
  color: var(--v2-ink-soft);
}

#app .finance-center-nav button:hover,
#app .hr-tree button:hover {
  background: var(--ui-primary-soft);
  color: var(--ui-accent-ink);
}

#app .finance-center-nav button.active {
  background: var(--ui-primary);
  color: #fff;
  box-shadow: none;
}

#app .hr-tree button.active {
  background: var(--ui-primary-soft);
  color: var(--ui-accent-ink);
}

#app .hr-tree .icon { color: var(--ui-accent-ink); }

#app .filing-parity .filing-heading {
  background: #fff !important;
  border-top-color: var(--ui-primary) !important;
}

#app .filing-parity .filing-heading > button {
  color: var(--v2-muted) !important;
}

#app .filing-parity #filing-form :is(.filing-field input, .filing-field select,
  .filing-field textarea, .filing-picker-button, .filing-person-control,
  .filing-payment-node input, .filing-payment-node select, .filing-cascader-trigger,
  .filing-department-trigger, .filing-party-value) {
  background: var(--ui-soft) !important;
}

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

@media (min-width: 821px) and (max-width: 1180px) {
  .filing-person-picker-layout,
  .client-person-layout {
    min-width: 0;
    padding: 20px 20px 0 !important;
    grid-template-columns: minmax(160px, .7fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
  }
  .filing-person-picker-layout > *,
  .client-person-layout > * {
    min-width: 0;
  }
}

@media (max-width: 1180px) {
  .brand {
    width: 240px !important;
    flex-basis: 240px;
    padding: 0 16px !important;
  }
  .brand img { width: 208px !important; }
}

@media (max-width: 820px) {
  :root {
    --ui-dialog-gap-x: 8px;
    --ui-dialog-gap-y: 12px;
  }
  .filing-original-backdrop,
  .client-person-backdrop {
    padding: 12px 8px;
  }
  .filing-original-dialog,
  .client-person-dialog {
    width: calc(100vw - 16px);
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .primary-nav,
  .app-shell.approval-shell .primary-nav {
    background-image: url('assets/lianyi-vis/sidebar-bg2-mobile.jpg') !important;
  }
  .brand {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 6px !important;
  }
  .brand img { width: 176px !important; }
  .primary-nav .nav-menu-trigger::before,
  .primary-nav > button[data-menu-id="analytics"]::before,
  .primary-nav .nav-utility::before { width: 26px; height: 26px; flex-basis: 26px; }
  .primary-nav > button[data-menu-id="analytics"] {
    flex-direction: row !important;
    gap: 10px !important;
  }
  .primary-nav .nav-dropdown,
  .primary-nav .nav-menu-finance .nav-dropdown {
    box-shadow: none !important;
    border-top: 1px solid #e1cdd2 !important;
  }
  .global-search-wrap.mobile-open .global-search {
    width: 100% !important;
    max-width: 100%;
  }
}

@media print {
  .app-shell,
  .app-shell.home-shell,
  .app-shell.approval-shell { background: #fff !important; }
}