/* Global black/white override: removes red accents from the UI without changing app logic. */

body.modern-ui {
    --brand-red: #000000;
    --brand-red-deep: #000000;
    --brand-red-soft: rgba(0, 0, 0, 0.14);
    --brand-red-glow: rgba(0, 0, 0, 0.3);
    --border-soft: rgba(0, 0, 0, 0.08);
    --surface-muted: rgba(0, 0, 0, 0.06);
    --shadow-dark: 0 24px 60px rgba(0, 0, 0, 0.08);
    --shadow-red: 0 18px 45px rgba(0, 0, 0, 0.14);
}

/* Keep accents neutral across pills, chips, helper surfaces */
body.modern-ui .eyebrow,
body.modern-ui .panel-badge,
body.modern-ui .app-nav-badge,
body.modern-ui .metric-pill,
body.modern-ui .step-item,
body.modern-ui .trust-card,
body.modern-ui .insight-card,
body.modern-ui .processing-indicator,
body.modern-ui .preview-empty-state,
body.modern-ui .app-footer-links > div,
body.modern-ui .timeout-alert,
body.modern-ui .alert-info,
body.modern-ui #inactivityWarningModal .alert-warning {
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: #ffffff !important;
    color: #000000 !important;
}

/* Remove red text/icon accents */
body.modern-ui .metric-pill .material-icons,
body.modern-ui .insight-card .material-icons,
body.modern-ui .preview-empty-state .material-icons,
body.modern-ui .processing-text,
body.modern-ui .error-message,
body.modern-ui .dtp table.dtp-picker-days tr > td > a,
body.modern-ui .dtp .dtp-picker-time > a,
body.modern-ui .dtp .dtp-picker-month a,
body.modern-ui .dtp .dtp-buttons .btn,
body.modern-ui .top-nav-signout {
    color: #000000 !important;
}

/* Date picker calendar numbers should be red */
body.modern-ui .dtp table.dtp-picker-days tr > td > a {
    color: #C21C1D !important;
}

/* Keep datepicker navigation arrows visible on dark header */
body.modern-ui .dtp .p10 > a,
body.modern-ui .dtp .p10 > a > .material-icons,
body.modern-ui .dtp .dtp-picker-month .p10 > a {
    color: #ffffff !important;
}

body.modern-ui .required-marker {
    color: #000000;
    font-weight: 800;
}

/* Requested action buttons use Zanaco red */
body.modern-ui #generateSttmButton,
body.modern-ui #viewButton,
body.modern-ui #submitButton,
body.modern-ui #accountForm button[type="reset"] {
    background: #C21C1D !important;
    color: #ffffff !important;
    border: 1px solid #C21C1D !important;
    box-shadow: 0 14px 30px rgba(194, 28, 29, 0.24) !important;
}

body.modern-ui #generateSttmButton:hover,
body.modern-ui #generateSttmButton:focus,
body.modern-ui #viewButton:hover,
body.modern-ui #viewButton:focus,
body.modern-ui #submitButton:hover,
body.modern-ui #submitButton:focus,
body.modern-ui #accountForm button[type="reset"]:hover,
body.modern-ui #accountForm button[type="reset"]:focus {
    background: #C21C1D !important;
    color: #ffffff !important;
    border-color: #C21C1D !important;
}

body.modern-ui #viewButton a {
    color: inherit !important;
}

body.modern-ui .statement-viewer-modal-card {
    width: 100%;
}

body.modern-ui .statement-viewer-body {
    padding: 0;
}

body.modern-ui .statement-viewer-frame-container {
    width: 100%;
    min-height: 70vh;
    background: #ffffff;
}

/* Modal actions and warning surfaces use brand red */
body.modern-ui .modal .btn,
body.modern-ui .modal .modal-footer .btn,
body.modern-ui .sweet-alert button,
body.modern-ui .sweet-alert button.confirm,
body.modern-ui .sweet-alert button.cancel {
    background: #C21C1D !important;
    color: #ffffff !important;
    border-color: #C21C1D !important;
}

body.modern-ui .modal .btn:hover,
body.modern-ui .modal .btn:focus,
body.modern-ui .modal .modal-footer .btn:hover,
body.modern-ui .modal .modal-footer .btn:focus,
body.modern-ui .sweet-alert button:hover,
body.modern-ui .sweet-alert button:focus {
    background: #C21C1D !important;
    color: #ffffff !important;
    border-color: #C21C1D !important;
}

body.modern-ui .modal .alert-warning,
body.modern-ui #inactivityWarningModal .alert-warning {
    border-color: #C21C1D !important;
    background: rgba(194, 28, 29, 0.08) !important;
    color: #C21C1D !important;
}

