/* Custom CSS for CreditWorks */

/* Alpine.js x-cloak — keep elements hidden until Alpine initializes
   (prevents x-show modals from flashing visible on first paint). */
[x-cloak] {
    display: none !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Nav link row scrolls horizontally, but the 64px bar has no room for scrollbar chrome */
.nav-scroll-x {
    scrollbar-width: none;
}

.nav-scroll-x::-webkit-scrollbar {
    display: none;
}

/* Navigation progress bar (CreditWorks.progress in main.js) */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    z-index: 9999;
    pointer-events: none;
}

.nav-progress::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background-color: #4f46e5;
    animation: nav-progress 1.2s ease-in-out infinite;
}

@keyframes nav-progress {
    0% { left: -40%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-progress::before {
        left: 0;
        width: 100%;
        animation: none;
    }
}

/* The SEMAP dashboard shows one view at a time and the server hides the others. Without
   scripting nothing can switch them, so every container shows, stacked (ERP-17060): the view
   the request asked for, and each view the page left for later as a shell holding a link to
   that view as a page (ERP-17173). The page's first inline script removes the class. */
.no-js [data-view][hidden] {
    display: block;
}

/* Print styles */
@media print {
    nav, footer, .no-print {
        display: none !important;
    }
}