/* ==========================================================================
   AirwayBillTracker - Emil Kowalski Motion System Tokens
   Crafted in accordance with animations.dev & design-engineering standards
   ========================================================================== */

:root {
    /* Custom cubic-bezier easing curves */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* Strong ease-out: responsive, immediate feedback */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* Smooth on-screen movement */
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-grade drawer/sheet transition */

    /* Duration budgets (All UI stays strictly sub-300ms) */
    --duration-press: 160ms;
    --duration-fast: 180ms;
    --duration-normal: 240ms;
    --duration-modal: 280ms;
}

/* ==========================================================================
   Tactile Press Feedback
   ========================================================================== */
button:not(:disabled):active,
.btn:not(:disabled):active,
.btn-track:not(:disabled):active,
.airline-card:active,
.tag:active,
.quick-chip:active,
.copy-btn:active {
    transform: scale(0.97) !important;
    transition: transform var(--duration-press) var(--ease-out) !important;
}

/* ==========================================================================
   Hover Gating for Touch Devices
   (Prevents sticky hover states on mobile touchscreens)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .btn-track:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(232, 151, 108, 0.4);
    }
    .airline-card:hover {
        border-color: #E8976C;
        box-shadow: 0 4px 16px rgba(232, 151, 108, 0.15);
        transform: translateY(-2px);
    }
    .awb-card:hover {
        box-shadow: 0 8px 40px rgba(232, 151, 108, 0.18);
        border-color: #E8976C;
        transform: translateY(-1px);
    }
    .input-card:hover {
        border-color: #D4BFA3;
    }
}

/* ==========================================================================
   Smooth Micro-Entrances
   ========================================================================== */
.motion-enter {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.motion-enter.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ==========================================================================
   Sonner-Style Toast Notification System
   ========================================================================== */
#toastContainer {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
    max-width: calc(100vw - 2.5rem);
    width: 24rem;
}

.toast-item {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #FFFFFF;
    color: #362E26;
    border: 1px solid #E6DCCA;
    border-radius: 0.875rem;
    box-shadow: 0 10px 30px rgba(54, 46, 38, 0.12), 0 1px 3px rgba(54, 46, 38, 0.05);
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    transform: translateY(100%) scale(0.95);
    opacity: 0;
    transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-fast) ease;
}

.toast-item.toast-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.toast-item.toast-hiding {
    transform: translateY(8px) scale(0.95);
    opacity: 0;
}

.toast-item.toast-success {
    border-color: #A7F3D0;
    background: #F0FDF4;
    color: #065F46;
}

.toast-item.toast-error {
    border-color: #FECACA;
    background: #FEF2F2;
    color: #991B1B;
}

.toast-item.toast-info {
    border-color: #E6DCCA;
    background: #FAF8F5;
    color: #362E26;
}

/* ==========================================================================
   Smooth Accordion / Collapse (Grid Row Technique)
   ========================================================================== */
.accordion-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-out);
}

.accordion-wrapper.is-open {
    grid-template-rows: 1fr;
}

.accordion-content {
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
}

.accordion-wrapper.is-open .accordion-content {
    opacity: 1;
}

/* ==========================================================================
   Accessibility: prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Header
   Sticky, no resting border. The hairline and shadow appear only once the page
   is scrolled, so the bar reads as part of the page at the top and as a
   floating layer once it overlaps content. Height is fixed by the shared
   markup — do not add min-height here or in page-level CSS.
   --------------------------------------------------------------------------- */
.awb-header {
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.awb-header.is-scrolled {
    border-bottom-color: #E6DCCA;
    box-shadow: 0 1px 12px rgba(54, 46, 38, .06);
}

@media (prefers-reduced-motion: reduce) {
    .awb-header { transition: none; }
}