/**
 * ThongDy Responsive Display CSS
 * จัดการการแสดงผลตามขนาดหน้าจอ
 * 
 * - Mobile (< 768px): แสดงทั้งหมด (หรือแสดงเฉพาะ POS เมื่อเปิดโหมด pos_only=1)
 * - Desktop (>= 768px): แสดงทั้งหมด
 * 
 * @version 1.1.0
 */

/* ===== CSS Variables ===== */
:root {
    --screen-mobile-max: 767px;
    --screen-tablet-min: 768px;
    --screen-tablet-max: 1023px;
    --screen-desktop-min: 1024px;
    --screen-large-min: 1280px;
    
    --mobile-padding: 0.5rem;
    --mobile-font-size: 14px;
    --mobile-line-height: 1.4;
}

/* ===== Base Responsive Classes ===== */

/* Hide on mobile (<768px) */
.hide-mobile,
.hide-on-mobile,
[data-hide-mobile="true"] { }

/* Show only on mobile */
.show-mobile,
.show-on-mobile,
[data-show-mobile="true"] { 
    display: none !important; 
}

/* Hide on desktop (>=768px) */
.hide-desktop,
.hide-on-desktop,
[data-hide-desktop="true"] { 
    display: none !important; 
}

/* Show only on desktop */
.show-desktop,
.show-on-desktop,
[data-show-desktop="true"] { }

/* Non-POS elements - visible by default */
.non-pos,
[data-non-pos="true"],
[data-pos-only="false"] { }

/* POS-only elements - visible always */
.pos-only,
[data-pos-only="true"] { }

