/*
 * CAPI Suite admin design system.
 *
 * Palette matches the WordPress admin color scheme (not a private palette) so
 * the plugin's screens read as part of wp-admin rather than a bolted-on UI.
 * Every color/spacing value used below is a custom property defined once on
 * .mcapi-wrap (the outer wrapper printed on every plugin admin screen) — to
 * change the palette or the spacing scale, edit the values here only.
 *
 * Spacing scale: 4 / 8 / 12 / 16 / 24px. Type: 13px base (wp-admin's own),
 * 12px for help/meta text. Headings (h1/h2/h3) are left to .wrap's defaults.
 */
.mcapi-wrap {
    --mcapi-primary: #2271b1;
    --mcapi-text: #1d2327;
    --mcapi-text-secondary: #646970;
    --mcapi-border: #dcdcde;
    --mcapi-surface: #f6f7f7;
    --mcapi-success: #00a32a;
    --mcapi-error: #d63638;
    --mcapi-warning: #dba617;

    --mcapi-space-xs: 4px;
    --mcapi-space-sm: 8px;
    --mcapi-space-md: 12px;
    --mcapi-space-lg: 16px;
    --mcapi-space-xl: 24px;

    font-size: 13px;
}

/* WordPress sizes paragraphs inside a settings table at 14px (.form-table td p in core's
   forms.css) while plain markup elsewhere on the page inherits 13px. Half this plugin's
   explanatory text sits inside settings fields and half is written as ordinary markup, so
   without this the same kind of sentence changes size as the merchant moves between tabs.
   One size for every description; field labels in the left column keep core's larger size
   because they are titles, not prose. */
.mcapi-wrap .form-table td p,
.mcapi-wrap .form-table td p.description {
    font-size: 13px;
}

.mcapi-tab-content {
    display: none;
    margin-top: var(--mcapi-space-lg);
}

.nav-tab-wrapper .nav-tab-active {
    background-color: #f0f0f1;
    border-bottom-color: #f0f0f1;
}

/* ---------- Panel: bordered surface used for status/summary blocks ---------- */
.mcapi-panel {
    background: var(--mcapi-surface);
    border: 1px solid var(--mcapi-border);
    border-radius: 4px;
    padding: var(--mcapi-space-md) var(--mcapi-space-lg);
    margin: 0 0 var(--mcapi-space-lg);
}
/* Colored left rule for panels that need to draw the eye (info/ok/warn/error). */
.mcapi-panel--accent { border-left: 4px solid var(--mcapi-primary); }
.mcapi-panel--ok     { border-left: 4px solid var(--mcapi-success); }
.mcapi-panel--warn    { border-left: 4px solid var(--mcapi-warning); }
.mcapi-panel--error   { border-left: 4px solid var(--mcapi-error); }

.mcapi-panel__title {
    margin: 0 0 var(--mcapi-space-sm) 0;
}

/* ---------- Grid: compact checkbox layouts (event list, order statuses) ---------- */
.mcapi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--mcapi-space-sm) var(--mcapi-space-xl);
    max-width: 900px;
}
.mcapi-grid--narrow { max-width: 760px; }

/* One label+checkbox row, used both inside .mcapi-grid and standalone
   (e.g. the Active source list toggles, which aren't in a grid). */
.mcapi-checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--mcapi-space-sm);
    padding: 2px 0;
}

/* ---------- Badge: status pill / colored indicator ---------- */
.mcapi-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}
/* Color modifiers carry only color/background/border so they can also be
   layered onto a WP .button (which already supplies shape/padding) without
   fighting it — used both on bare .mcapi-badge pills and on disabled buttons
   that are functioning as status indicators. */
