/* App base */
html, body { font-family: 'Sarabun', 'Noto Naskh Arabic', 'Noto Sans Devanagari', system-ui, sans-serif; }

/* Aurora background blobs */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora::before, .aurora::after {
  content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%;
  filter: blur(120px); opacity: .35; animation: drift 18s ease-in-out infinite;
}
.aurora::before { background: radial-gradient(circle, #a78bfa 0%, transparent 70%); top: -200px; left: -200px; }
.aurora::after  { background: radial-gradient(circle, #60a5fa 0%, transparent 70%); bottom: -200px; right: -200px; animation-delay: -9s; }
.dark .aurora::before { opacity: .25; }
.dark .aurora::after { opacity: .25; }

@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.1); }
}

@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.floaty { animation: floaty 4s ease-in-out infinite; }

/* Nav helpers */
.navlink { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border-radius:.6rem; font-size:.875rem; color:rgb(71 85 105); transition:all .15s; }
.navlink:hover { background:rgba(139,92,246,.1); color:rgb(124 58 237); }
.dark .navlink { color:rgb(203 213 225); }
.dark .navlink:hover { background:rgba(139,92,246,.2); color:rgb(196 181 253); }

.iconbtn { display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.6rem; background:rgba(255,255,255,.6); border:1px solid rgb(226 232 240); color:rgb(71 85 105); transition:all .15s; }
.iconbtn:hover { background:white; color:rgb(124 58 237); border-color:rgb(167 139 250); }
.dark .iconbtn { background:rgba(30,41,59,.6); border-color:rgb(51 65 85); color:rgb(203 213 225); }
.dark .iconbtn:hover { background:rgb(30 41 59); color:rgb(196 181 253); }

.iconbtn-sm { display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:.5rem; transition:all .15s; }
.iconbtn-sm:hover { background:rgba(139,92,246,.1); }
.dark .iconbtn-sm:hover { background:rgba(139,92,246,.2); }

.pgbtn { display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.6rem; background:white; border:1px solid rgb(226 232 240); transition:all .15s; }
.pgbtn:disabled { opacity:.4; cursor:not-allowed; }
.pgbtn:not(:disabled):hover { background:rgb(245 243 255); border-color:rgb(167 139 250); color:rgb(124 58 237); }
.dark .pgbtn { background:rgb(30 41 59); border-color:rgb(51 65 85); color:rgb(203 213 225); }
.dark .pgbtn:not(:disabled):hover { background:rgb(51 65 85); color:rgb(196 181 253); }

/* Action buttons on email detail */
.actbtn { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1.2rem .8rem; border-radius:1rem; background:rgba(255,255,255,.8); backdrop-filter:blur(10px); border:1px solid rgb(226 232 240); transition:all .2s; cursor:pointer; }
.actbtn:hover { transform:translateY(-3px); box-shadow:0 12px 30px -10px rgba(139,92,246,.4); border-color:rgb(167 139 250); }
.dark .actbtn { background:rgba(30,41,59,.7); border-color:rgb(51 65 85); }
.dark .actbtn:hover { border-color:rgb(139 92 246); }

/* Stat cards */
.stat { display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; border-radius:1rem; color:white; background-image:linear-gradient(135deg, var(--tw-gradient-stops)); box-shadow:0 8px 20px -8px rgba(0,0,0,.2); }
.stat.from-violet-500.to-indigo-500 { background:linear-gradient(135deg,#8b5cf6,#6366f1); }
.stat.from-emerald-500.to-teal-500 { background:linear-gradient(135deg,#10b981,#14b8a6); }
.stat.from-amber-500.to-orange-500 { background:linear-gradient(135deg,#f59e0b,#f97316); }
.stat.from-rose-500.to-pink-500 { background:linear-gradient(135deg,#f43f5e,#ec4899); }

/* Tabs */
.tab { display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1rem; border-bottom:2px solid transparent; font-size:.875rem; font-weight:500; color:rgb(100 116 139); transition:all .15s; }
.tab-on { color:rgb(124 58 237); border-color:rgb(124 58 237); }
.tab-off:hover { color:rgb(51 65 85); }
.dark .tab-off:hover { color:rgb(203 213 225); }

/* Buttons */
.btn-primary { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; border-radius:.7rem; background:linear-gradient(to right,#7c3aed,#6366f1); color:white; font-size:.875rem; font-weight:500; box-shadow:0 4px 14px -4px rgba(99,102,241,.5); transition:all .15s; }
.btn-primary:hover { box-shadow:0 8px 20px -4px rgba(99,102,241,.6); transform:translateY(-1px); }
.btn-ghost { padding:.55rem 1rem; border-radius:.7rem; color:rgb(100 116 139); font-size:.875rem; }
.btn-ghost:hover { background:rgb(241 245 249); }
.dark .btn-ghost:hover { background:rgb(30 41 59); }

.input { padding:.6rem .9rem; border-radius:.7rem; background:rgb(248 250 252); border:1px solid rgb(226 232 240); font-size:.875rem; outline:none; transition:all .15s; }
.input:focus { border-color:rgb(139 92 246); box-shadow:0 0 0 3px rgba(139,92,246,.15); }
.dark .input { background:rgb(30 41 59); border-color:rgb(51 65 85); color:white; }

/* Loader */
.loader { width:48px; height:48px; border-radius:50%; border:4px solid rgb(226 232 240); border-top-color:rgb(139 92 246); animation:spin .8s linear infinite; }
.dark .loader { border-color:rgb(51 65 85); border-top-color:rgb(167 139 250); }
@keyframes spin { to { transform:rotate(360deg); } }

table th { font-weight:600; }

/* Modal flash on data change */
@keyframes flashGlow {
  0% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
  30% { box-shadow: 0 0 0 6px rgba(139,92,246,.35); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}
.flash-glow { animation: flashGlow .7s ease-out; }

/* Shimmer effect for loading skeletons */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer { background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.shimmer-overlay {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

@keyframes spinSlow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spinSlow 1.5s linear infinite; transform-origin: center; }

[x-cloak] { display:none !important; }