/*
 * ============================================================
 * Reset admin_interface theme overrides on selector widgets
 * to restore default Django admin selector behavior.
 *
 * The admin_interface (django-admin-interface) package sets
 * problematic rules on .related-widget-wrapper that break the
 * filter_horizontal/filter_vertical selector layout:
 *   - flex-wrap: nowrap
 *   - white-space: nowrap
 *   - max-width: 1000px
 * These prevent the selector panels from fitting within the
 * available content area.
 *
 * Sections 1-9 use UNIVERSAL selectors (targeting the .selector
 * widget class) so they apply to ALL filter_horizontal fields
 * regardless of field name — Database, Endpoint, Resource,
 * Invite, Project, User, Group, etc.
 * ============================================================
 */

/* --- 1. Form row: remove overflow clipping --- */
/*
 * Any form row that contains a selector widget needs visible
 * overflow so the widget panels are not clipped.
 */
.form-row:has(.selector) {
    overflow: visible !important;
}

/* --- 2. Flex container: stack label above widget --- */
/*
 * admin-interface renders form rows as flex containers with the
 * label and widget side-by-side. For selector widgets, stacking
 * them vertically gives the panels the full content width.
 */
.form-row:has(.selector) .flex-container {
    flex-direction: column !important;
}

.form-row:has(.selector) .flex-container > label {
    margin-bottom: 8px;
    width: auto !important;
}

/* --- 3. Related widget wrapper: fully reset admin_interface overrides --- */
body.admin-interface .form-row:has(.selector) .related-widget-wrapper {
    /* Reset to Django default behavior */
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    max-width: none !important;
    gap: 0 10px !important;
    overflow: visible !important;
    flex-grow: 1 !important;
}

/* --- 4. Selector: fill available content width naturally --- */
body.admin-interface .selector {
    display: flex !important;
    flex-grow: 1 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    gap: 0 10px !important;
}

