/* =====================================================================
   VIP CRM — app-style motion
   - page-to-page transitions (View Transitions API, Chrome/Edge/Safari 18+)
   - fade-in fallback for older browsers
   - gold top loading bar while a page loads
   - bottom-sheet modals + tap feedback on phones
   Everything is switched off for users who ask for reduced motion.
   ===================================================================== */

/* ---------- 1. cross-page transitions ---------- */
@view-transition { navigation: auto; }

/* fixed chrome stays put while the page underneath changes */
.topbar       { view-transition-name: vip-topbar; }
.left-sidebar { view-transition-name: vip-sidebar; }
.vip-tabbar   { view-transition-name: vip-tabbar; }
::view-transition-group(vip-topbar),
::view-transition-group(vip-sidebar),
::view-transition-group(vip-tabbar) { animation: none; }
::view-transition-old(vip-topbar),
::view-transition-old(vip-sidebar),
::view-transition-old(vip-tabbar) { display: none; }
::view-transition-new(vip-topbar),
::view-transition-new(vip-sidebar),
::view-transition-new(vip-tabbar) { animation: none; }

/* desktop: quick, calm cross-fade with a slight lift */
::view-transition-old(root) { animation: vipFadeOut .16s ease-in both; }
::view-transition-new(root) { animation: vipRiseIn .28s cubic-bezier(.2, .8, .2, 1) both; }

/* phones: native-app push / pop */
@media (max-width: 767px) {
    ::view-transition-old(root) { animation: vipPushOut .30s cubic-bezier(.2, .8, .2, 1) both; }
    ::view-transition-new(root) { animation: vipPushIn  .30s cubic-bezier(.2, .8, .2, 1) both; }
    html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vipPopOut; }
    html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vipPopIn; }
    /* switching between bottom-bar tabs: cross-fade, like an app's tab bar */
    html:active-view-transition-type(tab)::view-transition-old(root) { animation: vipFadeOut .14s ease-in both; }
    html:active-view-transition-type(tab)::view-transition-new(root) { animation: vipRiseIn .24s cubic-bezier(.2, .8, .2, 1) both; }
}

@keyframes vipFadeOut { to { opacity: 0; } }
@keyframes vipRiseIn  { from { opacity: 0; transform: translateY(10px); } }
@keyframes vipPushOut { to   { transform: translateX(-28%); opacity: .6; } }
@keyframes vipPushIn  { from { transform: translateX(100%); } }
@keyframes vipPopOut  { to   { transform: translateX(100%); } }
@keyframes vipPopIn   { from { transform: translateX(-28%); opacity: .6; } }

/* browsers without view transitions: content fades up on load */
@supports not (view-transition-name: none) {
    .page-wrapper > .container-fluid { animation: vipRiseIn .32s cubic-bezier(.2, .8, .2, 1) both; }
}

/* ---------- 2. loading bar ---------- */
#vip-loadbar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 3000;
    background: linear-gradient(90deg, #9c7616, #e6c86e, #c9a13b);
    box-shadow: 0 0 10px rgba(201, 161, 59, .7);
    opacity: 0;
    pointer-events: none;
    transition: width .5s cubic-bezier(.1, .7, .2, 1), opacity .2s ease;
}
#vip-loadbar.is-on  { opacity: 1; width: 78%; transition: width 6s cubic-bezier(.1, .7, .2, 1), opacity .1s ease; }
#vip-loadbar.is-end { opacity: 0; width: 100%; transition: width .2s ease, opacity .3s ease .15s; }

