/* Frontline CRM · Meta Reporting isolated visual restore · 2026-09-24 */
html body #app .meta-dashboard{
  --meta-card:var(--bg-surface);
  --meta-card-2:var(--bg-raised);
  --meta-line:color-mix(in srgb,var(--border-strong) 78%,var(--accent));
  --meta-line-soft:color-mix(in srgb,var(--border) 84%,var(--accent));
  --meta-cpl:var(--chart-4);
  --meta-results:var(--chart-2);
  width:100%;
  max-width:none;
  padding:14px 18px 28px;
  color:var(--text-primary);
  background:transparent;
  font-size:13px;
}
html body #app .meta-dashboard .meta-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:78px;
  margin:0 0 12px;
  padding:14px 16px;
  border:1px solid var(--meta-line);
  border-radius:11px;
  background:var(--meta-card);
  box-shadow:none;
}
html body #app .meta-dashboard .meta-title{display:flex;align-items:center;gap:14px}
html body #app .meta-dashboard .meta-title>span{
  padding-right:14px;
  border-right:1px solid var(--border);
  color:var(--accent-text);
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
}
html body #app .meta-dashboard .meta-title h1{
  margin:0;
  color:var(--text-primary);
  font-size:24px;
  line-height:1.05;
  letter-spacing:-.02em;
}
html body #app .meta-dashboard .meta-title p{
  margin:4px 0 0;
  color:var(--text-secondary);
  font-size:11px;
}
html body #app .meta-dashboard .meta-controls{gap:7px}
html body #app .meta-dashboard .meta-ranges{
  gap:4px;
  padding:4px;
  border-radius:8px;
  background:var(--bg-raised);
}
html body #app .meta-dashboard .meta-ranges button,
html body #app .meta-dashboard .meta-table-actions button,
html body #app .meta-dashboard .meta-sync-row button,
html body #app .meta-dashboard .meta-custom button{
  min-height:31px;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:var(--text-secondary);
  box-shadow:none;
  font-size:10.5px;
  font-weight:700;
}
html body #app .meta-dashboard .meta-ranges button:hover,
html body #app .meta-dashboard .meta-table-actions button:hover,
html body #app .meta-dashboard .meta-sync-row button:hover,
html body #app .meta-dashboard .meta-custom button:hover{
  color:var(--text-primary);
  background:var(--bg-surface);
  border-color:var(--border);
}
html body #app .meta-dashboard .meta-ranges button.active{
  color:var(--text-primary);
  background:var(--bg-surface);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm);
}
html body #app .meta-dashboard .meta-sync-row{
  color:var(--text-secondary);
  font-size:10px;
}

html body #app .meta-dashboard .meta-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 10px;
}
html body #app .meta-dashboard .meta-kpis article{
  min-height:92px;
  padding:14px 15px;
  border:1px solid var(--meta-line);
  border-radius:11px;
  background:var(--meta-card);
  color:var(--text-primary);
  box-shadow:none;
}
html body #app .meta-dashboard .meta-kpis article:nth-child(n){box-shadow:none}
html body #app .meta-dashboard .meta-kpis article span,
html body #app .meta-dashboard .meta-kpis article small{
  display:block;
  color:var(--text-secondary);
  font-size:10px;
}
html body #app .meta-dashboard .meta-kpis article span{
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
html body #app .meta-dashboard .meta-kpis article strong,
html body #app .meta-dashboard .meta-kpis article:nth-child(n) strong{
  display:block;
  margin:7px 0 5px;
  color:var(--text-primary);
  font-size:27px;
  line-height:1.05;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

html body #app .meta-dashboard .meta-account-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0 0 10px;
}
html body #app .meta-dashboard .meta-account-cards>button{
  min-height:108px;
  padding:14px 15px;
  text-align:left;
  border:1px solid var(--meta-line);
  border-radius:11px;
  background:var(--meta-card);
  color:var(--text-primary);
  box-shadow:none;
}
html body #app .meta-dashboard .meta-account-cards>button:first-child,
html body #app .meta-dashboard .meta-account-cards>button:nth-child(2){box-shadow:none}
html body #app .meta-dashboard .meta-account-cards>button:first-child{
  border-color:color-mix(in srgb,var(--chart-1) 42%,var(--border));
}
html body #app .meta-dashboard .meta-account-cards>button:nth-child(2){
  border-color:color-mix(in srgb,var(--chart-4) 42%,var(--border));
}
html body #app .meta-dashboard .meta-account-cards>button:hover{
  background:var(--bg-raised);
}
html body #app .meta-dashboard .meta-account-cards>button.active:first-child{
  background:color-mix(in srgb,var(--chart-1) 8%,var(--bg-surface));
  border-color:color-mix(in srgb,var(--chart-1) 68%,var(--border));
}
html body #app .meta-dashboard .meta-account-cards>button.active:nth-child(2){
  background:color-mix(in srgb,var(--chart-4) 8%,var(--bg-surface));
  border-color:color-mix(in srgb,var(--chart-4) 68%,var(--border));
}
html body #app .meta-dashboard .meta-account-cards header b{
  color:var(--text-primary);
  font-size:13px;
}
html body #app .meta-dashboard .meta-account-cards header>span{
  color:var(--text-tertiary);
  font-size:9px;
}
html body #app .meta-dashboard .meta-account-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:12px 0 0;
}
html body #app .meta-dashboard .meta-account-metrics section{
  padding:0 13px 0 0;
  border-right:1px solid var(--border);
}
html body #app .meta-dashboard .meta-account-metrics section+section{padding-left:13px}
html body #app .meta-dashboard .meta-account-metrics section:last-child{border-right:0}
html body #app .meta-dashboard .meta-account-metrics small{
  color:var(--text-tertiary);
  font-size:8.5px;
  text-transform:uppercase;
}
html body #app .meta-dashboard .meta-account-metrics strong{
  display:block;
  margin-top:3px;
  color:var(--text-primary);
  font-size:19px;
  font-variant-numeric:tabular-nums;
}

