/* Approved pages use green; disapproved and declined pages use red.
   Matches queue modifiers (--approved / --disapproved / -declined) and dedicated page roots.
   Manager pending armed responses reuse the declined list shell with .page-cr-armed-pending (keep orange). */

[class*="--approved"],
.page-dispatcher-po-trip-expense-approved,
.page-dispatcher-po-trip-expense-detail,
.page-theme-approved {
    --po-status: var(--vs-success);
}

[class*="page-"][class*="-disapproved"],
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending),
.page-theme-disapproved {
    --po-status: var(--vs-danger);
}

[class*="--approved"] .mgr-trip-req-queue-hero,
[class*="--approved"] .mgr-brk-req-queue-hero,
[class*="--approved"] .mgr-detail-hero,
[class*="--approved"] .mgr-po-req-hero,
[class*="--approved"] .dsp-po-te-approved-hero,
.page-dispatcher-po-trip-expense-approved .dsp-po-te-approved-hero,
.page-dispatcher-po-trip-expense-detail .dsp-po-te-detail-hero-card,
.page-theme-approved .mgr-detail-hero,
.page-theme-approved .mgr-po-req-hero {
    border-color: color-mix(in srgb, var(--vs-success) 26%, var(--vs-border)) !important;
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, var(--vs-success) 14%, transparent), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, var(--vs-success) 8%, var(--vs-bg-card)), var(--vs-bg-card)) !important;
}

[class*="page-"][class*="-disapproved"] .mgr-trip-req-queue-hero,
[class*="page-"][class*="-disapproved"] .mgr-brk-req-queue-hero,
[class*="page-"][class*="-disapproved"] .mgr-detail-hero,
[class*="page-"][class*="-disapproved"] .mgr-po-req-hero,
[class*="-disapproved"] .mgr-trip-req-queue-hero,
[class*="-disapproved"] .mgr-brk-req-queue-hero,
[class*="-disapproved"] .mgr-detail-hero,
[class*="-disapproved"] .mgr-po-req-hero,
.page-dispatcher-po-trip-expense-disapproved .dsp-po-te-disapproved-hero,
.page-dispatcher-po-trip-expense-disapproved-detail .dsp-po-te-detail-hero-card,
.page-theme-disapproved .mgr-detail-hero,
.page-theme-disapproved .mgr-po-req-hero,
.page-theme-disapproved .mgr-contract-hero,
.page-theme-disapproved .cr-armed-declined-hero,
.page-theme-disapproved .mgr-breakdowns-hero,
.page-theme-disapproved .mgr-tc-hero,
.page-theme-disapproved .mgr-armed-declined-detail-hero,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-contract-hero,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .cr-armed-declined-hero,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-breakdowns-hero,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-tc-hero,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-armed-declined-detail-hero,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-detail-hero {
    border-color: color-mix(in srgb, var(--vs-danger) 26%, var(--vs-border)) !important;
    background:
        radial-gradient(ellipse 120% 90% at 100% 0%, color-mix(in srgb, var(--vs-danger) 12%, transparent), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, var(--vs-danger) 7%, var(--vs-bg-card)), var(--vs-bg-card)) !important;
}

[class*="--approved"] .mgr-trip-req-queue-hero__icon,
[class*="--approved"] .mgr-brk-req-queue-hero__icon,
[class*="--approved"] .mgr-detail-hero__badge,
[class*="--approved"] .mgr-po-req-hero__badge,
[class*="--approved"] .dsp-po-te-approved-hero__icon,
.page-dispatcher-po-trip-expense-detail .dsp-po-te-detail-hero-card__icon,
.page-theme-approved .mgr-detail-hero__badge,
.page-theme-approved .mgr-po-req-hero__badge {
    background: color-mix(in srgb, var(--vs-success) 16%, var(--vs-bg-muted)) !important;
    color: var(--vs-success) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-success) 22%, transparent);
}

[class*="page-"][class*="-disapproved"] .mgr-trip-req-queue-hero__icon,
[class*="page-"][class*="-disapproved"] .mgr-brk-req-queue-hero__icon,
[class*="page-"][class*="-disapproved"] .mgr-detail-hero__badge,
[class*="page-"][class*="-disapproved"] .mgr-po-req-hero__badge,
[class*="-disapproved"] .mgr-trip-req-queue-hero__icon,
[class*="-disapproved"] .mgr-brk-req-queue-hero__icon,
[class*="-disapproved"] .mgr-detail-hero__badge,
[class*="-disapproved"] .mgr-po-req-hero__badge,
.page-theme-disapproved .mgr-detail-hero__badge,
.page-theme-disapproved .mgr-po-req-hero__badge,
.page-theme-disapproved .cr-armed-declined-hero__icon,
.page-theme-disapproved .mgr-tc-hero__icon,
.page-theme-disapproved .mgr-armed-declined-detail-hero__badge,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .cr-armed-declined-hero__icon,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-tc-hero__icon,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-detail-hero__badge,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-armed-declined-detail-hero__badge {
    background: color-mix(in srgb, var(--vs-danger) 16%, var(--vs-bg-muted)) !important;
    color: var(--vs-danger) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vs-danger) 22%, transparent);
}

