/* ==== UNFOLD Purple → Blue Theme Overrides ==== */
/* Blue palette reference: Tailwind CSS blue-50 → blue-900 */

/* Define CSS Variables for colors */
:root {
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;

    --color-base-100: #f9fafb;
    /* light gray */
    --color-base-300: #d1d5db;
    --color-base-400: #9ca3af;
    --color-base-500: #6b7280;
    --color-base-700: #374151;

    --color-white: #ffffff;
}

/* --- Backgrounds --- */
.bg-purple-50 {
    background-color: var(--color-blue-50) !important;
}

/* blue-50 */
.bg-purple-100 {
    background-color: var(--color-blue-100) !important;
}

/* blue-100 */
.bg-purple-200 {
    background-color: var(--color-blue-200) !important;
}

/* blue-200 */
.bg-purple-300 {
    background-color: var(--color-blue-300) !important;
}

/* blue-300 */
.bg-purple-400 {
    background-color: var(--color-blue-400) !important;
}

/* blue-400 */
.bg-purple-500 {
    background-color: var(--color-blue-500) !important;
}

/* blue-500 */
.bg-purple-600 {
    background-color: var(--color-blue-600) !important;
}

/* blue-600 */
.bg-purple-700 {
    background-color: var(--color-blue-700) !important;
}

/* blue-700 */
.bg-purple-800 {
    background-color: var(--color-blue-800) !important;
}

/* blue-800 */
.bg-purple-900 {
    background-color: var(--color-blue-900) !important;
}

/* blue-900 */

/* Hover variants */
.hover\:bg-purple-50:hover {
    background-color: var(--color-blue-50) !important;
}

.hover\:bg-purple-100:hover {
    background-color: var(--color-blue-100) !important;
}

.hover\:bg-purple-200:hover {
    background-color: var(--color-blue-200) !important;
}

.hover\:bg-purple-300:hover {
    background-color: var(--color-blue-300) !important;
}

.hover\:bg-purple-400:hover {
    background-color: var(--color-blue-400) !important;
}

.hover\:bg-purple-500:hover {
    background-color: var(--color-blue-500) !important;
}

.hover\:bg-purple-600:hover {
    background-color: var(--color-blue-600) !important;
}

.hover\:bg-purple-700:hover {
    background-color: var(--color-blue-700) !important;
}

.hover\:bg-purple-800:hover {
    background-color: var(--color-blue-800) !important;
}

.hover\:bg-purple-900:hover {
    background-color: var(--color-blue-900) !important;
}

/* --- Text Colors --- */
.text-purple-50 {
    color: var(--color-blue-50) !important;
}

.text-purple-100 {
    color: var(--color-blue-100) !important;
}

.text-purple-200 {
    color: var(--color-blue-200) !important;
}

.text-purple-300 {
    color: var(--color-blue-300) !important;
}

.text-purple-400 {
    color: var(--color-blue-400) !important;
}

.text-purple-500 {
    color: var(--color-blue-500) !important;
}

.text-purple-600 {
    color: var(--color-blue-600) !important;
}

.text-purple-700 {
    color: var(--color-blue-700) !important;
}

.text-purple-800 {
    color: var(--color-blue-800) !important;
}

.text-purple-900 {
    color: var(--color-blue-900) !important;
}

/* Hover text */
.hover\:text-purple-50:hover {
    color: var(--color-blue-50) !important;
}

.hover\:text-purple-100:hover {
    color: var(--color-blue-100) !important;
}

.hover\:text-purple-200:hover {
    color: var(--color-blue-200) !important;
}

.hover\:text-purple-300:hover {
    color: var(--color-blue-300) !important;
}

.hover\:text-purple-400:hover {
    color: var(--color-blue-400) !important;
}

.hover\:text-purple-500:hover {
    color: var(--color-blue-500) !important;
}

.hover\:text-purple-600:hover {
    color: var(--color-blue-600) !important;
}

