/* PWA Mobile Optimizations for ETA Guide Portal */

/* Better mobile touch targets and spacing */
@media (max-width: 768px) {
  /* Container adjustments */
  .container-fluid {
    padding: 8px;
  }
  
  /* Panel optimizations */
  .panel {
    margin-bottom: 12px;
    border-radius: 8px;
  }
  
  .panel-heading {
    padding: 12px 15px;
  }
  
  .panel-body {
    padding: 15px;
  }
  
  /* Better navigation */
  .navbar-nav {
    margin: 0;
  }
  
  .navbar-nav > li > a {
    padding: 15px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Table improvements */
  .table-responsive {
    border: none;
    -webkit-overflow-scrolling: touch;
  }
  
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 12px 8px;
    font-size: 14px;
  }
  
  /* Hide less important columns on mobile */
  .hidden-xs {
    display: none !important;
  }
  
  /* Button improvements */
  .btn {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 6px;
    touch-action: manipulation;
  }
  
  .btn-xs {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .btn-sm {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 15px;
  }
  
  /* Form improvements */
  .form-control {
    min-height: 44px;
    padding: 12px 15px;
    font-size: 16px; /* Prevents zoom on iOS */
    border-radius: 6px;
    -webkit-appearance: none;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
  }
  
  /* Select improvements */
  select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* Modal improvements */
  .modal-dialog {
    margin: 10px;
    width: auto;
  }
  
  .modal-content {
    border-radius: 12px;
  }
  
  .modal-header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #e5e5e5;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 10px 20px 20px;
    border-top: 1px solid #e5e5e5;
  }
  
  /* Navigation pills for tour menu */
  .nav-pills > li > a {
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 6px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Dropdown improvements */
  .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
  }
  
  .dropdown-menu > li > a {
    padding: 12px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Alert improvements */
  .alert {
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
  }
  
  /* Card-like appearance for panels */
  .panel-default {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
  }
  
  /* Better spacing for form rows */
  .row .col-sm-6,
  .row .col-sm-4,
  .row .col-sm-8 {
    margin-bottom: 15px;
  }
}

/* PWA-specific styles */

/* Install prompt banner */
.pwa-install-prompt {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: linear-gradient(135deg, #337ab7 0%, #2e6da4 100%);
  color: white;
  padding: 16px 20px;
  border-radius: 12px;
  text-align: center;
  z-index: 1050;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.3s ease-out;
  max-width: 400px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.pwa-install-prompt h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

.pwa-install-prompt p {
  margin: 0 0 16px 0;
  font-size: 14px;
  opacity: 0.9;
}

.pwa-install-prompt .btn {
  background: white;
  color: #337ab7;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  margin: 0 6px;
  font-weight: 600;
  min-height: 40px;
}

.pwa-install-prompt .btn:hover {
  background: #f8f9fa;
  transform: translateY(-1px);
}

.pwa-install-prompt .btn-dismiss {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.pwa-install-prompt .btn-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* PWA status indicator */
.pwa-status {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #5cb85c;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pwa-status.show {
  opacity: 1;
}

.pwa-status.offline {
  background: #d9534f;
}

.pwa-status.installing {
  background: #f0ad4e;
}

/* Offline indicator */
.offline-notice {
  background: #d9534f;
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.offline-notice.show {
  transform: translateY(0);
}

/* Loading states */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.show {
  opacity: 1;
  visibility: visible;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #337ab7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Better focus states for accessibility */
.btn:focus,
.form-control:focus,
.nav > li > a:focus {
  outline: 2px solid #337ab7;
  outline-offset: 2px;
}

/* Safe area for devices with notches */
@supports (padding: max(0px)) {
  .navbar-fixed-top {
    padding-top: max(10px, env(safe-area-inset-top));
  }
  
  .pwa-install-prompt {
    bottom: max(20px, env(safe-area-inset-bottom));
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    /* The base rule centres via left:50% + translateX(-50%). When we override
       left/right above we have to clear that transform too, otherwise the
       prompt gets pushed half its own width off the left edge of the
       viewport (the bug visible in Android Chrome). */
    transform: none;
  }
}

/* Improve readability */
@media (max-width: 768px) {
  body {
    line-height: 1.5;
  }
  
  .panel-title {
    font-size: 16px;
    line-height: 1.4;
  }
  
  .table td {
    word-break: break-word;
  }
  
  /* Better link styling */
  a {
    color: #337ab7;
    text-decoration: none;
  }
  
  a:hover, a:focus {
    color: #2e6da4;
    text-decoration: underline;
  }
}