/*
 * CALIBRIX mobile safety layer
 * Scope: phone and small-tablet layouts only.
 * No desktop, JavaScript, form, session or backend behaviour is changed.
 */
.mobile-lab-switch {
  display: none;
}

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  body {
    min-width: 0;
  }

  .app-shell,
  .app-shell > div,
  .sidebar,
  .topbar,
  .content,
  .content > *,
  .stack,
  .stack > *,
  .panel,
  .auth-page,
  .auth-visual,
  .auth-panel,
  .auth-card,
  .table-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .app-shell,
  .sidebar,
  .topbar,
  .content,
  .auth-page,
  .auth-visual,
  .auth-panel {
    width: 100%;
  }

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

  input,
  select,
  textarea,
  button {
    min-width: 0;
    max-width: 100%;
  }

  .section-head,
  .topbar,
  .topbar-actions,
  .button-row,
  .wizard-actions,
  .actions,
  .client-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .table-wrap,
  .lab-history-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table,
  .lab-history-table {
    max-width: none;
  }

  .client-files-table table {
    min-width: 1080px;
  }

  .admin-files-table table {
    min-width: 900px;
  }

  .admin-clients-table table {
    min-width: 1040px;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 10px 8px;
    font-size: 13px;
  }

  .auth-page {
    min-height: 100svh;
  }

  .auth-visual {
    padding: 16px 14px;
  }

  .auth-logo-showcase {
    width: min(260px, 72vw);
  }

  .auth-logo-showcase img {
    height: auto;
    max-height: 300px;
  }

  .auth-panel {
    padding: 14px;
  }

  .auth-card {
    width: 100%;
    padding: 22px 16px;
  }

  .mobile-lab-switch {
    position: sticky;
    top: 0;
    z-index: 30;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(135, 160, 185, .28);
    border-radius: 8px;
    background: rgba(14, 20, 28, .96);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
    backdrop-filter: blur(12px);
  }

  .mobile-lab-switch a {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid rgba(111, 217, 139, .30);
    border-radius: 7px;
    background: rgba(111, 217, 139, .10);
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .mobile-lab-switch a:last-child {
    border-color: rgba(127, 214, 255, .36);
    background: rgba(127, 214, 255, .10);
  }

  .admin-lab-main,
  .admin-lab-detail,
  .client-lab-main,
  .client-lab-detail {
    width: 100%;
    scroll-margin-top: 68px;
  }
}

@media (max-width: 480px) {
  .content,
  .topbar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .sidebar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .sidebar nav {
    margin-right: -10px;
    margin-left: -10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .auth-visual,
  .auth-panel {
    padding-right: 10px;
    padding-left: 10px;
  }
}