/* Gemeinsame responsive Basis fuer Atlas und die eingebetteten Tools. */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
}

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

dialog,
[role="dialog"] {
  max-width: min(94vw, 1100px);
  max-height: 92dvh;
}

@media (max-width: 900px) {
  :root {
    --atlas-mobile-gap: 12px;
  }

  body {
    overflow-x: hidden;
  }

  .app-nav,
  .intranet-roadmap-nav {
    min-width: 0 !important;
  }

  .app-nav .main-nav,
  .intranet-roadmap-nav .main-nav {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .app-nav .main-nav::-webkit-scrollbar,
  .intranet-roadmap-nav .main-nav::-webkit-scrollbar {
    display: none;
  }

  .employee-app-shell {
    min-width: 0;
    gap: var(--atlas-mobile-gap) !important;
  }

  .page-shell,
  .simulation-page,
  .workspace,
  .page-layout,
  .tool-layout,
  .speiseplan-layout,
  .turnier-layout {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .page-shell .main-content,
  .page-shell .main-window,
  .page-shell .content-panel,
  .simulation-page .main-content,
  .simulation-page .main-window {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .employee-app-main,
  .employee-main-panel,
  .employee-content,
  .dashboard-main,
  .board-shell,
  .workspace {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .employee-table-wrap,
  .table-scroll,
  .dashboard-table-wrap,
  .board-scroll,
  .projectbook-table-wrap {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: clamp(0.72rem, 2.8vw, 0.9rem);
  }

  .employee-modal,
  .modal-card,
  .tile-editor-card,
  .settings-modal,
  .dashboard-info-dialog {
    width: min(94vw, 760px) !important;
    max-width: 94vw !important;
    max-height: 90dvh !important;
    overflow: auto !important;
    border-radius: 18px !important;
  }

  .employee-form-grid,
  .form-grid,
  .settings-grid,
  .landkarte-dialog-grid {
    grid-template-columns: 1fr !important;
  }

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

  .dashboard-grid,
  .digital-app-grid,
  .tools-launcher-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .employee-app-shell {
    padding-inline: 8px !important;
  }

  .employee-app-sidebar:not([hidden]) {
    max-width: min(88vw, 310px);
  }

  .nav-extras-panel,
  .nav-dropdown-menu {
    max-width: calc(100vw - 16px) !important;
  }

  .dashboard-grid,
  .digital-app-grid,
  .tools-launcher-grid {
    grid-template-columns: 1fr !important;
  }

  .modal-actions,
  .employee-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-block: 10px;
    background: rgba(248, 251, 255, 0.96);
    flex-wrap: wrap;
  }

  .roadmap-filter-row {
    grid-template-columns: 1fr !important;
  }

  .roadmap-filter-row strong {
    display: none;
  }
}

@media (pointer: coarse) {
  button,
  [role="button"],
  .info-button,
  .icon-button {
    min-width: 40px;
    min-height: 40px;
  }
}