/* =========================================================
   Waresite™ SID — CSS (CANON / BLINDED)
   - Goal: stable frame + per-view isolation
   - Rule: global layout only in core sections
   - Rule: view-specific rules MUST be scoped under #view-*
   ========================================================= */

/* =========================
   0) TOKENS / RESET
   ========================= */
:root{  --sid-danger: #f1416c;

  --sid-header-h: 92px;
  --sid-sidebar-w: 78px;
  --sid-max: 1180px;
  --sid-gap: 16px;

  --sid-bg: #ffffff;
  --sid-soft: #f5f8fa;
  --sid-line: #eef0f4;

  --sid-text: #181c32;
  --sid-muted: #7e8299;

  --sid-accent: #009ef7;

  --sid-card: #ffffff;
  --sid-radius: 12px;
  --sid-shadow: 0 0 20px rgba(76,87,125,.06);

  --sid-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: var(--sid-font);
  background: #f5f8fa; /* app bg */
  color: var(--sid-text);
}

/* =========================
   1) APP SHELL (Sidebar + Page)
   ========================= */
.sidSidebar{
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sid-sidebar-w);
  height: 100%;
  border-right: 1px solid var(--sid-line);
  background: transparent; /* rail on bg */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px 14px;
  z-index: 50;
}

.sidBrand{
  width:100%;
  height: var(--sid-header-h);
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 14px;
}

.sidBrandLogo{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display:block;
  border: 1px solid var(--sid-line);
  background: #fff;
  padding: 6px;
}

.sidNav{
  width:100%;
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items:center;
}

.sidNavBtn{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--sid-line);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.sidNavBtn:hover{
  transform: translateY(-1px);
  box-shadow: var(--sid-shadow);
  border-color: rgba(0,158,247,.35);
}

.sidNavBtn.is-active{
  border-color: rgba(0,158,247,.55);
  background: rgba(0,158,247,.08);
}

.sidNavIco{ width: 18px; height: 18px; display:flex; align-items:center; justify-content:center; }
.sidIcoSvg{ width: 18px; height: 18px; fill: #a1a5b7; transition: fill .12s ease; }
.sidNavBtn:hover .sidIcoSvg{ fill: var(--sid-accent); }
.sidNavBtn.is-active .sidIcoSvg{ fill: var(--sid-accent); }

.sidSidebarFooter{ margin-top: auto; padding: 12px 0 6px; }

/* Page wrapper */
.sidPage{
  margin-left: var(--sid-sidebar-w);
  height: 100vh;              /* binds the viewport */
  display:flex;
  flex-direction: column;
}

/* =========================
   2) TOPBAR (header row OUTSIDE frame)
   ========================= */
.sidTopbar{
  background: transparent;
  border: 0;
  padding: 18px 26px 0;
}

.sidTopbarRow{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 0 6px 14px;
}

.sidBreadcrumb{
  font-size: 12px;
  color: var(--sid-muted);
  display:flex;
  gap: 8px;
  align-items:center;
  margin-bottom: 8px;
}

.sidTitle{
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--sid-text);
}

.sidSubtitle{
  margin: 6px 0 0;
  color: var(--sid-muted);
  font-size: 13px;
}

.sidTopbarRight{
  display:flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.sidControl{ display:flex; flex-direction: column; gap: 6px; }
.sidControlLabel{ font-size: 12px; color: var(--sid-muted); }
.sidControlSelect{
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--sid-line);
  background: #fff;
  padding: 0 12px;
  min-width: 160px;
  color: var(--sid-text);
  outline: none;
}
.sidControlSelect:focus{
  border-color: rgba(0,158,247,.55);
  box-shadow: 0 0 0 4px rgba(0,158,247,.10);
}

/* =========================
   3) FRAME (Topnav + Main + Footer INSIDE)
   ========================= */
.sidFrame{
  margin: 0 14px 14px 10px;
  background:#ffffff;
  border-radius:22px;
  box-shadow:0 12px 28px rgba(17,24,39,.08);
  border:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  flex: 1;
  min-height: 0; /* critical for inner scroll */
}

/* topnav stack: (dynamic row) + (section header) */
.sidTopnav{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 16px 26px 0;
}

.sidTopnavDynamic{
  width: min(100%, var(--sid-max));
  display:flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content:flex-start;
  padding: 18px 0 8px;
}

.sidTopnavLink{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 2px;
  font-weight: 700;
  font-size: 13px;
  color: var(--sid-muted);
  position: relative;
}
.sidTopnavLink:hover{ color: var(--sid-text); }
.sidTopnavLink.is-active{ color: var(--sid-accent); }
.sidTopnavLink.is-active::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: var(--sid-accent);
}

/* Section header (Overview + Snapshot etc.) */
.sidSectionHeader{
  width: min(100%, var(--sid-max));
  display:flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0 6px;
  margin-top: 14px;
  margin-bottom: 22px;
}
.sidSectionHeader .sidSectionMain{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sid-text);
}
.sidSectionHeader .sidSectionSub{
  font-size: 13px;
  font-weight: 500;
  color: var(--sid-muted);
}

/* MAIN (scroll lives here) */
.sidMain{
  width: 100%;
  display:flex;
  justify-content:flex-start;
  padding: 34px 26px 26px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* view container */
.sidView{
  width: min(100%, var(--sid-max));
  display: none;
  margin: 0;
}
.sidView.is-active{ display:block; }

/* footer inside frame */
.sidFooter{
  border-top: 1px solid var(--sid-line);
  padding: 14px 26px;
  color: var(--sid-muted);
  font-size: 12px;
}

/* =========================
   4) COMPONENTS (Cards)
   ========================= */
.sidCard{
  background: var(--sid-card);
  border: 1px solid var(--sid-line);
  border-radius: var(--sid-radius);
  box-shadow: var(--sid-shadow);
  overflow: hidden;
}
.sidCardHeader{
  padding: 16px 18px 12px;
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--sid-line);
}
.sidCardTitle{
  margin: 0;
  font-size: 14px;
  letter-spacing: -.01em;
  color: var(--sid-text);
}
.sidCardMeta{ font-size: 12px; color: var(--sid-muted); }
.sidCardBody{ padding: 16px 18px 18px; color: var(--sid-muted); font-size: 13px; }

/* =========================
   5) VIEW: OVERVIEW (ISOLATED)
   - Only IDs / only inside #view-overview
   ========================= */
#view-overview #overview-grid-snapshot{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sid-gap);
}

#view-overview #card-dhi,
#view-overview #card-next-action,
#view-overview #card-competitive-position,
#view-overview #card-silent-alerts{
  min-height: 210px;
}

/* optional placeholders (kept isolated) */
#view-overview #overview-grid-trends{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sid-gap);
}
#view-overview #overview-grid-actions{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--sid-gap);
}

/* =========================
   6) RESPONSIVE
   ========================= */
