/* pro-redesign.css - Unified PR Component System
   Tokens now bridge to the Bicrypto5 HSL design system loaded via bicrypto5.css */
:root {
  /* Brand accents — Bicrypto5 primary palette */
  --pr-purple: hsl(var(--primary));
  --pr-purple-light: hsl(var(--primary) / 0.86);
  --pr-gradient-purple: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.84) 100%);
  --pr-gradient-purple-hover: linear-gradient(135deg, hsl(var(--primary) / 0.94) 0%, hsl(var(--primary) / 0.78) 100%);
  --pr-purple-soft: hsl(var(--primary) / 0.12);
  --pr-green: #0ecb81;
  --pr-green-soft: rgba(14, 203, 129, 0.12);
  --pr-red: #f6465d;
  --pr-red-soft: rgba(246, 70, 93, 0.12);
  --pr-amber: #f0b90b;
  --pr-amber-soft: rgba(240, 185, 11, 0.12);

  /* Surface / structure — pulled from Bicrypto5 tokens */
  --pr-bg: hsl(var(--background));
  --pr-surface: hsl(var(--card));
  --pr-border: hsl(var(--border));
  --pr-text: hsl(var(--foreground));
  --pr-muted: hsl(var(--muted-foreground));
  --pr-subtle: hsl(var(--muted-foreground));
  --pr-input-bg: hsl(var(--input, var(--background)));
  --pr-hover: hsl(var(--accent));

  --pr-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --pr-shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --pr-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pr-radius: calc(var(--radius, 0.5rem) - 2px);
  --pr-radius-sm: calc(var(--radius, 0.5rem) - 4px);
  --pr-radius-lg: var(--radius, 0.5rem);
}
html.dark {
  /* Dark surface overrides — Bicrypto5 zinc-950 family */
  --pr-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  --pr-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.pr-page-wrap {
  padding: 1rem;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .pr-page-wrap {
    padding: 1.5rem 2rem;
  }
}
@media (min-width: 1024px) {
  .pr-page-wrap {
    padding: 2rem 2.5rem;
  }
}
.pr-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.pr-page-header-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.pr-page-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pr-page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pr-text);
  margin: 0;
  line-height: 1.3;
}
.pr-page-subtitle {
  font-size: 0.8125rem;
  color: var(--pr-muted);
  margin: 0.125rem 0 0;
}
.pr-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--pr-radius-sm);
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  color: var(--pr-text);
  text-decoration: none;
  transition:
    background 0.15s,
    transform 0.15s;
  flex-shrink: 0;
}
.pr-back-btn:hover {
  background: var(--pr-hover);
  transform: translateX(-2px);
}
.pr-back-btn ion-icon {
  font-size: 1.125rem;
}
.pr-content-grid {
  display: grid;
  gap: 1.25rem;
}
.pr-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--pr-radius);
  padding: 1.25rem;
  box-shadow: var(--pr-shadow-sm);
  color: hsl(var(--card-foreground));
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}
.pr-card:hover {
  box-shadow: var(--pr-shadow);
}
.pr-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.125rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--pr-border);
}
.pr-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pr-text);
  margin: 0;
}
.pr-card-title ion-icon {
  font-size: 1.125rem;
}
.pr-stats-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.pr-stats-row.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.pr-stats-row.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.pr-stats-row.cols-4 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .pr-stats-row.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 480px) {
  .pr-stats-row.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pr-stat-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--pr-radius);
  padding: 1rem 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  box-shadow: var(--pr-shadow-sm);
  color: hsl(var(--card-foreground));
}
.pr-stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pr-stat-icon ion-icon {
  font-size: 1.375rem;
}
.pr-stat-label {
  font-size: 0.75rem;
  color: var(--pr-muted);
  font-weight: 500;
  margin-bottom: 0.1875rem;
}
.pr-stat-value {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--pr-text);
  line-height: 1.2;
}
.pr-stat-change {
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.1875rem;
}
.pr-stat-change.up {
  color: var(--pr-green);
}
.pr-stat-change.down {
  color: var(--pr-red);
}
.pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.375rem;
  /* border-radius: var(--pr-radius-sm); */
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.pr-btn:active {
  transform: scale(0.97);
}
.pr-btn ion-icon {
  font-size: 1rem;
}
.pr-btn.w-full {
  width: 100%;
}
.pr-btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--pr-shadow-sm);
}
.pr-btn-primary:hover {
  background: hsl(var(--primary) / 0.9);
}
.pr-btn-secondary {
  background: var(--pr-surface);
  color: var(--pr-text);
  border: 1px solid var(--pr-border);
}
.pr-btn-secondary:hover {
  background: var(--pr-hover);
}
.pr-btn-success {
  background: var(--pr-green);
  color: #052e16;
}
.pr-btn-danger {
  background: var(--pr-red);
  color: #fff;
}
.pr-btn-amber {
  background: var(--pr-gradient-purple);
  color: #ffffff;
}
.pr-btn-amber:hover {
  background: var(--pr-gradient-purple-hover);
  box-shadow: 0 4px 16px hsl(var(--primary) / 0.3);
}
.pr-btn-sm {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
}
.pr-btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1rem;
}
.pr-btn[disabled],
.pr-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.pr-form-group {
  margin-bottom: 1.125rem;
}
.pr-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--pr-text);
  margin-bottom: 0.5rem;
}
.pr-label-optional {
  color: var(--pr-muted);
  font-weight: 400;
}
.pr-input {
  width: 100%;
  background: var(--pr-input-bg);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-sm);
  padding: 0.6875rem 0.875rem;
  font-size: 0.875rem;
  color: var(--pr-text);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-sizing: border-box;
}
.pr-input::placeholder {
  color: var(--pr-subtle);
}
.pr-input:focus {
  border-color: var(--pr-purple);
  box-shadow: 0 0 0 3px var(--pr-purple-soft);
}
.pr-input-wrap {
  position: relative;
}
.pr-input-prefix {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pr-muted);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.pr-input-prefix ion-icon {
  font-size: 1rem;
}
.pr-input.has-prefix {
  padding-left: 2.5rem;
}
.pr-hint {
  font-size: 0.75rem;
  color: var(--pr-muted);
  margin-top: 0.375rem;
}
.pr-hint strong {
  color: var(--pr-text);
}
.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pr-badge-success {
  background: var(--pr-green-soft);
  color: var(--pr-green);
}
.pr-badge-danger {
  background: var(--pr-red-soft);
  color: var(--pr-red);
}
.pr-badge-warning {
  background: var(--pr-amber-soft);
  color: var(--pr-amber);
}
.pr-badge-purple {
  background: var(--pr-purple-soft);
  color: var(--pr-purple);
}
.pr-badge-muted {
  background: rgba(112, 122, 138, 0.12);
  color: var(--pr-muted);
}
.pr-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--pr-radius-sm);
  border-left: 3px solid;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}
