/* ===================================================================== HRSC Lön – nordiskt tema
   Ljus, luftig yta; fjordblågrön primärfärg; små glimtar av sol (gul) och lingon (röd). */

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --lon-bg: #f3f6f6;
  --lon-yta: #ffffff;
  --lon-ink: #1c2a33;
  --lon-dov: #5d6e79;
  --lon-linje: #e2e8e9;
  --lon-primar: #1f6f78;
  --lon-primar-mork: #17565d;
  --lon-primar-ljus: #e6f2f2;
  --lon-sol: #f2b441;
  --lon-sol-ljus: #fdf3dc;
  --lon-lingon: #c4513b;
  --lon-lingon-ljus: #fbe9e5;
  --lon-mossa: #4f8a5b;
  --lon-mossa-ljus: #e4f1e7;
  --lon-himmel: #4a8fbf;
  --lon-meny-bg: #12353c;
  --lon-meny-bg2: #0e2a30;
  --lon-meny-text: #cfe3e5;
  --lon-radie: 14px;
  --lon-skugga: 0 1px 2px rgba(18, 53, 60, .06), 0 6px 20px rgba(18, 53, 60, .06);
  --lon-meny-bredd: 280px;
}

/* Joomlas mall får inte lägga sin egen ram runt skalet */
body:has(.lon-app) { margin: 0; padding: 0 !important; background: var(--lon-bg); }
body:has(.lon-app) .container-fluid, body:has(.lon-app) .container { padding: 0 !important; max-width: none !important; }
body:has(.lon-app) > .site-grid, body:has(.lon-app) .site-grid { display: block; }

.lon-app {
  font-family: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss03";
  color: var(--lon-ink);
  background: var(--lon-bg);
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--lon-meny-bredd) minmax(0, 1fr);
  line-height: 1.55;
  --bs-body-font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --bs-body-color: var(--lon-ink);
  --bs-primary: var(--lon-primar);
  --bs-primary-rgb: 31, 111, 120;
  --bs-link-color: var(--lon-primar);
  --bs-link-hover-color: var(--lon-primar-mork);
  --bs-border-color: var(--lon-linje);
  --bs-border-radius: 10px;
  --bs-success: var(--lon-mossa);
  --bs-danger: var(--lon-lingon);
  --bs-warning: var(--lon-sol);
  --bs-info: var(--lon-himmel);
  --bs-secondary-color: var(--lon-dov);
}
.lon-app *, .lon-app *::before, .lon-app *::after { box-sizing: border-box; }
.lon-gast { display: block; }