.hover\:text-purple-700:hover {
    color: var(--color-blue-700) !important;
}

.hover\:text-purple-800:hover {
    color: var(--color-blue-800) !important;
}

.hover\:text-purple-900:hover {
    color: var(--color-blue-900) !important;
}

/* --- Border Colors --- */
.border-purple-50 {
    border-color: var(--color-blue-50) !important;
}

.border-purple-100 {
    border-color: var(--color-blue-100) !important;
}

.border-purple-200 {
    border-color: var(--color-blue-200) !important;
}

.border-purple-300 {
    border-color: var(--color-blue-300) !important;
}

.border-purple-400 {
    border-color: var(--color-blue-400) !important;
}

.border-purple-500 {
    border-color: var(--color-blue-500) !important;
}

.border-purple-600 {
    border-color: var(--color-blue-600) !important;
}

.border-purple-700 {
    border-color: var(--color-blue-700) !important;
}

.border-purple-800 {
    border-color: var(--color-blue-800) !important;
}

.border-purple-900 {
    border-color: var(--color-blue-900) !important;
}

/* Hover border */
.hover\:border-purple-50:hover {
    border-color: var(--color-blue-50) !important;
}

.hover\:border-purple-100:hover {
    border-color: var(--color-blue-100) !important;
}

.hover\:border-purple-200:hover {
    border-color: var(--color-blue-200) !important;
}

.hover\:border-purple-300:hover {
    border-color: var(--color-blue-300) !important;
}

.hover\:border-purple-400:hover {
    border-color: var(--color-blue-400) !important;
}

.hover\:border-purple-500:hover {
    border-color: var(--color-blue-500) !important;
}

.hover\:border-purple-600:hover {
    border-color: var(--color-blue-600) !important;
}

.hover\:border-purple-700:hover {
    border-color: var(--color-blue-700) !important;
}

.hover\:border-purple-800:hover {
    border-color: var(--color-blue-800) !important;
}

.hover\:border-purple-900:hover {
    border-color: var(--color-blue-900) !important;
}

/* --- Focus Rings --- */
.focus\:ring-purple-50:focus {
    box-shadow: 0 0 0 3px var(--color-blue-50) !important;
}

.focus\:ring-purple-100:focus {
    box-shadow: 0 0 0 3px var(--color-blue-100) !important;
}

.focus\:ring-purple-200:focus {
    box-shadow: 0 0 0 3px var(--color-blue-200) !important;
}

.focus\:ring-purple-300:focus {
    box-shadow: 0 0 0 3px var(--color-blue-300) !important;
}

.focus\:ring-purple-400:focus {
    box-shadow: 0 0 0 3px var(--color-blue-400) !important;
}

.focus\:ring-purple-500:focus {
    box-shadow: 0 0 0 3px var(--color-blue-500) !important;
}

.focus\:ring-purple-600:focus {
    box-shadow: 0 0 0 3px var(--color-blue-600) !important;
}

.focus\:ring-purple-700:focus {
    box-shadow: 0 0 0 3px var(--color-blue-700) !important;
}

.focus\:ring-purple-800:focus {
    box-shadow: 0 0 0 3px var(--color-blue-800) !important;
}

.focus\:ring-purple-900:focus {
    box-shadow: 0 0 0 3px var(--color-blue-900) !important;
}

/* admin-overrides.css */

/* Primary backgrounds */
.bg-primary-50 {
    background-color: var(--color-blue-50) !important;
}

/* blue-50 */
.bg-primary-100 {
    background-color: var(--color-blue-100) !important;
}

/* blue-100 */
.bg-primary-500 {
    background-color: var(--color-blue-500) !important;
}

/* blue-500 */
.bg-primary-600 {
    background-color: var(--color-blue-600) !important;
}

/* blue-600 */
.bg-primary-700 {
    background-color: var(--color-blue-700) !important;
}

