/* NexaOS mobile overrides (no framework) */

/* Off-Canvas + Overlay: gleicher Breakpoint wie resources/css/nexaos-shell.css (≤991.98px) */
@media (max-width: 991.98px) {
  .overlay {
    display: none;
  }
  .overlay.open {
    display: block !important;
  }
}

@media (max-width: 768px) {
  /* iOS: prevent zoom on input focus */
  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  /* iPhone safe area */
  body {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* Tables: allow horizontal scroll instead of breaking layout */
  .content {
    min-width: 0 !important;
    overflow-x: visible !important;
  }

  .table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-scroll table {
    min-width: 720px !important;
  }

  /* Button groups / action bars */
  .btn-group,
  .button-group,
  .actions,
  .action-bar,
  .toolbar,
  .top-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .action-bar,
  .toolbar,
  .top-actions {
    align-items: stretch !important;
  }
  .action-bar > *,
  .toolbar > *,
  .top-actions > * {
    flex: 1 1 auto !important;
  }

  /* Filter grids: 2 columns on narrow tablets, 1 column on phones */
  .filter-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
  }

  /* Form grids: single column ≤768px (readable create/edit masks) */
  .form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Super-Admin utility grids from inline <style> */
  .sa-g2,
  .notif-grid {
    grid-template-columns: 1fr !important;
  }
  .sa-g3 {
    grid-template-columns: 1fr !important;
  }

  .filter-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }

  /* Modals */
  .modal,
  [role="dialog"],
  .dialog,
  .modal-content,
  .modal-body,
  .modal-card {
    max-width: 95vw !important;
  }

  /*
    Generic popup/dialog shell
    Works with existing inline-style overlays: position:fixed; inset:0; ... then an inner panel.
  */
  div[style*="position:fixed"][style*="inset:0"] > div {
    width: min(95vw, 560px) !important;
    max-width: 95vw !important;
    max-height: min(90vh, calc(100vh - 24px)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  div[style*="position:fixed"][style*="inset:0"] > div[style*="max-width"] {
    max-width: 95vw !important;
  }

  /* Same overlay pattern but expressed via top/left/right/bottom instead of inset */
  div[style*="position:fixed"][style*="top:0"][style*="left:0"][style*="right:0"][style*="bottom:0"] > div {
    width: min(95vw, 560px) !important;
    max-width: 95vw !important;
    max-height: min(90vh, calc(100vh - 24px)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Fixed side panel (e.g. permissions panel) -> bottom sheet on mobile */
  #permPanel {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: 95vw !important;
    max-height: min(75vh, calc(100vh - 96px)) !important;
  }
  #permPanel #permPanelContent {
    max-height: min(60vh, calc(100vh - 170px)) !important;
  }

  /* Common inline grid patterns (attribute selectors beat inline via !important) */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns: repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-col forms / filters */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Asymmetric form rows (label + wide field) */
  div[style*="grid-template-columns:1fr 2fr"],
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns:1fr 2fr 1fr"],
  div[style*="grid-template-columns: 1fr 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Floating buttons (FAB) */
  .fab,
  .floating-action,
  .floating-button {
    bottom: 72px !important;
  }

  /* Modul-Kopf: Hilfe-Buttons nicht in eine schmale Spalte drücken */
  .nxa-modul-header__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  /* Filters/forms should be single column on very small devices */
  div[style*="grid-template-columns:repeat(2,1fr)"],
  div[style*="grid-template-columns: repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  .table-scroll table {
    min-width: 680px !important;
  }

  .filter-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .filter-actions {
    justify-content: stretch !important;
  }
  .filter-actions > * {
    flex: 1 1 auto !important;
  }
}