/* Track Metrics Display Plugin Styles */

/* Container */
.tmd-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Headings */
.tmd-container h2,
.tmd-metrics h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #333;
  border-bottom: 2px solid #0078d4;
  padding-bottom: 0.5rem;
}

/* Metric numbers */
.tmd-metric,
.tmd-animate {
  font-size: 1.2rem;
  font-weight: bold;
  color: #004080; /* darker blue for better contrast */
  transition: color 0.3s ease, transform 0.3s ease;
}
.tmd-metric.animate,
.tmd-animate.animate {
  transform: scale(1.05);
  color: #003366; /* deeper navy on animate */
}

/* Semantic colours for metrics (stronger tones) */
.tmd-accepted {
  color: #1e7e34; /* dark green */
}
.tmd-rejected {
  color: #b02a37; /* dark red */
}
.tmd-listeners {
  color: #e65100; /* rich orange */
}

/* Tables */
.tmd-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.tmd-table th,
.tmd-table td {
  padding: 0.6rem;
  text-align: left;
  border: 1px solid #eee;
}
.tmd-table th {
  background: #f3f3f3;
  font-weight: 600;
}
.tmd-table td {
  background: #ffffff; /* pure white for clarity */
}
.tmd-table tbody tr:hover td {
  background: #f2f2f2; /* subtle hover effect */
}

/* Semantic background tint for table cells */
.tmd-table td.accepted {
  background: #e8f5e9; /* light green */
}
.tmd-table td.rejected {
  background: #fdecea; /* light red */
}
.tmd-table td.listeners {
  background: #fff3e0; /* light orange */
}

