/* ===================================================
   Modern UI Layer — Cinda Meta
   Centralized animations + responsive refinements.
   Loaded on every page via header.php, so all pages
   get modern motion & responsiveness automatically.
   =================================================== */

/* ---------- Motion tokens ---------- */
:root {
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 0.18s;
    --dur: 0.3s;
    --dur-slow: 0.6s;
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Keyframes ---------- */
@keyframes mui-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mui-fade-down {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mui-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mui-scale-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes mui-slide-left {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mui-slide-right {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mui-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes mui-shimmer {
    100% { transform: translateX(100%); }
}

/* ---------- Page entrance ---------- */
/* The page header gently drops in on load. Body content is revealed on
   scroll by the IntersectionObserver in footer.php (which adds `.reveal`
   via JS, so content stays visible if JS is unavailable). */
.page-header { animation: mui-fade-down var(--dur-slow) var(--ease-out-soft) both; }

/* ---------- Scroll reveal (driven by footer.php IntersectionObserver) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--dur-slow) var(--ease-out-soft),
                transform var(--dur-slow) var(--ease-out-soft);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* Stagger children when a container is marked .reveal-stagger.
   Children start hidden, then fade up in sequence once visible. */
.reveal-stagger > * { opacity: 0; }
.reveal-stagger.is-visible > * {
    animation: mui-fade-up var(--dur-slow) var(--ease-out-soft) both;
}
.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0.04s; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.10s; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.22s; }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 0.28s; }
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 0.34s; }
.reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 0.40s; }
.reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 0.46s; }

/* Helper animation utilities (opt-in) */
.anim-fade-up    { animation: mui-fade-up var(--dur-slow) var(--ease-out-soft) both; }
.anim-fade-in    { animation: mui-fade-in var(--dur-slow) ease both; }
.anim-scale-in   { animation: mui-scale-in var(--dur-slow) var(--ease-spring) both; }
.anim-slide-left { animation: mui-slide-left var(--dur-slow) var(--ease-out-soft) both; }
.anim-slide-right{ animation: mui-slide-right var(--dur-slow) var(--ease-out-soft) both; }
.anim-float      { animation: mui-float 4s ease-in-out infinite; }

/* ---------- Card micro-interactions ---------- */
.card,
.supplier-card,
.table-container {
    transition: transform var(--dur) var(--ease-out-soft),
                box-shadow var(--dur) var(--ease-out-soft),
                border-color var(--dur) var(--ease-out-soft);
}
.card:hover,
.supplier-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.14);
    border-color: #d6dde7;
}

/* ---------- Buttons ---------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning {
    transition: transform var(--dur-fast) var(--ease-out-soft),
                box-shadow var(--dur) var(--ease-out-soft),
                background var(--dur) ease,
                background-color var(--dur) ease;
    will-change: transform;
}
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover {
    transform: translateY(-2px);
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active {
    transform: translateY(0) scale(0.97);
}

/* Icon buttons get a springy pop */
.btn-icon { transition: transform var(--dur) var(--ease-spring), background-color var(--dur) ease, color var(--dur) ease; }
.btn-icon:active { transform: scale(0.92); }

/* ---------- Badges ---------- */
.badge { transition: transform var(--dur) var(--ease-spring); }
.badge:hover { transform: scale(1.06); }

/* ---------- Table rows ---------- */
.table tbody tr,
table tbody tr {
    transition: background-color var(--dur) ease, transform var(--dur-fast) ease;
}

/* ---------- Animated nav underline ---------- */
.nav-link { position: relative; }
.nav-link::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.3rem;
    height: 2px;
    border-radius: 2px;
    background: #4f46e5;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out-soft);
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* ---------- Inputs: smoother focus ---------- */
input, textarea, select, .form-input, .form-select, .form-textarea {
    transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur-fast) ease;
}

/* ---------- Links ---------- */
a { transition: color var(--dur) ease; }

/* ---------- Skeleton shimmer (upgrades the .skeleton pulse) ---------- */
.skeleton {
    position: relative;
    overflow: hidden;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: mui-shimmer 1.6s infinite;
}

/* ---------- Modern, subtle scrollbar ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

html { scroll-behavior: smooth; }

/* ===================================================
   Responsive refinements
   =================================================== */

/* Make wide tables scroll horizontally on small screens
   instead of breaking the layout. */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-container > table,
.table-container > .dataTables_wrapper { min-width: 100%; }

@media (max-width: 640px) {
    .page-layout {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .page-title { font-size: 1.5rem; line-height: 2rem; }
    .page-subtitle { font-size: 0.875rem; }

    .card-header,
    .card-body { padding: 1rem; }

    /* Tap targets a touch larger on phones */
    .btn { padding: 0.7rem 1.1rem; }

    /* DataTables controls stack neatly on phones */
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        justify-content: flex-start;
        width: 100%;
    }
    .dataTables_wrapper .dataTables_filter label { width: 100%; }
}

/* Reduce hover lift on touch devices (no real hover) */
@media (hover: none) {
    .card:hover,
    .supplier-card:hover,
    .btn:hover { transform: none; }
}