/*
 * Shared UI styles for admin & shop panels and landing.
 * Externalized for CodeCanyon compliance (no inline CSS / JS in Blade).
 */

/* Typography ------------------------------------------------------- */
body { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Inter Tight', 'Inter', sans-serif; }

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

/* Sidebar active nav ---------------------------------------------- */
.nav-active { background: linear-gradient(to right, rgba(99, 102, 241, .12), rgba(139, 92, 246, .06)); }

/* Thin scrollbar --------------------------------------------------- */
.scroll-thin::-webkit-scrollbar { width: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .3); border-radius: 9999px; }

/* Dot grid patterns (landing / auth) ------------------------------ */
.lp-dots        { background-image: radial-gradient(circle at 1px 1px, rgb(99 102 241 / 0.15) 1px, transparent 0); background-size: 32px 32px; }
.lp-dots-soft   { background-image: radial-gradient(circle at 1px 1px, rgb(99 102 241 / 0.12) 1px, transparent 0); background-size: 32px 32px; }
.lp-dots-white  { background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 24px 24px; }
.lp-dots-white-lg { background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 28px 28px; }
.lp-dots-auth   { background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 22px 22px; }

/* Gradient text (404 / 500) --------------------------------------- */
.lp-gradient-text {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Mockup mini bar-chart (hero) ------------------------------------ */
.lp-chart { height: 80px; }
.lp-bar-45 { height: 45%; }
.lp-bar-55 { height: 55%; }
.lp-bar-60 { height: 60%; }
.lp-bar-70 { height: 70%; }
.lp-bar-75 { height: 75%; }
.lp-bar-85 { height: 85%; }
.lp-bar-95 { height: 95%; }

/* Progress bar width (data-driven via --pct) ---------------------- */
.ui-progress { width: var(--pct, 0%); }

/* Flash toast container ------------------------------------------- */
.sf-toasts {
    position: fixed; top: 18px; right: 18px; z-index: 99999;
    display: flex; flex-direction: column; gap: 10px;
}
.sf-toast {
    position: relative; overflow: hidden;
    background: #fff; color: #0f172a;
    padding: 14px 16px 14px 18px; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .18);
    min-width: 300px; max-width: 400px; font-size: 14px;
    display: flex; align-items: center; gap: 12px;
    border: 1px solid rgba(148, 163, 184, .16);
}
.sf-toast .sf-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, #6366f1); }
.sf-toast .sf-dot-wrap { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft, rgba(99, 102, 241, .12)); flex-shrink: 0; }
.sf-toast .sf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #6366f1); }
.sf-toast .sf-msg { flex: 1; font-weight: 500; line-height: 1.35; }
.sf-toast .sf-close { cursor: pointer; color: #94a3b8; font-size: 18px; line-height: 1; flex-shrink: 0; }

/* Flash toast animation ------------------------------------------- */
@keyframes sfIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sfOut { to { opacity: 0; transform: translateX(20px); } }
.sf-toast { animation: sfIn .35s cubic-bezier(.21, 1.02, .73, 1) both, sfOut .4s ease-in 4.5s forwards; }
.sf-toast:hover { animation-play-state: paused; }
@media (prefers-color-scheme: dark) {
    .sf-toast { background: #141a29; color: #e2e8f0; }
    .sf-toast .sf-close { color: #94a3b8; }
}