/* =======================================
   Django Unfold Admin: Custom Field Styles
   Author: Alaa Jrad
   ======================================= */

/* 1. Native disabled/readonly input, select, textarea */
input[disabled],
input[readonly],
select[disabled],
select[readonly],
textarea[disabled],
textarea[readonly] {
  background-color: #f5f5f5 !important;
  color: #777 !important;
  cursor: not-allowed !important;
  border: 1px dashed #ccc !important;
  opacity: 0.7;
}

/* 2. Readonly fields rendered as <p class="readonly"> */
p.readonly {
  background-color: #f5f5f5;
  color: #555;
  padding: 6px 10px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  font-style: italic;
  opacity: 0.9;
}

/* 3. Select2 fields (e.g., user field) - based on aria-disabled */
.select2-selection[aria-disabled="true"] {
  background-color: #f5f5f5 !important;
  color: #777 !important;
  border: 1px dashed #ccc !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* 4. Prevent glow on focus of disabled fields */
input[disabled]:focus,
select[disabled]:focus,
textarea[disabled]:focus {
  box-shadow: none !important;
}

/* 5. Optional: dim the label of disabled or readonly fields */
fieldset .form-row label {
  opacity: 0.95;
}

/* 6. Optional: style Select2 clear (x) icon for disabled fields */
.select2-selection[aria-disabled="true"] .select2-selection__clear {
  display: none !important;
}

/* =======================================
   Full-width subscriptions panel
   Unfold wraps readonly values in .readonly.max-w-2xl (672px).
   Remove that cap so the table can fill the page.
   ======================================= */
.field-display_subscriptions .readonly {
  max-width: 100% !important;
  width: 100%;
}

/* =======================================
   Dark mode: native <select> dropdown
   ======================================= */

/* color-scheme: dark tells the browser to render its native
   dropdown popup in dark mode (works in Chrome, Edge, Firefox).
   This is the only reliable way to style the native option list. */
.dark select {
  color-scheme: dark;
  background-color: #1f2937 !important; /* gray-800 */
  color: #f3f4f6 !important; /* gray-100 */
  border-color: #374151 !important; /* gray-700 */
}

/* Fallback option styling for browsers that support it */
.dark select option {
  background-color: #1f2937; /* gray-800 */
  color: #f3f4f6; /* gray-100 */
}

.dark select option:checked,
.dark select option:hover,
.dark select option:focus {
  background-color: #2563eb; /* blue-600 */
  color: #ffffff;
}

/* SelectMultiple list box */
.dark select[multiple] {
  color-scheme: dark;
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

.dark .select2-dropdown {
  background-color: #1f2937 !important; /* gray-800 */
  border-color: #374151 !important; /* gray-700 */
  color: #f3f4f6 !important; /* gray-100 */
}

/* Each result row */
.dark .select2-results__option {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
}

/* Highlighted / keyboard-focused row */
.dark .select2-results__option--highlighted,
.dark .select2-results__option[aria-selected="true"],
.dark .select2-results__option--highlighted[aria-selected] {
  background-color: #2563eb !important; /* blue-600 */
  color: #ffffff !important;
}

/* Currently selected row (already chosen value) */
.dark
  .select2-results__option[aria-selected="true"]:not(
    .select2-results__option--highlighted
  ) {
  background-color: #374151 !important; /* gray-700 */
  color: #f3f4f6 !important;
}

/* Search box inside the dropdown */
.dark .select2-search--dropdown .select2-search__field {
  background-color: #111827 !important; /* gray-900 */
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

/* The closed selection box text and arrow */
.dark .select2-selection--single {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

.dark .select2-selection--single .select2-selection__rendered {
  color: #f3f4f6 !important;
}

.dark .select2-selection--single .select2-selection__arrow b {
  border-color: #9ca3af transparent transparent transparent !important; /* gray-400 */
}

/* Empty (null) option placeholder text */
.dark .select2-selection__placeholder {
  color: #9ca3af !important; /* gray-400 */
}

/* =======================================
   Dark mode: native checkboxes & radios
   ======================================= */
.dark input[type="checkbox"],
.dark input[type="radio"] {
  color-scheme: dark;
  background-color: #1f2937; /* gray-800 */
  border: 1px solid #4b5563 !important; /* gray-600 */
  accent-color: #10b981; /* green-500 — colors the check/dot when checked */
}

.dark input[type="checkbox"]:hover:not(:disabled),
.dark input[type="radio"]:hover:not(:disabled) {
  border-color: #6b7280 !important; /* gray-500 */
}

.dark input[type="checkbox"]:focus,
.dark input[type="radio"]:focus {
  outline: 2px solid #10b981; /* green-500 */
  outline-offset: 1px;
  box-shadow: none !important;
}

.dark input[type="checkbox"]:disabled,
.dark input[type="radio"]:disabled {
  background-color: #374151 !important; /* gray-700 */
  border-color: #4b5563 !important; /* gray-600 */
  opacity: 0.5;
}

/* =======================================
   Light mode: checkboxes & radios
   ======================================= */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #10b981; /* green-500 */
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid #10b981;
  outline-offset: 1px;
}

/* =======================================
   Permission Toggle Switches (Active, Staff, Superuser)
   ======================================= */
.field-is_active input[type="checkbox"],
.field-is_staff input[type="checkbox"],
.field-is_superuser input[type="checkbox"],
.field-applies_to_payg input[type="checkbox"],
.field-applies_to_predefined_ticket input[type="checkbox"],
.field-applies_to_lifetime_ticket input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 24px;
  background: #d1d5db;
  background-image: none !important;
  border: none !important;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  margin: 0 10px 0 0;
  padding: 0;
}

.field-is_active input[type="checkbox"]:checked,
.field-is_staff input[type="checkbox"]:checked,
.field-is_superuser input[type="checkbox"]:checked,
.field-applies_to_payg input[type="checkbox"]:checked,
.field-applies_to_predefined_ticket input[type="checkbox"]:checked,
.field-applies_to_lifetime_ticket input[type="checkbox"]:checked {
  background: #10b981;
  background-image: none !important;
}

.field-is_active input[type="checkbox"]:checked:disabled,
.field-is_staff input[type="checkbox"]:checked:disabled,
.field-is_superuser input[type="checkbox"]:checked:disabled,
.field-applies_to_payg input[type="checkbox"]:checked:disabled,
.field-applies_to_predefined_ticket input[type="checkbox"]:checked:disabled,
.field-applies_to_lifetime_ticket input[type="checkbox"]:checked:disabled {
  background: #10b981 !important;
  opacity: 0.6;
}

.field-is_active input[type="checkbox"]::before,
.field-is_staff input[type="checkbox"]::before,
.field-is_superuser input[type="checkbox"]::before,
.field-applies_to_payg input[type="checkbox"]::before,
.field-applies_to_predefined_ticket input[type="checkbox"]::before,
.field-applies_to_lifetime_ticket input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
  box-shadow: none;
}

.field-is_active input[type="checkbox"]::after,
.field-is_staff input[type="checkbox"]::after,
.field-is_superuser input[type="checkbox"]::after,
.field-applies_to_payg input[type="checkbox"]::after,
.field-applies_to_predefined_ticket input[type="checkbox"]::after,
.field-applies_to_lifetime_ticket input[type="checkbox"]::after {
  display: none !important;
  content: none !important;
}

.field-is_active input[type="checkbox"]:checked::before,
.field-is_staff input[type="checkbox"]:checked::before,
.field-is_superuser input[type="checkbox"]:checked::before,
.field-applies_to_payg input[type="checkbox"]:checked::before,
.field-applies_to_predefined_ticket input[type="checkbox"]:checked::before,
.field-applies_to_lifetime_ticket input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

/* Dark mode */
.dark .field-is_active input[type="checkbox"],
.dark .field-is_staff input[type="checkbox"],
.dark .field-is_superuser input[type="checkbox"],
.dark .field-applies_to_payg input[type="checkbox"],
.dark .field-applies_to_predefined_ticket input[type="checkbox"],
.dark .field-applies_to_lifetime_ticket input[type="checkbox"] {
  background: #4b5563;
}

.dark .field-is_active input[type="checkbox"]:checked,
.dark .field-is_staff input[type="checkbox"]:checked,
.dark .field-is_superuser input[type="checkbox"]:checked,
.dark .field-applies_to_payg input[type="checkbox"]:checked,
.dark .field-applies_to_predefined_ticket input[type="checkbox"]:checked,
.dark .field-applies_to_lifetime_ticket input[type="checkbox"]:checked {
  background: #10b981;
}

.dark .field-is_active input[type="checkbox"]:checked:disabled,
.dark .field-is_staff input[type="checkbox"]:checked:disabled,
.dark .field-is_superuser input[type="checkbox"]:checked:disabled,
.dark .field-applies_to_payg input[type="checkbox"]:checked:disabled,
.dark .field-applies_to_predefined_ticket input[type="checkbox"]:checked:disabled,
.dark .field-applies_to_lifetime_ticket input[type="checkbox"]:checked:disabled {
  background: #10b981 !important;
  opacity: 0.6;
}

.dark .field-is_active input[type="checkbox"]::before,
.dark .field-is_staff input[type="checkbox"]::before,
.dark .field-is_superuser input[type="checkbox"]::before,
.dark .field-applies_to_payg input[type="checkbox"]::before,
.dark .field-applies_to_predefined_ticket input[type="checkbox"]::before,
.dark .field-applies_to_lifetime_ticket input[type="checkbox"]::before {
  background-color: #f3f4f6;
  box-shadow: none;
}