/* ═══════════════════════════════════════════════════════════════
   mobile.css — Orchid Booking v5.0
   Full Mobile-First Responsive | Touch-Optimized | PWA-Ready
   Theo bố cục Serenity UI: card grid, bottom nav, step flow
═══════════════════════════════════════════════════════════════ */

/* ══ Reset & Safe Areas ════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --mob-safe-top:    env(safe-area-inset-top,    0px);
    --mob-safe-bot:    env(safe-area-inset-bottom, 0px);
    --mob-safe-left:   env(safe-area-inset-left,   0px);
    --mob-safe-right:  env(safe-area-inset-right,  0px);
    --mob-tabbar-h:    68px;
    --mob-topbar-h:    56px;
    --mob-radius:      16px;
    --mob-radius-lg:   24px;
    --mob-px:          16px;
    --mob-gap:         12px;
    --mob-card-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
    --mob-press:       scale(0.97);
    --mob-anim:        .18s cubic-bezier(.4,0,.2,1);
}

/* ══ Touch targets — minimum 44×44px ══════════════════════════ */
button, a, [role="button"],
.tab-item, .btn, .sidebar-item,
.booking-item,
.quick-action-card, .opt-card {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* Cal-slot: cho phép scroll dọc */
.cal-slot {
    touch-action: pan-y;
}

/* ══ Prevent zoom on inputs ════════════════════════════════════ */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ══ Partner Layout — Mobile ═══════════════════════════════════ */
@media (max-width: 768px) {

    /* Sidebar: hidden off-screen, slide in */
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 500;
        overflow-y: auto;
        padding-top: var(--mob-safe-top);
        padding-bottom: calc(var(--mob-safe-bot) + 80px);
    }
    .sidebar.open { transform: translateX(0); }

    .sidebar-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 490;
        backdrop-filter: blur(3px);
    }
    .sidebar-overlay.open { display: block; }

    /* Partner main takes full width */
    .partner-layout { display: block; }
    .partner-main   { margin-left: 0 !important; }

    /* Topbar */
    .partner-topbar {
        position: sticky;
        top: 0; left: 0; right: 0;
        z-index: 400;
        height: calc(var(--mob-topbar-h) + var(--mob-safe-top));
        padding-top: var(--mob-safe-top);
        padding-left: var(--mob-px);
        padding-right: var(--mob-px);
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid var(--border);
    }

    /* Content padding for topbar + tabbar */
    .partner-content {
        padding: var(--mob-px);
        padding-bottom: calc(var(--mob-tabbar-h) + var(--mob-safe-bot) + 16px);
        min-height: calc(100vh - var(--mob-topbar-h));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Calendar page không cần overflow trên content */
    .partner-content.cal-page {
        overflow-y: hidden;
        padding: 0;
    }

    /* Tab bar — native app feel */
    .app-tabbar {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: calc(var(--mob-tabbar-h) + var(--mob-safe-bot));
        padding-bottom: var(--mob-safe-bot);
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(20px) saturate(200%);
        -webkit-backdrop-filter: blur(20px) saturate(200%);
        border-top: 1px solid var(--border);
        z-index: 450;
        box-shadow: 0 -4px 20px rgba(0,0,0,.06);
    }
    .app-tabbar .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 0;
        color: var(--muted);
        text-decoration: none;
        font-size: .68rem;
        font-weight: 600;
        transition: color var(--mob-anim), transform var(--mob-anim);
        position: relative;
    }
    .app-tabbar .tab-item.active {
        color: var(--primary);
    }
    .app-tabbar .tab-item.active svg {
        stroke-width: 2.4;
    }
    .app-tabbar .tab-item:active {
        transform: scale(0.9);
    }
    .app-tabbar .tab-item svg {
        width: 24px; height: 24px;
        stroke-width: 1.8;
        transition: transform .15s;
    }
    /* Active indicator dot */
    .app-tabbar .tab-item.active::before {
        content: '';
        position: absolute;
        top: 6px;
        width: 4px; height: 4px;
        border-radius: 50%;
        background: var(--primary);
    }

    /* Page title truncate */
    .page-title {
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }
}

