/* ============================================================
   OVERVIEW TAB - Full width, clean style (matches Trends/Momentum)
============================================================ */

/* Main container: full width */
#tab-overview{
  --ov-accent:#5A47B0;
  --ov-accent-hover:#4a3a96;
  --ov-accent-soft:#f3f0fa;
  --ov-accent-mid:#9d8fd9;
  background:#F6F7F9;
  min-height:100%;
  width:100%;
  max-width:none;
  box-sizing:border-box;
}

/* Grid: 12 columns, full width, no clamp */
#tab-overview .grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px;
  margin-bottom:24px;
  width:100%;
  max-width:none;
}
/* Full-width 2-col wrappers (AI+Countries, Win+Lose) */
#tab-overview .grid .mirolabs-grid-2.ov-grid-span{
  grid-column:1 / -1;
}

/* Cards: same premium style as GSC Analysis / Trends (18px radius, soft border, shadow) */
#tab-overview .card,
#tab-overview .mirolabs-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:20px 24px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}

#tab-overview .kpi{grid-column:span 3!important;}
#tab-overview .wide{grid-column:span 12!important;}
/* Full width: no half-width columns (was span 6 = 50%) */
#tab-overview .half{grid-column:span 12!important;}

/* KPI Cards */
#tab-overview .kpi-title{
  font-size:12px;
  font-weight:600;
  color:#374151;
  margin-bottom:8px;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
#tab-overview .kpi-help{
  font-size:11px;
  color:#374151;
  margin-bottom:14px;
  line-height:1.5;
}
#tab-overview .kpi-val{
  font-size:32px;
  font-weight:700;
  color:#111827;
  margin-bottom:10px;
  letter-spacing:-0.03em;
  line-height:1.1;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
#tab-overview .kpi-delta{
  font-size:12px;
  font-weight:500;
}
#tab-overview .up{color:#16a34a!important;}
#tab-overview .down{color:#dc2626!important;}
#tab-overview .flat{color:#374151!important;}

/* Section Titles (legacy; prefer .mirolabs-card-title) */
#tab-overview .title{
  font-size:17px;
  font-weight:600;
  color:#111827;
  margin:0 0 18px 0;
  letter-spacing:-0.02em;
  line-height:1.3;
}
/* Page header – no bottom margin when followed by grid */
#tab-overview .mirolabs-page-header{
  margin-top:0;
}
/* Win/Lose cards: header row + scrollable list */
#tab-overview .ov-winlose-card .mirolabs-card-header{
  margin-bottom:12px;
}
#tab-overview .ov-badge-count{
  font-size:12px;
  font-weight:600;
  color:#374151;
  background:#f3f4f6;
  padding:4px 10px;
  border-radius:999px;
  min-width:24px;
  text-align:center;
}
#tab-overview .ov-badge-win{
  background:var(--ov-accent-soft);
  color:var(--ov-accent-hover);
  border:1px solid #e8e2f8;
}
#tab-overview .ov-badge-lose{
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fecaca;
}
#tab-overview .ov-winlose-hint{
  margin:0 0 10px;
  font-size:12px;
  color:#374151;
  line-height:1.45;
}
#tab-overview .ov-winlose-win{
  border-top:3px solid var(--ov-accent);
}
#tab-overview .ov-winlose-lose{
  border-top:3px solid #f87171;
}
#tab-overview .ov-winlose-body{
  padding:0;
}
#tab-overview .ov-table-wrap{
  max-height:380px;
  overflow-y:auto;
  overflow-x:auto;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:12px;
  margin-top:8px;
}
#tab-overview .ov-winlose-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin:0;
}
#tab-overview .ov-winlose-table thead{
  position:sticky;
  top:0;
  z-index:1;
  background:#f9fafb;
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
}
#tab-overview .ov-winlose-table th{
  padding:10px 12px;
  text-align:left;
  font-weight:600;
  color:#374151;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-bottom:1px solid #e5e7eb;
}
#tab-overview .ov-winlose-table th:last-child{
  text-align:right;
}
#tab-overview .ov-winlose-table td{
  padding:10px 12px;
  border-bottom:1px solid #f3f4f6;
  color:#374151;
  vertical-align:middle;
}
#tab-overview .ov-winlose-table td:last-child{
  text-align:right;
}
#tab-overview .ov-winlose-table tbody tr:hover td{
  background:#f9fafb;
}
#tab-overview .ov-winlose-table tbody tr:last-child td{
  border-bottom:none;
}

