/* ── /kobl — pc-koblingen (KoblJournalAgent.razor), 17/9-2026 ─────────────────────
   Mål og skriftstørrelser følger det godkendte mockup (docs/design/journalagent-kobling.html,
   .kobl-kort: kort 560 px, padding 26/30/28, h1 1.5rem, tabel .95rem, knapper 13/16).
   Farverne er den tidligere sides inline-styles løftet til klasser: baggrund #f2f5f8,
   kant #d9e1e8 og radius 12, Segoe UI, grøn #1f6f54 til handling og kvittering,
   gul #fff8e6/#f0d9a0 til ventetilstand, rød #fdecea/#a94442 til fejl.
   Siden står uden for appens skal (ingen topbar), derfor egen skrift, baggrund og
   box-sizing, så den også læser rigtigt uden Bootstrap/app.css.
   Linkes i App.razor efter stillaering.css (efter journalagent-hint.css, når 1-2-Hint er lagt ind). */

.kobl-side {
    box-sizing: border-box;
    height: 100vh;          /* body har overflow:hidden i app.css — siden ruller selv */
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    background: #f2f5f8;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #22313f;
}

/* Kant-til-kant som loginflowet: app-hostens 14 px-ramme gælder kun hovedskærmen (app.css). */
div.app-host:has(.kobl-side) { padding: 0; }

.kobl-kort {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border: 1px solid #d9e1e8;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(20, 40, 60, 0.06);
    padding: 26px 30px 28px;
}

.kobl-hoved { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.kobl-bakke { flex: none; }
.kobl-kort h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.005em; }
.kobl-under { display: block; font-size: 0.9rem; font-weight: 400; color: #7d8b98; margin-top: 2px; letter-spacing: 0; }

.kobl-lead { margin: 6px 0 18px; font-size: 1rem; line-height: 1.5; color: #4f5f6d; }

.kobl-tabel { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-bottom: 18px; }
.kobl-tabel td { padding: 8px 8px 8px 0; border-bottom: 1px solid #eef2f5; vertical-align: top; }
.kobl-tabel td:first-child { width: 96px; color: #7d8b98; }
.kobl-sub { margin-top: 2px; font-size: 0.85rem; color: #7d8b98; }
.kobl-kode { font-family: Consolas, monospace; font-weight: 700; letter-spacing: 0.12em; }
.kobl-advarsel { color: #a94442; }

.kobl-knapper { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.kobl-ja,
.kobl-nej,
.kobl-tilbage {
    padding: 13px 16px;
    border-radius: 8px;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;   /* samme løft som appens hint-knap */
}
.kobl-ja { flex: 1; border: 1px solid #1f6f54; background: #1f6f54; color: #fff; font-weight: 600; }
.kobl-nej { border: 1px solid #c8d2db; background: #fff; color: #4f5f6d; }
.kobl-ja:disabled,
.kobl-nej:disabled { opacity: 0.55; cursor: default; }
.kobl-tilbage { margin-top: 16px; padding: 11px 16px; border: 1px solid #1f6f54; background: #1f6f54; color: #fff; font-weight: 600; font-size: 0.95rem; }
.kobl-ja:hover:not(:disabled),
.kobl-nej:hover:not(:disabled),
.kobl-tilbage:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(17, 40, 68, 0.10); }
.kobl-ja:active:not(:disabled),
.kobl-nej:active:not(:disabled),
.kobl-tilbage:active { transform: translateY(0); box-shadow: none; }
.kobl-ja:focus-visible,
.kobl-nej:focus-visible,
.kobl-tilbage:focus-visible { outline: 2px solid rgba(31, 111, 84, 0.45); outline-offset: 2px; }

.kobl-ok     { background: #e8f6ee; color: #1f6f54; border-radius: 8px; padding: 12px 14px; font-size: 0.95rem; line-height: 1.5; }
.kobl-venter { background: #fff8e6; border: 1px solid #f0d9a0; color: #5b4a1e; border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; margin-top: 12px; }
.kobl-venter-fade { animation: kobl-blink 1.4s ease-in-out infinite; }
@keyframes kobl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .kobl-venter-fade { animation: none; } }
.kobl-fejl   { background: #fdecea; color: #a94442; border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; line-height: 1.5; }
.kobl-fejl a { color: #a94442; }

.kobl-fod { margin: 18px 0 0; font-size: 0.85rem; line-height: 1.5; color: #7d8b98; }
.kobl-fod a,
.kobl-flere a { color: #1f6f54; text-decoration: underline; }

/* Flere klinikker — adskilt med luft og en streg, nederst i kvitteringen */
.kobl-flere { margin-top: 34px; padding-top: 18px; border-top: 1px solid #eef2f5; font-size: 0.95rem; line-height: 1.55; color: #4f5f6d; }
.kobl-flere b { color: #22313f; font-weight: 600; }