/**
 * @file
 * Views exposed-form — search row + collapsible filters panel.
 *
 * Companion to exposed-form.js. All selectors are scoped to elements created
 * by that behavior so other forms on the page are unaffected.
 */

/* ── Inner wrapper (filters + table) ─────────────────────────────────────── */
/*
 * .dct-view-inner is a new <div> injected by JS directly around .view-filters
 * and .view-content only. It excludes view headers, footers and pagers so CSS
 * targeting this wrapper affects exactly the filters card and the table.
 */
.dct-view-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Media view switcher — repositioned between toolbar and table ─────────── */
/*
 * JS moves .media-view-switcher out of .media-view-toolbar and places it
 * directly before .view-content (or after the toolbar on the grid page).
 * These rules ensure it stays right-aligned as its own compact row.
 */
.dct-view-inner > .media-view-switcher,
.view > .media-view-switcher {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  /* Cancel the bottom margin the toolbar used to provide for the switcher */
  margin-bottom: 0;
}


/* ── Top row (always visible) ─────────────────────────────────────────────── */

.views-exposed-form .dct-ef-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 100%;
}

/* When the extras panel is visible, flatten the bottom corners */
.views-exposed-form .dct-ef-top:has(+ .dct-ef-extra--open) {
  border-radius: 8px 8px 0 0;
  border-bottom-color: #f3f4f6;
}

/* ── Search input wrapper ─────────────────────────────────────────────────── */

.dct-ef-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  max-width: 400px;
  width: 100%;
}


.view-manage-apis .views-exposed-form .dct-ef-search .views-exposed-form__item {
  max-width: 100%;
}

