/* Colour Theme — soft translucent tint washes over glass cards */
:root {
  --gold:         #D4538A;
  --gold-dark:    #B83A72;
  --gold-light:   #F5C6D8;
  --gold-pale:    #FFF5F9;
  --cream:        #F8F5FF;
  --ink:          #1A1523;
  --ink-muted:    #5C5470;
  --ink-faint:    #9B93A8;
  --border:       rgba(168, 85, 247, 0.16);
  --danger:       #E04555;
  --success:      #0FA87A;

  --pf-page-bg: transparent;
  --pf-surface-card: rgba(255, 255, 255, 0.72);
  --pf-border-color: rgba(168, 85, 247, 0.14);
  --pf-surface-hover: rgba(255, 107, 157, 0.08);

  /* Soft translucent gradient palette */
  --grad-blue-purple:    linear-gradient(135deg, rgba(79, 70, 229, 0.14) 0%, rgba(236, 72, 153, 0.12) 100%);
  --grad-teal-cyan:      linear-gradient(135deg, rgba(6, 182, 212, 0.14) 0%, rgba(52, 211, 153, 0.12) 100%);
  --grad-orange-amber:   linear-gradient(135deg, rgba(249, 115, 22, 0.16) 0%, rgba(250, 204, 21, 0.14) 100%);
  --grad-green-emerald:  linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(132, 204, 22, 0.1) 100%);
  --grad-purple-pink:    linear-gradient(135deg, rgba(168, 85, 247, 0.14) 0%, rgba(244, 114, 182, 0.12) 100%);
  --grad-red-coral:      linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(251, 146, 60, 0.1) 100%);
  --grad-indigo-blue:    linear-gradient(135deg, rgba(99, 102, 241, 0.14) 0%, rgba(59, 130, 246, 0.12) 100%);
  --grad-rose-peach:     linear-gradient(135deg, rgba(251, 146, 60, 0.16) 0%, rgba(251, 191, 36, 0.12) 100%);
  --grad-slate-steel:    linear-gradient(135deg, rgba(129, 140, 248, 0.16) 0%, rgba(192, 132, 252, 0.14) 100%);
  --grad-midnight-sun:   linear-gradient(135deg, rgba(49, 46, 129, 0.12) 0%, rgba(124, 58, 237, 0.1) 100%);
  --grad-rainbow:        linear-gradient(135deg, rgba(255, 107, 107, 0.12) 0%, rgba(255, 217, 61, 0.1) 22%, rgba(107, 203, 119, 0.1) 44%, rgba(77, 150, 255, 0.12) 66%, rgba(199, 125, 255, 0.12) 100%);
  --grad-sunset:         linear-gradient(135deg, rgba(249, 115, 22, 0.14) 0%, rgba(236, 72, 153, 0.12) 50%, rgba(139, 92, 246, 0.1) 100%);
}

body {
  background-color: #FFF8F3;
  background-image:
    radial-gradient(ellipse 80% 60% at 8% 12%, rgba(249, 115, 22, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 92% 8%, rgba(77, 150, 255, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 75% 60% at 85% 88%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 12% 90%, rgba(52, 211, 153, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(250, 204, 21, 0.1) 0%, transparent 60%),
    linear-gradient(160deg, #FFF8F0 0%, #F5F7FF 38%, #F5FFF9 72%, #FFF9F5 100%);
  background-attachment: fixed;
  transition: background 0.5s ease;
}

/* ── Chrome: header & nav (opaque — no glass) ───────────────── */
.pf-header {
  background: linear-gradient(
    90deg,
    #FFF4EC 0%,
    #F0F5FF 35%,
    #F5F0FF 70%,
    #EFFAF5 100%
  );
  border-bottom: 1px solid rgba(249, 115, 22, 0.12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pf-nav {
  background: linear-gradient(90deg, #EDE9FE 0%, #DBEAFE 50%, #D1FAE5 100%);
}

.pf-nav-link,
.pf-nav-user,
.pf-nav-user a,
.pf-user-trigger,
.pf-profile-trigger,
.pf-nav-icon-link,
.pf-mobile-menu-btn {
  color: #5C5470;
}

.pf-nav-link:hover,
.pf-nav-user a:hover,
.pf-user-trigger:hover,
.pf-profile-trigger:hover,
.pf-nav-icon-link:hover,
.pf-mobile-menu-btn:hover {
  color: #1A1523;
  background: rgba(26, 21, 35, 0.06);
}

.pf-nav-link.active,
.pf-nav-link.is-active,
.pf-bottom-nav-item.is-active {
  color: #7C3AED !important;
}

.pf-bottom-nav {
  background: linear-gradient(90deg, rgba(255, 240, 246, 0.7) 0%, rgba(238, 242, 255, 0.7) 50%, rgba(236, 253, 245, 0.7) 100%);
  border-top: 1px solid rgba(168, 85, 247, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 -8px 24px rgba(124, 58, 237, 0.06);
}

/* ── Base card: soft glass ──────────────────────────────────── */
.pf-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 247, 237, 0.55) 45%,
    rgba(255, 237, 213, 0.4) 100%
  );
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(249, 115, 22, 0.12);
  box-shadow:
    0 4px 6px -1px rgba(249, 115, 22, 0.05),
    0 2px 4px -1px rgba(250, 204, 21, 0.04);
  transition: all 0.3s ease;
  color: var(--ink);
}

.pf-card:hover {
  box-shadow:
    0 12px 20px -4px rgba(249, 115, 22, 0.1),
    0 6px 10px -2px rgba(250, 204, 21, 0.07);
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.2);
}

/* ── Dashboard stat / summary cards ─────────────────────────── */
.pf-stat-label {
  color: var(--ink-muted) !important;
}

.pf-card[style*="padding: 1.1rem"],
.pf-card[style*="padding:1.1rem"] {
  background: var(--grad-blue-purple);
  color: var(--ink);
  border: 1px solid rgba(79, 70, 229, 0.12);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.08);
}

/* ── Financial Insights / Chart card ────────────────────────── */
.pf-card[style*="padding: 1.5rem"],
.pf-card[style*="padding:1.5rem"] {
  background: var(--grad-indigo-blue);
  color: var(--ink);
  border: 1px solid rgba(99, 102, 241, 0.12);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.08);
}

/* ── Quick link cards ───────────────────────────────────────── */
a.pf-card {
  background: var(--grad-orange-amber);
  color: var(--ink) !important;
  border: 1px solid rgba(249, 115, 22, 0.16);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.08);
}

a.pf-card:hover {
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.14);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.22) 0%, rgba(250, 204, 21, 0.18) 100%);
}

