/* Custom styling for UN Biodiversity Lab STAC Browser */

/* Import Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Add custom styles here */
/* For example, you can customize colors, fonts, spacing, etc. */

:root {
  /* UN Biodiversity Lab brand colors - adjust as needed */
  --primary-color: #0099A1;
  --secondary-color: #7ecace;
  --accent-color: #006b70;
  --text-color: #ffffff;
  --text-secondary: #7ecace;
  --background-color: #000000;
  --background-secondary: #1a1a1a;
  --background-tertiary: #383838;
  --background-quaternary: #5e5e5e;
  --border-color: #484848;
  /* Font family */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Apply Roboto font to all elements */
* {
  font-family: var(--font-family);
}

body {
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Main content area */
main {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Custom header styling */
header {
  background-color: var(--background-color);
  border-bottom: none !important;
}


/* Custom button styling - apply to all buttons */
button, .btn {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

button:hover, .btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(126, 202, 206, 0.3);
}


.b-sidebar-outer button,
.b-sidebar-outer .btn {
  background-color: transparent !important;
  color: black !important;
  border: none !important;
}

.b-sidebar-outer button:hover,
.b-sidebar-outer .btn:hover {
  background-color: var(--secondary-color) !important;
}

.b-sidebar-outer .close {
  background-color: var(--primary-color) !important;
}


/* Custom card/item styling */
.stac-item, .stac-collection {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  background-color: var(--background-secondary);
  color: var(--text-color);
}

.stac-item:hover, .stac-collection:hover {
  box-shadow: 0 4px 12px rgba(126, 202, 206, 0.2);
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.card, a.list-group-item {
  border: 1px solid var(--border-color);
}

/* Links styling */
a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-color);
}

#stac-browser h2 {
  color: #9b9b9b;;
}

/* Text elements */
p, span, div {
  color: var(--text-color);
}

.border {
  border: 1px solid var(--border-color) !important;
}

/* Input fields */
input, textarea, select {
  background-color: var(--background-secondary);
  color: #000000 !important;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(126, 202, 206, 0.2);
}

.multiselect li *,
.dropdown-menu li *,
.dropdown-item *,
.b-dropdown-menu * {
  color: #000000 !important;
}

/* Map container styling */
.map-container {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

/* Footer styling */
footer {
  background-color: var(--background-secondary);
  color: var(--text-color);
  border-top: 1px solid var(--border-color);
}

.leaflet-control-attribution {
  background: var(--background-color) !important;
}

.leaflet-control-layers * {
  color: black !important;
}

/* Code blocks and pre elements */
code, pre {
  background-color: var(--background-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 8px;
}

/* Tables */
table {
  background-color: var(--background-secondary) !important;
  color: var(--text-color);
  border-collapse: collapse;
}

table th, table td {
  border: 1px solid var(--border-color);
  padding: 8px 12px;
}

table th {
  background-color: var(--background-quaternary) !important;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--background-color);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Selection styling */
::selection {
  background-color: var(--primary-color);
  color: var(--background-color);
}

::-moz-selection {
  background-color: var(--primary-color);
  color: var(--background-color);
}



/* Replace "UN Biodiversity Lab" text with logo in header, keeping other text */
header:not([class*="b-sidebar-header"]) {
  position: relative;
}

/* Target heading elements and add logo above them */
header:not([class*="b-sidebar-header"]) [role="heading"],
header:not([class*="b-sidebar-header"]) h1,
header:not([class*="b-sidebar-header"]) h2,
header:not([class*="b-sidebar-header"]) h3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  margin-left: auto;
}

/* Add logo as block element above the text */
header:not([class*="b-sidebar-header"]) [role="heading"]::before,
header:not([class*="b-sidebar-header"]) h1::before,
header:not([class*="b-sidebar-header"]) h2::before,
header:not([class*="b-sidebar-header"]) h3::before {
  content: '';
  display: block;
  width: 198px;
  height: 44px;
  background-image: url('/unbl_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 10px;
}

/* Style for the logo link overlay */
.logo-link {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 198px !important;
  height: 44px !important;
  z-index: 10 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: block !important;
}


/* Explicitly hide logo for headers inside main element */
main header:not([class*="b-sidebar-header"]) [role="heading"]::before,
main header:not([class*="b-sidebar-header"]) h1::before,
main header:not([class*="b-sidebar-header"]) h2::before,
main header:not([class*="b-sidebar-header"]) h3::before {
  display: none !important;
}

[role="tooltip"] * {
  color: black !important;
}

[role="tooltip"] code {
  color: white !important;
}

/* Metadata rows - alternating row background colors */
.metadata-rows > *:nth-child(odd) {
  background-color: var(--background-secondary) !important;
}

.metadata-rows > *:nth-child(even) {
  background-color: var(--background-tertiary) !important;
}  

/* Ensure child elements don't override the row background */
.metadata-rows > *:nth-child(odd) > *,
.metadata-rows > *:nth-child(odd) * {
  background-color: transparent;
}

.metadata-rows > *:nth-child(even) > *,
.metadata-rows > *:nth-child(even) * {
  background-color: transparent;
}

a span.title {
  color: var(--primary-color) !important;
}

#stac-browser-auth-modal .card-body, .card-header, .card-footer {
  background-color: var(--background-secondary) !important;
}