/* ══ Cards — mobile stack ══════════════════════════════════════ */
@media (max-width: 640px) {

    /* Stat grid 2 cols */
    .stat-grid,
    .stat-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Quick actions 3 cols */
    .quick-actions {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .quick-action-card {
        padding: 14px 8px !important;
    }
    .quick-action-label {
        font-size: .7rem !important;
    }

    /* POS layout stacked */
    .pos-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .pos-cart {
        position: static !important;
    }

    /* Reports chart full width */
    .report-chart-wrap {
        padding: 12px !important;
    }

    /* Card full width */
    .card {
        border-radius: var(--mob-radius) !important;
    }

    /* Booking item compact */
    .booking-item {
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    /* Hide secondary columns on small screens */
    .hide-mobile { display: none !important; }

    /* Forms full width */
    .form-row {
        grid-template-columns: 1fr !important;
    }
    .form-control {
        border-radius: 12px !important;
    }

    /* Modal full screen bottom sheet */
    .modal-overlay {
        align-items: flex-end !important;
    }
    .modal-box {
        border-radius: 24px 24px 0 0 !important;
        padding: 20px var(--mob-px) !important;
        max-height: 92vh !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Swipeable modal handle */
    .modal-handle {
        width: 40px; height: 4px;
        background: var(--border);
        border-radius: 4px;
        margin: 0 auto 16px;
    }

    /* Buttons full width on mobile */
    .btn-mobile-full {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Section headers */
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* ══ Calendar Mobile ═══════════════════════════════════════════ */
@media (max-width: 768px) {

    .cal-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px var(--mob-px);
        background: var(--surface);
        border-radius: var(--mob-radius) var(--mob-radius) 0 0;
        margin-bottom: 0;
        position: sticky;
        top: calc(var(--mob-topbar-h) + var(--mob-safe-top));
        z-index: 30;
        border-bottom: 1px solid var(--border);
    }

    .cal-toolbar-left { flex: 1; gap: 6px; }
    .cal-toolbar-right { flex-shrink: 0; }

    .cal-view-toggle { display: flex; }
    .cal-view-btn { padding: 6px 12px; font-size: .76rem; }

    .cal-date-nav { gap: 4px; }
    .cal-date-nav button { width: 34px; height: 34px; }
    .cal-date-label { font-size: .82rem; }

    /* Cal body full height */
    .cal-body {
        max-height: calc(100vh - var(--mob-topbar-h) - var(--mob-tabbar-h) - 130px) !important;
        min-height: 320px !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Column headers — compact */
    .cal-col-header {
        min-width: 60px !important;
        padding: 6px 2px !important;
        font-size: .72rem !important;
    }
    .cal-col-header .col-date { font-size: .95rem !important; }
    .cal-col-header .col-weekday { font-size: .6rem !important; }

    /* Staff avatar compact */
    .cal-col-header .staff-avatar-circle {
        width: 34px !important;
        height: 34px !important;
        font-size: .78rem !important;
    }

    /* Time gutter narrow */
    .cal-time-gutter,
    .cal-time-col {
        width: 44px !important;
        min-width: 44px !important;
    }
    .cal-hour-label {
        font-size: .62rem !important;
        padding: 4px 4px 0 !important;
        text-align: center !important;
    }

    /* Booking cards compact */
    .cal-booking {
        padding: 3px 5px 4px !important;
        border-radius: 6px !important;
        left: 1px !important; right: 1px !important;
    }
    .bk-name { font-size: .72rem !important; }
    .bk-time { font-size: .65rem !important; }
    .bk-service { display: none !important; } /* hide on tiny screens */

    /* Quick book modal full screen */
    #modal-new .modal-box,
    #modal-detail .modal-box {
        max-height: 96vh;
        overflow-y: auto;
    }
}

/* ══ Customer Pages — Mobile ═══════════════════════════════════ */
@media (max-width: 640px) {

    /* Navbar customer */
    .navbar {
        padding: 0 var(--mob-px) !important;
        height: calc(54px + var(--mob-safe-top)) !important;
        padding-top: var(--mob-safe-top) !important;
    }

    /* Customer tab bar */
    .customer-tabbar {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 450;
        height: calc(var(--mob-tabbar-h) + var(--mob-safe-bot));
        padding-bottom: var(--mob-safe-bot);
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--border);
        display: flex;
        align-items: stretch;
        box-shadow: 0 -4px 20px rgba(0,0,0,.06);
    }

    /* Salon/search card grid → 1 col */
    .salon-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* Service step flow */
    .step-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    /* Booking confirm card */
    .booking-confirm-card {
        border-radius: var(--mob-radius) !important;
        padding: 16px !important;
    }

    /* Hero section */
    .hero-section {
        padding: 24px var(--mob-px) !important;
        border-radius: 0 0 24px 24px !important;
    }

    /* Bottom sticky CTA */
    .sticky-cta {
        position: sticky;
        bottom: calc(var(--mob-tabbar-h) + var(--mob-safe-bot) + 8px);
        z-index: 100;
        padding: 0 var(--mob-px);
    }
    .sticky-cta .btn {
        width: 100%;
        height: 52px;
        font-size: 1rem;
        border-radius: var(--mob-radius);
        box-shadow: 0 8px 24px rgba(26,86,219,.3);
    }
}

/* ══ Scroll improvements ═══════════════════════════════════════ */
.scrollable-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollable-x::-webkit-scrollbar { display: none; }

/* ══ Press feedback ════════════════════════════════════════════ */
@media (hover: none) {
    .btn:active,
    .quick-action-card:active,
    .booking-item:active,
    .opt-card:active,
    .tab-item:active {
        transform: var(--mob-press);
        opacity: .85;
        transition: transform .1s, opacity .1s;
    }
}

/* ══ Booking flow steps (Serenity-style) ════════════════════════ */
.flow-step-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--mob-px);
}
.flow-step-bar::-webkit-scrollbar { display: none; }

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    position: relative;
    min-width: 64px;
}
.flow-step::after {
    content: '';
    position: absolute;
    top: 14px; left: calc(50% + 14px);
    width: calc(100% - 28px);
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.flow-step:last-child::after { display: none; }

.flow-step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    color: var(--muted);
    z-index: 1;
    transition: all var(--mob-anim);
}
.flow-step.done .flow-step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.flow-step.active .flow-step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(26,86,219,.18);
}
.flow-step-label {
    font-size: .65rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
.flow-step.active .flow-step-label { color: var(--primary); }
.flow-step.done   .flow-step-label { color: var(--success); }

/* ══ Service list (Serenity-style) ════════════════════════════ */
.svc-row-mobile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px var(--mob-px);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--mob-anim);
    -webkit-tap-highlight-color: transparent;
}
.svc-row-mobile:active { background: rgba(26,86,219,.04); }
.svc-row-mobile.selected {
    background: rgba(26,86,219,.06);
}
.svc-radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    transition: all var(--mob-anim);
    display: flex; align-items: center; justify-content: center;
}
.svc-row-mobile.selected .svc-radio {
    border-color: var(--primary);
    background: var(--primary);
}
.svc-row-mobile.selected .svc-radio::after {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
}
.svc-info { flex: 1; }
.svc-name-mob { font-size: .9rem; font-weight: 700; }
.svc-dur-mob  { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.svc-price-mob { font-size: .92rem; font-weight: 800; color: var(--dark); white-space: nowrap; }

/* Badge popular */
.badge-popular {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: .64rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ══ Date/time picker (Serenity-style) ════════════════════════ */
.date-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px;
}
.date-strip::-webkit-scrollbar { display: none; }

.date-chip-mob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--mob-anim);
    min-width: 54px;
    -webkit-tap-highlight-color: transparent;
}
.date-chip-mob:active { transform: scale(0.94); }
.date-chip-mob.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.date-chip-wd { font-size: .65rem; font-weight: 600; opacity: .7; text-transform: uppercase; }
.date-chip-d  { font-size: 1.1rem; font-weight: 800; }

