/* ==================== MOBILE STYLES (Phones) ==================== */
/* Viewport: 360-767px | Target: min-width: 360px and max-width: 767px */
/* This file contains overrides for mobile phones (iPhone, Android, etc.) */

@media screen and (min-width: 360px) and (max-width: 767px) {
    
    /* ---------------------------------------------------------
       Base Typography
       --------------------------------------------------------- */
    html {
        font-size: 14px;
    }

    /* ---------------------------------------------------------
       Navbar
       --------------------------------------------------------- */
    .nav-content {
        flex-direction: row;
        gap: var(--space-md);
    }

    /* ---------------------------------------------------------
       Forms
       --------------------------------------------------------- */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* ---------------------------------------------------------
       Dashboard
       --------------------------------------------------------- */
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }
    
    .sessions-grid {
        grid-template-columns: 1fr;
    }
    
    .session-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .baseline-grid {
        grid-template-columns: 1fr;
    }

    /* ---------------------------------------------------------
       Scanning Interface
       --------------------------------------------------------- */
    .scan-input {
        font-size: 1.25rem;
    }
    
    .location-name {
        font-size: 2rem;
    }

    /* ---------------------------------------------------------
       Modals
       --------------------------------------------------------- */
    .modal-content {
        padding: var(--space-md);
        margin: var(--space-xs);
    }
    
    .modal-header-bar {
        padding: var(--space-md) 0;
        margin-bottom: var(--space-md);
    }
    
    .modal-large,
    .modal-xl {
        width: 95%;
        max-width: 95%;
        margin: var(--space-xs);
    }

    /* ---------------------------------------------------------
       Detail Sections (Scan Detail Modal)
       --------------------------------------------------------- */
    .detail-section {
        padding: var(--space-md) 0;
    }
    
    .detail-section-title {
        font-size: 1rem;
        margin-bottom: var(--space-sm);
    }
    
    .detail-row {
        flex-direction: column;
        gap: var(--space-xs);
        padding: var(--space-sm) 0;
    }
    
    .detail-label {
        flex: none;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .detail-value {
        font-size: 1rem;
    }
    
    .detail-lot {
        font-size: 0.95rem;
        word-break: break-all;
    }
    
    .detail-input {
        width: 100%;
        font-size: 1rem;
    }
    
    .detail-form {
        gap: var(--space-sm);
    }
    
    .detail-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-md) 0 0 0;
    }
    
    .detail-actions .btn {
        width: 100%;
        margin: 0;
    }

    /* ---------------------------------------------------------
       Forms (Mobile)
       --------------------------------------------------------- */
    .form-group {
        margin-bottom: var(--space-sm);
    }

/* ---------------------------------------------------------
       Scroll to Top or Bottom Buttonss
       --------------------------------------------------------- */
/* ---------------------------------------------------------
       Scroll Buttons - Floating, semi-transparent
       --------------------------------------------------------- */
    .scroll-to-top,
    .scroll-to-bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        width: 44px;
        height: 44px;
        background: rgba(0, 212, 255, 0.3);
        color: var(--color-text);
        border: 1px solid rgba(0, 212, 255, 0.4);
        border-radius: 50%;
        font-size: 1.3rem;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        z-index: 50;
        transition: var(--transition);
    }
    
    .scroll-to-top:active,
    .scroll-to-bottom:active {
        background: rgba(0, 212, 255, 0.6);
        transform: scale(0.95);
    }
    
    .scroll-to-top {
        right: 10px;
        bottom: 270px;
    }
    
    .scroll-to-bottom {
        right: 10px;
        bottom: 170px;
    }

}