/* MODEACC Merchants — Modernist design system. Tokens match modeacc.com's
   site palette (--ink/--ground/--acc), not the mockup's literal #ec3013,
   which was already darkened to #d02a11 site-wide for WCAG AA contrast. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #ffffff;
  --color-text: #201e1d;
  --color-accent: #d02a11;
  --color-divider: rgba(32,30,29,0.4);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fbe7e3;
  --color-accent-200: #f6c9c0;
  --color-accent-700: #8f1d0c;
  --color-accent-800: #6b1508;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
}

*, *::before, *::after { box-sizing: border-box; }
/* !important on body/headings: guards against the AdminKit/Bootstrap
   compatibility bundle, which reset `body` and `h1..h6` by bare tag selector
   too — same specificity, later in the cascade, so it silently won ties and
   every migrated page inherited Bootstrap's Inter/grey instead of
   Archivo/near-black. That bundle was deleted in September (no page had
   loaded it for a while); these declarations are kept as-is because dropping
   them is a restyling job, not a cleanup. */
body { margin: 0; background: var(--color-bg) !important; color: var(--color-text) !important; font-family: var(--font-body) !important; font-size: 15px; line-height: 1.55; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) !important; font-weight: 800 !important; color: var(--color-text) !important; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 8px; }
h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 12px; }
/* No !important here: many <a> elements in this codebase are buttons/nav-items/
   toggles with their own inline color (e.g. white text on a black active-state
   pill) — forcing accent-red on every anchor would stomp those on purpose-set
   elements. A bare content link falling back to Bootstrap's red is the much
   smaller, rarer cost. */
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
.text-muted { color: rgba(32,30,29,0.6); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.hr { height: 2px; border: 0; margin: 16px 0; background: var(--color-divider); }

/* !important throughout: this class name collided with the AdminKit/Bootstrap
   compatibility bundle, whose own .btn rule won ties on load order and silently
   reverted every button on migrated pages to Inter/400/rounded/Bootstrap-red.
   That bundle is gone (see the note on body above); kept for the same reason. */
.btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  cursor: pointer; text-decoration: none !important;
  font-family: var(--font-heading) !important; font-weight: 800 !important; font-size: 14px !important;
  color: var(--color-text) !important; background: transparent !important; border: 1px solid transparent !important;
  padding: 8px 14px !important; border-radius: 0 !important; box-shadow: none !important; white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 6px 11px !important; font-size: 12px !important; }
.btn-primary { background: var(--color-accent) !important; color: #fff !important; }
.btn-primary:hover { background: #b52309 !important; }
.btn-secondary { border-color: var(--color-text) !important; color: var(--color-text) !important; }
.btn-secondary:hover { background: rgba(32,30,29,0.06) !important; }
.btn-ghost { color: var(--color-accent) !important; border-color: transparent !important; padding-inline: 4px !important; }
.btn-ghost:hover { background: rgba(208,42,17,0.08) !important; }
.btn-icon { width: 36px !important; height: 36px !important; padding: 0 !important; border: 1px solid var(--color-divider) !important; }
.btn-danger { color: var(--color-accent) !important; border-color: var(--color-accent) !important; }

.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: rgba(32,30,29,0.7); }
.input, select.input, textarea.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); background: #fff; border: 1px solid var(--color-divider); border-radius: 0;
}
.input:hover { border-color: rgba(32,30,29,0.6); }
.input:focus-visible { border-color: var(--color-accent); }
textarea.input { min-height: 90px; resize: vertical; }
select.input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23201e1d' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px 7px;
}
select.input[hidden] { background-image: none; }

.card { display: flex !important; flex-direction: column !important; gap: 8px; padding: 20px; background: #fff !important; border: 2px solid var(--color-divider) !important; }
.card-kicker { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; }
.card-title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; }

.tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0; white-space: nowrap; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 2px solid var(--color-accent); color: var(--color-accent); background: none; }
.tag-success { background: #e3f3e5; color: #1f6b2b; }
.tag-warning { background: #fdf1d6; color: #8a5a00; }
.tag-danger { background: var(--color-accent-100); color: var(--color-accent-800); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* !important: Bootstrap's `.table > :not(caption) > * > *` descendant selector
   outranks a plain `.table th`/`.table td` on specificity alone (not just load
   order), so its own padding/border silently wins without this. */
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(32,30,29,0.6) !important; font-weight: 700 !important; padding: 8px !important; border-bottom: 2px solid var(--color-divider) !important; }
.table td { padding: 8px !important; border-bottom: 1px solid var(--color-divider) !important; vertical-align: middle; color: var(--color-text) !important; }
.table tbody tr:hover { background: rgba(32,30,29,0.03); }

/* Stat-card rows sit inside a container with border:2px solid var(--color-divider);
   each card only adds a right divider (mockup pattern) — no card has its own box. */
.stat-card { padding: 22px; border-right: 2px solid var(--color-divider); display: flex; flex-direction: column; gap: 8px; }
.stat-card:last-child { border-right: 0; }
.stat-card .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(32,30,29,0.6); font-weight: 700; }
.stat-card .v { font-family: var(--font-heading); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; }
.stat-card .d { font-size: 12px; color: rgba(32,30,29,0.6); }

.badge-dot { width: 8px; height: 8px; background: var(--color-accent); display: inline-block; flex: none; }

.grayscale { filter: grayscale(1) contrast(1.08); }

/* Anti-spam honeypot field (config/security.php honeypot_field()) — must stay
   invisible to real users but present in the DOM for bots to fill in. */
.hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The [hidden] attribute is only display:none via the UA stylesheet, which loses to
   any inline display:flex/grid set on the same element (e.g. wizard step panels) —
   force it to always win so toggling .hidden in JS actually hides the element. */
[hidden] { display: none !important; }