/* ===== Myot365 Responsive Enhancement ===== */
/* Stage 1-2: Multi-device responsive design */
/* Supports: Smartphones, Foldable phones, iPads, PCs */

/* ===== Safe Area Insets (Notch devices) ===== */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* ===== Touch-friendly defaults ===== */
@media (pointer: coarse) {
    button, .icon-btn, .range-btn, .nav-link, .site-item, .settings-btn {
        min-height: 44px;
        min-width: 44px;
    }
    .range-btn {
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
    }
    select, input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="date"], input[type="datetime-local"] {
        min-height: 44px;
        font-size: 16px !important; /* Prevent iOS zoom */
    }
    .site-item {
        padding: 12px 14px;
    }
    .nav-link {
        padding: 12px 14px;
    }
}

/* ===== Smooth transitions for orientation change ===== */
* {
    -webkit-transition-property: none !important;
}
@media screen {
    * {
        -webkit-transition-property: all;
    }
}

/* ===== Better scrolling for touch ===== */
.main-content, .site-list, .sidebar, .view {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ===== Small Smartphones (320px - 374px) ===== */
@media (max-width: 374px) {
    .login-card {
        padding: 28px 20px;
    }
    .login-title {
        font-size: 1.4rem;
    }
    .topbar {
        padding: 0 10px;
        height: 48px;
    }
    .page-title {
        font-size: 0.9rem;
    }
    .view {
        padding: 10px 8px;
    }
    .sensor-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .sensor-card {
        padding: 14px;
    }
    .sensor-card .tag-value {
        font-size: 1.6rem;
    }
    .sensor-card .tag-name {
        font-size: 0.78rem;
    }
    .dash-trend-section {
        padding: 10px;
    }
    .range-selector {
        gap: 2px;
    }
    .range-btn {
        padding: 6px 8px !important;
        font-size: 0.68rem !important;
    }
    .mobile-header {
        padding: 0 8px;
    }
    .mobile-brand {
        font-size: 0.85rem;
    }
    .mobile-site {
        font-size: 0.6rem;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Trend toolbar compact */
    .trend-sub-tabs {
        gap: 2px !important;
    }
    .trend-sub-tabs button {
        font-size: 0.68rem !important;
        padding: 6px 0 !important;
    }
    /* Report compact */
    .report-a4 {
        padding: 15px 12px;
        font-size: 9px;
    }
    .report-a4 h2 {
        font-size: 14px;
    }
    .report-a4 .data-table {
        font-size: 7px;
    }
    .report-a4 .data-table th,
    .report-a4 .data-table td {
        padding: 2px 3px;
    }
}

/* ===== Standard Smartphones (375px - 413px) ===== */
@media (min-width: 375px) and (max-width: 413px) {
    .sensor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .sensor-card .tag-value {
        font-size: 1.7rem;
    }
    .view {
        padding: 12px 10px;
    }
    .dash-trend-header {
        flex-direction: column;
        align-items: flex-start;
    }
    #dash-range-selector {
        width: 100%;
    }
}

/* ===== Large Smartphones (414px - 599px) ===== */
@media (min-width: 414px) and (max-width: 599px) {
    .sensor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    .sensor-card .tag-value {
        font-size: 1.8rem;
    }
}

/* ===== ALL Mobile (max 768px) - Enhanced ===== */
@media (max-width: 768px) {
    /* Mobile header always visible */
    .mobile-header {
        display: flex;
        padding-top: var(--safe-top);
    }
    
    /* Sidebar slide-in from left */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 200;
        padding-top: var(--safe-top);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
    }
    
    /* Overlay */
    .sidebar-overlay.active {
        display: block;
    }

    /* Main content adjusted */
    .main-content {
        margin-left: 0;
        padding-top: calc(52px + var(--safe-top));
    }
    
    /* Topbar stacked */
    .topbar {
        flex-direction: column;
        height: auto;
        padding: 8px 12px;
        gap: 6px;
    }
    .topbar-left {
        width: 100%;
    }
    .topbar-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
    .last-update {
        order: -1;
    }

    /* Sensor grid mobile */
    .sensor-grid {
        gap: 10px;
    }
    .sensor-grid.grid-lg,
    .sensor-grid.grid-md,
    .sensor-grid.grid-sm,
    .sensor-grid.grid-xs {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .sensor-card {
        padding: 14px;
        border-radius: 12px;
    }
    .sensor-card .tag-value {
        font-size: 1.6rem;
    }
    .sensor-card .mini-chart {
        height: 28px;
    }
    .sensor-card .mini-chart canvas {
        height: 28px !important;
    }

    /* Dashboard trend section */
    .dash-trend-section {
        margin-top: 14px;
        padding: 12px;
    }
    .dash-trend-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    #dash-range-selector,
    .range-selector {
        width: 100%;
        flex-wrap: wrap;
    }
    .chart-container {
        height: 220px !important;
        min-height: 180px !important;
    }
    
    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }
    .stat-card {
        padding: 10px;
    }

    /* Trend view mobile */
    .trend-sub-tabs {
        gap: 3px !important;
    }
    .trend-sub-tabs button {
        font-size: 0.72rem !important;
        padding: 8px 4px !important;
    }
    #tag-selector {
        max-height: 100px;
        overflow-y: auto;
    }

    /* Report mobile */
    .report-a4 {
        padding: 16px 14px;
        margin: 0 -8px;
        border-radius: 0;
        font-size: 10px;
    }
    .report-a4 .data-table {
        font-size: 8px;
    }

    /* Settings tabs mobile */
    .settings-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .settings-btn {
        flex: 1;
        min-width: 80px;
        font-size: 0.7rem !important;
        padding: 8px 6px !important;
    }

    /* Modals mobile - full screen */
    .modal-content,
    .modal-body {
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 60vh;
        border-radius: 12px 12px 0 0;
        margin: auto 0 0 0;
    }
    
    /* Table horizontal scroll */
    .table-container,
    .data-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Bottom safe area padding */
    .view {
        padding-bottom: calc(20px + var(--safe-bottom));
    }
}

