/*
 * TimeMachine Platform — Responsive Overrides
 * Desktop-first: load AFTER platform.css and ea-admin.css.
 * Breakpoints: 1023 / 767 / 599 / 479
 */

/* ── Utility classes ── */
.hide-mobile  { }
.show-mobile  { display: none !important; }
.show-mobile-flex { display: none !important; }

/* ── Hamburger button (hidden on desktop) ── */
.hamburger-btn {
    display: none;
    width: 44px; height: 44px;
    background: transparent; border: none;
    cursor: pointer; font-size: 22px;
    color: var(--text-muted, #6b7280);
    align-items: center; justify-content: center;
    border-radius: 6px; transition: all 0.2s;
    flex-shrink: 0; padding: 0; line-height: 1;
}
.hamburger-btn:hover { background: rgba(37,99,235,0.08); color: var(--primary, #2563eb); }

/* ── Sidebar overlay (hidden on desktop) ── */
.sidebar-overlay {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    opacity: 0; transition: opacity 0.3s ease;
}
.sidebar-overlay.visible {
    display: block;
    opacity: 1;
}


/* ========================================================
   BREAKPOINT: < 1024px — Sidebar → Hamburger Drawer
   ======================================================== */
@media (max-width: 1023px) {

    /* Show hamburger */
    .hamburger-btn { display: flex; }

    /* Grid: remove sidebar column */
    .app {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "main" !important;
    }

    /* Sidebar becomes fixed drawer */
    .sidebar {
        position: fixed !important;
        top: 0; left: 0;
        width: 280px !important;
        height: 100vh; height: 100dvh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease !important;
        box-shadow: none;
        margin-left: 0 !important;
        padding: 20px 0 !important;
        overflow-y: auto !important;
    }
    body.sidebar-collapsed .sidebar {
        width: 280px !important;
        margin-left: 0 !important;
        padding: 20px 0 !important;
    }

    /* Open state */
    body.sidebar-mobile-open .sidebar {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }

    /* Hide desktop floating toggle */
    .sidebar-toggle-floating { display: none !important; }

    /* Hide desktop collapse button inside sidebar */
    .sidebar-toggle-icon { display: none !important; }

    /* Touch targets: sidebar nav links */
    .sidebar nav a {
        min-height: 44px;
        padding: 12px 20px;
    }
    .sb-section-body a {
        min-height: 44px;
        padding: 10px 20px 10px 28px !important;
    }

    /* Touch targets: buttons */
    .btn, .ea-btn, .ea-btn-primary, .ea-btn-success, .ea-btn-danger, .ea-btn-warning {
        min-height: 44px;
    }
    .btn-sm, .ea-btn-sm {
        min-height: 36px;
    }

    /* Touch targets: tabs */
    .tab, .ea-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}


/* ========================================================
   BREAKPOINT: < 900px — Experience Builder responsive
   ======================================================== */
@media (max-width: 899px) {

    /* Builder: stack nav + content vertically */
    .builder-layout {
        flex-direction: column !important;
    }
    .builder-nav {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-right: none !important;
        border-bottom: 1px solid var(--ea-border, var(--border));
        padding: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .builder-nav .nav-header { display: none; }
    .builder-nav a {
        white-space: nowrap;
        border-left: none !important;
        border-bottom: 3px solid transparent;
        padding: 12px 16px !important;
        font-size: 13px !important;
    }
    .builder-nav a.active {
        border-left-color: transparent !important;
        border-bottom-color: var(--ea-accent, var(--primary)) !important;
    }
    /* Hide scrollbar */
    .builder-nav::-webkit-scrollbar { display: none; }
    .builder-nav { -ms-overflow-style: none; scrollbar-width: none; }

    .builder-content {
        padding: 16px !important;
    }
}


/* ========================================================
   BREAKPOINT: < 768px — Tablet / mobile layout
   ======================================================== */
@media (max-width: 767px) {

    /* Top header compact */
    .top-header {
        padding: 0 12px !important;
        gap: 8px !important;
    }
    .top-header .user-details { display: none; }
    .top-header .btn-logout span,
    .top-header .btn-logout {
        font-size: 0; /* hide text */
    }
    .top-header .btn-logout::before {
        content: "\21AA"; /* ↪ logout icon */
        font-size: 18px;
    }

    /* Main content padding */
    .main {
        padding: 16px !important;
    }

    /* Page header: stack */
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    /* Card padding */
    .card {
        padding: 14px;
    }

    /* Typography */
    .page-header h1 { font-size: 20px !important; }
    .stat-card .value { font-size: 24px !important; }
    .ea-admin h1 { font-size: 18px !important; }

    /* Stats grid: 2 columns */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .ea-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Table: scroll hint */
    .table-wrap {
        position: relative;
    }
    .table-wrap::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(245,246,250,0.9));
        pointer-events: none;
        z-index: 1;
    }

    /* Gallery grid override */
    #galleryGrid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 3px !important;
    }

    /* Lightbox: more compact */
    .lightbox {
        padding: 10px !important;
    }
    .gal-lb-wrap {
        padding: 40px 10px 54px !important;
    }
    #galLbPrev, #galLbNext {
        width: 36px !important;
        height: 52px !important;
        font-size: 28px !important;
    }
    #galLbPrev { left: 2px !important; }
    #galLbNext { right: 2px !important; }

    /* Toolbar: stack */
    .ea-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .ea-toolbar .count {
        margin-left: 0;
        text-align: center;
    }

    /* Form grids: 1 column */
    .ea-grid-2, .ea-grid-3, .ea-grid-4 {
        grid-template-columns: 1fr !important;
    }
    .um-grid-2, .um-grid-3 {
        grid-template-columns: 1fr !important;
    }
    .ea-form-row {
        grid-template-columns: 1fr !important;
    }

    /* Notification dropdown: wider */
    .header-notifications .notif-dropdown {
        width: 280px;
        right: -60px;
    }

    /* Gallery share: stack */
    .gallery-share {
        flex-direction: column;
    }
    .gallery-qr {
        align-self: center;
    }

    /* Filters row: stack on small screens */
    .ea-filters {
        flex-direction: column;
        align-items: stretch;
    }

    /* Job detail grid: stack (inline grid-template-columns override) */
    [style*="grid-template-columns:1fr 1fr"][style*="padding:20px"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Tickets layout: stack vertically ── */
    .tickets-layout {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 16px !important;
    }
    .tickets-sidebar {
        width: 100% !important;
        flex-shrink: 1 !important;
    }
    .tickets-list,
    .ticket-detail {
        max-width: 100% !important;
    }
    .td-reply-actions {
        flex-wrap: wrap !important;
    }

    /* ── Event cards: stack content + actions ── */
    .card > div[style*="display:flex"][style*="justify-content:space-between"][style*="align-items:center"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .card > div > div[style*="display:flex"][style*="flex-shrink:0"][style*="margin-left"] {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* ── Billing plan/package rows: stack ── */
    #plans > div[style*="display:flex"],
    #packages > div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* ── Tables: overflow-x for tables without .table-wrap ── */
    .n-table, .d-table, .ea-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Admin notifications .form-row: stack ── */
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* ── Profile tabs: horizontal scroll ── */
    .pr-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .pr-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .pr-tabs::-webkit-scrollbar { display: none; }
    .pr-tabs { -ms-overflow-style: none; scrollbar-width: none; }

    /* ── Experience builder grids: stack ── */
    .bf-row {
        grid-template-columns: 1fr !important;
    }
    .bf-row-3 {
        grid-template-columns: 1fr !important;
    }

    /* ── Filter selects wider range of inline widths ── */
    select[style*="width:160px"] {
        width: 100% !important;
    }

    /* ── Users: grant credits flex ── */
    div[style*="display:flex"][style*="align-items:end"] {
        flex-wrap: wrap !important;
    }

    /* ── Job/lead filter bars: stack ── */
    div[style*="display:flex"][style*="align-items:center"][style*="gap:10px"] {
        flex-wrap: wrap !important;
    }
}


/* ========================================================
   BREAKPOINT: < 600px — Modals fullscreen, tabs scrollable
   ======================================================== */
@media (max-width: 599px) {

    /* Modals: fullscreen */
    .modal-overlay.active {
        align-items: stretch;
    }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh; min-height: 100dvh;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* ea-overlay: fullscreen */
    .ea-overlay-inner {
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh; min-height: 100dvh;
        padding: 16px !important;
    }

    /* User modal: fullscreen */
    .user-modal .modal {
        max-width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* Tabs: scrollable horizontal */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* Hide scrollbar */
    .tabs::-webkit-scrollbar { display: none; }
    .tabs { -ms-overflow-style: none; scrollbar-width: none; }

    /* ea-tabs: scrollable */
    .ea-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .ea-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .ea-tabs::-webkit-scrollbar { display: none; }
    .ea-tabs { -ms-overflow-style: none; scrollbar-width: none; }

    /* um-tabs: scrollable */
    .um-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .um-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .um-tabs::-webkit-scrollbar { display: none; }
    .um-tabs { -ms-overflow-style: none; scrollbar-width: none; }

    /* Search/filter card on users/events: stack */
    .card[style*="display:flex"][style*="gap:8px"],
    .card[style*="display:flex"][style*="gap:10px"] {
        flex-direction: column !important;
    }

    /* Tickets sidebar stats: compact */
    .ts-filters,
    .ts-stats {
        padding: 14px !important;
    }

    /* Tickets modal: fullscreen override (custom .modal class) */
    .modal.active .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh; min-height: 100dvh;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Admin notifications preview modal: fullscreen */
    .preview-overlay.active {
        align-items: stretch !important;
    }
    .preview-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh; min-height: 100dvh;
        border-radius: 0 !important;
    }

    /* Inline 2-column grids in modals/forms: stack */
    .modal div[style*="grid-template-columns:1fr 1fr"],
    .modal-content div[style*="grid-template-columns:1fr 1fr"],
    .d-form div[style*="grid-template-columns:1fr 1fr"],
    .editor-panel div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}


/* ========================================================
   BREAKPOINT: < 480px — Small phones
   ======================================================== */
@media (max-width: 479px) {

    /* Main padding tighter */
    .main {
        padding: 12px !important;
    }

    /* Stats: 2 columns */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .stat-card {
        padding: 12px !important;
    }
    .stat-card .value { font-size: 22px !important; }

    /* Notification dropdown: full width fixed */
    .header-notifications .notif-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 60px);
        border-radius: 0 !important;
        margin-top: 0 !important;
    }

    /* Toast: bottom full-width */
    .toast-container {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 8px;
    }
    .toast {
        border-radius: 8px 8px 0 0;
    }

    /* Gallery grid: smaller */
    #galleryGrid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    }

    /* Asset grid: smaller */
    .ea-asset-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
    .ea-asset-card img {
        height: 140px !important;
    }

    /* Auth box: tighter padding */
    .auth-box {
        padding: 24px 20px;
    }

    /* Buttons: ensure min touch */
    .btn { min-height: 40px; }

    /* Page header */
    .page-header h1 { font-size: 18px !important; }

    /* Tickets: hide sidebar, show as collapsible */
    .tickets-sidebar {
        display: none;
    }
    .tickets-layout {
        padding: 12px !important;
    }

    /* Number input touch targets */
    .number-input button {
        min-width: 36px !important;
        min-height: 36px !important;
    }

    /* Notification bell touch target */
    .notification-bell {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ========================================================
   Additional fixes for inline styles
   ======================================================== */

/* Gallery grid on event-detail has inline grid-template-columns — override */
@media (max-width: 767px) {
    [style*="grid-template-columns:repeat(auto-fill,minmax(280px"] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
}

/* Fix filter selects with inline widths on users page */
@media (max-width: 599px) {
    .filter-select,
    select[style*="width:140px"],
    select[style*="width:160px"] {
        width: 100% !important;
    }
    .search-input,
    input[style*="min-width:180px"] {
        min-width: 0 !important;
        width: 100% !important;
    }
    input[style*="flex:1"] {
        min-width: 0 !important;
    }
}

/* Number input buttons touch targets */
@media (max-width: 1023px) {
    .number-input button,
    input[type="number"] {
        min-height: 36px;
    }
}

/* Prevent body scroll when sidebar or lightbox is open */
body.sidebar-mobile-open {
    overflow: hidden !important;
}

/* Smooth transition for sidebar on mobile */
@media (max-width: 1023px) {
    body.sidebar-collapsed .app {
        grid-template-columns: 1fr !important;
    }
}