/* user_plans-dark-theme.css - Dark theme styles specific to VPN user plans page */

[data-theme="dark"] .feature-card {
    background-color: var(--widget-bg);
    box-shadow: var(--secondary-shadow);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .feature-icon {
    color: var(--link-color);
}

[data-theme="dark"] .feature-title {
    color: var(--text-dark);
}

[data-theme="dark"] .feature-description {
    color: var(--text-muted);
}

[data-theme="dark"] .plan-features li {
    color: var(--text-muted);
}

[data-theme="dark"] .plan-features li:before {
    color: var(--link-color);
}

[data-theme="dark"] .plan-price {
    color: var(--text-dark);
}

/* Modal styling */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-white);
    border-color: var(--border-light);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-light);
}

/* Payment history table specific styling */
[data-theme="dark"] #paymentHistoryTable td,
[data-theme="dark"] #paymentHistoryTable th,
[data-theme="dark"] #subscriptionDetails .card-text {
    color: #ffffff !important; /* Use white text color for better visibility */
}

/* Make sure modal text is also visible */
[data-theme="dark"] .modal-body {
    color: var(--text-dark);
}

[data-theme="dark"] #subscriptionDetails .card {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Ensure subscription details are visible */
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text {
    color: var(--text-dark);
}

/* Make subscription details more visible */
[data-theme="dark"] #subscriptionDetails .badge {
    color: #ffffff;
}

/* Dashboard and card styling */
[data-theme="dark"] .dashboard-card .card {
    background-color: var(--widget-bg);
    border-color: var(--border-light);
}

[data-theme="dark"] .stat-card {
    background-color: var(--input-bg);
    color: var(--text-dark);
}

[data-theme="dark"] .stat-icon {
    color: var(--link-color);
}

/* Status lights retain their colors for semantic meaning */
[data-theme="dark"] .status-light.bg-success {
    background-color: var(--success-color);
}

[data-theme="dark"] .status-light.bg-warning {
    background-color: var(--warning-color);
}

[data-theme="dark"] .status-light.bg-secondary {
    background-color: var(--secondary-button);
}

[data-theme="dark"] .status-light.bg-danger {
    background-color: var(--danger-color);
}

/* Table styling */
[data-theme="dark"] .table {
    color: var(--text-dark);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .table thead th {
    border-bottom-color: var(--border-light);
    color: var(--text-muted);
}

[data-theme="dark"] .table td {
    border-color: var(--border-light);
}

/* Badge styling */
[data-theme="dark"] .badge.bg-success {
    background-color: var(--success-color) !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: var(--danger-color) !important;
}

[data-theme="dark"] .badge.bg-warning {
    background-color: var(--warning-color) !important;
}

[data-theme="dark"] .badge.bg-info {
    background-color: var(--info-color) !important;
}

/* Alert styling */
[data-theme="dark"] .alert-success {
    background-color: rgba(56, 161, 105, 0.2);
    border-color: rgba(56, 161, 105, 0.3);
    color: var(--text-dark);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(66, 153, 225, 0.2);
    border-color: rgba(66, 153, 225, 0.3);
    color: var(--text-dark);
}

/* WireGuard info section */
[data-theme="dark"] .card-header {
    border-bottom-color: var(--border-light);
}

[data-theme="dark"] .card-body h5,
[data-theme="dark"] .card-body h6 {
    color: var(--text-dark);
}

[data-theme="dark"] .card-body p,
[data-theme="dark"] .card-body li {
    color: var(--text-muted);
}

/* Progress bar */
[data-theme="dark"] .progress {
    background-color: var(--bg-light);
}

/* Focus on accessibility in dark mode */
[data-theme="dark"] .btn-outline-primary {
    color: var(--link-color);
    border-color: var(--link-color);
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--primary-button);
    border-color: var(--primary-button);
    color: #ffffff;
}

/* Metrics animation */
[data-theme="dark"] #connectionMetrics {
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
}

/* PayPal button container */
[data-theme="dark"] #paypal-button-container {
    background-color: var(--widget-bg);
    padding: 10px;
    border-radius: var(--border-radius);
}

/* Small text adjustments */
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* Spinner visibility */
[data-theme="dark"] .spinner-border.text-primary {
    color: var(--link-color) !important;
}