a.pf-card svg {
  color: #C2410C !important;
  opacity: 0.8;
}

/* ── Transaction cards ──────────────────────────────────────── */
.txn-row,
.txn-merchant-header {
  color: var(--ink);
}

.pf-card[x-data] {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 237, 213, 0.4) 55%, rgba(254, 243, 199, 0.35) 100%);
  border: 1px solid rgba(249, 115, 22, 0.12);
}

/* ── Tax / P&L report sections ──────────────────────────────── */
.report-section,
.pf-card.report-section {
  background: var(--grad-green-emerald);
  color: var(--ink);
  border: 1px solid rgba(16, 185, 129, 0.14);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08);
}

.report-section .section-title,
.pf-card.report-section .section-title {
  color: var(--ink) !important;
}

.report-section .breakdown-row,
.pf-card.report-section .breakdown-row {
  border-bottom-color: rgba(26, 21, 35, 0.08) !important;
}

.report-section .bar-track,
.pf-card.report-section .bar-track {
  background: rgba(16, 185, 129, 0.12) !important;
}

/* ── VAT sections ───────────────────────────────────────────── */
.vat-section,
.pf-card.vat-section {
  background: var(--grad-purple-pink);
  color: var(--ink);
  border: 1px solid rgba(168, 85, 247, 0.14);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.08);
}

.vat-section .section-title,
.pf-card.vat-section .section-title {
  color: var(--ink) !important;
}

.vat-section .breakdown-row,
.pf-card.vat-section .breakdown-row {
  border-bottom-color: rgba(26, 21, 35, 0.08) !important;
}

.vat-section .bar-track,
.pf-card.vat-section .bar-track {
  background: rgba(168, 85, 247, 0.12) !important;
}

.vat-box {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(168, 85, 247, 0.12) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.vat-box .vat-box-header { color: var(--ink-muted) !important; }
.vat-box .vat-box-value { color: var(--ink) !important; }
.vat-box .vat-box-label { color: var(--ink-muted) !important; }

/* ── Compliance cards ───────────────────────────────────────── */
.pf-card[style*="compliance"],
.compliance-card {
  background: var(--grad-red-coral);
  color: var(--ink);
  border: 1px solid rgba(239, 68, 68, 0.14);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.07);
}

/* ── Settings section cards ─────────────────────────────────── */
.settings-section .pf-card {
  background: var(--grad-teal-cyan);
  color: var(--ink);
  border: 1px solid rgba(6, 182, 212, 0.14);
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.07);
}

.settings-section .section-header {
  background: rgba(255, 255, 255, 0.35);
}

.settings-section .section-title {
  color: #0F4C5C !important;
}

.settings-section .section-desc {
  color: #155E75 !important;
}

.settings-section .section-body {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.settings-section .form-input {
  background: rgba(255, 255, 255, 0.78);
}

.settings-section .toggle-track {
  background: rgba(15, 76, 92, 0.14);
}

.settings-section#danger .pf-card {
  background: linear-gradient(135deg, rgba(255, 228, 230, 0.55) 0%, rgba(254, 205, 211, 0.4) 100%);
  border: 1px solid rgba(253, 164, 175, 0.55) !important;
}

