/* ─────────────────────────────────────────────────────────────────────────
   PaperTrader PRO — Admin Panel Design System
   Load this AFTER Bootstrap and BEFORE any page-specific <style> block, e.g.:
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="/assets/admin.css">

   Design principles (keep new pages consistent with these):
   - One accent color (--pt-primary) used for all primary actions/links/active
     states. Semantic colors (success/warning/danger) only for their meaning —
     never decoratively.
   - Flat cards, one shadow depth, one border-radius scale. No gradients on
     data surfaces (a metric is not a marketing banner).
   - Page pattern: <div class="pt-page-header"> title + count badge + one
     primary action, then content. Every list page should look like this.
   - Buttons: Bootstrap's btn-primary/btn-outline-* classes ARE the palette —
     don't invent one-off colors (e.g. no more `color: aquamarine`).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --pt-primary:       #2563eb;
  --pt-primary-dark:  #1d4ed8;
  --pt-primary-soft:  #eff6ff;
  --pt-success:       #16a34a;
  --pt-success-soft:  #f0fdf4;
  --pt-warning:       #d97706;
  --pt-warning-soft:  #fffbeb;
  --pt-danger:        #dc2626;
  --pt-danger-soft:   #fef2f2;
  --pt-info:          #0891b2;

  --pt-ink:           #111827;
  --pt-ink-muted:     #6b7280;
  --pt-ink-faint:     #9ca3af;
  --pt-border:        #e5e7eb;
  --pt-surface:       #ffffff;
  --pt-bg:            #f8f9fb;

  --pt-radius-sm:     6px;
  --pt-radius:        10px;
  --pt-radius-lg:     14px;
  --pt-shadow:        0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --pt-shadow-md:     0 4px 12px rgba(16, 24, 40, .08);
}

body {
  background: var(--pt-bg);
  color: var(--pt-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

a { color: var(--pt-primary); }
a:hover { color: var(--pt-primary-dark); }

/* ── Bootstrap primary → house accent (keeps btn-primary/text-primary/etc
      consistent with the rest of the palette without editing every page) ── */
.btn-primary {
  background-color: var(--pt-primary); border-color: var(--pt-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--pt-primary-dark); border-color: var(--pt-primary-dark);
}
.btn-outline-primary {
  color: var(--pt-primary); border-color: var(--pt-primary);
}
.btn-outline-primary:hover {
  background-color: var(--pt-primary); border-color: var(--pt-primary);
}
.text-primary { color: var(--pt-primary) !important; }
.bg-primary   { background-color: var(--pt-primary) !important; }

/* ── Page header pattern ──────────────────────────────────────────────────
   <div class="pt-page-header">
     <div class="pt-page-title">Title <span class="badge pt-badge-count">12</span></div>
     <div class="pt-page-actions">...buttons...</div>
   </div>
*/
.pt-page-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 20px;
}
.pt-page-title {
  font-size: 1.15rem; font-weight: 700; color: var(--pt-ink);
  display: flex; align-items: center; gap: 10px;
}
.pt-badge-count {
  background: var(--pt-primary-soft); color: var(--pt-primary);
  font-weight: 600; font-size: .78rem; padding: 3px 10px; border-radius: 20px;
}
.pt-sync-status {
  font-size: .78rem; color: var(--pt-ink-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.pt-sync-status:hover { color: var(--pt-primary); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.pt-card, .section-card, .card {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
}
.card { border-radius: var(--pt-radius); }

/* ── Standard stat card (replaces gradient "metric cards") ───────────────── */
.pt-stat-card {
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  box-shadow: var(--pt-shadow);
}
.pt-stat-card .pt-stat-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; margin-bottom: 10px;
}
.pt-stat-card .pt-stat-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pt-ink-muted);
}
.pt-stat-card .pt-stat-value {
  font-size: 1.7rem; font-weight: 700; color: var(--pt-ink); line-height: 1.15;
}
.pt-stat-card .pt-stat-sub { font-size: .78rem; color: var(--pt-ink-faint); }

