/* Mobile-first custom styles for COOPEC MAVUNO
   Small, focused, progressive enhancements for responsiveness and touch.
*/
:root{
  --brand: #0d6efd; /* bootstrap primary */
  --brand-dark: #0b5ed7;
}

/* Base: optimize body for mobile */
body{
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* Make container fluid on small screens */
.container{
  padding-left:1rem;
  padding-right:1rem;
}

/* Touch-friendly buttons */
.btn{ 
  min-height:44px; /* touch target */
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

/* Navigation: use larger tappable area */
.navbar .nav-link{
  padding:0.5rem 0.75rem;
  font-size:1rem;
}

/* Offcanvas custom tweaks */
.offcanvas {
  width: 80%;
}

/* Cards spacing improvements */
.card{ 
  margin-bottom:1rem;
}

/* Responsive helpers */
@media(min-width:768px){
  /* On larger screens, use standard container */
  .container{ max-width:720px; }
  .offcanvas{ width:350px; }
}

/* Improve forms for mobile */
.form-control{ font-size:1rem; }

/* Footer minimal spacing on mobile */
footer{ padding:1rem 0; }

/* Authentication pages */
.auth-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-card {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 480px;
}

.auth-footer-note { color: rgba(255,255,255,0.85); font-size:0.85rem; }