[class*="--approved"] .dsp-po-queue-eyebrow,
[class*="--approved"] .mgr-detail-hero__eyebrow,
[class*="--approved"] .cr-po-panel__eyebrow,
[class*="--approved"] .dsp-po-te-approved-hero__eyebrow,
.page-dispatcher-po-trip-expense-detail .dsp-po-te-detail-hero-card__eyebrow,
.page-theme-approved .mgr-detail-hero__eyebrow {
    color: var(--vs-success) !important;
}

[class*="page-"][class*="-disapproved"] .dsp-po-queue-eyebrow,
[class*="page-"][class*="-disapproved"] .mgr-detail-hero__eyebrow,
[class*="page-"][class*="-disapproved"] .cr-po-panel__eyebrow,
[class*="-disapproved"] .dsp-po-queue-eyebrow,
[class*="-disapproved"] .mgr-detail-hero__eyebrow,
.page-theme-disapproved .mgr-detail-hero__eyebrow,
.page-theme-disapproved .cr-armed-declined-panel__eyebrow,
.page-theme-disapproved .mgr-armed-declined-detail-hero__eyebrow,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-detail-hero__eyebrow,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .cr-armed-declined-panel__eyebrow,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-armed-declined-detail-hero__eyebrow {
    color: var(--vs-danger) !important;
}

[class*="--approved"] .mgr-trip-req-queue-hero__stat,
[class*="--approved"] .mgr-brk-req-queue-hero__stat,
[class*="--approved"] .mgr-po-req-stat--accent,
[class*="--approved"] .mgr-contracts-hero__stat,
.page-dispatcher-po-trip-expense-approved .dsp-po-te-approved-hero__stat,
.page-theme-approved .mgr-po-req-stat--accent {
    border-color: color-mix(in srgb, var(--vs-success) 30%, var(--vs-border)) !important;
    background: color-mix(in srgb, var(--vs-success) 8%, var(--vs-surface)) !important;
}

[class*="page-"][class*="-disapproved"] .mgr-trip-req-queue-hero__stat,
[class*="page-"][class*="-disapproved"] .mgr-brk-req-queue-hero__stat,
[class*="page-"][class*="-disapproved"] .mgr-po-req-stat--accent,
[class*="-disapproved"] .mgr-trip-req-queue-hero__stat,
[class*="-disapproved"] .mgr-brk-req-queue-hero__stat,
[class*="-disapproved"] .mgr-po-req-stat--accent,
.page-theme-disapproved .mgr-po-req-stat--accent,
.page-theme-disapproved .mgr-contracts-hero__stat,
.page-theme-disapproved .cr-armed-declined-hero__stat,
.page-theme-disapproved .mgr-trip-detail-stat--accent,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-contracts-hero__stat,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .cr-armed-declined-hero__stat,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-trip-detail-stat--accent {
    border-color: color-mix(in srgb, var(--vs-danger) 30%, var(--vs-border)) !important;
    background: color-mix(in srgb, var(--vs-danger) 8%, var(--vs-surface)) !important;
}

[class*="--approved"] .dsp-po-req-no,
[class*="--approved"] .mgr-po-req-no,
[class*="--approved"] .mgr-trip-req-trucks {
    background: color-mix(in srgb, var(--vs-success) 10%, var(--vs-bg-muted)) !important;
    color: var(--vs-success) !important;
}

[class*="page-"][class*="-disapproved"] .mgr-trip-req-queue-hero__stat strong,
[class*="page-"][class*="-disapproved"] .mgr-brk-req-queue-hero__stat strong,
[class*="page-"][class*="-disapproved"] .mgr-contracts-hero__stat--declined strong,
[class*="-disapproved"] .mgr-trip-req-queue-hero__stat strong,
.page-theme-disapproved .mgr-contracts-hero__stat strong,
.page-theme-disapproved .cr-armed-declined-hero__stat strong,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-contracts-hero__stat strong,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .cr-armed-declined-hero__stat strong {
    color: var(--vs-danger) !important;
}

