/* 
 * datasets_style.css
 * Additional CSS for the OGC API datasets app
 * Extends BruxellesMobilite_Meta_2.css / lam.css — do not duplicate those rules here
 */

/* ─── Color tokens (mirrors BM palette) ─────────────────────────────────── */
:root {
  --bm-blue:       #2f3e8b;
  --bm-light:      #EBEBF5;
  --bm-mid:        #EAEAF5;
  --bm-dark:       #4d4d4d;
  --bm-green:      #215f5d;
  --bm-border:     rgba(0,0,0,.1);
  --bm-radius:     8px;
}

/* ─── Top-level page wrapper ─────────────────────────────────────────────── */
.datasets-page {
  font-family: 'Source Sans Pro', 'Inter', Helvetica, Arial, sans-serif;
  color: var(--bm-dark);
}

/* ─── OGC intro banner (mirrors .introduction) ───────────────────────────── */
.ogc-intro {
  background: #ffffff;
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--bm-border);
}

.ogc-intro h1 {
  color: #000;
  margin-bottom: .5rem;
}

.ogc-intro .ogc-badge {
  display: inline-block;
  background: var(--bm-light);
  color: var(--bm-blue);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: .2rem .75rem;
  border-radius: 9999px;
  margin-bottom: .75rem;
  letter-spacing: .04em;
}

.ogc-intro .ogc-desc {
  color: var(--bm-dark);
  font-size: 1.05rem;
  max-width: 720px;
}

/* ─── Section headings matching BM style ────────────────────────────────── */
.datasets-section {
  padding: 2rem 0;
}

.datasets-section h2 {
  color: var(--bm-dark);
  font-size: 1.5rem;
  font-weight: 700;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--bm-light);
  margin-bottom: 1.5rem;
}

/* ─── Collection cards (catalog-style like div-dataset) ─────────────────── */
.collection-card {
  border-radius: var(--bm-radius);
  border: 1px solid var(--bm-light);
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none;
  display: block;
  color: inherit;
}

