/**
 * Accessibility Improvements for Django Admin
 * Focus visibility and keyboard navigation enhancements
 * 
 * WCAG 2.1 Criterion 2.4.7 (Focus Visible) - Level AA
 * WCAG 2.1 Criterion 1.4.11 (Non-text Contrast) - Level AA
 */

/* ==========================================================================
   Global Focus Styles
   ========================================================================== */

/**
 * High-visibility focus indicator for all interactive elements
 * Uses :focus-visible to show outline only for keyboard navigation
 */
*:focus-visible {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Fallback for browsers without :focus-visible support */
*:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Remove outline for mouse/touch (only in browsers supporting :focus-visible) */
*:focus:not(:focus-visible) {
    outline: none !important;
}


/* ==========================================================================
   Form Elements - Enhanced Focus
   ========================================================================== */

/**
 * Input fields, textareas, and selects get additional box-shadow for clarity
 */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
    outline: 2px solid #0066cc !important;
    outline-offset: 0 !important;
}

/**
 * Checkboxes and Radio Buttons
 */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus,
input[type="radio"]:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;
}


/* ==========================================================================
   Buttons - Enhanced Focus
   ========================================================================== */

button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
input[type="button"]:focus,
input[type="button"]:focus-visible {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
}

/**
 * Save buttons in Django Admin
 */
.submit-row input:focus,
.submit-row input:focus-visible {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   Links - Enhanced Focus
   ========================================================================== */

a:focus,
a:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
    background-color: rgba(0, 102, 204, 0.1) !important;
}

/**
 * Django Admin specific links
 */
.breadcrumbs a:focus,
.breadcrumbs a:focus-visible {
    outline: 2px solid #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}


/* ==========================================================================
   Django Admin Specific Elements
   ========================================================================== */

/**
 * Action Dropdown
 */
select[name="action"]:focus,
select[name="action"]:focus-visible {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
}

/**
 * Changelist Row Links
 */
#changelist table tbody tr:focus-within {
    background-color: rgba(0, 102, 204, 0.05) !important;
}

/**
 * Search Field
 */
#searchbar:focus,
#searchbar:focus-visible {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
}

/**
 * Date/Time Pickers
 */
.datetimeshortcuts a:focus,
.datetimeshortcuts a:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   Select2 / Autocomplete Widget Focus
   ========================================================================== */

/**
 * Select2 container focus (django-autocomplete-light)
 */
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
    outline: 2px solid #0066cc !important;
}

.select2-search__field:focus {
    outline: 2px solid #0066cc !important;
    border-color: #0066cc !important;
}

/**
 * Select2 dropdown items
 */
.select2-results__option--highlighted {
    background-color: #0066cc !important;
    color: #ffffff !important;
}

.select2-results__option:focus,
.select2-results__option[aria-selected="true"]:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: -2px !important;
}


/* ==========================================================================
   Jazzmin / AdminLTE Specific Overrides
   ========================================================================== */

/**
 * Sidebar Menu Items
 */
.nav-sidebar .nav-link:focus,
.nav-sidebar .nav-link:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: -2px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/**
 * Top Menu Items
 */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: -2px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/**
 * Pagination Links
 */
.pagination .page-link:focus,
.pagination .page-link:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;
}


/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

/**
 * Ensure focus is visible in Windows High Contrast Mode
 */
@media (prefers-contrast: high) {
    *:focus,
    *:focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 3px !important;
    }
}


/* ==========================================================================
   Skip Links (add if needed for keyboard navigation)
   ========================================================================== */

/**
 * Skip to main content link (hidden until focused)
 * Uncomment if implementing skip links
 */
/*
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0066cc;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #ffffff;
}
*/


/* ==========================================================================
   Productivity Enhancements - Helper Buttons ausblenden
   ========================================================================== */

/**
 * Admin-Helper-Buttons (Stift, Plus, Auge) visuell zurückhaltender
 * wenn sie aus Tab-Order entfernt wurden
 */
a[tabindex="-1"],
button[tabindex="-1"] {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

a[tabindex="-1"]:hover,
button[tabindex="-1"]:hover {
    opacity: 1;
}

/**
 * "Heute" und Kalender-Links: kleiner und unauffälliger
 */
.datetimeshortcuts a[tabindex="-1"] {
    font-size: 0.85em;
    opacity: 0.6;
}

.datetimeshortcuts a[tabindex="-1"]:hover {
    opacity: 1;
}

/**
 * Related widget wrapper: Buttons kompakter
 */
.related-widget-wrapper a[tabindex="-1"] {
    padding: 2px 6px;
    font-size: 0.9em;
}

/**
 * Visueller Hinweis: Nur tabbbare Felder haben starken Fokus
 */
input:not([tabindex="-1"]):focus,
select:not([tabindex="-1"]):focus,
textarea:not([tabindex="-1"]):focus {
    /* Verstärkter Fokus für relevante Felder */
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.3) !important;
}


/* ==========================================================================
   Customer Dropdown - Breiter für bessere Lesbarkeit
   ========================================================================== */

/**
 * Breiteres Dropdown NUR für Kundenauswahl (#id_customer)
 * CSS greift automatisch wenn Dropdown erscheint - KEIN JavaScript nötig
 */

/* Dropdown-Container wenn Customer-Select geöffnet ist */
.select2-container--open[id*="id_customer"] + .select2-container--open .select2-dropdown,
.select2-dropdown[id*="id_customer"],
body .select2-dropdown-wide {
    min-width: 500px !important;
    max-width: 800px !important;
}

/* Text-Wrapping für lange Namen */
.select2-container--open[id*="id_customer"] .select2-results__option,
.select2-dropdown[id*="id_customer"] .select2-results__option,
.select2-dropdown-wide .select2-results__option {
    white-space: normal !important;
    word-wrap: break-word !important;
}