/* ==========================================================================
   DOKAN MOBILE SKIN  —  vendor dashboard mobile UI
   All rules are inside @media (max-width: 768px).
   Desktop (>768px) is completely untouched.
   NOTE: Selectors do NOT require .dokan-dashboard parent — works inside
         Elementor shortcode too.
   ========================================================================== */

@media screen and (max-width: 768px) {

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
    --dms-primary:      #7047EB;
    --dms-primary-dark: #4a2dc7;
    --dms-primary-deep: #1e1045;
    --dms-sidebar-w:    280px;
    --dms-header-h:     58px;
    --dms-radius:       14px;
    --dms-card-shadow:  0 4px 24px rgba(112, 71, 235, 0.10);
    --dms-bg:           #f5f3ff;
    --dms-card:         #ffffff;
    --dms-text:         #1a1035;
    --dms-muted:        #6b7280;
    --dms-border:       rgba(112, 71, 235, 0.10);
}

/* ── Page background ───────────────────────────────────────────────────── */
body {
    background: var(--dms-bg) !important;
}

/* ── Dashboard wrap: room for fixed topbar ─────────────────────────────── */
.dokan-dashboard-wrap {
    display: block !important;
    padding-top: var(--dms-header-h) !important;
    position: relative !important;
}

/* ==========================================================================
   INJECTED TOP BAR  (.dms-topbar added by JS)
   ========================================================================== */
.dms-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--dms-header-h) !important;
    background: linear-gradient(100deg, #1e1045 0%, #7047EB 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    z-index: 10001 !important;
    box-shadow: 0 2px 16px rgba(112, 71, 235, 0.40) !important;
    box-sizing: border-box !important;
}

.dms-topbar__ham {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    outline: none !important;
}

.dms-topbar__ham:hover,
.dms-topbar__ham:focus {
    background: rgba(255,255,255,0.15) !important;
}

.dms-topbar__ham span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 2px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-origin: center !important;
}

.dms-topbar__ham.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}
.dms-topbar__ham.is-active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}
.dms-topbar__ham.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}

.dms-topbar__title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    flex: 1 !important;
    text-align: center !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dms-topbar__avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.45) !important;
    background: rgba(255,255,255,0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

.dms-topbar__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ==========================================================================
   OVERLAY  (.dms-overlay added by JS)
   ========================================================================== */
.dms-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 5, 30, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 10000 !important;
}

body.dms-nav-open .dms-overlay {
    display: block !important;
}

/* ==========================================================================
   SIDEBAR — off-canvas slide-in drawer
   ========================================================================== */

/* Hide the original Dokan hamburger (we replaced it) */
.dokan-dash-sidebar #dokan-navigation #mobile-menu-icon,
.dokan-dash-sidebar #dokan-navigation #toggle-mobile-menu {
    display: none !important;
}

/* Drawer base */
.dokan-dash-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--dms-sidebar-w) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(calc(-1 * var(--dms-sidebar-w))) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10002 !important;
    flex: none !important;
    padding: 0 !important;
    background: linear-gradient(170deg, #160d3a 0%, #2d1b69 50%, #4a2dc7 100%) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.35) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.12) transparent !important;
    box-sizing: border-box !important;
}

.dokan-dash-sidebar::-webkit-scrollbar { width: 4px !important; }
.dokan-dash-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12) !important;
    border-radius: 2px !important;
}

/* Sidebar open state */
body.dms-nav-open .dokan-dash-sidebar {
    transform: translateX(0) !important;
}

/* Top branding strip inside sidebar */
.dokan-dash-sidebar::before {
    content: 'Vendor Dashboard' !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    height: var(--dms-header-h) !important;
    background: rgba(0,0,0,0.30) !important;
    color: rgba(255,255,255,0.70) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Nav container */
.dokan-dash-sidebar #dokan-navigation {
    position: static !important;
    display: block !important;
}

/* ── Menu list ─────────────────────────────────────────────────────────── */
.dokan-dash-sidebar ul.dokan-dashboard-menu {
    background: transparent !important;
    list-style: none !important;
    margin: 10px 0 24px !important;
    padding: 0 10px !important;
    display: block !important;
}

/* ── Menu items ────────────────────────────────────────────────────────── */
.dokan-dash-sidebar ul.dokan-dashboard-menu > li {
    margin: 2px 0 !important;
    border-radius: 10px !important;
    position: static !important;
    overflow: visible !important;
    cursor: pointer !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 13px 16px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.80) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background 0.18s, color 0.18s !important;
    white-space: nowrap !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu > li > a:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}

/* Icons */
.dokan-dash-sidebar ul.dokan-dashboard-menu > li > a i {
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
    padding-right: 0 !important;
    flex-shrink: 0 !important;
    opacity: 0.85 !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu > li > a svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
}

/* Caret */
.dokan-dash-sidebar ul.dokan-dashboard-menu > li > a i.menu-dropdown {
    margin-left: auto !important;
    font-size: 12px !important;
    width: auto !important;
    padding: 0 !important;
    opacity: 0.55 !important;
}