.collection-card:hover {
  background: var(--bm-light);
  box-shadow: 0 4px 16px rgba(47,62,139,.12);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.collection-card h3 {
  color: var(--bm-blue);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .4rem;
  display: inline;
  padding-right: 12px;
}

.collection-card .collection-id {
  font-size: .8rem;
  color: #888;
  font-family: monospace;
}

.collection-card .collection-desc {
  color: var(--bm-dark);
  font-size: .95rem;
  margin-top: .4rem;
}

.collection-card .collection-tags {
  margin-top: .6rem;
}

.collection-tag {
  display: inline-block;
  background: #c5e8e8;
  color: var(--bm-dark);
  font-size: .78rem;
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 6px;
  margin-top: 4px;
}

.collection-tag.tag-geo   { background: #d4edda; color: #155724; }
.collection-tag.tag-crs   { background: var(--bm-light); color: var(--bm-blue); }
.collection-tag.tag-cache { background: #fff3cd; color: #856404; }
.collection-tag.tag-pub   { background: #f0d9ff; color: #6a0dad; }

/* ─── Info table (mirrors .table_meta / .tr_meta) ─────────────────────── */
.info-table {
  width: 100%;
  font-size: 1rem;
}

.info-table tr {
  border-top:    dotted .1em var(--bm-border);
  border-bottom: dotted .1em var(--bm-border);
  height: 52px;
}

.info-table .info-label {
  width: 28%;
  vertical-align: middle;
  color: var(--bm-blue);
  font-weight: 600;
  padding-right: 1rem;
}

.info-table .info-value {
  vertical-align: middle;
  color: var(--bm-dark);
  padding-left: 6px;
}

/* ─── Shadowed info box (mirrors .shadowedBox) ───────────────────────────── */
.shadow-box {
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(47,62,139,.12);
  background: #fff;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}

.shadow-box h2 {
  color: var(--bm-blue);
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0;
  border-bottom: none;
}

/* ─── BM-style action buttons ────────────────────────────────────────────── */
.btn.bm-btn {
  font-size: .875rem;
  font-weight: 600;
  padding: .3rem 1rem;
  border-radius: 6px;
  border: 1.5px solid var(--bm-blue);
  color: var(--bm-blue);
  background: #fff;
  text-decoration: none;
  display: inline-block;
  transition: background .15s, color .15s;
}

.btn.bm-btn:hover {
  background: var(--bm-blue);
  color: #fff;
  text-decoration: none;
}

.btn.bm-btn-primary {
  background: var(--bm-blue);
  color: #fff !important;
  border-color: var(--bm-blue);
}

.btn.bm-btn-primary:hover {
  background: #1d2a6b;
  border-color: #1d2a6b;
}

/* ─── API Tester form ────────────────────────────────────────────────────── */
.api-tester {
  background: #f7f7fb;
  border: 1px solid var(--bm-light);
  border-radius: var(--bm-radius);
  padding: 1.5rem;
}

.api-tester label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--bm-blue);
  display: block;
  margin-bottom: 4px;
}

.api-tester input,
.api-tester select {
  width: 100%;
  padding: .45rem .75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: .95rem;
  color: var(--bm-dark);
  background: #fff;
}

.api-tester input:focus,
.api-tester select:focus {
  border-color: var(--bm-blue);
  outline: 2px solid rgba(47,62,139,.2);
}

.api-result-box {
  background: #fff;
  border: 1px solid var(--bm-light);
  border-radius: var(--bm-radius);
  padding: 1rem;
  margin-top: 1rem;
}

.api-result-box pre {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  max-height: 460px;
  font-size: .88rem;
}

.api-result-success {
  background: #d4edda;
  border-radius: 6px;
  padding: .5rem 1rem;
  margin-bottom: .75rem;
  color: #155724;
  font-weight: 600;
}

.api-result-error {
  background: #f8d7da;
  border-radius: 6px;
  padding: .5rem 1rem;
  color: #721c24;
  font-weight: 600;
}

.api-url-display {
  background: #f5f5f5;
  border-radius: 4px;
  padding: .35rem .75rem;
  font-family: monospace;
  font-size: .85rem;
  word-break: break-all;
  color: var(--bm-dark);
  display: block;
  margin-top: .35rem;
}

/* ─── Leaflet map ────────────────────────────────────────────────────────── */
#ogc-map {
  height: 380px;
  width: 100%;
  border-radius: var(--bm-radius);
  border: 1px solid var(--bm-light);
  z-index: 1;
}

/* ─── Feature/Items list ─────────────────────────────────────────────────── */
.feature-row {
  border-top:    dotted .1em var(--bm-border);
  border-bottom: dotted .1em var(--bm-border);
  padding: .75rem 0;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.feature-row:hover {
  background: var(--bm-light);
}

.feature-id-badge {
  background: var(--bm-light);
  color: var(--bm-blue);
  font-size: .8rem;
  font-family: monospace;
  padding: .2rem .6rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.ogc-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.5rem;
}

.ogc-pagination a,
.ogc-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--bm-dark);
  font-weight: 700;
  color: var(--bm-dark);
  text-decoration: none;
  font-size: .9rem;
}

.ogc-pagination .active,
.ogc-pagination a:hover {
  background: var(--bm-light);
  border-color: var(--bm-blue);
  color: var(--bm-blue);
}

/* ─── Error page ─────────────────────────────────────────────────────────── */
.error-page {
  text-align: center;
  padding: 5rem 1rem;
}

.error-page .error-code {
  font-size: 6rem;
  font-weight: 900;
  color: var(--bm-light);
  line-height: 1;
}

.error-page .error-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bm-blue);
  margin: 1rem 0 .5rem;
}

.error-page .error-msg {
  color: var(--bm-dark);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 2rem;
}

/* ─── Breadcrumb extra levels ────────────────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: .5rem 0;
  margin: 0;
}

.breadcrumb-item a {
  color: rgba(255,255,255,.8);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #fff;
  text-decoration: underline;
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.6);
}

/* ─── Responsive helpers ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .shadow-box { padding: 1rem; }
  .info-table .info-label { width: 40%; }
  .ogc-intro h1 { font-size: 1.4rem; }
  #ogc-map { height: 260px; }
}