/* ===================================================
   Tassarkivet — Veterinärjournal
   styles.css
   =================================================== */

/* ── Designspråk ──────────────────────────────────────
   Formspråket är inspirerat av Anthropics: tunna hårlinjer, rundade kort
   utan tunga skuggor, platt toppbar och tre typsnitt med var sin roll:
     • DM Sans  (--font-body/--font-display) – rubriker och gränssnitt
     • serif    (--font-serif)  – text med "röst": välkomstrutan, inloggningen
     • mono     (--font-mono)   – små VERSALA etiketter (ÄGARE, DATUM …)
   Färgerna är Tassarkivets egna: vita kort på ljust rosagrå botten, mörk
   plommonsvart text och temafärgen (standard: Tassarkivets rosa) på knappar,
   loggan, markeringar och dagens anteckning.

   Namnen --neutral-* och --pink-* är historiska. Inline-stilar i app.js,
   settings.js och calendar.js läser dem, så de ligger kvar som den semantiska
   skalan: --neutral-0 är alltid "yta", --neutral-800 alltid "rubriktext".
   --pink-* är accentskalan och räknas fram ur temafärgen (se "Temafärg"
   nedan) – den är bara rosa om temafärgen är rosa. */

/* ── Variables ────────────────────────────────────── */
:root {
  /* Neutraler: Tassarkivets varma rosagrå skala */
  --neutral-0:   #ffffff;   /* yta: kort, paneler, modaler */
  --neutral-50:  #faf9f9;   /* dämpad yta: hover, verktygsrader */
  --neutral-100: #f3f1f2;   /* duk: appbakgrund, toppbar, sidopaneler */
  --neutral-200: #e8e4e6;   /* hårlinje */
  --neutral-300: #cdc7ca;   /* kraftigare linje */
  --neutral-400: #a89ea3;   /* dämpad text, etiketter */
  --neutral-500: #7a6e73;   /* sekundär text */
  --neutral-600: #544d51;
  --neutral-700: #3a3437;   /* brödtext */
  --neutral-800: #231f22;   /* rubriker */

  --paper:  #ffffff;        /* skrivytor: fält och dagens anteckning */
  --oat:    #ebe6e9;        /* neutrala märken/val (t.ex. "utkast") */
  --oat-hover: #ebe7e9;     /* hover i listor och på sekundärknappar */
  --ink:    #231f22;        /* mörka ytor: notiser, demolägets piller */
  --ink-hover: #3a3437;
  --on-ink: #ffffff;

  --warn-bg:   #fff8e1;
  --warn-border: #ffc107;
  --warn-text: #6d4c00;

  --ok-bg:     #e8f6ec;
  --ok-border: #46a35f;
  --ok-text:   #1a6b32;

  --danger: #d62c2c;
  --danger-light: #fdecea;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(35,31,34,.05);
  --shadow-md: 0 6px 20px rgba(35,31,34,.09);
  --shadow-lg: 0 18px 48px rgba(35,31,34,.15);

  --sidebar-w: 272px;
  --topbar-h:  58px;

  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
  --font-serif:   Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --transition: .18s ease;

  /* Temafärg. Varje palett (data-accent nedan) sätter tre toner:
       --accent-base  huvudtonen: knappar, vald flik, loggan, prickar
       --accent-mid   mörkare: hover, ordmärket "note"
       --accent-deep  mörkast: accent som text
     Allt annat räknas fram här, så att samma skala fungerar i ljust och
     mörkt läge. Tassarkivets rosa motsvarar exakt den gamla skalan
     (#f95e87 / #e8356b / #c4194f). */
  --accent-base:   #f95e87;
  --accent-mid:    #e8356b;
  --accent-deep:   #c4194f;

  --accent:        var(--accent-base);
  --accent-strong: var(--accent-mid);
  --accent-ink:    var(--accent-deep);
  --accent-fill:   var(--accent-base);   /* fyllnad med text på */
  --on-accent:     #ffffff;
  --accent-soft:   color-mix(in srgb, var(--accent) 14%, var(--neutral-100));  /* vald rad på duken */
  --accent-wash:   color-mix(in srgb, var(--accent) 8%, var(--paper));         /* dagens anteckning */
  --focus-ring:    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  --pink-50:  color-mix(in srgb, var(--accent) 7%,  var(--neutral-0));
  --pink-100: color-mix(in srgb, var(--accent) 16%, var(--neutral-0));
  --pink-200: color-mix(in srgb, var(--accent) 34%, var(--neutral-0));
  --pink-300: color-mix(in srgb, var(--accent) 64%, var(--neutral-0));
  --pink-400: var(--accent);
  --pink-500: var(--accent-strong);
  --pink-600: var(--accent-ink);

  /* Rollfärger (variabel-ifierade så mörkt läge kan skriva över dem) */
  --brand-ink:      #2e7d44;   /* klinikens namn i toppbar/PDF (grön) */
  --wordmark-accent: var(--accent-strong);  /* "arkivet" i ordmärket Tassarkivet */
  --overlay-scrim:  rgba(35,31,34,.45);     /* modal-bakgrund */
  --info-blue-bg:   #e0f2fe;   /* adopterad-badge */
  --info-blue-border:#bae6fd;
  --info-blue-text: #0369a1;
  --sign-green-bg:  #e6f9ee;
  --sign-green-border:#a3d9b8;
  --sign-green-text:#1a7a3e;
  --clin-blue-bg:   #eef4ff;
  --clin-blue-border:#c3d4f0;
  --clin-blue-text: #2a4d8f;
  --dup-bg:         #fff9e6;
  --dup-border:     #f0c040;
  --dup-text:       #7a5800;
}

/* ── Mörkt läge ───────────────────────────────────────
   Sätts via document.documentElement[data-theme="dark"] (se inline-scriptet
   i <head> i Journal.html + Utseende-fliken). Tassarkivets mörka skala (invertera
   ljushet, behåll ton). Accentens ljusa toner räknas om av sig själva
   eftersom de blandas mot --neutral-0; grundtonen ljusas upp något så att
   mörka temafärger syns mot den mörka duken. PDF-exporten påverkas inte
   (den bygger ett eget ljust dokument och läser --accent-base). */
