/* ============ Shared CSS - used by admin, public, and portal ============ */

/* Skip-to-content link (accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--tblr-primary, #206bc4);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 0.375rem 0.375rem;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Top loading bar (HTMX navigation indicator) */
.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--tblr-primary, #3b82f6);
    z-index: 9999;
    width: 0;
    opacity: 0;
    transition: none;
}
.loading-bar.active {
    opacity: 1;
    animation: loading-bar-progress 8s cubic-bezier(0.1, 0.4, 0.2, 1) forwards;
}
.loading-bar.done {
    width: 100% !important;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
    animation: none;
}
@keyframes loading-bar-progress {
    0%   { width: 0; }
    10%  { width: 25%; }
    30%  { width: 50%; }
    50%  { width: 70%; }
    70%  { width: 82%; }
    100% { width: 95%; }
}

/* Page entrance animation */
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Flash message slide-in */
@keyframes flash-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.alert {
    animation: flash-slide-in 0.3s ease-out;
}

/* Button hover micro-transitions */
.btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}