/*
Theme Name: RUIYI Retail POS (PWA)
Theme URI: https://ruiyi-pos.com
Author: RUIYI Development Team
Author URI: https://ruiyi.com
Description: Modern retail POS system theme for WooCommerce with Progressive Web App (PWA) support. Designed for retail stores to manage sales, inventory, and reporting through an intuitive interface. Features include offline support, installable app, cashier module, inventory management, real-time sync with WooCommerce, and comprehensive reporting. Built with Tailwind CSS for modern UI components.
Version: 2.3.5
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ruiyi-retail-pos
Domain Path: /languages
Tags: pos, retail, woocommerce, cashier, inventory, point-of-sale, tailwind, modern
WC requires at least: 8.0
WC tested up to: 8.5
*/

/* Modern POS System Base Styles with Tailwind Integration */

/* Custom CSS Variables for POS Theme */
:root {
    /* Primary Brand Colors */
    --pos-primary: #3B82F6;
    --pos-primary-dark: #1E40AF;
    --pos-primary-light: #93C5FD;
    
    /* Secondary Colors */
    --pos-secondary: #6B7280;
    --pos-secondary-dark: #374151;
    --pos-secondary-light: #D1D5DB;
    
    /* Status Colors */
    --pos-success: #10B981;
    --pos-warning: #F59E0B;
    --pos-error: #EF4444;
    --pos-info: #3B82F6;
    
    /* Background Colors */
    --pos-bg-primary: #F9FAFB;
    --pos-bg-secondary: #FFFFFF;
    --pos-bg-card: #FFFFFF;
    
    /* Text Colors */
    --pos-text-primary: #1F2937;
    --pos-text-secondary: #6B7280;
    --pos-text-muted: #9CA3AF;
    
    /* Border Colors */
    --pos-border-primary: #E5E7EB;
    --pos-border-secondary: #D1D5DB;
    
    /* Shadow Values */
    --pos-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --pos-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --pos-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Border Radius */
    --pos-radius-sm: 0.375rem;
    --pos-radius-md: 0.5rem;
    --pos-radius-lg: 0.75rem;
    
    /* Transitions */
    --pos-transition: all 0.2s ease-in-out;
    --pos-transition-slow: all 0.3s ease-in-out;
}

/* Base Reset with Modern Defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--pos-text-primary);
    background-color: var(--pos-bg-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* POS System Specific Styles */
.pos-wrapper {
    min-height: 100vh;
    background-color: var(--pos-bg-primary);
    padding: 0;
    margin: 0;
}

.pos-main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Fix for dashboard container */
.dashboard-container {
    background: var(--pos-bg-card);
    border-radius: var(--pos-radius-lg);
    padding: 2rem;
    box-shadow: var(--pos-shadow-md);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* POS Header Styles */
.pos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pos-border-primary);
}

.pos-user-info {
    display: flex;
    align-items: center;
    color: var(--pos-text-secondary);
}

/* POS Checkout Styles */
.pos-checkout-container {
    display: flex;
    gap: 2rem;
    min-height: calc(100vh - 200px);
    height: auto;
}

.products-section {
    flex: 2;
    background: var(--pos-bg-card);
    border-radius: var(--pos-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--pos-shadow-md);
    overflow-y: auto;
}

.cart-section {
    flex: 1;
    background: var(--pos-bg-card);
    border-radius: var(--pos-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--pos-shadow-md);
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 100%;
}

.cart-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pos-border-primary);
}

.cart-items {
    flex: 1;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.cart-total {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--pos-border-primary);
}

.checkout-button {
    width: 100%;
    padding: 1rem;
    background: var(--pos-success);
    color: white;
    border: none;
    border-radius: var(--pos-radius-md);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pos-transition);
}

.checkout-button:hover {
    background: #059669;
}

.checkout-button:disabled {
    background: var(--pos-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.product-card {
    background: var(--pos-bg-card);
    border: 1px solid var(--pos-border-primary);
    border-radius: var(--pos-radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: var(--pos-transition);
    text-align: center;
}

.product-card:hover {
    border-color: var(--pos-primary);
    box-shadow: var(--pos-shadow-md);
    transform: translateY(-2px);
}

.product-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--pos-radius-sm);
    margin-bottom: 0.5rem;
}

.product-name {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--pos-text-primary);
}

.product-price {
    color: var(--pos-primary);
    font-weight: 700;
    font-size: 1rem;
}

/* Login Page Styles */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
    background: white;
    padding: 2rem;
    border-radius: var(--pos-radius-lg);
    box-shadow: var(--pos-shadow-lg);
    width: 100%;
    max-width: 400px;
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo h1 {
    font-size: 2rem;
    color: var(--pos-primary);
    margin-bottom: 0.5rem;
}

.login-form input {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--pos-border-primary);
    border-radius: var(--pos-radius-md);
    font-size: 1rem;
    transition: var(--pos-transition);
}

.login-form input:focus {
    outline: none;
    border-color: var(--pos-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.login-form button {
    width: 100%;
    padding: 1rem;
    background: var(--pos-primary);
    color: white;
    border: none;
    border-radius: var(--pos-radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pos-transition);
}

.login-form button:hover {
    background: var(--pos-primary-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
    .pos-main {
        padding: 1rem;
    }
    
    .pos-checkout-container {
        flex-direction: column;
        height: auto;
    }
    
    .products-section,
    .cart-section {
        flex: none;
    }
    
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .dashboard-container {
        padding: 1rem;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }

/* Custom Component Classes */
.btn-primary {
    background: var(--pos-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--pos-radius-md);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pos-transition);
}

.btn-primary:hover {
    background: var(--pos-primary-dark);
}

.btn-secondary {
    background: var(--pos-secondary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--pos-radius-md);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pos-transition);
}

.btn-secondary:hover {
    background: var(--pos-secondary-dark);
}

.btn-success {
    background: var(--pos-success);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--pos-radius-md);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pos-transition);
}

.btn-success:hover {
    background: #059669;
}

.btn-danger {
    background: var(--pos-error);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--pos-radius-md);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--pos-transition);
}

.btn-danger:hover {
    background: #DC2626;
}

/* Hide admin bar for POS pages */
.admin-bar {
    margin-top: 0 !important;
}

/* Ensure full height for POS pages */
html.pos-page {
    height: 100%;
}

body.pos-page {
    height: 100%;
}