/**
 * Responsive Mobile CSS - 375px Breakpoint
 * Task 11.1: Verify responsive layout at mobile breakpoint (375px)
 * Requirements: 10.1, 10.2
 * 
 * This file adds mobile-specific styles to ensure:
 * - All pages render correctly at 375px width
 * - Forms are usable on mobile devices
 * - Buttons and inputs are touch-friendly (minimum 44px)
 * - No horizontal scrolling
 */

/* ============================================
   MOBILE BREAKPOINT: 768px and below
   ============================================ */

@media screen and (max-width: 768px) {
  
  /* ============================================
     GLOBAL MOBILE STYLES
     ============================================ */
  
  body {
    font-size: 14px;
  }
  
  /* Ensure no horizontal overflow */
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Top Navigation - Mobile Optimization */
  .top-nav {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .logo {
    font-size: 0.9rem;
  }
  
  .user-info {
    font-size: 0.75rem;
  }
  
  /* Main Content - Reduce Padding */
  .main-content {
    padding: 1rem;
  }
  
  /* Cards - Reduce Padding */
  .card {
    padding: 1rem;
    border-radius: 12px;
  }
  
  /* Headings - Adjust Sizes */
  .heading {
    font-size: 1.25rem;
  }
  
  .subheading {
    font-size: 0.85rem;
  }
  
  /* ============================================
     TOUCH TARGETS - Minimum 44px
     ============================================ */
  
  /* All Buttons */
  .btn {
    min-height: 44px;
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
  }
  
  .btn-primary {
    min-height: 44px;
  }
  
  /* Role Selector Buttons */
  .role-btn {
    min-height: 44px;
    padding: 12px 10px;
    font-size: 0.85rem;
  }
  
  /* Input Fields */
  .input {
    min-height: 44px;
    padding: 0.875rem 1rem;
    font-size: 16px; /* Prevents iOS zoom */
  }
  
  /* Select Fields */
  select.input {
    min-height: 44px;
    font-size: 16px;
  }
  
  /* ============================================
     LOGIN PAGE (login.html)
     ============================================ */
  
  .login-container {
    max-width: 100%;
    margin: 50px auto;
    padding: 1.5rem;
    border-radius: 16px;
  }
  
  .role-selector {
    gap: 8px;
    margin-bottom: 1.5rem;
  }
  
  /* ============================================
     ADMIN PAGE (admin.html)
     ============================================ */
  
  /* Stack sidebar and content vertically */
  .admin-layout {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 1rem;
  }
  
  /* Client List Card */
  .client-list-card {
    padding: 1rem;
    border-radius: 10px;
  }
  
  .client-item {
    padding: 12px;
  }
  
  .client-name {
    font-size: 0.85rem;
  }
  
  .client-meta {
    font-size: 0.7rem;
  }
  
  /* Generator Container */
  .generator-container {
    padding: 1.5rem;
    border-radius: 10px;
  }
  
  /* Form Grid - Stack Vertically */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Full Width Override */
  .full-width {
    grid-column: span 1;
  }
  
  /* Delete Button */
  .btn-delete {
    padding: 4px 8px;
    font-size: 9px;
    min-height: 32px;
  }
  
  /* ============================================
     CLIENT PAGE (client.html)
     ============================================ */
  
  /* Wait Screen */
  .wait-screen {
    padding: 2rem 1rem;
    border-radius: 16px;
  }
  
  /* Maintenance Badge */
  .maintenance-badge {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
  
  /* Data Table - Responsive */
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .data-table thead {
    display: none; /* Hide headers on mobile */
  }
  
  .data-table tbody {
    display: block;
  }
  
  .data-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1rem;
  }
  
  .data-table td {
    display: block;
    text-align: left;
    padding: 0.5rem 0;
    border-bottom: none;
  }
  
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
  }
  
  /* Signature Container */
  .sig-container {
    height: 180px;
    margin: 0.75rem 0;
  }
  
  /* Modal - Full Width on Mobile */
  .modal {
    width: 95%;
    max-width: 95vw;
    padding: 1.5rem;
    border-radius: 16px;
  }
  
  .modal h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  /* ============================================
     GENERATOR PAGE (generator.html)
     ============================================ */
  
  /* Generator Container */
  .generator-container {
    margin: 20px auto;
    padding: 1.5rem;
  }
  
  /* Form Grid - Already handled above */
  
  /* ============================================
     FORM ELEMENTS
     ============================================ */
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  .label {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
  }
  
  /* ============================================
     STATUS BADGES
     ============================================ */
  
  .status-badge {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }
  
  .pay-status {
    font-size: 8px;
    padding: 2px 5px;
  }
  
  /* ============================================
     LOADER
     ============================================ */
  
  .loader {
    width: 50px;
    height: 50px;
    border-width: 3px;
  }
  
  /* ============================================
     UTILITY CLASSES
     ============================================ */
  
  /* Prevent text overflow */
  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Mobile-only visibility */
  .mobile-only {
    display: block !important;
  }
  
  .desktop-only {
    display: none !important;
  }
}

/* ============================================
   EXTRA SMALL MOBILE: 375px and below
   ============================================ */

@media screen and (max-width: 375px) {
  
  /* Further reduce padding for very small screens */
  .login-container {
    padding: 1.25rem;
    margin: 30px auto;
  }
  
  .admin-layout {
    padding: 0.75rem;
  }
  
  .generator-container {
    padding: 1.25rem;
  }
  
  .modal {
    padding: 1.25rem;
  }
  
  /* Reduce font sizes slightly */
  .heading {
    font-size: 1.15rem;
  }
  
  .btn {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
  }
  
  /* Signature canvas - adjust height */
  .sig-container {
    height: 160px;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media screen and (max-width: 768px) and (orientation: landscape) {
  
  /* Adjust heights for landscape mode */
  .login-container {
    margin: 20px auto;
  }
  
  .sig-container {
    height: 150px;
  }
  
  .modal {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ============================================
   PRINT STYLES - Ensure mobile doesn't affect print
   ============================================ */

@media print {
  /* Reset mobile styles for print */
  .admin-layout {
    grid-template-columns: 350px 1fr;
  }
  
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}