@media (max-width: 980px){
  :root{ --sid-max: 100%; }
  #view-overview #overview-grid-snapshot{ grid-template-columns: 1fr; }
  #view-overview #overview-grid-trends{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .sidTopbar{ padding: 16px 16px 0; }
  .sidTopnav{ padding: 14px 16px 0; }
  .sidMain{ padding: 28px 16px 22px; }
  .sidFooter{ padding: 12px 16px; }
  .sidControlSelect{ min-width: 140px; }
}

/* ======================================================
   CANONICAL ORDER — Topnav > Section Header (BLINDED)
   DOM ORDER IS LAW — NO JS MOVE / NO FLEX REORDER
   Goal: Menu (left) + Filters (right) on SAME ROW
   ====================================================== */

.sidFrame .sidTopnav{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: start;
}

/* MENU HORIZONTAL — LEFT (row 1) */
.sidFrame .sidTopnavDynamic{
  grid-column: 1;
  grid-row: 1;
  width: min(100%, var(--sid-max));
  padding-top: 18px;
  padding-bottom: 10px;
}

/* FILTERS — RIGHT (row 1) */
.sidFrame .sidTopnavTools{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  white-space: nowrap;
}

/* TITLE — FULL WIDTH (row 2) */
.sidFrame .sidSectionHeader{
  grid-column: 1 / -1;
  grid-row: 2;
  width: min(100%, var(--sid-max));
  margin-top: 12px;
  margin-bottom: 22px;
}
/* ======================================================
   FINAL TUNE — Reduce gap between section title and cards
   ====================================================== */

/* diminui espaço abaixo do título */
.sidFrame .sidSectionHeader{
  margin-bottom: 10px !important;
}

/* reduz empurrão vertical do miolo */
.sidFrame .sidMain{
  padding-top: 18px !important;
}

/* garante que o primeiro bloco não crie margem extra */
.sidFrame .sidMain > .sidView > *:first-child{
  margin-top: 0 !important;
}

/* ======================================================
   OVERVIEW — Executive Graphics (ISOLATED ONLY)
   ====================================================== */
#view-overview .sidSubview{display:none;}
#view-overview .sidSubview.is-active{display:block;}

#view-overview .ovRow{
  display:flex;
  gap: 16px;
  align-items: center;
}

#view-overview .ovGraphic{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  min-width: 110px;
}

#view-overview .dhiDonut{
  width: 86px;
  height: 86px;
  transform: rotate(-90deg);
}

#view-overview .dhiDonut .bg{ stroke: var(--sid-line); }
#view-overview .dhiDonut .meter{
  stroke: var(--sid-accent);
  transition: stroke-dasharray .5s ease;
}

#view-overview .dhiDonut .pct{
  font-family: var(--sid-font);
  font-weight: 900;
  font-size: 16px;
  fill: var(--sid-text);
  transform: rotate(90deg);
  transform-origin: 40px 40px;
  dominant-baseline: middle;
}
#view-overview .dhiDonut .sub{
  font-family: var(--sid-font);
  font-weight: 700;
  font-size: 10px;
  fill: var(--sid-muted);
  transform: rotate(90deg);
  transform-origin: 40px 40px;
  dominant-baseline: middle;
}

#view-overview .ovLegend{
  margin-top: 8px;
  font-size: 11px;
  color: var(--sid-muted);
}

#view-overview .ovRight{
  flex: 1;
  min-width: 0;
}

#view-overview .ovKpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

#view-overview .ovKpi{
  border: 1px dashed var(--sid-line);
  background: var(--sid-soft);
  border-radius: 12px;
  padding: 10px 10px;
}

#view-overview .ovKpi .k{
  font-size: 11px;
  color: var(--sid-muted);
  font-weight: 700;
}
#view-overview .ovKpi .v{
  margin-top: 2px;
  font-size: 14px;
  color: var(--sid-text);
  font-weight: 900;
  letter-spacing: -0.02em;
}

#view-overview .ovMini{
  border: 1px solid var(--sid-line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px 8px;
}

#view-overview .ovMiniTop{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 8px;
  gap: 12px;
}

#view-overview .ovMiniLabel{
  font-size: 11px;
  font-weight: 800;
  color: var(--sid-text);
}
#view-overview .ovMiniMeta{
  font-size: 11px;
  font-weight: 700;
  color: var(--sid-muted);
}

#view-overview .ovSpark{
  width: 100%;
  height: 54px;
  display:block;
}
#view-overview .ovSpark .grid{ stroke: var(--sid-line); stroke-width: 1; fill:none; }
#view-overview .ovSpark .axis{ stroke: #dfe3ea; stroke-width: 1.2; fill:none; }
#view-overview .ovSpark .line{ stroke: var(--sid-accent); stroke-width: 2.2; fill:none; }
#view-overview .ovSpark .dot{ fill: var(--sid-accent); }

#view-overview .ovFoot{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

#view-overview .ovChip{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--sid-line);
  background: #fff;
}

#view-overview .ovChip .t{
  font-size: 11px;
  font-weight: 800;
  color: var(--sid-text);
}
#view-overview .ovChip .b{
  font-size: 11px;
  font-weight: 800;
  color: var(--sid-muted);
}

  /* Snapshot chips: remove inner badge outline ONLY for DHI + Competitive chips */
  #view-overview #card-dhi .ovChip .b.is-missing,
  #view-overview #card-next-action .ovChip .b.is-missing{
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }


/* SVG: ensure MISSING matches global danger color */
svg text.is-missing,
svg tspan.is-missing{
  fill: var(--sid-danger) !important;
  opacity: 1 !important;
}
/* Overview icons (Metronic-like) */
#view-overview .ovIcon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--sid-line);
  background: var(--sid-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
#view-overview .ovIcoSvg{
  width: 18px;
  height: 18px;
  fill: #a1a5b7;
}

/* Primary Action layout */
#view-overview .ovActionHead,
#view-overview .ovCompTop,
#view-overview .ovAlertHead{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 12px;
}

#view-overview .ovActionTitle{
  font-size: 13px;
  color: var(--sid-text);
  font-weight: 900;
  letter-spacing: -0.01em;
}
#view-overview .ovActionSub{
  margin-top: 2px;
  font-size: 11px;
  color: var(--sid-muted);
  font-weight: 700;
}

#view-overview .ovBars{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 12px;
}
#view-overview .ovBarRow{
  display: grid;
  grid-template-columns: 52px 260px 30px;
  column-gap: 6px;
  justify-content: center;
  align-items: center;
}
#view-overview .ovBarLabel{
  font-size: 11px;
  font-weight: 800;
  color: var(--sid-text);
  text-align: right;
  justify-self: end;
  padding-right: 4px;
  margin: 0;
}
#view-overview .ovBar{
  width: 260px;
  max-width: 260px;
  height: 14px;
  display: block;
}
#view-overview .ovBar .bg{ fill: var(--sid-line); }
#view-overview .ovBar .fg{ fill: var(--sid-accent); }
#view-overview .ovBar .fg2{ fill: rgba(0,158,247,.45); }
#view-overview .ovBarPct{
  font-size: 11px;
  font-weight: 900;
  color: var(--sid-muted);
  min-width: 30px;
  text-align: left;
  justify-self: start;
  padding-left: 4px;
}

