/* Custom CSS for School Fee Management System */

/* Body and general styles */
body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Basic dark theme styles */
.theme-dark, 
.dark-theme,
[data-bs-theme="dark"] {
    background-color: #212529;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .card {
    background-color: #2c3034;
    border-color: #495057;
}

[data-bs-theme="dark"] .card-header {
    background-color: #343a40;
    border-color: #495057;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #2c3034;
    border-color: #495057;
    color: #e1e1e1;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #adb5bd;
}

/* Header styles */
.navbar-brand {
    font-weight: bold;
    letter-spacing: 1px;
}

/* Dashboard card hover effect */
.card.h-100:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    transition: all .3s ease;
}

/* Form styles */
.form-control:focus, 
.form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Header underlines */
h2 {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.dark-theme h2 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Badge hover effects */
.badge:hover {
    opacity: 0.9;
}

/* Table hover enhancements */
.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.075);
}

/* Custom payment receipt styling */
.receipt-header {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

.receipt-footer {
    border-top: 1px solid #dee2e6;
    margin-top: 1.5rem;
    padding-top: 1rem;
    font-size: 0.8rem;
}

/* Dashboard stat cards */
.stat-card {
    border-radius: 10px;
    overflow: hidden;
    transition: all .3s ease;
}

.stat-card .card-body {
    z-index: 1;
}

.stat-card .icon {
    opacity: 0.2;
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 4rem;
}

/* Chart containers */
.chart-container {
    position: relative;
    margin: auto;
    height: 250px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chart-container {
        height: 200px;
    }
}

/* Utility classes */
.cursor-pointer {
    cursor: pointer;
}

.border-dashed {
    border-style: dashed !important;
}

/* Animation for payment processing */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse-animation {
    animation: pulse 1.5s infinite;
}

/* Print styles */
@media print {
    .navbar,
    .footer,
    .btn,
    .no-print {
        display: none !important;
    }
    
    .card {
        border: none !important;
        box-shadow: none !important;
    }
}

/* Profile Image Styles */
/* ==================== */
.profile-image-container { 
    transition: all 0.3s ease; 
}

.profile-image-container:hover { 
    transform: scale(1.05); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

#imagePreview img { 
    transition: all 0.3s ease; 
    border-radius: 50%; 
    width: 150px; 
    height: 150px; 
    object-fit: cover; 
}

/* Dark mode support for image preview */
[data-bs-theme="dark"] #imagePreview img { 
    border-color: #444; 
    background-color: #333; 
}

/* Avatar styles for consistency across the application */
.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* User profile picture styles for header/navbar */
.user-dropdown .avatar-sm {
    transition: transform 0.2s ease;
}

.user-dropdown:hover .avatar-sm {
    transform: scale(1.1);
}

/* Profile image in navbar and account pages */
.profile-image {
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
}

.profile-image:hover {
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.1);
}

/* Enhanced profile image container for consistent sizing */
.avatar-sm.profile-image,
.avatar-sm .profile-image {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255,255,255,0.3);
}

/* Profile dropdown specific styling */
.user-dropdown .profile-image-container {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
}

/* Dark mode support for profile images */
[data-bs-theme="dark"] .profile-image {
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

[data-bs-theme="dark"] .profile-image:hover {
    border-color: rgba(255,255,255,0.4);
}