/**
 * @file admin-overlay.css
 * Styling for jQuery UI dialogs and the Drupal Media Library when rendered
 * in the frontend theme context (Layout Builder, node-form media widgets).
 * Uses Bootstrap 5 CSS custom properties; no Claro variables.
 *
 * NOTE: The Layout Builder off-canvas sidebar (#drupal-off-canvas-wrapper)
 * has its own self-contained dark-theme CSS from core/misc/dialog/off-canvas.
 * Do NOT override it here — core defines --off-canvas-text-color:#e5e5e5 on
 * a dark background; any background override without a matching text color
 * creates illegible light-gray-on-white text.
 */

/* ── Layout Builder: Bootstrap row negative margin fix ──────────────────── */
/*
 * Bootstrap .row with g-* / gy-* sets margin-top: calc(-1 * --bs-gutter-y).
 * Inside Layout Builder this pulls layout rows UP over "Abschnitt hinzufügen"
 * bars, causing buttons to visually overlap.
 * Root fix: all layout templates now use gx-* (horizontal gutter only).
 * This rule is a safety net for any remaining or future row with g-*/gy-*.
 */
.layout-builder .row {
  margin-top: 0;
}

/* ── Layout Builder: height: 100% reset for custom blocks ───────────────── */
/*
 * .block-custom-image-link and .nsa-splide use height: 100% so images fill
 * equal-height card columns on the frontend. In Layout Builder edit mode the
 * parent .col-* has no defined height (auto), so height: 100% creates a
 * circular dependency — blocks collapse to 0 px and the "Abschnitt / Block
 * hinzufügen" bars visually overlap displaced regions.
 * Reset to auto inside .layout-builder (present only in edit mode, not on
 * the published frontend page).
 */
.layout-builder .block-layout-builder.block-custom-image-link,
.layout-builder .block-layout-builder.block-custom-image-link .image-link-wrapper,
.layout-builder .block-layout-builder.block-custom-image-link .image-link-wrapper .image-container,
.layout-builder .block-layout-builder.block-custom-image-link .image-link-wrapper .image-container a {
  height: auto;
}
.layout-builder .block-layout-builder.block-custom-image-link .image-link-wrapper .image-container a img {
  height: auto;
  width: 100%;
  object-fit: cover;
}
.layout-builder .nsa-splide,
.layout-builder .nsa-splide .splide__track {
  height: auto;
  max-height: none;
}

/* ── jQuery UI dialog chrome ────────────────────────────────────────────── */

.ui-dialog {
  padding: 0;
  border: 0;
  border-radius: var(--bs-border-radius-lg, 0.5rem);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, .25);
  background: var(--bs-body-bg, #fff);
  font-family: inherit;
  font-size: inherit;
  color: var(--bs-body-color, #212529);
}

.ui-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bs-secondary-bg, #f8f9fa);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius-lg, 0.5rem) var(--bs-border-radius-lg, 0.5rem) 0 0;
}

.ui-dialog .ui-dialog-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.ui-dialog .ui-dialog-titlebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius, 0.375rem);
  cursor: pointer;
  opacity: 0.6;
  font-size: 1.25rem;
  line-height: 1;
  transition: opacity 0.15s, border-color 0.15s;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  opacity: 1;
  border-color: var(--bs-border-color, #dee2e6);
}

.ui-dialog .ui-dialog-titlebar-close::before {
  content: "×";
  font-size: 1.4rem;
  line-height: 1;
}