/* blue-700 */

/* Primary text */
.text-primary-50 {
    color: var(--color-blue-50) !important;
}

.text-primary-100 {
    color: var(--color-blue-100) !important;
}

.text-primary-500 {
    color: var(--color-blue-500) !important;
}

.text-primary-600 {
    color: var(--color-blue-600) !important;
}

.text-primary-700 {
    color: var(--color-blue-700) !important;
}

/* Hover states */
.hover\:text-primary-600:hover {
    color: var(--color-blue-600) !important;
}

.hover\:text-primary-500:hover {
    color: var(--color-blue-500) !important;
}

.hover\:bg-primary-600:hover {
    background-color: var(--color-blue-600) !important;
}

.hover\:bg-primary-500:hover {
    background-color: var(--color-blue-500) !important;
}

/* Borders */
.border-primary-500 {
    border-color: var(--color-blue-500) !important;
}

.border-primary-600 {
    border-color: var(--color-blue-600) !important;
}


/* ------------------------------
   Blue theme for Unfold Admin
   ------------------------------ */

/* Primary background shades */
.bg-primary-50 {
    background-color: var(--color-blue-50) !important;
}

/* blue-50 */
.bg-primary-100 {
    background-color: var(--color-blue-100) !important;
}

/* blue-100 */
.bg-primary-500 {
    background-color: var(--color-blue-500) !important;
}

/* blue-500 */
.bg-primary-600 {
    background-color: var(--color-blue-600) !important;
}

/* blue-600 */
.bg-primary-700 {
    background-color: var(--color-blue-700) !important;
}

/* blue-700 */

/* Primary text shades */
.text-primary-50 {
    color: var(--color-blue-50) !important;
}

.text-primary-100 {
    color: var(--color-blue-100) !important;
}

.text-primary-500 {
    color: var(--color-blue-500) !important;
}

.text-primary-600 {
    color: var(--color-blue-600) !important;
}

.text-primary-700 {
    color: var(--color-blue-700) !important;
}

/* Hover states */
.hover\:text-primary-600:hover {
    color: var(--color-blue-600) !important;
}

.hover\:text-primary-500:hover {
    color: var(--color-blue-500) !important;
}

.hover\:bg-primary-600:hover {
    background-color: var(--color-blue-600) !important;
}

.hover\:bg-primary-500:hover {
    background-color: var(--color-blue-500) !important;
}

/* Borders */
.border-primary-500 {
    border-color: var(--color-blue-500) !important;
}

.border-primary-600 {
    border-color: var(--color-blue-600) !important;
}

/* Checked states (checkboxes, radios) */
.checked\:bg-primary-600:checked {
    background-color: var(--color-blue-600) !important;
}

.checked\:border-primary-600:checked {
    border-color: var(--color-blue-600) !important;
}

.dark\:checked\:bg-primary-600:checked {
    background-color: var(--color-blue-600) !important;
}

.dark\:checked\:border-primary-600:checked {
    border-color: var(--color-blue-600) !important;
}

/* Focus outlines */
.focus\:outline-primary-500:focus {
    outline-color: var(--color-blue-500) !important;
}

/* ------------------------------
   Base neutral colors (gray scale)
   ------------------------------ */
.bg-base-100 {
    background-color: var(--color-base-100) !important;
}

/* light gray */
.border-base-300 {
    border-color: var(--color-base-300) !important;
}

.hover\:border-base-400:hover {
    border-color: var(--color-base-400) !important;
}

.dark\:bg-base-700 {
    background-color: var(--color-base-700) !important;
}

.dark\:border-base-500 {
    border-color: var(--color-base-500) !important;
}

.dark\:checked\:after\:text-base-700:checked::after {
    color: var(--color-base-700) !important;
}


/* Checkbox background when checked */
.checked\:bg-primary-600:checked {
    background-color: var(--color-blue-600) !important;
    /* Blue-600 */
    appearance: none !important;
    /* Force custom render */
}

