/* Marketing app (mkt-*): tokens from admin.css only, logical properties, light + dark through the tokens, phone first at 375 px.
   The cards / KPIs / "How this works" box are the shared brand kit (bk-*) of public/css/orders.css. */

/* ------------------------------------------------------------ page chrome */
.mkt-page { min-width: 0; }
.mkt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mkt-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mkt-range .date-pair { display: inline-flex; align-items: center; gap: 6px; }
.mkt-body { display: grid; gap: 16px; min-width: 0; align-content: start; }
.mkt-body > * { min-width: 0; }
.mkt-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mkt-selall { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 650; }
.mkt-selall input, .mkt-sel input { width: 20px; height: 20px; accent-color: var(--accent); }
.mkt-list-wrap[hidden], .mkt-board[hidden] { display: none; }
.mkt-sort { display: inline-flex; align-items: center; gap: 6px; }
.mkt-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 650; }
.warnink { color: var(--warn-ink); }
.mkt-summary { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 4px 14px 10px; color: var(--muted); }
.mkt-summary b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ dashboard */
.mkt-page .donut-wrap { justify-content: flex-start; }
.mkt-page .legend-col { min-width: 0; flex: 1 1 180px; }
.mkt-page .lg-row { min-width: 0; }
.mkt-page .lg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-row.mkt-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.mkt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mkt-list > li { display: grid; gap: 4px; min-width: 0; }
.mkt-li-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.mkt-li-name { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }

/* budget bar */
.mkt-bar { display: grid; gap: 4px; min-width: 0; }
.mkt-bar + .kv-list { margin-top: 10px; }
.mkt-bar-track { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.mkt-bar-track > i { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.mkt-bar.near .mkt-bar-track > i { background: var(--warn); }
.mkt-bar.over .mkt-bar-track > i { background: var(--danger); }
.mkt-bar.over .mkt-bar-txt { color: var(--danger-ink); font-weight: 650; }
.mkt-bar.near .mkt-bar-txt { color: var(--warn-ink); }
.mkt-bar-txt { color: var(--muted); }

/* ------------------------------------------------------------ lists */
.mkt-c-main .mkt-main > b:first-child, .mkt-c-main .mkt-main > div > a { white-space: nowrap; }
.mkt-main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.mkt-phone { display: none; }
.mkt-spendline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; font-variant-numeric: tabular-nums; }
.mkt-c-bar { min-width: 190px; }
.mkt-c-camp { min-width: 200px; }
.mkt-c-act { white-space: nowrap; text-align: end; }
.mkt-acts { display: inline-flex; gap: 6px; justify-content: flex-end; }
.mkt-camp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mkt-sel { display: grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.mkt-c-sel { width: 44px; padding-inline-end: 0 !important; }
.mkt-card { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.mkt-board .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mkt-bulk { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.mkt-bulk[hidden] { display: none; }
.mkt-balance { display: flex; align-items: center; gap: 14px; }
.mkt-balance .kpi-ico { width: 44px; height: 44px; border-radius: 12px; }
.mkt-balance-n { font-size: 26px; font-variant-numeric: tabular-nums; }
.mkt-dlg-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mkt-sums { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel-2); }
.mkt-sums dd { font-variant-numeric: tabular-nums; }
.modal .mkt-sums + .field, .modal .field + .mkt-sums, .modal .help + .field { margin-top: 12px; }
.modal .field + .field, .modal .field + .bk-two, .modal .bk-two + .field, .modal .field + div > .field { margin-top: 12px; }

/* ------------------------------------------------------------ campaign page */
.mkt-prods { display: grid; gap: 8px; min-width: 0; }
.mkt-linkbox { display: grid; gap: 4px; min-width: 0; flex: 1; }
.mkt-link { display: block; padding: 8px 10px; border-radius: 8px; background: var(--panel-3); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; unicode-bidi: isolate; text-align: start; }
.bk-note:has(.mkt-linkbox) { align-items: center; margin-top: 14px; flex-wrap: wrap; }
.mkt-more { margin-top: 10px; }
.kv-list dd .badge, .kv-list dd .link { vertical-align: middle; }

/* ------------------------------------------------------------ profit tables */
.mkt-formula { margin: 0; }
.mkt-formula-list { margin: 10px 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.5; }
.mkt-recon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mkt-recon .badge .ico { margin-inline-end: 2px; }
@media (min-width: 721px) and (max-width: 1180px) { .mkt-pt .mkt-minor { display: none; } }
.mkt-pt th { white-space: normal; vertical-align: bottom; min-width: 84px; }
.mkt-pt th:first-child { min-width: 160px; }
.mkt-pt td.num { font-variant-numeric: tabular-nums; }
.mkt-pt tr.mkt-un td { background: var(--panel-2); color: var(--muted); }
.mkt-pt tr.mkt-un td b { color: var(--ink); }
.mkt-pt tfoot td { font-weight: 800; border-top: 2px solid var(--line); background: var(--panel-2); }
@media (min-width: 721px) {
  .mkt-pt th:first-child, .mkt-pt td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--line-2); }
  .mkt-pt tr.mkt-un td:first-child, .mkt-pt tfoot td:first-child { background: var(--panel-2); }
}
.mkt-pt .sort-ind { margin-inline-start: 4px; color: var(--muted); }

/* ------------------------------------------------------------ courier fee rules */
.mkt-fees { display: grid; gap: 14px; }
.mkt-fees hr { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }
.mkt-fee-head, .mkt-fee-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(170px, 1.4fr) minmax(110px, 1fr) minmax(110px, 1fr) auto; gap: 10px; align-items: center; }
.mkt-fee-head { padding-inline: 4px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mkt-fee-rows { display: grid; gap: 8px; }
.mkt-fee-row { padding: 8px 4px; border-top: 1px solid var(--line-2); }
.mkt-fee-row.new { border-top: 0; }
.mkt-fee-row .field-error { grid-column: 1 / -1; }
.mkt-fc { display: grid; gap: 2px; min-width: 0; }
.mkt-fc select, .mkt-fc input { width: 100%; min-height: 40px; min-width: 0; }
.mkt-fl { display: none; }
.mkt-fc-act { display: flex; flex-direction: row; gap: 6px; justify-content: flex-end; align-items: center; }

/* ------------------------------------------------------------ order page chip */
.mkt-chip-body { display: grid; gap: 6px; justify-items: start; min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ phone */
@media (max-width: 720px) {
  .mkt-phone { display: grid; gap: 4px; margin-top: 6px; }
  .mkt-list-wrap .list-body .data-table td.mkt-c-main { display: block; text-align: start; }
  .mkt-list-wrap .list-body .data-table td.mkt-c-main[data-label]::before { content: none; }
  .mkt-list-wrap .list-body .data-table tr.row { position: relative; gap: 6px; padding: 14px; }
  .mkt-list-wrap .list-body .data-table td.mkt-c-sel { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; z-index: 1; width: auto; }
  .mkt-c-sel + .mkt-c-main .mkt-main { margin-inline-end: 44px; }
  .mkt-list-wrap .list-body .data-table td.mkt-c-act { display: flex; margin-top: 6px; justify-content: stretch; }
  .mkt-list-wrap .list-body .data-table td.mkt-c-act:not(:has(button, a)) { display: none; }
  .mkt-acts { display: flex; width: 100%; }
  :root:root .mkt-acts .btn { flex: 1; min-height: 48px; font-size: 15px; }
  .mkt-bulk { bottom: calc(var(--bn-h) + 8px); }
  :root:root .mkt-bulk .btn { flex: 1 1 auto; }
  .mkt-c-bar, .mkt-c-camp { min-width: 0; }
  .mkt-toolbar > *, .mkt-range { min-width: 0; }
  .mkt-range { width: 100%; }
  .mkt-range .date-pair { flex: 1 1 100%; min-width: 0; }   /* the two dates share the row: the text of a date was clipped by its calendar icon */
  .mkt-range .date-pair .date-in { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
  .mkt-sort { margin-inline-start: auto; }
  .mkt-pt-wrap .data-table td:first-child { width: 100%; }
  .mkt-pt-wrap .data-table td[data-label]:not(:first-child) { font-variant-numeric: tabular-nums; }
  .mkt-pt-wrap .data-table .num { white-space: normal; }
  .mkt-fee-head { display: none; }
  .mkt-fee-row { grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; background: var(--panel); }
  .mkt-fee-row .mkt-fc:nth-child(1), .mkt-fee-row .mkt-fc:nth-child(2), .mkt-fee-row .mkt-fc-act { grid-column: 1 / -1; }
  .mkt-fl { display: block; }
  .mkt-fc-act { justify-content: stretch; }
  :root:root .mkt-fc-act .btn { flex: 1; min-height: 44px; }
  .mkt-balance-n { font-size: 22px; }
  .kpi-row.mkt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root:root .mkt-chip .btn { min-height: 44px; }
}
@media (max-width: 900px) and (max-height: 520px) { .mkt-bulk { bottom: 8px; } }
@media (min-width: 721px) and (max-width: 900px) { .mkt-bulk { bottom: calc(var(--bn-h) + 8px); } }
:root:root .mkt-acts .btn { min-width: 44px; }