/* ---------------------------------------------------------
   Miro Analytics (Pro UI)
   - Full-width layout
   - Sticky tabs
   - Card grid
   - Polished tables
   - Subtle shadows/animation
   - Responsive
---------------------------------------------------------- */

/* Base / layout */
.mirolabs-wrap{max-width:none;width:100%;margin:0;padding:0;display:block}
.wrap > h1{max-width:none;margin-bottom:10px}
:root{
  --mirolabs-bg:#f6f7fb;
  --mirolabs-card:#ffffff;
  --mirolabs-border:#e5e7eb;
  --mirolabs-text:#0f172a;
  --mirolabs-muted:#6b7280;
  --mirolabs-primary:#2563eb;
  --mirolabs-primary-ink:#1e40af;
  --mirolabs-chip:#eef2ff;
  --mirolabs-good:#16a34a;
  --mirolabs-bad:#e11d48;
  --mirolabs-shadow:0 1px 2px rgba(8,15,52,.06), 0 12px 32px rgba(8,15,52,.06);
}

/* Optional: defeat any admin width clamps */
#wpcontent, #wpbody-content, .wrap, .mirolabs-wrap { max-width: 100% !important; }

/* Hard override: kill foreign .card max-width clamps from other plugins/themes */
.mirolabs-wrap .card { max-width: none !important; width: 100% !important; }

/* Page background band for header area */
.mirolabs-ana{
  margin:0 0 16px 0;
  background:var(--mirolabs-bg);
  padding:12px 16px;
  border-radius:14px;
  box-shadow: var(--mirolabs-shadow);
}

/* Grid (12-col, fluid) */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
@media (max-width:1280px){ .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px} }
@media (max-width:980px){  .grid{grid-template-columns:repeat(8,minmax(0,1fr))} }
@media (max-width:720px){  .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

.card{
  background:var(--mirolabs-card);
  border:1px solid var(--mirolabs-border);
  border-radius:14px;
  padding:16px;
  box-shadow: var(--mirolabs-shadow);
}

/* Header (mirolabs-ana) spans */
.mirolabs-ana .kpi{grid-column:span 3}
.mirolabs-ana .wide{grid-column:span 12}
.mirolabs-ana .full{grid-column:1 / -1}
.mirolabs-ana .half{grid-column:span 6}

/* KPI inline layout (single line, no wrap) */
.kpi-line{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:nowrap;
}
.kpi .kpi-val{
  font-size:28px;
  font-weight:700;
  color:var(--mirolabs-text);
  margin:0;
  line-height:1;
}
.kpi .kpi-delta{
  margin:0;
  line-height:1;
  font-size:14px;
}
.kpi .kpi-delta .delta{
  margin-left:0;
}

/* Guard against block forcing */
.kpi .kpi-val, .kpi .kpi-delta { display:inline-flex; }

@media (max-width:980px){
  .mirolabs-ana .kpi{grid-column:span 4}
  .mirolabs-ana .half{grid-column:span 8}
}
@media (max-width:720px){
  .mirolabs-ana .kpi,.mirolabs-ana .half,.mirolabs-ana .wide,.mirolabs-ana .full{grid-column:span 4}
}

.title{font-weight:600;margin-bottom:8px;color:var(--mirolabs-text)}
.muted{color:var(--mirolabs-muted)}
.mono{font-family:ui-monospace,Consolas,monospace}
.kpi .kval{font-size:28px;font-weight:700;color:var(--mirolabs-text)}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--mirolabs-chip);
  color:var(--mirolabs-primary-ink);
  border-radius:999px;padding:6px 10px;font-size:12px
}
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}