:root[data-theme="dark"] {
  --neutral-0:   #1e1b1d;   /* "papper": kort, toppbar, modaler, sidopanel */
  --neutral-50:  #242022;
  --neutral-100: #171516;   /* appbakgrund */
  --neutral-200: #35302f;   /* kantlinjer */
  --neutral-300: #4a4341;
  --neutral-400: #8a807f;
  --neutral-500: #a89e9c;
  --neutral-600: #c7bdbb;
  --neutral-700: #e7dedb;   /* brödtext */
  --neutral-800: #f5efec;   /* rubriker */

  --paper:  #242022;
  --oat:    #2f2a2c;
  --oat-hover: #2a2527;
  --ink:    #f5efec;
  --ink-hover: #e7dedb;
  --on-ink: #1e1b1d;

  --warn-bg:   #3a3210;
  --warn-border: #8a6d16;
  --warn-text: #f0d789;

  --ok-bg:     #15301d;
  --ok-border: #2f6b41;
  --ok-text:   #8fd5a4;

  --danger: #f26d6d;
  --danger-light: #3a1f1f;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 4px 16px rgba(0,0,0,.50);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.60);

  --accent:        color-mix(in srgb, var(--accent-base) 85%, #fff);
  --accent-ink:    color-mix(in srgb, var(--accent) 70%, #fff);
  --focus-ring:    0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  --brand-ink:       #6fc98a;
  --wordmark-accent: var(--accent);
  --overlay-scrim:   rgba(0,0,0,.62);
  --info-blue-bg:    #14304a;
  --info-blue-border:#1e496e;
  --info-blue-text:  #8ecbf0;
  --sign-green-bg:   #143025;
  --sign-green-border:#1f5a3f;
  --sign-green-text: #7fd6a3;
  --clin-blue-bg:    #1a2540;
  --clin-blue-border:#2d4270;
  --clin-blue-text:  #9db8ef;
  --dup-bg:          #3a3210;
  --dup-border:      #8a6d16;
  --dup-text:        #f0d789;

  color-scheme: dark;
}

/* ── Temafärg (accent) ────────────────────────────────
   Sätts via document.documentElement[data-accent="…"] (se inline-scriptet i
   <head> i Journal.html + Utseende-fliken). Varje palett sätter sina tre
   toner (huvud / mörkare / mörkast); ljusa toner och textvarianter räknas
   fram i :root ovan. De sju första är Tassarkivets ursprungliga skalor, exakt
   som tidigare; resten kom till 2026-09.
   Behöver du en ny färg: lägg till ett block här + en post i ACCENTS
   (settings.js) och i listan i Journal.html. Inget annat behöver ändras.
   Rosa listas explicit så att data-accent alltid är satt. */
:root[data-accent="rose"]      { --accent-base: #f95e87; --accent-mid: #e8356b; --accent-deep: #c4194f; }   /* Rosa */
:root[data-accent="violet"]    { --accent-base: #9268ec; --accent-mid: #7c47dd; --accent-deep: #5f2fb4; }   /* Lila */
:root[data-accent="blue"]      { --accent-base: #5593ea; --accent-mid: #2f74db; --accent-deep: #1c56ac; }   /* Blå */
:root[data-accent="teal"]      { --accent-base: #189b8c; --accent-mid: #0d8878; --accent-deep: #0a6a5d; }   /* Turkos */
:root[data-accent="green"]     { --accent-base: #34a052; --accent-mid: #1f8a41; --accent-deep: #166933; }   /* Grön */
:root[data-accent="amber"]     { --accent-base: #dd7a12; --accent-mid: #c2610a; --accent-deep: #964a06; }   /* Bärnsten */
:root[data-accent="slate"]     { --accent-base: #6f8098; --accent-mid: #51637c; --accent-deep: #394a61; }   /* Grafit */
:root[data-accent="raspberry"] { --accent-base: #c41f5c; --accent-mid: #a51a4e; --accent-deep: #82143d; }   /* Hallon */
:root[data-accent="wine"]      { --accent-base: #a3404f; --accent-mid: #8c3241; --accent-deep: #6e2633; }   /* Vinröd */
:root[data-accent="plum"]      { --accent-base: #8c4c7c; --accent-mid: #763d68; --accent-deep: #5c2f51; }   /* Plommon */
:root[data-accent="navy"]      { --accent-base: #2f5a86; --accent-mid: #264b72; --accent-deep: #1d3a59; }   /* Marin */
:root[data-accent="forest"]    { --accent-base: #3f6f50; --accent-mid: #335c42; --accent-deep: #284833; }   /* Skog */
:root[data-accent="mustard"]   { --accent-base: #b8962e; --accent-mid: #9c7e22; --accent-deep: #7a6219; }   /* Senap */
:root[data-accent="clay"]      { --accent-base: #d97757; --accent-mid: #c6613f; --accent-deep: #a34b2d; }   /* Lera */
:root[data-accent="walnut"]    { --accent-base: #7d5a44; --accent-mid: #694b38; --accent-deep: #523a2b; }   /* Valnöt */
:root[data-accent="charcoal"]  { --accent-base: #3d3d3a; --accent-mid: #2e2e2c; --accent-deep: #1f1f1d; }   /* Kol */
/* Kol är nästan svart – i mörkt läge skulle den försvinna mot duken, så där
   används en ljusare grå (och mörk text på fyllda ytor). */
:root[data-theme="dark"][data-accent="charcoal"] {
  --accent-base: #9c9a92; --accent-mid: #85837c; --accent-deep: #6d6b65;
  --on-accent: #1e1b1d;
}

/* ── Reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--neutral-700);
  background: var(--neutral-100);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
textarea, input, select, button { font-family: inherit; font-size: inherit; }
::selection { background: var(--pink-200); color: var(--neutral-800); }
/* Kryssrutor och radioknappar i temafärgen. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-fill); }
:focus-visible { outline: 2px solid var(--pink-300); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* ── Top Bar ──────────────────────────────────────── */
/* Platt som en webbsida: samma duk som resten av appen, bara en hårlinje
   under. Ingen skugga. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--neutral-100);
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 16px;
  z-index: 100;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
/* Demoläget: loggan leder tillbaka till startsidan (db-demo.js). */
.topbar-brand.is-link { cursor: pointer; border-radius: 8px; }
.topbar-brand.is-link:hover .brand-wordmark { opacity: .8; }
.topbar-brand.is-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.paw-icon { height: 26px; width: auto; }
/* Tassarkivets tass i temafärgen. Loggan används som mask och fylls med
   --accent, så den byter färg med Utseende → Temafärg. En egen klinikslogga
   visas i stället som vanlig bild (.paw-icon) – applyClinicBranding() i
   app.js växlar mellan dem. */
.paw-mark {
  display: inline-block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-color: var(--accent);
  -webkit-mask: url(logo.svg) center / contain no-repeat;
          mask: url(logo.svg) center / contain no-repeat;
}
.paw-mark[hidden] { display: none; }
/* Ordmärket Tassarkivet: visas när kliniken inte satt ett eget namn.
   Samma typografi som på de publika sidorna (site.css .brand-name):
   DM Sans, halvfet, tätt spärrad – färgen bär loggan, inte ordet. */
.brand-wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  color: var(--neutral-800);
  letter-spacing: -.025em;
}
.brand-wordmark b { color: var(--wordmark-accent); font-weight: inherit; }
.brand-name {
  font-family: 'Pinyon Script', cursive;
  font-size: 30px;
  color: var(--brand-ink);
  letter-spacing: .2px;
}
.brand-sub {
  font-family: 'Pinyon Script', cursive;
  font-size: 30px;
  color: var(--brand-ink);
  font-weight: 400;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Search */
.search-wrap {
  position: relative;
}
.search-wrap input {
  width: 280px;
  padding: 8px 36px 8px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--neutral-800);
  outline: none;
  transition: var(--transition);
}
.search-wrap input:focus {
  border-color: var(--pink-300);
  box-shadow: var(--focus-ring);
}
.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  color: var(--neutral-400);
}
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.search-dropdown.hidden { display: none; }
.search-result-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--neutral-200);
  transition: var(--transition);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--pink-50); }
.search-result-item .sri-animal { font-weight: 600; color: var(--neutral-800); }
.search-result-item .sri-owner { font-size: 12px; color: var(--neutral-500); margin-top: 2px; }
.search-result-item .sri-match { font-size: 11px; color: var(--pink-600); margin-top: 2px; }
.search-empty {
  padding: 16px;
  text-align: center;
  color: var(--neutral-400);
  font-size: 13px;
}
/* Grupperade träffar i det gemensamma sökfältet ("Djur" / "Ägare") */
.search-group + .search-group { border-top: 1px solid var(--neutral-200); }
.search-group-head {
  padding: 9px 14px 5px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-500);
  background: var(--neutral-50);
}
.search-count {
  margin-left: 4px;
  font-weight: 400;
  color: var(--neutral-400);
}
/* "Visa fler" när en grupp har fler träffar än som visas */
.search-more {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-top: 1px solid var(--neutral-200);
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent-deep);
  cursor: pointer;
  transition: var(--transition);
}
.search-more:hover { background: var(--pink-50); }

/* ── App Shell ────────────────────────────────────── */
.app-shell {
  display: flex;
  height: 100vh;
  padding-top: var(--topbar-h);
}

/* ── Sidebar ──────────────────────────────────────── */
/* Ägarlistan ligger direkt på duken, som en lista på en webbsida: rader
   med rundad markering i havre (--oat) i stället för ramar och kantstreck. */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--neutral-100);
  border-right: 1px solid var(--neutral-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 18px 16px 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sidebar-header-title {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-header h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--neutral-800);
}
.sidebar-collapse-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--neutral-400);
  padding: 3px 6px;
  border-radius: 6px;
  transition: var(--transition);
}
.sidebar-collapse-btn:hover {
  background: var(--oat-hover);
  color: var(--neutral-800);
}

/* ── Collapsed rail (smal kant-rad när ägarlistan är dold) ── */
.sidebar-rail {
  display: none;            /* visas bara när .app-shell.sidebar-collapsed */
  width: 52px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  background: var(--neutral-100);
  border-right: 1px solid var(--neutral-200);
}
.app-shell.sidebar-collapsed .sidebar { display: none; }
.app-shell.sidebar-collapsed .sidebar-rail { display: flex; }

.rail-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-200);
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-size: 17px;
  line-height: 1;
  color: var(--neutral-600);
  cursor: pointer;
  transition: var(--transition);
}
.rail-btn:hover {
  background: var(--oat-hover);
  border-color: var(--neutral-300);
  color: var(--neutral-800);
}
.rail-btn-primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 500;
  font-size: 21px;
}
.rail-btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}

/* Sortering som segmentkontroll: vald knapp ligger som ett papperskort i
   en nedsänkt ränna. */
.sidebar-sort {
  display: flex;
  gap: 2px;
  margin: 0 16px 10px 18px;
  padding: 3px;
  background: color-mix(in srgb, var(--neutral-200) 70%, transparent);
  border-radius: 10px;
  flex-shrink: 0;
}
.sort-btn {
  flex: 1;
  padding: 5px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--neutral-500);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.sort-btn:hover { color: var(--neutral-800); }
.sort-btn.active {
  background: var(--paper);
  color: var(--pink-600);
  box-shadow: 0 1px 2px rgba(20,20,19,.08);
}

.owner-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 10px 20px 12px;
}
/* Namn och kundnummer på en rad, stad/djur under. Samma markup som förut –
   grid placerar numret till höger utan att app.js behöver ändras. */
.owner-list-item {
  padding: 9px 10px;
  margin-bottom: 1px;
  cursor: pointer;
  border-radius: 10px;
  transition: background var(--transition);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: baseline;
}
.owner-list-item:hover { background: var(--oat-hover); }
/* Vald ägare: temafärgad ton med ett accentstreck i vänsterkanten. */
.owner-list-item.active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.owner-list-item .oli-name {
  grid-column: 1;
  grid-row: 1;
  font-weight: 500;
  color: var(--neutral-800);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-list-item .oli-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 12px;
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-list-item .oli-number {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--neutral-400);
  font-weight: 400;
  letter-spacing: .02em;
}
.owner-list-item.active .oli-number { color: var(--pink-600); }

/* ── Main Content ─────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Info-panel: höger kolumn i journalvyn ─────────────
   Skrivskyddad sammanfattning av vald ägare/djur (#infoPanel, fylls av
   renderInfoPanel i app.js). Tredje flex-barnet i .app-shell. Döljs på
   smalare skärmar (se @media nedan) och när ingen ägare är vald (.hidden). */
/* Högerpanelen ligger på duken och läses som faktarutan på ett nyhetskort:
   rubrik, sedan rader med ETIKETT i mono till vänster och värdet till höger,
   åtskilda av hårlinjer. */
.info-panel {
  width: 312px;
  flex-shrink: 0;
  background: var(--neutral-100);
  border-left: 1px solid var(--neutral-200);
  overflow-y: auto;
  padding: 26px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.ip-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--neutral-800);
  margin-bottom: 12px;
}
/* Liten ruta i temafärgen framför varje rubrik i högerpanelen. */
.ip-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
/* Besök: "Kommande" och "Tidigare" under samma rubrik. */
.ip-sublabel {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin: 0 0 8px;
}
.ip-sublabel ~ .ip-sublabel { margin-top: 18px; }
.ip-count {
  display: inline-block;
  background: var(--pink-100);
  color: var(--pink-600);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 10px;
  letter-spacing: 0;
  margin-left: 4px;
}
.ip-visits { display: flex; flex-direction: column; gap: 8px; }
.ip-visit {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-left: 3px solid var(--neutral-300);   /* rummets färg sätts inline */
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  transition: var(--transition);
}
.ip-visit:hover { background: var(--paper); border-top-color: var(--neutral-300); border-right-color: var(--neutral-300); border-bottom-color: var(--neutral-300); }
.ip-visit.is-draft { border-style: dashed; border-left-style: solid; }
.ip-visit-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--neutral-800); }
.ip-visit-sub { display: block; font-size: 12.5px; color: var(--neutral-500); margin-top: 3px; }
.ip-visit-sub + .ip-visit-sub { margin-top: 0; }
.ip-pasts { display: flex; flex-direction: column; border-top: 1px solid var(--neutral-300); }
.ip-past {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 2px;
  border: none;
  border-bottom: 1px solid var(--neutral-300);
  background: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: var(--transition);
}
.ip-past:hover { background: var(--oat-hover); }
.ip-past-date { flex: 0 0 auto; color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.ip-past-what {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--neutral-800);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ip-past.is-draft .ip-past-what { color: var(--neutral-500); font-style: italic; }
.ip-muted { font-size: 12.5px; color: var(--neutral-500); }
.ip-empty {
  font-size: 12.5px;
  color: var(--neutral-500);
  border: 1px dashed var(--neutral-300);
  border-radius: 10px;
  padding: 13px;
  text-align: center;
}
.ip-btn {
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--neutral-800);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.ip-btn:hover { background: var(--pink-50); border-color: var(--pink-300); color: var(--pink-600); }
.ip-kv { display: flex; flex-direction: column; border-top: 1px solid var(--neutral-300); }
.ip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--neutral-300);
  font-size: 13px;
}
.ip-row > span:first-child {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--neutral-600);
}
.ip-row > span:last-child {
  color: var(--neutral-800);
  font-weight: 400;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ip-num { font-variant-numeric: tabular-nums; }
.ip-none { color: var(--neutral-400); font-weight: 400; }
.ip-meds { display: flex; flex-direction: column; gap: 6px; }
.ip-med {
  font-size: 12.5px;
  color: var(--neutral-700);
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-left: 3px solid var(--pink-300);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  line-height: 1.45;
}
.ip-med b { font-weight: 600; color: var(--neutral-800); }
.ip-meddate { font-size: 11.5px; color: var(--neutral-500); margin-top: 8px; }
/* Under 1180px räcker inte bredden till tre kolumner – panelen döljs, allt
   den visar finns kvar i mittkolumnen. Besöken finns bara på ett ställe åt
   gången: i panelen när den syns, annars i mittkolumnens besökskort. */
@media (max-width: 1180px) {
  .info-panel { display: none; }
}
@media (min-width: 1181px) {
  .owner-visits-card { display: none; }
}

/* Empty state */
/* Välkomstrutan hälsar med serif, som en rad text snarare än en rubrik. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  color: var(--neutral-500);
  text-align: center;
}
.empty-paw { opacity: 1; margin-bottom: 4px; }
.empty-paw img { height: 52px; width: auto; }
.empty-paw .paw-mark { width: 56px; height: 56px; display: block; }
.empty-state h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--neutral-800);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.empty-state p { font-size: 15px; max-width: 340px; line-height: 1.55; margin-bottom: 6px; }

/* ── Panel Header ─────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.panel-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pink-600);
  font-weight: 400;
  margin-bottom: 6px;
}
.panel-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--neutral-800);
  line-height: 1.1;
}
.panel-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── Warnings (kompakta rutor under djuret) ───────── */
.animal-warning-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 26px 0;
}
.animal-warning {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 10px;
  padding: 6px 6px 6px 12px;
  color: var(--warn-text);
  font-size: 13px;
  font-weight: 500;
  animation: slideIn .2s ease;
}
.animal-warning-icon { font-size: 15px; flex-shrink: 0; }
.animal-warning-text { white-space: pre-wrap; word-break: break-word; }
.animal-warning-remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--warn-text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: .6;
  transition: var(--transition);
}
.animal-warning-remove:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* ── Cards ────────────────────────────────────────── */
/* Kort: papper på duken. Hårlinje, rundade hörn, ingen skugga. */
.card {
  background: var(--neutral-0);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  border: 1px solid var(--neutral-200);
}
.card-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 400;
  color: var(--neutral-500);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.owner-badge {
  background: var(--pink-100);
  color: var(--pink-600);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
}
/* Ägarinformation: kompakt. Fälten packas efter kortets egen bredd – en rad
   på breda skärmar, två rader (kontakt / adress) på mellanbredd – och
   sparstatusen ligger på rubrikraden i stället för att ta en egen rad. */
