/* Noter og noten. Bygger på app.css og tokens.css: samme flader, samme radius,
   kortets ene flade skygge på notepanelet og ellers ingen effekter. Fanerne over
   listen ligner fanerne under tavlen, rækkerne i listen er knapper med titel, dato
   og projekt, og noten er ét panel på højst 820 px med billedet øverst, felterne i
   to kolonner og kroppen med visningen under. Under 720 px står alt i én kolonne. */

/* ---- Hoved med faner ---- */
.noter-hoved {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.noter-faner { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.noter-faner a {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  color: var(--tekst-svag);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.925rem;
  white-space: nowrap;
  transition: color var(--overgang), background-color var(--overgang);
}
/* Kun mus og pegefelt får hover; på telefonen ville et tryk ellers lade fanen stå skraveret. */
@media (hover: hover) {
  .noter-faner a:hover { color: var(--tekst); background: var(--flade-2); }
  .note-raekke:hover { border-color: var(--accent); }
}
.noter-faner a.aktiv { color: var(--accent); background: var(--accent-bg); }
.noter-viden-hjaelp { margin-bottom: 1rem; }

/* ---- Værktøjslinjen: Ny note, billede, søgefelt, projekt ---- */
.noter-vaerktoej {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.noter-vaerktoej .knap { white-space: nowrap; }
.foto { display: contents; }
.foto-fremdrift { flex-basis: 100%; }
.foto-fremdrift .besked { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }
.foto-fremdrift .link-knap { color: inherit; }
.noter-soeg { flex: 1 1 200px; min-width: 0; margin: 0; }
.noter-soeg input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: var(--flade);
  color: var(--tekst);
  font-size: 0.925rem;
}
.noter-soeg input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.noter-soeg input::placeholder { color: var(--tekst-svag); }
.noter-projekt select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
  font-size: 0.925rem;
  max-width: 220px;
}
.noter-projekt select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* ---- Listen ---- */
.note-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.note-raekke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.875rem;
  background: var(--flade);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge-kort);
  color: var(--tekst);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--overgang);
}
.note-raekke:focus-visible { border-color: var(--accent); outline: none; }
.note-raekke-titel { font-weight: 500; overflow-wrap: anywhere; }
.note-raekke-resume {
  font-size: 0.875rem;
  color: var(--tekst-svag);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.noter-side .tom { margin-top: 1rem; }

/* ---- Noten ---- */
.note-side { max-width: 820px; margin: 0 auto; }
.note-panel {
  background: var(--flade);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge-kort);
  padding: 1rem 1.25rem 1.25rem;
}
.note-panel-hoved { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.note-panel-hoved h1 { font-size: 1.25rem; }
.note-panel-hoved .knap { padding: 0.4rem 0.75rem; font-size: 0.9rem; margin-left: auto; }
.note-panel-hoved .knap + .kryds { margin-left: 0; }
.maerke-notetype { background: var(--flade-2); color: var(--tekst-svag); }
.note-panel .besked { margin-bottom: 0.75rem; }
.note-slet { margin-bottom: 0.75rem; }
.note-slet .besked { margin-bottom: 0.5rem; }
.note-viden-hjaelp { margin-bottom: 1rem; }
.note-billede { margin: 0 0 1rem; background: var(--flade-2); border-radius: var(--radius); text-align: center; }
/* Et udsnit, ikke hele billedet: titel og elementer skal kunne ses uden at rulle forbi et helt foto. Et tryk åbner det stort. */
.note-billede img { display: block; margin: 0 auto; max-height: 160px; width: auto; max-width: 100%; border-radius: var(--radius); object-fit: cover; }
.foto-hjaelp { margin-top: 0.4rem; }
.note-titel-felt { margin-bottom: 0.75rem; }
/* Etiketten "Titel" står også på den gemte note, så det kan ses, at titlen er et felt, der kan rettes. */
.note-panel .note-titel-felt label { font-weight: 500; font-size: 0.925rem; color: var(--tekst-svag); }
.note-panel form .note-titel-felt label, form.note-panel .note-titel-felt label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.note-titel-felt input {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.3rem 0.4rem;
}
div.note-panel .note-titel-felt input { border-color: transparent; background: transparent; }
div.note-panel .note-titel-felt input:hover { border-color: var(--linje); }
div.note-panel .note-titel-felt input:focus { border-color: var(--accent); background: var(--flade); }
.note-felter { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.felt-label { font-weight: 500; font-size: 0.925rem; }
.note-kilde { margin: 0; padding: 0.55rem 0; color: var(--tekst-svag); }
.note-krop textarea { resize: vertical; min-height: 12rem; line-height: 1.5; }
.note-handlinger { margin-top: 1rem; }
.note-visning { margin-top: 0.75rem; border: 1px solid var(--linje); border-radius: var(--radius); background: var(--flade-2); }
.note-visning summary {
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  font-weight: 500;
  font-size: 0.925rem;
  color: var(--tekst-svag);
}
.note-visning[open] summary { border-bottom: 1px solid var(--linje); }
.note-visning-indhold { padding: 0.75rem 0.9rem; background: var(--flade); border-radius: 0 0 var(--radius) var(--radius); overflow-wrap: anywhere; }
.note-visning-indhold h2 { font-size: 1.15rem; margin: 0.75rem 0 0.35rem; }
.note-visning-indhold h3 { font-size: 1.05rem; margin: 0.65rem 0 0.3rem; }
.note-visning-indhold h4 { font-size: 0.95rem; margin: 0.5rem 0 0.25rem; }
.note-visning-indhold > :first-child { margin-top: 0; }
.note-visning-indhold ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.note-visning-indhold p:last-child, .note-visning-indhold ul:last-child { margin-bottom: 0; }
.note-fod { margin: 1rem 0 0; }

/* ---- Elementerne fra et billede ---- */
.note-elementer { margin-top: 1rem; }
.note-elementer h3 { font-size: 0.925rem; margin-bottom: 0.25rem; }
.note-elementer > .hjaelp { margin-bottom: 0.5rem; }
.elementer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.element {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linje);
}
.element:last-child { border-bottom: 1px solid var(--linje); }
.element-tekst { overflow-wrap: anywhere; }
.element-afvist .element-tekst { color: var(--tekst-svag); text-decoration: line-through; }
.element-handlinger { display: flex; gap: 0.35rem; align-items: center; white-space: nowrap; }
.element-handlinger .knap { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.maerke-element { white-space: nowrap; }
.maerke-element-opgave { background: var(--accent-bg); color: var(--accent); }
.maerke-element-beslutning { background: var(--ok-bg); color: var(--ok); }
.maerke-element-spoergsmaal { background: var(--advar-bg); color: var(--advar); }
.maerke-element-info { background: var(--flade-2); color: var(--tekst-svag); }

/* ---- Telefon ---- */
@media (max-width: 720px) {
  .note-panel { padding: 0.875rem; }
  .note-felter { grid-template-columns: 1fr; }
  .noter-soeg { flex-basis: 100%; }
  .noter-projekt { flex: 1 1 auto; }
  .noter-projekt select { max-width: none; width: 100%; }
  .element { grid-template-columns: auto minmax(0, 1fr); }
  .element-sikkerhed { grid-column: 1; }
  .element-handlinger { grid-column: 2; justify-content: flex-start; }
}