/* Custom Widget Styles for Filament */

/* Widget Container Enhancements */
.fi-wi-widget {
    @apply relative overflow-hidden;
}

/* Personal Attendance Widget Styles */
.personal-attendance-bg {
    background: linear-gradient(135deg, rgb(239 246 255) 0%, rgb(224 231 255) 50%, rgb(221 214 254) 100%);
}

.dark .personal-attendance-bg {
    background: linear-gradient(135deg, rgb(31 41 55) 0%, rgb(17 24 39) 50%, rgb(31 41 55) 100%);
}

.personal-attendance-header-icon {
    @apply w-12 h-12 rounded-xl flex items-center justify-center shadow-lg transform transition-transform hover:scale-105;
    background: linear-gradient(135deg, rgb(59 130 246) 0%, rgb(79 70 229) 100%);
}

.personal-attendance-status-card {
    @apply relative bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-lg border border-gray-100 dark:border-gray-700 hover:shadow-xl transition-all duration-300;
}

.personal-attendance-status-card::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-1 rounded-t-2xl;
    background: linear-gradient(90deg, rgb(59 130 246) 0%, rgb(147 51 234) 50%, rgb(236 72 153) 100%);
}

.personal-attendance-week-card {
    @apply group relative rounded-2xl p-5 text-white shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 overflow-hidden;
    background: linear-gradient(135deg, rgb(59 130 246) 0%, rgb(37 99 235) 100%);
}

.personal-attendance-month-card {
    @apply group relative rounded-2xl p-5 text-white shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 overflow-hidden;
    background: linear-gradient(135deg, rgb(16 185 129) 0%, rgb(5 150 105) 100%);
}

/* Students Attendance Widget Styles */
.students-attendance-bg {
    background: linear-gradient(135deg, rgb(255 251 235) 0%, rgb(254 243 199) 50%, rgb(254 226 226) 100%);
}

.dark .students-attendance-bg {
    background: linear-gradient(135deg, rgb(31 41 55) 0%, rgb(17 24 39) 50%, rgb(31 41 55) 100%);
}

.students-attendance-header-icon {
    @apply w-12 h-12 rounded-xl flex items-center justify-center shadow-lg transform transition-transform hover:scale-105;
    background: linear-gradient(135deg, rgb(245 158 11) 0%, rgb(234 88 12) 100%);
}

.students-attendance-schedule-card {
    @apply relative bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden;
}

.students-attendance-schedule-card::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-1 rounded-t-2xl;
    background: linear-gradient(90deg, rgb(245 158 11) 0%, rgb(249 115 22) 50%, rgb(239 68 68) 100%);
}

.students-attendance-class-item {
    @apply group relative rounded-xl p-4 border hover:shadow-md transition-all duration-300;
    background: linear-gradient(90deg, rgb(239 246 255) 0%, rgb(224 231 255) 100%);
    border-color: rgb(191 219 254);
}

.dark .students-attendance-class-item {
    background: linear-gradient(90deg, rgb(55 65 81) 0%, rgb(75 85 99) 100%);
    border-color: rgb(75 85 99);
}

.students-attendance-group-item {
    @apply group relative rounded-xl p-4 border hover:shadow-md transition-all duration-300;
    background: linear-gradient(90deg, rgb(250 245 255) 0%, rgb(252 231 243) 100%);
    border-color: rgb(196 181 253);
}

.dark .students-attendance-group-item {
    background: linear-gradient(90deg, rgb(55 65 81) 0%, rgb(75 85 99) 100%);
    border-color: rgb(75 85 99);
}

.students-attendance-week-card {
    @apply group relative rounded-2xl p-5 text-white shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 overflow-hidden;
    background: linear-gradient(135deg, rgb(168 85 247) 0%, rgb(147 51 234) 100%);
}

.students-attendance-month-card {
    @apply group relative rounded-2xl p-5 text-white shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 overflow-hidden;
    background: linear-gradient(135deg, rgb(99 102 241) 0%, rgb(59 130 246) 100%);
}

