/* ============================================================
   PayFyre Design System v2 — "Ink on Paper" panel override layer
   Loaded AFTER payfyre-panel.css / payfyre-admin.css.
   Overrides the --pf-* tokens to the Claude design system values
   and normalizes legacy inline-style patterns via attribute selectors.
   ============================================================ */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5/index.min.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5/index.min.css');

:root {
  /* Ink */
  --pf-ink: #0C0D16;
  --pf-ink-hover: #16182a;
  --pf-ink-a09: rgba(12, 13, 22, .09);
  --pf-ink-a13: rgba(12, 13, 22, .13);
  --pf-ink-a05: rgba(12, 13, 22, .05);
  --pf-ink-a55: rgba(12, 13, 22, .55);

  /* Green */
  --pf-green: #00E556;
  --pf-green-text: #00A43E;
  --pf-green-wash: rgba(0, 229, 86, .16);
  --pf-green-wash-soft: rgba(0, 229, 86, .06);

  /* Papers */
  --pf-paper: #ffffff;
  --pf-paper-raised: #FCFCFA;
  --pf-paper-sunken: #FAFAF8;
  --pf-paper-inset: #FBFBF9;
  --pf-paper-quiet: #F5F5F2;

  /* Map existing panel tokens -> v2 */
  --pf-primary: #0C0D16;            /* primary actions are INK, not green */
  --pf-primary-hover: #16182a;
  --pf-primary-light: rgba(0, 229, 86, .10);
  --pf-primary-dark: #00A43E;
  --pf-bg: #F5F5F2;
  --pf-surface: #ffffff;
  --pf-border: rgba(12, 13, 22, .09);
  --pf-text: #0C0D16;
  --pf-text-secondary: rgba(12, 13, 22, .55);
  --pf-text-muted: rgba(12, 13, 22, .45);
  --pf-warning: #F5A524;
  --pf-warning-text: #9A6400;
  --pf-warning-surface: #FFFBF2;
  --pf-warning-border: rgba(245, 165, 36, .35);
  --pf-danger: #DC2626;
  --pf-danger-text: #B91C1C;
  --pf-danger-surface: #FEF2F2;
  --pf-danger-border: rgba(220, 38, 38, .35);
  --pf-radius: 12px;
  --pf-radius-sm: 8px;

  --pf-shadow: 0 1px 2px rgba(12, 13, 22, .035), 0 8px 24px -18px rgba(12, 13, 22, .18);
  --pf-shadow-panel: 0 1px 2px rgba(12, 13, 22, .035), 0 8px 24px -18px rgba(12, 13, 22, .18);
}

/* ── Typography: Geist everywhere ─────────────────────────── */
body, .btn, button, input, select, textarea, table, .card, .nav-item, .nav-section-title {
  font-family: "Geist", "Geist Sans", system-ui, -apple-system, sans-serif !important;
}
code, .mono, kbd { font-family: "Geist Mono", ui-monospace, monospace !important; }

/* Slightly denser console rhythm */
body { font-size: 13px; letter-spacing: -0.005em; }

/* ── Buttons follow the system ────────────────────────────── */
.btn-primary, .btn.btn-primary {
  background: var(--pf-ink) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--pf-ink-hover) !important; }
/* Green kept ONLY for go-actions */
.btn-go, .btn-success, .btn.btn-success {
  background: var(--pf-green) !important;
  color: var(--pf-ink) !important;
}
.btn { border-radius: 8px !important; }

/* ── Tables: mono micro-label headers, hairline rows ──────── */
.table th, .pf-table th {
  font-family: "Geist Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(12, 13, 22, .55) !important;
  background: var(--pf-paper-sunken) !important;
  border-bottom: 1px solid var(--pf-ink-a09) !important;
}
.table td, .pf-table td { border-color: var(--pf-ink-a05) !important; }

