/* ============================================================
   META INSIGHTS · STYLES
   Matches the Command Center design language (cream #FAF8F3, gold #D4AD68,
   hairline #E8E4DC, muted #6B6B6B, Figtree / Playfair Display).

   Chart series colours are a validated CVD-safe categorical pair — blue and
   amber. Green/red are RESERVED for status (good / over budget) and always
   ship with a label, never colour alone.
   ============================================================ */

/* The palette lives on every root that can carry it. The date picker and the
   modal are appended to <body>, outside .mi — a token declared only on .mi
   resolves to nothing out there, so `background: var(--mi-gold)` computes to
   transparent. That is how the two ends of a selected range went invisible
   while the tinted middle, which hardcodes its colour, stayed. */
.mi, .mi-dp, .mi-modal {
  --mi-line: #E8E4DC;
  --mi-hair: #F5EFE3;
  --mi-ink: #000;
  --mi-mute: #6B6B6B;
  --mi-faint: #B4B2A9;
  --mi-gold: #D4AD68;
  --mi-cream: #FAF6EE;
  --mi-s1: #1F63B4;   /* series 1 — followers gained, spend        */
  --mi-s2: #C8821A;   /* series 2 — unfollows, impressions         */
  --mi-good: #2D7D4F; /* status only                               */
  --mi-warn: #C8821A; /* status only                               */
  --mi-bad: #B23A2F;  /* status only                               */
}