.owner-info-card {
  position: relative;
  container-type: inline-size;
  margin: 18px 0 22px;
  padding: 12px 18px;
}
.owner-info-card .card-label { margin-bottom: 6px; }
.owner-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 14px;
}
@container (min-width: 340px) {
  .owner-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 560px) {
  .owner-info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 1150px) {
  .owner-info-grid { grid-template-columns: 1.3fr 1fr 1fr 1.4fr 1.4fr .7fr 1fr 1.1fr; }
}
.owner-info-card .owner-save-status {
  position: absolute;
  top: 12px;
  right: 18px;
  min-height: 0;
  padding: 0;
}
.info-field {}
.info-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--neutral-500);
  font-weight: 400;
  margin-bottom: 2px;
}
/* "valfritt" bakom en fältrubrik. Gemener och rundad ram, så att den läses
   som en upplysning och inte som en del av rubriken. */
.info-field-optional {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 10px;
  color: var(--neutral-500);
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 5px;
  cursor: help;
}
.info-field-value {
  font-size: 14px;
  color: var(--neutral-700);
  font-weight: 400;
}
.info-field-value:empty::after { content: '–'; color: var(--neutral-300); }

/* ── Animals Section ──────────────────────────────── */
/* ── Ägarens besök (kommande + tidigare) ─────────────── */
/* Kortet är hopfällt som default: knappraden bär sammanfattningen, listan
   fälls ut vid klick. Kortets egen padding krymps så den hopfällda raden
   inte tar mer plats än den behöver. */
.owner-visits-card { margin-bottom: 22px; padding: 0; overflow: hidden; }
.ov-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: var(--transition);
}
.ov-toggle:hover { background: var(--neutral-50); }
.ov-toggle-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 400;
  color: var(--neutral-500);
  flex: 0 0 auto;
}
.ov-toggle-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ovs-next { font-weight: 600; color: var(--neutral-700); }
.ovs-more, .ovs-past {
  font-size: 11px;
  color: var(--neutral-600);
  background: var(--oat);
  border-radius: 999px;
  padding: 1px 8px;
  flex: 0 0 auto;
}
.ovs-none { color: var(--neutral-400); }
.ov-chevron {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--neutral-400);
  transition: transform .18s ease;
}
.ov-toggle.is-open .ov-chevron { transform: rotate(180deg); }

.owner-visits {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 18px 18px;
  border-top: 1px solid var(--neutral-200);
}
.ov-section { display: flex; flex-direction: column; gap: 6px; }
.ov-heading {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 400;
  color: var(--neutral-500);
  margin-bottom: 2px;
}
.ov-count {
  display: inline-block;
  background: var(--oat);
  color: var(--neutral-700);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  letter-spacing: 0;
  margin-left: 4px;
}
.ov-empty { font-size: 13px; color: var(--neutral-400); margin: 0; }
.ov-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
  cursor: pointer;
  transition: var(--transition);
}
.ov-row:hover { border-color: var(--neutral-400); background: var(--paper); }
.ov-when {
  display: flex;
  flex-direction: column;
  min-width: 118px;
  flex: 0 0 auto;
}
.ov-date { font-size: 12.5px; font-weight: 600; color: var(--neutral-700); }
.ov-time { font-size: 11px; color: var(--neutral-500); }
.ov-what { min-width: 0; }
.ov-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--neutral-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-sub {
  font-size: 12px;
  color: var(--neutral-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Utkast: samma streckade språk som i kalendern. */
.ov-row.is-draft { border-style: dashed; }
.ov-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--neutral-0);
  background: var(--neutral-400);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
}

.animals-section {}
.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.section-header h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--neutral-800);
  display: flex;
  align-items: center;
  gap: 8px;
}
.count-badge {
  background: var(--pink-100);
  color: var(--pink-600);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
  padding: 1px 8px;
  border-radius: 999px;
}
.section-header .btn { margin-left: auto; }

/* Animal Tabs */
.animal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
/* Djurflikar: rundade chips. Vald flik är fylld i temafärgen. */
.animal-tab {
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--neutral-300);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-700);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.animal-tab:hover { border-color: var(--pink-300); color: var(--pink-600); background: var(--pink-50); }
/* Vald djurflik: fylld i temafärgen (mörkare ton i ljust läge, ljusare i
   mörkt – --on-accent väljer textfärgen så att den alltid går att läsa). */
.animal-tab.active {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}
.animal-tab .tab-species { font-size: 15px; }
.animal-tab.deceased {
  color: var(--neutral-500);
  border-color: var(--neutral-300);
  background: transparent;
  font-style: italic;
}
.animal-tab.deceased:hover { border-color: var(--neutral-400); color: var(--neutral-600); }
.animal-tab.deceased.active {
  background: var(--neutral-500);
  border-color: var(--neutral-500);
  color: var(--neutral-0);
  font-style: italic;
}
/* Utadopterade djur: blå ton (samma palett som .adopted-badge) + 🏠 i
   fliktexten. Sorteras efter levande men före avlidna, se animalTabGroup(). */
.animal-tab.adopted {
  color: var(--info-blue-text);
  border-color: var(--info-blue-border);
  background: var(--info-blue-bg);
}
.animal-tab.adopted:hover { border-color: var(--info-blue-text); color: var(--info-blue-text); }
/* Måste stå efter .animal-tab.active (samma specificitet) för att vinna. */
.animal-tab.adopted.active {
  background: var(--info-blue-text);
  border-color: var(--info-blue-text);
  color: var(--info-blue-bg);
}
.animal-tab.tab-more {
  border-style: dashed;
  color: var(--neutral-500);
  font-style: italic;
  font-size: 12px;
}
.animal-tab.tab-more:hover { border-color: var(--neutral-500); color: var(--neutral-800); }

/* Deceased badge */
.deceased-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-600);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-300);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Adopted badge */
.adopted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--info-blue-text);
  background: var(--info-blue-bg);
  border: 1px solid var(--info-blue-border);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Animal Panel */
.animal-panel {
  background: var(--neutral-0);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  overflow: hidden;
}

.animal-inner {
  display: flex;
  flex-direction: column;
}

/* Animal info header */
.animal-info-header {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.animal-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.animal-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--neutral-800);
}
.animal-species-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pink-600);
  background: var(--pink-100);
  border-radius: 999px;
  padding: 3px 9px;
}
.animal-info-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.animal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 20px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--neutral-200);
}

/* ── Journal Area ─────────────────────────────────── */
.journal-area {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.journal-toolbar {
  padding: 14px 26px;
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  flex-wrap: wrap;
}
.journal-toolbar label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--neutral-500);
}
.journal-toolbar input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition);
  background: var(--paper);
  color: var(--neutral-800);
}
.journal-toolbar input[type="date"]:focus {
  border-color: var(--pink-300);
  box-shadow: var(--focus-ring);
}

/* Inline animal edit form */
.animal-info-edit-form {
  padding: 18px 26px 10px;
  border-bottom: 1px solid var(--neutral-200);
  background: var(--neutral-50);
}
.animal-info-edit-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin-bottom: 10px;
}
.animal-info-edit-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.animal-info-edit-form label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--neutral-500);
}
.animal-info-edit-form input,
.animal-info-edit-form select {
  padding: 8px 11px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--neutral-800);
  background: var(--paper);
  outline: none;
  transition: var(--transition);
}
.animal-info-edit-form input:focus,
.animal-info-edit-form select:focus {
  border-color: var(--pink-300);
  box-shadow: var(--focus-ring);
}
.animal-info-edit-form .form-actions {
  display: flex;
  gap: 8px;
  padding: 10px 0 6px;
}
.inline-error {
  font-size: 11px;
  color: var(--danger);
}
.inline-error.hidden { display: none; }

/* Journal feed: ett löpande dokument (skrivfält + historik i samma scroll) */
.journal-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 26px 28px;
  background: var(--neutral-0);
}
.journal-card {
  border: 1px solid var(--neutral-200);
  border-radius: 14px;
  background: var(--neutral-0);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.journal-card:focus-within {
  border-color: var(--pink-300);
  box-shadow: var(--focus-ring);
}
/* Dagens anteckning: vitt papper, huvudet i en svag ton av temafärgen och
   en accentprick vid datumet. */
.journal-card.is-today {
  border-color: var(--pink-200);
  background: var(--paper);
}
.journal-card.is-today:focus-within {
  border-color: var(--pink-300);
}
.journal-card.is-today .journal-card-head {
  background: var(--accent-wash);
  border-bottom-color: var(--pink-100);
  box-shadow: inset 0 3px 0 var(--accent);   /* accentkant överst på kortet */
  padding-top: 11px;
}
.journal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 9px 16px;
  border-bottom: 1px solid var(--neutral-200);
}
.journal-card-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--neutral-600);
}
.journal-card.is-today .journal-card-date { color: var(--pink-600); }
.journal-card.is-today .journal-card-date::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}
.journal-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.journal-card-text {
  display: block;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--neutral-800);
  background: transparent;
  font-family: inherit;
  overflow: hidden;          /* auto-växande höjd, ingen egen scroll */
  min-height: 64px;
}
.journal-card-text.is-today { min-height: 132px; }
.journal-card-text::placeholder { color: var(--neutral-400); }
/* Små åtgärdsknappar på kortet. Ikonerna är emoji; gråskala gör dem till
   lugna piktogram tills man pekar på knappen. */
.jdi-btn {
  background: transparent;
  border: 1px solid var(--neutral-300);
  border-radius: 999px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  color: var(--neutral-600);
  transition: var(--transition);
  line-height: 1.4;
  filter: grayscale(1);
}
.jdi-btn:hover { background: var(--oat-hover); color: var(--neutral-800); border-color: var(--neutral-400); filter: none; }
/* Textlösa knappar (ändra datum, radera) har SVG-ikoner i stället för emoji. */
.jdi-btn.jdi-icon { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; }
.jdi-ico { width: 13px; height: 13px; display: block; }
.jdi-btn.jdi-delete:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }
.jdi-btn.jdi-confirm:hover { background: var(--sign-green-bg); color: var(--sign-green-text); border-color: var(--sign-green-border); }
.jdi-btn.jdi-sign:hover { background: var(--sign-green-bg); color: var(--sign-green-text); border-color: var(--sign-green-border); }
.jdi-btn.jdi-meds:hover { background: var(--pink-50); color: var(--pink-600); border-color: var(--pink-200); }
.jdi-btn.jdi-clinical:hover { background: var(--clin-blue-bg); color: var(--clin-blue-text); border-color: var(--clin-blue-border); }

/* ── Historiken som tidslinje ───────────────────────
   Dagens kort (.is-today) behåller sitt utseende. Äldre anteckningar
   (.is-history) får datumet i en vänsterkolumn (serif + veckodag) och
   själva anteckningen som ett kort till höger, längs en lodrät linje.
   Kortramen ritas av tre syskon (textarea, extras, knapprad) eftersom
   app.js lägger .journal-extras sist i kortet (se _refreshCardExtras) –
   grid-area placerar dem rätt oavsett DOM-ordning. */
.journal-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.journal-divider::after { content: ''; flex: 1; height: 1px; background: var(--neutral-200); }

