/*
 * Approval reference theme
 * Paint-only overrides for approval and decision surfaces across AQ360 ERP.
 * Deliberately excludes layout, spacing, sizing, and positioning properties.
 */

:root {
  --approval-ref-canvas: #f8fafc;
  --approval-ref-surface: #ffffff;
  --approval-ref-surface-soft: #fbfdff;
  --approval-ref-ink: #1c2c43;
  --approval-ref-muted: #6a7b91;
  --approval-ref-line: #d9e3ef;
  --approval-ref-line-soft: #e9eef5;
  --approval-ref-blue: #286fe8;
  --approval-ref-blue-soft: #f3f7ff;
  --approval-ref-blue-line: #bdd4ff;
  --approval-ref-green: #3d9b63;
  --approval-ref-green-soft: #f1faf5;
  --approval-ref-green-line: #c9e8d5;
  --approval-ref-red: #df4447;
  --approval-ref-red-soft: #fff5f5;
  --approval-ref-red-line: #ffcaca;
  --approval-ref-amber: #a46b16;
  --approval-ref-amber-soft: #fffaf0;
  --approval-ref-amber-line: #f2dfb5;
  --approval-ref-shadow: 0 12px 30px rgba(35, 57, 85, .055);
  --approval-ref-shadow-soft: 0 5px 18px rgba(35, 57, 85, .045);
}

/* Main Approval Center */
html body[data-view="approvals"] .view {
  background: var(--approval-ref-canvas) !important;
  color: var(--approval-ref-ink) !important;
}

html body[data-view="approvals"] .approvals-controlbar,
html body[data-view="approvals"] .approvals-modern .approval-section {
  border-color: var(--approval-ref-line) !important;
  background: linear-gradient(145deg, var(--approval-ref-surface), var(--approval-ref-surface-soft)) !important;
  box-shadow: var(--approval-ref-shadow) !important;
}

html body[data-view="approvals"] .approvals-controlbar {
  border-top-color: var(--approval-ref-blue-line) !important;
}

html body[data-view="approvals"] .approvals-controlbar > div:first-child > span {
  color: var(--approval-ref-blue) !important;
}

html body[data-view="approvals"] .approvals-controlbar p,
html body[data-view="approvals"] .approval-section-head p,
html body[data-view="approvals"] .approval-empty span {
  color: var(--approval-ref-muted) !important;
}

html body[data-view="approvals"] .approvals-controlbar-status {
  border-color: var(--approval-ref-line) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: var(--approval-ref-shadow-soft) !important;
}

html body[data-view="approvals"] .approvals-controlbar-status b,
html body[data-view="approvals"] .approval-section-head h3,
html body[data-view="approvals"] .approval-empty strong {
  color: var(--approval-ref-ink) !important;
}

html body[data-view="approvals"] .approvals-controlbar-status i {
  background: var(--approval-ref-green) !important;
  box-shadow: 0 0 0 4px rgba(61, 155, 99, .11) !important;
}

html body[data-view="approvals"] .approvals-controlbar-status i.warn {
  background: var(--approval-ref-amber) !important;
  box-shadow: 0 0 0 4px rgba(164, 107, 22, .11) !important;
}