/* Common Styles */
.widget-gradient-text {
    background: linear-gradient(90deg, rgb(17 24 39) 0%, rgb(75 85 99) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .widget-gradient-text {
    background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(209 213 219) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.widget-status-present {
    @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-bold shadow-md text-white;
    background: linear-gradient(90deg, rgb(34 197 94) 0%, rgb(5 150 105) 100%);
}

.widget-status-absent {
    @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-bold shadow-md text-white animate-pulse;
    background: linear-gradient(90deg, rgb(239 68 68) 0%, rgb(220 38 38) 100%);
}

.widget-status-not-recorded {
    @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-bold shadow-md text-white;
    background: linear-gradient(90deg, rgb(156 163 175) 0%, rgb(107 114 128) 100%);
}

.widget-progress-bar {
    @apply relative w-full rounded-full h-3 overflow-hidden;
    background-color: rgb(229 231 235);
}

.dark .widget-progress-bar {
    background-color: rgb(55 65 81);
}

.widget-progress-fill-personal {
    @apply absolute inset-0 h-3 rounded-full transition-all duration-1000 ease-out;
    background: linear-gradient(90deg, rgb(59 130 246) 0%, rgb(147 51 234) 50%, rgb(236 72 153) 100%);
}

.widget-progress-fill-students {
    @apply absolute inset-0 h-3 rounded-full transition-all duration-1000 ease-out;
    background: linear-gradient(90deg, rgb(245 158 11) 0%, rgb(249 115 22) 50%, rgb(239 68 68) 100%);
}

.widget-progress-shine {
    @apply absolute inset-0 opacity-30 animate-pulse;
    background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
}

/* Button Styles */
.widget-details-button {
    @apply group flex items-center space-x-2 rtl:space-x-reverse px-4 py-2 text-white text-sm font-medium rounded-lg shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105;
}

.widget-details-button-personal {
    background: linear-gradient(90deg, rgb(59 130 246) 0%, rgb(79 70 229) 100%);
}

.widget-details-button-personal:hover {
    background: linear-gradient(90deg, rgb(37 99 235) 0%, rgb(67 56 202) 100%);
}

.widget-details-button-students {
    background: linear-gradient(90deg, rgb(245 158 11) 0%, rgb(234 88 12) 100%);
}

.widget-details-button-students:hover {
    background: linear-gradient(90deg, rgb(217 119 6) 0%, rgb(194 65 12) 100%);
}

/* Decorative Elements */
.widget-decoration-circle {
    @apply absolute rounded-full;
    background-color: rgba(255, 255, 255, 0.1);
}

.widget-decoration-circle-top {
    @apply w-20 h-20 -mr-10 -mt-10;
    top: 0;
    right: 0;
}

.widget-decoration-circle-bottom {
    @apply w-16 h-16 -ml-8 -mb-8;
    bottom: 0;
    left: 0;
}

/* Online Indicator */
.widget-online-indicator {
    @apply absolute -top-1 -right-1 w-4 h-4 rounded-full border-2 border-white dark:border-gray-800 animate-pulse;
}

.widget-online-indicator-personal {
    background-color: rgb(34 197 94);
}

.widget-online-indicator-students {
    background-color: rgb(249 115 22);
}

/* Master Classes Widget Styles */
.master-classes-bg {
    background: linear-gradient(135deg, rgb(249 250 251) 0%, rgb(243 244 246) 50%, rgb(229 231 235) 100%);
}

.dark .master-classes-bg {
    background: linear-gradient(135deg, rgb(31 41 55) 0%, rgb(17 24 39) 50%, rgb(31 41 55) 100%);
}

.master-classes-header {
    @apply flex items-center gap-4 mb-6 pb-4 border-b border-gray-200 dark:border-gray-700;
}

.master-classes-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center shadow-lg;
    background: linear-gradient(135deg, rgb(79 70 229) 0%, rgb(99 102 241) 100%);
}

.master-classes-title {
    @apply text-2xl font-bold;
    background: linear-gradient(90deg, rgb(17 24 39) 0%, rgb(75 85 99) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .master-classes-title {
    background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(209 213 219) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.classes-grid {
    @apply grid gap-6;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.class-card {
    @apply relative bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-100 dark:border-gray-700 hover:shadow-xl transform transition-all duration-300 hover:scale-105 overflow-hidden;
}

.class-card::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-1 rounded-t-2xl;
    background: linear-gradient(90deg, rgb(79 70 229) 0%, rgb(99 102 241) 50%, rgb(139 92 246) 100%);
}

.class-card-header {
    @apply flex justify-between items-start mb-4 gap-3;
}

.class-card-title {
    @apply text-xl font-bold text-indigo-600 dark:text-indigo-400 mb-1;
}

.class-card-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold shadow-sm;
    background: linear-gradient(90deg, rgb(224 231 255) 0%, rgb(199 210 254) 100%);
    color: rgb(79 70 229);
}

.dark .class-card-badge {
    background: linear-gradient(90deg, rgb(49 46 129) 0%, rgb(67 56 202) 100%);
    color: rgb(199 210 254);
}

.class-info-item {
    @apply flex items-center gap-2 mb-2 text-sm text-gray-600 dark:text-gray-300;
}

.class-info-icon {
    @apply w-4 h-4 text-gray-500 dark:text-gray-400;
}

.class-description {
    @apply mt-4 pt-4 border-t border-dashed border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-400;
}

.class-actions {
    @apply mt-6 flex gap-3;
}

.class-action-button {
    @apply flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg;
}

.class-action-primary {
    background: linear-gradient(135deg, rgb(16 185 129) 0%, rgb(5 150 105) 100%);
    @apply text-white;
}

.class-action-primary:hover {
    background: linear-gradient(135deg, rgb(5 150 105) 0%, rgb(4 120 87) 100%);
}

.class-action-secondary {
    background: linear-gradient(135deg, rgb(59 130 246) 0%, rgb(37 99 235) 100%);
    @apply text-white;
}

.class-action-secondary:hover {
    background: linear-gradient(135deg, rgb(37 99 235) 0%, rgb(29 78 216) 100%);
}

.class-empty-state {
    @apply text-center py-12;
}

.class-empty-icon {
    @apply w-20 h-20 mx-auto mb-4 rounded-full flex items-center justify-center;
    background: linear-gradient(135deg, rgb(243 244 246) 0%, rgb(229 231 235) 100%);
}

.dark .class-empty-icon {
    background: linear-gradient(135deg, rgb(55 65 81) 0%, rgb(75 85 99) 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .classes-grid {
        grid-template-columns: 1fr;
        @apply gap-4;
    }
    
    .class-card {
        @apply p-4;
    }
    
    .class-card-header {
        @apply flex-col items-start gap-2;
    }
    
    .class-actions {
        @apply flex-col gap-2;
    }
}

@media (max-width: 640px) {
    .widget-details-button {
        @apply px-3 py-1.5 text-xs;
    }
    
    .personal-attendance-header-icon,
    .students-attendance-header-icon {
        @apply w-10 h-10;
    }
    
    .master-classes-icon {
        @apply w-10 h-10;
    }
    
    .master-classes-title {
        @apply text-xl;
    }
}