/* Payment Gateway enterprise UI layer — 2026 platform redesign
   Theme switch: html[data-theme="light|dark"] (set before paint + toggle).
   Light tokens are first-class (not only :root fallback). */
:root {
  --sidebar-w: 248px;
  --sidebar-collapsed-w: 72px;
  --topbar-h: 64px;
  --font-sans: Aptos, "Noto Sans", Tahoma, sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --transition: 150ms ease;
}

/* ── Light theme (default + explicit switch target) ───────── */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f3;
  --surface: #ffffff;
  --surface-2: #f7f8f6;
  --surface-raised: #fafbf9;
  --surface-sunken: #ecefeb;
  --border: #dce1dc;
  --border-light: #e9ece8;
  --text-primary: #17201d;
  --text-secondary: #52605b;
  --text-muted: #74817c;
  --text-inverse: #f7faf8;
  --on-accent: #ffffff;
  --accent: #0f766e;
  --accent-hover: #0b5f59;
  --accent-pressed: #094f4a;
  --accent-light: #e9f5f2;
  --accent-selected: #d5efe9;
  --sidebar-bg: #1e2523;
  --sidebar-bg-end: #171d1b;
  --sidebar-text: #bbc4c1;
  --sidebar-text-strong: #edf2ef;
  --sidebar-section: #7f8c88;
  --sidebar-border: rgba(255,255,255,.07);
  --sidebar-hover: rgba(255,255,255,.055);
  --sidebar-active-bg: rgba(38,166,154,.13);
  --sidebar-active-text: #8fd5cd;
  --sidebar-badge-bg: rgba(180,35,45,.16);
  --sidebar-badge-text: #ef9ca2;
  --sidebar-surface: rgba(255,255,255,.025);
  --success: #197443;
  --success-bg: #edf7f1;
  --success-border: #bcdcc9;
  --warning: #9a6300;
  --warning-bg: #fff8e6;
  --warning-border: #ead59f;
  --danger: #b4232d;
  --danger-bg: #fff1f2;
  --danger-border: #e9bcc1;
  --info: #286782;
  --info-bg: #edf6f9;
  --info-border: #bbd8e3;
  --neutral: #52605b;
  --neutral-bg: #f1f3f1;
  --shadow-sm: 0 1px 2px rgba(17,31,26,.055);
  --shadow: 0 3px 8px rgba(17,31,26,.08);
  --shadow-lg: 0 8px 24px rgba(17,31,26,.14);
  --input-bg: var(--surface);
  --input-border: var(--border);
  --input-border-focus: var(--accent);
  --input-focus-ring: 0 0 0 3px rgba(15,118,110,.14);
  --code-bg: #eef1ee;
  --code-color: #25332e;
  --code-border: #dce1dc;
  --overlay: rgba(8,12,10,.48);
  --brand-grad: linear-gradient(135deg, #0f766e 0%, #357f78 100%);
  --brand-tile: #357f78;
  --status-pending-bg: #fefce8;
  --status-pending-fg: #854d0e;
  --status-pending-border: #fef08a;
  --status-processing-bg: #eff6ff;
  --status-processing-fg: #1d4ed8;
  --status-processing-border: #bfdbfe;
  --status-cancelled-bg: #f3f4f6;
  --status-cancelled-fg: #4b5563;
  --status-cancelled-border: #d1d5db;
  --status-expired-bg: #fff7ed;
  --status-expired-fg: #c2410c;
  --status-expired-border: #fed7aa;
  --status-refunded-bg: #faf5ff;
  --status-refunded-fg: #7e22ce;
  --status-refunded-border: #e9d5ff;
  --secret-bg: #0f172a;
  --secret-border: #1e293b;
  --secret-muted: #94a3b8;
  --secret-code: #a5f3fc;
  --secret-panel: #1e293b;
  --diff-before-bg: #fef2f2;
  --diff-before-fg: #b91c1c;
  --diff-after-bg: #f0fdf4;
  --diff-after-fg: #15803d;
  --row-warning-bg: #fff7ed;
  --row-warning-hover: #ffedd5;
  --metric-violet-bg: #f3f0ff;
  --metric-violet-fg: #7c3aed;
  --skeleton-mid: #eef1f7;
  --control-hover: #f5f5f5;
  --control-active: #ededed;
  --control-border: #d1d1d1;
  /* Chevron for native <select> (dark glyph on light field) */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352605b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ── Dark theme ───────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151917;
  --surface: #1c211f;
  --surface-2: #202624;
  --surface-raised: #252b29;
  --surface-sunken: #121614;
  --border: #343c39;
  --border-light: #2b322f;
  --text-primary: #edf2ef;
  --text-secondary: #b3bdb9;
  --text-muted: #899590;
  --text-inverse: #17201d;
  --on-accent: #06201d;
  --accent: #55b8ad;
  --accent-hover: #77c9c0;
  --accent-pressed: #3ea297;
  --accent-light: rgba(85,184,173,.13);
  --accent-selected: rgba(85,184,173,.22);
  --sidebar-bg: #111513;
  --sidebar-bg-end: #0c100e;
  --sidebar-text: #aab5b1;
  --sidebar-text-strong: #f2f7f5;
  --sidebar-section: #73807b;
  --sidebar-border: rgba(255,255,255,.08);
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active-bg: rgba(85,184,173,.14);
  --sidebar-active-text: #8bd1c9;
  --sidebar-badge-bg: rgba(239,123,131,.15);
  --sidebar-badge-text: #ef9ca2;
  --sidebar-surface: rgba(255,255,255,.03);
  --success: #62bd82;
  --success-bg: rgba(60,143,89,.14);
  --success-border: #315d40;
  --warning: #e0ad51;
  --warning-bg: rgba(177,121,22,.13);
  --warning-border: #70531f;
  --danger: #ef7b83;
  --danger-bg: rgba(180,35,45,.14);
  --danger-border: #73343a;
  --info: #73bad7;
  --info-bg: rgba(40,103,130,.16);
  --info-border: #315c6e;
  --neutral: #aab5b1;
  --neutral-bg: #272e2b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22);
  --shadow: 0 3px 8px rgba(0,0,0,.25);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.34);
  --input-bg: var(--surface);
  --input-border: var(--border);
  --input-border-focus: var(--accent);
  --input-focus-ring: 0 0 0 3px rgba(85,184,173,.22);
  --code-bg: #121614;
  --code-color: #dce5e1;
  --code-border: #343c39;
  --overlay: rgba(0,0,0,.62);
  --brand-grad: linear-gradient(135deg, #2f8f86 0%, #55b8ad 100%);
  --brand-tile: #2f8f86;
  --status-pending-bg: rgba(177,121,22,.14);
  --status-pending-fg: #e0ad51;
  --status-pending-border: #70531f;
  --status-processing-bg: rgba(40,103,130,.18);
  --status-processing-fg: #73bad7;
  --status-processing-border: #315c6e;
  --status-cancelled-bg: #272e2b;
  --status-cancelled-fg: #aab5b1;
  --status-cancelled-border: #343c39;
  --status-expired-bg: rgba(194,65,12,.14);
  --status-expired-fg: #f0a06a;
  --status-expired-border: #7a4020;
  --status-refunded-bg: rgba(126,34,206,.16);
  --status-refunded-fg: #c4a1ef;
  --status-refunded-border: #5a3a7a;
  --secret-bg: #0c100e;
  --secret-border: #343c39;
  --secret-muted: #899590;
  --secret-code: #8fd5cd;
  --secret-panel: #151917;
  --diff-before-bg: rgba(180,35,45,.14);
  --diff-before-fg: #ef7b83;
  --diff-after-bg: rgba(60,143,89,.14);
  --diff-after-fg: #62bd82;
  --row-warning-bg: rgba(177,121,22,.12);
  --row-warning-hover: rgba(177,121,22,.2);
  --metric-violet-bg: rgba(124,58,237,.16);
  --metric-violet-fg: #c4a1ef;
  --skeleton-mid: #252b29;
  --control-hover: var(--surface-2);
  --control-active: var(--surface-raised);
  --control-border: var(--border);
  /* Chevron for native <select> (light glyph on dark field) */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b3bdb9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-end) 100%);
  border-inline-end: 1px solid var(--sidebar-border);
  left: 0;
  right: auto;
  transition: width 160ms ease, transform 160ms ease;
}
html[dir="rtl"] .admin-sidebar { left: auto; right: 0; }
.sidebar-logo { min-height: var(--topbar-h); padding: 14px 16px; }
.sidebar-logo-icon.brand-tile {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--brand-tile);
  background-image: var(--brand-grad);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
}
.sidebar-logo-text { font-size: 13px; font-weight: 600; }
.sidebar-logo-sub { margin-top: 2px; font-size: 10px; letter-spacing: 0; text-transform: none; }
.sidebar-nav { padding: 10px 0; }
.sidebar-section,
.sidebar-section-toggle {
  padding: 15px 16px 5px;
  color: var(--sidebar-section);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.sidebar-link {
  min-height: 36px;
  padding: 8px 16px;
  gap: 11px;
  color: var(--sidebar-text);
  font-size: 13px;
}
.sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-inline-start: 2px solid var(--sidebar-active-text);
  font-weight: 600;
}
.sidebar-link .nav-icon { width: 18px; min-width: 18px; color: currentColor; }
.sidebar-badge { border-radius: 6px; background: var(--sidebar-badge-bg); color: var(--sidebar-badge-text); }
.sys-status {
  margin: 8px 12px;
  padding: 11px 12px;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius);
  background: var(--sidebar-surface);
}
.sidebar-footer { border-top: 1px solid var(--sidebar-border); padding: 10px 12px; }
.sidebar-user { padding: 0; }
.sidebar-avatar { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.sidebar-user-name { color: var(--sidebar-text-strong); }
.sidebar-user-role { text-transform: none; letter-spacing: 0; color: var(--sidebar-section); }
.sidebar-signout { color: var(--sidebar-text); }
.sidebar-signout:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.sidebar-signout svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  padding: 7px 8px;
  border: 0;
  border-top: 1px solid var(--sidebar-border);
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
  text-align: start;
}
.sidebar-collapse:hover { color: var(--sidebar-text-strong); }
.sidebar-collapse .nav-icon { width: 18px; }

