/* =========================================
   Base
   ========================================= */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overscroll-behavior-y: none;
}

body {
    overflow-x: hidden;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

@supports (-webkit-touch-callout: none) {
    html { background-attachment: scroll; }
}

/* =========================================
   AJAX Transitions
   ========================================= */
#content {
    transition: opacity .2s ease-out, transform .2s ease-out;
}

#content.loading {
    opacity: .4;
    transform: translateY(4px);
    pointer-events: none;
}

#content.entering {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

/* NProgress */
#nprogress { pointer-events: none; }
#nprogress .bar {
    background: var(--color-primary);
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

/* =========================================
   Navigation Active States
   ========================================= */
.menu li > a.active {
    background-color: color-mix(in oklch, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
    font-weight: 500;
}

[data-theme="flora-dark"] .menu li > a.active {
    background-color: color-mix(in oklch, var(--color-primary) 15%, transparent);
}

/* =========================================
   Mobile Navigation
   ========================================= */
.mobile-nav-item {
    color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
    transition: color .2s ease, background-color .2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.mobile-nav-item:hover {
    color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
}

.mobile-nav-item.active {
    color: var(--color-primary);
    background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);
}

/* =========================================
   Order Status Colors
   ========================================= */
.status-warning { color: var(--color-warning); border: 1px solid color-mix(in oklch, var(--color-warning) 30%, transparent); }
.status-info    { color: var(--color-info);    border: 1px solid color-mix(in oklch, var(--color-info)    30%, transparent); }
.status-primary { color: var(--color-primary); border: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent); }
.status-accent  { color: var(--color-accent);  border: 1px solid color-mix(in oklch, var(--color-accent)  30%, transparent); }
.status-success { color: var(--color-success); border: 1px solid color-mix(in oklch, var(--color-success) 30%, transparent); }
.status-error   { color: var(--color-error);   border: 1px solid color-mix(in oklch, var(--color-error)   30%, transparent); }

/* =========================================
   SVG Animations
   ========================================= */
.icon-animated animate,
.icon-animated animateTransform {
    animation-play-state: paused;
}

.icon-animated:hover animate,
.icon-animated:hover animateTransform,
.icon-animated.animate animate,
.icon-animated.animate animateTransform {
    animation-play-state: running;
}