/* Tabs (sticky, pill style) */
.tabs{
  position:sticky;top:32px;background:#fff;z-index:5;
  padding:10px 12px;margin:12px 0 18px;border-radius:12px;
  border:1px solid var(--mirolabs-border);
  box-shadow: var(--mirolabs-shadow);
}
.tabs a{
  display:inline-block;
  margin:0 8px 6px 0;
  padding:8px 14px;
  border:1px solid var(--mirolabs-border);
  border-radius:999px;
  text-decoration:none;
  color:#111;background:#fff;
  transition:.15s ease-in-out;
  font-weight:600;
}
.tabs a:hover{border-color:#cfd3da;transform:translateY(-1px)}
.tabs a.active{
  background: #D8B15A;
  color: #1a1a1a;
  border: none;
  box-shadow: 0 2px 8px rgba(216, 177, 90, 0.3);
  font-weight: 600;
}

/* Tabs: force full width layout */
.mirolabs-wrap .tab-pan{
  display:none;
  width:100% !important;
  margin:0;
  padding:0;
}

/* Ensure each tab has a grid and children fill it */
.mirolabs-wrap .tab-pan > .grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
}

/* Every direct child in tabs spans all columns (full width) */
.mirolabs-wrap .tab-pan > .grid > *{
  grid-column:1 / -1 !important;
}

/* Safety: even if someone uses .half/.kpi in tabs, override to full */
.mirolabs-wrap .tab-pan .kpi,
.mirolabs-wrap .tab-pan .half,
.mirolabs-wrap .tab-pan .wide,
.mirolabs-wrap .tab-pan .card{
  grid-column:1 / -1 !important;
  width:100%;
}

/* Controls */
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.input, .controls select{
  padding:8px 10px;border:1px solid var(--mirolabs-border);
  border-radius:10px;background:#fff;min-height:36px
}
.btn{
  padding:8px 14px;border-radius:10px;border:1px solid #d1d5db;
  background:#fff;text-decoration:none;cursor:pointer;
  transition:.15s ease-in-out;font-weight:600
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background: #D8B15A;
  border: none;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(216, 177, 90, 0.3);
  font-weight: 600;
  transition: background 0.2s ease;
}
.btn.primary:hover{
  background: #C49A4A;
  color: #1a1a1a;
}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* WordPress Button Classes - Gold Background */
.mirolabs-wrap .button.button-primary,
.mirolabs-wrap .button.button-secondary,
.mirolabs-wrap button.button-primary,
.mirolabs-wrap button.button-secondary{
  background: #D8B15A !important;
  border: none !important;
  color: #1a1a1a !important;
  box-shadow: 0 2px 8px rgba(216, 177, 90, 0.3) !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
}

.mirolabs-wrap .button.button-primary:hover,
.mirolabs-wrap .button.button-secondary:hover,
.mirolabs-wrap button.button-primary:hover,
.mirolabs-wrap button.button-secondary:hover{
  background: #C49A4A !important;
  color: #1a1a1a !important;
}

.mirolabs-wrap .button.button-primary:focus,
.mirolabs-wrap .button.button-secondary:focus,
.mirolabs-wrap button.button-primary:focus,
.mirolabs-wrap button.button-secondary:focus{
  background: #D8B15A !important;
  color: #1a1a1a !important;
  box-shadow: 0 2px 8px rgba(216, 177, 90, 0.3) !important;
}
.badge{display:inline-block;font-size:11px;padding:2px 6px;border:1px solid var(--mirolabs-border);border-radius:10px;margin-left:6px}

