/* Root page element: fills the viewport without overflow */
.mapsf-gui-page {
    height: 100vh;
    overflow: hidden;
}

/* Main mapsf.gui container: absorbs remaining vertical space between header and footer */
.mapsf-gui-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
}

/* Inner row that holds the sidebar and the main map area */
.mapsf-gui-body {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/*
Header and footer z-index... might be removed later depending on some
other styles of the param and portrayal panels
*/
.mapsf-gui-header,
.mapsf-gui-footer {
    z-index: 1040;
}

/* Reusable width for the sidebars */
.mapsf-gui-sidebar {
    min-width: 340px;
    width: 27%;
    max-width: 460px;
}

/* Reusable parameter panels, to be used with "sidebar" style */
.mapsf-gui-param-panel,
.mapsf-gui-portrayal-panel {
    position: absolute;
    left: 0;
    height: calc(100vh - var(--header-height) - var(--footer-height)) !important;
    background: var(--bs-body-bg);
    box-shadow: 3px 0px 6px var(--bs-gray-500);
    /* border-top: 1px solid var(--bs-border-color); */
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
}

.mapsf-gui-portrayal-panel .row > .shiny-panel-conditional > * {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}

.mapsf-gui-param-panel .tab-content,
.mapsf-gui-portrayal-panel .tab-content {
  padding-top: calc(var(--bs-gutter-x) * .5);
  margin-bottom: 1rem;
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}

/* Style for the tabs in portayal / parameter panels: remove left padding so the tab title is stacked on the left */
.mapsf-gui-param-panel ul.nav.nav-tabs,
.mapsf-gui-portrayal-panel ul.nav.nav-tabs {
  padding-left: 0 !important;
  border-bottom: 0 !important;
}

/* Reduce the margin between labels and corresponding inputs in the parameter and portrayal panels */
.mapsf-gui-param-panel .control-label,
.mapsf-gui-portrayal-panel .control-label {
    margin-bottom: 0.20rem !important;
}

/* More compact style for the expandBB inputs in the dimensions panel */
.mapsf-gui-param-panel .expandbb-inputs .form-group {
    margin-bottom: 0.25rem !important;
}

/*
Compensate the margin added by the form-group, parent of .checkbox class
to avoid unwanted vertical spacing in some panels
*/
.checkbox-no-margin > div > .checkbox {
    margin-bottom: -2rem !important;
}

/* Quick hack to display panels in the left side of the window */
.mapsf-gui-portrayal-panel.left-position,
.mapsf-gui-param-panel.left-position {
    position: fixed;
    left: 0;
    top: 4em;
    width: 28%;
    max-height: 90vh !important;
}

/* Data manager */
.data-item > div:first-child {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Layer manager */
.layer-item {
    display: block;
    padding: 10px 15px;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    overflow: hidden;
    cursor: grab;
}

.layer-item:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.layer-item:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.layer-item > div {
    display: flex;
    justify-content: space-between;
}

.layer-item .layer-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 84%;
}

.layer-item .layer-action--main-checkbox[checked="checked"] + .layer-action {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .layer-item .layer-action--main-checkbox + .layer-action {
  color: gray !important;
}

[data-bs-theme="dark"] .layer-item .layer-action--main-checkbox[checked="checked"] + .layer-action {
  color: white !important;
}

/* Table display modal */
.dataTables_scrollBody {
    height: unset !important;
}

/* Some styles for the import modal */
#import_source > label.control-label {
  display: none;
}

#import_source .shiny-options-group {
  padding-left: 0;
  margin-right: 0.5rem;
}

#import_source .shiny-options-group input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#import_source .shiny-options-group span {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 999px;
}

#import_source .shiny-options-group label {
  display: inline-block;
  border: 1px solid var(--bs-primary);
  border-radius: 999px;
  color: var(--bs-primary);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

#import_source .shiny-options-group input:checked + span {
  background: var(--bs-primary);
  color: var(--bs-body-bg);
}

#import_source .shiny-options-group label:hover {
  background: rgba(13, 110, 253, 0.08);
}

/* Make the map image centered and responsive */
.main {
  flex: 1 1 auto;
  min-height: 0;
}

#map {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /*
    Do we want the map centered vertically too?
    Or more like top-aligned because of the config panel
    that is sometimes displayed at the bottom?
    See also the height of #map > img
  */
  /* align-items: center; */
  align-items: flex-start;
  justify-content: center;
}

#map > img {
  max-width: 100%;
  max-height: 100%;
  /* height: 100%; */
  /*
    Do we want the map to always fill the width of the container?
    (so do we want it to be upscaled when the container is wider than the image?)
    For now, we let it be its natural when the container is wider than the image.
    Otherwise, we can set width to 100% here.
  */
  /* width: 100%; */
  object-fit: contain;
  display: block;
}

#map-scale {
  width: 100%;
  text-align: center;
}

#map {
  cursor: unset !important;
}

#main.cursor-crosshair #map img {
  cursor: crosshair !important;
}

/* Language toggle, with separators between buttons but no outer border */
.lang-switcher .btn {
  border-color: transparent;
  background: transparent;
}