html body #app .meta-dashboard .meta-charts-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0 0 10px;
}
html body #app .meta-dashboard .meta-panel{
  overflow:hidden;
  margin:0 0 10px;
  border:1px solid var(--meta-line);
  border-radius:11px;
  background:var(--meta-card);
  color:var(--text-primary);
  box-shadow:none;
}
html body #app .meta-dashboard .meta-charts-row .meta-panel{margin-bottom:0}
html body #app .meta-dashboard .meta-panel>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--meta-card-2);
}
html body #app .meta-dashboard .meta-panel h3{
  margin:0;
  color:var(--text-primary);
  font-size:14px;
}
html body #app .meta-dashboard .meta-panel header p{
  margin:2px 0 0;
  color:var(--text-secondary);
  font-size:9.5px;
}
html body #app .meta-dashboard .meta-chart-kicker{
  color:var(--text-tertiary);
  font-size:8.8px;
  font-weight:800;
  letter-spacing:.07em;
}
html body #app .meta-dashboard .meta-chart-shell{padding:10px 13px 8px}
html body #app .meta-dashboard .meta-chart-legend{
  min-height:25px;
  gap:13px;
  padding-right:2px;
  color:var(--text-secondary);
  font-size:9.5px;
}
html body #app .meta-dashboard .meta-chart-legend i{width:16px;height:3px}
html body #app .meta-dashboard .meta-chart-scroll{
  overflow-x:auto;
  overflow-y:hidden;
}
html body #app .meta-dashboard .meta-line-chart{
  display:block;
  width:100%;
  min-width:720px;
  height:310px;
}
html body #app .meta-dashboard .meta-gridline{
  stroke:color-mix(in srgb,var(--text-tertiary) 24%,transparent);
  stroke-opacity:1;
  stroke-width:1;
}
html body #app .meta-dashboard .meta-y-label,
html body #app .meta-dashboard .meta-x-label{
  fill:var(--text-tertiary);
  font-size:10px;
}
html body #app .meta-dashboard .meta-line{
  fill:none;
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
html body #app .meta-dashboard .meta-charts-row .meta-panel:nth-child(1) .meta-line.combined{
  stroke:var(--meta-cpl);
}
html body #app .meta-dashboard .meta-charts-row .meta-panel:nth-child(2) .meta-line.combined{
  stroke:var(--meta-results);
}
html body #app .meta-dashboard .meta-dot{
  stroke:var(--bg-surface);
  stroke-width:2.2;
}
html body #app .meta-dashboard .meta-charts-row .meta-panel:nth-child(1) .meta-dot.combined{
  fill:var(--meta-cpl);
}
html body #app .meta-dashboard .meta-charts-row .meta-panel:nth-child(2) .meta-dot.combined{
  fill:var(--meta-results);
}
html body #app .meta-dashboard .meta-point-label{
  font-size:10.5px;
  font-weight:800;
  paint-order:stroke;
  stroke:var(--bg-surface);
  stroke-width:3px;
  stroke-linejoin:round;
}
html body #app .meta-dashboard .meta-charts-row .meta-panel:nth-child(1) .meta-point-label.combined{
  fill:var(--meta-cpl);
}
html body #app .meta-dashboard .meta-charts-row .meta-panel:nth-child(2) .meta-point-label.combined{
  fill:var(--meta-results);
}
html body #app .meta-dashboard .meta-charts-row .meta-panel:nth-child(1) .meta-chart-legend i.combined{
  background:var(--meta-cpl);
}
html body #app .meta-dashboard .meta-charts-row .meta-panel:nth-child(2) .meta-chart-legend i.combined{
  background:var(--meta-results);
}