.journal-card.is-history {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-areas:
    "date text"
    "date extras"
    "date actions";
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;                 /* tidslinjen får inte klippas */
}
.journal-card.is-history:focus-within { box-shadow: none; }
/* Tidslinjen: fortsätter genom flödets gap (16px) ner till nästa kort */
.journal-card.is-history::before {
  content: '';
  position: absolute;
  left: 132px;
  top: 0;
  bottom: -16px;
  width: 1px;
  background: var(--neutral-200);
}
.journal-card.is-history:last-child::before { bottom: 0; }
/* En nod i temafärgen där varje anteckning sitter på tidslinjen. */
.journal-card.is-history::after {
  content: '';
  position: absolute;
  left: 128px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neutral-0);
  border: 2px solid var(--accent);
}
.journal-card.is-history .journal-card-head { display: contents; }
.journal-card.is-history .journal-card-date {
  grid-area: date;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 16px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--neutral-800);
}
.journal-card.is-history .jd-day { font-weight: 500; }
.journal-card.is-history .jd-wd {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.journal-card.is-history .jdi-date-input {
  grid-area: date;
  align-self: start;
  width: 118px;
  margin-right: 14px;
}
.journal-card.is-history > .journal-card-text,
.journal-card.is-history > .journal-extras,
.journal-card.is-history > .journal-card-head > .journal-card-actions {
  box-sizing: border-box;
  margin-left: 20px;
  width: calc(100% - 20px);
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
}
.journal-card.is-history > .journal-card-text {
  grid-area: text;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 14px 16px 10px;
}
.journal-card.is-history > .journal-extras {
  grid-area: extras;
  margin-top: 0;
  border-top: none;
  border-bottom: none;
  padding: 0 16px;
}
.journal-card.is-history > .journal-extras:not(:empty) { padding-bottom: 12px; }
.journal-card.is-history > .journal-card-head > .journal-card-actions {
  grid-area: actions;
  flex-wrap: wrap;
  border-top: 1px solid var(--neutral-200);
  border-radius: 0 0 14px 14px;
  background: var(--neutral-50);
  padding: 8px 12px;
}
.journal-card.is-history:focus-within > .journal-card-text,
.journal-card.is-history:focus-within > .journal-extras,
.journal-card.is-history:focus-within > .journal-card-head > .journal-card-actions {
  border-color: var(--pink-300);
}

/* "Extras" under en journalanteckning: kliniska fält, läkemedel, signatur */
.journal-extras { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.jx-clinical { font-size: 12.5px; color: var(--neutral-700); }
.jx-clin-row { padding: 1px 0; }
.jx-clin-label { font-weight: 600; color: var(--neutral-800); }
.jx-meds {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-left: 3px solid var(--pink-300);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
}
.jx-meds-head { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 400; color: var(--neutral-500); margin-bottom: 3px; }
.jx-med { font-size: 12.5px; color: var(--neutral-700); padding: 1px 0; }

/* Sparade kvitton och fakturor under journalkortet (invoices.js). Tom div
   tas bort helt, annars lägger flex-gapet till luft under varje kort. */
.jx-invoices { display: flex; flex-wrap: wrap; gap: 6px; }
.jx-invoices:empty { display: none; }
.jx-invoice {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  color: var(--neutral-700);
  cursor: pointer;
  transition: var(--transition);
}
.jx-invoice:hover { border-color: var(--neutral-400); color: var(--neutral-800); }
.jx-invoice.is-credited { color: var(--neutral-500); text-decoration: line-through; text-decoration-color: var(--neutral-400); }

/* Signatur-rad under en journalanteckning */
.journal-sign-info {
  font-size: 12px;
  font-weight: 500;
  color: var(--sign-green-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Läkemedelsmodal */
.med-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.med-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--neutral-50); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm); padding: 8px 12px;
}
.med-row-text { flex: 1; font-size: 13px; color: var(--neutral-700); }
.med-remove:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }
.med-empty { color: var(--neutral-400); font-size: 13px; margin-bottom: 12px; }
.med-food-note {
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px;
}
.med-form { border-top: 1px solid var(--neutral-200); padding-top: 12px; }
.med-form-title { font-size: 13px; font-weight: 700; color: var(--neutral-800); margin-bottom: 8px; }
.med-select {
  width: 100%; border: 1px solid var(--neutral-300); border-radius: var(--radius-sm);
  padding: 8px 9px; font-size: 13px; color: var(--neutral-800); background: var(--paper);
}
.med-other { display: none; width: 100%; margin-top: 4px; }

/* Livsmedelsproducerande-kryssruta i djurformuläret. Är en <label> inuti
   .animal-info-edit-form, så mono-versalerna för fältetiketter måste
   nollställas – det här är en mening, inte en etikett. */
.animal-food-toggle,
.animal-info-edit-form .animal-food-toggle {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-size: 13px; color: var(--neutral-700); cursor: pointer; padding: 4px 0;
}
.animal-food-toggle input { accent-color: var(--accent-fill); width: 15px; height: 15px; }

/* Liten meny för att välja signerande veterinär */
.sign-menu {
  position: absolute;
  z-index: 9999;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.sign-menu-head {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 400;
  color: var(--neutral-500);
  padding: 6px 8px 6px;
}
.sign-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 8px;
  font-size: 13px;
  color: var(--neutral-700);
  cursor: pointer;
  transition: var(--transition);
}
.sign-menu-item:hover { background: var(--neutral-100); }
.sign-menu-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sign-menu-title { color: var(--neutral-500); font-size: 11px; margin-left: auto; }
.jdi-date-input {
  width: 100%;
  border: 1px solid var(--pink-300);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: 12px;
  color: var(--neutral-800);
  background: var(--paper);
  outline: none;
  box-shadow: var(--focus-ring);
}

.journal-hint {
  padding: 10px 26px;
  font-size: 11.5px;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-200);
}
.journal-hint strong { color: var(--pink-600); font-weight: 600; }

/* ── Buttons ──────────────────────────────────────── */
/* Primär = temafärgen (Tassarkivets rosa som standard), som i Tassarkivet alltid
   varit. Formen – platt, 8 px hörn, ingen skugga – är den nya. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -.005em;
  transition: var(--transition);
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: var(--radius-sm); }
.btn-primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  border-color: var(--accent-fill);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
/* Ikoner i sekundärknappar är emoji – gråskala håller dem lugna tills man
   pekar på knappen. Texten är redan neutral, så den påverkas inte. */
.btn-ghost {
  background: transparent;
  color: var(--neutral-800);
  border-color: var(--neutral-300);
  filter: grayscale(1);
}
.btn-ghost:hover:not(:disabled) { background: var(--oat-hover); border-color: var(--neutral-400); filter: none; }
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.btn-danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ── Forms ────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--neutral-500);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 9px 12px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  outline: none;
  transition: var(--transition);
  color: var(--neutral-800);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--pink-300);
  box-shadow: var(--focus-ring);
}
.req { color: var(--pink-600); }

/* ── Modals ───────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  backdrop-filter: blur(2px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .15s ease;
}
.modal-overlay.hidden { display: none; }

.modal {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideUp .2s ease;
}
.modal-sm { max-width: 400px; }
.modal-lg { max-width: 760px; }
.modal-md { max-width: 560px; }

.modal-header {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-header h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--neutral-800);
}
.modal-close {
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  color: var(--neutral-500);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: var(--transition);
}
.modal-close:hover { background: var(--neutral-100); color: var(--neutral-800); }

.modal-body {
  padding: 22px 26px;
  overflow-y: auto;
  flex: 1;
}
.modal-body textarea {
  width: 100%;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--neutral-700);
  background: var(--neutral-50);
  resize: vertical;
  outline: none;
}
/* Skrivbara fält i modaler (t.ex. bokningens anteckning) är text, inte
   export – de ska se ut som övriga inmatningsfält, inte som kod. */
.modal-body textarea.appt-input {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  padding: 9px 11px;
  border-color: var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--neutral-800);
}
.modal-body textarea.appt-input:focus { border-color: var(--pink-300); box-shadow: var(--focus-ring); }
/* ── Anslutningsbanner ─────────────────────────────
   Visas högst upp mitt på skärmen när uppkopplingen tappats och det ligger
   text som ännu inte nått servern. Ska synas oavsett var i appen man är,
   därför fixed och över allt annat utom modalernas overlay. */
