/* =============================================
   Yogee Cafe & Desserts - Main Stylesheet
   ============================================= */

/* Base */
html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}


/* ====================================
  =========
     MOBILE-SPECIFIC UX IMPROVEMENTS     
  (Quick Wins)
     ====================================
  ========= */

  /* 1. FIX TOUCH TARGETS - Minimum      
  48x48px for all interactive elements */
  .btn-orange, .btn-outline, .btn-danger,
   .btn-edit,
  .pin-key, .tab-btn, .nav-item,
  button[onclick*="showPanel"],
  button[onclick*="toggleSidebar"],      
  button[onclick*="add"],
  button[onclick*="save"],
  button[onclick*="clear"],
  button[onclick*="render"],
  button[onclick*="calc"],
  button[onclick*="update"],
  button[onclick*="export"],
  button[onclick*="import"],
  button[onclick*="delete"],
  button[onclick*="pun"],
  button[onclick*="sync"],
  button[onclick*="pull"],
  button[onclick*="load"],
  button[onclick*="saveSheet"],
  button[onclick*="testSheet"],
  button[onclick*="manualSync"],
  button[onclick*="saveStore"],
  button[onclick*="addUser"],
  button[onclick*="deleteUser"],
  button[onclick*="addStaff"],
  button[onclick*="removeStaff"],        
  button[onclick*="punchIn"],
  button[onclick*="punchOut"],
  button[onclick*="openManualDTR"],      
  button[onclick*="addExpenseRow"],      
  button[onclick*="removeExpenseRow"],   
  button[onclick*="addDailyLog"],        
  button[onclick*="addSale"],
  button[onclick*="clearSaleForm"],      
  button[onclick*="clearMovementForm"],  
  button[onclick*="addMovement"],        
  button[onclick*="addInvCategory"],     
  button[onclick*="addInvItem"],
  button[onclick*="switchInvTab"],       
  button[onclick*="addExpenseRow"] {     
      min-height: 44px !important;       
      min-width: 44px !important;        
      padding: 12px 16px !important;     
  }

  /* 2. PREVENT IOS ZOOM ON INPUT FOCUS -
   Set font size to 16px+ */
  input, select, textarea {
      min-height: 44px !important;       
      font-size: 16px !important; /*     
  Critical: stops iOS from zooming on    
  focus */
  }

  /* 3. STACK COLUMNS ON MOBILE - Make   
  forms/tables scroll vertically */      
  @media (max-width: 768px) {
      .g2, .g-2-1, .g-1-1 {
          grid-template-columns: 1fr     
  !important;
          gap: 12px !important;
      }

      /* Make button groups stack        
  vertically */
      .flex-wrap-row {
          flex-direction: column
  !important;
          align-items: stretch
  !important;
          gap: 8px !important;
      }

      /* Full-width inputs on mobile */  
      input, select, textarea {
          width: 100% !important;        
          box-sizing: border-box
  !important;
      }

      /* Improve spacing for mobile      
  readability */
      .stat-card {
          padding: 16px 20px !important; 
      }

      .stat-card .value {
          font-size: 24px !important;    
      }

      .stat-card .label {
          font-size: 14px !important;    
      }

      /* Make tables more readable */    
      .data-table th,
      .data-table td {
          padding: 12px 16px !important; 
          font-size: 14px !important;    
      }

      /* Increase chart container heights
   */
      #salesChart, #scenarioChart {      
          min-height: 250px !important;  
      }

      /* Improve navbar spacing */       
      #topbar {
          padding: 16px 20px !important; 
      }

      /* Make sidebar buttons more       
  tappable */
      .nav-item {
          padding: 16px 20px !important; 
      }

      /* Improve toast positioning */    
      #toast {
          bottom: 20px !important;       
          left: 20px !important;
          right: 20px !important;        
          max-width: 90% !important;     
      }
  }