* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background: #f4f6fb;
  color: #1a1f2b;
}

.app-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.app-header h1 {
  margin: 4px 0 4px;
  font-size: 28px;
}

.app-header p {
  color: #5b667a;
  margin: 0 0 16px;
}

.back-link {
  display: inline-block;
  margin-bottom: 8px;
  color: #0B5FFF;
  text-decoration: none;
  font-size: 14px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #5b667a;
  white-space: nowrap;
}

.panel {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.08);
}

.panel h2 {
  margin-top: 0;
  font-size: 18px;
}

.hint {
  color: #5b667a;
  font-size: 14px;
}

/* Tecken-räknare under "Budskap"-textfältet (admins uttryckliga önskemål:
   "begränsad till 1000 tecken") — rödfärgas när gränsen är nådd så det syns
   tydligt VARFÖR man inte kan skriva mer, istället för att fältet bara
   tyst slutar acceptera tecken. */
.char-counter {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #8a93a6;
  text-align: right;
}
.char-counter.char-counter-max {
  color: #c0392b;
  font-weight: 600;
}

.room-table {
  width: 100%;
  border-collapse: collapse;
}

.room-table th, .room-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #eceff5;
  font-size: 14px;
}

.actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: #3a4256;
  gap: 6px;
  /* Grid-items har som DEFAULT min-width:auto, vilket betyder att de ALDRIG
     krymper under sitt eget innehålls min-content-bredd — ett <select> med
     en lång alternativtext (t.ex. "BRF-tavla (Aktuellt/Kalender/..., auto)")
     tvingar annars HELA fältet (och därmed formuläret/kortet) att bli
     bredare än sin grid-kolumn, vilket ger horisontell overflow på sidan.
     min-width:0 gör att fältet istället krymper till kolumnens bredd precis
     som väntat, och <select>:ens egen text klipps med text-overflow nedan. */
  min-width: 0;
}

.form-grid input, .form-grid textarea, .form-grid select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #d7dbe6;
  border-radius: 8px;
  font-weight: 400;
  /* Samma min-width:0-resonemang som på .form-grid label ovan, plus explicit
     width:100% så fältet alltid fyller sin kolumn istället för att falla
     tillbaka till webbläsarens egen (innehålls-baserade) standardbredd. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.form-grid select {
  /* <select> klipper annars inte sin text alls när den är bredare än
     fältet (till skillnad från input/textarea) — utan detta skulle en lång
     alternativtext sticka ut över kortets kant även efter fixen ovan. */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
}

.form-full {
  grid-column: 1 / -1;
}

.checkbox-field {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}

.checkbox-field input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #0B5FFF;
}

.auto-type-hint {
  margin: 0;
  padding: 10px 14px;
  background: #eef4ff;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
  color: #2b4c8c;
  font-size: 13px;
}

.guest-editor-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #3a4256;
  margin-bottom: 6px;
}

.guest-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.guest-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.guest-row input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #d7dbe6;
  border-radius: 8px;
  font-weight: 400;
  width: 100%;
}

.guest-row input.guest-name-input::placeholder,
.guest-row input.guest-org-input::placeholder {
  color: #9aa3b5;
}

/* ---------- BRF-tavlans boende-rader ---------- */

.resident-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.resident-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.resident-row input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #d7dbe6;
  border-radius: 8px;
  font-weight: 400;
  width: 100%;
}

.resident-row input::placeholder {
  color: #9aa3b5;
}

/* Rubrikraden ovanför de riktiga boende-raderna — bara etiketter, inga fält
   och ingen "Ta bort"-knapp, därför en tom femte kolumn istället för en knapp. */
.resident-row-header {
  font-size: 12px;
  font-weight: 600;
  color: #6b7383;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ---------- Säsongsbilder ---------- */
.date-pair {
  display: flex;
  gap: 6px;
}
.date-pair select {
  flex: 1;
}

.seasonal-image-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.seasonal-image-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e3e7f0;
  border-radius: 10px;
  background: #fafbfe;
}

.seasonal-image-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #e3e7f0;
}

.seasonal-image-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seasonal-image-title {
  font-weight: 600;
  color: #222a3b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seasonal-image-meta {
  font-size: 12px;
  color: #6b7280;
}

.seasonal-type-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2b4c8c;
}
.seasonal-type-badge.holiday {
  background: #fdf0e6;
  color: #9a4b12;
}

.seasonal-active-today {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f8ee;
  color: #0a7a3f;
}

.seasonal-image-actions {
  display: flex;
  gap: 8px;
}

.seasonal-image-empty {
  color: #6b7280;
  font-size: 13px;
  padding: 10px 0;
}

.slug-preview {
  margin-top: -8px;
  font-size: 12px;
  color: #5b667a;
  font-family: 'Cascadia Code', Consolas, monospace;
}