/* Legend - Enhanced */
#tab-overview .legend{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:20px 0 18px;
  font-size:12px;
  color:#374151;
  padding:16px 20px;
  background:linear-gradient(to right, #f9fafb 0%, #ffffff 100%);
  border-radius:12px;
  border:1px solid #f3f4f6;
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
#tab-overview .legend span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  font-size:12px;
  padding:7px 14px;
  background:#ffffff;
  border-radius:8px;
  border:1px solid #f3f4f6;
  transition:all 0.2s ease;
}
#tab-overview .legend span:hover{
  background:#f9fafb;
  border-color:#e5e7eb;
  transform:translateY(-1px);
}
#tab-overview .legend-swatch{
  width:18px;
  height:5px;
  border-radius:4px;
  display:inline-block;
  box-shadow:0 2px 4px rgba(0,0,0,0.12);
  flex-shrink:0;
}
#tab-overview .sw-clicks{background:#2563eb!important;}
#tab-overview .sw-impr{background:#93c5fd!important;}
#tab-overview .sw-pos{background:#16a34a!important;}
#tab-overview .sw-ctr{background:#7e22ce!important;}
#tab-overview .sw-score{background:#ea580c!important;}

/* Chart - Premium Performance Trend Section */
#tab-overview .ov-chart-wrap{
  position:relative;
  background:linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:24px;
  margin-top:16px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.03);
}
#tab-overview #ovChart{
  width:100%;
  height:320px;
  display:block;
  background:transparent;
}
#tab-overview #chartRange{
  margin-top:16px;
  font-size:12px;
  color:#374151;
  text-align:center;
  font-weight:500;
  padding:10px 12px;
  background:#f9fafb;
  border-radius:8px;
  border:1px solid #f3f4f6;
  line-height:1.5;
}
#tab-overview .ov-tooltip{
  position:absolute;
  min-width:180px;
  max-width:280px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 16px;
  font-size:12px;
  color:#374151;
  box-shadow:0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1);
  pointer-events:none;
  display:none;
  z-index:30;
  font-weight:500;
  backdrop-filter:blur(10px);
  line-height:1.6;
}


/* Key metrics at a glance — purple GSC design */
#tab-overview .ov-metrics-header,
#tab-overview .ov-trend-header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px 16px;
  margin-bottom:4px;
}
#tab-overview .ov-metrics-sub,
#tab-overview .ov-trend-sub{
  margin:4px 0 0;
  font-size:12px;
  color:#374151;
  line-height:1.45;
  max-width:52ch;
}
#tab-overview .ov-metrics-card .mirolabs-card-body{
  padding:20px 22px 22px;
}
#tab-overview .ov-metrics-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
  margin-bottom:18px;
}
#tab-overview .ov-metric-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:18px 12px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e5e7eb;
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position:relative;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
#tab-overview .ov-metric-card::before{
  content:"";
  position:absolute;
  top:0;
  left:12px;
  right:12px;
  height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg, var(--ov-accent), var(--ov-accent-mid));
  opacity:0;
  transition:opacity 0.15s ease;
}
#tab-overview .ov-metric-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(90,71,176,0.1);
  border-color:#d4c9f0;
}
#tab-overview .ov-metric-card:hover::before{
  opacity:1;
}
#tab-overview .ov-metric-ring-wrap{
  position:relative;
  width:92px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