/* Active */
.dokan-dash-sidebar ul.dokan-dashboard-menu > li.active,
.dokan-dash-sidebar ul.dokan-dashboard-menu > li.active:hover {
    background: rgba(255,255,255,0.13) !important;
    border-radius: 10px !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu > li.active > a {
    color: #fff !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* Remove desktop arrow indicator */
.dokan-dash-sidebar ul.dokan-dashboard-menu > li.active:after,
.dokan-dash-sidebar ul.dokan-dashboard-menu > li:hover:not(.active).has-submenu:after {
    display: none !important;
}

/* Hover: no bg on li itself */
.dokan-dash-sidebar ul.dokan-dashboard-menu > li:hover {
    background: transparent !important;
}

/* ── Submenu — inline, not flyout ──────────────────────────────────────── */
.dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu,
.dokan-dash-sidebar ul.dokan-dashboard-menu li:hover:not(.active) ul.navigation-submenu {
    position: static !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    transform: none !important;
    min-width: unset !important;
    width: auto !important;
    background: rgba(0,0,0,0.18) !important;
    border-radius: 8px !important;
    margin: 4px 8px 6px !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
    display: block !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li {
    padding-left: 0 !important;
    background: transparent !important;
    border-radius: 6px !important;
    margin: 1px 6px !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li a {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.70) !important;
    display: block !important;
    border-radius: 6px !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li.current a,
.dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li:hover a {
    color: #fff !important;
    background: rgba(255,255,255,0.10) !important;
    font-weight: 600 !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li:hover::before,
.dokan-dash-sidebar ul.dokan-dashboard-menu li ul.navigation-submenu li.current::before {
    display: none !important;
}

/* ── Common links (Visit Store etc.) ───────────────────────────────────── */
.dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links {
    margin: 12px 10px 8px !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    padding-top: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links:hover {
    background: none !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    float: none !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.80) !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu li.dokan-common-links a:hover {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */
.dokan-dashboard-content {
    width: 100% !important;
    padding: 14px 12px 80px !important;
    margin: 0 !important;
    display: block !important;
}

/* Two-column → single column */
.dokan-w6.dokan-dash-left,
.dokan-w6.dokan-dash-right {
    width: 100% !important;
    float: none !important;
    display: block !important;
}

.dashboard-content-area::after {
    content: '' !important;
    display: table !important;
    clear: both !important;
}

/* ==========================================================================
   BIG COUNTER WIDGET
   ========================================================================== */
.dashboard-widget.big-counter {
    background: var(--dms-card) !important;
    border-radius: var(--dms-radius) !important;
    box-shadow: var(--dms-card-shadow) !important;
    border: 1px solid var(--dms-border) !important;
    padding: 18px 14px !important;
    margin-bottom: 16px !important;
}

.dashboard-widget.big-counter .list-inline {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dashboard-widget.big-counter .list-inline > li {
    background: linear-gradient(135deg, #f3efff 0%, #ede8ff 100%) !important;
    border-radius: 12px !important;
    padding: 16px 12px !important;
    text-align: center !important;
    border: 1px solid rgba(112,71,235,0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

.dashboard-widget.big-counter .list-inline > li .title {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
    color: var(--dms-primary) !important;
    margin: 0 !important;
}

.dashboard-widget.big-counter .list-inline > li .count {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--dms-text) !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Color variants per card */
.dashboard-widget.big-counter .list-inline > li:nth-child(1) {
    background: linear-gradient(135deg, #e8f4ff 0%, #d6eaff 100%) !important;
    border-color: rgba(59,130,246,0.15) !important;
}
.dashboard-widget.big-counter .list-inline > li:nth-child(1) .title { color: #2563eb !important; }

.dashboard-widget.big-counter .list-inline > li:nth-child(2) {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-color: rgba(16,185,129,0.15) !important;
}
.dashboard-widget.big-counter .list-inline > li:nth-child(2) .title { color: #059669 !important; }

.dashboard-widget.big-counter .list-inline > li:nth-child(3) {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%) !important;
    border-color: rgba(249,115,22,0.15) !important;
}
.dashboard-widget.big-counter .list-inline > li:nth-child(3) .title { color: #ea580c !important; }

.dashboard-widget.big-counter .list-inline > li:nth-child(4) {
    background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 100%) !important;
    border-color: rgba(168,85,247,0.15) !important;
}
.dashboard-widget.big-counter .list-inline > li:nth-child(4) .title { color: #9333ea !important; }

/* ==========================================================================
   GENERAL WIDGETS
   ========================================================================== */
.dashboard-widget {
    background: var(--dms-card) !important;
    border-radius: var(--dms-radius) !important;
    box-shadow: var(--dms-card-shadow) !important;
    border: 1px solid var(--dms-border) !important;
    padding: 18px 14px !important;
    margin-bottom: 16px !important;
}

.dashboard-widget h2,
.dashboard-widget h3,
.dashboard-widget .widget-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--dms-text) !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f0ebff !important;
}

/* ==========================================================================
   PROFILE PROGRESS BAR
   ========================================================================== */
.dokan-profile-completeness,
.profile-progressbar-wrap {
    background: var(--dms-card) !important;
    border-radius: var(--dms-radius) !important;
    box-shadow: var(--dms-card-shadow) !important;
    border: 1px solid var(--dms-border) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

/* ==========================================================================
   TABS
   ========================================================================== */
.dokan-dashboard-content ul.dokan_tabs,
.dokan-dashboard-content .dokan-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid #f0ebff !important;
    margin-bottom: 16px !important;
    scrollbar-width: none !important;
    list-style: none !important;
}

.dokan-dashboard-content ul.dokan_tabs::-webkit-scrollbar,
.dokan-dashboard-content .dokan-tabs::-webkit-scrollbar { display: none !important; }

.dokan-dashboard-content ul.dokan_tabs > li,
.dokan-dashboard-content .dokan-tabs > li {
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.dokan-dashboard-content ul.dokan_tabs > li > a,
.dokan-dashboard-content .dokan-tabs > li > a {
    display: block !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: #f0ebff !important;
    color: var(--dms-primary) !important;
    border: none !important;
    text-decoration: none !important;
}

.dokan-dashboard-content ul.dokan_tabs > li.active > a,
.dokan-dashboard-content ul.dokan_tabs > li > a:hover {
    background: var(--dms-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.dokan-dashboard-content table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

.dokan-dashboard-content table th,
.dokan-dashboard-content table td {
    white-space: nowrap !important;
    padding: 10px 12px !important;
}

.dokan-dashboard-content .dokan-w8,
.dokan-dashboard-content .dokan-w9,
.dokan-dashboard-content .dokan-w10,
.dokan-dashboard-content .dokan-w4,
.dokan-dashboard-content .dokan-w5,
.dokan-dashboard-content .dokan-w7 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px !important;
}

/* ==========================================================================
   BUTTONS & INPUTS
   ========================================================================== */
.dokan-dashboard-content .dokan-btn,
.dokan-dashboard-content .button,
.dokan-dashboard-content input[type="submit"],
.dokan-dashboard-content input[type="button"] {
    min-height: 44px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
}

.dokan-dashboard-content input[type="text"],
.dokan-dashboard-content input[type="email"],
.dokan-dashboard-content input[type="number"],
.dokan-dashboard-content input[type="url"],
.dokan-dashboard-content input[type="password"],
.dokan-dashboard-content select,
.dokan-dashboard-content textarea {
    border-radius: 9px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    min-height: 44px !important;
    border: 1.5px solid rgba(112,71,235,0.18) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dokan-dashboard-content textarea { min-height: 100px !important; }

/* ==========================================================================
   ANNOUNCEMENTS / NOTICES
   ========================================================================== */
.dokan-announcement-wrapper-item {
    padding: 14px !important;
    border-radius: 12px !important;
    text-align: left !important;
}

.dokan-announcement-wrapper-item .dokan-annnouncement-date {
    float: none !important;
    margin: 0 0 10px !important;
    display: inline-block !important;
}

.dokan-announcement-wrapper-item .dokan-announcement-content-wrap {
    float: none !important;
    width: 100% !important;
}

/* ==========================================================================
   CHART CANVAS
   ========================================================================== */
.dashboard-widget canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   BOTTOM SAFE AREA
   ========================================================================== */
.dokan-dashboard-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ==========================================================================
   ACTIVE MENU COLOR OVERRIDE
   (WooCommerce/theme CSS variables can override to teal — force purple)
   ========================================================================== */
.dokan-dash-sidebar ul.dokan-dashboard-menu > li.active {
    background: rgba(112, 71, 235, 0.30) !important;
}

.dokan-dash-sidebar ul.dokan-dashboard-menu > li.active > a,
.dokan-dash-sidebar ul.dokan-dashboard-menu > li.active > a:hover {
    background: rgba(112, 71, 235, 0.22) !important;
    color: #fff !important;
}

/* ==========================================================================
   DOKAN ANALYTICS (React) — #dokan-analytics-app
   ========================================================================== */

/* Hide WooCommerce layout header (it duplicates our topbar) */
#dokan-analytics-app .woocommerce-layout__header {
    display: none !important;
}

#dokan-analytics-app .woocommerce-layout {
    margin: 0 !important;
    padding: 0 !important;
}

#dokan-analytics-app .woocommerce-layout__primary {
    margin: 0 !important;
    padding: 0 !important;
}

/* Analytics inner nav tabs */
#dokan-analytics-app .woocommerce-navigation {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}

#dokan-analytics-app .woocommerce-navigation::-webkit-scrollbar {
    display: none !important;
}

/* Chart/report cards */
#dokan-analytics-app .woocommerce-card {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(112,71,235,0.08) !important;
    border: 1px solid rgba(112,71,235,0.10) !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
}

/* Stat numbers */
#dokan-analytics-app .woocommerce-summary__item-value {
    font-size: 22px !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   DOKAN PRO REACT DASHBOARD — .dokan-layout
   ========================================================================== */
.dokan-layout {
    min-height: unset !important;
}

/* Hide React dashboard's own header/sidebar if it has one */
.dokan-layout > header,
.dokan-layout > nav,
.dokan-layout .dokan-layout-sidebar {
    display: none !important;
}

} /* end @media (max-width: 768px) */