/* Tier-based styling for Knexia Dashboard */

/* Professional Tier Styling */
.tier-professional {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.tier-professional .navbar {
    background: linear-gradient(90deg, #0f0c29, #302b63, #24243e) !important;
    box-shadow: 0 4px 20px rgba(138, 43, 226, 0.3);
}

.tier-professional .card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(138, 43, 226, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.tier-professional .card-header {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2) 0%, rgba(75, 0, 130, 0.2) 100%);
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}

.tier-professional .btn-primary {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.tier-professional .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(102, 126, 234, 0.6);
}

.tier-professional .metric-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.tier-professional .metric-card h3 {
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Professional tier badge */
.tier-professional .tier-badge {
    position: fixed;
    top: 70px;
    right: 20px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    z-index: 1000;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Business Tier Styling */
.tier-business {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 100%);
}

.tier-business .navbar {
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1) !important;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
}

.tier-business .card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 107, 107, 0.3);
    box-shadow: 0 8px 32px 0 rgba(255, 107, 107, 0.2);
}

/* Growth Tier Styling - Ultimate Premium */
.tier-growth {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.tier-growth .navbar {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 50%, #FF6347 100%) !important;
    box-shadow: 0 4px 30px rgba(255, 215, 0, 0.6);
}

.tier-growth .card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid transparent;
    background-image: linear-gradient(white, white), 
                      linear-gradient(90deg, #FFD700, #FFA500, #FF6347);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: premiumPulse 4s ease-in-out infinite;
}

@keyframes premiumPulse {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 15px 60px rgba(255, 165, 0, 0.5);
    }
}

.tier-growth .stat-card {
    border: 2px solid gold;
}

.tier-growth .tier-badge {
    background: linear-gradient(90deg, #FFD700, #FFA500) !important;
    color: #000 !important;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
}

/* Professional tier animations */
.tier-professional .card {
    animation: cardGlow 3s ease-in-out infinite alternate;
}

@keyframes cardGlow {
    from {
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    }
    to {
        box-shadow: 0 8px 40px 0 rgba(138, 43, 226, 0.5);
    }
}

/* Feature unlock indicators */
.tier-professional .feature-locked {
    display: none !important;
}

.tier-professional .feature-unlocked::before {
    content: "✨ ";
    color: #667eea;
}

/* Professional tier text styling */
.tier-professional h1, .tier-professional h2, .tier-professional h3,
.tier-professional h4, .tier-professional h5, .tier-professional h6 {
    color: #e0e0e0;
}

.tier-professional .text-muted {
    color: #b0b0b0 !important;
}

.tier-professional body,
.tier-professional .card-body {
    color: #d0d0d0;
}

/* Sidebar styling for professional tier */
.tier-professional .sidebar {
    background: linear-gradient(180deg, rgba(15, 12, 41, 0.9) 0%, rgba(48, 43, 99, 0.9) 100%);
    backdrop-filter: blur(10px);
}

.tier-professional .sidebar .nav-link:hover {
    background: rgba(102, 126, 234, 0.2);
    border-left: 3px solid #667eea;
}

/* Charts styling for professional tier */
.tier-professional .chart-container {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 20px;
}

/* Table styling for professional tier */
.tier-professional .table {
    color: #d0d0d0;
}

.tier-professional .table thead th {
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    color: #e0e0e0;
}

.tier-professional .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(102, 126, 234, 0.05);
}

/* Input styling for professional tier */
.tier-professional .form-control,
.tier-professional .form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #e0e0e0;
}

.tier-professional .form-control:focus,
.tier-professional .form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    color: #e0e0e0;
}

/* Alert styling for professional tier */
.tier-professional .alert-success {
    background: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.3);
    color: #90EE90;
}

.tier-professional .alert-info {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.3);
    color: #ADD8E6;
}

/* Loading animation for professional tier */
.tier-professional .spinner-border {
    color: #667eea;
}

/* Modal styling for professional tier */
.tier-professional .modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    color: #e0e0e0;
}

.tier-professional .modal-header {
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}

.tier-professional .modal-footer {
    border-top: 1px solid rgba(138, 43, 226, 0.3);
}