/* Admincentret, sidgrupp 2: bara det sidorna behöver utöver kitet (admin-ui.css). Laddas av base.html.
   Zimla AI (ag-, och inspektörens agent-chat/agent-msg/agent-run/agent-find), Offertsupport (qs-, utöver
   admin-center.css) och Support (sup-). Beteendet är kitets (admin-ui.js) och tavlans (kanban-board.js). */

/* ── Zimla AI: sidhuvud ───────────────────────────────────────────────────────────────────────────────────── */
.ag-head__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.ag-pop-fields { display: grid; gap: 12px; }
.ag .adm-tabs { margin-top: -6px; }
.ag .adm-list__results, .sup-board { grid-template-columns: minmax(0, 1fr); } /* breda tabeller skrollar i sitt kort, inte sidan */

/* ── Problem: ett problem per rad (52–64 px) – rubrik, en mening, «N chattar ▸», knapparna; citaten fälls ut under ── */
.ag-problem { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; min-height: 52px; padding: 9px 12px 9px 18px; }
.ag-problem + .ag-problem { border-top: 1px solid var(--adm-soft); }
.ag-problem:hover { background: rgb(255 255 255 / 55%); }
.ag-problem__main { min-width: 0; }
.ag-problem__main h3 { margin: 0; overflow: hidden; color: var(--adm-ink); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.ag-problem__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 2px 0 0; color: var(--adm-mut); font-size: 12px; line-height: 1.4; }
.ag-problem__meta .adm-pill { height: 20px; font-size: 11.5px; }
.ag-problem__fold { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px 0 10px; border: 0; border-radius: 999px; background: none; color: var(--adm-green); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.ag-problem__fold:hover { background: var(--adm-soft); }
.ag-problem__fold:focus-visible { outline: 2px solid var(--adm-green); outline-offset: 1px; }
.ag-problem__fold .material-symbols-outlined { font-size: 18px; transition: transform 140ms var(--adm-ease); }
.ag-problem__fold[aria-expanded="true"] .material-symbols-outlined { transform: rotate(90deg); }
.ag-problem__fold.is-empty { color: var(--adm-mut); cursor: default; }
.ag-problem__acts { display: flex; gap: 6px; margin: 0; }
.ag-problem__acts .material-symbols-outlined { font-size: 16px; }
.ag-problem__quotes { grid-column: 1 / -1; display: grid; gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.ag-problem__quotes[hidden] { display: none; }
.ag-problem__quotes li { padding-left: 12px; border-left: 2px solid var(--adm-line); }
.ag-problem__quotes p { margin: 0; color: #35443b; font-size: 12.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.ag-problem__quotes small { display: block; margin-top: 3px; color: var(--adm-mut); font-size: 12px; overflow-wrap: anywhere; }
.ag-problem__quotes a { color: var(--adm-green); text-decoration: underline; text-underline-offset: 2px; }
.ag-problem__quotes a:hover { color: var(--adm-green-hover); }
.ag-problem__quotes .ag-problem__more { border-left-color: transparent; color: var(--adm-mut); font-size: 12px; }
.ag-problem.is-cursor { background: #fff; box-shadow: inset 3px 0 0 var(--adm-green); }
@media (max-width: 640px) {
  .ag-problem { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px 10px 14px; }
  .ag-problem__main h3 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ag-problem__acts { grid-column: 1 / -1; justify-content: flex-end; }
  .ag-problem__fold { height: 36px; }
}

/* ── Chattar: tabellen ───────────────────────────────────────────────────────────────────────────────────── */
.ag-chats { --cols: minmax(0, 1fr) 170px 96px; }
.ag-chat__q b { display: block; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ag-chats .adm-td .adm-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 641px) and (max-width: 1100px) { .ag-chats { --cols: minmax(0, 1fr) 150px 88px; } }
@media (max-width: 640px) {
  .ag-chat__q b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}
/* Granskningen i chattpanelens fot (o/p) och som list på hela sidan (?egen=1). */
.ag-review-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ag-review-foot__state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--adm-mut); font-size: 12.5px; }
.ag-review-foot__acts { display: flex; gap: 8px; margin: 0 0 0 auto; }
.ag-review-foot__acts .adm-btn[aria-pressed="true"]:not(.adm-btn--primary) { border-color: rgb(155 71 54 / 40%); color: var(--adm-bad); }
.ag-review-bar { margin-top: 14px; padding: 10px 12px 10px 16px; }
.ag-pop-keys { margin: 0; }
.ag-pop-keys .adm-rows__main small { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ag-review-foot__acts { flex: 1 1 100%; }
  .ag-review-foot__acts .adm-btn { flex: 1; }
}

/* Chattrader i panelerna (användarens flik Chattar, projektets chattar – admin_chat_row.html). */
.agent-chats__list { margin: 0; padding: 0; list-style: none; }
.agent-chats__list > li + li { border-top: 1px solid var(--adm-soft); }
.agent-chats__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 10px 16px; color: inherit; }
.agent-chats__row:hover, .agent-chats__row:focus-visible { background: rgb(255 255 255 / 72%); }
.agent-chats__q { overflow: hidden; color: var(--adm-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.agent-chats__meta { grid-column: 1; color: var(--adm-mut); font-size: 12px; }
.agent-chats__chips { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
@media (max-width: 640px) {
  .agent-chats__row { grid-template-columns: minmax(0, 1fr); }
  .agent-chats__chips { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .agent-chats__q { white-space: normal; }
}

/* ── Inspektören: hela chatten i den breda panelen och som hel sida (?egen=1) ───────────────────────────── */
.agent-chat { color: var(--adm-ink); }
.agent-chat__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding: 16px 18px; border: 1px solid var(--adm-glass-edge); border-radius: 20px; background: var(--adm-glass); box-shadow: var(--adm-lift); }
.agent-chat__title { min-width: 0; }
.agent-chat__title p { margin: 2px 0 0; color: var(--adm-mut); font-size: 12.5px; overflow-wrap: anywhere; }
.agent-chat__title a { color: #35443b; text-decoration: underline; text-decoration-color: rgb(18 56 43 / 25%); text-underline-offset: 2px; }
.agent-chat__title a:hover { color: var(--adm-green); }
.agent-chat__eyebrow { margin: 0 0 4px !important; color: var(--adm-green) !important; font-size: 11px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.agent-chat__eyebrow .agent-chat__id { letter-spacing: 0; text-transform: none; }
/* Hela ID:t för agent-API:t: ett klick markerar allt, radbryts i stället för att kapas. */
.agent-chat__id { color: #35443b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 500; overflow-wrap: anywhere; cursor: text; -webkit-user-select: all; user-select: all; }
.agent-chat__tools { display: flex; gap: 6px; }
.agent-chat__head + .agent-chat__stats { margin-top: 14px; }
.agent-chat__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--adm-glass-edge); border-radius: 18px; background: var(--adm-glass); box-shadow: var(--adm-lift); overflow: hidden; }
/* Linjerna ritas åt höger och nedåt; kortets kant klipper dem längst ut, så ingen tom ruta syns. */
.agent-chat__stats li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; padding: 11px 14px; color: var(--adm-mut); font-size: 12px; box-shadow: 1px 0 0 var(--adm-soft), 0 1px 0 var(--adm-soft); }
.agent-chat__stats b { color: var(--adm-deep); font-family: var(--adm-serif); font-size: 19px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.agent-chat__stats .is-bad, .agent-chat__stats .is-bad b { color: var(--adm-bad); }
.agent-chat__stats a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.agent-chat__note { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--adm-head-bg); box-shadow: inset 0 0 0 1px var(--adm-line); color: #45524a; font-size: 12.5px; line-height: 1.5; }
.agent-chat__findings { margin-top: 12px; }
.agent-chat__log { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.agent-msg { padding: 11px 14px 12px; border: 1px solid var(--adm-glass-edge); border-radius: 16px; background: rgb(255 255 255 / 70%); box-shadow: 0 1px 2px rgb(20 30 25 / 4%); }
.agent-msg.is-user { border-color: transparent; background: var(--adm-green-soft); box-shadow: none; }
.agent-msg__who { margin: 0 0 4px; color: var(--adm-mut); font-size: 11.5px; }
.agent-msg.is-user .agent-msg__who { color: var(--adm-green); }
.agent-msg__status { color: var(--adm-bad); }
.agent-msg__text { font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-run { padding-left: 4px; }
.agent-run > details { padding: 2px 0 2px 12px; border-left: 2px solid rgb(18 56 43 / 16%); }
.agent-run.is-failed > details, .agent-run.is-interrupted > details { border-left-color: #d9a092; }
.agent-run summary, .agent-run__tools summary, .agent-raw summary { color: #4e5a52; font-size: 12px; cursor: pointer; }
.agent-run > details > summary { display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 4px 0; }
.agent-run__state { color: var(--adm-deep); font-weight: 500; }
.agent-run.is-failed .agent-run__state, .agent-run.is-interrupted .agent-run__state { color: var(--adm-bad); }
.agent-run__err { margin: 6px 0; padding: 8px 11px; border-radius: 12px; background: var(--adm-bad-bg); color: var(--adm-bad); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-run__steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; padding: 0; list-style: none; }
.agent-run__steps li { padding: 2px 8px; border-radius: 999px; background: rgb(18 56 43 / 6%); color: #4e5a52; font-size: 11.5px; }
.agent-run__steps li.is-failed { background: var(--adm-bad-bg); color: var(--adm-bad); }
.agent-run__tools { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
.agent-run__tools summary { padding: 3px 0; }
.agent-run__tools summary code { color: var(--adm-ink); font-size: 12px; }
.agent-run__tools li.is-failed summary, .agent-run__tools li.is-effect_unknown summary { color: var(--adm-bad); }
.agent-run__label { margin: 8px 0 3px; color: var(--adm-green); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.agent-chat pre { max-height: 22rem; margin: 4px 0 0; padding: 9px 11px; overflow: auto; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--adm-line); color: #35443b; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-chat pre.is-bad { background: #fff7f5; color: #7f3a2c; }
.agent-raw { margin-top: 4px; }
.agent-find { margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: var(--adm-warn-bg); box-shadow: inset 2px 0 0 #d9a13d; font-size: 12.5px; }
.agent-find--blockerar { background: var(--adm-bad-bg); box-shadow: inset 2px 0 0 #c4553f; }
.agent-find p { margin: 3px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.agent-find__head { margin: 0 !important; }
.agent-find__head a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.agent-find__head b { font-weight: 500; }
.agent-find__head .adm-pill { vertical-align: 1px; }
.agent-find__head > span:last-child, .agent-find__more { color: var(--adm-mut); font-size: 12px; }
.agent-chat__files { margin-top: 16px; }
.agent-chat__files ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.agent-chat__files li { padding: 3px 0; }
.agent-chat__files a { color: var(--adm-green); text-decoration: underline; text-underline-offset: 2px; }
.agent-chat__files small { color: var(--adm-mut); }
.agent-chat [id^="r"], .agent-chat [id^="c"], .agent-chat [id^="f"] { scroll-margin-top: 24px; }
@media (max-width: 640px) {
  .agent-chat__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-run__tools summary { padding: 10px 0; }
  .agent-chat__when { display: none; }
}

/* ── Nyckeltal ───────────────────────────────────────────────────────────────────────────────────────────── */
.ag-period { margin: 2px 0 0; color: var(--adm-deep); font-family: var(--adm-serif); font-size: 19px; line-height: 1.3; }
.ag-kpi-bar { flex-wrap: nowrap; }
.ag-kpi-bar .adm-chips { min-width: 0; }
.ag-kpi-scroll { overflow-x: auto; }
.ag-kpi-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ag-kpi-table th, .ag-kpi-table td { padding: 9px 12px; border-bottom: 1px solid var(--adm-soft); text-align: right; white-space: nowrap; }
.ag-kpi-table thead th { color: var(--adm-mut); font-size: 11.5px; font-weight: 500; white-space: normal; vertical-align: bottom; min-width: 76px; cursor: help; }
.ag-kpi-table tbody tr:last-child > * { border-bottom: 0; }
.ag-kpi-table th:first-child { position: sticky; left: 0; z-index: 1; padding-left: 18px; background: #fbfaf6; text-align: left; }
.ag-kpi-table tbody th { color: var(--adm-ink); font-weight: 500; }
.ag-kpi-table tbody th small { display: block; color: var(--adm-mut); font-size: 11.5px; font-weight: 400; }
.ag-kpi-table td.is-zero { color: #9aa49d; }
/* Fyra kolumner; «Fler nyckeltal» (kryssruta i foten) visar resten. */
.ag-kpi-table .is-more { display: none; }
.ag-kpi:has(.ag-kpi__toggle:checked) .ag-kpi-table .is-more { display: table-cell; }
.ag-kpi__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ag-kpi__more { cursor: pointer; }
.ag-kpi__more:has(:focus-visible) { outline: 2px solid var(--adm-green); outline-offset: 2px; }
.ag-kpi__more .material-symbols-outlined { font-size: 18px; transition: transform 140ms var(--adm-ease); }
.ag-kpi__more-on, .ag-kpi:has(.ag-kpi__toggle:checked) .ag-kpi__more-off { display: none; }
.ag-kpi:has(.ag-kpi__toggle:checked) .ag-kpi__more-on { display: inline; }
.ag-kpi:has(.ag-kpi__toggle:checked) .ag-kpi__more .material-symbols-outlined { transform: rotate(180deg); }
.ag-kpi-empty { padding: 14px 18px; border-radius: 18px; background: var(--adm-glass); box-shadow: var(--adm-lift); }
.ag .adm-tiles__l .adm-tip { margin: -4px 0 -4px 2px; }
.adm-card__foot a { color: var(--adm-green); text-decoration: underline; text-underline-offset: 2px; }
.ag-help > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 12px 18px; color: var(--adm-deep); font-family: var(--adm-serif); font-size: 19px; list-style: none; cursor: pointer; }
.ag-help > summary::-webkit-details-marker { display: none; }
.ag-help > summary small { margin-left: 8px; color: var(--adm-mut); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 12.5px; overflow-wrap: anywhere; }
.ag-help > summary .material-symbols-outlined { color: var(--adm-mut); font-size: 20px; transition: transform 160ms var(--adm-ease); }
.ag-help[open] > summary { border-bottom: 1px solid var(--adm-soft); }
.ag-help[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.ag-help__body { display: grid; gap: 12px; padding: 14px 18px 18px; }
.ag-help dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; margin: 0; }
.ag-help dt { font-size: 13px; font-weight: 500; }
.ag-help dd { margin: 2px 0 0; color: var(--adm-mut); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 640px) {
  .ag-kpi-bar { flex-wrap: wrap; }
  .ag-kpi-bar .adm-chips { width: 100%; }
  .ag-kpi-table th:first-child { padding-left: 14px; }
}

/* ── API-nycklar ─────────────────────────────────────────────────────────────────────────────────────────── */
.ag-keys { --cols: minmax(0, 1.7fr) 112px 120px 104px 150px 112px; }
.ag-keys .adm-table__row.is-muted .adm-td--title b { color: var(--adm-mut); }
.ag-keys code, .ag-call { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ag-keys__act { display: flex; justify-content: flex-end; }
.ag-keys__act form { margin: 0; }
.ag-keys__notice { margin: 12px 18px 0; }
.ag-once { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--adm-field-line); border-radius: 14px; background: #fff; }
.ag-once__key { flex: 1 1 260px; min-width: 0; color: var(--adm-deep); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.ag-connect__steps { display: grid; gap: 12px; margin: 0; padding: 16px 18px 16px 38px; color: #35443b; font-size: 13px; line-height: 1.5; }
.ag-connect__steps li { min-width: 0; overflow-wrap: anywhere; }
.ag-connect__steps b { font-weight: 500; }
.ag-connect__steps a, .ag-connect .adm-card__foot q { color: var(--adm-green); }
.ag-connect__steps a { text-decoration: underline; text-underline-offset: 2px; }
.ag-connect .adm-card__foot { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.ag-code { margin: 6px 0 0; padding: 10px 12px; overflow-x: auto; border-radius: 12px; background: rgb(18 56 43 / 5%); font-size: 12px; }
.ag-code code { white-space: pre; }
.ag-endpoints { --cols: 150px minmax(0, 1.25fr) minmax(0, 1.6fr); }
.ag-endpoints .adm-table__row { align-items: start; }
.ag-endpoints .adm-td--meta b { font-weight: 500; }
.ag-call { white-space: normal; overflow-wrap: anywhere; }
.ag-method { display: inline-block; min-width: 44px; margin-right: 4px; padding: 1px 6px; border-radius: 6px; background: var(--adm-green-soft); color: var(--adm-green); font-size: 11px; font-weight: 600; text-align: center; }
.ag-method--post, .ag-method--put, .ag-method--patch { background: var(--adm-warn-bg); color: var(--adm-warn); }
.ag-method--delete { background: var(--adm-bad-bg); color: var(--adm-bad); }
@media (min-width: 641px) and (max-width: 1100px) {
  .ag-keys { --cols: minmax(0, 1.6fr) 112px 120px 140px 112px; }
  .ag-keys .adm-table__head > :nth-child(4), .ag-keys .adm-table__row > :nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  .ag-keys__act { flex-basis: 100%; order: 5; justify-content: flex-start; }
  .ag-keys__act:empty { display: none; }
  .ag-connect__steps { padding: 14px 14px 14px 32px; }
  .ag-endpoints .adm-td--meta:first-child:empty { display: none; }
}

/* ── Support: tavlan ─────────────────────────────────────────────────────────────────────────────────────── */
.sup-board { display: grid; gap: 14px; min-width: 0; }
.sup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; }
/* Chipsen Akuta · Svarsförslag göms vid 0 (kitet); utan något chip att visa tar raden ingen plats (mobilen har kolumnerna där). */
.sup-filters:not(:has(.adm-chip:not([data-adm-count="0"]), .adm-chip[aria-current])) { display: none; }
@media (min-width: 641px) { .sup-bar:not(:has(.sup-filters .adm-chip:not([data-adm-count="0"]), .sup-filters .adm-chip[aria-current])) { display: none; } }
.sup-colchips { display: none; }
.sup-cols { display: grid; grid-auto-columns: minmax(208px, 1fr); grid-auto-flow: column; gap: 12px; padding-bottom: 6px; overflow-x: auto; }
.sup-col { display: flex; flex-direction: column; min-height: 24rem; padding: 6px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 20px; background: rgb(18 56 43 / 4%); transition: background-color 140ms, box-shadow 140ms; }
.sup-col.is-drop { background: color-mix(in srgb, var(--adm-green-soft) 80%, transparent); box-shadow: inset 0 0 0 2px rgb(31 107 79 / 35%); }
.sup-col__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 12px; }
.sup-col__head h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--adm-deep); font-size: 13px; font-weight: 500; }
.sup-col__count { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: rgb(255 255 255 / 80%); color: var(--adm-mut); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.sup-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa49d; }
.sup-dot--todo { background: #5f8fa8; }
.sup-dot--in_progress { background: #c48a1c; }
.sup-dot--review { background: #8a6fae; }
.sup-dot--done { background: var(--adm-green); }
.sup-col__cards { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.sup-col__empty { display: grid; flex: 1; place-items: center; min-height: 8rem; margin: 0; border: 1px dashed rgb(18 56 43 / 16%); border-radius: 14px; color: var(--adm-mut); font-size: 12.5px; }
.sup-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 12px 10px 14px; border: 1px solid var(--adm-glass-edge); border-radius: 16px; background: linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 80%)); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(20 30 25 / 5%), 0 10px 22px -18px rgb(18 56 43 / 40%); cursor: grab; transition: box-shadow 140ms, border-color 140ms, opacity 140ms; }
.sup-card:hover { border-color: rgb(18 56 43 / 14%); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(20 30 25 / 6%), 0 14px 28px -18px rgb(18 56 43 / 50%); }
.sup-card.is-urgent { box-shadow: inset 3px 0 0 #c0533f, 0 1px 2px rgb(20 30 25 / 5%), 0 10px 22px -18px rgb(18 56 43 / 40%); }
.sup-card.is-dragging { opacity: .5; }
.sup-card.is-moving { opacity: .7; }
.sup-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sup-card__title { display: -webkit-box; min-width: 0; color: var(--adm-ink); font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.sup-card__title:hover { color: var(--adm-green); }
.sup-card__title:focus-visible { outline: 2px solid var(--adm-green); outline-offset: 2px; border-radius: 4px; }
.sup-card__desc { display: -webkit-box; margin: 0; color: #4e5a52; font-size: 12.5px; line-height: 1.45; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.sup-card__shot { display: block; width: 100%; height: 108px; border-radius: 10px; background: #f1f2ee; box-shadow: inset 0 0 0 1px var(--adm-line); object-fit: cover; object-position: top; }
.sup-card__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; margin: 0; }
.sup-card[hidden], .sup-col__empty[hidden] { display: none; }
.sup-tag { max-width: 100%; padding: 1px 8px; overflow: hidden; border-radius: 999px; background: rgb(18 56 43 / 6%); color: #4e5a52; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.sup-tag.is-draft { background: var(--adm-green-soft); color: var(--adm-green); font-weight: 500; }
.sup-tag.is-path { color: var(--adm-mut); }
.sup-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--adm-soft); }
.sup-card__who { display: grid; min-width: 0; overflow: hidden; color: #4e5a52; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.sup-card__who small { color: var(--adm-mut); font-size: 11.5px; }
.sup-ghost { position: fixed; z-index: 80; margin: 0; pointer-events: none; transform: rotate(-1deg); box-shadow: 0 24px 50px -22px rgb(18 56 43 / 55%); }
.sup-toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; z-index: 70; padding: 10px 16px; border-radius: 999px; background: var(--adm-deep); color: #fff; font-size: 13px; transform: translateX(-50%); box-shadow: 0 18px 40px -20px rgb(18 56 43 / 60%); }
@media (max-width: 640px) {
  /* Mobil: chips per kolumn och en lista med kolumnens ärenden; status byts i panelen. */
  .sup-bar { display: grid; gap: 8px; }
  .sup-colchips { display: flex; }
  .sup-cols { display: block; overflow: visible; padding: 0; }
  .sup-col { min-height: 0; padding: 0; border: 0; background: none; }
  .sup-col:not(.is-current) { display: none; }
  .sup-col__head { display: none; }
  .sup-col__cards { gap: 6px; }
  .sup-card { gap: 4px; padding: 12px 14px; cursor: pointer; }
  .sup-card__desc, .sup-card__shot { display: none; }
  .sup-card__foot { padding-top: 0; border-top: 0; }
  .sup-card__who { display: flex; gap: 6px; }
  .sup-card__who small::before { content: '· '; }
}
@media (prefers-reduced-motion: reduce) { .sup-card, .sup-col, .ag-problem, .ag-help > summary .material-symbols-outlined { transition: none; } }

/* ── Support: ärendet i sidopanelen ──────────────────────────────────────────────────────────────────────── */
.sup-state { display: grid; gap: 10px; }
/* Statusen i panelen: fem lägen som ett segment; det valda är fyllt. Ett byte sparas direkt (toast med Ångra). */
.sup-status { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 3px; border: 1px solid rgb(18 56 43 / 12%); border-radius: 999px; background: rgb(255 255 255 / 70%); justify-self: start; max-width: 100%; }
.sup-status__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: #35443b; font: inherit; font-size: 12.5px; cursor: pointer; }
.sup-status__btn:hover { background: var(--adm-soft); }
.sup-status__btn:focus-visible { outline: 2px solid var(--adm-green); outline-offset: 1px; }
.sup-status__btn[aria-pressed="true"] { background: var(--adm-deep); color: #fff; }
.sup-status__btn[aria-pressed="true"] .sup-dot { box-shadow: 0 0 0 2px rgb(255 255 255 / 70%); }
.sup-state__pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sup-context { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--adm-mut); font-size: 12.5px; overflow-wrap: anywhere; }
.sup-context .material-symbols-outlined { font-size: 17px; }
.sup-context a { color: var(--adm-green); text-decoration: underline; text-underline-offset: 2px; }
.sup-reply.is-adm-pending { opacity: .55; }
.sup-mail { margin: 0; }
.sup-mail textarea { min-height: 76px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.sup-mail [data-adm-saved] { margin-left: 6px; }
.sup-sec h3 { margin: 0 0 6px; color: var(--adm-green); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sup-sec h3 small { margin-left: 4px; color: var(--adm-mut); font-weight: 400; letter-spacing: 0; text-transform: none; }
.sup-text { color: #2c352f; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-text--soft { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgb(18 56 43 / 4.5%); color: #45524a; font-size: 12.5px; }
.sup-shot { display: grid; place-items: center; padding: 6px; border-radius: 16px; background: rgb(18 56 43 / 4.5%); box-shadow: inset 0 0 0 1px var(--adm-line); }
.sup-shot img { max-width: 100%; max-height: 26rem; border-radius: 10px; object-fit: contain; }
.sup-facts__wide { grid-column: 1 / -1; }
.sup-facts__wide dd { overflow-wrap: anywhere; }
.sup-more { border-top: 1px solid var(--adm-soft); padding-top: 12px; }
.sup-more > summary { color: #4e5a52; font-size: 12.5px; cursor: pointer; }
.sup-meta { display: grid; gap: 6px; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgb(18 56 43 / 4.5%); font-size: 12px; }
.sup-meta div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 10px; }
.sup-meta dt { color: var(--adm-mut); overflow-wrap: anywhere; }
.sup-meta dd { margin: 0; color: #35443b; overflow-wrap: anywhere; }
.sup-reply-item { margin-top: 8px; padding: 11px 14px; border: 1px solid var(--adm-glass-edge); border-radius: 16px; background: var(--adm-glass); box-shadow: var(--adm-lift); }
.sup-reply-item p { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-reply-item small { display: block; margin-top: 4px; color: var(--adm-mut); font-size: 12px; }
.adm-drawer__foot.sup-foot { display: grid; gap: 10px; }
.sup-draft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--adm-green-soft); color: var(--adm-deep); font-size: 12.5px; }
.sup-draft p { display: flex; flex: 1 1 260px; align-items: flex-start; gap: 6px; margin: 0; line-height: 1.45; }
.sup-draft .material-symbols-outlined { color: var(--adm-green); font-size: 18px; }
.sup-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin: 0; }
.sup-reply textarea { width: 100%; min-height: 44px; max-height: 40vh; padding: 10px 14px; border: 1px solid var(--adm-field-line); border-radius: 18px; background: #fff; color: var(--adm-ink); font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.sup-reply textarea:focus { border-color: var(--adm-green); outline: none; box-shadow: var(--adm-ring); }
@media (max-width: 639px) {
  .sup-reply { grid-template-columns: 1fr; }
  .sup-reply textarea { max-height: 26vh; font-size: 16px; }
  .sup-reply .adm-btn { justify-self: end; }
  .sup-status { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; border-radius: 18px; }
  .sup-status__btn { justify-content: center; height: 40px; padding: 0 4px; font-size: 12px; }
  .sup-status__btn .sup-dot { display: none; }
  .sup-mail textarea { font-size: 16px; }
}

/* ── Offertsupport (utöver admin-center.css) ─────────────────────────────────────────────────────────────── */
.qs .qs-step.is-warn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-recipients-list > li.is-adm-pending { background: rgb(255 255 255 / 40%); }
.qs-recipient__state .adm-tip { margin: -4px 0; }