#tab-overview .ov-metric-ring{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
#tab-overview .ov-metric-value{
  position:absolute;
  font-size:17px;
  font-weight:700;
  color:#111827;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
#tab-overview .ov-metric-trend{
  font-size:11px;
  font-weight:600;
  padding:3px 9px;
  border-radius:999px;
  margin-bottom:8px;
  min-height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#tab-overview .ov-metric-trend.up{
  background:var(--ov-accent-soft);
  color:var(--ov-accent-hover);
}
#tab-overview .ov-metric-trend.down{
  background:rgba(239,68,68,0.1);
  color:#b91c1c;
}
#tab-overview .ov-metric-trend.flat{
  background:#f3f4f6;
  color:#374151;
}
#tab-overview .ov-metric-label{
  font-size:12px;
  color:#111827;
  text-align:center;
  line-height:1.35;
  font-weight:600;
  max-width:110px;
}
#tab-overview .ov-metric-desc{
  font-size:10px;
  color:#374151;
  text-align:center;
  line-height:1.35;
  margin-top:4px;
  max-width:120px;
}
#tab-overview .badge-est{
  display:inline-block;
  font-size:9px;
  color:#374151;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  border-radius:999px;
  padding:2px 6px;
  margin-left:4px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

/* How to read — compact explain card */
#tab-overview .ov-metrics-explain{
  background:var(--ov-accent-soft);
  border:1px solid #ebe4f8;
  border-radius:12px;
  padding:16px 18px;
  border-left:4px solid var(--ov-accent);
}
#tab-overview .ov-metrics-explain-inner *{
  background:transparent !important;
}
#tab-overview .ov-metrics-explain-title{
  font-weight:600;
  font-size:14px;
  color:#111827;
  margin-bottom:10px;
  letter-spacing:-0.01em;
}
#tab-overview .ov-metrics-explain-list{
  margin:0;
  padding-left:18px;
  line-height:1.75;
  font-size:12px;
  color:#374151;
}
#tab-overview .ov-metrics-explain-list li{
  margin:6px 0;
}
#tab-overview .ov-metrics-explain-list strong{
  color:#111827;
  font-weight:600;
}
#tab-overview .ov-metrics-explain-legend{
  margin-top:10px;
  font-size:11px;
  color:#374151;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  padding-top:10px;
  border-top:1px solid rgba(90,71,176,0.12);
}
#tab-overview .ov-legend-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  vertical-align:middle;
  margin-right:2px;
}
#tab-overview .ov-legend-up{background:var(--ov-accent);}
#tab-overview .ov-legend-down{background:#ef4444;}
#tab-overview .ov-legend-flat{background:#94a3b8;}
#tab-overview .donut-note{
  margin-top:14px;
  font-size:12px;
  color:#374151;
  padding:10px 14px;
  background:#f9fafb;
  border-radius:8px;
  border-left:3px solid var(--ov-accent-mid);
  line-height:1.55;
}

/* AI Insights */
#tab-overview #aiInsights{
  background:#ffffff !important;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:24px;
  font-size:13px;
  color:#374151;
  line-height:1.7;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}
#tab-overview #aiInsights *{
  background:transparent !important;
}

/* Tables */
#tab-overview table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  margin-top:14px;
}
#tab-overview th{
  padding:13px 10px;
  text-align:left;
  font-weight:600;
  color:#111827;
  background:#f9fafb;
  border-bottom:2px solid #e5e7eb;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
#tab-overview td{
  padding:13px 10px;
  border-bottom:1px solid #f3f4f6;
  text-align:left;
  color:#374151;
  font-size:13px;
  line-height:1.5;
}
#tab-overview tr:hover td{
  background:#f9fafb;
}
#tab-overview .badge.up{
  color:#16a34a;
  font-weight:600;
  padding:4px 10px;
  background:#dcfce7;
  border-radius:6px;
  display:inline-block;
  font-size:12px;
}
#tab-overview .badge.down{
  color:#dc2626;
  font-weight:600;
  padding:4px 10px;
  background:#fee2e2;
  border-radius:6px;
  display:inline-block;
  font-size:12px;
}

