/* ==========================================================================
   custom.css — Shared styles loaded via _cdn.php on every page
   ========================================================================== */

/* ---- Page Transitions ---- */
.page-enter  { animation: pageEnter 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-leaving { animation: pageLeave 0.22s ease-in forwards; }
@keyframes pageLeave  { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } }

/* ---- Toast Animation ---- */
.toast-enter { animation: toastSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }

/* ---- Card Hover Lift ---- */
.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgb(0 0 0 / 0.1); }

/* ---- Skeleton Loading ---- */
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: skeleton 1.5s ease-in-out infinite; }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Sidebar Active (light) ---- */
.sidebar-active { background-color: rgb(236 253 245); color: rgb(5 150 105); font-weight: 600; }
.sidebar-active svg { color: rgb(5 150 105); }

/* ---- Smooth Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- NProgress Customization ---- */
#nprogress .bar { background: #059669 !important; height: 3px !important; }
#nprogress .peg { box-shadow: 0 0 10px #059669, 0 0 5px #059669 !important; }
#nprogress .spinner-icon { border-top-color: #059669 !important; border-left-color: #059669 !important; }

/* ---- Nav Item Active (public pages) ---- */
.nav-item-active { color: rgb(16 185 129) !important; font-weight: 700 !important; }

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

/* ---- Glass Header (sidebar layouts) ---- */
.glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }