/* =========================================================================
   Website Traffic page — mobile.
   Mirrors activity-logs-mobile.css / bookings-mobile.css:
     - Desktop filter card hidden; fixed top bar (period + funnel) shown
     - Funnel opens a right-side drawer that relocates the filter controls
     - KPI cards 2-up (card interior from stat-cards-mobile.css)
     - Charts and tables full width, compact
   ========================================================================= */

/* Mobile-only chrome hidden by default so it can't leak into desktop. */
#wtMobileHeader { display: none; }

/* Right-side filter drawer — kept outside the media query so the slide
   animation plays at the boundary. */
.wt-drawer-wrap { position: fixed; inset: 0; z-index: 10000; }
.wt-drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s;
}
.wt-drawer-wrap.is-open .wt-drawer-backdrop { background: rgba(0, 0, 0, 0.35); }
.wt-drawer {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 88%; max-width: 380px;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    display: flex; flex-direction: column;
}
.wt-drawer-wrap.is-open .wt-drawer { transform: translateX(0); }
.wt-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700; font-size: 1.05rem;
    color: #111827;
}
.wt-drawer-close {
    border: none; background: transparent; font-size: 1.5rem;
    color: #6b7280; cursor: pointer; line-height: 1;
}
.wt-drawer-body {
    padding: 1rem 1.15rem;
    overflow-y: auto; flex: 1;
    display: flex; flex-direction: column;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.wt-drawer-body > * { margin-bottom: 14px; }
.wt-drawer-body > *:last-child { margin-bottom: 0; }
.wt-drawer-body select,
.wt-drawer-body input {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
}
/* Icon-only toolbar buttons (Reset, Export) need a visible label once
   full-width in the drawer — reuse their translated title. */
.wt-drawer-body .tzr-icon-btn {
    width: 100% !important;
    height: 42px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}
.wt-drawer-body .tzr-icon-btn::after {
    content: attr(title);
    font-size: 0.85rem;
    font-weight: 600;
}
.wt-drawer-body #wtResetBtn { margin-top: auto; }
.wt-drawer-foot {
    padding: 0.75rem 1.15rem calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
}
.wt-drawer-foot .btn { width: 100%; height: 44px; border-radius: 10px; font-weight: 600; }

@media (max-width: 767px) {

    /* Page shell — leave room for the fixed top bar (56px app header +
       56px bar), same as activity logs / email logs. */
    #website-traffic {
        padding-top: 56px !important;
        padding-bottom: 90px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    /* Desktop header + filter card hidden; its controls are relocated into
       the drawer on demand by website-traffic-mobile.js. */
    #website-traffic > .modern-content-card.tzr-toolbar { display: none !important; }

    #wtMobileHeader {
        display: flex !important;
        gap: 8px;
        position: fixed !important;
        top: 56px; left: 0; right: 0;
        z-index: 990;
        padding: 8px 12px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
    }
    #wtMobileHeader .wt-mobile-period {
        flex: 1;
        min-width: 0;
        height: 40px;
        padding: 0 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #fff;
        color: #111827;
        font-size: 0.9rem;
        font-weight: 600;
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        text-align: left;
        cursor: pointer;
    }
    #wtMobileHeader .wt-mobile-period > span:first-child {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #wtMobileHeader .wt-mobile-count {
        flex-shrink: 0;
        font-size: 0.72rem; font-weight: 600;
        color: #4f46e5; background: #eef2ff;
        border-radius: 999px; padding: 2px 8px;
    }
    #wtMobileHeader .wt-mobile-count:empty { display: none; }
    #wtMobileHeader .wt-filter-btn {
        flex-shrink: 0;
        width: 40px; height: 40px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #4b5563;
        display: inline-flex;
        align-items: center; justify-content: center;
        cursor: pointer;
        position: relative;
    }
    #wtMobileHeader .wt-filter-btn[data-has-filters="1"]::after {
        content: "";
        position: absolute; top: 6px; right: 6px;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #6366f1;
    }

    /* Notices / banners */
    #website-traffic .wt-notice,
    #website-traffic .wt-banner { font-size: 0.8rem !important; padding: 0.6rem 0.8rem !important; margin-bottom: 8px !important; }

    /* KPI cards 2-up (interior styled by stat-cards-mobile.css) */
    #website-traffic .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    #website-traffic .stat-info .wt-delta { font-size: 0.68rem !important; line-height: 1.3; }

    /* Cards, charts, tables */
    #website-traffic .wt-grid-2,
    #website-traffic .wt-grid-3 { grid-template-columns: 1fr !important; gap: 8px !important; }
    #website-traffic .wt-row { margin-bottom: 8px !important; }
    #website-traffic .wt-card { padding: 12px !important; border-radius: 12px !important; margin-bottom: 8px !important; }
    #website-traffic .wt-grid-2 .wt-card,
    #website-traffic .wt-grid-3 .wt-card { margin-bottom: 0 !important; }
    #website-traffic .wt-card h3 { font-size: 0.95rem !important; }
    #website-traffic .wt-card .wt-sub { font-size: 0.75rem !important; margin-bottom: 8px !important; }
    #website-traffic .wt-table { font-size: 0.8rem !important; }
    #website-traffic .wt-table th,
    #website-traffic .wt-table td { padding: 0.4rem 0.35rem !important; }
    #website-traffic .wt-bar-cell span { word-break: break-word; }
    #website-traffic .wt-chart-na { padding: 1.5rem 0.5rem !important; }
    #website-traffic .wt-footnote { font-size: 0.72rem !important; padding: 0 4px; }

    /* Locked state: no filters to show */
    #website-traffic .wt-locked { padding: 2rem 1rem !important; }
    #website-traffic.wt-is-locked #wtMobileHeader { display: none !important; }
    #website-traffic.wt-is-locked { padding-top: 8px !important; }
}