/* ===== Small Tablets / Foldable phones (600px - 767px) ===== */
@media (min-width: 600px) and (max-width: 767px) {
    .sensor-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px;
    }
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .sidebar {
        width: 260px;
    }
    .view {
        padding: 16px 14px;
    }
}

/* ===== iPad Portrait (768px - 1023px) ===== */
@media (min-width: 769px) and (max-width: 1023px) {
    .sidebar {
        --sidebar-w: 220px;
        width: var(--sidebar-w);
    }
    .sensor-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .sensor-grid.grid-lg {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .topbar {
        padding: 0 16px;
    }
    .view {
        padding: 16px 18px;
    }
    .chart-container {
        height: 260px !important;
    }
    /* Settings layout */
    .settings-tabs {
        flex-wrap: nowrap;
    }
}

/* ===== iPad Landscape & Small Desktops (1024px - 1199px) ===== */
@media (min-width: 1024px) and (max-width: 1199px) {
    .sidebar {
        --sidebar-w: 240px;
    }
    .sensor-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Standard Desktops (1200px - 1439px) ===== */
@media (min-width: 1200px) and (max-width: 1439px) {
    .sidebar {
        --sidebar-w: 260px;
    }
    .sensor-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===== Wide Desktops (1440px+) ===== */
@media (min-width: 1440px) {
    .sensor-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }
    .stats-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .view {
        padding: 24px 32px;
    }
    .chart-container {
        height: 320px !important;
    }
}

/* ===== Foldable Phone Support ===== */
@media (horizontal-viewport-segments: 2) {
    /* Dual-screen (e.g., Samsung Galaxy Fold open) */
    .sensor-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    #app {
        flex-direction: row;
    }
}
@media (vertical-viewport-segments: 2) {
    /* Top-bottom fold */
    .main-content {
        overflow-y: auto;
    }
}

/* ===== Screen fold detection via CSS ===== */
@media (screen-spanning: single-fold-vertical) {
    .sensor-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (screen-spanning: single-fold-horizontal) {
    .dash-trend-section {
        margin-top: 10px;
    }
}

/* ===== Landscape mode optimizations ===== */
@media (orientation: landscape) and (max-height: 500px) {
    /* Landscape phone */
    .mobile-header {
        height: 40px;
    }
    .main-content {
        padding-top: 40px;
    }
    .sensor-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    }
    .chart-container {
        height: 180px !important;
        min-height: 150px !important;
    }
    .dash-trend-section {
        margin-top: 8px;
        padding: 8px;
    }
    .topbar {
        height: 40px;
        padding: 0 10px;
    }
    .view {
        padding: 8px 10px;
    }
}

@media (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) {
    /* iPad Landscape */
    .sensor-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .chart-container {
        height: 300px !important;
    }
}

/* ===== High DPI / Retina optimizations ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .sensor-card, .dash-trend-section, .login-card {
        border-width: 0.5px;
    }
}

/* ===== Dark mode system preference (already dark, but reinforce) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* ===== Reduced motion preference ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .sensor-card:hover {
        transform: none;
    }
    body::before {
        animation: none;
    }
}

/* ===== Print improvements ===== */
@media print {
    .sidebar, .mobile-header, .topbar, .sidebar-overlay {
        display: none !important;
    }
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    .view {
        padding: 10px !important;
    }
    .sensor-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .sensor-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body::before {
        display: none;
    }
}

/* ===== Visibility Enhancement ===== */
/* Better contrast for status indicators */
.site-dot.online {
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.status-dot.online {
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* Improved focus states for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Better text readability */
.sensor-card .tag-label {
    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
    letter-spacing: 0.3px;
}
.sensor-card .tag-value {
    font-size: clamp(1.4rem, 4vw, 2rem);
}
.sensor-card .tag-time {
    font-size: clamp(0.55rem, 1.2vw, 0.65rem);
}

/* Smooth scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.4);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
}