/* Mobile Responsiveness CSS
 * Strategy: Minimal overrides - Semantic UI is already mobile-first
 * Only add CSS for what Semantic UI doesn't provide
 */

/* ========================================
 * Mobile Breakpoints (matches Semantic UI)
 * ========================================
 * Mobile: 0 - 767px
 * Tablet: 768px - 1023px
 * Desktop: 1024px+
 */

/* ========================================
 * Mobile-Only Overrides
 * ======================================== */
@media (max-width: 767px) {
  /* iOS Safari zoom prevention on input focus */
  body {
    font-size: 16px;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
  }

  /* Semantic UI tables don't scroll horizontally by default */
  .ui.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Make Semantic UI modals full-screen on mobile */
  .ui.modal {
    margin: 0 !important;
    width: 100% !important;
    height: 100%;
    border-radius: 0;
  }

  .ui.modal > .content {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  /* Semantic UI tabs don't scroll horizontally by default */
  .ui.tabular.menu {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .ui.tabular.menu .item {
    flex-shrink: 0;
  }
}

/* ========================================
 * Tablet Adjustments
 * ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-sidebar {
    width: 180px;
  }

  .app-content {
    margin-left: 180px;
  }
}

/* ========================================
 * Visibility Toggle Classes
 * ========================================
 * Note: Semantic UI provides .mobile.only, .tablet.only, .computer.only
 * We add simpler .mobile-only and .desktop-only for convenience
 */
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
}

@media (min-width: 768px) {
  .desktop-only { display: block !important; }
  .mobile-only { display: none !important; }
}