/* Style rules for SearchKit Admin
   Forked on 23 July 24. Called on SearchKit Admin pages
   Status: merged */

/* Searchkit listing */

.crm-search:has(.crm-search-nav-tabs) {
  min-width: fit-content;
}
.crm-search:has(.crm-search-nav-tabs) .crm-search-display-table table {
  border-width: 1px 0 0 0;
  box-shadow: none;
  margin-bottom: 0;
}
.crm-container .crm-search-nav-tabs {
  position: relative;
  border-radius: var(--crm-tabs-radius) var(--crm-tabs-radius) 0 0;
  border: var(--crm-tabs-border);
  border-bottom: 0;
}
#bootstrap-theme .crm-search-nav-tabs > div.btn-group {
  position: absolute;
  right: var(--crm-s);
  top: var(--crm-s);
}
#bootstrap-theme .crm-search-admin-search-listing-buttons {
  display: flex;
}

/* Searchkit admin */

/* Top */
.crm-search .crm-flex-box.crm-search-admin-outer {
  display: grid;
  grid-template-columns: 280px auto;
  margin-bottom: var(--crm-r2);
}
.crm-search .crm-flex-box.crm-search-admin-outer:first-of-type {
  grid-template-columns: 33% auto;
  align-items: center;
  gap: var(--crm-m);
}
#crm-saved-search-label {
  width: 100%;
  height: var(--crm-btn-height);
}

/* Tabs */
.crm-search-admin-main-tabs ul.nav-stacked {
  display: flex;
  gap: var(--crm-s);
  position: relative;
  margin-top: var(--crm-r);
}
.crm-search-admin-main-tabs ul.nav-stacked li {
  cursor: default;
  margin: 0;
  padding: 0;
}
.crm-search-admin-main-tabs ul.nav-stacked > li > a {
  display: inline-block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--crm-roundness) 0 0 var(--crm-roundness);
  right: -1px;
}
.crm-search-admin-main-tabs ul.nav-stacked li.active {
  width: calc(100% + 1px);
}
.crm-search-admin-main-tabs ul.nav-stacked li.active a {
  background-color: var(--crm-tab-bg-active);
  color: var(--crm-tab-col);
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid var(--crm-c-gray-300);
  border-right: 0 none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.crm-search ul.nav-stacked li[role=separator] {
  height: var(--crm-m2);
  border-top: 1px solid var(--crm-c-gray-300);
  margin: var(--crm-m) var(--crm-l) 0 var(--crm-r);
}
.crm-search ul.nav-stacked li a[disabled] {
  text-decoration: line-through !important;
  color: grey;
  cursor: default;
  pointer-events: none;
}
#bootstrap-theme.crm-search button.btn-xs:has(i.crm-i) {
  padding: 0;
}
#bootstrap-theme.crm-search ul.nav-stacked li:has(.btn-xs) a {
  padding-right: 5ch;
}
#bootstrap-theme .crm-search-admin-main-tabs button.btn-xs {
  background: transparent;
  color: var(--crm-c-text);
  font-size: var(--crm-font-size);
}
.crm-search-display-control {
  position: absolute;
  right: var(--crm-s);
  top: 25%;
}
.crm-search-display-control+.crm-search-display-control {
  right: 28px;
}
.crm-search .crm-search-admin-outer .crm-flex-4.panel {
  border: 1px solid var(--crm-c-gray-300);
  margin: 0;
}
.crm-search .crm-search-admin-outer .crm-flex-4.panel .panel-body {
  border-radius: var(--crm-roundness);
  background: var(--crm-tab-bg-active);
  height: 100%;
}

/* Tab: Filter Conditions */

.crm-search fieldset div.api4-input {
  margin-bottom: var(--crm-m);
}
.crm-search .api4-clause-badge {
  width: 8ch;
  display: inline-block;
  cursor: move;
  font-size: var(--crm-input-font-size);
}
.crm-search .api4-clause-badge .badge {
  opacity: .5;
  position: relative;
}
.crm-search .api4-clause-badge .caret {
  margin: 0;
}

/* Fieldsets */

