/**
 * Custom styles for django-autocomplete-light (DAL) Select2 widgets
 * AND native select elements to ensure consistent appearance across all form fields
 * PIXEL-PERFECT match for Tailwind CSS styling used in NUPMS forms
 * Target classes: w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-nu-teal-500
 */

/* ========================================
   NATIVE SELECT ELEMENTS STYLING
   Override browser defaults for consistency
   ======================================== */

/* Style all native select elements to match inputs */
/* EXCLUDE Select2-enhanced selects (they have select2-hidden-accessible class) */
select:not(.select2-hidden-accessible) {
    /* Remove browser default styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Ensure consistent background */
    background-color: white;
    background-image: none;

    /* Add custom arrow using background SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;

    /* Add padding on the right for the arrow */
    padding-right: 2.5rem !important;
}

/* Focus state for native selects (but not Select2-enhanced) */
select:not(.select2-hidden-accessible):focus {
    outline: none;
    border-color: #d1d5db;  /* Keep border-gray-300 */
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.5);  /* ring-2 ring-nu-teal-500 */
}

/* ========================================
   DAL SELECT2 WIDGETS STYLING
   Match the native select styling above
   ======================================== */

/* Single select field - PIXEL-PERFECT Tailwind match */
.select2-container--default .select2-selection--single {
    /* Remove all default Select2 styling */
    height: auto !important;
    min-height: 0 !important;

    /* Apply exact Tailwind classes */
    padding: 0.5rem 0.75rem !important;  /* py-2 px-3 */
    border: 1px solid #d1d5db !important;  /* border border-gray-300 */
    border-radius: 0.375rem !important;  /* rounded-md - EXACT: 6px */
    background-color: #ffffff !important;

    /* Use custom arrow SVG (same as native selects) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;  /* Add space for the arrow */

    /* Typography to match native select */
    font-size: 1rem;
    line-height: 1.5rem;
    color: #111827;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.5rem !important;
    color: inherit !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;  /* text-gray-400 */
}

/* Hide Select2's built-in arrow - BOTH container and nested <b> element */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Also hide the nested <b> element that creates the actual arrow visual */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
    border-width: 0 !important;
}

/* Hide crispy-tailwind's arrow overlay on Select2 fields */
/* Crispy-tailwind adds a div with pointer-events-none as a sibling after the select */
/* When Select2 initializes, it creates .select2-container, but the arrow div remains */
.select2-container + div.pointer-events-none {
    display: none !important;
}

/* Also target if the div is adjacent to the hidden original select */
select.select2-hidden-accessible + div.pointer-events-none {
    display: none !important;
}

/* Focus state - EXACT match for focus:outline-none focus:ring-2 focus:ring-nu-teal-500 */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    outline: none !important;
    border-color: #d1d5db !important;  /* Keep original border color */
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.5) !important;  /* ring-2 ring-nu-teal-500 */
}

/* Multi-select field (tags) - PIXEL-PERFECT Tailwind match */
.select2-container--default .select2-selection--multiple {
    min-height: 0 !important;
    border: 1px solid #d1d5db !important;  /* border border-gray-300 */
    border-radius: 0.375rem !important;  /* rounded-md - EXACT: 6px */
    padding: 0.25rem 0.5rem !important;
    background-color: #ffffff !important;
    background-image: none !important;
    line-height: 1.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #0d9488;  /* bg-nu-teal-600 */
    border: 1px solid #0d9488;
    border-radius: 0.25rem;  /* rounded */
    color: white;
    padding: 0.25rem 0.5rem;
    margin: 0.125rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white;
    margin-right: 0.375rem;
    font-weight: bold;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #f3f4f6;  /* Slightly lighter on hover */
}

/* Search input inside multi-select */
.select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 0;
    padding: 0.25rem;
    height: auto;
    min-height: 1.5rem;
}

/* Dropdown container */
.select2-container--default .select2-dropdown {
    border: 1px solid #0d9488 !important;  /* nu-teal-600 */
    border-radius: 0.375rem !important;  /* rounded-md - EXACT: 6px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;  /* shadow-md */
}

/* Search input in dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d1d5db !important;  /* border-gray-300 */
    border-radius: 0.375rem !important;  /* rounded-md - EXACT: 6px */
    padding: 0.5rem 0.75rem !important;  /* py-2 px-3 */
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: #0d9488;  /* nu-teal-600 */
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);  /* ring-2 ring-nu-teal-500 */
}