/* ===== Mobile Styles (< 768px) ===== */
@media screen and (max-width: 767px) {
    /* Show/Hide Classes */
    .hide-mobile,
    .hide-on-mobile,
    [data-hide-mobile="true"] { 
        display: none !important; 
    }
    
    .show-mobile,
    .show-on-mobile,
    [data-show-mobile="true"] { 
        display: block !important; 
    }
    
    .show-mobile-flex { display: flex !important; }
    .show-mobile-inline { display: inline !important; }
    .show-mobile-inline-block { display: inline-block !important; }
    .show-mobile-inline-flex { display: inline-flex !important; }
    .show-mobile-grid { display: grid !important; }
    
    .hide-desktop,
    .hide-on-desktop,
    [data-hide-desktop="true"] { 
        display: block !important; 
    }
    
    .show-desktop,
    .show-on-desktop,
    [data-show-desktop="true"] { 
        display: none !important; 
    }
    
    /* ===== Non-POS Elements (Hidden on Mobile only when POS-only mode is enabled) ===== */
    body.pos-only-mobile .non-pos,
    body.pos-only-mobile [data-non-pos="true"],
    body.pos-only-mobile .non-pos-sidebar,
    body.pos-only-mobile .non-pos-header,
    body.pos-only-mobile .non-pos-footer,
    body.pos-only-mobile .non-pos-content,
    body[data-show-only-pos="true"] .non-pos,
    body[data-show-only-pos="true"] [data-non-pos="true"],
    body[data-show-only-pos="true"] .non-pos-sidebar,
    body[data-show-only-pos="true"] .non-pos-header,
    body[data-show-only-pos="true"] .non-pos-footer,
    body[data-show-only-pos="true"] .non-pos-content {
        display: none !important;
    }
    
    /* ===== Mobile Layout ===== */
    body.screen-mobile {
        font-size: var(--mobile-font-size);
        line-height: var(--mobile-line-height);
    }
    
    /* Hide sidebar on mobile */
    body.screen-mobile .sidebar,
    body.screen-mobile .desktop-sidebar,
    body.screen-mobile .non-pos-sidebar,
    body.screen-mobile aside.sidebar {
        display: none !important;
    }
    
    /* Full width main content */
    body.screen-mobile .main-content,
    body.screen-mobile .content-area,
    body.screen-mobile main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: var(--mobile-padding) !important;
    }
    
    /* ===== Mobile Utilities ===== */
    .mobile-full-width { 
        width: 100% !important; 
        max-width: 100% !important; 
    }
    .mobile-no-padding { padding: 0 !important; }
    .mobile-no-margin { margin: 0 !important; }
    .mobile-padding-sm { padding: 0.5rem !important; }
    .mobile-margin-sm { margin: 0.5rem !important; }
    
    /* Mobile text sizes */
    .mobile-text-xs { font-size: 0.65rem !important; }
    .mobile-text-sm { font-size: 0.75rem !important; }
    .mobile-text-base { font-size: 0.875rem !important; }
    .mobile-text-lg { font-size: 1rem !important; }
    
    /* Mobile spacing */
    .mobile-gap-1 { gap: 0.25rem !important; }
    .mobile-gap-2 { gap: 0.5rem !important; }
    .mobile-gap-3 { gap: 0.75rem !important; }
    .mobile-gap-4 { gap: 1rem !important; }
    
    /* ===== Mobile Table ===== */
    .mobile-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-table-compact th,
    .mobile-table-compact td {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    /* ===== Mobile Cards ===== */
    .mobile-card {
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 0.5rem;
        padding: 0.75rem;
        background: #fff;
    }
    
    .mobile-card-compact {
        padding: 0.5rem;
    }
    
    /* ===== Mobile Buttons ===== */
    .mobile-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        touch-action: manipulation;
    }
    
    .mobile-btn-full {
        width: 100%;
        justify-content: center;
    }
    
    /* ===== Mobile Forms ===== */
    .mobile-form-input,
    .mobile-form-select {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    /* ===== Mobile Navigation ===== */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        padding: 0.5rem;
        z-index: 50;
        display: flex;
        justify-content: space-around;
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        font-size: 0.65rem;
        color: #6b7280;
        text-decoration: none;
    }
    
    .mobile-nav-item.active {
        color: #2563eb;
    }
    
    .mobile-nav-item svg,
    .mobile-nav-item .icon {
        width: 24px;
        height: 24px;
        margin-bottom: 0.25rem;
    }
    
    /* ===== Mobile Header ===== */
    .mobile-header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.75rem;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .mobile-header-title {
        font-size: 1rem;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ===== Tablet Styles (768px - 1023px) ===== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet,
    [data-hide-tablet="true"] { 
        display: none !important; 
    }
    
    .show-tablet,
    [data-show-tablet="true"] { 
        display: block !important; 
    }
    
    .show-tablet-flex { display: flex !important; }
    .show-tablet-inline { display: inline !important; }
    .show-tablet-grid { display: grid !important; }
    
    /* Tablet-specific adjustments */
    body.screen-tablet {
        font-size: 15px;
    }
    
    body.screen-tablet .sidebar {
        width: 220px;
    }
    
    body.screen-tablet .main-content {
        margin-left: 220px;
    }
}

/* ===== Desktop Styles (>= 768px) ===== */
@media screen and (min-width: 768px) {
    /* Show/Hide Classes */
    .hide-mobile,
    .hide-on-mobile,
    [data-hide-mobile="true"] { 
        display: block !important; 
    }
    
    .show-mobile,
    .show-on-mobile,
    [data-show-mobile="true"] { 
        display: none !important; 
    }
    
    .hide-desktop,
    .hide-on-desktop,
    [data-hide-desktop="true"] { 
        display: none !important; 
    }
    
    .show-desktop,
    .show-on-desktop,
    [data-show-desktop="true"] { 
        display: block !important; 
    }
    
    .show-desktop-flex { display: flex !important; }
    .show-desktop-inline { display: inline !important; }
    .show-desktop-inline-block { display: inline-block !important; }
    .show-desktop-grid { display: grid !important; }
    
    /* Desktop utilities */
    .desktop-full-width { width: 100% !important; }
    .desktop-auto-width { width: auto !important; }
}

/* ===== Large Desktop Styles (>= 1024px) ===== */
@media screen and (min-width: 1024px) {
    .hide-lg,
    [data-hide-lg="true"] { 
        display: none !important; 
    }
    
    .show-lg,
    [data-show-lg="true"] { 
        display: block !important; 
    }
    
    .show-lg-flex { display: flex !important; }
    .show-lg-inline { display: inline !important; }
    .show-lg-grid { display: grid !important; }
}

