/**
 * Seal POS — Certus Systems brand tokens
 * "Ink, paper, seal." Calm, exact, final. No legacy MashPOS blues.
 *
 * Palette (do not introduce other brand hues):
 *   Ink #0B1730 / Ink 2 #14264A — dark surfaces, hover/raised panels
 *   Bone #F2F3EF — page ground
 *   Seal #10B981 — earned: confirmed/sealed marks and the primary arrow only
 *   Seal deep #047857 — the workhorse: buttons, links, interactive text
 *   Gold #CBA135 — rules and labels ON ink surfaces only, never text on light bg
 *   Slate #5B6472 — secondary text
 *
 * Type: Bricolage Grotesque (display/headings) · Public Sans (body/UI) · JetBrains Mono (data, codes, kickers)
 */
:root {
  /* Core */
  --seal-ink: #0b1730;
  --seal-ink-2: #14264a;
  --seal-bone: #f2f3ef;
  --seal-green: #10b981;
  --seal-green-deep: #047857;
  --seal-green-deep-hover: #036b4a;
  --seal-green-deep-active: #025a40;
  --seal-green-soft: #e6f5ef;
  --seal-green-border: #86efac;
  --seal-gold: #cba135;

  /* Neutrals */
  --seal-ink-text: #0f172a;
  --seal-slate: #5b6472;
  --seal-muted: #667085;
  --seal-line: #e4e7ec;
  --seal-line-strong: #d0d5dd;
  --seal-bg: #ffffff;
  --seal-bg-soft: #f8fafc;
  --seal-danger: #dc2626;
  --seal-danger-bg: #fef2f2;
  --seal-success: #047857;
  --seal-success-bg: #e6f5ef;

  /* Typography */
  --seal-font: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --seal-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --seal-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Shape / elevation */
  --seal-radius: 10px;
  --seal-radius-lg: 14px;
  --seal-radius-pill: 999px;
  --seal-shadow: 0 12px 40px rgba(11, 23, 48, 0.12);
  --seal-shadow-sm: 0 4px 14px rgba(11, 23, 48, 0.08);

  /* Legacy var names kept as aliases so older markup keeps working while pages migrate */
  --primary-blue: var(--seal-ink);
  --secondary-blue: var(--seal-green-deep);
  --light-blue: var(--seal-green-soft);
  --accent-blue: var(--seal-green-deep);
  --dark-navy: var(--seal-ink);
  --seal-navy: var(--seal-ink);
  --seal-navy-deep: var(--seal-ink);
  --seal-navy-mid: var(--seal-ink-2);
  --seal-ink-soft: var(--seal-slate);
  --seal-green-hover: var(--seal-green-deep-hover);
  --seal-lime: var(--seal-green-border);
  --seal-green-bright: var(--seal-green);

  /* Bootstrap 5 theme hooks — keep vendor CSS intact, retint primary chrome */
  --bs-primary: #047857;
  --bs-primary-rgb: 4, 120, 87;
  --bs-primary-text-emphasis: #025a40;
  --bs-primary-bg-subtle: #e6f5ef;
  --bs-primary-border-subtle: #86efac;
  --bs-link-color: #047857;
  --bs-link-hover-color: #036b4a;
  --bs-focus-ring-color: rgba(4, 120, 87, 0.25);

  --bs-success: #047857;
  --bs-success-rgb: 4, 120, 87;
  --bs-success-text-emphasis: #025a40;
  --bs-success-bg-subtle: #e6f5ef;
  --bs-success-border-subtle: #86efac;

  /* Info → Seal deep (drop Bootstrap cyan) */
  --bs-info: #047857;
  --bs-info-rgb: 4, 120, 87;
  --bs-info-text-emphasis: #14264a;
  --bs-info-bg-subtle: #e6f5ef;
  --bs-info-border-subtle: #86efac;

  /* DataTables selected-row tint (vendor falls back to Bootstrap blue) */
  --dt-row-selected: 4, 120, 87;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 230, 245, 239;

  --swal2-confirm-button-background-color: #047857;
}