/* Time grid */
.time-grid-mob {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.time-slot-mob {
    padding: 12px 6px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all var(--mob-anim);
    color: var(--primary);
    -webkit-tap-highlight-color: transparent;
}
.time-slot-mob:active { transform: scale(0.94); }
.time-slot-mob.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.time-slot-mob.booked {
    text-decoration: line-through;
    color: var(--muted);
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg);
    border-color: var(--border);
}

/* ══ Featured cards (Serenity landing) ════════════════════════ */
.featured-grid-mob {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
@media (max-width: 640px) {
    .featured-grid-mob {
        grid-template-columns: 1fr;
    }
}

.salon-card-mob {
    background: var(--surface);
    border-radius: var(--mob-radius-lg);
    overflow: hidden;
    box-shadow: var(--mob-card-shadow);
    cursor: pointer;
    transition: transform var(--mob-anim), box-shadow var(--mob-anim);
    -webkit-tap-highlight-color: transparent;
}
.salon-card-mob:active { transform: scale(0.98); }
@media (hover: hover) {
    .salon-card-mob:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 32px rgba(0,0,0,.12);
    }
}

.salon-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    position: relative;
}
.salon-card-img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--border);
}
.salon-card-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: #10b981;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 4px;
}
.salon-card-badge.tomorrow { background: #374151; }
.salon-card-tags {
    position: absolute;
    bottom: 10px; left: 10px;
    display: flex; gap: 5px; flex-wrap: wrap;
}
.salon-card-tag {
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}
.salon-card-body {
    padding: 14px var(--mob-px);
}
.salon-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}
.salon-card-name { font-size: .95rem; font-weight: 800; }
.salon-card-price { font-size: .9rem; font-weight: 800; color: var(--primary); }
.salon-card-sub   { font-size: .76rem; color: var(--muted); margin-bottom: 8px; }
.salon-card-meta  { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); margin-bottom: 12px; }
.salon-card-star  { color: #f59e0b; font-weight: 700; }
.salon-card-btn   {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--mob-anim);
    font-family: var(--font);
}
.salon-card-btn:active { opacity: .85; }