#view-overview .ovChecklist{
  border: 1px solid var(--sid-line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

#view-overview .ovItem{
  display:grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items:center;
  font-size: 12px;
  color: var(--sid-text);
  font-weight: 700;
}

#view-overview .ovItem .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--sid-line);
  background: #fff;
}
#view-overview #card-next-action .ovChecklist .ovItem .dot.missing{
  border-color: rgba(0,158,247,.55);
  background: rgba(0,158,247,.10);
}

#view-overview .ovItem .tag{
  font-size: 11px;
  color: var(--sid-muted);
  font-weight: 900;
  border: 1px solid var(--sid-line);
  background: var(--sid-soft);
  border-radius: 999px;
  padding: 6px 10px;
}

/* Competitive SVG */
#view-overview .ovBarsSvg{
  width: 100%;
  height: 120px;
  display:block;
}
#view-overview .ovBarsSvg .grid{ stroke: var(--sid-line); stroke-width: 1; fill:none; }
#view-overview .ovBarsSvg .axis{ stroke: #dfe3ea; stroke-width: 1.2; fill:none; }
#view-overview .ovBarsSvg .lbl{
  fill: var(--sid-muted);
  font-size: 10px;
  font-weight: 800;
}
#view-overview .ovBarsSvg .barbg{ fill: var(--sid-line); }
#view-overview .ovBarsSvg .barfg{ fill: var(--sid-accent); }
#view-overview .ovBarsSvg .barfg2{ fill: rgba(0,158,247,.55); }
#view-overview .ovBarsSvg .barfg3{ fill: rgba(0,158,247,.35); }
#view-overview .ovBarsSvg .pct2{
  fill: var(--sid-muted);
  font-size: 10px;
  font-weight: 900;
}

/* Alerts grid */
#view-overview .ovAlertGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#view-overview .ovAlert{
  border: 1px solid var(--sid-line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
}
#view-overview .ovAlert .name{
  font-size: 12px;
  font-weight: 800;
  color: var(--sid-text);
}
#view-overview .ovAlert .state{
  font-size: 11px;
  font-weight: 900;
  color: var(--sid-muted);
  border: 1px solid var(--sid-line);
  background: var(--sid-soft);
  border-radius: 999px;
  padding: 6px 10px;
}

#view-overview .ovAlertNote{
  margin-top: 12px;
  font-size: 11px;
  color: var(--sid-muted);
  font-weight: 700;
}

/* Mobile: keep charts readable */
@media (max-width: 640px){
  #view-overview .ovRow{ flex-direction: column; align-items: stretch; }
  #view-overview .ovGraphic{ min-width: 0; }
  #view-overview .ovKpis{ grid-template-columns: 1fr; }
  #view-overview .ovAlertGrid{ grid-template-columns: 1fr; }
}

/* === OVERVIEW: TRENDS+ACTION GRAPHICS (AUTO) === */
#view-overview .ovTag{
  display:inline-flex; align-items:center; justify-content:center;
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--sid-line);
  background: #f5f8fa;
  color: var(--sid-muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .02em;
}
#view-overview .ovTag.is-missing{
  opacity:.98;
  background: #fff;
  border-color: rgba(246,78,96,.55);
  color: #e53935;
}

#view-overview .ovTrendWrap{ display:flex; flex-direction:column; gap: 12px; }
#view-overview .ovTrendTop{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; }
#view-overview .ovTrendValue{ font-size: 20px; font-weight: 800; color: var(--sid-text); line-height: 1; }
#view-overview .ovTrendLabel{ margin-top: 6px; font-size: 12px; color: var(--sid-muted); }

#view-overview .ovSpark{ width: 100%; height: 54px; display:block; }
#view-overview .ovSparkBg{ stroke: var(--sid-line); stroke-width: 2; fill: none; }
#view-overview .ovSparkLine{ stroke: var(--sid-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#view-overview .ovSparkDot{ fill: var(--sid-accent); }

#view-overview .ovTrendFoot{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
#view-overview .ovMini{
  border: 1px solid var(--sid-line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
}
#view-overview .ovMiniK{ font-size: 11px; color: var(--sid-muted); }
#view-overview .ovMiniV{ margin-top: 4px; font-weight: 800; color: var(--sid-text); }

#view-overview .ovDrivers{ display:flex; flex-direction:column; gap: 12px; }
#view-overview .ovDriverRow{
  display:grid;
  grid-template-columns: 110px 1fr 44px auto;
  align-items:center;
  gap: 10px;
}
#view-overview .ovDriverLabel{ font-weight: 700; color: var(--sid-text); font-size: 12px; }
#view-overview .ovDriverVal{ text-align:right; font-weight: 800; color: var(--sid-muted); font-size: 12px; }
#view-overview .ovDriverBar{
  height: 10px;
  border-radius: 999px;
  background: #f5f8fa;
  border: 1px solid var(--sid-line);
  overflow:hidden;
}
#view-overview .ovDriverBar > span{
  display:block; height:100%;
  background: rgba(0,158,247,.35);
  width: 0%;
}

#view-overview .ovPlan{ display:flex; flex-direction:column; gap: 12px; }
#view-overview .ovPlanRow{
  display:grid;
  grid-template-columns: 14px 1fr 72px auto;
  align-items:center;
  gap: 12px;
  padding: 10px 10px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}
#view-overview .ovPlanDot{
  width: 10px; height: 10px; border-radius: 999px;
  border: 2px solid rgba(0,158,247,.35);
  background: #f5f8fa;
}
#view-overview .ovPlanTitle{ font-weight: 800; color: var(--sid-text); font-size: 13px; }
#view-overview .ovPlanSub{ margin-top: 2px; color: var(--sid-muted); font-size: 12px; }
#view-overview .ovPlanEta{ text-align:right; font-weight: 800; color: var(--sid-muted); font-size: 11px; }
/* === /OVERVIEW: TRENDS+ACTION GRAPHICS (AUTO) === */

/* === OVERVIEW: unified MISSING tint (Snapshot + Trends + Actions) === */
#view-overview .is-missing{
  opacity:.98;
  background: #fff;
  border-color: rgba(246,78,96,.55);
  color: #e53935;
}

/* === OVERVIEW: Priority lightning icon accent (Primary Action card) === */
#view-overview #card-next-action .ovIcon svg{
  fill: var(--sid-accent) !important;
  stroke: var(--sid-accent) !important;
  background: rgba(0,158,247,.10);
  border: 1px solid rgba(0,158,247,.22);
  border-radius: 10px;
  padding: 7px;
  box-sizing: content-box;
}