.kpi-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi-stat-row {
  grid-template-columns: 1fr 1fr !important;
}
.kpi-stat-row input { font: inherit; padding: 8px 10px; border: 1px solid #d7dbe6; border-radius: 8px; font-weight: 400; width: 100%; }

.news-feed-row {
  grid-template-columns: 1fr auto !important;
}
.news-feed-row input { font: inherit; padding: 8px 10px; border: 1px solid #d7dbe6; border-radius: 8px; font-weight: 400; width: 100%; }

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #d7dbe6;
  background: #fff;
  color: #1a1f2b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-small { padding: 4px 10px; font-size: 12px; }

.btn-primary {
  background: #0B5FFF;
  border-color: #0B5FFF;
  color: #fff;
  grid-column: 1 / -1;
  justify-self: start;
}

.btn-danger {
  background: #fff0f0;
  border-color: #f3c3c3;
  color: #b42318;
}

.error {
  color: #b42318;
  font-size: 13px;
}

.saved-msg {
  color: #067647;
  font-size: 13px;
  min-height: 18px;
}

.saved-msg.error {
  color: #b42318;
}

/* ---------- Autosave-statusindikator (public/js/autosave.js) ---------- */
/* Litet, diskret meddelande ("Sparar… / Sparat ✓ / ⚠ fel") som dyker upp
   bredvid ett formulärs rubrik/fält — ersätter de gamla explicita
   Spara-knapparna i varje admin-modul. Admins uttryckliga önskemål: "Det
   ska automatiskt sparas när man gör ändringar ... på alla moduler och
   funktioner." */
.autosave-status {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  transition: opacity 0.2s ease;
}
.autosave-status.saving {
  color: #6b7280;
  opacity: 0.85;
}
.autosave-status.saved {
  color: #067647;
}
.autosave-status.error {
  color: #b42318;
}

/* BRF-tavlans höger kolumn — valbart innehåll (se brf-admin.ejs/brf-admin.js
   och paintBrfSubPageHtml i display.js). Admins uttryckliga önskemål:
   "förutom budskapsfunktionen ska jag kunna välja om jag vill visa Buss,
   Tåg, väder, dagens mest klickade lokala nyheter, Kontaktinformation ...
   o.s.v." — enkel kryssrutelista, sparas direkt vid ändring (ingen
   Spara-knapp, samma riktning som övriga autosave-moduler). */
.brf-module-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.brf-module-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1b2030;
}
.brf-module-toggle input[type="checkbox"] {
  width: auto;
  padding: 0;
}

/* Rad per höger-kolumn-modul (checkbox + namn + visningstid + Redigera/
   Förhandsgranska) — admins uttryckliga önskemål: "här vill jag ha
   möjlighet att redigera varje sida/funktion samt förhandsgranska just den
   sidan" samt "kunna ställa in visningstid för respektive sida". En grid-
   rad per modul, rubrikraden (.brf-module-row-header) speglar samma
   kolumnbredder i grå, mindre text. */
.brf-module-row-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.brf-module-row,
.brf-module-row-header {
  display: grid;
  grid-template-columns: 28px 1fr 110px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1fa;
}
.brf-module-row:last-child {
  border-bottom: none;
}
.brf-module-row-header {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8891a6;
}
.brf-module-row-label {
  font-size: 14px;
  font-weight: 600;
  color: #1b2030;
}
.brf-module-duration-input {
  width: 90px;
  padding: 6px 8px;
}
.brf-module-row-actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}
.btn-text {
  background: none;
  border: none;
  color: #0b5fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.btn-text:hover {
  text-decoration: underline;
}
.btn-text.disabled {
  color: #c9ced9;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

.page-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.page-card {
  border: 1px solid #e2e6f0;
  border-radius: 8px;
  padding: 10px 12px;
}

.page-card.selected {
  border-color: #0B5FFF;
  background: #f0f5ff;
}

.page-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.drag-handle {
  color: #9aa3b5;
  cursor: grab;
}

.type-badge {
  font-size: 11px;
  background: #eef1f8;
  color: #5b667a;
  padding: 2px 8px;
  border-radius: 999px;
}

.spacer { flex: 1; }

.page-list-actions {
  display: flex;
  gap: 8px;
}

/* ---------- Modern flik-navigering (pill-stil segmented control) ----------
   Ersätter de gamla understrukna textlänkarna — ser nu ut som riktiga knappar
   i en sammanhängande grupp, med en tydligt separerad "Förhandsgranska"-knapp
   till höger (den är en EXTERN åtgärd — öppnar ny flik — inte en sidflik). */
.admin-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.admin-nav-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #e9edf6;
  padding: 4px;
  border-radius: 11px;
}
.admin-nav-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #5b667a;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.admin-nav-tabs a:hover {
  color: #0B5FFF;
}
.admin-nav-tabs a.active {
  background: #fff;
  color: #0B5FFF;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.14);
}
.admin-nav-tabs a.admin-nav-gear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: #6b4fbb;
}
.admin-nav-tabs a.admin-nav-gear:hover {
  color: #4e2f9e;
}
.admin-nav-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0B5FFF;
  text-decoration: none;
  border: 1.5px solid #c4d6ff;
  background: #f3f7ff;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.admin-nav-preview:hover {
  background: #e4edff;
  border-color: #0B5FFF;
}
.admin-nav-preview:active {
  transform: scale(0.97);
}

/* ---------- Budskapsadmin (broadcasts-admin.ejs) ---------- */
.broadcast-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .broadcast-layout { grid-template-columns: 1fr; }
}

