/* Den Payments dashboard. Bootstrap 5.3 underneath; these tokens give it its look in light and dark. */

:root,
[data-bs-theme="light"] {
  --page: #f3f3ef;
  --surface: #fcfcfb;
  --surface-muted: #f6f6f3;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  /* #898781 read too faint on the light surfaces; this keeps small hint text readable. */
  --muted: #6e6c67;
  --line: #e1e0d9;
  --line-strong: #c3c2b7;
  --accent: #256abf;
  --accent-hover: #1c5cab;
  --accent-soft: #e8f1fc;
  --series-1: #2a78d6;
  --series-1-hover: #1c5cab;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 1px 1px rgba(11, 11, 11, .02);
  /* The sidebar is dark in both themes. */
  --sidebar-bg: #141413;
  --sidebar-text: #c3c2b7;
  --sidebar-text-strong: #fff;
  --sidebar-hover-bg: rgba(255, 255, 255, .06);
  --sidebar-active-bg: rgba(57, 135, 229, .18);
  --sidebar-active-icon: #6da7ec;
  --sidebar-line: rgba(255, 255, 255, .08);
  --avatar-bg: #2c2c2a;

  --bs-body-bg: var(--page);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 37, 106, 191;
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: 28, 92, 171;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 37, 106, 191;
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-bs-theme="dark"] {
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-muted: #222220;
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --line: #2c2c2a;
  --line-strong: #383835;
  --accent: #2a78d6;
  --accent-hover: #3987e5;
  --accent-soft: #15253a;
  --series-1: #3987e5;
  --series-1-hover: #6da7ec;
  --grid: #2c2c2a;
  --baseline: #383835;
  --shadow: none;

  --bs-body-bg: var(--page);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-border-color: var(--line);
  --bs-link-color: #6da7ec;
  --bs-link-color-rgb: 109, 167, 236;
  --bs-link-hover-color: #9ec5f4;
  --bs-link-hover-color-rgb: 158, 197, 244;
  --bs-tertiary-bg: var(--surface-muted);
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--bs-font-sans-serif);
  font-size: .9375rem;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
.num { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }
.required { color: #d03b3b; margin-left: .15rem; }

/* ---------- Buttons & forms ---------- */

.btn { font-weight: 500; border-radius: 8px; }
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 42, 120, 214;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-bg: var(--surface-muted);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--line-strong);
  --bs-btn-active-bg: var(--surface-muted);
  --bs-btn-active-color: var(--ink);
  background: var(--surface);
}
.btn-icon { border: 1px solid var(--line); background: var(--surface); width: 38px; height: 38px; padding: 0; font-size: 1.25rem; }

.form-control, .form-select {
  border-radius: 8px;
  border-color: var(--line-strong);
  background-color: var(--surface);
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(42, 120, 214, .2);
}
.form-label { font-weight: 500; font-size: .875rem; margin-bottom: .35rem; }
.form-text { color: var(--muted); font-size: .8125rem; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; margin-top: .1em; cursor: pointer; }
.form-switch .form-check-label { padding-left: .35rem; cursor: pointer; }

.form-page { max-width: 760px; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .5rem 0 2rem; }

/* ---------- Layout ---------- */

.app { display: flex; min-height: 100vh; }

.sidebar {
  --bs-offcanvas-width: 260px;
  --bs-offcanvas-bg: var(--sidebar-bg);
  /* !important because Bootstrap's .offcanvas-lg makes it transparent on wide screens. */
  background-color: var(--sidebar-bg) !important;
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .sidebar { width: 248px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; }
}

.sidebar-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.25rem 1.25rem 1rem;
  color: var(--sidebar-text-strong); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
}
.brand-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #3987e5, #1c5cab);
  color: #fff; font-size: 1rem;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: .5rem .75rem; flex: 1; }
.sidebar-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: 8px;
  color: var(--sidebar-text); text-decoration: none; font-weight: 500;
  background: none; border: 0; text-align: left;
}
.sidebar-link i { font-size: 1.05rem; opacity: .85; }
.sidebar-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }
.sidebar-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-text-strong); font-weight: 600; }
.sidebar-link.active i { color: var(--sidebar-active-icon); opacity: 1; }

