/* Responsive Design */

/* Tablet Responsive (768px) */
@media (max-width: 768px) {
  .container > div:first-child {
    grid-template-columns:1fr;
  }

  .header {
    padding:12px 16px;
  }

  .header-content {
    flex-direction:row;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .header h1 {
    font-size:18px;
  }

  .header-controls {
    gap: 8px !important;
  }

  .header-actions {
    width:auto;
    justify-content:flex-end;
    gap:8px;
  }

  #mobileAccessContainer > div {
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  #qrCodeContainer {
    margin-bottom:12px;
  }

  .tabs-container {
    display: none !important;
  }

  .tabs {
    gap:2px!important;
  }

  .tab-btn {
    padding:10px 12px;
    font-size:12px;
  }
}

/* Mobile Responsive (480px - iPhone Plus/Max) */
@media (max-width: 480px) {
  html {
    font-size:14px;
  }

  .header {
    padding:10px 12px;
  }

  .header h1 {
    font-size:16px;
    gap:8px;
  }

  .header h1 span[style*="font-size"] {
    font-size:9px!important;
  }

  .header-actions {
    gap:6px;
  }

  .header-btn {
    padding:8px!important;
    min-height:40px;
    min-width:40px;
  }

  .container {
    padding:10px;
  }

  .tabs-container {
    padding:0 8px!important;
    margin-top:8px!important;
  }

  .tabs {
    gap:0!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px!important;
  }

  .tabs::-webkit-scrollbar {
    display:none;
  }

  .tab-btn {
    padding:10px 10px!important;
    font-size:11px!important;
    flex-shrink:0;
  }

  .status-badge {
    font-size:9px;
    padding:3px 6px;
  }

  .access-info {
    padding:10px;
  }
}

/* Small Mobile (414px - iPhone 11 Pro Max, 13/14 Pro Max) */
@media (max-width: 414px) {
  .header {
    padding:8px 10px;
  }

  .header h1 {
    font-size:15px;
    gap:6px;
    flex-wrap:wrap;
  }

  .header h1 .logo-dot {
    width:10px;
    height:10px;
  }

  .container {
    padding:8px;
  }

  .tabs-container {
    padding:0 6px!important;
  }

  .tab-btn {
    padding:8px 8px!important;
    font-size:10px!important;
  }
}

/* Smallest Mobile (375px - iPhone 11, 11 Pro, SE) */
@media (max-width: 375px) {
  html {
    font-size:13px;
  }

  .header {
    padding:6px 8px;
  }

  .header h1 {
    font-size:14px;
    gap:5px;
  }

  .header h1 .logo-dot {
    width:8px;
    height:8px;
  }

  .header-btn {
    padding:6px!important;
    min-height:36px;
    min-width:36px;
    font-size:14px;
  }

  .container {
    padding:6px;
  }

  .tabs-container {
    padding:0 4px!important;
  }

  .tab-btn {
    padding:8px 6px!important;
    font-size:9px!important;
  }

  .status-badge {
    font-size:8px;
    padding:2px 5px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .tab-btn, .header-btn, button {
    min-height:44px;
  }

  .tab-btn:hover:not(.active) {
    background:transparent;
  }

  .tab-btn:active, .header-btn:active {
    opacity:0.7;
    transform:scale(0.97);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .header-btn {
    transition:none;
  }

  .header-btn:hover {
    transform:none;
  }
}