/* Base Theme (Purple - Default) */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Eliminado: .tab-btn.active { background-color: #7c3aed; color: white; } */
.text-primary { color: #7c3aed; }
.bg-primary { background-color: #7c3aed; }
.hover\:bg-primary-dark:hover { background-color: #6d28d9; } /* purple-700 */
.focus\:ring-primary:focus { --tw-ring-color: #7c3aed; }

/* Theme Blue */
.theme-blue .gradient-bg, .theme-blue { /* Added .theme-blue for header */
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); /* blue-500 to blue-700 */
}
/* Eliminado: .theme-blue .tab-btn.active { background-color: #3182ce; color: white; } */
.theme-blue .text-primary { color: #3182ce; }
.theme-blue .bg-primary { background-color: #3182ce; }
.theme-blue .hover\:bg-primary-dark:hover { background-color: #2b6cb0; } /* blue-800 */
.theme-blue .focus\:ring-primary:focus { --tw-ring-color: #3182ce; }

/* Theme Green */
.theme-green .gradient-bg, .theme-green { /* Added .theme-green for header */
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); /* green-500 to green-700 */
}
.theme-green .text-primary { color: #38a169; }
.theme-green .bg-primary { background-color: #38a169; }
.theme-green .hover\:bg-primary-dark:hover { background-color: #2f855a; } /* green-800 */
.theme-green .focus\:ring-primary:focus { --tw-ring-color: #38a169; }

/* Theme Red */
.theme-red .gradient-bg, .theme-red { /* Added .theme-red for header */
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); /* red-500 to red-700 */
}
.theme-red .text-primary { color: #e53e3e; }
.theme-red .bg-primary { background-color: #e53e3e; }
.theme-red .hover\:bg-primary-dark:hover { background-color: #c53030; } /* red-800 */
.theme-red .focus\:ring-primary:focus { --tw-ring-color: #e53e3e; }

/* Theme Orange */
.theme-orange .gradient-bg, .theme-orange { /* Added .theme-orange for header */
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); /* orange-500 to orange-700 */
}
.theme-orange .text-primary { color: #dd6b20; }
.theme-orange .bg-primary { background-color: #dd6b20; }
.theme-orange .hover\:bg-primary-dark:hover { background-color: #c05621; } /* orange-800 */
.theme-orange .focus\:ring-primary:focus { --tw-ring-color: #dd6b20; }

/* Theme Pink */
.theme-pink .gradient-bg, .theme-pink { /* Added .theme-pink for header */
    background: linear-gradient(135deg, #ed64a6 0%, #d53f8c 100%); /* pink-500 to pink-700 */
}
.theme-pink .text-primary { color: #d53f8c; }
.theme-pink .bg-primary { background-color: #d53f8c; }
.theme-pink .hover\:bg-primary-dark:hover { background-color: #b83280; } /* pink-800 */
.theme-pink .focus\:ring-primary:focus { --tw-ring-color: #d53f8c; }

/* Theme Indigo */
.theme-indigo .gradient-bg, .theme-indigo { /* Added .theme-indigo for header */
    background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%); /* indigo-500 to indigo-700 */
}
.theme-indigo .text-primary { color: #5a67d8; }
.theme-indigo .bg-primary { background-color: #5a67d8; }
.theme-indigo .hover\:bg-primary-dark:hover { background-color: #4c51bf; } /* indigo-800 */
.theme-indigo .focus\:ring-primary:focus { --tw-ring-color: #5a67d8; }

/* Theme Teal */
.theme-teal .gradient-bg, .theme-teal { /* Added .theme-teal for header */
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%); /* teal-500 to teal-700 */
}
.theme-teal .text-primary { color: #319795; }
.theme-teal .bg-primary { background-color: #319795; }
.theme-teal .hover\:bg-primary-dark:hover { background-color: #2c7a7b; } /* teal-800 */
.theme-teal .focus\:ring-primary:focus { --tw-ring-color: #319795; }

/* Theme Dark */
.theme-dark .gradient-bg, .theme-dark { /* Added .theme-dark for header */
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); /* gray-600 to gray-800 */
}
.theme-dark .text-primary { color: #2d3748; }
.theme-dark .bg-primary { background-color: #2d3748; }
.theme-dark .hover\:bg-primary-dark:hover { background-color: #1a202c; } /* gray-900 */
.theme-dark .focus\:ring-primary:focus { --tw-ring-color: #2d3748; }

/* Common Styles */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.notification {
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.platform-logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
}

.expired {
    border-left: 4px solid #ef4444; /* red-500 */
}

.expiring-soon {
    border-left: 4px solid #f59e0b; /* yellow-500 */
}

.active {
    border-left: 4px solid #10b981; /* green-500 */
}

.modal {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.modal.show {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.password-hidden {
    filter: blur(4px);
    transition: filter 0.3s ease;
}

.password-hidden:hover {
    filter: none;
}

.tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

/* Login Screen */
#loginScreen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Same as header */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
#loginScreen.hidden {
    display: none;
}

/* Responsive adjustments for tabs */
.tab-btn {
    min-width: 0; /* Allow buttons to shrink */
    font-size: 0.75rem; /* text-xs by default */
}

/* Ensure tabs wrap on small screens */
@media (max-width: 767px) { /* Tailwind's 'md' breakpoint is 768px */
    .tab-nav-container {
        flex-wrap: wrap;
        gap: 0.25rem; /* Small gap between buttons */
    }
    .tab-btn {
        flex: 1 1 calc(33.333% - 0.25rem); /* 3 buttons per row on mobile */
        margin-bottom: 0.5rem; /* Add some space between wrapped buttons */
        min-height: 2.5rem; /* Ensure consistent height */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.25rem;
        line-height: 1.2;
    }
    .tab-btn i {
        margin-bottom: 0.125rem;
        margin-right: 0 !important;
        font-size: 0.875rem;
    }
    .tab-btn span {
        font-size: 0.625rem; /* Even smaller text for mobile */
        text-align: center;
    }
}

@media (min-width: 768px) {
    .tab-btn {
        font-size: 0.875rem; /* text-sm for larger screens */
    }
}