/* ---------------------------------------------------------------- sidomeny */
.lon-sida-meny {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem 1rem 1rem;
  background: linear-gradient(180deg, var(--lon-meny-bg), var(--lon-meny-bg2));
  color: var(--lon-meny-text);
}
.lon-brand { padding: .25rem .5rem .5rem; }
.lon-app .lon-logga { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.lon-logga-text { font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1; display: inline-flex; flex-direction: column; }
.lon-logga-text small { font-size: .62rem; font-weight: 600; letter-spacing: .16em; color: var(--lon-sol); margin-top: .2rem; }

.lon-profil {
  display: flex; gap: .8rem; align-items: center;
  padding: .85rem; border-radius: var(--lon-radie);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08);
}
.lon-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; color: #12353c;
  background: var(--lon-sol);
}
.lon-avatar.n1 { background: #f2b441; } .lon-avatar.n2 { background: #9fd3c7; } .lon-avatar.n3 { background: #f0a58f; }
.lon-avatar.n4 { background: #a9c7ea; } .lon-avatar.n5 { background: #c9d98f; }
.lon-profil-text { min-width: 0; display: flex; flex-direction: column; }
.lon-profil-text strong { color: #fff; font-weight: 650; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lon-profil-text small { color: var(--lon-meny-text); opacity: .85; font-size: .78rem; line-height: 1.3; }

.lon-roller { display: flex; flex-wrap: wrap; gap: .3rem; padding: .25rem; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.lon-app .lon-sida-meny a.lon-roll {
  flex: 1 1 auto; text-align: center; padding: .38rem .7rem; border-radius: 9px;
  font-size: .8rem; font-weight: 600; color: var(--lon-meny-text); text-decoration: none; white-space: nowrap;
}
.lon-app .lon-sida-meny a.lon-roll:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.lon-app .lon-sida-meny .lon-roll.aktiv { background: #fff; color: var(--lon-primar-mork); }
.lon-app .lon-sida-meny .lon-roller.enkel { background: transparent; padding: 0 .25rem; }
.lon-app .lon-sida-meny .lon-roller.enkel .lon-roll { cursor: default; background: rgba(255, 255, 255, .1); color: #fff; flex: 0 0 auto; padding: .25rem .8rem; }

.lon-meny { display: flex; flex-direction: column; gap: .15rem; margin-top: .25rem; }
.lon-app .lon-sida-meny .lon-menyval {
  position: relative; display: flex; align-items: center; gap: .8rem;
  padding: .62rem .8rem; border-radius: 11px; text-decoration: none;
  color: var(--lon-meny-text); font-weight: 500; font-size: .95rem;
  transition: background .15s, color .15s;
}
.lon-app .lon-sida-meny .lon-menyval:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lon-app .lon-sida-meny a.lon-menyval.aktiv { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }
.lon-menyval.aktiv::before { content: ""; position: absolute; left: -1rem; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: var(--lon-sol); }
.lon-menyval .lon-ikon { opacity: .9; flex: none; }
.lon-badge { margin-left: auto; min-width: 1.5rem; padding: .05rem .5rem; border-radius: 99px; background: var(--lon-sol); color: #3b2a05; font-size: .75rem; font-weight: 700; text-align: center; }
.lon-meny-fot { margin-top: auto; padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------------- innehåll */
.lon-innehall { min-width: 0; }
.lon-sida { max-width: 1280px; margin: 0 auto; padding: 2rem 2.25rem 4rem; }
.lon-app h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 1.1rem; color: var(--lon-ink); }
.lon-app h1.h3 { font-size: 1.75rem; }
.lon-app h2, .lon-app .h5 { font-weight: 650; letter-spacing: -.01em; }
.lon-innehall a:not(.btn):not(.lon-ruta):not(.nav-link):not(.page-link):not(.dropdown-item):not([class*="lon-mstart"]) { color: var(--lon-primar); }
.lon-innehall a:not(.btn):not(.lon-ruta):not(.nav-link):not(.page-link):not(.dropdown-item):not([class*="lon-mstart"]):hover { color: var(--lon-primar-mork); }
.lon-app .text-muted, .lon-app .text-secondary { color: var(--lon-dov) !important; }

.lon-topp { display: none; }
.lon-menytoggle, .lon-skugga { display: none; }

/* kort */
.lon-app .card, .lon-kort {
  background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie);
  box-shadow: var(--lon-skugga);
}
.lon-kort { padding: 1.25rem; }
.lon-app .card-body { padding: 1.25rem; }
.lon-app .card.border-primary { border-color: var(--lon-primar) !important; }
.lon-app .card.border-danger { border-color: var(--lon-lingon) !important; }
.lon-stor { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--lon-primar-mork); }

/* knappar */
.lon-app .btn { border-radius: 10px; font-weight: 600; padding: .5rem 1rem; transition: background .15s, box-shadow .15s, transform .05s; }
.lon-app .btn:active { transform: translateY(1px); }
.lon-app .btn-sm { padding: .3rem .7rem; font-size: .85rem; }
.lon-app .btn-primary { --bs-btn-bg: var(--lon-primar); --bs-btn-border-color: var(--lon-primar); --bs-btn-hover-bg: var(--lon-primar-mork); --bs-btn-hover-border-color: var(--lon-primar-mork); --bs-btn-active-bg: var(--lon-primar-mork); --bs-btn-active-border-color: var(--lon-primar-mork); --bs-btn-disabled-bg: var(--lon-primar); --bs-btn-disabled-border-color: var(--lon-primar); }
.lon-app .btn-outline-primary { --bs-btn-color: var(--lon-primar); --bs-btn-border-color: var(--lon-primar); --bs-btn-hover-bg: var(--lon-primar); --bs-btn-hover-border-color: var(--lon-primar); --bs-btn-active-bg: var(--lon-primar-mork); }
.lon-app .btn-success { --bs-btn-bg: var(--lon-mossa); --bs-btn-border-color: var(--lon-mossa); --bs-btn-hover-bg: #3f7349; --bs-btn-hover-border-color: #3f7349; }
.lon-app .btn-outline-success { --bs-btn-color: var(--lon-mossa); --bs-btn-border-color: var(--lon-mossa); --bs-btn-hover-bg: var(--lon-mossa); --bs-btn-hover-border-color: var(--lon-mossa); }
.lon-app .btn-danger { --bs-btn-bg: var(--lon-lingon); --bs-btn-border-color: var(--lon-lingon); --bs-btn-hover-bg: #a4402d; --bs-btn-hover-border-color: #a4402d; }
.lon-app .btn-outline-danger { --bs-btn-color: var(--lon-lingon); --bs-btn-border-color: var(--lon-lingon); --bs-btn-hover-bg: var(--lon-lingon); --bs-btn-hover-border-color: var(--lon-lingon); }
.lon-app .btn-outline-secondary { --bs-btn-color: var(--lon-dov); --bs-btn-border-color: var(--lon-linje); --bs-btn-hover-bg: #eef2f2; --bs-btn-hover-color: var(--lon-ink); --bs-btn-hover-border-color: var(--lon-linje); }
.lon-app .btn-warning { --bs-btn-bg: var(--lon-sol); --bs-btn-border-color: var(--lon-sol); --bs-btn-color: #3b2a05; --bs-btn-hover-bg: #e5a52e; --bs-btn-hover-color: #3b2a05; }
.lon-app a:focus-visible, .lon-app button:focus-visible, .lon-app .form-control:focus, .lon-app .form-select:focus { outline: 3px solid rgba(31, 111, 120, .35); outline-offset: 2px; }

/* formulär */
.lon-app .form-control, .lon-app .form-select { border-radius: 10px; border-color: #d3dcdd; padding: .5rem .75rem; background-color: #fff; }
.lon-app .form-control:focus, .lon-app .form-select:focus { border-color: var(--lon-primar); box-shadow: 0 0 0 .2rem rgba(31, 111, 120, .15); outline: none; }
.lon-app .form-label { font-weight: 600; font-size: .85rem; color: var(--lon-ink); margin-bottom: .25rem; }
.lon-app .form-check-input:checked { background-color: var(--lon-primar); border-color: var(--lon-primar); }

/* tabeller */
.lon-app .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(31, 111, 120, .035); --bs-table-hover-bg: rgba(31, 111, 120, .06); font-size: .93rem; }
.lon-app .table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lon-dov); font-weight: 650; border-bottom: 1px solid var(--lon-linje); background: #fafcfc; white-space: nowrap; }
.lon-app .table > :not(caption) > * > * { padding: .65rem .75rem; border-bottom-color: var(--lon-linje); }
.lon-app .table-responsive { background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); box-shadow: var(--lon-skugga); }
.lon-app .table-responsive > .table { margin: 0; }
.lon-app .card .table-responsive { border: 0; box-shadow: none; }

/* badges, alerts */
.lon-app .badge { border-radius: 99px; font-weight: 600; padding: .38em .7em; }
.lon-app .badge.bg-secondary { background: #e8eeee !important; color: #3d505a; }
.lon-app .badge.bg-info { background: var(--lon-primar-ljus) !important; color: var(--lon-primar-mork) !important; }
.lon-app .badge.bg-success { background: var(--lon-mossa-ljus) !important; color: #2f6a3c; }
.lon-app .badge.bg-danger { background: var(--lon-lingon-ljus) !important; color: #9b3a27; }
.lon-app .badge.bg-warning { background: var(--lon-sol-ljus) !important; color: #7a5410 !important; }
.lon-app .alert { border: 0; border-left: 4px solid; border-radius: 12px; padding: .85rem 1rem; box-shadow: var(--lon-skugga); }
.lon-app .alert-success { background: var(--lon-mossa-ljus); border-color: var(--lon-mossa); color: #24502f; }
.lon-app .alert-danger { background: var(--lon-lingon-ljus); border-color: var(--lon-lingon); color: #7c2d1d; }
.lon-app .alert-warning { background: var(--lon-sol-ljus); border-color: var(--lon-sol); color: #67470c; }
.lon-app .alert-info { background: var(--lon-primar-ljus); border-color: var(--lon-primar); color: var(--lon-primar-mork); }
.lon-meddelande { margin-bottom: 1.25rem; }
.lon-pill { display: inline-block; padding: .12rem .65rem; border-radius: 99px; color: #fff; margin-right: .25rem; font-size: .78rem; font-weight: 600; }

/* flikar, paginering, modaler */
.lon-app .nav-pills .nav-link { border-radius: 10px; color: var(--lon-dov); font-weight: 600; }
.lon-app .nav-pills .nav-link.active { background: var(--lon-primar); color: #fff; }
.lon-app .nav-tabs .nav-link.active { color: var(--lon-primar-mork); border-bottom-color: var(--lon-primar); font-weight: 650; }
.lon-app .page-link { color: var(--lon-primar); border-radius: 8px; margin: 0 .1rem; }
.lon-app .page-item.active .page-link { background: var(--lon-primar); border-color: var(--lon-primar); }
.lon-app .progress-bar { background: var(--lon-primar); }
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(18, 53, 60, .28); }
.modal-header, .modal-footer { border-color: var(--lon-linje); }

/* kalender (FullCalendar) */
#lon-kalender { min-height: 520px; background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: var(--lon-radie); padding: 1rem; box-shadow: var(--lon-skugga);
  --fc-border-color: var(--lon-linje); --fc-button-bg-color: var(--lon-primar); --fc-button-border-color: var(--lon-primar);
  --fc-button-hover-bg-color: var(--lon-primar-mork); --fc-button-hover-border-color: var(--lon-primar-mork);
  --fc-button-active-bg-color: var(--lon-primar-mork); --fc-button-active-border-color: var(--lon-primar-mork);
  --fc-today-bg-color: var(--lon-sol-ljus); --fc-event-border-color: transparent; --fc-neutral-bg-color: #f5f8f8; --fc-page-bg-color: transparent;
  font-family: inherit; }
#lon-kalender .fc-event { cursor: pointer; border-radius: 6px; padding: 1px 4px; font-size: .8rem; }
#lon-kalender .fc-toolbar-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
#lon-kalender .fc-button { border-radius: 10px; font-weight: 600; text-transform: none; }
#lon-kalender .fc-col-header-cell-cushion, #lon-kalender .fc-daygrid-day-number { color: var(--lon-ink); text-decoration: none; }
.lon-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .75rem; }

/* ---------------------------------------------------------------- startsida */
.lon-hej { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.lon-hej h1 { margin: 0; font-size: 2rem; }
.lon-hej p { margin: .25rem 0 0; color: var(--lon-dov); }
.lon-datum { color: var(--lon-dov); font-size: .9rem; }
.lon-rutor { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.lon-ruta {
  position: relative; display: flex; flex-direction: column; gap: .35rem; 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);
  text-decoration: none !important; color: var(--lon-ink) !important; transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.lon-ruta:hover { transform: translateY(-2px); border-color: #c5d6d8; box-shadow: 0 2px 4px rgba(18, 53, 60, .06), 0 12px 28px rgba(18, 53, 60, .1); }
.lon-ruta .lon-ruta-ikon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--lon-primar-ljus); color: var(--lon-primar); }
.lon-ruta.sol .lon-ruta-ikon { background: var(--lon-sol-ljus); color: #9a6a0b; }
.lon-ruta.lingon .lon-ruta-ikon { background: var(--lon-lingon-ljus); color: var(--lon-lingon); }
.lon-ruta.mossa .lon-ruta-ikon { background: var(--lon-mossa-ljus); color: var(--lon-mossa); }
.lon-ruta .lon-ruta-etikett { font-size: .8rem; font-weight: 600; color: var(--lon-dov); text-transform: uppercase; letter-spacing: .05em; margin-top: .35rem; }
.lon-ruta .lon-ruta-varde { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.lon-ruta .lon-ruta-not { font-size: .85rem; color: var(--lon-dov); }
.lon-ruta .lon-ruta-pil { position: absolute; right: 1rem; top: 1rem; color: #aebfc2; }
.lon-lista { list-style: none; margin: 0; padding: 0; }
.lon-lista li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--lon-linje); }
.lon-lista li:last-child { border-bottom: 0; }
.lon-lista .tid { flex: none; width: 5.5rem; font-weight: 600; color: var(--lon-primar-mork); font-size: .9rem; }
.lon-kolumner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; }

/* ---------------------------------------------------------------- gäst/publik signering */
.lon-gasthuvud { padding: 1rem 2rem; background: linear-gradient(90deg, var(--lon-meny-bg), var(--lon-meny-bg2)); }
.lon-gast .lon-sida { max-width: 880px; }

/* ---------------------------------------------------------------- mobil */
@media (max-width: 991px) {
  .lon-app { grid-template-columns: minmax(0, 1fr); }
  .lon-topp {
    display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 30;
    padding: .6rem 1rem; background: var(--lon-meny-bg); color: #fff;
  }
  .lon-topp-namn { margin-left: auto; font-size: .85rem; color: var(--lon-meny-text); }
  .lon-hamburger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, .1); }
  .lon-sida-meny { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: min(86vw, 320px); transform: translateX(-102%); transition: transform .25s ease, box-shadow .25s ease; box-shadow: none; }
  .lon-menytoggle:checked ~ .lon-sida-meny { transform: none; box-shadow: 8px 0 40px rgba(0, 0, 0, .35); }
  .lon-menytoggle:checked ~ .lon-skugga { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10, 25, 30, .5); }
  .lon-sida { padding: 1.25rem 1rem 3rem; }
  .lon-app h1, .lon-hej h1 { font-size: 1.5rem; }
  #lon-kalender .fc-toolbar { flex-direction: column; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .lon-app * { transition: none !important; } }
@media print { .lon-sida-meny, .lon-topp { display: none !important; } .lon-app { display: block; } }

/* Webbplatsmallens (Cassiopeia) egna knappfärger får inte vinna över temat */
.lon-app .btn-primary, .lon-app .btn-primary:focus { background-color: var(--lon-primar); border-color: var(--lon-primar); color: #fff; }
.lon-app .btn-primary:hover, .lon-app .btn-primary:active { background-color: var(--lon-primar-mork); border-color: var(--lon-primar-mork); color: #fff; }
.lon-app .btn-outline-primary { color: var(--lon-primar); border-color: var(--lon-primar); background-color: transparent; }
.lon-app .btn-outline-primary:hover { background-color: var(--lon-primar); color: #fff; }
.lon-app .btn-success { background-color: var(--lon-mossa); border-color: var(--lon-mossa); color: #fff; }
.lon-app .btn-danger { background-color: var(--lon-lingon); border-color: var(--lon-lingon); color: #fff; }
.lon-app .btn-outline-danger { color: var(--lon-lingon); border-color: var(--lon-lingon); background-color: transparent; }
.lon-app .btn-outline-danger:hover { background-color: var(--lon-lingon); color: #fff; }
.lon-app .btn-outline-success { color: var(--lon-mossa); border-color: var(--lon-mossa); background-color: transparent; }
.lon-app .btn-outline-success:hover { background-color: var(--lon-mossa); color: #fff; }
.lon-app .lon-sida-meny .lon-roller.enkel .lon-roll { color: #fff !important; }

/* Samma utseende som menylänkarna; utloggning använder ett säkert POST-formulär. */
.lon-app .lon-logga-ut { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; line-height: inherit; }
.lon-app .lon-logga-ut:focus-visible { outline: 2px solid var(--lon-sol); outline-offset: 2px; }
.lon-app [hidden] { display: none !important; }

/* Publik HRSC-startsida: varm pappersyta, skogsgrönt och en egen landskapsvinjett. */
.lon-gast:has(.lon-landing) { background: #f7f6f0; color: #223e37; }
.lon-gast:has(.lon-landing) .lon-gasthuvud { background: #f7f6f0; border-bottom: 1px solid #dcded4; padding: 1.35rem max(1.5rem, calc((100vw - 1200px) / 2)); }
.lon-gast:has(.lon-landing) .lon-gasthuvud { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lon-app .lon-header-login { color: #284e3f; border: 1px solid #bdc9b8; border-radius: 7px; padding: .5rem .9rem; font-size: .8rem; font-weight: 600; text-decoration: none; }
.lon-header-login:hover { background: #eaf0e6; }
.lon-header-login:focus-visible { outline: 2px solid #49795e; outline-offset: 3px; }
.lon-gast:has(.lon-landing) .lon-logga { color: #223e37; }
.lon-gast:has(.lon-landing) .lon-logga-text small { color: #527369; }
.lon-gast:has(.lon-landing) .lon-sida { max-width: 1250px; margin: 0 auto; padding: 0 1.5rem; }
.lon-valkommen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; padding: 4.5rem 0 3rem; }
.lon-overrubrik { color: #44675c; font-size: .72rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 1.5rem; }
.lon-overrubrik > span { display: inline-block; width: 7px; height: 7px; background: #648878; border-radius: 50%; margin-right: .5rem; }
.lon-app .lon-valkommen h1 { font-size: clamp(2.5rem, 4.8vw, 4.4rem); font-weight: 550; line-height: 1.1; letter-spacing: -.055em; margin: 0; }
.lon-valkommen h1 em { font-family: Georgia, serif; font-weight: 400; color: #4e7867; letter-spacing: -.05em; }
.lon-ingress { font-size: 1.08rem; color: #5a6b62; line-height: 1.8; margin: 1.7rem 0; }
.lon-app .lon-upptack { display: inline-flex; align-items: center; gap: 1rem; color: #284f42; font-size: .86rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid #bcc7b9; padding-bottom: .4rem; }
.lon-upptack:hover { border-color: #284f42; }
.lon-landskap { margin-top: 2rem; max-width: 530px; }
.lon-landskap svg { display: block; width: 100%; height: auto; }
.lon-landskap > span { display: block; font-size: .68rem; color: #66796b; letter-spacing: .04em; margin-top: .7rem; }
.lon-login { scroll-margin-top: 1.5rem; position: relative; background: #fffefa; border: 1px solid #e1e4d9; border-radius: 22px; padding: clamp(1.5rem, 3.5vw, 3rem); box-shadow: 0 18px 65px -30px #263f383b; }
.lon-login-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #355a48; background: #eaf0e6; margin-bottom: 1.8rem; }
.lon-login .lon-overrubrik { font-size: .65rem; margin-bottom: .6rem; }
.lon-app .lon-login h2 { font-size: 1.9rem; letter-spacing: -.045em; font-weight: 600; margin: 0 0 .6rem; }
.lon-login > p:not(.lon-overrubrik) { font-size: .87rem; color: #657168; margin: 0; }
.lon-login form { display: flex; flex-direction: column; gap: .6rem; margin: 2rem 0 1.5rem; }
.lon-login label { font-weight: 600; font-size: .78rem; }
.lon-login input:not([type="hidden"]) { display: block; box-sizing: border-box; min-width: 0; width: 100%; padding: .85rem 1rem; border: 1px solid #dce1d6; border-radius: 9px; background: #fffefa; color: #223e37; font: inherit; font-size: .88rem; line-height: 1.5; margin-bottom: .6rem; }
.lon-login input::placeholder { color: #7c857c; }
.lon-login input:focus-visible { outline: 2px solid #48775f; outline-offset: 2px; border-color: #48775f; }
.lon-password-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .35rem; }
.lon-app .lon-password-label a { font-size: .72rem; color: #4f6d5f; text-underline-offset: 3px; }
.lon-app .lon-login-knapp { display: flex; justify-content: space-between; align-items: center; border: 1px solid #284e3f; border-radius: 9px; padding: .9rem 1.1rem; margin-top: .4rem; background: #284e3f; color: white; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.lon-login-knapp:hover { background: #193a2d; }
.lon-login-knapp:focus-visible, .lon-landing a:focus-visible { outline: 2px solid #49795e; outline-offset: 4px; }
.lon-login-hjalp { border-top: 1px solid #e5e7df; padding-top: 1.4rem; font-size: .75rem; color: #687468; }
.lon-login-hjalp strong { color: #3e5548; font-weight: 600; }
.lon-login-hjalp p { margin: .35rem 0 0; line-height: 1.7; }
.lon-mojligheter { border-top: 1px solid #dcded4; padding-block: 3rem 4rem; scroll-margin-top: 1.5rem; }
.lon-mojligheter-huvud { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 3rem; align-items: end; margin-bottom: 2rem; }
.lon-mojligheter-huvud .lon-overrubrik { grid-column: 1 / -1; margin: 0; }
.lon-app .lon-mojligheter h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; font-weight: 500; letter-spacing: -.045em; margin: 0; }
.lon-mojligheter-huvud > p:last-child { color: #647166; font-size: .88rem; max-width: 19rem; margin: 0 0 .2rem auto; }
.lon-valkommen-funktioner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lon-valkommen-funktioner section { padding: 1.7rem; background: #edf0e7; border-radius: 14px; }
.lon-valkommen-funktioner section:nth-child(2) { background: #f0ecdf; }
.lon-valkommen-funktioner section:nth-child(3) { background: #e7eeea; }
.lon-funktion-topp { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; color: #456956; }
.lon-funktion-topp > span { font-size: .7rem; color: #748175; }
.lon-app .lon-valkommen-funktioner h3 { font-size: 1.05rem; letter-spacing: -.02em; font-weight: 600; margin: 0 0 .65rem; }
.lon-valkommen-funktioner p { font-size: .83rem; line-height: 1.8; color: #5f6d60; margin: 0 0 1.5rem; }
.lon-funktion-etikett { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: #49614f; }
.lon-landing-fot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; border-top: 1px solid #dcded4; padding: 1.5rem 0; color: #647365; font-size: .72rem; }
.lon-landing-fot span span { margin: 0 .6rem; color: #a7b1a0; }
@media (max-width: 767px) {
  .lon-valkommen { grid-template-columns: minmax(0, 1fr); padding-top: 2.5rem; gap: 2.5rem; }
  .lon-landskap { max-width: 420px; }
  .lon-app .lon-valkommen h1 { font-size: clamp(2.5rem, 8vw, 3.8rem); }
  .lon-mojligheter-huvud { grid-template-columns: minmax(0, 1fr); }
  .lon-mojligheter-huvud > p:last-child { margin: .4rem 0 0; }
  .lon-valkommen-funktioner { grid-template-columns: minmax(0, 1fr); }
  .lon-funktion-topp { margin-bottom: 1.3rem; }
}

/* Självservice för medarbetarens kontaktuppgifter. */
.lon-minauppgifter { max-width: 760px; }
.lon-minauppgifter h2 { font-size: 1.25rem; margin-top: 0; }

/* Ren, kompakt inloggningssida med formuläret i fokus. */
.lon-landing-kompakt { max-width: 440px; margin: 0 auto; }
.lon-landing-kompakt .lon-valkommen { display: block; padding: clamp(1.25rem, 4vh, 2.5rem) 0 0; }
.lon-landing-kompakt .lon-valkommen-intro { text-align: center; margin-bottom: 1.25rem; }
.lon-landing-kompakt .lon-overrubrik { font-size: .65rem; margin-bottom: .65rem; }
.lon-app .lon-landing-kompakt h1 { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.2; letter-spacing: -.04em; font-weight: 550; }
.lon-landing-kompakt .lon-ingress { margin: .65rem 0 0; font-size: .82rem; line-height: 1.6; }
.lon-landing-kompakt .lon-login { padding: 1.7rem 2rem; border-radius: 16px; box-shadow: 0 12px 40px -25px #263f383b; }
.lon-app .lon-landing-kompakt .lon-login h2 { font-size: 1.35rem; }
.lon-landing-kompakt .lon-login > p { font-size: .8rem; }
.lon-landing-kompakt .lon-login form { margin: 1.35rem 0; gap: .5rem; }
.lon-landing-kompakt .lon-login input:not([type="hidden"]) { padding: .7rem .85rem; }
.lon-landing-kompakt .lon-login-hjalp { padding-top: 1rem; font-size: .7rem; }
.lon-landing-kompakt .lon-landing-fot { justify-content: center; border: 0; font-size: .65rem; padding: 1rem 0; }
@media (max-width: 480px) { .lon-landing-kompakt .lon-login { padding: 1.3rem; } }

/* Tydlig rollkontext och personliga snabbval. */
.lon-app .lon-logga-text { font-size: 1.02rem; }
.lon-logga-text small { font-size: .5rem; letter-spacing: .05em; }
.lon-start-snabb { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 1.7rem; margin-bottom: 1.4rem; border-radius: 18px; background: linear-gradient(120deg,#e6f2ed,#f1f4e7); border: 1px solid #dce7dc; }
.lon-start-snabb .lon-overrubrik { margin-bottom: .5rem; display: block; }
.lon-start-snabb h2 { font-size: 1.4rem; letter-spacing: -.025em; margin: 0 0 .4rem; }
.lon-start-snabb p { margin: 0; color: var(--lon-dov); font-size: .9rem; }
.lon-start-lankar { display: flex; align-items: stretch; flex-direction: column; gap: .6rem; min-width: 260px; }
.lon-start-lankar > a:last-child { font-size: .85rem; text-align: center; }
.lon-personlig-start .lon-ruta { padding: 1rem; }
.lon-personlig-start .lon-ruta-varde { font-size: 1.55rem; }
.lon-personlig-start .lon-lista a { text-decoration: none; color: var(--lon-primar-mork); }
.lon-personlig-start .lon-lista a:hover { text-decoration: underline; }
@media(max-width:767px) { .lon-start-snabb { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.25rem; } .lon-start-lankar { min-width: 0; } }
@media(max-width:480px) { .lon-topp-namn { display: none; } }

/* ===================================================================== Inloggning (0.2.1)
   Delad layout: varumärkespanel till vänster, luftigt formulär till höger. */
.lon-app.lon-gast-start { display: block; min-height: 100vh; background: #fff; }
.lon-inlogg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.lon-inlogg-panel { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 85% 10%, rgba(242,180,65,.18), transparent 55%), linear-gradient(160deg, #1b4a52 0%, #12353c 55%, #0d272c 100%); }
.lon-inlogg-panel-inre { position: relative; height: 100%; display: flex; flex-direction: column; padding: clamp(2rem, 4vw, 3.5rem); }
.lon-inlogg-panel .lon-logga { pointer-events: none; }
.lon-inlogg-budskap { margin: auto 0; max-width: 30rem; padding-bottom: 4rem; }
.lon-app .lon-inlogg-budskap h2 { color: #fff; font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; margin: 0 0 1rem; }
.lon-inlogg-budskap p { color: #cfe3e5; font-size: 1.05rem; margin: 0 0 2rem; }
.lon-inlogg-budskap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.lon-inlogg-budskap li { display: flex; align-items: center; gap: .75rem; color: #e4f0f1; font-size: .95rem; }
.lon-inlogg-budskap li .lon-ikon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.09); color: var(--lon-sol); }
.lon-inlogg-fjord { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 140px; }

.lon-inlogg-form { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2.5rem 1.5rem 1.5rem; }
.lon-inlogg-mobillogga { display: none; }
.lon-inlogg-ruta { width: 100%; max-width: 380px; margin: auto 0; }
.lon-app .lon-inlogg-ruta h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin: 0 0 .4rem; }
.lon-inlogg-ingress { color: var(--lon-dov); margin: 0 0 1.75rem; font-size: .95rem; }
.lon-inlogg-ruta .lon-meddelande { margin-bottom: 1.25rem; font-size: .9rem; box-shadow: none; }
.lon-inlogg-formular { display: grid; gap: 1.1rem; }
.lon-falt { display: grid; gap: .4rem; }
.lon-falt label { font-weight: 600; font-size: .85rem; }
.lon-falt-rad { display: flex; justify-content: space-between; align-items: baseline; }
.lon-falt-rad a { font-size: .82rem; }
.lon-inlogg input[type=text], .lon-inlogg input[type=password], .lon-inlogg input[type=email] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--lon-ink);
  padding: .78rem .9rem; border: 1px solid #d3dcdd; border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.lon-inlogg input[type=text]:focus, .lon-inlogg input[type=password]:focus, .lon-inlogg input[type=email]:focus { outline: none; border-color: var(--lon-primar); box-shadow: 0 0 0 4px rgba(31,111,120,.14); }
.lon-losen { position: relative; }
.lon-losen input { padding-right: 4.2rem !important; }
.lon-visa-losen { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--lon-primar); font: inherit; font-size: .82rem; font-weight: 600; padding: .35rem .55rem; border-radius: 7px; cursor: pointer; }
.lon-visa-losen:hover { background: var(--lon-primar-ljus); }
.lon-kom-ihag { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--lon-dov); font-weight: 500; }
.lon-kom-ihag input { width: 1.05rem; height: 1.05rem; accent-color: var(--lon-primar); }
.lon-app .lon-inlogg .lon-login-knapp { display: block; width: 100%; margin-top: .25rem; padding: .85rem 1rem; border: 0; border-radius: 10px;
  background: var(--lon-primar); color: #fff; font: inherit; font-size: 1rem; font-weight: 650; cursor: pointer; transition: background .15s, transform .05s; }
.lon-app .lon-inlogg .lon-login-knapp:hover { background: var(--lon-primar-mork); }
.lon-app .lon-inlogg .lon-login-knapp:active { transform: translateY(1px); }
.lon-app .lon-inlogg .lon-login-knapp:focus-visible { outline: 3px solid rgba(31,111,120,.35); outline-offset: 2px; }
.lon-inlogg-hjalp { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--lon-linje); font-size: .85rem; color: var(--lon-dov); line-height: 1.6; }
.lon-inlogg-hjalp a { display: inline-block; margin-top: .25rem; }
.lon-inlogg-fot { margin-top: 2rem; font-size: .75rem; color: #8a979e; }

@media (max-width: 899px) {
  .lon-inlogg { grid-template-columns: minmax(0, 1fr); }
  .lon-inlogg-panel { display: none; }
  .lon-inlogg-form { justify-content: flex-start; padding: 1.25rem 1.25rem 1rem; background: linear-gradient(180deg, #eef5f5 0, #fff 220px); }
  .lon-inlogg-mobillogga { display: block; align-self: flex-start; margin-bottom: 2.5rem; }
  .lon-inlogg-mobillogga .lon-logga { color: var(--lon-ink); }
  .lon-inlogg-mobillogga .lon-logga-text small { color: var(--lon-primar); }
  .lon-inlogg-ruta { margin: 0; }
  .lon-app .lon-inlogg-ruta h1 { font-size: 1.75rem; }
}

/* ===================================================================== Medarbetarens startsida (0.2.1) */
.lon-mstart { max-width: 1100px; }
.lon-mstart-hej { margin-bottom: 1.75rem; }
.lon-app .lon-mstart-hej h1 { font-size: 2.1rem; margin: .15rem 0 .35rem; }
.lon-mstart-hej p { margin: 0; color: var(--lon-dov); font-size: 1rem; }
.lon-mstart-snabb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.75rem; }
.lon-app .lon-mstart-snabb a { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--lon-yta);
  border: 1px solid var(--lon-linje); color: var(--lon-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.lon-app .lon-mstart-snabb a:hover { border-color: var(--lon-primar); box-shadow: 0 8px 24px -14px rgba(18,53,60,.35); transform: translateY(-1px); color: var(--lon-ink); }
.lon-mstart-snabb strong { display: block; font-size: .95rem; font-weight: 650; }
.lon-mstart-snabb small { display: block; color: var(--lon-dov); font-size: .8rem; margin-top: .1rem; }
.lon-mstart-ikon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lon-primar-ljus); color: var(--lon-primar); }
.lon-mstart-ikon.sol { background: var(--lon-sol-ljus); color: #9a6a0b; }
.lon-mstart-ikon.mossa { background: var(--lon-mossa-ljus); color: var(--lon-mossa); }

.lon-mstart-tal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--lon-linje); border-radius: 16px; background: var(--lon-yta);
  box-shadow: var(--lon-skugga); margin-bottom: 1.75rem; overflow: hidden; }
.lon-app .lon-mstart-kpi { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: 1.15rem 1.3rem; text-decoration: none; color: var(--lon-ink); border-left: 1px solid var(--lon-linje); transition: background .15s; }
.lon-mstart-kpi:first-child { border-left: 0; }
.lon-app .lon-mstart-kpi:hover { background: #f7fafa; color: var(--lon-ink); }
.lon-mstart-kpi-etikett::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; vertical-align: 1px; background: var(--lon-primar); }
.lon-mstart-kpi.sol .lon-mstart-kpi-etikett::before { background: var(--lon-sol); } .lon-mstart-kpi.lingon .lon-mstart-kpi-etikett::before { background: var(--lon-lingon); } .lon-mstart-kpi.mossa .lon-mstart-kpi-etikett::before { background: var(--lon-mossa); }
.lon-mstart-kpi-etikett { font-size: .78rem; font-weight: 600; color: var(--lon-dov); }
.lon-mstart-kpi-varde { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.lon-mstart-kpi.lingon .lon-mstart-kpi-varde { color: var(--lon-lingon); }
.lon-mstart-kpi-not { font-size: .8rem; color: var(--lon-dov); }

.lon-mstart-listor { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; align-items: start; }
.lon-mstart-lista { background: var(--lon-yta); border: 1px solid var(--lon-linje); border-radius: 16px; padding: 1.1rem 1.25rem .6rem; }
.lon-mstart-lista-topp { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.lon-app .lon-mstart-lista h2 { font-size: 1rem; font-weight: 650; margin: 0; }
.lon-mstart-lista-topp a { font-size: .8rem; }
.lon-mstart-lista ul { list-style: none; margin: 0; padding: 0; }
.lon-mstart-lista li { display: flex; align-items: center; gap: .75rem; padding: .62rem 0; border-top: 1px solid var(--lon-linje); font-size: .9rem; }
.lon-mstart-lista li:first-child { border-top: 0; }
.lon-mstart-tid { flex: none; min-width: 4.6rem; color: var(--lon-dov); font-size: .82rem; font-variant-numeric: tabular-nums; }
.lon-app .lon-mstart-lista li a.lon-mstart-lank { color: var(--lon-ink); text-decoration: none; flex: 1; min-width: 0; }
.lon-app .lon-mstart-lista li a.lon-mstart-lank:hover { color: var(--lon-primar); text-decoration: underline; }
.lon-mstart-status { margin-left: auto; flex: none; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 99px; background: #eef2f2; color: #3d505a; }
.lon-mstart-status.inskickad { background: var(--lon-sol-ljus); color: #7a5410; }
.lon-mstart-status.attesterad { background: var(--lon-mossa-ljus); color: #2f6a3c; }
.lon-mstart-status.utbetald { background: var(--lon-primar-ljus); color: var(--lon-primar-mork); }
.lon-mstart-tom { color: var(--lon-dov); font-size: .9rem; margin: .5rem 0 .8rem; }

@media (max-width: 991px) {
  .lon-mstart-snabb { grid-template-columns: minmax(0, 1fr); }
  .lon-mstart-tal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lon-mstart-kpi:nth-child(3) { border-left: 0; }
  .lon-mstart-kpi:nth-child(n+3) { border-top: 1px solid var(--lon-linje); }
  .lon-app .lon-mstart-hej h1 { font-size: 1.6rem; }
}

/* Sidomenyn fyller hela höjden även när sidan är längre än fönstret; en enda roll behöver ingen rollväljare. */
@media (min-width: 992px) { .lon-app:not(.lon-gast) { background: linear-gradient(to right, var(--lon-meny-bg2) var(--lon-meny-bredd), var(--lon-bg) var(--lon-meny-bredd)); } }
.lon-app .lon-sida-meny .lon-roller.enkel { display: none; }
.lon-app .lon-mstart-mer { font-size: .8rem; color: var(--lon-primar); text-decoration: none; }
.lon-app .lon-mstart-mer:hover { text-decoration: underline; color: var(--lon-primar-mork); }
.lon-mstart-lista li a, .lon-mstart-lista li > span:not(.lon-mstart-tid):not(.lon-mstart-status) { overflow-wrap: anywhere; min-width: 0; flex: 1; }

/* ===================================================================== Organisationsväljare (0.2.2) */
.lon-orgval { display: flex; flex-direction: column; min-width: 0; }
.lon-app .lon-orgval-knapp { display: inline-flex; align-items: center; gap: .5rem; width: 100%; min-width: 220px; padding: .5rem .75rem; border: 1px solid #d3dcdd; border-radius: 10px;
  background: #fff; color: var(--lon-ink); font: inherit; text-align: left; cursor: pointer; }
.lon-orgval-knapp span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lon-orgval-knapp .lon-ikon { flex: none; color: var(--lon-primar); }
.lon-app .lon-orgval-knapp:hover { border-color: var(--lon-primar); }
.lon-orgval-dialog { width: min(480px, calc(100vw - 2rem)); max-height: min(80vh, 640px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(18,53,60,.3); color: var(--lon-ink); }
.lon-orgval-dialog[open] { display: flex; flex-direction: column; }
.lon-orgval-dialog::backdrop { background: rgba(10,25,30,.45); }
.lon-orgval-topp { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem .5rem; }
.lon-app .lon-orgval-topp h2, .lon-orgval-topp h2 { font-size: 1.05rem; font-weight: 650; margin: 0; }
.lon-orgval-stang { border: 0; background: transparent; padding: .3rem; border-radius: 8px; cursor: pointer; color: var(--lon-dov); }
.lon-orgval-stang:hover { background: #eef2f2; }
.lon-orgval-sok { margin: 0 1.1rem .6rem; padding: .55rem .75rem; border: 1px solid #d3dcdd; border-radius: 10px; font: inherit; }
.lon-orgval-sok:focus { outline: none; border-color: var(--lon-primar); box-shadow: 0 0 0 3px rgba(31,111,120,.14); }
.lon-orgval-lista { list-style: none; margin: 0; padding: 0 .6rem; overflow-y: auto; flex: 1; }
.lon-orgval-lista li { padding-left: calc(var(--djup, 0) * 1.25rem); position: relative; }
.lon-orgval-lista li[style]::before { content: ""; position: absolute; left: calc(var(--djup, 0) * 1.25rem - .55rem); top: 0; bottom: 50%; width: .45rem; border-left: 1px solid #cfd9da; border-bottom: 1px solid #cfd9da; border-bottom-left-radius: 4px; }
.lon-orgval-lista li[style*="--djup: 0"]::before { display: none; }
.lon-orgval-lista button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .5rem .65rem; margin: 1px 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--lon-ink); font: inherit; font-size: .93rem; text-align: left; cursor: pointer; }
.lon-orgval-lista button:hover { background: #f1f6f6; }
.lon-orgval-lista button.vald { background: var(--lon-primar-ljus); color: var(--lon-primar-mork); font-weight: 600; }
.lon-orgval-lista small { color: var(--lon-dov); font-size: .75rem; background: #eef2f2; padding: .05rem .45rem; border-radius: 99px; }
.lon-orgval-not, .lon-orgval-tom { margin: .5rem 1.1rem 1rem; font-size: .8rem; color: var(--lon-dov); }
.lon-orgfilterrad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 0 0 1rem; }
.lon-orgfilterrad .lon-orgval { width: min(340px, 100%); }
.lon-orgfilter-rensa { font-size: .85rem; padding-bottom: .55rem; }
.lon-orgval-falt { min-width: 220px; }
.sys-sok .lon-orgval { flex: 0 0 auto; }
.sys-sok .lon-orgval .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sys-behorighet { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lon-linje); }
.lon-app .sys-behorighet h3 { font-size: 1rem; font-weight: 650; margin: 0 0 .35rem; }
.sys-behorighet-lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.sys-behorighet-lista li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--lon-linje); }
.sys-behorighet-lista small { display: block; color: var(--lon-dov); font-size: .78rem; }
.sys-behorighet-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: end; }
.sys-behorighet-form > div:first-of-type, .sys-behorighet-form > div:last-child { grid-column: 1 / -1; }
/* Redigeringspanelen får inte ligga kvar (sticky) och täcka listan nedanför när den blir hög. */
.lon-app .sys-stick:has(.sys-behorighet) { position: static; }
.sys-nyttkonto summary { cursor: pointer; font-weight: 600; color: var(--lon-primar); font-size: .9rem; }
.sys-nyttkonto[open] summary { margin-bottom: .4rem; }
.sys-nyttkonto-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; align-items: end; margin-top: .4rem; }
.sys-nyttkonto-form fieldset { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }
.sys-nyttkonto-form > button { justify-self: start; }

/* Glömt lösenord: stegindikator */
.lon-konto-steg { display: flex; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .78rem; color: var(--lon-dov); }
.lon-konto-steg li { display: flex; align-items: center; gap: .4rem; }
.lon-konto-steg li + li::before { content: ""; width: 1.25rem; height: 1px; background: var(--lon-linje); margin-right: .1rem; }
.lon-konto-steg span { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1px solid #cfd9da; font-weight: 600; font-size: .72rem; }
.lon-konto-steg li.aktiv { color: var(--lon-ink); font-weight: 600; }
.lon-konto-steg li.aktiv span { background: var(--lon-primar); border-color: var(--lon-primar); color: #fff; }
.lon-konto-steg li.klar span { background: var(--lon-mossa-ljus); border-color: var(--lon-mossa); color: var(--lon-mossa); }

/* 0.2.4: Byt lösenord och felsidor */
.lon-lankknapp { background: none; border: 0; padding: 0; margin-top: .25rem; font: inherit; color: var(--lon-primar); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lon-lankknapp:hover { text-decoration-thickness: 2px; }
body.lon-felsida { margin: 0; }
.lon-felkod { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lon-dov); }
.lon-app.lon-gast .lon-felsida-ruta .lon-login-knapp, .lon-felsida .lon-app .lon-inlogg .lon-login-knapp { display: flex; color: #fff; align-items: center; justify-content: center; text-decoration: none; margin-top: 1.5rem; }
.lon-felsida .lon-inlogg-hjalp a { color: var(--lon-primar); }