/* === OVERVIEW: force MISSING amber everywhere inside Snapshot === */
#view-overview .is-missing,
#view-overview .ovTag.is-missing,
#view-overview .sidTag.is-missing,
#view-overview .sidBadge.is-missing,
#view-overview .ovBadge.is-missing,
#view-overview .sidPill.is-missing,
#view-overview [data-status="missing"]{
  opacity: .98;
  background: #fff;
    border-color: rgba(246,78,96,.55);
    color: #e53935;
}

/* fallback: se existir badge/pill genérico no Snapshot */
#view-overview .ovTag,
#view-overview .sidTag,
#view-overview .sidBadge,
#view-overview .ovBadge,
#view-overview .sidPill{
  border: 1px solid rgba(17,24,39,.08);
}

/* === OVERVIEW: color icons (Share of Attention + None detected) === */
#view-overview #card-competitive-position .ovIcon svg,
#view-overview #card-silent-alerts .ovIcon svg{
  fill: var(--sid-accent) !important;
  stroke: var(--sid-accent) !important;
  background: rgba(0,158,247,.10);
  border: 1px solid rgba(0,158,247,.22);
  border-radius: 10px;
  padding: 7px;
  box-sizing: content-box;
}


/* =========================
   OVERVIEW: Snapshot bindings (MISSING + icons)
   ========================= */
#view-overview .ovChip .b.is-missing,
#view-overview .ovItem .tag.is-missing,
#view-overview .ovAlert .state.missing.is-missing{
  background:#fff;
  border:1px solid rgba(246,78,96,.55);
  color:#e53935;
}

/* Donut sublabel */
#view-overview .dhiDonut .sub.is-missing{ fill:#e53935; }

/* Icons: Share of Attention + None detected (Metronic-ish accent) */
#view-overview .ovCompTop .ovIcon,
#view-overview .ovAlertHead .ovIcon{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:var(--sid-accent);
}
#view-overview .ovCompTop .ovIcon .ovIcoSvg,
#view-overview .ovAlertHead .ovIcon .ovIcoSvg{ fill:currentColor; }

/* Fix label clipping in competitive SVG */
#view-overview .ovCompChart,
#view-overview .ovBarsSvg{ overflow:visible; }


/* =========================
   VIEW: SEARCH & VISIBILITY
   ========================= */
#view-search .sidSubview{display:none;}
#view-search .sidSubview.is-active{display:block;}

#view-search{ padding: 18px 26px 22px; }
/* hide in-view subnav (top dynamic nav is the official UI) */
#view-search .sidSubnav{ display:none; }



/* SEARCH: MISSING BADGE (match Overview) */

/* SEARCH: Keywords table status — remove pill border/box (keep red + bold) */
#view-search #search-subview-keywords .seStatus .ovTag.is-missing{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
  color: var(--sid-danger, #f1416c) !important;
  font-weight: 700;
}

#view-search .missing,
#view-search .is-missing{
  color: var(--sid-danger, #f1416c) !important;
}

#view-search .ovTag.is-missing,
#view-search .sidTag.is-missing,
#view-search .seTag.is-missing,
#view-search .sePill.is-missing,
#view-search .state.missing,
#view-search .state.is-missing{
  background: rgba(241,65,108,.08) !important;
  border: 1px solid rgba(241,65,108,.35) !important;
  color: var(--sid-danger, #f1416c) !important;
}
/* layout helpers */
#view-search .seGrid2{ gap: 16px; }

#view-search .seIndexTop{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 980px){
  #view-search .seIndexTop{ grid-template-columns: 1fr; }
}

#view-search .seDonutWrap{
  border: 1px solid var(--sid-line);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 180px;
}
#view-search .seDonut{ width: 160px; height: 160px; margin: 0 auto; }
#view-search .seDonutBg{ fill:none; stroke: #eef0f4; stroke-width: 10; }
#view-search .seDonutFg{ fill:none; stroke: var(--sid-accent); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 40px 40px; }
#view-search .seDonutPct{ font-size: 16px; font-weight: 700; fill: var(--sid-text); }

#view-search .seDonutMeta{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
#view-search .seMetaK{ font-size: 12px; color: var(--sid-muted); }

#view-search .seMiniGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px){
  #view-search .seMiniGrid{ grid-template-columns: 1fr; }
}

#view-search .seMini{
  border: 1px solid var(--sid-line);
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-height: 86px;
}
#view-search .seMiniK{ font-size: 12px; color: var(--sid-muted); }
#view-search .seMiniV{ font-size: 16px; font-weight: 700; color: var(--sid-text); }
#view-search .seMiniS{ font-size: 12px; color: #7e8299; }

#view-search .seMiniS.is-missing{
  color: var(--sid-danger, #f1416c) !important;
  font-weight: 700;
}
#view-search .seTag.is-missing,
#view-search .seChip.is-missing{
  font-weight: 700;
}


#view-search .seSignals{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
#view-search .seSignalRow{
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  display:grid;
  grid-template-columns: 1fr 70px auto;
  gap: 12px;
  align-items:center;
}
#view-search .seSignalName{ font-size: 13px; color: var(--sid-text); }
#view-search .seSignalVal{ font-size: 13px; color: var(--sid-muted); text-align:right; }

#view-search .seNote{ margin-top: 10px; font-size: 12px; color: var(--sid-muted); }

#view-search .seTag{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--sid-line);
  background: #f5f8fa;
  color: var(--sid-muted);
  white-space: nowrap;
}
#view-search .seTag.is-missing{ opacity: .95; }

#view-search .seChip{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--sid-line);
  background: #f5f8fa;
  color: var(--sid-muted);
  white-space: nowrap;
}
#view-search .seChip.is-missing{ opacity: .95; }

#view-search .seSnapTop{ display:flex; flex-direction: column; gap: 12px; }
#view-search .seSnapKpi{ display:flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#view-search .seSnapVal{ font-size: 18px; font-weight: 800; color: var(--sid-text); }
#view-search .seSnapLbl{ font-size: 12px; color: var(--sid-muted); }
#view-search .seSpark{ width: 100%; height: 56px; }
#view-search .seSparkBg{ fill:none; stroke:#eef0f4; stroke-width: 2; }
#view-search .seSparkLine{ fill:none; stroke: var(--sid-accent); stroke-width: 2.6; }
#view-search .seSparkDot{ fill: var(--sid-accent); }

