/* Installed-app (PWA) polish: safe areas, touch behaviour, iOS input zoom, push card. Loaded last on purpose. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* No rubber-band of the whole page; the scroll containers below keep their own overscroll. */
  overscroll-behavior: none;
}

a,
button,
summary,
[role="button"],
input,
select,
textarea {
  /* Removes the double-tap-zoom delay on touch devices. */
  touch-action: manipulation;
}

.view {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.toasts {
  right: max(18px, var(--safe-right));
}

.modal-backdrop {
  padding-top: max(18px, var(--safe-top));
  padding-right: max(18px, var(--safe-right));
  padding-bottom: max(18px, var(--safe-bottom));
  padding-left: max(18px, var(--safe-left));
}

.modal {
  max-height: calc(100dvh - max(18px, var(--safe-top)) - max(18px, var(--safe-bottom)));
}

/* Wide layouts have no bottom bar: keep the composer and bottom sheet above the home indicator. */
@media (min-width: 769px) {
  .composer {
    padding-bottom: max(14px, var(--safe-bottom));
  }

  .toasts {
    bottom: max(18px, var(--safe-bottom));
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .note-panel {
    padding-bottom: var(--safe-bottom);
  }
}

@media (max-width: 768px) {
  /* The bottom bar grows by the home-indicator inset instead of squeezing its buttons. */
  .sidebar {
    height: calc(var(--bottom-bar-h) + var(--safe-bottom));
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
  }

  .view {
    height: calc(100dvh - var(--bottom-bar-h) - var(--safe-bottom));
  }

  .toasts {
    bottom: calc(var(--bottom-bar-h) + var(--safe-bottom) + 12px);
  }

  .toasts {
    left: max(18px, var(--safe-left));
    right: max(18px, var(--safe-right));
    width: auto;
  }
}

/* iOS zooms the page when a focused field has a font size below 16px. */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* Standalone window: no browser chrome, so avoid text selection / callouts on controls. */
@media (display-mode: standalone) {
  .nav-item,
  .icon-btn,
  .btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ------------------------------------------------- Verwaltung > App & Benachrichtigungen */

.push-install {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.push-steps {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}

.push-steps .icon {
  vertical-align: -2px;
}

.push-status {
  margin-bottom: 6px;
}

.push-devices {
  margin-bottom: 8px;
}

.push-device {
  flex-wrap: wrap;
  gap: 8px;
}

.push-device .icon {
  vertical-align: -3px;
  color: var(--accent);
}

.push-device .badge {
  margin-left: 8px;
}