/* =========================================================
   DXPR BUILDER / ADMIN UI
   ========================================================= */

/* Keep builder UI above page content */
.dxpr-builder,
.dxpr-builder * {
  z-index: 10010 !important;
}

/* Offset builder UI under admin toolbar */
.toolbar-horizontal .dxpr-builder-launcher,
.toolbar-horizontal .dxprb-floating-toolbar,
.toolbar-horizontal .dxprb-panel {
  margin-top: 48px;
}

.toolbar-tray-open .dxpr-builder-launcher,
.toolbar-tray-open .dxprb-floating-toolbar,
.toolbar-tray-open .dxprb-panel {
  margin-top: 80px;
}

/* =========================================================
   MEDIA LIBRARY MODAL
   ========================================================= */

.ui-dialog.media-library-widget-modal {
  width: 80vw !important;
  max-width: 800px !important;
}

.ui-dialog.media-library-widget-modal .ui-dialog-content {
  width: auto !important;
  max-width: none !important;
}

.ui-dialog.media-library-widget-modal.ui-dialog--narrow {
  max-width: none !important;
}

/* Dark overlay */
.ui-widget-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2147483000 !important;
}

/* Modal frame */
.ui-dialog.media-library-widget-modal,
.ui-dialog.media-library-widget-modal.ui-front {
  position: fixed !important;
  top: 5vh !important;
  left: 5vw !important;
  width: 90vw !important;
  height: 90vh !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  box-sizing: border-box;
  z-index: 2147483001 !important;
}

/* Modal body */
.ui-dialog.media-library-widget-modal .ui-dialog-content {
  height: calc(90vh - 60px) !important;
  overflow-y: auto !important;
}

/* Title + buttons */
.ui-dialog.media-library-widget-modal .ui-dialog-titlebar,
.ui-dialog.media-library-widget-modal .ui-dialog-buttonpane {
  position: relative;
  z-index: 1;
}

/* Keep site header behind modal */
body.ui-dialog-open .dxpr-theme-header,
body.ui-dialog-open .dxpr-theme-header * {
  position: relative;
  z-index: 1 !important;
}

body.ui-dialog-open #dxpr-theme-menu-toggle {
  position: relative;
  z-index: 1 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.ui-dialog-open #navbar,
body.ui-dialog-open .navbar,
body.ui-dialog-open .navbar-container,
body.ui-dialog-open .dxpr-theme-header .navbar-container {
  position: relative;
  z-index: 1 !important;
}

/* If offcanvas exists, keep below modal */
body.ui-dialog-open .offcanvas-backdrop,
body.ui-dialog-open .offcanvas {
  z-index: 2147482000 !important;
}

/* =========================================================
   MOBILE MEDIA LIBRARY MODAL
   ========================================================= */