/* ===== Extra Large Desktop (>= 1280px) ===== */
@media screen and (min-width: 1280px) {
    .hide-xl,
    [data-hide-xl="true"] { 
        display: none !important; 
    }
    
    .show-xl,
    [data-show-xl="true"] { 
        display: block !important; 
    }
}

/* ===== POS Specific Responsive Styles ===== */

/* POS Receipt - Mobile */
@media screen and (max-width: 767px) {
    .pos-receipt,
    .pos-ticket,
    .pos-bill {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.5rem !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    .pos-receipt table,
    .pos-ticket table,
    .pos-bill table {
        font-size: 11px !important;
    }
    
    .pos-receipt th,
    .pos-receipt td,
    .pos-ticket th,
    .pos-ticket td,
    .pos-bill th,
    .pos-bill td {
        padding: 2px 4px !important;
    }
    
    .pos-header {
        padding: 0.5rem !important;
    }
    
    .pos-header .logo {
        max-width: 60px !important;
        max-height: 40px !important;
    }
    
    .pos-header .title {
        font-size: 1rem !important;
    }
    
    .pos-header .subtitle {
        font-size: 0.75rem !important;
    }
    
    .pos-footer {
        padding: 0.5rem !important;
        font-size: 0.65rem !important;
    }
    
    .pos-total {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
    }
    
    /* POS Button Grid - Mobile */
    .pos-btn-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.25rem !important;
    }
    
    .pos-btn {
        min-height: 48px !important;
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
}

/* POS Receipt - Desktop */
@media screen and (min-width: 768px) {
    .pos-receipt,
    .pos-ticket,
    .pos-bill {
        max-width: 300px;
        margin: 0 auto;
        padding: 1rem;
        font-size: 14px;
    }
    
    .pos-btn-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }
}

/* ===== Print Media Queries ===== */
@media print {
    /* Hide screen-only elements */
    .no-print,
    .hide-print,
    [data-hide-print="true"] {
        display: none !important;
    }
    
    /* Show print-only elements */
    .print-only,
    .show-print,
    [data-show-print="true"] {
        display: block !important;
    }
    
    /* Reset body for print */
    body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        font-size: 12pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Hide non-POS only when POS-only mode is enabled */
    body.pos-only-mobile .non-pos,
    body.pos-only-mobile [data-non-pos="true"],
    body.pos-only-mobile .non-pos-sidebar,
    body.pos-only-mobile .non-pos-header,
    body.pos-only-mobile .non-pos-footer,
    body.pos-only-mobile .non-pos-content,
    body[data-show-only-pos="true"] .non-pos,
    body[data-show-only-pos="true"] [data-non-pos="true"],
    body[data-show-only-pos="true"] .non-pos-sidebar,
    body[data-show-only-pos="true"] .non-pos-header,
    body[data-show-only-pos="true"] .non-pos-footer,
    body[data-show-only-pos="true"] .non-pos-content {
        display: none !important;
    }
    
    /* POS Receipt Print Styles */
    .pos-receipt,
    .pos-ticket,
    .pos-bill {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* ===== Orientation Specific ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* Landscape mobile - compact UI */
    .mobile-header { padding: 0.5rem; }
    .mobile-nav { padding: 0.25rem; }
    
    .pos-btn {
        min-height: 36px !important;
    }
}

@media screen and (orientation: portrait) {
    /* Portrait adjustments */
}

/* ===== Touch Device Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
    /* Touch-only devices */
    button,
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Larger touch targets */
    .touch-target {
        min-height: 48px;
        min-width: 48px;
        padding: 12px;
    }
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Dark Mode Support ===== */
@media (prefers-color-scheme: dark) {
    .mobile-card {
        background: #1f2937;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    
    .mobile-header {
        background: #1f2937;
        border-color: #374151;
    }
    
    .mobile-nav {
        background: #1f2937;
        border-color: #374151;
    }
    
    .mobile-nav-item {
        color: #9ca3af;
    }
    
    .mobile-nav-item.active {
        color: #60a5fa;
    }
}