.conn-banner {
  position: fixed;
  /* Under toppbaren, inte över den: bannern får inte skymma osparat-räknaren
     eller "vem jobbar"-valet, som sitter i samma ögonhöjd. */
  top: calc(var(--topbar-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(560px, 92vw);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  animation: slideIn .2s ease;
}
.conn-banner--warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.conn-banner--ok   { border-color: var(--ok-border);   background: var(--ok-bg);   color: var(--ok-text); }
.conn-banner-icon { font-size: 15px; line-height: 1.5; flex-shrink: 0; }
.conn-banner-sub { margin-top: 4px; font-weight: 600; opacity: .85; }
.conn-banner-actions { margin-top: 8px; }
.conn-banner-btn {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.conn-banner-btn:hover { background: rgba(0, 0, 0, .08); }
@media (max-width: 700px) {
  .conn-banner { top: calc(var(--topbar-h) + 6px); font-size: 12.5px; padding: 10px 12px; }
}

/* ── Återställningsvyn (osparad text att ta ställning till) ──────── */
.rec-lead { margin: 0 0 16px; font-size: 13px; color: var(--neutral-600); line-height: 1.6; }
.rec-row {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.rec-row:last-child { margin-bottom: 0; }
.rec-head { font-size: 13px; color: var(--neutral-800); margin-bottom: 10px; }
.rec-when { color: var(--neutral-400); font-size: 12px; margin-left: 6px; }
.rec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* En kolumn när det inte finns någon serverlydelse att jämföra med
   (arkiverad, signerad, avvisad). */
.rec-cols--one { grid-template-columns: 1fr; }
.rec-why { font-size: 12.5px; color: var(--neutral-600); margin: -4px 0 10px; line-height: 1.5; }
.rec-label {
  font-family: var(--font-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 400; color: var(--neutral-500); margin-bottom: 5px;
}
.rec-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--neutral-700);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  max-height: 220px;
  overflow-y: auto;
}
.rec-text--mine { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.rec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 700px) {
  .rec-cols { grid-template-columns: 1fr; }
}

/* Varning i exportmodalen: osignerade anteckningar följer med i exporten. */
.export-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 14px;
  color: var(--warn-text);
  font-size: 13px;
  line-height: 1.5;
}
.export-warning.hidden { display: none !important; }
.export-warning-icon { font-size: 15px; line-height: 1.5; flex-shrink: 0; }
.export-warning-body { min-width: 0; }
.export-warning-dates {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
  word-break: break-word;
}

.modal-footer {
  padding: 16px 26px;
  border-top: 1px solid var(--neutral-200);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Kvitto / faktura (invoices.js) ───────────────── */
.inv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 16px; }
.inv-kind { display: inline-flex; border: 1px solid var(--neutral-300); border-radius: 999px; padding: 2px; }
.inv-kind-btn {
  border: none; background: transparent; border-radius: 999px;
  padding: 5px 16px; font-size: 13px; font-weight: 500; color: var(--neutral-600);
  cursor: pointer; transition: var(--transition);
}
.inv-kind-btn:hover { color: var(--neutral-800); }
.inv-kind-btn.is-active { background: var(--accent-fill); color: #fff; }
.inv-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-600); }
.inv-opt[hidden] { display: none; }
.inv-opt select, .inv-opt input {
  padding: 6px 10px; border: 1px solid var(--neutral-300); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--neutral-800); font: inherit; font-size: 13px; outline: none;
}
.inv-opt select:focus, .inv-opt input:focus { border-color: var(--pink-300); box-shadow: var(--focus-ring); }
.inv-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
  font-size: 13px; color: var(--neutral-800); margin-bottom: 14px;
}
.inv-label {
  display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--neutral-500); margin-bottom: 2px;
}
.inv-muted { color: var(--neutral-500); font-size: 12.5px; }
.inv-warn, .inv-note {
  font-size: 12.5px; border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px;
}
.inv-warn { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }
.inv-warn[hidden] { display: none; }
.inv-note { background: var(--neutral-50); color: var(--neutral-700); border: 1px solid var(--neutral-200); }
.inv-rows { display: flex; flex-direction: column; gap: 6px; }
.inv-row-head, .inv-row { display: grid; grid-template-columns: 1fr 150px 28px; gap: 8px; align-items: center; }
.inv-row-head span {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--neutral-500);
}
.inv-row-head span:nth-child(2) { text-align: right; }
.inv-row input {
  width: 100%; padding: 8px 11px; border: 1px solid var(--neutral-300); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--neutral-800); font: inherit; font-size: 14px; outline: none;
  transition: var(--transition);
}
.inv-row input:focus { border-color: var(--pink-300); box-shadow: var(--focus-ring); }
.inv-row .inv-price { text-align: right; font-variant-numeric: tabular-nums; }
.inv-row .inv-price.is-invalid { border-color: var(--danger); }
.inv-del {
  width: 28px; height: 28px; border: none; background: none; border-radius: 6px;
  color: var(--neutral-400); cursor: pointer; font-size: 13px;
}
.inv-del:hover { background: var(--neutral-100); color: var(--danger); }
.inv-sum { margin: 14px 36px 0 auto; max-width: 280px; font-size: 13px; }
.inv-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.inv-sum-row.is-total { color: var(--neutral-800); font-weight: 600; font-size: 15px; border-top: 1px solid var(--neutral-300); padding-top: 7px; }
.inv-view { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.inv-view td { padding: 6px 0; border-bottom: 1px solid var(--neutral-200); color: var(--neutral-800); }
.inv-view td.r { text-align: right; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.inv-view + .inv-sum { margin-right: 0; }
.inv-by { margin: 14px 0 0; }
.inv-hint { margin-right: auto; align-self: center; font-size: 11.5px; color: var(--neutral-400); }
@media (max-width: 600px) {
  .inv-meta { grid-template-columns: 1fr; }
  .inv-row-head, .inv-row { grid-template-columns: 1fr 110px 28px; }
  .inv-hint { display: none; }
}

/* Tassavtrycket som vattenstämpel i ägarlistan är borttaget – den nya
   designen håller dekoren till loggan. */
.sidebar { position: relative; }

/* ── Utilities ────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Animations ───────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(-8px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Scrollbars ───────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--neutral-400); }

/* ── Responsive tweak ─────────────────────────────── */
@media (max-width: 800px) {
  .sidebar { width: 200px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Inline editable owner/animal fields ─────────── */
.info-field-input {
  width: 100%;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 14px;
  color: var(--neutral-800);
  font-family: var(--font-body);
  transition: var(--transition);
  outline: none;
  margin-top: 2px;
  margin-left: -9px;
  width: calc(100% + 9px);
  box-sizing: border-box;
}
.info-field-input:hover {
  border-color: var(--neutral-300);
  background: var(--paper);
}
.info-field-input:focus {
  border-color: var(--pink-300);
  background: var(--paper);
  box-shadow: var(--focus-ring);
}
.info-field-input::placeholder {
  color: var(--neutral-400);
  font-style: italic;
}
/* Save status indicators */
.owner-save-status,
.save-status-text {
  font-size: 11px;
  color: var(--neutral-500);
  min-height: 1.2em;
}
.owner-save-status {
  grid-column: 1 / -1;
  padding-top: 2px;
}
.animal-form-status {
  padding: 4px 0 0;
}

/* Inline duplicate warning */
.owner-duplicate-warning {
  grid-column: 1 / -1;
  background: var(--dup-bg);
  border: 1px solid var(--dup-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--dup-text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.owner-duplicate-warning.hidden { display: none !important; }
.dup-goto-btn {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--dup-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--dup-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.dup-goto-btn:hover { background: var(--dup-border); }

/* Empty/unnamed owner in sidebar */
.oli-name--empty {
  color: var(--neutral-400);
  font-style: italic;
}

/* =====================================================================
   KALENDER & BOKNING
   ===================================================================== */

/* ── Vy-toggle i toppbaren ───────────────────────────── */
/* Som en navigeringsrad på en webbsida: text med en liten linjeikon, vald
   vy markerad med havre. Ikonen syns ensam på mobil. */
.view-toggle {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--neutral-600);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.view-btn:hover { color: var(--neutral-800); background: var(--oat-hover); }
/* Aktiv vy: temafärgad ikon och ett accentstreck i toppbarens underkant,
   som en flik – ingen fylld bakgrund. */
.view-btn { position: relative; }
.view-btn.active {
  background: transparent;
  color: var(--neutral-800);
}
.view-btn.active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  /* Knappen är vertikalt centrerad i toppbaren: flytta ned strecket lika
     långt som avståndet till toppbarens nederkant. */
  bottom: calc((100% - var(--topbar-h)) / 2);
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}
.view-btn.active:hover { background: var(--oat-hover); }
.vb-ico { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.view-btn.active .vb-ico { opacity: 1; color: var(--pink-600); }

/* ── Kalender-rot ────────────────────────────────────── */
.calendar-root {
  height: 100vh;
  padding-top: var(--topbar-h);
  display: flex;
  flex-direction: column;
  background: var(--neutral-100);
}

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px 12px;
  flex-wrap: wrap;
}
.cal-toolbar-left, .cal-toolbar-right { display: flex; align-items: center; gap: 8px; }
.cal-range {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--neutral-800);
  margin-left: 8px;
}
/* Segmentkontroll: vald knapp som ett papperskort i en nedsänkt ränna. */
.cal-viewswitch {
  display: flex;
  background: color-mix(in srgb, var(--neutral-200) 70%, transparent);
  border-radius: 10px;
  padding: 3px;
}
.seg-btn {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--neutral-600);
  padding: 5px 13px;
  border-radius: 7px;
  cursor: pointer;
  transition: var(--transition);
}
.seg-btn:hover { color: var(--neutral-800); }
.seg-btn.active { background: var(--paper); color: var(--pink-600); box-shadow: 0 1px 2px rgba(20,20,19,.08); }
.cal-weekend-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--neutral-600);
  cursor: pointer;
}

/* ── Personalfilter-chips ────────────────────────────── */
.cal-staff-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 28px 14px;
}
.cal-filter-hint { font-size: 12px; color: var(--neutral-500); }

/* ── Utkastrad (påbörjade, ej färdiga bokningar) ─────── */
.cal-drafts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 28px 10px;
}
.draft-bar-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--neutral-500); margin-right: 4px; }
.draft-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--neutral-400);
  background: var(--neutral-0);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
  cursor: pointer;
  transition: var(--transition);
}
.draft-chip:hover { border-color: var(--neutral-600); background: var(--paper); }
.draft-chip .draft-when { font-weight: 600; color: var(--neutral-500); }
.staff-chip {
  --chip: var(--pink-400);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--neutral-300);
  background: transparent;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
  transition: var(--transition);
}
.staff-dot {
  display: inline-block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--neutral-300);
  vertical-align: middle;
}
.staff-chip .staff-dot { background: var(--chip); }
.staff-chip.on { border-color: var(--chip); color: var(--neutral-800); background: var(--neutral-0); }
.staff-chip:hover { border-color: var(--neutral-500); }

/* ── Tidsrutnät (dag/vecka) ──────────────────────────── */
.cal-grid-wrap { flex: 1; overflow: auto; padding: 0 28px 28px; }
.cal-grid {
  display: grid;
  min-width: 640px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  /* OBS: ingen overflow:hidden här – det skulle bryta position:sticky för
     dag-rubrikerna (de ska stå kvar i toppen när man scrollar i rutnätet). */
}
.cal-gutter { border-right: 1px solid var(--neutral-200); }
/* Sticky topp: tidshörnet + dag-rubrikerna pinnas i toppen vid scroll. */
.cal-corner, .cal-day-head { position: sticky; top: 0; z-index: 20; background: var(--neutral-0); }
.cal-corner { height: 46px; border-bottom: 1px solid var(--neutral-200); border-top-left-radius: var(--radius-lg); }
.cal-day:last-child .cal-day-head { border-top-right-radius: var(--radius-lg); }
.cal-gutter-body { position: relative; }
.cal-hour-label {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--neutral-500);
}
.cal-day { border-right: 1px solid var(--neutral-200); }
.cal-day:last-child { border-right: none; }
.cal-day-head {
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--neutral-200);
  gap: 1px;
}
.cdh-wd { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--neutral-500); font-weight: 400; }
.cdh-date { font-size: 15px; color: var(--neutral-800); font-weight: 600; letter-spacing: -.01em; }
.cal-day-head.is-today { background: var(--pink-50); box-shadow: inset 0 -2px 0 var(--accent); }
.cal-day-head.is-today .cdh-date { color: var(--pink-600); }
.cal-day-head.is-today .cdh-wd { color: var(--pink-600); }
.cal-day-body { position: relative; cursor: copy; }
.cal-slotline {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--neutral-100);
}
.cal-event {
  position: absolute;
  left: 4px; right: 4px;
  border-left: 3px solid var(--pink-400);
  border-radius: 6px;
  padding: 3px 7px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;            /* låt pointer-drag styra, inte sid-scroll */
  user-select: none;             /* markera inte texten när man drar en ruta */
  -webkit-user-select: none;
  transition: var(--transition);
}
.cal-event:hover { filter: brightness(.97); box-shadow: var(--shadow-md); z-index: 5; }
/* Utkast: streckad ram och blek yta – syns tydligt som "ej klar", och till
   skillnad från en riktig bokning håller den ingen tid reserverad. */