html body[data-view="approvals"] .approval-clear-strip {
  border-color: var(--approval-ref-green-line) !important;
  background: linear-gradient(135deg, #f7fcf9, var(--approval-ref-green-soft)) !important;
  box-shadow: 0 8px 22px rgba(61, 155, 99, .05) !important;
}

html body[data-view="approvals"] .approval-clear-strip > i,
html body[data-view="approvals"] .approval-empty:not(.neutral) i {
  background: var(--approval-ref-green-soft) !important;
  color: var(--approval-ref-green) !important;
  box-shadow: inset 0 0 0 1px var(--approval-ref-green-line) !important;
}

html body[data-view="approvals"] .approval-clear-strip b {
  color: #2c6545 !important;
}

html body[data-view="approvals"] .approval-clear-strip small {
  color: #6d8879 !important;
}

html body[data-view="approvals"] .approvals-modern .approval-section-head {
  border-bottom-color: var(--approval-ref-line-soft) !important;
  background: linear-gradient(180deg, #ffffff, #fbfcfe) !important;
}

html body[data-view="approvals"] .approval-section-head > span {
  background: var(--approval-ref-blue-soft) !important;
  color: var(--approval-ref-blue) !important;
  box-shadow: inset 0 0 0 1px var(--approval-ref-blue-line) !important;
}

html body[data-view="approvals"] :is(.approval-table, .recent-decision-table) {
  background: var(--approval-ref-surface) !important;
}

html body[data-view="approvals"] :is(.approval-table, .recent-decision-table) th {
  border-color: var(--approval-ref-line) !important;
  background: #f7f9fc !important;
  color: var(--approval-ref-muted) !important;
}

html body[data-view="approvals"] :is(.approval-table, .recent-decision-table) td {
  border-color: var(--approval-ref-line-soft) !important;
  background: var(--approval-ref-surface) !important;
  color: var(--approval-ref-ink) !important;
}

html body[data-view="approvals"] :is(.approval-table, .recent-decision-table) tbody tr:hover td {
  background: #f8fbff !important;
}

/* Semantic decision controls: Edit/Open = blue, Approve = green, Reject = red. */
html body[data-view="approvals"] .approval-decision-actions .ghost-button:not(.danger-button),
html body button[data-action="edit-approval-request"] {
  border-color: var(--approval-ref-blue-line) !important;
  background: linear-gradient(135deg, #ffffff, var(--approval-ref-blue-soft)) !important;
  color: var(--approval-ref-blue) !important;
  box-shadow: 0 6px 16px rgba(40, 111, 232, .06) !important;
}

html body[data-view="approvals"] .approval-decision-actions .button,
html body button[data-action^="approve-"] {
  border-color: var(--approval-ref-green-line) !important;
  background: linear-gradient(135deg, #ffffff, var(--approval-ref-green-soft)) !important;
  color: var(--approval-ref-green) !important;
  box-shadow: 0 6px 16px rgba(61, 155, 99, .07) !important;
}

html body[data-view="approvals"] .approval-decision-actions .danger-button,
html body button[data-action^="reject-"] {
  border-color: var(--approval-ref-red-line) !important;
  background: linear-gradient(135deg, #ffffff, var(--approval-ref-red-soft)) !important;
  color: var(--approval-ref-red) !important;
  box-shadow: 0 6px 16px rgba(223, 68, 71, .07) !important;
}

html body[data-view="approvals"] .approval-decision-actions .ghost-button:not(.danger-button):hover,
html body button[data-action="edit-approval-request"]:hover {
  border-color: #98bcff !important;
  background: #edf4ff !important;
  color: #1f61ce !important;
}

html body[data-view="approvals"] .approval-decision-actions .button:hover,
html body button[data-action^="approve-"]:hover {
  border-color: #a9d8bb !important;
  background: #e9f7ef !important;
  color: #318451 !important;
}

html body[data-view="approvals"] .approval-decision-actions .danger-button:hover,
html body button[data-action^="reject-"]:hover {
  border-color: #f7aaaa !important;
  background: #ffeded !important;
  color: #c9373b !important;
}

html body[data-view="approvals"] .status.ok,
html body .modal[data-mode="approval-details"] .status.ok {
  border-color: var(--approval-ref-green-line) !important;
  background: var(--approval-ref-green-soft) !important;
  color: var(--approval-ref-green) !important;
}

html body[data-view="approvals"] .status.warn,
html body .modal[data-mode="approval-details"] .status.warn {
  border-color: var(--approval-ref-amber-line) !important;
  background: var(--approval-ref-amber-soft) !important;
  color: var(--approval-ref-amber) !important;
}

html body[data-view="approvals"] .status.danger,
html body .modal[data-mode="approval-details"] .status.danger {
  border-color: var(--approval-ref-red-line) !important;
  background: var(--approval-ref-red-soft) !important;
  color: var(--approval-ref-red) !important;
}

/* Shared approval detail modal used by vacation, purchase, finance, payroll, and ID requests. */
html body .modal[data-mode="approval-details"] .modal-panel {
  border-color: var(--approval-ref-line) !important;
  background: var(--approval-ref-surface) !important;
  box-shadow: 0 24px 68px rgba(28, 44, 67, .16) !important;
}

html body .modal[data-mode="approval-details"] :is(.modal-header, .modal-body) {
  border-color: var(--approval-ref-line) !important;
  background: var(--approval-ref-surface) !important;
}

html body .modal[data-mode="approval-details"] :is(.modal-header h2, .modal-header h3, .employee-popup-title h3, .form-section, .detail-item strong, .approval-route-card-head h4) {
  color: var(--approval-ref-ink) !important;
}

html body .modal[data-mode="approval-details"] :is(.detail-item span, .approval-route-card-head p, .approval-route-table th, .approval-route-table td > small, .approval-route-date, .approval-route-time) {
  color: var(--approval-ref-muted) !important;
}

html body .modal[data-mode="approval-details"] :is(.detail-grid, .detail-item, .form-section, .approval-route-card, .approval-route-table-wrap, .approval-signature-card, .empty.card) {
  border-color: var(--approval-ref-line) !important;
  background: linear-gradient(145deg, var(--approval-ref-surface), var(--approval-ref-surface-soft)) !important;
  box-shadow: var(--approval-ref-shadow-soft) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-card-head,
html body .modal[data-mode="approval-details"] .approval-route-table td {
  border-color: var(--approval-ref-line-soft) !important;
  background: var(--approval-ref-surface) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table th {
  border-color: var(--approval-ref-line) !important;
  background: #f7f9fc !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr.current td {
  background: var(--approval-ref-blue-soft) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-marker {
  border-color: var(--approval-ref-line) !important;
  background: #ffffff !important;
  color: var(--approval-ref-muted) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr.complete .approval-route-marker {
  border-color: var(--approval-ref-green-line) !important;
  background: var(--approval-ref-green-soft) !important;
  color: var(--approval-ref-green) !important;
  box-shadow: 0 5px 14px rgba(61, 155, 99, .09) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr.current .approval-route-marker {
  border-color: var(--approval-ref-blue-line) !important;
  background: var(--approval-ref-blue-soft) !important;
  color: var(--approval-ref-blue) !important;
  box-shadow: 0 5px 14px rgba(40, 111, 232, .09) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr.complete .approval-route-state {
  background: var(--approval-ref-green-soft) !important;
  color: var(--approval-ref-green) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr.current .approval-route-state {
  background: var(--approval-ref-blue-soft) !important;
  color: var(--approval-ref-blue) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr:is(.rejected, .returned) .approval-route-state {
  background: var(--approval-ref-red-soft) !important;
  color: var(--approval-ref-red) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr.complete .approval-route-action {
  color: var(--approval-ref-green) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr.current .approval-route-action {
  color: var(--approval-ref-blue) !important;
}

/* Legacy approval-flow cards are still used by selected request types. */
html body .modal[data-mode="approval-details"] .approval-flow::before {
  background: var(--approval-ref-line) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-marker {
  border-color: var(--approval-ref-line) !important;
  background: var(--approval-ref-surface) !important;
  color: var(--approval-ref-muted) !important;
  box-shadow: 0 0 0 6px var(--approval-ref-surface) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-card {
  border-color: var(--approval-ref-line) !important;
  background: linear-gradient(145deg, var(--approval-ref-surface), var(--approval-ref-surface-soft)) !important;
  color: var(--approval-ref-ink) !important;
  box-shadow: var(--approval-ref-shadow-soft) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-card :is(span, small) {
  color: var(--approval-ref-muted) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-card strong {
  color: var(--approval-ref-ink) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-step.current .approval-flow-marker {
  border-color: var(--approval-ref-blue-line) !important;
  background: var(--approval-ref-blue-soft) !important;
  color: var(--approval-ref-blue) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-step.current .approval-flow-card {
  border-color: var(--approval-ref-blue-line) !important;
  background: var(--approval-ref-blue-soft) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-step.complete .approval-flow-marker {
  border-color: var(--approval-ref-green-line) !important;
  background: var(--approval-ref-green-soft) !important;
  color: var(--approval-ref-green) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-step:is(.rejected, .returned) .approval-flow-marker {
  border-color: var(--approval-ref-red-line) !important;
  background: var(--approval-ref-red-soft) !important;
  color: var(--approval-ref-red) !important;
}

html body .modal[data-mode="approval-details"] .approval-flow-step:is(.rejected, .returned) .approval-flow-card {
  border-color: var(--approval-ref-red-line) !important;
  background: var(--approval-ref-red-soft) !important;
}

html body .modal[data-mode="approval-details"] :is(.approval-signature-header, .electronic-approval-line) {
  border-color: var(--approval-ref-line) !important;
  color: var(--approval-ref-muted) !important;
}

html body .modal[data-mode="approval-details"] .approval-signature-header :is(strong, b) {
  color: var(--approval-ref-ink) !important;
}

html body .modal[data-mode="approval-details"] :is(.electronic-approval-seal, .approved-card-seal) {
  border-color: var(--approval-ref-green-line) !important;
  background: linear-gradient(145deg, #ffffff, var(--approval-ref-green-soft)) !important;
  color: var(--approval-ref-ink) !important;
  box-shadow: 0 8px 22px rgba(61, 155, 99, .07) !important;
}

html body .modal[data-mode="approval-details"] :is(.electronic-stamp, .approved-card-title, .approved-card-title strong, .approved-card-foot b) {
  border-color: var(--approval-ref-green) !important;
  color: var(--approval-ref-green) !important;
}

html body .modal[data-mode="approval-details"] .approved-card-check {
  background: var(--approval-ref-green) !important;
  color: #ffffff !important;
}

html body .modal[data-mode="approval-details"] .approved-card-line,
html body .modal[data-mode="approval-details"] .approved-card-title::after {
  background: var(--approval-ref-green-line) !important;
}

/* Approval surfaces embedded in dashboards and finance screens. */
html body :is(.ops-approval-panel, .exec-approvals, .gm-board-decisions, .gm-clean-decisions, .due-customer-approval) {
  border-color: var(--approval-ref-line) !important;
  background: linear-gradient(145deg, var(--approval-ref-surface), var(--approval-ref-surface-soft)) !important;
  color: var(--approval-ref-ink) !important;
  box-shadow: var(--approval-ref-shadow) !important;
}

html body :is(.ops-approval-panel, .exec-approvals, .gm-board-decisions, .gm-clean-decisions, .due-customer-approval) :is(header, [class$="-head"]) {
  border-color: var(--approval-ref-line-soft) !important;
  background: transparent !important;
}

html body :is(.ops-approval-panel, .exec-approvals, .gm-board-decisions, .gm-clean-decisions, .due-customer-approval) :is(h2, h3, strong, b) {
  color: var(--approval-ref-ink) !important;
}

html body :is(.ops-approval-panel, .exec-approvals, .gm-board-decisions, .gm-clean-decisions, .due-customer-approval) :is(p, small, span) {
  border-color: var(--approval-ref-line) !important;
  color: var(--approval-ref-muted) !important;
}

html body :is(.aq-approval, .erp-ref-approval-row, .finance-request-approval-card) {
  border-color: var(--approval-ref-line) !important;
  background: linear-gradient(135deg, #ffffff, var(--approval-ref-surface-soft)) !important;
  color: var(--approval-ref-ink) !important;
  box-shadow: var(--approval-ref-shadow-soft) !important;
}

html body :is(.aq-approval, .erp-ref-approval-row, .finance-request-approval-card):hover {
  border-color: var(--approval-ref-blue-line) !important;
  background: var(--approval-ref-blue-soft) !important;
}

html body .finance-request-approval-icon {
  border-color: var(--approval-ref-blue-line) !important;
  background: var(--approval-ref-blue-soft) !important;
  color: var(--approval-ref-blue) !important;
}

html body :is(.finance-request-approval-main, .finance-request-approval-step) b {
  color: var(--approval-ref-ink) !important;
}

html body :is(.finance-request-approval-main small, .finance-request-approval-step i, .finance-request-approval-card time, .finance-request-approval-open) {
  color: var(--approval-ref-muted) !important;
}

html body .finance-request-approval-open {
  color: var(--approval-ref-blue) !important;
}

/* Older role-specific dashboards render the same queue with different shells. */
html body :is(
  .gm-panel-approvals,
  .model-pending,
  .erp-card.erp-command-panel:has(> .erp-section-head button[data-action="show-gm-approvals-report"]),
  .screen-panel:has(button[data-action="show-gm-approvals-report"]),
  .aq-pending,
  .erp-ref-pending,
  .finance-overview-panel.finance-decisions
) {
  border-color: var(--approval-ref-line) !important;
  background: linear-gradient(145deg, var(--approval-ref-surface), var(--approval-ref-surface-soft)) !important;
  color: var(--approval-ref-ink) !important;
  box-shadow: var(--approval-ref-shadow) !important;
}

html body :is(
  .gm-panel-approvals,
  .model-pending,
  .erp-card.erp-command-panel:has(> .erp-section-head button[data-action="show-gm-approvals-report"]),
  .screen-panel:has(button[data-action="show-gm-approvals-report"]),
  .aq-pending,
  .erp-ref-pending,
  .finance-overview-panel.finance-decisions
) :is([class$="-head"], header) {
  border-color: var(--approval-ref-line-soft) !important;
  background: transparent !important;
}

html body :is(
  .gm-panel-approvals,
  .model-pending,
  .erp-card.erp-command-panel:has(> .erp-section-head button[data-action="show-gm-approvals-report"]),
  .screen-panel:has(button[data-action="show-gm-approvals-report"]),
  .aq-pending,
  .erp-ref-pending,
  .finance-overview-panel.finance-decisions
) :is(h2, h3, strong, b) {
  color: var(--approval-ref-ink) !important;
}

html body :is(
  .gm-panel-approvals,
  .model-pending,
  .erp-card.erp-command-panel:has(> .erp-section-head button[data-action="show-gm-approvals-report"]),
  .screen-panel:has(button[data-action="show-gm-approvals-report"]),
  .aq-pending,
  .erp-ref-pending,
  .finance-overview-panel.finance-decisions
) :is(p, small) {
  color: var(--approval-ref-muted) !important;
}

html body :is(.gm-board-decisions-body, .exec-approval-list, .finance-decision-list) > button,
html body .ops-approval-panel .ops-list > button {
  border-color: var(--approval-ref-line-soft) !important;
  background: var(--approval-ref-surface) !important;
  color: var(--approval-ref-ink) !important;
}

html body :is(.gm-board-decisions-body, .exec-approval-list, .finance-decision-list) > button:hover,
html body .ops-approval-panel .ops-list > button:hover {
  border-color: var(--approval-ref-blue-line) !important;
  background: var(--approval-ref-blue-soft) !important;
}

html body .finance-decisions .finance-overview-heading > span {
  border-color: var(--approval-ref-red-line) !important;
  background: var(--approval-ref-red-soft) !important;
  color: var(--approval-ref-red) !important;
}

html body .finance-decision-list :is(small, em) {
  color: var(--approval-ref-muted) !important;
}

html body .finance-decision-list em.urgent {
  color: var(--approval-ref-red) !important;
}

html body .erp-card.erp-command-panel:has(> .erp-section-head button[data-action="show-gm-approvals-report"]) :is(.erp-table-wrap, .erp-table) {
  border-color: var(--approval-ref-line) !important;
  background: var(--approval-ref-surface) !important;
}

html body .erp-card.erp-command-panel:has(> .erp-section-head button[data-action="show-gm-approvals-report"]) .erp-table th {
  border-color: var(--approval-ref-line) !important;
  background: #f7f9fc !important;
  color: var(--approval-ref-muted) !important;
}

html body .erp-card.erp-command-panel:has(> .erp-section-head button[data-action="show-gm-approvals-report"]) .erp-table td,
html body .screen-panel:has(button[data-action="show-gm-approvals-report"]) .screen-list-row {
  border-color: var(--approval-ref-line-soft) !important;
  background: var(--approval-ref-surface) !important;
  color: var(--approval-ref-ink) !important;
}

html body .erp-card.erp-command-panel:has(> .erp-section-head button[data-action="show-gm-approvals-report"]) .erp-table tr:hover td,
html body .screen-panel:has(button[data-action="show-gm-approvals-report"]) .screen-list-row:hover {
  border-color: var(--approval-ref-blue-line) !important;
  background: var(--approval-ref-blue-soft) !important;
}

html body .due-approved-label {
  color: var(--approval-ref-green) !important;
}

/* Remaining approval-specific commands outside the central decision table. */
html body button[data-action="sign-finance-document"] {
  border-color: var(--approval-ref-green-line) !important;
  background: linear-gradient(135deg, #ffffff, var(--approval-ref-green-soft)) !important;
  color: var(--approval-ref-green) !important;
  box-shadow: 0 6px 16px rgba(61, 155, 99, .07) !important;
}

html body button[data-action="submit-payroll-approval"],
html body button[data-action="print-approval"],
html body button[data-action="show-gm-approvals-report"],
html body button[data-action="open-due-customer-approvals"],
html body button[data-action="route-finance-letter-approval"],
html body button[data-action="open-finance-approvals-queue"] {
  border-color: var(--approval-ref-blue-line) !important;
  background: linear-gradient(135deg, #ffffff, var(--approval-ref-blue-soft)) !important;
  color: var(--approval-ref-blue) !important;
  box-shadow: 0 6px 16px rgba(40, 111, 232, .06) !important;
}

html body button[data-action="sign-finance-document"]:hover {
  border-color: #a9d8bb !important;
  background: #e9f7ef !important;
  color: #318451 !important;
}

html body button[data-action="submit-payroll-approval"]:hover,
html body button[data-action="print-approval"]:hover,
html body button[data-action="show-gm-approvals-report"]:hover,
html body button[data-action="open-due-customer-approvals"]:hover,
html body button[data-action="route-finance-letter-approval"]:hover,
html body button[data-action="open-finance-approvals-queue"]:hover {
  border-color: #98bcff !important;
  background: #edf4ff !important;
  color: #1f61ce !important;
}

/*
 * Shared approval-detail layout guard.
 *
 * Purchase, leave, payroll and other approval records all use this same modal.
 * Keep its content intrinsically sized: a table row must never grow to fill the
 * remaining viewport and the print-only approval sheet must never enter the
 * on-screen modal.  These rules deliberately live in the final approval
 * stylesheet so a future page-level style cannot move or stretch one view.
 */
html body .modal[data-mode="approval-details"] .modal-panel {
  display: flex !important;
  flex-direction: column !important;
  width: min(960px, calc(100vw - 32px)) !important;
  max-width: 960px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 32px) !important;
}

html body .modal[data-mode="approval-details"] .modal-body {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 120px) !important;
  overflow: auto !important;
}

html body .modal[data-mode="approval-details"] .approval-screen-content {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  align-items: start !important;
  min-height: 0 !important;
}

html body .modal[data-mode="approval-details"] .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .modal[data-mode="approval-details"] :is(.approval-route-card, .approval-route-table-wrap) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table {
  display: table !important;
  height: auto !important;
  min-height: 0 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table :is(thead, tbody) {
  display: table-row-group !important;
  height: auto !important;
  min-height: 0 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table thead {
  display: table-header-group !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table tr {
  display: table-row !important;
  height: auto !important;
  min-height: 0 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table :is(th, td) {
  display: table-cell !important;
  height: auto !important;
  min-height: 0 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table th {
  height: 42px !important;
}

html body .modal[data-mode="approval-details"] .approval-route-table td {
  height: 68px !important;
}

html body:not(.printing-approval) .modal[data-mode="approval-details"] .approval-print-sheet {
  display: none !important;
}

@media (max-width: 700px) {
  html body .modal[data-mode="approval-details"] .modal-panel {
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }

  html body .modal[data-mode="approval-details"] .detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Personal request register: keep the requester controls inside the table. */
html body[data-view="vacations"] .my-requests-card .table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}

html body[data-view="vacations"] .my-requests-table {
  width: 100% !important;
  min-width: 900px !important;
  table-layout: fixed !important;
}

html body[data-view="vacations"] .my-requests-table th:nth-child(1) { width: 9% !important; }
html body[data-view="vacations"] .my-requests-table th:nth-child(2) { width: 16% !important; }
html body[data-view="vacations"] .my-requests-table th:nth-child(3) { width: 30% !important; }
html body[data-view="vacations"] .my-requests-table th:nth-child(4) { width: 12% !important; }
html body[data-view="vacations"] .my-requests-table th:nth-child(5) { width: 10% !important; }
html body[data-view="vacations"] .my-requests-table th:nth-child(6) { width: 23% !important; }

html body[data-view="vacations"] .my-requests-table td:not(:last-child) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-view="vacations"] .my-requests-table td:last-child {
  white-space: normal !important;
}

html body[data-view="vacations"] .my-requests-table .table-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

/* Route data is a grid, not a browser table: it cannot inherit global table or SVG sizing. */
html body .modal[data-mode="approval-details"] .approval-route-grid {
  display: grid !important;
  min-width: 760px !important;
  background: var(--approval-ref-surface) !important;
}

html body .modal[data-mode="approval-details"] :is(.approval-route-grid-head, .approval-route-grid-row) {
  display: grid !important;
  grid-template-columns: 62px minmax(175px, 1.25fr) minmax(130px, .9fr) minmax(180px, 1fr) minmax(160px, 1fr) !important;
  align-items: center !important;
  min-height: 68px !important;
  height: auto !important;
}

html body .modal[data-mode="approval-details"] .approval-route-grid-head {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-bottom: 1px solid var(--approval-ref-line) !important;
  background: #f7f9fc !important;
  color: var(--approval-ref-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

html body .modal[data-mode="approval-details"] .approval-route-grid-row {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--approval-ref-line-soft) !important;
  background: var(--approval-ref-surface) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-grid-row:last-child {
  border-bottom: 0 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-person,
html body .modal[data-mode="approval-details"] .approval-route-datetime {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-person strong,
html body .modal[data-mode="approval-details"] .approval-route-datetime b {
  overflow: hidden !important;
  color: var(--approval-ref-ink) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .modal[data-mode="approval-details"] :is(.approval-route-person small, .approval-route-datetime small) {
  color: var(--approval-ref-muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-grid-row .approval-route-marker {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid var(--approval-ref-line) !important;
  border-radius: 50% !important;
  color: var(--approval-ref-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-grid-row .approval-route-state {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: var(--approval-ref-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

html body .modal[data-mode="approval-details"] .approval-route-grid-row.complete :is(.approval-route-marker, .approval-route-state) {
  border-color: var(--approval-ref-green-line) !important;
  background: var(--approval-ref-green-soft) !important;
  color: var(--approval-ref-green) !important;
}

html body .modal[data-mode="approval-details"] .approval-route-grid-row.current :is(.approval-route-marker, .approval-route-state) {
  border-color: var(--approval-ref-blue-line) !important;
  background: var(--approval-ref-blue-soft) !important;
  color: var(--approval-ref-blue) !important;
}

/* Keyboard focus remains visible in every semantic state. */
html body[data-view="approvals"] .approval-decision-actions button:focus-visible,
html body button[data-action^="approve-"]:focus-visible,
html body button[data-action^="reject-"]:focus-visible,
html body button[data-action="edit-approval-request"]:focus-visible,
html body button[data-action="sign-finance-document"]:focus-visible,
html body button[data-action="submit-payroll-approval"]:focus-visible,
html body button[data-action="print-approval"]:focus-visible,
html body button[data-action="show-gm-approvals-report"]:focus-visible,
html body button[data-action="open-due-customer-approvals"]:focus-visible,
html body button[data-action="route-finance-letter-approval"]:focus-visible,
html body button[data-action="open-finance-approvals-queue"]:focus-visible {
  outline-color: var(--approval-ref-blue) !important;
  box-shadow: 0 0 0 3px rgba(40, 111, 232, .16) !important;
}