/* Mobile Enhancements for Velora Salon */

/* Touch-friendly buttons and targets */
@media (max-width: 768px) {
  /* Larger touch targets */
  .btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  ;}
  
  .btn-sm {
    min-height: 38px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  ;}
  
  /* Navigation improvements */
  .navbar-nav .nav-link {
    padding: 1rem;
    font-size: 1.1rem;
  ;}
  
  /* Form improvements */
  .form-control {
    min-height: 44px;
    font-size: 1rem;
    padding: 0.75rem;
  ;}
  
  .form-select {
    min-height: 44px;
    font-size: 1rem;
    padding: 0.75rem;
  ;}
  
  /* Table responsiveness */
  .table-responsive {
    border: none;
  ;}
  
  .table {
    font-size: 0.9rem;
  ;}
  
  .table th,
  .table td {
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
  ;}
  
  /* Card improvements */
  .card {
    margin-bottom: 1rem;
  ;}
  
  .card-body {
    padding: 1rem;
  ;}
  
  /* Modal improvements */
  .modal-dialog {
    margin: 0.5rem;
  ;}
  
  .modal-content {
    border-radius: 0.5rem;
  ;}
  
  /* Dashboard cards */
  .dashboard-card {
    margin-bottom: 1rem;
  ;}
  
  /* Statistics cards */
  .stat-card {
    text-align: center;
    padding: 1.5rem 1rem;
  ;}
  
  .stat-number {
    font-size: 2rem;
    font-weight: bold;
  ;}
  
  .stat-label {
    font-size: 0.9rem;
    color: #6c757d;
  }
}

/* Extra small screens */
@media (max-width: 576px) {
  /* Smaller padding for tight spaces */
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  ;}
  
  /* Stack columns on small screens */
  .col-md-6,
  .col-lg-4,
  .col-lg-6 {
    margin-bottom: 1rem;
  ;}
  
  /* Larger text for readability */
  body {
    font-size: 1rem;
  ;}
  
  h1 { font-size: 1.8rem; ;}
  h2 { font-size: 1.6rem; ;}
  h3 { font-size: 1.4rem; ;}
  h4 { font-size: 1.2rem; ;}
  h5 { font-size: 1.1rem; ;}
  
  /* Full-width buttons on small screens */
  .btn-group-mobile .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  ;}
  
  /* Simplified navigation */
  .navbar-brand {
    font-size: 1.1rem;
  ;}
  
  /* POS specific improvements */
  .pos-button {
    width: 100%;
    margin-bottom: 0.5rem;
    min-height: 50px;
    font-size: 1.1rem;
  ;}
  
  /* Staff attendance improvements */
  .attendance-card {
    padding: 1rem;
    margin-bottom: 1rem;
  ;}
  
  .check-in-btn {
    width: 100%;
    min-height: 60px;
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .navbar-collapse {
    max-height: 300px;
    overflow-y: auto;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark mode mobile adjustments */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .card {
    background-color: #2d3748;
    border-color: #4a5568;
  ;}
  
  .form-control {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
  }
}

/* Touch device optimizations */
@media (pointer: coarse) {
  /* Larger click areas for touch devices */
  .clickable {
    min-height: 44px;
    min-width: 44px;
  ;}
  
  /* Remove hover effects on touch devices */
  .btn:hover {
    transform: none;
  ;}
  
  .card:hover {
    transform: none;
  }
}

/* Staff mobile dashboard */
.mobile-staff-dashboard {
  padding: 0.5rem;
;}

.mobile-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
;}

.mobile-quick-action {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1.5rem 1rem;
  border-radius: 0.75rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s;
;}

.mobile-quick-action:hover {
  color: white;
  transform: translateY(-2px);
;}

.mobile-quick-action i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
;}

/* Customer mobile experience */
.mobile-booking-form .form-group {
  margin-bottom: 1.5rem;
;}

.mobile-service-card {
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: white;
;}

.mobile-service-card.selected {
  border-color: #007bff;
  background-color: #f8f9fa;
;}