/* --- 5. Selector panels: equal width, allow shrinking --- */
body.admin-interface .selector .selector-available,
body.admin-interface .selector .selector-chosen {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- 5b. Select boxes: comfortable height and full width --- */
/*
 * Combines the former sections 5b (height) and 7 (width) into
 * a single rule targeting all select elements inside selectors.
 */
body.admin-interface .selector select {
    height: 250px !important;
    min-height: 160px !important;
    max-height: 300px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- 6. Title divs and headings: constrain text --- */
body.admin-interface .selector .selector-available-title,
body.admin-interface .selector .selector-chosen-title {
    overflow: hidden !important;
}

body.admin-interface .selector .selector-available-title p.helptext,
body.admin-interface .selector .selector-chosen-title p.helptext {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.625rem !important;
}

/* Also target h2 in case older Django templates use them */
body.admin-interface .selector .selector-available h2,
body.admin-interface .selector .selector-chosen h2 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* --- 7. (Merged into 5b above) --- */

/* --- 8. Chooser arrows: center properly --- */
body.admin-interface .selector ul.selector-chooser {
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* --- 9. Hide add/change icons next to selector widgets --- */
/*
 * The green "+" (add) icon next to filter_horizontal selectors
 * is unnecessary — users should not create related objects
 * (groups, users, projects, etc.) from within a change form.
 */
.form-row:has(.selector) .related-widget-wrapper-link {
    display: none !important;
}

/* --- 10. Choose all / Remove all buttons: restore Django's native text-link style --- */
/*
 * admin-interface (admin-interface.css lines 263-273) styles
 * button.selector-chooseall/clearall as colored buttons with
 * background-color and padding:8px 12px. We reset these to match
 * Django's default widgets.css: plain bold text links with small
 * arrow icons, no background.
 *
 * Uses html body.admin-interface for maximum specificity (0-3-2 or
 * higher) and !important on every property to guarantee override on
 * ALL admin pages (user, group, database, endpoint, resource, etc.).
 *
 * Each property is declared individually (no shorthand) to prevent
 * CSS shorthand reset conflicts when both sides use !important.
 */
html body.admin-interface .selector .selector-chooseall,
html body.admin-interface .selector .selector-clearall,
html body.admin-interface .selector button.selector-chooseall,
html body.admin-interface .selector button.selector-clearall,
html body.admin-interface .selector a.selector-chooseall,
html body.admin-interface .selector a.selector-clearall {
    display: inline-block !important;
    height: 16px !important;
    line-height: 16px !important;
    text-align: left !important;
    font-weight: bold !important;
    color: var(--body-quiet-color) !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    cursor: default !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: inherit !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* "Choose all" button: icon on the right */
html body.admin-interface .selector .selector-chooseall,
html body.admin-interface .selector button.selector-chooseall,
html body.admin-interface .selector a.selector-chooseall {
    padding: 0 18px 0 0 !important;
    background-color: transparent !important;
    background-image: url(../../admin/img/selector-icons.svg) !important;
    background-position: right -160px !important;
    background-repeat: no-repeat !important;
}

/* "Remove all" button: icon on the left */
html body.admin-interface .selector .selector-clearall,
html body.admin-interface .selector button.selector-clearall,
html body.admin-interface .selector a.selector-clearall {
    padding: 0 0 0 18px !important;
    background-color: transparent !important;
    background-image: url(../../admin/img/selector-icons.svg) !important;
    background-position: 0 -128px !important;
    background-repeat: no-repeat !important;
}

/* Hover/focus states: text becomes link color, icon shifts to hover sprite position */
html body.admin-interface .selector .selector-chooseall:focus,
html body.admin-interface .selector .selector-chooseall:hover,
html body.admin-interface .selector button.selector-chooseall:focus,
html body.admin-interface .selector button.selector-chooseall:hover,
html body.admin-interface .selector a.selector-chooseall:focus,
html body.admin-interface .selector a.selector-chooseall:hover {
    color: var(--link-fg) !important;
    background-color: transparent !important;
    background-position: 100% -176px !important;
    cursor: pointer !important;
}

html body.admin-interface .selector .selector-clearall:focus,
html body.admin-interface .selector .selector-clearall:hover,
html body.admin-interface .selector button.selector-clearall:focus,
html body.admin-interface .selector button.selector-clearall:hover,
html body.admin-interface .selector a.selector-clearall:focus,
html body.admin-interface .selector a.selector-clearall:hover {
    color: var(--link-fg) !important;
    background-color: transparent !important;
    background-position: 0 -144px !important;
    cursor: pointer !important;
}

/* --- 10b. Help text below selector: left-aligned (Django default) --- */
/*
 * The help text (e.g., field descriptions) sits outside the selector
 * in a <div class="help"> sibling of .flex-container. Ensure it is
 * explicitly left-aligned to match Django's default admin styling.
 */
.form-row:has(.selector) .help {
    text-align: left !important;
}

/* --- 11. Date/time picker: prevent stretching --- */

/*
 * Date and time input fields — use Django's default sizing.
 * Django's widgets.css sets .vDateField to width:11em and
 * .vTimeField to width:8em, which fits content comfortably.
 * We no longer override these widths.
 */

/* Date/time row: inline, don't stretch */
body.admin-interface .form-row .datetime {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 500px !important;
}

body.admin-interface .form-row .datetime br {
    display: none !important;
}

body.admin-interface .form-row .datetime .timezonewarning {
    display: block !important;
    white-space: nowrap !important;
}

/* Shortcut links (Today, Now, etc.) */
body.admin-interface .datetimeshortcuts {
    white-space: nowrap !important;
}

/*
 * Calendar popup — override .admin-interface .module { width: 100% }
 * from admin_interface/css/modules.css.
 *
 * The calendarbox is a .module element appended to <body> by Django's
 * DateTimeShortcuts.js. The admin-interface rule forces all .module
 * elements to width:100%, which stretches the popup across the page.
 *
 * We use an explicit width (19em matches Django's default) rather than
 * width:auto, because auto on an absolutely-positioned element with a
 * child table set to width:100% will still expand to fill the
 * containing block. A fixed width provides the constraint the table
 * needs.
 */
body.admin-interface .calendarbox.module,
html body.admin-interface .calendarbox.module {
    width: 19em !important;
    min-width: 0 !important;
    max-width: 19em !important;
    box-sizing: content-box !important;
}

body.admin-interface .calendarbox.module table,
html body.admin-interface .calendarbox.module table {
    width: 100% !important;
    table-layout: fixed !important;
}

body.admin-interface .calendarbox.module .calendar td,
body.admin-interface .calendarbox.module .calendar th {
    padding: 6px 8px !important;
}

body.admin-interface .calendarbox.module .calendar-shortcuts {
    width: auto !important;
}

body.admin-interface .calendarbox.module .calendar-cancel {
    width: auto !important;
}

/*
 * Clock popup — override .admin-interface .module { width: 100% }
 *
 * The clockbox is also a .module element appended to <body>.
 * Django's default is width:auto for .clockbox, but we set an
 * explicit width to prevent the 100% override from stretching it.
 * 10em comfortably fits "6 a.m." / "Noon" / "6 p.m." / "Midnight".
 */
body.admin-interface .clockbox.module,
html body.admin-interface .clockbox.module {
    width: 10em !important;
    min-width: 0 !important;
    max-width: 10em !important;
    box-sizing: content-box !important;
}

body.admin-interface .clockbox.module h2 {
    width: auto !important;
    white-space: nowrap !important;
}

body.admin-interface .clockbox.module .timelist {
    width: auto !important;
}

body.admin-interface .clockbox.module .timelist li {
    width: auto !important;
}

/* Related widget wrapper for datetime fields — don't stretch */
body.admin-interface .form-row:has(.vDateField) .related-widget-wrapper,
body.admin-interface .form-row:has(.vTimeField) .related-widget-wrapper {
    max-width: none !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: auto !important;
    flex-grow: 0 !important;
}

/* Flex container for datetime fields — don't stretch child */
body.admin-interface .form-row:has(.vDateField) .flex-container {
    flex-wrap: nowrap !important;
    align-items: center !important;
}