/**
 * Lorapok ReportKit
 * Copyright (c) 2026 Lorapok Labs (https://lorapok.tech)
 * Licensed under the Lorapok Non-Commercial License 1.0 (Lorapok-NCL-1.0)
 *
 * reportkit.css — ReportKit stylesheet.
 */

:root {
  --rk-ink: #1f2f38;
  --rk-muted: #5a7385;
  --rk-line: #d5dde3;
  --rk-surface: #ffffff;
  --rk-bg: #f4f6f7;
  --rk-accent: #0b7a4b;
  --rk-accent-light: #22a06b;
  --rk-accent-deep: #096640;
  --rk-accent-soft: #e6f5ee;
  --rk-fetch: #2f6fae;
  --rk-csv: #1f8a5a;
  --rk-pdf: #c0392b;
  --rk-send: #6c5ce7;
  --rk-cancel: #d9822b;
  --rk-danger: #c62828;
  --rk-warn: #f0ad4e;
  --rk-font-body: "Manrope", Helvetica, Arial, sans-serif;
  --rk-font-head: "Sora", Helvetica, Arial, sans-serif;
  --rk-radius: 10px;
  --rk-shadow: 0 1px 2px rgba(31, 47, 56, 0.04);
}

/* Google fonts are optional — host may load Manrope/Sora or rely on fallbacks */

.rk-page {
  font-family: var(--rk-font-body);
  color: var(--rk-ink);
  background: var(--rk-bg);
  position: relative;
  min-height: 100%;
}

.rk-page-head {
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-top: 3px solid var(--rk-accent);
  border-radius: var(--rk-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--rk-shadow);
}

.rk-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78909c;
  margin-bottom: 6px;
}

.rk-title {
  font-family: var(--rk-font-head);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--rk-ink);
}

.rk-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rk-accent-soft);
  color: var(--rk-accent-deep);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.rk-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--rk-muted);
}

.rk-filter-pan,
.search-pan {
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--rk-shadow);
}

.rk-filter-summary {
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}

.rk-filter-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.rk-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78909c;
}

.rk-meta-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--rk-ink);
}

.rk-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.rk-kpi-card {
  flex: 1 1 160px;
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-left: 4px solid #90a4ae;
  border-radius: var(--rk-radius);
  padding: 12px 14px;
  box-shadow: var(--rk-shadow);
}

.rk-kpi-card.is-good { border-left-color: var(--rk-accent); }
.rk-kpi-card.is-bad { border-left-color: var(--rk-danger); }
.rk-kpi-card.is-warn { border-left-color: var(--rk-warn); }

.rk-kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #78909c;
}

.rk-kpi-value {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.rk-kpi-hint {
  margin-top: 4px;
  font-size: 11px;
  color: #90a4ae;
}

.rk-panel {
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--rk-shadow);
}

.rk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 3px solid var(--rk-accent);
  border-bottom: 1px solid var(--rk-line);
}

.rk-panel-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.rk-panel-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rk-panel-body {
  padding: 12px 14px;
}

.rk-table-x {
  overflow-x: auto;
}

.rk-btn {
  display: inline-block;
  border: 1px solid var(--rk-line);
  background: var(--rk-surface);
  color: var(--rk-ink);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}

.rk-btn:hover {
  border-color: #b0bec5;
}

.rk-btn-primary {
  background: var(--rk-accent);
  border-color: var(--rk-accent);
  color: #fff;
}

.rk-btn-primary:hover {
  background: var(--rk-accent-deep);
  border-color: var(--rk-accent-deep);
  color: #fff;
}

.rk-btn-ghost {
  background: transparent;
}

.rk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

