/* ============================================================
   Global responsive rules.
   Loaded via index.html. Desktop styles stay untouched; these
   overrides only apply on smaller viewports.
   ============================================================ */

/* ===== SMALL DESKTOP / LANDSCAPE TABLET (up to 1200px) ===== */
@media screen and (max-width: 1200px) {
  .data-entry {
    width: 60%;
  }
}

/* ===== TABLET (up to 992px) ===== */
@media screen and (max-width: 992px) {
  .data-entry {
    width: 80%;
    margin-top: 3rem;
  }
}

/* ===== MOBILE (up to 767px) ===== */
@media screen and (max-width: 767px) {
  /* Centered boxed forms must not collapse to ~120px on phones */
  .data-entry {
    width: calc(100% - 2rem);
    margin-top: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    box-shadow: none;
  }

  /* Form fields fill the available width */
  .mat-mdc-form-field,
  .mat-form-field,
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="number"],
  form select,
  form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 16px minimum prevents iOS auto-zoom on focus */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Comfortable touch targets (min 44px) */
  button,
  .btn,
  .mat-mdc-button,
  .mat-mdc-raised-button,
  .mat-mdc-unelevated-button {
    min-height: 44px;
  }

  /* Never let media overflow the viewport */
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /* Wide tables scroll horizontally instead of breaking layout */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Material cards use full width */
  .mat-mdc-card,
  .mat-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* Slightly smaller headings on phones */
  h1, .mat-display-1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  /* Data label/output rows adapt to small screens */
  .data-label,
  .data-output {
    height: auto;
    font-size: 16px;
  }

  /* Dialogs use nearly full screen */
  .mat-mdc-dialog-container,
  .cdk-overlay-pane {
    max-width: 95vw !important;
  }
}

/* ===== VERY SMALL PHONES (up to 400px) ===== */
@media screen and (max-width: 400px) {
  .data-entry {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: calc(100% - 1rem);
  }
}