/*
Custom CSS for subscription-based UI elements
*/

/* Subscription tier badges */
.subscription-tier-badge .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}

/* Tier restriction styling */
.tier-restricted,
.feature-restricted,
.usage-restricted {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.tier-restricted:hover::after,
.feature-restricted:hover::after,
.usage-restricted:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 0.25rem;
}

/* Feature restriction notice */
.feature-restriction-notice {
    border-left: 4px solid #0d6efd;
    background: linear-gradient(90deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.05) 100%);
}

.feature-restriction-notice .alert-heading {
    color: #0d6efd;
    font-weight: 600;
}

/* Usage meters */
.usage-meter .progress {
    border-radius: 4px;
    overflow: hidden;
}

.usage-meter .progress-bar {
    transition: width 0.3s ease;
}

.usage-meter .form-label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* Usage status indicators */
.usage-status-good { color: #198754; }
.usage-status-warning { color: #fd7e14; }
.usage-status-danger { color: #dc3545; }

/* Subscription modals */
.upgrade-modal .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.upgrade-modal .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.upgrade-modal .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Plan comparison cards */
.plan-card {
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.plan-card:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}

.plan-card.recommended {
    border-color: var(--bs-success);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
}

.plan-card .badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Usage dashboard widgets */
.usage-widget {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    transition: box-shadow 0.2s ease;
}

.usage-widget:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.usage-widget-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 1rem;
}

.usage-widget-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.usage-widget-value {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.5rem 0;
}

.usage-widget-label {
    color: #6c757d;
    font-size: 0.875rem;
}

/* Tier-specific styling */
.tier-free { border-left: 4px solid #6c757d; }
.tier-starter { border-left: 4px solid #0dcaf0; }
.tier-basic { border-left: 4px solid #0d6efd; }
.tier-standard { border-left: 4px solid #198754; }
.tier-pro { border-left: 4px solid #ffc107; }
.tier-enterprise { border-left: 4px solid #212529; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .usage-meter {
        margin-bottom: 1rem;
    }
    
    .feature-restriction-notice .d-flex {
        flex-direction: column;
    }
    
    .feature-restriction-notice .btn {
        margin-top: 0.5rem;
        margin-right: 0 !important;
    }
    
    .subscription-tier-badge {
        margin-bottom: 0.5rem;
    }
}

/* Loading states */
.usage-loading {
    opacity: 0.6;
}

.usage-loading .progress-bar {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Error states */
.usage-error {
    color: #dc3545;
    font-size: 0.875rem;
}

.usage-error::before {
    content: "⚠ ";
    margin-right: 0.25rem;
}

/* Success states */
.usage-unlimited {
    color: #198754;
    font-weight: 500;
}

.usage-unlimited::before {
    content: "∞ ";
    margin-right: 0.25rem;
}

/* Notification enhancements */
.upgrade-notification {
    position: sticky;
    top: 0;
    z-index: 1040;
    border-radius: 0;
    margin-bottom: 0;
}

.upgrade-notification .alert {
    margin-bottom: 0;
    border-radius: 0;
}

/* Button state modifications */
.btn[data-requires-tier],
.btn[data-requires-feature],
.btn[data-check-usage] {
    position: relative;
}

.btn[data-requires-tier]:disabled,
.btn[data-requires-feature]:disabled,
.btn[data-check-usage]:disabled {
    cursor: not-allowed;
}

/* Table row restrictions */
tr.tier-restricted {
    background-color: rgba(108, 117, 125, 0.1);
}

tr.tier-restricted td {
    color: #6c757d;
}

/* Form field restrictions */
.form-control[data-requires-tier]:disabled,
.form-control[data-requires-feature]:disabled,
.form-control[data-check-usage]:disabled {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* Navigation enhancements */
.nav-link[data-requires-tier],
.nav-link[data-requires-feature] {
    position: relative;
}

.nav-link[data-requires-tier]:disabled,
.nav-link[data-requires-feature]:disabled {
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed;
}

/* Card restrictions */
.card.tier-restricted {
    border-color: #dee2e6;
    background-color: #f8f9fa;
}

.card.tier-restricted .card-header {
    background-color: #e9ecef;
    border-bottom-color: #dee2e6;
}

/* Progress bar enhancements */
.progress.usage-critical .progress-bar {
    animation: blink 1s linear infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.5; }
}