.crm-container .crm-search fieldset {
  padding: var(--crm-s);
  border-top: var(--crm-c-divider);
  margin-block: var(--crm-s);
  border-radius: var(--crm-roundness);
  position: relative;
}
.crm-search fieldset fieldset {
  padding-top: 0;
  border: var(--crm-c-divider);
  border-width: 0 1px 1px 1px;
}
#bootstrap-theme.crm-search fieldset legend {
  font-size: inherit;
  margin: 0;
  width: 100%;
  border: 0;
  padding: 0;
  text-transform: none;
}
/* Icon only shown while dragging */
.crm-search .api4-clause-badge .crm-i {
  display: none;
  padding: 0 var(--crm-s2);
}
.crm-search .ui-sortable-helper .api4-clause-badge .badge span {
  display: none;
}
.crm-search .ui-sortable-helper .api4-clause-badge .crm-i {
  display: inline-block;
}
.crm-search .crm-search-admin-relative .api4-clause-group-sortable {
  margin: var(--crm-r) 0;
}
/* Tab: Select Fields */

.crm-search fieldset.crm-draggable {
  background-color: var(--crm-c-drag-background);
  border-radius: var(--crm-roundness);
  border: 0 solid transparent;
}

/* Tab: Configure Settings */

.crm-search .crm-search-admin-relative textarea {
  width: 100%;
  min-height: 100px;
}
.crm-search .input-group-addon:has(.fa-calendar-times-o) {
  width: auto;
}
/* Tab: display */

.crm-search .crm-search-admin-relative details > fieldset {
  padding: 0;
  border: 0 solid transparent;
}
.crm-search .crm-search-admin-relative details > fieldset .form-inline:not(td) {
  padding: var(--crm-padding-small) var(--crm-padding-reg);
}
.crm-search .crm-search-admin-relative details > fieldset fieldset,
.crm-search crm-search-admin-display fieldset .form-inline > fieldset {
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
}
.crm-search-admin-edit-columns fieldset.crm-draggable:has(> details) { /* targetted to cetaild because SK Tokens extension shares classname */
  display: grid;
  grid-template-columns: 2ch auto;
  align-items: center;
}
.crm-search-admin-edit-columns fieldset.crm-draggable:has(details[open]) {
  align-items: start;
}
#bootstrap-theme .crm-search-admin-edit-columns fieldset.crm-draggable .btn.btn-xs.pull-right {
  line-height: 1.45rem;
  display: block;
  z-index: 1;
  position: absolute;
  right: calc(4 * var(--crm-padding-small)); /* aligns button relative to stream padding */
}
i.crm-i.crm-search-move-icon {
  opacity: .5;
}
.crm-draggable details > *,
.crm-draggable details > .form-inline {
  padding-inline: var(--crm-expand-body-padding);
}
.crm-draggable details > div:first-of-type {
  padding-top: var(--crm-expand-body-padding);
}
.crm-draggable details > div:last-of-type {
  padding-bottom: var(--crm-expand-body-padding);
}
#bootstrap-theme .crm-search-admin-edit-columns .input-group-btn {
  display: flex;
  flex-direction: row;
}
.crm-search-admin-edit-columns .crm-draggable > td {
  vertical-align: middle;
}
.crm-search-admin-edit-columns .crm-draggable > td input {
  max-width: 125px;
}
.crm-search-admin-edit-columns .crm-draggable > td.form-inline {
  padding-right: var(--crm-s);
}
.crm-search-admin-edit-columns .crm-draggable tfoot td.form-inline {
  padding: var(--crm-padding-reg);
}
.crm-container crm-search-admin-link-select .input-group input {
  height: var(--crm-btn-height); /* Button/Links - other */
}
.crm-search-admin-relative {
  position: relative;
  display: block;
}
.crm-search .crm-search-admin-relative details > summary {
  background: var(--crm-expand-header2-bg);
  color: var(--crm-expand-header2-color);
  padding: var(--crm-padding-small) var(--crm-padding-reg);
}
.crm-search crm-search-admin-link-group {
  background: var(--crm-c-background2);
}
.crm-search crm-search-admin-link-group table {
  margin: var(--crm-padding-reg);
  max-width: calc(100% - var(--crm-padding-reg) - var(--crm-padding-reg));
  box-shadow: none;
}
.crm-search-admin-edit-columns {
  padding: 0;
  border: 0 solid transparent;
}
.crm-search-admin-edit-columns details,
.crm-search .crm-search-admin-relative details {
  background-color: var(--crm-c-page-background);
  border-radius: var(--crm-roundness);
  border: 0;
}
.crm-search-admin-edit-columns details > summary {
  background: var(--crm-expand-header2-bg);
  color: var(--crm-expand-header2-color);
  padding: var(--crm-padding-reg);
  font-size: inherit;
}
/* Various */

