/*
 * Zeemarq portal + auth brand override.
 *
 * Neutralises the legacy admin-template purple (#5E17EB / #5D5CDE / lavender
 * tints / purple gradients) that survives in the hand-committed
 * public/backend/assets/css/style.css and table-style.css. Those stylesheets
 * are vendored compiled artifacts with the primary hardcoded ~400+ times and
 * no CSS custom property to flip, so this file redeclares the affected
 * selectors at matching specificity and is LOADED LAST on the two surfaces
 * that consume the legacy theme:
 *   - resources/views/layouts/header.blade.php   (merchant portal chrome)
 *   - resources/views/auth/auth_layout.blade.php (auth shell)
 *
 * Mapping, per the brand contract (§18 / §19):
 *   - primary ACTION  -> Copper-700 (#9A5430; a Bone label clears WCAG AA on it)
 *   - links / active nav / tabs / pagination -> Navy + Navy tints
 *   - lavender surfaces & purple gradients -> flat Bone-tinted (no gradients, §19)
 *   - copper stays the single seam: only the primary action is copper, never links/tabs.
 *
 * The rebranded .zmq-portal-v2 chrome uses bespoke .zmq-portal-v2__* classes
 * and is NOT affected by these legacy-selector overrides.
 */

/* — Text links (legacy `a { color: #5E17EB }`) — */
a { color: var(--zmq-navy); }
a:hover,
a:focus { color: var(--zmq-navy-700); }

/* — Bootstrap utility classes keyed off the template's purple primary — */
.text-primary { color: var(--zmq-navy) !important; }
.bg-primary { background-color: var(--zmq-navy) !important; }
.border-primary { border-color: var(--zmq-navy) !important; }
.link-primary { color: var(--zmq-navy) !important; }

/* — Primary action button -> the single Copper seam. Copper-700 for AA. — */
.btn-primary,
.btn-primary:focus {
    background-color: var(--zmq-copper-700);
    border-color: var(--zmq-copper-700);
    color: var(--zmq-bone);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    /* copper-700 hover, ~6:1 on Bone (documented in tokens.md) */
    background-color: #874A2A;
    border-color: #874A2A;
    color: var(--zmq-bone);
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--zmq-copper-700);
    border-color: var(--zmq-copper-700);
    color: var(--zmq-bone);
    opacity: 0.55;
}
.btn-outline-primary {
    color: var(--zmq-copper-700);
    border-color: var(--zmq-copper-700);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--zmq-copper-700);
    border-color: var(--zmq-copper-700);
    color: var(--zmq-bone);
}

/* — Soft secondary action button (table toolbars, e.g. "Download Reports").
     Legacy table-style.css paints it indigo #443DF6 on white; de-purple to
     Navy. It is a secondary action, so it stays Navy and never becomes the
     Copper seam. — */
.btn-soft-primary {
    color: var(--zmq-navy);
    background-color: transparent;
    border-color: transparent;
}
.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:active {
    color: var(--zmq-navy-700);
    background-color: var(--zmq-bone);
    border-color: var(--zmq-slate-200);
}

/* — Primary badge / pill — */
.badge.bg-primary,
.badge-primary {
    background-color: var(--zmq-navy) !important;
    color: var(--zmq-bone) !important;
}

/* — Tabs / pills active state -> Navy — */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-pills.navtab-bg .nav-link.active,
.nav-pills.flex-column .nav-link.active {
    background-color: var(--zmq-navy);
    color: var(--zmq-bone);
}
.nav-tabs .nav-link.active,
.nav-tabs.nav-bordered .nav-link.active,
.tabs-set .nav-tabs .nav-link.active,
.tabs-sets .nav-tabs .nav-link.active {
    color: var(--zmq-navy);
    border-bottom-color: var(--zmq-navy);
}

/* — Pagination (style.css + table-style.css both paint purple; the latter
     uses !important, so the active-page override matches it) -> Navy — */
.page-link { color: var(--zmq-navy); }
.page-link:hover { color: var(--zmq-navy-700); }
.pagination li.active a.page-link,
.pagination .page-item.active .page-link,
.page-item.active .page-link {
    background-color: var(--zmq-navy) !important;
    border-color: var(--zmq-navy) !important;
    color: var(--zmq-bone) !important;
}
.pagination .paginate_button.previous .page-link:hover,
.pagination .paginate_button.next .page-link:hover {
    color: var(--zmq-navy-700);
}

/* — Table header: flat Bone-tinted, Ink type, Slate hairline.
     Legacy was a purple gradient (`linear-gradient(... #5E17EB ...)`) — both
     the purple and the gradient violate §19. — */