html body #app .meta-dashboard .meta-table-wrap{
  background:var(--meta-card);
}
html body #app .meta-dashboard .meta-table thead th{
  height:34px;
  background:var(--meta-card-2);
  border-color:var(--border);
}
html body #app .meta-dashboard .meta-table th button{
  color:var(--text-secondary);
  font-size:8.8px;
}
html body #app .meta-dashboard .meta-table td{
  height:40px;
  padding:5px 8px;
  background:var(--meta-card);
  border-color:var(--border);
  color:var(--text-primary);
  font-size:10.7px;
}
html body #app .meta-dashboard .meta-table tbody tr:hover td{
  background:var(--bg-raised);
}
html body #app .meta-dashboard .meta-table-actions select,
html body #app .meta-dashboard .meta-custom input{
  min-height:34px;
  border:1px solid var(--border-strong);
  border-radius:7px;
  background:var(--bg-inset);
  color:var(--text-primary);
}

/* light themes keep the same structure, only lower border saturation */
html[data-theme="light"] body #app .meta-dashboard,
html[data-theme="warm"] body #app .meta-dashboard{
  --meta-line:color-mix(in srgb,var(--border-strong) 82%,var(--chart-6));
}
html[data-theme="dark"] body #app .meta-dashboard,
html[data-theme="dim"] body #app .meta-dashboard{
  --meta-line:color-mix(in srgb,var(--border-strong) 76%,var(--chart-6));
}

@media(max-width:1180px){
  html body #app .meta-dashboard .meta-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #app .meta-dashboard .meta-charts-row{grid-template-columns:1fr}
}
@media(max-width:760px){
  html body #app .meta-dashboard{padding:10px 10px 24px}
  html body #app .meta-dashboard .meta-toolbar{align-items:flex-start;flex-direction:column}
  html body #app .meta-dashboard .meta-account-cards{grid-template-columns:1fr}
  html body #app .meta-dashboard .meta-line-chart{height:285px}
}
@media(max-width:560px){
  html body #app .meta-dashboard .meta-kpis{grid-template-columns:1fr}
}


/* META TOP CARDS COLOR RESTORE · 2026-09-24 */
html body #app .meta-dashboard .meta-kpis article{--kpi-color:var(--chart-1)}
html body #app .meta-dashboard .meta-kpis article:nth-child(1){--kpi-color:var(--chart-1)}
html body #app .meta-dashboard .meta-kpis article:nth-child(2){--kpi-color:var(--chart-4)}
html body #app .meta-dashboard .meta-kpis article:nth-child(3){--kpi-color:var(--chart-6)}
html body #app .meta-dashboard .meta-kpis article:nth-child(4){--kpi-color:var(--chart-3)}

html body #app .meta-dashboard .meta-kpis article{
  position:relative;
  overflow:hidden;
  background:color-mix(in srgb,var(--kpi-color) 8%,var(--bg-surface));
  border-color:color-mix(in srgb,var(--kpi-color) 44%,var(--border));
}
html body #app .meta-dashboard .meta-kpis article:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--kpi-color);
}
html body #app .meta-dashboard .meta-kpis article span{
  color:color-mix(in srgb,var(--kpi-color) 82%,var(--text-primary));
}
html body #app .meta-dashboard .meta-kpis article strong,
html body #app .meta-dashboard .meta-kpis article:nth-child(n) strong{
  color:color-mix(in srgb,var(--kpi-color) 76%,var(--text-primary));
}
html body #app .meta-dashboard .meta-kpis article small{
  color:var(--text-secondary);
}

/* Account cards keep their own brand-like identity without gradients. */
html body #app .meta-dashboard .meta-account-cards>button:first-child{
  --account-color:var(--chart-1);
  background:color-mix(in srgb,var(--chart-1) 7%,var(--bg-surface));
  border-color:color-mix(in srgb,var(--chart-1) 48%,var(--border));
}
html body #app .meta-dashboard .meta-account-cards>button:nth-child(2){
  --account-color:var(--chart-4);
  background:color-mix(in srgb,var(--chart-4) 7%,var(--bg-surface));
  border-color:color-mix(in srgb,var(--chart-4) 48%,var(--border));
}
html body #app .meta-dashboard .meta-account-cards>button{
  position:relative;
  overflow:hidden;
}
html body #app .meta-dashboard .meta-account-cards>button:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--account-color);
}
html body #app .meta-dashboard .meta-account-cards>button:first-child:hover{
  background:color-mix(in srgb,var(--chart-1) 11%,var(--bg-surface));
}
html body #app .meta-dashboard .meta-account-cards>button:nth-child(2):hover{
  background:color-mix(in srgb,var(--chart-4) 11%,var(--bg-surface));
}
html body #app .meta-dashboard .meta-account-cards>button header b,
html body #app .meta-dashboard .meta-account-cards>button .meta-account-metrics strong{
  color:color-mix(in srgb,var(--account-color) 72%,var(--text-primary));
}
html body #app .meta-dashboard .meta-account-cards>button .meta-account-metrics small{
  color:var(--text-secondary);
}

