/* =========================================================================
   klinik.css — klinik- og træneradgang (runde 5, 07-10-2026). Se assets/js/klinik.js.

   Ingen nye farver: toner af kobolt viser hvor meget af dagen der er klaret, og rød er
   KUN advarsler (samme lyserøde flade som .knap.fare). Klinikkens sider får hele bredden
   uden Buddy-panelet — det er brugerens egen dag og hører ikke til i en arbejdsflade.
   ========================================================================= */

/* ------------------------------------------------------------ fælles */
.kl-logo {
    width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--blaa); color: var(--hvid); font: 700 18px/1 var(--display);
}
.kl-flag {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px;
    background: #fde8ea; color: var(--roed); font-size: 13px; font-weight: 650; line-height: 1.3;
}
.kl-flag svg { width: 14px; height: 14px; flex: none; }
.kl-besked { max-width: 86%; padding: 9px 14px 10px; border-radius: 18px; background: var(--himmel); align-self: flex-start; }
.kl-besked small { display: block; font-size: 12px; font-weight: 600; color: var(--marine-2); margin-bottom: 2px; }
.kl-besked p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.42; font-size: 15px; }
.kl-besked.fra { border-bottom-left-radius: 6px; }
.kl-besked.til { align-self: flex-end; background: var(--blaa); color: var(--hvid); border-bottom-right-radius: 6px; }
.kl-besked.til small { color: rgba(255, 255, 255, .78); }
.kl-traad { display: flex; flex-direction: column; gap: 8px; }
.kl-svar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; margin-top: 12px; }
.kl-svar textarea {
    min-height: 44px; max-height: 160px; resize: none; border-radius: 22px; padding: 10px 16px; line-height: 1.4; font-size: 15px;
    background: var(--himmel); border: 2px solid transparent; outline: none;
}
.kl-svar textarea:focus { border-color: var(--blaa); background: var(--hvid); }
.kl-svar button { width: 44px; height: 44px; border-radius: 50%; background: var(--blaa); color: var(--hvid); display: grid; place-items: center; align-self: end; transition: background .15s; }
.kl-svar button:hover { background: var(--blaa-dyb); }
.kl-svar button[disabled] { opacity: .5; }
.kl-svar button svg { width: 18px; height: 18px; }

/* ------------------------------------------------- klienten: Profil-sektionen */
.kl-profil { display: grid; gap: 12px; }
.kl-arbejde {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; align-items: center;
    padding: 12px 14px; border-radius: var(--r-m); background: var(--himmel); color: var(--marine); text-decoration: none; transition: background .15s;
}
.kl-arbejde:hover { background: var(--dis); }
.kl-arbejde b { display: block; font-weight: 650; }
.kl-arbejde small { color: var(--blaa); font-weight: 600; font-size: 13.5px; }
.kl-arbejde > svg { width: 18px; height: 18px; color: var(--marine-3); }
.kl-kobling { background: var(--himmel); border-radius: var(--r-m); padding: 14px; }
.kl-hoved { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.kl-hoved b { display: block; font-weight: 650; line-height: 1.3; }
.kl-hoved small { color: var(--marine-2); font-size: 13.5px; }
.kl-kobling > .lille { margin-top: 10px; }
.kl-deler { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kl-deler li { display: inline-flex; align-items: center; gap: 6px; background: var(--hvid); border-radius: 999px; padding: 5px 12px 5px 9px; font-size: 13.5px; font-weight: 600; }
.kl-deler li svg { width: 14px; height: 14px; color: var(--blaa); }
.kl-plus { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--blaa-dyb); font-weight: 600; font-size: 14px; }
.kl-plus svg { width: 16px; height: 16px; color: var(--blaa); flex: none; }
.kl-kobling .kl-traad { margin-top: 14px; max-height: 300px; overflow-y: auto; }
.kl-kobling .kl-besked.fra { background: var(--hvid); }
.kl-kobling .kl-svar textarea { background: var(--hvid); }
.kl-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kl-kode .felt { margin-top: 2px; }
.kl-kode .felt > span.kl-kode-raekke { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-weight: 400; font-size: 16px; margin: 0; }
.kl-kode input { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.kl-kode input::placeholder { letter-spacing: .08em; font-weight: 500; color: var(--marine-3); }
.kl-kode .knap { min-height: 50px; }
.kl-log { margin-top: 6px; }
.kl-log h3 { font: 650 15px/1.3 var(--tekst); letter-spacing: 0; color: var(--marine-2); margin-bottom: 4px; }
.kl-log ol { list-style: none; margin: 0; padding: 0; }
.kl-log li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; font-size: 14.5px; line-height: 1.4; }
.kl-log li + li { box-shadow: 0 -1px 0 var(--himmel); }
.kl-log li.mig span { color: var(--marine-2); }
.kl-log time { color: var(--marine-3); font-size: 13px; white-space: nowrap; flex: none; }

/* Samtykke-skærmen (et ark) */
.kl-samtykke .kl-hvem { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: end; margin-top: 6px; }
.kl-samtykke .kl-hvem .boble { border-radius: 22px 22px 22px 6px; padding: 13px 16px; }
.kl-beder-linje { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--himmel); border-radius: var(--r-s); padding: 10px 14px; margin-top: 14px; font-size: 14.5px; }
.kl-beder-linje .tekstknap { white-space: nowrap; }
.kl-punkter { margin-top: 6px; }
.kl-punkter .maerke { vertical-align: 1px; margin-left: 4px; background: var(--dis); color: var(--blaa-dyb); }
.kl-samtykke .kl-hist { box-shadow: 0 -1px 0 var(--himmel); }
.kl-aldrig { display: flex; gap: 10px; align-items: flex-start; background: var(--himmel); border-radius: var(--r-s); padding: 12px 14px; margin-top: 10px; font-size: 14px; color: var(--marine-2); line-height: 1.4; }
.kl-aldrig svg { width: 18px; height: 18px; flex: none; color: var(--marine); margin-top: 1px; }
.kl-stop-link { display: block; margin: 10px auto 0; color: var(--roed); }
.kl-stop-link:hover { color: var(--roed); }