/* ---------- sub-tabs ---------- */
.mi-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--mi-line); margin-bottom: 20px; }
.mi-tab {
  padding: 10px 18px; font-size: 12px; color: var(--mi-mute); cursor: pointer;
  border-bottom: 2px solid transparent; letter-spacing: 0.3px; user-select: none;
  transition: color .15s, border-color .15s;
}
.mi-tab:hover { color: var(--mi-ink); }
.mi-tab.on { color: var(--mi-gold); border-bottom-color: var(--mi-gold); font-weight: 500; }
.mi-tab .n {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 8px;
  background: var(--mi-hair); color: var(--mi-mute); font-size: 10px; font-weight: 500;
}
.mi-tab.on .n { background: var(--mi-gold); color: #000; }
/* a tab that cannot match while the current filters are on */
.mi-tab-dim { opacity: .45; }
.mi-tab-dim:hover { opacity: .75; }
.mi-pane { display: none; }
.mi-pane.on { display: block; }

/* ---------- notice strip (permission / sync warnings) ---------- */
.mi-note {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 4px;
  font-size: 12px; line-height: 1.6; margin-bottom: 16px; border: 1px solid;
}
.mi-note svg { flex-shrink: 0; margin-top: 1px; }
.mi-note-warn { background: #FFFAF0; border-color: #EBD9AE; color: #7A5A14; }
.mi-note-err { background: #FDF3F2; border-color: #EFC9C4; color: #8E2D24; }
.mi-note-info { background: #F4F8FC; border-color: #CDDDEE; color: #1B4A7E; }
.mi-note b { font-weight: 600; }
.mi-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: rgba(0, 0, 0, 0.05); padding: 1px 5px; border-radius: 3px;
}
.mi-note-x {
  margin-left: auto; cursor: pointer; opacity: .55; background: none; border: none;
  color: inherit; padding: 0 2px; line-height: 1; font-size: 15px;
}
.mi-note-x:hover { opacity: 1; }

/* ---------- dashboard: one column per connected account ---------- */
.mi-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.mi-col { background: #fff; border: 1px solid var(--mi-line); border-radius: 4px; overflow: hidden; }
.mi-col-h {
  padding: 16px 18px; border-bottom: 1px solid var(--mi-hair); background: #FCFBF7;
  display: flex; gap: 12px; align-items: center;
}
.mi-col-pic {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: var(--mi-gold); color: #000; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 16px; border: 1px solid var(--mi-line);
}
.mi-col-name { font-family: 'Playfair Display', serif; font-size: 16px; color: #000; line-height: 1.25; }
.mi-col-sub { font-size: 11px; color: var(--mi-mute); margin-top: 2px; }
.mi-col-sub .sep { color: var(--mi-faint); margin: 0 6px; }
.mi-col-badge {
  margin-left: auto; font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; background: var(--mi-hair); color: #7A5A14; flex-shrink: 0;
}

/* headline numbers */
.mi-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--mi-hair); }
.mi-kpi { padding: 14px 16px; border-right: 1px solid var(--mi-hair); }
.mi-kpi:nth-child(3n) { border-right: none; }
.mi-kpi-l { font-size: 9.5px; color: var(--mi-mute); letter-spacing: 1px; text-transform: uppercase; }
.mi-kpi-v { font-family: 'Playfair Display', serif; font-size: 22px; color: #000; margin-top: 4px; line-height: 1; }
.mi-kpi-d { font-size: 10.5px; color: var(--mi-mute); margin-top: 4px; }
.mi-up { color: var(--mi-good); font-weight: 500; }
.mi-down { color: var(--mi-bad); font-weight: 500; }
.mi-flat { color: var(--mi-faint); }

/* ---------- charts ---------- */
.mi-chart-box { padding: 14px 16px 6px; border-bottom: 1px solid var(--mi-hair); }
.mi-chart-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.mi-chart-t { font-size: 12px; color: #000; font-weight: 500; }
.mi-chart-sw { margin-left: auto; display: inline-flex; background: var(--mi-hair); border-radius: 4px; padding: 2px; }
.mi-chart-sw button {
  background: none; border: none; padding: 5px 10px; font-size: 10.5px; color: var(--mi-mute);
  cursor: pointer; border-radius: 3px; font-family: 'Figtree', sans-serif; letter-spacing: .3px;
}
.mi-chart-sw button.on { background: #fff; color: #000; font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
/* The plot is inset from the left so the y labels have a gutter to live in.
   Axis labels are HTML, not SVG text: the plot SVG is deliberately stretched
   (preserveAspectRatio="none") and would distort any glyph inside it. */
.mi-chart { position: relative; width: 100%; }
.mi-plot { position: relative; margin-left: 52px; }
.mi-plot svg { display: block; width: 100%; height: 100%; }
.mi-ylab {
  position: absolute; right: calc(100% + 8px); transform: translateY(-50%);
  font-size: 9.5px; color: var(--mi-faint); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mi-xaxis { position: relative; height: 15px; margin: 3px 0 0 52px; }
.mi-xlab {
  position: absolute; top: 0; font-size: 9.5px; color: var(--mi-faint); white-space: nowrap;
}
.mi-grid-line { stroke: var(--mi-hair); stroke-width: 1; }
.mi-series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mi-dot { stroke: #fff; stroke-width: 2; }
/* crosshair + tooltip */
.mi-cross { stroke: var(--mi-faint); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.mi-tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -100%);
  background: #fff; border: 1px solid var(--mi-line); border-radius: 4px; padding: 8px 10px;
  font-size: 11px; box-shadow: 0 6px 18px rgba(0, 0, 0, .10); white-space: nowrap; z-index: 6;
  transition: opacity .1s;
}
.mi-tip-d { font-size: 10px; color: var(--mi-mute); margin-bottom: 5px; letter-spacing: .3px; }
.mi-tip-r { display: flex; align-items: center; gap: 7px; line-height: 1.7; }
.mi-tip-sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mi-tip-k { color: var(--mi-mute); }
.mi-tip-v { margin-left: auto; color: #000; font-weight: 500; padding-left: 12px; }
/* legend — always present for 2+ series */
.mi-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 0 10px; }
.mi-legend-i { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mi-mute); }
.mi-legend-sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ---------- data tables ---------- */
/* Height-capped so the horizontal scrollbar is always on screen: the right-hand
   columns are reachable without first scrolling to the Total row at the foot.
   It also gives the sticky header and sticky totals row something to stick to.
   .mi-tbl-scroll (and inline max-heights) still set a tighter cap. */
.mi-tbl-wrap {
  overflow: auto; max-height: calc(100vh - 200px);
  scrollbar-width: auto; scrollbar-color: var(--mi-gold) var(--mi-cream);
}
.mi-tbl-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
.mi-tbl-wrap::-webkit-scrollbar-track { background: var(--mi-cream); }
.mi-tbl-wrap::-webkit-scrollbar-thumb { background: var(--mi-gold); border-radius: 6px; border: 2px solid var(--mi-cream); }
.mi-tbl-wrap::-webkit-scrollbar-corner { background: var(--mi-cream); }
@media print { .mi-tbl-wrap { overflow: visible; max-height: none; } }
.mi-tbl { width: 100%; border-collapse: collapse; }
.mi-tbl th {
  text-align: left; font-size: 9.5px; color: var(--mi-mute); letter-spacing: 1px;
  text-transform: uppercase; font-weight: 500; padding: 9px 12px; background: var(--mi-cream);
  border-bottom: 1px solid var(--mi-line); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.mi-tbl th.num, .mi-tbl td.num { text-align: right; }
/* says a column is typed in rather than reported, so an empty box does not
   read as missing data */
.mi-th-eyebrow {
  display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: .4px;
  text-transform: none; color: #9A6B1E; font-weight: 400; font-style: italic;
}
.mi-tbl th.sortable { cursor: pointer; user-select: none; }
.mi-tbl th.sortable:hover { color: #000; }
.mi-tbl th .ar { opacity: .35; margin-left: 3px; font-size: 9px; }
.mi-tbl th.sorted .ar { opacity: 1; color: var(--mi-gold); }
.mi-tbl td {
  padding: 11px 12px; border-bottom: 1px solid var(--mi-hair); font-size: 12px;
  color: #000; vertical-align: middle;
}
.mi-tbl tbody tr:hover { background: #FCFBF7; }
.mi-tbl tbody tr.mi-row-click { cursor: pointer; }
.mi-tbl-mono { font-variant-numeric: tabular-nums; }
.mi-tbl-scroll { max-height: 340px; overflow-y: auto; }
.mi-tbl-foot {
  padding: 10px 14px; font-size: 11px; color: var(--mi-mute); background: #FCFBF7;
  border-top: 1px solid var(--mi-hair); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ---------- filter bar ---------- */
.mi-filter {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px;
  background: #fff; border: 1px solid var(--mi-line); border-radius: 4px; margin-bottom: 14px;
}
.mi-filter-l {
  font-size: 9.5px; color: var(--mi-mute); letter-spacing: 1px; text-transform: uppercase;
  margin-right: 2px;
}
.mi-sel {
  height: 34px; padding: 0 10px; background: #fff; border: 1px solid var(--mi-line);
  border-radius: 4px; font-size: 12px; color: #000; font-family: 'Figtree', sans-serif; cursor: pointer;
  max-width: 260px;
}
.mi-sel:hover { border-color: var(--mi-gold); }
.mi-sel:focus { outline: none; border-color: var(--mi-gold); box-shadow: 0 0 0 3px rgba(212, 173, 104, .16); }
.mi-sel.on { border-color: var(--mi-gold); background: #FFFDF8; }
.mi-search {
  height: 34px; padding: 0 12px; border: 1px solid var(--mi-line); border-radius: 4px;
  font-size: 12px; font-family: 'Figtree', sans-serif; width: 230px; outline: none;
}
.mi-search:focus { border-color: var(--mi-gold); box-shadow: 0 0 0 3px rgba(212, 173, 104, .16); }
.mi-spacer { flex: 1; }

/* ---------- campaign table cells ---------- */
.mi-cname { display: block; font-size: 12.5px; color: #000; line-height: 1.45; max-width: 320px; font-weight: 500; }
.mi-cname:hover { color: #8A6B30; }
/* Delivery status. One set of tones (good / warn / bad / info / mute) shared by
   the chip under a campaign name and the count strip above the table, so the
   same state is always the same colour. Every chip carries its label as well
   as its colour — the dot is never the only signal. */
.mi-cstatus { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: .4px; }
.mi-cstatus .d { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
/* delivery state and objective share one line under the campaign name */
.mi-cmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.mi-cmeta .sep { color: var(--mi-line); font-size: 10px; }
.mi-cobj { font-size: 10.5px; color: var(--mi-faint); }
.mi-cstatus-x {
  font-style: normal; font-size: 9.5px; color: var(--mi-warn);
  background: #FDF6E7; border-radius: 2px; padding: 1px 5px; letter-spacing: .2px;
}
.t-good { color: var(--mi-good); }
.t-good .d { background: var(--mi-good); }
.t-warn { color: var(--mi-warn); }
.t-warn .d { background: var(--mi-warn); }
.t-bad { color: var(--mi-bad); }
.t-bad .d { background: var(--mi-bad); }
.t-info { color: #1B4A7E; }
.t-info .d { background: var(--mi-s1); }
.t-mute { color: var(--mi-mute); }
.t-mute .d { background: var(--mi-faint); }
.mi-cid { font-size: 10px; color: var(--mi-faint); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---------- delivery count strip ----------
   How many campaigns are in each delivery state, above the table. Each chip is
   also the filter for that state, and clicking the active one clears it. */
.mi-dstrip { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 14px; }
.mi-dchip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fff; border: 1px solid var(--mi-line); border-radius: 20px;
  padding: 6px 12px 6px 10px; font-size: 11px; font-family: inherit;
  letter-spacing: .2px; transition: border-color .12s, background .12s;
}
.mi-dchip .d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mi-dchip b { font-weight: 600; font-variant-numeric: tabular-nums; color: #000; }
.mi-dchip:hover { border-color: var(--mi-gold); }
.mi-dchip.on { border-color: var(--mi-gold); background: #FFFDF8; box-shadow: 0 0 0 3px rgba(212, 173, 104, .16); }
.mi-dchip.on::after { content: '×'; color: var(--mi-faint); margin-left: 2px; font-size: 13px; line-height: 1; }

/* the untagged nudge from the reference screenshot */
.mi-review {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px;
  border: 1px dashed var(--mi-warn); border-radius: 10px; color: #9A6B1E; font-size: 9.5px;
  letter-spacing: .5px; white-space: nowrap; background: #FFFCF5;
}

/* marks a category filed by the auto-tagger rather than checked by a person */
.mi-auto {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  background: var(--mi-hair); color: #7A7A70; font-size: 9.5px; letter-spacing: .3px;
  cursor: help;
}
/* One quiet line under the Category picker, and only when it adds something.
   The city is not repeated here — the township name in the picker already
   carries it ("Della Lake Como, Dapoli"), so a "Dapoli" line underneath is
   noise that costs every row a third line of height. */
.mi-cat-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 5px; font-size: 10.5px; color: var(--mi-mute);
}
.mi-cat-meta .sep { color: var(--mi-line); }
.mi-cat-why { color: #9A6B1E; }

/* over-budget cell — colour PLUS an icon and a label, never colour alone */
.mi-over { color: var(--mi-bad); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.mi-under { color: #000; }
.mi-budget-bar { height: 3px; background: var(--mi-hair); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.mi-budget-bar i { display: block; height: 100%; border-radius: 2px; background: var(--mi-s1); }
.mi-budget-bar.over i { background: var(--mi-bad); }

/* inline editable number (Estimated Followers Gained / Profile Visits) */
.mi-num-in {
  width: 92px; height: 30px; padding: 0 8px; border: 1px solid var(--mi-line); border-radius: 4px;
  font-size: 12px; font-family: 'Figtree', sans-serif; text-align: right; outline: none;
  font-variant-numeric: tabular-nums; background: #fff;
}
.mi-num-in:hover { border-color: var(--mi-gold); }
.mi-num-in:focus { border-color: var(--mi-gold); box-shadow: 0 0 0 3px rgba(212, 173, 104, .16); }
.mi-num-in.saved { border-color: var(--mi-good); background: #F4FAF6; }
.mi-num-in.saving { opacity: .55; }
.mi-num-in:disabled { background: #FAFAF6; color: var(--mi-mute); cursor: not-allowed; }
.mi-src {
  display: block; font-size: 9px; color: var(--mi-faint); letter-spacing: .5px;
  text-transform: uppercase; margin-top: 3px;
}
.mi-src.meta { color: #1B4A7E; }

/* category / township pickers inside a row */
.mi-cat-sel {
  height: 32px; min-width: 128px; max-width: 210px; padding: 0 8px; border: 1px solid var(--mi-line);
  border-radius: 4px; font-size: 12px; font-family: 'Figtree', sans-serif; background: #fff;
  color: #000; cursor: pointer; outline: none;
}
.mi-cat-sel:hover { border-color: var(--mi-gold); }
.mi-cat-sel:focus { border-color: var(--mi-gold); box-shadow: 0 0 0 3px rgba(212, 173, 104, .16); }
.mi-cat-sel.untagged { color: var(--mi-mute); border-style: dashed; }
.mi-cat-sel.tagged { border-color: var(--mi-gold); background: #FFFDF8; font-weight: 500; }
.mi-twp { display: block; font-size: 10.5px; color: #8A6B30; margin-top: 4px; }

/* bulk-tag bar */
.mi-bulk {
  display: none; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px;
  background: #FFFDF5; border: 1px solid var(--mi-gold); border-radius: 4px; margin-bottom: 12px;
}
.mi-bulk.on { display: flex; }
.mi-bulk-n { font-size: 12px; color: #7A5A14; font-weight: 500; }
.mi-chk { width: 15px; height: 15px; accent-color: var(--mi-gold); cursor: pointer; }

/* ---------- accounts pane ---------- */
.mi-acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.mi-acct {
  background: #fff; border: 1px solid var(--mi-line); border-radius: 4px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.mi-acct.off { opacity: .62; }
.mi-acct-h { display: flex; align-items: flex-start; gap: 10px; }
.mi-acct-n { font-family: 'Playfair Display', serif; font-size: 15px; color: #000; }
.mi-acct-b { font-size: 10px; color: var(--mi-mute); margin-top: 2px; }
.mi-acct-rows { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 11.5px; }
.mi-acct-k { color: var(--mi-mute); white-space: nowrap; }
.mi-acct-v { color: #000; word-break: break-all; font-variant-numeric: tabular-nums; }
.mi-acct-v.none { color: var(--mi-faint); font-style: italic; }
.mi-acct-a { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.mi-mini {
  background: #fff; border: 1px solid var(--mi-line); border-radius: 4px; padding: 6px 11px;
  font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
  font-family: 'Figtree', sans-serif; color: #000; display: inline-flex; align-items: center; gap: 5px;
}
.mi-mini:hover { border-color: var(--mi-gold); color: #8A6B30; }
.mi-mini.danger:hover { border-color: var(--mi-bad); color: var(--mi-bad); }
.mi-mini:disabled { opacity: .5; cursor: not-allowed; }
.mi-pill {
  font-size: 9px; letter-spacing: .8px; text-transform: uppercase; padding: 3px 8px;
  border-radius: 3px; white-space: nowrap;
}
.mi-pill-ok { background: #EAF5EE; color: #1F5C39; }
.mi-pill-warn { background: #FDF6E7; color: #7A5A14; }
.mi-pill-bad { background: #FBEEEC; color: #8E2D24; }
.mi-pill-off { background: var(--mi-hair); color: var(--mi-mute); }
.mi-scopes { display: flex; gap: 5px; flex-wrap: wrap; }
.mi-scope {
  font-size: 9.5px; padding: 2px 7px; border-radius: 3px; background: var(--mi-hair);
  color: #5A5A52; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mi-scope.miss { background: #FBEEEC; color: #8E2D24; text-decoration: line-through; }

/* ---------- modal (add / edit account, manual IG day) ---------- */
.mi-modal {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .42); z-index: 400;
  align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.mi-modal.open { display: flex; }
.mi-modal-c {
  background: #fff; border-radius: 6px; width: 100%; max-width: 620px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22); overflow: hidden; margin: auto 0;
}
.mi-modal-h {
  padding: 18px 22px; border-bottom: 1px solid var(--mi-line); display: flex;
  align-items: center; gap: 12px; background: #FCFBF7;
}
.mi-modal-t { font-family: 'Playfair Display', serif; font-size: 19px; color: #000; }
.mi-modal-s { font-size: 11.5px; color: var(--mi-mute); margin-top: 3px; }
.mi-modal-x {
  margin-left: auto; background: none; border: none; cursor: pointer; color: var(--mi-mute);
  font-size: 22px; line-height: 1; padding: 0 4px;
}
.mi-modal-x:hover { color: #000; }
.mi-modal-b { padding: 20px 22px; max-height: 62vh; overflow-y: auto; }
.mi-modal-f {
  padding: 14px 22px; border-top: 1px solid var(--mi-line); display: flex; gap: 10px;
  justify-content: flex-end; background: #FCFBF7; align-items: center;
}
.mi-form-g { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mi-fld { margin-bottom: 0; }
.mi-fld.full { grid-column: 1 / -1; }
.mi-fld label {
  display: block; font-size: 10px; color: var(--mi-mute); letter-spacing: .8px;
  text-transform: uppercase; margin-bottom: 5px; font-weight: 500;
}
.mi-fld label .req { color: var(--mi-bad); margin-left: 2px; }
.mi-fld input, .mi-fld select, .mi-fld textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--mi-line); border-radius: 4px;
  font-size: 12.5px; font-family: 'Figtree', sans-serif; outline: none; background: #fff; color: #000;
}
.mi-fld textarea { resize: vertical; min-height: 62px; }
.mi-fld input:focus, .mi-fld select:focus, .mi-fld textarea:focus {
  border-color: var(--mi-gold); box-shadow: 0 0 0 3px rgba(212, 173, 104, .14);
}
.mi-fld .hint { font-size: 10.5px; color: var(--mi-mute); margin-top: 5px; line-height: 1.5; }
.mi-fld .hint.err { color: var(--mi-bad); }
.mi-fld .hint.ok { color: var(--mi-good); }
.mi-sec-h {
  grid-column: 1 / -1; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #8A6B30; padding-bottom: 6px; border-bottom: 1px solid var(--mi-hair); margin-top: 6px;
}
.mi-sec-h:first-child { margin-top: 0; }
.mi-switch-row { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; }
.mi-switch-row label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; color: #000; }

/* ---------- campaign detail ---------- */
.mi-detail-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mi-mute);
  cursor: pointer; margin-bottom: 14px; background: none; border: none;
  font-family: 'Figtree', sans-serif; padding: 0;
}
.mi-detail-back:hover { color: var(--mi-gold); }
.mi-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mi-metric { background: #fff; border: 1px solid var(--mi-line); border-radius: 4px; padding: 14px 16px; }
.mi-metric-l { font-size: 9.5px; color: var(--mi-mute); letter-spacing: 1px; text-transform: uppercase; }
.mi-metric-v { font-family: 'Playfair Display', serif; font-size: 21px; color: #000; margin-top: 5px; line-height: 1; }
.mi-metric-d { font-size: 10.5px; color: var(--mi-mute); margin-top: 5px; }
/* ---------- objective & delivery panel ---------- */
.mi-obj {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--mi-hair);
}
.mi-obj-f { padding: 13px 16px; border-right: 1px solid var(--mi-hair); border-bottom: 1px solid var(--mi-hair); }
.mi-obj-l { font-size: 9.5px; color: var(--mi-mute); letter-spacing: 1px; text-transform: uppercase; }
.mi-obj-v { font-size: 13.5px; color: #000; margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mi-obj-g {
  font-size: 9px; letter-spacing: .6px; text-transform: uppercase; padding: 2px 7px;
  border-radius: 3px; background: #F4F8FC; color: #1B4A7E;
}
.mi-obj-raw {
  font-size: 9.5px; color: var(--mi-faint); margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Capped rather than full-width. On a wide screen these stretched to ~1,200px,
   which makes the eye travel the whole way to compare two bars and pushes the
   value column so far from its label that the pairing weakens. Around 780px the
   label, the bar and the value all sit in one glance. */
.mi-bars { display: flex; flex-direction: column; gap: 9px; padding: 4px 0; max-width: 780px; }
.mi-bar-r { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 12px; align-items: center; }
.mi-bar-l { font-size: 11.5px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-bar-t { height: 8px; background: var(--mi-hair); border-radius: 4px; overflow: hidden; }
/* display:block matters — an inline <i> ignores width and the fill vanishes. */
.mi-bar-f { display: block; height: 100%; border-radius: 4px; background: var(--mi-s1); }
.mi-bar-v { font-size: 11.5px; color: #000; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }

/* ---------- misc ---------- */
.mi-empty { text-align: center; padding: 46px 24px; }
.mi-empty-t { font-family: 'Playfair Display', serif; font-size: 18px; color: #000; margin-bottom: 7px; }
.mi-empty-s { font-size: 12px; color: var(--mi-mute); max-width: 420px; margin: 0 auto 18px; line-height: 1.65; }
.mi-mini-empty { padding: 22px 12px; text-align: center; color: var(--mi-faint); font-size: 11px; font-style: italic; }
.mi-load { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--mi-line); border-top-color: var(--mi-gold); border-radius: 50%; animation: mi-spin .7s linear infinite; vertical-align: -2px; }
@keyframes mi-spin { to { transform: rotate(360deg); } }
.mi-sync-note { font-size: 11px; color: var(--mi-mute); }

@media (max-width: 900px) {
  .mi-cols { grid-template-columns: 1fr; }
  .mi-form-g { grid-template-columns: 1fr; }
  .mi-kpis { grid-template-columns: repeat(2, 1fr); }
  .mi-kpi:nth-child(3n) { border-right: 1px solid var(--mi-hair); }
  .mi-kpi:nth-child(2n) { border-right: none; }
}

/* ============================================================
   INSTAGRAM TAB
   ------------------------------------------------------------
   The Instagram screen is one account read in depth, so it is laid out as a
   reading order rather than a grid of equal cards: who this is, how the period
   went, the shape of it, what was posted, and who it reached.
   ============================================================ */

/* a wider KPI grid than the dashboard's 3-up columns */
.mi-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.mi-kpis-4 .mi-kpi:nth-child(3n) { border-right: 1px solid var(--mi-hair); }
.mi-kpis-4 .mi-kpi:nth-child(4n) { border-right: none; }
/* the second, quieter row: likes / comments / saves / shares */
.mi-kpis-sub { border-bottom: none; }
.mi-kpis-sub .mi-kpi { padding: 11px 16px; }
.mi-kpis-sub .mi-kpi-v { font-size: 17px; }
.mi-kpi-d .sep { color: var(--mi-faint); margin: 0 5px; }

/* ---------- profile card ---------- */
.mi-ig-head {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px 20px; margin-bottom: 16px;
}
.mi-ig-pic-w { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.mi-ig-pic {
  width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--mi-cream); border: 1px solid var(--mi-line);
}
/* the real picture, laid over the initials so a dead URL falls back for free */
.mi-ig-pic.ovl { position: absolute; inset: 0; }
.mi-ig-pic.ph {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 24px; color: #8A6B30;
}
.mi-ig-pic.sm { width: 40px; height: 40px; font-size: 14px; }
.mi-ig-id { min-width: 0; flex: 1; }
.mi-ig-name { font-family: 'Playfair Display', serif; font-size: 21px; color: #000; line-height: 1.2; }
.mi-ig-handle {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--mi-mute); margin-top: 4px;
}
.mi-ig-handle a { color: #1B4A7E; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.mi-ig-handle a:hover { text-decoration: underline; }
.mi-ig-bio {
  font-size: 12px; color: var(--mi-mute); line-height: 1.65;
  margin-top: 8px; max-width: 620px; white-space: pre-line;
}
.mi-ig-bio a { color: #1B4A7E; word-break: break-all; }
.mi-ig-counts { display: flex; gap: 26px; flex-shrink: 0; padding-top: 4px; }
.mi-ig-count { text-align: right; }
.mi-ig-count b {
  display: block; font-family: 'Playfair Display', serif; font-size: 22px;
  color: #000; font-weight: 400; line-height: 1;
}
.mi-ig-count span {
  display: block; font-size: 9.5px; color: var(--mi-mute);
  letter-spacing: 1px; text-transform: uppercase; margin-top: 5px;
}

/* a count sitting inside a segmented button, e.g. "Reels 12" */
.mi-swn {
  margin-left: 5px; font-size: 9.5px; color: var(--mi-mute);
  font-variant-numeric: tabular-nums;
}
.mi-chart-sw button.on .mi-swn { color: #8A6B30; }

/* ---------- content grid ----------
   Cards rather than a table: the thumbnail is what people recognise a post by,
   and the four numbers under it are the ones posts get compared on. */
.mi-ig-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px; padding: 16px;
}
.mi-ig-card {
  border: 1px solid var(--mi-line); border-radius: 4px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
  transition: border-color .12s, box-shadow .12s;
}
.mi-ig-card:hover { border-color: var(--mi-gold); box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.mi-ig-card.top { border-color: var(--mi-gold); background: #FFFDF8; }
.mi-ig-thumb {
  position: relative; aspect-ratio: 1 / 1; background: var(--mi-cream);
  overflow: hidden; border-bottom: 1px solid var(--mi-hair);
}
.mi-ig-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Instagram's CDN links expire; a dead one becomes a labelled placeholder. */
.mi-ig-thumb.noimg::after {
  content: 'preview expired'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--mi-faint); font-style: italic; letter-spacing: .3px;
}
.mi-ig-kind {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: rgba(0, 0, 0, .68); color: #fff; border-radius: 3px;
  padding: 3px 7px; font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase;
}
.mi-ig-best {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: var(--mi-gold); color: #000; border-radius: 3px;
  padding: 3px 7px; font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 600;
}
.mi-ig-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.mi-ig-when {
  font-size: 10.5px; color: var(--mi-faint); display: flex; align-items: center; gap: 5px;
}
.mi-ig-when a { color: var(--mi-faint); display: inline-flex; }
.mi-ig-when a:hover { color: #8A6B30; }
.mi-ig-cap {
  font-size: 11.5px; color: #000; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mi-ig-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  border-top: 1px solid var(--mi-hair); padding-top: 9px; margin-top: auto;
}
.mi-ig-stat { text-align: left; }
.mi-ig-stat b {
  display: block; font-size: 13px; color: #000; font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.mi-ig-stat span {
  display: block; font-size: 8.5px; color: var(--mi-mute);
  letter-spacing: .5px; text-transform: uppercase; margin-top: 3px;
}
.mi-ig-sub { font-size: 10.5px; color: var(--mi-mute); line-height: 1.5; }

/* ---------- audience ---------- */
.mi-ig-aud {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
}
.mi-ig-aud-b { padding: 16px 18px; border-right: 1px solid var(--mi-hair); border-bottom: 1px solid var(--mi-hair); }
.mi-ig-aud-t {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
  font-size: 9.5px; color: var(--mi-mute); letter-spacing: 1px; text-transform: uppercase;
}
.mi-ig-aud-t span {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 11px; color: #000; font-variant-numeric: tabular-nums;
}
/* The audience blocks are narrower than a full-width card, so their bars get a
   tighter label gutter than the default. */
.mi-ig-aud-b .mi-bar-r { grid-template-columns: minmax(62px, 112px) 1fr auto; gap: 9px; }
.mi-ig-aud-b .mi-bar-v { min-width: 42px; }
.mi-ig-aud-b .mi-bars { gap: 7px; }

/* ---------- connect modal ---------- */
.mi-ig-cands { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.mi-ig-cand {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 1px solid var(--mi-line); border-radius: 4px; padding: 12px 14px;
  transition: border-color .12s, background .12s;
}
.mi-ig-cand:hover { border-color: var(--mi-gold); }
.mi-ig-cand:has(input:checked) { border-color: var(--mi-gold); background: #FFFDF8; }
.mi-ig-cand.warn { background: #FFFAF0; }
.mi-ig-cand input { margin-top: 3px; accent-color: var(--mi-gold); flex-shrink: 0; }
.mi-ig-cand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mi-ig-cand-n {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; color: #000; font-weight: 500;
}
.mi-ig-cand-s { font-size: 11px; color: var(--mi-mute); margin-top: 3px; line-height: 1.5; }
.mi-ig-cand-s code {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  background: var(--mi-hair); border-radius: 2px; padding: 1px 4px;
}

/* Which lookups were tried and what each returned — the fastest way to tell a
   missing permission from a missing Page link. */
.mi-ig-src { border-top: 1px solid var(--mi-hair); padding-top: 14px; }
.mi-ig-src-r {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 9px;
  align-items: baseline; font-size: 11px; color: var(--mi-mute); padding: 3px 0;
}
.mi-ig-src-v { color: #000; font-variant-numeric: tabular-nums; text-align: right; max-width: 260px; }

@media (max-width: 900px) {
  .mi-kpis-4 { grid-template-columns: repeat(2, 1fr); }
  .mi-kpis-4 .mi-kpi:nth-child(2n) { border-right: none; }
  .mi-kpis-4 .mi-kpi:nth-child(3n) { border-right: 1px solid var(--mi-hair); }
  .mi-ig-head { flex-wrap: wrap; }
  .mi-ig-counts { gap: 20px; }
}

/* the inline connect panel on the Instagram tab */
.mi-ig-connect { padding: 16px 18px 18px; }
.mi-ig-connect .mi-note { margin-bottom: 16px; }
.mi-sec-h {
  grid-column: 1 / -1; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--mi-mute); margin: 6px 0 2px;
}

/* ============================================================
   CAMPAIGN INFORMATION GRID
   ------------------------------------------------------------
   A definition grid rather than a table: these are labelled facts about one
   thing, not rows of comparable records. Section headings span the full width
   so the eye can jump to "Budget and pacing" without reading the rest.
   ============================================================ */
/* Each section is its own flex row, not a cell in one big grid.
   Two reasons, both visible the moment it is wrong: a shared grid leaves empty
   cells at the end of any section whose field count is not a multiple of the
   column count (which looks broken, not sparse), and `1fr` — which is
   `minmax(auto, 1fr)` — refuses to shrink below its content, so one long value
   pushed the whole page wider than the window and clipped the buttons at the
   right edge. Flex with `min-width: 0` shrinks, and the last row stretches to
   fill instead of trailing off into blanks. */
.mi-info { border-top: 1px solid var(--mi-hair); }
.mi-info-g { border-bottom: 1px solid var(--mi-hair); }
.mi-info-g:last-child { border-bottom: none; }
.mi-info-h {
  padding: 11px 16px 10px;
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: #8A6B30; background: #FCFBF7; border-bottom: 1px solid var(--mi-hair);
}
.mi-info-r { display: flex; flex-wrap: wrap; }
.mi-info-f {
  flex: 1 1 190px; min-width: 0;
  padding: 11px 16px 12px; border-right: 1px solid var(--mi-hair);
}
.mi-info-r .mi-info-f:last-child { border-right: none; }
.mi-info-f.wide { flex: 2 1 380px; }
.mi-info-l { font-size: 9.5px; color: var(--mi-mute); letter-spacing: .8px; text-transform: uppercase; }
.mi-info-v {
  font-size: 13.5px; color: #000; margin-top: 5px; line-height: 1.4;
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
/* the quiet qualifier after a value — "per day", "86% of budget", "each" */
.mi-info-sub {
  font-size: 10.5px; color: var(--mi-mute); font-variant-numeric: normal;
  letter-spacing: .2px;
}
.mi-info-none { color: var(--mi-faint); font-style: italic; font-size: 12.5px; }
.mi-info-v .mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
/* the budget bar under the grid */
.mi-info-bar { padding: 13px 16px 15px; }
.mi-info-bar-l {
  display: flex; font-size: 11px; color: var(--mi-mute); margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ADS AND THEIR CREATIVES
   ============================================================ */
.mi-ads {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 13px; padding: 16px;
}
.mi-ad {
  display: flex; gap: 12px; border: 1px solid var(--mi-line); border-radius: 4px;
  padding: 12px; background: #fff; transition: border-color .12s;
}
.mi-ad:hover { border-color: var(--mi-gold); }
.mi-ad.top { border-color: var(--mi-gold); background: #FFFDF8; }
/* an ad that never delivered is present but recessive — it is context, not data */
.mi-ad.quiet { opacity: .72; }
.mi-ad-thumb {
  position: relative; width: 86px; height: 86px; flex-shrink: 0; border-radius: 3px;
  overflow: hidden; background: var(--mi-cream); border: 1px solid var(--mi-hair);
}
.mi-ad-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-ad-thumb.noimg::after {
  content: 'no preview'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 9.5px; color: var(--mi-faint); font-style: italic;
}
.mi-ad-b { min-width: 0; flex: 1; }
.mi-ad-n { font-size: 12.5px; color: #000; font-weight: 500; line-height: 1.4; }
.mi-ad-n a { color: var(--mi-faint); }
.mi-ad-n a:hover { color: #8A6B30; }
.mi-ad-h { font-size: 11.5px; color: #000; margin-top: 4px; line-height: 1.45; }
.mi-ad-x { font-size: 10.5px; color: var(--mi-mute); margin-top: 3px; line-height: 1.5; }
.mi-ad-s {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 4px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--mi-hair);
}
.mi-ad-stat b {
  display: block; font-size: 12.5px; color: #000; font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.mi-ad-stat span {
  display: block; font-size: 8.5px; color: var(--mi-mute);
  letter-spacing: .5px; text-transform: uppercase; margin-top: 2px;
}

/* the "shorter is better" note above a cost breakdown */
.mi-bd-hint {
  padding: 9px 16px 0; font-size: 11px; color: var(--mi-mute);
}

/* ============================================================
   REPORTS
   ============================================================ */
.mi-rep-n { font-size: 12.5px; color: #000; font-weight: 500; }
/* The "i" that marks a column whose header carries its definition. Replaced a
   "?", which reads as "is this right?" rather than "here is what it means".
   Faint until hovered — it is an offer, not a warning, and a table with twelve
   loud markers is worse than one with none. */
.mi-i {
  display: inline-block; margin-left: 5px; width: 12px; height: 12px; line-height: 12px;
  border-radius: 50%; border: 1px solid var(--mi-line); background: #fff;
  color: var(--mi-faint); font-size: 8px; font-style: italic; font-weight: 700;
  text-align: center; cursor: help; vertical-align: 1px; letter-spacing: 0;
  transition: color .12s, border-color .12s, background .12s;
}
th:hover > .mi-i { color: #8A6B30; border-color: var(--mi-gold); background: #FFFDF8; }
/* The whole header is the hover target, so the tooltip appears wherever the
   cursor lands on it rather than only on a 12px dot. */
.mi-tbl th[title] { cursor: help; }
/* Nothing to hover on paper. */
@media print { .mi-i { display: none !important; } }
.mi-notes { margin: 0; padding-left: 18px; }
.mi-notes li { font-size: 11.5px; color: var(--mi-mute); line-height: 1.7; margin-bottom: 6px; }
.mi-notes li:last-child { margin-bottom: 0; }

/* the back / export strip above a campaign detail */
.mi-detail-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

/* ============================================================
   PRINT — the report and the campaign detail as documents
   ------------------------------------------------------------
   No library and no server-side PDF: the browser's own Print dialog saves to
   PDF everywhere, so the job is simply to make the page worth printing. Chrome
   and the filters, tabs and buttons come off; the tables get borders and are
   told not to break across a page mid-row.
   ============================================================ */
/* The portal chrome is hidden by the app's own `body.dcc-printing` rules — it
   already knows the real class names (.dcc-top, .dcc-side, .dcc-side-toggle)
   and, crucially, collapses the .dcc-app grid so the 240px sidebar track stops
   reserving space. This block only covers what is specific to this screen, and
   is scoped to that same body class so it cannot fight it. */
@media print {
  body.dcc-printing .mi-tabs,
  body.dcc-printing .mi-noprint,
  body.dcc-printing .mi-note-x,
  body.dcc-printing .mi-bulk,
  body.dcc-printing .mi-dstrip,
  body.dcc-printing .mi-chart-sw,
  body.dcc-printing .mi-filter { display: none !important; }

  /* Only the pane you are looking at goes on paper. */
  body.dcc-printing .mi-pane { display: none !important; }
  body.dcc-printing .mi-pane.on { display: block !important; }

  /* Scoped to .dcc-printing throughout: an unscoped rule here would restyle
     the org chart's and the calendar's print output too. */
  body.dcc-printing .dcc-card,
  body.dcc-printing .mi-col,
  body.dcc-printing .mi-acct,
  body.dcc-printing .mi-ig-card,
  body.dcc-printing .mi-ad {
    border: 1px solid #ccc !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  body.dcc-printing .mi-tbl { font-size: 8.5pt; }
  body.dcc-printing .mi-tbl th,
  body.dcc-printing .mi-tbl td {
    border-bottom: 1px solid #ddd !important; padding: 4px 6px !important;
  }
  /* Repeat the header on every page of a long table. */
  body.dcc-printing .mi-tbl thead { display: table-header-group; }
  body.dcc-printing .mi-tbl tr { break-inside: avoid; page-break-inside: avoid; }
  body.dcc-printing .mi-tbl-wrap,
  body.dcc-printing .mi-tbl-scroll { overflow: visible !important; max-height: none !important; }
  body.dcc-printing .mi-info-f { break-inside: avoid; }

  /* NOTHING IS HIDDEN ON PAPER.
     A printout is read away from the screen, so anything folded away, scrolled
     out of view or clipped would simply be missing — and the reader has no way
     to know it was ever there. So every mechanism this screen uses to hide
     content is undone for print, whatever state it was left in:
       · a collapsed card                (max-height / opacity)
       · a scrolling table               (max-height / overflow)
       · a clamped caption               (line-clamp)
     The on-screen toggle is a convenience; it is not an editorial decision
     about what belongs in the report. */
  body.dcc-printing .mi-info-body,
  body.dcc-printing .mi-info-card.collapsed .mi-info-body {
    max-height: none !important; opacity: 1 !important;
    overflow: visible !important; display: block !important;
  }
  body.dcc-printing .mi-ig-cap {
    -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important;
  }
  /* The chevron itself is chrome — .mi-noprint already takes it off. */

  /* The five-tile hero and the KPI grids keep their shape on A4 rather than
     collapsing to the narrow-screen breakpoints, which paper width triggers. */
  body.dcc-printing .mi-metrics-hero { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  body.dcc-printing .mi-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body.dcc-printing .mi-cols { grid-template-columns: 1fr !important; }
  body.dcc-printing .mi-info-f { flex: 1 1 150px !important; }
  body.dcc-printing .mi-ads { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.dcc-printing .mi-ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* Colour-coded status still has to read in black and white — the label is
     already beside it, so the dot is all that needs help. */
  body.dcc-printing .mi-cstatus .d, body.dcc-printing .mi-dchip .d { border: 1px solid #666; }
  /* Bars and tints are the point of these panels, so keep them on paper. */
  body.dcc-printing .mi-bar-f,
  body.dcc-printing .mi-cell-bar i,
  body.dcc-printing .mi-budget-bar i,
  body.dcc-printing .mi-info-h,
  body.dcc-printing .mi-tbl th {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }

  body.dcc-printing a[href]::after { content: ''; }   /* no printed URLs after links */
}

@media (max-width: 900px) {
  .mi-info-f.wide { grid-column: span 1; }
  .mi-ads { grid-template-columns: 1fr; }
}

/* The campaign detail opens on five numbers, not fifteen: a hero strip that
   has a hierarchy, with the full set grouped in the information grid below. */
/* minmax(0, …) not 1fr: a plain 1fr will not shrink past its content, so the
   fifth tile used to be clipped off the right edge of the window. */
.mi-metrics-hero { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mi-metrics-hero .mi-metric { min-width: 0; }
.mi-metrics-hero .mi-metric-v { font-size: 25px; }
@media (max-width: 1100px) { .mi-metrics-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .mi-metrics-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- breakdown table: the bar lives in the active column ----------
   One table instead of a chart above a table of the same rows. The column you
   are comparing by carries the bar and the emphasis, which is also the only
   signal of what the "Compare by" switcher just sorted on. */
.mi-bd-tbl th.on {
  color: #000; background: #FFFDF8; border-bottom-color: var(--mi-gold);
}
.mi-bd-tbl td.on { background: #FFFDF8; color: #000; font-weight: 500; }
.mi-bd-tbl .mi-bd-l { font-size: 12.5px; color: #000; }
/* the data bar, under the value in its own cell */
.mi-cell-bar {
  height: 3px; background: rgba(0, 0, 0, .06); border-radius: 2px;
  margin-top: 5px; overflow: hidden; min-width: 46px;
}
.mi-cell-bar i { display: block; height: 100%; border-radius: 2px; background: var(--mi-s1); }

/* ---------- the campaign-information card folds away ----------
   Using the portal's own collapsible-card mechanics (.dcc-card-chev, a
   .collapsed class, a max-height body) so it matches the cards on Platform
   Master instead of behaving like a second, different thing. */
.mi-info-h-row { cursor: pointer; user-select: none; }
.mi-info-h-row:hover .dcc-card-t { color: #8A6B30; }
.mi-info-h-row:focus-visible { outline: 2px solid var(--mi-gold); outline-offset: -2px; }
.mi-info-body {
  max-height: 3000px; overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease; opacity: 1;
}
.mi-info-card.collapsed .mi-info-body { max-height: 0; opacity: 0; }
.mi-info-card.collapsed .dcc-card-chev svg { transform: rotate(-90deg); }
.mi-info-card .dcc-card-chev { margin-left: auto; }

/* ---------- toolbar: filters on the left, actions on the right ----------
   One long flex row with a spacer wrapped wherever it ran out of width, and
   a spacer only pushes within its OWN line — so the action buttons spilled
   onto a second row and aligned left while the first one stayed up top. Two
   named groups instead: each wraps as a unit and keeps its own alignment,
   and the actions stay together however narrow the window gets. */
.mi-filter-bar { align-items: flex-start; row-gap: 10px; }
.mi-filter-fields, .mi-filter-acts {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
}
/* The filters take the slack; the actions keep their natural width and sit
   hard right, on their own line if that is all that fits. */
.mi-filter-fields { flex: 1 1 460px; }
.mi-filter-acts { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; }
.mi-filter-acts .mi-sync-note { margin-right: 2px; white-space: nowrap; }
@media (max-width: 900px) {
  /* Below this the two groups always stack, so the actions align left with
     everything else rather than hanging off the right edge alone. */
  .mi-filter-fields { flex: 1 1 100%; }
  .mi-filter-acts { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
}

/* ---------- a filter is a label AND its control, as one unit ----------
   As loose siblings, flex wrapped between a caption and its own select:
   "OBJECTIVE" ended one line and its dropdown began the next, reading as
   two broken things instead of one field. Wrapping now happens BETWEEN
   fields and never inside one. */
.mi-field {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 1 auto; min-width: 0; max-width: 100%; cursor: pointer;
}
/* The caption never wraps or shrinks; the control gives up the width. */
.mi-field > .mi-filter-l { flex: 0 0 auto; white-space: nowrap; }
.mi-field .mi-sel, .mi-field .mi-search { min-width: 0; }
/* A date range is one field: two inputs with their connector between. */
.mi-field .mi-filter-l { margin: 0; }

/* ---------- the row-number column ----------
   A reference for "the third one down", not data to read alongside the
   rest — so it is narrow, right-aligned and faint, and never competes with
   the figures beside it. */
.mi-sr-th { width: 38px; color: var(--mi-faint) !important; }
.mi-sr { color: var(--mi-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ============================================================
   DATE RANGE PICKER
   ------------------------------------------------------------
   Presets down the left, two months side by side, typed dates underneath —
   the shape people already know from Ads Manager, in this app's palette
   rather than Facebook blue.
   ============================================================ */

/* the control that opens it: a select-shaped button, so it reads as a field */
.mi-dp-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 172px; text-align: left; font-family: 'Figtree', sans-serif;
}
.mi-dp-btn svg { flex-shrink: 0; color: var(--mi-mute); }
.mi-dp-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mi-dp {
  position: fixed; z-index: 120; background: #fff;
  border: 1px solid var(--mi-line); border-radius: 5px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
  font-size: 12px; color: #1A1A1A;
}
.mi-dp-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); }

/* ---------- presets ---------- */
.mi-dp-presets {
  border-right: 1px solid var(--mi-hair); padding: 8px 0;
  max-height: 420px; overflow-y: auto;
}
.mi-dp-preset {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 7px 14px; font-size: 12px; font-family: 'Figtree', sans-serif;
  color: #1A1A1A;
}
.mi-dp-preset:hover { background: #FCFBF7; }
/* A radio, drawn rather than an <input>, so the whole row is the target. */
.mi-dp-preset i {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--mi-line); background: #fff; position: relative;
}
.mi-dp-preset.on i { border-color: var(--mi-gold); }
.mi-dp-preset.on i::after {
  content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--mi-gold);
}
.mi-dp-preset.on { color: #8A6B30; font-weight: 500; }
.mi-dp-preset:disabled { cursor: default; color: var(--mi-faint); }
.mi-dp-preset:disabled:hover { background: none; }

/* ---------- calendars ---------- */
.mi-dp-cals { padding: 12px 16px 14px; min-width: 0; }
.mi-dp-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mi-dp-arrow {
  background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--mi-mute); flex-shrink: 0;
}
.mi-dp-arrow:hover { background: var(--mi-hair); color: #000; }
.mi-dp-months { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mi-dp-mlabel { text-align: center; font-size: 12.5px; font-weight: 500; color: #000; }

.mi-dp-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mi-dp-grid { min-width: 0; }
.mi-dp-dow, .mi-dp-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.mi-dp-dow span {
  text-align: center; font-size: 9.5px; color: var(--mi-mute);
  padding-bottom: 5px; letter-spacing: .2px;
}
.mi-dp-d {
  height: 30px; border: none; background: none; cursor: pointer;
  font-size: 11.5px; font-family: 'Figtree', sans-serif; color: #1A1A1A;
  font-variant-numeric: tabular-nums; padding: 0;
}
.mi-dp-d.out { cursor: default; }
/* Hover must not out-rank the selection — :hover otherwise wins on specificity
   and a hovered range end reads as unselected. */
.mi-dp-d:not(.out):not(.start):not(.end):hover { background: var(--mi-hair); }
/* The range: ends solid, middle tinted — so a range reads as one shape. */
.mi-dp-d.mid { background: #F3EFE6; }
.mi-dp-d.start, .mi-dp-d.end {
  background: var(--mi-gold); color: #000; font-weight: 600;
}
.mi-dp-d.start { border-radius: 3px 0 0 3px; }
.mi-dp-d.end { border-radius: 0 3px 3px 0; }
.mi-dp-d.start.end { border-radius: 3px; }
/* Today is marked even when it is not in the range — it is the reference
   point for every "last N days" preset. */
.mi-dp-d.today { box-shadow: inset 0 -2px 0 var(--mi-s1); }
.mi-dp-d.today.start, .mi-dp-d.today.end { box-shadow: none; }

/* ---------- typed dates, note, footer ---------- */
.mi-dp-inputs {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mi-hair);
}
.mi-dp-note {
  margin-top: 10px; padding: 9px 11px; border-radius: 4px;
  background: #F4F8FC; border: 1px solid #CDDDEE; color: #1B4A7E;
  font-size: 10.5px; line-height: 1.55;
}
.mi-dp-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mi-hair);
}
.mi-dp-sum { flex: 1; font-size: 11.5px; color: var(--mi-mute); min-width: 0; }

@media (max-width: 780px) {
  /* On a narrow screen the presets go above, and one month at a time is all
     that fits — the second calendar would be off-screen. */
  .mi-dp { left: 8px !important; right: 8px; }
  .mi-dp-body { grid-template-columns: minmax(0, 1fr); }
  .mi-dp-presets {
    border-right: none; border-bottom: 1px solid var(--mi-hair);
    max-height: 168px; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px;
  }
  .mi-dp-preset { width: auto; padding: 6px 10px; }
  .mi-dp-months, .mi-dp-grids { grid-template-columns: 1fr; }
  .mi-dp-months > :last-child, .mi-dp-grids > :last-child { display: none; }
}

@media print { .mi-dp { display: none !important; } }

/* The share-of-spend bar in a report roll-up. ONE meaning: length is the
   share of the biggest spender here. It used to reuse .mi-budget-bar, whose
   .over variant turns red — so a row ₹400 over on ₹2.02 L came out red with
   nothing on screen to explain it, while the bar length meant something else
   entirely. Over-budget is marked on the Spent column now. */
.mi-rep-bar {
  height: 3px; background: var(--mi-hair); border-radius: 2px;
  margin-top: 6px; overflow: hidden; max-width: 130px;
}
.mi-rep-bar i { display: block; height: 100%; border-radius: 2px; background: var(--mi-s1); }

/* ---------- totals row ----------
   In a <tfoot>, so each total sits UNDER the column it totals: you read down
   a column to its total instead of matching prose to headers by eye. Sticky
   to the bottom of a scrolling table, because a total you have to scroll to
   find is a total you will not read. */
.mi-tfoot > td {
  position: sticky; bottom: 0; z-index: 2;
  background: #FCFBF7; border-top: 1.5px solid var(--mi-line);
  border-bottom: none; padding: 11px 12px 12px;
}
.mi-tfoot b { font-weight: 600; color: #000; font-variant-numeric: tabular-nums; }
.mi-tfoot-l {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #8A6B30;
  font-weight: 600;
}
.mi-tfoot-s { font-size: 10px; color: var(--mi-mute); margin-top: 3px; font-weight: 400; }
/* On paper it is just the last row — nothing to stick to. */
@media print { .mi-tfoot > td { position: static; } }

/* ============================================================
   BILLING — the month control and the month-by-month strip
   ------------------------------------------------------------
   The billing month is a MONTH, not a date range. A native
   <input type="month"> is used rather than the app's own range picker for
   exactly that reason: the picker can express "3–17 September", and there is
   no such thing as a 15-day billing tenure on this screen. A control that
   cannot say the wrong thing is better than a label asking people not to.

   The two arrows either side are what the control is actually used for —
   stepping back a month to look at what was billed last time — and they sit
   flush against the field so the three read as one control.
   ============================================================ */
.mi-billnav { display: inline-flex; align-items: stretch; gap: 4px; }
.mi-billnav .mi-mini { padding: 0 9px; font-size: 14px; line-height: 1; min-width: 26px; justify-content: center; }
.mi-billmonth {
  font-variant-numeric: tabular-nums;
  /* Wide enough for "September 2026" in every browser's own rendering of the
     month field, which differs between them. */
  min-width: 142px;
}

/* The row of the month strip that is currently open, marked so the strip and
   the summary above it are visibly the same month. A left border rather than a
   background tint: the strip's numbers stay on the same white as every other
   table, and nothing relies on colour alone — the cell also says "on screen". */
.mi-tbl tbody tr.mi-row-click.on > td { background: var(--mi-cream); }
.mi-tbl tbody tr.mi-row-click.on > td:first-child { box-shadow: inset 2px 0 0 var(--mi-gold); }

/* Print: the month control, the arrows and the action buttons are all things
   you cannot press on paper. The filter bar already carries .mi-noprint, and
   this keeps the strip's pointer affordance off the page too. */
@media print {
  .mi-tbl tbody tr.mi-row-click { cursor: default; }
}

/* ============================================================
   PAGER — under the campaigns table
   ------------------------------------------------------------
   The campaign list is one account's whole history (157 and counting), and a
   single table that long is unreadable and slow to paint. Paging it is a
   DISPLAY change only: the totals row, the export and the bulk tag all still
   cover every filtered campaign, and the count on the left says so in numbers
   ("Showing 1–25 of 157") rather than leaving you to infer it.

   Windowed page numbers — first two, an ellipsis, the pages either side of
   where you are, then the last two — so the control is the same width at 3
   pages as at 300 and never wraps the table out of shape.

   Not printed: a page button on paper is a dead control, and a printed report
   should carry the whole table anyway.
   ============================================================ */
.mi-pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--mi-hair);
}
.mi-pg-n { font-size: 11.5px; color: var(--mi-mute); }
.mi-pg-n b { color: var(--mi-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mi-pg-b {
  min-width: 32px; height: 30px; padding: 0 9px;
  border: 1px solid var(--mi-line); border-radius: 6px; background: #fff;
  color: #4A4A4A; font-size: 12px; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.mi-pg-b:hover:not(:disabled) { background: var(--mi-cream); border-color: var(--mi-gold); }
/* The current page carries weight and a border as well as the fill, so it is
   still identifiable without colour. */
.mi-pg-b.on {
  background: var(--mi-gold); border-color: var(--mi-gold);
  color: #000; font-weight: 600;
}
.mi-pg-b:disabled { opacity: .4; cursor: not-allowed; }
.mi-pg-gap { padding: 0 2px; color: var(--mi-faint); font-size: 12px; }
.mi-pg-size { height: 30px; padding: 0 8px; font-size: 11.5px; }

@media (max-width: 900px) {
  /* The count goes on its own line rather than squeezing the buttons. */
  .mi-pager { justify-content: center; }
  .mi-pg-n { width: 100%; text-align: center; }
  .mi-pager .mi-spacer { display: none; }
}
@media print { .mi-pager { display: none; } }