/* ==================================================
   Mobile Framework - Apollo Fleet
   
   View states managed by mobile-nav.js via body classes:
     .is-mobile            viewport <= 768px
     .mobile-list-view     showing the machine list
     .mobile-viewer-view   showing the device viewer
   ================================================== */

/* --- Mobile-only elements hidden on desktop --- */

.mobile-back-btn,
.mobile-device-title {
    display: none;
}

/* ========================================
   Primary Mobile Breakpoint (768px)
   ======================================== */

@media (max-width: 768px) {

    /* --- Safe area for notched phones --- */

    .top-bar {
        padding: 0 12px;
        padding-top: env(safe-area-inset-top, 0);
        height: calc(52px + env(safe-area-inset-top, 0));
    }

    /* --- Top Bar --- */

    .top-bar-title {
        font-size: 16px;
    }

    .top-bar-left {
        gap: 10px;
        min-width: 0;
    }

    .user-info .org-name,
    .user-info .user-role {
        display: none;
    }

    .user-info #userName {
        font-size: 12px;
    }

    .btn-logout {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 36px;
    }

    /* --- Back Button (visible in viewer view only) --- */

    .mobile-back-btn {
        display: none;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
    }

    .mobile-back-btn:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-back-btn svg {
        width: 20px;
        height: 20px;
    }

    body.mobile-viewer-view .mobile-back-btn {
        display: flex;
    }

    /* --- Mobile Device Title (viewer view only) --- */

    .mobile-device-title {
        display: none;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 45vw;
    }

    body.mobile-viewer-view .mobile-device-title {
        display: block;
    }

    body.mobile-viewer-view .top-bar-logo,
    body.mobile-viewer-view .top-bar-title {
        display: none;
    }

    /* ========================
       VIEW: Machine List
       ======================== */

    body.mobile-list-view .app-layout {
        flex-direction: column;
    }

    body.mobile-list-view .sidebar {
        width: 100%;
        flex: 1;
        border-right: none;
    }

    body.mobile-list-view .main-content {
        display: none;
    }

    /* ========================
       VIEW: Device Viewer
       ======================== */

    body.mobile-viewer-view .sidebar {
        display: none;
    }

    body.mobile-viewer-view .main-content {
        flex: 1;
        padding: 0;
    }

    body.mobile-viewer-view .main-content.has-viewer {
        padding: 0;
    }

    body.mobile-viewer-view .device-viewer-toolbar {
        display: none;
    }

    body.mobile-viewer-view .device-iframe {
        border: none;
        border-radius: 0;
    }

    /* ========================
       Device List (touch)
       ======================== */

    .device-item {
        padding: 14px 12px;
        min-height: 52px;
        gap: 14px;
        -webkit-tap-highlight-color: transparent;
    }

    .device-item:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .device-item-name {
        font-size: 15px;
    }

    .device-item-status {
        font-size: 13px;
    }

    .device-status-dot {
        width: 12px;
        height: 12px;
    }

    .device-remove-btn,
    .device-transfer-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }

    /* --- Sidebar Header --- */

    .sidebar-header {
        padding: 14px 16px;
    }

    /* --- Sidebar Admin Buttons --- */

    .sidebar-admin {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    }

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

    /* --- Main Content --- */

    .main-content {
        padding: 12px;
    }

    /* ========================
       Modals as Bottom Sheets
       ======================== */

    .modal-overlay {
        align-items: flex-end;
    }

    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        padding: 20px 16px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
        animation: mobileSheetUp 0.3s ease;
    }

    @keyframes mobileSheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .modal h2 {
        font-size: 17px;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions .btn {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Modal Form Rows (stack vertically) --- */

    .modal-form-row {
        flex-direction: column;
    }

    .modal-form-row > input,
    .modal-form-row > select,
    .modal-form-row > button {
        flex: none !important;
        min-width: 0 !important;
        width: 100%;
    }

    .modal-form-row > button {
        min-height: 44px;
    }

    /* --- Form Inputs (16px prevents iOS zoom on focus) --- */

    .form-group input,
    .form-group select,
    .modal input,
    .modal select {
        font-size: 16px !important;
    }

    /* --- Camera Grid --- */

    .camera-grid {
        grid-template-columns: 1fr;
    }

    /* --- Status Grid --- */

    .status-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* --- Empty State --- */

    .empty-state svg {
        width: 48px;
        height: 48px;
    }

    .empty-state h3 {
        font-size: 16px;
    }

    .empty-state p {
        font-size: 13px;
    }

    /* --- Hide scrollbar on mobile (use native) --- */

    ::-webkit-scrollbar {
        width: 0;
    }
}

/* ========================================
   Small Screens (< 375px)
   ======================================== */

@media (max-width: 374px) {
    .top-bar {
        padding: 0 8px;
    }

    .top-bar-left {
        gap: 8px;
    }

    .top-bar-logo svg {
        width: 24px;
        height: 24px;
    }

    .top-bar-title {
        font-size: 14px;
    }

    .mobile-device-title {
        font-size: 14px;
        max-width: 35vw;
    }
}