/**
 * Student Autocomplete Styles - Enhanced Multi-Line Card Design
 * Location: public/assets/finance/css/student-autocomplete.css
 * 
 * Features:
 * - Multi-line student cards with avatar, name, class, center, parent phone
 * - Mobile-responsive design
 * - KtUI/Metronic integration
 */

/* Wrapper Container */
.student-autocomplete-wrapper {
    position: relative;
}

/* Dropdown Container */
.student-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--kt-card, #ffffff);
    border: 1px solid var(--kt-border, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--kt-border) transparent;
}

.student-autocomplete-dropdown::-webkit-scrollbar {
    width: 6px;
}

.student-autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.student-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--kt-border, #d1d5db);
    border-radius: 3px;
}

/* Student Card Item */
.student-card-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--kt-border, #e5e7eb);
    transition: background-color 0.15s ease;
}

.student-card-item:last-child {
    border-bottom: none;
}

.student-card-item:hover,
.student-card-item:focus,
.student-card-item.active {
    background-color: var(--kt-primary-light, #eff6ff);
}

.student-card-item.active {
    border-left: 3px solid var(--kt-primary, #3b82f6);
    padding-left: calc(0.75rem - 3px);
}

/* Card Content Layout */
.student-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.student-card-primary {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--kt-foreground, #111827);
    line-height: 1.25;
}

.student-card-primary .text-muted {
    color: var(--kt-muted-foreground, #6b7280);
    font-weight: 400;
}

.student-card-secondary {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.student-card-info-line {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--kt-muted-foreground, #6b7280);
}

.student-card-info-line i {
    font-size: 0.625rem;
    color: var(--kt-primary, #3b82f6);
}

/* Category Badge */
.student-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    margin-top: 0.25rem;
    width: fit-content;
}

/* Legacy item styles (for backward compatibility) */
.student-autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--kt-border, #e5e7eb);
    transition: background-color 0.15s ease;
}

.student-autocomplete-item:last-child {
    border-bottom: none;
}

.student-autocomplete-item:hover,
.student-autocomplete-item.active {
    background: var(--kt-primary-light, #eff6ff);
}

/* Avatar Styles */
.student-card-avatar,
.student-autocomplete-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.student-card-avatar {
    background: var(--kt-primary-light, #dbeafe);
    color: var(--kt-primary, #3b82f6);
}

.student-autocomplete-item-avatar {
    background: var(--kt-primary, #3b82f6);
    color: white;
}

/* Avatar Color Variants */
.kt-avatar-light-primary { background: #dbeafe; color: #2563eb; }
.kt-avatar-light-success { background: #dcfce7; color: #16a34a; }
.kt-avatar-light-info { background: #cffafe; color: #0891b2; }
.kt-avatar-light-warning { background: #fef3c7; color: #d97706; }
.kt-avatar-light-danger { background: #fee2e2; color: #dc2626; }

.text-primary { color: #2563eb; }
.text-success { color: #16a34a; }
.text-info { color: #0891b2; }
.text-warning { color: #d97706; }
.text-danger { color: #dc2626; }

/* Badge Color Variants */
.kt-badge-primary { background: #dbeafe; color: #1e40af; }
.kt-badge-success { background: #dcfce7; color: #166534; }
.kt-badge-info { background: #cffafe; color: #155e75; }
.kt-badge-warning { background: #fef3c7; color: #92400e; }
.kt-badge-danger { background: #fee2e2; color: #991b1b; }

/* Loading Indicator */
.student-autocomplete-loading {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Selected Summary Card */
.student-autocomplete-selected {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--kt-muted, #f3f4f6);
    border: 1px solid var(--kt-border, #e5e7eb);
    border-radius: 0.5rem;
}

.student-selected-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.student-selected-info {
    flex: 1;
    min-width: 0;
}

.student-selected-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--kt-foreground, #111827);
}

.student-selected-details {
    font-size: 0.75rem;
    color: var(--kt-muted-foreground, #6b7280);
    margin-top: 0.25rem;
}

.student-selected-change {
    font-size: 0.75rem;
    color: var(--kt-primary, #3b82f6);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.student-selected-change:hover {
    text-decoration: underline;
}

/* Legacy selected badge (for backward compatibility) */
.student-autocomplete-selected .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgb(var(--color-success, 22 163 74) / 0.1);
    color: rgb(var(--color-success, 22 163 74));
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.student-autocomplete-selected .badge button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-autocomplete-selected .badge button:hover {
    opacity: 1;
}

/* Empty State */
.student-dropdown-empty,
.student-autocomplete-no-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--kt-muted-foreground, #6b7280);
}

.student-dropdown-empty i,
.student-autocomplete-no-results i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.5;
}

/* Loading State */
.student-dropdown-loading {
    padding: 1rem;
    text-align: center;
    color: var(--kt-muted-foreground, #6b7280);
}

/* Error Container */
.student-autocomplete-error {
    padding: 0.75rem;
    background: rgb(var(--color-destructive, 239 68 68) / 0.1);
    border: 1px solid rgb(var(--color-destructive, 239 68 68) / 0.3);
    border-radius: 0.375rem;
    color: rgb(var(--color-destructive, 239 68 68));
    margin-top: 0.5rem;
}

.student-autocomplete-error-content {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.student-autocomplete-error-content i {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.student-autocomplete-error-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Fallback */
.student-autocomplete-fallback {
    margin-top: 0.5rem;
}

/* Animation for loading spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .student-autocomplete-dropdown {
        max-height: 280px;
        margin-top: 2px;
        border-radius: 0.375rem;
    }
    
    .student-card-item {
        padding: 0.625rem;
        gap: 0.625rem;
    }
    
    .student-card-primary {
        font-size: 0.8125rem;
    }
    
    .student-card-info-line {
        font-size: 0.6875rem;
    }
    
    .student-card-avatar,
    .student-autocomplete-item-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8125rem;
    }
    
    .student-autocomplete-selected {
        padding: 0.625rem;
    }
    
    .student-selected-name {
        font-size: 0.8125rem;
    }
    
    .student-selected-details {
        font-size: 0.6875rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .student-autocomplete-dropdown {
        background: var(--kt-background, #1f2937);
        border-color: var(--kt-border, #374151);
    }
    
    .student-card-item:hover,
    .student-card-item.active,
    .student-autocomplete-item:hover,
    .student-autocomplete-item.active {
        background: var(--kt-primary-dark, #1e3a5f);
    }
    
    .student-card-primary,
    .student-autocomplete-item-name {
        color: var(--kt-foreground, #f9fafb);
    }
    
    .student-autocomplete-selected {
        background: var(--kt-muted, #374151);
        border-color: var(--kt-border, #4b5563);
    }
    
    .student-selected-name {
        color: var(--kt-foreground, #f9fafb);
    }
}