/*
 * 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;
}

.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;
}
.mcapi-log-ua {
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 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; }

.mcapi-table--log-detail th:nth-child(1) { width: 150px; }
.mcapi-table--log-detail th:nth-child(2) { width: 130px; }
.mcapi-table--log-detail th:nth-child(3) { width: 160px; }
.mcapi-table--log-detail th:nth-child(5) { width: 180px; }
.mcapi-table--log-detail th:nth-child(6) { width: 220px; }
.mcapi-table--log-detail td:nth-child(5) {
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
    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; }
.mcapi-table--blocked-detail th:nth-child(4) { width: 140px; }