.rk-send-panel {
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.rk-howto {
  background: var(--rk-surface);
  border: 1px dashed var(--rk-line);
  border-radius: var(--rk-radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  color: var(--rk-muted);
  font-size: 13px;
}

.rk-sync-loading,
.rk-async-loading {
  position: absolute;
  inset: 0;
  background: rgba(244, 246, 247, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.rk-sync-loading.is-visible,
.rk-async-loading.is-visible {
  display: flex;
}

.rk-sync-loading-inner,
.rk-async-loading-inner {
  font-weight: 700;
  color: var(--rk-accent-deep);
  text-align: center;
  padding: 16px 20px;
  background: var(--rk-surface);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  box-shadow: var(--rk-shadow);
  min-width: 240px;
}

.rk-async-mascot {
  display: block;
  margin: 0 auto 12px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .rk-async-mascot {
    display: none;
  }
}

.rk-progress {
  margin-top: 10px;
  height: 6px;
  background: var(--rk-accent-soft);
  border-radius: 999px;
  overflow: hidden;
}

.rk-progress-bar {
  height: 100%;
  width: 0;
  background: var(--rk-accent);
  transition: width 0.2s ease;
}

/* DataTables soft alignment inside panels */
.rk-panel .dataTables_wrapper {
  font-size: 13px;
}

.rk-panel table.dataTable thead th {
  border-bottom: 1px solid var(--rk-line) !important;
  color: var(--rk-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Toast host (ReportKit.ui.toast fallback) */
.rk-toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}

.rk-toast {
  padding: 10px 14px;
  border-radius: var(--rk-radius);
  border: 1px solid var(--rk-line);
  background: var(--rk-surface);
  color: var(--rk-ink);
  box-shadow: var(--rk-shadow);
  font-size: 13px;
}

.rk-toast--warn {
  border-color: #f59e0b;
  background: #fffbeb;
}

.rk-toast--info {
  border-color: var(--rk-accent);
  background: var(--rk-accent-soft);
}

/* Activity log (ReportKit.log) */
.rk-activity-log-panel .rk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rk-activity-log {
  max-height: 220px;
  overflow: auto;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.rk-log-entry {
  padding: 4px 0;
  border-bottom: 1px solid var(--rk-line);
}

.rk-log-ts {
  color: var(--rk-muted);
  margin-right: 6px;
}

.rk-log-empty {
  color: var(--rk-muted);
  font-style: italic;
}

.rk-log-entry--prepare { color: var(--rk-accent); }
.rk-log-entry--export { color: #2563eb; }
.rk-log-entry--mail { color: #7c3aed; }
.rk-log-entry--browse { color: #0f766e; }

/* Table loading overlay during browse AJAX */
.rk-table-loader {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4;
  font-size: 13px;
  color: var(--rk-muted);
}

.rk-table-loader.is-visible {
  display: flex;
}

.rk-ledger-table-wrap {
  position: relative;
}

.rk-ledger-table thead th {
  white-space: nowrap;
}

.rk-ledger-table .rk-money,
.rk-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rk-ledger-table--enhanced {
  max-height: 70vh;
  overflow: auto;
}

.rk-ledger-table--enhanced .rk-ledger-table thead th {
  position: sticky;
  top: 0;
  background: var(--rk-surface);
  z-index: 2;
}

.rk-filter-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  background: var(--rk-surface);
}

.rk-filter-totals-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rk-muted);
}

.rk-filter-totals-value {
  font-size: 16px;
  font-weight: 700;
}

.rk-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.rk-action-bar.is-disabled .rk-btn:not(.rk-btn-fetch) {
  opacity: 0.55;
}

.rk-btn-fetch { background: var(--rk-fetch, #2f6fae); color: #fff; }
.rk-btn-excel { background: var(--rk-csv, #1f8a5a); color: #fff; }
.rk-btn-csv { background: var(--rk-accent); color: #fff; }
.rk-btn-pdf { background: var(--rk-pdf, #c0392b); color: #fff; }
.rk-btn-send { background: var(--rk-send, #6c5ce7); color: #fff; }

.rk-txn-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--rk-line);
  color: var(--rk-ink);
}

.rk-txn-pill--recharge { background: #dbeafe; color: #1d4ed8; }
.rk-txn-pill--sell,
.rk-txn-pill--ticket_sell { background: #dcfce7; color: #166534; }
.rk-txn-pill--cancel,
.rk-txn-pill--ticket_cancel { background: #fee2e2; color: #991b1b; }
.rk-txn-pill--default { background: #f3f4f6; color: #374151; }

.rk-send-steps {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.rk-send-step {
  flex: 1;
  text-align: center;
  font-size: 11px;
  padding: 6px;
  border-radius: var(--rk-radius);
  background: var(--rk-line);
  color: var(--rk-muted);
}

.rk-send-step.is-active {
  background: var(--rk-accent-soft);
  color: var(--rk-accent);
  font-weight: 600;
}

.rk-alert {
  padding: 10px 14px;
  border-radius: var(--rk-radius);
  border: 1px solid var(--rk-line);
  margin-bottom: 12px;
}

.rk-alert--error { border-color: #dc2626; background: #fef2f2; }
.rk-alert--success { border-color: var(--rk-accent); background: var(--rk-accent-soft); }

.rk-download-status {
  margin-bottom: 12px;
}

.rk-download-status.is-hidden {
  display: none;
}

.rk-download-status-bar {
  height: 6px;
  background: var(--rk-line);
  border-radius: 999px;
  overflow: hidden;
}

.rk-download-status-fill {
  height: 100%;
  background: var(--rk-accent);
  transition: width 0.2s ease;
}

.rk-download-status-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
}

.rk-download-status-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.rk-async-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--rk-muted);
  margin: 8px 0;
}

.rk-btn-cancel {
  background: var(--rk-cancel);
  color: #fff;
  margin-top: 10px;
}

.rk-send-steps {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.rk-send-step {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rk-line);
  color: var(--rk-muted);
}

.rk-send-step.is-active {
  border-color: var(--rk-send);
  color: var(--rk-send);
  font-weight: 700;
}

.rk-send-step.is-done {
  border-color: var(--rk-accent);
  color: var(--rk-accent);
}

.rk-send-progress {
  margin-bottom: 12px;
}

.rk-send-progress.is-hidden {
  display: none;
}

.rk-send-progress-bar {
  height: 6px;
  background: var(--rk-line);
  border-radius: 999px;
  overflow: hidden;
}

.rk-send-progress-fill {
  height: 100%;
  background: var(--rk-send);
  transition: width 0.15s ease;
}

.rk-notify-bell {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rk-line);
  background: var(--rk-surface);
}

.rk-notify-bell--ping { background: var(--rk-warn); }
.rk-notify-bell--success { background: var(--rk-accent); }
.rk-notify-bell--error { background: var(--rk-danger); }

.rk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rk-howto-panel {
  margin-top: 16px;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  padding: 10px 14px;
}

.rk-howto-summary {
  cursor: pointer;
  font-weight: 600;
}