/**
 * Mobile Responsive Styles
 * Version: 3.0.0
 * Date: 2025-11-03
 *
 * Includes:
 * - Mobile Navigation Modal
 * - Mobile Tab Dropdown (legacy)
 * - Header Optimization for Mobile
 * - Dashboard Selector Mobile Menu
 * - Bottom Navigation Bar for Tabs
 * - Widget Grid Responsive
 * - Content Maximization
 * - Responsive adjustments
 */

/* ========================================
   Mobile Navigation Modal (DEPRECATED - Using mobile-simple.css instead)
   ======================================== */

/* COMMENTED OUT - Conflicts with new mobile-simple.css
#mobile-nav-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
}

#mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

#mobile-nav-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 320px;
    max-width: 85vw;
    background: white;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.dark #mobile-nav-panel {
    background: rgb(17, 24, 39);
}

.mobile-nav-item {
    position: relative;
    transition: all 200ms ease;
}

.mobile-nav-item:active {
    transform: scale(0.98);
}

.mobile-nav-item .w-10 {
    transition: transform 200ms ease;
}

.mobile-nav-item:hover .w-10 {
    transform: scale(1.1);
}

#mobile-nav-modal nav::-webkit-scrollbar {
    width: 6px;
}

#mobile-nav-modal nav::-webkit-scrollbar-track {
    background: transparent;
}

#mobile-nav-modal nav::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
}

#mobile-nav-modal nav::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}
*/

/* ========================================
   Mobile Tab Dropdown (Legacy)
   ======================================== */

/* Mobile Tab Menu Styles */
#mobile-tab-dropdown {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-tab-item {
    transition: all 0.15s ease;
}

.mobile-tab-item:active {
    transform: scale(0.98);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Hide widget toolbox on mobile by default */
    #widget-toolbox {
        display: none;
    }
    
    /* Show widget toolbox button on mobile */
    #show-widget-toolbox-btn {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 45 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Adjust widget toolbox for mobile when shown */
    #widget-toolbox.mobile-visible {
        display: flex !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 400px !important;
        max-height: 80vh !important;
        z-index: 50 !important;
    }
    
    /* Reduce padding on mobile */
    #main-content {
        padding: 0.75rem !important;
    }
    
    /* Adjust dashboard tabs container */
    #dashboard-tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    #dashboard-tabs-container::-webkit-scrollbar {
        display: none;
    }
    
    /* Stack dashboard controls vertically on small screens */
    @media (max-width: 640px) {
        .dashboard-controls {
            flex-direction: column !important;
            align-items: stretch !important;
        }
        
        .dashboard-controls > * {
            width: 100% !important;
            justify-content: center !important;
        }
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    #widget-toolbox {
        width: 18rem;
    }
}

/* Mobile menu active state */
.mobile-tab-item.active {
    background-color: rgba(59, 130, 246, 0.1);
    border-left-color: rgb(59, 130, 246);
}

.dark .mobile-tab-item.active {
    background-color: rgba(59, 130, 246, 0.2);
}

/* Mobile overlay for dropdowns */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 40;
    display: none;
}

.mobile-overlay.active {
    display: block;
}

