/* ================================
   Country Scorecard – Metrics Pages
   Theme-friendly styling (FULL FILE)
   ================================ */

:root {
  --csm-line-color: #5facde;
  --csm-border: #dcd9d9;
  --csm-border-light: #eee;
  --csm-bg: #ffffff;
  --csm-bg-alt: #fafafa;
  --csm-zebra-even: #f9f6f6;
  --csm-zebra-odd: #ffffff;
  --csm-text: #222;
  --csm-text-muted: #666;
}
.csm-grid {
  display: grid;
  grid-template-columns: 215px 1fr; /* left column shortened; main column wider */
  gap: 30px; /* <- spacing between left and main columns */
}
.csm-left { /* no sticky/fixed, no inner scroll */ }
.csm-main { min-width: 0; }

.csm-main h1 {
	margin: 0;
}

.csm-main .adsbygoogle {
	margin: 0 0 25px !important;
}

/* Back link above H1 */
.csm-back-link {
  display: inline-block;
  margin: 0.5rem 0 1rem;
  text-decoration: none;
}
.csm-back-link .fi-br-arrow-small-left {
  position: relative;
  top: 4px;
  font-size: 20px;
}

/* Definition paragraph below H1 */
.csm-definition {
  color: #888;
  margin: .5rem 0 1rem;
  font-size: 1rem;
  font-style: italic;
}

/* Desktop metric nav (left column) */
.csm-metric-nav ul { list-style: none; margin: 0; padding: 0; }
.csm-metric-nav li { margin: 8px 0; }
.csm-nav-link {
  display: block;
  padding: .65rem .8rem;
  border-radius: 6px;
  background: var(--csm-bg);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  border: 1px solid var(--csm-border);
  font-size: 0.9em;
}
.csm-nav-link.is-active {
	background: #fe5757;
	color: #fff;
	border-color: #fe5757;
	font-weight: bold;
}
.csm-nav-link.csm-overview { font-weight: 700; }

/* Mobile metric select (shown only under tablet breakpoint) */
.csm-mobile-only { display: none; }
.csm-mobile-select { margin: .5rem 0 1rem; }
.csm-mobile-select label {
	display: block;
	font-weight: 500;
	margin-bottom: 1rem;
	font-size: 1.2rem;
}
.csm-mobile-select select {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--csm-border);
  border-radius: 6px;
}

/* Headline stats (three cards) */
.csm-headline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* base; overridden below per viewport */
  gap: 14px;
  margin: 1rem 0 1.25rem;
}
.csm-stat {
  background: var(--csm-bg);
  border: 1px solid var(--csm-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.csm-stat-label {
	color: #555;
	margin-bottom: .25rem;
}
.csm-stat-value {
	font-size: 1.4rem;
	font-weight: 700;
}
.csm-stat-badge {
  display: inline-block;
  padding: .35rem .5rem;
  border-radius: 999px;
  background: #eef7ee;
  border: 1px solid #d7ead7;
  font-weight: 700;
}
.csm-stat-badge.pos { background: #e9f7ef; border-color: #cfead9; color: #0b7a34; }
.csm-stat-badge.neg { background: #fdecea; border-color: #f6c7c1; color: #b3261e; }
.csm-stat-badge.neu { background: #f2f2f2; border-color: #e0e0e0; color: #666; }

/* Insights list */
.csm-insights { margin: 1rem 0 1.25rem; }
.csm-insights ul { margin: 0; padding-left: 1.25rem; color: var(--csm-text); line-height: 1.55; }
.csm-insights li { margin: .35rem 0; }

/* Chart area */
#csm-chart-box {
  position: relative;
  width: 100%;
  height: 420px;
  margin: 1rem 0;
}
#csm-chart {
  width: 100% !important;
  height: 100% !important;
  background: var(--csm-bg);
  border: none;
}

/* Action buttons row (if any) */
.csm-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 1.5rem 0;
	align-items: center;
}
.csm-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #dcd9d9;
    border-radius: 6px;
    padding: .6rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    color: #fe5757;       /* 🔴 Red text like other buttons */
    cursor: pointer;      /* 🔗 Pointer cursor for clickable look */
}

/* Data table */
.csm-table-wrap {
  margin: 1.25rem 0;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.csm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 335px;
  color: var(--csm-text);
}
.csm-table thead th {
  background-color: #f4f0f0;
  cursor: pointer;
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid var(--csm-border);
  white-space: nowrap;
  font-weight: 600;
}
.csm-table thead th[aria-sort="ascending"],
.csm-table thead th[aria-sort="descending"] {
  background-color: #efecec;
}
.csm-table tbody td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
.csm-table tbody tr:nth-child(even) td { background-color: var(--csm-zebra-even); }
.csm-table tbody tr:nth-child(odd)  td { background-color: var(--csm-zebra-odd); }
.sort-icon { color: #999; font-size: .9em; }
.csm-source { margin-top: 12px; font-size: .95rem; color: #555; }

.csm-metric-nav .csm-nav-heading {
	margin: 20px 0 0 2px !important;
    font-size: 1rem !important;
}
.csm-metric-nav > .csm-nav-heading:first-of-type {
  margin-top: 0 !important;
}

/* ====== Responsive rules & card layout control ====== */

/* Desktop: keep three headline cards on one row */
@media (min-width: 1024px) {
  .csm-headline-stats {
    grid-template-columns: repeat(3, 1fr); /* exactly three tracks */
    align-items: stretch;
  }
  .csm-stat { height: 100%; } /* make each card equal height */
}

/* Tablet: two per row */
@media (min-width: 680px) and (max-width: 1023px) {
  .csm-headline-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Phones: one per row; also switch to mobile metric selector and hide left nav */
@media (max-width: 1023px) {
  .csm-grid { display: block; }
  .csm-left { display: none; }
  .csm-mobile-only { display: block; }
  #csm-chart-box { height: 320px; }
}

/* Table font bump for small screens */
@media screen and (max-width: 600px) {
  .csm-table { font-size: 17px; }
}