/* MoveRef Glassmorphism Design System
   =============================================
   Background image + tinted glass overlay + frosted surfaces

   Color system:
   - Primary color (--accent-primary) = background tint / atmosphere
   - Secondary color (--accent-secondary) = sidebar, buttons, UI accent elements

   Tint variables (set in JS via applyOrgBranding):
   --tint-r, --tint-g, --tint-b = RGB values derived from primary color
   For super admin (no org): white tint (255,255,255)
*/

/* ============================================
   BACKGROUND IMAGE — FIXED, FULL-SCREEN
   ============================================ */

body {
  background-image: url('../assets/moveref-bg.jpg');
  background-image: image-set(
    url('../assets/moveref-bg.webp') type('image/webp'),
    url('../assets/moveref-bg.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #0F172A; /* dark fallback while image loads */
}

/* ============================================
   GLASS TINT OVERLAY — Login Page
   ============================================ */

.login-page {
  background: transparent;
  position: relative;
}

.login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.50) 0%,
    rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.38) 50%,
    rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.45) 100%
  );
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  z-index: 0;
}

.login-page > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   GLASS TINT OVERLAY — App Shell
   ============================================ */

.app {
  position: relative;
}

.app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.55) 0%,
    rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.42) 40%,
    rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.50) 100%
  );
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  z-index: 0;
  pointer-events: none;
}

.app > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   GLASS SIDEBAR
   ============================================ */

.sidebar {
  background: rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.75) !important;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.04);
}

.sidebar-header {
  border-bottom-color: rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.25) !important;
}

.sidebar-footer {
  border-top-color: rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.25) !important;
}

/* Nav items — accent-secondary driven */
.nav-item:hover {
  background: rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.35);
}

.nav-item.active {
  background: var(--accent-subtle);
  color: var(--accent-secondary);
}

.nav-item-badge {
  background: var(--accent-secondary);
}

/* Sidebar user avatar */
.sidebar-user-avatar {
  background: var(--accent-light);
  color: var(--accent-secondary);
}

.sidebar-user:hover {
  background: rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.3);
}

/* ============================================
   GLASS SURFACES — Cards, Stat Cards, etc
   ============================================ */

.card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.stat-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.07),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ============================================
   GLASS CONTENT AREA — fills gap between sidebar and cards
   ============================================ */

.app-content {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============================================
   GLASS PAGE HEADER
   ============================================ */

.page-header {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   GLASS LOGIN CARD
   ============================================ */

.login-card {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ============================================
   GLASS MODAL
   ============================================ */

.modal-overlay {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

.modal-footer {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}

/* ============================================
   GLASS TABLE ROWS
   ============================================ */

table {
  border-collapse: separate;
  border-spacing: 0;
}

tr:hover td {
  background-color: rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.12) !important;
}

th {
  border-bottom: 2px solid rgba(0, 0, 0, 0.06) !important;
}

td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* ============================================
   GLASS TOAST
   ============================================ */

.toast {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ============================================
   GLASS MOBILE HEADER
   ============================================ */

.mobile-header {
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   GLASS FORM INPUTS
   ============================================ */

input, select, textarea {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

input:focus, select:focus, textarea:focus {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent-secondary);
  box-shadow: 0 0 0 3px rgba(var(--accent-secondary-r, 30), var(--accent-secondary-g, 64), var(--accent-secondary-b, 175), 0.15);
}

/* ============================================
   ACCENT-SECONDARY DRIVEN UI ELEMENTS
   ============================================ */

/* Buttons use accent-secondary as the action color */
.btn-primary {
  background: var(--accent-secondary);
}

.btn-primary:hover {
  background: var(--accent-secondary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-secondary-r, 30), var(--accent-secondary-g, 64), var(--accent-secondary-b, 175), 0.3);
}

/* Links */
a {
  color: var(--accent-secondary);
}

/* Spinners */
.spinner {
  border-top-color: var(--accent-secondary);
}

/* Active nav item text color */
.nav-item.active {
  color: var(--accent-secondary);
}

/* Focus ring uses secondary */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-secondary);
}

/* ============================================
   SKELETON SHIMMER LOADING
   ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 25%,
    rgba(0, 0, 0, 0.03) 50%,
    rgba(0, 0, 0, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   ANIMATION — FADE IN UP
   ============================================ */

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

.stat-card {
  animation: fadeInUp 0.4s ease both;
}

.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.06s; }
.stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-card:nth-child(4) { animation-delay: 0.18s; }
.stat-card:nth-child(5) { animation-delay: 0.24s; }
.stat-card:nth-child(6) { animation-delay: 0.30s; }

.card {
  animation: fadeInUp 0.4s ease both;
  animation-delay: 0.15s;
}

/* ============================================
   REFERRAL FORM (public QR page) GLASS
   ============================================ */

.refer-page {
  background: transparent;
  position: relative;
}

.refer-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.55) 0%,
    rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.45) 100%
  );
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  z-index: 0;
}

.refer-page > * {
  position: relative;
  z-index: 1;
}

.refer-form {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

/* ============================================
   @supports FALLBACK
   Browsers without backdrop-filter get solid bgs
   ============================================ */

@supports not (backdrop-filter: blur(1px)) {
  .login-page::before {
    background: rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.90);
  }

  .app::before {
    background: rgba(var(--tint-r, 255), var(--tint-g, 255), var(--tint-b, 255), 0.92);
  }

  .sidebar {
    background: rgba(255, 255, 255, 0.94) !important;
  }

  .card, .stat-card {
    background: rgba(255, 255, 255, 0.94);
  }

  .login-card {
    background: rgba(255, 255, 255, 0.96);
  }

  .modal {
    background: rgba(255, 255, 255, 0.96);
  }

  .page-header {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}

/* ============================================
   MOBILE — Reduce blur for performance
   ============================================ */

@media (max-width: 768px) {
  .login-page::before,
  .app::before {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .sidebar {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .card, .stat-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}