.cal-event.is-draft {
  border: 1px dashed var(--neutral-400);
  border-left-width: 3px;
  border-left-style: solid;
  box-shadow: none;
  opacity: .9;
}
.cal-event.is-draft:hover { opacity: 1; }
.cev-draft-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--neutral-0);
  background: var(--neutral-400);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 3px;
}
.cev-time { font-size: 10px; font-weight: 600; color: var(--neutral-600); }
.cev-title { font-size: 12px; font-weight: 600; color: var(--neutral-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cev-owner { font-size: 11px; font-weight: 500; color: var(--neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cev-sub { font-size: 11px; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Personal i bokningsrutan: en rad per behandlare (lodrätt) så alla syns. */
.cev-staff-list { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.cev-staff { display: flex; align-items: center; font-size: 11px; color: var(--neutral-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cev-staff .staff-dot { width: 7px; height: 7px; margin-right: 4px; flex: 0 0 auto; }

/* Notisband (praktikant m.m.) under dagrubrikerna i dag/veckovy. */
.cal-gutter-notices { border-bottom: 1px solid var(--neutral-200); background: var(--neutral-0); position: sticky; top: 46px; z-index: 19; }
.cal-day-notices { display: flex; flex-direction: column; gap: 2px; padding: 2px 3px; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-0); overflow: hidden; position: sticky; top: 46px; z-index: 19; }
.cal-day-notice {
  font-size: 10px; font-weight: 600; line-height: 15px; height: 15px;
  border-radius: 4px; border-left: 3px solid; padding: 0 5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--neutral-800);
}
.cal-day-notice:hover { filter: brightness(.95); }

/* Drag & drop + storleksändring av bokningar */
.cal-event.cev-dragging {
  transition: none;              /* följa pekaren direkt, ingen eftersläpning */
  z-index: 12;
  opacity: .92;
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
}
.cev-grip {
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 2;
}
.cev-grip-top { top: 0; }
.cev-grip-bot { bottom: 0; }
/* Liten greppindikator som syns vid hover */
.cal-event:hover .cev-grip::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 24px; height: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,.18);
}
.cev-grip-top::after { top: 1px; }
.cev-grip-bot::after { bottom: 1px; }

/* ── Månadsvy ────────────────────────────────────────── */
.cal-month { background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); overflow: hidden; }
.cal-mrow-head, .cal-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-mhead { padding: 10px 8px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--neutral-500); border-bottom: 1px solid var(--neutral-200); }
.cal-mcell {
  min-height: 96px;
  border-right: 1px solid var(--neutral-100);
  border-bottom: 1px solid var(--neutral-100);
  padding: 5px 6px;
  cursor: pointer;
  transition: var(--transition);
}
.cal-mcell:hover { background: var(--neutral-50); }
.cal-mcell.out { background: var(--neutral-50); }
.cal-mcell.out .cm-date { color: var(--neutral-300); }
.cal-mcell.is-today .cm-date { background: var(--accent-fill); color: var(--on-accent); border-radius: 50%; }
.cm-date { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; font-size: 12px; font-weight: 600; color: var(--neutral-700); margin-bottom: 2px; }
.cm-item { font-size: 11px; color: var(--neutral-700); border-left: 3px solid var(--chip, #999); padding: 1px 5px; margin-bottom: 2px; border-radius: 3px; background: var(--neutral-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-item .cm-time { font-weight: 600; color: var(--neutral-500); }
.cm-item.is-draft { background: var(--neutral-0); border: 1px dashed var(--neutral-300); border-left: 3px solid var(--chip, #999); color: var(--neutral-500); font-style: italic; }
.cm-more { font-size: 10px; color: var(--neutral-400); padding-left: 5px; }

/* ── Bokningsmodal ───────────────────────────────────── */
.appt-draft-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--neutral-600);
  background: var(--neutral-50);
  border: 1px dashed var(--neutral-400);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  margin-bottom: 16px;
}
.appt-section { margin-bottom: 16px; }
.appt-label { display: block; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 400; color: var(--neutral-500); margin-bottom: 7px; }
.appt-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--neutral-800);
  background: var(--paper);
  transition: var(--transition);
}
.appt-input:focus { outline: none; border-color: var(--pink-300); box-shadow: var(--focus-ring); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.appt-hint { font-size: 12px; color: var(--neutral-500); margin-top: 6px; }
.linklike { background: none; border: none; color: var(--pink-600); cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; padding: 0; }

.appt-search-wrap { position: relative; }
.appt-search-results {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 280px; overflow-y: auto;
  z-index: 10;
}
.appt-result { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--neutral-100); font-size: 13px; }
.appt-result:last-child { border-bottom: none; }
.appt-result:hover { background: var(--neutral-100); }
.appt-result.empty { color: var(--neutral-500); cursor: default; }

.appt-owner-selected {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.aos-name { font-size: 15px; font-weight: 600; color: var(--neutral-800); }
.aos-num { font-family: var(--font-mono); font-size: 11px; color: var(--neutral-500); font-weight: 400; }
.aos-meta { font-size: 12px; color: var(--neutral-500); }
.appt-newowner { margin-top: 12px; padding: 14px; background: var(--neutral-50); border: 1px dashed var(--neutral-300); border-radius: var(--radius-md); }

/* Intern tid-toggle i bokningsmodalen */
.appt-internal-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--neutral-700); margin-bottom: 12px; cursor: pointer; }

/* Notismodal: dagväljare (kryssa ur frånvarodagar) */
.rem-days { display: flex; flex-wrap: wrap; gap: 6px; }
.rem-day { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 10px; border: 1px solid var(--neutral-300); border-radius: 999px; cursor: pointer; user-select: none; }
.rem-day.on { border-color: var(--pink-400); background: var(--pink-50); color: var(--neutral-800); }

.appt-treats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.appt-treat {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--neutral-300);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 13px;
  background: var(--paper);
}
.appt-treat:hover { border-color: var(--neutral-500); }
.appt-treat.on { border-color: var(--pink-300); background: var(--pink-50); box-shadow: inset 0 0 0 1px var(--pink-300); }
.appt-treat-name { flex: 1; color: var(--neutral-800); }
.appt-treat-dur { font-family: var(--font-mono); font-size: 10.5px; color: var(--neutral-500); font-weight: 400; }

.appt-conflict {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

/* ── Personal- & behandlings-admin ───────────────────── */
.staff-rows, .treat-rows { display: flex; flex-direction: column; gap: 8px; }
.staff-row {
  display: grid;
  grid-template-columns: 36px 1fr 140px 1.4fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
}
.sr-color, .tr-color { width: 34px; height: 34px; border: 1px solid var(--neutral-300); border-radius: var(--radius-sm); padding: 0; background: none; cursor: pointer; }
.sr-email { font-size: 12px; color: var(--neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-active-wrap, .sr-admin-wrap { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--neutral-600); white-space: nowrap; }
.treat-row {
  display: grid;
  grid-template-columns: 36px 1fr 90px 90px 50px 44px;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
}
.treat-row.treat-head { border: none; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--neutral-500); font-weight: 400; padding-bottom: 0; }
.treat-row.inactive { opacity: .5; }
.treat-row.room-row { grid-template-columns: 36px 1fr 90px 70px 50px 44px; }

/* ── Inställningar-meny (dropdown i toppbaren) ───────── */
.settings-menu { position: relative; }
.settings-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--neutral-700);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.settings-item:hover { background: var(--neutral-100); color: var(--neutral-800); }
.settings-sep { height: 1px; background: var(--neutral-200); margin: 4px 6px; }
.settings-version { padding: 6px 12px 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--neutral-500); user-select: text; }

/* ── Zoom-knappar ───────────────────────────────────── */
.cal-zoom { display: inline-flex; align-items: center; gap: 2px; }
/* Etikett, inte knapp – visar att ＋/－ styr zoomen och inget annat. */
.cal-zoom-ico { font-size: 13px; line-height: 1; margin-right: 4px; opacity: 0.6; filter: grayscale(1); }
.cal-zoom .btn { min-width: 32px; font-weight: 600; }

/* ── Sök i sidopanelen ──────────────────────────────── */
.sidebar-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 10px 18px;
}
.sidebar-search .search-wrap { position: relative; }
.sidebar-search .search-wrap input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--neutral-300);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--neutral-800);
  background: var(--paper);
  transition: var(--transition);
}
.sidebar-search .search-wrap input::placeholder { color: var(--neutral-400); }
.sidebar-search .search-wrap input:focus {
  outline: none;
  border-color: var(--pink-300);
  box-shadow: var(--focus-ring);
}
/* Förstoringsglaset är en emoji – gråskala och lägre opacitet gör det till
   en diskret ikon i fältet. */
.sidebar-search .search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
  filter: grayscale(1);
  opacity: .55;
}
.sidebar-search .search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 50;
}

/* ═══════════════════════════════════════════════════════
   Inställningar-vy (#settingsRoot) – egen vy som växlas i
   toppbaren, precis som kalendern. Vänsterflikar + innehåll.
   ═══════════════════════════════════════════════════════ */
.settings-root {
  height: 100vh;
  padding-top: var(--topbar-h);
  display: flex;
  background: var(--neutral-100);
}
.settings-nav {
  width: 244px;
  flex-shrink: 0;
  background: var(--neutral-100);
  border-right: 1px solid var(--neutral-200);
  padding: 22px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--neutral-800);
  padding: 2px 12px 14px;
}
.settings-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--neutral-700);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.settings-tab:hover { background: var(--oat-hover); color: var(--neutral-800); }
.settings-tab.active {
  background: var(--accent-soft);
  color: var(--neutral-800);
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--accent);
}
/* Flikikonerna är emoji; i gråskala blir de enhetliga piktogram. */
.settings-tab .st-ico { font-size: 14px; width: 18px; text-align: center; filter: grayscale(1); opacity: .7; }
.settings-tab.active .st-ico { opacity: 1; filter: none; }

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 36px 40px 72px;
}
.settings-panel { max-width: 740px; margin: 0 auto; }
/* Ändringsloggen har sex kolumner och behöver mer plats än standardpanelen. */
.settings-panel[data-panel="audit"] { max-width: 1400px; }
.settings-panel.hidden { display: none; }
.settings-panel h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--neutral-800);
  margin-bottom: 6px;
}
.settings-panel .settings-lead {
  font-size: 14px;
  color: var(--neutral-500);
  margin-bottom: 26px;
}
.settings-section {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.settings-section h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--neutral-800);
  margin-bottom: 8px;
}
.settings-section .sub { font-size: 12.5px; line-height: 1.55; color: var(--neutral-500); margin-bottom: 16px; }

/* Osparad och kastad text på den här datorn (Data & säkerhet) */
.local-text-list { display: flex; flex-direction: column; gap: 10px; }
.local-text-row {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.local-text-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: 12.5px; color: var(--neutral-800); margin-bottom: 6px;
}
.local-text-when { color: var(--neutral-500); font-size: 12px; }
.local-text-copy { margin-left: auto; }
.local-text-kind {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--oat); color: var(--neutral-700);
}
.local-text-kind--pending,
.local-text-kind--quarantined { background: var(--warn-bg); color: var(--warn-text); }
.local-text-body {
  white-space: pre-wrap; word-break: break-word;
  font-size: 12.5px; line-height: 1.6; color: var(--neutral-700);
  max-height: 160px; overflow-y: auto;
}

.settings-field { margin-bottom: 14px; }
.settings-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}
.settings-field input[type="text"],
.settings-field input[type="tel"],
.settings-field input[type="password"],
.settings-field input[type="date"],
.settings-field input[type="email"],
.settings-field input[type="number"],
.settings-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--neutral-800);
  font-size: 14px;
  outline: none;
  transition: var(--transition);
}
.settings-field input:focus, .settings-field select:focus {
  border-color: var(--pink-300);
  box-shadow: var(--focus-ring);
}
.settings-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.settings-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--neutral-800); cursor: pointer; }
@media (max-width: 560px) { .settings-grid-2 { grid-template-columns: 1fr; } }

/* Läsvärden i abonnemangsfliken — samma plats i rutnätet som ett input-fält,
   men utan ram, eftersom de inte går att ändra här. */
.sub-value {
  font-size: 14px; font-weight: 600; color: var(--neutral-800);
  padding: 7px 0; min-height: 34px;
}
.sub-value.sub-ok   { color: var(--ok-text); }
.sub-value.sub-warn { color: var(--warn-text); }
.sub-value.sub-bad  { color: var(--danger); }

/* Tema-väljare (återanvänder .seg-btn) */
.settings-seg { display: inline-flex; background: color-mix(in srgb, var(--neutral-200) 70%, transparent); border-radius: 10px; padding: 3px; }

/* Temafärg-väljare: en rad rundade färgprickar med namn under. */
/* 16 färger: ett jämnt rutnät i stället för en rad som bryts godtyckligt. */
.accent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 16px 10px;
  max-width: 640px;
}
.accent-swatch {
  border: none; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 11.5px; color: var(--neutral-600);
  transition: var(--transition);
}
.accent-swatch .dot {
  width: 34px; height: 34px; border-radius: 50%;
  /* Prickens färg kommer från den paletten, inte den aktiva – därför inline. */
  box-shadow: 0 0 0 2px var(--neutral-0), 0 0 0 3px var(--neutral-200);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; line-height: 1;
  transition: var(--transition);
}
.accent-swatch:hover .dot { transform: scale(1.06); }
.accent-swatch.active { color: var(--neutral-800); font-weight: 600; }
/* Ringen måste vara neutral, inte currentColor – .dot sätter själv color:#fff
   för bocken, så currentColor hade gett en osynlig vit ring. */
.accent-swatch.active .dot { box-shadow: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--neutral-800); }