[class*="--approved"] .mgr-trip-req-queue-panel,
[class*="--approved"] .cr-po-queue-panel,
[class*="--approved"] .mgr-contracts-panel,
.page-dispatcher-po-trip-expense-approved .dsp-po-te-approved-panel {
    border-color: color-mix(in srgb, var(--vs-success) 16%, var(--vs-border));
}

[class*="page-"][class*="-disapproved"] .mgr-trip-req-queue-panel,
[class*="page-"][class*="-disapproved"] .cr-po-queue-panel,
[class*="-disapproved"] .mgr-trip-req-queue-panel,
[class*="-disapproved"] .cr-po-queue-panel,
.page-theme-disapproved .cr-armed-declined-panel,
.page-theme-disapproved .mgr-contracts-panel,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .cr-armed-declined-panel,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-contracts-panel {
    border-color: color-mix(in srgb, var(--vs-danger) 16%, var(--vs-border));
}

[class*="--approved"] table thead th {
    background: color-mix(in srgb, var(--vs-success) 6%, var(--vs-bg-muted)) !important;
}

[class*="page-"][class*="-disapproved"] table thead th,
[class*="-disapproved"] table thead th,
.page-theme-disapproved table thead th,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) table thead th {
    background: color-mix(in srgb, var(--vs-danger) 6%, var(--vs-bg-muted)) !important;
}

[class*="--approved"] .mgr-contracts-table--enhanced tbody tr.is-clickable:hover,
[class*="--approved"] .mgr-contracts-table--enhanced tbody tr.is-ready-to-close:hover {
    background: color-mix(in srgb, var(--vs-success) 5%, var(--vs-bg-card));
    box-shadow: inset 3px 0 0 var(--vs-success);
}

[class*="page-"][class*="-disapproved"] .mgr-contracts-table--enhanced tbody tr.is-disapproved:hover,
[class*="-disapproved"] .mgr-contracts-table--enhanced tbody tr.is-clickable:hover,
.page-theme-disapproved .mgr-contracts-table--enhanced tbody tr.is-clickable:hover,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .mgr-contracts-table--enhanced tbody tr.is-clickable:hover {
    background: color-mix(in srgb, var(--vs-danger) 5%, var(--vs-bg-card));
    box-shadow: inset 3px 0 0 var(--vs-danger);
}

[class*="--approved"] .vs-btn-primary,
.page-dispatcher-po-trip-expense-detail .vs-btn-primary,
.page-theme-approved .vs-btn-primary {
    background: var(--vs-success);
    border-color: var(--vs-success);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--vs-success) 28%, transparent);
}

[class*="--approved"] .vs-btn-primary:hover:not(:disabled),
.page-dispatcher-po-trip-expense-detail .vs-btn-primary:hover:not(:disabled),
.page-theme-approved .vs-btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--vs-success) 86%, #000);
}

[class*="page-"][class*="-disapproved"] .vs-btn-primary,
[class*="-disapproved"] .vs-btn-primary,
.page-theme-disapproved .vs-btn-primary,
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .vs-btn-primary {
    background: var(--vs-danger);
    border-color: var(--vs-danger);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--vs-danger) 28%, transparent);
}

[class*="page-"][class*="-disapproved"] .vs-btn-primary:hover:not(:disabled),
[class*="-disapproved"] .vs-btn-primary:hover:not(:disabled),
.page-theme-disapproved .vs-btn-primary:hover:not(:disabled),
[class*="page-"][class*="-declined"]:not(.page-cr-armed-pending) .vs-btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--vs-danger) 86%, #000);
}

[class*="--approved"] .dsp-po-steps,
.page-dispatcher-po-trip-expense-approved .dsp-po-te-approved-steps,
.page-dispatcher-po-trip-expense-detail .dsp-po-te-approved-steps {
    border-color: color-mix(in srgb, var(--vs-success) 24%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-success) 6%, var(--vs-bg-card));
}

[class*="page-"][class*="-disapproved"] .dsp-po-steps,
[class*="-disapproved"] .dsp-po-steps,
.page-dispatcher-po-trip-expense-disapproved .dsp-po-te-disapproved-steps {
    border-color: color-mix(in srgb, var(--vs-danger) 24%, var(--vs-border));
    background: color-mix(in srgb, var(--vs-danger) 6%, var(--vs-bg-card));
}

/* Hero abbreviation badges (TR, DR, BD, …) — plain text, no colored tile. */
.vs-app [class*="hero__icon"] {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    color: var(--vs-text-muted) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}