/* dyrlaeger.css — selvstændigt ark til dyrlaeger.html, samme mønster som
   inAppBrowser.css. Kan foldes ind i style.css hvis I hellere vil have ét ark.

   VIGTIGT om farver: --roed/--gul/--groen er reserveret til frivilliges
   tilgængelighedsstatus (on/ok/off fra DB's eget system) og må ikke genbruges,
   jf. DESIGN.md. Klinikkers åben/lukket er en anden slags status, så den får
   sine egne tokens nedenfor. De er valgt så de ikke ligner status-prikkerne. */

:root {
  --klinik-aaben: #1f6f4a;
  --klinik-aaben-bg: #e2f0e8;
  --klinik-lukket: #6b6b6b;
  --klinik-lukket-bg: #ececea;
  --klinik-ukendt: #8a5a12;
  --klinik-ukendt-bg: #f7ecd8;
  --klinik-advarsel: #8a3423;
  --klinik-advarsel-bg: #f7e3de;
}

.vet-zip-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.vet-zip-form label {
  font-size: 0.9rem;
}
.vet-zip-form input {
  width: 6em;
  padding: 6px 8px;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.vet-filter {
  margin: 18px 0 6px;
}
.vet-filter label {
  font-size: 0.9rem;
  display: block;
  margin-bottom: 4px;
}
.vet-filter select {
  width: 100%;
  padding: 6px 8px;
  font-size: 1rem;
}
.vet-filter .hint {
  margin: 6px 0 0;
}

.vet-dyr-ukendt {
  background: var(--klinik-ukendt-bg);
  color: var(--klinik-ukendt);
}

.vet-list,
.vet-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vet-section {
  margin: 22px 0 0;
}
.vet-section-title {
  font-size: 1rem;
  margin: 0 0 2px;
}
.vet-section .hint {
  margin: 0 0 10px;
}

.vet-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid var(--db-sand, #e3ded6);
}
/* Recurring gotcha i denne kodebase: et element der skjules via .hidden OG
   har en author-regel med display, ignorerer [hidden] helt. Alle nye regler
   med display skal derfor have denne makker — også selvom elementet ikke
   skjules i dag. */
.vet-item[hidden],
.vet-zip-form[hidden],
.vet-status[hidden] {
  display: none;
}

.vet-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.vet-top[hidden] {
  display: none;
}

.vet-navn {
  font-weight: 600;
}
.vet-km {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--db-morkegraa, #4a4a4a);
}
.vet-adr {
  font-size: 0.9rem;
  color: var(--db-morkegraa, #4a4a4a);
}

.vet-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin-top: 3px;
}

.vet-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.vet-aaben {
  background: var(--klinik-aaben-bg);
  color: var(--klinik-aaben);
}
.vet-lukket {
  background: var(--klinik-lukket-bg);
  color: var(--klinik-lukket);
}
.vet-ukendt {
  background: var(--klinik-ukendt-bg);
  color: var(--klinik-ukendt);
}

.vet-vagt {
  font-size: 0.85rem;
  color: var(--db-morkegraa, #4a4a4a);
}

.vet-advarsel {
  font-size: 0.85rem;
  background: var(--klinik-advarsel-bg);
  color: var(--klinik-advarsel);
  padding: 5px 8px;
  border-radius: 3px;
  margin: 3px 0;
}

.vet-tlf {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.vet-intet {
  font-weight: 400;
  color: var(--klinik-lukket);
}

.vet-fodnote {
  margin-top: 26px;
}

.vet-map-wrap {
  margin: 22px 0 0;
}
.vet-map-wrap[hidden] {
  display: none;
}

.vet-map {
  height: 320px;
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden; /* runder Leaflets tiles med, jf. DESIGN.md's flade/enkle stil */
}
/* Leaflets egen "credit"-attribution må ikke skjules eller gemmes bag en
   knap (OSM-brugspolitik) — vi lader dens standardudseende stå urørt. */

.vet-noter-wrap {
  margin-top: 6px;
}

.vet-noter-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--db-bordeaux, #a00000);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.vet-noter {
  margin-top: 8px;
  padding: 10px;
  background: var(--db-sand, #f5f0e6);
  border-radius: 6px;
}
.vet-noter[hidden] {
  display: none;
}

.vet-noter .hint {
  margin: 0 0 8px;
  font-size: 0.8rem;
}

.vet-noter-liste {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.vet-note {
  padding: 6px 0;
  border-bottom: 1px solid #e3ded0;
}
.vet-note:last-child {
  border-bottom: none;
}

.vet-noter-tom {
  font-size: 0.85rem;
  color: var(--db-morkegraa, #4a4a4a);
}

.vet-note-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--db-morkegraa, #4a4a4a);
}
.vet-note-top[hidden] {
  display: none;
}

.vet-note-forfatter {
  font-weight: 600;
}

.vet-note-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.vet-note-flag {
  background: var(--klinik-advarsel-bg);
  color: var(--klinik-advarsel);
}

.vet-note-tekst {
  margin: 4px 0 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.vet-note-slet {
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  color: var(--klinik-advarsel);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.vet-slet-klinik {
  display: block;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  color: var(--klinik-advarsel);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.vet-noter-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #e3ded0;
}

.vet-noter-flag-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.vet-noter-flag-label {
  font-size: 0.85rem;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vet-noter-form textarea {
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.vet-noter-msg {
  font-size: 0.85rem;
  color: var(--klinik-advarsel);
  margin: 0;
}
.vet-noter-msg[hidden] {
  display: none;
}