/*
.lang-switcher .btn:not(:first-child) {
  border-left-color: var(--bs-primary);
}

.lang-switcher .btn:not(:first-child).active {
  border-left-color: var(--bs-primary);
}
*/

.lang-switcher .btn.active {
  border-color: transparent;
  background: transparent;
  font-weight: bold;
  color: var(--bs-heading-color); /* or var(--bs-emphasis-color) but it looks a bit too strong ? */
}

/* Restore dropdown arrow on select elements */
select.form-control:not([multiple]) {
  background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
  appearance: none;
}

/* Code dropdown panel */
.code-nav-item {
    position: relative;
}

.code-nav-caret::after {
    content: "";
    display: inline-block;
    margin-left: 0.35em;
    vertical-align: 0.15em;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
    transition: transform 0.15s ease;
}

.code-nav-toggle[aria-expanded="true"] .code-nav-caret::after {
    transform: rotate(-180deg);
}

.code-dropdown-panel {
    position: absolute;
    top: 100%;
    right: -80px;
    z-index: 1050;
    width: min(640px, 90vw);
    max-height: 60vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.code-dropdown-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.code-dropdown-body pre {
    margin: 0;
    border-radius: 0;
    border: none;
}

.code-dropdown-body code {
    margin: -12px 0;
    font-size: 0.75rem;
    padding: 0.5em 0.5em;
    cursor: text !important;
}

#copy_code {
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

#copy_code:hover {
    opacity: 1;
}

/* Data table modal */
div.datatables {
    color: currentColor !important;
}

[data-bs-theme="dark"] div.datatables select {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Map elements panel */
.map-elements-panel {
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

.map-elements-panel > div > button {
    flex: 1 0 auto;
}

.button-expanded-submenu {
    margin-bottom: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.callout-info-trigger {
    vertical-align: sub !important;
}

.mapsf-gui-portrayal-panel .title,
.mapsf-gui-param-panel .title {
    font-size: 1.25rem;
    font-weight: bold;
}

/* Custom fonts */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* Custom spinner */
#mapsf-busy-spinner {
  height: 100vh;
  width: 100vw;
  background: #80808082;
  padding-left: 200px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  gap: 8px;
  align-items: center;
}

#mapsf-busy-spinner.visible {
  display: flex;
}

#mapsf-busy-spinner span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bs-orange);
  animation: mapsf-bounce 0.8s ease-in-out infinite;
}

#mapsf-busy-spinner span:nth-child(2) {
  animation-delay: 0.15s;
}

#mapsf-busy-spinner span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes mapsf-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.2); opacity: 1; }
}

/* Env dataset table in the import modal */
.env-dataset-table {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.env-table-header {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  gap: 0.5rem;
}

.env-th-check {
  width: 28px;
  flex-shrink: 0;
}

.env-th-body {
  flex: 1 1 auto;
}

.env-th-actions {
  width: 40px;
  flex-shrink: 0;
}

.env-dataset-row {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.75rem;
  gap: 0.5rem;
  cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color);
  transition: background 0.12s ease;
  user-select: none;
}

.env-dataset-row:last-child {
  border-bottom: none;
}

.env-dataset-row:hover {
  background: var(--bs-secondary-bg);
}

.env-dataset-row.selected {
  background: rgba(var(--bs-primary-rgb), 0.08);
  border-left: 3px solid var(--bs-primary);
  padding-left: calc(0.75rem - 2px);
}

.env-dataset-row.selected .env-row-check-icon svg {
  color: var(--bs-primary);
}

.env-dataset-row.env-row-crs-mismatch:not(.selected) {
  opacity: 0.65;
}

.env-dataset-row.env-row-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.env-row-check {
  width: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
}

.env-row-check-icon svg {
  transition: color 0.12s ease;
}

.env-dataset-row.selected .env-row-check-icon svg {
  color: var(--bs-primary) !important;
}

.env-row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.env-row-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}

.env-row-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.env-row-actions {
  flex-shrink: 0;
}

.env-preview-btn {
  opacity: 0.6;
  transition: opacity 0.12s ease;
  padding: 0.15rem 0.4rem;
  font-size: 0.78rem;
}

.env-preview-btn:hover {
  opacity: 1;
}

/* Env preview panel */
.env-preview-panel {
  border-top: 1px solid var(--bs-border-color);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.env-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.env-preview-body {
  display: flex;
  gap: 0.75rem;
  min-height: 0;
  overflow: hidden;
}

.env-preview-plot-wrap {
  flex: 0 0 200px;
  width: 200px;
  min-width: 0;
  overflow: hidden;
}

.env-preview-plot-wrap .shiny-plot-output {
  width: 100% !important;
  height: 180px !important;
}

.env-preview-table-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(100% - 212px);
  overflow-x: auto;
  font-size: 0.8rem;
}

.env-preview-table-wrap .dataTables_wrapper {
  font-size: 0.78rem;
}

/*
Overrride the default style for btn-file that is used
in the import modal and in the logo configuration panel
*/
.btn-file {
  box-shadow: none !important;
  height: 3em !important;
  padding: 0.6em !important;
}

[data-bs-theme="dark"] .btn-file {
  border-color: unset !important
}