/* Correctifs Safari iPhone/iPad — Bar — 2026-07-21 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

.topbar {
  box-sizing: border-box;
  height: auto;
  min-height: 80px;
  padding-top: env(safe-area-inset-top);
  padding-left: max(clamp(18px, 3vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(18px, 3vw, 48px), env(safe-area-inset-right));
}

.side-dialog {
  height: 100vh;
  height: 100dvh;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.compact-dialog,
.charter-dialog,
.modal-card {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

@media (max-width: 800px) {
  .topbar {
    min-height: 68px;
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }

  .topbar nav a[href="../admin/"],
  .topbar nav a[href="/admin/"],
  .topbar nav a[href$="/admin/"] {
    display: inline-grid !important;
    place-items: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    font-size: 0;
    border-radius: 11px;
  }

  .topbar nav a[href="../admin/"]::after,
  .topbar nav a[href="/admin/"]::after,
  .topbar nav a[href$="/admin/"]::after {
    content: "⚙";
    font-size: 15px;
    line-height: 1;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  main {
    padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
  }
}

@media (max-width: 380px) {
  .topbar {
    gap: 6px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .topbar nav {
    gap: 6px;
  }

  .topbar nav button[data-action="show-orders"] {
    width: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 0;
  }

  .topbar nav button[data-action="show-orders"]::after {
    content: "🧾";
    font-size: 15px;
    line-height: 1;
  }
}