/**
 * P2P theme layer
 *
 * Design tokens live in css/default.css (:root). This file adds scoped aliases
 * and reusable component classes for .tailwind-p2p and .p2p-container shells.
 *
 * To retheme P2P, change values in :root — or override on a wrapper:
 *   <div class="tailwind-p2p" style="--p2p-brand: #0066cc">
 */

.tailwind-p2p,
.p2p-container,
.transactions {
  --p2p-brand: var(--rarebl-brand);
  --p2p-brand-hover: var(--rarebl-brand-hover);
  --p2p-brand-active: var(--rarebl-brand-active);
  --p2p-deep: var(--rarebl-deep);
  --p2p-muted: var(--rarebl-muted);
  --p2p-surface: var(--rarebl-surface);
  --p2p-label: var(--rarebl-label);
  --p2p-placeholder: var(--rarebl-placeholder);
  --p2p-hint: var(--rarebl-hint);
  --p2p-card-shadow: var(--rarebl-card-shadow);
  --p2p-brand-tint: var(--rarebl-brand-tint);
  --p2p-brand-tint-strong: var(--rarebl-brand-tint-strong);
  --p2p-brand-ring: var(--rarebl-brand-ring);
  --p2p-radius-md: var(--rarebl-radius-md);
  --p2p-radius-lg: var(--rarebl-radius-lg);
  --p2p-radius-xl: var(--rarebl-radius-xl);
  --p2p-radius-btn: var(--rarebl-radius-btn);
  --p2p-badge-alert: var(--rarebl-badge-alert);
  --p2p-inset-surface: var(--rarebl-inset-surface);
  --p2p-warning: var(--rarebl-warning);
  --p2p-warning-text: var(--rarebl-warning-text);
  --p2p-warning-tint: var(--rarebl-warning-tint);
  --p2p-text-primary: var(--rarebl-deep);
  --p2p-text-secondary: var(--rarebl-muted);
  --p2p-border: var(--rarebl-border);
  --p2p-border-strong: var(--rarebl-border-strong);
  --p2p-border-focus: var(--rarebl-border-focus);
  --p2p-input-radius: var(--rarebl-input-radius);
}

.tailwind-p2p {
  color: var(--p2p-text-primary);
}

/* -------------------------------------------------------------------------- */
/* Typography — matches main app (deep blue + muted gray, not burgundy)      */
/* -------------------------------------------------------------------------- */

.p2p-text-brand,
.p2p-text-primary {
  color: var(--p2p-text-primary);
}

.p2p-text-deep {
  color: var(--p2p-text-primary);
}

.p2p-text-label,
.p2p-subheading {
  color: var(--p2p-text-secondary);
}

.p2p-text-muted {
  color: var(--p2p-placeholder);
}

.p2p-text-hint {
  color: var(--p2p-hint);
}

.p2p-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--p2p-text-secondary);
  margin-bottom: 0.25rem;
}

.p2p-field-hint {
  font-size: 0.75rem;
  color: var(--p2p-placeholder);
  margin-top: 0.25rem;
}

.p2p-field-value {
  color: var(--p2p-text-primary);
  font-weight: 600;
}

