/* ═══════════════════════════════════════════════════════════════════════════
   REYPUB PORTAL — PREMIUM RESPONSIVE UX/UI (v2)
   Mobile-first, premium SaaS-grade. Stripe + Linear + Vercel inspired.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. GLOBAL RESPONSIVE SYSTEM — Prevent overflow everywhere
   ─────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  min-width: 0;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* Universal text overflow guard for dynamic content */
.rp-card, .rp-card *, .rp-table td, .rp-table th,
[id^="rp-"] p, [id^="rp-"] span, [id^="rp-"] div,
.rp-msg .text, .rp-detail-row .val, .rp-copy-row .val,
.rp-req-title, .rp-req-body, .rp-reminder-title, .rp-reminder-sub {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Tight word-break for IDs, URLs, emails, tokens */
.rp-break-id, .rp-detail-row .val, .rp-copy-row .val,
.rp-license-card .lic-num, code, kbd, pre {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Main content container hardening */
#rp-main, #rp-view, main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#rp-view > * { min-width: 0; max-width: 100%; }

/* ───────────────────────────────────────────────────────────────
   2. PREMIUM CARD REDESIGN — glassmorphism + gradient top bar
   ─────────────────────────────────────────────────────────────── */
.rp-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .35s;
  overflow: hidden;
  animation: rpCardFadeIn .45s cubic-bezier(.4,0,.2,1);
}

@keyframes rpCardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dark .rp-card {
  background: rgba(30, 41, 59, 0.92) !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.rp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

.dark .rp-card:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Subtle gradient top accent on important cards */
.rp-card.rp-card-accent::before,
.rp-reminders-section::before,
.rp-req-card.sev-critical::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6D5CFF 0%, #8B5CF6 50%, #06b6d4 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}

/* Tighter cards on mobile */
@media (max-width: 640px) {
  .rp-card {
    border-radius: 18px !important;
    padding: 16px !important;
  }
  .rp-card.!p-4 { padding: 14px !important; }
}

/* ───────────────────────────────────────────────────────────────
   3. RESPONSIVE GRID — auto-fit cards (1col mobile / 2col tab / N desktop)
   ─────────────────────────────────────────────────────────────── */
.grid {
  min-width: 0;
}

#rp-view .grid.grid-cols-2,
#rp-view .grid.grid-cols-3,
#rp-view .grid.grid-cols-4 {
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  #rp-view .grid.sm\:grid-cols-2,
  #rp-view .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  #rp-view .grid.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rp-view .grid.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  #rp-view .grid.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rp-view .grid.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #rp-view .grid.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ───────────────────────────────────────────────────────────────
   4. TABLE → MOBILE CARD CONVERSION
   On mobile, every .rp-table is auto-converted to a stacked card list
   using data-label attributes injected by JS.
   ─────────────────────────────────────────────────────────────── */
.rp-table-wrap, .overflow-x-auto {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (min-width: 768px) {
  .rp-table {
    border-collapse: separate;
    border-spacing: 0;
  }
  .rp-table th {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    position: sticky;
    top: 0;
  }
  .dark .rp-table th {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  }
}

/* Mobile: convert table → cards */
@media (max-width: 767px) {
  .rp-table, .rp-table thead, .rp-table tbody, .rp-table tr, .rp-table th, .rp-table td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .rp-table { min-width: 0 !important; }

  .rp-table thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
  }

  .rp-table tbody tr {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    position: relative;
  }
  .dark .rp-table tbody tr {
    background: rgba(15, 23, 42, 0.6);
    border-color: #334155;
  }

  .rp-table tbody tr:hover td { background: transparent; }

  .rp-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 0 !important;
    border-bottom: 1px dashed #f1f5f9 !important;
    padding: 9px 0 !important;
    text-align: right;
    font-size: 13px;
    word-break: break-word;
  }
  .dark .rp-table td { border-bottom-color: #1e293b !important; }

  .rp-table td:last-child { border-bottom: 0 !important; }

  .rp-table td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #64748b;
    padding-right: 8px;
  }
  .dark .rp-table td::before { color: #94a3b8; }

  .rp-table td:not([data-label])::before { content: ""; display: none; }

  /* Action cell — show below row, full width buttons */
  .rp-table td.rp-actions, .rp-table td[data-label="Actions"], .rp-table td:last-child {
    flex-direction: column;
    align-items: stretch;
  }
  .rp-table td.rp-actions::before, .rp-table td[data-label="Actions"]::before {
    margin-bottom: 6px;
  }

  /* Hide the swipe hint since we removed scrolling */
  .rp-table-hint { display: none !important; }
}

/* ───────────────────────────────────────────────────────────────
   5. TABS — Horizontal-scroll premium pills
   ─────────────────────────────────────────────────────────────── */
.rp-tabs, .rp-pro-tabs {
  display: flex !important;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  white-space: nowrap;
  padding: 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  background: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.7);
  backdrop-filter: blur(8px);
  margin-bottom: 16px;
}

.rp-tabs::-webkit-scrollbar,
.rp-pro-tabs::-webkit-scrollbar { display: none; }

.dark .rp-tabs, .dark .rp-pro-tabs {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(51, 65, 85, 0.7);
}

.rp-tab, .rp-pro-tab {
  flex: 0 0 auto !important;
  min-width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  min-height: 40px;
}

.rp-tab:hover, .rp-pro-tab:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #0f172a;
  transform: translateY(-1px);
}

