/* Djmote admin tweaks layered on top of django-unfold. */

/* The action bar (#changelist-actions) sets text-white on its container, so
   the native <select name="action"> inherits white text and its options
   render white-on-white (invisible). Force a readable control. */
#changelist-actions select,
#changelist-actions select option {
    color: #111827 !important;
    background-color: #ffffff !important;
}

#changelist-actions select {
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: 16rem;
}

/* Dark mode: keep the dropdown legible against a dark control. */
.dark #changelist-actions select,
.dark #changelist-actions select option {
    color: #e5e7eb !important;
    background-color: #1f2937 !important;
}

.dark #changelist-actions select {
    border-color: #374151 !important;
}

/* ---------------------------------------------------------------------------
   Change-form widgets.

   Our ModelAdmin classes are plain django.contrib.admin ones (not
   unfold.admin.ModelAdmin), so unfold never swaps in its styled widgets:
   edit-form inputs render as bare browser controls with a white background
   while unfold's Tailwind reset makes their text inherit the page color —
   in dark mode that's white-on-white (invisible). Paint every native form
   control ourselves, in both modes. Checkboxes/radios/files/buttons render
   fine natively and are excluded. ---------------------------------------- */
#content-main form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
#content-main form textarea,
#content-main form select {
    color: #111827 !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.4rem 0.6rem !important;
}

.dark #content-main form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.dark #content-main form textarea,
.dark #content-main form select,
.dark #content-main form select option {
    color: #e5e7eb !important;
    background-color: #1f2937 !important;
}

.dark #content-main form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.dark #content-main form textarea,
.dark #content-main form select {
    border-color: #374151 !important;
}

.dark #content-main form input::placeholder,
.dark #content-main form textarea::placeholder {
    color: #6b7280 !important;
}

/* Same treatment for the select2 widgets that autocomplete_fields render
   (the dropdown portal attaches to <body>, so it's scoped by .dark only). */
.dark .select2-container--admin-autocomplete .select2-selection {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .select2-container--admin-autocomplete .select2-selection__rendered {
    color: #e5e7eb !important;
}

.dark .select2-dropdown {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark .select2-search__field {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}

.dark .select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   Compact list pages on mobile web.

   By default unfold reflows each changelist row into a tall stacked "card"
   below the `lg` breakpoint (1024px): the <table> goes display:block, the
   column headers are hidden, each <tr> becomes a bordered card, and each <td>
   prints its field name via a ::before { content: attr(data-label) } label.
   That eats a lot of vertical scroll.

   We prefer the classic Django-admin look: one compact row per record, real
   column headers, and horizontal scroll for wide tables (unfold's result
   wrapper already provides the scroll container). So below 1024px we force the
   desktop table layout back on. Desktop (>= 1024px) is untouched — these rules
   never fire there. Scoped to #result_list so admin inline/edit tables are not
   affected. --------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    /* Re-assert real table semantics that unfold switched to block. */
    #result_list {
        display: table !important;
        width: 100% !important;
        font-size: 0.8125rem; /* a touch smaller so more fits per row */
    }

    #result_list thead {
        display: table-header-group !important;
    }

    #result_list tbody {
        display: table-row-group !important;
    }

    /* Un-hide the column headers unfold hides on small screens. */
    #result_list thead th {
        display: table-cell !important;
        padding: 0.4rem 0.6rem !important;
        white-space: nowrap;
    }

    /* Drop the per-row card chrome (border/margin/shadow/rounding). */
    #result_list tbody tr {
        display: table-row !important;
        margin-bottom: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Cells back to table-cell; suppress the injected mobile field label. */
    #result_list tbody tr > th,
    #result_list tbody tr > td {
        display: table-cell !important;
        padding: 0.4rem 0.6rem !important;
        white-space: nowrap;
        vertical-align: middle !important;
    }

    #result_list tbody tr > th::before,
    #result_list tbody tr > td::before {
        display: none !important;
        content: none !important;
    }

    /* Hide the "Select all rows" helper text unfold shows next to the
       header checkbox on mobile — the real checkbox header is back now. */
    #result_list thead th label span {
        display: none !important;
    }
}
