/* ==========================================================================
   SPC MBD — Leaflet + Sidebar v2
   Optimized CSS (Bootstrap 5 friendly)
   --------------------------------------------------------------------------
   - Collapsed sidebars fully hidden (no layout footprint)
   - Sidebar header is a full‑width button; closes the entire sidebar
   - Fixed-size native legend (182×126) at bottom-left with smooth collapse
   - Accessible focus states; responsive refinements
   - Uses design tokens via :root variables
   ========================================================================== */

:root {
  /* Colors */
  --spc-bg: #fff;
  --spc-text: #212529;
  --spc-muted: rgba(33, 37, 41, .50);
  --spc-border: #DFE6EA;

  --spc-blue: #223B83;
  --spc-blue-hover: #29479e;
  --spc-cyan: #00A6C8;
  --spc-teal: #0085A0;

  /* Spacing / radius / type */
  --spc-space: 16px;
  --spc-radius: 4px;
  --spc-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Utilities ----------------------------------------------------------------*/
.is-hidden { display: none !important; }

/* Leaflet adjustments ------------------------------------------------------*/
.leaflet-left .leaflet-control { margin: var(--spc-space) 0 0 var(--spc-space); }
.leaflet-container a { font-weight: 400; color: #223B83; }

/* Hide collapsed sidebars entirely (overrides plugin’s 40px rail) */
.leaflet-sidebar.collapsed { display: none; }

/* Smooth fade while closing (JS toggles `.is-hiding` ~300ms before .close()) */
.leaflet-sidebar {
  box-shadow: none;   /* plugin adds shadow; we keep UI flat and rely on bg */
  background: transparent;
  border: none;
  opacity: 1;
  transition: opacity .3s ease;
  border-top-left-radius: 6px;
}
.leaflet-sidebar.is-hiding { opacity: 0; }

/* Positioning on ≥768px */
@media (min-width: 768px) {
  .leaflet-sidebar { top: var(--spc-space); bottom: var(--spc-space); }
  .leaflet-sidebar-right { right: var(--spc-space); }
}

/* Sidebar panes/content ----------------------------------------------------*/
.leaflet-sidebar-content { background: #fff; }
.leaflet-sidebar-pane {
  padding: var(--spc-space);
  border-top-left-radius: var(--spc-radius);
  background-color: var(--spc-bg);
}

/* Full-height internals for flex layouts */
.leaflet-sidebar-pane,
.pane-body,
.keys-pane-inner,
.js-keys-custom { height: max-content; min-height: 100%; }

/* Sidebar header: full-width clickable bar inside pane ---------------------*/
.leaflet-sidebar-pane-header {
  position: absolute; top: 0;
  display: flex; align-items: center;
  width: calc(100% + 2rem);            /* match pane padding for full bleed */
  margin: 0 -16px;                     /* keep compatible with plugin padding */
  padding: 10px 16px;
  border: 0; border-top-left-radius: var(--spc-radius);
  background-color: var(--spc-blue);
  color: #fff; text-align: left;
  font: 600 16px/18px var(--spc-font);
}
.leaflet-sidebar-pane-header:hover { background-color: var(--spc-blue-hover); }
.leaflet-sidebar-pane-header svg { margin-right: 8px; }

/* Generic header button used elsewhere (kept for JS hooks) */
.sidebar-header { padding: 8px 12px 0; }
.sidebar-title {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 0 8px;
  background: transparent; border: 0; cursor: pointer;
  color: #222; font-weight: 700;
}
.sidebar-title:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.sidebar-title__icon { display: inline-flex; align-items: center; }
.sidebar-title .chevron { transition: transform .3s ease; }
.sidebar-title[aria-expanded="false"] .chevron { transform: rotate(-90deg); }

/* Sidebar tabs visual (active/hover) --------------------------------------*/
.leaflet-sidebar-tabs>li,
.leaflet-sidebar-tabs>ul>li {
  color: rgba(255,255,255,.50);
  fill: rgba(255,255,255,.50);
  background-color: var(--spc-teal);
}
.leaflet-sidebar-tabs>li:hover,
.leaflet-sidebar-tabs>ul>li:hover {
  color: #fff; background-color: var(--spc-cyan);
}
.leaflet-sidebar-tabs>li.active,
.leaflet-sidebar-tabs>ul>li.active {
  color: #fff; background-color: var(--spc-cyan);
}
#spc-sidebar .leaflet-sidebar-tabs li.is-hidden { display: none !important; }

/* Map launcher buttons -----------------------------------------------------*/
.spc-map-btn {
  position: absolute; z-index: 1002;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--spc-border); border-radius: var(--spc-radius);
  background: var(--spc-bg); color: var(--spc-text);
  font: 600 16px/18px var(--spc-font);
  cursor: pointer; transition: transform .08s ease, box-shadow .2s ease;
}
.spc-map-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.spc-map-btn:active { transform: translateY(1px); }
.spc-map-btn:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.spc-map-btn--left,
.spc-map-btn--bottom-left { left: var(--spc-space); bottom: var(--spc-space); }
.spc-map-btn--top-right { right: var(--spc-space); top: var(--spc-space); }
.spc-map-btn__icon { display: inline-flex; align-items: center; }
.spc-map-btn__label { white-space: nowrap; }

/* Keys pane (Layers) -------------------------------------------------------*/
.keys-pane-inner { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.keys-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.keys-title {
  margin: 0; color: var(--spc-text);
  font: 600 16px/28px var(--spc-font);
}
.keys-text {
  margin: 0; color: var(--spc-muted);
  font: 400 16px/28px var(--spc-font);
}
.keys-info {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  color: var(--spc-muted); border-radius: 6px; background: #E9ECEF;
  font: 400 16px/24px var(--spc-font);
  margin-bottom: 20px;
}
.keys-group { border: 0; padding: 0; }
.keys-group__title {
  margin: 0 0 8px; color: var(--spc-text);
  font: 600 16px/28px var(--spc-font);
}
.keys-list { display: flex; flex-direction: column; gap: 6px; }
.keys-item {
  display: inline-flex; align-items: center; gap: 8px; color: var(--spc-text);
  font: 400 16px/28px var(--spc-font);
}
.keys-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.keys-item--with-icon .keys-item__icon { margin-left: auto; }
.leaflet-sidebar-pane .keys-info__icon { padding: 6px 10px 6px 12px; }
.keys-pane-inner hr { margin: 0; background: rgba(33,37,41,.20); }
.svg-placeholder--hero { display:inline-block; width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,#e9f2ff,#f6faff); }

@media (min-width: 1200px) {
  .leaflet-sidebar { width: 510px; max-width: 510px; }
}

.js-keys-custom { display:flex; justify-content:center; align-items:center; margin-top: 45%;}

/* Native Legend control (bottom-left) -------------------------------------*/
/* Container + title */
.spc-legend {
  position: absolute; z-index: 1000; left: var(--spc-space); bottom: var(--spc-space);
  max-width: 250px; background: var(--spc-bg); border-radius: var(--spc-radius);
  box-shadow: 0 4px 18px rgba(33,37,41,.15); overflow: hidden;
  font: 14px/1.4 var(--spc-font);
}
.spc-legend .legend { margin: 0; }
.spc-legend__title {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: 10px var(--spc-space); border: 0; background: var(--spc-blue);
  color: #fff; cursor: pointer; text-align: left; user-select: none;
}
.spc-legend__icon { display: flex; align-items: center; }
.spc-legend__label { font: 600 16px/18px var(--spc-font); }
.spc-legend__chevron {
  margin-left: auto; inline-size: 12px; block-size: 12px;
  background: no-repeat center / 12px 12px;
  mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") center / contain;
  background-color: var(--spc-text);
  transition: transform .3s ease;
}

/* Body (collapsible) */
.spc-legend__body {
  padding: var(--spc-space);
  overflow: auto;
  transition: height .3s ease, padding .3s ease, opacity .2s ease;
}
.spc-legend.is-collapsed .spc-legend__body {
  height: 0; padding-block: 0; opacity: 0;
}
.spc-legend.is-collapsed .spc-legend__chevron { transform: rotate(-90deg); }

/* Enforce total box height when expanded */
.spc-legend.leaflet-control:not(.is-collapsed) { height: 126px; }

/* Compact legend rows */
.legend.legend--compact .legend__row {
  display: flex; align-items: center; gap: .5rem; flex: 1 1 100%;
}
.legend__swatch { width: 32px; height: 16px; border-radius: 4px; }
.legend__swatch--boundary { background: rgba(245,73,39,.15); border: 1px solid rgb(245 73 39); }
.legend__swatch--limit    { background: rgba(54,79,199,.15); border: 1px solid rgb(54 79 199); }
.legend__swatch--eez      { background: rgba(8,127,91,.15);  border: 1px solid rgb(8 127 91); }
.legend__swatch--shelf    { background: rgba(253,126,20,.15); border: 1px solid rgb(253 126 20); }
.legend__swatch--completed    { background: #20c99750; border: 1px solid #20c997; }
.legend__swatch--notcompleted    { background: #FFCD3950; border: 1px solid #FFCD39; }
.legend__label { color: var(--spc-text); font: 400 16px/28px var(--spc-font); }

.legend--deposited {
    width: 64px;
    height: 8px;
    border-radius: 4px;
    background: #20c997;
    border: 1px solid #20c997;
  }
.legend--notdeposited {
    width: 64px;
    height: 0;
    border-radius: 4px;
    border: 4px solid transparent;
    border-image: repeating-linear-gradient(
      to right,
      #FFCD39 0 12px,   /* dash length */
      transparent 12px 24px /* gap length */
    ) 1;
}

/* Mobile: keep legend readable */
@media (max-width: 575.98px) {
  .spc-legend.leaflet-control { width: 75vw; max-width: 75vw; }
}

/* Bottom-left fold animation for legend panel (external container) --------*/
#spc-legend {
  transform-origin: left bottom;
  will-change: transform, opacity, visibility;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
#spc-legend.spc-legend--collapsed {
  transform: scale(.9) translate(-8px, 8px);
  opacity: 0; visibility: hidden; pointer-events: none;
}
#spc-legend.is-animating { backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  #spc-legend { transition: none !important; }
}

/* Dataset details (Details pane) ------------------------------------------*/
.eez-popup-title { color: var(--spc-text); text-align: center; font: 600 20px/28px var(--spc-font); margin-bottom: 0; }
.eez-popup-country { color: var(--spc-blue); font: 400 16px/28px var(--spc-font); }
.leaflet-sidebar-pane .details { margin-top: calc(22px + 16px); }

.leaflet-sidebar-pane .row { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--spc-border); }
.leaflet-sidebar-pane .row.country { margin-top: 0px; padding-bottom: 24px; border-bottom: none}
.leaflet-sidebar-pane .row .label,
.leaflet-sidebar-pane .row .value { width: 50%; }

.leaflet-sidebar-pane .row .label {
  color: var(--spc-text);
  font: 400 14px/22px var(--spc-font);
  padding-left: 0;
}
.leaflet-sidebar-pane .row .label  .bi-question-circle {cursor: help;}

.leaflet-sidebar .section-title {
  color: #212529;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  margin: 24px 0 8px 0;
}

.leaflet-sidebar-pane .row .value {
  color: var(--spc-text);
  font: 600 14px/22px var(--spc-font);
  padding-right: 0;
}

.leaflet-sidebar-pane .country .value {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  color: var(--spc-blue); font: 400 16px/28px var(--spc-font);
}

.leaflet-sidebar-pane .country.column .value img { padding-right: 16px; }
.leaflet-sidebar-pane .country .value img { width: 40px; height: 24px; border-radius: var(--spc-radius); }
.leaflet-sidebar-pane .row.nop .value > div { font-weight: 400; }
.leaflet-sidebar-pane .row.country .value { width: 100%; gap: 16px; }
.leaflet-sidebar-pane .row.country.column .value { flex-direction: column; }

.leaflet-sidebar .related-datasets {
  display: flex; flex-direction: column; gap: 8px;
}
.leaflet-sidebar .related-datasets .dataset {
  width: 100% !important;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px var(--spc-space) !important;
  border: 1px solid var(--spc-border); border-radius: 6px;
  margin-bottom: 0px !important;
  box-shadow: none !important;
}
.leaflet-sidebar .related-datasets .dataset-header {
  display: flex; justify-content: space-between; gap: var(--spc-space); width: 100%;
}
.leaflet-sidebar .related-datasets .dataset-title {
  margin-bottom: 0 !important;
}
.leaflet-sidebar .related-datasets .dataset-org {
  margin-bottom: 0 !important;
}
.leaflet-sidebar .related-datasets .dataset-title a {
  color: var(--spc-text); text-decoration: none;
  font: 600 14px/22px var(--spc-font);
}
.leaflet-sidebar .related-datasets .dataset-org { width: 32px; }
.leaflet-sidebar .related-datasets .dataset-org a { display: block; width: 32px; height: 32px; }
.leaflet-sidebar .related-datasets .dataset-header img { width: 32px; height: auto; padding-left: 0 !important; }
.leaflet-sidebar .related-datasets .dataset-formats { display: flex; gap: 8px; }
.leaflet-sidebar .related-datasets .dataset-formats a {
  display: inline-block; padding: 4px 8px; border-radius: 4px; background: #E9ECEF;
  color: var(--spc-text); text-align: center; font: 600 10px/1 var(--spc-font);
}
.leaflet-sidebar .related-dataset p { margin: 0; } /* legacy class kept */
.leaflet-sidebar .related-datasets .tooltip { display: none; }
.details .date.value { width: 100%; }

/* Disable Details tab until a map feature is clicked ----------------------*/
#spc-sidebar .leaflet-sidebar-tabs a.is-disabled {
  pointer-events: none; opacity: .45; filter: grayscale(.5);
}

/* Responsive tweaks --------------------------------------------------------*/
@media (max-width: 991.98px) {
  .spc-map-btn { padding: 6px 9px; font: 600 13px/1.2 var(--spc-font); }
}
@media (max-width: 767.98px) {
  .spc-map-btn { padding: 6px 8px; font: 600 12px/1.2 var(--spc-font); }
}

.pol-label {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
}

.mbd-radius {
  padding: 16px;
  border: 1px solid #E5E9F2;
  border-radius: 6px;
}