/* Strip margins from the form-item wrapper Drupal/Gin adds */
.dct-ef-search .js-form-item,
.dct-ef-search .form-item {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the label (field is identified by the search icon + placeholder) */
.dct-ef-search .js-form-item label,
.dct-ef-search .form-item label,
.dct-ef-search .form-item__label {
  display: none !important;
}

/* The actual input — remove Gin's border/box-shadow, rely on the card border */
.dct-ef-search input[type="text"],
.dct-ef-search input[type="search"],
.dct-ef-search .form-text,
.dct-ef-search .form-element {
  width: 100% !important;
  height: 40px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 5px 8px !important;
  font-size: 14px !important;
  color: #374151;
  line-height: 1.4;
  border-radius: 0 !important;
}

.dct-ef-search input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* ── Clear (×) button inside search field ────────────────────────────────── */
.dct-ef-search__clear {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.dct-ef-search__clear--visible {
  display: inline-flex !important;
}

.dct-ef-search__clear:hover {
  color: #374151;
  background-color: #f3f4f6;
}

/* ── Filters toggle button ────────────────────────────────────────────────── */

.dct-ef-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.dct-ef-toggle:hover {
  color: var(--gin-color-primary, #0073e6);
  border-color: var(--gin-color-primary, #0073e6);
}

/* Active state (extras panel is open) */
.dct-ef-toggle--active,
.dct-ef-toggle--active:hover {
  background-color: #f3f3f3;
  border-color: var(--gin-color-primary, #0073e6);
  color: var(--gin-color-primary, #0073e6);
}

/* ── Extras panel (hidden by default) ────────────────────────────────────── */

.dct-ef-extra {
  display: none;
}

.dct-ef-extra--open {
  display: block;
  flex: 1 1 100%;
}

/* ── Extras inner card ────────────────────────────────────────────────────── */

.dct-ef-extra__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

/* Form items inside the extras panel */
.dct-ef-extra__inner .js-form-item,
.dct-ef-extra__inner .form-item {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 225px !important;
  width: 100%;
}

/* Labels above each filter field */
.dct-ef-extra__inner .js-form-item label,
.dct-ef-extra__inner .form-item label,
.dct-ef-extra__inner .form-item__label {
  display: block;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px !important;
}

/* Select dropdowns */
.dct-ef-extra__inner select,
.dct-ef-extra__inner .form-select,
.dct-ef-extra__inner .form-element--type-select {
  padding: 6px 28px 6px 10px;
  border: 1px solid #d1d5db !important;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  background-color: #ffffff;
  min-width: 160px;
  height: 34px;
  width: 100%;
}

/* Text inputs in extras (date pickers, keyword fields, etc.) */
.dct-ef-extra__inner input[type="text"],
.dct-ef-extra__inner input[type="search"],
.dct-ef-extra__inner input[type="date"],
.dct-ef-extra__inner .form-text {
  padding: 6px 10px;
  border: 1px solid #d1d5db !important;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  background-color: #ffffff;
  height: 34px;
  box-shadow: none !important;
  outline: none;
}

/* ── Form actions inside extras ────────────────────────────────────────────── */

.dct-ef-extra__inner .form-actions,
.dct-ef-extra__inner .js-form-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 !important;
}

/* Submit / Apply button */
.dct-ef-extra__inner .form-submit:not(.dct-ef-reset-btn) {
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: 6px;
}

/* ── Reset button — circular icon ─────────────────────────────────────────── */
/*
 * The reset button text is hidden (font-size: 0) and replaced with a
 * circular-arrow SVG encoded as a background image. This avoids adding DOM
 * elements to an <input>, which cannot have children.
 */
.dct-ef-reset-btn,
.dct-ef-extra__inner [name="reset"],
.views-exposed-form .form-actions [name="reset"] {
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px !important;
  font-size: 0 !important;  /* hide "Reset" text */
  line-height: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}

.dct-ef-reset-btn:hover,
.dct-ef-extra__inner [name="reset"]:hover,
.views-exposed-form .form-actions [name="reset"]:hover {
  border-color: var(--gin-color-primary, #0073e6) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230073e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") !important;
}

.views-element-container > .view[data-once="devportal-ef"],
.views-element-container > .view[data-once="devportal-ef ajax-pager"],
.page--marketplace-audit,
.page--all-teams,
.page--all-members  {
  background-color: #fff;
  border: 1px solid #E0E0E0;
  padding: 24px;
  border-radius: 8px;
}

:where(*) .view .views-exposed-form.views-exposed-form,
.page--marketplace-audit .audit-filter-bar,
.page--all-teams .audit-filter-bar,
.page--all-members .audit-filter-bar{
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 0px 0 24px 0;
}

/* ── Custom filter bars (audit / members / teams / notifications) ─────────── */
/*
 * devportalCustomFilters behavior rewrites .audit-filter-bar__fields and
 * .mn-list-form__filters into the same .dct-ef-top / .dct-ef-extra structure
 * as Views exposed forms. The rules below make .audit-filter-field items look
 * identical to .form-item / .js-form-item inside the extras panel.
 */

/* Top row inside custom filter containers */
.audit-filter-bar__fields .dct-ef-top,
.mn-list-form__filters .dct-ef-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 100%;
}

/* audit-filter-field items inside the extras panel */
.dct-ef-extra__inner .audit-filter-field {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 225px !important;
  width: 100%;
}

.dct-ef-extra__inner .audit-filter-field__label {
  display: block;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px !important;
}

.dct-ef-extra__inner .audit-filter-field__input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #d1d5db !important;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  background-color: #ffffff;
  box-shadow: none !important;
}

/* Action row (Filter + Reset buttons) inside the extras panel */
.dct-ef-extra__inner .audit-filter-bar__actions,
.dct-ef-extra__inner .audit-filter-field--action {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 !important;
  max-width: none !important;
}

.all-members-filter-bar .dct-ef-extra__inner .audit-filter-field--action,
.all-teams-filter-bar .dct-ef-extra__inner .audit-filter-field--action {
  max-width: 50px !important;
}

/* Bare submit button (no .form-actions wrapper) moved into the extras panel */
.dct-ef-extra__inner > input[type="submit"],
.dct-ef-extra__inner > button[type="submit"] {
  align-self: flex-end;
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: 6px;
  margin: 0 !important;
}

/* ── DataTables search inside .dct-ef-top (audit page) ───────────────────── */
/*
 * DataTables generates: <div id="audit-log-table_filter" class="dataTables_filter">
 *                         <label>Quick search: <input type="search"></label>
 *                       </div>
 * JS adds .dct-ef-search and .dct-ef-search--dt to that div and places it in
 * .dct-ef-top. These rules strip the DataTables default styling and make it
 * look identical to the Views exposed-form search card.
 */
.dct-ef-search--dt {
  position: relative;
  overflow: hidden;
}

.dct-ef-search--dt label {
  display: flex !important;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  font-size: 0;          /* hide "Quick search:" text */
  font-weight: normal;
}

.dct-ef-search--dt input[type="search"] {
  flex: 1;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 5px 8px !important;
  font-size: 14px !important;
  color: #374151;
  line-height: 1.4;
  border-radius: 0 !important;
  margin: 0 !important;
  height: 40px;
  position: relative;
}

.dct-ef-search--dt input[type="search"]::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* Search field inside .audit-filter-bar — strip audit-specific label */
.dct-ef-search .audit-filter-field__label {
  display: none !important;
}

.dct-ef-search .audit-filter-field {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

.dct-ef-search .audit-filter-field__input {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 5px 44px 5px 8px !important;
  font-size: 14px !important;
  color: #374151;
  line-height: 1.4;
  border-radius: 0 !important;
  height: 100%;
}

/*specic to media page*/
.view-media .dct-view-inner {
  gap: 0;
}
.view-media  .dct-view-inner > .media-view-switcher{
  margin-bottom: 20px;
}
.view-media .dct-view-inner .view-content.gin-layer-wrapper {
  padding: 0;
  border: none;
  box-shadow: none;
}

/*specic to notification page*/
.marketplace-list-notifications-form .mn-list-form__filters{
  margin-bottom: 25px;
  gap: unset;
}

/*specic to audit page*/
.page--marketplace-audit .audit-filter-bar__fields,
.page--all-teams .audit-filter-bar__fields,
.page--all-members .audit-filter-bar__fields {
  gap: unset;
}