.admin-main { margin-inline-start: var(--sidebar-w); min-width: 0; transition: margin 160ms ease; }
.admin-topbar {
  height: var(--topbar-h);
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.topbar-menu-btn svg, .topbar-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-icon-btn .nav-icon { width: 18px; height: 18px; }
.topbar-search {
  max-width: 360px;
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: var(--radius);
}
.topbar-search-input { color: var(--text-primary); }
.topbar-user-chip { border-color: transparent; background: transparent; }
.topbar-user-chip:hover { background: var(--surface-2); border-color: var(--border); }
.topbar-env-badge { border-radius: 6px; letter-spacing: 0; text-transform: none; }
.admin-content { width: min(100%, 1540px); margin: 0 auto; padding: 24px 28px 40px; }

.sidebar-collapsed .admin-sidebar { width: var(--sidebar-collapsed-w); }
.sidebar-collapsed .admin-main { margin-inline-start: var(--sidebar-collapsed-w); }
.sidebar-collapsed .sidebar-brand-copy,
.sidebar-collapsed .sidebar-section,
.sidebar-collapsed .sidebar-section-toggle,
.sidebar-collapsed .sidebar-link > span:not(.nav-icon):not(.sidebar-badge),
.sidebar-collapsed .sidebar-badge,
.sidebar-collapsed .sys-status,
.sidebar-collapsed .sidebar-user-info,
.sidebar-collapsed .sidebar-collapse > span:not(.nav-icon) { display: none; }
.sidebar-collapsed .sidebar-group-body { max-height: none !important; }
.sidebar-collapsed .sidebar-logo { justify-content: center; padding-inline: 10px; }
.sidebar-collapsed .sidebar-link { justify-content: center; padding-inline: 0; border-inline-start-width: 0; }
.sidebar-collapsed .sidebar-footer { padding-inline: 10px; }
.sidebar-collapsed .sidebar-user { justify-content: center; }
.sidebar-collapsed .sidebar-avatar { display: none; }
.sidebar-collapsed .sidebar-signout { display: flex; }
.sidebar-collapsed .sidebar-collapse { justify-content: center; }
.sidebar-collapsed .sidebar-collapse .nav-icon { transform: rotate(180deg); }
html[dir="rtl"] .sidebar-collapsed .sidebar-collapse .nav-icon { transform: none; }

.page-header { margin-bottom: 18px; }
.page-title { font-size: 23px; font-weight: 650; letter-spacing: -.015em; }
.page-subtitle { max-width: 820px; margin-top: 3px; color: var(--text-secondary); }
.card, .filter-card, .filter-bar, .form-container, .section-card,
.table-wrapper, .tab-container, .details-panel {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header { border-color: var(--border-light); }
.card-title { color: var(--text-primary); }
.form-control, .form-input, select, textarea {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
  border-radius: var(--radius);
}
.form-control:focus, .form-input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--input-focus-ring);
}
.btn { border-radius: 7px; box-shadow: none; font-weight: 600; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-secondary, .btn-outline { background: var(--surface); border-color: var(--border); color: var(--text-primary); }
.btn-secondary:hover, .btn-outline:hover { background: var(--control-hover); border-color: var(--text-muted); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--control-hover); color: var(--text-primary); }
.admin-table { color: var(--text-primary); }
.admin-table th {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
.admin-table td { border-color: var(--border-light); }
.admin-table tbody tr:hover { background: var(--surface-2); }
.badge { border-radius: 6px; font-weight: 600; }
.badge-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.badge-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.badge-neutral, .badge-secondary { background: var(--neutral-bg); color: var(--neutral); border-color: var(--border); }
.alert { border-radius: var(--radius); box-shadow: none; }
.cell-subtext { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.table-wrapper-plain { border: 0; border-radius: 0; box-shadow: none; }

/* Dashboard */
.dashboard-filter {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.dashboard-filter summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.dashboard-filter summary::-webkit-details-marker { display: none; }
.dashboard-filter summary > span { display: inline-flex; align-items: center; gap: 8px; }
.dashboard-filter summary .nav-icon { width: 18px; }
.dashboard-filter-period { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.dashboard-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(138px, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border-light);
}
.dashboard-filter-grid .form-group { margin: 0; }
.dashboard-filter-actions { display: flex; align-items: end; gap: 8px; }

.operations-status {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) 3fr;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--success);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.operations-status-warning { border-inline-start-color: var(--warning); }
.operations-status-critical { border-inline-start-color: var(--danger); }
.operations-status-primary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-inline-end: 1px solid var(--border-light); }
.operations-status-mark { display: grid; place-items: center; width: 32px; height: 32px; color: var(--success); }
.operations-status-warning .operations-status-mark { color: var(--warning); }
.operations-status-critical .operations-status-mark { color: var(--danger); }
.operations-status-mark .nav-icon, .operations-status-mark svg { width: 24px; height: 24px; }
.operations-status h2 { margin: 0 0 2px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.operations-status strong { font-size: 16px; }
.operations-vitals { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; }
.operations-vitals > div { min-width: 0; padding: 13px 16px; border-inline-end: 1px solid var(--border-light); }
.operations-vitals > div:last-child { border-inline-end: 0; }
.operations-vitals dt { color: var(--text-muted); font-size: 11px; line-height: 1.3; }
.operations-vitals dd { margin: 5px 0 0; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }

.metric-ledger {
  display: grid;
  grid-template-columns: repeat(8, minmax(112px, 1fr));
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.metric-ledger > * {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 82px;
  padding: 13px 14px;
  border-inline-end: 1px solid var(--border-light);
  color: var(--text-primary);
  text-decoration: none;
}
.metric-ledger > *:last-child { border-inline-end: 0; }
.metric-ledger a:hover { background: var(--surface-2); text-decoration: none; }
.metric-ledger span { color: var(--text-muted); font-size: 11px; line-height: 1.3; }
.metric-ledger strong { margin-top: 8px; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.metric-danger { color: var(--danger); }

.currency-ledger, .data-section, .operational-alerts {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.currency-ledger > header, .data-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}
.currency-ledger h2, .data-section-header h2 { margin: 0; color: var(--text-primary); font-size: 14px; font-weight: 650; }
.currency-ledger header p, .data-section-header p { margin: 2px 0 0; color: var(--text-muted); font-size: 11px; }
.currency-ledger header > a, .data-section-header > a { white-space: nowrap; font-size: 12px; font-weight: 600; }
.currency-ledger-table { width: 100%; }
.currency-ledger-row {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.currency-ledger-row:last-child { border-bottom: 0; }
.currency-ledger-row:not(.currency-ledger-head):hover { background: var(--surface-2); text-decoration: none; }
.currency-ledger-row > span:not(:first-child), .currency-ledger-row > strong:not(:first-child) { text-align: end; }
.currency-ledger-head { min-height: 34px; background: var(--surface-2); color: var(--text-muted); font-size: 11px; }

.dashboard-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr); gap: 16px; }
.trend-chart {
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 230px;
  padding: 22px 18px 10px;
  overflow-x: auto;
}
.trend-column {
  display: grid;
  grid-template-rows: 20px 1fr 20px;
  flex: 1 0 34px;
  min-width: 28px;
  color: var(--text-muted);
  text-align: center;
  text-decoration: none;
}
.trend-column:hover { color: var(--text-primary); text-decoration: none; }
.trend-value { font-size: 10px; font-variant-numeric: tabular-nums; }
.trend-track { display: flex; align-items: end; justify-content: center; min-height: 150px; border-bottom: 1px solid var(--border); }
.trend-total { position: relative; display: block; width: min(22px, 72%); min-height: 3px; background: var(--surface-sunken); border-radius: 3px 3px 0 0; }
.trend-paid, .trend-failed { position: absolute; bottom: 0; display: block; width: 50%; }
.trend-paid { inset-inline-start: 0; background: var(--success); }
.trend-failed { inset-inline-end: 0; background: var(--danger); }
.trend-date { align-self: end; font-size: 9px; white-space: nowrap; }
.chart-legend { display: flex; justify-content: center; gap: 18px; padding: 0 16px 14px; color: var(--text-muted); font-size: 10px; }
.chart-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 5px; border-radius: 2px; background: var(--surface-sunken); }
.chart-legend .legend-paid::before { background: var(--success); }
.chart-legend .legend-failed::before { background: var(--danger); }

.status-breakdown { padding: 12px 16px 16px; }
.status-breakdown a { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; min-height: 34px; color: var(--text-primary); text-decoration: none; }
.status-breakdown a:hover .status-breakdown-label { color: var(--accent); }
.status-breakdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.status-breakdown strong { text-align: end; font-size: 12px; font-variant-numeric: tabular-nums; }
.status-progress { width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; background: var(--surface-sunken); }
.status-progress::-webkit-progress-bar { background: var(--surface-sunken); }
.status-progress::-webkit-progress-value { background: var(--text-muted); }
.status-progress::-moz-progress-bar { background: var(--text-muted); }
.status-progress-success::-webkit-progress-value { background: var(--success); }
.status-progress-success::-moz-progress-bar { background: var(--success); }
.status-progress-warning::-webkit-progress-value { background: var(--warning); }
.status-progress-warning::-moz-progress-bar { background: var(--warning); }
.status-progress-danger::-webkit-progress-value { background: var(--danger); }
.status-progress-danger::-moz-progress-bar { background: var(--danger); }
.status-progress-info::-webkit-progress-value { background: var(--info); }
.status-progress-info::-moz-progress-bar { background: var(--info); }
.status-progress-refund::-webkit-progress-value { background: #7b5ba7; }
.status-progress-refund::-moz-progress-bar { background: #7b5ba7; }

.ranked-list { padding: 4px 0; }
.ranked-list > a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 8px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); text-decoration: none; }
.ranked-list > a:last-child { border-bottom: 0; }
.ranked-list > a:hover { background: var(--surface-2); }
.ranked-list > a > span:first-child { min-width: 0; }
.ranked-list strong, .ranked-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked-list strong { font-size: 13px; font-weight: 600; }
.ranked-list small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.ranked-rate { font-weight: 650; font-variant-numeric: tabular-nums; }

.alert-ledger { padding: 4px 0; }
.alert-ledger-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); text-decoration: none; }
.alert-ledger-row:hover { background: var(--surface-2); text-decoration: none; }
.alert-ledger-row > .nav-icon { color: var(--warning); }
.alert-ledger-danger > .nav-icon { color: var(--danger); }
.alert-ledger-row strong, .alert-ledger-row small { display: block; }
.alert-ledger-row strong { font-size: 13px; }
.alert-ledger-row small { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.alert-ledger-row b { color: var(--danger); font-size: 15px; }
.alert-ledger-empty { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 16px; color: var(--success); }
.section-empty { padding: 28px 16px; color: var(--text-muted); text-align: center; }

.refund-filter { margin-bottom: 16px; }
.refund-summary {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.refund-summary > div { min-width: 180px; flex: 1; padding: 14px 16px; border-inline-end: 1px solid var(--border-light); }
.refund-summary > div:last-child { border-inline-end: 0; }
.refund-summary span, .refund-summary strong { display: block; }
.refund-summary span { color: var(--text-muted); font-size: 11px; }
.refund-summary strong { margin-top: 5px; font-size: 20px; font-variant-numeric: tabular-nums; }
.reconciliation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.reconciliation-toolbar p { margin: 0; color: var(--text-secondary); }

.state-page {
  width: min(100%, 620px);
  margin: 10vh auto 0;
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.state-page-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 16px; color: var(--warning); }
.state-page-icon-danger { color: var(--danger); }
.state-page-icon svg { width: 34px; height: 34px; }
.state-page h1 { margin: 0 0 8px; font-size: 22px; }
.state-page p { margin: 0 auto; color: var(--text-secondary); }
.state-page-reference { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; width: fit-content; max-width: 100%; margin: 20px auto; text-align: start; }
.state-page-reference dt { color: var(--text-muted); }
.state-page-reference dd { margin: 0; overflow-wrap: anywhere; }
.state-page-actions { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.auth-page-shell { max-width: 520px; margin-inline: auto; }

.sidebar-scrim { display: none; }

@media (max-width: 1280px) {
  .dashboard-filter-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .metric-ledger { grid-template-columns: repeat(4, 1fr); }
  .metric-ledger > *:nth-child(4n) { border-inline-end: 0; }
  .metric-ledger > *:nth-child(-n+4) { border-bottom: 1px solid var(--border-light); }
  .operations-status { grid-template-columns: 210px 1fr; }
  .operations-vitals { grid-template-columns: repeat(3, 1fr); }
  .operations-vitals > div:nth-child(3) { border-inline-end: 0; }
  .operations-vitals > div:nth-child(-n+3) { border-bottom: 1px solid var(--border-light); }
}

@media (max-width: 980px) {
  .dashboard-analysis-grid { grid-template-columns: 1fr; }
  .operations-status { grid-template-columns: 1fr; }
  .operations-status-primary { border-inline-end: 0; border-bottom: 1px solid var(--border-light); }
  .topbar-search { display: none; }
}

@media (max-width: 899px) {
  .admin-sidebar, html[dir="rtl"] .admin-sidebar { width: min(86vw, 280px); transform: translateX(-102%); }
  html[dir="rtl"] .admin-sidebar { transform: translateX(102%); }
  .admin-sidebar.open, html[dir="rtl"] .admin-sidebar.open { transform: translateX(0); }
  .admin-main, .sidebar-collapsed .admin-main { margin-inline-start: 0; }
  .sidebar-collapsed .admin-sidebar { width: min(86vw, 280px); }
  .sidebar-collapsed .sidebar-brand-copy,
  .sidebar-collapsed .sidebar-section,
  .sidebar-collapsed .sidebar-section-toggle,
  .sidebar-collapsed .sidebar-link > span:not(.nav-icon):not(.sidebar-badge),
  .sidebar-collapsed .sidebar-badge,
  .sidebar-collapsed .sys-status,
  .sidebar-collapsed .sidebar-user-info,
  .sidebar-collapsed .sidebar-collapse > span:not(.nav-icon) { display: initial; }
  .sidebar-collapsed .sidebar-section-toggle { display: flex; }
  .sidebar-collapsed .sidebar-link { justify-content: flex-start; padding-inline: 16px; }
  .sidebar-collapsed .sidebar-logo { justify-content: flex-start; padding-inline: 16px; }
  .sidebar-collapsed .sidebar-user { justify-content: flex-start; }
  .sidebar-collapsed .sidebar-avatar { display: grid; }
  .sidebar-collapse { display: none; }
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    border: 0;
    background: var(--overlay);
    opacity: 0;
    transition: opacity 160ms ease;
  }
  .sidebar-scrim.open { opacity: 1; }
  .sidebar-scrim[hidden] { display: none; }
  .sidebar-mobile-open { overflow: hidden; }
  .admin-content { padding: 20px 18px 32px; }
  .admin-topbar { padding-inline: 16px; }
}

@media (max-width: 720px) {
  .admin-topbar { gap: 8px; padding-inline: 12px; }
  .topbar-breadcrumb,
  .topbar-env-badge,
  [data-density-toggle] { display: none; }
  .topbar-actions { gap: 6px; min-width: 0; }
  .topbar-actions .lang-switcher { gap: 0; }
  .topbar-actions .lang-switcher-btn.active,
  .topbar-actions .lang-switcher-sep { display: none; }
  .topbar-user-chip { padding: 4px; }
  .topbar-user-chip .tu-chev { display: none; }
  .page-header { align-items: stretch; }
  .page-title { font-size: 20px; }
  .dashboard-filter-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-filter-actions { grid-column: 1 / -1; }
  .operations-vitals { grid-template-columns: 1fr 1fr; }
  .operations-vitals > div, .operations-vitals > div:nth-child(3) { border-inline-end: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
  .operations-vitals > div:nth-child(2n) { border-inline-end: 0; }
  .metric-ledger { grid-template-columns: 1fr 1fr; }
  .metric-ledger > * { border-bottom: 1px solid var(--border-light); }
  .metric-ledger > *:nth-child(2n) { border-inline-end: 0; }
  .metric-ledger > *:nth-last-child(-n+2) { border-bottom: 0; }
  .currency-ledger-table { overflow-x: auto; }
  .currency-ledger-row { min-width: 660px; }
  .topbar-breadcrumb { min-width: 0; overflow: hidden; }
  .topbar-breadcrumb .current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 480px) {
  .admin-content { padding-inline: 12px; }
  .dashboard-filter-grid { grid-template-columns: 1fr; }
  .dashboard-filter-actions { grid-column: auto; }
  .dashboard-filter-period { display: none; }
  .operations-vitals { grid-template-columns: 1fr; }
  .operations-vitals > div, .operations-vitals > div:nth-child(2n) { border-inline-end: 0; }
  .metric-ledger { grid-template-columns: 1fr 1fr; }
  .state-page { margin-top: 24px; padding: 24px 18px; }
  .state-page-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar, .admin-main, .sidebar-scrim, .sidebar-group-body, * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ── Theme switch remaps (wins over Fluent hardcodes in admin.css) ── */
.form-input, .form-select, .form-control, .form-textarea,
.filter-form .form-control, .filter-grid .form-control, .filter-form-grid .form-control,
.filter-bar .form-control, select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
  color-scheme: inherit;
}
.form-input:focus, .form-select:focus, .form-control:focus, .form-textarea:focus,
.filter-form .form-control:focus, .filter-grid .form-control:focus, .filter-form-grid .form-control:focus,
.filter-bar .form-control:focus, select:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-ring);
  outline: none;
}

/* Native select / date dropdowns — keep open popup + caret on-theme */
select:not([multiple]),
.form-select:not([multiple]),
select.form-control:not([multiple]),
select.form-select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--input-bg);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-inline-end: 32px;
  color: var(--text-primary);
}
html[dir="rtl"] select:not([multiple]),
html[dir="rtl"] .form-select:not([multiple]),
html[dir="rtl"] select.form-control:not([multiple]),
html[dir="rtl"] select.form-select:not([multiple]) {
  background-position: left 10px center;
}
select option,
.form-select option,
select.form-control option,
select.form-select option {
  background-color: var(--surface);
  color: var(--text-primary);
}
select:disabled,
.form-select:disabled,
select.form-control:disabled {
  opacity: .65;
  cursor: not-allowed;
  background-color: var(--surface-2);
  background-image: none;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: inherit;
  color: var(--text-primary);
  background-color: var(--input-bg);
  border-color: var(--input-border);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .7;
  filter: none;
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}