/* Logo-uppladdning */
.logo-uploader { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.logo-preview {
  width: 86px; height: 86px; flex-shrink: 0;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--neutral-100) center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--neutral-500); font-size: 11px; text-align: center; padding: 6px;
}
.logo-preview .paw-mark { width: 56%; height: 56%; }
.logo-actions { display: flex; flex-direction: column; gap: 8px; }

/* Funktioner-fliken: en rad per funktion – text till vänster, reglage till
   höger, hårlinje emellan. */
.feature-list { display: flex; flex-direction: column; }
.feature-row {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--neutral-200);
}
.feature-row:first-child { border-top: none; padding-top: 4px; }
.feature-row:last-child { padding-bottom: 0; }
.feature-text { flex: 1; min-width: 0; }
.feature-label {
  display: block; margin-bottom: 3px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--neutral-800);
}
.feature-desc { font-size: 12.5px; line-height: 1.55; color: var(--neutral-500); }
/* Reglaget är en vanlig kryssruta som ligger osynlig ovanpå ett ritat spår,
   så tangentbord, skärmläsare och klick på etiketten fungerar som vanligt. */
.feature-switch { position: relative; flex-shrink: 0; width: 38px; height: 22px; margin-top: 1px; }
.feature-switch input {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.feature-switch input:disabled { cursor: not-allowed; }
.feature-switch-track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--neutral-300);
  transition: var(--transition);
}
.feature-switch-track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,20,19,.25);
  transition: transform .15s ease;
}
.feature-switch input:checked + .feature-switch-track { background: var(--accent-fill); }
.feature-switch input:checked + .feature-switch-track::after { transform: translateX(16px); }
.feature-switch input:focus-visible + .feature-switch-track { box-shadow: var(--focus-ring); }
.feature-switch input:disabled + .feature-switch-track { opacity: .5; }
.feature-notice {
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.5;
}
.feature-notice[hidden] { display: none; }

/* ── Support (support.js) ─────────────────────────── */
/* Prick för nytt svar – på Inställningar i toppen och på fliken. */
.nav-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-fill); margin-left: 6px; vertical-align: 1px; flex-shrink: 0;
}
.nav-dot[hidden] { display: none; }
.settings-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--neutral-300); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--neutral-800); font: inherit; font-size: 14px; line-height: 1.5;
  resize: vertical; outline: none; transition: var(--transition);
}
.settings-field textarea:focus { border-color: var(--pink-300); box-shadow: var(--focus-ring); }
.sup-reply-choice { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.sup-reply-title {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--neutral-500); margin-bottom: 2px;
}
.sup-muted { color: var(--neutral-500); font-size: 12.5px; }
.sup-list { display: flex; flex-direction: column; gap: 12px; }
.sup-ticket { border: 1px solid var(--neutral-200); border-radius: var(--radius-md); padding: 12px 14px; background: var(--neutral-0); }
.sup-ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.sup-cat { font-weight: 600; font-size: 13px; color: var(--neutral-800); }
.sup-status {
  margin-left: auto; font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--neutral-100); color: var(--neutral-600);
}
.sup-status.is-answered { background: var(--sign-green-bg); color: var(--sign-green-text); }
.sup-msg { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: var(--neutral-700); overflow-wrap: anywhere; }
.sup-answer {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--neutral-50); border-left: 3px solid var(--neutral-300);
}
.sup-answer.is-new { border-left-color: var(--accent-fill); }
.sup-answer-head { font-size: 12px; color: var(--neutral-500); margin-bottom: 4px; }
.sup-new {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--accent-fill); color: #fff; font-size: 10.5px; font-weight: 600;
}

/* Avslagna funktioner. applyFeatures() i app.js skriver dem i
   <html data-features-off>, och allt som hör till en funktion bär
   data-feature. En regel per funktion – CSS kan inte jämföra två attribut
   med varandra. !important: flera av elementen (besökskortet, "Du:"-knappen)
   har egna display-regler per skärmbredd. */
html[data-features-off~="assessment"]    [data-feature~="assessment"],
html[data-features-off~="medications"]   [data-feature~="medications"],
html[data-features-off~="foodProducing"] [data-feature~="foodProducing"],
html[data-features-off~="jbvReport"]     [data-feature~="jbvReport"],
html[data-features-off~="adopted"]       [data-feature~="adopted"],
html[data-features-off~="calendar"]      [data-feature~="calendar"],
html[data-features-off~="ownerSsn"]      [data-feature~="ownerSsn"],
html[data-features-off~="activeUser"]    [data-feature~="activeUser"],
html[data-features-off~="invoicing"]     [data-feature~="invoicing"] { display: none !important; }

/* "Du:"-indikator i toppbaren */
.active-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--neutral-300);
  background: transparent;
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  font-size: 12.5px;
  color: var(--neutral-600);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.active-user-btn:hover { border-color: var(--neutral-500); background: var(--oat-hover); color: var(--neutral-800); }

