/* ── Custom Admin Readability & Mobile Fixes ── */
/* Overrides jazzmin theme to ensure text is always readable */

/* Force readable text colors across all admin pages */
body.change-form, body.change-list, body.model-admin {
    color: #212529 !important;
}

/* Field labels and help text */
.field-box label, .field-label, .form-row label,
.help, .help-block, .help-text, .fieldset-description {
    color: #495057 !important;
}

/* Read-only fields */
.readonly-field, .help-block {
    color: #6c757d !important;
}

/* Form inputs and textareas */
.form-control, input[type="text"], input[type="email"],
input[type="number"], input[type="url"], input[type="password"],
textarea, select {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

/* Form control focus state */
.form-control:focus, input:focus, textarea:focus, select:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Changelist table */
.results table th {
    color: #212529 !important;
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.results table td {
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

.results table tr:hover td {
    background-color: #f8f9fa !important;
}

/* Status badges and labels in admin */
.badge, .label, .tag {
    color: #212529 !important;
}

/* Date hierarchy */
.date-hierarchy {
    color: #212529 !important;
}

.date-hierarchy a {
    color: #007bff !important;
}

/* Filter sidebar */
#changelist-filter {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

#changelist-filter h3 {
    color: #212529 !important;
}

#changelist-filter label {
    color: #495057 !important;
}

/* Action bar */
#changelist-form .actions {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

#changelist-form .actions label {
    color: #212529 !important;
}

/* Pagination */
.pagination {
    color: #212529 !important;
}

.pagination a {
    color: #007bff !important;
}

.pagination .current {
    color: #fff !important;
    background-color: #007bff !important;
}

/* Submit row */
.submit-row {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

.submit-row label {
    color: #212529 !important;
}

/* Fieldsets */
fieldset {
    border: 1px solid #dee2e6 !important;
}

fieldset .module {
    border: none !important;
}

/* Tab labels (for horizontal_tabs format) */
.nav-tabs .nav-link {
    color: #495057 !important;
}

.nav-tabs .nav-link.active {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
}

/* Inline formsets */
.inline-group h3 {
    color: #212529 !important;
}

.inline-group .tabular table th {
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

.inline-group .tabular table td {
    color: #212529 !important;
}

/* Object tools */
.object-tools {
    background-color: #f8f9fa !important;
}

.object-tools a {
    color: #fff !important;
}

/* Messages / alerts */
.messagelist .success {
    background-color: #d4edda !important;
    color: #155724 !important;
}

.messagelist .error {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

.messagelist .warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
}

.messagelist .info {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
}

/* Dark mode support - ensure readability in dark theme */
body.dark-mode, body[class*="dark"] {
    color: #e0e0e0 !important;
}

body.dark-mode .form-control,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

body.dark-mode .results table td,
body.dark-mode .results table th {
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

/* Ensure inline formsets are readable */
.inline-group .tabular .original {
    color: #212529 !important;
}

/* Fix for readonly fields in change form */
fieldset .form-row .readonly {
    color: #6c757d !important;
    background-color: #f8f9fa !important;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

/* Ensure description text in fieldsets is readable */
fieldset .description {
    color: #6c757d !important;
    font-size: 0.85em;
}

/* ══════════════════════════════════════════ */
/* ── MOBILE RESPONSIVE STYLES ────────────── */
/* ══════════════════════════════════════════ */

/* Tablet and below (max-width: 992px) */
@media (max-width: 992px) {
    /* Make tables horizontally scrollable */
    .results, .inline-group .tabular {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .results table, .inline-group .tabular table {
        min-width: 600px;
    }
    
    /* Stack fieldsets vertically */
    .form-row {
        display: block !important;
    }
    
    .field-box {
        width: 100% !important;
        float: none !important;
        margin-bottom: 1rem;
    }
    
    /* Adjust submit row */
    .submit-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 1rem;
    }
    
    .submit-row .deletelink {
        margin-left: auto;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* Reduce padding on main content */
    #content {
        padding: 0.75rem !important;
    }
    
    /* Stack columns in change form */
    .form-row .field-box {
        display: block;
        width: 100% !important;
        padding: 0.5rem 0;
    }
    
    /* Make filter sidebar collapsible or stack */
    #changelist-filter {
        position: static;
        width: 100%;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    #changelist-filter h3 {
        font-size: 1rem;
    }
    
    /* Adjust action bar for mobile */
    #changelist-form .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    #changelist-form .actions select {
        flex: 1;
        min-width: 120px;
    }
    
    #changelist-form .actions button {
        flex: 1;
        min-width: 100px;
    }
    
    /* Make pagination more touch-friendly */
    .pagination a, .pagination span {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    /* Stack object tools */
    .object-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    
    .object-tools a {
        flex: 1;
        text-align: center;
        padding: 0.5rem;
    }
    
    /* Reduce font sizes for readability */
    .results table th,
    .results table td {
        padding: 0.4rem;
        font-size: 0.85rem;
    }
    
    /* Make status badges smaller on mobile */
    .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Stack nav tabs vertically on mobile */
    .nav-tabs {
        display: flex;
        flex-direction: column;
    }
    
    .nav-tabs .nav-link {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .nav-tabs .nav-link:first-child {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }
    
    .nav-tabs .nav-link:last-child {
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }
}

/* Small mobile (max-width: 576px) */
@media (max-width: 576px) {
    /* Further reduce padding */
    #content {
        padding: 0.5rem !important;
    }
    
    /* Full-width buttons on small screens */
    .submit-row input[type="submit"],
    .submit-row .deletelink {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    /* Stack inline formset rows */
    .inline-group .tabular .original {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    /* Make date hierarchy scrollable */
    .date-hierarchy {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
    }
    
    /* Reduce header sizes */
    h1, h2, h3 {
        font-size: 1.2rem;
    }
    
    /* Make help text more compact */
    .help, .help-block {
        font-size: 0.8rem;
        margin-top: 0.25rem;
    }
    
    /* Touch-friendly form controls */
    .form-control, input, select, textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    /* Make checkboxes and radios larger */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }
}

/* Landscape phone (max-width: 576px and landscape) */
@media (max-width: 576px) and (orientation: landscape) {
    .form-row .field-box {
        display: inline-block;
        width: 48% !important;
        vertical-align: top;
    }
}

/* Print styles */
@media print {
    #header, #nav-sidebar, #footer, .submit-row, .actions, .pagination {
        display: none !important;
    }
    
    #content {
        margin: 0;
        padding: 0;
    }
    
    .results table {
        font-size: 10pt;
    }
}