/* Shared responsive layer for authenticated Custodyn dashboard pages. */
.mobile-nav-toggle,
.mobile-nav-overlay {
  display: none;
}

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app {
    display: block !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }

  .rail {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1001 !important;
    width: min(280px, 84vw) !important;
    min-width: min(280px, 84vw) !important;
    height: 100dvh !important;
    padding: 16px 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: 12px 0 28px rgba(0, 0, 0, .22);
  }

  body.dashboard-nav-open .rail {
    transform: translateX(0);
  }

  .mobile-nav-toggle {
    display: inline-grid;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line, #d0d2ce);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--ink, #131510);
    box-shadow: 0 3px 12px rgba(16, 18, 14, .14);
    font-size: 21px;
    line-height: 1;
  }

  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(12, 18, 40, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.dashboard-nav-open .mobile-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  main,
  .main,
  .side {
    min-width: 0 !important;
    width: auto !important;
  }

  main,
  .main {
    padding: 64px 14px 20px !important;
  }

  .side {
    padding: 0 14px 20px !important;
  }

  .statbar,
  .stats-bar,
  .health-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .workbench,
  .tester-grid,
  .settings-grid,
  .policies-layout,
  .adapters-grid,
  .roles-grid,
  .presets,
  .presets-grid,
  .modes,
  .field-row,
  .action-options,
  .invite-form {
    grid-template-columns: 1fr !important;
  }

  .demo-banner {
    position: static !important;
    min-height: auto !important;
    padding: 10px 14px 10px 62px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .demo-btns {
    width: 100%;
    margin: 8px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-btn {
    min-height: 38px;
    padding: 6px 8px !important;
  }

  .table-wrap,
  .table-container,
  .table-scroll,
  .agents-table,
  .logs-table {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 620px;
  }

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

@media (max-width: 480px) {
  main,
  .main {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .statbar,
  .stats-bar,
  .health-bar {
    grid-template-columns: 1fr !important;
  }

  .btn,
  button.btn {
    min-height: 38px;
  }
}