/* Performance Evaluation Page Color Customization */

/* Page background */
[data-page="performance-principal"] .min-h-screen,
[data-page="performance-pending-evidences"] .min-h-screen {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #fdf4ff 100%) !important;
}

/* School Header Card */
[data-page="performance-principal"] .rounded-lg.shadow-lg.overflow-hidden.mb-6.border-t-4.border-blue-500 {
    border-top-color: #0ea5e9 !important;
    box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.2), 0 8px 10px -6px rgba(14, 165, 233, 0.2) !important;
}

/* Card backgrounds */
[data-page="performance-principal"] .bg-white,
[data-page="performance-pending-evidences"] .bg-white,
[data-page="performance-teacher-elements"] .bg-white {
    background-color: #f8fafc !important;
}

/* Fix teacher name and number backgrounds */
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10,
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.bg-blue-100,
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.bg-green-100,
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.bg-yellow-100,
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.bg-red-100 {
    background-color: transparent !important;
    border: none !important;
}

[data-page="performance-principal"] .flex-shrink-0.h-10.w-10 span {
    color: #0f172a !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Fix teacher info backgrounds */
[data-page="performance-principal"] .flex.items-center > div:first-child {
    background: transparent !important;
}

/* Fix table cell backgrounds */
[data-page="performance-principal"] td .flex.items-center > div:first-child {
    background: transparent !important;
    border: none !important;
}

/* Fix teacher number circles */
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.rounded-full {
    background-color: transparent !important;
    box-shadow: none !important;
}

[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.rounded-full.bg-blue-100,
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.rounded-full.bg-green-100,
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.rounded-full.bg-yellow-100,
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.rounded-full.bg-red-100,
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10.rounded-full.bg-gray-100 {
    background-color: transparent !important;
}

/* Fix teacher name container backgrounds */
[data-page="performance-principal"] .flex.items-center .mr-4 {
    background: transparent !important;
}

/* Ensure consistent background throughout */
[data-page="performance-principal"] .bg-white .flex.items-center > div,
[data-page="performance-element-evaluation"] .bg-white .flex.items-center > div {
    background: transparent !important;
}

/* Fix element evaluation page backgrounds */
[data-page="performance-element-evaluation"] .bg-white,
[data-page="performance-element-evaluation"] .bg-white.dark\:bg-gray-800 {
    background-color: #f8fafc !important;
    border: none !important;
}

/* Fix colored background sections */
[data-page="performance-element-evaluation"] .bg-blue-50,
[data-page="performance-element-evaluation"] .bg-green-50,
[data-page="performance-element-evaluation"] .bg-yellow-50,
[data-page="performance-element-evaluation"] .bg-red-50,
[data-page="performance-element-evaluation"] .bg-purple-50,
[data-page="performance-element-evaluation"] .bg-gray-50 {
    background-color: transparent !important;
    border-color: rgba(203, 213, 225, 0.3) !important;
}

/* Fix summary boxes specifically */
[data-page="performance-teacher-elements"] .bg-blue-50,
[data-page="performance-teacher-elements"] .bg-green-50,
[data-page="performance-teacher-elements"] .bg-yellow-50,
[data-page="performance-teacher-elements"] .bg-red-50,
[data-page="performance-teacher-elements"] .bg-purple-50,
[data-page="performance-teacher-elements"] .bg-gray-50 {
    background-color: transparent !important;
    border-color: rgba(203, 213, 225, 0.3) !important;
}

/* Ensure text containers have no background */
[data-page="performance-element-evaluation"] .text-center,
[data-page="performance-teacher-elements"] .text-center {
    background: transparent !important;
}

/* Fix form backgrounds */
[data-page="performance-element-evaluation"] .bg-blue-50.dark\:bg-blue-900\/20,
[data-page="performance-element-evaluation"] .bg-green-50.dark\:bg-green-900\/20,
[data-page="performance-element-evaluation"] .bg-yellow-50.dark\:bg-yellow-900\/20 {
    background-color: rgba(248, 250, 252, 0.8) !important;
}

/* Fix progress bars */
[data-page="performance-element-evaluation"] .bg-blue-200,
[data-page="performance-element-evaluation"] .bg-gray-100 {
    background-color: rgba(226, 232, 240, 0.5) !important;
}

/* Ensure text colors are consistent */
[data-page="performance-element-evaluation"] h1,
[data-page="performance-element-evaluation"] h2,
[data-page="performance-element-evaluation"] h3,
[data-page="performance-element-evaluation"] .text-gray-800,
[data-page="performance-element-evaluation"] .text-gray-600 {
    color: #0f172a !important;
}

/* Style teacher numbers to match page theme */
[data-page="performance-principal"] .flex-shrink-0.h-10.w-10 span {
    color: #0f172a !important;
    font-weight: bold !important;
    font-size: 1.125rem !important;
}

/* Remove any background from teacher info containers */
[data-page="performance-principal"] .flex.items-center .text-sm.font-medium,
[data-page="performance-principal"] .flex.items-center .text-gray-900 {
    background: transparent !important;
}

/* Ensure table rows have consistent background */
[data-page="performance-principal"] tr.hover\:bg-gray-50:hover {
    background-color: #f1f5f9 !important;
}

/* Remove any unwanted background from flex containers */
[data-page="performance-principal"] .flex.flex-col.md\:flex-row.justify-between.items-start.md\:items-center {
    background: transparent !important;
}

/* Headings */
[data-page="performance-principal"] h2,
[data-page="performance-principal"] h3,
[data-page="performance-pending-evidences"] h1,
[data-page="performance-pending-evidences"] h2,
[data-page="performance-pending-evidences"] h3 {
    color: #0f172a !important;
}

/* Text colors */
[data-page="performance-principal"] .text-gray-600,
[data-page="performance-pending-evidences"] .text-gray-600 {
    color: #64748b !important;
}

[data-page="performance-principal"] .text-gray-500,
[data-page="performance-pending-evidences"] .text-gray-500 {
    color: #94a3b8 !important;
}

[data-page="performance-pending-evidences"] .text-black {
    color: #0f172a !important;
}

/* Button colors */
[data-page="performance-principal"] .px-4.py-2.bg-blue-500,
[data-page="performance-pending-evidences"] .px-4.py-2.bg-blue-500 {
    background-color: #0ea5e9 !important;
}

[data-page="performance-principal"] .px-4.py-2.bg-blue-500:hover,
[data-page="performance-pending-evidences"] .px-4.py-2.bg-blue-500:hover {
    background-color: #0284c7 !important;
}

[data-page="performance-principal"] .px-4.py-2.bg-green-500,
[data-page="performance-pending-evidences"] .px-4.py-2.bg-green-500 {
    background-color: #10b981 !important;
}

[data-page="performance-principal"] .px-4.py-2.bg-green-500:hover,
[data-page="performance-pending-evidences"] .px-4.py-2.bg-green-500:hover {
    background-color: #059669 !important;
}

[data-page="performance-principal"] .px-4.py-2.bg-purple-500,
[data-page="performance-pending-evidences"] .px-4.py-2.bg-purple-500 {
    background-color: var(--primary-500) !important;
}

[data-page="performance-principal"] .px-4.py-2.bg-purple-500:hover,
[data-page="performance-pending-evidences"] .px-4.py-2.bg-purple-500:hover {
    background-color: var(--primary-600) !important;
}

/* Table styling */
[data-page="performance-principal"] thead.bg-gray-50,
[data-page="performance-pending-evidences"] thead.bg-gray-50 {
    background-color: var(--secondary-200) !important;
}

[data-page="performance-principal"] tbody.bg-white,
[data-page="performance-pending-evidences"] tbody.bg-white {
    background-color: var(--secondary-100) !important;
}

[data-page="performance-principal"] table th,
[data-page="performance-pending-evidences"] table th {
    color: var(--secondary-900) !important;
    background-color: var(--secondary-300) !important;
}

[data-page="performance-principal"] table td,
[data-page="performance-pending-evidences"] table td {
    color: var(--secondary-900) !important;
}

/* Status badges */
[data-page="performance-principal"] .bg-green-100,
[data-page="performance-pending-evidences"] .bg-green-100 {
    background-color: var(--success-100) !important;
    color: var(--success-600) !important;
}

[data-page="performance-pending-evidences"] .bg-yellow-100 {
    background-color: var(--warning-100) !important;
    color: var(--warning-600) !important;
}

[data-page="performance-pending-evidences"] .bg-red-100 {
    background-color: var(--error-100) !important;
    color: var(--error-600) !important;
}

/* Rating colors */
[data-page="performance-principal"] .text-green-600,
[data-page="performance-pending-evidences"] .text-green-600 {
    color: var(--success-600) !important;
}

[data-page="performance-principal"] .text-blue-600,
[data-page="performance-pending-evidences"] .text-blue-600 {
    color: var(--info-600) !important;
}

[data-page="performance-principal"] .text-yellow-600,
[data-page="performance-pending-evidences"] .text-yellow-600 {
    color: var(--warning-600) !important;
}

[data-page="performance-principal"] .text-orange-600,
[data-page="performance-pending-evidences"] .text-orange-600 {
    color: var(--warning-600) !important;
}

[data-page="performance-principal"] .text-red-600,
[data-page="performance-pending-evidences"] .text-red-600 {
    color: #dc2626 !important;
}

/* Progress bars */
[data-page="performance-principal"] .bg-gray-200.rounded-full.h-3,
[data-page="performance-pending-evidences"] .bg-gray-200.rounded-full.h-3 {
    background-color: #e2e8f0 !important;
}

/* Hover effects */
[data-page="performance-principal"] .hover\:bg-gray-50:hover,
[data-page="performance-pending-evidences"] .hover\:bg-gray-50:hover {
    background-color: #f1f5f9 !important;
}

/* Modal backgrounds */
[data-page="performance-principal"] .bg-white.dark\:bg-gray-800,
[data-page="performance-pending-evidences"] .bg-white.dark\:bg-gray-800 {
    background-color: #f8fafc !important;
}

/* Modal text */
[data-page="performance-principal"] .text-gray-900.dark\:text-white,
[data-page="performance-pending-evidences"] .text-gray-900.dark\:text-white {
    color: #0f172a !important;
}

[data-page="performance-principal"] .text-gray-700.dark\:text-gray-300,
[data-page="performance-pending-evidences"] .text-gray-700.dark\:text-gray-300 {
    color: #334155 !important;
}

/* Additional fixes for text visibility */
body:not(.dark) .bg-white .text-gray-900,
body:not(.dark) .bg-white .text-gray-800,
body:not(.dark) .bg-white .text-gray-700,
body:not(.dark) .bg-white .text-gray-600 {
    color: #000000 !important;
}

/* Fix for stats cards text visibility */
body:not(.dark) .stats-card .card-title,
body:not(.dark) .stats-card .text-3xl,
body:not(.dark) .stats-card .text-xl,
body:not(.dark) .stats-card .text-lg,
body:not(.dark) .stats-card .text-gray-900,
body:not(.dark) .stats-card .arabic-text,
body:not(.dark) .stats-card .font-black {
    color: #000000 !important;
}

/* Fix for hero section text */
body:not(.dark) .hero-section .text-white {
    color: #000000 !important;
}

/* Modal buttons */
[data-page="performance-principal"] .bg-blue-100.dark\:bg-gray-600,
[data-page="performance-pending-evidences"] .bg-blue-100.dark\:bg-gray-600,
[data-page="performance-teacher-elements"] .bg-blue-100.dark\:bg-gray-600 {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}

[data-page="performance-principal"] .bg-blue-100.dark\:bg-gray-600:hover,
[data-page="performance-pending-evidences"] .bg-blue-100.dark\:bg-gray-600:hover,
[data-page="performance-teacher-elements"] .bg-blue-100.dark\:bg-gray-600:hover {
    background-color: #bfdbfe !important;
}

/* Style the 'عرض العناصر' button specifically */
[data-page="performance-principal"] a[href*="evaluation-elements"],
[data-page="performance-principal"] .px-3.py-2.bg-blue-500.text-white,
[data-page="performance-principal"] .bg-blue-500.text-white {
    background-color: #3b82f6 !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
    transition: all 0.3s ease !important;
}

[data-page="performance-principal"] a[href*="evaluation-elements"]:hover,
[data-page="performance-principal"] .px-3.py-2.bg-blue-500.text-white:hover,
[data-page="performance-principal"] .bg-blue-500.text-white:hover {
    background-color: #2563eb !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4) !important;
}

[data-page="performance-principal"] .px-3.py-2.bg-blue-500.text-white.flex.items-center,
[data-page="performance-principal"] .bg-blue-500.text-white.flex.items-center {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 500 !important;
}

[data-page="performance-principal"] .bg-red-500.text-white,
[data-page="performance-pending-evidences"] .bg-red-500.text-white {
    background-color: #ef4444 !important;
}

[data-page="performance-principal"] .bg-red-500.text-white:hover,
[data-page="performance-pending-evidences"] .bg-red-500.text-white:hover {
    background-color: #dc2626 !important;
}

/* Form inputs */
[data-page="performance-principal"] .border.border-gray-300,
[data-page="performance-pending-evidences"] .border.border-gray-300 {
    border-color: #cbd5e1 !important;
}

[data-page="performance-principal"] .focus\:border-purple-500:focus,
[data-page="performance-pending-evidences"] .focus\:border-purple-500:focus {
    border-color: #8b5cf6 !important;
}

/* Toast notifications */
.performance-toast.bg-green-500 {
    background-color: #10b981 !important;
}

.performance-toast.bg-red-500 {
    background-color: #ef4444 !important;
}

.performance-toast.bg-yellow-500 {
    background-color: #f59e0b !important;
}

.performance-toast.bg-blue-500 {
    background-color: #3b82f6 !important;
}

/* Fix for hero section text in light mode */
body:not(.dark) .hero-section .text-white {
    color: #000000 !important;
}

/* =========================== */
/* Fix white background overlays on statistics */
/* =========================== */

/* Remove white backgrounds from table cells containing statistics */
[data-page="performance-principal"] td .flex.flex-col.space-y-1,
[data-page="performance-principal"] td .flex.items-center.justify-between {
    background: transparent !important;
}

/* Remove white backgrounds from stat text containers */
[data-page="performance-principal"] td .flex.flex-col.space-y-1 > div,
[data-page="performance-principal"] td .flex.items-center.justify-between span {
    background: transparent !important;
}

/* Fix for stats cards in teacher-evaluation-elements page */
[data-page="performance-teacher-elements"] .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > div {
    background-color: transparent !important;
}

/* Override colored backgrounds to be transparent with subtle borders */
[data-page="performance-teacher-elements"] .bg-blue-50.dark\:bg-blue-900\/20,
[data-page="performance-teacher-elements"] .bg-green-50.dark\:bg-green-900\/20,
[data-page="performance-teacher-elements"] .bg-yellow-50.dark\:bg-yellow-900\/20,
[data-page="performance-teacher-elements"] .bg-purple-50.dark\:bg-purple-900\/20 {
    background-color: rgba(248, 250, 252, 0.5) !important;
    border-width: 2px !important;
}

/* Ensure text is visible with transparent backgrounds */
[data-page="performance-teacher-elements"] .bg-blue-50 p,
[data-page="performance-teacher-elements"] .bg-green-50 p,
[data-page="performance-teacher-elements"] .bg-yellow-50 p,
[data-page="performance-teacher-elements"] .bg-purple-50 p {
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Fix stat values to have proper color without white background */
[data-page="performance-teacher-elements"] .text-2xl.font-bold {
    background: transparent !important;
}

/* Remove backgrounds from all flex containers in stats */
[data-page="performance-teacher-elements"] .flex.items-center.justify-between,
[data-page="performance-teacher-elements"] .flex.items-center.gap-2 {
    background: transparent !important;
}

/* Ensure table cells have no white background */
[data-page="performance-principal"] tbody.bg-white td {
    background-color: transparent !important;
}

/* Make sure the table row has proper background */
[data-page="performance-principal"] tbody tr {
    background-color: rgba(248, 250, 252, 0.7) !important;
}

[data-page="performance-principal"] tbody tr:hover {
    background-color: rgba(241, 245, 249, 0.9) !important;
}

/* Fix statistic labels and values */
[data-page="performance-principal"] .text-xs.text-gray-500 {
    background: transparent !important;
    color: #64748b !important;
}

[data-page="performance-principal"] .text-xs.font-medium {
    background: transparent !important;
}

/* Remove any remaining white backgrounds from nested divs */
[data-page="performance-principal"] td > div,
[data-page="performance-principal"] td > div > div,
[data-page="performance-teacher-elements"] .p-4 > div {
    background: transparent !important;
}

/* Force all flex containers in table cells to be transparent */
[data-page="performance-principal"] td .flex,
[data-page="performance-teacher-elements"] .p-4 .flex {
    background: transparent !important;
}

/* Specifically target statistics containers */
[data-page="performance-principal"] td .space-y-1,
[data-page="performance-principal"] .justify-between {
    background: transparent !important;
}

/* Target only table cell content to remove white backgrounds */
[data-page="performance-principal"] td > .flex > div:not(.rounded-full):not(button):not(a),
[data-page="performance-principal"] td .text-sm:not(button):not(a) {
    background: transparent !important;
}

/* Fix buttons to keep their colors */
[data-page="performance-principal"] button.bg-blue-500,
[data-page="performance-principal"] a.bg-blue-500,
[data-page="performance-teacher-elements"] button.bg-blue-500,
[data-page="performance-teacher-elements"] a.bg-blue-500 {
    background-color: #3b82f6 !important;
}

[data-page="performance-principal"] button.bg-green-500,
[data-page="performance-principal"] a.bg-green-500 {
    background-color: #10b981 !important;
}

[data-page="performance-principal"] button.bg-purple-500,
[data-page="performance-principal"] a.bg-purple-500 {
    background-color: #8b5cf6 !important;
}

/* Fix rounded circle backgrounds for teacher numbers */
[data-page="performance-principal"] .bg-blue-100.rounded-full,
[data-page="performance-principal"] .bg-green-100.rounded-full,
[data-page="performance-principal"] .bg-yellow-100.rounded-full,
[data-page="performance-principal"] .bg-red-100.rounded-full {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Fix badge backgrounds */
[data-page="performance-principal"] .bg-green-100.rounded-full,
[data-page="performance-principal"] span.bg-green-100 {
    background-color: #dcfce7 !important;
}

/* Ensure stat cards in teacher elements have proper semi-transparent background */
[data-page="performance-teacher-elements"] .border.border-blue-200,
[data-page="performance-teacher-elements"] .border.border-green-200,
[data-page="performance-teacher-elements"] .border.border-yellow-200,
[data-page="performance-teacher-elements"] .border.border-purple-200 {
    background-color: rgba(248, 250, 252, 0.6) !important;
    backdrop-filter: blur(10px) !important;
}

/* Additional aggressive fixes for white backgrounds */
[data-page="performance-principal"] td span,
[data-page="performance-principal"] td p,
[data-page="performance-teacher-elements"] .p-4 span,
[data-page="performance-teacher-elements"] .p-4 p {
    background: transparent !important;
}

/* Ensure all text elements in statistics have no background */
[data-page="performance-principal"] .text-xs,
[data-page="performance-principal"] .text-sm,
[data-page="performance-teacher-elements"] .text-sm,
[data-page="performance-teacher-elements"] .text-2xl {
    background: transparent !important;
}

/* Fix any remaining white boxes around content - but keep badges and buttons */
[data-page="performance-principal"] tbody td > div:not(.rounded-full):not(button):not(a):not(span) {
    background: transparent !important;
}

/* Keep important colored elements */
[data-page="performance-principal"] .rounded-full,
[data-page="performance-principal"] button,
[data-page="performance-principal"] a.px-3,
[data-page="performance-principal"] a.px-4,
[data-page="performance-principal"] span.px-3,
[data-page="performance-teacher-elements"] .rounded-full,
[data-page="performance-teacher-elements"] button,
[data-page="performance-teacher-elements"] a.px-3,
[data-page="performance-teacher-elements"] a.px-4 {
    background-color: initial !important;
}

/* Ensure badges keep their colors */
[data-page="performance-principal"] span.bg-green-100.text-green-800 {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}

/* Keep card backgrounds for main containers */
[data-page="performance-principal"] .rounded-lg.shadow-lg,
[data-page="performance-teacher-elements"] .rounded-lg.shadow-lg,
[data-page="performance-element-evaluation"] .rounded-lg.shadow-lg {
    background-color: #f8fafc !important;
}

/* Apply same fixes to element-evaluation page */
[data-page="performance-element-evaluation"] td .flex,
[data-page="performance-element-evaluation"] td > div,
[data-page="performance-element-evaluation"] td > div > div {
    background: transparent !important;
}

[data-page="performance-element-evaluation"] .text-xs,
[data-page="performance-element-evaluation"] .text-sm,
[data-page="performance-element-evaluation"] td span,
[data-page="performance-element-evaluation"] td p {
    background: transparent !important;
}

/* Fix stats cards for all performance pages */
[data-page^="performance-"] .bg-blue-50.p-4,
[data-page^="performance-"] .bg-green-50.p-4,
[data-page^="performance-"] .bg-yellow-50.p-4,
[data-page^="performance-"] .bg-purple-50.p-4,
[data-page^="performance-"] .bg-red-50.p-4 {
    background-color: rgba(248, 250, 252, 0.6) !important;
}

/* =========================== */
/* Fix white backgrounds in evaluation element cards */
/* =========================== */

/* Remove white backgrounds from card content sections */
[data-page="performance-teacher-elements"] .bg-white.border-2 .flex.justify-between,
[data-page="performance-teacher-elements"] .bg-white.border-2 .mt-2 > div {
    background: transparent !important;
}

/* Target specific date and count info sections */
[data-page="performance-teacher-elements"] .bg-white.border-2 .text-xs.text-gray-500 {
    background: transparent !important;
}

/* Ensure card main containers keep their background */
[data-page="performance-teacher-elements"] .bg-white.border-2.rounded-2xl {
    background-color: #ffffff !important;
}

/* But make inner flex containers transparent */
[data-page="performance-teacher-elements"] .bg-white.border-2.rounded-2xl > div,
[data-page="performance-teacher-elements"] .bg-white.border-2.rounded-2xl .flex-1,
[data-page="performance-teacher-elements"] .bg-white.border-2.rounded-2xl .min-w-0 {
    background: transparent !important;
}

/* Fix header section in cards */
[data-page="performance-teacher-elements"] .bg-white.border-2 .flex.items-start.justify-between,
[data-page="performance-teacher-elements"] .bg-white.border-2 .flex.items-center.gap-3 {
    background: transparent !important;
}

/* Fix all text containers in cards */
[data-page="performance-teacher-elements"] .bg-white.border-2 p,
[data-page="performance-teacher-elements"] .bg-white.border-2 h5,
[data-page="performance-teacher-elements"] .bg-white.border-2 span:not(.inline-flex):not(.rounded-full) {
    background: transparent !important;
}

/* Keep icon backgrounds and badges */
[data-page="performance-teacher-elements"] .bg-gradient-to-br,
[data-page="performance-teacher-elements"] .inline-flex.items-center.gap-2,
[data-page="performance-teacher-elements"] span.rounded-full {
    background-color: initial !important;
}

/* More aggressive fix for card inner content */
[data-page="performance-teacher-elements"] .border-2 div:not(.w-12):not(.rounded-xl):not(.inline-flex):not(.rounded-full):not(.evaluation-element-actions) {
    background: transparent !important;
}

/* Target the specific mt-2 section with date and evidence info */
[data-page="performance-teacher-elements"] .mt-2 {
    background: transparent !important;
}

[data-page="performance-teacher-elements"] .mt-2 .flex {
    background: transparent !important;
}

/* Force all divs inside cards to be transparent except specific elements */
[data-page="performance-teacher-elements"] .rounded-2xl.shadow-lg > * > * {
    background: transparent !important;
}

/* Re-apply backgrounds only for specific elements that need them */
[data-page="performance-teacher-elements"] .rounded-2xl.shadow-lg .w-12.h-12.rounded-xl {
    background: linear-gradient(to bottom right, #6366f1, #9333ea) !important;
}

[data-page="performance-teacher-elements"] .rounded-2xl.shadow-lg span.inline-flex.items-center {
    background-color: initial !important;
}

[data-page="performance-teacher-elements"] .rounded-2xl.shadow-lg button,
[data-page="performance-teacher-elements"] .rounded-2xl.shadow-lg a.px-4 {
    background-color: initial !important;
}

/* Nuclear option - force transparent on all card internals EXCEPT buttons and links */
[data-page="performance-teacher-elements"] .border-2.rounded-2xl *:not(a):not(button):not(span.bg-blue-400):not(span.bg-yellow-100):not(span.bg-green-100):not(span.bg-red-100):not(span.bg-gray-100):not(.w-12.h-12):not(.evaluation-element-actions) {
    background: transparent !important;
}

/* Ensure button container doesn't override button colors */
[data-page="performance-teacher-elements"] .evaluation-element-actions {
    background: transparent !important;
}

[data-page="performance-teacher-elements"] .evaluation-element-actions * {
    background: initial !important;
}

/* Then selectively restore needed backgrounds */
[data-page="performance-teacher-elements"] .border-2.rounded-2xl {
    background-color: #ffffff !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl .w-12.h-12 {
    background: linear-gradient(135deg, #6366f1, #9333ea) !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl span.bg-yellow-100,
[data-page="performance-teacher-elements"] .border-2.rounded-2xl span.bg-green-100,
[data-page="performance-teacher-elements"] .border-2.rounded-2xl span.bg-red-100,
[data-page="performance-teacher-elements"] .border-2.rounded-2xl span.bg-gray-100 {
    background-color: initial !important;
}

/* Force button backgrounds - CRITICAL FIX */
[data-page="performance-teacher-elements"] .border-2.rounded-2xl a.bg-blue-500,
[data-page="performance-teacher-elements"] a[href*="evidences"].bg-blue-500 {
    background-color: #3b82f6 !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl a.bg-blue-500:hover,
[data-page="performance-teacher-elements"] a[href*="evidences"].bg-blue-500:hover {
    background-color: #2563eb !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl a.bg-green-500,
[data-page="performance-teacher-elements"] a[href*="evaluate"].bg-green-500 {
    background-color: #10b981 !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl a.bg-green-500:hover,
[data-page="performance-teacher-elements"] a[href*="evaluate"].bg-green-500:hover {
    background-color: #059669 !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl a.bg-purple-500,
[data-page="performance-teacher-elements"] a[href*="evaluate"].bg-purple-500 {
    background-color: #8b5cf6 !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl a.bg-purple-500:hover,
[data-page="performance-teacher-elements"] a[href*="evaluate"].bg-purple-500:hover {
    background-color: #7c3aed !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl .bg-red-100 {
    background-color: #fee2e2 !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl .bg-blue-400,
[data-page="performance-teacher-elements"] span.bg-blue-400 {
    background-color: #60a5fa !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl .bg-yellow-400 {
    background-color: #fbbf24 !important;
}

/* Additional specific button fixes - MAKE BUTTONS FULLY COLORED */
[data-page="performance-teacher-elements"] .evaluation-element-actions a {
    background-color: initial !important;
    border: none !important;
    color: white !important;
    font-weight: 500 !important;
}

[data-page="performance-teacher-elements"] .evaluation-element-actions a.bg-blue-500,
[data-page="performance-teacher-elements"] a[href*="evidences"] {
    background: #3b82f6 !important;
    background-color: #3b82f6 !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] .evaluation-element-actions a.bg-blue-500:hover,
[data-page="performance-teacher-elements"] a[href*="evidences"]:hover {
    background: #2563eb !important;
    background-color: #2563eb !important;
}

[data-page="performance-teacher-elements"] .evaluation-element-actions a.bg-green-500,
[data-page="performance-teacher-elements"] a[href*="evaluate"].bg-green-500 {
    background: #10b981 !important;
    background-color: #10b981 !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] .evaluation-element-actions a.bg-green-500:hover,
[data-page="performance-teacher-elements"] a[href*="evaluate"].bg-green-500:hover {
    background: #059669 !important;
    background-color: #059669 !important;
}

[data-page="performance-teacher-elements"] .evaluation-element-actions a.bg-purple-500,
[data-page="performance-teacher-elements"] a[href*="evaluate"].bg-purple-500 {
    background: #8b5cf6 !important;
    background-color: #8b5cf6 !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] .evaluation-element-actions a.bg-purple-500:hover,
[data-page="performance-teacher-elements"] a[href*="evaluate"].bg-purple-500:hover {
    background: #7c3aed !important;
    background-color: #7c3aed !important;
}

/* Ultra-strong button color enforcement - NO SHADOWS, FULL COLOR */
[data-page="performance-teacher-elements"] a.px-4.py-2\.5.bg-blue-500,
[data-page="performance-teacher-elements"] a.px-4.py-2.bg-blue-500 {
    background: #3b82f6 !important;
    background-color: #3b82f6 !important;
    background-image: none !important;
    border: 2px solid #3b82f6 !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] a.px-4.py-2\.5.bg-green-500,
[data-page="performance-teacher-elements"] a.px-4.py-2.bg-green-500 {
    background: #10b981 !important;
    background-color: #10b981 !important;
    background-image: none !important;
    border: 2px solid #10b981 !important;
    color: white !important;
}

[data-page="performance-teacher-elements"] a.px-4.py-2\.5.bg-purple-500,
[data-page="performance-teacher-elements"] a.px-4.py-2.bg-purple-500 {
    background: #8b5cf6 !important;
    background-color: #8b5cf6 !important;
    background-image: none !important;
    border: 2px solid #8b5cf6 !important;
    color: white !important;
}

/* Remove all conflicting transparent backgrounds from buttons */
[data-page="performance-teacher-elements"] .border-2.rounded-2xl a[href*="evidences"],
[data-page="performance-teacher-elements"] .border-2.rounded-2xl a[href*="evaluate"] {
    background: initial !important;
    background-image: none !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl a[href*="evidences"].bg-blue-500 {
    background: #3b82f6 !important;
    background-color: #3b82f6 !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl a[href*="evaluate"].bg-green-500 {
    background: #10b981 !important;
    background-color: #10b981 !important;
}

[data-page="performance-teacher-elements"] .border-2.rounded-2xl a[href*="evaluate"].bg-purple-500 {
    background: #8b5cf6 !important;
    background-color: #8b5cf6 !important;
}

/* ================================= */
/* FINAL OVERRIDE - MAXIMUM PRIORITY */
/* Force solid button colors - NO SHADOWS */
/* ================================= */

/* Blue buttons - عرض الشواهد */
[data-page="performance-teacher-elements"] a.bg-blue-500.text-white,
[data-page="performance-teacher-elements"] a.bg-blue-500,
body [data-page="performance-teacher-elements"] a.bg-blue-500 {
    background: #3b82f6 !important;
    background-color: #3b82f6 !important;
    background-image: none !important;
    border: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Green buttons - تقييم العنصر */
[data-page="performance-teacher-elements"] a.bg-green-500.text-white,
[data-page="performance-teacher-elements"] a.bg-green-500,
body [data-page="performance-teacher-elements"] a.bg-green-500 {
    background: #10b981 !important;
    background-color: #10b981 !important;
    background-image: none !important;
    border: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Purple buttons - إعادة التقييم */
[data-page="performance-teacher-elements"] a.bg-purple-500.text-white,
[data-page="performance-teacher-elements"] a.bg-purple-500,
body [data-page="performance-teacher-elements"] a.bg-purple-500 {
    background: #8b5cf6 !important;
    background-color: #8b5cf6 !important;
    background-image: none !important;
    border: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
}