/* SweetAlert2 default confirm button is purple (#7066e0) unless a call sets
   confirmButtonColor explicitly. The vendor JS bundle injects its own <style>
   tag with that default at runtime, landing after this stylesheet, so the
   plain :root rule above can lose the cascade race on load order alone.
   `html:root` has higher specificity than `:root`, so it wins regardless of
   order — but is still a selector (not !important), so an explicit
   confirmButtonColor call, which sets this same variable inline on the one
   button, correctly still overrides it (inline beats any selector). */
html:root {
  --swal2-confirm-button-background-color: #047857;
}

/* BS5 .btn-primary still ships literal blues — retint via button vars */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #047857;
  --bs-btn-border-color: #047857;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #036b4a;
  --bs-btn-hover-border-color: #036b4a;
  --bs-btn-focus-shadow-rgb: 4, 120, 87;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #025a40;
  --bs-btn-active-border-color: #025a40;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #047857;
  --bs-btn-disabled-border-color: #047857;
}

.btn-outline-primary {
  --bs-btn-color: #047857;
  --bs-btn-border-color: #047857;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #047857;
  --bs-btn-hover-border-color: #047857;
  --bs-btn-focus-shadow-rgb: 4, 120, 87;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #036b4a;
  --bs-btn-active-border-color: #036b4a;
  --bs-btn-disabled-color: #047857;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #047857;
}