.sidebar-footer { padding: .75rem; border-top: 1px solid var(--sidebar-line); }
.sidebar-user { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem 0; color: var(--sidebar-text-strong); font-size: .875rem; font-weight: 500; }
.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--avatar-bg); color: var(--sidebar-text-strong); font-weight: 600; font-size: .8rem;
}
.sidebar-logout { color: var(--sidebar-text); padding: .25rem .4rem; }
.sidebar-logout:hover { color: var(--sidebar-text-strong); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -.01em; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.topbar-title { min-width: 0; }
.topbar-actions { margin-left: auto; display: flex; gap: .5rem; }
.crumb { font-size: .8125rem; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: .2rem; }
.crumb:hover { color: var(--ink); }

.content { padding: 1.75rem 2rem 2rem; width: 100%; max-width: 1320px; }
.page-intro { color: var(--ink-2); margin-bottom: 1.25rem; }

@media (max-width: 767.98px) {
  .topbar { padding: .75rem 1rem; }
  .content { padding: 1rem; }
}

/* ---------- Cards & tables ---------- */

.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--line);
  --bs-card-cap-bg: transparent;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.card-header { padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); }
.card-footer { background: var(--surface-muted); border-top: 1px solid var(--line); padding: .75rem 1.25rem; }
.card-footer:last-child { border-radius: 0 0 12px 12px; }
.card-title { font-size: .95rem; font-weight: 600; margin: 0; }
.card-body { padding: 1.25rem; }

.data-table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--surface-muted); color: var(--ink); }
.data-table thead th {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: var(--surface-muted);
  border-bottom: 1px solid var(--line); padding: .65rem 1rem; white-space: nowrap;
}
.data-table td { padding: .75rem 1rem; border-color: var(--line); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.row-link { cursor: pointer; }
.row-link a { color: var(--ink); text-decoration: none; }
.callback-cell { max-width: 280px; }
.empty-row { text-align: center; color: var(--muted); padding: 2.5rem 1rem !important; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-2); }
.empty-state > i { font-size: 2rem; color: var(--muted); display: block; margin-bottom: .75rem; }

.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--line); --bs-list-group-color: var(--ink); }
.list-group-item { padding: .85rem 1.25rem; }

/* ---------- Status (reserved colors, always with an icon and a word) ---------- */