.mcapi-badge--success {
    background: color-mix(in srgb, var(--mcapi-success) 12%, #fff);
    color: var(--mcapi-success);
}
.mcapi-badge--error {
    background: color-mix(in srgb, var(--mcapi-error) 12%, #fff);
    color: var(--mcapi-error);
}
.mcapi-badge--warning {
    background: color-mix(in srgb, var(--mcapi-warning) 18%, #fff);
    color: var(--mcapi-warning);
    border: 1px solid var(--mcapi-warning);
}
.mcapi-badge--muted {
    background: var(--mcapi-surface);
    color: var(--mcapi-text-secondary);
    border: 1px solid var(--mcapi-border);
}

/* Legacy Event Log status labels — same shape as .mcapi-badge, kept as their
   own classes because they're generated with a fixed class name (not the
   generic .mcapi-badge markup) elsewhere in the log table. Colors are the
   admin palette instead of the old Bootstrap green/red. */
.mcapi-log-status-success {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--mcapi-success) 12%, #fff);
    color: var(--mcapi-success);
}
.mcapi-log-status-failed {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--mcapi-error) 12%, #fff);
    color: var(--mcapi-error);
}

/* ---------- Help: small secondary-color text under a field/panel ---------- */
.mcapi-help {
    margin: 0 0 var(--mcapi-space-md);
    font-size: 12px;
    color: var(--mcapi-text-secondary);
}
.mcapi-help--error { color: var(--mcapi-error); }
/* Sits next to a control instead of stacking under one (e.g. the view-toggle
   explainer beside the Detail/By IP buttons). */
.mcapi-help--inline { margin: 0 0 0 var(--mcapi-space-md); }

/* ---------- Details: collapsible disclosure for secondary copy ----------
   Holds the longer explanation behind a short visible sentence — used instead of a
   hover tooltip, which is unreachable on touch devices and too small for more than a
   few words. See mcapi_render_disclosure() in easy-meta-capi.php. */
.mcapi-details {
    margin: 0 0 var(--mcapi-space-md);
}
.mcapi-details > summary {
    cursor: pointer;
    color: var(--mcapi-primary);
    font-size: 12px;
}
.mcapi-details[open] > summary {
    margin-bottom: var(--mcapi-space-xs);
}
.mcapi-details .mcapi-help {
    margin: var(--mcapi-space-xs) 0 0;
}

/* ---------- Filters: toolbar row of form controls ---------- */
.mcapi-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mcapi-space-sm);
    margin: var(--mcapi-space-md) 0;
}
/* No gap — used where adjacent .button elements are meant to visually fuse
   (see the Detail view / By IP button pair, -1px margin trick). */
.mcapi-filters--flush { gap: 0; }

/* A <form> or <div> that must stay inline with siblings (e.g. two small
   per-row action forms in the same table cell) instead of stacking as block
   elements, with no extra margin of its own. */
.mcapi-inline-form {
    display: inline;
    margin: 0;
}
/* Inline (not wrapping, not full-width) flex row — icon + code + form group
   inside a single table cell. */
.mcapi-inline-flex {
    display: inline-flex;
    align-items: center;
    gap: var(--mcapi-space-sm);
}
/* Compact WP submit-button indent so it lines up with form-table's ~200px
   label column. 200px matches that WP core layout constant, not our 4/8/12/
   16/24 spacing scale, so it is intentionally not one of those tokens. */
.mcapi-indent-label { padding-left: 200px; }
/* Small square-ish button holding a single emoji/icon and no label text. */
.mcapi-icon-button { padding: 0 6px; line-height: 1.5; }

/* ---------- Stat: prominent one-line count/summary text ---------- */
.mcapi-stat {
    margin: var(--mcapi-space-sm) 0 var(--mcapi-space-md);
}

/* ---------- Code list: monospace technical values (IP/CIDR/UA) ---------- */
.mcapi-code-list {
    font-family: monospace;
    font-size: 12px;
}
.mcapi-code-list--truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcapi-code-list code,
code.mcapi-code-list {
    background: var(--mcapi-surface);
    padding: 2px 6px;
    border-radius: 3px;
}

.mcapi-log-response {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    /* Bounds the cell so a long unbroken response — a raw JSON error body, say — wraps
       instead of widening the column and the table past the viewport. Keep td:nth-child(5)
       below free of white-space declarations: it is more specific than this class and would
       override the wrapping set here. */
    max-width: 280px;
}
.mcapi-log-ua {
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Table width helpers below drop `table-layout: fixed` for this table, so a column
       with no explicit width would otherwise size itself to the full (unwrapped, thanks
       to white-space: nowrap above) user-agent string and blow the table out well past
       any reasonable viewport. This is the column's only defense once "fixed" is gone. */
    max-width: 220px;
}

/* ---------- Table width helpers ---------- */
/* Consistent bottom margin under every result/summary table on these
   screens, instead of a one-off value repeated (and drifting) per table. */
.mcapi-wrap table.widefat { margin-bottom: var(--mcapi-space-md); }
.mcapi-table-narrow { max-width: 760px; }

.mcapi-table-container {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
}

