/* === RESET & VARIABLER === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --desk:       #072a40;
  --card:       #f9f7f0;
  --card-hover: #f4f1e8;
  --card-head:  #f0ede4;
  --border:     #d9d6ce;
  --border-mid: #c8c5bc;
  --text:       #072a40;
  --muted:      #898989;
  --shadow:     0 2px 10px rgba(7,42,64,0.13);
  --shadow-md:  0 4px 18px rgba(7,42,64,0.16);
  --radius:     12px;
  --radius-sm:  8px;
  --radius-pill:20px;
  --font:       'DM Sans', sans-serif;
  --formbg:      #ffffff;
}

body {
  font-family: var(--font);
  background: var(--desk);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
}

.main-content-wrap {
  background: #072a40;
  min-height: calc(100vh - 110px);
}

/* === TOPPBAR === */
.topbar {
  background: #072a40;
  box-shadow: var(--shadow);
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--border);
}

.topbar.anvandare-meny-oppen {
  z-index: 8000;
}

.logo {
  font-size: 20px;
  font-weight: 600;
  color: #18B7BE;
  letter-spacing: -0.5px;
}

.logo-sub {
  font-size: 12px;
  color: var(--muted);
  margin-left: 10px;
  font-weight: 400;
  letter-spacing: 0;
}

.filter-separator {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
}

