/* ========================================
   POS MOBILE-FIRST RESPONSIVE STYLES
   ======================================== */

/* --- MOBILE LAYOUT (DEFAULT) --- */
@media (max-width: 768px) {

    /* Hide desktop sidebar when POS is active */
    body.pos-active-view #sidebar,
    body.pos-active-view .mobile-bottom-nav {
        display: none !important;
    }

    body.pos-active-view #content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* POS Container - Full Screen Mobile */
    .pos-container {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: var(--page-bg-color, #f8f9fa);
        overflow: hidden;
    }

    /* Top Dashboard - Compact */
    .pos-top-dashboard {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: var(--primary-color, #667eea);
        color: white;
        font-size: 0.75rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .dashboard-info-group {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .info-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .info-item i {
        font-size: 0.9rem;
    }

    .dashboard-status-group {
        display: flex;
        gap: 8px;
    }

    .status-icon {
        font-size: 1rem;
    }

    /* Header - Compact Redesigned */
    .pos-header {
        padding: 6px 16px !important;
        background: white !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .pos-header-title {
        display: none !important;
    }

    .pos-header-actions {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }

    .pos-header-btn {
        width: 34px !important;
        height: 34px !important;
        background: #f1f5f9 !important;
        border: none !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        color: #475569 !important;
        transition: all 0.2s;
    }

    .pos-header-btn:active {
        transform: scale(0.9) !important;
        background: #e2e8f0 !important;
    }

    .pos-header-btn.exit-btn {
        background: #fee2e2 !important;
        color: #ef4444 !important;
    }

    /* ========================================
       MOBILE TAB NAVIGATION
       ======================================== */

    /* ========================================
       MOBILE BOTTOM NAVIGATION (Redesigned)
       ======================================== */
    .pos-mobile-tabs {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        height: 75px;
        display: flex;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
        z-index: 2000;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: content-box;
        justify-content: space-around;
        align-items: center;
    }

    .pos-mobile-tab {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #94a3b8 !important;
        transition: all 0.3s ease;
        background: transparent !important;
        border: none;
        position: relative;
        outline: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .pos-mobile-tab.active {
        color: #4f46e5 !important;
    }

    .pos-mobile-tab i {
        font-size: 1.5rem !important;
        margin-bottom: 5px;
    }

    .pos-mobile-tab span {
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    /* Active Indicator dot */
    .pos-mobile-tab.active::after {
        content: '';
        position: absolute;
        bottom: 10px;
        width: 6px;
        height: 6px;
        background: #4f46e5;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(79, 70, 229, 0.4);
    }

    /* Adjust container for bottom nav */
    .pos-grid-container {
        padding-bottom: 70px !important;
        /* Space for the bottom nav */
    }

    /* Tab Content Areas */
    .pos-tab-content {
        display: none;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .pos-tab-content.active {
        display: flex;
        flex-direction: column;
    }

    /* ========================================
       ULTRA-COMPACT MOBILE LAYOUT
       ======================================== */

    /* Hide the bulky top dashboard on mobile to save space */
    .pos-top-dashboard {
        display: none !important;
    }

    /* Fixed Header - Extra Slim & Premium */
    .pos-header {
        position: sticky !important;
        top: 0;
        z-index: 1002;
        padding: 0 16px !important;
        height: 54px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Add a small user indicator in header since top-dashboard is gone */
    .pos-header::before {
        content: 'Caja #1 • admin';
        font-size: 0.65rem;
        font-weight: 800;
        color: #94a3b8;
        position: absolute;
        top: 2px;
        left: 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .pos-header-actions {
        margin-top: 8px;
        /* Offset for the user indicator */
    }

    .pos-header-btn {
        width: 36px !important;
        height: 36px !important;
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    }

    /* ========================================
       CONTENT AREA AESTHETICS
       ======================================== */
    .pos-container {
        background: #f8fafc !important;
        /* Light gray background makes cards pop */
    }

    /* ========================================
       PREMIUM CATEGORY & FILTER SYSTEM
       ======================================== */

    /* Unified Swiper Container with subtle backdrop */
    .pos-quick-filters,
    .pos-categories-list {
        padding: 8px 12px !important;
        gap: 8px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        background: rgba(248, 250, 252, 0.8) !important;
        backdrop-filter: blur(5px);
        position: relative;
        min-height: 48px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
        justify-content: flex-start !important;
    }

    /* Hide scrollbars but allow scrolling */
    .pos-quick-filters::-webkit-scrollbar,
    .pos-categories-list::-webkit-scrollbar {
        display: none;
    }

    /* Quick Filters - Sleek Pill Mode */
    .pos-quick-filters .btn {
        border-radius: 12px !important;
        padding: 0 12px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        height: 30px !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
        text-transform: none !important;
    }

    /* Hide redundant 'Todos' from Quick Filters on Mobile */
    .pos-quick-filters .btn-primary {
        display: none !important;
    }

    .pos-quick-filters .btn i {
        font-size: 0.75rem !important;
    }

    /* Category Buttons - Matching Aesthetic */
    .pos-category-btn,
    .pos-categories-list .btn {
        border-radius: 20px !important;
        padding: 0 14px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        height: 32px !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        background: white !important;
        color: #475569 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .pos-category-btn.active {
        background: #0f172a !important;
        color: white !important;
        border-color: #0f172a !important;
    }

    .btn-filter-fav {
        background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
    }

    .btn-filter-top {
        background: linear-gradient(135deg, #10b981, #34d399) !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
    }

    .btn-filter-kit {
        background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
    }

    .btn-filter-serv {
        background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2) !important;
    }

    .btn-filter-rec {
        background: linear-gradient(135deg, #f43f5e, #fb7185) !important;
        box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2) !important;
    }

    /* Category Buttons & Stock Indicators handled globally in ui.js */

    /* Search Bar Integration */
    .pos-search-wrapper {
        padding: 8px 16px 16px 16px !important;
        background: transparent !important;
    }

    #pos-search {
        border-radius: 20px !important;
        height: 54px !important;
        border: 1px solid rgba(0, 0, 0, 0.02) !important;
        background: white !important;
        font-size: 0.95rem !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.04) !important;
    }

    /* Product Cards - Smoothing */
    .pos-product-card {
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        border: 1px solid rgba(0, 0, 0, 0.01) !important;
    }

    .pos-product-card:active {
        transform: scale(0.94) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    .pos-product-name {
        letter-spacing: -0.2px !important;
        color: #1e293b !important;
    }

    /* Plus button refined */
    .pos-product-price::after {
        content: '\2b';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 0.7rem;
        width: 26px;
        height: 26px;
        background: #f8fafc;
        border: 1px solid #f1f5f9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        transition: all 0.2s;
    }

    .pos-product-card:active .pos-product-price::after {
        background: #6366f1;
        color: white;
        border-color: #6366f1;
    }

    /* Scroll area adjustments */
    .pos-tab-content {
        background: #f8fafc !important;
        height: calc(100vh - 120px) !important;
    }

    /* ========================================
       CART TAB (MOBILE)
       ======================================== */

    /* ========================================
       MODERN SEARCH BAR (Integrated)
       ======================================== */
    .pos-search-wrapper i {
        position: absolute;
        left: 32px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        z-index: 10;
        pointer-events: none;
    }

    /* Adjust main content scroll area */
    .pos-tab-content {
        height: calc(100vh - 120px) !important;
        background: #f8fafc !important;
        display: none;
    }

    .pos-tab-content.active {
        display: flex !important;
        flex-direction: column !important;
    }

    /* ========================================
       CART TAB (MOBILE REDESIGN)
       ======================================== */
    .pos-cart-mobile {
        background: #f8fafc !important;
        /* Unified backdrop */
    }

    .pos-cart-header {
        padding: 20px 16px !important;
        background: white !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    }

    .pos-cart-header h3 {
        font-weight: 800 !important;
        font-size: 1.25rem !important;
        color: #1e293b !important;
        margin: 0 !important;
    }

    #cart-item-count {
        font-size: 0.8rem;
        background: #f1f5f9;
        padding: 4px 10px;
        border-radius: 20px;
        color: #64748b;
        font-weight: 700;
        margin-left: 8px;
    }

    /* Cart Items List - Premium Cards */
    .pos-cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 16px !important;
        background: transparent !important;
    }

    .cart-item {
        background: white !important;
        border-radius: 28px !important;
        padding: 20px !important;
        margin-bottom: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        border: 1px solid rgba(0, 0, 0, 0.03) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
        background: linear-gradient(145deg, #ffffff, #f9fafb) !important;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .cart-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #4f46e5;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .cart-item.new-cart-item-anim::before {
        opacity: 1;
    }

    .cart-item-main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
    }

    .cart-item-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cart-item-name-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .cart-item-name {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.2 !important;
        font-family: 'Outfit', sans-serif;
    }

    .exempt-tiny {
        font-size: 0.6rem;
        background: #fee2e2;
        color: #ef4444;
        padding: 2px 8px;
        border-radius: 8px;
        font-weight: 900;
        letter-spacing: 0.5px;
    }

    .item-meta-label {
        font-size: 0.75rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 10px;
        width: fit-content;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    }

    .item-meta-label.tech {
        background: #eff6ff;
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.1);
    }

    .item-meta-label.auto {
        background: #f8fafc;
        color: #64748b;
        border: 1px solid rgba(100, 116, 139, 0.1);
    }

    .cart-item-actions {
        display: flex;
        gap: 8px;
    }

    .action-mini {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.03);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
    }

    .action-mini:active {
        transform: scale(0.9);
    }

    .btn-edit {
        background: #3b82f6 !important;
        color: white !important;
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
    }

    .btn-tag {
        background: #f59e0b !important;
        color: white !important;
        box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
    }

    .btn-delete {
        background: #ef4444 !important;
        color: white !important;
        box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
    }

    .cart-item-controls-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-top: 10px;
        border-top: 1px dashed rgba(0, 0, 0, 0.05);
    }

    .price-stack {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .unit-price {
        font-size: 0.85rem;
        color: #94a3b8;
        font-weight: 600;
    }

    .line-total {
        font-size: 1.3rem !important;
        font-weight: 950 !important;
        color: #1e293b !important;
        letter-spacing: -0.8px;
        font-family: 'Outfit', sans-serif;
    }

    .quantity-pill {
        display: flex;
        align-items: center;
        background: #f1f5f9;
        padding: 5px;
        border-radius: 18px;
        gap: 4px;
    }

    .pill-btn {
        width: 34px;
        height: 34px;
        border-radius: 14px;
        border: none;
        background: white;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: #4f46e5;
        transition: all 0.2s;
    }

    .pill-btn:active {
        transform: scale(0.85);
        background: #f8fafc;
    }

    .pill-value {
        min-width: 40px;
        text-align: center;
        font-weight: 900;
        font-size: 1.1rem;
        color: #0f172a;
    }

    .cart-item-savings {
        font-size: 0.8rem;
        font-weight: 800;
        color: #059669;
        background: #dcfce7;
        padding: 6px 14px;
        border-radius: 10px;
        width: fit-content;
        margin-left: auto;
        letter-spacing: -0.2px;
    }

    /* Summary & Footer Overhaul */
    .pos-cart-summary {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(25px);
        padding: 20px 24px !important;
        border-radius: 35px 35px 0 0 !important;
        box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 1) !important;
    }

    .summary-row {
        margin-bottom: 10px !important;
        font-size: 0.95rem;
    }

    .summary-row span:first-child {
        color: #64748b;
        font-weight: 600;
    }

    .total-row {
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .total-label {
        font-size: 1rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        letter-spacing: 1px;
    }

    .total-amount {
        font-size: 2.5rem !important;
        font-weight: 950 !important;
        color: #4f46e5 !important;
    }

    #pos-pay-btn {
        background: linear-gradient(135deg, #6366f1, #4338ca) !important;
        height: 70px !important;
        border-radius: 22px !important;
        font-size: 1.4rem !important;
        box-shadow: 0 15px 35px rgba(79, 70, 229, 0.4) !important;
        position: relative;
        overflow: hidden;
    }

    #pos-pay-btn::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: rotate(45deg);
        animation: shimmers 3s infinite;
    }

    @keyframes shimmers {
        0% {
            transform: translateX(-150%) rotate(45deg);
        }

        100% {
            transform: translateX(150%) rotate(45deg);
        }
    }

    #general-discount-btn {
        height: 54px !important;
        border-radius: 18px !important;
        font-weight: 700 !important;
        color: #4f46e5 !important;
        background: #f5f3ff !important;
        border: 1px solid rgba(79, 70, 229, 0.1) !important;
    }

    /* ========================================
       FLOATING CART BADGE (Premium)
       ======================================== */
    .pos-floating-cart-badge {
        position: fixed !important;
        bottom: 85px !important;
        /* Above bottom nav */
        right: 20px !important;
        width: 65px !important;
        height: 65px !important;
        border-radius: 22px !important;
        background: #6366f1 !important;
        color: white !important;
        display: none;
        /* Controlled by JS */
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.6rem !important;
        box-shadow: 0 15px 30px rgba(99, 102, 241, 0.4) !important;
        z-index: 1000 !important;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        border: 4px solid white !important;
    }

    .pos-floating-cart-badge:active {
        transform: scale(0.9) !important;
    }

    .cart-badge-count {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #ef4444;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 0.65rem;
        font-weight: 900;
        border: 2px solid white;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        z-index: 10;
        line-height: 1;
    }

    /* Scroll area safety */
    .pos-grid-container {
        padding-bottom: 80px !important;
    }

    /* HELP BUTTON */
    .btn-floating-help {
        position: fixed !important;
        bottom: 90px !important;
        left: 20px !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(10px);
        color: #94a3b8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(0, 0, 0, 0.03) !important;
        z-index: 2001 !important;
        transition: all 0.2s ease;
    }

    .btn-floating-help:active {
        transform: scale(0.9);
        background: white !important;
    }
}

/* --- TABLET & DESKTOP (Keep original layout) --- */
@media (min-width: 769px) {
    .pos-mobile-tabs {
        display: none !important;
    }

    .pos-tab-content {
        display: block !important;
    }

    .pos-floating-cart-badge {
        display: none !important;
    }

    /* Original desktop grid layout */
    .pos-grid-container {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 0;
        flex: 1;
        overflow: hidden;
    }

    .pos-products-area,
    .pos-cart-area {
        display: flex !important;
        flex-direction: column;
    }

    /* ========================================
   DARK MODE OVERRIDES (POS SPECIFIC)
   ======================================== */
    /* GLOBAL POS DARK THEME */
    body[data-theme="dark"] .pos-container,
    body[data-theme="dark"] .pos-grid-container {
        background: var(--bg-color) !important;
    }

    body[data-theme="dark"] .pos-top-dashboard {
        background: var(--card-bg-color) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    body[data-theme="dark"] .pos-header,
    body[data-theme="dark"] .pos-mobile-tabs,
    body[data-theme="dark"] .pos-quick-filters,
    body[data-theme="dark"] .pos-categories-list,
    body[data-theme="dark"] .pos-search-wrapper,
    body[data-theme="dark"] .pos-products-area,
    body[data-theme="dark"] .pos-cart-area {
        background: var(--card-bg-color) !important;
        border-color: var(--border-color) !important;
    }

    body[data-theme="dark"] .pos-header-title {
        color: #f1f5f9 !important;
    }

    body[data-theme="dark"] .pos-header-btn {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] .pos-header-btn:active {
        background: var(--bg-subtle-gray) !important;
    }

    body[data-theme="dark"] .pos-mobile-tab {
        color: var(--text-muted) !important;
    }

    body[data-theme="dark"] .pos-mobile-tab.active {
        color: var(--primary-color) !important;
    }

    body[data-theme="dark"] .pos-mobile-tab.active::after {
        background: var(--primary-color) !important;
    }

    body[data-theme="dark"] .pos-category-chip {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] .pos-category-chip.active {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: white !important;
    }

    body[data-theme="dark"] #pos-search {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] .pos-products-grid {
        background: var(--bg-color) !important;
    }

    /* PRODUCT CARDS - VITAL FIX */
    body[data-theme="dark"] .product-card,
    body[data-theme="dark"] .product-card.no-image,
    body[data-theme="dark"] .product-card.has-image {
        background: var(--card-bg-color) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--card-shadow) !important;
    }

    body[data-theme="dark"] .product-card-name,
    body[data-theme="dark"] .product-card-name-visible {
        color: var(--text-color) !important;
        background: transparent !important;
    }

    body[data-theme="dark"] .product-card.has-image .product-card-name-visible {
        background: var(--card-bg-color) !important;
        color: var(--text-color) !important;
        border-top: 1px solid var(--border-color) !important;
    }

    body[data-theme="dark"] .product-card-stock {
        color: var(--text-muted) !important;
    }

    body[data-theme="dark"] .product-card-price {
        color: var(--primary-color) !important;
    }

    body[data-theme="dark"] .product-card.has-image .product-card-img-wrapper {
        background-color: var(--bg-color) !important;
    }


    /* CART AREA */
    body[data-theme="dark"] .pos-cart-mobile {
        background: var(--bg-color) !important;
    }

    body[data-theme="dark"] .pos-cart-header,
    body[data-theme="dark"] .pos-cart-summary,
    body[data-theme="dark"] .pos-cart-footer {
        background: var(--card-bg-color) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] .pos-cart-header h3 {
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] #cart-item-count {
        color: var(--text-muted) !important;
    }

    body[data-theme="dark"] .cart-item {
        background: var(--card-bg-color) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    }

    body[data-theme="dark"] .cart-item-name {
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] .cart-item-price-detail {
        color: var(--text-muted) !important;
    }

    body[data-theme="dark"] .quantity-spinner {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
    }

    body[data-theme="dark"] .quantity-display {
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] .btn-spinner {
        color: var(--primary-color) !important;
    }

    body[data-theme="dark"] .btn-spinner:hover {
        background: var(--card-bg-color) !important;
    }

    body[data-theme="dark"] .cart-item-actions-menu .btn {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
        color: var(--text-muted) !important;
    }

    body[data-theme="dark"] .cart-item-actions-menu .btn:hover {
        border-color: var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

    body[data-theme="dark"] .cart-item-actions-menu .btn-outline-danger:hover {
        border-color: var(--danger-color) !important;
        color: var(--danger-color) !important;
    }

    body[data-theme="dark"] .btn-icon {
        background: var(--bg-color) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] .summary-row {
        color: var(--text-muted) !important;
    }

    body[data-theme="dark"] .summary-row span:last-child {
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] #pos-total {
        color: var(--primary-color) !important;
    }

    /* HELP MENU */
    body[data-theme="dark"] .pos-help-menu {
        background: var(--card-bg-color) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--card-shadow) !important;
    }

    body[data-theme="dark"] .help-menu-item {
        color: var(--text-color) !important;
    }

    body[data-theme="dark"] .help-menu-item:hover {
        background: var(--bg-subtle-gray) !important;
    }
}