/* WWBOTA Statistics Embed CSS */
:root{
  --hunter:#4caf50;
  --activator:#3f6fb6;
  --global:#c07a2d;

  --w-bg:#fff;
  --w-border:#d9d9d9;
  --w-grey:#e3e3e3;
  --w-text:#111;
  --w-muted:#666;
}

.wwbota-embed{
  background: transparent;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--w-text);
}

.wwbota-title{
  text-align:center;
  font-weight:800;
  font-size:26px;
  padding:18px 12px 10px;
}

.wwbota-tabs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  padding:0 12px 10px;
}

.wwbota-tab{
  border:1px solid var(--w-border);
  background: var(--w-grey);
  padding:10px 8px;
  border-radius:3px;
  font-weight:800;
  text-align:center;
  cursor:pointer;
  user-select:none;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.wwbota-tab .tab-ico{ font-size:18px; line-height:1; }

.wwbota-panel{
  /* keeps UI stable across tabs (3 vs 4 rows) */
  min-height: 260px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.wwbota-desc{
  padding:0 12px 10px;
  font-size:14px;
  border-left:4px solid transparent;
  padding-left:12px;
}

.wwbota-status{
  padding:0 12px 10px;
  color: var(--w-muted);
  font-size:13px;
  min-height:18px;
}

.wwbota-status.is-error{ color:#b00020; }

.wwbota-tablewrap{
  padding:0 12px 16px;
}

.wwbota-embed table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.wwbota-embed th,
.wwbota-embed td{
  border:1px solid var(--w-border);
  padding:10px 8px;
  text-align:center;
}

.wwbota-embed thead th{
  font-weight:800;
  background:#fff;
}

.wwbota-embed tbody th{
  text-align:left;
  font-weight:800;
  width:40%;
}

@media (max-width:600px){
  .wwbota-tablewrap{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .wwbota-embed table{
    width:100%;
    min-width:520px;
    border-collapse:collapse;
    table-layout:auto;
  }

  .wwbota-embed th,
  .wwbota-embed td{
    padding:8px 6px;
    font-size:14px;
  }

  .wwbota-embed thead th:first-child{
    position:sticky;
    left:0;
    z-index:3;
    background:#fff;
    min-width:150px;
  }

  .wwbota-embed tbody th{
    position:sticky;
    left:0;
    z-index:2;
    background:#fff;
    min-width:150px;
    width:150px;
    white-space:normal;
    text-align:left;
  
}
}
/* Active tab colors */
.tab-hunter .wwbota-tab[data-tab="hunter"].is-active{ background:var(--hunter); border-color:var(--hunter); color:#fff; }
.tab-activator .wwbota-tab[data-tab="activator"].is-active{ background:var(--activator); border-color:var(--activator); color:#fff; }
.tab-global .wwbota-tab[data-tab="global"].is-active{ background:var(--global); border-color:var(--global); color:#fff; }

/* Accents */
.tab-hunter .wwbota-desc{ border-color:var(--hunter); }
.tab-activator .wwbota-desc{ border-color:var(--activator); }
.tab-global .wwbota-desc{ border-color:var(--global); }

.tab-hunter .wwbota-embed table{ border-top:3px solid var(--hunter); }
.tab-activator .wwbota-embed table{ border-top:3px solid var(--activator); }
.tab-global .wwbota-embed table{ border-top:3px solid var(--global); }

.tab-hunter .wwbota-embed td:first-child, .tab-hunter .wwbota-embed tbody th{ color: var(--hunter); }
.tab-activator .wwbota-embed td:first-child, .tab-activator .wwbota-embed tbody th{ color: var(--activator); }
.tab-global .wwbota-embed td:first-child, .tab-global .wwbota-embed tbody th{ color: var(--global); }

@media (max-width:520px){
  .wwbota-tabs{ grid-template-columns:1fr; }
}


/* v3: Slightly lighter accent colors (tabs + header) */
:root{
  /* Soft variants (modern browsers) */
  --hunterSoft:   color-mix(in srgb, var(--hunter) 82%, #ffffff);
  --activatorSoft:color-mix(in srgb, var(--activator) 82%, #ffffff);
  --globalSoft:   color-mix(in srgb, var(--global) 82%, #ffffff);
}

/* Fallback for older browsers (no color-mix): use original colors */
@supports not (color: color-mix(in srgb, #000 50%, #fff)){
  :root{
    --hunterSoft: var(--hunter);
    --activatorSoft: var(--activator);
    --globalSoft: var(--global);
  }
}

/* Active tab slightly lighter */
.wwbota-embed.tab-hunter  .wwbota-tab.is-active{ background: var(--hunterSoft) !important; }
.wwbota-embed.tab-activator .wwbota-tab.is-active{ background: var(--activatorSoft) !important; }
.wwbota-embed.tab-global .wwbota-tab.is-active{ background: var(--globalSoft) !important; }

/* Header row slightly lighter */
.wwbota-embed.tab-hunter thead th{ background: var(--hunterSoft) !important; }
.wwbota-embed.tab-activator thead th{ background: var(--activatorSoft) !important; }
.wwbota-embed.tab-global thead th{ background: var(--globalSoft) !important; }