/* ── Cards ────────────────────────────────────────────────── */
.card { border-radius: 12px !important; box-shadow: var(--pf-shadow-panel) !important; border-color: var(--pf-ink-a09) !important; }

/* ── Sidebar: ink rail on paper ───────────────────────────── */
.sidebar, .app-sidebar {
  background: var(--pf-paper-raised) !important;
  border-right: 1px solid var(--pf-ink-a09) !important;
}
.nav-item {
  color: rgba(12, 13, 22, .55) !important;
  border-radius: 8px !important;
}
.nav-item:hover { color: var(--pf-ink) !important; background: var(--pf-paper-sunken) !important; }
.nav-item.active {
  background: var(--pf-ink) !important;
  color: #fff !important;
}
.nav-section-title {
  font-family: "Geist Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(12, 13, 22, .38) !important;
}

/* ── Legacy inline-style normalization (attribute selectors) ─
   These beat inline styles with !important. */
/* Old dark-green primary buttons -> ink */
button[style*="background:#0b3d1d"], a[style*="background:#0b3d1d"], button[style*="background: #0b3d1d"], a[style*="background: #0b3d1d"] {
  background: var(--pf-ink) !important;
  border-color: var(--pf-ink) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
button[style*="background:#0b3d1d"]:hover, button[style*="background: #0b3d1d"]:hover { background: var(--pf-ink-hover) !important; }
/* Keep genuine go/green CTAs but on-system */
button[style*="background:#00E556"], a[style*="background:#00E556"] {
  color: var(--pf-ink) !important;
  border-radius: 8px !important;
}
/* Table header bands */
div[style*="background:#FAFBFA"], div[style*="background: #FAFBFA"], div[style*="background:#F4F6FA"] {
  background: var(--pf-paper-sunken) !important;
  border-color: var(--pf-ink-a09) !important;
}
/* Card containers with legacy borders */
div[style*="border:1px solid #ECEEEC"], div[style*="border: 1px solid #ECEEEC"],
div[style*="border:1px solid #E8ECEF"], div[style*="border: 1px solid #E8ECEF"] {
  border-color: var(--pf-ink-a09) !important;
  border-radius: 12px !important;
  box-shadow: var(--pf-shadow-panel) !important;
}
/* Status/success text greens unified */
[style*="color:#00A43E"], [style*="color: #00A43E"], [style*="color:#00C449"] { color: var(--pf-green-text) !important; }

/* Focus discipline */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--pf-ink) !important;
}


/* ============================================================
   v2 layer — part 2: merchant/user panel chrome (pf-* classes)
   The dark-navy sidebar in payfyre-panel.css is hardcoded, not
   token-driven, so these target it directly.
   ============================================================ */

