/* ===================================================================
 * styles-subscription-dashboard.css
 * Purpose: Light-mode toast styling + subscription dashboard dark-mode fixes (badges, progress bars, modals)
 * Extracted from styles.css during the Apr 2026 split (task #23).
 * =================================================================== */
/* ===============================================
   LIGHT MODE TOAST STYLING
   =============================================== */

/* Light mode: Toast text should be dark for readability - override text-white class */
[data-theme="light"] .toast,
[data-theme="light"] .toast.text-white,
[data-theme="light"] .toast .toast-body,
[data-theme="light"] .alert,
[data-theme="light"] .alert-error,
[data-theme="light"] .alert-success,
[data-theme="light"] .alert-warning,
[data-theme="light"] .alert-info {
    color: #000000 !important;
}

/* Light mode: Toast close button should be dark */
[data-theme="light"] .toast .btn-close,
[data-theme="light"] .alert .btn-close {
    filter: invert(1) !important;
}

/* Light mode: Specific error toast styling */
[data-theme="light"] .toast.bg-danger,
[data-theme="light"] .toast.bg-danger.text-white,
[data-theme="light"] .toast.error,
[data-theme="light"] .alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

/* Light mode: Success toast styling */
[data-theme="light"] .toast.bg-success,
[data-theme="light"] .toast.bg-success.text-white,
[data-theme="light"] .toast.success,
[data-theme="light"] .alert-success {
    background-color: #d1e7dd !important;
    border-color: #badbcc !important;
    color: #0f5132 !important;
}

/* Light mode: Warning toast styling */
[data-theme="light"] .toast.bg-warning,
[data-theme="light"] .toast.bg-warning.text-white,
[data-theme="light"] .toast.warning,
[data-theme="light"] .alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffecb5 !important;
    color: #664d03 !important;
}

/* Light mode: Info toast styling */
[data-theme="light"] .toast.bg-info,
[data-theme="light"] .toast.bg-info.text-white,
[data-theme="light"] .toast.info,
[data-theme="light"] .alert-info {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #055160 !important;
}
/* ===== SUBSCRIPTION DASHBOARD - DARK MODE FIXES ===== */
/* Fix text visibility in dark mode */
[data-theme="dark"] .card {
    background-color: transparent !important;
}

[data-theme="dark"] .card {
    color: #ffffff !important;
    border-color: #555555 !important;
}

[data-theme="dark"] .card-header {
    color: #ffffff !important;
    border-bottom-color: #555555 !important;
}

[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .card label,
[data-theme="dark"] .card .fw-bold {
    color: #ffffff !important;
}

[data-theme="dark"] .text-muted {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .text-center small {
    color: #b0b0b0 !important;
}

/* Fix text color for Current Plan section */
[data-theme="dark"] .card-body .fs-5 {
    color: #ffffff !important;
}

/* Fix text in Usage section */
[data-theme="dark"] .card-body span {
    color: #ffffff !important;
}

/* Fix progress bar label text */
/* REMOVED - Use the complete progress bar styling at the end of the file instead */

/* Add-on Policy Box - Dark Mode */
[data-theme="dark"] .card-body > div > div {
    background-color: transparent !important;
    border-color: #d97706 !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .card-body > div > div small {
    color: #fbbf24 !important;
}

[data-theme="dark"] .card-body > div > div strong {
    color: #fcd34d !important;
}

/* Modal styling for dark mode */
[data-theme="dark"] .modal-content {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

[data-theme="dark"] .modal-header {
    background-color: #1a1a1a !important;
    border-bottom-color: #555555 !important;
}

[data-theme="dark"] .modal-body {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-footer {
    background-color: #1a1a1a !important;
    border-top-color: #555555 !important;
}

[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

[data-theme="dark"] .modal-body h5,
[data-theme="dark"] .modal-title {
    color: #ffffff !important;
}

/* Warning alert in modal */
[data-theme="dark"] .alert-warning {
    background-color: #5a5204 !important;
    border-color: #8a7a04 !important;
    color: #ffd966 !important;
}

[data-theme="dark"] .alert-warning strong {
    color: #ffffff !important;
}

[data-theme="dark"] .alert-warning li {
    color: #ffd966 !important;
}

[data-theme="dark"] .modal-body p {
    color: #b0b0b0 !important;
}

/* Card border in modal */
[data-theme="dark"] .modal-body .card {
    background-color: #2d2d2d !important;
    border-color: #555555 !important;
}

[data-theme="dark"] .modal-body .card h6 {
    color: #ffffff !important;
}

[data-theme="dark"] .modal-body .card small {
    color: #b0b0b0 !important;
}

/* Button styling in dark mode */
[data-theme="dark"] .btn-outline-secondary {
    color: #b0b0b0 !important;
    border-color: #555555 !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #555555 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-warning {
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}

[data-theme="dark"] .btn-outline-warning:hover {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

/* ===== DARK MODE BADGE STYLING ===== */
/* Keep badges visible with their colors in dark mode */
[data-theme="dark"] .badge {
    background-color: inherit !important;
    color: inherit !important;
}

[data-theme="dark"] .bg-primary {
    background-color: #007bff !important;
}

[data-theme="dark"] .bg-success {
    background-color: #28a745 !important;
}

[data-theme="dark"] .badge.bg-primary {
    background-color: #007bff !important;
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

/* ===== PROGRESS BAR - DARK MODE STYLING ===== */
/* Fix progress bar visibility in dark mode */
[data-theme="dark"] .progress {
    background-color: #92400e !important;
    border-radius: 0.375rem;
}

[data-theme="dark"] .progress-bar {
    background-color: #10b981 !important;
    background-image: none !important;
}

[data-theme="dark"] .progress-bar.bg-success {
    background-color: #10b981 !important;
}

[data-theme="dark"] .progress-bar.bg-warning {
    background-color: #f59e0b !important;
}

[data-theme="dark"] .progress-bar.bg-danger {
    background-color: #ef4444 !important;
}

/* ===== FORCE PROGRESS BAR VISIBILITY IN DARK MODE ===== */
/* Explicitly ensure progress bar is visible in dark mode */
[data-theme="dark"] .progress {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 8px !important;
    height: auto !important;
}

[data-theme="dark"] .progress-bar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 8px !important;
}

/* Ensure text-muted in progress section is visible */
[data-theme="dark"] div.mt-3 .text-muted {
    color: #b0b0b0 !important;
    display: block !important;
    visibility: visible !important;
}