/* Admincentrets kit (docs/product/admincenter-ui.md): tokens, knappar, flikar, verktygsrad, lista, pill, tomläge, kort,
   nyckeltal, sidopanel och dialog. Laddas i base.html bredvid admin-shell.css, så att varje admincentersida har det –
   också Bibliotek, Ordbok och Kalkylstatistik som har egen route-CSS. Beteendet: static/js/admin-ui.js. */
/* Zimlas eget språk (ägaren 2026-11-01: «influerad av våran landningssida för mobilvy … inloggad/utloggad»): papper med
   korn, glaskort som mobilens Hem (.zmh-card), piller, skogsgrön primär, Newsreader-tal och små gröna versaler som
   landningssidans «OFFERT #210». Glöden hör bara till sidomenyn – korten är lugna. Kontrasten är räknad (≥ 4,5:1). */
:root {
  --adm-ink: #1d2420; --adm-mut: #5d6b61; --adm-deep: #12382b; --adm-deep-hover: #174c39;
  --adm-green: #1f6b4f; --adm-green-hover: #15543d; --adm-green-soft: #e3f0e8;
  --adm-warn-bg: #fbefd6; --adm-warn: #8a5a00; --adm-bad-bg: #fbeae6; --adm-bad: #9b4736;
  --adm-paper: #f6f5ef;
  /* Linjer och ytor i skogens ton, genomskinliga så att papperet och glaset bär igenom. */
  --adm-line: rgb(18 56 43 / 11%); --adm-soft: rgb(18 56 43 / 7%); --adm-hover: rgb(18 56 43 / 3.5%);
  --adm-head-bg: rgb(255 255 255 / 50%); --adm-field-line: rgb(18 56 43 / 18%);
  /* Glaset (.zmh-card/.zmh-compose): ljus kant, ljusare överkant, mjuk grön skugga. Lite tätare än mobilens för täta tabeller. */
  --adm-glass: linear-gradient(180deg, rgb(255 255 255 / 74%), rgb(255 255 255 / 52%));
  --adm-glass-edge: rgb(255 255 255 / 90%);
  --adm-lift: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(18 56 43 / 6%), 0 1px 2px rgb(20 30 25 / 5%), 0 12px 26px -20px rgb(18 56 43 / 35%);
  --adm-press: inset 0 1px 0 rgb(255 255 255 / 90%), 0 1px 2px rgb(20 30 25 / 6%);
  --adm-ring: 0 0 0 3px rgb(31 107 79 / 16%);
  --adm-serif: Newsreader, ui-serif, Georgia, serif;
  /* Papperskornet (zimla-mobile-kit.css, stilla här) och det ljusa kornet på skogen (.zmh-grain). */
  --adm-paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .24 -.1'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --adm-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --adm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Sidan: huvud, verktygsrad och lista med jämn luft. */
.adm-page { display: grid; gap: 18px; min-width: 0; width: 100%; }
.adm-page > * { min-width: 0; }  /* en bred tabell eller ett rutnät får aldrig dra hela sidan i sidled på mobil */

/* Knappar: piller. Primär skogsgrön (som landningssidans gröna knapp på ljus yta), sekundär glas med ljus kant, farlig
   röd text, ikon rund. 36 px, --sm 32 px, 44 px vid grov pekare. */
.adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px;
  border: 1px solid rgb(18 56 43 / 12%); border-radius: 999px; background: rgb(255 255 255 / 82%); color: #14402f; font: inherit; font-size: 13px;
  font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: var(--adm-press);
  transition: background-color 140ms, border-color 140ms, color 140ms, box-shadow 140ms; }
.adm-btn:hover { border-color: rgb(18 56 43 / 22%); background: #fff; color: var(--adm-deep); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(20 30 25 / 6%), 0 8px 18px -14px rgb(18 56 43 / 45%); }
.adm-btn:focus-visible, .adm-chip:focus-visible, .adm-tabs > :focus-visible { outline: 2px solid var(--adm-green); outline-offset: 2px; }
.adm-btn .material-symbols-outlined { font-size: 18px; }
.adm-btn--primary { border-color: var(--adm-deep); background: var(--adm-deep); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 8px 18px -12px rgb(18 56 43 / 60%); }
.adm-btn--primary:hover { border-color: var(--adm-deep-hover); background: var(--adm-deep-hover); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 10px 22px -12px rgb(18 56 43 / 65%); }
.adm-btn--danger { color: var(--adm-bad); }
.adm-btn--danger:hover { border-color: rgb(155 71 54 / 22%); background: var(--adm-bad-bg); color: var(--adm-bad); }
.adm-btn--danger-solid { border-color: var(--adm-bad); background: var(--adm-bad); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); }
.adm-btn--danger-solid:hover { border-color: #7f3a2c; background: #7f3a2c; color: #fff; }
.adm-btn--ghost { border-color: transparent; background: transparent; box-shadow: none; }
.adm-btn--ghost:hover { border-color: transparent; background: var(--adm-soft); box-shadow: none; }
.adm-btn--icon { width: 36px; padding: 0; border-color: transparent; background: transparent; color: #4e5a52; box-shadow: none; }
.adm-btn--icon:hover { border-color: transparent; background: var(--adm-soft); color: var(--adm-ink); box-shadow: none; }
.adm-btn--sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
.adm-btn--sm.adm-btn--icon { width: 32px; padding: 0; }
.adm-btn[disabled], .adm-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
@media (pointer: coarse) { .adm-btn, .adm-btn--sm { height: 44px; } .adm-btn--icon, .adm-btn--sm.adm-btn--icon { width: 44px; } }

/* Flikar: understrukna i skogens grön, scrollar i sidled på mobil. */
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--adm-line); scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs > a, .adm-tabs > button { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 40px; margin-bottom: -1px;
  padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--adm-mut); font: inherit;
  font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: color 140ms; }
.adm-tabs > a:hover, .adm-tabs > button:hover { color: var(--adm-ink); }
.adm-tabs > .is-active, .adm-tabs > [aria-current], .adm-tabs > [aria-selected="true"] { border-bottom-color: var(--adm-deep); color: var(--adm-deep); font-weight: 500; }
.adm-tabs small { color: var(--adm-mut); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .adm-tabs > a, .adm-tabs > button { height: 44px; } }