/* Touch-friendly button sizes */
@media (max-width: 768px) {
    button, .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Increase tap target size */
    a, input[type="checkbox"], input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ========================================
   MOBILE OPTIMIZATION v3.0
   Based on user feedback screenshots
   ======================================== */

@media (max-width: 768px) {

    /* ============ HEADER OPTIMIZATION ============ */

    /* Compact header - reduce height and padding */
    header {
        padding: 0.5rem 0.75rem !important;
        min-height: 48px !important;
        height: 48px !important;
    }

    header .header-container {
        padding: 0.5rem !important;
    }

    /* Hide less important header items on mobile */
    #header-visualization,
    #selected-device-info,
    #app-header-subtitle,
    header .hidden {
        display: none !important;
    }

    /* Logo - make smaller */
    header img[src*="logo"] {
        height: 28px !important;
        width: auto !important;
    }

    /* App title - smaller font */
    #app-header-title {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    /* Header button groups - reduce gap */
    header > div:first-child,
    header > div:last-child {
        gap: 0.375rem !important;
    }

    /* Header buttons - more compact */
    header button:not(#user-menu-btn) {
        padding: 0.5rem !important;
    }

    header button svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    /* User avatar - smaller */
    #user-menu-btn .w-8 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    /* Hide device selector on mobile - will show in menu */
    header #global-system-device-selector,
    header label[for="global-system-device-selector"],
    header .border-l.border-gray-300 {
        display: none !important;
    }

    /* ============ DASHBOARD SELECTOR ============ */

    /* Convert dashboard selector to dropdown */
    #dashboard-selector-container,
    #dashboard-list-container {
        position: relative;
    }

    /* Hide desktop dashboard list */
    #dashboard-tabs-container {
        display: none !important;
    }

    /* Mobile dashboard dropdown trigger */
    #mobile-dashboard-trigger {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: rgba(59, 130, 246, 0.1);
        border-radius: 0.5rem;
        cursor: pointer;
        margin: 0.5rem;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .dark #mobile-dashboard-trigger {
        background: rgba(59, 130, 246, 0.2);
    }

    /* Mobile dashboard dropdown menu */
    #mobile-dashboard-menu {
        position: absolute;
        top: 100%;
        left: 0.5rem;
        right: 0.5rem;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        max-height: 70vh;
        overflow-y: auto;
        z-index: 100;
        margin-top: 0.5rem;
    }

    .dark #mobile-dashboard-menu {
        background: rgb(31, 41, 55); /* gray-800 */
    }

    .mobile-dashboard-item {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: all 0.2s;
    }

    .dark .mobile-dashboard-item {
        border-bottom-color: rgba(255, 255, 255, 0.05);
    }

    .mobile-dashboard-item:active {
        transform: scale(0.98);
    }

    .mobile-dashboard-item.active {
        background: rgba(59, 130, 246, 0.1);
        border-left: 3px solid rgb(59, 130, 246);
    }

    /* ============ TAB NAVIGATION - USE EXISTING MOBILE DROPDOWN ============ */

    /* Mobile tab menu button - enhance styling */
    #mobile-tab-menu-btn {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 0.625rem 0.875rem !important;
        font-size: 0.875rem !important;
    }

    #mobile-tab-menu-btn svg:first-child {
        width: 1.125rem !important;
        height: 1.125rem !important;
    }

    #mobile-tab-menu-btn svg:last-child {
        width: 1rem !important;
        height: 1rem !important;
    }

    /* Mobile tab dropdown - improve style */
    #mobile-tab-dropdown {
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: auto !important;
        margin-top: 0.5rem !important;
        max-height: 70vh !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    }

    /* Mobile tab items - better touch targets */
    .mobile-tab-item {
        padding: 0.875rem 1rem !important;
        transition: all 0.2s ease !important;
        border-left-width: 3px !important;
    }

    .mobile-tab-item svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    .mobile-tab-item span {
        font-size: 0.875rem !important;
        font-weight: 500 !important;
    }

    .mobile-tab-item:active {
        transform: scale(0.98) !important;
        background-color: rgba(59, 130, 246, 0.05) !important;
    }

    .mobile-tab-item.active {
        background-color: rgba(59, 130, 246, 0.1) !important;
        border-left-color: rgb(59, 130, 246) !important;
    }

    .dark .mobile-tab-item.active {
        background-color: rgba(59, 130, 246, 0.2) !important;
    }

    /* ============ DESKTOP TAB TITLE ============ */

    /* Hide desktop tab title on mobile - using mobile dropdown instead */
    #desktop-tab-title {
        display: none !important;
    }

    /* ============ WIDGET GRID RESPONSIVE ============ */

    /* GridStack responsive */
    .grid-stack {
        min-height: auto !important;
    }

    .grid-stack-item {
        /* Allow widgets to be larger on mobile */
        min-width: 100% !important;
    }

    /* Widget minimum sizes on mobile */
    .grid-stack-item[gs-w="1"],
    .grid-stack-item[gs-w="2"],
    .grid-stack-item[gs-w="3"] {
        width: 100% !important;
    }

    .grid-stack-item[gs-w="4"],
    .grid-stack-item[gs-w="5"],
    .grid-stack-item[gs-w="6"] {
        width: 100% !important;
    }

    /* Widget content - ensure proper sizing */
    .widget-container,
    .chart-widget-container,
    .widget-content {
        min-height: 200px !important;
        height: auto !important;
    }

    /* Chart containers - proper aspect ratio */
    canvas.chart-canvas {
        max-height: 300px !important;
        width: 100% !important;
        height: auto !important;
    }

    /* ============ MAIN CONTENT AREA ============ */

    /* Main content - remove padding */
    #main-content {
        padding: 0 !important;
    }

    /* Right column - reduce padding */
    #right-column {
        padding: 0.5rem !important;
    }

    /* Right column content wrapper - reduce padding */
    #right-column-content-wrapper {
        border-radius: 0.5rem !important;
    }

    #right-column-content-wrapper > div:first-child {
        padding: 0.75rem !important;
    }

    /* ============ CONTENT PANELS ============ */

    /* Reduce padding, maximize content */
    .panel-container,
    .tab-content,
    .content-area {
        padding: 0.5rem !important;
    }

    /* Log area in Giám sát & Lệnh tab */
    #log-area,
    #command-log-container,
    .log-container {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        padding: 0.5rem !important;
    }

    /* Action buttons row - wrap on mobile */
    .action-buttons-row,
    .button-group {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .action-buttons-row button,
    .button-group button {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* ============ MODALS ============ */

    /* Full screen modals on mobile */
    .modal-dialog,
    .modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Modal body - maximize space */
    .modal-body {
        padding: 0.75rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ============ TABLES ============ */

    /* Responsive tables - horizontal scroll */
    .table-container,
    .ag-grid-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        font-size: 0.8125rem !important;
    }

    table th,
    table td {
        padding: 0.5rem !important;
        white-space: nowrap !important;
    }

    /* ============ FORMS ============ */

    /* Input fields - larger for touch */
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 0.75rem !important;
    }

    /* Select2 dropdowns */
    .select2-container .select2-selection {
        min-height: 44px !important;
        padding: 0.5rem !important;
    }

    /* ============ SPACING OPTIMIZATION ============ */

    /* Reduce unnecessary margins and paddings */
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .mt-4 {
        margin-top: 0.75rem !important;
    }

    .p-4 {
        padding: 0.75rem !important;
    }

    .gap-4 {
        gap: 0.75rem !important;
    }

    /* Remove excessive whitespace */
    br.mobile-hide {
        display: none !important;
    }

    .spacer-mobile-hide {
        display: none !important;
    }

    /* ============ TOAST NOTIFICATIONS ============ */

    /* Toast positioning on mobile */
    .toast-container,
    #toast-container {
        bottom: 1rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
    }

    .toast {
        font-size: 0.875rem !important;
        padding: 0.75rem !important;
        max-width: 100% !important;
    }

    /* ============ WIDGET EXPANSION MODAL ============ */

    /* Full screen widget expansion on mobile */
    #widget-expansion-modal .modal-content {
        border-radius: 0 !important;
    }

    #widget-expansion-modal .expansion-tab {
        font-size: 0.8125rem !important;
        padding: 0.625rem 0.75rem !important;
    }

    /* Chart in expansion modal */
    #expansion-chart {
        height: 250px !important;
    }

    /* Statistics cards - stack on mobile */
    #tab-statistics .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* ============ CONNECTION MODAL ============ */

    /* Device list - optimize for mobile */
    #device-list-container {
        max-height: 50vh !important;
    }

    .device-item {
        padding: 0.75rem !important;
    }

    /* ============ API TESTER ============ */

    /* API parameter rows - stack on mobile */
    .api-param-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .api-param-row input {
        width: 100% !important;
    }

    /* ============ DATAFLOW EDITOR ============ */

    /* Canvas controls - compact */
    .dataflow-controls {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .dataflow-controls button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* ============ HIDE DESKTOP-ONLY ELEMENTS ============ */

    .desktop-only,
    [data-mobile="hide"] {
        display: none !important;
    }

    /* ============ SCROLLBAR STYLING ============ */

    /* Hide scrollbar but keep functionality */
    *::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }

    *::-webkit-scrollbar-track {
        background: transparent !important;
    }

    *::-webkit-scrollbar-thumb {
        background: rgba(156, 163, 175, 0.3) !important;
        border-radius: 2px !important;
    }

    /* ============ TEXT SIZING ============ */

    /* Optimize text sizes for mobile readability */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.125rem !important;
    }

    h4 {
        font-size: 1rem !important;
    }

    p, div, span {
        font-size: 0.875rem !important;
    }

    small, .text-sm, .text-xs {
        font-size: 0.75rem !important;
    }
}

/* ========================================
   SMALL MOBILE (< 480px)
   Extra optimization for small screens
   ======================================== */

@media (max-width: 480px) {

    /* Even more compact header */
    header {
        height: 44px !important;
        padding: 0.375rem !important;
    }

    header button {
        min-width: 32px !important;
        min-height: 32px !important;
    }

    /* Bottom nav - COMMENTED OUT - Using mobile-simple.css instead
    #mobile-bottom-nav {
        height: 56px !important;
    }

    .mobile-nav-tab span {
        font-size: 0.625rem !important;
    }
    */

    /* Widget content - smaller min height */
    .widget-container {
        min-height: 150px !important;
    }

    /* Buttons - full width on very small screens */
    .action-buttons-row button {
        width: 100% !important;
        min-width: 100% !important;
    }
}