/* Checkbox border when checked */
.checked\:border-primary-600:checked {
    border-color: var(--color-blue-600) !important;
}

/* Dark mode checked background */
.dark\:checked\:bg-primary-600:checked {
    background-color: var(--color-blue-600) !important;
}

/* Dark mode checked border */
.dark\:checked\:border-primary-600:checked {
    border-color: var(--color-blue-600) !important;
}

/* The tick/checkmark color in light mode */
.checked\:after\:text-white:checked::after {
    color: var(--color-white) !important;
}

/* The tick/checkmark color in dark mode */
.dark\:checked\:after\:text-white:checked::after {
    color: var(--color-white) !important;
}


.rounded {
    border-radius: 0px !important;
}



/* Fix for row selection checkboxes appearing checked when they're not
   Target only the action checkboxes (first column) without affecting boolean field checkboxes */

/* Row selection checkboxes (body rows) - remove the checkmark when unchecked */
.change-list table tbody td.action-checkbox input[type="checkbox"]:not(:checked)::after,
.change-list table tbody td:first-child input[type="checkbox"]:not(:checked)::after,
input[name="_selected_action"]:not(:checked)::after {
    content: none !important;
    display: none !important;
}

/* Header "select all" checkbox - remove the checkmark when unchecked */
.change-list table thead th.action-checkbox-column input[type="checkbox"]:not(:checked)::after,
.change-list table thead th:first-child input[type="checkbox"]:not(:checked)::after,
#action-toggle:not(:checked)::after {
    content: none !important;
    display: none !important;
}

/* Filter checkboxes - remove the checkmark when unchecked */
#changelist-filter input[type="checkbox"]:not(:checked)::after,
.admin-filter-list input[type="checkbox"]:not(:checked)::after {
    content: none !important;
    display: none !important;
}

/* Ensure unchecked selection checkboxes have a clean appearance */
.change-list table tbody td.action-checkbox input[type="checkbox"]:not(:checked),
.change-list table tbody td:first-child input[type="checkbox"]:not(:checked),
input[name="_selected_action"]:not(:checked),
.change-list table thead th.action-checkbox-column input[type="checkbox"]:not(:checked),
.change-list table thead th:first-child input[type="checkbox"]:not(:checked),
#action-toggle:not(:checked),
#changelist-filter input[type="checkbox"]:not(:checked),
.admin-filter-list input[type="checkbox"]:not(:checked) {
    background-color: white !important;
    background-image: none !important;
}