/* Verktygsraden: sökrutan som mobilens skrivrad (glaspiller), Filter med antal, sortering. Alla kontroller 36 px. */
.adm-list { display: grid; gap: 12px; min-width: 0; }
.adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.adm-search { position: relative; flex: 1 1 260px; max-width: 400px; margin: 0; }
.adm-search .material-symbols-outlined { position: absolute; top: 50%; left: 13px; color: var(--adm-mut); font-size: 18px; transform: translateY(-50%); pointer-events: none; }
.adm-search input { width: 100%; height: 36px; padding: 0 14px 0 38px; border: 1px solid var(--adm-glass-edge); border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 46%)); color: var(--adm-ink); font: inherit; font-size: 13.5px;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(18 56 43 / 6%), 0 1px 2px rgb(20 30 25 / 5%), 0 10px 24px -20px rgb(18 56 43 / 40%); }
.adm-search input::placeholder, .adm-field ::placeholder { color: #6f7771; }
.adm-search input::-webkit-search-cancel-button { cursor: pointer; }
.adm-search input:focus, .adm-select:focus, .adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus { border-color: var(--adm-green); outline: none; box-shadow: var(--adm-ring); }
.adm-search input:focus { background: #fff; }
.adm-toolbar__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.adm-select { height: 36px; padding: 0 30px 0 14px; border: 1px solid rgb(18 56 43 / 12%); border-radius: 999px; background-color: rgb(255 255 255 / 82%); color: var(--adm-ink); font: inherit; font-size: 13px; box-shadow: var(--adm-press); }
.adm-sort { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--adm-mut); font-size: 12.5px; }
.adm-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--adm-deep); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-count[hidden] { display: none; }

/* Chips som mobilens filter (.zmh-filters): glaspiller med antal; det aktiva fyllt skogsgrönt med vit text. Ingen rörelse. */
.adm-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; margin: -2px 0 -4px; }
.adm-chips::-webkit-scrollbar { display: none; }
.adm-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid var(--adm-glass-edge); border-radius: 999px;
  background: rgb(255 255 255 / 62%); color: #14402f; font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px rgb(20 30 25 / 4%);
  transition: background-color 140ms, border-color 140ms, color 140ms; }
.adm-chip:hover { background: #fff; }
.adm-chip small { color: color-mix(in srgb, currentColor 74%, transparent); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.adm-chip[aria-current] { border-color: var(--adm-deep); background: var(--adm-deep); color: #fff; }
.adm-chip[aria-current] small { color: rgb(255 255 255 / 78%); }
.adm-chip.is-warning small { color: var(--adm-bad); font-weight: 600; }
.adm-chip.is-warning[aria-current] small { color: #ffd9cf; }
@media (pointer: coarse) { .adm-chip { height: 44px; } }

/* Aktiva filter: chips «Företag: X ×» och «Rensa» under verktygsraden. */
.adm-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--adm-mut); font-size: 12.5px; }
.adm-active a { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 11px; border-radius: 999px; background: var(--adm-green-soft); color: var(--adm-deep); font-size: 12.5px; }
.adm-active a:hover { background: #d6e9dd; }
.adm-active a .material-symbols-outlined { font-size: 16px; color: var(--adm-green); }
.adm-active a.adm-active__clear { padding: 0 8px; background: none; color: var(--adm-green); text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .adm-active a { height: 36px; } .adm-search input, .adm-select { height: 44px; } .adm-drawer__prev { height: 44px; } }

/* Filter-popovern: ett papper med glasets kant; bottenark på mobil med «Visa N träffar». */
.adm-filter { position: relative; }
.adm-pop { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--adm-glass-edge); border-radius: 20px;
  background: var(--adm-paper-grain), linear-gradient(180deg, #fdfcf8, #f8f7f1); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(20 30 25 / 6%), 0 24px 48px -24px rgb(18 56 43 / 45%); animation: adm-pop-in 150ms ease-out; }
.adm-pop[hidden] { display: none; }
.adm-pop h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.adm-pop__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.adm-pop__scrim { display: none; }
@keyframes adm-pop-in { from { opacity: 0; transform: translateY(-.2rem); } }

/* Fält i dialoger och popovers: vita, rundade 12. 16 px text på mobil (iOS zoomar annars). */
.adm-field { display: grid; gap: 6px; margin: 0; }
.adm-field > span { color: #3f4b43; font-size: 12.5px; font-weight: 500; }
.adm-field > span small { color: var(--adm-mut); font-weight: 400; }
.adm-field input, .adm-field select, .adm-field textarea { width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--adm-field-line); border-radius: 12px; background: #fff; color: var(--adm-ink); font: inherit; font-size: 13.5px; }
.adm-field textarea { min-height: 84px; padding: 9px 12px; resize: vertical; }
.adm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm-fields > .is-wide { grid-column: 1 / -1; }
.adm-help { margin: 0; color: var(--adm-mut); font-size: 12.5px; line-height: 1.45; }
.adm-error { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--adm-bad-bg); color: var(--adm-bad); font-size: 13px; }
.adm-notice { margin: 0 0 14px; padding: 11px 14px; border-radius: 14px; background: var(--adm-green-soft); color: var(--adm-deep); font-size: 13px; }
.adm-notice.is-error { background: var(--adm-bad-bg); color: var(--adm-bad); }
.adm-notice.is-warning { background: var(--adm-warn-bg); color: var(--adm-warn); }

/* Kort och lista (adm-table i ett adm-card): glaskort med radie 20 som mobilens jobbkort; rubrikrad 34 px, rad 44 px,
   tal högerställda. Kolumner per sida med --cols. */
.adm-card { min-width: 0; border: 1px solid var(--adm-glass-edge); border-radius: 20px; background: var(--adm-glass); box-shadow: var(--adm-lift); overflow: hidden; }
.adm-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 12px 18px; border-bottom: 1px solid var(--adm-soft); }
.adm-card__head h2, .adm-card__head h3 { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--adm-deep); font-family: var(--adm-serif); font-size: 19px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
.adm-card__head > span, .adm-card__head > a, .adm-card__head small { color: var(--adm-mut); font-size: 12.5px; font-weight: 400; }
.adm-card__head > a:hover { color: var(--adm-green); }
.adm-card__empty { margin: 0; padding: 16px 18px; color: var(--adm-mut); font-size: 13px; }
.adm-card__foot { padding: 11px 18px; border-top: 1px solid var(--adm-soft); color: var(--adm-mut); font-size: 12.5px; }
.adm-table { font-size: 13px; }
.adm-table__head, .adm-table__row { display: grid; grid-template-columns: var(--cols, minmax(0, 1fr)); align-items: center; column-gap: 12px; padding: 0 18px; }
.adm-table__head { min-height: 34px; border-bottom: 1px solid var(--adm-soft); color: var(--adm-mut); font-size: 11.5px; font-weight: 500; }
.adm-table__row { min-height: 44px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--adm-soft); color: inherit; }
.adm-table__row:last-child { border-bottom: 0; }
a.adm-table__row, button.adm-table__row { cursor: pointer; transition: background-color 140ms; }
:is(a, button).adm-table__row:hover, :is(a, button).adm-table__row:focus-visible { background: rgb(255 255 255 / 72%); }
:is(a, button).adm-table__row:focus-visible { outline: 2px solid var(--adm-green); outline-offset: -2px; }
.adm-td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-td small, .adm-td__sub { display: block; overflow: hidden; color: var(--adm-mut); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.adm-td b, .adm-td strong { font-weight: 500; }
.adm-td--title b, .adm-td--title strong { font-size: 13.5px; }
.adm-td--wrap, .adm-td--wrap small { white-space: normal; }
.adm-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-td__l { display: none; }
.adm-table__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--adm-soft); color: var(--adm-mut); font-size: 12.5px; }
.adm-table__more a { color: var(--adm-green); }
.adm-pages { display: flex; align-items: center; gap: 8px; }
.adm-mut { color: var(--adm-mut); }
@media (max-width: 640px) {
  /* Mobil: raden blir två rader – titel och status överst, meta under. */
  .adm-card { border-radius: 18px; }
  .adm-table__head { display: none; }
  .adm-table__row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; min-height: 58px; padding: 10px 14px; }
  .adm-table__row::after { content: ''; order: 2; flex-basis: 100%; height: 0; } /* radbrytning efter titel och status */
  .adm-td--title { flex: 1 1 0; order: 0; }
  .adm-td--status { flex: none; order: 1; max-width: 45%; margin-left: auto; text-align: right; }
  .adm-td--meta { flex: none; order: 3; max-width: 100%; color: var(--adm-mut); font-size: 12px; text-align: left; }
  .adm-td--meta:empty { display: none; }
  .adm-td--break { flex-basis: 100%; order: 4; }
  .adm-td--hide-sm { display: none; }
  .adm-td__l { display: inline; margin-right: 3px; }
  .adm-table .adm-td--meta small, .adm-table .adm-td--meta > span { display: inline; }
  .adm-table .adm-td--meta > span:not(.adm-td__l) + small::before { content: ' · '; }
  .adm-card__head, .adm-card__foot, .adm-table__more { padding-left: 14px; padding-right: 14px; }
}

