/* Familiennest 9.0.3: cross-feature theme and responsive safety layer. */

/* Every full-screen feature must inherit the account theme instead of introducing its own color scheme. */
#fn-notification-inbox,
.fn-inbox-overlay,
.fn-inbox-sheet,
.fn-ss-backdrop,
.fn-ss-modal,
.fn-si-sheet-backdrop,
.fn-si-sheet,
#fn-learning-backdrop,
.fn-learning-modal {
  color-scheme: inherit;
}

/* Generic form safety: no native control may force the page wider than its container. */
input,
select,
textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Grid/flex children with form controls must be allowed to shrink on narrow iOS/Android viewports. */
.fn-ss-modal,
.fn-ss-head,
.fn-ss-head > *,
.fn-ss-content,
.fn-ss-panel,
.fn-ss-panel form,
.fn-ss-panel form label,
.fn-ss-form-grid,
.fn-ss-inline-form,
.fn-ss-subject-settings,
.fn-ss-subject-settings form,
.fn-si-sheet,
.fn-si-sheet > header,
.fn-si-sheet > header > *,
.fn-si-sheet-body,
.fn-si-form,
.fn-si-form label,
.fn-si-search,
.fn-si-ask,
.fn-learning-modal,
.fn-learning-body,
.fn-learning-form,
.fn-learning-form label {
  min-width: 0;
  max-width: 100%;
}

.fn-ss-modal input,
.fn-ss-modal select,
.fn-ss-modal textarea,
.fn-si-sheet input,
.fn-si-sheet select,
.fn-si-sheet textarea,
.fn-learning-modal input,
.fn-learning-modal select,
.fn-learning-modal textarea {
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Native date/time/select controls on iOS can otherwise keep an intrinsic width wider than the grid column. */
.fn-ss-modal input[type="date"],
.fn-ss-modal input[type="time"],
.fn-ss-modal input[type="datetime-local"],
.fn-si-sheet input[type="date"],
.fn-si-sheet input[type="time"],
.fn-si-sheet input[type="datetime-local"],
.fn-learning-modal input[type="date"],
.fn-learning-modal input[type="time"],
.fn-learning-modal input[type="datetime-local"] {
  inline-size: 100%;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}

.fn-ss-panel,
.fn-si-sheet,
.fn-learning-modal,
.fn-inbox-item {
  overflow-wrap: anywhere;
}

.fn-ss-content,
.fn-si-sheet-body,
.fn-learning-body,
.fn-inbox-sheet {
  overflow-x: hidden;
}

@media (max-width: 600px) {
  .fn-ss-head {
    width: 100%;
  }

  .fn-ss-head > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .fn-ss-head > div:last-child {
    flex: 0 1 52%;
    max-width: 52%;
    min-width: 0;
  }

  .fn-ss-head select {
    width: 100%;
    max-width: 100%;
  }

  .fn-si-sheet-backdrop {
    max-width: 100dvw;
    overflow-x: hidden;
  }

  .fn-si-form,
  .fn-si-search,
  .fn-ss-form-grid,
  .fn-ss-inline-form {
    width: 100%;
  }
}