/**
 * Common styles for modals / popups
 * Shared design tokens used by addon-popup.css and resend-reminder-popup.css
 *
 * Popup-specific CSS:
 * - addon-popup.css: Additional Add-On Features popup
 * - resend-reminder-popup.css: Resend Appointment Reminder popup
 * - open-flag-popup-modal.css: Open Flag / help confirmation modal (#openFlagPopupModal)
 * - session-timeout-popup.css: Client session timeout modal (#sessionTimeOutPopup)
 * - questionnaire-submit-popup.css: Questionnaire submit confirmation (#submitConfirmationModal)
 *
 * This file also defines a global [data-theme="dark"] rule for .modal-content .modal-footer so footers
 * stay dark when other stylesheets set light backgrounds on *-popup-footer / .resend-reminder-popup-footer.
 */

/* Shared design tokens – border radius, shadows, colors used across both popups */
:root {
    --popup-border-radius: 12px;
    --popup-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
    --popup-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --popup-header-padding: 1rem 1.25rem;
    --popup-body-bg: #eef1f5;
    --popup-header-border: #e9ecef;
    --popup-card-border: #e5e9ee;
    --popup-icon-gradient: linear-gradient(135deg, #1a47e8 0%, #012cae 100%);
    --popup-btn-gradient: linear-gradient(135deg, #1a47e8 0%, #012cae 100%);
    --popup-icon-gradient-checkbox-style: linear-gradient(135deg, #80a3cf 0%, #2c5282 100%);
    /* Back button (Close / Back to Add-ons) */
    --popup-back-btn-color: #012cae;
    --popup-back-btn-bg: #e8ecfc;
    --popup-back-btn-border: #b8c6f0;
    --popup-back-btn-hover-bg: #d4dcf7;
    --popup-back-btn-hover-color: #011e8a;
}

/* Dark theme – overrides for [data-theme="dark"] */
[data-theme="dark"] {
    --popup-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.08);
    --popup-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --popup-body-bg: #1a1b1e;
    --popup-header-border: #2a2a2a;
    --popup-card-border: #2a2a2a;
    --popup-back-btn-color: #6b9aff;
    --popup-back-btn-bg: #23272b;
    --popup-back-btn-border: #3a3f45;
    --popup-back-btn-hover-bg: #2c3138;
    --popup-back-btn-hover-color: #8bafff;
}

/*
 * Dark theme — modal footers (global)
 * Many popup CSS files set .resend-reminder-popup-footer / *-popup-footer to background:#fff with
 * multi-class selectors that tie or beat [data-theme="dark"] .modal-footer in new/style.css.
 * Some shells wrap body+footer in <form>, so the footer is not a direct child of .modal-content.
 * !important wins over those light rules when they omit !important (e.g. doc-upload-popup.css).
 * Per-popup [data-theme="dark"] * .foo-footer rules with equal/higher specificity still override later in the cascade.
 */
[data-theme="dark"] .modal-content .modal-footer,
[data-theme="dark"] .modal-content > form > .modal-footer,
[data-theme="dark"] #facebox .content .modal-content .modal-footer,
[data-theme="dark"] #bootstrapModalContent .modal-content .modal-footer {
    background: #202020 !important;
    background-color: #202020 !important;
    border-top-color: var(--popup-header-border) !important;
}