/* Management UI only. No document table, body font or print-layout selectors.
 * Keep this final screen layer separate from the recovered runtime and PDFs. */
@media screen {
  html[data-asr-page] {
    --asr-primary: #285b86;
    --asr-primary-soft: #edf4fa;
    --asr-ink: #233548;
    --asr-muted: #607388;
    --asr-line: #dce5ee;
    --asr-bg: #f2f5f9;
    --asr-card: #fff;
    --asr-sidebar-width: 204px;
    --asr-sidebar-collapsed: 54px;
    --asr-header-height: 56px;
    --asr-navbar-bg: #fff;
    --asr-navbar-border: #e8edf5;
    --asr-navbar-ink: #49637c;
    --asr-navbar-hover: #edf4fa;
    --asr-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --asr-ui-control: 36px;
    --asr-ui-radius: 10px;
    --asr-ui-shadow: 0 2px 8px rgb(31 53 77 / 4%);
    --asr-focus-ring: 0 0 0 3px rgb(40 91 134 / 15%);
  }

  /* A quiet navy navigation rail anchors the white working surface. */
  #app .app-wrapper .sidebar-container {
    background: #19344e !important;
    border-right: 1px solid #26425d !important;
    box-shadow: none !important;
  }
  #app .sidebar-container .el-menu,
  #app .sidebar-container .nest-menu .el-menu-item {
    background: transparent !important;
  }
  #app .sidebar-container .el-menu-item,
  #app .sidebar-container .el-submenu__title,
  #app .sidebar-container .nest-menu .el-submenu > .el-submenu__title {
    /* Element UI writes the legacy white menu prop inline, also on mouseleave. */
    background: transparent !important;
    color: #d4e0eb !important;
    font-family: var(--asr-ui-font);
    font-size: 14px;
    font-weight: 400;
    transition: background-color .15s, color .15s;
  }
  #app .sidebar-container .el-menu-item i,
  #app .sidebar-container .el-submenu__title i { color: #a9bed1 !important; }
  #app .sidebar-container .asr-business-sidebar > .menu-wrapper { padding: 12px 8px; }
  #app .sidebar-container .asr-business-sidebar .el-menu--inline {
    margin: 4px 0 10px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: #142c43 !important;
  }
  #app .sidebar-container .asr-business-sidebar .el-menu--inline .el-menu-item {
    background: transparent !important;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
  #app .sidebar-container .asr-business-sidebar .asr-menu-section-label {
    color: #a7bfd4;
    font-size: 12px;
    letter-spacing: .06em;
  }
  #app .sidebar-container .asr-business-sidebar .asr-sidebar-separated { border-color: #365067; }
  #app .sidebar-container .el-menu-item:hover,
  #app .sidebar-container .el-submenu__title:hover,
  #app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover,
  #app .sidebar-container .asr-business-sidebar .el-menu--inline .el-menu-item:hover,
  #app .sidebar-container .nest-menu .el-submenu.is-active > .el-submenu__title,
  #app .sidebar-container .asr-business-sidebar .el-submenu.is-active > .el-submenu__title {
    color: #fff !important;
    background: #244762 !important;
  }
  #app .sidebar-container .el-menu-item.is-active,
  #app .sidebar-container .asr-business-sidebar .el-menu--inline .el-menu-item.is-active {
    color: #fff !important;
    background: #2c5d83 !important;
    box-shadow: inset 3px 0 0 #89c9ee;
    font-weight: 600;
  }
  #app .sidebar-container .el-menu-item.is-active i { color: #fff !important; }
  #app .hideSidebar .sidebar-container .asr-business-sidebar > .menu-wrapper { padding-inline: 3px; }

  /* Collapsed sidebar submenus are portaled to body, outside #app. */
  html[data-asr-page] body > .el-menu--vertical .el-menu--popup {
    background: #19344e !important;
    border: 1px solid #26425d;
  }
  html[data-asr-page] body > .el-menu--vertical .el-menu-item,
  html[data-asr-page] body > .el-menu--vertical .el-submenu__title {
    background: transparent !important;
    color: #d4e0eb !important;
  }
  html[data-asr-page] body > .el-menu--vertical .el-menu-item i,
  html[data-asr-page] body > .el-menu--vertical .el-submenu__title i { color: #a9bed1 !important; }
  html[data-asr-page] body > .el-menu--vertical .el-menu-item:hover,
  html[data-asr-page] body > .el-menu--vertical .el-submenu__title:hover {
    background: #244762 !important;
    color: #fff !important;
  }
  html[data-asr-page] body > .el-menu--vertical .el-menu-item.is-active {
    background: #2c5d83 !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #89c9ee;
  }
  html[data-asr-page] body > .el-menu--vertical .el-menu-item.is-active i { color: #fff !important; }

  #app .app-wrapper .main-container { min-width: 0; }
  #app .app-wrapper .navbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 28px 0 8px;
    background: var(--asr-navbar-bg) !important;
    border-bottom-color: var(--asr-navbar-border) !important;
    box-shadow: none;
  }
  #app .navbar .hamburger-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 8px;
    color: var(--asr-navbar-ink);
  }
  #app .navbar .hamburger-container:is(:hover, :focus-visible) { background: var(--asr-navbar-hover); }
  #app .navbar .hamburger { fill: currentColor; }
  #app .navbar .app-breadcrumb {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-size: 14px;
  }
  #app .navbar .app-breadcrumb .el-breadcrumb__inner,
  #app .navbar .app-breadcrumb .el-breadcrumb__inner a { color: #607388 !important; }
  #app .navbar .app-breadcrumb .el-breadcrumb__separator { color: #94a3b8; }
  #app .navbar .app-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  #app .navbar .app-breadcrumb .el-breadcrumb__item:last-child .no-redirect { color: #233548 !important; font-weight: 600; }
  #app .navbar .app-breadcrumb .el-breadcrumb__inner.is-link:hover,
  #app .navbar .app-breadcrumb .el-breadcrumb__inner a:hover { color: #285b86 !important; }
  #app .navbar .avatar-container {
    position: relative;
    right: auto !important;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
  }
  #app .navbar .avatar-wrapper { margin-top: 0 !important; background: #edf4fa; border-color: #d7e3ef; }
  #app .navbar .avatar-wrapper .el-icon-caret-bottom { color: #607388; }

  /* Page hierarchy: one compact heading, filters, then the working table. */
  #app .app-main > .page,
  #app .app-main > .app-container,
  #app .app-main > .dashboard-container {
    min-width: 0;
    box-sizing: border-box;
    padding: 20px 22px 28px !important;
  }
  #app .app-main :is(.page > .ph, .sample-page > .page-header, .order-add-page > .page-header, .audit-header) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
    min-height: 68px;
    margin-bottom: 16px;
    padding: 16px 18px !important;
    border: 1px solid var(--asr-line);
    border-radius: var(--asr-ui-radius) !important;
    background: #fff !important;
    box-shadow: var(--asr-ui-shadow);
  }
  #app .app-main .ph :is(.ph-title, .ph-desc),
  #app .app-main :is(.page-header h2, .audit-title) { font-family: var(--asr-ui-font); }
  #app .app-main .ph .ph-title,
  #app .app-main :is(.page-header h2, .audit-title) {
    margin: 0;
    color: var(--asr-ink) !important;
    font-size: 20px !important;
    line-height: 1.4;
    letter-spacing: 0;
    font-weight: 600 !important;
  }
  #app .app-main .ph .ph-desc { margin-top: 4px; color: #607388 !important; font-size: 13px !important; line-height: 1.5; }
  #app .app-main .ph .ph-icon { width: 40px !important; height: 40px !important; background: #edf4fa !important; color: #285b86 !important; }
  #app .app-main .ph .ph-left { min-width: 0; flex: 1 1 220px; }
  #app .app-main .ph .ph-right { margin-left: auto; min-width: 0; gap: 8px; }
  #app .app-main .ph .ph-chip { height: auto; min-height: 46px; border-color: #e3ebf3; background: #f8fafc !important; }
  #app .app-main .ph .chip-lab { color: #607388 !important; font-size: 12px; }
  #app .app-main :is(.fb-card, .table-card, .ledger-card, .section-card, .panel-card, .finance-command, .finance-insight) {
    min-width: 0;
    border: 1px solid var(--asr-line) !important;
    border-radius: var(--asr-ui-radius) !important;
    box-shadow: var(--asr-ui-shadow) !important;
  }
  #app .app-main :is(.fb-card, .section-card, .panel-card) { margin-bottom: 16px; }
  #app .app-main :is(.fb-card .fb-bar, .sample-page .filter-bar, .table-card-toolbar, .asr-order-list-toolbar, .sample-page .toolbar, .test-item-edit-tools) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  #app .app-main :is(.fb-card .fb-bar, .sample-page .filter-bar) > :is(.el-input, .el-select, .el-date-editor, .el-cascader) {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
  }
  #app .app-main :is(.fb-actions, .batch-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  #app .app-main :is(.fb-actions, .batch-actions, .ph-right, .table-card-toolbar, .sample-page .toolbar) > .el-button { margin-left: 0; }

  /* Use component classes, never generic table/td or document text selectors. */
  #app .app-main .el-table {
    color: #30445a;
    font-family: var(--asr-ui-font);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
  #app .app-main .el-table :is(th, th.is-leaf) {
    background: #eef3f8 !important;
    color: #496079 !important;
    border-bottom-color: #d9e3ed !important;
    font-size: 13px;
    font-weight: 600;
    padding-block: 10px;
  }
  #app .app-main .el-table td { padding-block: 10px; border-bottom-color: #e8eef5 !important; }
  #app .app-main .el-table .cell { line-height: 1.55; padding-inline: 12px; }
  #app .app-main .el-table .el-table__body tr:hover > td { background: #f0f6fb !important; }
  #app .app-main .el-table .el-table__body tr.current-row > td { background: #e9f2fa !important; }
  #app .app-main .asr-order-col-tests .cell { white-space: normal !important; max-height: none !important; overflow-wrap: anywhere; }
  #app .app-main .asr-finance-remark-column .cell { display: block !important; max-height: none !important; -webkit-line-clamp: unset; white-space: normal; overflow-wrap: anywhere; }
  #app .app-main .el-table__body-wrapper { scrollbar-width: auto; scrollbar-color: #acbfd2 #edf2f7; }
  #app .app-main .el-table__body-wrapper::-webkit-scrollbar { height: 10px; width: 10px; }
  #app .app-main .asr-table-scroll-hint { margin-top: 8px; color: #526b85; background: #f6f9fc; border-color: #dfe8f2; }
  #app .app-main :is(.pagination-wrap, .pagination-container, .page-wrap) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 16px !important;
  }
  #app .app-main .el-pagination { white-space: normal; line-height: 34px; }
  #app .app-main .el-pagination :is(button, .el-pager li) { min-width: 32px; height: 32px; line-height: 32px; border-radius: 6px; }

  /* Inputs and actions retain their Element UI events, loading and disabled states. */
  #app .app-main :is(.el-input__inner, .el-select .el-input__inner, .el-date-editor.el-input__inner),
  html[data-asr-page] body > .el-dialog__wrapper .el-form :is(.el-input__inner, .el-select .el-input__inner) {
    height: var(--asr-ui-control);
    line-height: 34px;
    border-color: #cbd8e5;
    border-radius: 7px;
    font-family: var(--asr-ui-font);
    font-size: 14px;
  }
  #app .app-main .el-input__icon { line-height: var(--asr-ui-control); }
  #app .app-main .el-textarea__inner { font-family: var(--asr-ui-font); font-size: 14px; line-height: 1.6; padding: 9px 12px; border-color: #cbd8e5; border-radius: 7px; }
  #app .app-main :is(.el-input__inner, .el-textarea__inner):focus { border-color: #397bad; box-shadow: var(--asr-focus-ring); }
  #app .app-main .el-input.is-disabled .el-input__inner { color: #6d7c8d; background: #f3f5f8; border-color: #e1e7ee; }
  #app .app-main :is(.el-form-item__label, .el-radio__label, .el-checkbox__label) { color: #465c73; font-family: var(--asr-ui-font); font-size: 14px; }
  #app .app-main .el-form-item__label { line-height: var(--asr-ui-control); }
  #app .app-main .el-form-item__content { min-width: 0; line-height: var(--asr-ui-control); }
  #app .app-main .el-form-item { margin-bottom: 20px; }
  #app .app-main .el-button { font-family: var(--asr-ui-font); border-radius: 7px; font-weight: 500; }
  #app .app-main .el-button:not(.el-button--text):not(.is-circle) { min-height: 34px; padding: 8px 14px; }
  #app .app-main .el-button--primary { background: #285b86 !important; border-color: #285b86 !important; box-shadow: none; }
  #app .app-main .el-button--primary:not(.is-disabled):is(:hover, :focus-visible) { background: #1d486c !important; border-color: #1d486c !important; }
  #app .app-main .el-button--primary.is-plain { color: #285b86; background: #edf4fa !important; border-color: #bfd3e5 !important; }
  #app .app-main .el-button--primary.is-plain:not(.is-disabled):is(:hover, :focus-visible) { color: #fff !important; }
  #app .app-main .el-button--primary.is-disabled { opacity: .55; }
  #app .app-main .el-button--text { min-height: 30px; padding: 5px 2px; color: #285b86; }
  #app .app-main .el-button--text:not(.is-disabled):hover { text-decoration: underline; text-underline-offset: 3px; }
  #app .app-main .el-button--text.is-disabled { color: #94a1b1 !important; text-decoration: none; background: transparent !important; }
  #app .app-main .el-tag { max-width: 100%; height: auto; min-height: 24px; line-height: 22px; border-radius: 5px; white-space: normal; overflow-wrap: anywhere; }
  #app .app-main .asr-nowrap-column .cell,
  #app .app-main .asr-nowrap-column .el-tag { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }
  #app .app-main .el-tabs__item { font-family: var(--asr-ui-font); font-size: 14px; font-weight: 500; color: #607388; }
  #app .app-main .el-tabs__item.is-active { color: #285b86; font-weight: 600; }
  #app .app-main .el-tabs__item.is-disabled { color: #94a1b1 !important; font-weight: 400; cursor: not-allowed; }
  #app .app-main .el-radio.is-disabled .el-radio__label,
  #app .app-main .el-checkbox.is-disabled .el-checkbox__label { color: #94a1b1; }
  #app .app-main .el-tabs__active-bar { background: #285b86; }
  #app .app-main .el-tabs__nav-wrap::after { height: 1px; background: #e1e9f1; }

  /* Overlay frames are screen chrome, not the document inside a print preview. */
  html[data-asr-page] .el-dialog__wrapper > .el-dialog { border-radius: 12px; border: 1px solid #dbe5ee; box-shadow: 0 24px 64px rgb(20 43 67 / 18%); }
  html[data-asr-page] .el-dialog > .el-dialog__header { padding: 18px 22px; border-bottom: 1px solid #e4ebf2; background: #f8fafc; border-radius: 12px 12px 0 0; }
  html[data-asr-page] .el-dialog > .el-dialog__header .el-dialog__title { color: #233548; font: 600 18px/1.5 var(--asr-ui-font); }
  html[data-asr-page] .el-dialog > .el-dialog__footer { padding: 14px 22px; border-top: 1px solid #e4ebf2; background: #f8fafc; border-radius: 0 0 12px 12px; }
  html[data-asr-page] body > .el-dialog__wrapper .el-button { font-family: var(--asr-ui-font); border-radius: 7px; }
  html[data-asr-page] body > .el-dialog__wrapper .el-button--primary { color: #fff !important; background: #285b86 !important; border-color: #285b86 !important; }
  html[data-asr-page] body > .el-dialog__wrapper .el-button--primary:not(.is-disabled):is(:hover, :focus-visible) { color: #fff !important; background: #1d486c !important; border-color: #1d486c !important; }
  html[data-asr-page] body > .el-dialog__wrapper .el-button--primary.is-plain { color: #285b86 !important; background: #edf4fa !important; border-color: #bfd3e5 !important; }
  html[data-asr-page] body > .el-dialog__wrapper .el-button--primary.is-plain:not(.is-disabled):is(:hover, :focus-visible) { color: #fff !important; background: #1d486c !important; border-color: #1d486c !important; }
  html[data-asr-page] body > .el-dialog__wrapper .el-button--primary.is-disabled { opacity: .55; }
  html[data-asr-page] body > :is(.el-select-dropdown, .el-dropdown-menu, .el-picker-panel) { border-color: #d8e3ee; border-radius: 8px; box-shadow: 0 10px 30px rgb(26 48 71 / 12%); }
  html[data-asr-page] .el-select-dropdown__item { min-height: 34px; height: auto; line-height: 1.5; padding-block: 7px; }
  html[data-asr-page] .el-select-dropdown__item.selected { color: #285b86; background: #eef4fa; }
  html[data-asr-page] :is(.el-message, .el-message-box) { max-width: calc(100vw - 32px); box-sizing: border-box; border-radius: 10px; }
  html[data-asr-page] .el-message__content { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
  html[data-asr-page] .asr-register-dialog { border-radius: 12px; box-shadow: 0 24px 64px rgb(20 43 67 / 18%); }
  html[data-asr-page] .asr-register-item { box-shadow: none; }
  html[data-asr-page] .asr-register-section-head small,
  html[data-asr-page] .asr-item-product-title small { color: #607388; font-size: 12px; }

  /* The existing dashboard remains data-first; remove decorative gradients. */
  #app .dashboard-container .dash-header { background: #234b6d !important; border-radius: 10px !important; box-shadow: none !important; }
  #app .dashboard-container :is(.insight-card, .profit-card, .kpi-item, .panel-card) { border-color: #dce5ee !important; border-radius: 10px !important; box-shadow: var(--asr-ui-shadow) !important; }
  #app .dashboard-container :is(.insight-card, .profit-card, .kpi-item, .panel-card):hover { transform: none !important; box-shadow: 0 4px 14px rgb(31 53 77 / 6%) !important; }
  #app .dashboard-container :is(.insight-grid, .profit-hero, .kpi-strip) { gap: 14px !important; }
  #app .customer-month-dashboard .customer-month-header { padding: 14px 18px; flex-wrap: wrap; gap: 12px; }
  #app .customer-month-dashboard :is(.customer-month-controls, .customer-month-title) { flex-wrap: wrap; }
  #app .customer-month-dashboard :is(.customer-month-updated, .customer-month-subtitle) { color: #607388; font-size: 12px; }
  #app .report-edit-page.report-editor-responsive > .page-bar { box-shadow: var(--asr-ui-shadow); border: 1px solid var(--asr-line); border-radius: 10px; }
  #app .report-editor-responsive .report-toolbar-selectors { padding-top: 10px; border-top: 1px solid #e4ebf2; }
  #app .report-edit-page.report-editor-responsive .page-title { color: #233548; font-size: 18px; font-weight: 600; }

  /* The existing order submit rail follows the same open/collapsed navigation. */
  #app .order-add-page .submit-bar {
    left: var(--asr-sidebar-width);
    padding-inline: max(22px, calc((100vw - var(--asr-sidebar-width) - var(--asr-order-content-width, 1440px)) / 2 + 22px));
    border-color: #dce5ee;
    box-shadow: 0 -3px 14px rgb(31 53 77 / 5%);
  }
  #app .hideSidebar .order-add-page .submit-bar {
    left: var(--asr-sidebar-collapsed);
    padding-inline: max(22px, calc((100vw - var(--asr-sidebar-collapsed) - var(--asr-order-content-width, 1440px)) / 2 + 22px));
  }
  #app .app-wrapper.mobile .order-add-page .submit-bar { left: 0; padding-inline: 14px; }

  @media (max-width: 1280px) {
    html[data-asr-page] { --asr-sidebar-width: 184px; }
    #app .app-main > :is(.page, .app-container, .dashboard-container) { padding: 16px !important; }
    #app .app-main :is(.ph .ph-right, .sample-page .toolbar) { flex-wrap: wrap; }
    #app .app-main .fb-card .fb-actions { margin-left: 0; flex-basis: 100%; padding-top: 2px; }
    #app .dashboard-container :is(.insight-grid, .kpi-strip) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #app .order-add-page #sec-client .el-col-12 { width: 100%; }
  }
  @media (max-width: 900px) {
    #app .app-main :is(.ph .ph-right, .sample-page .toolbar) { width: 100%; margin-left: 0; }
    #app .app-main .fb-card .fb-bar > :is(.el-input, .el-select) { flex: 1 1 160px; }
    #app .app-main .el-pagination__jump { margin-left: 8px; }
  }
  @media (max-width: 767px) {
    #app .app-wrapper.mobile .main-container { margin-left: 0 !important; }
    #app .app-main > :is(.page, .app-container, .dashboard-container) { padding: 12px !important; }
    #app .app-main :is(.ph, .sample-page > .page-header) { padding: 14px !important; gap: 12px; }
    #app .app-main .ph .ph-title { font-size: 18px !important; }
    #app .navbar { gap: 6px; padding-right: 22px; }
    #app .dashboard-container :is(.insight-grid, .profit-hero, .kpi-strip) { grid-template-columns: minmax(0, 1fr) !important; }
    #app .app-main :is(.pagination-wrap, .pagination-container, .page-wrap) { justify-content: flex-start; padding: 12px !important; }
    #app .app-main .el-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    #app .sidebar-container .el-menu-item,
    #app .sidebar-container .el-submenu__title,
    #app .dashboard-container :is(.insight-card, .profit-card, .kpi-item, .panel-card) { transition: none !important; }
  }
}