/* ── Sidebar: paper rail ───────────────────────────────────── */
.pf-sidebar {
  background: var(--pf-paper-raised, #FCFCFA) !important;
  border-right: 1px solid rgba(12, 13, 22, .09) !important;
}
.pf-sidebar-logo { border-bottom: 1px solid rgba(12, 13, 22, .09) !important; }

.pf-nav-item {
  color: rgba(12, 13, 22, .55) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
.pf-nav-item:hover {
  background: var(--pf-paper-sunken, #FAFAF8) !important;
  color: var(--pf-ink, #0C0D16) !important;
}
.pf-nav-item.active {
  background: var(--pf-ink, #0C0D16) !important;
  color: #fff !important;
}
.pf-nav-item.active::before {
  background: var(--pf-green, #00E556) !important;
  box-shadow: none !important;
}
.pf-nav-item svg, .pf-nav-item .pf-nav-icon { opacity: .75; }
.pf-nav-sub { border-left-color: rgba(12, 13, 22, .09) !important; }
.pf-nav-arrow { color: rgba(12, 13, 22, .38) !important; }
.pf-burger-btn {
  background: var(--pf-paper, #fff) !important;
  border: 1px solid rgba(12, 13, 22, .13) !important;
  color: var(--pf-ink, #0C0D16) !important;
}
.pf-user-trigger {
  background: var(--pf-paper-sunken, #FAFAF8) !important;
  border: 1px solid rgba(12, 13, 22, .09) !important;
  color: var(--pf-ink, #0C0D16) !important;
}

/* ── Legacy navy chrome inline styles → paper ─────────────── */
[style*="background:#0F172A"], [style*="background: #0F172A"],
[style*="background:#0B1120"], [style*="background: #0B1120"],
[style*="linear-gradient(180deg, #0B1120"] {
  background: var(--pf-paper-raised, #FCFCFA) !important;
}
/* White chrome text (sidebar/nav labels) → ink alphas */
[style*="color:rgba(255,255,255,.5)"], [style*="color:rgba(255,255,255, 0.5)"],
[style*="color:rgba(255,255,255,.65)"], [style*="color:rgba(255,255,255, 0.65)"],
[style*="color:rgba(255,255,255,.25)"], [style*="color:rgba(255,255,255, 0.25)"] {
  color: rgba(12, 13, 22, .55) !important;
}
[style*="color:#fff"], [style*="color: #fff"], [style*="color:#ffffff"] {
  /* only inside dark-inline contexts; buttons overridden separately keep white */
}
/* Section micro-labels inside chrome */
[style*="rgba(255,255,255,.35)"], [style*="rgba(255, 255, 255, 0.35)"] {
  color: rgba(12, 13, 22, .38) !important;
}

/* ── Merchant dashboard hero/KPI harmonization ─────────────── */
.pf-card, .pf-kpi {
  border-radius: 12px !important;
  border-color: rgba(12, 13, 22, .09) !important;
  box-shadow: 0 1px 2px rgba(12, 13, 22, .035), 0 8px 24px -18px rgba(12, 13, 22, .18) !important;
}
/* ============================================================
   v2 layer — part 3: admin/provider sidebar (admin-sidebar uses
   its own --pf-sidebar-* vars + container class part 1 missed)
   ============================================================ */
:root {
  --pf-sidebar-bg: #FCFCFA;
  --pf-sidebar-text: rgba(12, 13, 22, .55);
  --pf-sidebar-hover-bg: #FAFAF8;
  --pf-sidebar-active-bg: #0C0D16;
  --pf-sidebar-border: rgba(12, 13, 22, .09);
}

.admin-sidebar {
  background: #FCFCFA !important;
  color: #0C0D16 !important;
  border-right: 1px solid rgba(12, 13, 22, .09) !important;
}
.admin-sidebar .sidebar-logo a { color: #0C0D16 !important; }
.admin-sidebar .sidebar-toggle {
  background: #ffffff !important;
  color: #0C0D16 !important;
  border: 1px solid rgba(12, 13, 22, .13) !important;
}

/* Hover + rest states, explicitly visible on paper */
.nav-item {
  color: rgba(12, 13, 22, .55) !important;
}
.nav-item:hover {
  background: #FAFAF8 !important;
  color: #0C0D16 !important;
}
.nav-item.active {
  background: #0C0D16 !important;
  color: #ffffff !important;
}
.nav-item.active i, .nav-item.active .icon { color: #fff !important; }

/* Provider panel may reuse these patterns too */
.provider-sidebar, .prov-sidebar {
  background: #FCFCFA !important;
  color: #0C0D16 !important;
  border-right: 1px solid rgba(12, 13, 22, .09) !important;
}

/* v2 part 4 — main content canvas: sunken paper per design system */
.admin-main, .admin-content { background: #FAFAF8 !important; }
.pf-content { background: #FAFAF8 !important; }

/* v2 part 5 — button contrast: primary=ink bg needs white text */
.admin-btn-primary { color: #fff !important; box-shadow: none !important; }
.admin-btn-primary:hover { box-shadow: none !important; }
[style*="background:var(--pf-primary)"], [style*="background: var(--pf-primary)"] { color: #fff !important; }