.btn-rensa {
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-rensa:hover { border-color: var(--desk); color: var(--text); }

.kund-sida-cell {
  font-size: 12px;
  color: var(--muted);
}

/* === KNAPPAR === */
.btn-primary {
  background: var(--desk);
  color: var(--card);
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled {
  background: var(--muted);
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-primary:disabled:hover { opacity: 0.55; }

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--card-hover); }

.btn-lank {
  background: none;
  border: none;
  color: var(--desk);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: underline;
  padding: 0 4px;
  white-space: nowrap;
}

.btn-sm { padding: 5px 12px !important; font-size: 12px !important; }

.btn-full { width: 100%; justify-content: center; margin-top: 4px; padding: 11px; }

/* === FILTERBAR === */
.filter-bar {
  background: var(--card);
  padding: 11px 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 8px;
  position: sticky;
  top: 54px;
  z-index: 199;
}

select {
  font-size: 12px;
  font-family: var(--font);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
select:hover, select:focus { border-color: var(--desk); }

.filter-count {
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}

.filter-spacer { flex: 1; }

.btn-kundsortering {
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-kundsortering:hover { background: var(--card-hover); color: var(--text); }
.btn-kundsortering.aktiv {
  background: var(--desk);
  color: #fff;
  border-color: var(--desk);
}

/* === MAIN === */
.main-content {
  padding: 0 20px 40px;
}

/* === TABELL === */
.post-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.post-table th {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 8px;
  background: var(--card-head);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.post-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.post-table tbody tr:last-child td { border-bottom: none; }
.post-table tbody tr { transition: background 0.12s; cursor: pointer; }
.post-table tbody tr:hover td { background: #f4f1e8; }

.post-table td:last-child {
  text-align: right;
  white-space: nowrap;
  width: 1%;
  padding-right: 10px;
}

.post-table th:nth-child(4),
.post-table td:nth-child(4) { display: table-cell; min-width: 220px; max-width: 420px; }

/* === MINIATYR === */
.thumb-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.thumb {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--card-head);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-multi {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(7,42,64,0.55);
  border-radius: 3px;
  padding: 2px 3px;
  display: flex;
  align-items: center;
}

.thumb-play {
  position: absolute;
  inset: 0;
  background: rgba(7,42,64,0.35);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === KUND-CELL === */
.kund-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Omlott-avatarer för multi-kund i listvyn */
.kund-avatarer-omlott {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.kund-avatarer-omlott .avatar {
  border: 2px solid var(--card);
  margin-left: -6px;
}
.kund-avatarer-omlott .avatar:first-child {
  margin-left: 0;
}
/* 2 kunder: -6px omlott */
.kund-avatarer-2 { width: calc(28px + 22px); }
/* 3 kunder: lite mer omlott */
.kund-avatarer-3 .avatar { margin-left: -8px; }
.kund-avatarer-3 { width: calc(24px + 32px); }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--card);
  background: var(--desk);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kund-namn { font-weight: 500; font-size: 13px; }

/* === PLATTFORM-BADGE === */
.plattform-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.p-Instagram { background: #f78cf1; color: #000000; }
.p-Facebook  { background: #1877F2; color: #ffffff; }
.p-LinkedIn  { background: #a2ceff; color: #000000; }
.p-TikTok    { background: #061721; color: #ffffff; }

.plattform-kort { font-size: 10px !important; padding: 2px 5px !important; letter-spacing: 0; }

/* === STATUS-BADGE === */
.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.s-Utkast               { background: #dbdbdb; color: #5a5a5a; border: 1px solid #5a5a5a; }
.s-Klar-for-granskning  { background: #ffee98; color: #854F0B; border: 1px solid #e9a800; }
.s-Godkant              { background: #9df9b5; color: #154d1d; border: 1px solid #154d1d; }
.s-Schemalagt           { background: #98ec4f; color: #3f7113; border: 1px solid #3f7113; }
.s-Publicerat           { background: #3f7113; color: #ffffff; border: 1px solid #cfeeb4; }

/* === RADFÄRGER I TABELL === */
.post-table tbody tr.status-utkast td    { background: #ffebe7 !important; }
.post-table tbody tr.status-utkast:hover td { background: #ffd9d1 !important; }
.post-table tbody tr.status-schemalagt td { background: #cdf2b4 !important; }
.post-table tbody tr.status-schemalagt:hover td { background: #a0f080 !important; }
.post-table tbody tr.status-redo td      { background: #f0fde7 !important; }
.post-table tbody tr.status-redo:hover td { background: #d8f5c5 !important; }
.post-table tbody tr.status-publicerat td { background: #cdf2b4 !important; }
.post-table tbody tr.status-publicerat:hover td { background: #a0f080 !important; }

/* === TEXT PREVIEW === */
.text-preview {
  max-width: 90%;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 12px;
}

.text-preview-2rad {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.datum-cell {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* === ÅTGÄRDSKNAPP === */
.btn-rad {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
}
.btn-rad:hover { background: var(--card-head); color: var(--text); }

/* === TOM LISTA === */
.tom-lista {
  text-align: center;
  padding: 60px 20px;
  color: var(--card);
  opacity: 0.5;
  font-size: 15px;
}

/* === MODAL === */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(7,42,64,0.55) !important;
  z-index: 1200 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

#omSeamlOverlay {
  z-index: 2200 !important;
}

#hashtagOverlay[aria-hidden="true"],
#emojiOverlay[aria-hidden="true"],
#forhandsvisningOverlay[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}

#hashtagOverlay[aria-hidden="false"],
#emojiOverlay[aria-hidden="false"],
#forhandsvisningOverlay[aria-hidden="false"] {
  pointer-events: auto;
}

#hashtagOverlay {
  z-index: 2300 !important;
}

#nySidaModal{
  z-index: 2000 !important;
}
#raderaKundfBekraftelse{
  z-index: 2000 !important;
}


.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(7,42,64,0.25);
  /*width: 100%;*/
  width: fit-content;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-smal { max-width: 420px; }
#emojiOverlay .modal { max-width: 460px; }

#kundInfoModal .kund-info-modal {
  max-width: min(820px, 96vw) !important;
  width: min(820px, 96vw) !important;
}

.om-seaml-modal {
  width: min(70vw, 980px) !important;
  height: min(70vh, 760px) !important;
  max-width: 94vw !important;
  max-height: 88vh !important;
  background: var(--desk);
  color: var(--card);
  border: 1px solid rgba(249,247,240,0.22);
  box-shadow: 0 20px 70px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06);
}

.om-seaml-modal .modal-header {
  border-bottom-color: rgba(249,247,240,0.16);
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 12px;
  align-items: center;
}

.om-seaml-modal .modal-header h2,
.om-seaml-modal h3,
.om-seaml-modal h4 {
  color: var(--card);
}

.om-seaml-modal .modal-stang {
  color: rgba(249,247,240,0.72);
}

.om-seaml-modal .modal-stang:hover {
  background: rgba(249,247,240,0.1);
  color: var(--card);
}

.om-seaml-body {
  gap: 26px;
  padding: 24px 28px 30px;
}

.om-seaml-body p {
  color: rgba(249,247,240,0.78);
  line-height: 1.6;
}
.om-seaml-link {
  color: #18B7BE !important;
}

.om-seaml-nav {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.om-seaml-nav a {
  color: var(--card);
  text-decoration: none;
  border: 1px solid rgba(249,247,240,0.2);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(249,247,240,0.08);
  white-space: nowrap;
}

.om-seaml-nav a:hover {
  background: rgba(249,247,240,0.14);
}

.om-seaml-anchor {
  display: block;
  position: relative;
  top: -58px;
  visibility: hidden;
}

.om-seaml-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(249,247,240,0.14);
}

.om-seaml-intro h3 {
  max-width: 720px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}

.om-seaml-eyebrow {
  color: #18B7BE !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.om-seaml-sektion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.om-seaml-sektion h3 {
  font-size: 16px;
  font-weight: 700;
}

.om-seaml-grid,
.om-seaml-guide {
  display: grid;
  gap: 12px;
}

.om-seaml-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.om-seaml-guide {
  grid-template-columns: 1fr;
}

.om-seaml-grid article,
.om-seaml-guide-grupp {
  background: rgba(249,247,240,0.08);
  border: 1px solid rgba(249,247,240,0.13);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.om-seaml-grid h4,
.om-seaml-guide-grupp h4 {
  font-size: 13px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.om-seaml-grid p,
.om-seaml-guide-grupp details p {
  font-size: 13px;
}

.om-seaml-guide-grupp details {
  border-top: 1px solid rgba(249,247,240,0.12);
  padding: 10px 0;
}

.om-seaml-guide-grupp details:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.om-seaml-guide-grupp details:last-child {
  padding-bottom: 0;
}

.om-seaml-sektion summary {
  color: var(--card);
  cursor: pointer;
  font-weight: 600;
}

.om-seaml-guide-grupp details p {
  margin-top: 10px;
}

.om-seaml-note {
  color: rgba(249,247,240,0.64) !important;
  font-size: 12px;
}

.om-seaml-laddar {
  color: rgba(249,247,240,0.72) !important;
}

.villkor-modal {
  width: min(70vw, 980px) !important;
  height: min(70vh, 760px) !important;
  max-width: 94vw !important;
  max-height: 88vh !important;
  background: var(--desk);
  color: var(--card);
  border: 1px solid rgba(249,247,240,0.22);
  box-shadow: 0 20px 70px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06);
}

.villkor-modal .modal-header {
  border-bottom-color: rgba(249,247,240,0.16);
}

.villkor-modal .modal-header h2 {
  color: var(--card);
  font-size: 22px;
}

.villkor-version {
  margin-top: 4px;
  color: rgba(249,247,240,0.62);
  font-size: 13px;
  font-weight: 700;
}

.villkor-body {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.villkor-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.villkor-modal .villkor-innehall {
  color: rgba(249,247,240,0.8);
}

.villkor-modal .villkor-innehall h3,
.villkor-modal .villkor-innehall h4 {
  color: var(--card);
}

.villkor-modal .villkor-innehall p,
.villkor-modal .villkor-innehall li {
  color: rgba(249,247,240,0.78);
  line-height: 1.58;
}

.villkor-checklista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(249,247,240,0.16);
  border-radius: var(--radius-sm);
  background: rgba(249,247,240,0.08);
}

.villkor-checkrad {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: flex-start;
  color: rgba(249,247,240,0.86);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.villkor-checkrad input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #18B7BE;
}

.villkor-checkrad strong {
  color: #18B7BE;
}

.villkor-checkrad-obligatorisk span::after {
  content: " *";
  color: #18B7BE;
  font-weight: 700;
}

.villkor-obligatorisk-notis {
  color: rgba(249,247,240,0.68);
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.villkor-fel {
  margin: 0 28px 18px;
  color: #ffb3a8;
  font-size: 13px;
}

.villkor-modal .modal-footer {
  border-top-color: rgba(249,247,240,0.16);
}

.villkor-modal .btn-secondary {
  color: var(--card);
  border-color: rgba(249,247,240,0.3);
  background: transparent;
}

.villkor-modal .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* === KAKOR / COOKIES === */
.cookie-modal-oppen {
  overflow: hidden;
}

.cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 28px 28px;
  background: rgba(0, 17, 26, 0.7);
}

.cookie-modal {
  width: min(580px, calc(100vw - 56px));
  max-height: min(680px, calc(100vh - 56px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.cookie-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 54px;
  border-bottom: 1px solid rgba(7, 42, 64, 0.08);
  box-shadow: 0 5px 18px rgba(7, 42, 64, 0.08);
}

.cookie-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.cookie-stang {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.cookie-body {
  overflow: auto;
  padding: 26px 24px 22px;
}

.cookie-intro {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.10;
}

.cookie-lank {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--turkos);
  font: inherit;
  font-size: 16px;
  line-height: 1.22;
  text-align: left;
  cursor: pointer;
}

.cookie-detaljer {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.cookie-detaljer[hidden] {
  display: none !important;
}

.cookie-kategori {
  background: #f5f5f5;
}

.cookie-kategori-header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 14px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cookie-kategori-header > span:first-child {
  font-size: 15px;
  font-weight: 700;
}

.cookie-alltid-aktiv {
  color: #53b234;
  font-size: 13px;
  font-weight: 800;
}

.cookie-pil {
  color: #000;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}

.cookie-pil svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.cookie-kategori-oppen .cookie-pil,
.cookie-pil.cookie-pil-oppen {
  transform: rotate(180deg);
}

.cookie-kategori-text {
  padding: 0 12px 16px;
}

.cookie-kategori-text p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
}

.cookie-switch {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-flex;
  cursor: pointer;
}

.cookie-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cookie-switch span {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #d8d8d8;
  transition: background 0.15s;
}

.cookie-switch span::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 4px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}

.cookie-switch input:checked + span {
  background: #53b234;
}

.cookie-switch input:checked + span::before {
  transform: translateX(18px);
}

.cookie-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(7, 42, 64, 0.08);
  box-shadow: 0 -5px 18px rgba(7, 42, 64, 0.08);
}

.cookie-footer .btn-primary,
.cookie-footer .btn-secondary {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
}

.cookie-footer .btn-secondary {
  background: #fff;
  border: 2px solid var(--desk);
}

@media (max-width: 760px) {
  .om-seaml-modal,
  .villkor-modal {
    width: 94vw !important;
    height: 82vh !important;
  }

  .om-seaml-body,
  .villkor-scroll {
    padding: 20px;
  }

  .om-seaml-intro h3 {
    font-size: 20px;
  }

  .om-seaml-grid {
    grid-template-columns: 1fr;
  }

  .cookie-overlay {
    padding: 10px;
  }

  .cookie-modal {
    width: 96vw;
    max-height: 94vh;
    border-radius: 14px;
  }

  .cookie-header {
    min-height: 64px;
    padding: 14px 58px;
  }

  .cookie-header h2 {
    font-size: 20px;
  }

  .cookie-body {
    padding: 28px 18px 20px;
  }

  .cookie-intro {
    font-size: 22px;
  }

  .cookie-lank {
    font-size: 20px;
  }

  .cookie-footer {
    grid-template-columns: 1fr;
    padding: 16px 18px 20px;
  }

  .cookie-footer .btn-primary,
  .cookie-footer .btn-secondary {
    min-height: 52px;
    font-size: 18px;
  }
}

.kund-info-vanster {
  width: 360px !important;
  min-width: 320px !important;
  max-width: 360px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

.kund-info-topprad {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 4px;
}

.kund-info-faelt-grupp {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kund-info-hoger {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#kundInfoBildWrap{
  width:90px;
  height:90px;
  font-size:22px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card-head);
  border:2px solid var(--border);
}

.kund-info-sektion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
}

.kund-info-sektion-rubrik {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 4px;
}

.kund-info-lagg-till {
  width: 100%;
  margin-top: 6px;
  font-size: 13px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.anv-villkor-status {
  display: inline-flex;
  margin-left: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

.modal-stang {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.modal-stang:hover { background: var(--card-head); color: var(--text); }

.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#anvHistorikLista.modal-body {
  gap: 0px !important;
}

.modal-footer {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-footer-spacer { flex: 1; }

/* === MODAL KOLUMNLAYOUT === */
.modal-kropp {
  display: flex;
  flex-direction: row;
  flex: 1;
  /*overflow: hidden;*/
  min-height: 0;
  min-width: 0;
}

.modal-kropp .modal-body {
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

.modal-bild-panel {
  width: 260px !important;
  min-width: 260px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-head);
  padding: 16px;
  border-right: 1px solid var(--border);
}

.modal-bild-panel-tom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
.modal-bild-panel-tom svg { opacity: 0.3; }

.modal-bild-panel-bild {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-bild-panel-bild img,
.modal-bild-panel-bild video {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.modal-kommentar-panel {
  width: 280px !important;
  min-width: 280px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}

.modal-bred {
  /*min-width: min(700px, 96vw) !important;*/
  max-width: min(1000px, 96vw) !important;
}
.modal-bred.har-bildpanel {
  width: min(700px, 96vw) !important;
  max-width: min(700px, 96vw) !important;
}
.modal-bred.har-kommentar {
  width: min(1000px, 96vw) !important;
  max-width: min(1000px, 96vw) !important;
}

.modal-bred.har-historik {
  width: min(960px, 96vw) !important;
  max-width: min(960px, 96vw) !important;
}
.modal-med-kommentar { max-width: 900px !important; }

/* === SPARA-HUVUD-KNAPP === */
.btn-spara-huvud {
  background: #072a40 !important;
  color: #f9f7f0 !important;
  border: none !important;
  font-weight: 600 !important;
  min-width: 90px;
}
.btn-spara-huvud:hover { opacity: 0.85 !important; }

/* === FORMULÄR === */
.form-rad {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-rad label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-rad label small {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.form-rad input[type="text"],
.form-rad input[type="datetime-local"],
.form-rad input[type="url"],
.form-rad input[type="email"],
.form-rad input[type="password"],
.form-rad textarea,
.form-rad select {
  font-family: var(--font);
  font-size: 13px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--formbg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

.form-rad input:focus,
.form-rad textarea:focus,
.form-rad select:focus { border-color: var(--desk); }

.form-rad textarea { resize: vertical; line-height: 1.6; }

.form-hjalptext {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
}
.form-hjalptext-inline {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* === CHECKBOX-RAD === */
.checkbox-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.checkbox-rad input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--desk);
  cursor: pointer;
  flex-shrink: 0;
}

/* === TEXTAREA MED VERKTYG === */
.textarea-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.textarea-wrap textarea {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: none;
  resize: vertical;
  min-height: 100px;
}
.textarea-verktyg {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: var(--card-head);
  border: 1px solid var(--border-mid);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.verktyg-knapp {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  overflow: visible;
  line-height: 1;
}
.verktyg-knapp:hover { background: var(--desk); color: var(--card); }
#btnKopieraText { margin-left: auto; }
/* Emoji-knappen – samma storlek som # men emoji-tecknet är lite större naturligt */
#btnEmoji { 
  font-size: 18px !important; 
  font-weight: 600 !important;
}

/* === KUND-RAD I FORMULÄR === */
.kund-rad {
  display: flex;
  gap: 8px;
  align-items: center;
}
.kund-rad select { flex: 1; }

/* === MULTI-KUND VÄLJARE === */
.multi-kund-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.multi-kund-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  position: relative;
}

.multi-kund-rad-namn {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-kund-rad-ta-bort {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.1s;
}
.multi-kund-rad-ta-bort:hover { color: #c0392b; }

.multi-kund-select {
  width: 100%;
}

/* === PLATTFORM-KNAPPAR I MODAL === */
.plattform-knappar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.plattform-knapp {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.plattform-knapp.vald { border-color: var(--desk); background: var(--desk); color: var(--card); }

/* === SIDKNAPPAR === */
.sida-knappar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sida-knapp {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.sida-knapp.vald { border-color: var(--desk); background: var(--desk); color: var(--card); }

/* === PLACERING-KNAPPAR === */
#placeringRad,
#innehallRad {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

#placeringRad label,
#innehallRad label {
  min-width: 70px;
}

.placering-knappar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.placering-grupp {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.placering-plattform {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  min-width: 64px;
}

.placering-knapp {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s;
}
.placering-knapp.vald { border-color: var(--desk); background: var(--desk); color: var(--card); }
.placering-knapp:disabled { opacity: 0.65; cursor: default; }

.innehall-knappar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.innehall-knapp {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s;
}
.innehall-knapp.vald { border-color: var(--desk); background: var(--desk); color: var(--card); }
.innehall-knapp:disabled { opacity: 0.65; cursor: default; }

/* === BILDMINIATYRER === */
.bild-val-knapprad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bild-val-knapprad .btn-secondary {
  width: 100%;
  padding-inline: 12px;
  font-size: 12px;
  white-space: nowrap;
}

.bild-forhands { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.bild-thumbnail {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
}
.bild-thumbnail img, .bild-thumbnail video { width: 100%; height: 100%; object-fit: cover; }
.bild-thumbnail:hover { opacity: 0.85; }
.bild-thumbnail .thumb-ta-bort {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(7,42,64,0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bild-thumbnail .thumb-play-ikon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7,42,64,0.3);
  pointer-events: none;
}

.bild-panel-knappar {
  display: flex;
  gap: 8px;
  padding: 8px 10px 4px;
  justify-content: flex-end;
}

.btn-bild-panel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-bild-panel:hover { background: var(--hover); }

/* === RESPONSIVT === */
@media (max-width: 700px) {
  .post-table th:nth-child(4),
  .post-table td:nth-child(4) { display: none; }
  .main-content { padding: 0 10px 40px; }
  .filter-bar { padding: 10px 12px; }
  .topbar { padding: 12px 16px; }
}

/* === NAVIGATION === */
.topbar-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav-knapp {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid #061721;
  background: #072a40;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
}
.nav-knapp:hover { background: #178ca4; color: #ffffff; border: none; }
.nav-knapp.aktiv { background: #18B7BE; color: #ffffff; border: none; }

.nav-divider {
  color: #53b234;
  font-size: 16px;
  padding: 0 2px;
  user-select: none;
}

/* === KUNDLISTA === */
.kund-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.kund-kort {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kund-kort-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kund-kort-footer {
  display: flex;
  gap: 8px;
  padding-top: 4px;
  flex-wrap: wrap;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
}

.kund-agare-text {
  font-size: 11px;
  color: var(--muted);
}

.kund-kort-id {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.kund-namn-rad {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === MIN SIDA MARKERING === */
.kund-kort-min {
  background: #e2edec;
  border: 2px solid #18B7BE;
}

.min-sida-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: #178ca4;
  color: white;
  white-space: nowrap;
}

.sida-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sida-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.sida-rad:last-child { border-bottom: none; }

.sida-namn-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

.sida-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sida-url {
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.sida-url:hover { color: var(--desk); text-decoration: underline; }

.sida-url-tom {
  font-size: 11px;
  color: var(--border-mid);
  font-style: italic;
}

.ny-sida-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

.sida-input-namn {
  font-family: var(--font);
  font-size: 12px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  outline: none;
  flex: 1;
  min-width: 160px;
}
.sida-input-namn:focus { border-color: var(--desk); }

.sida-input-plattform {
  font-family: var(--font);
  font-size: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  outline: none;
}

.sida-input-url {
  font-family: var(--font);
  font-size: 12px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  outline: none;
  flex: 2;
  min-width: 200px;
}
.sida-input-url:focus { border-color: var(--desk); }

/* === ANPASSAD TEXT PER SIDA === */
.anpassad-text-rad {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.anpassad-text-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.anpassad-text-label .plattform-badge { font-size: 10px; padding: 2px 7px; }

/* === DATUM PER SIDA === */
.datum-per-sida-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.datum-per-sida-label {
  font-size: 12px;
  color: var(--muted);
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* === INLOGGNING === */
/* INBJUDNINGSVYN - SKAPA LÖSENOR */
.btn-invite {
  margin-top: 30px !important;
}

.login-wrap {
  min-height: 100vh;
  background: var(--desk);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-kort {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(7,42,64,0.25);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 350px;
}

.login-logo {
  font-size: 28px;
  font-weight: 600;
  color: var(--desk);
  letter-spacing: -0.5px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-sub {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: -10px;
  margin-bottom: 10px !important;
}

.login-fel {
  font-size: 13px;
  color: #993556;
  background: #fde8f0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.login-ok {
  font-size: 13px;
  color: #276630;
  background: #ddf0e2;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* === LOGGA UT === */
.btn-logga-ut {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid #18B7BE;
  background: #178ca4;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-logga-ut:hover { border-color: #178ca4; color: #18B7BE; }

.btn-glomt {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  padding: 4px;
  transition: color 0.15s;
}
.btn-glomt:hover { color: var(--text); }

/* === TA BORT-KNAPP === */
.btn-radera {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid #f09595;
  background: transparent;
  color: #A32D2D;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-radera:hover { background: #fcebeb; border-color: #A32D2D; }

/* === FORMULÄR HJÄLPTEXT === */
.form-hjalptext {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
}
.form-hjalptext-inline {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* === HASHTAG-PANEL === */
#hashtagOverlay .modal-smal{
  width: min(520px, calc(100vw - 40px)) !important;
  min-width: 0 !important;
  max-width: min(520px, calc(100vw - 40px)) !important;
}
.hashtag-valda-wrap { padding: 12px 18px; border-bottom: 1px solid var(--border); min-height: 60px; }
.hashtag-valda-label { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.hashtag-valda-lista { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.hashtag-vald-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--desk); color: var(--card); }
.hashtag-vald-pill button { background: none; border: none; color: var(--card); cursor: pointer; font-size: 11px; opacity: 0.7; padding: 0 0 0 2px; }
.hashtag-vald-pill button:hover { opacity: 1; }
.hashtag-flikar { display: flex; border-bottom: 1px solid var(--border); }
.hashtag-flik { flex: 1; font-family: var(--font); font-size: 12px; font-weight: 500; padding: 10px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.hashtag-flik.aktiv { color: var(--text); border-bottom-color: var(--desk); }
.hashtag-flik:hover { color: var(--text); }
.hashtag-flik-innehall { padding: 12px 18px; min-height: 160px; display: flex; flex-direction: column; }
.hashtag-lista { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 200px; margin-bottom: 8px; }
.hashtag-rad { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: var(--radius-sm); transition: background 0.1s; }
.hashtag-rad:hover { background: var(--card-head); }
.hashtag-rad input[type="checkbox"] { accent-color: var(--desk); flex-shrink: 0; }
.hashtag-rad-text { flex: 1; font-size: 13px; color: var(--text); }
.hashtag-stjarna { background: none; border: none; font-size: 15px; cursor: pointer; color: var(--muted); padding: 0 2px; line-height: 1; transition: color 0.15s; flex-shrink: 0; }
.hashtag-stjarna:hover { color: #e9a800; }
.hashtag-stjarna.aktiv { color: #e9a800; }
.hashtag-input-rad { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.hashtag-input-rad input {
  flex: 1;
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--formbg) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  outline: none;
  cursor: text;
}
.hashtag-input-rad input:focus {
  background: #fff !important;
  border-color: var(--desk);
  box-shadow: inset 0 0 0 1px var(--desk);
}
.hashtag-input-rad input:disabled,
.hashtag-input-rad input[readonly] {
  background: var(--card-head) !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  cursor: default;
}
.hashtag-input-rad .btn-primary { padding: 7px 14px; }

/* === EMOJI-GRID === */
/* Emoji-modal – scrollbar grid utan kategorier */
.emoji-grid {
  overflow-y: auto;
  max-height: 400px;
  min-height: 200px;
  padding: 10px 12px 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  align-content: start;
  flex: 1;
}
.emoji-knapp {
  font-size: 22px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 4px 2px;
  line-height: 1;
  transition: background 0.1s, transform 0.1s;
  text-align: center;
}
.emoji-knapp:hover { background: var(--card-head); transform: scale(1.2); }
.emoji-knapp.emoji-vald { background: #d4edda; transform: scale(1.3); }


/* === NOTIS-KLOCKA === */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notis-wrap {
  position: relative;
}

.btn-notis {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #178ca4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s;
}
.btn-notis:hover { background: #061721; }
.btn-notis.har-olaesta { color: #18B7BE; }

.btn-hjalp {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #178ca4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 9px;
  transition: background 0.15s, color 0.15s;
}
.btn-hjalp:hover {
  background: #061721;
  color: #18B7BE;
}

.btn-modal-hjalp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: inherit;
  cursor: pointer;
}

.notis-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}

.notis-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(7,42,64,0.2);
  border: 1px solid var(--border);
  width: 320px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  z-index: 300;
  overflow: hidden;
}

.notis-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.notis-lista {
  overflow-y: auto;
  flex: 1;
}

.notis-rad {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
  font-size: 13px;
}
.notis-rad:hover { background: var(--hover); }
.notis-rad.olast { background: #f0fafa; }
.notis-rad.last .notis-rad-text { color: var(--muted); font-style: italic; }
.notis-rad.last .notis-rad-tid  { color: var(--muted); }
.notis-rad-fran { font-weight: 600; color: var(--desk); }
.notis-rad-text { color: var(--text); margin-top: 2px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.notis-rad-manuell-superadmin .notis-rad-text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}
.notis-rad-tid { color: var(--muted); font-size: 11px; margin-top: 3px; }
.notis-tom { padding: 20px 14px; color: var(--muted); font-size: 13px; text-align: center; }

/* === @-TAGGNING === */
.mention-dropdown {
  position: fixed;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(7,42,64,0.15);
  z-index: 1400;
  min-width: 200px;
  max-height: 200px;
  overflow-y: auto;
}
.mention-alternativ {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mention-alternativ:hover,
.mention-alternativ.aktiv {
  background: var(--hover);
}
.mention-alternativ .avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
  flex-shrink: 0;
}

/* === ANVANDARE DROPDOWN === */
.anvandare-wrap { position: relative; }



.btn-anvandare {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #18B7BE;
  border: none;
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.btn-anvandare:hover { opacity: 0.85; }

.dropdown-meny {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(7,42,64,0.2);
  border: 1px solid var(--border);
  min-width: 200px;
  z-index: 8001;
  overflow: hidden;
  padding: 6px 0;
}

.dropdown-rad {
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.dropdown-rad:hover { background: var(--card-head); }

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.dropdown-logga-ut { font-weight: 600; color: #A32D2D; }
.dropdown-logga-ut:hover { background: #fcebeb; }

/* === VY: ANVÄNDARE === */
.anv-kund-ikoner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.anv-kund-ikon {
  border-radius: 50%;
  flex-shrink: 0;
}

.anv-kund-tom {
  color: var(--muted);
  font-size: 11px;
}

.anv-namn-rad {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bugghunter-listikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #53b234;
  color: #000;
  font-size: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 7px rgba(7,42,64,0.16);
}

.bugghunter-listikon::before {
  content: "";
  width: 13px;
  height: 13px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 15c0-4.4 3.6-8 8-8s8 3.6 8 8v3H24v-3Z'/%3E%3Cpath d='M20 27c0-6.1 5-11 12-11s12 4.9 12 11v16c0 7.2-5.4 13-12 13s-12-5.8-12-13V27Z'/%3E%3Cpath d='M32 18v36' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M19 22 9 14' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M45 22l10-8' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M20 34H8' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M44 34h12' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M20 45 9 52' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M44 45l11 7' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 15c0-4.4 3.6-8 8-8s8 3.6 8 8v3H24v-3Z'/%3E%3Cpath d='M20 27c0-6.1 5-11 12-11s12 4.9 12 11v16c0 7.2-5.4 13-12 13s-12-5.8-12-13V27Z'/%3E%3Cpath d='M32 18v36' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M19 22 9 14' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M45 22l10-8' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M20 34H8' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M44 34h12' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M20 45 9 52' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M44 45l11 7' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bugghunter-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.bugghunter-toggle:hover {
  border-color: var(--desk);
}

.bugghunter-toggle.aktiv {
  background: #53b234;
  border-color: #53b234;
  color: #000;
}

.bugghunter-ikon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.bugghunter-ikon path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bugghunter-ikon path:nth-child(3),
.bugghunter-ikon path:nth-child(n+4) {
  fill: none;
}

.anv-reset-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.anv-reset-knapp svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.anv-reset-knapp svg path,
.anv-reset-knapp svg circle,
.anv-reset-knapp svg rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* === LOGO & BRAND === */
.logo-wrap { text-decoration: none; display: flex; align-items: center; }
.logo-svg { height: 28px; width: auto; fill: #18B7BE; }

/* === VATTENSTÄMPEL === */
.vattenstaempel {
  position: absolute;
  bottom: 30px;
  right: 0px;
  width: 600px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 2;
}
.vattenstaempel svg { fill: white; width: 100%; }

#vyn-app {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}
.main-content-wrap { position: relative; z-index: 1; }

/* === LOGIN FLASH FIX === */
#vyn-login { display: none; }
#vyn-login.visa { display: flex; }

/* === STATUS-VÄLJARE I MODAL === */
.modal-header-hoger {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-valjare { position: relative; }

.status-valjare-knapp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity 0.15s;
}
.status-valjare-knapp:hover { opacity: 0.85; }
.status-valjare-pil { font-size: 10px; opacity: 0.7; }

.status-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(7,42,64,0.18);
  border: 1px solid var(--border);
  min-width: 190px;
  z-index: 50;
  overflow: hidden;
  padding: 4px 0;
}

.status-option {
  padding: 9px 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.status-option:hover { background: var(--card-head); }
.status-option.aktiv { font-weight: 600; color: var(--desk); }

/* === KOMMENTARSPANEL === */
.kommentar-ny {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kommentar-ny-header {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.kommentar-ny textarea {
  font-family: var(--font);
  font-size: 13px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
}
.kommentar-ny textarea:focus { border-color: var(--desk); }

.kommentar-ny-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.kommentar-lista {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kommentar-rad {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--card-head);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.kommentar-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.kommentar-datum {
  color: var(--muted);
  font-size: 11px;
  flex: 1;
}

.kommentar-knappar {
  display: flex;
  gap: 2px;
}

.kommentar-knappar .btn-rad {
  font-size: 13px;
  padding: 2px 5px;
}

.kommentar-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.kommentar-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kommentar-edit-input {
  font-family: var(--font);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 60px;
  width: 100%;
  box-sizing: border-box;
}
.kommentar-edit-input:focus { border-color: var(--desk); }

.kommentar-edit-knappar {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* === KOMMENTARSBUBBLA I LISTA === */
.btn-kommentar-bubbla {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  transition: background 0.12s;
}
.btn-kommentar-bubbla:hover { background: var(--card-head); }
.btn-kommentar-bubbla.godkand svg { fill: none; stroke: #898989; }

/* === KNAPPAR I LISTA === */
.btn-kundinfo {
  font-size: 15px !important;
  padding: 4px 8px !important;
}
.btn-kopiera,
.btn-edit,
.btn-delete {
  padding: 4px 2px !important;
}


.btn-forhands {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px !important;
  padding: 4px 2px !important;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
}
.btn-forhands:hover { background: var(--card-head); color: var(--text); }

/* === FILTER STATUS-KNAPP === */
.filter-status-knapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.filter-status-knapp:hover { border-color: var(--desk); }

.btn-dolj {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.btn-dolj:hover { border-color: var(--desk); color: var(--text); }
.btn-dolj.aktiv { background: var(--desk); color: var(--card); border-color: var(--desk); }

/* === KALENDER PERIOD + PILAR === */
.kal-period-text {
  min-width: 130px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.btn-kal-pil {
  font-size: 18px;
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.12s;
}
.btn-kal-pil:hover { background: var(--card-head); }

.kal-vy-valjare {
  display: flex;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}
.btn-kal-vy {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border: none;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s;
  border-right: 1px solid var(--border-mid);
}
.btn-kal-vy:last-child { border-right: none; }
.btn-kal-vy:hover { background: var(--card-head); color: var(--text); }
.btn-kal-vy.aktiv { background: var(--desk); color: var(--card); }

/* === DELAD VY === */
.vyer-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.listvy-wrap {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.kalendervy-wrap {
  padding: 0px 20px 40px 20px !important;
  flex: 1;
  overflow-y: auto;
  background: #072a40;
  display: flex;
  flex-direction: column;
}

.delad-vy .listvy-wrap {
  flex: 0 0 50%;
  max-width: 50%;
  border-right: 1px solid #178ca4;
}
.delad-vy .kalendervy-wrap { flex: 0 0 50%; max-width: 50%; }
.komprimerad .listvy-full { display: none !important; }

/* === MÅNADSKALENDER === */
.kal-manad { padding: 0px !important;}
.kal-rubrikrad {
  background: var(--card-head);
  border-radius: var(--radius);
  border-color: #808080;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}
.kal-rubrik {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  padding: 11px 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rubrik-idag { 
  color: #ffffff;
  background: #18B7BE;
}
.kal-rutor {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.kal-ruta {
  background: white;
  border-radius: var(--radius-sm);
  /*border: 1px solid var(--border);*/
  min-height: 110px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.kal-ruta-grå { background: #898989; }
.kal-ruta-grå .kal-dag-nr { opacity: 0.5; }
.kal-idag { background: #b9e9eb; }
.kal-ruta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.kal-ruta-grå{
  border: none !important;
}
.kal-dag-nr { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: auto; }
.idag-nr {
  background: #18B7BE;
  color: white;
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.kal-veckonr { font-size: 10px; color: var(--border-mid); font-weight: 500; }
.kal-ruta-inlagg { display: flex; flex-direction: column; gap: 3px; overflow: hidden; align-items: stretch; }
.kal-ruta-inlagg-multi { gap: 2px; }

/* Wrapper för höjdstyrning vid flera inlägg */
.kal-kort-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 0;   /* väx inte */
  flex-shrink: 0; /* krympa inte */
  width: 100%;
  overflow: hidden;
}
.kal-kort-wrap > .kal-kort {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
}

/* Komprimerat kort – vid 2+ inlägg samma dag */
.kal-kort-mini {
  display: flex !important;
  flex-direction: row !important;
  box-sizing: border-box;
  overflow: hidden;
  align-items: stretch;
  position: relative;
}
/* Kvadratisk bild — bredd = höjden på kortet */
.kal-kort-bild-mini {
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  align-self: stretch;
  overflow: hidden;
  position: relative;
}
.kal-kort-bild-mini img,
.kal-kort-bild-mini video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kal-kort-bild-mini.kal-ingen-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-head);
}
.kal-kort-bild-mini.kal-ingen-bild svg {
  width: 60%;
  height: 60%;
  opacity: 0.3;
}
/* Avatar absolut nere till vänster på bilden */
.kal-kort-mini .kal-avatar-bild {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  font-size: 7px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Höger sida — två rader */
.kal-kort-mini-hoger {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 3px 3px 3px 4px;
  min-width: 0;
  overflow: hidden;
  gap: 0px;
}
/* Rad 1: knappar */
.kal-kort-mini-rad1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}
/* Rad 2: runda prickar */
.kal-kort-mini-rad2 {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
/* Knappar i mini-läge */
.kal-kort-mini .kal-kort-knappar {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
}
.kal-kort-mini .kal-kort-knappar button {
  font-size: 15px;
  padding: 0 2px;
  line-height: 1;
}
/* Runda prickar lite mindre i mini */
.kal-kort-mini .kal-prick-rund {
  width: 7px;
  height: 7px;
}

/* === FULLVY MINI — kundnamn + knappar normala + prickar === */
.kal-kort-mini-full .kal-kort-mini-rad1 {
  justify-content: flex-start;
}
.kal-kort-mini-kundnamn {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.kal-kort-mini-full .kal-kort-mini-rad2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}
/* Knappar fullstora i fullvy-mini */
.kal-kort-mini-full .kal-kort-knappar button {
  font-size: 18px;
  padding: 0 3px;
}
.kal-kort-mini-full .kal-prickar-mini {
  display: flex;
  flex-direction: row;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
}

/* === KALENDER-KORT === */
.kal-kort {
  background: var(--card-head);
  border-radius: 4px;
  overflow: hidden;
  border-left: 5px solid var(--border-mid);
  font-size: 11px;
}
/* I veckovy ska kortet fylla hela blockets höjd */
.kal-vecka-block .kal-kort {
  height: 100%;
  box-sizing: border-box;
}

/* Veckovy-kort – horisontell layout precis som månadsvyn */
.kal-kort-vecka {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.kal-kort-bild-vecka {
  position: relative;
  flex-shrink: 0;
  width: 90px;   /* lika hög som blocket = 90px → kvadratisk */
  height: 90px;
  overflow: hidden;
}
.kal-kort-bild-vecka img,
.kal-kort-bild-vecka video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kal-kort-info-vecka {
  flex: 1;
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
/* Kompakt-kort (delad vy) – toppdel: bild + runda prickar sida vid sida */
.kal-kort-kompakt-topp {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.kal-kort-bild {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
  overflow: hidden;
}
.kal-kort-bild-tom {
  background: var(--card-head);
}
.kal-kort-bild img, .kal-kort-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kal-prickar-sida {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 5px;
  justify-content: center;
}
.kal-prick-rund {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  cursor: default;
}
#kal-prick-tooltip {
  position: fixed;
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 9999;
  letter-spacing: 0.2px;
  display: none;
}
.kal-kort-info { padding: 3px 5px; }
.kal-kort-rad { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.kal-kort-vänster { display: flex; align-items: center; gap: 4px; }
.kal-prickar { display: flex; gap: 3px; align-items: center; }
.kal-prick {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1;
}
.kal-kort-knappar { display: flex; gap: 2px; }
.kal-btn-forhands, .kal-btn-edit {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 18px; padding: 1px 3px;
  border-radius: 3px; line-height: 1; transition: background 0.1s, color 0.1s;
}
.kal-btn-forhands:hover, .kal-btn-edit:hover { background: var(--border); color: var(--text); }

/* Statusfärger på vänsterbård */
.kal-kort.s-Utkast              { border-left-color: #5a5a5a; }
.kal-kort.s-Klar-for-granskning { border-left-color: #e9a800; }
.kal-kort.s-Godkant             { border-left-color: #53b234; }
.kal-kort.s-Schemalagt          { border-left-color: #3f7113; }
.kal-kort.s-Publicerat          { border-left-color: #3f7113; }

/* Fullvy-kort (månadsvy) – 90px hög */
.kal-kort-full { display: flex !important; flex-direction: row !important; min-height: 90px; }
.kal-kort-bild-full { width: 90px; flex-shrink: 0; height: 90px; overflow: hidden; }
.kal-kort-bild-full img, .kal-kort-bild-full video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kal-kort-info-full { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kal-kort-kund-namn { font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-kort-tid { font-size: 10px; color: var(--muted); }

/* Avatar i kalender */
.kal-avatar {
  width: 18px; height: 18px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 600; color: var(--card); background: var(--desk);
}
.kal-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Omlott-avatarer i kalender */
.kal-avatar-omlott {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
.kal-avatar-omlott .kal-avatar {
  position: relative;
  flex-shrink: 0;
}

/* === VECKOVY MED TIDSAXEL === */
.kal-vecka-tidsaxel {
  display: flex; flex-direction: column;
  height: calc(100vh - 110px); overflow: hidden;
  border-radius: 12px !important;
}
.kal-vecka-rubrikrad {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  border-bottom: none;
  background: var(--card-head);
  flex-shrink: 0;
  border-radius: 12px !important;
  margin-bottom: 4px!important;
}
.kal-tidsaxel-header { 
  border-right: 1px solid var(--border); 
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  padding: 11px 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kal-vecka-grid {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  flex: 1; overflow-y: auto;
}
.kal-tidsaxel { 
  border-right: 1px solid var(--border); 
  background: var(--card-head); 
  border-radius: var(--radius-sm);
  margin-right: 2px !important;
}

.kal-tids-cell {
  height: 30px; border-bottom: 1px solid var(--border);
  font-size: 10px; color: var(--muted); padding: 2px 5px;
  display: flex; align-items: flex-start; justify-content: flex-end; white-space: nowrap;
}
.kal-dag-kolumn { 
  /*border-right: 1px solid var(--border); */
  border: none;
  background-color: #ffffff;
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-left: 2px;
  margin-right: 2px;
}

.kal-dag-kolumn:last-child { border-right: none; }
.kal-dag-kolumn.kal-idag { 
  background: #b9e9eb; 
}
.kal-tim-cell { height: 30px; border-bottom: 1px solid rgba(0,0,0,0.05); padding: 2px; overflow: hidden; }

/* Inlägg i veckovy – absolut positionerade, 3 timmar höga */
.kal-vecka-block {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
/* Tidslapp – liten klockslagsskylt i övre vänstra hörnet på bilden */
.kal-tid-lapp {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
/* Veckokalender mini-kort (krock-läge) – liknar delad vy månadskalender */
.kal-kort-vecka-mini {
  display: flex !important;
  flex-direction: row !important;
  box-sizing: border-box;
  align-items: stretch;
}

/* === DRAG & DROP KALENDER === */
.kal-kort[draggable="true"],
.kal-vecka-block[draggable="true"] {
  cursor: grab;
}
.kal-kort[draggable="true"]:active,
.kal-vecka-block[draggable="true"]:active {
  cursor: grabbing;
}
.kal-kort.dras,
.kal-vecka-block.dras {
  opacity: 0.4;
}
.kal-ruta.drag-over {
  outline: 2px dashed #18B7BE;
  outline-offset: -2px;
  background: #e8f9fa;
}
.kal-dag-kolumn.drag-over {
  outline: 2px dashed #18B7BE;
  outline-offset: -2px;
  background: #e8f9fa !important;
}

/* === FÖRHANDSVISNING === */
.modal-forhands {
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  padding: 0;
  position: relative;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  margin: 16px !important;
  display: flex;
  flex-direction: column;
}

.forhands-stang {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(7,42,64,0.5);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.forhands-meta {
  background: var(--card-head);
  padding: 10px 16px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.forhands-karusell {
  position: relative;
  background: var(--card);
  max-height: 60vh;
  overflow: hidden;
  margin: 12px 12px 0 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.forhands-bilder {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.forhands-bild-item {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forhands-ingen-bild {
  width: 100%;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #898989;
  font-size: 13px;
}

/* contain – bilden beskärs inte, kortets bakgrundsfärg syns i tomrum */
.forhands-bild-item img,
.forhands-bild-item video {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}

.karusell-pil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--desk);
  transition: background 0.15s;
}
.karusell-pil:hover { background: white; }
.karusell-vanster { left: 10px; }
.karusell-hoger  { right: 10px; }
.karusell-pil[style*="display: none"] { display: none !important; }

.karusell-prickar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.karusell-prick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.15s;
  cursor: pointer;
}
.karusell-prick.aktiv { background: white; }

/* Info-del scrollar vid lång text */
/* Info-wrap håller info + custom scrollbar sida vid sida */
.forhands-info-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
}

.forhands-info {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  padding: 12px 14px 16px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.forhands-info::-webkit-scrollbar { display: none; }

/* Custom scrollbar */
.forhands-scrollbar {
  width: 14px;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  background: var(--card-head);
  border-left: 1px solid var(--border);
}

.forhands-scrollbar-pil {
  width: 100%;
  height: 18px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  padding: 0;
}
.forhands-scrollbar-pil:hover { background: var(--border); color: var(--text); }
.forhands-scrollbar-pil:disabled { opacity: 0.25; cursor: default; }

.forhands-scrollbar-spår {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.forhands-scrollbar-tumme {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 30px;
  background: #aaa;
  border-radius: 4px;
  cursor: grab;
  transition: background 0.15s;
}
.forhands-scrollbar-tumme:hover,
.forhands-scrollbar-tumme:active { background: var(--desk); cursor: grabbing; }

/* En rad per kund: avatar + namn */
.forhands-kund-rad {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.forhands-kund-enrad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  position: relative;
  z-index: 2;
}

.forhands-kundnamn {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.forhands-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* === FOOTER === */
#vyn-inlagg {
  flex-direction: column;
  height: calc(100vh - 49px);
  /*overflow: hidden;*/
}
#vyn-inlagg.vy-synlig {
  display: flex;
}
#vyn-inlagg > .main-content-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#vyn-inlagg .main-content { flex: 1; }

#vyn-kunder {
  min-height: calc(100vh - 49px);
}

.app-footer {
  text-align: center;
  padding: 12px 20px;
  font-size: 11px;
  color: #f9f7f0;
  background: #061721;
  border-top: none;
  margin-top: 0 !important;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.app-footer a { color: #18B7BE; text-decoration: none; }
.app-footer a:hover { color: #53b234; }

/* === DATUM VARNINGAR === */
.datum-narmar-sig {
  font-weight: 700 !important;
  color: #790808 !important;
}
.datum-forfallet {
  font-weight: 700 !important;
  color: #790808 !important;
}
.post-table tbody tr.rad-forfallen td {
  background: #f9c1c1 !important;
  color: #790808 !important;
  font-weight: 700 !important;
}
.post-table tbody tr.rad-forfallen:hover td {
  background: #f5aaaa !important;
}

/* === VATTENSTÄMPEL Z-INDEX FIX === */
/* Allt innehåll ligger ovanför vattenstämpeln (z-index: 2) */
.main-content,
.kalendervy-wrap,
.listvy-wrap,
.vyer-wrap {
  position: relative;
  z-index: 3;
}

/* === STATUS FILTER DROPDOWN === */
.filter-status-wrap { position: relative; }

.filter-status-knapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.filter-status-knapp:hover { border-color: var(--desk); }

.filter-status-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(7,42,64,0.18);
  border: 1px solid var(--border);
  min-width: 200px;
  z-index: 300;
  padding: 4px 0;
}

.filter-checkbox-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.filter-checkbox-rad:hover { background: var(--card-head); }
.filter-checkbox-rad input { accent-color: var(--desk); }

/* === STATUS DROPDOWN – MÖRK STIL === */
.filter-status-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  background: #2c2c2e !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
  border: none !important;
  min-width: 200px !important;
  z-index: 300 !important;
  padding: 6px 0 !important;
  overflow: hidden !important;
}

.filter-checkbox-rad {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
  user-select: none;
}
.filter-checkbox-rad:hover { background: rgba(255,255,255,0.08) !important; }
.filter-checkbox-rad.gemarkerad { background: #1877F2 !important; }
.filter-checkbox-rad.gemarkerad:hover { background: #1060c9 !important; }

/* Dölj checkbox-rutan, vi styr med klass istället */
.filter-checkbox-rad input[type="checkbox"] { display: none !important; }

/* === TOAST / SPARAT-BEKRÄFTELSE === */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a7a4a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: toastIn 0.2s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* === HISTORIKPANEL I MODAL === */
.btn-historik {
  border-color: transparent;
  background-color: transparent;
  border-radius: 2px;
}
.btn-historik:hover{
  background-color: #178ca4;
}
.btn-historik:active{
  background-color: #18B7BE;
}

.modal-historik-panel {
  width: 260px;
  min-width: 220px;
  max-width: 260px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--card-head);
  overflow: hidden;
}
.historik-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.historik-lista {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}
.historik-rad {
  padding: 5px 14px;
  border-bottom: 1px solid var(--border);
}
.historik-rad:last-child { border-bottom: none; }
.historik-handelse {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.historik-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

/* Bred modal med historik – hanteras av width:fit-content ovan */

/* === DRAG-AND-DROP BILDER === */
.bild-thumbnail[draggable="true"] { cursor: grab; }
.bild-thumbnail[draggable="true"]:active { cursor: grabbing; }
.bild-thumbnail.drar { opacity: 0.4; transform: scale(0.96); }
.bild-thumbnail.drag-over { outline: 2px dashed #1877F2; outline-offset: 2px; }

/* === DRAG-AND-DROP FILER FRÅN OS === */
.drag-over-modal .modal.modal-bred {
  outline: 3px dashed #1877F2;
  outline-offset: -3px;
}
.drag-over-modal .modal.modal-bred::after {
  content: 'Släpp för att lägga till bild/video';
  position: absolute;
  inset: 0;
  background: rgba(24,119,242,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #1877F2;
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 10;
}

/* Ta bort gamla drag-reorder-stilar */
.bild-thumbnail.drar,
.bild-thumbnail.drag-over { outline: none; opacity: 1; transform: none; }

/* Kalender – ingen bild placeholder */
.kal-ingen-bild {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kal-ingen-bild svg {
  width: 55%;
  height: 55%;
  color: rgba(120, 120, 120, 0.45);
}

/* === LADDNINGSSPINNER === */
#laddningsOverlag {
  position: fixed !important;
  transition: opacity 0.3s ease;
}
.laddnings-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #18B7BE;
  border-radius: 50%;
  animation: snurra 0.7s linear infinite;
}
@keyframes snurra { to { transform: rotate(360deg); } }

/* Logga i laddningsöverlägg */
#laddningsOverlag svg[viewBox="0 0 927.01 251.39"] {
  height: 28px;
  width: auto;
  fill: #18B7BE !important;
}

/* Error-toast */
.toast-fel {
  background: #c0392b !important;
  max-width: 420px;
  white-space: normal !important;
  text-align: left;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* Kundkort – info-rad med orgnr och adress */
.kund-info-rad {
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.kund-info-avd {
  color: var(--text);
  opacity: 0.4;
}



/* Användarmodal med kundkopplingskolumn */
.modal-bred.har-anvandare-panel {
  max-width: min(960px, 96vw) !important;
  width: auto !important;
}



/* === NY KUNDKORT-LAYOUT === */
.btn-favorit.aktiv{
  color: #e9a800 ;
    display: inline-block;
  -webkit-text-stroke: 1px #e9a800;
}
.btn-favorit{
  color: var(--card) ;
  display: inline-block;
  -webkit-text-stroke: 1px var(--muted);
  border: none !important;
  background-color: none !important;
}
.kund-sektion-rubrik {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}
.sid-sektion{
  gap: 0px !important;
}
.sida-rad-no-border {
  border-bottom: none !important;
}
.kund-team-sektion {
  border-top: 1px solid var(--border);
  padding-top: 0;
}
.kund-team-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kund-team-roll{
  color: #ffffff;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 20px;
}

.teamsea,
.kund-team-rad{
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}

.kund-team-rad-pending {
  opacity: 0.9;
}

.avatar.avatar-pending {
  background: var(--card-head) !important;
  color: #6f6f6f !important;
}

.kund-team-namn-pending {
  color: #898989 !important;
}

.kund-team-roll-pending {
  background: #e3e1da !important;
  color: #5f5f5f !important;
  border: 1px solid #c8c5bc;
  font-weight: 700;
}

.kund-kort-pending {
  cursor: default;
}

.pending-status {
  color: #5f5f5f;
  background: #e3e1da;
  border: 1px solid #c8c5bc;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.kund-team-sektion .kund-sektion-rubrik {
  border-top: none;
  padding-top: 0;
}
/* Redigera-knapp i avvikande färg */
.kund-info-header-vanster {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kund-info-header-id {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.kund-info-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-head);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  overflow: hidden;
}

.kund-info-header-hoger {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.kund-info-header-ikon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.kund-info-header-ikon:hover {
  background: #178ca4;
  color: #fff;
}

.btn-galleri-kund svg {
  display: block;
}

.kund-galleri-modal {
  width: min(84vw, 1180px) !important;
  height: min(78vh, 820px) !important;
  max-width: 96vw !important;
  max-height: 90vh !important;
}

.kund-galleri-kropp {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(330px, 1.3fr) minmax(260px, 1fr);
  border-bottom: 1px solid var(--border);
}

.kund-galleri-listpanel {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  border-right: 1px solid var(--border);
  background: var(--card);
}

.kund-galleri-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.kund-galleri-item {
  border: 1px solid var(--border);
  background: var(--card-head);
  border-radius: var(--radius-sm);
  padding: 6px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.kund-galleri-radera {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(192,57,43,0.95);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.kund-galleri-radera:hover {
  background: #a92f22;
}

.kund-galleri-item:hover,
.kund-galleri-item.aktiv {
  border-color: var(--desk);
  box-shadow: var(--shadow-sm);
}

.kund-galleri-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--border);
}

.kund-galleri-item-footer {
  display: grid;
  grid-template-columns: 1fr 18px;
  gap: 8px;
  align-items: start;
}

.kund-galleri-filnamn {
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.kund-galleri-check {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--desk);
}

.kund-galleri-preview {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-head);
  padding: 20px;
  overflow: hidden;
}

.kund-galleri-preview-bild {
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.kund-galleri-preview-bild img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.kund-galleri-tomt {
  grid-column: 1 / -1;
  color: var(--muted);
  padding: 28px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-head);
}

.kund-galleri-knappar {
  padding-top: 10px;
}

.kund-galleri-footer-knappar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
}

.btn-galleri-ladda-ner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-galleri-ladda-ner:hover {
  background: var(--card-hover);
}

.btn-galleri-kontrollera {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 9px 20px;
}

.kund-galleri-konflikt-modal {
  width: min(1040px, 92vw);
  height: min(760px, 86vh);
}

.kund-galleri-konflikt-kropp {
  min-height: 0;
  flex: 1;
  padding: 22px;
  overflow: auto;
}

.kund-galleri-konflikt-status {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.kund-galleri-konflikt-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-height: 0;
}

.kund-galleri-konflikt-bild {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-head);
}

.kund-galleri-konflikt-bild img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--card);
}

.kund-galleri-konflikt-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.kund-galleri-konflikt-meta strong {
  color: var(--text);
  font-size: 14px;
}

.kund-galleri-konflikt-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
}

.kund-galleri-konflikt-footer > button {
  justify-self: center;
}

.kund-galleri-konflikt-footer #kundGalleriKonfliktBehallA {
  justify-self: start;
}

.kund-galleri-konflikt-footer #kundGalleriKonfliktBehallB {
  justify-self: end;
}

.kund-galleri-konflikt-footer #kundGalleriKonfliktStart {
  grid-column: 2;
}

@media (max-width: 820px) {
  .kund-galleri-konflikt-par {
    grid-template-columns: 1fr;
  }

  .kund-galleri-konflikt-footer {
    grid-template-columns: 1fr;
  }

  .kund-galleri-konflikt-footer #kundGalleriKonfliktBehallA,
  .kund-galleri-konflikt-footer #kundGalleriKonfliktBehallB,
  .kund-galleri-konflikt-footer #kundGalleriKonfliktStart {
    grid-column: auto;
    justify-self: stretch;
  }
}

#kundInfoModal .modal-header {
  justify-content: space-between;
}

/* === AVATAR-INSTÄLLNINGAR === */
.avatar-farg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.avatar-farg-knapp {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
  flex-shrink: 0;
}

.avatar-farg-knapp:hover {
  transform: scale(1.15);
}

.avatar-farg-knapp.aktiv {
  border-color: var(--text);
  transform: scale(1.1);
}

/* Redigera-knapp fullbredd i kundkort */
  background: var(--desk);
  border-color: var(--desk);
  width: 100%;
}
.kund-kort-footer .btn-primary.btn-redigera-kund:hover {
  background: #0a3d54;
  border-color: #0a3d54;
}
.kund-kort-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
  margin-top: auto;
}

/* ATT GÖRA – se drawer-stilar nedan */

.todo-tom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Kundsektion */
.todo-sektion {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-kund-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-head);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--text);
}

.todo-kund-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inläggs-rad */
.todo-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: background 0.12s;
}

.todo-rad:hover {
  background: var(--hover);
}

.todo-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  display: block;
}

.todo-thumb-tom {
  background: var(--card-head);
  display: flex;
  align-items: center;
  justify-content: center;
}

.todo-thumb-tom svg {
  width: 18px;
  height: 18px;
  opacity: 0.3;
}

.todo-rad-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

/* Status-badge – återanvänder statusKlass-klasserna */
.todo-status {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
  width: fit-content;
}

.todo-status.s-Utkast              { background: #5a5a5a; }
.todo-status.s-Klar-for-granskning { background: #e9a800; }
.todo-status.s-Godkant             { background: #53b234; }

/* Datum */
.todo-datum {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.todo-datum-narmar-sig {
  color: #c07000;
  font-weight: 600;
}

.todo-datum-forfallet {
  color: #c0392b;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ATT GÖRA – DRAWER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper – position fixed, vänsterkant, full höjd under topbaren */
.todo-drawer {
  position: fixed;
  top: 125px; /* under topbaren – justera om topbaren är högre */
  left: -50px;
  bottom: 10px;
  z-index: 300;
  display: flex;
  flex-direction: row;
  pointer-events: none; /* fliken och panelen hanterar events själva */
}

/* ── Stängd flik ─────────────────────────────────────────────── */
.todo-flik {
  position: fixed;
  left: 0px !important;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 26px;
  padding: 16px 0;
  background: #178ca4;
  border: none;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  color: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.18);
  transition: background 0.15s, width 0.15s;
  align-self: center;
  margin-top: 40px; /* lite ner från toppen */
}

.todo-flik:hover { background: #0e7c93; }

.todo-flik-pil {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.3s ease;
  display: block;
}

.todo-flik-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  opacity: 0.85;
}

/* Pil roteras när panelen är öppen */
.todo-drawer.oppet .todo-flik-pil {
  transform: rotate(180deg);
}

/* ── Panel ──────────────────────────────────────────────────── */
.todo-panel {
  pointer-events: all;
  width: 280px;
  margin-left: 50px;
  background: #178ca4;
  border-radius: 0 14px 14px 0;
  box-shadow: 4px 0 24px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Stängd: gömd till vänster */
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Öppen: glider in */
.todo-drawer.oppet .todo-panel {
  transform: translateX(0);
}

.todo-panel-header {
  padding: 16px 16px 10px;
  flex-shrink: 0;
}

.todo-panel-rubrik {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}

/* Scrollbar-område */
.todo-panel-innehall {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.todo-panel-innehall::-webkit-scrollbar { width: 4px; }
.todo-panel-innehall::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }

/* Stäng-knapp längst ner */
.todo-stang-knapp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 12px 14px;
  padding: 8px 0;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.todo-stang-knapp:hover { background: rgba(0,0,0,0.3); }

/* ── Innehåll i panelen ────────────────────────────────────── */
.todo-tom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  text-align: center;
  gap: 8px;
}

.todo-sektion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.todo-kund-rubrik {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 4px;
}
.todo-kund-rubrik:last-child {
  text-align: right;
}

.todo-kund-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  color: #fff;
}

.todo-kund-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.todo-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  border: 1px solid rgba(0,0,0,0.08);
}

/* Statusfärger – samma som listvy */
.todo-rad.s-Utkast              { background: #ffebe7; }
.todo-rad.s-Utkast:hover        { background: #ffd9d1; }
.todo-rad.s-Klar-for-granskning { background: #fff; }
.todo-rad.s-Klar-for-granskning:hover { background: #f5f5f5; }
.todo-rad.s-Godkant             { background: #f0fde7; }
.todo-rad.s-Godkant:hover       { background: #d8f5c5; }

/* Förfallet datum överskriver statsfärg – samma röd som listvy */
.todo-rad.forfallen              { background: #f9c1c1 !important; }
.todo-rad.forfallen:hover        { background: #f4a0a0 !important; }

.todo-rad:hover {
  border-color: rgba(0,0,0,0.15);
}

.todo-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  display: block;
}

.todo-thumb-tom {
  background: rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  flex-shrink: 0;
}

.todo-thumb-tom svg {
  width: 16px;
  height: 16px;
  opacity: 0.3;
  stroke: currentColor;
}

.todo-rad-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

/* Statusbadge – återanvänder samma .s-* klasser som listvy */
.todo-status {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: fit-content;
}

.todo-status.s-Utkast              { background: #dbdbdb; color: #5a5a5a; border: 1px solid #5a5a5a; }
.todo-status.s-Klar-for-granskning { background: #ffee98; color: #854F0B; border: 1px solid #e9a800; }
.todo-status.s-Godkant             { background: #9df9b5; color: #154d1d; border: 1px solid #154d1d; }

.todo-datum {
  font-size: 10px;
  color: #666;
  white-space: nowrap;
}

.todo-datum-narmar-sig {
  color: #c07000;
  font-weight: 600;
}

.todo-datum-forfallet {
  color: #c0392b;
  font-weight: 700;
}

/* === STICKY KALENDER I DELAD VY === */
/*
  Strukturen är:
    #vyn-inlagg (display:flex, flex-direction:column, höjd = 100vh - topbar)
      > .main-content-wrap (flex:1, display:flex, flex-direction:column)
          > .filter-bar      (flex-shrink:0 – tar sin naturliga höjd)
          > .vyer-wrap       (flex:1, min-height:0 – tar resten)
              > .listvy-wrap      (overflow-y:auto i delad vy)
              > .kalendervy-wrap  (overflow-y:auto i delad vy)
          > footer           (flex-shrink:0)
  Resultatet: kalendern stannar i sin kolumn och scrollar där,
  listan scrollar i sin kolumn. Sidan i sig scrollar inte.
*/

/* Filterbaren ska inte växa – den tar sin naturliga höjd */
.filter-bar {
  flex-shrink: 0;
}

/* vyer-wrap ska fylla allt utrymme kvar och inte svämma över */
.vyer-wrap {
  flex: 1;
  min-height: 0;  /* kritiskt – utan detta ignorerar flex-barn min-height */
  overflow: hidden;
}

/* I delad vy: varje kolumn scrollar för sig */
.delad-vy .listvy-wrap,
.delad-vy .kalendervy-wrap {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* === RESPONSIV LISTVY I DELAD VY === */

/* Komprimera padding i tabell när listan är i delad vy */
.komprimerad .main-content {
  padding: 0 8px 20px;
}

.komprimerad .post-table th,
.komprimerad .post-table td {
  padding: 6px 4px;
}

.komprimerad .post-table td:last-child {
  padding-right: 9px;
}

/* Miniatyrbilder lite mindre */
.komprimerad .thumb-wrap,
.komprimerad .thumb {
  width: 36px;
  height: 36px;
}

/* Textkolumnen smalare */
.komprimerad .post-table th:nth-child(4),
.komprimerad .post-table td:nth-child(4) {
  min-width: 120px;
  max-width: 200px;
}

/* Knappar i sista kolumnen – mindre padding och tätare */
.komprimerad .btn-rad {
  padding: 3px 4px;
  font-size: 14px;
}

/* Dölj datum-kolumnens kolumnrubrik-text, behåll bara ikonen */
.komprimerad .post-table th:nth-child(5) .sort-pil { display: none; }

/* Klipp av för lång statustext med ellipsis */
.komprimerad .status-badge {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* Gradvis komprimering baserat på skärmbredd – gäller alltid i delad vy */
@media (max-width: 1400px) {
  .komprimerad .post-table th,
  .komprimerad .post-table td { padding: 5px 3px; }
  .komprimerad .btn-rad { padding: 2px 3px; font-size: 13px; }
  .komprimerad .post-table th:nth-child(4),
  .komprimerad .post-table td:nth-child(4) { min-width: 100px; max-width: 160px; }
}

@media (max-width: 1200px) {
  .komprimerad .post-table th:nth-child(3),
  .komprimerad .post-table td:nth-child(3) { display: none; } /* dölj plattform */
  .komprimerad .post-table th:nth-child(4),
  .komprimerad .post-table td:nth-child(4) { min-width: 80px; max-width: 120px; }
  .komprimerad .status-badge { max-width: 70px; }
}

/* Lite luft mot vänsterkanten i delad vy */
.komprimerad .post-table th:first-child,
.komprimerad .post-table td:first-child {
  padding-left: 12px;
}

/* === LÅST INLÄGG – inaktiva verktygsknappar === */
.verktyg-knapp.inaktiv {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* === LÅST FORMULÄR === */
.last-falt {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  cursor: default;
}

/* Dölj den inbyggda kalender/klocksymbolen på datetime-local när fältet är låst */
.last-falt::-webkit-calendar-picker-indicator {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
  filter: grayscale(1);
}

/* === INFO-IKON MED TOOLTIP === */
.info-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: var(--card);
  background: var(--muted);
  border-radius: 50%;
  cursor: default;
  position: relative;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1;
  user-select: none;
}

.info-ikon em {
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  text-transform: lowercase !important;
}

.info-tooltip {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  background: var(--card-head);
  color: var(--text);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 10000;
  pointer-events: none;
}

.info-ikon:hover .info-tooltip,
.info-ikon:focus .info-tooltip {
  display: block;
}

/* === ANVÄNDARVYN – SORTERING & FILTER === */

.anv-th-sortbar {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.anv-th-sortbar:hover { background: var(--card-head); }
.anv-th-aktiv { color: var(--desk); }

#anvandareTabell th,
#anvandareTabell td {
  padding-left: 6px;
  padding-right: 6px;
}

#anvandareTabell th:nth-child(4),
#anvandareTabell td:nth-child(4) {
  min-width: 0;
  max-width: none;
}

#anvandareTabell th:nth-child(5),
#anvandareTabell td:nth-child(5) {
  min-width: 160px;
  max-width: 340px;
}

#anvandareTabell:not(.visa-anv-id) .anv-id-kolumn {
  display: none;
}

.anv-id-cell,
.anv-modal-id {
  color: var(--muted);
  font-weight: 400;
}

.anv-id-cell {
  font-size: 11px;
  white-space: nowrap;
}

.anv-modal-id {
  font-size: 0.82em;
}

.anv-sort-pil {
  font-size: 11px;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.anv-rad-ikon {
  width: 15px;
  height: 15px;
  display: block;
}

.anv-rad-ikon path,
.anv-rad-ikon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.anv-roll-dropdown {
  position: absolute;
  z-index: 2000;
  background: var(--card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(7,42,64,0.15);
  padding: 10px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anv-roll-dropdown-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 4px;
}
.anv-roll-dropdown-rad:hover { background: var(--card-head); }
.anv-roll-dropdown-rad input { cursor: pointer; }

.anv-roll-badge {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
}

/* === FLYTANDE BUGGRAPPORTERING === */
.bugg-flyt-knapp {
  position: fixed;
  right: 9vw;
  bottom: 18px;
  z-index: 5000;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #53b234;
  background: #53b234;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(7,42,64,0.18);
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.bugg-flyt-knapp:hover {
  background: #fff;
  color: #53b234;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(7,42,64,0.22);
}

.bugg-flyt-knapp svg {
  width: 30px;
  height: 30px;
}

.bugg-flyt-knapp svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bugg-flyt-knapp svg path:nth-child(3),
.bugg-flyt-knapp svg path:nth-child(n+4) {
  fill: none;
}

.bugg-drawer {
  position: fixed;
  top: 125px;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 7000;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

body.anvandare-meny-oppen .bugg-drawer,
body.anvandare-meny-oppen .bugg-flyt-knapp {
  z-index: 100;
}

.bugg-panel {
  pointer-events: all;
  width: 380px;
  max-width: calc(100vw - 24px);
  height: 100%;
  background: #178ca4;
  border-radius: 14px 0 0 14px;
  box-shadow: -4px 0 24px rgba(7,42,64,0.24);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(105%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.bugg-drawer.oppet .bugg-panel {
  transform: translateX(0);
}

.bugg-superfilter-drawer {
  position: absolute;
  right: min(380px, calc(100vw - 24px));
  top: 96px;
  width: 170px;
  max-height: calc(100% - 110px);
  overflow-y: auto;
  pointer-events: all;
  background: #072a40;
  color: #ffffff;
  border-radius: 10px 0 0 10px;
  box-shadow: -4px 0 18px rgba(7,42,64,0.22);
  padding: 10px;
}

.bugg-superfilter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.bugg-superfilter-header strong {
  font-size: 13px;
}

.bugg-superfilter-stang {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.bugg-superfilter-flikrad {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bugg-superfilter-flik,
.bugg-superfilter-knapp,
.bugg-superfilter-rubrik,
.bugg-superfilter-rensa {
  width: 100%;
  min-height: 30px;
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: 7px;
  padding: 5px 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
}

.bugg-superfilter-flik {
  width: auto;
  min-height: 23px;
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--desk);
  background: var(--card);
  border-color: var(--border-mid);
}

.bugg-superfilter-flik.aktiv {
  background: var(--desk);
  border-color: var(--desk);
  color: #ffffff;
}

.bugg-superfilter-knapp,
.bugg-superfilter-rensa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 7px;
}

.bugg-superfilter-rubrik {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 7px;
  text-align: left;
}

.bugg-superfilter-knapp.aktiv,
.bugg-superfilter-rensa.aktiv,
.bugg-superfilter-rubrik.oppen {
  background: #53b234;
  border: 1px solid rgba(255,255,255,0.40);
}

.bugg-superfilter-val {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: -5px 0 8px;
  padding-bottom: 2px;
  overflow: hidden;
  border: 0px solid rgba(255,255,255,0.28);
  border-radius: 7px 7px 7px 7px;
  background: rgba(255,255,255,0.1);
}

.bugg-superfilter-chip {
  width: 100%;
  border: none;
  border-bottom: 0px solid rgba(255,255,255,0.18);
  border-radius: 0;
  padding: 3px 10px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.bugg-superfilter-chip:last-child {
  border-bottom: none;
}

.bugg-superfilter-chip:hover {
  background: rgba(255,255,255,0.13);
}

.bugg-superfilter-chip.vald {
  background: #0e7c93;
  border: 1px rgba(0,0,0,40)
  color: #ffffff;
}

.bugg-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  color: #ffffff;
  flex-shrink: 0;
}

.bugg-panel-rubrik {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
}

.bugg-panel-ikon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.bugg-panel-ikon path,
.bugg-rapportera-knapp svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bugg-panel-ikon path:nth-child(3),
.bugg-panel-ikon path:nth-child(n+4),
.bugg-rapportera-knapp svg path:nth-child(3),
.bugg-rapportera-knapp svg path:nth-child(n+4) {
  fill: none;
}

.bugg-panel-stang {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.35);
  color: #000;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}

.bugg-panel-stang:hover {
  background: #fff;
  transform: translateY(-1px);
}

.bugg-panel-innehall {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}

.bugg-panel-innehall::-webkit-scrollbar { width: 4px; }
.bugg-panel-innehall::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 4px; }

.bugg-rapportera-knapp,
.bugg-sektion-toggle,
.bugg-skicka-knapp {
  width: 100%;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
}

.bugg-rapportera-knapp {
  position: sticky;
  top: 0;
  z-index: 2;
  overflow: visible;
  min-height: 48px;
  background: #53b234;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-clip: padding-box;
  box-shadow: 0 0 0 6px #178ca4, 0 6px 0 #178ca4, 0 2px 8px rgba(7,42,64,0.14);
  transition: transform 0.15s, box-shadow 0.15s;
}

.bugg-rapportera-knapp:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 12px #178ca4, 0 12px 0 #178ca4, 0 4px 12px rgba(7,42,64,0.18);
}

.bugg-rapportera-knapp:hover,
.bugg-rapportera-knapp.aktiv {
  background: #0a3d54;
  color: #ffffff;
}

.bugg-rapportera-knapp svg {
  width: 22px;
  height: 22px;
}

.bugg-form {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(7,42,64,0.14);
}

.bugg-form-rad {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bugg-form-rad label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.bugg-form-rad .obligatorisk {
  color: #b93020;
}

.bugg-plats-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  position: relative;
}

.bugg-plats {
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  min-width: 0;
  cursor: pointer;
}

.bugg-kund-select {
  width: 100%;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 6px;
  padding: 9px 10px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
}

.bugg-kund-select:focus {
  border-color: #53b234;
  box-shadow: 0 0 0 2px rgba(83,178,52,0.18);
}

.bugg-kund-select.bugg-falt-fel {
  border-color: #b93020;
  box-shadow: 0 0 0 2px rgba(185,48,32,0.16);
}

.bugg-plats-redigera {
  width: 34px;
  min-height: 34px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #072a40;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bugg-plats-redigera:hover {
  background: #e9f9e3;
  border-color: #53b234;
  color: #154d1d;
}

.bugg-plats-redigera svg {
  width: 16px;
  height: 16px;
}

.bugg-plats-redigera svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bugg-plats-dropdown {
  position: fixed;
  z-index: 9000;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(7,42,64,0.18);
  padding: 6px;
  flex-direction: column;
  gap: 3px;
}

.bugg-plats-val {
  width: 100%;
  border: none;
  border-radius: 6px;
  background: #fff;
  color: var(--text-main);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  padding: 8px 9px;
}

.bugg-plats-val:hover,
.bugg-plats-val.vald {
  background: #e9f9e3;
  color: #154d1d;
}

.bugg-prioritet-val {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.bugg-prio-knapp {
  min-height: 38px;
  border: 1px solid var(--border-mid);
  border-radius: 7px;
  background: #fff;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bugg-prio-knapp:hover,
.bugg-prio-knapp.vald {
  background: #e9f9e3;
  border-color: #53b234;
  color: #154d1d;
}

.bugg-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 120px;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 10px;
  font: inherit;
  color: var(--text-main);
}

.bugg-form textarea:focus {
  outline: none;
  border-color: #53b234;
  box-shadow: 0 0 0 3px rgba(83,178,52,0.16);
}

.bugg-form textarea.bugg-falt-fel {
  border-color: #b93020;
  box-shadow: 0 0 0 2px rgba(185,48,32,0.16);
}

.bugg-skicka-knapp {
  min-height: 40px;
  background: #53b234;
  color: #000;
  display: inline-flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1;
}

.bugg-skicka-knapp:hover {
  background: #072a40;
  color: #ffffff;
}

.bugg-skicka-knapp:disabled,
.bugg-skicka-knapp.laddar {
  opacity: 0.65;
  cursor: wait;
}

.bugg-skicka-knapp > svg.bugg-skicka-ikon {
  display: block !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
}

.bugg-skicka-knapp > svg.bugg-skicka-ikon path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bugg-skicka-knapp > svg.bugg-skicka-ikon path:nth-child(3),
.bugg-skicka-knapp > svg.bugg-skicka-ikon path:nth-child(n+4) {
  fill: none;
}

.bugg-sektion-toggle {
  min-height: 42px;
  background: #178ca4 !important;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.bugg-sektion-toggle:hover {
  background: #ffffff !important;
}

.bugg-tidigare-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bugg-listfilter-knapp {
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  min-height: 23px;
  padding: 2px 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
  background: var(--card);
  color: var(--desk);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bugg-listfilter-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bugg-listfilter-knapp:hover {
  border-color: var(--desk);
}

.bugg-listfilter-knapp.aktiv {
  border-color: var(--desk);
  background: var(--desk);
  color: #ffffff;
}

.bugg-listfilter-raknare {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.bugg-listfilter-x {
  font-size: 16px;
  line-height: 0.8;
}

.bugg-tidigare-rad {
  background: #fff;
  border-radius: 8px;
  padding: 10px 11px;
  box-shadow: 0 2px 8px rgba(7,42,64,0.12);
  font-size: 13px;
  color: var(--text-main);
}

.bugg-tidigare-topprad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.bugg-tidigare-topprad strong {
  font-size: 13px;
}

.bugg-rapport-rubrik {
  letter-spacing: 0.02em;
}

.bugg-statusrad {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.bugg-statusrad span {
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  padding: 2px 8px 0px 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--desk);
  background: var(--card);
  line-height: 1.0;
}

.bugg-tidigare-topprad em {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-muted);
}

.bugg-tidigare-plats {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--desk);
}

.bugg-tidigare-rad p {
  margin: 5px 0 0;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.35;
}

.bugg-kommentar {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
}

.bugg-tidigare-rapportor {
  display: none;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.bugg-seaml-id {
  font-size: 0.86em;
  font-style: italic;
  font-weight: 600;
  opacity: 0.78;
}

.bugg-tom-lista {
  margin: 0;
  padding: 12px 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
}

@media (max-width: 700px) {
  .bugg-flyt-knapp {
    right: 18px;
    bottom: 16px;
  }

  .bugg-drawer {
    top: 82px;
    bottom: 0;
  }

  .bugg-panel {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
  }
}


/* Bugghunter status- och prioritetsfärger */
.bugg-status-pill,
.bugg-status-select,
.bugg-prio-pill,
.bugg-prio-select {
  min-height: 23px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.05;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.bugg-status-select,
.bugg-prio-select {
  appearance: auto;
  font-family: var(--font);
  cursor: pointer;
  height: 23px;
  outline: none;
}

.bugg-status-select:disabled,
.bugg-prio-select:disabled {
  opacity: 0.65;
  cursor: wait;
}

.bugg-status--ny {
  background: #9df9b5 !important;
  color: #154d1d !important;
  border: 1px solid #154d1d !important;
}

.bugg-status--ko {
  background: #dbdbdb !important;
  color: #5a5a5a !important;
  border: 1px solid #5a5a5a !important;
}

.bugg-status--pagar {
  background: #ffee98 !important;
  color: #854f0b !important;
  border: 1px solid #e9a800 !important;
}

.bugg-status--info-behovs {
  background: #f9c1c1 !important;
  color: #790808 !important;
  border: 1px solid #790808 !important;
}

.bugg-status--fixad {
  background: #98ec4f !important;
  color: #3f7113 !important;
  border: 1px solid #3f7113 !important;
}

.bugg-status--avslutad {
  background: #3f7113 !important;
  color: #ffffff !important;
  border: 1px solid #29480c !important;
}

.bugg-prio-pill,
.bugg-prio-select {
  border: none !important;
}

.bugg-prio--lag,
.bugg-prio-select.bugg-prio--lag,
.bugg-prio-knapp[data-prio="låg"].vald {
  background: #53b234 !important;
  color: #ffffff !important;
  border-color: #53b234 !important;
}

.bugg-prio--normal,
.bugg-prio-select.bugg-prio--normal,
.bugg-prio-knapp[data-prio="normal"].vald {
  background: #e9a800 !important;
  color: #ffffff !important;
  border-color: #e9a800 !important;
}

.bugg-prio--akut,
.bugg-prio-select.bugg-prio--akut,
.bugg-prio-knapp[data-prio="akut"].vald {
  background: #c0392b !important;
  color: #ffffff !important;
  border-color: #c0392b !important;
}


.bugg-admin-kommentar {
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bugg-admin-kommentar-text {
  width: 100%;
  resize: vertical;
  min-height: 68px;
  border: 1px solid var(--border-mid);
  border-radius: 7px;
  padding: 8px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-main);
  background: #fff;
}

.bugg-admin-kommentar-text:focus {
  outline: none;
  border-color: #53b234;
  box-shadow: 0 0 0 2px rgba(83,178,52,0.16);
}

.bugg-admin-kommentar-spara {
  align-self: flex-start;
  border: none;
  border-radius: 999px;
  height: 23px;
  min-height: 23px;
  padding: 2px 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: #072a40;
  color: #ffffff;
  cursor: pointer;
}

.bugg-admin-kommentar-spara:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* === ROLLMATRIS === */
.rollmatris-rubrik {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.rollmatris-meta {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  background: var(--card-head);
}

.rollmatris-wrap {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rollmatris-sektion {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.rollmatris-intro {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rollmatris-intro h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.rollmatris-intro p {
  font-size: 12px;
  color: var(--muted);
}

.rollmatris-scroll {
  width: 100%;
  overflow-x: auto;
}

.rollmatris-tabell {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.rollmatris-tabell th,
.rollmatris-tabell td {
  border-bottom: 1px solid var(--border);
  padding: 11px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
}

.rollmatris-tabell th {
  background: var(--card-head);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rollmatris-tabell th:first-child,
.rollmatris-tabell td:first-child,
.rollmatris-tabell th:last-child,
.rollmatris-tabell td:last-child {
  text-align: left;
}

.rollmatris-tabell td:first-child {
  color: var(--text);
  font-weight: 600;
  min-width: 220px;
}

.rollmatris-tabell td:last-child {
  color: var(--muted);
  min-width: 250px;
}

.rollmatris-tabell tr:last-child td {
  border-bottom: none;
}

.rollmatris-tabell .ja {
  color: #154d1d;
  font-size: 16px;
  font-weight: 800;
}

.rollmatris-tabell .nej {
  color: var(--border-mid);
  font-size: 15px;
  font-weight: 700;
}

.rollmatris-tabell .plan,
.rollmatris-tabell .villkor,
.rollmatris-tabell .delvis {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}