/* ======================================================================
   Finance Glass Theme (global)
   - Glassmorphism voor finance cockpit + open invoices + invoices
   - Animaties voor cards
   ====================================================================== */

/* Pills / chips / kleine labels */
.chip,
.badge,
.pill,
.filter-tag,
.status-pill,
.source-pill,
.small-pill,
.meta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}

/* Zoekveld */
input[type="text"],
.search-input {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  padding: 9px 13px;
  font-size: 0.9rem;
  outline: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 0.16s ease-out,
    box-shadow 0.16s ease-out,
    background 0.16s ease-out;
}

input[type="text"]:focus,
.search-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.7);
  background: rgba(15, 23, 42, 0.95);
}

input::placeholder {
  color: rgba(148, 163, 184, 0.9);
}

/* Recente betalingen / facturen cards + generieke list-items */
.list-item,
.recent-payment,
.payment-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.list-item:hover,
.recent-payment:hover,
.payment-card:hover {
  transform: translateY(-1px);
  border-color: rgba(248, 250, 252, 0.95);
  background: rgba(15, 23, 42, 0.98);
}

/* Panelen (Top 10, Openstaande posten, Recente facturen etc.) */
.panel,
.panel-body {
  background: rgba(15, 23, 42, 0.85);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.panel-header {
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.5);
  color: #e5e7eb;
}

/* Tabellen hover */
table tbody tr:hover {
  background: rgba(15, 23, 42, 0.7);
}

/* Animatie bij binnenkomen van kaarten */
@keyframes financeCardIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel,
.kpi-card,
.list-item,
.recent-payment,
.payment-card {
  animation: financeCardIn 0.35s ease-out;
}