/* Inställningarnas skal (templates/settings_app/base.html) – laddas av sidan själv så att det följer med vid sidbyten.
   Vit undermeny i full höjd bredvid appens rail, solid ljus arbetsyta i stället för rummets bild, sidans rubrik synlig.
   Zimla AI-composern visas inte här (hjälphörnet finns kvar). Allt nycklat på :has(.st-shell). */
.zimla-app-shell:has(.st-shell) { background: #f4f5f2; }
.zimla-app-shell:has(.st-shell) .zimla-scene,
body:has(.st-shell) .zimla-dock { display: none !important; }
#zimla-page-content:has(.st-shell) { padding: 0; background: #f4f5f2; }
@media (min-width: 1024px) {
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has(.st-shell):has(.st-main) {
    margin: 0; border: 0; border-radius: 0; background: #f4f5f2; box-shadow: none;
    max-width: none; max-height: none; overflow: visible; padding: 0; transition: none;
  }
}

.st-shell { --st-ink: #1d2420; --st-mut: #6b736e; --st-line: #e3e6e1; --st-soft: #edf0ec; --st-green: #1f6b4f;
  display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; color: var(--st-ink); }
.st-shell--wide { grid-template-columns: minmax(0, 1fr); }

/* Undermenyn */
.st-side { position: sticky; top: 0; height: 100vh; padding: 26px 12px 24px; overflow-y: auto; border-right: 1px solid var(--st-line); background: #fff; scrollbar-width: none; }
.st-side::-webkit-scrollbar { display: none; }
.st-side__title { margin: 0 10px 18px; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 26px; font-weight: 400; line-height: 1.1; }
.st-nav { display: grid; gap: 16px; }
.st-nav__label { margin: 0 12px 4px; color: #8a948d; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.st-nav__group { display: grid; gap: 2px; }
.st-nav__item { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 12px; border-radius: 9px; color: #35443b; font-size: 14px; }
.st-nav__item .material-symbols-outlined { color: #6b736e; font-size: 19px; }
.st-nav__item:hover { background: #f4f5f2; color: var(--st-ink); }
.st-nav__item[aria-current] { background: #1d2420; color: #fff; font-weight: 500; }
.st-nav__item[aria-current] .material-symbols-outlined { color: #fff; }

/* Arbetsytan */
.st-main { min-width: 0; padding: 26px 40px 96px; }
.st-head, .st-content { max-width: 56rem; margin: 0 auto; }
.st-shell--wide .st-head, .st-shell--wide .st-content { max-width: none; }
.st-crumb { margin: 0 0 6px; color: var(--st-mut); font-size: 12.5px; }
.st-crumb a { color: inherit; }
.st-crumb a:hover { color: var(--st-green); }
.st-head h1 { margin: 0; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.st-sub { margin: 6px 0 0; color: var(--st-mut); font-size: 13.5px; }
.st-content { margin-top: 20px; }
.st-mobile-head { display: none; }

/* Kort och fält som sidorna kan använda (företagssidan först) */
.st-card { margin: 0 0 16px; border: 1px solid var(--st-line); border-radius: 12px; background: #fff; overflow: hidden; }
.st-card:disabled { opacity: .75; }
.st-card__title { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--st-soft); font-size: 14px; font-weight: 600; }
.st-card__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 16px; }
.st-field { display: grid; gap: 6px; min-width: 0; }
.st-field--full { grid-column: 1 / -1; }
.st-field label, .st-field > span { color: #35443b; font-size: 13px; font-weight: 500; }
.st-field input, .st-field select, .st-field textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #dfe2dd; border-radius: 9px; background: #fff; color: var(--st-ink); font: inherit; font-size: 14px; }
.st-field textarea { height: auto; min-height: 5rem; padding: 10px 12px; resize: vertical; }
.st-field input:focus, .st-field select:focus, .st-field textarea:focus { border-color: var(--st-green); outline: none; box-shadow: 0 0 0 3px rgba(31, 107, 79, .12); }
.st-field input::placeholder { color: #a5ada7; }
.st-field small { color: var(--st-mut); font-size: 12px; }
.st-logo { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--st-soft); }
.st-logo__img { display: grid; flex: 0 0 auto; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: var(--st-green); color: #fff; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 24px; }
.st-logo__img.has-image { border: 1px solid var(--st-line); background: #fff; }
.st-logo__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-logo__copy { flex: 1; min-width: 0; }
.st-logo__copy b { display: block; font-size: 14px; font-weight: 500; }
.st-logo__copy small { display: block; margin-top: 2px; color: var(--st-mut); font-size: 12.5px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid #dfe2dd; border-radius: 9px; background: #fff; color: var(--st-ink); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.st-btn:hover { border-color: var(--st-green); color: var(--st-green); }
.st-btn--primary { border-color: var(--st-green); background: var(--st-green); color: #fff; }
.st-btn--primary:hover { background: #15543d; color: #fff; }
.st-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; cursor: pointer; }
.st-toggle-row + .st-toggle-row { border-top: 1px solid var(--st-soft); }
.st-toggle-row b { display: block; font-size: 14px; font-weight: 500; }
.st-toggle-row small { display: block; margin-top: 2px; color: var(--st-mut); font-size: 12.5px; }
.st-switch { position: relative; flex: 0 0 auto; width: 40px; height: 24px; }
.st-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.st-switch span { position: absolute; inset: 0; border-radius: 999px; background: #d9ddd7; pointer-events: none; transition: background-color 150ms; }
.st-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform 150ms; }
.st-switch input:checked + span { background: var(--st-green); }
.st-switch input:checked + span::after { transform: translateX(16px); }
.st-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(31, 107, 79, .25); }
.st-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--st-line); color: #4e5751; font-size: 13px; }
.st-notice .material-symbols-outlined { color: #8a948d; font-size: 18px; }
.st-savebar { position: fixed; z-index: 40; right: 32px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 12px; background: #1d2420; color: #fff; box-shadow: 0 18px 40px -20px rgba(10, 20, 15, .55); font-size: 13.5px; }
.st-savebar i { width: 8px; height: 8px; border-radius: 50%; background: #e0a33a; }
.st-savebar button { height: 34px; padding: 0 12px; border: 0; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.st-savebar [type=reset] { background: transparent; color: rgba(255, 255, 255, .8); }
.st-savebar [type=reset]:hover { color: #fff; }
.st-savebar [type=submit] { background: #fff; color: #1d2420; }

@media (prefers-reduced-motion: reduce) {
  .st-switch span, .st-switch span::after { transition: none; }
}
@media (max-width: 1023px) {
  .st-shell { display: block; min-height: 0; }
  .st-side, .st-head { display: none; }
  .st-main { padding: 0 0 calc(110px + env(safe-area-inset-bottom)); }
  .st-mobile-head { display: block; }
  .st-mobile-head header { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px; }
  .st-back { display: inline-grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--st-ink); box-shadow: 0 6px 18px -14px rgba(20, 24, 22, .45); }
  .st-mobile-head h1 { margin: 0; overflow: hidden; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 24px; font-weight: 400; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  .st-mobile-head p { margin: 3px 0 0; overflow: hidden; color: var(--st-mut); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .st-mobile-head > nav { background: transparent !important; border: 0 !important; }
  .st-content { margin-top: 14px; padding: 0 16px; }
  .st-card__body { grid-template-columns: 1fr; }
  .st-field input, .st-field select, .st-field textarea { height: 44px; font-size: 16px; }
  .st-field textarea { height: auto; }
  .st-logo { flex-wrap: wrap; }
  .st-logo .st-btn { width: 100%; min-height: 44px; }
  .st-savebar { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); justify-content: space-between; }
}
fieldset.st-card__body, .st-fieldset { min-width: 0; margin: 0; border: 0; }
.st-fieldset { padding: 0; }
.st-card__body--ruled { border-top: 1px solid var(--st-soft); }
.st-shell fieldset:disabled input, .st-shell fieldset:disabled select { background: #f7f8f6; color: #4e5751; }

/* Granskningens rättelser: sidornas egna rubriker i samma typsnitt som skalet, breda verktyg utan stor rubrik,
   spararaden undan hjälphörnet (zimla-help.css flyttar [data-settings-save-bar]) och trång mobil. */
.st-shell [data-settings-shell] { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.st-shell [data-settings-shell] .font-headline { font-family: Newsreader, ui-serif, Georgia, serif; font-weight: 400; }
.st-shell--wide .st-main { padding: 14px 24px 24px; }
.st-head--wide .st-crumb { margin: 0; }
.st-head--wide + .st-content { margin-top: 10px; }
.st-savebar { right: 104px; }
.st-savebar__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-btn:disabled { opacity: .5; cursor: not-allowed; }
.st-btn:disabled:hover { border-color: #dfe2dd; color: var(--st-ink); }
@media (max-width: 1023px) {
  .st-savebar { right: 16px !important; }
}

/* Notiser: händelser × kanaler (templates/settings_app/notifications.html) */
.st-matrix { width: 100%; border-collapse: collapse; }
.st-matrix th, .st-matrix td { padding: 12px 16px; border-top: 1px solid var(--st-soft); text-align: left; vertical-align: middle; }
.st-matrix thead th { padding-top: 11px; padding-bottom: 11px; border-top: 0; color: var(--st-mut); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.st-matrix tbody th { font-weight: 400; }
.st-matrix tbody th b { display: block; font-size: 14px; font-weight: 500; }
.st-matrix tbody th small { display: block; margin-top: 2px; color: var(--st-mut); font-size: 12.5px; }
.st-matrix__ch { width: 110px; text-align: center !important; }
.st-matrix__ch form { display: inline-flex; margin: 0; }
.st-check { width: 20px; height: 20px; margin: 0; accent-color: var(--st-green); cursor: pointer; }
.st-check:disabled { cursor: not-allowed; }
.st-coming { display: inline-flex; cursor: help; outline: 0; }
.st-coming .st-check { opacity: .4; pointer-events: none; }  /* hovringen ska nå etiketten, inte det låsta krysset */
.st-matrix thead .is-coming { cursor: help; }
.st-matrix thead .is-coming span { opacity: .55; }
/* "Kommande" på hovring och tryck (title visas sent och aldrig på låsta fält i Chrome) */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5; padding: 4px 8px;
  border-radius: 6px; background: #1d2420; color: #fff; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 2px); transition: opacity .12s, transform .12s; }
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip]:focus::after { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  .is-coming [data-tip]::after { left: auto; right: -2px; transform: translateY(2px); }
  .is-coming [data-tip]:hover::after, .is-coming [data-tip]:focus::after { transform: none; }
}
.st-note { margin: -6px 0 16px 2px; color: var(--st-mut); font-size: 12.5px; }
.st-card__body--single { grid-template-columns: 1fr; }
.st-field--half { max-width: 22rem; }
.st-toggle-row--ruled { border-top: 1px solid var(--st-soft); }
@media (max-width: 640px) {
  .st-matrix th, .st-matrix td { padding: 12px 8px; }
  .st-matrix tbody th { padding-left: 12px; }
  .st-matrix__ch { width: 56px; padding-left: 2px !important; padding-right: 2px !important; }
  .st-matrix thead th { font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
  .st-check { width: 24px; height: 24px; }
  .st-field--half { max-width: none; }
}

/* AI-anpassning: regler i klartext (templates/settings_app/partials/ai_preferences.html) */
.st-notice--error { background: #fdf3f2; box-shadow: inset 0 0 0 1px #efc9c4; color: #8a2f25; }
.ai-rules__count { margin-left: 4px; color: var(--st-mut); font-weight: 400; }
.ai-rules__lead { margin: 0; padding: 12px 16px 0; color: var(--st-mut); font-size: 13px; }
.ai-rules__list { margin: 0; padding: 0; list-style: none; }
.ai-rule { border-bottom: 1px solid var(--st-soft); scroll-margin: 96px 0 140px; }
.ai-rule__view { display: grid; gap: 3px; width: 100%; min-height: 56px; padding: 12px 16px; border: 0; background: none; color: var(--st-ink); text-align: left; cursor: pointer; }
.ai-rule__view:hover { background: #f8f9f7; }
.ai-rule__view:focus-visible { outline: 2px solid var(--st-green); outline-offset: -2px; }
.ai-rule--read { display: grid; gap: 3px; padding: 12px 16px; }
.ai-rule__text { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ai-rule__meta { color: var(--st-mut); font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ai-rule__form { display: grid; gap: 12px; padding: 14px 16px 16px; background: #fbfbfa; scroll-margin: 96px 0 140px; }
.ai-rule__form .st-field { margin: 0; }
.ai-rule__form textarea { min-height: 4.2rem; field-sizing: content; max-height: 14rem; }
.ai-rule__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ai-rule__actions .ai-rule__delete { order: -1; margin-right: auto; color: #a1392c; }
.ai-rule__link { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--st-green); font-size: 13px; font-weight: 500; cursor: pointer; }
.ai-rule__link:hover { text-decoration: underline; }
.ai-rule--gone { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: var(--st-mut); font-size: 13px; }
.ai-rule--gone form { margin: 0; }
.ai-rules__add { padding: 14px 16px 16px; }
.ai-rules__add > .ai-rule__form { margin: -14px -16px -16px; }
.ai-rules__empty { color: #4e5751; font-size: 13.5px; }
li.ai-rules__empty { padding: 16px; list-style: none; }
.ai-rules__empty p { margin: 0 0 8px; }
.ai-rules__empty ul { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.ai-rules__example { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px dashed #d6dbd5; border-radius: 9px; background: #fff; color: var(--st-ink); font-size: 13.5px; text-align: left; cursor: pointer; }
.ai-rules__example:hover { border-color: var(--st-green); color: var(--st-green); }
.ai-rules .htmx-request { opacity: .6; pointer-events: none; transition: opacity .12s; }
@media (max-width: 640px) {
  .ai-rule__actions .st-btn { flex: 1 1 0; height: 44px; }
  .ai-rule__actions .ai-rule__delete { flex-basis: 100%; order: 2; margin: 2px 0 0; padding: 8px 0; text-align: center; }
}

/* D7 (mobilloopen 2026-10-10): Inställningar på telefon i Hems formspråk. Översikten /mer/ (lista → sida → tillbaka),
   "‹ Inställningar" som på kundsidan, Outfit-rubrik, vita kort, spararader ovanför dockan. Byggaren (--wide) undantas. */
@media (max-width: 1023px) {
  .zimla-app-shell:has(.st-shell), #zimla-page-content:has(.st-shell), .st-shell { background: var(--zm-bg); }
  .st-shell:not(.st-shell--wide) .st-mobile-head header { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px var(--zm-gutter) 0; }
  .st-shell:not(.st-shell--wide) .st-back { display: inline-flex; align-items: center; width: auto; height: 44px; margin-left: -6px; padding: 0 8px 0 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; color: var(--zm-green); font-size: 14px; font-weight: 600; text-decoration: none; }
  .st-shell:not(.st-shell--wide) .st-back .material-symbols-outlined { font-size: 20px; }
  .st-shell:not(.st-shell--wide) .st-mobile-head h1 { font: 700 26px/1.15 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: var(--zm-title-tracking); color: var(--zm-ink);
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .st-shell:not(.st-shell--wide) .st-mobile-head p { margin-top: 4px; font-size: 14px; color: var(--zm-ink-2); white-space: normal; }
  .st-shell:not(.st-shell--wide) .st-mobile-head > nav { display: none; } /* översikten ersätter väljaren */
  .st-shell:not(.st-shell--wide) .st-content { padding-inline: var(--zm-gutter); margin-top: var(--zm-gap); }
  .st-shell:not(.st-shell--wide) .st-card, .st-shell:not(.st-shell--wide) .set-card { margin-bottom: var(--zm-gap); border: 0; border-radius: var(--zm-card-radius); box-shadow: var(--zm-card-shadow); }
  /* Översikten: Hems rader under sektionsetiketter. */
  .st-more { display: flex; flex-direction: column; gap: var(--zm-gap); }
  .st-more__group { display: flex; flex-direction: column; gap: var(--zm-list-gap); }
  .st-more__label { margin: 0; font-size: var(--zm-label-size); font-weight: 600; letter-spacing: var(--zm-label-tracking); text-transform: uppercase; color: var(--zm-muted); }
  .st-more__row { display: flex; align-items: center; gap: 12px; min-height: var(--zm-row-min); padding: 12px; border-radius: var(--zm-card-radius); background: var(--zm-card); box-shadow: var(--zm-card-shadow); color: var(--zm-ink); text-decoration: none; }
  .st-more__row:active { background: #f7f8f5; }
  .st-more__icon { flex: none; display: grid; place-items: center; width: var(--zm-icon); height: var(--zm-icon); border-radius: var(--zm-icon-radius); background: var(--zm-green-soft); color: var(--zm-green); font-size: 20px; }
  .st-more__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .st-more__text b { font-size: 16px; font-weight: 600; }
  .st-more__text small { font-size: 13px; color: var(--zm-muted); }
  .st-more__chev { color: var(--zm-faint); font-size: 20px; }
  /* Rubrikerna i de äldre sidorna: ingen serif på mobilen. */
  .st-shell:not(.st-shell--wide) [data-settings-shell] .font-headline { font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
  /* Profilen (.set-row): fältet under etiketten i full bredd, 44 px och 16 px (förut ~135 px bred och iOS-zoom). */
  .st-shell [data-settings-shell] .set-rows { padding-inline: 16px; }
  .st-shell [data-settings-shell] .set-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .st-shell [data-settings-shell] .set-row > input { grid-column: 1 / -1; height: 44px; font-size: 16px; }
  .st-shell [data-settings-shell] .set-row > span:empty { display: none; }
  .st-shell [data-settings-shell] .kbtn.sm { height: 44px; }
  /* Fieldset har min-width: min-content som standard – prisraderna blev 395 px i ett 350 px-kort och klipptes. */
  .st-shell [data-settings-shell] fieldset { min-width: 0; }
  /* Logotypens knapp i full bredd under texten (formuläret är flexbarnet). */
  .st-shell .st-logo form { flex-basis: 100%; }
  /* Notiser: kryssrutorna 32 px. */
  .st-shell .st-check { width: 32px; height: 32px; }
  /* Spararaderna ovanför dockan (orben ritades över dem) och sidan slutar under dem. */
  .st-shell .st-savebar { left: var(--zm-gutter); right: var(--zm-gutter); bottom: calc(96px + env(safe-area-inset-bottom)); }
  .st-shell .st-savebar button { height: 44px; padding: 0 16px; }
  .st-shell .st-main:has(.st-savebar:not([style*="none"])) { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
  .st-shell [data-settings-shell] .sticky.bottom-0 { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* Smal telefon: Sms-kolumnen ("Kommande") göms – noten säger redan att sms kommer senare. */
@media (max-width: 640px) {
  .st-shell .st-matrix .is-coming { display: none; }
  .st-shell .st-check { width: 32px; height: 32px; }
}

/* Dokument (templates/settings_app/documents.html): släpp filer, Zimla AI sorterar, raden fälls ut för namn, typ och
   giltighet. Raden ryms i skalets 56rem: namn + beskrivning, typ, status, ladda ner. Rörelse: inget flyger; släppytan
   byter färg, "Sorterar…" pulserar lugnt, arkivering tonas ut (150 ms). */
.st-docs { position: relative; display: grid; gap: 12px; border-radius: 14px; transition: box-shadow 150ms, background-color 150ms; }
.st-docs.is-drag { background: rgba(31, 107, 79, .05); box-shadow: 0 0 0 2px var(--st-green); }
.st-docs__upload { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed #cfd5cf; border-radius: 12px; background: #fff; }
.st-docs.is-drag .st-docs__upload { border-color: var(--st-green); }
.st-docs__pick { flex: 0 0 auto; cursor: pointer; }
.st-docs__pick:focus-within { box-shadow: 0 0 0 3px rgba(31, 107, 79, .25); }
.st-docs__hint { margin: 0; color: var(--st-mut); font-size: 12.5px; line-height: 1.45; }
.st-docs__hint-drop { color: var(--st-ink); font-weight: 500; }
.st-docs__upload.htmx-request { opacity: .6; pointer-events: none; }
.st-docs__list { display: grid; gap: 12px; }
.st-docs__errors { display: grid; gap: 6px; margin: 0; padding: 10px 14px; border-radius: 10px; background: #fdf3f2; box-shadow: inset 0 0 0 1px #efc9c4; color: #8a2f25; font-size: 13px; list-style: none; }
.st-docs__errors li { display: flex; align-items: flex-start; gap: 8px; }
.st-docs__errors .material-symbols-outlined { font-size: 17px; }
.st-docs__toolbar { display: flex; align-items: center; gap: 12px; margin: 0; }
.st-docs__search { display: flex; flex: 1; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid #dfe2dd; border-radius: 9px; background: #fff; }
.st-docs__search:focus-within { border-color: var(--st-green); box-shadow: 0 0 0 3px rgba(31, 107, 79, .12); }
.st-docs__search .material-symbols-outlined { color: var(--st-mut); font-size: 18px; }
.st-docs__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--st-ink); font: inherit; font-size: 14px; outline: 0; }
.st-docs__count { margin: 0; color: var(--st-mut); font-size: 12.5px; white-space: nowrap; }
.st-docs__filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.st-docs__filters::-webkit-scrollbar { display: none; }
.st-docs__filters a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--st-line); border-radius: 999px; background: #fff; color: #35443b; font-size: 13px; }
.st-docs__filters a span + span { color: var(--st-mut); font-size: 12px; }
.st-docs__filters a.is-active { border-color: #1d2420; background: #1d2420; color: #fff; }
.st-docs__filters a.is-active span + span { color: rgba(255, 255, 255, .7); }
.st-docs__filters a:focus-visible, .st-docs__reqs a:focus-visible { outline: 2px solid var(--st-green); outline-offset: 2px; }
.st-docs__rows { margin: 0; }
.st-docs__empty { display: flex; align-items: center; gap: 12px; padding: 22px 16px; color: #4e5751; font-size: 13.5px; }
.st-docs__empty .material-symbols-outlined { color: #8a948d; font-size: 26px; }
.st-docs__empty p { margin: 0; }

.st-doc { border-top: 1px solid var(--st-soft); }
.st-doc:first-child { border-top: 0; }
.st-doc.htmx-swapping { opacity: 0; transition: opacity 150ms; }
.st-doc.is-fresh .st-doc__row { animation: st-doc-in 160ms ease-out; }
@keyframes st-doc-in { from { opacity: 0; transform: translateY(-4px); } }
.st-doc details > summary { list-style: none; }
.st-doc details > summary::-webkit-details-marker { display: none; }
.st-doc__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 10.5rem 11rem 34px 18px; align-items: center; gap: 12px; min-height: 56px; padding: 9px 12px 9px 16px; cursor: pointer; }
.st-doc__row:hover { background: #f8f9f7; }
.st-doc__row:focus-visible { outline: 2px solid var(--st-green); outline-offset: -2px; }
.st-doc__icon { color: #6b736e; font-size: 20px; }
.st-doc__main { display: grid; gap: 2px; min-width: 0; }
.st-doc__main b, .st-doc__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-doc__main b { font-size: 14px; font-weight: 500; }
.st-doc__main small { color: var(--st-mut); font-size: 12.5px; }
.st-doc__chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 26px; padding: 0 9px; overflow: hidden; border-radius: 999px; background: var(--st-soft); color: #35443b; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.st-doc__chip .material-symbols-outlined { color: var(--st-green); font-size: 14px; }
.st-doc__chip.is-sorting { background: #eef4f0; color: var(--st-green); animation: st-doc-pulse 1.6s ease-in-out infinite; }
.st-doc__chip.is-unsure { background: #fdf6e8; box-shadow: inset 0 0 0 1px #ecd8a8; color: #7a5a14; }
@keyframes st-doc-pulse { 50% { opacity: .55; } }
.st-doc__status { display: grid; gap: 1px; min-width: 0; font-size: 12.5px; }
.st-doc__status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-doc__muted { color: var(--st-mut); }
.st-doc__validity.is-expiring { color: #8a5a00; }
.st-doc__validity.is-expired { color: #a1392c; }
.st-doc__review { color: var(--st-mut); }
.st-doc__review.is-approved { color: var(--st-green); }
.st-doc__review.is-rejected { color: #a1392c; }
.st-doc__act { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: #4e5751; }
.st-doc__act:hover { background: var(--st-soft); color: var(--st-ink); }
.st-doc__act:focus-visible { outline: 2px solid var(--st-green); outline-offset: 0; }
.st-doc__act .material-symbols-outlined { font-size: 19px; }
.st-doc__chev { color: #8a948d; font-size: 18px; transition: transform 150ms; }
.st-doc details[open] .st-doc__chev { transform: rotate(180deg); }
.st-doc__detail { display: grid; gap: 12px; padding: 4px 16px 16px 50px; }
.st-doc__suggest { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #eef4f0; color: #35443b; font-size: 13px; }
.st-doc__suggest > span { display: flex; align-items: center; gap: 6px; }
.st-doc__suggest .material-symbols-outlined { color: var(--st-green); font-size: 16px; }
.st-doc__form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr) auto; align-items: end; gap: 10px; margin: 0; }
.st-doc__form .st-field input, .st-doc__form .st-field select { height: 36px; font-size: 13.5px; }
.st-doc__quotes { margin: 0; border: 1px solid var(--st-line); border-radius: 10px; }
.st-doc__quotes .st-toggle-row { padding: 12px 14px; }
.st-doc__note, .st-doc__file { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--st-mut); font-size: 12.5px; }
.st-doc__note .material-symbols-outlined { font-size: 16px; }
.st-doc__archive { margin: 0; }
.st-doc__link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; color: #a1392c; font-size: 13px; cursor: pointer; }
.st-doc__link .material-symbols-outlined { font-size: 17px; }
.st-doc__link:focus-visible { outline: 2px solid var(--st-green); outline-offset: 2px; }
.st-doc form.htmx-request, .st-doc .htmx-request { opacity: .6; pointer-events: none; transition: opacity .12s; }

.st-docs__approved { margin: 4px 0 0; padding: 12px 16px; }
.st-docs__approved-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; font-size: 13px; }
.st-docs__approved-title > span:last-child { color: var(--st-mut); }
.st-docs__approved-title .material-symbols-outlined { color: #8a948d; font-size: 18px; }
.st-docs__approved-title .material-symbols-outlined.is-approved { color: var(--st-green); }
.st-docs__reqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-docs__reqs a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--st-line); border-radius: 10px; color: var(--st-ink); }
.st-docs__reqs a:hover { border-color: var(--st-green); }
.st-docs__reqs .material-symbols-outlined { color: #8a948d; font-size: 18px; }
.st-docs__reqs b { display: block; font-size: 12.5px; font-weight: 500; }
.st-docs__reqs small { display: block; color: var(--st-mut); font-size: 11.5px; }
.st-docs__reqs a.is-approved .material-symbols-outlined { color: var(--st-green); }
.st-docs__reqs a.is-rejected small, .st-docs__reqs a.is-expired small { color: #a1392c; }

@media (prefers-reduced-motion: reduce) {
  .st-docs, .st-doc.htmx-swapping, .st-doc__chev { transition: none; }
  .st-doc.is-fresh .st-doc__row, .st-doc__chip.is-sorting { animation: none; }
}
@media (max-width: 1023px) {
  .st-docs__upload { flex-direction: column; align-items: stretch; gap: 8px; }
  .st-docs__pick { width: 100%; min-height: 44px; }
  .st-docs__hint-drop { display: none; }
  .st-doc__row { grid-template-columns: 22px auto minmax(0, 1fr) 44px 18px; grid-template-areas: 'icon main main act chev' '. type status status status'; row-gap: 6px; padding: 10px 8px 10px 12px; }
  .st-doc__icon { grid-area: icon; align-self: start; margin-top: 2px; }
  .st-doc__main { grid-area: main; }
  .st-doc__main b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .st-doc__type { grid-area: type; min-width: 0; }
  .st-doc__status { grid-area: status; min-width: 0; }
  .st-doc__act { grid-area: act; width: 44px; height: 44px; }
  .st-doc__chev { grid-area: chev; }
  .st-doc__detail { padding: 4px 12px 16px; }
  .st-doc__form { grid-template-columns: 1fr; }
  .st-doc__form .st-field input, .st-doc__form .st-field select { height: 44px; font-size: 16px; }
  .st-doc__save .st-btn, .st-doc__suggest .st-btn { width: 100%; min-height: 44px; }
  .st-doc__suggest { flex-direction: column; align-items: stretch; }
  .st-doc__link { min-height: 44px; }
  .st-docs__filters a { height: 36px; }
  .st-docs__reqs { gap: 6px; }
  .st-docs__reqs a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px; }
  .st-docs__reqs small { display: none; }
}
@media (pointer: coarse) {
  .st-docs__filters a { height: 44px; }
}

/* Meddelandemallar: en mall i taget (ägaren 2026-10-28). Fyra lika breda val som ryms även på telefonen; pricken = ändrad. */
.st-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 10px; background: #f0f1ee; }
.st-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 36px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: #4e5751; font: 500 13px Inter, sans-serif; white-space: nowrap; cursor: pointer; }
.st-tabs button[aria-selected="true"] { background: #fff; color: #17211a; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.st-tabs i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #e0a33a; }
.st-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.st-chip { height: 28px; padding: 0 10px; border: 1px solid #e1e8e1; border-radius: 999px; background: #fff; color: #3f4b40; font: 500 12px Inter, sans-serif; cursor: pointer; }
.st-chip:hover { border-color: #cfdcd2; background: #f6f9f6; }
.st-chip:disabled { opacity: .5; cursor: default; }
.st-msgpreview { padding: 12px 14px; border: 1px dashed #dfe6dd; border-radius: 12px; background: #fbfcfa; }
.st-msgpreview-h { margin: 0 0 6px; color: #7a847b; font-size: 11.5px; letter-spacing: .04em; }
.st-msgpreview-t { margin: 0; color: #1d2420; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.st-msgpreview-n { margin: 6px 0 0; color: #7a847b; font-size: 12px; }
@media (pointer: coarse) { .st-tabs button { height: 44px; } .st-chip { height: 36px; } }