/* Primary action surfaces become black */
body.modern-ui .btn-auth,
body.modern-ui .step-number,
body.modern-ui .otp-icon-wrap,
body.modern-ui .modern-modal-header,
body.modern-ui .dtp > .dtp-content > .dtp-date-view > header.dtp-header,
body.modern-ui .dtp div.dtp-date,
body.modern-ui .dtp div.dtp-time,
body.modern-ui .dtp table.dtp-picker-days tr > td > a.selected,
body.modern-ui .dtp .dtp-picker-time > a.selected,
body.modern-ui .dtp .dtp-picker-month a.selected,
body.modern-ui .top-nav-signout:hover,
body.modern-ui .top-nav-signout:focus {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* Requested red accents for SweetAlert and date-time picker header/date surfaces */
body.modern-ui .sweet-alert button,
body.modern-ui .sweet-alert button.confirm,
body.modern-ui .sweet-alert button.cancel,
body.modern-ui .sweet-alert button:hover,
body.modern-ui .sweet-alert button:focus,
body.modern-ui .sweet-alert button:active {
    background: #C21C1D !important;
    color: #ffffff !important;
    border-color: #C21C1D !important;
}

body.modern-ui .dtp > .dtp-content > .dtp-date-view > header.dtp-header,
body.modern-ui .dtp div.dtp-date {
    background: #C21C1D !important;
    color: #ffffff !important;
    border-color: #C21C1D !important;
}

/* SweetAlert content and type icon accents are red */
body.modern-ui .sweet-alert h2,
body.modern-ui .sweet-alert p,
body.modern-ui .sweet-alert .sa-icon-text {
    color: #000000 !important;
}

/* OTP modal header should remain brand red */
body.modern-ui #otpVerificationModal .modern-modal-header {
    background: #C21C1D !important;
    color: #ffffff !important;
    border-color: #C21C1D !important;
}

body.modern-ui .sweet-alert .sa-icon.sa-success .sa-placeholder,
body.modern-ui .sweet-alert .sa-icon.sa-warning,
body.modern-ui .sweet-alert .sa-icon.sa-error,
body.modern-ui .sweet-alert .sa-icon.sa-info {
    border-color: #C21C1D !important;
    box-shadow: 0 0 0 4px rgba(194, 28, 29, 0.12) !important;
}

body.modern-ui .sweet-alert .sa-icon.sa-success .sa-line,
body.modern-ui .sweet-alert .sa-icon.sa-warning .sa-body,
body.modern-ui .sweet-alert .sa-icon.sa-warning .sa-dot,
body.modern-ui .sweet-alert .sa-icon.sa-error .sa-line,
body.modern-ui .sweet-alert .sa-icon.sa-info::before,
body.modern-ui .sweet-alert .sa-icon.sa-info::after {
    background-color: #C21C1D !important;
}

/* Keep neutral focus/validation state (no red) */
body.modern-ui .form-control:focus,
body.modern-ui .has-error .form-control,
body.modern-ui .form-control.is-invalid,
body.modern-ui .sweet-alert .sa-icon.sa-success .sa-placeholder,
body.modern-ui .sweet-alert .sa-icon.sa-warning,
body.modern-ui .sweet-alert .sa-icon.sa-error,
body.modern-ui .sweet-alert .sa-icon.sa-info {
    border-color: #C21C1D !important;
    box-shadow: 0 0 0 4px rgba(194, 28, 29, 0.12) !important;
}

body.modern-ui .sweet-alert .sa-icon.sa-success .sa-line,
body.modern-ui .sweet-alert .sa-icon.sa-warning .sa-body,
body.modern-ui .sweet-alert .sa-icon.sa-warning .sa-dot,
body.modern-ui .sweet-alert .sa-icon.sa-error .sa-line,
body.modern-ui .sweet-alert .sa-icon.sa-info::before,
body.modern-ui .sweet-alert .sa-icon.sa-info::after {
    background-color: #C21C1D !important;
}

/* Neutral spinner accents */
body.modern-ui .spinner {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: #000000;
}

/* Ensure red utility classes from base theme do not leak */
.col-red,
.red-text,
.bg-red,
.label-count {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Neutral navigation/button accents */
body.modern-ui .top-nav-link:hover,
body.modern-ui .top-nav-link:focus,
body.modern-ui .btn-view,
body.modern-ui .btn-view:hover,
body.modern-ui .btn-view:focus,
body.modern-ui .top-nav-signout {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    background: #ffffff !important;
}

/* Remove red-tinted shadows */
body.modern-ui .btn-auth,
body.modern-ui .btn-auth:hover,
body.modern-ui .btn-auth:focus,
body.modern-ui .top-nav-signout,
body.modern-ui .top-nav-signout:hover,
body.modern-ui .top-nav-signout:focus,
body.modern-ui .step-item,
body.modern-ui .experience-panel,
body.modern-ui .detail-panel,
body.modern-ui .statement-hero,
body.modern-ui .app-footer-card {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10) !important;
}