/*
 * django-filer button visibility fixes under django-unfold.
 *
 * filer's admin CSS targets django-cms-admin-style variables (--dca-white,
 * --default-button-bg, --button-fg, …) that Unfold does not define. They fall
 * back to white text on light/transparent backgrounds, making filer's buttons
 * invisible: the "Choose File" button on the change-form widget, and the
 * "New Folder" / "Upload Files" buttons in the media-library popup.
 *
 * Restore contrast with explicit colours. Selectors are made a bit more
 * specific (element + class, doubled class) than filer's own rules so they win
 * regardless of stylesheet load order. Colours: Unfold neutral text (#374151),
 * white surface, CPS gold (#c2a476) on hover.
 */

/* --- Change-form widget: "Choose File" (a <span>, and replace / edit variants) --- */
.choose-file,
.choose-file .fa,
.choose-file .cms-icon,
.filerFile .related-lookup .replace-file,
.filerFile .related-lookup .edit-file {
    color: #374151 !important;
}

/* --- Media-library popup toolbar: "New Folder" / "Upload Files" --- */
a.navigator-button.navigator-button {
    background-color: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

a.navigator-button.navigator-button:hover {
    background-color: #c2a476 !important;
    color: #ffffff !important;
    border-color: #ab8b5d !important;
}

/* --- Media-library popup search: icon + breadcrumb overlap --- */

/* The search trigger is a <button> (not an <a>), so the anchor rules above miss
   it — its fa-search icon stays white. Make it dark. */
.filter-files-button,
.filter-files-button .fa-search,
button.navigator-button,
button.navigator-button .fa {
    color: #374151 !important;
    background-color: transparent !important;
    border: 0 !important;
}

/* Overlap fix: Unfold breaks filer's CSS-table row (the folder-name wrapper
   renders as display:table and stacks on top of the table-cell search form).
   Lay the top-nav row out with flex so the breadcrumb and search sit side by
   side, and give the search field an opaque surface. */
.navigator-top-nav .breadcrumbs-container-inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}
.navigator-top-nav .navigator-breadcrumbs-name-dropdown-wrapper {
    display: inline-flex !important;
    white-space: nowrap !important;
}
.navigator-top-nav .filter-files-container {
    display: inline-block !important;
    margin-left: auto !important;  /* push the search box to the far right */
}
.filter-files-field {
    background-color: #ffffff !important;
}

/* --- Selected-image widget: keep it a compact, tidy card under Unfold --- */
/* filer renders this widget at full page-width with the change / edit / clear
   buttons floated to the far right, and Unfold's img{display:block} reset breaks
   filer's inline+float row so the buttons dropped BELOW the thumbnail and
   overflowed into the next field. An earlier flex override kept them on one line
   but left the widget stretched across the whole content column, flinging the
   action buttons to the far edge.

   Cap the widget to its content and lay it out as a single flex row so the
   thumbnail, filename and action buttons sit together. Only the filename grows
   (and ellipsises on overflow); the thumbnail and buttons keep their fixed size. */
.filer-widget.filer-widget {
    max-width: 520px;
}
form .form-row .filer-dropzone {
    min-width: 0 !important;  /* filer sets min-width:215px; let the card shrink in narrow columns */
}
form .form-row .filer-dropzone .filerFile.js-file-selector {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    height: auto !important;
    width: calc(100% - 40px) !important;
}
/* Thumbnail + action buttons keep their size; the filename takes the rest. */
form .form-row .filer-dropzone .filerFile.js-file-selector > * {
    flex: 0 0 auto;
    float: none !important;
    margin: 0 !important;
}
form .form-row .filer-dropzone .filerFile.js-file-selector .description_text {
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Nav sidebar: undo filer's global `.hidden { display:none !important }` --- */
/* filer ships an unlayered `.hidden { display: none !important }` utility. Unfold's
   nav-sidebar wrapper keeps a base `.hidden` class and reveals itself through its
   *layered* `.xl:block` utility (plus Alpine's `.xl:hidden!` / `.block!` toggles).
   filer's !important beats Unfold's layered utility, so on every admin page that
   loads filer's CSS (i.e. any page with a filer widget) the sidebar is forced
   display:none and its show/hide toggle looks dead. Re-assert Unfold's intended
   visibility for the sidebar wrapper only — the element that carries both `.hidden`
   and `.xl:block` and contains #nav-sidebar. */

/* Desktop (>= Unfold's xl breakpoint, 80rem): show the expanded sidebar; stay
   hidden only when Alpine has collapsed it (it then adds `.xl:hidden!`). */
@media (min-width: 80rem) {
    .hidden.xl\:block:has(#nav-sidebar):not(.xl\:hidden\!) {
        display: block !important;
    }
}
/* Mobile: off-canvas sidebar when opened via the toggle (Alpine adds `.block!`). */
.hidden.xl\:block.block\!:has(#nav-sidebar) {
    display: block !important;
}

/* Same filer `.hidden!important` conflict hits the sidebar's navigation groups:
   Unfold wraps each app group in `.hidden ... has-[ol]:has-[li]:block`, i.e. it
   stays hidden until it actually contains items, then the layered utility reveals
   it. filer's !important pins them to display:none, so every group (and thus the
   whole app list) vanishes — the sidebar shows only the search box. Reveal any
   nav group that has items; groups with none stay hidden, as Unfold intends. */
#nav-sidebar .hidden:has(ol li) {
    display: block !important;
}

/* --- Related-widget-wrapper actions menu: hide it for filer fields --- */
/* filer's own widget already offers choose / edit / clear actions, so Django's
   RelatedFieldWidgetWrapper change / view / delete links are redundant. filer
   hides them with `.filer-widget + .related-widget-wrapper-link` (+ one more),
   but that misses Unfold's "delete from library" trash link, which is also
   non-functional here (Django never fills its href for filer's hidden-input
   widget) and, if it did work, would delete the underlying library image rather
   than clear the field (the widget's X button already does that).

   Since Unfold 0.86 the change/add/view/delete links no longer sit directly
   inside .related-widget-wrapper — they're grouped behind a single "more_vert"
   trigger button (in a div[x-data]) whose menu is teleported (Alpine
   x-teleport) into <body> on render, so it can't be targeted once open. Hide
   the trigger itself; with no way to open the menu the teleported links stay
   inert. */
.related-widget-wrapper:has(> .filer-widget) > [x-data*="openRelatedWidgetWrapper"] {
    display: none !important;
}