/* Fiscal Social Manager — reklam səhifələrinə xas komponentlər (baza: app.css). */

.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
.spin.big { width: 30px; height: 30px; border-width: 3px; color: var(--accent); }
.page-head .actions { align-items: center; }
/* sidebar ilə məzmun eni dəyişir → plitələr sığdığı qədər */
@media (min-width: 640px) {
  .tiles.t6 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .tiles.t4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
.tile .val { overflow: hidden; text-overflow: ellipsis; }

/* müşahidələr */
.obs-list { display: flex; flex-direction: column; gap: 8px; }
.obs { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--surface-2); font-size: 13px; }
.obs .ic { margin-top: 1px; }
.obs b { display: block; font-weight: 600; font-size: 13px; }
.obs p { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; }
.obs.bad { border-color: rgba(248, 113, 113, .35); } .obs.bad .ic { color: var(--err); }
.obs.warn { border-color: rgba(251, 191, 36, .3); } .obs.warn .ic { color: var(--warn); }
.obs.good { border-color: rgba(52, 211, 153, .3); } .obs.good .ic { color: var(--ok); }
.obs.info .ic { color: var(--info); }

/* metrik şəbəkəsi */
.kv.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
@media (min-width: 900px) { .kv.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kv.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; margin-top: 0; }
.kv b.ok { color: var(--ok); } .kv b.warn { color: var(--warn); } .kv b.err { color: var(--err); }

/* kampaniya kartları */
.camp-h { display: flex; gap: 12px; align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.camp-t { margin: 8px 0 0; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp .acc-chev { flex: none; gap: 6px; }
.adsets { margin-top: 14px; border-top: 1px solid var(--stroke); display: flex; flex-direction: column; }
.adset { padding: 12px 0 2px; border-bottom: 1px dashed var(--stroke); }
.adset:last-child { border-bottom: 0; }
.adset .kv { margin-top: 10px; }
.adset .kv b { font-size: 13.5px; }
.tg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tg-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 13px; background: var(--surface-3); border: 1px solid var(--stroke); font-size: 12px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-chip .ic { color: var(--text-2); }
.tg-chip.dim { color: var(--text-2); }

/* cədvəldə pay zolağı */
.share { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--surface-3); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.share i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
table.t b.ok { color: var(--ok); } table.t b.warn { color: var(--warn); } table.t b.err { color: var(--err); }
.chart.auto { height: auto; min-height: 160px; }

/* AI hesabatı */
.ai-grid { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .ai-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; } .ai-side { position: sticky; top: 16px; } }
.hist { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 8px; cursor: pointer; color: inherit; }
.hist:hover { background: var(--surface-3); }
.hist.on { background: var(--accent-soft); border-color: rgba(91, 140, 255, .3); }
.hist b { display: block; font-size: 12.5px; font-weight: 600; }
.hist small { display: block; font-size: 11.5px; color: var(--muted); }
.hist-s { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--surface-3); color: var(--text); }
.hist-s.done { background: var(--ok-soft); color: var(--ok); }
.hist-s.error { background: var(--err-soft); color: var(--err); }
.hist-s.running { color: var(--accent); }

.rep-head { display: flex; gap: 16px; align-items: center; }
.rep-sum { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.score { --p: 0; --c: var(--ok); width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0); }
.score b { font-size: 24px; font-weight: 700; line-height: 1; }
.score small { font-size: 11px; color: var(--muted); }

.bul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bul li { position: relative; padding-left: 16px; font-size: 13px; }
.bul li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.bul.b-ok li::before { background: var(--ok); }
.bul.b-err li::before { background: var(--err); }

.recs { display: flex; flex-direction: column; }
.rec { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--stroke); }
.rec:first-child { padding-top: 2px; }
.rec:last-child { border-bottom: 0; padding-bottom: 0; }
.rec-n { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--grad); color: #fff; }
.rec h4 { margin: 8px 0 0; font-size: 14px; font-weight: 650; }
.rec p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; }
.rec .badge .ic { width: 13px; height: 13px; }
.rec-imp { display: flex; gap: 6px; align-items: center; color: var(--ok) !important; font-size: 12.5px !important; }
.rec-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--stroke); font-size: 12.5px; }
.rec-act .ic { color: var(--accent); }

.steps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-2); }
.steps b { color: var(--text); }
.steps code { font-family: var(--mono); font-size: 12px; background: rgba(255, 255, 255, .06); padding: 1px 5px; border-radius: 4px; color: var(--text); }
.empty .ic-lg { color: var(--violet); width: 30px; height: 30px; }
.empty p { max-width: 520px; margin: 10px auto 0; }