/**
 * VENDOR PANEL RESPONSIVE + APP-LIKE MOBILE EXPERIENCE
 * Applies only on vendor pages where this stylesheet is loaded.
 */

/* Mobile menu button - vendor theme */
.mobile-menu-btn {
    background: linear-gradient(135deg, #1f9d63 0%, #3bb77e 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(31, 157, 99, 0.3) !important;
}

.mobile-menu-btn:hover {
    transform: translateY(-1px) scale(1.02);
}

.mobile-menu-btn:active {
    transform: translateY(0) scale(0.98);
}

.mobile-overlay {
    backdrop-filter: blur(3px);
}

/* Medium devices and down */
@media (max-width: 1023px) {

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    /* Shared content containers used across vendor pages */
    .main,
    .main-content,
    .main-wrapper,
    #settingsMainContent,
    .sp-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 82px 14px 18px !important;
    }

    /* Mobile sidebar handling (wrapper + direct sidebar support) */
    .sidebar-wrapper {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important;
        left: -110% !important;
        width: min(88vw, 320px) !important;
        height: 100vh !important;
        z-index: 2002 !important;
        transition: left 0.28s ease !important;
        padding: 0 !important;
        overflow: hidden;
        pointer-events: none;
    }

    .sidebar-wrapper.mobile-open {
        left: 0 !important;
        pointer-events: auto;
    }

    .sidebar-wrapper .sidebar {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-right: none !important;
        box-shadow: 8px 0 30px rgba(15, 23, 42, 0.24) !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -110% !important;
        width: min(88vw, 320px) !important;
        height: 100vh !important;
        z-index: 2002 !important;
        transition: left 0.28s ease !important;
        padding: 18px 12px 16px !important;
        background: linear-gradient(180deg, #f8fffb 0%, #f3f7fb 100%) !important;
    }

    .sidebar.mobile-open {
        left: 0 !important;
        box-shadow: 8px 0 30px rgba(15, 23, 42, 0.24) !important;
    }

    .sidebar .brand {
        margin-bottom: 14px !important;
        padding: 10px 12px !important;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid #e8edf3;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    }

    .sidebar .menu-label {
        margin: 14px 4px 8px !important;
        font-size: 10px !important;
        color: #8aa0b8 !important;
        letter-spacing: 0.08em !important;
    }

    .sidebar .menu-item {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #ffffff;
        margin-bottom: 8px !important;
        padding: 10px 11px !important;
        min-height: 46px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
        transform: none !important;
    }

    .sidebar .menu-item i {
        width: 30px !important;
        height: 30px;
        min-width: 30px;
        border-radius: 9px;
        background: #f1f5f9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
    }

    .sidebar .menu-item.active {
        background: linear-gradient(135deg, #ecfdf3 0%, #dbf6e9 100%) !important;
        border-color: #8ce2b7 !important;
        box-shadow: 0 8px 18px rgba(59, 183, 126, 0.2);
        color: #157347 !important;
    }

    .sidebar .menu-item.active i {
        background: #d0f2df;
    }

    .sidebar .menu-item.locked {
        background: #f8fafc !important;
        color: #94a3b8 !important;
        border-style: dashed;
    }

    .sidebar .logout {
        margin-top: 10px !important;
        border-color: #fecaca !important;
        background: #fff8f8 !important;
    }

    .sidebar .sidebar-status-banner {
        margin: 8px 2px 12px !important;
        border-radius: 12px !important;
    }

    /* Header becomes app toolbar */
    .top-bar {
        position: sticky;
        top: 10px;
        z-index: 1200;
        padding: 12px !important;
        margin-bottom: 18px !important;
        border-radius: 16px;
        border: 1px solid #e5eaf0 !important;
        background: rgba(255, 255, 255, 0.94) !important;
        backdrop-filter: blur(8px);
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    }

    .top-bar .header-logo {
        max-height: 34px !important;
        max-width: 120px !important;
        margin-right: 10px !important;
    }

    .page-title h1 {
        font-size: 20px !important;
        line-height: 1.2;
    }

    .page-title p {
        font-size: 12px !important;
        margin-top: 2px !important;
    }

    .top-actions {
        gap: 10px !important;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .profile-box {
        padding-left: 12px !important;
    }

    .notif-dropdown {
        right: 0;
        width: min(92vw, 360px);
        max-height: min(68vh, 420px);
    }

    /* Keep major grids clean */
    .grid-2,
    .grid-3,
    .split-view,
    .form-grid,
    .form-row,
    .form-row-3,
    .mode-grid,
    .stats-row,
    .reels-grid,
    .product-grid {
        gap: 14px !important;
    }
}

/* Small screens - convert UI into compact app cards */
@media (max-width: 767px) {

    .main,
    .main-content,
    .main-wrapper,
    #settingsMainContent,
    .sp-content {
        padding: 74px 12px 16px !important;
    }

    .top-bar {
        top: 8px;
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
        margin-bottom: 14px !important;
    }

    .top-bar > div:first-child {
        width: 100%;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between;
        gap: 10px;
    }

    .page-title h1 {
        font-size: 18px !important;
    }

    .page-title p {
        font-size: 11px !important;
    }

    .top-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
    }

    .notif-wrapper,
    .store-toggle-container,
    .profile-box {
        min-height: 44px;
        justify-content: center;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #ffffff;
        padding: 8px !important;
    }

    .store-toggle-container {
        gap: 6px !important;
    }

    .profile-box {
        border-left: none !important;
        gap: 8px !important;
    }

    .profile-info {
        display: none;
    }

    .profile-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }

    .notif-dropdown {
        left: 0;
        right: auto;
    }

    .stats-row,
    .grid-2,
    .grid-3,
    .reels-grid,
    .split-view,
    .product-grid,
    .form-grid,
    .form-row,
    .form-row-3,
    .mode-grid,
    .today-metric {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Turn action rows into small card buttons */
    .quick-row,
    .section-tabs,
    .tabs,
    .filter-row,
    .order-actions,
    .mode-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
        width: 100%;
    }

    .quick-row > *,
    .section-tabs > *,
    .tabs > *,
    .filter-row > *,
    .order-actions > *,
    .mode-cards > * {
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
    }

    .qa-btn,
    .sec-tab,
    .tab-link,
    .tab-btn,
    .filter-pill,
    .btn-save,
    .btn-submit,
    .btn-boost,
    .btn-create-reel,
    .btn-reply,
    .btn-test,
    .btn-back,
    .action-btn.primary,
    .action-btn.secondary,
    .action-btn.process,
    .action-btn.danger {
        min-height: 42px;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        white-space: nowrap;
        line-height: 1.2;
    }

    .tabs {
        padding: 6px !important;
        border-radius: 12px !important;
    }

    .action-btns {
        display: flex !important;
        gap: 8px;
    }

    .action-btns .action-btn {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px;
        padding: 0 !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }

    .panel,
    .settings-card,
    .creator-box,
    .campaign-list,
    .sticky-card,
    .table-card,
    .ticket-card,
    .upload-container,
    .container,
    .test-card,
    .modal-content,
    .modal-box {
        border-radius: 14px !important;
        padding: 16px !important;
    }

    .greeting {
        margin-bottom: 14px !important;
    }

    .greeting h1 {
        font-size: 20px !important;
        line-height: 1.25;
    }

    .greeting p {
        font-size: 12px !important;
    }

    .stat-card,
    .order-card,
    .p-card,
    .review-card,
    .reel-card {
        border-radius: 14px !important;
        padding: 14px !important;
    }

    .order-card {
        gap: 12px !important;
    }

    .order-meta {
        gap: 10px !important;
    }

    .order-right {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .search-bar {
        border-radius: 12px !important;
        padding: 10px 12px !important;
    }

    .p-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .modal,
    .modal-overlay {
        padding: 12px !important;
    }

    .modal-content,
    .modal-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Table to card conversion (works with mobile-panel.js data-label enhancer) */
    table.mobile-table,
    table.refunds-table,
    table.customer-table {
        display: block;
        width: 100%;
    }

    table.mobile-table thead,
    table.refunds-table thead,
    table.customer-table thead {
        display: none;
    }

    table.mobile-table tbody,
    table.refunds-table tbody,
    table.customer-table tbody {
        display: block;
        width: 100%;
    }

    table.mobile-table tr,
    table.refunds-table tr,
    table.customer-table tr {
        display: block;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        margin-bottom: 10px;
        padding: 12px;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
    }

    table.mobile-table td,
    table.refunds-table td,
    table.customer-table td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        border: none !important;
        padding: 7px 0 !important;
        text-align: right !important;
        min-height: 30px;
    }

    table.mobile-table td:before,
    table.refunds-table td:before,
    table.customer-table td:before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        color: #64748b;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        text-align: left;
        flex: 1;
        padding-right: 8px;
    }

    table.mobile-table td > *,
    table.refunds-table td > *,
    table.customer-table td > * {
        max-width: 60%;
        text-align: right;
        word-break: break-word;
    }

    /* POS touch targets */
    .pos-button,
    .category-btn,
    .product-btn {
        min-height: 46px !important;
        font-size: 14px !important;
    }

    /* Fine-tuned typography and card density */
    .greeting {
        margin-bottom: 12px !important;
    }

    .greeting h1 .emoji {
        font-size: 22px !important;
    }

    .stats-row {
        margin-bottom: 12px !important;
    }

    .stat-card .icon-wrap {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .stat-card h4 {
        font-size: 10px !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.06em !important;
    }

    .stat-card .value {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    .stat-card .sub {
        font-size: 11px !important;
    }

    .panel-head,
    .panel-head h3 {
        font-size: 14px !important;
    }

    /* Orders polish */
    .section-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .section-tabs .sec-tab {
        min-height: 40px !important;
        font-size: 11px !important;
        padding: 9px 8px !important;
        line-height: 1.15 !important;
    }

    .filter-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .filter-row::-webkit-scrollbar {
        display: none;
    }

    .filter-row > * {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
    }

    .filter-pill {
        min-height: 36px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
    }

    .order-head {
        gap: 8px !important;
    }

    .order-id {
        font-size: 14px !important;
    }

    .order-status {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }

    .order-meta span {
        font-size: 12px !important;
    }

    /* Product page polish */
    .p-card {
        padding: 12px !important;
    }

    .p-header {
        gap: 10px !important;
    }

    .p-thumb {
        width: 64px !important;
        height: 64px !important;
    }

    .p-name {
        font-size: 14px !important;
    }

    .v-variant-row {
        padding: 7px 8px !important;
        gap: 6px !important;
    }

    .v-var-name {
        font-size: 12px !important;
        min-width: 60px !important;
    }

    .v-var-price {
        font-size: 12px !important;
    }

    .v-var-stock {
        font-size: 10px !important;
    }

    .v-var-btn {
        width: 26px !important;
        height: 26px !important;
        border-radius: 7px !important;
    }

    /* Wallet page polish */
    .wallet-banner {
        padding: 16px !important;
        border-radius: 14px !important;
        gap: 12px !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .wallet-banner .wb-bal h2 {
        font-size: 28px !important;
    }

    .wallet-banner .wb-bal p {
        font-size: 11px !important;
        letter-spacing: 0.09em !important;
    }

    .wallet-banner .action-buttons {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .wallet-banner .btn-action {
        min-height: 40px !important;
        font-size: 12px !important;
        padding: 10px 8px !important;
    }

    .wallet-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Reports and analytics polish */
    .report-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .report-tabs::-webkit-scrollbar {
        display: none;
    }

    .report-tabs > * {
        flex: 0 0 auto !important;
        min-width: max-content !important;
    }

    .filter-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        align-items: stretch !important;
    }

    .filter-actions .divider {
        display: none !important;
    }

    .date-input,
    .btn-apply,
    .btn-quick,
    .btn-export {
        width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        font-size: 12px !important;
    }

    .btn-export {
        grid-column: 1 / -1;
    }

    /* Marketing page polish */
    .wallet-badge {
        width: 100%;
        justify-content: center;
        padding: 10px 12px !important;
    }

    .sticky-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .campaign-list .c-item {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .campaign-list .c-img {
        width: 46px !important;
        height: 46px !important;
        border-radius: 8px !important;
        margin-right: 10px !important;
    }

    .reels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .reel-card .video-wrapper {
        height: 220px !important;
    }

    .reel-card .card-body {
        padding: 12px !important;
    }

    .reel-card .card-title {
        font-size: 12px !important;
    }

    /* Support and test pages */
    .ticket-card .t-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .ticket-card .t-body {
        padding: 12px !important;
    }

    .ticket-card textarea {
        min-height: 84px !important;
    }

    .test-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .test-card {
        padding: 14px !important;
    }

    .test-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .test-card h3 {
        font-size: 15px !important;
    }

    .test-card p {
        font-size: 12px !important;
    }

    /* Upload pages */
    .upload-container {
        padding: 14px !important;
        margin: 0 !important;
    }

    .source-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px !important;
    }

    .source-tabs .tab-opt {
        min-height: 38px !important;
        padding: 9px 8px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    .file-input-wrapper {
        padding: 18px !important;
    }

    .preview-box {
        height: 300px !important;
        border-radius: 12px !important;
    }
}

/* 412px bucket: Pixel 7/8 class phones */
@media (min-width: 391px) and (max-width: 412px) {
    .main,
    .main-content,
    .main-wrapper,
    #settingsMainContent,
    .sp-content {
        padding: 74px 11px 14px !important;
    }

    .top-bar {
        padding: 10px !important;
        gap: 8px !important;
    }

    .top-bar-left {
        gap: 8px;
    }

    .top-bar .header-logo {
        max-height: 30px !important;
        max-width: 88px !important;
        margin-right: 8px !important;
    }

    .page-title h1 {
        font-size: 17px !important;
    }

    .page-title p {
        font-size: 10px !important;
    }

    .top-actions {
        grid-template-columns: 1.15fr 1.15fr .7fr !important;
        gap: 7px !important;
    }

    .notif-wrapper,
    .store-toggle-container,
    .profile-box {
        min-height: 42px !important;
        padding: 7px !important;
    }

    .store-toggle-container .store-status-text {
        font-size: 10px !important;
    }

    .section-tabs .sec-tab,
    .tab-link,
    .tab-btn {
        font-size: 11px !important;
    }
}

/* 390px bucket: iPhone 12/13/14/15 class phones */
@media (min-width: 361px) and (max-width: 390px) {
    .main,
    .main-content,
    .main-wrapper,
    #settingsMainContent,
    .sp-content {
        padding: 72px 10px 14px !important;
    }

    .top-bar {
        padding: 10px !important;
    }

    .top-bar > div:first-child {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .top-bar .header-logo {
        max-height: 28px !important;
        max-width: 84px !important;
        margin-right: 0 !important;
    }

    .page-title h1 {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .page-title p {
        margin-top: 1px !important;
        font-size: 10px !important;
    }

    .top-actions {
        grid-template-columns: 1fr 1fr !important;
    }

    .profile-box {
        grid-column: 1 / -1;
        justify-content: center !important;
    }

    .stats-row {
        gap: 10px !important;
    }

    .stat-card .value {
        font-size: 20px !important;
    }

    .wallet-banner .wb-bal h2 {
        font-size: 24px !important;
    }
}

/* Very small devices */
@media (max-width: 480px) {
    .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        top: 12px !important;
        left: 12px !important;
        border-radius: 10px !important;
    }

    .main,
    .main-content,
    .main-wrapper,
    #settingsMainContent,
    .sp-content {
        padding: 72px 10px 14px !important;
    }

    .top-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-row,
    .section-tabs,
    .tabs,
    .filter-row,
    .order-actions,
    .mode-cards {
        grid-template-columns: 1fr !important;
    }

    .sidebar,
    .sidebar-wrapper {
        width: min(92vw, 320px) !important;
    }

    .section-tabs {
        grid-template-columns: 1fr !important;
    }

    .filter-actions {
        grid-template-columns: 1fr !important;
    }

    .wallet-banner .action-buttons,
    .reels-grid,
    .source-tabs {
        grid-template-columns: 1fr !important;
    }
}

/* 360px bucket: compact Android phones */
@media (max-width: 360px) {
    .main,
    .main-content,
    .main-wrapper,
    #settingsMainContent,
    .sp-content {
        padding: 70px 8px 12px !important;
    }

    .top-bar {
        border-radius: 12px !important;
        padding: 8px !important;
        gap: 7px !important;
    }

    .top-bar > div:first-child {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .top-bar .header-logo {
        max-height: 26px !important;
        max-width: 76px !important;
        margin-right: 0 !important;
    }

    .page-title h1 {
        font-size: 15px !important;
    }

    .page-title p {
        display: none !important;
    }

    .top-actions {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .notif-wrapper,
    .store-toggle-container,
    .profile-box {
        min-height: 40px !important;
        border-radius: 10px !important;
        padding: 6px 8px !important;
    }

    .profile-box {
        justify-content: center !important;
    }

    .stat-card,
    .order-card,
    .p-card,
    .review-card,
    .reel-card,
    .settings-card,
    .panel {
        padding: 12px !important;
    }

    .stat-card .icon-wrap {
        width: 34px !important;
        height: 34px !important;
    }

    .stat-card .value {
        font-size: 19px !important;
    }

    .filter-pill,
    .qa-btn,
    .tab-link,
    .tab-btn,
    .sec-tab {
        min-height: 38px !important;
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    .order-id {
        font-size: 13px !important;
    }

    .order-meta span {
        font-size: 11px !important;
    }

    .preview-box {
        height: 260px !important;
    }
}