/* Sparklines */
#tab-overview .spark{
  width:120px;
  height:26px;
  display:block;
  overflow:hidden;
  max-width:100%;
  box-sizing:border-box;
  flex-shrink:0;
}
/* Table cell containing sparkline - prevent overflow */
#tab-overview table td:has(.spark){
  overflow:hidden;
  max-width:140px;
  padding:12px 8px;
  vertical-align:middle;
}
/* Fallback for browsers without :has() support - target last column (Trend column) */
#tab-overview table td:last-child{
  overflow:hidden;
  max-width:140px;
  vertical-align:middle;
}
#tab-overview .spark .spark-fill-winner{fill:rgba(90,71,176,0.14);}
#tab-overview .spark .spark-fill-loser{fill:rgba(239,68,68,0.1);}
#tab-overview .spark .spark-line-winner{
  stroke:var(--ov-accent);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#tab-overview .spark .spark-line-loser{
  stroke:#dc2626;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#tab-overview .spark .s-dot{transition:opacity 0.12s ease;}

/* Trend metric toolbar — purple pills */
#tab-overview .ov-trend-metric-card .ov-trend-controls-body{
  padding-top:0;
}
#tab-overview .ov-trend-active{
  font-size:11px;
  font-weight:600;
  color:var(--ov-accent-hover);
  background:var(--ov-accent-soft);
  border:1px solid #e8e2f8;
  border-radius:999px;
  padding:5px 12px;
  white-space:nowrap;
}
#tab-overview .ov-trend-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:16px 28px;
  padding:14px 16px;
  background:#f9fafb;
  border:1px solid #eef2f7;
  border-radius:12px;
}
#tab-overview .ov-trend-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
#tab-overview .ov-trend-group-label{
  font-size:10px;
  font-weight:700;
  color:#374151;
  text-transform:uppercase;
  letter-spacing:0.07em;
}
#tab-overview .ov-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#tab-overview .ov-pill,
#tab-overview .ov-days-btn,
#tab-overview .ov-trend-metric{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:border-color 0.12s ease, color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  box-shadow:none !important;
  text-shadow:none !important;
}
#tab-overview .ov-pill:hover,
#tab-overview .ov-days-btn:hover,
#tab-overview .ov-trend-metric:hover{
  border-color:var(--ov-accent);
  color:var(--ov-accent);
  background:var(--ov-accent-soft);
}
#tab-overview .ov-pill.active,
#tab-overview .ov-days-btn.active,
#tab-overview .ov-trend-metric.active{
  background:var(--ov-accent) !important;
  border-color:var(--ov-accent-hover) !important;
  color:#fff !important;
  box-shadow:0 1px 4px rgba(90,71,176,0.25) !important;
}
#tab-overview .ov-subtitle{
  font-size:12px;
  color:#374151;
  margin-top:6px;
  margin-bottom:18px;
  line-height:1.65;
  padding:14px 18px;
  background:#f9fafb;
  border-radius:10px;
  border-left:3px solid #2563eb;
}

