/*
 * Monolog green surfaces
 * -----------------------
 * This file intentionally loads after page-scoped CSS. It replaces legacy
 * Vibesroom blue on customer utilities without changing semantic warning,
 * error, success, or payment state colours.
 */
:root {
    --ml-surface-forest: #173f2c;
    --ml-surface-forest-strong: #0f3021;
    --ml-surface-forest-deep: #071b12;
    --ml-surface-green: #216447;
    --ml-surface-green-bright: #2c7b58;
    --ml-surface-mist: #eaf3ee;
    --ml-surface-mist-soft: #f5f9f6;
    --ml-surface-line: #bad2c4;
    --ml-surface-ink: #07150f;
}

/* Photo picker: standalone page, scoped through its unique shell. */
body:has(.demo-shell) {
    --blue: var(--ml-surface-green);
}

body:has(.demo-shell) .detail-header.photo-picker-header {
    background-color: var(--ml-surface-forest-deep) !important;
    background-image: linear-gradient(145deg, #020906 0%, #0c291c 60%, #1a5038 100%) !important;
}

body:has(.demo-shell) .photo-picker-header-glow {
    background: #267955 !important;
    opacity: .72;
}

body:has(.demo-shell) .section-badge,
body:has(.demo-shell) .photo-view-switch button.is-active,
body:has(.demo-shell) .package-tools .chip.complete,
body:has(.demo-shell) .package-tools .chip.complete.active,
body:has(.demo-shell) .upsell-hero small,
body:has(.demo-shell) .upsell-summary span,
body:has(.demo-shell) .upsell-breakdown strong,
body:has(.demo-shell) .image-modal-pack-chip.is-selected span,
body:has(.demo-shell) .raw-unlock-amount,
body:has(.demo-shell) .extra-unlock-price strong,
body:has(.demo-shell) .frameboard-variant-note strong {
    color: var(--ml-surface-green) !important;
}

body:has(.demo-shell) .section-badge {
    border-color: rgba(116, 179, 146, .32) !important;
    background: rgba(33, 100, 71, .18) !important;
    color: #9bcbb0 !important;
}

body:has(.demo-shell) .all-photo-option.is-assigned,
body:has(.demo-shell) .chip.complete,
body:has(.demo-shell) .frame-color-action,
body:has(.demo-shell) .image-modal-pack-chip.is-selected,
body:has(.demo-shell) .photo-picker-download-clauses details,
body:has(.demo-shell) .selection-required-action,
body:has(.demo-shell) .checkout-choice-actions .is-primary,
body:has(.demo-shell) .selection-complete-actions .is-primary,
body:has(.demo-shell) .raw-unlock-open,
body:has(.demo-shell) .frameboard-variant-option.is-selected {
    border-color: var(--ml-surface-green) !important;
}

body:has(.demo-shell) .all-photo-select,
body:has(.demo-shell) .all-photo-option.is-assigned .all-photo-select,
body:has(.demo-shell) .all-file-edit-notice-icon,
body:has(.demo-shell) .bucket-photo-frame-success-icon,
body:has(.demo-shell) .frame-color-action,
body:has(.demo-shell) .primary,
body:has(.demo-shell) .photo-picker-download-clauses summary > span,
body:has(.demo-shell) .photo-picker-ai-help,
body:has(.demo-shell) .selection-required-action,
body:has(.demo-shell) .checkout-choice-actions .is-primary,
body:has(.demo-shell) .selection-complete-icon,
body:has(.demo-shell) .selection-complete-actions .is-primary,
body:has(.demo-shell) .raw-unlock-open {
    background: var(--ml-surface-green) !important;
    color: #fff !important;
}

body:has(.demo-shell) .photo-picker-ai-help:hover,
body:has(.demo-shell) .primary:hover,
body:has(.demo-shell) .selection-required-action:hover,
body:has(.demo-shell) .selection-complete-actions .is-primary:hover {
    background: var(--ml-surface-forest-strong) !important;
}

body:has(.demo-shell) .package-tools .chip.is-blend,
body:has(.demo-shell) .frame-attachment-guide,
body:has(.demo-shell) .frame-color-panel.is-selected,
body:has(.demo-shell) .image-modal-pack-chip.is-selected,
body:has(.demo-shell) .photo-picker-flow-notice,
body:has(.demo-shell) .frameboard-variant-option.is-selected {
    border-color: var(--ml-surface-line) !important;
    background: var(--ml-surface-mist) !important;
    color: var(--ml-surface-forest) !important;
}

body:has(.demo-shell) .package-tools .chip.is-blend {
    border-left-color: var(--ml-surface-green) !important;
}

body:has(.demo-shell) .package-tools .chip.active {
    border-bottom-color: var(--ml-surface-green) !important;
}

body:has(.demo-shell) .frame-addon-status {
    border-color: rgba(33, 100, 71, .3) !important;
    background: rgba(33, 100, 71, .1) !important;
    color: var(--ml-surface-green) !important;
}

body:has(.demo-shell) .photo-picker-download-clauses summary::after,
body:has(.demo-shell) .photo-picker-download-clauses p button,
body:has(.demo-shell) .photo-picker-download-clauses p a,
body:has(.demo-shell) .photo-picker-help-card > span:last-child {
    color: var(--ml-surface-green) !important;
}

body:has(.demo-shell) .photo-picker-help-card {
    border-color: #d4e3db !important;
    background: var(--ml-surface-mist-soft) !important;
}

body:has(.demo-shell) .photo-picker-help-card:hover {
    border-color: var(--ml-surface-green) !important;
    background: var(--ml-surface-mist) !important;
}

body:has(.demo-shell) :is(button, a, input, select, textarea):focus-visible {
    outline-color: var(--ml-surface-green) !important;
}

body:has(.demo-shell) .vr-ai-chat__toggle,
body:has(.demo-shell) .vr-ai-chat__send,
body:has(.demo-shell) .vr-ai-chat__bubble--user {
    background: var(--ml-surface-green) !important;
}

/* Customer order tracking. Blue is a legacy brand tone here, not a status. */
body:has(.customer-order-tabs) .customer-order-tab.is-active {
    border-color: var(--ml-surface-green) !important;
    color: var(--ml-surface-green) !important;
}

body:has(.customer-order-tabs) .customer-order-tabs-container::after,
body:has(.customer-order-tabs) .customer-tracking-step.is-done .customer-tracking-dot,
body:has(.customer-order-tabs) .customer-tracking-step.is-current .customer-tracking-dot,
body:has(.customer-order-tabs) .primary-action-button,
body:has(.customer-order-tabs) .client-download-button,
body:has(.customer-order-tabs) .customer-help-button {
    border-color: var(--ml-surface-green) !important;
    background: var(--ml-surface-green) !important;
    color: #fff !important;
}

body:has(.customer-order-tabs) .primary-action-button:hover,
body:has(.customer-order-tabs) .client-download-button:hover,
body:has(.customer-order-tabs) .customer-help-button:hover {
    background: var(--ml-surface-forest-strong) !important;
}

body:has(.customer-order-tabs) .tracking-job-chip.is-active,
body:has(.customer-order-tabs) .tracking-job-chip.tone-blue:not(.is-active) {
    border-color: var(--ml-surface-green) !important;
    color: var(--ml-surface-green) !important;
}

body:has(.customer-order-tabs) .customer-help-kicker,
body:has(.customer-order-tabs) .admin-help-link {
    color: var(--ml-surface-green) !important;
}

body:has(.customer-order-tabs) .tracking-action-layout.tone-blue,
body:has(.customer-order-tabs) .tracking-status-hero.status-processing,
body:has(.customer-order-tabs) .tracking-status-hero.status-waiting {
    --status: var(--ml-surface-green) !important;
    --status-soft: var(--ml-surface-mist) !important;
    --status-border: var(--ml-surface-line) !important;
}

body:has(.customer-order-tabs) .payment-received-card,
body:has(.customer-order-tabs) .addon-sync-note,
body:has(.customer-order-tabs) .tracking-estimate-chip {
    border-color: var(--ml-surface-line) !important;
    background: var(--ml-surface-mist-soft) !important;
    color: var(--ml-surface-forest) !important;
}

/* Photo download / selection utility. Keep red, amber and true status colours. */
body:has(.photo-download-page) {
    --vr-primary-solid: var(--ml-surface-green) !important;
}

body:has(.photo-download-page) .photo-download-home-bg {
    background-color: var(--ml-surface-forest-deep) !important;
}

body:has(.photo-download-page) .photo-download-page {
    background: #07150f !important;
}

body:has(.photo-download-page) :is(
    .figma-main-download-button,
    .file-access-action-button,
    .figma-order-addon-checkout,
    .photo-selection-primary,
    .photo-selection-submit,
    .photo-selection-hero-upgrade,
    .photo-selection-labs-quick-card.is-primary,
    .photo-selection-labs-cta,
    .photo-selection-modal-primary
) {
    border-color: var(--ml-surface-green) !important;
    background: var(--ml-surface-green) !important;
    color: #fff !important;
}

body:has(.photo-download-page) :is(
    .figma-main-download-button,
    .file-access-action-button,
    .figma-order-addon-checkout,
    .photo-selection-primary,
    .photo-selection-submit,
    .photo-selection-hero-upgrade
):hover {
    background: var(--ml-surface-forest-strong) !important;
}

body:has(.photo-download-page) :is(
    .photo-selection-output-card.is-selected,
    .photo-selection-card.is-selected,
    .photo-selection-labs-orientation button.is-active,
    .photo-selection-labs-quick-card.is-primary,
    .figma-status:not(.is-ready):not(.is-error),
    .file-access-status:not(.is-ready):not(.is-error)
) {
    border-color: var(--ml-surface-line) !important;
    background: var(--ml-surface-mist) !important;
    color: var(--ml-surface-green) !important;
}

body:has(.photo-download-page) :is(
    .photo-selection-kicker,
    .figma-eyebrow,
    .file-access-kicker,
    .photo-selection-tracking-link,
    .photo-selection-back,
    .photo-selection-labs-skip,
    .figma-download-help-card em
) {
    color: #74b392 !important;
}

body:has(.photo-download-page) :is(input[type="radio"], input[type="checkbox"]) {
    accent-color: var(--ml-surface-green) !important;
}

body:has(.photo-download-page) :is(button, a, input, select, textarea):focus-visible {
    outline-color: #74b392 !important;
}

body:has(.photo-download-page) .photo-download-empty-state,
body:has(.photo-download-page) .figma-download-hero,
body:has(.photo-download-page) .figma-main-download,
body:has(.photo-download-page) .figma-file-card,
body:has(.photo-download-page) .file-access-summary-card {
    border-color: rgba(116, 179, 146, .35) !important;
    background: rgba(6, 27, 18, .86) !important;
}

body:has(.photo-download-page) .photo-download-empty-state-icon {
    background: rgba(44, 123, 88, .22) !important;
    color: #8fc5a8 !important;
}

body:has(.photo-download-page) .photo-download-empty-state-actions a {
    border-color: rgba(116, 179, 146, .42) !important;
}

body:has(.photo-download-page) .photo-download-empty-state-actions a:first-child {
    border-color: var(--ml-surface-green) !important;
    background: var(--ml-surface-green) !important;
}

/* Error fallback used by download links whose gallery is not ready yet. */
body:has(.error-page) .error-page .btn-primary {
    background: var(--ml-surface-green) !important;
    box-shadow: 0 10px 24px rgba(15, 48, 33, .2) !important;
}

body:has(.error-page) .error-page .btn-primary:hover {
    background: var(--ml-surface-forest-strong) !important;
}

body:has(.error-page) .error-page :is(a, button):focus-visible {
    outline-color: var(--ml-surface-green) !important;
}