.dark .rp-tab:hover, .dark .rp-pro-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
}

.rp-tab.active, .rp-pro-tab.active {
  background: linear-gradient(135deg, #6D5CFF 0%, #7C3AED 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 25px rgba(109, 92, 255, 0.25), 0 4px 10px rgba(124, 58, 237, 0.15) !important;
}

.rp-tab.active .rp-tab-count, .rp-pro-tab.active .rp-pro-tab-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

@media (max-width: 520px) {
  .rp-tab, .rp-pro-tab {
    padding: 9px 14px !important;
    font-size: 12px;
  }
  .rp-tab span:not(.rp-tab-count) { display: inline !important; }
}

/* Make sure tab text/icon all visible regardless of media query */
.rp-tab > i, .rp-pro-tab > i { display: inline-block !important; }

/* ───────────────────────────────────────────────────────────────
   6. SHELL & SIDEBAR — better mobile UX
   ─────────────────────────────────────────────────────────────── */
#rp-sidebar {
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
}

@media (max-width: 767px) {
  #app-shell { display: block; }
  #rp-sidebar.is-open {
    transform: translateX(0) !important;
  }
  #rp-sidebar.is-open::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 16rem; /* sidebar width = w-64 = 16rem */
    right: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: -1;
    backdrop-filter: blur(4px);
  }

  .flex-1.md\:ml-64 { margin-left: 0 !important; }

  main#rp-main, main {
    padding: 14px !important;
    max-width: 100% !important;
  }

  #rp-view { gap: 14px; }
}

/* Sidebar nav links — premium touch targets */
.rp-nav-link {
  min-height: 44px;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}

.rp-nav-link:hover {
  transform: translateX(2px);
}

.rp-nav-link.active {
  background: linear-gradient(135deg, rgba(109, 92, 255, 0.12), rgba(124, 58, 237, 0.08)) !important;
  color: #4338ca !important;
  box-shadow: inset 3px 0 0 #6D5CFF;
}

.dark .rp-nav-link.active {
  background: linear-gradient(135deg, rgba(109, 92, 255, 0.25), rgba(124, 58, 237, 0.15)) !important;
  color: #c7d2fe !important;
}

/* ───────────────────────────────────────────────────────────────
   7. BUTTONS — premium touch targets + micro-animations
   ─────────────────────────────────────────────────────────────── */
.rp-btn {
  min-height: 40px;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}

.rp-btn:active { transform: scale(0.97); }
.rp-btn:hover:not(:disabled) { transform: translateY(-1px); }

.rp-btn-primary {
  background: linear-gradient(135deg, #6D5CFF 0%, #7C3AED 100%) !important;
  box-shadow: 0 6px 18px rgba(109, 92, 255, 0.22), 0 1px 3px rgba(124, 58, 237, 0.15) !important;
}
.rp-btn-primary:hover {
  box-shadow: 0 10px 25px rgba(109, 92, 255, 0.32), 0 2px 6px rgba(124, 58, 237, 0.2) !important;
}

.rp-btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.22) !important;
}

.rp-btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.22) !important;
}

/* Inputs — premium touch */
input, textarea, select, .field input, .field textarea, .field select {
  min-height: 44px;
  border-radius: 10px !important;
  font-size: 15px;
  transition: all .25s ease;
}