/* Keep checked state visible for selection checkboxes */
.change-list table tbody td.action-checkbox input[type="checkbox"]:checked::after,
.change-list table tbody td:first-child input[type="checkbox"]:checked::after,
input[name="_selected_action"]:checked::after,
.change-list table thead th.action-checkbox-column input[type="checkbox"]:checked::after,
.change-list table thead th:first-child input[type="checkbox"]:checked::after,
#action-toggle:checked::after,
#changelist-filter input[type="checkbox"]:checked::after,
.admin-filter-list input[type="checkbox"]:checked::after {
    content: "✓" !important;
    display: block !important;
    color: white !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Ensure the boolean field checkboxes (like attendance toggles) are NOT affected */
.change-list table tbody td:not(.action-checkbox):not(:first-child) input[type="checkbox"] {
    /* Keep default Unfold styling for these */
}

/* ========================================
   COMPREHENSIVE BLUE THEME - Replace ALL Purple
   ======================================== */

/* Focus states for all input elements - replace purple with blue */
input:focus,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
    border-color: var(--color-blue-500) !important;
    outline-color: var(--color-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    /* blue-500 with 10% opacity */
}

/* Focus ring utilities */
.focus\:ring-purple-500:focus,
.focus-visible\:ring-purple-500:focus-visible,
.focus\:ring-2:focus {
    --tw-ring-color: var(--color-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
}

/* Active/selected states */
.active\:bg-purple-600:active,
.active\:bg-purple-500:active {
    background-color: var(--color-blue-600) !important;
}

/* Links - ONLY apply blue to active/selected states, not all links */
nav a.active,
nav a.selected,
.sidebar a.active,
.sidebar a.selected,
.menu a.active,
.menu a.selected,
a.active,
a.selected {
    color: var(--color-blue-600) !important;
}

nav a.active:hover,
nav a.selected:hover,
.sidebar a.active:hover,
.sidebar a.selected:hover,
.menu a.active:hover,
.menu a.selected:hover,
a.active:hover,
a.selected:hover {
    color: var(--color-blue-700) !important;
}

/* Buttons with purple variants */
button.bg-purple-600,
.button.bg-purple-600,
input[type="submit"].bg-purple-600,
.btn-purple {
    background-color: var(--color-blue-600) !important;
}

button.bg-purple-600:hover,
.button.bg-purple-600:hover,
input[type="submit"].bg-purple-600:hover,
.btn-purple:hover {
    background-color: var(--color-blue-700) !important;
}

/* Django admin specific elements */
.submit-row input[type="submit"],
.submit-row a.deletelink {
    background-color: var(--color-blue-600) !important;
}

.submit-row input[type="submit"]:hover,
.submit-row a.deletelink:hover {
    background-color: var(--color-blue-700) !important;
}

/* Selected/active navigation items */
.selected,
.selected a,
tr.selected,
.bg-purple-100 {
    background-color: var(--color-blue-100) !important;
}

/* Tabs and navigation */
.tab.active,
.nav-item.active,
.ui-tabs .ui-tabs-active {
    border-bottom-color: var(--color-blue-600) !important;
    color: var(--color-blue-600) !important;
}

/* Progress bars */
.progress-bar,
progress::-webkit-progress-value,
progress::-moz-progress-bar {
    background-color: var(--color-blue-600) !important;
}

/* Badges and labels */
.badge-purple,
.label-purple,
.tag-purple {
    background-color: var(--color-blue-600) !important;
    color: white !important;
}

/* Dropdown and select highlights */
/* select option:checked,
select option:hover {
    background-color: var(--color-blue-100) !important;
    color: var(--color-blue-900) !important;
}

.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-state-focus,
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
    background-color: var(--color-blue-600) !important;
    color: white !important;
} */

/* Table row highlights */
table tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: var(--color-blue-50) !important;
}

/* Pagination active page */
.pagination .current,
.pagination .active,
.paginator .this-page {
    background-color: var(--color-blue-600) !important;
    color: white !important;
    border-color: var(--color-blue-600) !important;
}

/* Unfold specific overrides */
.dark .bg-purple-600,
.dark .bg-purple-500,
.dark .bg-purple-700 {
    background-color: var(--color-blue-600) !important;
}

.dark .text-purple-600,
.dark .text-purple-500,
.dark .text-purple-700 {
    color: var(--color-blue-600) !important;
}

.dark .border-purple-600,
.dark .border-purple-500 {
    border-color: var(--color-blue-600) !important;
}

/* Switch/toggle controls */
input[type="checkbox"].toggle:checked,
.switch input:checked+.slider {
    background-color: var(--color-blue-600) !important;
}

/* Radio buttons */
input[type="radio"]:checked {
    border-color: var(--color-blue-600) !important;
}

input[type="radio"]:checked::before {
    background-color: var(--color-blue-600) !important;
}

/* Scrollbars (webkit browsers) */
::-webkit-scrollbar-thumb {
    background-color: var(--color-blue-400) !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-blue-600) !important;
}

/* Selection highlight */
::selection {
    background-color: var(--color-blue-200) !important;
    color: var(--color-blue-900) !important;
}