/* Per-table column widths, one block per table shape so a column width
   change is a one-line edit instead of an inline style hunted down in
   markup. Every table that lives inside .mcapi-table-container carries one
   of these modifier classes and declares all of its own fixed-width
   columns — do not add a bare ".mcapi-table-container .widefat th:nth-
   child(N)" rule here: with three tables of different shapes sharing that
   container class, a table-agnostic rule can only be wrong for at least
   one of them, and (being more specific than a single-class per-table
   selector) would silently win over the correct one. */
.mcapi-table--blocklist th:nth-child(1) { width: 60px; }
.mcapi-table--blocklist th:nth-child(3) { width: 140px; }
.mcapi-table--blocklist th:nth-child(4) { width: 140px; }
.mcapi-table--blocklist th:nth-child(5) { width: 100px; }
.mcapi-table--blocklist th:nth-child(6) { width: 160px; }

/* This table dropped table-layout: fixed (see the mcapi-table--log-detail rule in the
   markup) — under auto layout these widths are hints, not hard divisions, and the browser
   redistributes any shortfall/surplus across all columns to keep the table at 100% width.
   Time/Event Name/Identity Keys/IP are trimmed down from their old fixed-layout values to
   what their actual content needs, freeing room for Response — by far the widest-content
   column and the one this rework exists to stop starving. Status / Platform gets an explicit
   width too (it had none before): under auto layout it was the column auto-layout shrank
   first to make room, which wrapped its own two-word header onto two lines once the other
   five columns' hints add up to more than the table has, so it needs a floor of its own. */
.mcapi-table--log-detail th:nth-child(1) { width: 140px; }
.mcapi-table--log-detail th:nth-child(2) { width: 120px; }
.mcapi-table--log-detail th:nth-child(3) { width: 100px; }
.mcapi-table--log-detail th:nth-child(4) { width: 150px; }
.mcapi-table--log-detail th:nth-child(5) { width: 280px; }
.mcapi-table--log-detail th:nth-child(6) { width: 150px; }
.mcapi-table--log-detail td:nth-child(5) {
    font-family: monospace;
    font-size: 12px;
    padding-right: 14px;
}

.mcapi-table--log-byip th:nth-child(1) { width: 180px; }
.mcapi-table--log-byip th:nth-child(2) { width: 90px; }
.mcapi-table--log-byip th:nth-child(4) { width: 220px; }
.mcapi-table--log-byip th:nth-child(5) { width: 100px; }
.mcapi-table--log-byip td:nth-child(4) { font-size: 12px; }

.mcapi-table--blocked-detail th:nth-child(1) { width: 160px; }
.mcapi-table--blocked-detail th:nth-child(2) { width: 140px; }
.mcapi-table--blocked-detail th:nth-child(3) { width: 140px; }

/* ---------- Health tab ----------
   The screen reads top to bottom as one argument: a verdict, the evidence for it, then what
   would improve it. Each block below is drawn so a merchant can tell which of those three they
   are looking at without reading a word of it.

   The status line is the verdict, and it is the only thing on the screen drawn in a status
   colour, so the colour means one thing. It reuses .mcapi-panel's bordered surface and adds the
   coloured left rule the .mcapi-panel--ok/warn/error modifiers already establish, keyed on the
   level mcapi_delivery_status() returns rather than on a class the template picks. */
/* When the figures were taken, and the control that takes them again. Drawn on one line and in
   the muted description colour: it is a note about the screen rather than one of the screen's own
   statements, and giving it the weight of the verdict beneath it would read as a finding. */
/* When the figures were taken. A stored reading stays until the button replaces it, so this line
   is the only thing between a merchant and a week-old figure read as this morning's — it is not a
   caption any more and it is not styled like one. Its own panel, at the top of the screen, with
   the button that replaces it sitting inside the same box. */
.mcapi-health-taken {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mcapi-space-md);
    flex-wrap: wrap;
    padding: var(--mcapi-space-sm) var(--mcapi-space-md);
    border-left: 4px solid var(--mcapi-primary);
}
.mcapi-health-taken-when {
    color: var(--mcapi-text);
    font-weight: 600;
}
/* A store nobody has read yet. Amber, because the screen below it is empty and the merchant needs
   to know that is an absence rather than a result. */
.mcapi-health-taken--never {
    border-left-color: var(--mcapi-warning);
}
.mcapi-health-refresh {
    display: inline-block;
    margin: 0;
}

.mcapi-health-status {
    border-left: 4px solid var(--mcapi-primary);
}
.mcapi-health-status--ok      { border-left-color: var(--mcapi-success); }
.mcapi-health-status--warning { border-left-color: var(--mcapi-warning); }
/* Our own sending is keeping up, but the site's background queue is behind and our job waits in
   it — the same amber as a queue building, because it is the same delay reaching the merchant. */