input:focus, textarea:focus, select:focus {
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  input, textarea, select { font-size: 16px; } /* Prevent iOS zoom on focus */
}

/* ───────────────────────────────────────────────────────────────
   8. BADGES, CHIPS, PILLS — never break layout
   ─────────────────────────────────────────────────────────────── */
.badge, .rp-chip, .rp-wf-badge, .rp-sev,
.rp-cat-badge, .rp-tab-count, .rp-pro-tab-count {
  white-space: nowrap;
  word-break: keep-all;
  max-width: 100%;
}

.badge {
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}

/* ───────────────────────────────────────────────────────────────
   9. HEADER — sticky with glass effect
   ─────────────────────────────────────────────────────────────── */
header.h-14 {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.dark header.h-14 {
  background: rgba(15, 23, 42, 0.85) !important;
  border-bottom-color: rgba(51, 65, 85, 0.6) !important;
}

/* ───────────────────────────────────────────────────────────────
  10. TYPOGRAPHY — clean responsive scale
   ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -0.01em; }

#rp-view h1 { font-size: clamp(22px, 4vw, 28px); }
#rp-view h2 { font-size: clamp(18px, 3.2vw, 22px); }
#rp-view h3 { font-size: clamp(16px, 2.8vw, 19px); }

.rp-card h2, .rp-card h3 { line-height: 1.25; }
.rp-card p { line-height: 1.55; }

@media (max-width: 640px) {
  .rp-hero h2, .rp-wallet-hero .bal { font-size: clamp(20px, 5.5vw, 30px) !important; }
  .rp-stat .v { font-size: 22px !important; }
}

/* ───────────────────────────────────────────────────────────────
  11. HERO CARDS — refined premium gradients
   ─────────────────────────────────────────────────────────────── */
.rp-hero, .rp-wallet-hero, .rp-cron-hero {
  border-radius: 24px !important;
  box-shadow: 0 20px 60px -20px rgba(79, 70, 229, 0.45), 0 4px 14px rgba(15, 23, 42, 0.05) !important;
  position: relative;
  overflow: hidden;
}

.rp-hero { padding: 26px 24px !important; }
.rp-wallet-hero { padding: 30px 26px !important; }

@media (max-width: 640px) {
  .rp-hero, .rp-wallet-hero, .rp-cron-hero {
    border-radius: 20px !important;
    padding: 22px 18px !important;
  }
}

/* Wallet hero buttons — premium */
.rp-wallet-hero button {
  min-height: 44px;
  padding: 11px 20px !important;
  border-radius: 12px !important;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.rp-wallet-hero button:hover { transform: translateY(-2px); }

/* ───────────────────────────────────────────────────────────────
  12. MODAL — mobile-friendly
   ─────────────────────────────────────────────────────────────── */
.rp-modal {
  border-radius: 20px !important;
  max-height: 92vh;
}

@media (max-width: 640px) {
  .rp-modal-backdrop { padding: 8px !important; align-items: flex-end !important; }
  .rp-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 95vh;
    width: 100% !important;
    animation: rpSlideUp .28s cubic-bezier(.4,0,.2,1) !important;
  }
  @keyframes rpSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

/* ───────────────────────────────────────────────────────────────
  13. TOAST — premium look
   ─────────────────────────────────────────────────────────────── */
.rp-toast {
  border-radius: 14px !important;
  padding: 12px 16px !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(10px);
}

/* ───────────────────────────────────────────────────────────────
  14. STAT NUMBERS — gradient text
   ─────────────────────────────────────────────────────────────── */
.rp-stat .v {
  background: linear-gradient(135deg, #6D5CFF 0%, #7C3AED 60%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ───────────────────────────────────────────────────────────────
  15. PAGE TRANSITIONS — fade in views
   ─────────────────────────────────────────────────────────────── */
#rp-view { animation: rpViewFade .35s ease; }
@keyframes rpViewFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger card animation */
#rp-view > *:nth-child(1) { animation-delay: 0ms; }
#rp-view > *:nth-child(2) { animation-delay: 60ms; }
#rp-view > *:nth-child(3) { animation-delay: 120ms; }
#rp-view > *:nth-child(4) { animation-delay: 180ms; }

/* ───────────────────────────────────────────────────────────────
  16. FILTER CHIPS — pill style premium
   ─────────────────────────────────────────────────────────────── */
.rp-filter-chip {
  min-height: 36px;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}

.rp-filter-chip.active {
  background: linear-gradient(135deg, #6D5CFF, #7C3AED) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(109, 92, 255, 0.28) !important;
}

.rp-filter-chips {
  display: flex !important;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  gap: 8px;
  padding: 2px 0 4px;
}

.rp-filter-chips::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .rp-filter-chips {
    flex-wrap: wrap !important;
    overflow: visible;
  }
}

/* ───────────────────────────────────────────────────────────────
  17. REPLY THREAD — better mobile bubbles
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rp-msg { max-width: 95%; }
  .rp-thread { max-height: 60vh; }
}

/* ───────────────────────────────────────────────────────────────
  18. DETAIL ROWS — stack on mobile
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rp-detail-row { grid-template-columns: 1fr !important; gap: 6px; }
  .rp-detail-row .key { padding-top: 0; }
  .rp-copy-row {
    flex-wrap: wrap;
    padding: 10px 12px;
  }
  .rp-copy-row .key { min-width: 100%; }
}

/* ───────────────────────────────────────────────────────────────
  19. SCROLLBAR — sleek
   ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #94a3b8, #64748b); }
.dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #475569, #334155); }

/* ───────────────────────────────────────────────────────────────
  20. AUTH SCREEN — premium look
   ─────────────────────────────────────────────────────────────── */
#auth-screen .bg-white.rounded-2xl {
  border-radius: 24px !important;
  box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.18), 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(20px);
}

#auth-screen input { font-size: 16px; }
#auth-screen button[type="submit"] {
  min-height: 48px;
  background: linear-gradient(135deg, #6D5CFF 0%, #7C3AED 100%) !important;
  box-shadow: 0 10px 30px -10px rgba(109, 92, 255, 0.5) !important;
  border-radius: 12px !important;
}

#auth-screen #registerForm button[type="submit"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.5) !important;
}

/* ───────────────────────────────────────────────────────────────
  21. CONTAINER PADDING SAFETY
   ─────────────────────────────────────────────────────────────── */
.max-w-7xl { max-width: min(80rem, 100%) !important; }

@media (max-width: 480px) {
  main, main#rp-main { padding-inline: 12px !important; padding-block: 12px !important; }
  .rp-card { padding: 14px !important; }
}

/* ───────────────────────────────────────────────────────────────
  22. STATUS BADGES — gradient backgrounds
   ─────────────────────────────────────────────────────────────── */
.b-active, .b-paid, .b-approved {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  color: #166534 !important;
  border: 1px solid #86efac;
}
.b-pending, .b-open, .b-in_progress {
  background: linear-gradient(135deg, #fef9c3, #fde68a) !important;
  color: #854d0e !important;
  border: 1px solid #fcd34d;
}
.b-rejected, .b-expired, .b-revoked, .b-closed, .b-suspended {
  background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5;
}

/* ───────────────────────────────────────────────────────────────
  23. FLEX/GRID OVERFLOW PROTECTION
   ─────────────────────────────────────────────────────────────── */
.flex, [class*="flex-"], .grid, [class*="grid-"] {
  min-width: 0;
}

.flex > *, .grid > * { min-width: 0; }

/* Tables in modals — also responsive */
.rp-modal .rp-table { font-size: 13px; }

/* Print pages stay un-touched */
@media print {
  .rp-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ───────────────────────────────────────────────────────────────
  24. EMPTY STATES
   ─────────────────────────────────────────────────────────────── */
.rp-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
}
.rp-empty-state i { font-size: 36px; margin-bottom: 10px; opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════════
   25. MULTI-SELECT DROPDOWN & SINGLE DROPDOWN (Fixation cats, Activity filters)
   ═══════════════════════════════════════════════════════════════ */

/* — Shared dropdown base — */
.rp-multiselect,
.rp-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

.rp-multiselect-toggle,
.rp-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.rp-multiselect-toggle:hover,
.rp-dropdown-toggle:hover {
  border-color: #c7d2fe;
  background: #fafbff;
}

.rp-multiselect.is-open .rp-multiselect-toggle,
.rp-dropdown.is-open .rp-dropdown-toggle {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
  background: #fff;
}

.rp-multiselect.has-selection .rp-multiselect-toggle {
  border-color: #c7d2fe;
  color: #1e293b;
}

.rp-multiselect-label,
[data-dd-label] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-dd-label] i {
  color: #6366f1;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.rp-multiselect-label.is-placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.rp-multiselect-caret,
.rp-dropdown-caret {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}

.rp-multiselect.is-open .rp-multiselect-caret,
.rp-dropdown.is-open .rp-dropdown-caret {
  transform: rotate(180deg);
  color: #6366f1;
}

/* — Dropdown menu (shared) — */
.rp-multiselect-menu,
.rp-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 18px 40px -10px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s, transform .18s cubic-bezier(.4,0,.2,1);
}

.rp-multiselect.is-open .rp-multiselect-menu,
.rp-dropdown.is-open .rp-dropdown-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* — Multi-select option (with checkbox) — */
.rp-multiselect-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}

.rp-multiselect-option:hover { background: #f1f5f9; }

.rp-multiselect-option input[type="checkbox"] {
  display: none;
}

.rp-multiselect-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all .15s;
}

.rp-multiselect-check i {
  font-size: 11px;
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: all .15s;
}

.rp-multiselect-option input:checked ~ .rp-multiselect-check {
  background: linear-gradient(135deg, #6D5CFF, #7C3AED);
  border-color: #6D5CFF;
}

.rp-multiselect-option input:checked ~ .rp-multiselect-check i {
  opacity: 1;
  transform: scale(1);
}

.rp-multiselect-option input:checked ~ .rp-multiselect-text {
  color: #4338ca;
  font-weight: 600;
}

.rp-multiselect-text { font-size: 14px; color: #334155; }

/* Chips below multiselect (selected items preview) */
.rp-multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 0;
}

.rp-ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border: 1px solid #c7d2fe;
  color: #4338ca;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.rp-ms-chip i.fa-tag { font-size: 9px; opacity: .7; }

.rp-ms-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 999px;
  background: rgba(67, 56, 202, 0.12);
  color: #4338ca;
  cursor: pointer;
  font-size: 9px;
  transition: all .15s;
}

.rp-ms-chip button:hover {
  background: #4338ca;
  color: #fff;
}

/* — Single dropdown option — */
.rp-dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
}