.p2p-heading {
  color: var(--p2p-text-primary);
  font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* Surfaces & cards                                                           */
/* -------------------------------------------------------------------------- */

.p2p-card {
  border: 2px solid var(--p2p-brand);
  box-shadow: var(--p2p-card-shadow);
  background-image: url(/images/background.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0;
}

.p2p-card-lg {
  padding: 30px;
  border-radius: var(--p2p-radius-xl);
}

.p2p-card-md {
  padding: 1.25rem;
  border-radius: var(--p2p-radius-lg);
}

.p2p-surface-tint {
  background-color: var(--p2p-brand-tint);
}

.p2p-surface-tint-strong {
  background-color: var(--p2p-brand-tint-strong);
}

.p2p-callout {
  border-left: 4px solid var(--p2p-brand);
  background-color: var(--p2p-brand-tint);
  border-radius: var(--p2p-radius-md);
  padding: 1rem;
}

.p2p-panel {
  border: 1px solid var(--p2p-border);
  border-radius: var(--p2p-input-radius);
  background-color: var(--p2p-inset-surface);
  padding: 0.75rem;
}

.p2p-border-brand {
  border-color: var(--p2p-brand) !important;
}

.p2p-divider {
  border-color: rgba(162, 22, 45, 0.15);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.p2p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  border-radius: var(--p2p-radius-btn);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.p2p-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.p2p-btn-primary {
  background-color: var(--p2p-brand);
  color: #fff;
  border: none;
}

.p2p-btn-primary:hover:not(:disabled) {
  background-color: var(--p2p-brand-hover);
}

.p2p-btn-outline {
  background-color: transparent;
  color: var(--p2p-text-primary);
  border: 2px solid var(--p2p-brand);
}

.p2p-btn-outline:hover:not(:disabled) {
  background-color: var(--p2p-brand-tint);
  color: var(--p2p-text-primary);
}

.p2p-btn-ghost {
  background-color: transparent;
  color: var(--p2p-text-primary);
  border: none;
}

.p2p-btn-ghost:hover:not(:disabled) {
  background-color: var(--p2p-brand-tint);
}

.p2p-btn-danger-outline {
  color: #dc2626;
  border: 2px solid #dc2626;
  background: transparent;
}

.p2p-btn-danger-outline:hover:not(:disabled) {
  background-color: #fef2f2;
}

.p2p-btn-warning-outline {
  color: #ea580c;
  border: 2px solid #f97316;
  background: transparent;
}

.p2p-btn-warning-outline:hover:not(:disabled) {
  background-color: #fff7ed;
}

.p2p-btn-success-outline {
  color: #16a34a;
  border: 2px solid #22c55e;
  background: transparent;
}

.p2p-btn-success-outline:hover:not(:disabled) {
  background-color: #f0fdf4;
}

/* Flatten pill-style Tailwind classes on P2P action buttons */
.tailwind-p2p button:not(.peer):not(.p2p-feedback-tag),
.p2p-container .tab_content button:not(.peer):not(.p2p-feedback-tag) {
  border-radius: var(--p2p-radius-btn) !important;
}

/* Feedback tag pills — selectable, consistent sizing */
.p2p-feedback-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.p2p-feedback-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 9999px !important;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  cursor: pointer;
  border: 1.5px solid var(--p2p-border-strong);
  background-color: #fff;
  color: var(--p2p-text-primary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.p2p-feedback-tag:hover:not(.is-selected-positive):not(.is-selected-negative) {
  border-color: rgba(20, 42, 74, 0.28);
  background-color: var(--p2p-inset-surface);
}

.p2p-feedback-tag.is-selected-positive {
  border-color: #16a34a;
  background-color: #f0fdf4;
  color: #15803d;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
}

.p2p-feedback-tag.is-selected-negative {
  border-color: #dc2626;
  background-color: #fef2f2;
  color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.p2p-feedback-tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.p2p-feedback-tag.is-selected-positive .p2p-feedback-tag-icon {
  background-color: #16a34a;
  color: #fff;
}

.p2p-feedback-tag.is-selected-negative .p2p-feedback-tag-icon {
  background-color: #dc2626;
  color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Form controls                                                              */
/* -------------------------------------------------------------------------- */

.p2p-input,
.p2p-select,
.p2p-textarea {
  width: 100%;
  border: 1px solid var(--p2p-border);
  border-radius: var(--p2p-input-radius);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--p2p-text-primary);
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.p2p-input:hover,
.p2p-select:hover,
.p2p-textarea:hover {
  border-color: var(--p2p-border-strong);
}

.p2p-input:focus,
.p2p-select:focus,
.p2p-textarea:focus {
  outline: none;
  border-color: var(--p2p-border-focus);
  box-shadow: 0 0 0 3px rgba(20, 42, 74, 0.08);
}

.p2p-input::placeholder,
.p2p-textarea::placeholder {
  color: var(--p2p-placeholder);
}

/* Clean native selects */
.p2p-select,
select.p2p-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  cursor: pointer;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b6566' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1.1rem;
}

.p2p-select:disabled,
.p2p-input:disabled {
  background-color: var(--p2p-inset-surface);
  color: var(--p2p-placeholder);
  cursor: not-allowed;
}

.p2p-checkbox {
  accent-color: var(--p2p-brand);
  border: 1px solid var(--p2p-border-strong);
  border-radius: 3px;
}

/* Side-by-side price / amount inputs */
.p2p-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--p2p-border);
  border-radius: var(--p2p-input-radius);
  background-color: #fff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.p2p-input-group:hover {
  border-color: var(--p2p-border-strong);
}

.p2p-input-group:focus-within {
  border-color: var(--p2p-border-focus);
  box-shadow: 0 0 0 3px rgba(20, 42, 74, 0.08);
}

.p2p-input-group-affix {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--p2p-text-secondary);
  background-color: var(--p2p-inset-surface);
  white-space: nowrap;
}

.p2p-input-group-prefix {
  min-width: 2.75rem;
  justify-content: center;
  border-right: 1px solid var(--p2p-border);
}

.p2p-input-group-suffix {
  border-left: 1px solid var(--p2p-border);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--p2p-text-secondary);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.p2p-input-group .p2p-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.p2p-input-group .p2p-input:focus {
  box-shadow: none;
  border-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* P2P shell (tabs, badges) — complements ui/p2p.html                       */
/* -------------------------------------------------------------------------- */

.p2p-container .tabs.active,
.transactions .tabs.active {
  border-bottom-color: var(--p2p-brand);
}

.p2p-container .tab_bar .tabs.active .badge-count,
.transactions .tab_bar .tabs.active .badge-count {
  background: var(--p2p-brand);
}

.transactions .badge-count {
  background: var(--p2p-badge-alert);
}

.p2p-field-label-muted {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--p2p-deep);
  opacity: 0.6;
  margin-bottom: 0.25rem;
}

.p2p-inset {
  background-color: var(--p2p-inset-surface);
}

.p2p-inset-box {
  background-color: var(--p2p-inset-surface);
  color: var(--p2p-text-primary);
  border-radius: var(--p2p-radius-lg);
}

.p2p-warning-callout {
  border-left: 4px solid var(--p2p-warning);
  background-color: var(--p2p-warning-tint);
  border-radius: var(--p2p-radius-md);
  padding: 1rem;
}

.p2p-warning-icon {
  color: var(--p2p-warning-text);
}

.p2p-tag {
  background-color: var(--p2p-brand-tint-strong);
  color: var(--p2p-text-primary);
  border: 1px solid var(--p2p-brand);
}

.p2p-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--p2p-text-primary);
  background-color: var(--p2p-inset-surface);
  border: 1px solid rgba(20, 42, 74, 0.12);
}

.p2p-chip-sm {
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
}

.p2p-chip-md {
  padding: 0.25rem 0.75rem;
}

.p2p-overlay-light {
  background-color: rgba(255, 255, 255, 0.55);
}

.p2p-section-card {
  padding: 30px;
  border: 2px solid var(--p2p-brand);
  box-shadow: var(--p2p-card-shadow);
  border-radius: var(--p2p-radius-xl);
}

.p2p-section-card-pattern {
  padding: 35px 30px;
  border: 2px solid var(--p2p-brand);
  box-shadow: var(--p2p-card-shadow);
  background-image: url(/images/background.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0;
  border-radius: var(--p2p-radius-xl);
}

.p2p-confirm-banner {
  border-bottom: 2px solid var(--p2p-brand);
}

/* Inline three-dot loader for section-level fetching */
.p2p-inline-loader {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;
}

.p2p-inline-loader span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--p2p-text-secondary);
  animation: p2p-dot-bounce 0.6s infinite;
}

.p2p-inline-loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.p2p-inline-loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes p2p-dot-bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-35%);
    opacity: 1;
  }
}

.p2p-section-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
}

.p2p-section-loading-label {
  font-size: 0.75rem;
  color: var(--p2p-text-secondary);
  font-style: italic;
}