/* ===================================================================== Chef- och Lön-vyerna
   Läggs ovanpå lon.css. Alla klasser här har prefixet lc-. */

/* ---------------------------------------------------------------- sidhuvud */
.lc-huvud { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.6rem; }
.lc-huvud h1 { margin: 0; }
.lc-under { margin: .3rem 0 0; color: var(--lon-dov); max-width: 62ch; }
.lc-huvud-atg { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lc-huvud-atg form { margin: 0; }
.lc-rubrik { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2rem 0 .8rem; }
.lc-rubrik h2 { margin: 0; font-size: 1.15rem; font-weight: 650; }
.lc-rubrik small { color: var(--lon-dov); }

/* ---------------------------------------------------------------- avatar, chip, tomt */
.lc-avatar { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 700; font-size: .85rem; color: #12353c; background: var(--lon-sol); }
.lc-avatar.n1 { background: #f6d58b; } .lc-avatar.n2 { background: #bfe2d9; } .lc-avatar.n3 { background: #f5c3b4; }
.lc-avatar.n4 { background: #c6dbf2; } .lc-avatar.n5 { background: #d9e6ae; }
.lc-avatar.stor { width: 52px; height: 52px; font-size: 1.05rem; }

.lc-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .65rem; border-radius: 99px; font-size: .76rem; font-weight: 650; white-space: nowrap; line-height: 1.4; }
.lc-chip.gra { background: #e8eeee; color: #3d505a; }
.lc-chip.sol { background: var(--lon-sol-ljus); color: #7a5410; }
.lc-chip.lingon { background: var(--lon-lingon-ljus); color: #9b3a27; }
.lc-chip.mossa { background: var(--lon-mossa-ljus); color: #2f6a3c; }
.lc-chip.primar { background: var(--lon-primar-ljus); color: var(--lon-primar-mork); }
.lc-chip.himmel { background: #e3eef8; color: #2d6089; }

.lc-tomt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 3rem 1.5rem; background: var(--lon-yta); border: 1px dashed #cfdcdd; border-radius: var(--lon-radie); }
.lc-tomt strong { font-size: 1.1rem; }
.lc-tomt p { color: var(--lon-dov); margin: 0 0 .5rem; max-width: 46ch; }
.lc-tomt-ikon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--lon-primar-ljus); color: var(--lon-primar); margin-bottom: .5rem; }
.lc-tomt.mossa .lc-tomt-ikon { background: var(--lon-mossa-ljus); color: var(--lon-mossa); }

/* ---------------------------------------------------------------- stegindikator */
.lc-stepper { list-style: none; display: flex; margin: 0 0 1.6rem; padding: 0; counter-reset: s; }
.lc-steg-li { flex: 1 1 0; position: relative; min-width: 0; }
.lc-steg-li + .lc-steg-li::before { content: ""; position: absolute; top: 19px; right: 50%; width: 100%; height: 3px; background: var(--lon-linje); z-index: 0; }
.lc-steg-li:has(.done)::before, .lc-steg-li:has(.active)::before { background: var(--lon-primar); }
.lc-app .lc-steg, .lc-steg { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; color: var(--lon-dov); font-size: .82rem; font-weight: 600; text-align: center; padding: 0 .25rem; }
.lc-steg-ring { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px solid var(--lon-linje); font-weight: 700; color: var(--lon-dov); transition: all .2s; }
.lc-steg.active { color: var(--lon-ink); }
.lc-steg.active .lc-steg-ring { border-color: var(--lon-primar); color: var(--lon-primar); box-shadow: 0 0 0 5px rgba(31, 111, 120, .14); }
.lc-steg.done { color: var(--lon-primar-mork); }
.lc-steg.done .lc-steg-ring { background: var(--lon-primar); border-color: var(--lon-primar); color: #fff; }
.lc-steg.sol .lc-steg-ring { border-color: var(--lon-sol); }
a.lc-steg:hover .lc-steg-ring { border-color: var(--lon-primar); }
@media (max-width: 600px) { .lc-steg-text { font-size: .7rem; } .lc-steg-ring { width: 34px; height: 34px; } .lc-steg-li + .lc-steg-li::before { top: 16px; } }

/* ---------------------------------------------------------------- filter och formulärsektioner */
.lc-filter { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; padding: 1rem 1.15rem; margin-bottom: 1.25rem; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); }
.lc-filter > div { flex: 1 1 150px; min-width: 0; }
.lc-filter > .lc-filter-knapp { flex: 0 0 auto; }
.lc-sektion { margin-bottom: 1.5rem; }
.lc-sektion-rub { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; font-size: 1rem; font-weight: 650; }
.lc-sektion-rub .lc-nr { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lon-primar-ljus); color: var(--lon-primar-mork); font-size: .8rem; font-weight: 700; }
.lc-hjalp { color: var(--lon-dov); font-size: .88rem; margin: -.4rem 0 1rem; }
.lc-formkort { padding: 1.5rem; }
.lc-formkort + .lc-formkort { margin-top: 1rem; }

/* ---------------------------------------------------------------- attest */
.lc-attest .table > tbody > tr > td { vertical-align: top; padding-top: .9rem; padding-bottom: .9rem; }
.lc-person { display: flex; align-items: center; gap: .65rem; min-width: 11rem; }
.lc-person strong { display: block; line-height: 1.25; }
.lc-person small { color: var(--lon-dov); }
.lc-post-titel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 600; }
.lc-post-sub { display: block; color: var(--lon-dov); font-size: .82rem; margin-top: .25rem; }
.lc-bakgrund { font-size: .8rem; color: var(--lon-dov); line-height: 1.5; min-width: 13rem; }
.lc-bakgrund b { color: var(--lon-ink); font-weight: 600; }
.lc-atgardsfalt { position: sticky; bottom: 1rem; z-index: 5; margin-top: 1rem; padding: 1rem 1.15rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1.25rem; align-items: end; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: 0 8px 30px rgba(18, 53, 60, .16); }
.lc-atgardsfalt .form-label { margin-bottom: .25rem; }
.lc-atgardsfalt textarea { resize: vertical; min-height: 2.6rem; }
.lc-knapprad { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) { .lc-atgardsfalt { grid-template-columns: 1fr; bottom: .5rem; } }

/* ---------------------------------------------------------------- min personal */
.lc-personrutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.lc-personkort { display: flex; flex-direction: column; gap: .85rem; padding: 1.15rem 1.25rem; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); }
.lc-personkort-topp { display: flex; align-items: center; gap: .85rem; }
.lc-personkort-topp > div { min-width: 0; }
.lc-personkort strong { display: block; font-size: 1.02rem; line-height: 1.25; }
.lc-personkort small { color: var(--lon-dov); display: block; }
.lc-personkort .lc-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.lc-personkort .lc-saldo { font-size: .84rem; color: var(--lon-dov); border-top: 1px solid var(--lon-linje); padding-top: .7rem; }
.lc-personkort .lc-kortfot { display: flex; gap: .5rem; align-items: center; margin-top: auto; }
.lc-personkort .lc-kortfot .btn { flex: 1; }
.lc-delegering { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(120px, 1fr)) auto; gap: .75rem; align-items: end; padding: 1rem 1.15rem; margin-bottom: .75rem; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); }
.lc-delegering small { color: var(--lon-dov); display: block; }
@media (max-width: 900px) { .lc-delegering { grid-template-columns: 1fr 1fr; } .lc-delegering > :first-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- scheman */
.lc-tvakol { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 991px) { .lc-tvakol { grid-template-columns: 1fr; } }
.lc-lista-val { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.lc-lista-val a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-radius: 12px; background: var(--lon-yta); border: 1px solid var(--lon-linje); color: var(--lon-ink) !important; text-decoration: none; font-weight: 550; transition: border-color .15s, box-shadow .15s; }
.lc-lista-val a:hover { border-color: #b9ced0; box-shadow: var(--lon-skugga); }
.lc-lista-val a.aktiv { background: var(--lon-primar-ljus); border-color: var(--lon-primar); color: var(--lon-primar-mork) !important; }
.lc-schemagrid { border-collapse: separate; border-spacing: 0; }
.lc-schemagrid th, .lc-schemagrid td { border: 0 !important; border-bottom: 1px solid var(--lon-linje) !important; padding: .4rem .35rem !important; }
.lc-schemagrid thead th { text-align: center; }
.lc-schemagrid tbody th { text-align: center; color: var(--lon-primar-mork); background: var(--lon-primar-ljus); width: 3.2rem; }
.lc-schemagrid td:nth-child(7), .lc-schemagrid td:nth-child(8) { background: rgba(242, 180, 65, .09); }
.lc-schemagrid input { text-align: center; font-variant-numeric: tabular-nums; }
.lc-schemagrid tfoot td { font-weight: 600; background: #fafcfc; }
.lc-forhandsvisning td { font-size: .85rem; text-align: center; }
.lc-forhandsvisning td:nth-child(7), .lc-forhandsvisning td:nth-child(8) { background: rgba(242, 180, 65, .09); }
.lc-kod { background: var(--lon-primar-ljus); color: var(--lon-primar-mork); padding: .1rem .4rem; border-radius: 6px; font-size: .82em; }

/* ---------------------------------------------------------------- anställningsguide (wizard) */
.lc-guide { max-width: 980px; margin: 0 auto; }
.lc-guide-topp { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: 1.2rem; color: var(--lon-dov); font-size: .9rem; }
.lc-guide .progress { height: 6px; border-radius: 99px; background: var(--lon-linje); margin-bottom: 1.4rem; overflow: hidden; }
.lc-guide .progress-bar { font-size: 0; background: linear-gradient(90deg, var(--lon-primar), #3a9aa3); transition: width .35s ease; }
.lc-stegkort { padding: 2rem 2rem 1.75rem !important; animation: lc-in .35s ease; }
.lc-stegkort-huvud { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.lc-stegkort-ikon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--lon-primar-ljus); color: var(--lon-primar); }
.lc-stegkort-huvud h2 { margin: 0; font-size: 1.3rem; }
.lc-stegkort-huvud p { margin: .1rem 0 0; color: var(--lon-dov); font-size: .92rem; }
.lc-stegfot { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lon-linje); }
.lc-stegfot .lc-spacer { flex: 1; }
.lc-guide .form-control.is-invalid, .lc-guide .form-select.is-invalid { border-color: var(--lon-lingon); background-image: none; }
.lc-guide .lc-fel { color: var(--lon-lingon); font-size: .8rem; margin-top: .25rem; font-weight: 550; }
.lc-guide .form-text { font-size: .8rem; }
.lc-guide #guide-status { font-size: .8rem; }
@keyframes lc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* avtalskort (papper) */
.lc-avtal.card { background: #fffefb; border: 1px solid #e6e1d3; border-top: 5px solid var(--lon-primar); border-radius: 6px 6px 14px 14px; box-shadow: 0 2px 4px rgba(18, 53, 60, .05), 0 14px 36px rgba(18, 53, 60, .08); overflow: hidden; }
.lc-avtal .card-header { background: transparent; border-bottom: 1px solid #ece7d9; padding: 1.25rem 1.75rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--lon-dov); font-weight: 650; }
.lc-avtal .card-body { padding: 1.5rem 1.75rem 1.75rem; }
.lc-avtal h3 { font-size: .74rem !important; text-transform: uppercase; letter-spacing: .1em; color: var(--lon-primar-mork); font-weight: 700; margin: 1.1rem 0 .15rem !important; }
.lc-avtal h3:first-child { margin-top: 0 !important; }
.lc-avtal p { font-size: .95rem; line-height: 1.65; color: #2a3b45; }
.lc-sammanfattning .alert { margin-bottom: .6rem; }

/* process (ärendets steg) */
.lc-process { list-style: none; margin: 0 0 1.25rem; padding: 0; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); overflow: hidden; }
.lc-process li { display: flex; gap: .85rem; align-items: center; padding: .8rem 1.1rem; position: relative; color: var(--lon-dov); font-size: .92rem; }
.lc-process li + li { border-top: 1px solid var(--lon-linje); }
.lc-process .lc-prick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--lon-linje); background: #fff; display: grid; place-items: center; color: #fff; }
.lc-process li.klar { color: var(--lon-ink); } .lc-process li.klar .lc-prick { background: var(--lon-mossa); border-color: var(--lon-mossa); }
.lc-process li.nu { color: var(--lon-ink); font-weight: 650; background: var(--lon-primar-ljus); } .lc-process li.nu .lc-prick { border-color: var(--lon-primar); box-shadow: 0 0 0 4px rgba(31, 111, 120, .16); }
.lc-process li.fel { color: #7c2d1d; font-weight: 650; background: var(--lon-lingon-ljus); } .lc-process li.fel .lc-prick { border-color: var(--lon-lingon); }
.lc-sidokort { padding: 1.25rem; margin-bottom: 1rem; }
.lc-sidokort h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.lc-signaturer { display: flex; flex-direction: column; gap: .75rem; }
.lc-signatur { display: flex; gap: .85rem; align-items: center; padding: .8rem; border: 1px solid var(--lon-linje); border-radius: 12px; background: #fff; }
.lc-signatur img { max-width: 150px; max-height: 60px; border-bottom: 1px dotted #b9c6c8; }
.lc-signatur small { color: var(--lon-dov); display: block; line-height: 1.35; }

/* signering */
.lc-signeringsyta { position: relative; border-radius: 14px; background: #fff; border: 2px dashed #bfd0d2; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.lc-signeringsyta:hover, .lc-signeringsyta:focus-within { border-color: var(--lon-primar); box-shadow: 0 0 0 4px rgba(31, 111, 120, .1); }
.lc-signeringsyta canvas { display: block; width: 100%; height: auto; aspect-ratio: 960 / 330; cursor: crosshair; background: transparent; border: 0 !important; border-radius: 0 !important; touch-action: none; }
.lc-signering-rad { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .75rem; }
.lc-signering-rad .lc-spacer { flex: 1; }
.lc-signera-sida { max-width: 780px; margin: 0 auto; }
.lc-signera-sida h1 { font-size: 1.9rem; }
.lc-notis { font-size: .8rem; color: var(--lon-dov); margin-top: .75rem; display: flex; gap: .5rem; align-items: flex-start; }
.lc-notis .lon-ikon { flex: none; margin-top: .1rem; }

/* tack / firande */
.lc-tack { position: relative; overflow: hidden; text-align: center; padding: 2.75rem 1.5rem; background: linear-gradient(180deg, #fff, var(--lon-mossa-ljus)); border: 1px solid #cfe5d4; border-radius: 18px; box-shadow: var(--lon-skugga); }
.lc-tack-ikon { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--lon-mossa); color: #fff; margin-bottom: 1rem; animation: lc-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.lc-tack h2 { margin: 0 0 .4rem; font-size: 1.6rem; }
.lc-tack p { color: #3f5a47; margin: 0 auto; max-width: 48ch; }
@keyframes lc-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.lc-konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lc-konfetti i { position: absolute; top: -14px; left: calc(var(--i) * 7%); width: 8px; height: 14px; border-radius: 2px; background: var(--c, var(--lon-sol)); opacity: 0; animation: lc-fall 2.6s ease-out calc(var(--i) * .09s) 1 both; transform: rotate(calc(var(--i) * 31deg)); }
.lc-konfetti i:nth-child(3n) { --c: var(--lon-primar); } .lc-konfetti i:nth-child(3n+1) { --c: var(--lon-lingon); } .lc-konfetti i:nth-child(4n) { --c: var(--lon-mossa); }
@keyframes lc-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(300px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .lc-konfetti { display: none; } .lc-tack-ikon, .lc-stegkort { animation: none; } }

/* ---------------------------------------------------------------- lön: anställningar */
.lc-arenden { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: 1rem 1.15rem; margin-bottom: 1.25rem; background: var(--lon-sol-ljus); border: 1px solid #f1dca7; border-radius: var(--lon-radie); }
.lc-arenden strong { margin-right: .4rem; }
.lc-mastdet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.lc-mastdet.med-detalj { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
@media (max-width: 1100px) { .lc-mastdet.med-detalj { grid-template-columns: 1fr; } }
.lc-rader { background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); overflow: hidden; }
.lc-rad { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; border-bottom: 1px solid var(--lon-linje); text-decoration: none !important; color: var(--lon-ink) !important; transition: background .12s; }
.lc-rad:last-child { border-bottom: 0; }
.lc-rad:hover { background: #f6fafa; }
.lc-rad.aktiv { background: var(--lon-primar-ljus); box-shadow: inset 4px 0 0 var(--lon-primar); }
.lc-rad > div { min-width: 0; flex: 1; }
.lc-rad strong { display: block; line-height: 1.25; }
.lc-rad small { color: var(--lon-dov); display: block; line-height: 1.35; }
.lc-rad .lc-hoger { text-align: right; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; }
.lc-rad .lc-hoger small { font-weight: 400; }
.lc-kortrubrik { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--lon-linje); font-weight: 650; }
.lc-fieldset-rub { margin: 1.25rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--lon-linje); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--lon-primar-mork); }
.lc-historik { list-style: none; margin: 0; padding: 0; }
.lc-historik li { position: relative; padding: .7rem 1.25rem .7rem 2.4rem; border-bottom: 1px solid var(--lon-linje); font-size: .85rem; }
.lc-historik li:last-child { border-bottom: 0; }
.lc-historik li::before { content: ""; position: absolute; left: 1.05rem; top: 1.05rem; width: 9px; height: 9px; border-radius: 50%; background: var(--lon-primar); box-shadow: 0 0 0 4px var(--lon-primar-ljus); }
.lc-historik code { color: var(--lon-dov); background: none; font-size: .78rem; word-break: break-word; }

/* ---------------------------------------------------------------- lön: korrigering, rapporter */
.lc-infobox { display: flex; gap: .75rem; padding: .9rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--lon-radie); background: var(--lon-primar-ljus); color: var(--lon-primar-mork); font-size: .9rem; }
.lc-infobox .lon-ikon { flex: none; margin-top: .15rem; }
.lc-tabellkort { background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); overflow: hidden; }
.lc-tabellkort .table-responsive { border: 0; box-shadow: none; border-radius: 0; }
.lc-tabellkort .table { margin: 0; }
.lc-tal { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- lönekörning */
.lc-korning { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 991px) { .lc-korning { grid-template-columns: 1fr; } }
.lc-period { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.lc-period a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .65rem .85rem; border-radius: 12px; background: var(--lon-yta); border: 1px solid var(--lon-linje); color: var(--lon-ink) !important; text-decoration: none; font-weight: 550; font-size: .93rem; }
.lc-period a:hover { border-color: #b9ced0; }
.lc-period a.aktiv { background: var(--lon-primar-ljus); border-color: var(--lon-primar); }
.lc-periodhuvud { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: 1.1rem; }
.lc-periodhuvud h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.lc-summor { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.lc-summa { padding: 1rem 1.1rem; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); }
.lc-summa small { display: block; color: var(--lon-dov); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.lc-summa strong { display: block; font-size: 1.3rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.lc-summa.netto { background: var(--lon-primar); border-color: var(--lon-primar); color: #fff; }
.lc-summa.netto small { color: #cfe8ea; }
.lc-avv { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lc-avv li { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .9rem; border-radius: 12px; font-size: .9rem; background: var(--lon-yta); border: 1px solid var(--lon-linje); }
.lc-avv li .lon-ikon { flex: none; margin-top: .15rem; }
.lc-avv li.fel { background: var(--lon-lingon-ljus); border-color: #f1c9bf; color: #7c2d1d; }
.lc-avv li.varning { background: var(--lon-sol-ljus); border-color: #f1dca7; color: #67470c; }
.lc-avv-ok { display: flex; gap: .7rem; align-items: center; padding: .85rem 1rem; border-radius: 12px; background: var(--lon-mossa-ljus); color: #24502f; margin-bottom: 1.5rem; font-weight: 550; }
.lc-beslut { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; margin-top: 1.5rem; }
.lc-beslut .card, .lc-beslut form.card { flex: 1 1 320px; }
.lc-flikar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.lc-flikar a { padding: .35rem .85rem; border-radius: 99px; background: var(--lon-yta); border: 1px solid var(--lon-linje); color: var(--lon-dov) !important; font-size: .84rem; font-weight: 600; text-decoration: none; }
.lc-flikar a.aktiv { background: var(--lon-primar); border-color: var(--lon-primar); color: #fff !important; }

/* ---------------------------------------------------------------- generellt för dessa vyer */
.lon-app .list-group-item { border-color: var(--lon-linje); }
.lon-app code { background: var(--lon-primar-ljus); color: var(--lon-primar-mork); padding: .05rem .35rem; border-radius: 5px; font-size: .85em; }
.lon-app .table > tbody > tr > td .btn-sm { white-space: nowrap; }

/* ---------------------------------------------------------------- tabeller som kort på mobil */
@media (max-width: 760px) {
  .lc-mobilkort thead { display: none; }
  .lc-mobilkort, .lc-mobilkort tbody { display: block; width: 100%; }
  .lc-mobilkort tr { display: block; padding: .85rem 1rem; margin-bottom: .75rem; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: 14px; box-shadow: var(--lon-skugga); }
  .lc-mobilkort td { display: flex; flex-direction: column; gap: .1rem; border: 0 !important; padding: .3rem 0 !important; text-align: left !important; min-width: 0 !important; }
  .lc-mobilkort td::before { content: attr(data-l); color: var(--lon-dov); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .lc-mobilkort td[data-l=""]::before { display: none; }
  .lc-attest .table-responsive, .lc-mobilwrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  .lc-bakgrund { min-width: 0; }
}

/* scheman: valrad */
.lc-schemaval { align-items: flex-start; position: relative; margin-bottom: 1.25rem; }
.lc-schemaval a { padding: .5rem 1rem; font-size: .9rem; }
.lc-nytt { position: relative; }
.lc-nytt summary { list-style: none; cursor: pointer; padding: .5rem 1rem; border-radius: 99px; border: 1px dashed var(--lon-primar); color: var(--lon-primar-mork); font-size: .9rem; font-weight: 650; background: var(--lon-primar-ljus); }
.lc-nytt summary::-webkit-details-marker { display: none; }
.lc-nytt[open] summary { background: var(--lon-primar); color: #fff; border-style: solid; }
.lc-nytt .card { position: absolute; z-index: 20; top: calc(100% + .5rem); left: 0; width: 290px; box-shadow: 0 14px 40px rgba(18, 53, 60, .22); }
.lc-schemagrid input { min-width: 6.6rem !important; font-size: .82rem; padding: .35rem .3rem; }
.lc-forhandsvisning td { white-space: nowrap; }
.lc-forhandsvisning th { white-space: nowrap; font-size: .8rem; }
.lc-forhandsvisning th small { display: block; }
.lc-schemagrid input { min-width: 5.4rem !important; font-size: .78rem; letter-spacing: -.01em; padding: .35rem .15rem; }
.lc-schemagrid th, .lc-schemagrid td { padding: .35rem .2rem !important; }
.lc-schemagrid thead th { font-size: .7rem; }
.lc-forhandsvisning td { font-size: .76rem; padding: .5rem .3rem; }
.lc-forhandsvisning th { padding: .5rem .5rem; }
.lc-schemagrid, .lc-forhandsvisning { table-layout: fixed; width: 100%; }
.lc-schemagrid thead th:first-child, .lc-forhandsvisning thead th:first-child { width: 5.6rem; }
.lc-schemagrid thead th:first-child { width: 3.4rem; }
.lc-schemagrid thead th:last-child { width: 4.6rem; }
.lc-schemagrid input { min-width: 0 !important; width: 100%; }
@media (max-width: 760px) { .lc-schemagrid, .lc-forhandsvisning { table-layout: auto; min-width: 640px; } .lc-schemagrid input { min-width: 5.4rem !important; } }
.lc-schemagrid input { font-size: .72rem; padding: .35rem 0; text-overflow: clip; }
@keyframes lc-skaka { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.lc-skaka { animation: lc-skaka .5s; border-color: var(--lon-lingon) !important; }
.lon-sida:has(.lc-tack) .lon-meddelande { display: none; }
.lc-sammanfattning.card { background: transparent; border: 0; box-shadow: none; padding: .5rem 0 0 !important; }
.lc-sammanfattning .lc-stegkort-huvud { margin-bottom: 1rem; }
.lc-summor { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.lc-summa strong { white-space: nowrap; }
.lc-tal { white-space: nowrap; }
@media (min-width: 761px) { .lc-mobilkort td.lc-tal { padding-left: .4rem; padding-right: .75rem; } }
@media (min-width: 761px) and (max-width: 1500px) {
  .lc-korning .lc-mobilkort td[data-l="Enhet"], .lc-korning .lc-mobilkort thead th:nth-child(2) { display: none; }
  .lc-korning .lc-person { min-width: 0; }
}
@media (max-width: 760px) {
  .lc-korning .lc-mobilkort tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem .6rem; }
  .lc-korning .lc-mobilkort td:first-child, .lc-korning .lc-mobilkort td[data-l="Enhet"] { grid-column: 1 / -1; }
  .lc-korning .lc-mobilkort td[data-l=""]:last-child { grid-column: 2 / -1; align-items: flex-end; }
  .lc-korning .lc-mobilkort td.lc-tal { font-size: .85rem; }
}
@media (max-width: 600px) {
  .lc-stepper .lc-steg-text { display: none; }
  .lc-stepper .lc-steg.active .lc-steg-text { display: block; position: absolute; top: 46px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .76rem; }
  .lc-stepper { margin-bottom: 3rem; }
}
.lc-mastdet.med-detalj { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); }
@media (min-width: 1101px) { .lc-mastdet.med-detalj .lc-rader { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } }
@media (min-width: 768px) { .lc-mastdet.med-detalj .card .row > [class*="col-md-"] { flex: 0 0 auto; width: 50%; } }
.lc-mastdet.med-detalj .lc-rad { flex-wrap: wrap; }
.lc-mastdet.med-detalj .lc-rad .lc-hoger { text-align: left; display: flex; align-items: center; gap: .5rem; width: 100%; padding-left: 52px; }
.lc-mastdet.med-detalj .lc-rad .lc-hoger br { display: none; }
.lc-historik code:empty { display: none; }
.lc-filter > div:has(#rapport) { flex: 2 1 260px; }