/* Pivt Pay — shared dark-glass design system (Lumina "Digital Vault").
   Tailwind utilities come from the Play CDN; this file holds the bespoke
   glassmorphism, glows, and component bits the screens rely on. */

:root {
  --background: #0b1420;
  --surface-elevated: #1e293b;
  --primary: #4be277;
  --electric-blue: #60a5fa;
  --tertiary: #50dfa4;
  --error: #ffb4ab;
  --on-surface: #dbe3f4;
  --on-surface-variant: #bccbb9;
  --glass-stroke: rgba(255, 255, 255, 0.12);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--on-surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Glass surfaces --------------------------------------------------------- */
.glass-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-stroke);
}
.glass-strong {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-stroke);
}

/* --- Glows ------------------------------------------------------------------ */
.glow-emerald { box-shadow: 0 0 20px rgba(75, 226, 119, 0.25); }
.glow-emerald-lg { box-shadow: 0 0 30px rgba(75, 226, 119, 0.4); }
.text-glow { text-shadow: 0 0 12px rgba(75, 226, 119, 0.35); }

/* --- Inputs ---------------------------------------------------------------- */
/* !important overrides the Tailwind forms-plugin base (injected late by the Play
   CDN at equal specificity) which would otherwise force a white input background. */
.input-glass {
  background-color: rgba(11, 20, 32, 0.6) !important;
  border: 1px solid var(--glass-stroke) !important;
  color: var(--on-surface) !important;
  transition: all 0.2s ease;
}
.input-glass::placeholder { color: rgba(188, 203, 185, 0.4) !important; }
.input-glass:focus {
  border-color: var(--electric-blue) !important;
  background-color: rgba(11, 20, 32, 0.85) !important;
  outline: none;
  box-shadow: 0 0 0 1px var(--electric-blue);
}
/* Native select dropdown options render in dark theme too. */
.input-glass option { background-color: #0b1420; color: var(--on-surface); }

/* --- Material symbols ------------------------------------------------------ */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.fill .material-symbols-outlined, .material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* --- Scrollbars ------------------------------------------------------------ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* --- Status chips ---------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-family: 'JetBrains Mono', monospace; border: 1px solid; }
.chip .led { width: 6px; height: 6px; border-radius: 50%; }
.chip-paid { color: var(--primary); border-color: rgba(75,226,119,0.3); background: rgba(75,226,119,0.08); }
.chip-paid .led { background: var(--primary); box-shadow: 0 0 8px rgba(75,226,119,0.7); }
.chip-pending { color: var(--electric-blue); border-color: rgba(96,165,250,0.3); background: rgba(96,165,250,0.08); }
.chip-pending .led { background: var(--electric-blue); box-shadow: 0 0 8px rgba(96,165,250,0.7); }
.chip-overdue { color: var(--error); border-color: rgba(255,180,171,0.3); background: rgba(255,180,171,0.08); }
.chip-overdue .led { background: var(--error); box-shadow: 0 0 8px rgba(255,180,171,0.7); }

/* --- Toast ----------------------------------------------------------------- */
#toast-host { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 40px); max-width: 420px; pointer-events: none; }
.toast { pointer-events: auto; padding: 12px 16px; border-radius: 12px; font-size: 14px; display: flex; align-items: center; gap: 10px; animation: toast-in 0.25s ease; }
.toast-ok { background: rgba(75,226,119,0.12); border: 1px solid rgba(75,226,119,0.35); color: var(--primary); }
.toast-err { background: rgba(255,180,171,0.12); border: 1px solid rgba(255,180,171,0.35); color: var(--error); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* --- Modal ----------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(6,14,26,0.7); backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: fade 0.2s ease; }
@media (min-width: 640px) { .modal-backdrop { align-items: center; padding: 20px; } }
.modal-sheet { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; border-radius: 24px 24px 0 0; animation: sheet-up 0.28s cubic-bezier(0.16,1,0.3,1); }
@media (min-width: 640px) { .modal-sheet { border-radius: 24px; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- Skeleton -------------------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 12px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- Misc ------------------------------------------------------------------ */
.btn-primary { background: var(--primary); color: #003915; transition: all 0.2s ease; }
.btn-primary:hover { box-shadow: 0 0 20px rgba(75,226,119,0.4); }
.btn-primary:active { transform: scale(0.98); }
a, button { -webkit-tap-highlight-color: transparent; }
.fade-in { animation: fade 0.3s ease; }
:focus-visible { outline: 2px solid var(--electric-blue); outline-offset: 2px; border-radius: 4px; }