#view-search .seTable{
  margin-top: 12px;
  border: 1px solid var(--sid-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
#view-search .seTHead,
#view-search .seTRow{
  display:grid;
  grid-template-columns: 1.4fr .4fr 1.4fr .6fr;
  gap: 10px;
  padding: 10px 12px;
  align-items:center;
}
#view-search .seTHead{ background: #f5f8fa; font-size: 12px; color: var(--sid-muted); font-weight: 700; }
#view-search .seTRow{ border-top: 1px solid var(--sid-line); font-size: 13px; color: var(--sid-text); }
#view-search .seStatus{ font-size: 12px; color: var(--sid-muted); }

#view-search .seDist{ display:flex; flex-direction: column; gap: 12px; }
#view-search .seDistRow{ display:grid; grid-template-columns: 70px 1fr 40px auto; gap: 12px; align-items:center; }
#view-search .seDistK{ font-size: 12px; color: var(--sid-muted); }
#view-search .seDistV{ font-size: 13px; font-weight: 700; color: var(--sid-text); text-align:right; }
#view-search .seDistBar{ height: 10px; border-radius: 999px; background: #eef0f4; overflow:hidden; }
#view-search .seDistBar > span{ display:block; height:100%; width:0%; background: var(--sid-accent); border-radius: 999px; }

#view-search .seFeatGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px){ #view-search .seFeatGrid{ grid-template-columns: 1fr; } }
#view-search .seFeatRow{ border:1px solid var(--sid-line); border-radius: 12px; background:#fff; padding: 10px 12px; display:flex; align-items:center; justify-content: space-between; gap: 12px; }
#view-search .seFeatName{ font-size: 13px; color: var(--sid-text); }

#view-search .seCoverage{ margin-top: 12px; display:flex; gap: 10px; align-items:center; }
#view-search .seCoverageK{ font-size: 12px; color: var(--sid-muted); }
#view-search .seCoverageV{ font-size: 13px; font-weight: 800; color: var(--sid-text); }
#view-search .seCoverageBar{ margin-top: 10px; height: 10px; border-radius: 999px; background: #eef0f4; overflow:hidden; }
#view-search .seCoverageBar > span{ display:block; height:100%; width:0%; background: var(--sid-accent); border-radius: 999px; }

#view-search .seTrendTop{ display:flex; align-items:flex-start; justify-content: space-between; gap: 12px; }
#view-search .seTrendVal{ font-size: 18px; font-weight: 800; color: var(--sid-text); }
#view-search .seTrendLbl{ font-size: 12px; color: var(--sid-muted); }
#view-search .seTrendMini{ margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 820px){ #view-search .seTrendMini{ grid-template-columns: 1fr; } }

#view-search .seAlertGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 820px){ #view-search .seAlertGrid{ grid-template-columns: 1fr; } }
#view-search .seAlert{ border:1px solid var(--sid-line); border-radius: 12px; background:#fff; padding: 10px 12px; display:flex; align-items:center; justify-content: space-between; gap: 12px; }
#view-search .seAlertName{ font-size: 13px; color: var(--sid-text); }

/* =========================
   STATUS: MISSING (GLOBAL)
   ========================= */
/* unified "MISSING" emphasis across all views */
.is-missing,
.missing,
.state.missing,
.ovTag.is-missing,
.sidTag.is-missing {
  font-weight: 700 !important;
}

.is-missing,
.missing,
.state.missing {
  color: var(--sid-danger, #f1416c) !important;
}


/* =========================
   BADGES: MISSING (BOLD)
   ========================= */
.ovTag{ font-weight: 700; }
.ovTag.is-missing{ font-weight: 700; }


/* TABLES: status text-only (no pill/border) */
#view-search .seStatus .ovTag.is-missing,
#view-search .seStatus .sidTag.is-missing,
#view-search .seTable .ovTag.is-missing,
#view-search .seTable .sidTag.is-missing,
#view-search .sidTable .ovTag.is-missing,
#view-search .sidTable .sidTag.is-missing,
#view-search table .ovTag.is-missing,
#view-search table .sidTag.is-missing{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline !important;
  font-weight: 700 !important;
}


/* =========================================================
   AUTHORITY & REPUTATION (AR)
   - isolated selectors: .ar*
   - no cross-view reuse
   ========================================================= */
#view-authority .arWrap{ display:block; }
#view-authority .arKpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
#view-authority .arKpi{
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: var(--sid-soft);
  padding: 12px 12px;
}
#view-authority .arKpiLabel{
  font-size: 12px;
  font-weight: 700;
  color: var(--sid-muted);
  letter-spacing: .2px;
}
#view-authority .arKpiValue{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--sid-text);
}
#view-authority .arKpiHint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--sid-muted);
  line-height: 1.25;
}

#view-authority .arGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#view-authority .arPanel{
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
  padding: 12px 12px;
}
#view-authority .arPanelTitle{
  font-size: 13px;
  font-weight: 800;
  color: var(--sid-text);
  margin-bottom: 10px;
}
#view-authority .arRows{ display:flex; flex-direction:column; gap: 8px; }
#view-authority .arRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--sid-soft);
}
#view-authority .arRow span:first-child{
  font-size: 12px;
  color: var(--sid-muted);
  font-weight: 700;
}
#view-authority .arRow span:last-child{
  font-size: 12px;
  font-weight: 800;
}

/* responsive */
@media (max-width: 980px){
  #view-authority .arKpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-authority .arGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  #view-authority .arKpis{ grid-template-columns: 1fr; }
}


/* =========================================================
   AR VISUALS v2 (SAFE OVERRIDE)
   - ONLY: #view-authority .ar*
   ========================================================= */
#view-authority .arKpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:14px; }
#view-authority .arKpi{ border:1px solid var(--sid-line); border-radius:12px; background:var(--sid-soft); padding:12px; }
#view-authority .arKpiTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
#view-authority .arKpiLabel{ font-size:12px; font-weight:800; color:var(--sid-muted); letter-spacing:.2px; }
#view-authority .arKpiValue{ font-size:14px; font-weight:900; color:var(--sid-text); white-space:nowrap; }
#view-authority .arKpiHint{ margin-top:8px; font-size:12px; color:var(--sid-muted); line-height:1.25; }

#view-authority .arViz{ margin-top:10px; border-radius:12px; background:#fff; border:1px solid var(--sid-line); padding:8px 10px; display:flex; align-items:center; justify-content:center; min-height:60px; }
#view-authority .arViz svg{ width:100%; height:44px; display:block; }

#view-authority .arVizDonut svg{ height:64px; }
#view-authority .arVizDonut circle{ fill:none; stroke-width:8; }
#view-authority .arVizDonut .bg{ stroke:var(--sid-line); }
#view-authority .arVizDonut .fg{ stroke:var(--sid-accent); stroke-linecap:round; transform:rotate(-90deg); transform-origin:32px 32px; }
#view-authority .arVizDonut .t{ font-size:14px; font-weight:900; fill:var(--sid-text); }

#view-authority .arViz .grid{ stroke:var(--sid-line); stroke-width:1; fill:none; }
#view-authority .arVizBars .bars rect{ fill:var(--sid-accent); opacity:.95; }