/* Custom dropdown panels (row actions, notifications) */
.action-menu-panel,
.notif-panel {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
.action-menu-item { color: var(--text-primary); }
.action-menu-item:hover,
.notif-item:hover { background: var(--surface-2); }
.action-menu-trigger {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
.action-menu-trigger:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.modal {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.modal-header, .modal-footer { border-color: var(--border-light); }
.modal-title { color: var(--text-primary); }
.modal-body { color: var(--text-secondary); }
.modal-overlay { background: var(--overlay); }

/* Permission matrix selects inherit app theme tokens */
html[data-theme="dark"] .pm-shell {
  --pm-bg: var(--bg);
  --pm-surface: var(--surface);
  --pm-border: var(--border);
  --pm-border-light: var(--border-light);
  --pm-text: var(--text-primary);
  --pm-text-muted: var(--text-muted);
  --pm-blue: var(--accent);
  --pm-blue-hover: var(--accent-hover);
  --pm-blue-soft: var(--accent-light);
  --pm-success: var(--success);
  --pm-success-bg: var(--success-bg);
  --pm-danger: var(--danger);
  --pm-danger-bg: var(--danger-bg);
  --pm-warn-bg: var(--warning-bg);
  --pm-warn-border: var(--warning-border);
  --pm-shadow: var(--shadow-sm);
}
.pm-select {
  background-color: var(--input-bg, var(--pm-surface));
  color: var(--text-primary, var(--pm-text));
  border-color: var(--input-border, var(--pm-border));
  color-scheme: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-inline-end: 32px;
}
html[dir="rtl"] .pm-select { background-position: left 10px center; }
.pm-select option {
  background-color: var(--surface);
  color: var(--text-primary);
}
.btn-secondary, .btn-outline {
  background: var(--surface);
  border-color: var(--control-border);
  color: var(--text-primary);
}
.btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled) {
  background: var(--control-hover);
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.btn-secondary:active:not(:disabled) { background: var(--control-active); }
.btn-primary, .btn-primary:hover:not(:disabled),
.btn-danger, .btn-danger:hover:not(:disabled),
.btn-warning, .btn-warning:hover:not(:disabled),
.btn-success, .btn-success:hover:not(:disabled),
.page-btn.active { color: var(--on-accent); }
.flyout-close:hover { background: var(--control-hover); color: var(--text-primary); }
.flyout-overlay { background: var(--overlay); }
.sidebar-link:hover { background: var(--sidebar-hover); }
.sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-inline-start-color: var(--sidebar-active-text);
}
.sidebar-link.active .nav-icon { color: var(--sidebar-active-text); }
.sidebar-section-toggle:hover { color: var(--sidebar-text-strong); }
.sys-status-title { color: var(--sidebar-text-strong); }
.sys-status-state { color: var(--success); }
.sys-status-state.warn { color: var(--warning); }
.sys-status-state.crit { color: var(--danger); }
.sys-status-row span { color: var(--sidebar-section); }
.sys-status-row strong { color: var(--sidebar-text); }
.status-Pending { background: var(--status-pending-bg); color: var(--status-pending-fg); border-color: var(--status-pending-border); }
.status-Processing { background: var(--status-processing-bg); color: var(--status-processing-fg); border-color: var(--status-processing-border); }
.status-Cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); border-color: var(--status-cancelled-border); }
.status-Expired { background: var(--status-expired-bg); color: var(--status-expired-fg); border-color: var(--status-expired-border); }
.status-Refunded,
.status-PartiallyRefunded { background: var(--status-refunded-bg); color: var(--status-refunded-fg); border-color: var(--status-refunded-border); }
.badge-accent { background: var(--accent-light); color: var(--accent); border-color: var(--accent-selected); }
.badge-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.diff-before { background: var(--diff-before-bg); color: var(--diff-before-fg); }
.diff-after { background: var(--diff-after-bg); color: var(--diff-after-fg); }
.row-warning { background: var(--row-warning-bg) !important; }
.row-warning:hover { background: var(--row-warning-hover) !important; }
.metric-icon.violet { background: var(--metric-violet-bg); color: var(--metric-violet-fg); }
.secret-box, .secret-reveal, .json-viewer {
  background: var(--secret-bg);
  border-color: var(--secret-border);
  color: var(--secret-muted);
}
.secret-box-header { color: var(--secret-muted); }
.secret-box code, .secret-reveal code, .secret-value { color: var(--secret-code); background: var(--secret-panel); }
.secret-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--skeleton-mid) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
}
.checklist-item.check-pass { border-color: var(--success-border); background: var(--success-bg); }
.checklist-item.check-critical { border-color: var(--danger-border); background: var(--danger-bg); }
.checklist-item.check-warning { border-color: var(--warning-border); background: var(--warning-bg); }
.checklist-item.check-info { border-color: var(--info-border); background: var(--info-bg); }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-muted { color: var(--text-muted) !important; }
.form-hint code,
.form-note code,
.badge-code,
.cell-subtext code {
  background: var(--code-bg);
  color: var(--code-color);
  border: 1px solid var(--code-border);
}
.login-page { background: var(--bg); color: var(--text-primary); }
.login-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding-top: 52px;
}
.login-theme-toggle {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 2;
}
.login-page .login-lang-switcher {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  margin: 0;
}
.login-footer-note {
  margin-top: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
}
.login-logo-icon {
  background: var(--accent);
  color: var(--on-accent);
}
[data-theme-toggle] .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
[data-theme-toggle] .theme-icon-sun { display: none; }
[data-theme-toggle] .theme-icon-moon { display: inline-flex; }
html[data-theme="dark"] [data-theme-toggle] .theme-icon-sun { display: inline-flex; }
html[data-theme="dark"] [data-theme-toggle] .theme-icon-moon { display: none; }
[data-theme-toggle] .theme-icon svg { width: 18px; height: 18px; }

@media print {
  .admin-sidebar, .admin-topbar, .dashboard-filter, .btn, .sidebar-scrim { display: none !important; }
  .admin-main { margin: 0 !important; }
  .admin-content { width: 100%; max-width: none; padding: 0; }
  body { background: #fff; color: #000; }
  .currency-ledger, .data-section, .operational-alerts, .operations-status, .metric-ledger { box-shadow: none; break-inside: avoid; }
}