/* Results */
.select2-container--default .select2-results__option {
    padding: 0.5rem 0.75rem;  /* py-2 px-3 */
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f0fdfa;  /* bg-nu-teal-50 */
    color: #0f766e;  /* text-nu-teal-700 */
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0d9488;  /* bg-nu-teal-600 */
    color: white;
}

/* Loading indicator */
.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #9ca3af;  /* text-gray-400 */
}

/* Ensure full width */
.select2-container {
    width: 100% !important;
}

/* Clear button styling */
.select2-container--default .select2-selection__clear {
    color: #6b7280;  /* text-gray-500 */
    font-size: 1.25rem;
    font-weight: normal;
    margin-right: 0.5rem;
}

.select2-container--default .select2-selection__clear:hover {
    color: #ef4444;  /* text-red-500 */
}

/* Disabled state */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #f9fafb;  /* bg-gray-50 */
    color: #9ca3af;  /* text-gray-400 */
    cursor: not-allowed;
}

/* ========================================
   MARKDOWN CONTENT STYLING
   For rendered markdown in interaction notes
   ======================================== */

.markdown-content {
    line-height: 1.75;
}

.markdown-content p {
    margin-bottom: 1rem;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

.markdown-content strong {
    font-weight: 600;
    color: #111827;  /* text-gray-900 */
}

.markdown-content em {
    font-style: italic;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.markdown-content ul {
    list-style-type: disc;
}

.markdown-content ol {
    list-style-type: decimal;
}

.markdown-content li {
    margin-bottom: 0.5rem;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-weight: 600;
    color: #111827;  /* text-gray-900 */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.markdown-content h1 { font-size: 1.875rem; }
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.25rem; }
.markdown-content h4 { font-size: 1.125rem; }

.markdown-content code {
    background-color: #f3f4f6;  /* bg-gray-100 */
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
}

.markdown-content pre {
    background-color: #f3f4f6;  /* bg-gray-100 */
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown-content pre code {
    background-color: transparent;
    padding: 0;
}

.markdown-content a {
    color: #0d9488;  /* nu-teal-600 */
    text-decoration: underline;
}

.markdown-content a:hover {
    color: #0f766e;  /* nu-teal-700 */
}

.markdown-content blockquote {
    border-left: 4px solid #0d9488;  /* nu-teal-600 */
    padding-left: 1rem;
    margin-left: 0;
    margin-bottom: 1rem;
    color: #6b7280;  /* text-gray-500 */
    font-style: italic;
}

.markdown-content hr {
    border: 0;
    border-top: 1px solid #e5e7eb;  /* border-gray-200 */
    margin: 1.5rem 0;
}

/* ========================================
   ACCESSIBILITY - FOCUS INDICATORS
   Ensure all interactive elements have visible focus
   ======================================== */

/* Primary action buttons - teal background */
a.bg-nu-teal-600:focus,
button.bg-nu-teal-600:focus,
input[type="submit"].bg-nu-teal-600:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;  /* ring-2 ring-offset-2 ring-nu-teal-600 */
}

/* Secondary/gray buttons */
a.bg-gray-500:focus,
button.bg-gray-500:focus,
a.bg-gray-600:focus,
button.bg-gray-600:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6b7280;  /* ring-2 ring-offset-2 ring-gray-500 */
}

/* White/light background buttons */
a.bg-white:focus,
button.bg-white:focus,
a.bg-gray-100:focus,
button.bg-gray-100:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;  /* ring-2 ring-offset-2 ring-nu-teal-600 */
}

/* Blue buttons (used in some places) */
a.bg-blue-600:focus,
button.bg-blue-600:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;  /* ring-2 ring-offset-2 ring-blue-600 */
}

/* Red/danger buttons */
a.bg-red-600:focus,
button.bg-red-600:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #dc2626;  /* ring-2 ring-offset-2 ring-red-600 */
}

/* Green buttons */
a.bg-green-600:focus,
button.bg-green-600:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #16a34a;  /* ring-2 ring-offset-2 ring-green-600 */
}

/* Text links - visible underline focus */
a.text-nu-teal-600:focus,
a.text-blue-600:focus {
    outline: none;
    text-decoration: underline;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.3);  /* subtle ring */
    border-radius: 2px;
}

/* Filter toggle buttons (bg-gray-100) */
button.bg-gray-100:focus,
button.hover\:bg-gray-200:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
}

/* Form inputs - ensure focus visible */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
textarea:focus {
    outline: none;
    border-color: #0d9488;  /* nu-teal-600 */
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.3);  /* ring-2 ring-nu-teal-500/30 */
}

/* Checkbox and radio focus */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.5);
}