/* Primoura Ads — page pieces on top of the shared Primoura look (app.css, copied from Primoura CRM).
   Tokens only; no literal colours here. */

.tiles.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1360px) { .tiles.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tiles.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile.accent { border-color: var(--accent); }
.tile.accent .tile-value { color: var(--accent-ink); }
.tile-sub { font-size: 12.5px; }

.demo-chip { color: var(--accent-ink); border-style: dashed !important; font-size: 11.5px; }
.demo-note { display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 14px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; }
.match-line { margin: -4px 0 14px; display: flex; flex-wrap: wrap; gap: 0 4px; }
.match-line b { color: var(--text); font-weight: 500; }
.pf { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.chart.combo .bar { fill: var(--stage-1); }
.chart.combo .line { fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart.combo .dot-pt { fill: var(--surface); stroke: var(--accent-ink); stroke-width: 1.5; }
.legend i.lg-bar { background: var(--stage-1); }
.legend i.lg-line { height: 2px; width: 14px; border-radius: 2px; background: var(--accent-ink); }

.share-track { width: 120px; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.share-bar { height: 100%; border-radius: 6px; background: var(--stage-2); }
html[dir=rtl] .share-bar { margin-inline-start: auto; margin-left: auto; }
.grid2.rank { align-items: start; }
.cpb.good { color: var(--ok-ink); font-weight: 500; }
.cpb.bad { color: var(--err-ink); font-weight: 500; }

/* Campaigns */
.panel.flush { padding: 0; overflow: hidden; }
.panel.flush .table-wrap { border: 0; border-radius: 0; }
.table.camp th.crm, .table.camp td.crm { background: var(--hover-fill); }
.table.camp tr.group th { font-size: 11.5px; letter-spacing: .02em; padding-block: 8px 0; border-bottom: 0; }
.table.camp tr.group th.grp { color: var(--muted); text-align: start; }
.table.camp tbody tr[tabindex] { cursor: pointer; }
.row-end { display: inline-flex; gap: 6px; align-items: center; }
.row-end .icon { color: var(--muted); }
.crumbs { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; min-width: 0; }
.chip.run-active { color: var(--ok-ink); }
.chip.run-paused, .chip.run-ended { color: var(--muted); }
.chip.run-active::before, .chip.run-paused::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.toolbar .tabs { margin-inline-end: 4px; }
.tabs .count { color: var(--muted); font-size: 12px; }

/* Recommendations */
.recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.rec { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden; }
.rec::before { content: ''; position: absolute; inset-block: 18px; inset-inline-start: 0; width: 2px; border-radius: 2px; background: var(--line-strong); }
.rec.sev-high::before { background: var(--danger); }
.rec.sev-medium::before { background: var(--warn); }
.rec.sev-good::before { background: var(--ok); }
.rec header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rec h3 { font-size: 15px; margin: 0; flex: 1; min-width: 0; }
.rec-tags { display: inline-flex; gap: 6px; }
.rec-target { font-size: 13.5px; }
.rec-why { margin: 0; color: var(--text-2); font-size: 13.5px; }
.rec-do { margin: 0; font-size: 13.5px; padding-top: 8px; border-top: 1px solid var(--line); }
.chip.sev-high { color: var(--err-ink); }
.chip.sev-medium { color: var(--warn-ink); }
.chip.sev-good { color: var(--ok-ink); }

/* Reports */
.report { display: flex; flex-direction: column; gap: 24px; max-width: 1100px; }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.report-head h2 { font-family: var(--font-display); font-size: 28px; margin: 4px 0; }
.report .eyebrow { color: var(--accent-ink); font-size: 12px; letter-spacing: .08em; margin: 0; }
.report-text { font-size: 15px; line-height: 1.9; max-width: 80ch; }
.report h3 { margin-bottom: 10px; }
.report footer { padding-top: 14px; border-top: 1px solid var(--line); }
.report .recs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .report .recs { grid-template-columns: 1fr; } }
@media print {
  .sidebar, .topbar, .toolbar, .demo-note { display: none !important; }
  .layout, .page, .content { display: block !important; padding: 0 !important; margin: 0 !important; }
  .report { border: 0 !important; max-width: none; }
  body { background: #fff; }
}

/* Connections */
.conn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1200px) { .conn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .conn-grid { grid-template-columns: 1fr; } }
.conn { display: flex; flex-direction: column; gap: 10px; }
.conn header { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.conn p { margin: 0; flex: 1; }
.conn-n b { font-size: 26px; font-weight: 300; }
.chip.conn-ready { color: var(--ok-ink); }
.chip.conn-review { color: var(--warn-ink); }
@media (max-width: 860px) { .recs { grid-template-columns: 1fr; } .share-track { width: 70px; } }
.chip.conn-connected { color: var(--ok-ink); }
.chip.conn-not_connected { color: var(--muted); }
.chip.conn-error { color: var(--warn-ink); }