.rp-dropdown-option i {
  color: #6366f1;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.rp-dropdown-option:hover {
  background: #f1f5f9;
}

.rp-dropdown-option.active {
  background: linear-gradient(135deg, rgba(109, 92, 255, .12), rgba(124, 58, 237, .08));
  color: #4338ca;
  font-weight: 600;
}

.rp-dropdown-option.active i {
  color: #4338ca;
}

/* Activity filters layout — switch to 2-column grid when dropdowns */
.rp-activity-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .rp-activity-filters { grid-template-columns: 1fr 1fr; }
}

.rp-activity-filters .rp-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-activity-filters .rp-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 2px;
}

/* — Dark mode — */
.dark .rp-multiselect-toggle,
.dark .rp-dropdown-toggle {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

.dark .rp-multiselect-toggle:hover,
.dark .rp-dropdown-toggle:hover {
  background: #273548;
  border-color: #475569;
}

.dark .rp-multiselect.is-open .rp-multiselect-toggle,
.dark .rp-dropdown.is-open .rp-dropdown-toggle {
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.18);
}

.dark .rp-multiselect-menu,
.dark .rp-dropdown-menu {
  background: #0f172a;
  border-color: #334155;
}

.dark .rp-multiselect-option:hover,
.dark .rp-dropdown-option:hover {
  background: #1e293b;
}