#view-authority .arVizNodes .links path{ stroke:var(--sid-line); stroke-width:2; fill:none; }
#view-authority .arVizNodes .nodes circle{ fill:var(--sid-accent); opacity:.95; }

#view-authority .arVizStars .barBg{ fill:var(--sid-line); }
#view-authority .arVizStars .barFg{ fill:var(--sid-accent); }
#view-authority .arVizStars .t2{ font-size:12px; font-weight:900; fill:var(--sid-text); }
#view-authority .arVizStars .stars path{ fill:var(--sid-line); }
#view-authority .arVizStars .stars path.filled{ fill:var(--sid-accent); }

#view-authority .arVizShield .shield{ fill:none; stroke:var(--sid-accent); stroke-width:3; stroke-linejoin:round; }
#view-authority .arVizShield .check{ fill:none; stroke:var(--sid-accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

#view-authority .arVizSpark .spark{ fill:none; stroke:var(--sid-accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#view-authority .arVizSpark .dot{ fill:var(--sid-accent); }

#view-authority .arGrid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
#view-authority .arPanel{ border:1px solid var(--sid-line); border-radius:12px; background:#fff; padding:12px; }
#view-authority .arPanelTitle{ font-size:13px; font-weight:900; color:var(--sid-text); margin-bottom:10px; }
#view-authority .arRows{ display:flex; flex-direction:column; gap:8px; }
#view-authority .arRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; background:var(--sid-soft); }
#view-authority .arRow span:first-child{ font-size:12px; color:var(--sid-muted); font-weight:800; }
#view-authority .arRow span:last-child{ font-size:12px; font-weight:900; }

@media (max-width:980px){ #view-authority .arKpis{ grid-template-columns: repeat(2, minmax(0,1fr)); } #view-authority .arGrid{ grid-template-columns:1fr; } }
@media (max-width:560px){ #view-authority .arKpis{ grid-template-columns:1fr; } }

/* =========================================================
   AR KPI VIZ NORMALIZE v3 (SAFE OVERRIDE)
   - ONLY: #view-authority .arViz*
   - make all KPI white viz boxes same size as donut
   ========================================================= */
#view-authority .arViz{
  min-height: 88px;            /* unify white box height */
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#view-authority .arViz svg{
  width: auto !important;      /* stop stretching */
  height: 64px !important;     /* unify visual height */
  max-width: 260px;            /* keep Metronic-like proportions */
  display:block;
}

/* donut stays compact and crisp */
#view-authority .arVizDonut svg{
  max-width: 96px;
}

/* stars needs a bit more room (avoid looking “compressed”) */
#view-authority .arVizStars svg{
  max-width: 240px;
}

/* AR: Trust Signals (shield) — lock proportions */
#view-authority .arVizShield svg{
  height: 64px !important;
  width: auto !important;
  max-width: 220px;
}

/* AR: Trust Signals (shield) — shrink to fit (override) */
#view-authority .arVizShield svg{
  height: 56px !important;   /* menor pra não cortar embaixo */
  width: auto !important;
  max-width: 210px;
  overflow: visible;         /* evita clip de stroke */
}

/* AR: Trust Signals — make it feel less wide (no distortion) */
#view-authority .arVizShield svg{
  height: 56px !important;
  width: auto !important;
  max-width: 160px;   /* was ~210/220 */
}


/* =========================
   DISTRIBUTION & REACH (scoped)

/* --- fix UI: hide internal subnav source (Topnav already mirrors it) --- */
#view-distribution .sidSubnav{ display:none; }

/* --- fix UI: subviews behave like tabs (only active is visible) --- */
#view-distribution .sidSubview{ display:none; }
#view-distribution .sidSubview.is-active{ display:block; }
   ========================= */
#view-distribution .sidSubnav{ margin-top: 6px; }

#view-distribution .drGrid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  padding: 14px 0 0;
}

#view-distribution .drGrid2{
  grid-template-columns: 1fr 1fr;
}

#view-distribution .drKpis{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#view-distribution .drKpis2{ margin-top: 12px; margin-bottom: 0; }

#view-distribution .drKpi{
  flex: 1 1 160px;
  padding: 12px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}

#view-distribution .drKpiLabel{
  font-size: 12px;
  color: var(--sid-muted);
  margin-bottom: 6px;
}

#view-distribution .drKpiValue{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#view-distribution .drChartWrap{
  border: 1px solid var(--sid-line);
  border-radius: 14px;
  background: #fff;
  padding: 10px 10px;
}

#view-distribution .drChart{
  width: 100%;
  height: 180px;
  display: block;
}

#view-distribution .drGridLines line{
  stroke: var(--sid-line);
  stroke-width: 1;
}

#view-distribution .drAxis{
  font-size: 11px;
  fill: var(--sid-muted);
}

#view-distribution .drBar{
  rx: 8;
  ry: 8;
  opacity: .35;
}

#view-distribution .drBarA{ fill: var(--sid-accent); }

#view-distribution .drArea{
  fill: currentColor;
  opacity: .10;
}

#view-distribution .drLine{
  fill: none;
  stroke: var(--sid-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-distribution .drLegend{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
}

#view-distribution .drLegendCol{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}

#view-distribution .drLegendItem{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  color: var(--sid-text);
}

#view-distribution .drLegendVal{
  margin-left: auto;
  font-weight: 800;
}

#view-distribution .drDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
}

#view-distribution .drDotA{ background: var(--sid-accent); opacity: .75; }
#view-distribution .drDotB{ background: #22c55e; opacity: .75; }
#view-distribution .drDotC{ background: #f59e0b; opacity: .75; }
#view-distribution .drDotD{ background: #a855f7; opacity: .75; }

#view-distribution .drList{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

#view-distribution .drRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}

#view-distribution .drRowVal{
  font-weight: 800;
}

#view-distribution .drHeat{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--sid-line);
  border-radius: 14px;
  background:#fff;
}

#view-distribution .drHeatCell{
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--sid-line);
  background: rgba(0,158,247,.06);
}



/* === Distribution & Reach — Heatmap legend (simulated) === */
#view-distribution .drHeatLegend{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}
#view-distribution .drHeatLegendTxt{
  font-size:12px;
  color:var(--sid-muted);
}
#view-distribution .drHeatLegendBar{
  display:flex;
  gap:8px;
  padding:6px 8px;
  border:1px solid var(--sid-line);
  border-radius:12px;
  background:var(--sid-card);
}
#view-distribution .drHeatLegendSwatch{
  width:18px;
  height:18px;
  border-radius:7px;
  border:1px solid var(--sid-line);
}
/* tonalidades (Low -> High) */
#view-distribution .drHeatLegendSwatch.is-0{ background: color-mix(in srgb, var(--sid-accent) 10%, #fff); }
#view-distribution .drHeatLegendSwatch.is-1{ background: color-mix(in srgb, var(--sid-accent) 20%, #fff); }
#view-distribution .drHeatLegendSwatch.is-2{ background: color-mix(in srgb, var(--sid-accent) 35%, #fff); }
#view-distribution .drHeatLegendSwatch.is-3{ background: color-mix(in srgb, var(--sid-accent) 50%, #fff); }
#view-distribution .drHeatLegendSwatch.is-4{ background: color-mix(in srgb, var(--sid-accent) 65%, #fff); }
/* === /Heatmap legend (simulated) === */