/* Osparat-räknaren i toppbaren. Finns inte i DOM-flödet när allt är sparat. */
.unsaved-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.unsaved-badge[hidden] { display: none; }
.unsaved-badge:hover { filter: brightness(.97); }
.active-user-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--neutral-300); }
.active-user-btn .au-name { font-weight: 500; color: var(--neutral-800); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* Ändringslogg-tabell */
.audit-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: flex-end; }
.audit-filters .settings-field { margin-bottom: 0; min-width: 150px; max-width: 240px; flex: 1; }
.audit-table-wrap { overflow-x: auto; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); }
.audit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.audit-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--neutral-500); font-weight: 400; padding: 11px 12px;
  background: var(--neutral-50); border-bottom: 1px solid var(--neutral-200); position: sticky; top: 0;
}
.audit-table td { padding: 10px 12px; border-bottom: 1px solid var(--neutral-200); color: var(--neutral-700); vertical-align: top; }
.audit-table tr:last-child td { border-bottom: none; }
.audit-table tr:hover td { background: var(--neutral-50); }
.audit-time { white-space: nowrap; color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.audit-action { font-weight: 600; white-space: nowrap; }
.audit-detail { color: var(--neutral-500); max-width: 560px; }
/* Tre rader, sedan "Visa mer" (settings.js: addAuditShowMore). pre-line så
   att radbrytningarna i en sparad journaltext syns när den fälls ut. */
.audit-detail-text {
  white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.audit-detail-text.open { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.audit-detail-toggle { margin-top: 4px; }
.audit-empty { padding: 28px; text-align: center; color: var(--neutral-500); font-size: 13px; }
.audit-more { margin-top: 14px; text-align: center; }

/* Arkivfliken återanvänder .audit-table; bara knappcellen behöver egen regel. */
.arc-actions { display: flex; gap: 6px; white-space: nowrap; }

/* Admin-låst platshållare (innan PIN angetts) */
.settings-locked { text-align: center; padding: 44px 20px; color: var(--neutral-500); }
.settings-locked .lock-ico { font-size: 30px; margin-bottom: 10px; filter: grayscale(1); opacity: .7; }

/* PIN-modal (återanvänder .modal-overlay/.modal) */
.pin-input {
  width: 100%; text-align: center; letter-spacing: 8px; font-size: 22px;
  padding: 12px; border: 1px solid var(--neutral-300); border-radius: var(--radius-md);
  background: var(--paper); color: var(--neutral-800); outline: none;
}
.pin-input:focus { border-color: var(--pink-300); box-shadow: var(--focus-ring); }
.pin-error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; text-align: center; }

/* ═══════════════════════════════════════════════════════
   MOBILANPASSNING
   Nya element (hamburgare + drawer-backdrop) är dolda på desktop och
   visas ENDAST i mobil-blocket längre ner. Ingenting utanför
   @media (max-width:768px) påverkar desktop-vyn.
   ═══════════════════════════════════════════════════════ */
.topbar-hamburger {
  display: none;               /* visas bara på mobil, i journalvyn */
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--neutral-600);
  font-size: 22px;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.topbar-hamburger:hover { background: var(--oat-hover); color: var(--neutral-800); }
.sidebar-backdrop { display: none; }   /* aktiveras i mobil-blocket */

@media (max-width: 768px) {
  /* ── Höjd: dvh är stabilare än vh på mobil (adressfält) ── */
  .app-shell, .calendar-root, .settings-root { height: 100dvh; }

  /* ── Inputs: 16px hindrar iOS från att zooma in vid fokus ── */
  input, select, textarea { font-size: 16px; }

  /* ── Toppbar: kompakt ── */
  .topbar { padding: 0 10px; gap: 8px; }
  body[data-view="journal"] .topbar-hamburger { display: inline-flex; }
  .brand-name, .brand-sub, .brand-wordmark { display: none; }   /* behåll loggan (.paw-icon) */
  .topbar-actions { gap: 6px; }
  .active-user-btn { padding: 6px; }
  .active-user-btn .au-label, .active-user-btn .au-name { display: none; }  /* bara pricken */
  .vb-label { display: none; }                          /* vy-knappar → bara ikon */
  .view-btn { padding: 8px 10px; min-height: 40px; }
  #userMenuEmail { display: none; }

  /* ── Ägar-sidopanel → off-canvas drawer ── */
  .sidebar-rail,
  .app-shell.sidebar-collapsed .sidebar-rail { display: none !important; }
  .app-shell.sidebar-collapsed .sidebar { display: flex; }  /* håll kvar för slide-animation */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0; bottom: 0;
    width: min(86vw, 320px);
    z-index: 250;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--neutral-200);
  }
  .app-shell:not(.sidebar-collapsed) .sidebar { transform: translateX(0); }
  .main-content { width: 100%; padding: 16px; }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: var(--overlay-scrim);
    z-index: 240;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .app-shell:not(.sidebar-collapsed) .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  /* ── Inställningsvyn: flikar blir en scrollbar rad ovanför innehållet ── */
  .settings-root { flex-direction: column; }
  .settings-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--neutral-200);
    padding: 8px;
    gap: 6px;
  }
  .settings-nav-title { display: none; }
  .settings-tab { white-space: nowrap; flex-shrink: 0; min-height: 40px; }
  .settings-content { padding: 18px 16px 48px; }

  /* ── Kalender: touch-scroll + kompaktare ── */
  .cal-event { touch-action: auto; }        /* tillåt vertikal scroll (drag av på touch) */
  .cal-grid { min-width: 0; }               /* dagvyns enda kolumn ska fylla skärmen, inte 640px */
  .cal-grid-wrap { padding: 0 8px 16px; }
  .cal-toolbar { padding: 8px 10px; gap: 6px; }
  .cal-range { font-size: 15px; }
  /* Låt toolbar-grupperna radbryta så inget (t.ex. Boka) hamnar utanför skärmen. */
  .cal-toolbar-left, .cal-toolbar-right { flex-wrap: wrap; }
  .cal-weekend-toggle { display: none; }    /* meningslös i dagvyn (mobilens standard) */
  .cal-drafts { padding: 0 10px 8px; }

  /* ── Modaler: helskärms-ark ── */
  .modal-overlay { padding: 0; }
  .modal, .modal-sm, .modal-md, .modal-lg {
    width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .modal-body { padding: 16px; }

  /* ── Djurets rubrik + åtgärdsknappar: stapla & radbryt (annars klipps knapparna) ── */
  .animal-info-header { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
  .animal-info-actions { flex-wrap: wrap; justify-content: flex-start; }
  .journal-feed { padding: 16px; }
  .journal-toolbar, .animal-info-edit-form, .journal-hint { padding-left: 16px; padding-right: 16px; }
  .animal-warning-area { padding: 12px 16px 0; }
  .panel-title { font-size: 26px; }

  /* ── Formulär- & admin-rader: stapla så inget spiller över ── */
  .form-row,
  .animal-info-edit-form .form-row,
  .form-row-3 { grid-template-columns: 1fr; }
  .staff-row, .treat-row, .room-row { grid-template-columns: 1fr 1fr; }
  .treat-row.treat-head { display: none; }   /* kolumnrubriker matchar inte 2-kol-stacken */

  /* ── Touch-targets ── */
  .btn, .btn-sm { min-height: 40px; }
  .seg-btn { min-height: 38px; }
  .sort-btn { min-height: 36px; padding: 8px 12px; }
  .jdi-btn { min-height: 34px; padding: 6px 10px; font-size: 12px; }

  /* ── Historiken: datum ovanför kortet, ingen tidslinje ── */
  .journal-card.is-history {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "date" "text" "extras" "actions";
  }
  .journal-card.is-history::before,
  .journal-card.is-history::after { display: none; }
  .journal-card.is-history .journal-card-date {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 0 0 6px;
    font-size: 15px;
  }
  .journal-card.is-history .jdi-date-input { width: 160px; margin: 0 0 6px; }
  .journal-card.is-history > .journal-card-text,
  .journal-card.is-history > .journal-extras,
  .journal-card.is-history > .journal-card-head > .journal-card-actions { margin-left: 0; width: 100%; }
  .modal-close { min-width: 40px; min-height: 40px; font-size: 20px; }
  .staff-chip, .rem-day, .draft-chip { min-height: 32px; }
}

/* Finjustering för riktigt smala skärmar */
@media (max-width: 430px) {
  .settings-content { padding: 16px 12px 40px; }
  .main-content { padding: 12px; }
  .animal-info-grid { grid-template-columns: 1fr; }
  /* Besöksraden staplar datum över beskrivning när bredden inte räcker. */
  .ov-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ov-when { flex-direction: row; gap: 8px; min-width: 0; }
  .ov-what { width: 100%; }
  /* Knappraden blir två rader: etiketten över sammanfattningen. */
  .ov-toggle { flex-wrap: wrap; gap: 4px 10px; padding: 11px 14px; }
  .ov-toggle-summary { flex-basis: 100%; order: 3; }
  .owner-visits { padding: 4px 14px 14px; }
}

/* ── Journalintegritet (iteration 14) ───────────────────────────────
   En signerad anteckning är låst i databasen av trg_journal_guard. UI:t
   speglar det i stället för att låta någon skriva i en ruta vars innehåll
   ändå kommer avvisas. Låsningen ska synas men inte se ut som ett fel:
   en signerad journal är det normala sluttillståndet, inte ett problem. */
.journal-card-text.is-locked {
  background: var(--neutral-50, #faf9f9);
  color: var(--neutral-700, #544d51);
  cursor: default;
  border-style: dashed;
}
.journal-card-text.is-locked:focus { outline: none; box-shadow: none; }

.jdi-btn.jdi-correct:hover {
  background: var(--clin-blue-bg); color: var(--clin-blue-text); border-color: var(--clin-blue-border);
}

/* "på uppdrag av" i signaturraden – den uppgift föreskriften kräver när en
   kollega journalför åt en annan. Dämpad, men inte gömd. */
.journal-sign-info .jsi-behalf { color: var(--neutral-500, #7a6e73); font-style: italic; }

/* ── Tidigare lydelser ──────────────────────────────────────────────
   Den digitala överstrykningen. Hopfälld som standard: historik är
   sällsynt och ska inte trängas med den gällande texten. */
.jx-history-btn {
  display: inline-block; margin-top: 8px;
  background: none; border: 1px dashed var(--neutral-200, #e8e4e6);
  border-radius: 8px; padding: 4px 10px;
  font: inherit; font-size: 12px; color: var(--neutral-500, #7a6e73);
  cursor: pointer;
}
.jx-history-btn:hover { border-color: var(--neutral-500); color: var(--neutral-800); }
.jx-history { margin-top: 8px; display: grid; gap: 8px; }
.jx-history-empty { font-size: 12px; color: var(--neutral-400, #a99fa3); padding: 4px 2px; }

.jx-version {
  border-left: 3px solid var(--neutral-200, #e8e4e6);
  padding: 8px 0 8px 12px;
}
.jxv-head {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font-size: 11.5px; margin-bottom: 5px;
}
.jxv-no { font-weight: 600; color: var(--neutral-700, #544d51); }
.jxv-reason {
  background: var(--oat); color: var(--neutral-700);
  border-radius: 999px; padding: 1px 8px;
}
.jxv-when { color: var(--neutral-400, #a99fa3); }
/* Genomstruken text är den analoga motsvarigheten, men den blir oläslig i
   långa stycken. Dämpad färg och kursiv säger "detta gäller inte längre"
   utan att göra det svårt att faktiskt läsa – vilket är hela poängen. */
.jxv-text {
  white-space: pre-wrap; font-size: 13px; line-height: 1.6;
  color: var(--neutral-500, #7a6e73); font-style: italic;
}
.jxv-meds, .jxv-sign { font-size: 11.5px; color: var(--neutral-500, #7a6e73); margin-top: 4px; }

/* Undertiteln "På uppdrag av" i signeringsmenyn. */
.sign-menu-head.sign-menu-sub {
  margin-top: 4px; border-top: 1px solid var(--neutral-100, #f2efef); padding-top: 8px;
}

/* ═══════════════════════════════════════════════════════
   HELSKÄRMSVYER: inloggning, spärrar, uppstart
   Tidigare inline-stilar i Journal.html och app.js, nu klasser så att de
   följer temat (ljust/mörkt) och resten av designspråket.
   ═══════════════════════════════════════════════════════ */

/* ── Inloggning + tvåfaktor (#loginModal, #mfaEnrollModal) ──
   Egen klass, INTE .modal-overlay: den globala Esc-/bakgrundsklicks-
   hanteraren i app.js lägger .hidden på varje .modal-overlay, och en
   inloggning eller ett obligatoriskt tvåfaktorssteg ska inte gå att
   klicka bort. Synligheten styrs av inline display (none/flex) från JS. */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 99997;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: var(--neutral-100);
}
#mfaEnrollModal.auth-screen { z-index: 99998; }
.auth-wrap {
  width: 100%;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: slideUp .25s ease;
}
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand img { height: 30px; width: auto; }
.auth-brand .paw-mark { width: 32px; height: 32px; }
.auth-brand .brand-wordmark { font-size: 23px; }
.auth-card {
  width: 100%;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 20px;
  padding: 34px 34px 28px;
  box-shadow: var(--shadow-md);
}
.auth-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--neutral-800);
  margin: 0;
}
.auth-sub {
  margin: 8px 0 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--neutral-500);
}
.auth-steps {
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--neutral-600);
}
.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 7px;
}
.auth-field input {
  width: 100%;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--neutral-800);
  background: var(--paper);
  border: 1px solid var(--neutral-300);
  border-radius: 10px;
  outline: none;
  transition: var(--transition);
}
.auth-field input:focus { border-color: var(--pink-300); box-shadow: var(--focus-ring); }
.auth-field input.auth-code {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: .4em;
  text-align: center;
  padding-left: calc(13px + .4em);
}
.auth-submit { width: 100%; padding: 12px 16px; font-size: 14.5px; border-radius: 10px; }
.auth-lead { font-size: 13.5px; line-height: 1.6; color: var(--neutral-600); margin: 0 0 16px; }
.auth-links { margin-top: 16px; text-align: center; font-size: 13.5px; }
.auth-links a {
  color: var(--neutral-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--neutral-300);
  transition: var(--transition);
}
.auth-links a:hover { color: var(--neutral-800); text-decoration-color: currentColor; }
.auth-fine { margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--neutral-500); }
.auth-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.auth-alert {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.auth-alert--error { background: var(--danger-light); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.auth-alert--ok    { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.auth-note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--warn-text);
  margin-bottom: 16px;
}
.auth-qr {
  text-align: center;
  margin-bottom: 12px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;                 /* QR-koden måste ha ljus bakgrund för att skannas */
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 10px;
}
.auth-qr-status { font-size: 13px; color: #8c8a82; }
.auth-qr-status.is-error { color: #b3372e; }
.auth-secret-row { font-size: 12px; color: var(--neutral-500); text-align: center; margin: 0 0 16px; line-height: 1.6; }
.auth-secret-row code {
  display: inline-block;
  margin-top: 5px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--neutral-800);
  background: var(--neutral-100);
  border-radius: 6px;
}
@media (max-width: 480px) {
  .auth-card { padding: 26px 22px 22px; border-radius: 16px; }
  .auth-title { font-size: 26px; }
}

/* ── Spärrskärmar (fel, ingen klinik, abonnemang) ──────── */
.gate-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow-y: auto;
  background: var(--neutral-100);
  color: var(--neutral-700);
  font-family: var(--font-body);
}
.gate-card { max-width: 500px; text-align: center; animation: slideUp .25s ease; }
.gate-icon { font-size: 40px; line-height: 1; margin-bottom: 20px; filter: grayscale(1); opacity: .8; }
.gate-icon img { height: 48px; width: auto; display: inline-block; }
.gate-icon .paw-mark { width: 52px; height: 52px; }
.gate-icon:has(.paw-mark) { filter: none; opacity: 1; }
.gate-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--neutral-800);
  margin: 0 0 14px;
}
.gate-text { margin: 0 auto 26px; max-width: 440px; font-size: 15px; line-height: 1.65; color: var(--neutral-600); }
.gate-text strong { color: var(--neutral-800); font-weight: 600; }
.gate-text code {
  font-family: var(--font-mono);
  font-size: .88em;
  color: var(--neutral-800);
  background: var(--neutral-200);
  border-radius: 5px;
  padding: 1px 6px;
  overflow-wrap: anywhere;
}
.gate-hint { margin: 0 0 8px; font-size: 13.5px; color: var(--neutral-500); }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gate-actions .btn { padding: 11px 20px; font-size: 14px; border-radius: 10px; }
.gate-more { margin-top: 14px; }
.gate-link {
  background: none;
  border: none;
  padding: 4px;
  font: inherit;
  font-size: 13.5px;
  color: var(--neutral-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gate-link:hover { color: var(--neutral-800); }

/* ── Uppstartsskärm (showLoadingOverlay) ───────────────── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--neutral-100);
  font-family: var(--font-body);
}
.loading-card { max-width: 420px; text-align: center; }
.loading-mark {
  display: block;
  height: 60px;
  width: 60px;
  margin: 0 auto 16px;
  animation: _pawPulse 1.6s ease-in-out infinite;
}
.loading-card .brand-wordmark { display: block; font-size: 28px; margin-bottom: 22px; }
.loading-title { margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--neutral-700); }
.loading-status {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-500);
  transition: opacity .2s ease;
}
/* Gulliga meningar under inläsningen (startLoadingPhrases i app.js). */
.loading-status.is-swapping { opacity: 0; }
@keyframes _pawPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.93); }
}

/* ── Flytande piller: demoläge, läsläge ────────────────── */
.float-pill {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 94vw;
  padding: 7px 7px 7px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.3;
}
.float-pill strong { font-weight: 600; }
.float-pill-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-ink) 28%, transparent);
  background: transparent;
  color: var(--on-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.float-pill-btn:hover { background: color-mix(in srgb, var(--on-ink) 12%, transparent); }
/* Fyllnadsvarianten, så att texten går att läsa i båda lägena. */
.float-pill-btn--accent { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.float-pill-btn--accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* Smal skärm: texten på egen rad, knapparna under – annars bryts texten
   i fyra korta rader bredvid knapparna. */
@media (max-width: 560px) {
  .float-pill {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 24px);
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 18px;
    font-size: 12.5px;
  }
  .float-pill > span { flex-basis: 100%; text-align: center; }
}

/* ── Notis nere i hörnet (showToast) ───────────────────── */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 48px));
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  transition: opacity .3s;
}

@media (prefers-reduced-motion: reduce) {
  .loading-mark { animation: none !important; }
  .loading-status { transition: none; }
  .loading-status.is-swapping { opacity: 1; }      /* byt mening utan toning */
  .auth-wrap, .gate-card, .modal { animation: none !important; }
}