/* --------------------------------------------- klinikken: oversigt og detalje */
.kl-top { flex-wrap: wrap; align-items: flex-end; }
.kl-top .daempet { margin-top: 6px; font-size: 15px; }
.kl-top .knapper { flex-wrap: wrap; }
.kl-top .knap svg { width: 18px; height: 18px; }
.kl-skift { margin-bottom: 14px; }
.kl-skift .chip { text-decoration: none; }
.kl-tal { margin-top: 18px; }
.kl-tal .flade + .flade { margin-top: 0; }
.kl-roed .tal { color: var(--roed); }
.kl-liste-top { flex-wrap: wrap; align-items: center; }
.kl-soeg { flex: 1 1 220px; max-width: 300px; }
.kl-soeg input { min-height: 44px; }
.kl-filtre { margin-bottom: 12px; }
.kl-liste { display: grid; gap: 8px; }
.kl-ingen { padding: 12px 4px; }
.kl-tom { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; }

/* Klientrækkerne. Telefon: navn øverst, fire små tal under, advarsler nederst. PC: en tabel. */
.kl-raekke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; align-items: center; }
.kl-klient {
    background: var(--hvid); border-radius: var(--r-m); padding: 14px 16px; box-shadow: var(--skygge);
    color: var(--marine); text-decoration: none; transition: background .15s;
}
.kl-klient.opm { box-shadow: inset 4px 0 0 var(--roed), var(--skygge); }
.kl-hvem-c { grid-column: 1 / 4; display: flex; gap: 12px; align-items: center; min-width: 0; }
.kl-navn { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.kl-navn b { font-weight: 650; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.kl-navn small { flex-basis: 100%; color: var(--marine-2); font-size: 13px; }
.kl-navn .maerke { font-size: 11.5px; padding: 2px 8px; }
.kl-navn .kl-svar-maerke { background: var(--blaa); color: var(--hvid); }
/* Pilen står i første række, tallene i anden — ellers lægger grid'en det første tal op ved siden af navnet. */
.kl-pil { grid-column: 4; grid-row: 1; justify-self: end; color: var(--marine-3); display: grid; }
.kl-pil svg { width: 18px; height: 18px; }
.kl-celle { grid-row: 2; display: grid; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.3; }
.kl-celle::before { content: attr(data-l); font-size: 11.5px; font-weight: 650; color: var(--marine-3); }
.kl-celle b { font: 700 15.5px/1.2 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.kl-celle small { color: var(--marine-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-ikke { color: var(--marine-3); display: inline-grid; }
.kl-ikke svg { width: 15px; height: 15px; }
.kl-uge { display: inline-flex; gap: 2px; margin: 2px 0 1px; }
.kl-uge i { width: 8px; height: 8px; border-radius: 2px; }
.kl-adv { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.kl-hovedraekke { display: none; }

/* Hvor meget af dagen der blev klaret: ingen data → tom, 0 % → dis, op til 100 % → fuld kobolt. */
.kl-h0 { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dis); }
.kl-hn { background: var(--dis); }
.kl-h1 { background: rgba(31, 91, 255, .22); }
.kl-h2 { background: rgba(31, 91, 255, .45); }
.kl-h3 { background: rgba(31, 91, 255, .7); }
.kl-h4 { background: var(--blaa); }

.kl-fod { display: grid; gap: 0 24px; }
.kl-kode-rad { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.kl-kode-rad + .kl-kode-rad { box-shadow: 0 -1px 0 var(--himmel); }
.kl-kode-rad b { display: block; font-weight: 600; line-height: 1.3; }
.kl-kode-rad small { color: var(--marine-2); font-size: 13px; }
.kl-kodetal { font: 700 15px/1 var(--display); letter-spacing: .08em; background: var(--himmel); border-radius: var(--r-s); padding: 9px 11px; color: var(--blaa-dyb); user-select: all; }
.kl-under { font: 650 14.5px/1.3 var(--tekst); letter-spacing: 0; color: var(--marine-2); margin: 18px 0 2px; }

/* Klient-detaljen */
.kl-tilbage { margin-bottom: 10px; font-size: 15px; }
.kl-person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; min-width: 0; }
.kl-person h1 { font-size: clamp(26px, 5vw, 36px); overflow-wrap: anywhere; }
.avatar.stor { width: 60px; height: 60px; font-size: 26px; }
.kl-advarsler { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.kl-advarsler .kl-flag { font-size: 14px; padding: 6px 13px 6px 10px; }
.kl-deler-linje { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-deler-linje .maerke svg { width: 13px; height: 13px; }
.kl-delt { background: var(--hvid); color: var(--marine); box-shadow: var(--skygge); }
.kl-delt svg { color: var(--blaa); }
.kl-udelt { background: transparent; color: var(--marine-3); box-shadow: inset 0 0 0 1.5px var(--dis-2); }
.kl-gitter { display: grid; gap: 0 28px; align-items: start; }
.kl-hovedspalte { container-type: inline-size; min-width: 0; }
.kl-sidespalte { min-width: 0; }
.kl-hovedspalte > .kl-tom { margin-top: 30px; grid-template-columns: 1fr; }

.kl-kort { display: grid; gap: 16px; }
.kl-kort-linje { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.kl-kort-linje .tal { font-size: 26px; color: var(--blaa); white-space: nowrap; }
.kl-kort-linje p { font-size: 15px; line-height: 1.45; }

.kl-hede-tal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kl-hede-tal .tal { font-size: 24px; display: block; line-height: 1.1; }
.kl-hede-tal small { color: var(--marine-2); font-size: 12.5px; line-height: 1.3; display: block; margin-top: 2px; }
.kl-hede { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; margin-top: 18px; }
.kl-hede i { aspect-ratio: 1; border-radius: 5px; position: relative; display: block; }
.kl-hede i.udelt { background: var(--himmel); }
.kl-hede i.idag { outline: 2px solid var(--marine); outline-offset: 1px; }
.kl-hede i b { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--hvid); }
.kl-hede i.kl-h0 b, .kl-hede i.kl-hn b, .kl-hede i.kl-h1 b { background: var(--blaa-dyb); }
.kl-hede-fod { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--marine-3); }
.kl-forklaring { display: inline-flex; align-items: center; gap: 3px; text-align: center; }
.kl-forklaring i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.kl-forklaring i:last-of-type { margin-right: 6px; }
@container (min-width: 600px) {
    .kl-hede { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; }
    .kl-hede i { border-radius: 4px; }
}
@container (max-width: 459px) {
    .kl-hede-tal { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .kl-forklaring { display: none; }
    .kl-kort-linje { grid-template-columns: 72px minmax(0, 1fr); }
    .kl-kort-linje .tal { font-size: 22px; }
}

.kl-graf-navn { font: 650 14px/1.3 var(--tekst); letter-spacing: 0; color: var(--marine-2); margin: 20px 0 8px; }
.kl-graf-navn:first-child, .kl-graf > .kl-graf-navn { margin-top: 0; }
#g-talje:not(:empty) { margin-top: 20px; }

.kl-program { padding-top: 0; }
.kl-pasliste { margin-top: 4px; }
.kl-pas { box-shadow: 0 -1px 0 var(--himmel); }
.kl-pas-top { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 12px; align-items: center; text-align: left; padding: 11px 0; }
.kl-pas-top b { display: block; font-weight: 600; line-height: 1.3; }
.kl-pas-top small { color: var(--marine-2); font-size: 13px; }
.kl-pas-top > svg { width: 18px; height: 18px; color: var(--marine-3); transition: transform .2s; }
.kl-pas.aaben .kl-pas-top > svg { transform: rotate(90deg); }
.kl-pas-dato { font: 700 14px/1.2 var(--display); color: var(--blaa); }
.kl-pas-krop { display: none; padding: 0 0 10px 64px; }
.kl-pas.aaben .kl-pas-krop { display: block; }
.kl-pas-krop .liste-rad { padding: 7px 0; font-size: 14px; }
.kl-pas-krop .liste-rad .daempet { text-align: right; }
.kl-roed-rad > span:first-child { color: var(--roed); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.kl-roed-rad svg { width: 15px; height: 15px; }

.kl-sidespalte .kl-traad { max-height: 380px; overflow-y: auto; padding: 2px; }
.kl-skabeloner { margin-top: 14px; gap: 6px; }
.kl-skabeloner .chip { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.kl-fodnote { margin-top: 12px; }
.kl-note-form { display: grid; gap: 8px; }
.kl-note-form textarea {
    width: 100%; min-height: 84px; resize: vertical; padding: 12px 14px; border-radius: var(--r-s); line-height: 1.45;
    background: var(--himmel); border: 2px solid transparent; outline: none; font-size: 15px;
}
.kl-note-form textarea:focus { border-color: var(--blaa); background: var(--hvid); }
.kl-note-form .knap { justify-self: end; }
.kl-note { padding: 12px 0; }
.kl-note + .kl-note, .kl-note-form + div .kl-note:first-child { box-shadow: 0 -1px 0 var(--himmel); }
.kl-note-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kl-note-top small { color: var(--marine-2); font-size: 12.5px; font-weight: 600; }
.kl-note-top .tekstknap { font-size: 13.5px; padding: 2px; color: var(--marine-3); }
.kl-note-top .tekstknap:hover { color: var(--roed); }
.kl-note p { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; font-size: 15px; line-height: 1.45; }

/* ------------------------------------------------------------- PC */
@media (min-width: 920px) {
    .indhold.kl-side { max-width: 1180px; }
    .kl-klient:hover { background: var(--himmel-2); }
    .kl-raekke {
        grid-template-columns: minmax(210px, 1.7fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, .75fr) 18px;
        gap: 8px 18px;
    }
    .kl-hvem-c, .kl-pil { grid-column: auto; }
    .kl-pil, .kl-celle { grid-row: auto; }
    .kl-celle::before { display: none; }
    .kl-uge { gap: 3px; }
    .kl-uge i { width: 10px; height: 10px; }
    .kl-hovedraekke { display: grid; padding: 0 16px 2px; font-size: 13px; font-weight: 650; color: var(--marine-2); }
    .kl-adv { padding-left: 56px; }
    .kl-fod { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .kl-top .daempet { font-size: 16px; }
}
@media (min-width: 1100px) {
    .kl-gitter { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); }
}
@media (max-width: 919px) {
    .kl-top .knapper { width: 100%; }
    .kl-tom { grid-template-columns: 64px minmax(0, 1fr); }
    .kl-tom .buddy-fig { width: 64px; height: 64px; }
    .kl-pas-krop { padding-left: 0; }
}
@media (max-width: 400px) {
    .kl-raekke { gap: 10px 6px; }
    .kl-celle b { font-size: 14.5px; }
}

/* Klinikken får hele bredden fra 1200 px — uden Buddy-panelet (se klinik.js, visKlinik). */
@media (min-width: 1200px) {
    .skal[data-side="klinik"] { grid-template-columns: var(--skinne-b) minmax(0, 1fr); }
    .skal[data-side="klinik"] .buddy-panel { display: none; }
}

/* ------------------------------------------------------------- udskrift
   "Udskriv" på klient-detaljen giver et rent ark til journalen: tal, grafer og noter —
   ingen menu, knapper eller skrivefelter. */
@media print {
    .skinne, .faner-bund, .buddy-panel, .toasts, .hint, .kl-tilbage, .kl-top .knapper, .kl-skabeloner, .kl-svar,
    .kl-note-form, .kl-fodnote, .kl-note-top .tekstknap, .ark-bag { display: none !important; }
    body { background: #fff; }
    .skal { display: block; }
    .indhold.kl-side { max-width: none; padding: 0; }
    .flade { box-shadow: none; border: 1px solid var(--dis); break-inside: avoid; }
    .kl-gitter { display: block; }
    .kl-pas-krop { display: block; }
    .kl-sidespalte .kl-traad { max-height: none; overflow: visible; }
    .sektion { margin-top: 18px; }
}