/* Light/warm themes: keep tint subtle. */
html[data-theme="light"] body #app .meta-dashboard .meta-kpis article,
html[data-theme="warm"] body #app .meta-dashboard .meta-kpis article{
  background:color-mix(in srgb,var(--kpi-color) 5%,var(--bg-surface));
}
html[data-theme="light"] body #app .meta-dashboard .meta-account-cards>button:first-child,
html[data-theme="warm"] body #app .meta-dashboard .meta-account-cards>button:first-child{
  background:color-mix(in srgb,var(--chart-1) 5%,var(--bg-surface));
}
html[data-theme="light"] body #app .meta-dashboard .meta-account-cards>button:nth-child(2),
html[data-theme="warm"] body #app .meta-dashboard .meta-account-cards>button:nth-child(2){
  background:color-mix(in srgb,var(--chart-4) 5%,var(--bg-surface));
}
/* END META TOP CARDS COLOR RESTORE */

/* META CAMPAIGN INCLUDE FILTER · 2026-09-24 */
html body #app .meta-dashboard .meta-include-col{width:44px;min-width:44px;max-width:44px;text-align:center;padding-left:8px;padding-right:8px}
html body #app .meta-dashboard th.meta-include-col{color:var(--text-tertiary);font-size:10px}
html body #app .meta-dashboard .meta-campaign-check{position:relative;width:20px;height:20px;display:inline-grid;place-items:center;cursor:pointer}
html body #app .meta-dashboard .meta-campaign-check input{position:absolute;opacity:0;pointer-events:none}
html body #app .meta-dashboard .meta-campaign-check span{width:16px;height:16px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:4px;background:var(--bg-inset);transition:background .12s var(--ease),border-color .12s var(--ease),opacity .12s var(--ease)}
html body #app .meta-dashboard .meta-campaign-check input:checked+span{background:var(--accent);border-color:var(--accent)}
html body #app .meta-dashboard .meta-campaign-check input:checked+span:after{content:'✓';color:#fff;font-size:11px;font-weight:900;line-height:1}
html body #app .meta-dashboard .meta-campaign-check:hover span{border-color:var(--accent)}
html body #app .meta-dashboard .meta-campaign-excluded td{opacity:.46;background:color-mix(in srgb,var(--bg-surface) 82%,var(--bg-inset))}
html body #app .meta-dashboard .meta-campaign-excluded:hover td{opacity:.66}
html body #app .meta-dashboard .meta-campaign-excluded .meta-include-col{opacity:1}

/* 2026-10-07: restore single-account Meta chart series colors/lines */
html body #app .meta-dashboard .meta-line.east{stroke:var(--meta-east)}
html body #app .meta-dashboard .meta-line.front{stroke:var(--meta-front)}
html body #app .meta-dashboard .meta-dot.east{fill:var(--meta-east)}
html body #app .meta-dashboard .meta-dot.front{fill:var(--meta-front)}
html body #app .meta-dashboard .meta-point-label.east{fill:var(--meta-east)}
html body #app .meta-dashboard .meta-point-label.front{fill:var(--meta-front)}
html body #app .meta-dashboard .meta-chart-legend i.east{background:var(--meta-east)}
html body #app .meta-dashboard .meta-chart-legend i.front{background:var(--meta-front)}

/* 2026-10-07 hard fix: single-account Meta SVG series */
html body #app .meta-dashboard .meta-line.east{stroke:#4ea7ff!important;stroke-width:2.8!important}
html body #app .meta-dashboard .meta-line.front{stroke:#9b7cff!important;stroke-width:2.8!important}
html body #app .meta-dashboard .meta-dot.east{fill:#4ea7ff!important;stroke:var(--bg-surface)!important}
html body #app .meta-dashboard .meta-dot.front{fill:#9b7cff!important;stroke:var(--bg-surface)!important}
html body #app .meta-dashboard .meta-point-label.east{fill:#4ea7ff!important}
html body #app .meta-dashboard .meta-point-label.front{fill:#9b7cff!important}
html body #app .meta-dashboard .meta-chart-legend i.east{background:#4ea7ff!important}
html body #app .meta-dashboard .meta-chart-legend i.front{background:#9b7cff!important}

/* Frontline third Meta account */
.meta-account-dot.line{background:#2576bd!important}
.meta-line.line{stroke:#2576bd!important}
.meta-dot.line{fill:#2576bd!important}
.meta-chart-legend i.line{background:#2576bd!important}