.table thead,
.table thead th,
.table > :not(caption) > * > th,
.thead-light th {
    background: var(--zmq-bone-tinted);
    background-image: none;
    color: var(--zmq-ink);
    border-bottom: 1px solid var(--zmq-slate-200);
}

/* — Form check / radio / switch checked state (Bootstrap primary) -> Navy — */
.form-check-input:checked {
    background-color: var(--zmq-navy);
    border-color: var(--zmq-navy);
}
.form-check-input:focus {
    border-color: var(--zmq-navy-300);
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 95, 0.20);
}

/* — Dropdown / list-group active -> Navy — */
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active {
    background-color: var(--zmq-navy);
    border-color: var(--zmq-navy);
    color: var(--zmq-bone);
}

/* — Focus appearance on portal form controls + buttons -> the v2 Copper ring
     (CLAUDE.md §19). Bootstrap's default is a blue-tinted box-shadow. Scoped to
     the content wrapper `.page-wrapper` (present on both the merchant and the
     admin/staff content layouts, absent on the auth shell, which sets its own
     Copper ring inline) so the ring lands on both portals. Note: the admin
     <body> does not carry `.zmq-portal-v2`, so `.page-wrapper` is the only
     selector that reaches both surfaces. (#652 a11y finding 4) — */
.page-wrapper .form-control:focus-visible,
.page-wrapper .form-select:focus-visible,
.page-wrapper .btn:focus-visible {
    outline: 2px solid var(--zmq-copper);
    outline-offset: 2px;
    box-shadow: none;
}

/* — Inline alerts -> brand-tokenised. Bootstrap's default success/danger
     palettes (#d1e7dd / #f8d7da) don't map to Verdigris / Madder. Ink type on
     a Bone surface with a brand-colour border keeps WCAG AA and reads on-brand.
     Matches the auth shell's alert treatment. Scoped to `.page-wrapper` so it
     covers both portals (see note above). (#652 brand finding A1) — */
.page-wrapper .alert-success {
    background: var(--zmq-bone);
    border-color: var(--zmq-verdigris);
    color: var(--zmq-ink);
}
.page-wrapper .alert-danger {
    background: var(--zmq-bone);
    border-color: var(--zmq-madder);
    color: var(--zmq-ink);
}

/* — Muted helper text in the content area -> Slate-500. The legacy
     `.text-muted` resolves to #B5B5C3 (~1.96:1 on white, fails WCAG AA);
     Slate-500 clears 5.18:1. Scoped to .page-wrapper so it only touches page
     content (both portals), never a dark chrome surface. (#652 brand finding A3) — */
.page-wrapper .text-muted {
    color: var(--zmq-slate-500) !important;
}

/* — Status badge utilities -> brand system-state tokens. The vendored
     style.css hardcodes `.bg-success { background:#5E17EB !important }` (the
     legacy purple), so every `.badge.bg-success` across ~60 list views renders
     PURPLE, not green. Remap success -> Verdigris, and bring the Bootstrap
     danger/warning/info badges onto the palette too (Madder / Copper-700 /
     Navy). `.bg-success` is remapped globally to clear the purple wherever it
     lands; danger/warning/info are badge-scoped so non-badge utility uses keep
     readable defaults. !important is required to beat the template's. — */
.bg-success { background-color: var(--zmq-verdigris) !important; }
.badge.bg-success { color: #FFFFFF !important; }
.badge.bg-danger { background-color: var(--zmq-madder) !important; color: #FFFFFF !important; }
.badge.bg-warning { background-color: var(--zmq-copper-700) !important; color: #FFFFFF !important; }
.badge.bg-info { background-color: var(--zmq-navy) !important; color: var(--zmq-bone) !important; }

/* — Inline status-TEXT utilities (the foreground complement to the badge
     remaps above). The vendored style.css forces `.text-danger { color:#ff0000 }`
     and `.text-success { color:#5E17EB }` (legacy purple), both !important. On a
     Bone surface #ff0000 is only 3.48:1 — below WCAG AA — and #5E17EB is an
     un-de-purpled leak. These utilities carry the operator's lookup-result and
     status messages (e.g. the scan-to-ship / scan-to-fill notices, #1103), so
     remap danger -> Madder (5.9:1 on Bone, 6.4:1 on white) and success ->
     Verdigris (5.0:1 on Bone, 5.4:1 on white). Global like `.text-primary` /
     `.bg-success` above so it reaches both the legacy `.page-wrapper` content
     and the v2 `.zmq-portal-v2` / `main-wrapper` content. — */
.text-danger { color: var(--zmq-madder) !important; }
.text-success { color: var(--zmq-verdigris) !important; }

/* — Auth surface uses the brand body stack (Inter Tight). Harmless on the
     portal, whose body.zmq-portal-v2 rule already sets the same family. — */
body { font-family: var(--zmq-font-body); }