/* ============================================
   AUHMS - Mobile Responsive Overrides
   Loaded LAST to override all other stylesheets.
   Breakpoints: 1024px, 768px, 480px
   ============================================ */

/* ================================================
   TABLE COLUMN PRIORITY (always active)
   ================================================ */

@media (max-width: 1024px) {
  .table .col-tertiary { display: none; }
}

@media (max-width: 768px) {
  .table .col-secondary { display: none; }
}


/* ================================================
   1024px — TABLET
   ================================================ */

@media (max-width: 1024px) {

  /* ---- Table improvements ---- */
  .table thead th {
    padding: var(--space-2) var(--space-3);
  }

  .table tbody td {
    padding: var(--space-2) var(--space-3);
  }
}


/* ================================================
   768px — SMALL TABLET / LARGE PHONE
   ================================================ */

@media (max-width: 768px) {

  /* ---- Viewport overflow fix ---- */
  .app {
    height: auto;
    min-height: 100dvh;
    min-height: 100vh; /* fallback */
    overflow: visible;
  }

  body {
    overflow: auto;
  }

  /* ---- Table: sticky first col + scroll affordance ---- */
  .table-wrapper {
    position: relative;
  }

  .table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06));
    pointer-events: none;
    z-index: 1;
  }

  .table thead th:first-child,
  .table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card);
  }

  .table thead th:first-child {
    background: var(--gray-25);
  }

  .table {
    font-size: var(--text-xs);
  }

  .table thead th {
    padding: var(--space-2);
    font-size: 0.625rem;
  }

  .table tbody td {
    padding: var(--space-2);
  }

  /* ---- Table toolbar stacking ---- */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3) var(--space-4);
  }

  .table-toolbar-left,
  .table-toolbar-right {
    width: 100%;
  }

  .table-toolbar-right {
    justify-content: flex-start;
  }

  .table-search-input {
    width: 100%;
  }

  /* ---- Form touch targets ---- */
  .form-input,
  .form-select {
    height: 44px;
    font-size: 16px; /* prevent iOS auto-zoom */
  }

  .form-textarea {
    font-size: 16px;
  }

  .btn {
    height: 44px;
    padding: 0 var(--space-4);
  }

  .btn-sm {
    height: 36px;
    padding: 0 var(--space-3);
  }

  /* ---- Card padding reduction ---- */
  .card-body {
    padding: var(--space-4);
  }

  .card-header {
    padding: var(--space-3) var(--space-4);
  }

  .card-footer {
    padding: var(--space-3) var(--space-4);
  }

  .stat-card {
    padding: var(--space-4);
  }

  /* ---- Modal height constraint ---- */
  .modal {
    max-height: calc(100dvh - 80px);
    max-height: calc(100vh - 80px); /* fallback */
  }

  .modal-lg {
    max-width: 100%;
  }

  /* ---- Settings rows stacking ---- */
  .settings-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .settings-row-control {
    min-width: 0;
    width: 100%;
  }
}


/* ================================================
   480px — SMALL PHONE
   ================================================ */

@media (max-width: 480px) {

  /* ---- Header shrink ---- */
  :root {
    --header-height: 52px;
  }

  .header-title {
    font-size: var(--text-sm);
  }

  .header-breadcrumb {
    display: none;
  }

  /* ---- Modal bottom-sheet style ---- */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 85vh;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .modal-body {
    padding: var(--space-4);
  }

  .modal-header {
    padding: var(--space-4);
  }

  .modal-footer {
    padding: var(--space-3) var(--space-4);
  }

  /* ---- Card padding tighter ---- */
  .card-body {
    padding: var(--space-3);
  }

  .card-header {
    padding: var(--space-3);
  }

  .card-footer {
    padding: var(--space-3);
  }

  .stat-card {
    padding: var(--space-3);
  }

  /* ---- Notification panel ---- */
  .notification-panel {
    width: calc(100vw - var(--space-4));
    right: var(--space-2);
    left: var(--space-2);
  }

  /* ---- Toast container ---- */
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
  }

  .toast {
    max-width: 100%;
  }
}


/* ================================================
   SAFE AREA SUPPORT (notched devices)
   ================================================ */

@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 1024px) {
    .header {
      padding-left: max(var(--space-4), env(safe-area-inset-left));
      padding-right: max(var(--space-4), env(safe-area-inset-right));
    }

    .content {
      padding-left: max(var(--content-padding), env(safe-area-inset-left));
      padding-right: max(var(--content-padding), env(safe-area-inset-right));
      padding-bottom: max(var(--content-padding), env(safe-area-inset-bottom));
    }

    .modal-overlay {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .toast-container {
      bottom: max(var(--space-5), env(safe-area-inset-bottom));
      right: max(var(--space-5), env(safe-area-inset-right));
    }

    .sidebar {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}