/* Flags */
.tmd-flag {
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

/* Mini bars for distribution */
.tmd-bar {
  display: inline-block;
  height: 8px;
  background: #0078d4;
  border-radius: 4px;
}
.tmd-bar-label {
  font-size: 0.85rem;
  margin-left: 0.5rem;
  color: #555;
}

/* Legends */
.tmd-legend {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.tmd-legend-item {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
}
.tmd-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 0.4rem;
}

/* Accessibility: focus states */
.tmd-container a:focus,
.tmd-container button:focus {
  outline: 2px solid #0078d4;
  outline-offset: 2px;
}

/* High-specificity overrides for metric text colours */
.tmd-container .tmd-metrics .tmd-animate { 
  color: #111 !important; /* strong default contrast */
}
.tmd-container .tmd-metrics .tmd-accepted { 
  color: #1e7e34 !important; /* dark green */
}
.tmd-container .tmd-metrics .tmd-rejected { 
  color: #b02a37 !important; /* dark red */
}
.tmd-container .tmd-metrics .tmd-listeners { 
  color: #e65100 !important; /* rich orange */
}

/* Ensure table cell backgrounds stay light for readability */
.tmd-container .tmd-table td { 
  background: #fff !important; 
}
.tmd-container .tmd-table tbody tr:hover td { 
  background: #f2f2f2 !important; 
}

/* Prevent theme link colour from affecting metric spans if wrapped in <a> */
.tmd-container .tmd-metrics a .tmd-animate,
.tmd-container .tmd-metrics a .tmd-accepted,
.tmd-container .tmd-metrics a .tmd-rejected,
.tmd-container .tmd-metrics a .tmd-listeners {
  color: inherit !important; /* inherit from parent span */
}
/* Force visible text in table headers and cells */
.tmd-container .tmd-table th {
  color: #222 !important;   /* dark grey for headers */
}

.tmd-container .tmd-table td {
  color: #333 !important;   /* slightly lighter dark grey for cell text */
}

/* Ensure country names and server names are visible */
.tmd-container .tmd-table td,
.tmd-container .tmd-table td span,
.tmd-container .tmd-table td img + span {
  color: #333 !important;
}
/* Force visible text in Campaign Progress list */
.tmd-container .tmd-metrics ul li {
  color: #333 !important;   /* dark grey for readability */
  font-weight: 500;         /* medium weight for clarity */
}

/* Ensure spans inside list items keep their semantic colours */
.tmd-container .tmd-metrics ul li .tmd-animate {
  font-weight: bold;
}
/* Align Campaign Progress list items */
.tmd-container .tmd-metrics ul {
  list-style: none;       /* remove default bullets */
  padding: 0;
  margin: 0;
}

.tmd-container .tmd-metrics ul li {
  display: flex;          /* use flexbox for alignment */
  justify-content: space-between; /* label left, number right */
  align-items: center;
  color: #555 !important; /* softer grey for labels */
  font-weight: 500;
  padding: 0.3rem 0;
  border-bottom: 1px solid #eee; /* subtle divider */
}

.tmd-container .tmd-metrics ul li:last-child {
  border-bottom: none;    /* remove divider on last item */
}

.tmd-container .tmd-metrics ul li .tmd-animate {
  font-weight: bold;
  margin-left: 1rem;      /* spacing between label and number */
}
/* Align table cells for dashboard look */
.tmd-container .tmd-table td {
  display: flex;                /* use flexbox for alignment */
  justify-content: space-between; /* label left, number right */
  align-items: center;
  color: #333 !important;       /* ensure text is visible */
  font-weight: 500;
  padding: 0.4rem 0.6rem;
}

/* Keep headers strong and aligned */
.tmd-container .tmd-table th {
  color: #222 !important;
  font-weight: 600;
  text-align: left;
}

/* Numbers inside table cells */
.tmd-container .tmd-table td .tmd-animate {
  font-weight: bold;
  margin-left: 1rem;            /* spacing between label and number */
}

/* Flags + country names stay left-aligned */
.tmd-container .tmd-table td img.tmd-flag {
  margin-right: 0.5rem;
}
/* Revert the flex change on table cells */
.tmd-container .tmd-table td,
.tmd-container .tmd-table th {
  display: table-cell !important;
  vertical-align: middle;
  padding: 0.6rem;
}

/* Keep header styling strong and visible */
.tmd-container .tmd-table th {
  color: #222 !important;
  font-weight: 600;
  background: #f3f3f3;
  text-align: left;
}

/* Labels (first column) left-align; numeric columns right-align */
.tmd-container .tmd-table tbody td:first-child {
  text-align: left;
  color: #333 !important;
}

/* Accepted, Rejected, Listeners columns (2nd–4th) right-align */
.tmd-container .tmd-table tbody td:nth-child(2),
.tmd-container .tmd-table tbody td:nth-child(3),
.tmd-container .tmd-table tbody td:nth-child(4) {
  text-align: right;
}

/* Ensure numbers stay bold and visible */
.tmd-container .tmd-table td .tmd-animate {
  font-weight: bold;
}

/* Flags spacing next to country names */
.tmd-container .tmd-table td .tmd-flag {
  margin-right: 0.5rem;
}

/* Maintain readable text colours in cells */
.tmd-container .tmd-table td {
  color: #333 !important;
}
/* Consistent column widths for tables */
.tmd-container .tmd-table th,
.tmd-container .tmd-table td {
  padding: 0.6rem;
}

/* Servers table: 4 columns */
.tmd-container .tmd-table th:first-child,
.tmd-container .tmd-table td:first-child {
  width: 35%;   /* Server name */
  text-align: left;
}

.tmd-container .tmd-table th:nth-child(2),
.tmd-container .tmd-table td:nth-child(2),
.tmd-container .tmd-table th:nth-child(3),
.tmd-container .tmd-table td:nth-child(3),
.tmd-container .tmd-table th:nth-child(4),
.tmd-container .tmd-table td:nth-child(4) {
  width: 21%;   /* Accepted, Rejected, Listeners */
  text-align: right;
}

/* Listener Locations table: 4 columns */
.tmd-container .tmd-table th:first-child,
.tmd-container .tmd-table td:first-child {
  width: 35%;   /* Country + flag */
  text-align: left;
}

.tmd-container .tmd-table th:nth-child(2),
.tmd-container .tmd-table td:nth-child(2),
.tmd-container .tmd-table th:nth-child(3),
.tmd-container .tmd-table td:nth-child(3),
.tmd-container .tmd-table th:nth-child(4),
.tmd-container .tmd-table td:nth-child(4) {
  width: 21%;   /* Listeners, Accepted, Rejected */
  text-align: right;
}