@media (max-width: 640px) {
  .ui-dialog.media-library-widget-modal {
    position: fixed !important;
    inset: 2vh 2vw auto 2vw;
    top: max(2vh, env(safe-area-inset-top));
    left: 2vw !important;

    display: flex;
    flex-direction: column;

    width: 96vw !important;
    height: 96vh !important;
    margin: 0 !important;
  }

  .ui-dialog.media-library-widget-modal .ui-dialog-titlebar {
    flex: 0 0 auto;
  }

  .ui-dialog.media-library-widget-modal .ui-dialog-content {
    flex: 1 1 auto;
    max-height: none !important;
    overflow: auto !important;
    padding-bottom: 3.5rem;
  }

  .ui-dialog.media-library-widget-modal .ui-dialog-buttonpane {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .ui-dialog.media-library-widget-modal .ui-resizable-handle {
    display: none !important;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 640px) {
    .ui-dialog.media-library-widget-modal {
      height: 96dvh !important;
    }

    .ui-dialog.media-library-widget-modal .ui-dialog-content {
      padding-bottom: 3.5rem;
    }
  }
}

/* =========================================================
   DRUPAL VERTICAL TABS
   Styled like local tasks
   ========================================================= */

.vertical-tabs {
  margin: 0;
  padding: 0;
  border: none !important;
  background: transparent;
}

/* Left column */
.vertical-tabs .vertical-tabs__menu {
  width: 220px;
  margin: 0 20px 0 0;
  padding: 0;
  list-style: none;
  border: none !important;
  background: transparent;
  box-shadow: none !important;
}

/* Each tab item */
.vertical-tabs .vertical-tabs__menu-item {
  margin: 0 0 6px 0;
  padding: 0;
  border: none !important;
  background: transparent;
  border-radius: 0;
  box-shadow: none !important;
  overflow: visible;
}

/* Tab link */
.vertical-tabs .vertical-tabs__menu-item a {
  display: block;
  padding: 10px 14px;
  line-height: 1.35;

  color: #444;
  text-decoration: none;

  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: 6px;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* Title */
.vertical-tabs .vertical-tabs__menu-item-title {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

/* Summary */
.vertical-tabs .vertical-tabs__menu-item-summary {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: #777;
}

/* Hover */
.vertical-tabs .vertical-tabs__menu-item a:hover,
.vertical-tabs .vertical-tabs__menu-item a:focus {
  background: #e9edf3;
  color: #222;
  border-color: #d5dbe3;
}

/* Active */
.vertical-tabs .vertical-tabs__menu-item.is-selected a {
  background: #fff;
  color: #c42121;
  border-color: #d9d9d9;
  font-weight: 600;
}

.vertical-tabs .vertical-tabs__menu-item.is-selected
.vertical-tabs__menu-item-summary {
  color: #666;
}

/* Right column */
.vertical-tabs .vertical-tabs__panes {
  margin-left: 240px;
  border: none !important;
  background: transparent;
}

/* Pane */
.vertical-tabs .vertical-tabs__pane {
  overflow: hidden;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

/* Pane summary/header */
.vertical-tabs .vertical-tabs__pane > summary.card-header {
  padding: 10px 14px;
  line-height: 1.35;

  color: #333;
  font-size: 14px;
  font-weight: 600;

  background: #f8f9fb;
  border: none !important;
  box-shadow: none !important;
}

/* Open pane */
.vertical-tabs .vertical-tabs__pane[open] > summary.card-header {
  background: #f3f4f6;
  color: #c42121;
  border-bottom: 1px solid #e3e3e3;
}

/* Header summary text */
.vertical-tabs .vertical-tabs__pane > summary.card-header .summary {
  font-size: 12px;
  font-weight: 400;
  color: #777;
}

/* Pane body */
.vertical-tabs .vertical-tabs__pane .details-wrapper,
.vertical-tabs .vertical-tabs__pane .card-body {
  padding: 14px;
  background: #fff;
}

/* Form controls fit pane width */
.vertical-tabs .vertical-tabs__pane,
.vertical-tabs .vertical-tabs__pane *,
.vertical-tabs .vertical-tabs__pane *::before,
.vertical-tabs .vertical-tabs__pane *::after {
  box-sizing: border-box;
}

.vertical-tabs .vertical-tabs__pane input.form-text,
.vertical-tabs .vertical-tabs__pane input.form-email,
.vertical-tabs .vertical-tabs__pane input.form-search,
.vertical-tabs .vertical-tabs__pane input.form-number,
.vertical-tabs .vertical-tabs__pane input.form-date,
.vertical-tabs .vertical-tabs__pane input.form-time,
.vertical-tabs .vertical-tabs__pane select.form-select,
.vertical-tabs .vertical-tabs__pane textarea.form-textarea,
.vertical-tabs .vertical-tabs__pane .form-autocomplete {
  width: 100%;
  max-width: 100%;
}

/* Inline containers */
.vertical-tabs .vertical-tabs__pane .container-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vertical-tabs .vertical-tabs__pane .container-inline > .form-item {
  flex: 1 1 180px;
  margin-right: 0;
}

/* Footer stays below */
#edit-footer {
  clear: both !important;
  float: none !important;
  width: 100% !important;
  margin-top: 16px;
}

.vertical-tabs::after {
  content: "";
  display: block;
  clear: both;
}

/* Remove pseudo-lines */
.vertical-tabs::before,
.vertical-tabs::after,
.vertical-tabs .vertical-tabs__menu::before,
.vertical-tabs .vertical-tabs__menu::after,
.vertical-tabs .vertical-tabs__menu-item::before,
.vertical-tabs .vertical-tabs__menu-item::after,
.vertical-tabs .vertical-tabs__pane > summary.card-header::before,
.vertical-tabs .vertical-tabs__pane > summary.card-header::after {
  box-shadow: none !important;
}

/* Mobile tabs */
@media (max-width: 991px) {
  .vertical-tabs .vertical-tabs__menu {
    width: 100%;
    margin-right: 0;
    margin-bottom: 18px;
  }

  .vertical-tabs .vertical-tabs__panes {
    margin-left: 0;
  }
}