/* LeetPrompt Components CSS - Reusable Component Styles */

/* Button Components */
.btn-primary {
    @apply btn-base bg-primary-blue text-white hover:bg-primary-hover;
    box-shadow: 0 2px 5px rgba(52, 152, 219, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
    @apply btn-base bg-white text-primary-blue border-2 border-primary-blue hover:bg-primary-blue hover:text-white;
}

.btn-success {
    @apply btn-base bg-semantic-success text-white hover:bg-green-600;
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.3);
}

.btn-danger {
    @apply btn-base bg-semantic-error text-white hover:bg-red-600;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
}

.btn-warning {
    @apply btn-base bg-semantic-warning text-white hover:bg-yellow-600;
    box-shadow: 0 2px 5px rgba(255, 193, 7, 0.3);
}

/* Card Components */
.card {
    @apply bg-white rounded-xl shadow-card p-6 overflow-hidden;
}

.card-hover {
    @apply card hover:shadow-lg transition-shadow duration-300;
}

.card-interactive {
    @apply card-hover cursor-pointer;
}

.card-interactive:hover {
    transform: translateY(-2px);
}

/* Form Components */
.form-input {
    @apply block w-full px-3 py-2 border border-neutral-border-gray rounded-md shadow-sm;
    @apply focus:outline-none focus:ring-primary-blue focus:border-primary-blue;
    @apply invalid:border-semantic-error invalid:ring-semantic-error;
}

.form-label {
    @apply block text-sm font-medium text-neutral-dark-text mb-1;
}

.form-group {
    @apply space-y-1 mb-4;
}

.form-help {
    @apply text-sm text-neutral-medium-gray;
}

.form-error {
    @apply text-sm text-semantic-error;
}

/* Navigation Components */
.nav-link {
    @apply text-neutral-medium-gray font-medium hover:text-primary-blue transition-colors duration-300;
}

.nav-link-active {
    @apply nav-link text-primary-blue font-semibold;
}

/* Badge Components */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply badge bg-primary-blue text-white;
}

.badge-success {
    @apply badge bg-semantic-success text-white;
}

.badge-warning {
    @apply badge bg-semantic-warning text-white;
}

.badge-error {
    @apply badge bg-semantic-error text-white;
}

.badge-info {
    @apply badge bg-semantic-info text-white;
}

.badge-neutral {
    @apply badge bg-neutral-border-gray text-neutral-dark-text;
}

/* Alert Components */
.alert {
    @apply p-4 rounded-md border-l-4;
}

.alert-success {
    @apply alert bg-green-50 border-semantic-success text-green-800;
}

.alert-warning {
    @apply alert bg-yellow-50 border-semantic-warning text-yellow-800;
}

.alert-error {
    @apply alert bg-red-50 border-semantic-error text-red-800;
}

.alert-info {
    @apply alert bg-blue-50 border-semantic-info text-blue-800;
}

/* Code Components */
.code-inline {
    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono;
}

.code-block-wrapper {
    @apply rounded-lg overflow-hidden shadow-sm;
}

.code-header {
    @apply bg-terminal-darker px-4 py-2 flex justify-between items-center;
}

.code-language {
    @apply text-terminal-text text-sm font-mono;
}


/* Modal Components */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
    @apply opacity-0 transition-opacity duration-300;
}

.modal-content {
    @apply bg-white rounded-xl max-w-lg w-full mx-4 max-h-screen overflow-y-auto;
    @apply transform scale-95 transition-transform duration-300;
}

.modal-header {
    @apply flex justify-between items-center p-6 border-b border-neutral-border-gray;
}

.modal-title {
    @apply text-xl font-semibold text-neutral-dark-text;
}

.modal-close {
    @apply text-neutral-medium-gray hover:text-neutral-dark-text transition-colors;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply p-6 border-t border-neutral-border-gray flex justify-end space-x-3;
}

/* Loading Components */
.loading-overlay {
    @apply absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center;
}

.loading-spinner {
    @apply spinner border-primary-blue;
}

.loading-text {
    @apply text-neutral-medium-gray ml-2;
}

/* Skeleton Loading */
.skeleton {
    @apply bg-gray-200 rounded animate-pulse;
}

.skeleton-text {
    @apply skeleton h-4 mb-2;
}

.skeleton-title {
    @apply skeleton h-6 mb-4;
}

.skeleton-avatar {
    @apply skeleton w-10 h-10 rounded-full;
}

/* Accordion Components */
.accordion-item {
    @apply border border-neutral-border-gray rounded-lg mb-2 overflow-hidden;
}

.accordion-header {
    @apply w-full px-4 py-3 text-left bg-white hover:bg-gray-50 transition-colors;
    @apply flex justify-between items-center cursor-pointer;
}

.accordion-title {
    @apply font-medium text-neutral-dark-text;
}

.accordion-icon {
    @apply transform transition-transform duration-200;
}

.accordion-icon.open {
    @apply rotate-180;
}

.accordion-content {
    @apply px-4 py-3 bg-gray-50 border-t border-neutral-border-gray;
    @apply text-neutral-medium-gray;
}

/* Dropdown Components */
.dropdown {
    @apply relative inline-block;
}

.dropdown-menu {
    @apply absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5;
    @apply focus:outline-none z-50;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-neutral-dark-text hover:bg-gray-100 cursor-pointer;
}

.dropdown-divider {
    @apply border-t border-neutral-border-gray my-1;
}

/* Tag Components */
.tag {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    @apply bg-gray-100 text-gray-800;
}

.tag-easy {
    @apply tag bg-green-100 text-green-800;
}

.tag-medium {
    @apply tag bg-yellow-100 text-yellow-800;
}

.tag-hard {
    @apply tag bg-red-100 text-red-800;
}

/* Progress Components */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
    @apply bg-primary-blue h-2 rounded-full transition-all duration-300;
}

/* Tooltip Components */
.tooltip {
    @apply relative;
}

.tooltip-content {
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2;
    @apply bg-neutral-dark-text text-white text-sm px-2 py-1 rounded;
    @apply opacity-0 invisible transition-all duration-200;
    @apply pointer-events-none z-10;
}

.tooltip:hover .tooltip-content {
    @apply opacity-100 visible;
}

/* Responsive Helpers */
@media (max-width: 768px) {
    .card {
        @apply p-4;
    }
    
    .modal-content {
        @apply mx-2;
    }
    
    .btn-base {
        @apply px-4 py-3 text-sm;
    }
}