/* Shared responsive styles for IEEE Dashboard */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* Prevent horizontal page scroll from nested content */
body {
  overflow-x: hidden;
}

/* Touch-friendly form controls on mobile (prevents iOS zoom) */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Shared header patterns */
@media (max-width: 768px) {
  header {
    flex-wrap: wrap;
    padding: 12px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 12px;
    font-size: 16px;
  }

  .header-title {
    flex: 1;
    min-width: 0;
    gap: 8px;
  }

  .header-title span {
    font-size: 11px;
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .user-profile {
    padding: 10px 14px;
    font-size: 13px;
    max-width: 100%;
    min-width: 0;
  }

  .user-profile span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  header {
    padding: 10px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .header-title span {
    display: none;
  }

  .user-profile span {
    max-width: 90px;
  }
}

/* Scrollable tables on small screens — hint via data attribute optional */

@media (max-width: 768px) {
  .table-container {
    -webkit-overflow-scrolling: touch;
  }
}