/* Visuell finish för Medarbetare-vyerna (kalender, saldo, lönespecifikation, resor). Ligger ovanpå lon.css. */

/* ------------------------------------------------------------------ delade element */
.lon-rubrik { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.lon-rubrik h1 { margin: 0; }
.lon-under { margin: .3rem 0 0; color: var(--lon-dov); max-width: 62ch; }
.lon-rubrik-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lon-sektion { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 2rem 0 .85rem; }
.lon-tillbaka { margin: 0 0 .5rem; font-size: .9rem; }
.lon-hjalp { color: var(--lon-dov); font-size: .85rem; margin: .75rem 0 0; }

.lon-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem; border-radius: 99px; font-size: .78rem; font-weight: 600; background: #e8eeee; color: #3d505a; line-height: 1.4; }
.lon-chip.info { background: var(--lon-primar-ljus); color: var(--lon-primar-mork); }
.lon-chip.sol { background: var(--lon-sol-ljus); color: #7a5410; }
.lon-chip.dot::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c, #9aa8b0); flex: none; }
.lon-chip.dot { background: #fff; border: 1px solid var(--lon-linje); color: var(--lon-ink); font-weight: 500; }
.lon-chip.dot.st-utkast { --c: #6c8ebf; } .lon-chip.dot.st-inskickad { --c: #f0a30a; }
.lon-chip.dot.st-attesterad, .lon-chip.dot.st-utbetald { --c: #2e8b57; } .lon-chip.dot.st-avvisad, .lon-chip.dot.st-tillbaka { --c: #c0392b; }

.lon-tom { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 2.5rem 1rem; color: var(--lon-dov); background: var(--lon-yta); border: 1px dashed #cdd9da; border-radius: var(--lon-radie); }
.lon-tom .lon-ikon { color: var(--lon-sol); }
.lon-tom p { margin: 0; max-width: 44ch; }

/* ------------------------------------------------------------------ kalender */
.lon-snabb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.lon-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
#lon-kalender { padding: 1.1rem 1.1rem .6rem; }
#lon-kalender .fc-toolbar { gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem !important; }
#lon-kalender .fc-toolbar-title { font-size: 1.35rem; text-transform: capitalize; }
#lon-kalender .fc-button-primary { background: #fff; color: var(--lon-ink); border: 1px solid var(--lon-linje); box-shadow: none; font-size: .88rem; padding: .4rem .8rem; }
#lon-kalender .fc-button-primary:hover { background: var(--lon-primar-ljus); border-color: var(--lon-primar-ljus); color: var(--lon-primar-mork); }
#lon-kalender .fc-button-primary:not(:disabled).fc-button-active, #lon-kalender .fc-button-primary:not(:disabled):active { background: var(--lon-primar); border-color: var(--lon-primar); color: #fff; }
#lon-kalender .fc-button-primary:disabled { opacity: .5; }
#lon-kalender .fc-button-group > .fc-button { border-radius: 0; }
#lon-kalender .fc-button-group > .fc-button:first-child { border-radius: 10px 0 0 10px; }
#lon-kalender .fc-button-group > .fc-button:last-child { border-radius: 0 10px 10px 0; }
#lon-kalender .fc-button-group > .fc-button:only-child { border-radius: 10px; }
#lon-kalender .fc-theme-standard td, #lon-kalender .fc-theme-standard th, #lon-kalender .fc-theme-standard .fc-scrollgrid { border-color: var(--lon-linje); }
#lon-kalender .fc-col-header-cell { background: #fafcfc; }
#lon-kalender .fc-col-header-cell-cushion { padding: .6rem .25rem; font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--lon-dov); }
#lon-kalender .fc-daygrid-day-number { font-size: .85rem; font-weight: 600; padding: .35rem .5rem; }
#lon-kalender .fc-day-today .fc-daygrid-day-number { background: var(--lon-primar); color: #fff; border-radius: 99px; min-width: 1.7rem; text-align: center; margin: .25rem; padding: .1rem .35rem; }
#lon-kalender .fc-day-sat, #lon-kalender .fc-day-sun { background: #f8fafa; }
#lon-kalender .fc-daygrid-day-frame { min-height: 6.2rem; }
#lon-kalender .fc-event { border: 0; border-radius: 7px; padding: 2px 6px; margin: 1px 4px 2px; font-size: .78rem; font-weight: 600; box-shadow: 0 1px 2px rgba(18, 53, 60, .12); transition: transform .1s, box-shadow .1s; }
#lon-kalender .fc-event:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(18, 53, 60, .22); }
#lon-kalender .fc-event.fc-event-selected, #lon-kalender .fc-event:focus-visible { outline: 3px solid rgba(31, 111, 120, .4); outline-offset: 1px; }
#lon-kalender .fc-bg-event { opacity: .55; }
#lon-kalender .fc-more-link { font-size: .75rem; font-weight: 650; color: var(--lon-primar); padding-left: .5rem; }
#lon-kalender .fc-list { border-radius: 12px; overflow: hidden; border-color: var(--lon-linje); }
#lon-kalender .fc-list-day-cushion { background: #f3f7f7 !important; font-weight: 650; }
#lon-kalender .fc-list-event:hover td { background: var(--lon-primar-ljus); }
#lon-kalender .fc-highlight { background: rgba(31, 111, 120, .15); }
#lon-kalender .fc-timegrid-now-indicator-line { border-color: var(--lon-lingon); }
@media (max-width: 700px) {
    #lon-kalender { padding: .6rem; }
    #lon-kalender .fc-toolbar-title { font-size: 1.1rem; }
    #lon-kalender .fc-toolbar-chunk { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
}

/* dialog */
#lon-modal .modal-header { border: 0; padding: 1.25rem 1.5rem .25rem; }
#lon-modal .modal-title { font-weight: 700; letter-spacing: -.01em; }
#lon-modal .modal-body { padding: 1rem 1.5rem; }
#lon-modal .modal-footer { border: 0; background: #f7fafa; border-radius: 0 0 18px 18px; padding: .9rem 1.5rem; gap: .5rem; }
.lon-seg { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem; background: #eef3f3; border-radius: 12px; margin: .25rem 0 .25rem; }
.lon-seg button { flex: 1 1 auto; border: 0; background: transparent; padding: .45rem .75rem; border-radius: 9px; font-size: .85rem; font-weight: 600; color: var(--lon-dov); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.lon-seg button:hover:not(:disabled) { background: #fff; color: var(--lon-ink); }
.lon-seg button.aktiv { background: #fff; color: var(--lon-primar-mork); box-shadow: 0 1px 3px rgba(18, 53, 60, .15); }
.lon-seg button:disabled { cursor: default; opacity: .7; }
.lon-seg button:focus-visible { outline: 3px solid rgba(31, 111, 120, .4); outline-offset: 1px; }
#lon-modal .nav-tabs { border: 0; gap: .3rem; padding: .3rem; background: #eef3f3; border-radius: 12px; }
#lon-modal .nav-tabs .nav-link { border: 0; border-radius: 9px; font-weight: 600; font-size: .88rem; color: var(--lon-dov); }
#lon-modal .nav-tabs .nav-link.active { background: #fff; color: var(--lon-primar-mork); box-shadow: 0 1px 3px rgba(18, 53, 60, .15); }
#lon-modal #b-spara-skicka { padding-inline: 1.25rem; }

/* ------------------------------------------------------------------ saldo */
.lon-saldo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.lon-semester { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.75rem; align-items: center; padding: 1.5rem; background: linear-gradient(135deg, #ffffff 0%, #f1f8f8 100%); }
.lon-ring { --p: 0; width: 148px; height: 148px; border-radius: 50%; position: relative; display: grid; place-items: center;
    background: conic-gradient(var(--lon-primar) calc(var(--p) * 1%), #dfeaea 0); }
.lon-ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 1px 3px rgba(18, 53, 60, .08); }
.lon-ring.tom { background: #e9f0f0; color: var(--lon-sol); }
.lon-ring-mitt { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.lon-ring-tal { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--lon-primar-mork); }
.lon-ring-sub { font-size: .78rem; color: var(--lon-dov); font-weight: 600; margin-top: .15rem; }
.lon-semester-text h2 { margin-bottom: .75rem; }
.lon-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin-bottom: .75rem; }
.lon-mini > div { background: #fff; border: 1px solid var(--lon-linje); border-radius: 12px; padding: .6rem .8rem; display: flex; flex-direction: column; }
.lon-mini b { font-size: 1.35rem; letter-spacing: -.02em; color: var(--lon-ink); }
.lon-mini span { font-size: .75rem; color: var(--lon-dov); }
.lon-detalj summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--lon-primar); }
.lon-detalj dl { margin: .6rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .85rem; }
.lon-detalj dt { font-weight: 600; color: var(--lon-dov); } .lon-detalj dd { margin: 0; }
@media (max-width: 640px) { .lon-semester { grid-template-columns: 1fr; justify-items: center; text-align: left; } .lon-semester-text { width: 100%; } .lon-detalj dl { grid-template-columns: 1fr; } }

/* tidslinje */
.lon-tidslinje { list-style: none; margin: 0; padding: 0 0 0 .6rem; position: relative; }
.lon-tidslinje::before { content: ""; position: absolute; left: 1.35rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--lon-linje); }
.lon-tidslinje li { position: relative; display: flex; align-items: center; gap: 1rem; padding: .55rem 0; }
.lon-tl-punkt { position: relative; z-index: 1; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--lon-mossa-ljus); color: var(--lon-mossa); border: 2px solid var(--lon-bg); box-sizing: content-box; }
.lon-tidslinje li.minus .lon-tl-punkt { background: var(--lon-lingon-ljus); color: var(--lon-lingon); }
.lon-tl-text { display: flex; flex-direction: column; min-width: 0; flex: 1; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: 12px; padding: .55rem .9rem; box-shadow: var(--lon-skugga); }
.lon-tl-text span { color: var(--lon-dov); font-size: .88rem; }
.lon-tl-text small { color: #8a99a2; font-size: .75rem; }
.lon-tl-varde { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lon-mossa); }
.lon-tidslinje li.minus .lon-tl-varde { color: var(--lon-lingon); }
@media (max-width: 560px) { .lon-tidslinje li { flex-wrap: wrap; } .lon-tl-varde { margin-left: 2.6rem; } }

/* ------------------------------------------------------------------ lönespecifikation */
.lon-sim { background: linear-gradient(135deg, #12353c 0%, #1f6f78 100%); color: #fff; border-radius: 18px; padding: 1.5rem 1.75rem; margin-bottom: 1.75rem; box-shadow: 0 10px 30px rgba(18, 53, 60, .22); position: relative; overflow: hidden; }
.lon-sim::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 180, 65, .45), transparent 70%); pointer-events: none; }
.lon-sim-topp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; position: relative; }
.lon-sim-topp h2 { margin: 0; color: #fff; }
.lon-sim-topp h2 small { font-weight: 500; opacity: .75; margin-left: .4rem; }
.lon-sim .lon-chip.sol { background: var(--lon-sol); color: #3b2a05; }
.lon-sim-netto { display: flex; flex-direction: column; margin: 1.1rem 0 .75rem; position: relative; }
.lon-sim-etikett { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; font-weight: 600; }
.lon-sim-tal { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lon-sim-tal small { font-size: 1.1rem; font-weight: 600; opacity: .8; }
.lon-sim-not { font-size: .85rem; color: var(--lon-sol); }
.lon-sim-rutor { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; position: relative; }
.lon-sim-rutor > div { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: .55rem .95rem; display: flex; flex-direction: column; min-width: 140px; }
.lon-sim-rutor span { font-size: .75rem; opacity: .8; } .lon-sim-rutor b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lon-sim-kropp { position: relative; }
.lon-sim-kropp .text-muted { color: rgba(255, 255, 255, .72) !important; }
.lon-sim details summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: #fff; }
.lon-sim .table-responsive { background: #fff; color: var(--lon-ink); }
.lon-vadhander-rubrik { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .6rem; color: #fff; }
.lon-vadhander { background: rgba(255, 255, 255, .1); border-radius: 14px; padding: .9rem; margin: 0 !important; }
.lon-vadhander .form-label { color: rgba(255, 255, 255, .85); }
.lon-vadhander .btn-primary { --bs-btn-bg: var(--lon-sol); --bs-btn-border-color: var(--lon-sol); --bs-btn-color: #3b2a05; --bs-btn-hover-bg: #ffc65a; --bs-btn-hover-border-color: #ffc65a; --bs-btn-hover-color: #3b2a05; }
#vh-resultat .alert { color: var(--lon-ink); }

.lon-speclista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.lon-specrad { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(90px, 1fr)) auto; gap: .5rem 1.25rem; align-items: center; padding: 1rem 1.25rem; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); transition: box-shadow .15s, transform .15s; }
.lon-specrad:hover { box-shadow: 0 2px 4px rgba(18, 53, 60, .06), 0 10px 24px rgba(18, 53, 60, .1); transform: translateY(-1px); }
.lon-spec-period { display: flex; flex-direction: column; } .lon-spec-period strong { font-size: 1.05rem; text-transform: capitalize; } .lon-spec-period small { color: var(--lon-dov); }
.lon-spec-tal { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; } .lon-spec-tal span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lon-dov); }
.lon-spec-tal.netto b { color: var(--lon-mossa); font-size: 1.15rem; }
.lon-spec-atg { display: flex; gap: .4rem; }
@media (max-width: 860px) { .lon-specrad { grid-template-columns: 1fr 1fr; } .lon-spec-period { grid-column: 1 / -1; } .lon-spec-atg { grid-column: 1 / -1; } }

.lon-netto-hero { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: .75rem; margin: 1.25rem 0 1.5rem; }
.lon-netto-hero > div { background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); padding: 1rem 1.25rem; display: flex; flex-direction: column; box-shadow: var(--lon-skugga); font-variant-numeric: tabular-nums; }
.lon-netto-hero span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lon-dov); font-weight: 600; }
.lon-netto-hero b { font-size: 1.3rem; letter-spacing: -.01em; }
.lon-netto-hero .netto { background: linear-gradient(135deg, #12353c, #1f6f78); border: 0; color: #fff; }
.lon-netto-hero .netto span { color: rgba(255, 255, 255, .8); } .lon-netto-hero .netto b { font-size: 2rem; letter-spacing: -.02em; } .lon-netto-hero .netto small { font-size: .9rem; opacity: .8; }
@media (max-width: 700px) { .lon-netto-hero { grid-template-columns: 1fr 1fr; } .lon-netto-hero .netto { grid-column: 1 / -1; order: -1; } }
.lon-spec-sektion { margin-bottom: 1.25rem; }
.lon-spec-sektion h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lon-dov); font-weight: 700; margin: 0 0 .5rem .25rem; }
.lon-spec-sektion .table-responsive { margin: 0; }

/* ------------------------------------------------------------------ resor */
.lon-ar-val { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.lon-ar-val strong { font-size: 1.1rem; min-width: 3.2rem; text-align: center; }
.lon-ar-summa { background: var(--lon-primar-ljus); color: var(--lon-primar-mork); border-radius: 99px; padding: .35rem .95rem; font-size: .9rem; }
#resa-form { padding: 1.5rem; }
.lon-forhands { background: var(--lon-sol-ljus); border: 1px solid #f3dfae; color: #67470c; border-radius: 12px; padding: .75rem 1rem; font-size: .92rem; }
.lon-resor { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.lon-resa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem 1.25rem; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-left: 4px solid #9aa8b0; border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); }
.lon-resa.st-utkast { border-left-color: #6c8ebf; } .lon-resa.st-inskickad { border-left-color: #f0a30a; }
.lon-resa.st-attesterad, .lon-resa.st-utbetald { border-left-color: #2e8b57; } .lon-resa.st-avvisad, .lon-resa.st-tillbaka { border-left-color: #c0392b; }
.lon-resa-ikon { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--lon-primar-ljus); color: var(--lon-primar); }
.lon-resa-topp { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lon-resa-rad { color: var(--lon-dov); font-size: .9rem; margin-top: .1rem; }
.lon-resa-syfte { margin-top: .2rem; }
.lon-resa-fork { margin-top: .25rem; font-size: .8rem; color: var(--lon-dov); }
.lon-resa-kvitto { display: inline-block; margin-top: .3rem; font-size: .85rem; font-weight: 600; }
.lon-resa-chef { margin-top: .3rem; font-size: .85rem; color: var(--lon-lingon); font-weight: 600; }
.lon-resa-belopp { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.lon-resa-belopp b { font-size: 1.2rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lon-resa-atg { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
@media (max-width: 600px) { .lon-resa { grid-template-columns: auto 1fr; } .lon-resa-belopp { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }

/* ------------------------------------------------------------------ knappfärger (Joomlas mall överstyr annars primärfärgen) */
.lon-innehall .btn-primary { background-color: var(--lon-primar); border-color: var(--lon-primar); color: #fff; }
.lon-innehall .btn-primary:hover, .lon-innehall .btn-primary:focus { background-color: var(--lon-primar-mork); border-color: var(--lon-primar-mork); color: #fff; }
.lon-innehall .btn-outline-primary { color: var(--lon-primar); border-color: var(--lon-primar); background: transparent; }
.lon-innehall .btn-outline-primary:hover { background: var(--lon-primar); color: #fff; }
.lon-innehall .btn-success { background-color: var(--lon-mossa); border-color: var(--lon-mossa); color: #fff; }
.lon-innehall .btn-success:hover { background-color: #3f7349; border-color: #3f7349; }
.lon-innehall .btn-outline-danger { color: var(--lon-lingon); border-color: var(--lon-lingon); }
.lon-innehall .btn-outline-danger:hover { background: var(--lon-lingon); color: #fff; }
.lon-vadhander .btn-primary { background-color: var(--lon-sol); border-color: var(--lon-sol); color: #3b2a05; }
.lon-vadhander .btn-primary:hover { background-color: #ffc65a; border-color: #ffc65a; color: #3b2a05; }
.lon-vadhander .form-control, .lon-vadhander .form-select { font-size: .88rem; }

/* kalender: schemapass är en diskret bakgrund, inte en mörk knapp */
#lon-kalender .fc-event.lon-schema-ev { background: #e9eef0 !important; color: #55646e !important; box-shadow: none; font-weight: 500; border-left: 3px solid #aab4bd; border-radius: 4px; }
#lon-kalender .fc-event.lon-schema-ev .fc-event-title { color: #55646e; }
.lon-tl-varde { min-width: 7.5rem; text-align: right; }
#lon-modal .modal-footer .btn { padding: .45rem .85rem; }
@media (max-width: 640px) {
    .lon-spec-sektion th:nth-child(1), .lon-spec-sektion td:nth-child(1),
    .lon-spec-sektion th:nth-child(3), .lon-spec-sektion td:nth-child(3),
    .lon-spec-sektion th:nth-child(4), .lon-spec-sektion td:nth-child(4),
    .lon-spec-sektion th:nth-child(6), .lon-spec-sektion td:nth-child(6) { display: none; }
    .lon-spec-sektion td:nth-child(5) { white-space: nowrap; padding-left: .25rem; }
    .lon-netto-hero b { font-size: 1.1rem; }
    .lon-sim { padding: 1.1rem; }
    .lon-sim-rutor > div { flex: 1 1 130px; }
}
@media (max-width: 560px) {
    .lon-tl-text { flex: 1 1 calc(100% - 3rem); }
    .lon-tl-varde { min-width: 0; margin-left: 2.6rem; text-align: left; }
}
#lon-kalender .fc-daygrid-event .fc-event-time { display: none; }
#lon-kalender .fc-daygrid-event { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kompakt lönespecifikation: alla lönerader synliga utan extra klick. */
.lon-spec-kompakt .lon-netto-hero { padding: .8rem 1rem; margin-bottom: 1rem; }
.lon-spec-kompakt .lon-netto-hero .netto b { font-size: 1.8rem; }
.lon-spec-kompakt .lon-spec-sektion { margin-bottom: 1rem; }
.lon-spec-kompakt .lon-spec-sektion h2 { font-size: 1rem; margin: .75rem 0; }
.lon-spec-kompakt .table > :not(caption) > * > * { padding: .35rem .5rem; font-size: .83rem; }
.lon-spec-kompakt .lon-spec-grupp th { background: var(--lon-primar-ljus); color: var(--lon-primar-mork); font-weight: 650; }
.lon-spec-kompakt .lon-sim-netto { padding-block: .65rem; }
.lon-spec-kompakt .lon-sim-tal { font-size: 2rem; }
.lon-spec-kompakt .lon-sim-rutor { padding-block: .5rem; }
.lon-spec-kompakt .lon-sim-kropp { padding: 1rem; }
.lon-vadhander-panel { border-top: 1px solid var(--lon-linje); padding-top: .8rem; }
.lon-vadhander-panel > summary { cursor: pointer; font-size: .85rem; font-weight: 600; }

.lon-app .lon-spec-kompakt .table > :not(caption) > * > * { padding: .25rem .45rem; font-size: .8rem; line-height: 1.45; }
.lon-app .lon-spec-kompakt .table .text-muted { color: var(--lon-dov) !important; }
.lon-app .lon-spec-kompakt .lon-berakning { display: inline-block; margin-left: .5rem; vertical-align: top; font-size: .7rem; }
.lon-app .lon-spec-kompakt .lon-berakning[open] { display: block; margin: .3rem 0; }
.lon-app .lon-spec-kompakt .lon-berakning summary { color: var(--lon-primar-mork); font-size: .7rem; font-weight: 500; }
.lon-sim.lon-spec-kompakt { padding: 1rem 1.2rem; }
.lon-sim.lon-spec-kompakt .lon-sim-topp h2 { font-size: 1.05rem; }
.lon-sim.lon-spec-kompakt .lon-sim-netto { display: inline-flex; padding: 0; margin: .75rem 1.4rem .6rem 0; vertical-align: middle; }
.lon-sim.lon-spec-kompakt .lon-sim-rutor { display: inline-flex; padding: 0; margin: 0; vertical-align: middle; }
.lon-sim.lon-spec-kompakt .lon-sim-kropp { padding: .5rem 0 0; }