/* Trust Box (inside mirolabs-card: no double border) */
#tab-overview .mirolabs-card .trust-box{
  background:transparent !important;
  border:none !important;
  border-radius:0;
  box-shadow:none !important;
  padding:0;
  margin:0;
  position:relative;
}
#tab-overview .trust-box{
  font-size:13px;
  color:#374151;
  line-height:1.7;
}
#tab-overview .trust-box *{
  background:transparent !important;
}
#tab-overview .trust-title{
  font-weight:600;
  color:#111827;
  margin-bottom:16px;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:12px;
  background:transparent !important;
  letter-spacing:-0.01em;
  line-height:1.4;
}
#tab-overview .trust-title::before{
  content:"";
  width:4px;
  height:22px;
  background:#2563eb;
  border-radius:2px;
  display:inline-block;
  flex-shrink:0;
}
/* Legacy trust-box standalone (when not inside mirolabs-card) */
#tab-overview .trust-box:not(.mirolabs-card-body){
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:24px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}
#tab-overview .trust-text{
  margin-bottom:14px;
  background:transparent !important;
  font-size:13px;
  line-height:1.7;
}
#tab-overview .trust-text:last-of-type{
  margin-bottom:0;
}
#tab-overview .trust-box strong{
  color:#111827;
  font-weight:600;
  background:transparent !important;
}
#tab-overview .trust-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
  padding-top:18px;
  border-top:2px solid #f3f4f6;
  background:transparent !important;
}
#tab-overview .trust-pill{
  border:1px solid #e5e7eb;
  background:#f9fafb !important;
  border-radius:8px;
  padding:8px 14px;
  font-size:11px;
  color:#374151;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.2s ease;
  font-weight:500;
  line-height:1.4;
}
#tab-overview .trust-pill:hover{
  border-color:#d1d5db;
  background:#f3f4f6 !important;
  transform:translateY(-1px);
}
#tab-overview .trust-warn{
  color:#d97706;
  font-weight:600;
}
#tab-overview .trust-ok{
  color:#16a34a;
  font-weight:600;
}

/* Country list: one horizontal row per country, everything inline */
#tab-overview .ov-countries-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#tab-overview .ov-country-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  min-height:36px;
}
#tab-overview .ov-country-main{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}
#tab-overview .ov-country-flag{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
#tab-overview .ov-country-bar-wrap{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
#tab-overview .ov-country-bar{
  height:8px;
  border-radius:4px;
  background:var(--ov-accent);
  flex-shrink:1;
  min-width:4px;
}
#tab-overview .ov-country-pct{
  font-size:12px;
  font-weight:500;
  color:#374151;
  flex-shrink:0;
  min-width:36px;
}
#tab-overview .ov-country-stats{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
#tab-overview .ov-country-stat{
  text-align:center;
  min-width:56px;
}
#tab-overview .ov-country-num{
  font-size:13px;
  font-weight:600;
  color:#111827;
}
#tab-overview .ov-country-lbl{
  font-size:11px;
  color:#374151;
}
#tab-overview #topCountries img[src*="flagcdn.com"]{
  display:block;
  flex-shrink:0;
  border:1px solid #e5e7eb;
  border-radius:2px;
  object-fit:cover;
}
#tab-overview .ov-country-code{
  font-size:13px;
  font-weight:500;
  color:#374151;
  white-space:nowrap;
}

/* Top Countries: show 5 by default, "View more" reveals rest */
#tab-overview .ov-countries-more{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
}
#tab-overview .ov-countries-more.expanded{
  max-height:2000px;
}
#tab-overview .ov-countries-toggle{
  display:block;
  margin-top:12px;
  padding:8px 14px;
  font-size:13px;
  font-weight:500;
  color:var(--ov-accent);
  background:transparent;
  border:1px solid var(--ov-accent-mid);
  border-radius:8px;
  cursor:pointer;
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
#tab-overview .ov-countries-toggle:hover{
  background:var(--ov-accent);
  color:#fff;
  border-color:var(--ov-accent-hover);
}

/* Responsive */
@media (max-width:960px){
  #tab-overview .kpi{grid-column:span 6!important;}
  #tab-overview .grid{gap:16px;}
}
@media (max-width:1024px){
  #tab-overview .ov-metrics-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width:959px) and (min-width:721px){
  #tab-overview .ov-metrics-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:720px){
  #tab-overview .kpi,#tab-overview .wide,#tab-overview .half{grid-column:span 12!important;}
  #tab-overview .ov-metrics-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  #tab-overview .card,#tab-overview .mirolabs-card{padding:18px 20px;}
  #tab-overview .ov-table-wrap{max-height:320px;}
}