/* Pill som mobilens stegetikett (.zmh-card__badge): prick och tonad bakgrund i samma färg. 22 px. */
.adm-pill { --tone: #5d6b61; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 10%, transparent); color: var(--tone); font-size: 11.5px; font-style: normal; font-weight: 500;
  letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
.adm-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.adm-pill--green { --tone: var(--adm-green); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.adm-pill--yellow { --tone: var(--adm-warn); background: var(--adm-warn-bg); }
.adm-pill--red { --tone: var(--adm-bad); background: color-mix(in srgb, #b3412c 12%, transparent); }
.adm-pill--grey { --tone: #5d6b61; background: color-mix(in srgb, var(--tone) 8%, transparent); }
.adm-pill--grey::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Tomläge: vänsterställt, en rad, säger vilket filter som döljer raderna. */
.adm-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 12px 0; color: var(--adm-mut); font-size: 13px; }
.adm-empty .material-symbols-outlined { font-size: 20px; color: #7f9a8a; }
.adm-card .adm-empty, .adm-table .adm-empty { padding: 18px; }
.adm-empty a { color: var(--adm-green); text-decoration: underline; text-underline-offset: 2px; }

/* Nyckeltal (Översiktens rutor): ett glaskort, liten grön versal överst som «OFFERT #210», stort Newsreader-tal.
   --n: antal per rad. */
.adm-tiles { --n: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--adm-glass-edge); border-radius: 20px; background: var(--adm-glass); box-shadow: var(--adm-lift); overflow: hidden; }
.adm-tiles > li { min-width: 0; border-left: 1px solid var(--adm-soft); }
.adm-tiles > li.is-soft { background: rgb(18 56 43 / 3%); }
.adm-tiles > li.is-warning { background: color-mix(in srgb, var(--adm-warn-bg) 80%, transparent); }
.adm-tiles > li.is-good { background: color-mix(in srgb, var(--adm-green-soft) 70%, transparent); }
.adm-tiles a, .adm-tiles button, .adm-tiles__cell { display: grid; align-content: start; gap: 4px; width: 100%; height: 100%; padding: 16px 18px 17px; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.adm-tiles a, .adm-tiles button { cursor: pointer; transition: background-color 140ms; }
.adm-tiles a:hover, .adm-tiles button:hover { background: rgb(255 255 255 / 60%); }
.adm-tiles a:focus-visible, .adm-tiles button:focus-visible { outline: 2px solid var(--adm-green); outline-offset: -2px; }
.adm-tiles__l { display: inline-flex; align-items: center; gap: 2px; color: var(--adm-green); font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.adm-tiles b { margin-top: 2px; color: var(--adm-deep); font-family: var(--adm-serif); font-size: 34px; font-weight: 400; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-tiles small { color: var(--adm-mut); font-size: 12px; }
.adm-tiles > li.is-warning .adm-tiles__l, .adm-tiles > li.is-warning b, .adm-tiles > li.is-warning small { color: var(--adm-warn); }
.adm-tiles > li.is-good b { color: var(--adm-green); }
.adm-tiles--3 { --n: 3; }
.adm-tiles--3 > li:nth-child(n + 4) { border-top: 1px solid var(--adm-soft); }
.adm-tiles--3 > li:nth-child(3n + 1) { border-left: 0; }
.adm-tiles:not(.adm-tiles--3) > li:first-child { border-left: 0; }
@media (max-width: 640px) {
  .adm-tiles, .adm-tiles--3 { --n: 2; border-radius: 18px; }
  .adm-tiles > li { border-left: 0; border-top: 1px solid var(--adm-soft); }
  .adm-tiles > li:nth-child(-n + 2) { border-top: 0; }
  .adm-tiles > li:nth-child(even) { border-left: 1px solid var(--adm-soft); }
  .adm-tiles a, .adm-tiles button, .adm-tiles__cell { padding: 14px 14px 15px; }
  .adm-tiles b { font-size: 29px; }
}

/* Skelett (panelen öppnas direkt med det och fylls sedan) i papperets ton. Pulserar inte vid reducerad rörelse. */
.adm-skel { display: grid; gap: 10px; padding: 4px 0; }
.adm-skel span { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #ecebe4 0%, #f7f6f1 50%, #ecebe4 100%); background-size: 200% 100%; animation: adm-skel 1.2s ease-in-out infinite; }
.adm-skel--head span:first-child { height: 20px; }
@keyframes adm-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Sidopanelen (adm-drawer): en <dialog> i skalet – ett papper med korn och stor radie mot sidan, glaskort inuti.
   600 px, --wide 760 px, helskärm under 640 px. ─────────────────────────────────────────────────────────────── */
.adm-drawer { position: fixed; inset: 0 0 0 auto; width: min(600px, 100vw); height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 26px 0 0 26px; background: var(--adm-paper-grain), var(--adm-paper); color: var(--adm-ink);
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 80%), -28px 0 60px -24px rgb(18 56 43 / 38%); overflow: hidden; }
.adm-drawer[open] { display: flex; flex-direction: column; animation: adm-drill 200ms var(--adm-ease); }
.adm-drawer.is-instant[open] { animation: none; }
.adm-drawer.is-closing[open] { animation: adm-drill-out 160ms var(--adm-ease) forwards; }
.adm-drawer--wide { width: min(760px, 100vw); }
.adm-drawer::backdrop { background: rgb(18 40 32 / 18%); }
html:has(.adm-drawer[open]) { overflow: hidden; }
@keyframes adm-drill { from { transform: translateX(2.5rem); opacity: .6; } }
@keyframes adm-drill-out { to { transform: translateX(2.5rem); opacity: 0; } }
.adm-drawer__trail { flex: none; padding: 12px 22px 0; }
.adm-drawer__trail[hidden] { display: none; }
.adm-drawer__prev { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 30px; padding: 0 10px 0 4px; border: 0; border-radius: 999px; background: none; color: var(--adm-mut); font: inherit; font-size: 12.5px; cursor: pointer; }
.adm-drawer__prev:hover { background: var(--adm-soft); color: var(--adm-ink); }
.adm-drawer__prev .material-symbols-outlined { font-size: 18px; }
.adm-drawer__prev span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-drawer__content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.adm-drawer__content.is-settling { animation: adm-settle 130ms ease-out; }
@keyframes adm-settle { from { opacity: .4; transform: translateY(4px); } }
.adm-drawer__frame { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.adm-drawer__head { display: flex; flex: none; align-items: flex-start; gap: 10px; padding: 22px 18px 16px 28px; border-bottom: 1px solid var(--adm-soft); }
.adm-drawer__trail:not([hidden]) + .adm-drawer__content .adm-drawer__head { padding-top: 6px; }
.adm-drawer__title { flex: 1 1 auto; min-width: 0; }
.adm-drawer__title h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--adm-deep); font-family: var(--adm-serif); font-size: 25px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; outline: none; }
.adm-drawer__title h2 .adm-pill { font-family: Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em; }
.adm-drawer__sub { margin-top: 4px; color: var(--adm-mut); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.adm-drawer__sub a { color: #35443b; text-decoration: underline; text-decoration-color: rgb(18 56 43 / 25%); text-underline-offset: 2px; }
.adm-drawer__sub a:hover { color: var(--adm-green); }
.adm-drawer__sub p { margin: 0; }
.adm-drawer__tools { display: flex; flex: none; align-items: center; gap: 2px; margin: -4px -4px 0 0; }
.adm-drawer__arrow { display: none; }
.adm-drawer__body { flex: 1 1 auto; min-height: 0; padding: 20px 28px 32px; overflow-y: auto; overscroll-behavior: contain; }
.adm-drawer .adm-drawer__body > * + :not(dialog) { margin-top: 16px; }
.adm-drawer .adm-drawer__body > .adm-notice + * { margin-top: 0; }
.adm-drawer [data-adm-panel] > * + * { margin-top: 12px; }
.adm-drawer .adm-drawer__body .adm-tabs { position: sticky; top: 0; z-index: 2; margin: 22px -28px 0; padding: 0 22px; background: var(--adm-paper-grain), var(--adm-paper); }
.adm-drawer .adm-drawer__body .adm-tabs + * { margin-top: 14px; }
.adm-drawer__foot { display: flex; flex: none; align-items: center; gap: 8px; padding: 14px 28px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--adm-soft); background: rgb(246 245 239 / 92%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.adm-drawer__foot > .adm-drawer__primary { margin-left: auto; }
.adm-drawer__foot > :only-child.adm-drawer__primary { margin-left: auto; }
[data-adm-panel]:not([hidden]) { animation: adm-fade 150ms ease-out; }
@keyframes adm-fade { from { opacity: 0; } }
/* Fakta i panelen: etikett över värde. */
.adm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; margin: 0; }
.adm-facts dt { color: var(--adm-mut); font-size: 12px; }
.adm-facts dd { margin: 2px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.adm-facts dd a { color: var(--adm-green); text-decoration: underline; text-underline-offset: 2px; }
/* Rader i panelens kort: knappar som hör till raden står på raden. */
.adm-rows { margin: 0; padding: 0; list-style: none; }
.adm-rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 13px 18px; }
.adm-rows > li + li { border-top: 1px solid var(--adm-soft); }
.adm-rows__main { flex: 1 1 220px; min-width: 0; }
.adm-rows__main > b { display: block; font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.adm-rows__main > small { display: block; color: var(--adm-mut); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .adm-drawer, .adm-drawer--wide { width: 100vw; border-radius: 0; box-shadow: none; }
  .adm-drawer__trail { display: none; }
  .adm-drawer__head { align-items: center; padding: 10px 8px 12px 4px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .adm-drawer__arrow { display: inline-flex; }
  .adm-drawer__x { display: none; }
  .adm-drawer__title h2 { font-size: 22px; }
  .adm-drawer__body { padding: 16px 16px 24px; }
  .adm-drawer .adm-drawer__body .adm-tabs { margin: 18px -16px 0; padding: 0 12px; }
  .adm-drawer__foot { padding-left: 16px; padding-right: 16px; }
  .adm-drawer__foot .adm-btn { height: 44px; }
}

/* ── Dialog (adm-modal + zimla-shell-dialog): samma papper, radie 24; 480 px för formulär, --wide 640; bottenark på mobil. */
.adm-modal { width: min(480px, calc(100vw - 24px)); max-height: min(86vh, 720px); max-height: min(86dvh, 720px); margin: auto; padding: 0; border: 0;
  border-radius: 24px; background: var(--adm-paper-grain), var(--adm-paper); color: var(--adm-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%), 0 30px 70px -24px rgb(18 56 43 / 50%); overflow: hidden; }
.adm-modal[open] { display: flex; flex-direction: column; }
.adm-modal--wide { width: min(640px, calc(100vw - 24px)); }
.adm-modal > form, .adm-modal > .adm-modal__frame { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0; }
.adm-modal__head { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 22px 18px 4px 26px; }
.adm-modal__head h2 { margin: 0; color: var(--adm-deep); font-family: var(--adm-serif); font-size: 24px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.adm-modal__head p { margin: 5px 0 0; color: var(--adm-mut); font-size: 13px; line-height: 1.45; }
.adm-modal__body { display: grid; flex: 1 1 auto; align-content: start; gap: 12px; min-height: 0; padding: 14px 26px 20px; overflow-y: auto; }
.adm-modal__foot { display: flex; flex: none; justify-content: flex-end; gap: 8px; padding: 14px 26px 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--adm-soft); }
@media (max-width: 639px) {
  .adm-modal, .adm-modal--wide { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .adm-modal__head { padding: 20px 14px 4px 18px; }
  .adm-modal__body { padding: 12px 18px 18px; }
  .adm-modal__foot { padding-left: 18px; padding-right: 18px; }
  .adm-modal__foot .adm-btn { flex: 1 1 0; height: 44px; }
  .adm-fields { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .adm-search { flex-basis: 100%; max-width: none; }
  .adm-toolbar__end { width: 100%; margin-left: 0; }
  .adm-toolbar__end .adm-sort { flex: 1 1 0; min-width: 0; }
  .adm-toolbar__end .adm-select { flex: 1 1 0; width: 100%; min-width: 0; }
  .adm-search input, .adm-select, .adm-field input, .adm-field select, .adm-field textarea { min-height: 44px; height: 44px; font-size: 16px; }
  .adm-field textarea { height: auto; }
  .adm-chips { margin-right: -16px; padding-right: 16px; }
  /* Filter som bottenark: fast fot med «Visa N träffar». */
  .adm-filter, .adm-statusbox, .adm-more { position: static; }
  .adm-pop, .adm-pop--status, .adm-pop.adm-more__menu { position: fixed; inset: auto 0 0 0; z-index: 60; width: auto; max-height: 86dvh; padding: 20px 18px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 24px 24px 0 0; animation-name: adm-sheet-in; }
  [data-adm-popover].is-open > .adm-pop__scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgb(18 40 32 / 18%); }
  .adm-pop__foot .adm-btn { flex: 1 1 0; height: 44px; }
  @keyframes adm-sheet-in { from { opacity: 0; transform: translateY(.6rem); } }
}

@media (prefers-reduced-motion: reduce) {
  .adm-drawer[open], .adm-drawer.is-closing[open], .adm-drawer__content.is-settling, [data-adm-panel]:not([hidden]), .adm-pop, .adm-pop__step, .adm-toast { animation: none; }
  .adm-toast.is-leaving, [data-adm-saved], .adm-status, .adm-set, .adm-switch, .adm-switch::after, .adm-tip__bubble, .adm-inline::after, .adm-inline input { transition: none; }
  .adm-skel span { animation: none; }
  .adm-btn, .adm-chip, .adm-tabs > a, .adm-tabs > button, a.adm-table__row, .adm-tiles a, .adm-tiles button { transition: none; }
}

/* Listans resultat (data-adm-results) i en kolumn som kan krympa: en bred tabell rullar i sitt kort, inte sidan. */
.adm-list__results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }

/* ══ Smarta delar (docs/product/admincenter-ui.md «Smarta delar»; beteendet i admin-ui.js) ═══════════════════════ */

/* Statuspill: visa läget, inte kontrollen. prick · «Etikett:» (mut) · värde (tonens färg, 500) · ▾. Pricken: grön normalt,
   grå ihålig ej satt, gul avvikande men avsiktligt, röd trasigt. Taggen {% adm_status %} ritar pillret och dess popover.
   (Den äldre formen <a class="adm-status [is-warning]"><i></i>text</a> på Översikten ser ut som förut.) */
.adm-status { --tone: var(--adm-green); --dot: #2fbf6c; display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; height: 32px;
  padding: 0 10px 0 12px; border: 1px solid var(--adm-glass-edge); border-radius: 999px; background: rgb(255 255 255 / 66%); color: var(--adm-ink);
  font: inherit; font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgb(20 30 25 / 4%); transition: background-color 140ms, border-color 140ms; }
.adm-status:not(:has(.adm-status__value)) { padding-right: 14px; background: color-mix(in srgb, var(--adm-green-soft) 80%, transparent); color: var(--tone); font-weight: 500; }
.adm-status__dot, .adm-status > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.adm-status__label { flex: none; color: var(--adm-mut); }
.adm-status__value { min-width: 0; overflow: hidden; color: var(--tone); font-weight: 500; text-overflow: ellipsis; }
.adm-status__caret { flex: none; margin-left: -3px; color: var(--adm-mut); font-size: 18px !important; }
:is(button, a).adm-status:hover, .adm-status[aria-expanded="true"] { border-color: rgb(18 56 43 / 16%); background: #fff; }
.adm-status:focus-visible { outline: 2px solid var(--adm-green); outline-offset: 2px; }
span.adm-status { cursor: default; }
.adm-status--grey { --tone: var(--adm-ink); }
.adm-status--grey .adm-status__dot { background: transparent; box-shadow: inset 0 0 0 1.5px #7b867f; }
.adm-status--yellow, .adm-status.is-warning { --tone: var(--adm-warn); --dot: #d9902a; border-color: rgb(138 90 0 / 14%); background: color-mix(in srgb, var(--adm-warn-bg) 85%, #fff); }
.adm-status--red { --tone: var(--adm-bad); --dot: #c4543c; border-color: rgb(155 71 54 / 16%); background: color-mix(in srgb, var(--adm-bad-bg) 85%, #fff); }
:is(button, a).adm-status--yellow:hover, .adm-status--yellow[aria-expanded="true"] { background: var(--adm-warn-bg); }
:is(button, a).adm-status--red:hover, .adm-status--red[aria-expanded="true"] { background: var(--adm-bad-bg); }
@media (pointer: coarse) { .adm-status { height: 44px; } }
.adm-statusbox { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
@media (min-width: 641px) {
  .adm-statusbox > .adm-pop { right: auto; left: 0; }
  .adm-head__status .adm-statusbox > .adm-pop, .adm-statusbox--end > .adm-pop { left: auto; right: 0; }
}
/* Popoverns innehåll: en rad om följden, kontrollen, beroende fält bara när de gäller, sist «Ändrat av X, datum». */
.adm-pop--status { width: min(340px, calc(100vw - 32px)); }
.adm-pop--status > * + * { margin-top: 12px; }
.adm-pop__lead { margin: 0; color: var(--adm-mut); font-size: 12.5px; line-height: 1.45; }
.adm-pop__meta { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--adm-soft); color: var(--adm-mut); font-size: 12px; }
.adm-pop__meta a { color: var(--adm-green); text-decoration: underline; text-underline-offset: 2px; }
.adm-pop:focus { outline: none; }
/* Andra steget: popoverns innehåll byts mot en rad om följden och Avbryt · <åtgärd> (ingen window.confirm). */
.adm-pop.is-stepping > :not(.adm-pop__step) { display: none !important; }
.adm-pop__step { animation: adm-fade 150ms ease-out; }
.adm-pop__step[hidden] { display: none; }
.adm-pop__step-text { margin: 0; color: var(--adm-ink); font-size: 13.5px; line-height: 1.45; }
.adm-pop__step .adm-pop__foot { justify-content: flex-end; }

/* Brytare och segment i kitet (samma som Driftcentralens dr-switch/dr-seg, så att de finns på varje sida).
   <input class="adm-switch__input" type="checkbox" role="switch"><span class="adm-switch" aria-hidden="true"></span> */
.adm-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.adm-switch { position: relative; display: inline-block; flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgb(18 56 43 / 18%); vertical-align: middle; transition: background-color 150ms; }
.adm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 20%); transition: transform 150ms; }
.adm-switch__input:checked + .adm-switch { background: var(--adm-deep); }
.adm-switch__input:checked + .adm-switch::after { transform: translateX(16px); }
.adm-switch__input:focus-visible + .adm-switch { box-shadow: 0 0 0 3px rgb(31 107 79 / 25%); }
.adm-switch__input:disabled + .adm-switch { opacity: .5; }
.is-warning .adm-switch__input:checked + .adm-switch { background: #c27b1a; }
.adm-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; font-size: 13.5px; }
.adm-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(18 56 43 / 7%); }
.adm-seg label { position: relative; }
.adm-seg input { position: absolute; opacity: 0; pointer-events: none; }
.adm-seg span { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; color: #3f4b43; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.adm-seg input:checked + span { background: var(--adm-deep); color: #fff; box-shadow: 0 4px 10px -6px rgb(18 56 43 / 60%); }
.adm-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgb(31 107 79 / 25%); }
@media (pointer: coarse) { .adm-toggle { min-height: 44px; } .adm-seg span { height: 38px; } }
@media (max-width: 640px) { .adm-seg { display: flex; } .adm-seg label { flex: 1 1 0; } .adm-seg span { justify-content: center; width: 100%; } }

/* Inställningslista (adm-set på .adm-rows): hela raden är en knapp, 52 px: etikett (+ en rad 12 px) · värde eller pill · ›.
   Binärt värde: label.adm-set--switch med brytaren direkt på raden. Fel och varning först och färgade. */
.adm-rows > li:has(> .adm-set) { padding: 0; }
.adm-set { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 8px 12px 8px 18px; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 140ms; }
.adm-set:hover { background: rgb(255 255 255 / 60%); }
.adm-set:focus-visible { outline: 2px solid var(--adm-green); outline-offset: -2px; }
.adm-set__main { flex: 1 1 auto; min-width: 0; }
.adm-set__main > b { display: block; font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.adm-set__main > small { display: block; margin-top: 1px; color: var(--adm-mut); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.adm-set__value { flex: none; max-width: 45%; overflow: hidden; color: var(--adm-mut); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.adm-set__go { flex: none; color: #7b867f; font-size: 20px !important; }
.adm-set--switch { padding-right: 18px; }
.adm-set.is-warning, .adm-rows > li.is-warning { background: color-mix(in srgb, var(--adm-warn-bg) 55%, transparent); }
.adm-set.is-warning .adm-set__main > b, .adm-set.is-warning .adm-set__value { color: var(--adm-warn); }
.adm-set.is-error .adm-set__main > b, .adm-set.is-error .adm-set__value { color: var(--adm-bad); }
.adm-rows > li:has(> .adm-set) + li { border-top: 1px solid var(--adm-soft); }
@media (pointer: coarse) { .adm-set { min-height: 56px; } }
@media (max-width: 640px) { .adm-set { padding-left: 14px; } .adm-set__value { max-width: 40%; } }

/* Ångra-toast (ZimlaAdminUI.toast): en åt gången, nertill i mitten (i panelen: ovanför dess fot). Skogens grön, vit text. */
.adm-toast-host { position: fixed; z-index: 95; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); pointer-events: none; }
.adm-toast-host.is-in-drawer { position: absolute; bottom: var(--adm-toast-bottom, 16px); max-width: calc(100% - 32px); }
.adm-toast { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; max-width: 100%; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: var(--adm-deep); color: #f7f8ed; font-size: 13.5px; line-height: 1.35; pointer-events: auto;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 18px 40px -18px rgb(18 56 43 / 70%); animation: adm-toast-in 150ms ease-out; }
.adm-toast:not(:has(.adm-toast__undo, .adm-toast__action)) { padding-right: 18px; }
.adm-toast__text { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.adm-toast__undo, .adm-toast__action { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 14%); color: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.adm-toast__undo:hover, .adm-toast__action:hover { background: rgb(255 255 255 / 22%); }
.adm-toast__action + .adm-toast__undo { margin-left: -8px; }
.adm-toast__undo:focus-visible, .adm-toast__action:focus-visible { outline: 2px solid #8fe0b4; outline-offset: 2px; }
.adm-toast--bad { background: #7f3a2c; }
.adm-toast.is-leaving { opacity: 0; transition: opacity 140ms; }
@keyframes adm-toast-in { from { opacity: 0; transform: translateY(.4rem); } }
@media (pointer: coarse) { .adm-toast__undo, .adm-toast__action { height: 36px; } }

/* Uppskjutna åtgärder: raden lämnar listan direkt (ingen höjdkollaps); «keep» tonar raden medan anropet väntar. */
.is-adm-held { display: none !important; }
.is-adm-pending { opacity: .55; pointer-events: none; }

/* Markören i listor med data-adm-keys: vit bakgrund + 3 px grön kant till vänster, hoppar utan glid. */
:is(.adm-table__row, [data-adm-row]).is-cursor { background: #fff; box-shadow: inset 3px 0 0 var(--adm-green); }
:is(.adm-table__row, [data-adm-row]).is-cursor:focus-visible { outline: none; }
[data-adm-keys] [data-adm-row]:focus-visible { outline: 2px solid var(--adm-green); outline-offset: -2px; }

/* «Sparat ✓» på en reserverad plats (data-adm-saved): tonar in och ut, tar ingen ny plats. */
[data-adm-saved] { display: inline-block; min-width: 6.5em; color: var(--adm-green); font-size: 12px; opacity: 0; transition: opacity 160ms; }
[data-adm-saved]:is(.is-saving, .is-saved, .is-error) { opacity: 1; }
[data-adm-saved].is-saving { color: var(--adm-mut); }
[data-adm-saved].is-error { color: var(--adm-bad); }

/* Inline-redigering (form.adm-inline): ser ut som text med penna vid hover; samma typ i redigeringsläge (inget hopp).
   Fältets bredd följer texten (field-sizing; ange size="…" för webbläsare utan). */
.adm-inline { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0; vertical-align: baseline; }
.adm-inline input { field-sizing: content; min-width: 3ch; max-width: 100%; height: auto; margin: -3px -7px; padding: 2px 6px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: text; transition: background-color 140ms, border-color 140ms; }
.adm-inline input:hover { border-color: var(--adm-line); background: rgb(255 255 255 / 72%); }
.adm-inline input:focus { border-color: var(--adm-green); background: #fff; outline: none; box-shadow: var(--adm-ring); }
.adm-inline::after { content: 'edit'; margin-left: 6px; color: #7b867f; font-family: 'Material Symbols Outlined'; font-size: 15px; line-height: 1; opacity: 0; transition: opacity 140ms; }
.adm-inline:hover::after { opacity: 1; }
.adm-inline:focus-within::after { opacity: 0; }
@media (max-width: 640px) and (pointer: coarse) { .adm-inline input { font-size: 16px; } .adm-inline::after { opacity: 1; } }

/* ⓘ-tooltip (adm-tip, taggen {% adm_tip %}): förklaringar man läser en gång. Hover/fokus visar, tryck växlar. */
.adm-tip { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.adm-tip__btn { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: #7b867f; cursor: help; }
.adm-tip__btn::before { content: ''; position: absolute; inset: -10px; }
.adm-tip__btn .material-symbols-outlined { font-size: 17px; }
.adm-tip__btn:hover, .adm-tip.is-open .adm-tip__btn { background: var(--adm-soft); color: var(--adm-green); }
.adm-tip__btn:focus-visible { outline: 2px solid var(--adm-green); outline-offset: 1px; }
.adm-tip__bubble { position: absolute; z-index: 35; top: calc(100% + 6px); left: -8px; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 9px 12px; border-radius: 12px;
  background: var(--adm-deep); color: #f7f8ed; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0;
  text-align: left; text-transform: none; white-space: normal; box-shadow: 0 14px 30px -16px rgb(18 56 43 / 70%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms, visibility 150ms; }
.adm-tip--end .adm-tip__bubble { left: auto; right: -8px; }
.adm-tip:hover .adm-tip__bubble, .adm-tip__btn:focus-visible + .adm-tip__bubble, .adm-tip.is-open .adm-tip__bubble { opacity: 1; visibility: visible; }

/* ⋯-meny (adm-more): sällsynta och farliga åtgärder; farligt längst ned i rött, bekräftas i menyns andra steg. */
.adm-more { position: relative; display: inline-flex; }
@media (min-width: 641px) { .adm-pop.adm-more__menu { right: 0; left: auto; width: min(260px, calc(100vw - 32px)); padding: 6px; } }
@media (max-width: 640px) { .adm-pop.adm-more__menu { padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); } .adm-more__item { min-height: 48px; } }
.adm-more__menu form { margin: 0; }
.adm-more__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: none;
  color: var(--adm-ink); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; }
.adm-more__item:hover, .adm-more__item:focus-visible { background: var(--adm-soft); outline: none; }
.adm-more__item .material-symbols-outlined { color: var(--adm-mut); font-size: 18px; }
.adm-more__item.is-danger, .adm-more__item.is-danger .material-symbols-outlined { color: var(--adm-bad); }
.adm-more__item.is-danger:hover, .adm-more__item.is-danger:focus-visible { background: var(--adm-bad-bg); }
.adm-more__sep { height: 1px; margin: 6px 4px; background: var(--adm-soft); }
.adm-more__menu .adm-pop__step { padding: 8px 8px 4px; }
@media (pointer: coarse) { .adm-more__item { min-height: 44px; } }

/* Chips med antal 0 göms om de inte är aktiva: <a class="adm-chip" data-adm-count="{{ n }}">. */
.adm-chip[data-adm-count="0"]:not([aria-current]) { display: none; }

/* Verktygsraden på en rad (adm-list--line på [data-adm-list]): sök · högst 4 chips · Filter · sortering · huvudknapp.
   Formuläret och resultaten blir genomskinliga för rutnätet, så att resultatens chips kan stå på verktygsradens rad.
   Sökrutan tar det som blir över (minst 180 px), chipsen sin egen bredd (rullar och tonas ut om de inte får plats).
   Sidans innehållsbredd styr (sidomenyn tar ~340 px): under 900 px bryter chipsen till egen rad; på mobil sök +
   Filter-ikon på en rad, chips under, sorteringen i Filter-arket. */
.adm-page { container: adm-page / inline-size; }
.adm-list--line { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, max-content) auto; grid-template-areas: "search chips end"; gap: 12px 8px; align-items: center; }
.adm-list--line > .adm-toolbar, .adm-list--line > [data-adm-results] { display: contents; }
.adm-list--line .adm-search { grid-area: search; max-width: 420px; }
.adm-list--line .adm-toolbar__end { grid-area: end; margin-left: 0; }
.adm-list--line [data-adm-results] > .adm-chips { grid-area: chips; min-width: 0; }
.adm-list--line [data-adm-results] > :not(.adm-chips), .adm-list--line > :not(.adm-toolbar):not([data-adm-results]) { grid-column: 1 / -1; }
.adm-list--line:not(:has(.adm-chips)) { grid-template-columns: minmax(180px, 1fr) auto; grid-template-areas: "search end"; }
.adm-chips.is-clipped { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
@container adm-page (max-width: 899px) {
  .adm-list--line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search end" "chips chips"; }
  .adm-list--line:not(:has(.adm-chips)) { grid-template-areas: "search end"; }
}
@media (max-width: 640px) {
  .adm-list--line .adm-search { max-width: none; }
  .adm-list--line .adm-toolbar__end { width: auto; }
  .adm-list--line .adm-toolbar__end > .adm-sort { display: none; }
  .adm-list--line .adm-filter > .adm-btn { position: relative; width: 44px; padding: 0; gap: 0; font-size: 0; }
  .adm-list--line .adm-filter > .adm-btn .material-symbols-outlined { font-size: 20px; }
  .adm-list--line .adm-filter > .adm-btn .adm-count { position: absolute; top: -2px; right: -2px; font-size: 11px; }
  .adm-list--line [data-adm-results] > .adm-chips { margin-right: -16px; padding-right: 16px; }
}
/* Sorteringen i Filter-arket på mobil (admin-ui.js flyttar den dit, och tillbaka på dator). */
.adm-sort.is-in-sheet { display: grid; gap: 6px; margin-top: 12px; color: #3f4b43; font-size: 12.5px; font-weight: 500; }
.adm-sort.is-in-sheet .adm-select { width: 100%; }

/* ══ Kitets delar efter sidornas andra pass (docs/product/admincenter-ui.md «Kontraktet») ═══════════════════════════ */

/* Kort klipper inte ⋯-menyer och popovers: medan en popover i kortet (eller i en cell) är öppen får den gå utanför. */
.adm-card:has([data-adm-popover].is-open), .adm-td:has([data-adm-popover].is-open) { overflow: visible; }

/* Popover mot vänsterkanten (knappen längst till vänster på raden: historiken i Nivåmallar). */
@media (min-width: 641px) { [data-adm-popover] > .adm-pop.adm-pop--start { right: auto; left: 0; } }

/* Inställningsrad med popover: <div class="adm-setbox" data-adm-popover> runt raden (button.adm-set med
   data-adm-popover-toggle) och dess .adm-pop – popovern öppnas under raden, mot högerkanten (bottenark på mobil). */
.adm-rows > li:has(> .adm-setbox) { padding: 0; }
.adm-setbox { position: relative; flex: 1 1 auto; min-width: 0; }
@media (min-width: 641px) { .adm-setbox > .adm-pop { top: calc(100% - 4px); right: 12px; width: min(360px, calc(100vw - 32px)); } }
@media (max-width: 640px) { .adm-setbox { position: static; } }

/* Historik i en popover (de senaste ändringarna, Ångra på den översta): <ol class="adm-history"><li><span
   class="adm-history__main"><b>…</b><small>…</small></span>[form]</li>. */
.adm-history { display: grid; gap: 2px; margin: 0 -6px; padding: 0; list-style: none; }
.adm-history > li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px; border-radius: 12px; }
.adm-history > li:first-child { background: rgb(255 255 255 / 70%); }
.adm-history__main { flex: 1 1 auto; min-width: 0; }
.adm-history__main b { display: block; overflow: hidden; color: var(--adm-ink); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.adm-history__main small { display: block; color: var(--adm-mut); font-size: 12px; }
.adm-history form { flex: none; margin: 0; }

/* Utfällbar rad: <details class="adm-fold"> – sammanfattningen utan markör. Knapp + region: data-adm-fold (admin-ui.js). */
.adm-fold > summary { list-style: none; cursor: pointer; }
.adm-fold > summary::-webkit-details-marker { display: none; }

/* Chips som radio- eller kryssrutor (<label class="adm-chip"><input type="radio|checkbox">…</label>): samma glaspiller,
   ifyllt skogsgrönt när det är valt. */
label.adm-chip { position: relative; cursor: pointer; }
.adm-chip > input[type="radio"], .adm-chip > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
label.adm-chip .material-symbols-outlined { font-size: 17px; }
.adm-chip:has(> input:checked) { border-color: var(--adm-deep); background: var(--adm-deep); color: #fff; }
.adm-chip:has(> input:checked) small { color: rgb(255 255 255 / 78%); }
.adm-chip:has(> input:focus-visible) { outline: 2px solid var(--adm-green); outline-offset: 2px; }
.adm-chip:has(> input:disabled) { opacity: .5; cursor: default; }

/* Adress med Kopiera (data-adm-copy på knappen): ett glaspiller som sökrutan, knappen bredvid. */
.adm-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-copy input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 14px; border: 1px solid var(--adm-field-line); border-radius: 999px; background: rgb(255 255 255 / 78%);
  color: var(--adm-ink); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.adm-copy input:focus { border-color: var(--adm-green); outline: none; box-shadow: var(--adm-ring); }
.adm-copy:has(.adm-btn--sm) input { height: 32px; }
@media (max-width: 640px) { .adm-copy { flex-wrap: wrap; } .adm-copy input { flex-basis: 100%; height: 44px; font-size: 16px; } .adm-copy .adm-btn { flex: 1 1 auto; } }

/* Markering i listan: kryssrutan i skogens grön (label.adm-check runt rutan). */
.adm-check { display: inline-grid; place-items: center; width: 20px; }
.adm-check input[type="checkbox"]:not(.sr-only):not(.peer) { width: 17px; height: 17px; margin: 0; border: 1.5px solid rgb(18 56 43 / 30%); border-radius: 5px; background-color: #fff; box-shadow: none; }
.adm-check input[type="checkbox"]:not(.sr-only):not(.peer):hover { border-color: var(--adm-green); background-color: #fff; }
.adm-check input[type="checkbox"]:not(.sr-only):not(.peer):checked { border-color: var(--adm-deep); background-color: var(--adm-deep); box-shadow: none; }
.adm-check input[type="checkbox"]:not(.sr-only):not(.peer):indeterminate { border-color: var(--adm-deep); background: var(--adm-deep) linear-gradient(#fff, #fff) center / 8px 2px no-repeat; }
.adm-check input[type="checkbox"]:not(.sr-only):not(.peer):focus-visible { box-shadow: var(--adm-ring); }
.adm-check input[type="checkbox"]:not(.sr-only):not(.peer):disabled { border-style: dashed; background-color: transparent; cursor: not-allowed; opacity: .55; }
@media (pointer: coarse) { .adm-check { width: 32px; } .adm-check input[type="checkbox"]:not(.sr-only):not(.peer) { width: 22px; height: 22px; } }

/* Massåtgärdsraden (adm-bulk, syns utan rörelse när något är markerat). --over: täcker kortets huvud (inuti
   .adm-card__head). --dock: överst i kortet över tabellens rubrikrad på dator (listan flyttar sig inte), dockad nertill på
   mobil där tummen är. */
.adm-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 52px; padding: 8px 12px 8px 18px; border-bottom: 1px solid var(--adm-soft);
  background: var(--adm-green-soft); color: var(--adm-deep); font-size: 13px; }
.adm-bulk[hidden] { display: none; }
.adm-bulk b { font-weight: 500; font-variant-numeric: tabular-nums; }
.adm-bulk__end { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.adm-card__head:has(> .adm-bulk--over) { position: relative; }
.adm-bulk--over { position: absolute; z-index: 2; inset: 0 0 -1px; min-height: 0; flex-wrap: nowrap; }
.adm-card:has(.adm-bulk--dock) { position: relative; }
.adm-card:has(.adm-bulk--dock) .adm-table__head { min-height: 44px; }
.adm-bulk--dock { position: absolute; z-index: 3; top: 0; right: 0; left: 0; min-height: 44px; padding: 6px 12px 6px 18px; border-radius: 20px 20px 0 0; flex-wrap: nowrap; }
@media (max-width: 640px) {
  .adm-bulk { padding: 8px 8px 8px 14px; }
  .adm-bulk b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adm-bulk__end { flex-wrap: nowrap; }
  .adm-bulk--dock { position: fixed; top: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; z-index: 50; min-height: 56px; padding: 8px 8px 8px 16px;
    border: 1px solid rgb(18 56 43 / 12%); border-radius: 18px; box-shadow: 0 18px 40px -18px rgb(18 56 43 / 55%), 0 2px 6px rgb(20 30 25 / 8%); }
  .adm-card:has(.adm-bulk--dock:not([hidden])) { margin-bottom: 76px; }
}

/* Sorteringens etikett (<span class="adm-sort__l">Sortera</span>) syns bara i Filter-arket på mobil. */
.adm-sort:not(.is-in-sheet) .adm-sort__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  /* Sidans huvudknapp på verktygsraden blir en rund ikon, så att sökrutan får plats (namnet står kvar för skärmläsare). */
  .adm-list--line .adm-toolbar__end > .adm-btn--primary { width: 44px; padding: 0; gap: 0; font-size: 0; }
  .adm-list--line .adm-toolbar__end > .adm-btn--primary .material-symbols-outlined { font-size: 20px; }
  /* adm-tiles--keep: tre nyckeltal står kvar på en rad (två + en ensam ser trasigt ut); raden under talet göms. */
  .adm-tiles--keep { --n: 3; }
  .adm-tiles--keep > li, .adm-tiles--keep > li:nth-child(-n + 2) { border-top: 0; border-left: 1px solid var(--adm-soft); }
  .adm-tiles--keep > li:first-child { border-left: 0; }
  .adm-tiles--keep a, .adm-tiles--keep button, .adm-tiles--keep .adm-tiles__cell { padding: 12px 12px 13px; }
  .adm-tiles--keep .adm-tiles__l { align-items: flex-start; min-height: 2.6em; font-size: 10.5px; letter-spacing: .06em; }
  .adm-tiles--keep small { display: none; }
}