.status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .6rem .18rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500; line-height: 1.4; white-space: nowrap;
  color: var(--ink); background: var(--status-bg); vertical-align: middle;
}
.status i { color: var(--status-color); font-size: .8rem; }
.status-good { --status-color: #0ca30c; --status-bg: rgba(12, 163, 12, .12); }
.status-warning { --status-color: #c98500; --status-bg: rgba(250, 178, 25, .18); }
.status-serious { --status-color: #ec835a; --status-bg: rgba(236, 131, 90, .16); }
.status-critical { --status-color: #d03b3b; --status-bg: rgba(208, 59, 59, .12); }
.status-neutral { --status-color: var(--muted); --status-bg: var(--surface-muted); }
[data-bs-theme="dark"] .status-warning { --status-color: #fab219; }
.topbar h1 .status { font-size: .8rem; }

/* ---------- Stat tiles ---------- */

.stat-tile .card-body { padding: 1.1rem 1.25rem; }
.stat-label { color: var(--ink-2); font-size: .8125rem; font-weight: 500; }
.stat-value { font-size: 1.85rem; font-weight: 600; letter-spacing: -.02em; margin-top: .2rem; line-height: 1.2; }
.stat-note { margin-top: .5rem; font-size: .8rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.stat-link { text-decoration: none; color: inherit; transition: border-color .15s; }
.stat-link:hover { border-color: var(--line-strong); color: inherit; }

/* ---------- Charts ---------- */

.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.chart-title { font-size: .8125rem; font-weight: 500; color: var(--ink-2); margin: 0; }
.chart-total { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.chart-sub { font-size: .8125rem; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: .35rem; }

.column-chart { position: relative; width: 100%; height: 220px; }
.column-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.column-chart .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.column-chart .baseline { stroke: var(--baseline); stroke-width: 1; shape-rendering: crispEdges; }
.column-chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.column-chart .bar { fill: var(--series-1); transition: fill .12s; }
.column-chart .hit { fill: transparent; cursor: pointer; outline: none; }
.column-chart .hit:hover + .bar, .column-chart .hit:focus-visible + .bar,
.column-chart .bar.is-active { fill: var(--series-1-hover); }
.column-chart .hit:focus-visible { stroke: var(--accent); stroke-width: 2; }

.chart-table { margin-top: 1rem; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.chart-table .table { --bs-table-bg: transparent; color: var(--ink); font-size: .85rem; }
.chart-table th { position: sticky; top: 0; background: var(--surface-muted); font-weight: 600; color: var(--ink-2); }

.chart-tooltip {
  position: fixed; z-index: 1080; pointer-events: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(11, 11, 11, .14);
  padding: .5rem .7rem; font-size: .8rem; min-width: 140px;
}
.chart-tooltip .tip-value { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .45rem; }
.chart-tooltip .tip-key { width: 12px; height: 2px; border-radius: 1px; background: var(--series-1); display: inline-block; }
.chart-tooltip .tip-label { color: var(--ink-2); margin-top: .1rem; }

.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.bar-row { outline: none; border-radius: 6px; }
.bar-row:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.bar-row-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; font-size: .875rem; }
.bar-track { display: flex; align-items: center; gap: .6rem; }
.bar-fill { height: 10px; min-width: 2px; background: var(--series-1); border-radius: 0 4px 4px 0; transition: background .12s; }
.bar-row:hover .bar-fill, .bar-row:focus-visible .bar-fill { background: var(--series-1-hover); }
.bar-value { font-size: .8125rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Gateways ---------- */

.gateway-logo {
  display: grid; place-items: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; overflow: hidden;
  font-weight: 700; color: #52514e; font-size: 1.1rem;
}
.gateway-logo img { max-width: 78%; max-height: 78%; object-fit: contain; }
.gateway-logo-sm { width: 26px; height: 26px; border-radius: 7px; font-size: .75rem; }
.gateway-name { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.gateway-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.gateway-description { color: var(--ink-2); font-size: .875rem; margin: .3rem 0 0; }
.gateway-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.gateway-facts dt { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.gateway-facts dd { margin: .2rem 0 0; font-size: .875rem; }
.mode { display: inline-block; padding: .05rem .5rem; border-radius: 6px; font-size: .78rem; font-weight: 500; background: var(--surface-muted); border: 1px solid var(--line); }
.mode-live { background: var(--accent-soft); border-color: transparent; color: var(--ink); }

.logo-field { display: flex; gap: 1rem; align-items: flex-start; }
.key-group[hidden] { display: none; }

/* ---------- Products & payments ---------- */

.secret-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.secret {
  flex: 1; min-width: 0; padding: .45rem .7rem; border-radius: 8px;
  background: var(--surface-muted); border: 1px solid var(--line);
  color: var(--ink); font-size: .8125rem; word-break: break-all;
}
.secret-masked { -webkit-text-security: disc; filter: blur(4px); user-select: none; }
.new-key .secret { background: rgba(255, 255, 255, .7); }
[data-bs-theme="dark"] .new-key .secret { background: rgba(0, 0, 0, .3); }

.key-item { display: flex; align-items: center; gap: .75rem; }
.key-item > .min-w-0 { flex: 1; }

.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.filter-bar .form-select { width: auto; min-width: 150px; }
.filter-search { position: relative; flex: 1 1 260px; }
.filter-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.filter-search .form-control { padding-left: 2.2rem; }

.detail-list { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: .55rem 1rem; margin: 0; font-size: .875rem; }
.detail-list dt { color: var(--ink-2); font-weight: 500; }
.detail-list dd { margin: 0; min-width: 0; word-break: break-word; }
@media (max-width: 575.98px) {
  .detail-list { grid-template-columns: 1fr; gap: .15rem; }
  .detail-list dd { margin-bottom: .5rem; }
}

.json-block {
  background: var(--surface-muted); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .75rem; font-size: .75rem; color: var(--ink); max-height: 240px; overflow: auto; margin: .35rem 0 0;
}

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline > li { position: relative; padding: 0 0 1rem 1.25rem; border-left: 2px solid var(--line); margin-left: .35rem; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: ""; position: absolute; left: -6px; top: .35rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}
.timeline-head { display: flex; gap: .5rem; align-items: baseline; }
.timeline summary { color: var(--accent); cursor: pointer; }

.pagination { --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); }

/* ---------- Login ---------- */

.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(57, 135, 229, .18), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(57, 135, 229, .12), transparent 60%),
    var(--page);
}
.login-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 2rem;
  box-shadow: 0 10px 40px rgba(11, 11, 11, .08);
}
.login-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-bottom: 1.5rem; }