.text-primary { color: #047857 !important; }
.bg-primary { background-color: #047857 !important; }
.border-primary { border-color: #047857 !important; }
.link-primary { color: #047857 !important; }
.link-primary:hover,
.link-primary:focus { color: #036b4a !important; }

/* BS5 .btn-info ships a literal cyan (#0dcaf0) baked into the class itself —
   --bs-info-rgb alone doesn't reach it. The brand has no blue, so "info"
   actions get the same Ink used for neutral-but-important actions elsewhere
   (e.g. OneMoney / Charge), not an invented off-palette blue. */
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0b1730;
  --bs-btn-border-color: #0b1730;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #14264a;
  --bs-btn-hover-border-color: #14264a;
  --bs-btn-focus-shadow-rgb: 11, 23, 48;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #14264a;
  --bs-btn-active-border-color: #14264a;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0b1730;
  --bs-btn-disabled-border-color: #0b1730;
}

.btn-outline-info {
  --bs-btn-color: #0b1730;
  --bs-btn-border-color: #0b1730;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b1730;
  --bs-btn-hover-border-color: #0b1730;
  --bs-btn-focus-shadow-rgb: 11, 23, 48;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #14264a;
  --bs-btn-active-border-color: #14264a;
  --bs-btn-disabled-color: #0b1730;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0b1730;
}

/* BS5 form-check radios/checkboxes hardcode primary blue when checked */
.form-check-input {
  --bs-form-check-bg: #fff;
  accent-color: #047857;
}
.form-check-input:checked {
  background-color: #047857;
  border-color: #047857;
}
.form-check-input:focus {
  border-color: #86efac;
  box-shadow: 0 0 0 0.25rem rgba(4, 120, 87, 0.25);
}
.form-check-input:checked[type="checkbox"],
.form-check-input:checked[type="radio"] {
  background-color: #047857;
  border-color: #047857;
}
.form-switch .form-check-input:checked {
  background-color: #047857;
  border-color: #047857;
}

/* Pagination / tabs / pills — BS5 active state is still blue */
.page-link {
  color: #047857;
}
.page-link:hover {
  color: #036b4a;
  background-color: #e6f5ef;
  border-color: #86efac;
}
.page-link:focus {
  color: #036b4a;
  box-shadow: 0 0 0 0.25rem rgba(4, 120, 87, 0.25);
}
.page-item.active .page-link {
  color: #fff;
  background-color: #047857;
  border-color: #047857;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #047857;
}
.nav-tabs .nav-link.active {
  color: #047857;
  border-color: var(--seal-line, #e4e7ec) var(--seal-line, #e4e7ec) #fff;
}
.nav-link {
  --bs-nav-link-color: #047857;
  --bs-nav-link-hover-color: #036b4a;
}
.progress-bar {
  background-color: #047857;
}
.form-range::-webkit-slider-thumb {
  background-color: #047857;
}
.form-range::-moz-range-thumb {
  background-color: #047857;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(4, 120, 87, 0.25);
}

/* DataTables (non–cat-page) — vendor CSS still paints blue current/selected */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #e6f5ef !important;
  border-color: #86efac !important;
  color: #036b4a !important;
}
table.dataTable tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(4, 120, 87, 0.92) !important;
  color: #fff !important;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #047857;
  --bs-btn-border-color: #047857;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #036b4a;
  --bs-btn-hover-border-color: #036b4a;
  --bs-btn-focus-shadow-rgb: 4, 120, 87;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #025a40;
  --bs-btn-active-border-color: #025a40;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #047857;
  --bs-btn-disabled-border-color: #047857;
}

.text-success { color: #047857 !important; }
.bg-success { background-color: #047857 !important; }
.border-success { border-color: #047857 !important; }

body {
  font-family: var(--seal-font);
  color: var(--seal-ink-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.seal-display {
  font-family: var(--seal-font-display);
  letter-spacing: -0.01em;
}

/* Data that must read as data, not decoration: receipt/verification codes,
   fiscal day numbers, device IDs, timestamps. */
code, kbd, pre, .font-monospace,
.seal-data, .seal-mono {
  font-family: var(--seal-font-mono) !important;
}

/* Small-caps section eyebrows / numbered-step kickers — mono, wide tracking,
   per brand sheet ("BRAND DIRECTION · …", "01 / 02 / 03"). */
.seal-kicker {
  font-family: var(--seal-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Emerald is earned: reserve the bright mark for confirmed/sealed states
   (verification badges, success checks) — everything interactive uses Seal deep above. */
.seal-mark,
.seal-confirmed {
  color: #10b981;
}
.seal-mark-bg {
  background-color: #10b981;
}

/* Gold: hairline rules and labels on ink surfaces only — never text on light bg. */
.bg-ink .seal-kicker,
.bg-seal-ink .seal-kicker,
[data-surface="ink"] .seal-kicker {
  color: #cba135;
}
.seal-rule-gold {
  border-color: rgba(203, 161, 53, 0.35);
}

.seal-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}

.seal-brand-mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.seal-brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.seal-brand-wordmark .seal-name {
  font-family: var(--seal-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.seal-brand-wordmark .seal-name .pos {
  color: #047857;
}

.seal-brand-wordmark .seal-by {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.15rem;
}

/* Opt-in replacement for the plain .card-header pattern (no bg-* class), which
   otherwise gets a dark gradient band from style.css with no corresponding
   light-text override for subtitles — any <small class="text-muted"> in that
   header reads as near-invisible dark-on-dark. Use .seal-card/-header/-body in
   place of .card/.card-header/.card-body when a page needs its header fixed;
   does not touch .card-header itself, so untouched pages keep their current
   look until migrated individually. */
.seal-card {
  background: #fff;
  border: 1px solid var(--seal-line, #e4e7ec);
  border-radius: 12px;
  overflow: hidden;
}
.seal-card-header {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--seal-line, #e4e7ec);
  background: var(--seal-bg-soft, #f8fafc);
}
.seal-card-header h5,
.seal-card-header h6 {
  margin: 0;
  color: #0b1730;
  display: flex;
  align-items: center;
  gap: 8px;
}
.seal-card-header small,
.seal-card-header .text-muted {
  color: var(--seal-slate, #5b6472) !important;
}
.seal-card-body { padding: 18px; }