/* ---------- 3. phones: sheets, feedback, pull-to-refresh ---------- */
@media (max-width: 767px) {
    html, body { overscroll-behavior-y: auto !important; }  /* keep pull-to-refresh */

    /* modals slide up like native sheets */
    .modal.fade .modal-dialog {
        transform: translateY(100%) !important;
        transition: transform .34s cubic-bezier(.2, .8, .2, 1) !important;
    }
    .modal.show .modal-dialog { transform: none !important; }

    /* reminders sheet + drawer */
    #topnav-reminders-dropdown .dropdown-menu.top-nav-events.show { animation: vipSheetUp .3s cubic-bezier(.2, .8, .2, 1) both; }
    @keyframes vipSheetUp { from { transform: translateY(24px); opacity: 0; } }

    /* press feedback on anything tappable */
    .btn, .crm-qa, .vip-tab, .card a, .list-table-wrapper tr, .sidebar-nav a {
        transition: transform .12s ease, background-color .15s ease, opacity .15s ease;
    }
    .btn:active, .crm-qa:active, .sidebar-nav a:active { transform: scale(.97); }
    .list-table-wrapper tbody tr:active, #leads-list-table tbody tr:active { background: var(--crm-gold-soft) !important; }

    /* the tab you just tapped pops */
    .vip-tab.is-pressed i { animation: vipTabPop .35s cubic-bezier(.2, 1.6, .4, 1); }
    @keyframes vipTabPop { 40% { transform: scale(.78); } 100% { transform: scale(1); } }

    /* toasts sit above the tab bar */
    .noty_layout, #noty_layout__bottomRight, #noty_layout__bottomLeft, #noty_layout__bottomCenter {
        bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- phones: every edit popover (status, phone, name, value,
   source, assign users…) opens as a bottom sheet. Popper.js mis-places
   them inside the scrolling full-screen lead card, so we bypass its
   positioning entirely on small screens. ---------- */
@media (max-width: 767px) {
    .popover,
    .card-modal .popover,
    .popover.card-popover {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: 72vh;
        overflow-y: auto;
        border-radius: 22px !important;
        border: 0 !important;
        box-shadow: 0 -18px 50px -12px rgba(0, 0, 0, .5) !important;
        z-index: 1095 !important;
        animation: vipSheetUp .3s cubic-bezier(.2, .8, .2, 1) both;
    }
    .popover .arrow { display: none !important; }
    .popover .popover-header { font-size: 16px !important; font-weight: 800 !important; padding: 16px 48px 10px 18px !important; background: transparent !important; border: 0 !important; }
    .popover .popover-body { padding: 4px 18px 18px !important; }
    .popover .popover-close { top: 12px !important; right: 14px !important; font-size: 18px !important; }
    .popover .popover-body ul li { padding: 12px 10px !important; font-size: 15px !important; border-radius: 10px; }
    .popover .form-control { height: 46px; }
    .popover .btn { min-height: 42px; }
    .popover.show:not([style*="visibility:hidden"]) {
        box-shadow: 0 0 0 100vmax rgba(10, 10, 12, .45), 0 18px 50px rgba(0, 0, 0, .35) !important;
    }
    /* keep the date picker above the full-screen card */
    .picker { z-index: 1100 !important; }
}

/* ---- phones: date picker (Added / Contacted / reminders) as a bottom sheet ---- */
@media (max-width: 767px) {
    .datepicker.datepicker-dropdown {
        position: fixed !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%);
        width: calc(100vw - 16px);
        max-width: 380px;
        padding: 14px 10px 12px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(201, 162, 77, .35) !important;
        z-index: 1100 !important;
        box-shadow: 0 0 0 100vmax rgba(10, 10, 12, .45), 0 18px 50px rgba(0, 0, 0, .35) !important;
    }
    .datepicker.datepicker-dropdown::before,
    .datepicker.datepicker-dropdown::after { display: none !important; }
    .datepicker.datepicker-dropdown table { width: 100%; }
    .datepicker.datepicker-dropdown td,
    .datepicker.datepicker-dropdown th { height: 40px; font-size: 14px; border: 0 !important; border-radius: 10px; }
}

/* ---- phones: keep the Update button visible in long sheets (Assign Users, tags…) ---- */
@media (max-width: 767px) {
    .popover .card-assigned-popover-content > .form-group.text-right,
    .popover .popover-body > .form-group.text-right:last-child {
        position: sticky;
        bottom: -1px;
        margin: 0 -4px;
        padding: 12px 4px 4px;
        background: var(--crm-surface, #fff);
        box-shadow: 0 -10px 16px -12px rgba(0, 0, 0, .25);
        z-index: 2;
    }
}