/*
 * Mobile Optimization CSS
 * PANDORA Water Monitoring System
 * Enhanced touch-friendly UI for mobile devices
 */

/* ========== TOUCH-FRIENDLY IMPROVEMENTS ========== */

/* Larger tap targets for mobile (minimum 44x44px) */
@media (max-width: 768px) {
    button,
    a,
    .btn,
    input[type="submit"],
    input[type="button"],
    .action-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Remove tap highlight on mobile */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-touch-callout: none;
    }

    /* Prevent text selection on buttons */
    button,
    .btn,
    a {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Allow text selection in inputs */
    input,
    textarea {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    /* Smooth scrolling on mobile */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Better input focus on mobile */
    input:focus,
    select:focus,
    textarea:focus {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    /* Spacing between interactive elements */
    .btn + .btn,
    button + button {
        margin-left: 8px;
    }

    /* Stack buttons vertically on very small screens */
    @media (max-width: 480px) {
        .action-buttons,
        .button-group {
            flex-direction: column;
            gap: 8px;
        }

        .btn + .btn,
        button + button {
            margin-left: 0;
            margin-top: 8px;
        }
    }
}

/* ========== MOBILE NAVIGATION ========== */
@media (max-width: 768px) {
    /* Hamburger menu styles */
    .mobile-menu-toggle {
        display: block;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-primary);
        margin: 5px 0;
        transition: all 0.3s ease;
    }

    /* Sidebar slide-in animation */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1000;
        overflow-y: auto;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    /* Overlay for mobile menu */
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(2px);
    }

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

/* ========== MOBILE TABLE IMPROVEMENTS ========== */
@media (max-width: 768px) {
    /* Horizontal scroll for tables */
    .table-wrapper,
    .permission-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px; /* Extend to edges */
        padding: 0 15px;
    }

    /* Sticky first column on mobile */
    table th:first-child,
    table td:first-child {
        position: sticky;
        left: 0;
        background: var(--bg-card);
        z-index: 10;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    }

    /* Smaller table text but readable */
    table {
        font-size: 13px;
    }

    /* Compact table cells */
    table th,
    table td {
        padding: 10px 8px;
        white-space: nowrap;
    }

    /* Action buttons in table - stack vertically */
    table .action-btn {
        display: block;
        width: 100%;
        margin: 4px 0;
        padding: 8px;
        font-size: 12px;
    }
}

/* ========== MOBILE MODAL IMPROVEMENTS ========== */
@media (max-width: 768px) {
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100%;
        max-width: 100% !important;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-header {
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .close-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
    }
}

/* ========== MOBILE FORM IMPROVEMENTS ========== */
@media (max-width: 768px) {
    /* Full-width inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
    }

    /* Better input spacing */
    .form-group {
        margin-bottom: 16px;
    }

    /* Larger touch targets for checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    /* Full-width buttons on mobile */
    .btn-primary,
    .btn-login,
    .btn-submit {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }

    /* Select dropdown arrow */
    select {
        padding-right: 35px;
        background-position: right 10px center;
    }
}

/* ========== MOBILE CARD LAYOUT ========== */
@media (max-width: 768px) {
    /* Card grids become single column */
    .card-grid,
    .device-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Card padding adjustment */
    .card,
    .profile-card,
    .permission-card {
        margin: 0 0 15px 0;
        border-radius: 12px;
    }

    /* Chart boxes full width */
    .chart-box {
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 10px 0;
    }
}

/* ========== MOBILE FILTER IMPROVEMENTS ========== */
@media (max-width: 768px) {
    /* Filter section */
    .permission-filters,
    .filter-section {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding: 15px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-input,
    .filter-select {
        width: 100%;
    }

    /* Search bars */
    .search-bar {
        flex-direction: column;
        gap: 10px;
    }

    .search-bar input {
        width: 100%;
    }
}

/* ========== MOBILE HEADER IMPROVEMENTS ========== */
@media (max-width: 768px) {
    /* Profile header */
    .profile-header,
    .permission-header {
        padding: 20px 15px;
        border-radius: 12px 12px 0 0;
    }

    .profile-title-section,
    .permission-title-section {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .profile-avatar {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }

    .permission-title-section > i {
        font-size: 36px;
    }
}

/* ========== MOBILE BADGE & STATUS ========== */
@media (max-width: 768px) {
    .badge,
    .license-badge,
    .status-badge {
        font-size: 11px;
        padding: 4px 10px;
    }

    .status-indicator {
        width: 10px;
        height: 10px;
    }
}

/* ========== MOBILE ALERT IMPROVEMENTS ========== */
@media (max-width: 768px) {
    .alert {
        margin: 0 -15px 15px -15px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ========== MOBILE CHART IMPROVEMENTS ========== */
@media (max-width: 768px) {
    .chart-container {
        padding: 12px;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chart-toggle {
        width: 100%;
        justify-content: center;
    }

    canvas {
        max-height: 250px !important;
    }
}

/* ========== MOBILE FOOTER ========== */
@media (max-width: 768px) {
    .footer,
    .footer-text {
        font-size: 11px;
        padding: 15px 10px;
        text-align: center;
    }
}

/* ========== ACCESSIBILITY ON MOBILE ========== */
@media (max-width: 768px) {
    /* Focus visible for keyboard navigation */
    *:focus-visible {
        outline: 3px solid var(--accent-color);
        outline-offset: 2px;
    }

    /* Skip to content link */
    .skip-to-content {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--accent-color);
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        z-index: 10000;
    }

    .skip-to-content:focus {
        top: 0;
    }
}

/* ========== LOADING STATES ON MOBILE ========== */
@media (max-width: 768px) {
    .loading-cell,
    .loading-spinner {
        padding: 30px 20px;
        font-size: 14px;
    }

    .loading-spinner i {
        font-size: 20px;
    }
}

/* ========== MOBILE LANDSCAPE OPTIMIZATION ========== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce padding in landscape */
    .login-container,
    .reset-container {
        padding: 15px;
    }

    .profile-header,
    .permission-header {
        padding: 15px;
    }

    .modal-content {
        padding: 15px;
    }

    /* Smaller fonts in landscape */
    h1, h2, h3 {
        font-size: 1.2rem;
    }

    .navbar {
        padding: 8px 12px;
    }
}

/* ========== PREVENT OVERSCROLL ON MOBILE ========== */
@media (max-width: 768px) {
    body {
        overscroll-behavior: none;
    }

    .modal,
    .sidebar {
        overscroll-behavior: contain;
    }
}

/* ========== SAFE AREA FOR NOTCH DEVICES ========== */
@media (max-width: 768px) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .navbar,
    .sidebar {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
}