.mcapi-health-status--late    { border-left-color: var(--mcapi-warning); }
.mcapi-health-status--error   { border-left-color: var(--mcapi-error); }
.mcapi-health-status--idle    { border-left-color: var(--mcapi-primary); }

/* Section titles. The screen has four blocks now rather than one, and without a rule above each
   heading the figures and the action list run together into the single undifferentiated wall
   this rework exists to break up. */
/* Section separators. WordPress prints a settings section as a bare <h2> and then its table,
   with nothing between one section and the next, so Meta / TikTok / Pinterest credentials, the
   product identifier and the privacy settings all run together as one wall of fields. The rule
   above each heading is what tells the merchant where one subject ends and the next begins.
   h2 only: panel titles and log headings are h3 and carry their own framing already. */
.mcapi-tab-content h2,
.mcapi-health-section-title {
    margin: var(--mcapi-space-xl) 0 var(--mcapi-space-sm);
    padding-top: var(--mcapi-space-md);
    border-top: 1px solid var(--mcapi-border);
}

/* The figures block and the per-platform delivery lines. Both are lists of plain statements
   rather than recommendations, so neither carries the action list's disc marker: a bullet in
   front of "Events sent to Meta: 1,204" reads as something to do. */
.mcapi-health-figures,
.mcapi-health-delivery-list {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.8;
}
.mcapi-health-delivery-list .mcapi-health-delivery {
    margin: 0 0 var(--mcapi-space-xs);
}
.mcapi-health-delivery--failed {
    color: var(--mcapi-error);
}

/* Header metrics (score / revenue / events): a label and its value sit in separate <span>s
   with nothing but whitespace between them in the markup, which reads on screen as one run-on
   phrase ("Events, last 24 hours 0"). A generated ::after colon plus a bold value gives every
   metric a real separator without touching the translated label strings or the markup that
   produces them. */
.mcapi-health-metric-label::after {
    content: ": ";
}
.mcapi-health-metric-value {
    font-weight: 600;
}

/* The score, which is no longer a headline. It sits under the improvement list, set apart on the
   plain surface rather than given a status colour of its own — a coloured rule beside a figure
   out of ten is exactly the report card the move away from the top of the screen was for. */
.mcapi-health-score {
    margin-top: var(--mcapi-space-lg);
    padding: var(--mcapi-space-md) var(--mcapi-space-lg);
    background: var(--mcapi-surface);
    border: 1px solid var(--mcapi-border);
    border-radius: 4px;
}
.mcapi-health-score > .mcapi-help {
    margin-top: 0;
}

/* Action lists inside a triage band: an explicit marker and per-item spacing make two (or
   more) actions read as distinct recommendations, matching the band header's own count (e.g.
   "Keeping your figures accurate (2 things to fix)"), regardless of any other list styling
   elsewhere on the page. */
.mcapi-health-action-list {
    list-style: disc;
    margin: 0 0 0 var(--mcapi-space-xl);
    padding: 0;
}
.mcapi-health-action-list .mcapi-health-action {
    margin: 0 0 var(--mcapi-space-sm);
}
.mcapi-health-action-list .mcapi-health-action:last-child {
    margin-bottom: 0;
}

/* The checklist block: conditions held in the merchant's advertising account, which this site
   cannot read and therefore cannot have measured. It sits outside the triage bands and is drawn
   differently on purpose — its own heading above a dashed rule, rather than the bands' collapsed
   summary — so a reader can tell at a glance that these were not checked for them. Its list keeps
   the bands' marker rule, because a checklist with three entries still has to read as three. */
.mcapi-health-checklist {
    margin-top: var(--mcapi-space-lg);
    padding-top: var(--mcapi-space-md);
    border-top: 1px dashed var(--mcapi-border);
}
.mcapi-health-checklist-title {
    margin: 0 0 var(--mcapi-space-xs);
}
.mcapi-health-checklist-list {
    list-style: square;
    margin: var(--mcapi-space-sm) 0 0 var(--mcapi-space-xl);
    padding: 0;
}
.mcapi-health-checklist-list .mcapi-health-checklist-item {
    margin: 0 0 var(--mcapi-space-sm);
}
.mcapi-health-checklist-list .mcapi-health-checklist-item:last-child {
    margin-bottom: 0;
}
.mcapi-table--blocked-detail th:nth-child(4) { width: 140px; }