/* B visual preview. Keep existing grid geometry, DOM hooks and business logic. */
:root {
  --bg: #f6f6f4;
  --panel: #fff;
  --line: #dededa;
  --text: #1b1f24;
  --muted: #565d66;
  --brand: #1f4b8e;
  --brand-weak: #eef3fb;
  --blue: #1f4b8e;
  --row-hover: #f2f6fc;
  --warn-bg: #fef7e8;
  --danger-bg: #fdf0ee;
  --ok-bg: #ebf9f1;
}
body { letter-spacing: 0; font-variant-numeric: tabular-nums; }
.topbar {
  background: #fff;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  gap: 16px;
}
.topbar h1 { font-size: 20px; font-weight: 750; }
.topbar p { color: var(--muted); font-size: 12px; }
.topnav { gap: 4px; }
.topnav a {
  color: #565d66;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 9px 10px;
  white-space: nowrap;
  transition: none;
}
.topnav a:hover { background: #f3f4f5; color: var(--brand); }
.topnav a.active {
  color: var(--brand);
  background: var(--brand-weak);
  border-color: #c8d8f0;
  box-shadow: inset 0 -3px 0 var(--brand);
}
.topnav a.active::after { content: none; }
.request-board-link {
  color: #565d66;
  background: transparent;
  border-color: transparent;
}
.request-board-link:hover { background: #f3f4f5; color: var(--brand); }
.topbar button#requestBoardButton:hover { background: #f3f4f5; color: #173a70; border-color: #bfc9d7; }
.request-board-link.active { color: var(--brand); background: var(--brand-weak); border-color: #c8d8f0; box-shadow: inset 0 -3px 0 var(--brand); }
.auth-user { color: var(--muted); }
.auth-box button, .guard, .guard.small {
  background: #fff; color: #565d66; border-color: var(--line);
}
h2 { font-size: 17px; font-weight: 750; }
button { background: var(--brand); border-color: var(--brand); border-radius: 6px; }
button:hover { filter: none; }
button:not(.secondary):not(.metric-card):not(.grid-sort):not(.auto-filter-button):not(.detail-tabs button):not(.auto-filter-popup button):not(.request-board-row):hover { background-color: #173a70; }
#logoutBtn { color: #39424e; background: #fff; border-color: #d3d7dd; }
.excel-grid .grid-sort:hover, .auto-filter-button:hover { background-color: #e4ecf7; }
button.secondary { color: #39424e; border-color: var(--line); }
button.secondary:hover { background: #f3f4f5; border-color: #bfc4cb; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #1f4b8e; outline-offset: 2px;
}
input, select, textarea { border-color: #d3d7dd; border-radius: 6px; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
.stage-check-group label { display: flex !important; align-items: center; gap: 6px; white-space: nowrap; }
.stage-check-group input[type=radio] { width: 14px !important; min-width: 14px; height: 14px; flex: 0 0 14px; margin: 0; }
.panel { border-radius: 0; border-color: transparent; box-shadow: none; }
.metric-card {
  border-radius: 5px; border-color: #e4e5e2;
  background: #fff; box-shadow: none;
}
.metric-card:hover { background: #f2f6fc; }
.metric-card.active { background: var(--brand-weak); border-color: #a7bfdf; box-shadow: inset 0 -3px 0 var(--brand); }
.metric-card strong { font-weight: 750; }
.metric-card.active span, .metric-card.active strong { color: var(--brand); }
.exchange-rate-card, .order-line-search-toolbar {
  background: #fafbfC; border-color: #e4e7eb; border-radius: 5px;
}
.grid-filtered-summary {
  background: #eef3fb; border-color: #c8d8f0; color: #334155; border-radius: 5px;
}
.grid-filtered-summary b { color: var(--brand); }
.grid-filter-state { border-radius: 5px; color: var(--brand); background: #eef3fb; border-color: #c8d8f0; }
.list-pagination { color: var(--muted); }
.list-pagination select { border-color: var(--line); }
.excel-grid-wrap { border-color: #d8dde3 !important; box-shadow: none; }
.excel-grid th, .excel-grid td {
  border-right-color: #edf0f3 !important;
  border-bottom-color: #e3e7ec !important;
  font-variant-numeric: tabular-nums;
}
.excel-column-row th { background: #f0f2f4 !important; color: #727b87 !important; }
.excel-field-row th { background: #f5f7fa !important; color: #39424e !important; }
.excel-row-number, .excel-corner { background: #f0f2f4 !important; color: #727b87 !important; }
.excel-grid .grid-sort { color: #39424e !important; font-weight: 700; }
.excel-grid tbody tr:nth-child(even) td { background: #fafbfc; }
.excel-grid tbody tr:hover td { background: #eef3fb !important; }
.excel-grid tbody tr:hover .excel-row-number { background: #dce8f7 !important; }
.excel-grid td.readonly { color: #303b49; }
.excel-grid .grid-filter { border-radius: 4px !important; border-color: #cdd5df !important; }
.auto-filter-button.active {
  color: #b42318 !important; background: #fdf0ee !important;
  border-color: #d92d20 !important; box-shadow: inset 0 0 0 1px #d92d20;
}
.field-badge, .pill, .chip { border-radius: 5px; }
.field-badge.auto { color: #1f4b8e; background: #eef3fb; }
.pill.ok { color: #067647; background: #ebf9f1; }
.pill.warn { color: #9a5b0b; background: #fef7e8; }
.pill.danger { color: #b42318; background: #fdf0ee; }
.danger-btn { color: #b42318 !important; border-color: #f2b7b2 !important; background: #fff !important; }
.danger-btn:hover { background: #fdf0ee !important; }
.detail-tabs { border-bottom: 1px solid #e3e7ec; padding-bottom: 8px; }
.detail-tabs button { background: #fff; color: #565d66; border-color: transparent; }
.detail-tabs button.active { background: #eef3fb; color: #1f4b8e; border-color: #c8d8f0; }
.detail-section, .order-payment-line-context { background: #fff; border-color: #e4e7eb; border-radius: 0; }
.payment-auto-panel, .line-payment-control { background: #f8fafc; border-color: #e4e7eb; border-radius: 5px; }
.payment-row { background: #fff; border-color: #dce2e9; border-radius: 6px; }
.order-modal-panel, .confirm-modal { box-shadow: 0 16px 48px #18243426; }
.totals-bar span { background: #f8fafc; border-color: #e4e7eb; }
.manage-subnav a { color: #39424e; border-color: var(--line); }
#userRows { max-width: 100%; overflow-x: auto; }
.user-admin-table { min-width: 1200px; }
.user-admin-table td { vertical-align: middle; white-space: nowrap; }
.user-admin-table td:nth-child(4) { min-width: 220px; max-width: 300px; white-space: normal; overflow-wrap: break-word; }
.confirmation-issue-table { min-width: 1000px; }
.confirmation-issue-table th, .confirmation-issue-table td:nth-child(2) { white-space: nowrap; }
.confirm-modal { max-height: calc(100dvh - 48px); overflow-y: auto; }
.column-settings-popover { overflow-y: auto; max-width: calc(100vw - 48px); }
.auto-filter-popup { max-width: calc(100vw - 24px); }
@media (max-width: 760px) {
  .page-manage .top-workspace, .page-manage .quote-workspace,
  .page-manage .document-workspace, .page-manage .report-workspace { grid-template-columns: minmax(0, 1fr); }
  .page-manage .panel, .page-users .panel, .page-issues .panel { min-width: 0; }
  .page-issues .confirmation-issues-panel .document-toolbar { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .page-issues .document-toolbar input, .page-issues .document-toolbar select { min-width: 0; width: 100%; }
  .page-manage .panel-head, .page-users .panel-head, .page-issues .panel-head { flex-wrap: wrap; gap: 8px; }
  .page-manage .date-range { flex-wrap: wrap; }
  .order-modal-panel .detail-basic { grid-template-columns: minmax(0, 1fr); }
  .order-modal-panel .detail-basic > label { grid-column: 1 / -1; min-width: 0; }
  .order-modal-panel .detail-basic .wide-field input { min-width: 0; }
  .order-modal-panel .payment-grid { grid-template-columns: minmax(0, 1fr); }
  .order-modal-panel .payment-grid > label { min-width: 0; }
  .order-modal-panel .detail-basic .stage-checklist.grouped { grid-template-columns: minmax(0, 1fr); }
  .order-modal-panel .payment-auto-panel, .order-modal-panel .line-payment-control { flex-wrap: wrap; }
  .order-modal-panel .payment-auto-panel > button, .order-modal-panel .line-payment-control > button { white-space: nowrap; flex-shrink: 0; }
  .metric-card { min-width: 100px; flex-shrink: 0; }
  .metric-card span, .metric-card strong { white-space: nowrap; }
  .topbar { padding: 12px; }
  .topbar h1 { font-size: 18px; }
  .topnav { padding-top: 8px; padding-bottom: 5px; }
  .topnav a { min-height: 40px; display: inline-flex; align-items: center; }
  .auth-box { margin-top: 4px; }
  .grid-output-toolbar { flex-wrap: wrap; }
  .grid-filtered-summary { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .topnav a, .toast-notice { transition: none; }
}