.broadcast-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #eef1fd;
  border: 1px solid #d7def7;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #334;
  line-height: 1.5;
}
.broadcast-note strong { color: #1a1f2b; }

.link-status {
  font-size: 12px;
  margin-top: 4px;
  display: none;
  align-items: center;
  gap: 6px;
}
.link-status.show { display: flex; }
.link-status.ok { color: #067647; }
.link-status.error { color: #b42318; }
.link-status.checking { color: #5b667a; }
input.invalid { border-color: #b42318 !important; }
input.valid { border-color: #067647 !important; }

/* Modern datum-input som öppnar en kalenderwidget */
.date-field-wrap { position: relative; grid-column: 1 / -1; }
.date-input-shell {
  border: 1px solid #d7dbe6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  gap: 10px;
  cursor: pointer;
  background: #fff;
  font-size: 14px;
}
.date-input-shell svg { flex-shrink: 0; color: #0B5FFF; }
.date-input-shell .date-placeholder { color: #9aa3b5; }
.date-input-shell .clear-date {
  margin-left: auto;
  font-size: 12px;
  color: #9aa3b5;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}
.date-input-shell.has-value .clear-date { display: inline-block; }
.calendar-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: #fff;
  border: 1px solid #e2e6f0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(20,30,60,0.16);
  padding: 14px;
  z-index: 10;
  display: none;
}
.calendar-popover.open { display: block; }
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-weight: 600; font-size: 14px;
}
.cal-header button {
  border: none; background: #f4f6fb; width: 24px; height: 24px;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: #3a4256;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grid .dow { font-size: 10px; color: #9aa3b5; font-weight: 600; padding-bottom: 4px; }
.cal-day { padding: 6px 0; font-size: 12px; border-radius: 6px; cursor: pointer; }
.cal-day:hover { background: #f4f6fb; }
.cal-day.muted { color: #d7dbe6; }
.cal-day.today { font-weight: 700; color: #0B5FFF; }
.cal-day.selected { background: #0B5FFF; color: #fff; }

.room-list-badge {
  font-size: 11px; font-weight: 700;
  background: #eef1f8; color: #3a4256;
  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}

/* Förhandsgranskning: efterliknar skärmens mörka bakgrund */
.bc-preview-stage {
  background: linear-gradient(160deg, #0b1220 0%, #141d2e 60%, #1c2636 100%);
  border-radius: 12px;
  padding: 26px 18px 22px;
  text-align: center;
  color: #fff;
}
/* Förhandsgranskningen är en RIKTIG iframe av /display/:slug?preview=1 — samma
   CSS/JS som den faktiska skärmen. iframen renderas internt i VERKLIG
   skärmupplösning (1920×1080, satt via width/height-attribut i EJS) och skalas
   sedan ner visuellt med transform: scale() (räknas ut i JS utifrån panelens
   faktiska bredd) — det ger EXAKT samma proportioner som en riktig skärm,
   istället för att clamp()/vmin-storlekarna räknas ut mot en liten ruta. */
.bc-preview-frame-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 8px 28px rgba(20,30,60,0.18);
  background: #04070d;
}
.bc-preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  border: none;
  display: block;
  transform-origin: top left;
  /* transform: scale(...) sätts i JS (broadcasts-admin.js) utifrån wrapperns
     faktiska renderade bredd delat med 1920. */
}
.bc-preview-badge {
  display: inline-block; background: rgba(255,255,255,0.12); border-radius: 999px;
  padding: 4px 12px; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 14px;
}
.bc-date-card {
  display: inline-flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px; padding: 10px 22px 12px; margin-bottom: 14px;
}
.bc-date-card .dow { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.75; }
.bc-date-card .daynum {
  font-size: 32px; font-weight: 800; line-height: 1.1;
  background: linear-gradient(135deg, #1fd1c0, #0b5fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bc-date-card .month { font-size: 12px; opacity: 0.85; }
.bc-preview-title { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.bc-preview-body { font-size: 13px; opacity: 0.92; line-height: 1.5; white-space: pre-line; }
.bc-preview-qr { margin-top: 14px; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.bc-preview-qr img { width: 80px; height: 80px; background: #fff; border-radius: 8px; padding: 6px; }
.bc-preview-qr .qr-caption { font-size: 10px; opacity: 0.7; }

/* Lista: tidigare publicerade budskap */
.msg-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e2e6f0; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
}
.msg-row.editing { border-color: #0B5FFF; box-shadow: 0 0 0 2px rgba(11,95,255,0.12); }
.msg-date-chip {
  flex-shrink: 0; width: 48px; text-align: center;
  background: #f4f6fb; border-radius: 8px; padding: 6px 4px;
}
.msg-date-chip .d { font-size: 16px; font-weight: 800; color: #0B5FFF; line-height: 1.1; }
.msg-date-chip .m { font-size: 9px; text-transform: uppercase; color: #9aa3b5; }
.msg-date-chip.no-date .d { font-size: 10px; font-weight: 700; color: #9aa3b5; }
.msg-main { flex: 1; min-width: 0; }
.msg-title { font-size: 14px; font-weight: 700; color: #1a1f2b; }
.msg-body-preview {
  font-size: 12px; color: #5b667a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-actions { flex-shrink: 0; display: flex; gap: 6px; }
.icon-btn {
  border: 1px solid #d7dbe6; background: #fff; width: 30px; height: 30px;
  border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #3a4256;
}
.icon-btn:hover { background: #f4f6fb; }
.icon-btn.danger:hover { background: #fdf2f2; color: #b42318; border-color: #f3c3c3; }
.empty-list { font-size: 13px; color: #9aa3b5; padding: 12px 0; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1a1f2b; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Administratör (organizations-admin.ejs) ---------- */
.org-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid #eceff5;
}
.org-row:last-child { border-bottom: none; }
.org-row-active { background: #f3f7ff; border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.org-logo-thumb {
  width: 40px; height: 40px; object-fit: contain; border-radius: 8px;
  background: #0B1220; padding: 4px; flex-shrink: 0;
}
.org-row-main { flex: 1; min-width: 0; }
.org-row-name { font-size: 15px; font-weight: 700; color: #1a1f2b; }
.org-row-meta { font-size: 12px; color: #5b667a; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.org-accent-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0;
}
.org-status-pending { color: #b78103; }
/* Modul-togglar (se ALL_MODULE_KEYS i db.js) — en rad av kryssrutor per
   organisation i Systemadministratör-listan, så man kan aktivera/avaktivera
   säljbara tillval direkt utan att öppna ett separat formulär. Alla fyra
   moduler (inklusive Digital Signage) är HELT FRIA, oberoende kryssrutor —
   ingen är obligatorisk eller förifylld. */
.org-module-toggles { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.org-module-toggle {
  display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: #5b667a; cursor: pointer;
}
.org-module-toggle input { width: auto; cursor: pointer; }
.org-module-toggle input:disabled { cursor: not-allowed; }
/* Syns bredvid en INTE permanent aktiverad modul om kunden själv startat en
   10-dagars provperiod (se startModuleTrial i db.js) — ger Systemadministratören
   en snabb överblick över vilka kunder som just nu testar vad, direkt i
   organisationslistan, utan att behöva fråga. */
.org-trial-badge {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: none;
}
.org-trial-badge.active { background: #e8f8f0; color: #0d9a5f; }
.org-trial-badge.expired { background: #fdecec; color: #c23b3b; }
/* Banner längst upp på en modulsida (floorplans-admin.ejs, admin.ejs m.fl.)
   som visas SÅ LÄNGE modulen bara är olåst via en aktiv provperiod, se
   partials/trial-banner.ejs. */
.trial-banner {
  display: flex; align-items: center; gap: 8px; background: #fff7e6; border: 1px solid #f1d38a;
  color: #8a5a00; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
}
.trial-banner svg { flex: none; }
.org-edit-panel {
  background: #f9fafc;
  border: 1px solid #e2e6f0;
  border-radius: 10px;
  padding: 16px;
  margin: 4px 0 14px;
}
.org-edit-form { margin: 0; }

/* Modal: redigera rumslista per budskap */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,15,30,0.4);
  display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: #fff; border-radius: 10px; width: 420px; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(20,30,60,0.25);
}
.modal-header { padding: 18px 22px 12px; border-bottom: 1px solid #eceff5; }
.modal-header h3 { margin: 0 0 4px; font-size: 16px; }
.modal-header p { margin: 0; font-size: 12px; color: #5b667a; }
.modal-body { padding: 10px 22px; overflow-y: auto; flex: 1; }
.room-toggle-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f4f6fb;
}
.room-toggle-row:last-child { border-bottom: none; }
.room-toggle-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #0B5FFF; }
.room-toggle-row label { margin: 0; font-size: 14px; font-weight: 400; cursor: pointer; flex: 1; }
.modal-select-all {
  font-size: 12px; color: #0B5FFF; background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline;
}
.modal-footer { padding: 14px 22px; border-top: 1px solid #eceff5; display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Behörighetsadmin (permissions-admin.ejs) ---------- */
.manual-add-details {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eceff5;
}
.manual-add-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #0B5FFF;
}
.manual-add-details summary:hover { text-decoration: underline; }
.people-search-wrap { position: relative; }
.people-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #e2e6f0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20,30,60,0.14); z-index: 10; max-height: 280px; overflow-y: auto;
  display: none;
}
.people-search-results.open { display: block; }
.people-result-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid #f4f6fb; cursor: pointer;
}
.people-result-row:last-child { border-bottom: none; }
.people-result-row:hover { background: #f4f6fb; }
.people-result-name { font-size: 14px; font-weight: 600; color: #1a1f2b; }
.people-result-meta { font-size: 12px; color: #5b667a; }
.people-search-empty, .people-search-loading {
  padding: 12px 14px; font-size: 13px; color: #9aa3b5;
}
.floorplan-person-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 8px 12px; background: #eef2fb; border: 1px solid #d7deef;
  border-radius: 8px; font-size: 13px; font-weight: 600; color: #1a1f2b;
}
.floorplan-person-chip-clear {
  background: none; border: none; cursor: pointer; color: #5b667a; font-size: 14px; line-height: 1; padding: 2px 4px;
}
.floorplan-person-chip-clear:hover { color: #d1304a; }
.editor-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e2e6f0; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
}
.editor-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #1fd1c0, #0b5fff);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.editor-main { flex: 1; min-width: 0; }
.editor-name { font-size: 14px; font-weight: 700; color: #1a1f2b; }
.editor-email { font-size: 12px; color: #5b667a; }
.role-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; flex-shrink: 0;
}
.role-badge.superadmin { background: #fff0e0; color: #9a5b00; }
.role-badge.creator { background: #e6f4ff; color: #0B5FFF; }

/* ---------- Behörighetslista: en rad per person, kryssrutor per roll ----------
   Ersätter de två separata sök-/listflödena (ett för Superadmin, ett för Kreatör)
   med EN enhetlig lista — varje person är en rad med två kryssrutor, en per roll,
   som går att bocka i/ur direkt (anropar rätt API omedelbart, ingen separat
   "spara"-knapp). Tydligare överblick över vem som har vad i en enda vy. */
.role-list-head {
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: #9aa3b5;
}
.role-list-head-name { flex: 1; min-width: 0; padding-left: 48px; }
.role-list-head-check { width: 84px; text-align: center; }
.role-list-head-spacer { width: 0; }

.role-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e2e6f0; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 8px;
}
.role-row-person { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.role-self-tag { font-weight: 400; color: #9aa3b5; font-size: 12px; }

.role-check {
  width: 84px; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.role-check input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; accent-color: #0B5FFF;
}
.role-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.45; }

/* Sökresultatens rader får också inline kryssrutor (istället för en "Gör till X"-knapp) —
   samma interaktionsmönster som den permanenta listan nedanför, så det känns som EN
   sammanhängande yta istället för två olika UI-mönster. */
.people-result-row-roles {
  cursor: default;
  gap: 16px;
}
.people-result-row-roles:hover { background: transparent; }
.people-result-row-roles .role-check {
  width: auto; flex-direction: column; gap: 2px; font-size: 10px; color: #5b667a;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}

/* =====================================================================
   REDESIGN 2026: sidebar-navigering + kort-baserade ytor
   Allt nedan är ADDITIVT — klasserna ovan (.panel, .form-grid, .hint,
   .editor-row, .people-search-*, .role-check m.fl.) återanvänds fortfarande
   rakt av inuti de nya sidorna, bara yttre skal/layout/navigering är nytt.
   ===================================================================== */

body.has-sidebar { background: #f3f5fa; }

.app-layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar-nav {
  flex: 0 0 248px;
  width: 248px;
  background: #121826;
  color: #c7ccda;
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 2px; }
.sidebar-logo-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, #1fd1c0, #0b5fff);
  color: #fff; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-logo-text { color: #fff; font-weight: 700; font-size: 15px; }
.sidebar-org {
  font-size: 12px; color: #8891a6; padding: 10px 8px 16px;
  border-bottom: 1px solid #222a3a; margin-bottom: 10px;
}
.sidebar-org strong { color: #dfe3ee; }

/* Sökbar organisationsväxlare (ENDAST Systemadministratörer/platform owners,
   se sidebar.ejs) — ersätter den statiska "Visar X"-texten med en klickbar
   dropdown. En vanlig kunds Admin/Kreatör ser fortfarande bara ren text
   (.sidebar-org ovan), aldrig denna. */
.sidebar-org-switcher {
  position: relative; padding: 10px 8px 16px;
  border-bottom: 1px solid #222a3a; margin-bottom: 10px;
}
.sidebar-org-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer; padding: 2px 0;
  color: #8891a6; font-size: 12px; font-family: inherit; text-align: left;
}
.sidebar-org-trigger:hover { color: #c7ccda; }
.sidebar-org-trigger-label strong { color: #dfe3ee; font-weight: 700; }
.sidebar-org-trigger svg { flex: 0 0 auto; transition: transform 0.15s; }
.sidebar-org-panel {
  display: none; position: absolute; top: 100%; left: 8px; right: 8px; z-index: 50;
  background: #1a2130; border: 1px solid #2b3447; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4); padding: 8px; margin-top: 4px;
}
.sidebar-org-panel.open { display: block; }
.sidebar-org-panel input {
  width: 100%; padding: 7px 9px; border-radius: 7px; border: 1px solid #2b3447;
  background: #121826; color: #e4e7ef; font-size: 13px; margin-bottom: 6px;
}
.sidebar-org-panel input::placeholder { color: #636d82; }
.sidebar-org-results { max-height: 280px; overflow-y: auto; }
.sidebar-org-result {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 8px 9px; border-radius: 7px;
  color: #c7ccda; font-size: 13px; text-align: left;
}
.sidebar-org-result:hover { background: #242d40; color: #fff; }
.sidebar-org-result.active { color: #1fd1c0; }
.sidebar-org-result-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: #1fd1c0; flex: 0 0 auto;
}
.sidebar-org-loading, .sidebar-org-empty { padding: 10px 9px; font-size: 12.5px; color: #636d82; }

.sidebar-group-label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #636d82; padding: 14px 10px 8px; font-weight: 700;
}
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: #c7ccda; text-decoration: none; font-size: 14px; font-weight: 500;
  margin-bottom: 2px;
}
.sidebar-link svg { width: 17px; height: 17px; flex: 0 0 auto; }
.sidebar-link:hover { background: #1b2232; color: #fff; }
.sidebar-link.active {
  background: #1a2a3a; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 209, 192, 0.45);
}
/* En modul som kunden INTE har aktiverad (se enabledModules/hasModule i db.js)
   visas ändå i listan — gråmarkerad med ett hänglås istället för att döljas
   helt, så kunden vet att tillvalet finns och kan höra av sig för att
   beställa det (admins uttryckliga önskemål). Länken går fortfarande till
   sidan, som i sin tur visar en tydlig "Ej aktiverad"-sida (module-locked.ejs,
   se requireModule i server.js) — detta är bara den VISUELLA låsningen. */
.sidebar-link.locked { color: #5b6478; cursor: default; }
.sidebar-link.locked:hover { background: #1b2232; color: #767f94; }
.sidebar-lock-icon { width: 13px; height: 13px; margin-left: auto; opacity: 0.7; }
.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid #222a3a; }

/* ---------- Innehållsyta ---------- */
.app-main {
  flex: 1;
  min-width: 0;
  padding: 30px 36px 80px;
}
.page-header-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-header-row h1 { margin: 2px 0 6px; font-size: 25px; }
.page-header-row p { margin: 0; color: #5b667a; max-width: 680px; }
.page-breadcrumb { font-size: 13px; color: #8891a6; margin-bottom: 6px; }
.page-breadcrumb a { color: #8891a6; text-decoration: none; }
.page-breadcrumb a:hover { color: #0b5fff; }
.page-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #44485a; white-space: nowrap; }
.user-chip-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #1fd1c0, #0b5fff);
  color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.user-chip-logout { color: #8891a6; text-decoration: none; font-size: 12px; }
.user-chip-logout:hover { color: #0b5fff; }

.btn-gradient {
  background: linear-gradient(90deg, #1fd1c0, #0b5fff);
  color: #fff; border: none; border-radius: 9px; padding: 10px 18px;
  font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-gradient:hover { filter: brightness(1.05); }
.btn-outline {
  background: #fff; border: 1px solid #d7dbe6; border-radius: 9px;
  padding: 9px 16px; font-weight: 600; font-size: 14px; color: #1a1f2b;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn-outline:hover { border-color: #0b5fff; color: #0b5fff; }
/* Budskap-knappen i Skärmar & rum-sidhuvudet (se admin.ejs) när Digital
   Signage-modulen inte är aktiverad — samma gråmarkerade/låsta visuella
   språk som motsvarande sidebar-länkar (.sidebar-link.locked). */
.btn-outline.locked { color: #9aa3b5; border-color: #e4e8f1; }
.btn-outline.locked:hover { color: #9aa3b5; border-color: #e4e8f1; cursor: default; }
.btn-outline.locked svg:last-child { opacity: 0.7; }

.card {
  background: #fff; border: 1px solid #e4e8f1; border-radius: 14px; padding: 20px;
}
.card + .card { margin-top: 18px; }
.card h2, .card h3 { margin-top: 0; }

/* ---------- Rum-kort-grid (ersätter .room-table) ---------- */
.room-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px;
}
.room-card {
  background: #fff; border: 1px solid #e4e8f1; border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
}
.room-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.room-card-icon {
  width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, #1fd1c0, #0b5fff);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.room-card-icon.muted { background: #aab1c4; }
.room-card-icon svg { width: 22px; height: 22px; }
.room-card-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.room-card-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: #eef1fa; color: #5a6072; padding: 3px 8px; border-radius: 20px; white-space: nowrap;
}
.room-card-badge.accent { background: #fde6cf; color: #b5590a; }
.room-card-name { font-size: 17px; font-weight: 700; margin: 0; }
.room-card-slug {
  display: inline-block; font-size: 12px; font-family: 'Consolas', monospace;
  background: #f3f5fa; border: 1px solid #e4e8f1; border-radius: 6px;
  padding: 2px 8px; color: #5a6072; width: fit-content;
}
.room-card-status { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #5a6072; }
.room-card-status span { display: flex; align-items: center; gap: 7px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9ced9; flex: 0 0 auto; }
.status-dot.on { background: #17b06b; }
.room-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.room-card-actions .btn, .room-card-actions .btn-outline { flex: 1; justify-content: center; }
.room-card-actions .icon-only { flex: 0 0 auto; width: 38px; padding: 0; }

.room-card-add {
  border: 2px dashed #cfd5e4; border-radius: 14px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #5a6072; font-weight: 600; cursor: pointer; min-height: 170px;
  font-size: 14px;
}
.room-card-add:hover { border-color: #0b5fff; color: #0b5fff; }
.room-card-add-plus { font-size: 26px; line-height: 1; color: #aab1c4; }
.room-card-add:hover .room-card-add-plus { color: #0b5fff; }

/* ---------- Flikar (Sidor / Rominställningar / Dörrklocka m.fl.) ---------- */
.tabbar {
  display: inline-flex; gap: 4px; background: #fff; border: 1px solid #e4e8f1;
  border-radius: 10px; padding: 4px; margin-bottom: 18px;
}
.tabbar-link {
  border: none; background: transparent; padding: 8px 16px; border-radius: 7px;
  font-size: 14px; font-weight: 600; color: #5a6072; cursor: pointer; text-decoration: none;
}
.tabbar-link.active { background: #121826; color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Sido-rader i rum-editorn (ersätter .page-card) ---------- */
.page-row-list .page-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 6px;
  border-bottom: 1px solid #eef0f6;
  border-top: 2px solid transparent; border-bottom-width: 1px;
}
.page-row-list .page-row:last-child { border-bottom: none; }
.page-row.selected { background: #f6f9ff; border-radius: 8px; }
.page-row-icon {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.page-row-icon svg { width: 19px; height: 19px; }
.page-row-main { flex: 1; min-width: 0; }
.page-row-name { font-weight: 700; font-size: 14.5px; }
.page-row-meta { font-size: 12.5px; color: #8891a6; display: flex; gap: 8px; align-items: center; margin-top: 2px; flex-wrap: wrap; }
.page-row-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; background: #eef1fa;
  color: #5a6072; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; white-space: nowrap;
}
.page-row-actions { display: flex; gap: 8px; flex: 0 0 auto; }
/* Dragbart handtag (⠿) — se room-editor.js: draggable="true" sätts BARA medan
   musen hålls nedtryckt på just detta handtag (mousedown/touchstart), inte på
   hela raden, så att man fortfarande kan klicka på "Redigera"/"Ta bort" eller
   markera raden utan att råka starta en drag-operation. */
.page-row-drag { cursor: grab; color: #c9ced9; flex: 0 0 auto; font-size: 15px; touch-action: none; }
.page-row-drag:active { cursor: grabbing; }
/* Själva raden som dras — halvgenomskinlig så man ser var den "är" samtidigt
   som man fortfarande ser resten av listan bakom den. */
.page-row.dragging { opacity: 0.4; }
/* Infogningslinje — visas PÅ den rad musen för tillfället hovrar över, ovanför
   eller under beroende på vilken halva av raden pekaren är på (se dragover i
   room-editor.js) — ger samma tydliga "här hamnar den"-känsla som när man
   drar om flikar i en webbläsare, istället för att bara byta plats direkt. */
.page-row.drag-over-top { border-top-color: #0b5fff; }
.page-row.drag-over-bottom { border-bottom: 2px solid #0b5fff; }

/* ---------- Editor-split (sido-lista + sticky "lägg till"-panel) ---------- */
.editor-split { display: flex; align-items: flex-start; gap: 22px; }
.editor-split-main { flex: 1; min-width: 0; }
.editor-split-side { width: 320px; flex: 0 0 320px; position: sticky; top: 20px; }
.editor-split-side .form-grid { grid-template-columns: 1fr; }
.editor-split-side .btn-primary {
  background: linear-gradient(90deg, #1fd1c0, #0b5fff); border: none;
}
@media (max-width: 920px) {
  .editor-split { flex-direction: column; }
  .editor-split-side { width: 100%; position: static; }
}

/* ---------- Roll-pills (ersätter kryssrute-kolumnerna) ---------- */
.search-card { padding: 16px 20px; }
.search-card input[type="text"] {
  width: 100%; padding: 11px 14px; border: 1px solid #d7dbe6; border-radius: 9px; font-size: 14px;
}
.role-pill-list-head {
  display: flex; justify-content: space-between; padding: 0 6px 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #9aa3b5;
}
.role-pill-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 6px; border-bottom: 1px solid #eef0f6; gap: 16px; flex-wrap: wrap;
}
.role-pill-row:last-child { border-bottom: none; }
.role-pill-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.role-pills { display: flex; gap: 8px; flex: 0 0 auto; }
.role-pill {
  border: 1px solid #e4e8f1; background: #fff; color: #5a6072; font-size: 13px;
  font-weight: 600; padding: 7px 16px; border-radius: 20px; cursor: pointer;
}
.role-pill:disabled { cursor: not-allowed; opacity: 0.5; }
.role-pill[data-role="superadmin"].active { background: #fde6cf; border-color: #fde6cf; color: #b5590a; }
.role-pill[data-role="editor"].active { background: #dce7ff; border-color: #dce7ff; color: #0b5fff; }
/* Systemadministratör-pillen (se permissions-admin.js, sektionen som bara
   renderas för platform owners) — egen färg (lila) så den visuellt skiljer
   sig från Admin/Kreatör-pillarna ovan, eftersom det är en helt annan,
   högre behörighetsnivå (oberoende av organisation). */
.role-pill[data-remove-sysadmin].active { background: #ece4fd; border-color: #ece4fd; color: #6d28d9; }

/* Tvärorganisatorisk användarsökning (permissions-admin.ejs, "Alla användare —
   alla organisationer") — admins uttryckliga önskemål: "man behöver kunna få
   allting uppdelat per organisation så att det blir enkelt att hitta rätt
   användare". En grupp per organisation, med en egen "Hantera"-knapp för att
   växla in i just den. */
.crm-org-group { border: 1px solid #eef0f6; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.crm-org-group:last-child { margin-bottom: 0; }
.crm-org-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #f7f8fc; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #2c3752;
}
.crm-org-group-head code { font-weight: 500; color: #9aa3b5; margin-left: 6px; }
.crm-org-group .role-pill-row { padding: 10px 14px; }
.crm-org-group .role-pill[disabled] { cursor: default; opacity: 1; }

/* ---------- CRM & fakturering (/admin/crm) ---------- */
.crm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 6px; border-bottom: 1px solid #eef0f6; flex-wrap: wrap;
}
.crm-row:last-child { border-bottom: none; }
.crm-row-main { flex: 1; min-width: 220px; }
.crm-row-title { font-size: 14px; font-weight: 700; color: #1a1f2b; }
.crm-row-sub { font-weight: 500; color: #5b667a; }
.crm-row-meta { font-size: 12px; color: #9aa3b5; margin-top: 2px; }
.crm-note-input {
  margin-top: 6px; width: 100%; max-width: 420px; font-size: 13px;
  padding: 6px 10px; border: 1px solid #e4e8f1; border-radius: 7px;
}
.crm-status-select {
  font-size: 13px; padding: 7px 10px; border: 1px solid #e4e8f1; border-radius: 8px;
  background: #fff; color: #2c3752; flex: 0 0 auto;
}
.crm-price-edit { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.crm-price-edit input {
  width: 90px; font-size: 14px; padding: 7px 10px; border: 1px solid #e4e8f1; border-radius: 8px; text-align: right;
}
.crm-price-edit span { font-size: 13px; color: #5b667a; }

/* ---------- Filterchip (kundlista -> Fakturor/Att följa upp, "Visar bara: X") ---------- */
.crm-filter-chip {
  display: inline-flex; align-items: center; gap: 8px; background: #eef2ff; color: #3f4fef;
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; margin-bottom: 12px;
}
.crm-filter-chip button {
  border: none; background: none; color: #3f4fef; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0;
}

/* ---------- Faktureringsöversikt (summering högst upp i Fakturor-sektionen) ---------- */
.crm-summary-grid {
  background: #f9fafc; border: 1px solid #eef0f6; border-radius: 10px;
  padding: 16px 18px; margin-bottom: 14px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
}

/* ---------- Statusmärke (kundens läs-only "Mina fakturor"/"Era ärenden") ---------- */
.crm-status-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; background: #eef0f6; color: #5b667a; text-transform: none;
}
.crm-status-badge-ny { background: #fff7e6; color: #8a5a00; }
.crm-status-badge-under_behandling { background: #eef2ff; color: #3f4fef; }
.crm-status-badge-löst { background: #e8f8f0; color: #0d9a5f; }

/* ---------- Avtal (kunddetaljer, "Avtal"-lista) ---------- */
.crm-contract-list { margin: 0 0 14px; }
.crm-contract-list h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #9aa3b5; margin: 0 0 8px; }
.crm-contract-item { font-size: 13px; color: #2c3752; padding: 4px 0; }

/* ---------- Pipeline (leads, grupperat per stadium) ---------- */
.crm-lead-stage-group { margin-bottom: 18px; }
.crm-lead-stage-group:last-child { margin-bottom: 0; }
.crm-lead-stage-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #3f6df0; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 2px solid #eef0f6;
}

/* ---------- Aktivitetslogg (kunddialoger — delas mellan kunddetaljer och leads) ---------- */
.crm-activity-panel { background: #f9fafc; border: 1px solid #eef0f6; border-radius: 10px; padding: 14px 16px; margin: -6px 0 14px; }
.crm-activity-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #9aa3b5; margin: 0 0 8px; }
.crm-activity-timeline { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 240px; overflow-y: auto; }
.crm-activity-item { font-size: 13px; padding: 8px 10px; background: #fff; border: 1px solid #eef0f6; border-radius: 8px; }
.crm-activity-type {
  display: inline-block; font-size: 11px; font-weight: 700; color: #3f6df0; text-transform: uppercase;
  letter-spacing: .02em; margin-right: 8px;
}
.crm-activity-text { color: #1a1f2b; }
.crm-activity-meta { display: block; font-size: 11px; color: #9aa3b5; margin-top: 3px; }
.crm-activity-form { display: flex; gap: 8px; align-items: center; }
.crm-activity-form select {
  font-size: 13px; padding: 7px 8px; border: 1px solid #e4e8f1; border-radius: 8px; background: #fff; flex: 0 0 auto;
}
.crm-activity-form input[type="text"] {
  flex: 1; font-size: 13px; padding: 7px 10px; border: 1px solid #e4e8f1; border-radius: 8px;
}

/* ---------- Kundbild / nyckeltal (organizations-admin.ejs, "Detaljer") ---------- */
.org-stats-panel {
  background: #f9fafc; border: 1px solid #eef0f6; border-radius: 10px;
  padding: 16px 18px; margin: -6px 0 14px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
}
.org-stat-item { display: flex; flex-direction: column; gap: 2px; }
.org-stat-value { font-size: 20px; font-weight: 800; color: #1a1f2b; }
.org-stat-label { font-size: 12px; color: #5b667a; }
.org-stat-item.org-stat-off .org-stat-value { color: #9aa3b5; }

@media (max-width: 720px) {
  .sidebar-nav { position: static; height: auto; width: 100%; flex-basis: auto; }
  .app-layout { flex-direction: column; }
  .app-main { padding: 22px 16px 60px; }
}

/* ---------- Planritning: bilduppladdning + manuellt uppritade ytor ---------- */
#floorPlanImageInput { width: 100%; }
.floorplan-canvas-wrap {
  position: relative; margin-top: 10px; border-radius: 10px;
  border: 1px solid #e4e8f1; background: #eef1fa; cursor: crosshair; line-height: 0;
}
.floorplan-canvas-wrap img { display: block; width: 100%; height: auto; border-radius: 10px; overflow: hidden; }
/* SVG:n får INTE klippas av wrappen längre (overflow:visible här, istället
   för på wrappen) — annars skulle namn-markörer som dras en bit UTANFÖR
   kartbilden (samma idé som .floor-plan-labels på skärmen, se display.css)
   försvinna i förhandsvisningen trots att de syns korrekt på riktiga
   skärmen. Hörn/pluppar (points/position) är fortfarande alltid 0–100 och
   syns alltså aldrig utanför bildens egna gränser i praktiken. */
.floorplan-canvas-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.floorplan-canvas-wrap.drawing { cursor: cell; }

.floorplan-expand-btn {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  background: rgba(18, 24, 38, 0.78); color: #fff; border: none; border-radius: 7px;
  padding: 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.4;
}
.floorplan-expand-btn:hover { background: rgba(18, 24, 38, 0.92); }

/* Inuti den förstorade modalen (se nedan) storleksätts wrappen EXAKT till
   bildens egna proportioner av layoutExpandedFloorPlanCanvas() i
   room-editor.js — samma teknik som fixar letterboxen på själva skärmen. */
.floorplan-canvas-wrap.expanded { margin-top: 0; cursor: crosshair; }
.floorplan-canvas-wrap.expanded.drawing { cursor: cell; }
.floorplan-canvas-wrap.expanded img { height: 100%; object-fit: contain; }

.floorplan-zone-shape { fill: rgba(11, 95, 255, 0.14); stroke: #0b5fff; stroke-width: 1; }
.floorplan-zone-shape-label { font: 700 4.2px 'Segoe UI', sans-serif; fill: #0b5fff; text-anchor: middle; pointer-events: none; }
/* Dold yta (visible: false) i EDITORNS eget förhandsvisningsläge — streckad
   kontur, urtonad fyllning/text (grå i stället för blå) så admin tydligt ser
   vilka ytor som just nu INTE visas på skärmen, utan att behöva öppna
   "Redigera" på var och en. Själva skärmen (display.js) ritar inte ut dessa
   ytor alls — det här är bara en admin-visuell påminnelse. */
.floorplan-zone-shape-hidden { fill: rgba(140, 146, 163, 0.1); stroke: #8c92a3; stroke-dasharray: 2 1.5; }
.floorplan-zone-shape-label-hidden { fill: #8c92a3; }
.floorplan-draw-shape { fill: rgba(31, 209, 192, 0.2); stroke: #1fd1c0; stroke-width: 1; stroke-dasharray: 2 1.5; }
.floorplan-draw-vertex { fill: #fff; stroke: #0b5fff; stroke-width: 1.2; }

/* Omformning av en REDAN sparad yta (klicka "Redigera") — orange ton skiljer
   tydligt ut den från sparade ytor (blått) och en helt ny yta som ritas (teal). */
.floorplan-reshape-shape { fill: rgba(240, 149, 74, 0.16); stroke: #f0954a; stroke-width: 1; stroke-dasharray: 2 1.5; }
.floorplan-reshape-vertex { fill: #fff; stroke: #f0954a; stroke-width: 1.4; cursor: grab; }
.floorplan-reshape-vertex:active { cursor: grabbing; }
.floorplan-reshape-midpoint { fill: rgba(240, 149, 74, 0.5); stroke: #f0954a; stroke-width: 0.8; cursor: copy; }
.floorplan-reshape-midpoint:hover { fill: rgba(240, 149, 74, 0.85); }
/* Textmarkör (gul diamant — medvetet en annan färg/form än hörnens orangea
   cirklar, så den tydligt syns som en EGEN, fristående handtagstyp) som
   flyttar bara mötesrummets NAMN (zone.labelX/labelY), oberoende av formen. */
.floorplan-reshape-label-handle { fill: #ffd84d; stroke: #8a6d00; stroke-width: 1; cursor: grab; }
.floorplan-reshape-label-handle:hover { fill: #ffe98a; }
.floorplan-reshape-label-handle:active { cursor: grabbing; }

/* Kontor-markörer i editorn — mycket enklare än mötesrummens polygon, bara
   en prick: .floorplan-office-pin (sparad, inte under redigering, samma
   orange-neutrala ton som övriga sparade objekt i editorn), .floorplan-
   office-pin-active (just NU under "Redigera" — orange, draggbar, samma
   ton som mötesrummens reshape-läge för konsekvens), .floorplan-office-
   pending (en NYSS klickad men ÄNNU INTE sparad punkt — teal, matchar
   samma ton som en ny mötesrumspolygon under ritning). */
.floorplan-office-pin { fill: #0b5fff; stroke: #fff; stroke-width: 1.2; }
.floorplan-office-pin-active { fill: #f0954a; stroke: #fff; stroke-width: 1.4; cursor: grab; }
.floorplan-office-pin-active:active { cursor: grabbing; }
.floorplan-office-pending { fill: #1fd1c0; stroke: #fff; stroke-width: 1.4; cursor: grab; }
.floorplan-office-pending:active { cursor: grabbing; }
/* Siffran i kontorspluppen — vit, så den syns mot ALLA tre pluppfärgerna
   ovan (blå/orange/teal). Admins nya design: kontor visar bara ett nummer
   på kartan, aldrig namnet eller en statusfärg (se display.js/display.css
   för hur namnet+statusen istället hamnar i listan bredvid på skärmen). */
.floorplan-office-pin-number { font: 800 4.6px 'Segoe UI', sans-serif; fill: #fff; text-anchor: middle; pointer-events: none; }
.floorplan-office-pin-number.floorplan-zone-shape-label-hidden { fill: #e4e7ef; }

.floorplan-toolbar { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }

.floorplan-zone-form {
  margin-top: 12px; padding: 12px; border: 1px solid #e4e8f1; border-radius: 10px; background: #f8f9fc;
}
.floorplan-zone-form label {
  display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #3a4256; margin-bottom: 10px;
}
.floorplan-zone-form input {
  font: inherit; padding: 7px 9px; border: 1px solid #d7dbe6; border-radius: 7px; font-weight: 400;
}
.floorplan-zone-kind-toggle {
  display: flex; gap: 16px; margin-bottom: 10px;
}
.floorplan-zone-kind-option {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px; color: #3a4256; cursor: pointer;
}
.floorplan-zone-kind-option input { width: auto; padding: 0; }

/* Ersätter den gamla Mötesrum/Kontor-radioknappen i formuläret — typen
   bestäms numera av VILKEN interaktion som startade flödet ("+ Rita nytt
   mötesrum" vs "+ Lägg till kontor"), inte ett val admin gör i formuläret,
   så den visas bara som en upplyst, orörlig badge (se setFormKind i
   floorplan-editor.js). */
.floorplan-zone-form-kind-badge {
  display: inline-block; margin-bottom: 10px; padding: 3px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.floorplan-zone-form-kind-badge.room { background: #e8f0ff; color: #0b5fff; }
.floorplan-zone-form-kind-badge.office { background: #fdeee0; color: #c2650c; }

/* Rad ovanför formuläret: Mötesrum/Kontor-badgen + (bara för Kontor) en
   extra rund "Nr"-förhandstitt som visar vilket nummer kontoret HAR (vid
   redigering) eller KOMMER FÅ (nytt, osparat) på kartan/i listan — rent
   informativt, aldrig redigerbart (se computeOfficeNumberMap i
   floorplan-editor.js — numret är alltid en beräknad löpordning, inget
   admin väljer). */
.floorplan-zone-form-header-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.floorplan-zone-form-header-row .floorplan-zone-form-kind-badge { margin-bottom: 0; }
.floorplan-zone-number-badge {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: #0b5fff; color: #fff; font-size: 12px; font-weight: 800; flex: 0 0 auto;
}

/* Kontor: namnet genereras automatiskt från e-postadressen (admins
   uttryckliga önskemål) — visas som en read-only "pill" istället för ett
   fritt textfält, med en penna för att vid behov skriva ett eget namn
   (floorPlanZoneNameEditBtn togglar tillbaka till det vanliga fältet ovan,
   se floorplan-editor.js). */
.floorplan-zone-name-auto-row {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;
}
.floorplan-zone-name-auto-label { font-size: 13px; font-weight: 600; color: #3a4256; }
.floorplan-zone-name-auto-pill {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #d7dbe6; border-radius: 7px;
  background: #f8f9fc;
}
.floorplan-zone-name-auto-text { font-weight: 700; font-size: 14px; color: #1b2030; flex: 1; min-width: 0; }
.floorplan-zone-name-edit-btn {
  background: none; border: none; color: #8891a6; cursor: pointer; font-size: 14px; padding: 2px 4px; flex: 0 0 auto;
}
.floorplan-zone-name-edit-btn:hover { color: #0b5fff; }

/* Textstorleksreglaget (zone.fontScale, 50–200%, 100% = automatiskt förval)
   — gemensamt för Mötesrum och Kontor. */
.floorplan-zone-fontscale-row {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 10px;
  font-weight: 600; font-size: 13px; color: #3a4256; margin-bottom: 10px;
}
/* Vinkel-raden ska kunna döljas helt för Kontor (inget namn kvar på kartan
   att snedställa, se setFormKind i floorplan-editor.js) — måste slå igenom
   den generella !important ovan. */
#floorPlanZoneRotationRow[style*="display: none"] { display: none !important; }
/* Textstorlek — tre fasta lägen (Liten/Mellan/Stor) som ett segmenterat
   knappval, istället för ett procent-reglage. Samma visuella språk som
   Mötesrum/Kontor-badgen (rundade, tydligt avgränsade alternativ). */
.floorplan-fontsize-toggle { display: flex; gap: 0; border: 1.5px solid #d8dde8; border-radius: 8px; overflow: hidden; }
.floorplan-fontsize-option {
  border: none; background: #fff; color: #3a4256; font-weight: 600; font-size: 13px;
  padding: 6px 14px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.floorplan-fontsize-option + .floorplan-fontsize-option { border-left: 1.5px solid #d8dde8; }
.floorplan-fontsize-option:hover { background: #f1f4fa; }
.floorplan-fontsize-option.active { background: #0b5fff; color: #fff; }

/* Vinkel på namnet (zone.labelRotation, -90° till 90°) — ett vanligt
   reglage räcker bra här eftersom vinkeln är ett KONTINUERLIGT värde (till
   skillnad från textstorlekens tre fasta lägen), admin behöver kunna hitta
   EXAKT rätt lutning för att matcha en isometrisk planritnings väggar. */
.floorplan-zone-fontscale-row input[type="range"] { flex: 1; width: auto; padding: 0; }
.floorplan-zone-fontscale-row span { font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }

/* Enkel ja/nej-kryssruta: "Visa ytan på skärmen" — avmarkerad = ytan sparas
   fortfarande (namn, person/kalender, form) men visas ALDRIG på själva
   signage-skärmen (se display.js: zones filtreras bort innan rendering).
   Samma rad-layout som Mötesrum/Kontor-väljaren ovan, bara en enda kryssruta. */
.floorplan-zone-visible-toggle {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px; color: #3a4256; cursor: pointer; margin-bottom: 10px;
}
.floorplan-zone-visible-toggle input { width: auto; padding: 0; }

.floorplan-zone-list { margin-top: 12px; }
.floorplan-zone-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #eef0f6;
}
.floorplan-zone-row:last-child { border-bottom: none; }
.floorplan-zone-row.reshaping { background: #fff6ec; border-radius: 8px; box-shadow: inset 0 0 0 1px #f8d9b8; }
.floorplan-zone-swatch { width: 14px; height: 14px; border-radius: 4px; background: #0b5fff; flex: 0 0 auto; }
.floorplan-zone-row.reshaping .floorplan-zone-swatch { background: #f0954a; }
/* Kontor-raden visar numret (samma som pinnen på kartan/riktiga skärmen)
   istället för den fyrkantiga färgplatta Mötesrum fortfarande använder —
   admins uttryckliga önskemål: "bara siffran och namnet som skall synas". */
.floorplan-zone-number-chip {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: #0b5fff; color: #fff; font-size: 11.5px; font-weight: 800; flex: 0 0 auto;
}
.floorplan-zone-number-chip.hidden { background: #c7cce0; color: #fff; }
.floorplan-zone-main { flex: 1; min-width: 0; }
.floorplan-zone-name { font-weight: 700; font-size: 13.5px; }
.floorplan-zone-kind-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #eef0f6; color: #656e85; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  vertical-align: middle;
}
/* Visas i zonlistan (admin-vy, se renderFloorPlanZones) för en yta vars
   "Visa ytan på skärmen"-kryssruta är avmarkerad — ytan existerar och är
   sparad som vanligt, den bara ritas aldrig ut på signage-skärmen. */
.floorplan-zone-hidden-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #fdecec; color: #c23b3b; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  vertical-align: middle;
}
.floorplan-zone-meta { font-size: 12px; color: #8891a6; }
.floorplan-zone-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* ---------- Modal: förstorad rityta för Planritning ----------
   Reparenterar DEN RIKTIGA canvasen + kontrollerna hit (se room-editor.js
   openFloorPlanModal/closeFloorPlanModal) — ingen egen kopia/duplicerad
   ritlogik, bara ett mycket större utrymme att klicka exakt i. */
.floorplan-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,15,30,0.55);
  display: none; align-items: center; justify-content: center; z-index: 300; padding: 24px;
}
.floorplan-modal-backdrop.open { display: flex; }
.floorplan-modal-box {
  background: #fff; border-radius: 16px; width: min(1400px, 94vw); height: min(900px, 90vh);
  display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(10,15,30,0.4); overflow: hidden;
}
.floorplan-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid #eceff5; flex: 0 0 auto;
}
.floorplan-modal-header h3 { margin: 0 0 4px; font-size: 16px; }
.floorplan-modal-header p { margin: 0; font-size: 12.5px; color: #5b667a; }
.floorplan-modal-close {
  border: none; background: #f3f5fa; padding: 8px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 600; cursor: pointer; color: #5a6072; flex: 0 0 auto; white-space: nowrap;
}
.floorplan-modal-close:hover { background: #e4e8f1; color: #1a1f2b; }
.floorplan-modal-body {
  flex: 1; min-height: 0; display: flex; gap: 22px; padding: 18px 22px 22px; overflow: hidden;
}
.floorplan-modal-canvas-col {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #0c1120; border-radius: 14px; overflow: hidden;
}
.floorplan-modal-side-col {
  width: 320px; flex: 0 0 320px; overflow-y: auto; padding-right: 2px;
}
@media (max-width: 860px) {
  .floorplan-modal-body { flex-direction: column; }
  .floorplan-modal-canvas-col { min-height: 260px; }
  .floorplan-modal-side-col { width: 100%; flex: 0 0 auto; }
}