.dark .rp-multiselect-option input:checked ~ .rp-multiselect-text,
.dark .rp-dropdown-option.active {
  color: #c7d2fe;
}

.dark .rp-dropdown-option.active {
  background: linear-gradient(135deg, rgba(109, 92, 255, .22), rgba(124, 58, 237, .14));
}

.dark .rp-multiselect-text { color: #cbd5e1; }
.dark .rp-multiselect-check { background: #0f172a; border-color: #475569; }

.dark .rp-activity-filters {
  background: #0f172a;
  border-color: #334155;
}

.dark .rp-ms-chip {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(124,58,237,.14));
  border-color: #4338ca;
  color: #c7d2fe;
}

/* ═══════════════════════════════════════════════════════════════
   26. CLIENT PORTAL SIDEBAR — solid light white (remove blur)
   ═══════════════════════════════════════════════════════════════ */
#rp-sidebar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
  border-right: 1px solid #e2e8f0 !important;
}

.dark #rp-sidebar {
  background: #0b1220 !important;
  border-right-color: #1e293b !important;
}

/* Make sure no parent filters bleed through */
#rp-sidebar * {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* User card at bottom of sidebar — also solid */
#rp-user-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.dark #rp-user-card {
  background: #111a2c;
  border-color: #1e293b;
}