.crm-search .help-block.bg-warning {
  padding: var(--crm-padding-reg);
}
/* Style expires_date date/time width */
.crm-search #expires_date + input,
.crm-search #expires_date + input + input {
  width: calc(100% - 30px);
}
/* Hide time field if date & time are both empty */
.crm-search #expires_date + input:placeholder-shown + input:placeholder-shown {
  display: none;
}
.crm-search div.form-control.disabled,
.crm-search div.form-control.disabled * {
  cursor: not-allowed;
}
.crm-search input.ng-invalid::placeholder {
  color: var(--crm-c-warning);
}
#bootstrap-theme.crm-search crm-search-clause > .btn-group {
  position: absolute;
  right: 0;
  top: 0;
}
.crm-search fieldset div.api4-input.ui-sortable-helper {
  background-color: rgba(255, 255, 255, .9);
}
.crm-search fieldset div.api4-input.ui-sortable-helper {
  background-color: rgba(255, 255, 255, .9);
}
.crm-search .api4-clause-fieldset fieldset {
  float: right;
  width: calc(100% - 58px);
  margin-top: -8px;
}
.crm-search .api4-clause-fieldset.api4-sorting fieldset .api4-clause-group-sortable {
  min-height: 3.5em;
}
.crm-search .form-control label,
.crm-search legend[ng-click] {
  cursor: var(--crm-hover-clickable);
}
.crm-search .api4-input-group {
  display: inline-block;
}
.crm-draggable:hover > i.crm-i.crm-search-move-icon,
.crm-draggable:hover > * > i.crm-i.crm-search-move-icon {
  opacity: 1;
}
/* For display.settings.limit field */
.crm-search .checkbox-inline.form-control input[type=number] {
  position: relative;
  top: -5px;
  right: -9px;
  vertical-align: top;
}
.crm-search .api4-add-where-group-menu {
  min-width: 80px;
  background-color: rgba(186, 225, 251, 0.94);
}
.crm-search .api4-add-where-group-menu a {
  padding: var(--crm-s) var(--crm-m);
}
#bootstrap-theme.crm-search .btn.form-control {
  height: 36px;
}
.crm-search-admin-edit-columns {
  height: 100%;
}
.crm-search-admin-edit-columns > fieldset {
  background-color: rgba(255, 255, 255, .8);
}
.crm-search-admin-flex-row {
  display: flex;
  align-items: center;
  column-gap: var(--crm-s3);
}
.crm-search-admin-unused-columns fieldset {
  min-height: 60px;
}
.crm-search .crm-editable-enabled {
  display: inline-block;
  padding: 0 4px !important;
  border: 2px solid transparent !important;
  min-width: 21px;
}
.crm-search .crm-editable-enabled:hover:not(:focus) {
  border: 2px dashed grey !important;
}
.crm-search-admin-icon-col {
  width: 24px;
}
tbody .crm-search-admin-icon-col {
  text-align: center;
}
.crm-search-admin-tag-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid lightgrey;
  border-radius: 5px;
}
crm-search-admin-tags.btn-group-xs .crm-search-admin-tags-btn-label {
  display: none;
}
/* .dropdown-menu li > * > label {
    font-weight: normal;
    cursor: var(--crm-hover-clickable);
} */
.crm-container .crm-container .dropdown-menu li .form-inline > select {
  max-width: 120px;
  padding-left: 5px;
  padding-right: 5px;
}
.crm-container li .form-inline input[type=color] {
  width: 30px;
  padding: 2px 4px;
}
button.crm-search-admin-combo-button {
  min-width: 200px;
  text-align: left;
}
crm-search-admin-export,
crm-search-admin-import {
  display: block;
}
.crm-search-admin-right {
  position: absolute;
  top: 1px;
  right: 0;
}
.crm-search-admin-relative .help-block { /* reduces help-block by width of crm-search-admin-right button */
  width: calc(100% - 180px);
}