.ui-dialog .ui-dialog-content {
  padding: 0;
  overflow: auto;
  background: var(--bs-body-bg, #fff);
}

.ui-dialog .ui-dialog-buttonpane {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bs-secondary-bg, #f8f9fa);
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0 0 var(--bs-border-radius-lg, 0.5rem) var(--bs-border-radius-lg, 0.5rem);
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--bs-body-color, #212529);
  border-radius: var(--bs-border-radius, 0.375rem);
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
  background: var(--bs-secondary-bg, #f8f9fa);
}

/* ── Media Library: wrapper layout (sidebar menu + content area) ─────────── */

.media-library-wrapper {
  display: flex;
  min-height: 400px;
}

.media-library-menu {
  width: 180px;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  border-right: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-secondary-bg, #f8f9fa);
}

.media-library-menu__item {
  margin: 0;
}

.media-library-menu__link {
  display: block;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  color: var(--bs-body-color, #212529);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}

.media-library-menu__link:hover {
  background: rgba(0, 0, 0, .05);
  color: var(--bs-body-color, #212529);
  text-decoration: none;
}

.media-library-menu__link.active,
.media-library-menu__link[aria-current] {
  font-weight: 600;
  border-left-color: var(--bs-primary, #0d6efd);
  background: rgba(13, 110, 253, .06);
}

.media-library-content {
  flex-grow: 1;
  padding: 1rem;
  overflow: auto;
}

/* ── Media Library: image grid inside the dialog ─────────────────────────── */

/* Grid view only — :not(:has(table)) excludes the table/widget_table display.
   :has() is supported in all modern browsers used for Drupal admin work. */
form.js-media-library-views-form:not(:has(table)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  align-items: start;
}

/* ── Media Library: table view ───────────────────────────────────────────── */

/* Thumbnail column: constrain image size in the table view */
#media-library-view .views-field-thumbnail__target-id img,
#media-library-view .views-field-thumbnail-target-id img {
  width: 60px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Hover/selected state on table rows */
#media-library-view tr.js-media-library-item:hover td {
  background: rgba(13, 110, 253, .05);
  cursor: pointer;
}

#media-library-view tr.js-media-library-item.checked td {
  background: rgba(13, 110, 253, .1);
}

/* Messages div and submit button span the full grid width */
form.js-media-library-views-form #media-library-messages,
form.js-media-library-views-form #media-library-modal-selection,
form.js-media-library-views-form input[type="submit"] {
  grid-column: 1 / -1;
}

/* Submit "Auswahl einfügen" button */
form.js-media-library-views-form input[type="submit"] {
  margin-top: 0.25rem;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius, 0.375rem);
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  cursor: pointer;
}

form.js-media-library-views-form input[type="submit"]:hover {
  background: var(--bs-secondary-bg, #f8f9fa);
}

/* ── Individual media item card ──────────────────────────────────────────── */

.js-media-library-item.views-row {
  position: relative;
  border: 2px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  overflow: hidden;
  background: var(--bs-secondary-bg, #f8f9fa);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.js-media-library-item.views-row:hover {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, .15);
}

/* Selected state (JS adds .checked class) */
.js-media-library-item.checked,
.js-media-library-item:has(input:checked) {
  border-color: var(--bs-primary, #0d6efd);
  background: rgba(13, 110, 253, .06);
}

/* Checkbox: top-left overlay */
.js-media-library-item .js-click-to-select-checkbox {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  z-index: 2;
}

.js-media-library-item .js-click-to-select-checkbox .js-form-item {
  margin: 0;
}

/* Thumbnail image: fills width, fixed height, cropped */
.js-media-library-item img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

/* Name label below the thumbnail */
.js-media-library-item article > div:not(.js-media-library-item-preview):not(.contextual-region) {
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 0.2rem 0.4rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* Remove Drupal's default field wrapper margins inside cards */
.js-media-library-item .field {
  margin: 0;
}

/* ── Selected-items widget (on node form, below "Add media" button) ──────── */

.media-library-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Widget item (small variant) */
.media-library-item--small {
  position: relative;
  width: 120px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  overflow: hidden;
  background: var(--bs-secondary-bg, #f8f9fa);
}

.media-library-item--small img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.media-library-item__edit,
.media-library-item__remove {
  position: absolute;
  top: 0.25rem;
  padding: 0.15rem 0.35rem;
  font-size: 0.7rem;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: rgba(255, 255, 255, .85);
  color: var(--bs-body-color, #212529);
  cursor: pointer;
}

.media-library-item__edit  { right: 2.25rem; }
.media-library-item__remove { right: 0.25rem; }

/* ── Filter/search form above the grid ───────────────────────────────────── */

.media-library-content .view-filters {
  margin-bottom: 0.75rem;
}

.media-library-content .views-exposed-form .js-form-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.5rem 0 0;
}

.media-library-content .views-exposed-form label {
  margin: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}

.media-library-content .views-exposed-form input[type="text"],
.media-library-content .views-exposed-form select {
  font-size: 0.875rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius-sm, 0.25rem);
  padding: 0.2rem 0.5rem;
}

.media-library-content .views-exposed-form input[type="submit"] {
  padding: 0.2rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  cursor: pointer;
}

/* View-switch links (Raster / Tabelle) */
.media-library-content .view-header a {
  margin-right: 0.5rem;
  font-size: 0.875rem;
  color: var(--bs-primary, #0d6efd);
  text-decoration: none;
}

.media-library-content .view-header a.is-active {
  font-weight: 600;
  text-decoration: underline;
}