/* ── Analytics header (Portfolio page) ──────────────────────── */
.analytics-header {
  background: var(--grad-sunset) !important;
  color: var(--ink) !important;
}

/* ── Search / filter cards ──────────────────────────────────── */
.pf-card[style*="overflow"],
.txn-sticky .pf-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(219, 234, 254, 0.4) 55%, rgba(237, 233, 254, 0.4) 100%);
  border: 1px solid rgba(99, 102, 241, 0.12);
}

/* ── Empty state cards ──────────────────────────────────────── */
.pf-card[style*="text-align: center"] {
  background: var(--grad-rose-peach);
  color: var(--ink);
  border: 1px solid rgba(249, 115, 22, 0.16);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.08);
}

/* ── Buttons ────────────────────────────────────────────────── */
.pf-btn {
  transition: all 0.2s ease;
  border-radius: 8px;
}

.pf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.18);
}

.pf-btn-gold,
.pf-btn-primary {
  background: var(--gold);
  color: #ffffff;
  border: none;
  text-shadow: none;
}

.pf-btn-gold:hover,
.pf-btn-primary:hover {
  background: var(--gold-dark);
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.22);
}

.pf-btn-outline,
.modal-btn--cancel {
  background: rgba(255, 255, 255, 0.72);
  color: #44403c;
  border: 1.5px solid rgba(92, 84, 112, 0.28);
}

.pf-btn-outline:hover,
.modal-btn--cancel:hover:not(:disabled),
.modal-btn--cancel:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border-color: var(--gold);
}

.form-card .pf-btn-outline,
.form-card .modal-btn--cancel,
.settings-section .pf-btn-outline,
.form-footer .pf-btn-outline {
  background: rgba(255, 255, 255, 0.72);
  color: #44403c;
  border: 1.5px solid rgba(92, 84, 112, 0.28);
}

.form-card .pf-btn-outline:hover,
.form-card .modal-btn--cancel:hover:not(:disabled),
.settings-section .pf-btn-outline:hover,
.form-footer .pf-btn-outline:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border-color: var(--gold);
}

/* Outline on tinted cards — dark label on soft wash */
.pf-card[style*="padding: 1.1rem"] .pf-btn-outline,
.pf-card[style*="padding:1.1rem"] .pf-btn-outline,
.pf-card[style*="padding: 1.5rem"] .pf-btn-outline,
.pf-card[style*="padding:1.5rem"] .pf-btn-outline,
a.pf-card .pf-btn-outline,
.report-section .pf-btn-outline,
.pf-card.report-section .pf-btn-outline,
.vat-section .pf-btn-outline,
.pf-card.vat-section .pf-btn-outline,
.analytics-header .pf-btn-outline,
.pf-card[style*="text-align: center"] .pf-btn-outline {
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  border: 1px solid rgba(92, 84, 112, 0.22);
}

.pf-card[style*="padding: 1.1rem"] .pf-btn-outline:hover,
.pf-card[style*="padding:1.1rem"] .pf-btn-outline:hover,
.pf-card[style*="padding: 1.5rem"] .pf-btn-outline:hover,
.pf-card[style*="padding:1.5rem"] .pf-btn-outline:hover,
a.pf-card .pf-btn-outline:hover,
.report-section .pf-btn-outline:hover,
.pf-card.report-section .pf-btn-outline:hover,
.vat-section .pf-btn-outline:hover,
.pf-card.vat-section .pf-btn-outline:hover,
.analytics-header .pf-btn-outline:hover,
.pf-card[style*="text-align: center"] .pf-btn-outline:hover {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  border-color: var(--gold);
}

/* ── Form inputs ────────────────────────────────────────────── */
.form-input {
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid rgba(168, 85, 247, 0.18);
  color: var(--ink);
}

.form-input:focus {
  border-color: rgba(236, 72, 153, 0.55);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

/* ── Flash messages ─────────────────────────────────────────── */
.pf-flash-error {
  background: linear-gradient(135deg, rgba(255, 228, 230, 0.55) 0%, rgba(254, 205, 211, 0.4) 100%);
  color: var(--danger);
  border-left: 4px solid var(--danger);
}

.pf-flash-success {
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.55) 0%, rgba(167, 243, 208, 0.4) 100%);
  color: #065F46;
  border: 1px solid rgba(15, 168, 122, 0.35);
}

/* ── Tax note box ───────────────────────────────────────────── */
.tax-note {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.16) 0%, rgba(249, 115, 22, 0.1) 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.18) !important;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.45), rgba(139, 92, 246, 0.45), rgba(59, 130, 246, 0.45));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(219, 39, 119, 0.6), rgba(124, 58, 237, 0.6), rgba(37, 99, 235, 0.6));
}