#view-distribution .drDonutWrap{
  display:flex;
  gap: 14px;
  align-items: center;
}

#view-distribution .drDonut{
  width: 140px;
  height: 140px;
  flex: 0 0 140px;
}

#view-distribution .drDonutTrack{
  fill: none;
  stroke: var(--sid-line);
  stroke-width: 12;
}

#view-distribution .drDonutArc{
  fill: none;
  stroke: var(--sid-accent);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 0 999; /* real data later */
  transform: rotate(-90deg);
  transform-origin: 70px 70px;
  opacity: .55;
}

#view-distribution .drDonutMain{
  font-size: 14px;
  font-weight: 900;
  fill: var(--sid-text);
}

#view-distribution .drDonutSub{
  font-size: 11px;
  fill: var(--sid-muted);
}

#view-distribution .drNote{
  margin-top: 12px;
  font-size: 12px;
  color: var(--sid-muted);
}

@media (max-width: 980px){
  #view-distribution .drGrid,
  #view-distribution .drGrid2{
    grid-template-columns: 1fr;
  }
}


/* === ENGAGEMENT & CONVERSION (VIEW) === */
#view-engagement .ecGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sid-gap);
}

#view-engagement #card-ec-kpis{ grid-column: 1 / 13; }
#view-engagement #card-ec-funnel{ grid-column: 1 / 7; }
#view-engagement #card-ec-trends{ grid-column: 7 / 13; }
#view-engagement #card-ec-top{ grid-column: 1 / 8; }
#view-engagement #card-ec-mix{ grid-column: 8 / 13; }

#view-engagement .ecKpiGrid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
#view-engagement .ecKpi{
  padding: 12px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: var(--sid-soft);
}
#view-engagement .ecKpiLabel{ font-size: 12px; color: var(--sid-muted); }
#view-engagement .ecKpiValue{ margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--sid-text); }

#view-engagement .ecFunnel{ display:flex; flex-direction:column; gap: 10px; }
#view-engagement .ecFunnelRow{
  display:grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}
#view-engagement .ecMiniChart
/* SVG text must use 'fill' (not 'color') to match .is-missing */
.ecSvgText.is-missing,
.stSvgText.is-missing,
.cpDonutMain.is-missing {
  fill: rgba(246,78,96,.55);
}
{
  margin-top: 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
#view-engagement .ecSvgText{ font-size: 12px; fill: var(--sid-muted); }

#view-engagement .ecSplit{ margin-top: 12px; display:flex; flex-direction:column; gap: 8px; }
#view-engagement .ecRow{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}

#view-engagement .ecTable{ display:flex; flex-direction:column; gap: 8px; }
#view-engagement .ecTHead{
  display:grid;
  grid-template-columns: 1fr 80px 80px;
  gap: 10px;
  font-size: 12px;
  color: var(--sid-muted);
  padding: 6px 6px;
}
#view-engagement .ecTRow{
  display:grid;
  grid-template-columns: 1fr 80px 80px;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}
#view-engagement .ecPath{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color: var(--sid-text); }

#view-engagement .ecMix{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items:center;
}
#view-engagement .ecMixLegend{ display:flex; flex-direction:column; gap: 8px; }

#view-engagement .ecNote{
  margin-top: 12px;
  font-size: 12px;
  color: var(--sid-muted);
}

@media (max-width: 980px){
  #view-engagement .ecKpiGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-engagement #card-ec-funnel,
  #view-engagement #card-ec-trends,
  #view-engagement #card-ec-top,
  #view-engagement #card-ec-mix{ grid-column: 1 / 13; }
  #view-engagement .ecMix{ grid-template-columns: 1fr; }
}


/* === SECURITY & TRUST (VIEW) === */
#view-security .stGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sid-gap);
}

#view-security #card-st-posture{ grid-column: 1 / 13; }
#view-security #card-st-risk{ grid-column: 1 / 5; }
#view-security #card-st-headers{ grid-column: 5 / 13; }
#view-security #card-st-trust{ grid-column: 1 / 13; }

#view-security .stKpiGrid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
#view-security .stKpi{
  padding: 12px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: var(--sid-soft);
}
#view-security .stKpiLabel{ font-size: 12px; color: var(--sid-muted); }
#view-security .stKpiValue{ margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--sid-text); }

#view-security .stRiskWrap{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items:center;
}
#view-security .stDonut{
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  text-align:center;
}
#view-security .stSvgText{ font-size: 12px; fill: var(--sid-muted); }
#view-security .stMiniLabel{ margin-top: 6px; font-size: 12px; color: var(--sid-muted); }

#view-security .stRiskList{ display:flex; flex-direction:column; gap: 8px; }

#view-security .stRow{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}

#view-security .stHeadersTop{ display:flex; flex-direction:column; gap: 10px; margin-bottom: 12px; }

#view-security .stBar{
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--sid-soft);
  border: 1px solid var(--sid-line);
  overflow:hidden;
}
#view-security .stBarFill{
  height: 100%;
  background: var(--sid-accent) !important;
}
#view-security .stBarText{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  color: var(--sid-muted);
}

#view-security .stTable{ display:flex; flex-direction:column; gap: 8px; }
#view-security .stTHead{
  display:grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  font-size: 12px;
  color: var(--sid-muted);
  padding: 6px 6px;
}
#view-security .stTRow{
  display:grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}
#view-security .stStatus{ text-align:right; }

#view-security .stTrustGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#view-security .stTrustItem{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
}

#view-security .stNote{
  margin-top: 12px;
  font-size: 12px;
  color: var(--sid-muted);
}

@media (max-width: 980px){
  #view-security .stKpiGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-security #card-st-risk,
  #view-security #card-st-headers{ grid-column: 1 / 13; }
  #view-security .stRiskWrap{ grid-template-columns: 1fr; }
  #view-security .stTrustGrid{ grid-template-columns: 1fr; }
}


/* === SECURITY & TRUST: SVG MISSING (DONUT) === */
/* SVG text ignores `color:`; it needs `fill:` */
#view-security svg .is-missing{
  fill: #e53935 !important;
}
#view-security .stDonut text.is-missing{
  fill: #e53935 !important;
  font-weight: 700;
}


