.food-journal {
  padding-bottom: 3rem;
}

.food-journal .tools-hero {
  margin-top: 1.5rem;
}

.journal-toolbar {
  margin-top: 1.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem 2rem;
}

.journal-add-form,
.journal-exports {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}

.journal-exports {
  margin-left: auto;
}

.food-journal label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.food-journal input,
.food-journal textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-outline-soft);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--color-on-surface);
  background: var(--color-surface-lowest);
}

.food-journal textarea {
  display: block;
  resize: vertical;
  min-height: 7rem;
}

.food-journal :is(input, textarea, button, summary):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.food-journal button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.journal-help {
  color: var(--color-on-surface-variant);
  font-size: 0.9rem;
}

.journal-toolbar .journal-help {
  flex-basis: 100%;
  margin: 0;
}

.journal-error {
  padding: 1rem;
  border: 1px solid #a34a37;
  border-radius: 0.75rem;
  background: #fff3ef;
  color: #793525;
}

.journal-list-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 1rem;
}

.journal-list-heading span {
  color: var(--color-on-surface-variant);
}

.journal-days {
  display: grid;
  gap: 1rem;
}

.journal-empty {
  padding: 2rem;
}

.journal-day summary {
  padding: 1.25rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

.journal-fields {
  display: grid;
  gap: 1.25rem;
  padding: 0 1.25rem 1.25rem;
}

.journal-delete {
  justify-self: start;
}

.journal-print {
  display: none;
}

@media (max-width: 640px) {
  .journal-add-form,
  .journal-add-form > div,
  .journal-exports {
    width: 100%;
  }

  .journal-exports {
    margin-left: 0;
  }
}

@media print {
  @page {
    margin: 18mm;
  }

  body.page-outils-journal-alimentaire {
    background: white;
    color: black;
  }

  body.page-outils-journal-alimentaire > :not(main),
  .food-journal .journal-screen {
    display: none !important;
  }

  body.page-outils-journal-alimentaire main,
  main > .food-journal:first-child {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: none;
  }

  .journal-print {
    display: block;
  }

  .journal-print h1 {
    font-size: 22pt;
  }

  .journal-print h2 {
    margin: 1.5rem 0 1rem;
    font-size: 16pt;
    break-after: avoid;
  }

  .journal-print h3 {
    font-size: 12pt;
    break-after: avoid;
  }

  .journal-print p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    orphans: 3;
    widows: 3;
  }

  .journal-print-meal {
    margin-bottom: 1rem;
  }
}