.pt-icon-blue    { background: var(--pt-primary-soft); color: var(--pt-primary); }
.pt-icon-green   { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-icon-amber   { background: var(--pt-warning-soft); color: var(--pt-warning); }
.pt-icon-red     { background: var(--pt-danger-soft);  color: var(--pt-danger); }
.pt-icon-gray    { background: #f3f4f6; color: var(--pt-ink-muted); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table thead th {
  background: #f9fafb !important; color: var(--pt-ink-muted) !important;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--pt-border) !important;
}
.table-dark thead, .table thead.table-dark {
  background: #f9fafb; color: var(--pt-ink-muted);
}
.table-dark thead tr th {
  background: #f9fafb; color: var(--pt-ink-muted); border-color: var(--pt-border);
}
.table td, .table th { vertical-align: middle; font-size: .875rem; }
.table-hover tbody tr:hover { background-color: var(--pt-primary-soft); }

/* ── Badges (semantic only) ──────────────────────────────────────────────── */
.badge.bg-success { background-color: var(--pt-success) !important; }
.badge.bg-danger  { background-color: var(--pt-danger) !important; }
.badge.bg-warning { background-color: var(--pt-warning) !important; color: #fff !important; }
.badge.bg-secondary { background-color: #6b7280 !important; }

/* ── uid-chip (used on Users/Transactions/Subscriptions) ─────────────────── */
.uid-chip {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; font-family: 'SFMono-Regular', Consolas, monospace; font-size: .78rem;
  padding: 3px 8px; border-radius: var(--pt-radius-sm);
  background: #f3f4f6; border: 1px solid var(--pt-border);
  transition: background .15s;
}
.uid-chip:hover  { background: var(--pt-primary-soft); border-color: var(--pt-primary); }
.uid-chip.copied { background: var(--pt-success-soft); border-color: var(--pt-success); }
.uid-chip .copy-icon { font-size: .68rem; opacity: .55; }

/* ── DataTables toolbar buttons — one consistent pill style everywhere,
      replaces the ad-hoc (and in a few pages literally `color: aquamarine`)
      button CSS that used to be copy-pasted per page. ───────────────────── */
.dt-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dt-buttons .dt-button,
.dt-buttons .btn-filters,
.dt-buttons .btn-csv {
  display: inline-flex !important; align-items: center; gap: 5px;
  padding: 5px 14px; font-size: .8rem; font-weight: 500;
  border-radius: 20px; border: 1px solid var(--pt-border);
  background: var(--pt-surface); color: var(--pt-ink-muted) !important;
  cursor: pointer; white-space: nowrap; text-decoration: none !important;
  transition: all .15s;
}
.dt-buttons .dt-button:hover,
.dt-buttons .btn-filters:hover {
  background: var(--pt-ink); color: #fff !important; border-color: var(--pt-ink);
}
.dt-buttons .btn-filters.active {
  background: var(--pt-ink); color: #fff !important; border-color: var(--pt-ink);
}
.dt-buttons .dt-button.buttons-csv,
.dt-buttons .btn-csv {
  border-color: var(--pt-success); background: var(--pt-success); color: #fff !important;
}
.dt-buttons .dt-button.buttons-csv:hover,
.dt-buttons .btn-csv:hover {
  background: #128a3e; border-color: #128a3e; color: #fff !important;
}

/* ── Filter panel ─────────────────────────────────────────────────────────── */
.filter-panel {
  background: var(--pt-surface); border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius); box-shadow: var(--pt-shadow);
}
.filter-panel label { font-size: .76rem; font-weight: 600; color: var(--pt-ink-muted); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--pt-primary);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}
.form-label { font-weight: 600; font-size: .85rem; color: var(--pt-ink); }

/* ── Section headers (used inside cards) ─────────────────────────────────── */
.section-card .section-header {
  padding: 16px 20px; border-bottom: 1px solid var(--pt-border);
  display: flex; justify-content: space-between; align-items: center;
}
.section-card .section-header h6 { margin: 0; font-weight: 700; }

/* ── Alerts — flatten Bootstrap's slightly saturated defaults ────────────── */
.alert-success { background: var(--pt-success-soft); border-color: #bbf7d0; color: #14532d; }
.alert-danger  { background: var(--pt-danger-soft);  border-color: #fecaca; color: #7f1d1d; }
.alert-warning { background: var(--pt-warning-soft); border-color: #fde68a; color: #78350f; }
.alert-info    { background: var(--pt-primary-soft); border-color: #bfdbfe; color: #1e3a8a; }