/* ------------------------------------------------------------------
   Font baseline (Bootstrap 5) — make sure you load Roboto 400,500,700
------------------------------------------------------------------- */
:root{
  --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Enforce font family across common Shiny/Bootstrap widgets */
html, body,
.btn, .btn-group,
.form-control, .form-select, .input-group-text,
.dropdown-menu, .nav-link, .tab-pane,
table, table.dataTable, .dataTables_wrapper,
.shiny-tree, .shiny-plot-output {
  font-family: var(--bs-body-font-family) !important;
}

/* === KPI cards =================================================== */
.kpi-wrap { display:flex; flex-wrap:wrap; gap:0.8rem; }
.kpi-card {
  flex:1 1 150px; min-width:140px; background:#fff; border-radius:0.6rem;
  box-shadow:0 2px 4px rgba(0,0,0,.08); padding:0.8rem 0.9rem;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
}
.kpi-label {
  font-size:0.78rem; font-weight:500; color:#6c757d;
  margin-bottom:0.15rem; line-height:1.1rem; white-space:nowrap;
}
/* Use 700 (bold) instead of 600 — Roboto has 400/500/700/900 */
.kpi-value { font-size:1.45rem; font-weight:700; line-height:1.6rem; white-space:nowrap; }
.kpi-value.positive{color:#198754;} .kpi-value.negative{color:#D6232E;} .kpi-value.na{color:#6c757d;}

/* Data-table “Total” row styling */
table.dataTable tbody tr.total-row > td {
  background-color:#e7f1fc !important;
  font-weight:700 !important;                /* was 600 */
  border-top:2px solid #dee2e6 !important;
}

/* Keep currency buttons inside sidebar */
.btn-group.btn-group-justified { flex-wrap:wrap; }
#currency .btn { padding:2px 6px; font-size:.75rem; line-height:1.2rem; }

/* Slimmer compact tables */
table.dataTable.compact { font-size:0.72rem !important; }
table.dataTable.compact th, table.dataTable.compact td { padding:2px 3px !important; }
table.dataTable.compact tr.total-row td { font-size:0.78rem !important; }

/* General data-table tweaks */
div.dataTables_wrapper table.dataTable { font-size:0.80rem !important; }
div.dataTables_wrapper table.dataTable th,
div.dataTables_wrapper table.dataTable td {
  padding:3px 4px !important; line-height:1.0rem !important;
}
div.dataTables_wrapper tr.total-row td { font-size:0.85rem !important; }

/* Availability badges inside DataTables */
table.dataTable td .avail-cell{
  display:inline-block; min-width:1.6em; padding:2px 6px; border-radius:6px;
  font-weight:700; text-align:center;
}
table.dataTable td .avail-yes{ color:#198754 !important; background:rgba(25,135,84,.10) !important; }
table.dataTable td .avail-no{  color:#D6232E !important; background:rgba(214,35,46,.10) !important; }

/* Top-10 table: minimal widths & alignment */
table.dataTable thead th[colspan]{ text-align:center; }
table.dataTable th.col-code, table.dataTable td.col-code{ width:6ch; white-space:nowrap; }
table.dataTable th.col-desc, table.dataTable td.col-desc{ width:40%; white-space:normal; line-height:1.15; }
table.dataTable th.col-num{ text-align:right; }

/* Badges & notes */
.update-badge{
  display:inline-block; padding:2px 10px; border-radius:9999px;
  background:#f8f9fa; border:1px solid #dee2e6; color:#6c757d; font-size:.85rem;
}
.auth-note{ font-size:0.9rem; color:#6c757d; margin-top:0.5rem; line-height:1.3; }

/* ShinyTree look like an input */
.form-group .shiny-tree{
  border:1px solid #ced4da; border-radius:.25rem; background:#fff;
  padding:.375rem .5rem; max-height:280px; overflow:auto;
}
.form-group > label{ display:block; font-weight:700; margin-bottom:.25rem; } /* was default: make label bolder */

/* --- Sidebar inner gutter so content doesn't hug the edge --- */
#leftbar { padding-left: 8px; }

/* --- Keep ShinyTree from bleeding outside its box --- */
#partner_tree{
  box-sizing: border-box;
  max-height: 560px;
  overflow: auto;
  padding: 4px 6px;
  min-width: 0 !important;
}

/* jstree default adds some left offsets; cancel any negative margins */
#partner_tree .jstree-container-ul{ margin-left: 0 !important; }

/* --- Truncate long country names on one line with ellipsis --- */
#partner_tree .jstree-anchor{
  display: inline-block;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 48px);
  vertical-align: middle;
}

/* Header / branding */
.app-header{ padding:4px 0; display:flex; align-items:center; justify-content:space-between; }
.app-header .d-flex{ align-items:center; gap:12px; flex-wrap:nowrap; }
.brand-logo{ height:34px !important; width:auto !important; max-height:34px !important; max-width:180px !important; display:block; }
.app-title{ margin:0; font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:576px){
  .brand-logo{ height:28px !important; max-height:28px !important; }
}

/* Welcome text helpers */
.welcome-lead{ font-size:1.05rem; margin:.4rem 0 1rem; }
.chip{
  display:inline-block; padding:.15rem .6rem; border-radius:999px;
  background:#e7f2fa; color:#0b5ea8; font-weight:700; font-size:.85rem;
}

/* Map wrapper – no top padding, keeps a thin gutter on the other sides */
.welcome-map-wrap{
  margin: 8px auto 0;
  max-width: 1024px;
  background: #f2f6fb;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 0.5rem 1rem -0.75rem rgba(0,0,0,.12);
  padding: 0 6px 6px 6px;      /* no top padding */
}

/* Kill any spacing the plot adds inside the wrapper */
.welcome-map-wrap .shiny-plot-output{
  margin: 0 !important;
  line-height: 0;
  height: 100% !important;
}

/* Make the <img> fill without adding baseline gaps */
.welcome-map-wrap .shiny-plot-output img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* micro-nudge to ensure no top seam shows due to pixel rounding */
.welcome-map-wrap .shiny-plot-output { margin-top:-1px !important; }

/* Sidebar stickiness (optional, only if you use #leftbar) */
#leftbar .well { position:sticky; top:72px; }

/* ============== Tutorial videos =================================== */
/* Sidebar link (between language selector and footer) */
.tutorial-sidebar-link { margin: 0.6rem 0 0.2rem 0; }
.tutorial-sidebar-link .tutorial-link i,
.tutorial-sidebar-link .tutorial-link .fa { margin-right: 6px; }

/* Cards row at top of Navigation tab */
.tutorial-cards-row { margin-top: 0.5rem; }
.tutorial-card-col .glightbox { text-decoration: none; color: inherit; }
.tutorial-card {
  border: 1px solid #e3e6ea; border-radius: 8px;
  background: #fff; overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
  height: 100%;
}
.tutorial-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.tutorial-thumb-wrap {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; background: #000;
}
.tutorial-thumb {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.tutorial-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  background: rgba(0,0,0,0.65); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; padding-left: 4px;
}
.tutorial-card-title {
  padding: 0.6rem 0.75rem;
  font-weight: 600; font-size: 0.95rem;
  line-height: 1.25;
}

/* Modal: title + thumbnail strip below iframe */
.tutorial-modal-title {
  margin: 0 0 0.5rem 0;
  font-weight: 700;
}
.tutorial-thumb-strip {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: nowrap !important;
  width: 100%;
}
.tutorial-thumb-btn {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 20% !important;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, transform .15s;
}
.tutorial-thumb-btn:hover {
  border-color: #94a3b8;
  transform: translateY(-1px);
}
.tutorial-thumb-btn.active {
  border-color: #2563eb;
  background: #eff6ff;
}
.tutorial-thumb-btn-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.tutorial-thumb-btn-label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 4px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============== Methodology / Glossary visual polish ================ */
/* Subtle, less flashy callout (replaces Bootstrap alert-info) */
.method-note,
div.method-note {
  border-left: 3px solid #6f9bc4 !important;
  background: #f4f7fb !important;
  padding: .45rem .75rem !important;
  margin: .5rem 0 .9rem !important;
  font-size: .9rem !important;
  color: #4a5562 !important;
  border-radius: 0 .2rem .2rem 0 !important;
}
.method-note strong,
div.method-note strong { color: #2b5577 !important; font-weight: 600 !important; }
.method-note p,
div.method-note p { margin: 0 !important; }

/* Indicator formula block */
.method-formula,
div.method-formula {
  font-family: 'Cambria Math', Georgia, 'Times New Roman', serif !important;
  background: #fafbfc !important;
  border: 1px solid #e3e6ea !important;
  border-left: 3px solid #b8c5d6 !important;
  border-radius: .25rem !important;
  padding: .45rem .75rem !important;
  margin: .3rem 0 .9rem !important;
  font-size: .98rem !important;
  color: #2c3e50 !important;
  line-height: 1.45 !important;
  overflow-x: auto !important;
}

/* Compact 2-column glossary (one <p class="g-row"> per entry) */
.method-glossary,
div.method-glossary {
  column-count: 2 !important;
  column-gap: 2rem !important;
  margin: .5rem 0 1rem !important;
}
@media (max-width: 900px) {
  .method-glossary,
  div.method-glossary { column-count: 1 !important; }
}
.method-glossary .g-row,
div.method-glossary p.g-row {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 .3rem 0 !important;
  padding: 0 !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  color: #495057 !important;
}
.method-glossary .g-row strong,
div.method-glossary p.g-row strong {
  color: #2b5577 !important;
  font-weight: 600 !important;
}

/* ============== Methodology / Glossary visual polish ================ */
/* Subtle, less flashy callout (replaces Bootstrap alert-info) */
.method-note,
div.method-note {
  border-left: 3px solid #6f9bc4 !important;
  background: #f4f7fb !important;
  padding: .45rem .75rem !important;
  margin: .5rem 0 .9rem !important;
  font-size: .9rem !important;
  color: #4a5562 !important;
  border-radius: 0 .2rem .2rem 0 !important;
}
.method-note strong,
div.method-note strong { color: #2b5577 !important; font-weight: 600 !important; }
.method-note p,
div.method-note p { margin: 0 !important; }

/* Indicator formula block */
.method-formula,
div.method-formula {
  font-family: 'Cambria Math', Georgia, 'Times New Roman', serif !important;
  background: #fafbfc !important;
  border: 1px solid #e3e6ea !important;
  border-left: 3px solid #b8c5d6 !important;
  border-radius: .25rem !important;
  padding: .45rem .75rem !important;
  margin: .3rem 0 .9rem !important;
  font-size: .98rem !important;
  color: #2c3e50 !important;
  line-height: 1.45 !important;
  overflow-x: auto !important;
}

/* Compact 2-column glossary (one <p class="g-row"> per entry) */
.method-glossary,
div.method-glossary {
  column-count: 2 !important;
  column-gap: 2rem !important;
  margin: .5rem 0 1rem !important;
}
@media (max-width: 900px) {
  .method-glossary,
  div.method-glossary { column-count: 1 !important; }
}
.method-glossary .g-row,
div.method-glossary p.g-row {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 .3rem 0 !important;
  padding: 0 !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  color: #495057 !important;
}
.method-glossary .g-row strong,
div.method-glossary p.g-row strong {
  color: #2b5577 !important;
  font-weight: 600 !important;
}