::-moz-selection {
    background-color: var(--color-blue-200) !important;
    color: var(--color-blue-900) !important;
}

/* Messages/alerts */
.messagelist .success,
.alert-success {
    border-left-color: var(--color-blue-600) !important;
}

/* Filter sidebar active items */
#changelist-filter li.selected a,
#changelist-filter li.active a {
    color: var(--color-blue-600) !important;
    font-weight: 600;
}

/* Calendar widget */
.calendar td.selected,
.calendar-shortcuts a:hover {
    background-color: var(--color-blue-600) !important;
    color: white !important;
}

/* Any remaining purple classes */
[class*="purple"] {
    /* This is a catch-all - be careful with specificity */
}

/* Specific Unfold components that might use purple */
.bg-primary-600 {
    background-color: var(--color-blue-600) !important;
}

.text-primary-600 {
    color: var(--color-blue-600) !important;
}

.border-primary-600 {
    border-color: var(--color-blue-600) !important;
}

/* Focus-visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-blue-500) !important;
    outline-offset: 2px;
}

/* Ensure form field focus states are blue */
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    border-color: var(--color-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Active state for buttons */
button:active,
.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    background-color: var(--color-blue-700) !important;
}

/* Sidebar navigation active items */
.sidebar .active,
.sidebar .current,
nav .active {
    background-color: var(--color-blue-100) !important;
    color: var(--color-blue-900) !important;
    border-left-color: var(--color-blue-600) !important;
}

/* Hide MPTT Expand/Collapse tree links */
#mptt-collapse-tree,
#mptt-expand-tree {
    display: none !important;
}

/* Hide tree expand/collapse links in object-tools by text content matching */
.object-tools li:has(a[href*="tree"]) {
    display: none !important;
}

/* ========================================
   Login Page Background Image Styling
   ======================================== */

/* Add background image to login and logout pages - override the default white/dark backgrounds */
body.login #page.bg-white,
body.login #page,
body.logout #page.bg-white,
body.logout #page,
body[class*="login"] #page,
body[class*="logout"] #page {
    background-image: url('/static/img/ye_background_login.png') !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Dark mode - also override dark background */
body.login.dark #page,
body.logout.dark #page {
    background-image: url('/static/img/ye_background_login.png') !important;
    background-color: transparent !important;
}

/* Ensure the login form container has a semi-transparent background for readability */
body.login #page .flex.grow.items-center.justify-center,
body.logout #page .flex.grow.items-center.justify-center {
    position: relative !important;
    z-index: 10 !important;
}

/* Add a subtle backdrop to the login form for better contrast */
body.login #page .flex.grow.items-center.justify-center > div,
body.logout #page .flex.grow.items-center.justify-center > div {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 2.5rem !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Dark mode variant - darker backdrop */
body.login.dark #page .flex.grow.items-center.justify-center > div,
body.logout.dark #page .flex.grow.items-center.justify-center > div {
    background-color: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Ensure form inputs remain fully visible and functional */
body.login input[type="text"],
body.login input[type="password"],
body.logout input[type="text"],
body.logout input[type="password"] {
    position: relative !important;
    z-index: 20 !important;
    background-color: white !important;
}

/* Keep buttons visible but don't override their background color */
body.login button[type="submit"],
body.logout button[type="submit"] {
    position: relative !important;
    z-index: 20 !important;
}

/* Dark mode input backgrounds */
body.login.dark input[type="text"],
body.login.dark input[type="password"],
body.logout.dark input[type="text"],
body.logout.dark input[type="password"] {
    background-color: rgb(31, 41, 55) !important;
}

/* Ensure all text is readable */
body.login h1,
body.login label,
body.login a,
body.logout h1,
body.logout label,
body.logout a {
    position: relative !important;
    z-index: 20 !important;
}

/* Hide the side image section if using full background */
body.login #page > div.bg-cover,
body.logout #page > div.bg-cover {
    display: none !important;
}