/* ═══════════════════════════════════════════════════════════════
   27. UPCOMING PAYMENTS FORECAST (Wallet)
   ═══════════════════════════════════════════════════════════════ */
.rp-forecast-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.dark .rp-forecast-card {
  background: linear-gradient(135deg, #1e293b 0%, #1a2237 100%);
  border-color: #334155;
}

.rp-forecast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(109,92,255,.06), rgba(124,58,237,.04));
  border-bottom: 1px solid #e2e8f0;
}

.dark .rp-forecast-head {
  background: linear-gradient(135deg, rgba(109,92,255,.16), rgba(124,58,237,.10));
  border-bottom-color: #334155;
}

.rp-forecast-head h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
}

.dark .rp-forecast-head h4 { color: #e2e8f0; }

.rp-forecast-head h4 i { color: #6D5CFF; }

.rp-forecast-meta {
  font-size: 12px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rp-forecast-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.dark .rp-forecast-summary { border-bottom-color: #334155; }

@media (min-width: 640px) {
  .rp-forecast-summary { grid-template-columns: repeat(3, 1fr); }
}

.rp-forecast-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
}

.dark .rp-forecast-stat { background: #0f172a; border-color: #334155; }

.rp-forecast-stat .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 600;
}

.rp-forecast-stat .val {
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
  margin-top: 2px;
}

.dark .rp-forecast-stat .val { color: #f1f5f9; }

.rp-forecast-stat .sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.rp-forecast-list {
  display: flex;
  flex-direction: column;
  max-height: 480px;
  overflow-y: auto;
}

.rp-forecast-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s;
}

.rp-forecast-item:hover { background: #fafbff; }

.dark .rp-forecast-item { border-bottom-color: #1e293b; }
.dark .rp-forecast-item:hover { background: #111a2c; }

.rp-forecast-item:last-child { border-bottom: none; }

.rp-forecast-date {
  width: 56px;
  text-align: center;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 6px 4px;
  flex-shrink: 0;
}

.rp-forecast-date .m {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: #6366f1;
  letter-spacing: .05em;
}

.rp-forecast-date .d {
  font-size: 18px;
  font-weight: 800;
  color: #4338ca;
  line-height: 1;
  margin-top: 2px;
}

.rp-forecast-date .y {
  font-size: 9px;
  color: #6366f1;
  font-weight: 600;
  margin-top: 2px;
}

.dark .rp-forecast-date {
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.4);
}

.dark .rp-forecast-date .m,
.dark .rp-forecast-date .y { color: #a5b4fc; }
.dark .rp-forecast-date .d { color: #c7d2fe; }

.rp-forecast-info { min-width: 0; }

.rp-forecast-info .title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .rp-forecast-info .title { color: #e2e8f0; }

.rp-forecast-info .meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rp-forecast-info .meta .rp-chip {
  font-size: 10px;
  padding: 2px 8px;
}

.rp-forecast-amount {
  text-align: right;
  flex-shrink: 0;
}

.rp-forecast-amount .amt {
  font-size: 16px;
  font-weight: 800;
  color: #0f766e;
}

.dark .rp-forecast-amount .amt { color: #5eead4; }

.rp-forecast-amount .countdown {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.rp-forecast-amount .countdown.soon { color: #d97706; font-weight: 600; }
.rp-forecast-amount .countdown.due { color: #dc2626; font-weight: 700; }

.rp-forecast-empty {
  padding: 30px 20px;
  text-align: center;
  color: #94a3b8;
}

.rp-forecast-empty i { font-size: 28px; opacity: .6; margin-bottom: 6px; }

/* On mobile, stack item vertically */
@media (max-width: 480px) {
  .rp-forecast-item {
    grid-template-columns: auto 1fr;
  }
  .rp-forecast-amount {
    grid-column: 2;
    text-align: left;
  }
}