/* RAWA — correção de superfícies portaled/modal
 * Os modais são anexados diretamente ao <body>, fora de #app-view.
 * As variáveis --v3-* eram definidas apenas dentro de #app-view;
 * por isso backgrounds como var(--v3-card) podiam computar como transparentes.
 * Esta camada leva os tokens de tema para o backdrop e força superfícies opacas.
 */

html[data-theme="dark"] .modal-backdrop {
    --v3-card: #0f2035;
    --v3-card-2: #0c1b2e;
    --v3-card-soft: #12243a;
    --v3-text: #f5f8fc;
    --v3-text-2: #c8d5e6;
    --v3-muted: #8296b1;
    --v3-border: rgba(148, 163, 184, .14);
    --v3-input: #09182a;
}

html[data-theme="light"] .modal-backdrop {
    --v3-card: #ffffff;
    --v3-card-2: #f8fafc;
    --v3-card-soft: #f1f5f9;
    --v3-text: #142033;
    --v3-text-2: #334155;
    --v3-muted: #738096;
    --v3-border: #e2e8f0;
    --v3-input: #ffffff;
}

.modal-backdrop {
    background: rgba(15, 23, 42, .48) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

html[data-theme="dark"] .modal-backdrop {
    background: rgba(1, 7, 17, .68) !important;
}

.modal-backdrop > .modal,
.modal-backdrop > .modal-card,
.modal-backdrop > .modal-content,
.modal-backdrop .modal,
.modal-backdrop .modal-card,
.modal-backdrop .modal-content {
    opacity: 1 !important;
    background-color: var(--v3-card) !important;
    background-image: none !important;
    color: var(--v3-text) !important;
    border-color: var(--v3-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate;
}

html[data-theme="light"] .modal-backdrop > .modal,
html[data-theme="light"] .modal-backdrop > .modal-card,
html[data-theme="light"] .modal-backdrop > .modal-content,
html[data-theme="light"] .modal-backdrop .modal,
html[data-theme="light"] .modal-backdrop .modal-card,
html[data-theme="light"] .modal-backdrop .modal-content {
    background: #ffffff !important;
    box-shadow: 0 26px 72px rgba(15, 23, 42, .20) !important;
}

html[data-theme="dark"] .modal-backdrop > .modal,
html[data-theme="dark"] .modal-backdrop > .modal-card,
html[data-theme="dark"] .modal-backdrop > .modal-content,
html[data-theme="dark"] .modal-backdrop .modal,
html[data-theme="dark"] .modal-backdrop .modal-card,
html[data-theme="dark"] .modal-backdrop .modal-content {
    background: #0f2035 !important;
    box-shadow: 0 30px 88px rgba(0, 0, 0, .42) !important;
}

.modal-backdrop .modal-header,
.modal-backdrop .modal-body,
.modal-backdrop .modal-footer {
    opacity: 1 !important;
    color: var(--v3-text) !important;
}

.modal-backdrop .modal-header {
    background: var(--v3-card) !important;
    border-bottom-color: var(--v3-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal-backdrop .modal-body {
    background: var(--v3-card) !important;
}

.modal-backdrop .modal-footer,
.modal-backdrop .modal-actions,
.modal-backdrop .os-flow-actions {
    background: var(--v3-card) !important;
    border-color: var(--v3-border) !important;
}

.modal-backdrop .field > span,
.modal-backdrop .field > label,
.modal-backdrop .modal-header h2,
.modal-backdrop .modal-header h3 {
    color: var(--v3-text) !important;
}

.modal-backdrop .modal-header p,
.modal-backdrop .field small,
.modal-backdrop .field .hint {
    color: var(--v3-muted) !important;
}

.modal-backdrop input:not([type="checkbox"]):not([type="radio"]),
.modal-backdrop select,
.modal-backdrop textarea,
.modal-backdrop .rawa-select-trigger {
    opacity: 1 !important;
    background-color: var(--v3-input) !important;
    background-image: none !important;
    color: var(--v3-text) !important;
    border-color: var(--v3-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal-backdrop input::placeholder,
.modal-backdrop textarea::placeholder {
    color: var(--v3-muted) !important;
    opacity: .82 !important;
}

.modal-backdrop .modal-close {
    opacity: 1 !important;
    background: var(--v3-card-2) !important;
    color: var(--v3-muted) !important;
    border-color: var(--v3-border) !important;
}

/* Cards internos do modal também permanecem opacos. */
.modal-backdrop .os-summary-card,
.modal-backdrop .os-total-card,
.modal-backdrop .os-item,
.modal-backdrop .finance-summary,
.modal-backdrop .profile-card,
.modal-backdrop .audit-info-card,
.modal-backdrop .purchase-item-card,
.modal-backdrop .purchase-receipt-card,
.modal-backdrop .supplier-link-item,
.modal-backdrop .supplier-purchase-item,
.modal-backdrop .estoque-history-item,
.modal-backdrop .reposicao-summary > div {
    background: var(--v3-card-2) !important;
    border-color: var(--v3-border) !important;
    color: var(--v3-text-2) !important;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal-backdrop .modal,
    .modal-backdrop .modal-card,
    .modal-backdrop .modal-content {
        animation: none !important;
        transition: none !important;
    }
}