/* Mobile-specific styles for Transport Manager Portal
 * All rules apply ONLY on screens 768px and below
 * Desktop layout remains completely unchanged
 */

@media (max-width: 768px) {
    
    /* A) Viewport - handled in HTML meta tags */
    
    /* B) Layout - Sidebar becomes drawer */
    
    /* Mobile menu button (shown only on mobile) */
    .mobile-menu-btn {
        display: block;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 1001;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 10px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-menu-btn svg {
        width: 24px;
        height: 24px;
        display: block;
    }
    
    /* Hide mobile menu on desktop */
    @media (min-width: 769px) {
        .mobile-menu-btn,
        .mobile-header,
        .sidebar-overlay {
            display: none !important;
        }
    }
    
    /* Mobile header (shown only on mobile) */
    .mobile-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        z-index: 1000;
        display: flex;
        align-items: center;
        padding: 0 12px;
    }
    
    .mobile-header-title {
        margin-left: 52px;
        font-size: 18px;
        font-weight: 600;
        color: #111827;
    }
    
    /* Sidebar drawer behavior */
    .app-layout {
        position: relative;
    }
    
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        max-width: 85vw;
        z-index: 1002;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: #ffffff;
    }
    
    /* Show sidebar when body has sidebar-open class */
    body.sidebar-open .sidebar {
        transform: translateX(0);
    }
    
    /* Overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1001;
    }
    
    body.sidebar-open .sidebar-overlay {
        display: block;
    }
    
    /* Main content - full width on mobile */
    .main-content {
        width: 100%;
        max-width: 100%;
        padding: 72px 16px 24px 16px;
        margin-left: 0;
    }
    
    /* Content header adjustments */
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .content-header h1 {
        font-size: 22px;
        margin-bottom: 4px;
    }
    
    .content-header .subtitle {
        font-size: 14px;
    }
    
    /* C) Tables - horizontal scroll */
    table {
        min-width: 600px;
        font-size: 14px;
    }
    
    table th,
    table td {
        padding: 12px 8px;
        white-space: nowrap;
    }
    
    /* Table wrapper for horizontal scroll */
    div[style*="overflow-x: auto"],
    .table-wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 0 16px;
    }
    
    /* D) Forms & Buttons - mobile-friendly sizing */
    
    /* Inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="file"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Buttons */
    button,
    .submit-btn,
    .refresh-btn,
    .download-btn,
    .chat-btn,
    .send-letter-btn,
    .segregate-btn,
    .signature-clear-btn,
    .close-discussion-btn,
    .chat-send-btn {
        min-height: 44px;
        font-size: 16px;
        padding: 12px 20px;
    }
    
    /* Form labels stack above inputs */
    .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }
    
    .form-group label {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
    }
    
    /* File upload area */
    .file-label {
        min-height: 120px;
        padding: 20px 16px;
    }
    
    .upload-title {
        font-size: 14px;
    }
    
    .upload-subtitle {
        font-size: 11px;
    }
    
    /* E) Driver Signing Canvas */
    .signature-canvas {
        width: 100% !important;
        height: 200px !important;
        max-width: 100%;
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Prevent page scroll while drawing on canvas */
    body.drawing-signature,
    body.drawing-signature html {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Ensure canvas container doesn't cause scroll */
    .sign-off-box {
        overflow: visible;
    }
    
    /* Improve canvas touch handling */
    .signature-canvas:active {
        touch-action: none;
    }
    
    /* F) Typography & Spacing */
    
    /* Increase vertical spacing */
    .detail-section,
    .sign-off-section,
    .letter-detail-section {
        margin-top: 24px;
        padding: 16px;
    }
    
    .detail-section h3,
    .sign-off-section h4 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden;
        width: 100%;
    }
    
    html {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Chat messages */
    .chat-message {
        max-width: 85%;
    }
    
    .chat-container {
        height: 400px;
    }
    
    /* Modal adjustments */
    .chat-modal-content {
        max-width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    
    .chat-modal {
        padding: 0;
    }
    
    /* Batch cards and letter items */
    .batch-card,
    .letter-item,
    .active-letter-item {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    /* Navigation items */
    .nav-item {
        padding: 14px 16px;
        font-size: 15px;
        touch-action: manipulation; /* Better touch handling */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* Toggle button - ensure it's clickable */
    #navInfringementsToggle {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        position: relative;
    }
    
    /* Chevron rotation on mobile */
    #navInfringementsToggle[aria-expanded="true"] .nav-chevron {
        transform: rotate(180deg);
    }
    
    /* Sidebar submenu - ensure it's visible on mobile when expanded */
    .sidebar-nav-sub {
        overflow: visible !important;
        max-height: none !important;
        padding-left: 16px;
        margin-top: 4px;
        margin-bottom: 8px;
        background: rgba(0, 0, 0, 0.02);
        border-radius: 4px;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* When submenu is set to display: block, ensure it's visible */
    .sidebar-nav-sub[style*="display: block"],
    .sidebar-nav-sub:not([style*="display: none"]) {
        display: block !important;
    }
    
    /* Show submenu when toggle button is expanded (backup indicator) */
    #navInfringementsToggle[aria-expanded="true"] + .sidebar-nav-sub {
        display: block !important;
    }
    
    /* Hide submenu when explicitly set to none */
    .sidebar-nav-sub[style*="display: none"] {
        display: none !important;
    }
    
    /* Hide submenu when toggle is collapsed */
    #navInfringementsToggle[aria-expanded="false"] + .sidebar-nav-sub {
        display: none !important;
    }
    
    /* Submenu items - better touch targets */
    .nav-item-sub {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Ensure sidebar can scroll to show submenu */
    .sidebar-nav {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Metadata grids stack on mobile */
    .metadata-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Sign-off boxes stack vertically */
    .sign-off-boxes {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Buttons in action groups */
    .letter-actions,
    .batch-actions {
        flex-direction: column;
    }
    
    .letter-actions button,
    .batch-actions button {
        width: 100%;
        margin-bottom: 8px;
    }
    
    /* Status messages */
    .status-message {
        max-width: 100%;
        font-size: 14px;
        padding: 12px;
    }
    
    /* Summary containers */
    .summary-container {
        max-width: 100%;
        padding: 16px;
    }
    
    /* Login forms */
    .login-form,
    .admin-login-form {
        padding: 24px 20px;
        margin: 20px;
    }
    
    /* Driver portal specific */
    .letter-card {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .letter-details {
        flex-direction: column;
        gap: 8px;
    }
    
    /* Hide desktop-only elements if any */
    .desktop-only {
        display: none !important;
    }
    
    /* Ensure all containers respect viewport */
    * {
        max-width: 100%;
    }
    
    /* Fix any potential overflow issues */
    .app-layout {
        overflow-x: hidden;
    }
    
    /* Improve touch targets */
    a, button, input, select, textarea {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}