/* ══ Confirmation screen ══════════════════════════════════════ */
.confirm-icon-wrap {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    animation: popIn .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.confirm-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.confirm-info-cell {
    background: var(--bg);
    border-radius: 12px;
    padding: 10px 12px;
}
.confirm-info-label { font-size: .68rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.confirm-info-val   { font-size: .88rem; font-weight: 700; margin-top: 2px; }

/* ══ Swipe gestures indicator ══════════════════════════════════ */
.swipe-hint {
    text-align: center;
    font-size: .7rem;
    color: var(--muted);
    padding: 6px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* ══ Loading skeleton ══════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, #f5f5f5 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: skeleton-wave 1.4s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes skeleton-wave {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ══ Pull-to-refresh indicator ═════════════════════════════════ */
.ptr-indicator {
    text-align: center;
    padding: 12px;
    font-size: .8rem;
    color: var(--muted);
    display: none;
}
.ptr-indicator.visible { display: block; }

/* ══ Notification banner (in-app) ═════════════════════════════ */
.notif-banner {
    position: fixed;
    top: calc(var(--mob-safe-top) + var(--mob-topbar-h) + 8px);
    left: var(--mob-px); right: var(--mob-px);
    z-index: 600;
    background: var(--dark);
    color: #fff;
    border-radius: var(--mob-radius);
    padding: 12px 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    transform: translateY(-120%);
    transition: transform .32s cubic-bezier(.175,.885,.32,1.275);
    cursor: pointer;
}
.notif-banner.show { transform: translateY(0); }
.notif-banner-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.notif-banner-title { font-size: .85rem; font-weight: 700; }
.notif-banner-body  { font-size: .75rem; opacity: .75; }

/* ══ Email/Notification action chip ═══════════════════════════ */
.action-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: .78rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all var(--mob-anim);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.action-chip:active { transform: scale(0.95); }
.action-chip.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ══ Ripple effect ════════════════════════════════════════════ */
.ripple-wrap { position: relative; overflow: hidden; }
.ripple-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    width: 120%; padding-top: 120%;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0);
    pointer-events: none;
}
.ripple-wrap:active::after {
    animation: ripple .4s ease-out;
}
@keyframes ripple {
    to { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* ══ Animations ═══════════════════════════════════════════════ */
@keyframes slideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.anim-slide-up { animation: slideUp .3s var(--mob-anim) both; }
.anim-fade-in  { animation: fadeIn .25s ease both; }

/* stagger children */
.stagger-children > *:nth-child(1) { animation-delay: .04s; }
.stagger-children > *:nth-child(2) { animation-delay: .08s; }
.stagger-children > *:nth-child(3) { animation-delay: .12s; }
.stagger-children > *:nth-child(4) { animation-delay: .16s; }
.stagger-children > *:nth-child(5) { animation-delay: .20s; }

/* ══ Landscape mobile ════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
    .cal-body { max-height: calc(100vh - 120px) !important; }
    .modal-box { max-height: 90vh !important; }
    .app-tabbar { display: none !important; } /* hide tabbar in landscape */
    .partner-content { padding-bottom: var(--mob-px); }
}

/* ══ Desktop overrides (≥769px sidebar visible) ═══════════════ */
@media (min-width: 769px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        transform: none !important;
        width: 240px;
        flex-shrink: 0;
    }
    .partner-layout {
        display: flex;
    }
    .partner-main {
        flex: 1;
        min-width: 0;
    }
    .app-tabbar { display: none !important; }
    .btn-hamburger { display: none !important; }
    .sidebar-overlay { display: none !important; }
    .partner-content {
        padding: 20px 24px;
    }
}