/* Admincentret, sidgrupp 4: bara det sidorna behöver utöver kitet (admin-ui.css). Laddas av base.html.
   Exempeloffert (pr-), Reklam (adm-reklam__ i kitets språk), Projekt och rum (pj-), Webbplatsen och Driftcentral (dr-).
   Kopiera-fältet, chips med radio/kryss, markeringen och massåtgärdsraden är kitets (admin-ui.css). */

/* ── Exempeloffert ───────────────────────────────────────────────────────────────────────────────────────────── */
.pr { max-width: 1180px; }
.pr .adm-head > :first-child, .pj .adm-head > :first-child { flex: 1 1 0; min-width: min(100%, 320px); }
/* Skickade länkar: siffrorna i kortets huvud (⋯-menyn på raden går utanför kortet – kitet). */
.pr-stats { text-align: right; }
.pr-stats em { font-style: normal; }
/* «Din länk»: popovern med Kopiera, besöken och ansökningarna. */
.pr-pop__h { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 2px !important; color: var(--adm-mut); font-size: 12px !important; font-weight: 500 !important; }
.pr-pop__h .tnum { color: var(--adm-deep); }
.pr-pop__h a { margin-left: auto; color: var(--adm-green); font-weight: 400; }
#pr-link-pop { width: min(380px, calc(100vw - 32px)); }
#pr-link-pop .pr-mini { max-height: 10rem; }
/* «Skickat till X» överst i dialogen efter ett utskick, med länken att kopiera (den visas bara nu). */
.pr-sent { display: flex; align-items: center; gap: 10px; margin: 0; }
.pr-sent > .material-symbols-outlined { font-size: 20px; }
.pr-sent__main { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.pr-sent__main b { font-weight: 500; }
.pr-sent__main small { font-size: 12.5px; opacity: .85; overflow-wrap: anywhere; }
.pr-sent .adm-btn { flex: none; color: inherit; }
.pr-mini { max-height: 13rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.pr-mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 34px; border-top: 1px solid var(--adm-soft); font-size: 12.5px; }
.pr-mini li:first-child { border-top: 0; }
.pr-mini li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-mini li.is-empty { display: block; padding: 8px 0; color: var(--adm-mut); }

.pr-table { --cols: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.2fr) 168px; }
.pr-table .adm-td--status { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pr-table .adm-td--status small { color: var(--adm-mut); font-size: 12px; }
.pr-table .adm-table__row.is-off .adm-td--title b { color: var(--adm-mut); }
.pr-error { color: var(--adm-bad) !important; white-space: normal !important; }
.pr-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.pr-actions form { margin: 0; }
@media (max-width: 640px) {
  .pr-table .adm-td--status { align-items: flex-end; }
  .pr-actions { justify-content: flex-start; padding-top: 4px; }
}

/* Skicka länk-dialogen: exemplet som ett lugnt kort, kanalerna som chips, sms:et som en telefonbubbla. */
.pr-example { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--adm-glass-edge); border-radius: 14px; background: var(--adm-glass); box-shadow: var(--adm-lift); }
.pr-example img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.pr-example__main { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.pr-example__main b { color: var(--adm-deep); font-weight: 500; }
.pr-example__main small { color: var(--adm-mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-send { display: grid; gap: 12px; margin: 0; }
.pr-via { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pr-via legend { margin-bottom: 6px; padding: 0; color: #3f4b43; font-size: 12.5px; font-weight: 500; }
.pr-via__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-warn { color: var(--adm-warn); }
.pr-send [hidden] { display: none !important; }
.pr-phone { display: grid; gap: 6px; padding: 12px 14px 10px; border-radius: 14px; background: rgb(18 56 43 / 5%); }
.pr-phone__k { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--adm-mut); font-size: 12px; }
.pr-reset { padding: 0; border: 0; background: none; color: var(--adm-green); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pr-bubble { display: grid; gap: 2px; justify-self: start; width: 92%; padding: 10px 12px; border-radius: 18px 18px 18px 5px; background: #fff; color: var(--adm-ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgb(20 30 25 / 6%); }
.pr-bubble textarea { width: 100%; min-height: 2.6rem; margin: 2px -5px; padding: 3px 5px; border: 1px dashed rgb(18 56 43 / 18%); border-radius: 8px; background: transparent; color: inherit; font: inherit; line-height: inherit; resize: none; overflow: hidden; }
.pr-bubble textarea:hover { border-color: rgb(18 56 43 / 28%); }
.pr-bubble textarea:focus { border-style: solid; border-color: var(--adm-green); outline: none; background: #fbfdfb; }
.pr-bubble__link { color: var(--adm-green); }
.pr-phone small { color: var(--adm-mut); font-size: 12px; }
.pr-phone small.is-warn { color: var(--adm-warn); }
@media (max-width: 640px) { .pr-example { flex-wrap: wrap; } .pr-example .adm-btn { width: 100%; } .pr-bubble textarea { font-size: 16px; } }

/* ── Projekt och rum ─────────────────────────────────────────────────────────────────────────────────────────── */
.pj { max-width: 1180px; }
.pj-results { display: grid; gap: 12px; min-width: 0; }
.pj-notice { margin: 0; }
.pj-card form { margin: 0; }
/* Massåtgärdsraden är kitets adm-bulk--dock (över rubrikraden på dator, dockad nertill på mobil). */
.pj-lock .material-symbols-outlined { font-size: 13px; }
.pj-lock::before { content: none !important; }
.pj-table--projects { --cols: 20px minmax(0, 2.4fr) 56px minmax(0, 1fr) 132px; }
.pj-table--rooms { --cols: 20px minmax(0, 1.4fr) minmax(0, 1.8fr) 132px; }
.pj-table .adm-table__head .adm-check { justify-self: start; }
.pj-table .adm-table__row:has([data-pj-check]:checked) { background: rgb(227 240 232 / 55%); }
.pj-table .adm-table__row.is-locked .adm-td--title b { color: var(--adm-mut); }
.pj-row-action { display: flex; justify-content: flex-end; }
.pj-table--rooms .adm-td--status { display: flex; justify-content: flex-start; }
.pj-project { color: inherit; text-decoration: underline; text-decoration-color: rgb(18 56 43 / 22%); text-underline-offset: 2px; }
.pj-project:hover { color: var(--adm-green); text-decoration-color: currentColor; }
.pj-table .adm-td--meta > .pj-project { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .pj-table .adm-td--check { order: 0; flex: none; }
  .pj-table .adm-td--meta { padding-left: 32px; }
  .pj-table .adm-td--meta + .adm-td--meta { padding-left: 0; }
  .pj-table .adm-td--meta > .pj-project { display: inline; }
  .pj-table .adm-td--meta > .pj-project + small::before { content: ' · '; }
  .pj-row-action { justify-content: flex-end; }
  .pj-table--rooms .adm-td--status:empty { display: none; }
}
@media (max-width: 640px) and (pointer: coarse) { .pj-table .adm-td--meta { padding-left: 44px; } }

/* ── Reklam (templates/accounts/admin_reklam.html, ägarens skiss 2026-10-15) ─────────────────────────────────────
   Kontokorten, composern till vänster, förslagen till höger och kön under – i kitets språk: glaskort, piller,
   skogsgrön primär. Rutorna har formatets bildförhållande även som skelett, så inget hoppar. Bildvisaren är ett mörkt
   ljusbord (portalens) och står utanför kitet. */
.adm-reklam { --reklam-ratio: 1 / 1; max-width: 1180px; }
.adm-reklam__head-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
@media (max-width: 640px) { .adm-reklam__head-actions { justify-content: flex-start; } }
.adm-reklam__label { margin: 0; color: var(--adm-green); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.adm-reklam__hint { color: var(--adm-mut); font-size: 12.5px; line-height: 1.45; }
.adm-reklam__hint[hidden], .adm-reklam__refs[hidden], .adm-reklam__source[hidden], .adm-reklam .adm-error[hidden] { display: none; }
.adm-reklam__card { min-width: 0; border: 1px solid var(--adm-glass-edge); border-radius: 20px; background: var(--adm-glass); box-shadow: var(--adm-lift); }
.adm-reklam__avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
/* Composer + förslag */
.adm-reklam__grid { display: grid; grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-reklam__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
.adm-reklam__form > * { min-width: 0; }  /* ett brett val (modellnamnet) får aldrig spränga kolumnen */
.adm-reklam__set { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.adm-reklam__set > legend { margin-bottom: 8px; padding: 0; }
.adm-reklam__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-reklam__chip { height: 34px; padding: 0 12px; font-size: 12.5px; }
.adm-reklam__shape { position: relative; display: inline-block; flex: none; border: 1.5px solid currentColor; border-radius: 2px; }
.adm-reklam__shape.is-square { width: 10px; height: 10px; }
.adm-reklam__shape.is-portrait { width: 9px; height: 11.5px; }
.adm-reklam__shape.is-tall { width: 7.5px; height: 13px; }
.adm-reklam__shape.is-carousel { width: 9px; height: 11.5px; margin-left: 2px; }
.adm-reklam__shape.is-carousel::before { content: ''; position: absolute; top: -3px; left: -4.5px; width: 9px; height: 11.5px; border: 1.5px solid currentColor; border-right: 0; border-bottom: 0; border-radius: 2px 0 0 0; }
.adm-reklam__reel-note { display: none; }
.adm-reklam[data-kind="reel"] .adm-reklam__reel-note { display: block; }
.adm-reklam__prompt, .adm-reklam__caption textarea, .adm-reklam__ctx-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--adm-field-line); border-radius: 12px; background: #fff; color: var(--adm-ink);
  font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.adm-reklam__prompt:focus, .adm-reklam__caption textarea:focus, .adm-reklam__ctx-field textarea:focus { border-color: var(--adm-green); outline: none; box-shadow: var(--adm-ring); }
.adm-reklam__prompt { min-height: 6rem; margin-top: -4px; }
.adm-reklam__source { display: flex; align-items: center; gap: 6px; margin: -4px 0 0; padding: 4px 4px 4px 10px; border-radius: 12px; background: var(--adm-green-soft); color: var(--adm-deep); font-size: 12.5px; }
.adm-reklam__source .material-symbols-outlined { font-size: 16px; }
.adm-reklam__source button { display: flex; margin-left: auto; padding: 4px; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.adm-reklam__source button:hover { background: rgb(18 56 43 / 8%); }
.adm-reklam__drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed rgb(18 56 43 / 22%); border-radius: 14px; color: #7f9a8a; cursor: pointer; transition: border-color 140ms, background-color 140ms; }
.adm-reklam__drop:hover, .adm-reklam__drop.is-over { border-color: var(--adm-green); background: rgb(227 240 232 / 45%); }
.adm-reklam__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.adm-reklam__drop:has(input:focus-visible) { outline: 2px solid var(--adm-green); outline-offset: 2px; }
.adm-reklam__drop > .material-symbols-outlined { font-size: 22px; }
.adm-reklam__drop-text { display: grid; gap: 1px; }
.adm-reklam__drop-text b { color: var(--adm-ink); font-size: 13.5px; font-weight: 500; }
.adm-reklam__drop-text small { color: var(--adm-mut); font-size: 12px; line-height: 1.4; }
.adm-reklam__refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.adm-reklam__ref { position: relative; width: 56px; height: 56px; overflow: hidden; border-radius: 12px; background: rgb(18 56 43 / 6%); }
.adm-reklam__ref img { width: 100%; height: 100%; object-fit: cover; }
.adm-reklam__ref button { position: absolute; top: 3px; right: 3px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: rgb(20 24 22 / 70%); color: #fff; cursor: pointer; }
.adm-reklam__ref button .material-symbols-outlined { font-size: 14px; }
.adm-reklam__refs-note { margin-top: -6px; }
.adm-reklam__refs[hidden] + .adm-reklam__refs-note { display: none; }
.adm-reklam__go-row { display: flex; align-items: center; gap: 10px; }
.adm-reklam__go-row label { color: var(--adm-mut); font-size: 12.5px; }
.adm-reklam__go-row 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-reklam__go-row select:focus { border-color: var(--adm-green); outline: none; box-shadow: var(--adm-ring); }
.adm-reklam__go { flex: 1; height: 40px; }
/* Förslagen blir: två lika breda val ovanför Förslag + Generera; låst (inte dold) när ett förslag ändras. */
.adm-reklam__spread .adm-reklam__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-reklam__spread .adm-reklam__chip { justify-content: center; }
.adm-reklam__spread:disabled .adm-reklam__chip { opacity: .55; cursor: default; }
/* Bildmodell och kvalitet (ägaren 2026-10-16): modellen tar resten av raden, långa namn kortas. */
.adm-reklam__model-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin-bottom: 2px; }
.adm-reklam__model-row label[for="adm-reklam-model"] { grid-area: 1 / 1; }
.adm-reklam__model-row #adm-reklam-model { grid-area: 2 / 1; width: 100%; min-width: 0; text-overflow: ellipsis; }
.adm-reklam__model-row label[for="adm-reklam-quality"] { grid-area: 1 / 2; }
.adm-reklam__model-row #adm-reklam-quality { grid-area: 2 / 2; }
.adm-reklam__stage { display: grid; align-content: start; min-height: 25rem; overflow: hidden; }
.adm-reklam__empty { display: grid; align-content: center; justify-items: center; gap: 6px; min-height: 25rem; padding: 32px; color: var(--adm-mut); text-align: center; }
.adm-reklam__empty > .material-symbols-outlined { color: #9fb5a8; font-size: 34px; font-variation-settings: 'wght' 300; }
.adm-reklam__empty h2 { margin: 4px 0 0; color: var(--adm-deep); font-family: var(--adm-serif); font-size: 22px; font-weight: 400; }
.adm-reklam__empty p { max-width: 26rem; margin: 0; font-size: 13px; line-height: 1.55; }
.adm-reklam__stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 18px 4px; }
.adm-reklam__stage-head h2 { margin: 0; color: var(--adm-deep); font-family: var(--adm-serif); font-size: 19px; font-weight: 400; line-height: 1.25; }
.adm-reklam__stage-head small { color: var(--adm-mut); font-size: 12.5px; }
.adm-reklam__count { color: var(--adm-mut); font-size: 12.5px; white-space: nowrap; }
.adm-reklam__banner { display: flex; align-items: center; gap: 8px; margin: 10px 18px 0; padding: 9px 12px; border-radius: 14px; font-size: 13px; }
.adm-reklam__banner .material-symbols-outlined { font-size: 18px; }
.adm-reklam__banner > span:nth-child(2), .adm-reklam__banner > span:nth-of-type(2) { flex: 1; }
.adm-reklam__banner a { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-weight: 500; }
.adm-reklam__banner a .material-symbols-outlined { font-size: 15px; }
.adm-reklam__banner.is-ok { background: var(--adm-green-soft); color: var(--adm-deep); }
.adm-reklam__banner.is-info { background: var(--adm-warn-bg); color: var(--adm-warn); }
.adm-reklam__banner.is-failed { background: var(--adm-bad-bg); color: var(--adm-bad); }
.adm-reklam__waiting { margin: 8px 18px 0; }
.adm-reklam__item { display: grid; align-content: start; gap: 5px; min-width: 0; margin: 0; }
.adm-reklam__subject { display: -webkit-box; overflow: hidden; color: var(--adm-mut); font-size: 12px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.adm-reklam__subject[hidden] { display: none; }
.adm-reklam__item-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; min-width: 0; }
.adm-reklam__item-row .adm-reklam__subject { flex: 1; min-width: 0; }
.adm-reklam__versions { display: inline-flex; flex: none; align-items: center; margin-left: auto; color: var(--adm-ink); font-size: 12px; }
.adm-reklam__versions[hidden] { display: none; }
.adm-reklam__versions button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--adm-ink); cursor: pointer; }
.adm-reklam__versions button:hover:not(:disabled) { background: var(--adm-soft); }
.adm-reklam__versions button:disabled { opacity: .3; cursor: default; }
.adm-reklam__versions .material-symbols-outlined { font-size: 18px; }
.adm-reklam__version-fail { color: var(--adm-bad); font-size: 12px; line-height: 1.35; }
.adm-reklam__tile .adm-reklam__previous { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.adm-reklam__tile .adm-reklam__previous + .adm-reklam__skel { position: absolute; inset: 0; opacity: .6; }
/* Pekskärm: 44 px-pilar tar halva rutans bredd – motivet får hela raden och växlaren en egen under. */
@media (hover: none) {
  .adm-reklam__item-row { flex-wrap: wrap; row-gap: 0; }
  .adm-reklam__item-row .adm-reklam__subject { flex-basis: 100%; }
  .adm-reklam__versions button { width: 44px; height: 44px; }
}
.adm-reklam__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 10px; padding: 14px 18px 18px; }
.adm-reklam__tile { position: relative; aspect-ratio: var(--reklam-ratio); overflow: hidden; border-radius: 14px; background: rgb(18 56 43 / 6%); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 140ms ease; }
.adm-reklam__tile[role=button] { cursor: pointer; }
.adm-reklam__tile:focus-visible { outline-color: #8fbfa5; }
.adm-reklam__tile.is-selected { outline-color: var(--adm-deep); }
.adm-reklam__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adm-reklam__tile .is-landing { animation: adm-reklam-land 180ms ease-out; }
@keyframes adm-reklam-land { from { opacity: 0; } to { opacity: 1; } }
.adm-reklam__skel { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ecebe4 0%, #f7f6f1 50%, #ecebe4 100%); background-size: 200% 100%; animation: adm-skel 1.2s ease-in-out infinite; }
.adm-reklam__fail { display: grid; align-content: center; justify-items: center; gap: 4px; height: 100%; margin: 0; padding: 12px; background: var(--adm-bad-bg); color: var(--adm-bad); font-size: 12px; text-align: center; }
.adm-reklam__mark { position: absolute; top: 7px; left: 7px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid #fff; border-radius: 999px; background: rgb(20 24 22 / 28%); color: #fff; font-size: 12px; font-weight: 700; }
.adm-reklam__tile.is-selected .adm-reklam__mark { background: var(--adm-deep); }
.adm-reklam__tools { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 5px; }
.adm-reklam__tools a, .adm-reklam__tools button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / 92%); color: var(--adm-deep); cursor: pointer; box-shadow: 0 1px 2px rgb(20 30 25 / 12%); }
.adm-reklam__tools .material-symbols-outlined { font-size: 17px; }
.adm-reklam__video { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 18px 14px; padding: 12px 14px; border: 1px dashed rgb(18 56 43 / 22%); border-radius: 14px; }
.adm-reklam__video video { width: 72px; aspect-ratio: 9 / 16; border-radius: 8px; background: #111; object-fit: cover; }
.adm-reklam__video div { display: grid; flex: 1; gap: 2px; min-width: 8rem; font-size: 13px; }
.adm-reklam__video small { color: var(--adm-mut); overflow-wrap: anywhere; }
.adm-reklam__file { position: relative; }
.adm-reklam__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.adm-reklam__caption { display: grid; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--adm-soft); }
.adm-reklam__caption[hidden] { display: none; }
.adm-reklam__caption-head { display: flex; align-items: center; gap: 10px; }
.adm-reklam__caption-head small { color: var(--adm-mut); font-size: 12px; }
.adm-reklam__caption-head .adm-btn { margin-left: auto; }
.adm-reklam__foot { display: flex; align-items: center; gap: 14px; padding: 12px 18px 16px; border-top: 1px solid var(--adm-soft); }
.adm-reklam__foot form { margin: 0; }
.adm-reklam__foot > small { flex: 1; color: var(--adm-mut); font-size: 12.5px; text-align: right; }
/* Kö och historik: kitets lista; tumnageln och skapelsen öppnar samma yta, knappen står på raden. */
.rk-table { --cols: 44px minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 9rem) 9rem; }
.adm-reklam__row.is-current { background: rgb(227 240 232 / 55%); }
.adm-reklam__thumb { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: rgb(18 56 43 / 6%); color: #9fb5a8; }
.adm-reklam__thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-reklam__thumb .material-symbols-outlined { font-size: 18px; }
.adm-reklam__row-title { color: inherit; }
.adm-reklam__row-title:hover b { color: var(--adm-green); }
.adm-reklam__row-info { color: #35443b; }
.rk-state { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rk-state small { color: var(--adm-mut); font-size: 12px; }
.rk-action { display: flex; justify-content: flex-end; }
.rk-action form { margin: 0; }
/* Dialogerna (kitets adm-modal): Grundkontext bred, Instagram-konton som rader, Posta med förhandsvisningen. */
.rk-ctx { width: min(760px, calc(100vw - 24px)); }
.adm-reklam__ctx-body { gap: 16px; }
.adm-reklam__ctx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-reklam__ctx-field { display: grid; align-content: start; gap: 3px; min-width: 0; }
.adm-reklam__ctx-field > b { color: #3f4b43; font-size: 12.5px; font-weight: 500; }
.adm-reklam__ctx-field > small { margin-bottom: 4px; color: var(--adm-mut); font-size: 12px; }
.adm-reklam__swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-reklam__swatch { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 5px; border: 1px solid var(--adm-field-line); border-radius: 999px; background: #fff; color: #4e5a52; font-size: 12px; cursor: pointer; }
.adm-reklam__swatch input { width: 24px; height: 24px; padding: 0; border: 1px solid rgb(0 0 0 / 12%); border-radius: 999px; background: none; cursor: pointer; }
.adm-reklam__swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.adm-reklam__swatch input::-webkit-color-swatch { border: 0; border-radius: 999px; }
.adm-reklam__swatch input::-moz-color-swatch { border: 0; border-radius: 999px; }
.adm-reklam__check { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; color: var(--adm-ink); font-size: 13px; cursor: pointer; }
.adm-reklam__ctx-scope { display: grid; justify-items: start; gap: 8px; }
.adm-reklam__ctx-scope > b { color: #3f4b43; font-size: 12.5px; font-weight: 500; }
.adm-reklam__tabs { flex-wrap: wrap; max-width: 100%; }
.adm-reklam__tabs .adm-chip { font: inherit; font-size: 13px; cursor: pointer; }
.adm-reklam__tabs .adm-chip.is-active { border-color: var(--adm-deep); background: var(--adm-deep); color: #fff; }
.adm-reklam__ctx-prompt summary, .adm-reklam__howto summary { color: var(--adm-green); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.adm-reklam__ctx-prompt pre { max-height: 13rem; margin: 8px 0 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--adm-line); border-radius: 12px; background: rgb(255 255 255 / 60%); color: #2a332d; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.adm-reklam__account-list { border-radius: 14px; }
.adm-reklam__account-list > li { flex-wrap: nowrap; padding: 10px 12px; }
.adm-reklam__account-list form { margin: 0; }
.adm-reklam__add-form { display: grid; gap: 10px; margin: 0; }
.adm-reklam__howto { color: #35443b; font-size: 12.5px; }
.adm-reklam__howto ol { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 18px; }
.adm-reklam__preview-body { display: grid; gap: 10px; min-height: 0; }
.adm-reklam__preview { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.adm-reklam__preview figure { position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: var(--reklam-ratio); max-height: 50dvh; overflow: hidden; border-radius: 14px; background: rgb(18 56 43 / 6%); scroll-snap-align: start; }
.adm-reklam__preview[data-count]:not([data-count="1"]) figure { flex-basis: 78%; }
.adm-reklam__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adm-reklam__preview figcaption { position: absolute; right: 6px; bottom: 6px; left: 6px; display: flex; align-items: center; gap: 5px; }
.adm-reklam__preview figcaption span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: auto; border-radius: 999px; background: var(--adm-deep); color: #fff; font-size: 12px; font-weight: 700; }
.adm-reklam__preview figcaption button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / 92%); color: var(--adm-deep); cursor: pointer; }
.adm-reklam__preview figcaption button:disabled { opacity: .4; cursor: default; }
.adm-reklam__preview-caption { margin: 0; color: #35443b; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
/* Nu/Schemalägg: ett segment som Driftcentralens (piller i skog). */
.adm-reklam__when { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border: 1px solid rgb(18 56 43 / 10%); border-radius: 999px; background: rgb(255 255 255 / 60%); }
.adm-reklam__when label { position: relative; }
.adm-reklam__when input { position: absolute; opacity: 0; pointer-events: none; }
.adm-reklam__when span { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; color: #35443b; font-size: 13px; cursor: pointer; }
.adm-reklam__when input:checked + span { background: var(--adm-deep); color: #fff; font-weight: 500; }
.adm-reklam__when input:focus-visible + span { outline: 2px solid var(--adm-green); outline-offset: 1px; }
.adm-reklam__datetime { justify-self: start; height: 38px; padding: 0 12px; border: 1px solid var(--adm-field-line); border-radius: 12px; background: #fff; font: inherit; font-size: 13.5px; }
.adm-reklam__datetime[hidden], .adm-reklam__warn[hidden] { display: none; }
.adm-reklam__warn { margin: 0; color: var(--adm-warn); font-size: 12.5px; }
/* Bildvisaren: helskärm i portalens ljusbords språk (customer-portal__lightbox), fältet under bilden. */
.adm-reklam__viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0f0d; color: #fff; }
.adm-reklam__viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: adm-reklam-viewer 220ms cubic-bezier(.22, 1, .36, 1); }
.adm-reklam__viewer::backdrop { background: #0b0f0d; }
.adm-reklam__viewer-track { display: flex; min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.adm-reklam__viewer-track::-webkit-scrollbar { display: none; }
.adm-reklam__viewer-track.is-zoomed { overflow: hidden; touch-action: none; }
.adm-reklam__viewer-track figure { display: grid; flex: 0 0 100%; place-items: center; min-width: 0; margin: 0; padding: 16px; overflow: hidden; scroll-snap-align: start; }
.adm-reklam__viewer-track img { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; transform-origin: 0 0; cursor: zoom-in; user-select: none; -webkit-user-drag: none; touch-action: pan-x; }
.adm-reklam__viewer-track.is-zoomed img { cursor: grab; }
.adm-reklam__viewer-track img.is-easing { transition: transform 200ms cubic-bezier(.22, 1, .36, 1); }
.adm-reklam__viewer-fit { position: absolute; top: 16px; left: 50%; height: 36px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px; background: rgb(11 15 13 / 70%); color: #fff; font: inherit; font-size: 13px; cursor: pointer; transform: translateX(-50%); }
.adm-reklam__viewer-fit[hidden] { display: none; }
.adm-reklam__viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); color: #cfd8d3; font-size: 13.5px; }
.adm-reklam__viewer-info { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; margin: 0; line-height: 1.4; }
.adm-reklam__viewer-info [data-viewer-meta]:empty { display: none; }
.adm-reklam__viewer-info [data-viewer-meta] { color: #8fa197; }
.adm-reklam__viewer-subject { display: -webkit-box; flex-basis: 100%; overflow: hidden; color: #fff; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.adm-reklam__viewer-subject.is-open { display: block; }
.adm-reklam__viewer-actions { display: flex; flex: none; align-items: center; gap: 6px; }
.adm-reklam__viewer-btn, .adm-reklam__viewer-pick { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.adm-reklam__viewer-btn .material-symbols-outlined { font-size: 17px; }
.adm-reklam__viewer-pick { border-color: #fff; background: #fff; color: var(--adm-deep); }
.adm-reklam__viewer-pick.is-on { border-color: #2fbf71; background: #2fbf71; color: #0b0f0d; }
.adm-reklam__viewer-pick:disabled { opacity: .55; cursor: default; }
.adm-reklam__viewer-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px; background: transparent; color: #fff; cursor: pointer; text-decoration: none; }
.adm-reklam__viewer-icon:disabled { opacity: .35; cursor: default; }
.adm-reklam__viewer [hidden] { display: none; }
.adm-reklam__viewer :focus-visible { outline: 2px solid #2fbf71; outline-offset: 2px; }
@keyframes adm-reklam-viewer { from { opacity: 0; transform: scale(.98); } }
@media (hover: none) { .adm-reklam__viewer-step { display: none; } }
@media (max-width: 720px) {
  .adm-reklam__viewer-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .adm-reklam__viewer-subject { -webkit-line-clamp: 2; }
  .adm-reklam__viewer-pick { flex: 1; justify-content: center; }
  .adm-reklam__viewer-track figure { padding: 8px; }
  .adm-reklam__viewer-track img { max-height: calc(100dvh - 10rem); }
}
/* Admincentrets meny tar ~15 rem: under 1180 px blir förslagskortet för smalt bredvid formuläret – en kolumn. */
@media (max-width: 1180px) { .adm-reklam__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
  .adm-reklam__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-reklam__stage, .adm-reklam__empty { min-height: 16rem; }
}
@media (max-width: 640px) {
  .adm-reklam__ctx-grid { grid-template-columns: minmax(0, 1fr); }
  .adm-reklam__form { padding: 14px; }
  .adm-reklam__tiles { padding: 12px 14px 14px; }
  .adm-reklam__stage-head, .adm-reklam__caption { padding-left: 14px; padding-right: 14px; }
  .adm-reklam__banner, .adm-reklam__waiting { margin-left: 14px; margin-right: 14px; }
  .adm-reklam__foot { flex-wrap: wrap; padding: 12px 14px 14px; }
  .adm-reklam__foot > small { flex-basis: 100%; order: -1; text-align: left; }
  .adm-reklam__foot .adm-btn--primary { flex: 1; height: 44px; }
  .adm-reklam__prompt, .adm-reklam__caption textarea, .adm-reklam__ctx-field textarea, .adm-reklam__go-row select { font-size: 16px; }
  .adm-reklam__chip { height: 44px; }
  .adm-reklam__subject { -webkit-line-clamp: 3; }
  .rk-table .adm-reklam__thumb { order: -1; width: 40px; height: 40px; }
  .rk-action { justify-content: flex-start; padding-top: 4px; }
  .rk-table .adm-reklam__row-info { white-space: normal; }
  .rk-table .adm-reklam__row-info > span:empty + small::before { content: none; }
  .rk-state { align-items: flex-end; }
}
@media (pointer: coarse) { .adm-reklam__tools a, .adm-reklam__tools button { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .adm-reklam__skel, .adm-reklam__tile .is-landing, .adm-reklam__viewer[open] { animation: none; }
  .adm-reklam__tile, .adm-reklam__drop { transition: none; }
  .adm-reklam__viewer-track img.is-easing { transition: none; }
}
/* Skriptet döljer med hidden – också kitets knappar och piller (inline-flex) ska försvinna. */
.adm-reklam [hidden] { display: none !important; }
.adm-reklam__check input[type="checkbox"]:not(.sr-only):not(.peer) { flex: none; 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-reklam__check input[type="checkbox"]:not(.sr-only):not(.peer):checked { border-color: var(--adm-deep); background-color: var(--adm-deep); box-shadow: none; }
.adm-reklam__check input[type="checkbox"]:not(.sr-only):not(.peer):focus-visible { box-shadow: var(--adm-ring); }

/* ── Driftcentral och Webbplatsen: inställningslistan (kitets adm-set) och dialogernas listor ──────────────────────
   Listan kan bestå av flera block (ett formulär runt integrationernas rader): linjen mellan blocken som mellan rader. */
.dr { max-width: 880px; }
.dr-set > * + * { border-top: 1px solid var(--adm-soft); }
.dr-set .adm-rows > li { padding: 0; }
.dr-set__form { flex: 1 1 auto; min-width: 0; margin: 0; }
.dr-set__form > .adm-rows { width: 100%; }
.dr-sudo[hidden] { display: none; }
.dr-sudo .material-symbols-outlined { font-size: 16px; }
/* En pausad integration är avvikande men avsiktlig: gul rad, texten följer brytaren direkt (före svaret). */
.dr-integration .dr-off, .dr-integration:has(.adm-switch__input:not(:checked)) .dr-on { display: none; }
.dr-integration:has(.adm-switch__input:not(:checked)) .dr-off { display: inline; }
.dr-integration:has(.adm-switch__input:not(:checked)) { background: color-mix(in srgb, var(--adm-warn-bg) 55%, transparent); }
.dr-integration:has(.adm-switch__input:not(:checked)) .adm-set__main > b, .dr-integration:has(.adm-switch__input:not(:checked)) .dr-off { color: var(--adm-warn); }
.dr-set .dr-bad, .dr-list .dr-bad { color: var(--adm-bad); font-style: normal; font-weight: 500; }
.dr-good { color: var(--adm-green) !important; }
/* Dialogernas listor (AI-profiler, sessioner): raden = namn + en rad, knapparna på raden. */
.dr-list, .dr-sessions { border-radius: 14px; }
.dr-list > li, .dr-sessions > li { flex-wrap: nowrap; padding: 11px 12px 11px 14px; }
.dr-list > li.is-error .adm-rows__main > b { color: var(--adm-bad); }
.dr-list .adm-rows__main > b .adm-pill { margin-left: 6px; vertical-align: 1px; }
.dr-list form, .dr-sessions form { margin: 0; }
.dr-list__actions { display: flex; flex: none; align-items: center; gap: 6px; }
.dr-sessions .adm-rows__main a { color: inherit; }
.dr-sessions .adm-rows__main a:hover { color: var(--adm-green); }
.dr-add { margin-top: 2px; }
.dr .dr-add__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.dr .dr-add__form .adm-toggle { display: inline-flex; grid-column: 1 / -1; color: var(--adm-ink); font-size: 13.5px; }
.dr-add__foot { display: flex; justify-content: flex-end; }
.dr #drift-logg .dr-log li { padding-left: 18px; padding-right: 18px; }
.dr-log time { white-space: nowrap; }
@media (max-width: 640px) {
  .dr-list > li, .dr-sessions > li { flex-wrap: wrap; }
  .dr-list__actions { width: 100%; justify-content: flex-end; }
  .dr-log li { padding-left: 14px; padding-right: 14px; }
}
/* Webbplatsen: grundarens rad öppnar en popover under sig (kitets adm-setbox); fälten sparar sig själva, felet står under fälten. */
.ws-form { display: grid; gap: 10px; margin: 0; }
.ws-err { display: block; margin: 0; color: var(--adm-bad); font-size: 12px; font-style: normal; line-height: 1.4; }
.ws-err:empty { display: none; }
.ws-saved { justify-self: end; }
.ws-foot { align-items: center; }
.ws-foot .ws-saved { order: -2; }
.ws-foot__meta { flex: 1 1 auto; color: var(--adm-mut); font-size: 12px; }
@media (max-width: 640px) { .ws-foot { flex-wrap: wrap; } .ws-foot__meta { flex-basis: 100%; order: -1; } }
/* Reklam, andra passet: kontona i Instagram-dialogen (radioknappen väljer kontot för nya inlägg), bildmodellen överst i
   Grundkontext, ⋯ på köns rad (menyn går utanför kortet – kitet). */
.rk-action .adm-more { margin-left: auto; }
.adm-reklam__banner .adm-more { margin-left: auto; }
.adm-reklam__account-list > li.is-error .adm-rows__main > b, .adm-reklam__bad { color: var(--adm-bad); font-style: normal; }
.adm-reklam__use { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.adm-reklam__use input { width: 18px; height: 18px; margin: 0; accent-color: var(--adm-deep); cursor: pointer; }
.adm-reklam__ctx-model { padding-bottom: 14px; border-bottom: 1px solid var(--adm-soft); }
.adm-reklam__ctx-model .adm-reklam__model-row { max-width: 30rem; margin-top: 4px; }
.adm-reklam__ctx-model 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; }
@media (pointer: coarse) { .adm-reklam__use { width: 44px; height: 44px; } }
@media (max-width: 640px) { .adm-reklam__ctx-model select { height: 44px; font-size: 16px; } }
.pr-more-gap { flex: none; width: 32px; }
@media (pointer: coarse) { .pr-more-gap { width: 44px; } }
@media (max-width: 640px) { .pr-more-gap { display: none; } }
.ws-pop .ws-form { margin-top: 12px; }