/* === COMPETITION (VIEW) === */
#view-competition .cpGrid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sid-gap);
  align-items: stretch;
}
#view-competition #card-cp-kpis{ grid-column: 1 / 13; }
#view-competition #card-cp-overlap{ grid-column: 1 / 8; }
#view-competition #card-cp-authority{ grid-column: 8 / 13; }
#view-competition #card-cp-alerts{ grid-column: 1 / 13; }

#view-competition .cpKpiGrid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
#view-competition .cpKpi{
  background: var(--sid-soft);
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
#view-competition .cpKpiLabel{ font-size: 12px; color: var(--sid-muted); }
#view-competition .cpKpiValue{ margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--sid-text); }
#view-competition .cpNote{ margin-top: 10px; font-size: 12px; color: var(--sid-muted); }

#view-competition .cpTable{ display:flex; flex-direction:column; gap: 8px; }
#view-competition .cpTHead{
  display:grid; grid-template-columns: 1.6fr 1fr .6fr;
  font-size: 12px; color: var(--sid-muted);
  padding: 0 6px 6px;
}
#view-competition .cpTRow{
  display:grid; grid-template-columns: 1.6fr 1fr .6fr;
  gap: 10px;
  align-items:center;
  background: #fff;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  padding: 12px 12px;
}
#view-competition .cpStatus{ text-align:right; }

#view-competition .cpAuthWrap{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items:center;
}
#view-competition .cpDonut{
  background:#fff;
  border: 1px solid var(--sid-line);
  border-radius: 14px;
  padding: 12px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#view-competition .cpDonutMain{ font-size: 12px; fill: var(--sid-muted); font-weight: 700; letter-spacing: .4px; }
#view-competition .cpMiniLabel{ margin-top: 6px; font-size: 12px; color: var(--sid-muted); }

#view-competition .cpAuthList{ display:flex; flex-direction:column; gap: 8px; }
#view-competition .cpRow{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background:#fff;
}
#view-competition .cpAlertList{ display:flex; flex-direction:column; gap: 10px; }
#view-competition .cpAlert{
  border: 1px solid var(--sid-line);
  border-radius: 14px;
  background:#fff;
  padding: 12px 14px;
}
#view-competition .cpAlertTitle{ font-size: 13px; font-weight: 700; color: var(--sid-text); }
#view-competition .cpAlertMeta{ margin-top: 6px; font-size: 12px; color: var(--sid-muted); }

@media (max-width: 980px){
  #view-competition #card-cp-overlap,
  #view-competition #card-cp-authority{ grid-column: 1 / 13; }
  #view-competition .cpKpiGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-competition .cpAuthWrap{ grid-template-columns: 1fr; }
}

/* === SVG MISSING COLOR (global) === */
.stSvgText.is-missing{ fill: var(--sid-danger, #f1416c); }

/* === COMPETITION DONUT MISSING (SVG text) === */
#view-competition .cpDonutMain.is-missing{ fill: var(--sid-danger, #f1416c) !important; }

/* === Distribution & Reach — Heatmap (simulated) === */
#view-distribution .drHeat .drHeatCell{
  background: color-mix(in srgb, var(--sid-accent) 10%, white);
  border: 1px solid var(--sid-line);
  border-radius: 12px;
}
/* intensity pattern (static simulation) */
#view-distribution .drHeat .drHeatCell:nth-child(7n+1){ background: color-mix(in srgb, var(--sid-accent) 6%,  white); }
#view-distribution .drHeat .drHeatCell:nth-child(7n+2){ background: color-mix(in srgb, var(--sid-accent) 12%, white); }
#view-distribution .drHeat .drHeatCell:nth-child(7n+3){ background: color-mix(in srgb, var(--sid-accent) 18%, white); }
#view-distribution .drHeat .drHeatCell:nth-child(7n+4){ background: color-mix(in srgb, var(--sid-accent) 26%, white); }
#view-distribution .drHeat .drHeatCell:nth-child(7n+5){ background: color-mix(in srgb, var(--sid-accent) 14%, white); }
#view-distribution .drHeat .drHeatCell:nth-child(7n+6){ background: color-mix(in srgb, var(--sid-accent) 9%,  white); }
#view-distribution .drHeat .drHeatCell:nth-child(7n+7){ background: color-mix(in srgb, var(--sid-accent) 22%, white); }
/* === /Heatmap (simulated) === */

/* === Top Controls — Metronic Pills (Company/Range/Month) === */
#view-overview .sidTopLbl,
#view-distribution .sidTopLbl,
#view-engagement .sidTopLbl {
  display:block;
  font-size: 12px;
  color: var(--sid-muted);
  margin-bottom: 6px;
}




#sidMonthBtn.sidMonthBtn{
  width: 100%;
  height: 44px;
  border: 1px solid var(--sid-line);
  border-radius: 12px;
  background: #fff;
  color: var(--sid-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  cursor: pointer;
}
#sidMonthBtn:focus{
  outline: none;
  border-color: rgba(0,158,247,.45);
  box-shadow: 0 0 0 3px rgba(0,158,247,.12);
}
.sidMonthIcon{
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237e8299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/></svg>") no-repeat center / 16px 16px;
  flex: 0 0 16px;
}
.sidMonthCaret{
  margin-left: auto;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237e8299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / 14px 14px;
  opacity: .9;
}
.sidMonthInput{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
.sidTopCtlMonth{ position: relative; min-width: 180px; }
/* === /Top Controls — Metronic Pills === */






/* === TOPNAV TOOLS (Metronic placement) === */

/* Make the topnav a 2-col grid:
   [tabs/links..........................][filters.............]
   then SectionHeader spans full width below. */
.sidTopnav{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: start;
  padding: 16px 26px 0;
}

/* LEFT: submenu links row */
.sidTopnavDynamic{
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 18px 0 12px;
}

/* RIGHT: filters row */
.sidTopnavTools{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  gap: 14px;
  align-items: center; /* key: align like Month */
  padding: 18px 0 12px;
  white-space: nowrap;
}

/* Divider line under (menu + filters), Metronic-ish */
.sidTopnav::after{
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  height: 1px;
  background: var(--sid-line);
}

/* Section header below divider */
.sidSectionHeader{
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0 6px;
  margin-top: 18px;
  margin-bottom: 22px;
}

/* Inline labels for Company/Range (match Month layout) */
.sidTopnavTools .sidControl{
  display:flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.sidTopnavTools .sidControlSelect{
  height: 42px;
  min-width: 160px;
}

/* Ensure Month stays inline too */
.sidTopnavTools .sidTopCtlMonth{
  display:flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Labels: Company/Range/Month all identical */
.sidTopnavTools .sidControlLabel,
.sidTopnavTools .sidTopLbl{
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  font-size: 12px;
  color: var(--sid-muted);
  font-weight: 500;
}

/* === /TOPNAV TOOLS (Metronic placement) === */