/* Table (cards-in-rows look) */
table{width:100%;border-collapse:separate;border-spacing:0 10px}
th{font-weight:700;text-align:left;padding:8px 10px;color:#334155}
td{
  background:#fff;padding:12px 10px;
  border:1px solid var(--mirolabs-border);border-left:none;border-right:none;
  vertical-align:middle
}
tr td:first-child{border-left:1px solid var(--mirolabs-border);border-radius:10px 0 0 10px}
tr td:last-child{border-right:1px solid var(--mirolabs-border);border-radius:0 10px 10px 0}
tr:hover td{background:#fafafa}
.row-selected td{outline:2px solid var(--mirolabs-primary)}

/* Mini sparkline area */
.spark{width:160px;height:28px}

/* Status chips */
.delta{font-size:12px;padding:2px 8px;border-radius:12px;border:1px solid var(--mirolabs-border);margin-left:6px;font-weight:600}
.up{color:#166534;border-color:#86efac;background:#ecfdf5}
.down{color:#991b1b;border-color:#fecaca;background:#fef2f2}

/* Ask AI section */
.mirolabs-ana .ask{display:flex;gap:8px}
.mirolabs-ana .ask input{
  flex:1;border:1px solid var(--mirolabs-border);border-radius:10px;padding:10px 12px;background:#fff
}
.mirolabs-ana .ai{white-space:pre-wrap;line-height:1.5}

/* Chart container */
#mirolabs-ana-chart{width:100%;max-width:100%}

/* Utilities */
.hidden{display:none}

/* Nice focus ring */
a:focus,button:focus,input:focus,select:focus,.btn:focus{
  outline:2px solid rgba(224,168,0,.35);
  outline-offset:2px
}

/* Motion - removed card animations */

/* Shrink the donut itself */
.mirolabs-ana #mirolabs-ana-overall{
  width:180px !important;
  height:180px !important;
  display:block;
  margin:4px auto;
}

/* Override that inline grid so the left column isn't huge */
.mirolabs-ana .card.half > div[style*="grid-template-columns"]{
  grid-template-columns:200px 1fr !important;
  gap:12px !important;
  align-items:center !important;
}

/* Optional: scale further on smaller screens */
@media (max-width:1280px){
  .mirolabs-ana #mirolabs-ana-overall{ width:160px !important; height:160px !important; }
}
@media (max-width:960px){
  .mirolabs-ana .card.half > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .mirolabs-ana #mirolabs-ana-overall{ margin-bottom:12px; }
}

/* ===== Overall Optimization modern look ===== */
.mirolabs-overall { padding: 16px; }
.mirolabs-card-head {
  display:flex; align-items:center; gap:12px; margin-bottom: 12px;
}
.mirolabs-card-title { display:flex; align-items:center; gap:10px; }
.mirolabs-card-title .title { font-weight:600; font-size:15px; }
.mirolabs-card-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }

.mirolabs-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px;
  background:#eef2ff; color:#3730a3; font-weight:600; font-size:12px;
  border:1px solid rgba(0,0,0,.06);
}
.mirolabs-badge.is-good { background:#ecfdf5; color:#065f46; border-color:#d1fae5; }
.mirolabs-badge.is-fair { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.mirolabs-badge.is-poor { background:#fef2f2; color:#991b1b; border-color:#fecaca; }

.mirolabs-overall-body {
  display:grid; grid-template-columns: 200px 1fr; gap:16px; align-items:center;
}
.mirolabs-overall-chart {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:200px; height:200px; margin:auto;
}
.mirolabs-overall-chart canvas { max-width:200px; max-height:200px; }
.mirolabs-overall-center {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
.mirolabs-overall-center .val {
  font-weight:800; font-size:28px; line-height:1; margin-bottom:4px;
}
.mirolabs-overall-center .sub {
  font-size:11px; color:#6b7280;
}

.mirolabs-overall-side { display:flex; flex-direction:column; gap:10px; }
.mirolabs-note { color:#6b7280; font-size:13px; line-height:1.4; }

.mirolabs-bars { display:flex; flex-direction:column; gap:10px; }
.mirolabs-bar-top { display:flex; align-items:center; gap:8px; }
.mirolabs-dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.mirolabs-bar-label { font-weight:600; }
.mirolabs-bar-val { margin-left:auto; color:#374151; font-variant-numeric: tabular-nums; }

.mirolabs-bar-track {
  margin-top:6px; width:100%; height:8px; background:#f3f4f6; border-radius:999px; overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.mirolabs-bar-fill {
  width:0; height:100%; border-radius:999px; transform-origin:left center;
  animation: miroGrow 600ms ease-out forwards;
}
.mirolabs-bar-fill { width: var(--w,0%); }

@keyframes miroGrow {
  from { width:0; }
  to   { width: var(--w,0%); }
}

@media (max-width: 1024px) {
  .mirolabs-overall-body { grid-template-columns: 1fr; }
  .mirolabs-overall-chart { width:180px; height:180px; }
  .mirolabs-overall-chart canvas { max-width:180px; max-height:180px; }
}

/* Trend mini-cards under the main Trends chart */
.mirolabs-ana-trend-meta {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.mirolabs-ana-trend-meta .mirolabs-trend-card {
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
}

.mirolabs-ana-trend-meta .mirolabs-trend-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 2px;
}

.mirolabs-ana-trend-meta .mirolabs-trend-values {
  font-size: 13px;
  font-weight: 600;
}

.mirolabs-ana-trend-meta .mirolabs-trend-delta {
  font-size: 11px;
  margin-top: 2px;
}

.mirolabs-ana-trend-meta .mirolabs-trend-up {
  color: #15803d; /* green */
}

.mirolabs-ana-trend-meta .mirolabs-trend-down {
  color: #b91c1c; /* red */
}

.mirolabs-ana-trend-meta .mirolabs-trend-flat {
  color: #6b7280; /* gray */
}

/* Trend row grid */
.mirolabs-ana-trend-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* KPI trend cards */
.kpi-trend .kpi-sub {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.9;
}
.kpi-trend-clicks   { border-top: 3px solid #22c55e; }
.kpi-trend-impr     { border-top: 3px solid #6366f1; }
.kpi-trend-ctr      { border-top: 3px solid #f97316; }
.kpi-trend-position { border-top: 3px solid #e11d48; }
.mirolabs-trend-up   { color:#16a34a; }
.mirolabs-trend-down { color:#dc2626; }
.mirolabs-trend-flat { color:#6b7280; }

/* Top KPI cards premium header */
.kpi-main .kpi-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:4px;
}
.kpi-main .kpi-head .title {
  font-weight:600;
}
.kpi-main .kpi-hint {
  margin-top:4px;
  font-size:11px;
  opacity:0.85;
}
.kpi-main .chip {
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
}

/* Connection status card */
.mirolabs-gsc-connection-card {
  margin:12px 0;
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
}
.mirolabs-gsc-status-none { color:#d63638; }
.mirolabs-gsc-status-connected { color:#1a7f37; }
.mirolabs-gsc-status-not-connected { color:#d63638; }
/* ✅ Fix horizontal overflow in WP admin pages */
.mirolabs-wrap,
.mirolabs-wrap * {
  box-sizing: border-box;
}

/* If a long URL/word is forcing the page wider */
.mirolabs-wrap table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed; /* key */
}

.mirolabs-wrap th,
.mirolabs-wrap td {
  overflow-wrap: anywhere;  /* key */
  word-break: break-word;   /* key */
}

/* Long URL columns + monospace text are the usual offenders */
.mirolabs-wrap .mono,
.mirolabs-wrap a,
.mirolabs-wrap td a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Charts/canvas can also overflow if they get huge */
.mirolabs-wrap canvas,
.mirolabs-wrap svg,
.mirolabs-wrap img {
  max-width: 100%;
}

/* Easy Keywords Cards - Horizontal Layout */
.mirolabs-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.mirolabs-row-gap {
  gap: 12px;
}

/* Card styling for Easy Keywords */
#miroEK-cards .mirolabs-card {
  flex: 1;
  min-width: 220px;
  background: var(--mirolabs-card);
  border: 1px solid var(--mirolabs-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--mirolabs-shadow);
  display: flex;
  flex-direction: column;
}

#miroEK-cards .mirolabs-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mirolabs-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#miroEK-cards .mirolabs-card-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--mirolabs-text);
  line-height: 1;
  margin-bottom: 6px;
}

#miroEK-cards .mirolabs-card-sub {
  font-size: 12px;
  color: var(--mirolabs-muted);
  line-height: 1.4;
}

/* Easy Keywords Filters - Inline Layout */
#tab-easy_keywords .ek-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  align-items: center;
}

#tab-easy_keywords .ek-actions .mirolabs-input,
#tab-easy_keywords .ek-actions select,
#tab-easy_keywords .ek-actions input {
  display: inline-block !important;
  width: auto !important;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
  min-width: 120px;
}

#tab-easy_keywords .ek-actions #miroEK-search {
  min-width: 180px;
}

#tab-easy_keywords .ek-actions .button {
  display: inline-block !important;
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
}

/* Responsive: allow wrapping on very small screens */
@media (max-width: 768px) {
  #tab-easy_keywords .ek-actions {
    flex-wrap: wrap !important;
  }
}