.pr-alert ion-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}
.pr-alert.warning {
  background: var(--pr-amber-soft);
  border-color: var(--pr-amber);
  color: var(--pr-text);
}
.pr-alert.warning ion-icon {
  color: var(--pr-amber);
}
.pr-alert.danger {
  background: var(--pr-red-soft);
  border-color: var(--pr-red);
  color: var(--pr-text);
}
.pr-alert.danger ion-icon {
  color: var(--pr-red);
}
.pr-alert.success {
  background: var(--pr-green-soft);
  border-color: var(--pr-green);
  color: var(--pr-text);
}
.pr-alert.success ion-icon {
  color: var(--pr-green);
}
.pr-alert.info {
  background: var(--pr-purple-soft);
  border-color: var(--pr-purple);
  color: var(--pr-text);
}
.pr-alert.info ion-icon {
  color: var(--pr-purple);
}
.pr-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pr-list-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--pr-border);
  transition: background 0.15s;
}
.pr-list-item:last-child {
  border-bottom: none;
}
.pr-list-item-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pr-list-item-icon ion-icon {
  font-size: 1.0625rem;
}
.pr-list-item-body {
  flex: 1;
  min-width: 0;
}
.pr-list-item-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-list-item-sub {
  font-size: 0.75rem;
  color: var(--pr-muted);
  margin-top: 0.0625rem;
}
.pr-list-item-meta {
  text-align: right;
  flex-shrink: 0;
}
.pr-list-item-amount {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pr-text);
}
.pr-list-item-date {
  font-size: 0.6875rem;
  color: var(--pr-muted);
  margin-top: 0.125rem;
}
.pr-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--pr-hover);
  padding: 0.25rem;
  border-radius: var(--pr-radius-sm);
  margin-bottom: 1.25rem;
}
.pr-tab {
  flex: 1;
  padding: 0.5rem 0.875rem;
  border-radius: calc(var(--pr-radius-sm) - 2px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--pr-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: center;
  transition: all 0.15s;
}
.pr-tab.active {
  background: var(--pr-surface);
  color: var(--pr-text);
  box-shadow: var(--pr-shadow);
}
.pr-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--pr-muted);
}
.pr-empty ion-icon {
  font-size: 3rem;
  display: block;
  margin: 0 auto 0.75rem;
  color: var(--pr-border);
}
.pr-empty h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pr-text);
  margin: 0 0 0.375rem;
}
.pr-empty p {
  font-size: 0.8125rem;
  margin: 0;
}
.pr-method-card {
  background: var(--pr-surface);
  border: 2px solid var(--pr-border);
  border-radius: var(--pr-radius);
  padding: 1rem 1.125rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
}
.pr-method-card:hover {
  border-color: var(--pr-purple);
  box-shadow: 0 0 0 3px var(--pr-purple-soft);
}
.pr-method-card.active {
  border-color: var(--pr-purple);
  background: var(--pr-purple-soft);
}
.pr-method-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pr-method-icon ion-icon {
  font-size: 1.375rem;
}
.pr-method-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pr-text);
}
.pr-method-label {
  font-size: 0.75rem;
  color: var(--pr-muted);
  margin-top: 0.0625rem;
}
.pr-table-wrap {
  overflow-x: auto;
}
.pr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.pr-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pr-muted);
  border-bottom: 1px solid var(--pr-border);
  white-space: nowrap;
}
.pr-table td {
  padding: 0.875rem 1rem;
  color: var(--pr-text);
  border-bottom: 1px solid var(--pr-border);
  vertical-align: middle;
}
.pr-table tr:last-child td {
  border-bottom: none;
}
.pr-table tr:hover td {
  background: var(--pr-hover);
}
.pr-divider {
  height: 1px;
  background: var(--pr-border);
  margin: 1rem 0;
}
.pr-upload-box {
  border: 2px dashed var(--pr-border);
  border-radius: var(--pr-radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--pr-muted);
}
.pr-upload-box:hover {
  border-color: var(--pr-purple);
  background: var(--pr-purple-soft);
  color: var(--pr-purple);
}
.pr-upload-box ion-icon {
  font-size: 2.5rem;
  display: block;
  margin: 0 auto 0.625rem;
}
.pr-upload-box p {
  font-size: 0.875rem;
  margin: 0;
}
.pr-toggle {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
}
.pr-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.pr-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--pr-border);
  border-radius: 100px;
  transition: 0.2s;
}
.pr-toggle input:checked + .pr-toggle-slider {
  background: var(--pr-purple);
}
.pr-toggle input:checked + .pr-toggle-slider:before {
  transform: translateX(1.25rem);
}
.pr-skeleton {
  background: linear-gradient(
    90deg,
    var(--pr-border) 25%,
    var(--pr-hover) 50%,
    var(--pr-border) 75%
  );
  background-size: 200% 100%;
  animation: pr-shimmer 1.4s infinite;
  border-radius: var(--pr-radius-sm);
}
@keyframes pr-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* Scrollbar — defer to bicrypto5.css (8px, rounded with light/dark) */
@media (max-width: 767px) {
  .pr-hide-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .pr-show-mobile-only {
    display: none !important;
  }
}

/* ── Light Mode Professional Refinements ─────────────────────── */

/* Sharper card borders in light */
:root .pr-card {
  border-color: #e2e5ea;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.05),
    0 2px 12px rgba(0, 0, 0, 0.04);
}
:root .pr-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Crisper stat cards in light */
:root .pr-stat-card {
  border-color: #e2e5ea;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Slightly elevated header in light mode */
:root #mainHeader {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 1px 6px rgba(0, 0, 0, 0.04);
}

/* Better table stripes in light */
:root .pr-table tr:hover td {
  background: #f7f8fa;
}

/* Professional focus ring */
:root .pr-input:focus {
  border-color: var(--pr-purple);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

/* More visible tab active state in light */
:root .pr-tab.active {
  background: #ffffff;
  color: #1e2026;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Upload box polish */
:root .pr-upload-box:hover {
  background: hsl(var(--primary) / 0.04);
}

/* ── Dark Mode Overrides ─────────────────────────────────────── */
html.dark .pr-card {
  border-color: var(--pr-border);
  box-shadow: var(--pr-shadow);
}
html.dark .pr-card:hover {
  box-shadow: var(--pr-shadow-lg);
}
html.dark #mainHeader {
  box-shadow: none;
}