/* ============================================================
   LAYOUT: CSS-variabler for høyder
   Endre --header-height her, og alle offseter oppdateres.
   ============================================================ */
:root {
  --header-height: 40px;
  --admin-tabbar-height: 42px;
}

/* appContainer starter under den faste headeren */
#appContainer {
  padding-top: var(--header-height);
}

/* Login-siden er utenfor appContainer — ikke påvirket */

/* General Styles */
html, body {
  margin: 0;
  padding: 0;
}
* {
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
}

/* Login Page */
.loginPage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.loginContainer {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  text-align: center;
  max-width: 400px;
}
.loginTitle {
  font-size: 36px;
  font-family: 'Indie Flower', cursive;
  color: #4a85e9;
  margin-bottom: 10px;
}
.loginSubtitle {
  color: #666;
  margin-bottom: 30px;
}
.loginButton {
  background: #4285f4;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
.loginButton:hover {
  background: #357ae8;
}
.loginError {
  color: red;
  margin-top: 15px;
}

/* Hourglass Loader */
.hourglass {
  position: fixed;
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  border: 16px solid #f3f3f3;
  border-top: 16px solid #FF9900;
  border-bottom: 16px solid #4A85E9;
  border-radius: 50%;
  animation: spin 3s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Header Styles */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: url('https://lh3.googleusercontent.com/g-kWMwn7bn7z7QfwUcqL4otLdZdu9ceALKJ8ogt6o_yub5T4Ss0DLbY7jAk8Q7X64TmwfZxEoctU8RjiECLMp3qPTFun_8k3Nn7FPSzo0i80nZD0yMXGbBSK0EYo5t8ixEl0-0mQ') no-repeat center / 100% 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 100;
}
.headerText {
  font-size: 28px;
  font-family: 'Indie Flower', cursive;
  text-shadow: 1px 0.2px 3px #4a85e9;
  color: #fff;
  margin-right: 30px;
  transform: translateY(2px);
}
.headerMenu {
  display: flex;
  gap: 6px;
}

/* Felles stil for alle header-knapper */
.headerMenu button {
  position: relative;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(150, 100, 255, 0.55);
  border: 1px solid rgba(180, 140, 255, 0.85);
  border-radius: 20px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 8px rgba(0,0,0,0.3);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}

.headerMenu button:hover:not(:disabled) {
  background: rgba(130, 70, 255, 0.78);
  border-color: rgba(180, 140, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

.headerMenu button:active:not(:disabled) {
  transform: translateY(0px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.headerMenu button:disabled {
  opacity: 0.38;
  cursor: default;
}
.headerUsername {
  margin-left: auto;
  font-size: 15px;
}

/* ITO-logg (vises i Mentor-modulens ITO-logg-modal) */
.ito-logg-seksjon {
  padding: 25px 20px 15px;
  border: 1px solid #000;
  border-radius: 15px;
  position: relative;
}

.ito-logg-tittel {
  position: absolute;
  top: -0.8em;
  left: 15px;
  background-color: white;
  padding: 0 5px;
  font-weight: bold;
}

.ito-logg-tom {
  color: #888;
  font-style: italic;
  margin: 0;
}

.ito-logg-tabell {
  width: 100%;
  border-collapse: collapse;
}

.ito-logg-tabell th,
.ito-logg-tabell td {
  border: 1px solid #ddd;
  padding: 6px 10px;
  text-align: left;
}

.ito-logg-tabell thead tr {
  background: #f5f5f5;
  font-weight: 600;
}

.ito-logg-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.ito-logg-th-sort:hover {
  background: #ececec;
}

.ito-logg-tabell tbody tr:hover {
  background: #fafafa;
}

/* Effort Circles (brukes av Mentor-modulens innsatsgraf-modal — sirkel-rad
   under grafen for siste 16 oppgaver). */
.circle {
  width: 46px;
  height: 46px;
  margin: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #000;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}
.green { background-color: #90ee90; }
.orange { background-color: #ffd580; }
.red { background-color: #f08080; }

/* Subject Page */
.subjectPage {
  position: absolute;
  top: var(--header-height);
}
.subjectMenuBox {
  position: fixed;
  top: var(--header-height);
  width: 100%;
  height: 60px;
  background: white;
  border-bottom: 1px solid grey;
  z-index: 50;
}
.subjectsList {
  position: relative;
  top: 20px;
}
.subjectContent {
  position: relative;
  top: 70px;
}
#subjectTable {
  table-layout: auto;
  border-collapse: collapse;
  margin-top: 1em;
  overflow-x: scroll;
}
#subjectTable td {
  border: 1px solid black;
  padding: 8px;
  word-wrap: break-word;
}
#subjectTable th {
  border: 1px solid black;
  padding: 8px;
  word-wrap: break-word;
  background-color: #f2f2f2;
  position: sticky;
  top: 100px;
  left: 0px;
  z-index: 2;
}
#subjectTable th:first-child,
#subjectTable td:first-child {
  text-align: left;
  padding-left: 4px;
}

/* Assignment Page */
.assignmentPage {
  position: absolute;
  top: var(--header-height);
}
.assignmentMenuBox {
  position: fixed;
  top: var(--header-height);
  width: 100%;
  height: 60px;
  background: white;
  border-bottom: 1px solid grey;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
}
.assignmentsList, .assignmentSaveButton, .assignmentCancelButton {
  position: relative;
  top: 0;
  flex-shrink: 0;
}
.assignmentSaveButton, .assignmentCancelButton {
  left: 20px;
}
.assignmentContent {
  position: relative;
  top: 70px;
}
.assignmentFloatingBox {
  position: fixed;
  top: 50px;
  padding: 10px 15px;
  border-radius: 15px;
  right: 30px;
  width: 130px;
  height: 90px;
  background-color: LightGray;
  border: 1px solid black;
  z-index: 9999;
}
.assignment {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  padding: 10px;
  background-color: lightgray;
  border-radius: 25px;
  width: 400px;
}
.assignmentNameContainer {
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
#assignmentsTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 1em;
}
#assignmentsTable th,
#assignmentsTable td {
  border: 1px solid black;
  padding: 8px;
  word-wrap: break-word;
}
#assignmentsTable th {
  background-color: #f2f2f2;
}
#assignmentsTable thead {
  position: sticky;
  top: 100px;
  z-index: 1;
}

/* Tooltip Styling */
.assignment-circle {
  position: relative;
  cursor: default;
}
.assignment-circle::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease-in-out;
  background-color: #ffd580;
  color: black;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9em;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.assignment-circle[data-tooltip]:not([data-tooltip=""]) {
  border: 2px dashed black !important;
}
.assignment-circle:hover[data-tooltip]:not([data-tooltip=""])::after {
  display: block;
  opacity: 1;
}
.assignment-circle[data-tooltip=""]::after {
  display: none !important;
}

/* === Malepensel for fritak / utsatt frist === */
.paint-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 8px 0 6px 0;
  padding: 8px 10px;
  background: #f7f4ff;
  border: 1px solid #d6c8f3;
  border-radius: 6px;
}
.paint-btn {
  padding: 6px 12px;
  border: 1px solid #b39ddb;
  border-radius: 18px;
  background: #fff;
  color: #4527a0;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.paint-btn:hover:not(:disabled) {
  background: #ede7f6;
}
.paint-btn-aktiv {
  background: #7c4dff !important;
  color: #fff !important;
  border-color: #5e35b1 !important;
}
.paint-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.paint-komm-label {
  font-size: 12px;
  color: #444;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.paint-komm-input {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  width: 240px;
  max-width: 100%;
}
.paint-utsatt-input {
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
}
/* Pensel-cursor over hele siden når en pensel er aktiv. Aktiveres ved klikk på Fritatt/Utsatt frist-knapp.
   Lilla pensel for fritak (matcher #D6A6FF-fargen på fritatte oppgaver), blå for utsatt frist.
   Hot-spot på spissen (2, 26). Bruker '*' slik at cursor også gjelder elementer med egen cursor-stil. */
body.pensel-aktiv-frita,
body.pensel-aktiv-frita * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M22 2L26 6L11 21L7 17Z' fill='%237c4dff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/><path d='M7 17L11 21L8 24L4 20Z' fill='%23aaaaaa' stroke='%23000' stroke-width='1' stroke-linejoin='round'/><path d='M4 20L8 24L2 26Z' fill='%23ffd54f' stroke='%23000' stroke-width='1' stroke-linejoin='round'/></svg>") 2 26, crosshair !important;
}
body.pensel-aktiv-utsatt,
body.pensel-aktiv-utsatt * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M22 2L26 6L11 21L7 17Z' fill='%232196f3' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/><path d='M7 17L11 21L8 24L4 20Z' fill='%23aaaaaa' stroke='%23000' stroke-width='1' stroke-linejoin='round'/><path d='M4 20L8 24L2 26Z' fill='%23ffd54f' stroke='%23000' stroke-width='1' stroke-linejoin='round'/></svg>") 2 26, crosshair !important;
}

/* Skjemafelt og knapper får sin standard-cursor under pensel-modus
   (text for input/textarea, pointer for button/select/dato-velger).
   Pensel-cursor signaliserer "klikk for å male oppgavesirkel" — ikke for å skrive eller bytte modus. */
body.pensel-aktiv-frita input,
body.pensel-aktiv-frita textarea,
body.pensel-aktiv-frita button,
body.pensel-aktiv-frita select,
body.pensel-aktiv-frita label,
body.pensel-aktiv-utsatt input,
body.pensel-aktiv-utsatt textarea,
body.pensel-aktiv-utsatt button,
body.pensel-aktiv-utsatt select,
body.pensel-aktiv-utsatt label {
  cursor: auto !important;
}
body.pensel-aktiv-frita button,
body.pensel-aktiv-frita input[type="date"],
body.pensel-aktiv-frita input[type="checkbox"],
body.pensel-aktiv-frita input[type="radio"],
body.pensel-aktiv-utsatt button,
body.pensel-aktiv-utsatt input[type="date"],
body.pensel-aktiv-utsatt input[type="checkbox"],
body.pensel-aktiv-utsatt input[type="radio"] {
  cursor: pointer !important;
}
.fritattLabel {
  margin-left: 10px;
}
.internalNoteTextarea {
  display: none;
  margin-top: 10px;
}

/* Radio Buttons */
.radio-button {
  appearance: none;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
  background-color: #fff;
  text-align: left;
  width: 95px;
}
.radio-button h3 {
  font-weight: bold;
  margin: 0;
}
.radio-button span {
  display: block;
  margin-top: 2px;
}
.light-red.active {
  background-color: lightcoral;
}
.light-orange.active {
  background-color: #FFD580;
}
.light-green.active {
  background-color: lightgreen;
}
.light-green.active[data-exempted="true"],
.light-orange.active[data-exempted="true"],
.light-red.active[data-exempted="true"] {
  background-color: #D6A6FF;
  opacity: 0.75;
}

/* Compact view toggle */
.compactViewToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  color: #555;
}

/* Compact student cards */
.compact-card:last-child {
  margin-bottom: 80px;
}
.compact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: LightGray;
  border-radius: 10px;
  padding: 6px 12px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.compact-priority-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  pointer-events: none;
}
.compact-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.compact-name {
  font-weight: bold;
  font-size: 13px;
  min-width: 90px;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.compact-buttons {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.compact-btn {
  width: auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.3;
  border-radius: 4px;
}
.compact-btn h3 {
  font-size: 13px;
  font-weight: normal;
  display: inline;
}
.compact-btn span {
  display: inline;
  margin-top: 0;
  font-size: 13px;
}
.card-toggles {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 13px;
}
.card-toggles label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #aaa;
}
.card-toggles label:has(input:checked) {
  color: #000;
}
.card-toggles input[type="checkbox"] {
  display: none;
}
.compact-checkboxes {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  font-size: 13px;
  white-space: nowrap;
}
.compact-checkboxes label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #aaa;
}
.compact-checkboxes label:has(input:checked) {
  color: #000;
}
.compact-checkboxes input[type="checkbox"] {
  display: none;
}
.compact-note {
  flex: 1;
  min-width: 120px;
  width: 80ch;
  max-width: 100%;
  resize: none;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Miscellaneous */
[list]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* Statistics */
.statisticsPage {
  position: absolute;
  top: var(--header-height);
  padding: 0 20px 40px 20px;
  box-sizing: border-box;
}
.statistics-table {
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 13px;
  margin-top: 8px;
}
.statistics-table th,
.statistics-table td {
  padding: 7px 12px;
  text-align: left;
  border: none;
  border-bottom: 1px solid #eee;
}
.statistics-table th.right-align,
.statistics-table td.right-align {
  text-align: right;
}
.statistics-table thead tr {
  background-color: #f7f7f7;
  border-bottom: 2px solid #ddd;
}
.statistics-table thead th {
  position: sticky;
  top: var(--header-height);
  z-index: 2;
  background-color: #f7f7f7;
}
.statistics-table th {
  font-weight: 600;
  color: #444;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.statistics-table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}
.statistics-table tbody tr:hover {
  background-color: #fafafa;
}
.statistics-table tbody tr:last-child td {
  border-bottom: none;
  font-weight: 600;
  border-top: 2px solid #ddd;
  background-color: #f7f7f7;
}
.statistics-table td {
  color: #333;
  line-height: 1.5;
}
.statistics-negative {
  color: #c62828;
  font-weight: 600;
}
.statistics-positive {
  color: #2e7d32;
  font-weight: 600;
}

/* AI-oppsett */
.chat-container {
  max-width: 800px;
  margin: 70px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  overflow: hidden;
}
.chat-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  text-align: center;
}
.chat-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
.api-key-section {
  display: none;
}
.chat-messages {
  height: 400px;
  overflow-y: auto;
  padding: 20px;
  background: white;
}
.message {
  margin-bottom: 15px;
  padding: 12px 16px;
  border-radius: 18px;
  max-width: 80%;
  word-wrap: break-word;
}
.user-message {
  background: #667eea;
  color: white;
  margin-left: auto;
  text-align: right;
}
.claude-message {
  background: #f1f3f4;
  color: #333;
  margin-right: auto;
}
.error-message {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
  margin-right: auto;
}
.typing-indicator {
  background: #f1f3f4;
  color: #666;
  margin-right: auto;
  font-style: italic;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.chat-input-container {
  padding: 20px;
  background: white;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 10px;
}
.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #dee2e6;
  border-radius: 25px;
  font-size: 16px;
  outline: none;
}
.chat-input:focus {
  border-color: #667eea;
}
.send-button {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.2s;
}
.send-button:hover {
  background: #5a6fd8;
}
.send-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.status-message {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 10px;
}

/* Grunnpakka notatfelt */
.gp-notat-input::placeholder {
  color: #bbb;
}

/* Raskere tooltip for grunnpakka-oversikt */
[title] {
  position: relative;
}

/* Grunnpakka oversikt — rask custom tooltip */
.gp-tooltip-wrap { position: relative; }
.gp-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.gp-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}
.gp-tooltip-wrap:hover .gp-tooltip {
  display: block;
}
/* ============================================================
   UNDERVISNINGSSIDEN
   ============================================================ */

#undervisningPage {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background: #f5f5f5;
}

#undervisningContent {
  padding: 16px;
}

/* --- Økt-velger --- */
.undervisning-okt-panel {
  --uv-elev-s: 56px;
  background: white;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.undervisning-okt-panel h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.uv-kombi-kolonner {
  display: flex;
  gap: 24px;
}
.uv-kombi-venstre {
  flex: 1;
  min-width: 0;
}
.uv-kombi-hoyre {
  flex: 1;
  min-width: 0;
  border-left: 1px solid #eee;
  padding-left: 24px;
}
@media (max-width: 600px) {
  .uv-kombi-kolonner { flex-direction: column; }
  .uv-kombi-hoyre { border-left: none; padding-left: 0; border-top: 1px solid #eee; padding-top: 16px; }
}
.undervisning-kalender-hendelser {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.undervisning-hendelse-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e0e0e0;
  background: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  color: #555;
}
.undervisning-hendelse-btn:hover {
  border-color: #7c4dff;
  background: #f3eeff;
  color: #7c4dff;
}
.undervisning-hendelse-btn.valgt {
  border-color: #7c4dff;
  background: #f3eeff;
  color: #7c4dff;
  font-weight: 600;
}
.undervisning-hendelse-tid {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}
.undervisning-hendelse-tittel {
  flex: 1;
  color: #333;
}
/* Rotasjonsøkt — en rad per tidsrom, knapper for hvert fag */
.uv-rotasjon-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.uv-rotasjon-tid {
  font-size: 13px;
  color: #888;
  min-width: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
.uv-rotasjon-rad .undervisning-hendelse-btn {
  flex: none;
}

/* --- Gruppe-velger --- */
.undervisning-grupper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.undervisning-gruppe-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e0e0e0;
  background: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  color: #555;
}
.undervisning-gruppe-chip.valgt {
  border-color: #7c4dff;
  background: #f3eeff;
  color: #7c4dff;
  font-weight: 600;
}

/* --- Oppmøte-grid --- */
.undervisning-oppmote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.undervisning-okt-info {
  font-size: 14px;
  color: #555;
  font-weight: 600;
}
.undervisning-lukk-btn {
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  background: #7c4dff;
  color: white;
  font-size: 13px;
  cursor: pointer;
}
.undervisning-lukk-btn:hover { background: #6a3de8; }

.undervisning-elev-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Elevkort i oppmøte */
.uv-elev-kort {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--uv-elev-s) + 24px);
  cursor: pointer;
  user-select: none;
  position: relative;
  border-radius: 10px;
  transition: background 0.1s;
}
.uv-elev-kort.uv-drag-over {
  background: #ede7ff;
  outline: 2px solid #7c4dff;
  outline-offset: 2px;
}
.uv-elev-bilde-wrap {
  position: relative;
  width: var(--uv-elev-s);
  height: var(--uv-elev-s);
  margin-bottom: 4px;
}
.uv-elev-bilde {
  width: var(--uv-elev-s);
  height: var(--uv-elev-s);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  display: block;
  border: 3px solid transparent;
  box-sizing: border-box;
}
/* Tidligere i dag — liten fylt prikk (nedre venstre) */
.uv-elev-bilde-wrap.historikk-gronn::before   { content:''; position:absolute; bottom:0; left:0; width:12px; height:12px; border-radius:50%; background:rgba(76,175,80,0.9); z-index:2; }
.uv-elev-bilde-wrap.historikk-rod::before     { content:''; position:absolute; bottom:0; left:0; width:12px; height:12px; border-radius:50%; background:rgba(244,67,54,0.9); z-index:2; }
.uv-elev-bilde-wrap.historikk-bla::before     { content:''; position:absolute; bottom:0; left:0; width:12px; height:12px; border-radius:50%; background:rgba(33,150,243,0.9); z-index:2; }
.uv-elev-bilde-wrap.historikk-oransje::before { content:''; position:absolute; bottom:0; left:0; width:12px; height:12px; border-radius:50%; background:rgba(33,150,243,0.9); z-index:2; }

/* Skjul historikk-prikk når eleven har status i inneværende økt */
.uv-elev-bilde-wrap.uv-dagsfravaer-rod::before { content:''; position:absolute; bottom:0; left:0; width:12px; height:12px; border-radius:50%; background:rgba(244,67,54,0.9); z-index:2; }
.uv-elev-bilde-wrap:has(.til-stede)::before,
.uv-elev-bilde-wrap:has(.fraværende)::before { display: none; }

/* Inneværende økt — skarp ytre ring */
.uv-elev-bilde-wrap:has(.til-stede)::after  { content:''; position:absolute; inset:-4px; border-radius:50%; border:4px solid #4caf50; pointer-events:none; }
.uv-elev-bilde-wrap:has(.fraværende)::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:4px solid #f44336; pointer-events:none; }
/* Gråtoner på alle elever som ikke er bekreftet til stede */
.uv-elev-bilde { filter: grayscale(100%); }
.uv-elev-bilde.til-stede { filter: none; }

/* Medlærer-bilder i chip-stripen */
.uv-medlaerer-bilde {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  cursor: pointer;
}
.uv-medlaerer-bilde.avsluttet {
  filter: grayscale(100%);
  opacity: 0.7;
}

.uv-elev-navn {
  font-size: 11px;
  text-align: center;
  color: #333;
  line-height: 1.2;
  word-break: break-word;
  width: 100%;
}
.uv-elev-navn-link {
  background: none;
  border: none;
  font-size: 12px;
  text-align: center;
  color: rgba(0,0,0,0.70);
  cursor: pointer;
  padding: 0;
  line-height: 1.2;
  width: 100%;
  word-break: break-word;
}

/* Anmerkning-badge */
.uv-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ff9800;
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-sizing: border-box;
  line-height: 1;
  z-index: 1;
}
.uv-badge.annen-laerer {
  background: #e65100;
}

/* ====== Auditoriet amfi-grid ====== */

/* Sete-størrelse styres av CSS-variabelen --amfi-s (settes av JS, default 72px) */
.uv-amfi-grid {
  --amfi-s: 72px;
  display: grid;
  grid-template-columns: repeat(13, var(--amfi-s));
  gap: 4px;
  width: fit-content;
  margin: 0 auto 4px;
}

.uv-sete {
  width: var(--amfi-s);
  height: calc(var(--amfi-s) + 6px);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 2px 1px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

.uv-sete img.uv-elev-bilde {
  /* Bildet fyller setet minus plass til navn (~17px) og padding (~4px) */
  width: calc(var(--amfi-s) - 21px);
  height: calc(var(--amfi-s) - 21px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  border: 3px solid transparent;
  display: block;
  flex-shrink: 0;
}

/* Amfi-sete: wrap tilpasses bildets størrelse */
.uv-sete .uv-elev-bilde-wrap {
  width: calc(var(--amfi-s) - 21px);
  height: calc(var(--amfi-s) - 21px);
}

.uv-sete-navn {
  font-size: 11px;
  line-height: 1.2;
  width: calc(var(--amfi-s) + 4px);
  overflow: visible;
  white-space: nowrap;
  color: rgba(0,0,0,0.70);
  margin-top: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: center;
}

.uv-sete-gang {
  width: var(--amfi-s);
  height: var(--amfi-s);
  /* Visuelt smalere gang — gjennomsiktig med tynn midtstrek */
  background: transparent;
  position: relative;
}
.uv-sete-gang::after {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px;
  left: 50%; transform: translateX(-50%);
  width: 2px;
  background: rgba(0,0,0,0.08);
  border-radius: 1px;
}

.uv-sete-tom {
  background: transparent !important;
  border: 1.5px dashed rgba(0,0,0,0.15);
  cursor: default;
}

.uv-amfi-scene {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 10px;
  color: #aaa;
  letter-spacing: 0.12em;
  padding: 6px 0 2px;
}

/* Modulfarger */
.modul-rod    { background: #fce4ec; }
.modul-oransje{ background: #fff3e0; }
.modul-turkis { background: #e0f7fa; }
.modul-gronn  { background: #e8f5e9; }

/* Drag-over i amfi-grid og editor-seter */
.uv-sete.uv-drag-over {
  outline: 3px solid #7c4dff;
  background: #f3eeff !important;
}

/* Drag-over i Torget oppmøte-visning */
.uv-bord-elevkort.uv-drag-over {
  background: #ede7ff;
  outline: 2px solid #7c4dff;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Drag-over i Torget bord-editor */
.uv-bord-boks.uv-drag-over {
  outline: 2px solid #7c4dff;
  background: #f3eeff !important;
}

#sp-ikkeplassert-drop.uv-drag-over,
#bp-ikkeplassert-drop.uv-drag-over {
  outline: 2px dashed #7c4dff;
  outline-offset: 4px;
  border-radius: 6px;
  background: rgba(124, 77, 255, 0.04);
}

/* Tilfeldige grupper — faner */
.uv-gruppe-faner {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 2px solid #eee;
}
.uv-gruppe-fane {
  font-size: 13px;
  font-weight: 600;
  color: #888;
  background: none;
  border: none;
  padding: 6px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.uv-gruppe-fane:hover { color: #555; }
.uv-gruppe-fane.aktiv {
  color: #7c4dff;
  border-bottom-color: #7c4dff;
}

/* Tilfeldige grupper — verktøylinje */
.uv-gruppe-verktoy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.uv-gruppe-btn {
  font-size: 12px;
  color: #7c4dff;
  background: none;
  border: 1.5px solid #d4b8ff;
  border-radius: 16px;
  padding: 0 12px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
}
.uv-gruppe-btn-flytt {
  min-width: 110px;
  text-align: center;
}
.uv-gruppe-btn:hover {
  background: #f3eeff;
}

/* Stepper for antall grupper */
.uv-gruppe-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid #d4b8ff;
  border-radius: 16px;
  overflow: hidden;
  height: 28px;
}
.uv-gruppe-stepper-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: #7c4dff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.uv-gruppe-stepper-btn:hover:not(:disabled) { background: #f3eeff; }
.uv-gruppe-stepper-btn:disabled { color: #ccc; cursor: default; }
.uv-gruppe-stepper-tall {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.uv-gruppe-draggable {
  cursor: grab;
}
.uv-gruppe-draggable:active {
  cursor: grabbing;
}
/* Overlay som dekker hele undervisningssiden i redigeringsmodus */
.uv-rediger-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 10;
  pointer-events: auto;
}
/* Løft gruppeboksene over overlayet */
#uv-tilfeldig-wrapper.rediger-aktiv {
  position: relative;
  z-index: 11;
  background: white;
  border-radius: 10px;
  padding: 12px;
  margin: -12px;
}
/* Rød «Ferdig»-knapp i redigeringsmodus */
.uv-gruppe-btn-ferdig {
  background: #e53935 !important;
  color: white !important;
  border-color: #e53935 !important;
}
.uv-gruppe-btn-ferdig:hover {
  background: #c62828 !important;
}

/* Editor-spesifikt — fast størrelse, ikke påvirket av slider */
.uv-sete-editor {
  height: 56px;
  width: 64px;
  justify-content: center;
  cursor: pointer;
}
.uv-amfi-grid.sp-editor-grid {
  --amfi-s: 64px;
  grid-template-columns: repeat(13, 64px);
}

.uv-sete-editor .uv-sete-editor-navn {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  padding: 2px;
  word-break: break-word;
  color: rgba(0,0,0,0.72);
}

.uv-sete-editor.uv-sete-tom {
  border: 1.5px dashed rgba(0,0,0,0.15);
  cursor: default;
}

.uv-sete-editor.uv-sete-tom.kan-plassere {
  border: 2px solid #7c4dff;
  cursor: pointer;
  background: #f3eeff !important;
}

.uv-sete-editor.uv-sete-valgt {
  outline: 3px solid #7c4dff;
}

/* Layout: anmerkningspanel (venstre) + okt-panel (høyre) som to separate bokser */
.uv-okt-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.uv-okt-layout > .undervisning-okt-panel {
  flex: 1;
  min-width: 0;
  margin-bottom: 16px;
}

/* Anmerkningspanel — vertikal sidekolonne */
.undervisning-chip-stripe {
  flex-shrink: 0;
  width: 220px;
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  position: sticky;
  top: var(--header-height, 40px);
}
.undervisning-chip-rad {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.undervisning-chip-rad .uv-chip { width: 100%; text-align: center; }
.uv-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #ccc;
  background: white;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 600;
  user-select: none;
}
.uv-chip:hover { background: #f3eeff; border-color: #7c4dff; color: #7c4dff; }
.uv-chip.aktiv {
  background: #7c4dff;
  border-color: #7c4dff;
  color: white;
}
.uv-chip.valgt-ufullstendig {
  background: #f3eeff;
  border-color: #c4a8ff;
  color: #7c4dff;
}
.uv-chip.inaktiv {
  border-color: #e0e0e0;
  color: #aaa;
  cursor: default;
}

/* Konfigurasjonspanel */
/* Kollaps-stripe for valgt økt */
.uv-kombi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.uv-kombi-header-pil { font-size: 11px; color: #9e7de0; }
.uv-kombi-innhold {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Topp i chip-stripen: medlærere + ℹ-knapp, så chip-kolonne under */
.uv-chip-topp-rad {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 8px;
}
.uv-chip-topp-hoyre {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: flex-end;
}

/* Kommentar-textarea — full bredde, auto-grow, skjult resize-håndtak */
#uv-chip-komm {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  line-height: 1.4;
}

/* Chip-konfig panel */
.uv-chip-konfig {
  margin-top: 6px;
  padding: 8px 10px;
  background: #f9f9f9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.uv-chip-konfig .uv-konfig-felt { width: 100%; }
.uv-konfig-felt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.uv-komm-historikk-valg:hover {
  background: #f5f0ff;
}
.uv-konfig-felt.graa { opacity: 0.35; pointer-events: none; }
.uv-konfig-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.uv-chip-konfig input[type="number"],
.uv-chip-konfig input[type="text"],
.uv-chip-konfig textarea {
  padding: 6px 10px;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  font-size: 13px;
}
.uv-chip-konfig input[type="number"]:focus,
.uv-chip-konfig input[type="text"]:focus,
.uv-chip-konfig textarea:focus {
  outline: none;
  border-color: #7c4dff;
}
.uv-chip-konfig-luft {
  background: none;
  border: none;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  margin-left: auto;
}
.uv-chip-konfig-valg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.uv-chip-konfig-valg-btn {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1.5px solid #e0e0e0;
  background: white;
  font-size: 12px;
  cursor: pointer;
}
.uv-chip-konfig-valg-btn.valgt {
  border-color: #7c4dff;
  background: #f3eeff;
  color: #7c4dff;
  font-weight: 600;
}

/* Oversiktspanel per elev */
.uv-elev-oversikt-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uv-elev-oversikt-boks {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  position: relative;
}
.uv-elev-oversikt-boks h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
}
.uv-anmerkning-rad {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.uv-anmerkning-rad:last-child { border-bottom: none; }
.uv-anmerkning-type { font-weight: 600; color: #333; }
.uv-anmerkning-meta { color: #888; font-size: 12px; }

/* Fag-popup modal */
.fag-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9990;
}
.fag-modal-boks {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9991;
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

/* «Nytt i Humanorama»-popup ved innlogging */
/* Update-overlay — vises når appVersion/larerapp endres i databasen.
   Z-index 10003 sikrer at den vinner over changelog-popup (10002),
   slette-bekreft (10001) og vedlikeholdsoverlay (10000). */
.update-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
}
.update-overlay-box {
  background-color: #fff;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  max-width: 360px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.update-overlay-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #222;
}
.update-overlay-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
}
.update-overlay-button {
  padding: 12px 32px;
  background-color: #7c4dff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.update-overlay-button:hover {
  background-color: #6a3fe0;
}

.changelog-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
}
.changelog-popup-boks {
  background: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  font-family: sans-serif;
}
.changelog-popup-boks h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  color: #333;
}
.changelog-popup-dato {
  font-size: 14px;
  color: #888;
  margin-bottom: 14px;
}
.changelog-popup-liste {
  margin: 0 0 20px 0;
  padding-left: 22px;
  color: #444;
  line-height: 1.6;
}
.changelog-popup-liste li { margin-bottom: 8px; }
.changelog-popup-ok {
  display: block;
  margin: 0 0 0 auto;
  background: #7c4dff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.changelog-popup-ok:hover { background: #6a3fe0; }

/* Torget — bordoppsett */
.uv-bord-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.uv-bord-boks {
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: calc(var(--uv-elev-s) * 2 + 16px);
  border: 1px solid rgba(0,0,0,0.12);
}
.uv-bord-elevkort {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--uv-elev-s);
}
.uv-bord-elevkort .uv-sete-navn {
  width: var(--uv-elev-s);
  font-size: 12px;
}

/* ============================================================
   MENTORSAMTALE-MODULEN
   ============================================================ */

/* Dashboard */
.mentor-dashboard {
  padding: 16px 20px;
}
/* Felles kontroll-rad: visnings-chips til venstre, sortering til høyre.
   Bryter til to linjer hvis bredden blir for liten. */
.mentor-dash-kontrollrad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 6px 0 14px;
}
.mentor-dash-sortrad {
  margin: 0;
  font-size: 13px;
  color: #555;
  text-align: right;
}
.mentor-dash-sort-select {
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-left: 4px;
}
/* Toggle-linje: hvilke kort-linjer mentor vil se (per enhet) */
.mentor-dash-visrad {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mentor-dash-vis-label { font-size: 13px; color: #555; margin-right: 2px; }
.mentor-dash-vis-chip {
  background: #f3eeff;
  border: 1px solid #d9cdf5;
  color: #5e35b1;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 14px;
  cursor: pointer;
}
.mentor-dash-vis-chip:hover { background: #e9defb; }
.mentor-dash-vis-chip.av {
  background: #f0f0f0;
  border-color: #ddd;
  color: #999;
  text-decoration: line-through;
}
.mentor-elev-mentornavn {
  font-size: 11px;
  color: #999;
  margin-top: 1px;
}
.mentor-elevliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 15px;
}
.mentor-elevkort {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e8e0ff;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.mentor-elevkort:hover {
  background: #f8f5ff;
  box-shadow: 0 2px 8px rgba(124,77,255,0.08);
}
.mentor-elevbilde {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  flex-shrink: 0;
}
.mentor-elevinfo {
  flex: 1;
  min-width: 0;
}
.mentor-elevnavn {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.mentor-elevmeta {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}
/* Prioriteringsindikatorer */
.mentor-prio-hoy {
  border-left: 4px solid #c62828;
}
.mentor-prio-middels {
  border-left: 4px solid #ff9800;
}

/* Rom-badge */
.mentor-rom-badge {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.mentor-rom-ingen {
  background: #e0e0e0;
  color: #616161;
}

/* Badge på mentor-knappen i headeren — antall forsinkede oppfølginger */
/* Samtale-dato i elevkort (egen linje under rom-badge) */
.mentor-samtale-dato {
  font-size: 11px;
  color: #888;
  margin-top: 3px;
}

/* Rom-badge i elevvisning (klikkbar for å åpne stemple-popup) */
.mentor-rom-klikk {
  cursor: pointer;
}
.mentor-rom-klikk:hover {
  filter: brightness(0.95);
}

/* Badge for forsinkede oppfølginger */
.mentor-badge-forsinket {
  background: #1565c0;
  color: white;
}

/* Poengvisning */
.mentor-badge-poeng {
  background: #ff9800;
  color: white;
}

/* ---- Beriket dashboard-kort (kompakt vertikal stabel) ---- */
.mentor-dash-topp {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mentor-dash-navnkol {
  flex: 1;
  min-width: 0;
}
.mentor-dash-navnkol .mentor-elevnavn {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Fravær-knapp øverst til høyre på kortet (motsatt elevbildet) */
.mentor-dash-fravaer-btn {
  flex-shrink: 0;
  background: #f3eeff;
  border: 1px solid #d9cdf5;
  color: #5e35b1;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.mentor-dash-fravaer-btn:hover { background: #e9defb; }
.mentor-dash-fravaer-btn.har-varsel {
  background: #ffebee;
  border-color: #ef9a9a;
  color: #c62828;
  font-weight: 600;
}
.mentor-dash-fravaer-utrop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #c62828;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
/* Midten som usynlig label/verdi-rutenett (2 kolonner) for ryddig oppstilling */
.mentor-dash-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  font-size: 12.5px;
  color: #444;
}
.mentor-dash-stats .k { color: #888; }
.mentor-dash-stats .v { font-weight: 600; text-align: right; min-width: 0; }
.mentor-dash-innsats-tall { font-weight: 600; color: #555; white-space: nowrap; }
.mentor-dash-innsats-hoy { color: #2e7d32; }
.mentor-dash-innsats-lav { color: #c62828; }
.mentor-dash-innsats-mangler { color: #aaa; font-weight: 400; }
.mentor-dash-neg { color: #c62828; }
.mentor-dash-frav { color: #c62828; }
/* Prikker-rad: spenner begge kolonner, label venstre + verdi høyre (ingen farge) */
.mentor-dash-prikkrad {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.mentor-dash-prikkrad .v { white-space: nowrap; }
.mentor-dash-opp {
  display: flex;
  gap: 3px;
  margin-top: 1px;
}
.mentor-dash-opp-chip {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 0;
  border-radius: 4px;
  color: #333;
}

/* Arkfane-stripe i venstre panel */
.mentor-fane-stripe {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}
.mentor-fane {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  font-weight: 500;
}
.mentor-fane:hover {
  color: #333;
  background: #f5f5f5;
}
.mentor-fane.aktiv {
  color: #7c4dff;
  border-bottom-color: #7c4dff;
  font-weight: 600;
}

/* Chips på kort (kategori, prikker, type) */
.mentor-kort-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 6px;
}
.mentor-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #ccc;
  white-space: nowrap;
  line-height: 1.6;
}
.mentor-chip-kat,
.mentor-chip-prikker {
  cursor: pointer;
}
.mentor-chip-kat:hover,
.mentor-chip-prikker:hover {
  filter: brightness(0.95);
}
.mentor-chip-orden {
  background: #e3f2fd;
  color: #1565c0;
}
.mentor-chip-oppforsel {
  background: #fce4ec;
  color: #ad1457;
}
.mentor-chip-tommel {
  background: #ede7f6;
  color: #4527a0;
}
.mentor-chip-annet {
  background: #f5f5f5;
  color: #616161;
}
.mentor-prikker-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  background: #f5f5f5;
  border: 1px solid #ccc;
  color: #555;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 2px;
}
.mentor-prikker-info-btn:hover {
  filter: brightness(0.95);
}
.mentor-prikker-oversikt {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.mentor-prikker-kolonne {
  flex: 1;
  min-width: 240px;
}
.mentor-prikker-kol-header {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
  border: 1px solid #ccc;
}
.mentor-prikker-rad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}
.mentor-prikker-rad:last-child {
  border-bottom: none;
}
.mentor-prikker-rad-navn {
  color: #333;
}
.mentor-prikker-rad-vekt {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #ccc;
  white-space: nowrap;
  flex: none;
}
.mentor-prikker-kol-orden .mentor-prikker-rad-vekt {
  background: #e3f2fd;
  color: #1565c0;
}
.mentor-prikker-kol-oppforsel .mentor-prikker-rad-vekt {
  background: #fce4ec;
  color: #ad1457;
}
@media (max-width: 600px) {
  .mentor-prikker-oversikt {
    flex-direction: column;
    gap: 12px;
  }
}
.mentor-knapperad {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mentor-chip-valg {
  background: #f5f5f5;
  color: #555;
  cursor: pointer;
}
.mentor-chip-valg:hover {
  filter: brightness(0.95);
}
.mentor-knapperad .mentor-chip {
  cursor: pointer;
}
.mentor-knapperad .mentor-chip:hover {
  filter: brightness(0.95);
}
.mentor-chip-aktiv {
  outline: 2px solid #7c4dff;
  outline-offset: -2px;
  font-weight: 600;
}
.mentor-chip-type {
  background: #ede7f6;
  color: #5e35b1;
}
.mentor-chip-varighet {
  background: #f5f5f5;
  color: #555;
  cursor: pointer;
}
.mentor-chip-varighet:hover {
  filter: brightness(0.95);
}
.mentor-meta-tekst {
  font-size: 11px;
  color: #888;
}

/* Handlingsknapper på kortet */
.mentor-kort-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e0e0e0;
}
.mentor-handling-knapp {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
}
.mentor-handling-knapp:hover {
  background: #eee;
  color: #333;
}
.mentor-handling-slett {
  color: #c62828;
  border-color: #ffcdd2;
}
.mentor-handling-slett:hover {
  background: #ffebee;
  color: #b71c1c;
}

/* Prikker-grid i overlay */
.mentor-prikker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mentor-prikker-grid button {
  padding: 8px 0;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}
.mentor-prikker-grid button:hover {
  background: #f5f5f5;
}
.mentor-prikker-grid button.valgt {
  background: #7c4dff;
  color: #fff;
  border-color: #7c4dff;
  font-weight: 600;
}

/* Admin-seksjon i dashboard */
.mentor-admin-seksjon {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}
.mentor-admin-seksjon h3 {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin: 0 0 10px;
}
.mentor-admin-knapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mentor-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: #f3eeff;
  color: #7c4dff;
}
.mentor-badge-anm {
  background: #fce4ec;
  color: #c62828;
}

/* Elevvisning (to-panel) */
/* Hver kolonne har sin egen scroll — body scroller ikke. Robust mot
   sticky/scroll-interaksjonsproblemer ved bunn av kortlisten. */
.mentor-elevvisning {
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}
.mentor-topanel {
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: start;
  height: 100%;
}
/* Venstre kolonne (kontekst-kol): elev-info, samtale-knapp, prikker, innsats-graf, siste samtale */
.mentor-hoyre {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  background: #fafafa;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Den dynamiske delen (#mentorHoyrePanel) har egen gap så samtale-knapp,
   prikker-chips, innsats-graf og siste samtale-lenke får luft mellom seg. */
#mentorHoyrePanel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Høyre kolonne (arbeid-kol): faner, filter, tags, kortliste — scroller selvstendig.
   padding-top: 0 fordi sticky-elementet (.mentor-arbeid-topp) gir sin egen topp-padding;
   uten dette pinner sticky 16px under kolonnens topp (browser bruker content-box-top
   som sticky-referanse, og padding-top blir et synlig gap der cards skinner gjennom). */
.mentor-venstre {
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
}
/* Sticky topp i arbeid-kol: faner + filter-rad + tag-sky beholdes synlig
   når mentor scroller gjennom kortlisten. Sidemargin -20px strekker bakgrunnen
   ut til kantene av .mentor-venstre (padding-left/right er 20px). */
.mentor-arbeid-topp {
  position: sticky;
  top: 0;
  z-index: 5;
  background: white;
  margin: 0 -20px 14px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mentor-tilbake-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #555;
  align-self: flex-start;
}
.mentor-tilbake-btn:hover:not(:disabled) {
  background: #f5f5f5;
}
.mentor-tilbake-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: #999;
}
.mentor-kontekst-elev {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mentor-kontekst-elev h2 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.mentor-kontekst-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
}
.mentor-header-bilde {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
}
.mentor-header-prikker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mentor-header-prikker .mentor-chip {
  cursor: pointer;
}
.mentor-header-prikker .mentor-chip:hover {
  filter: brightness(0.95);
}
/* Mini-graf-grid (3×3) i kontekst-kolonnen — klikkbare miniatyrer av
   statistikk-diagrammene. Klikk åpner full versjon i modal (mentor-graf-modal). */
.mentor-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.mentor-mini-boks {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 4px 4px 2px;
  cursor: pointer;
  transition: box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  min-height: 88px;
}
.mentor-mini-boks:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-color: #b39ddb;
}
.mentor-mini-tittel {
  font-size: 10px;
  font-weight: 600;
  color: #555;
  text-align: center;
  line-height: 1.15;
  margin-bottom: 2px;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mentor-mini-innhold {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}
.mentor-mini-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 64px;
}
.mentor-mini-tom {
  font-size: 14px;
  color: #ccc;
  text-align: center;
}
.mentor-mini-plassering {
  width: 100%;
  padding: 0 8px;
}
.mentor-mini-plassering .stat-rang-strek {
  height: 8px;
  margin: 0;
  border-radius: 4px;
}
.mentor-mini-plassering .stat-rang-marker,
.mentor-mini-plassering .stat-rang-halvveis {
  width: 8px;
  height: 14px;
  top: -3px;
  border-radius: 4px;
  transform: translateX(-4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Siste samtale-lenke */
.mentor-siste-samtale {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}
.mentor-siste-samtale:hover {
  background: #f5f5f5;
  color: #7c4dff;
}
.mentor-siste-samtale-pil {
  margin-left: auto;
  color: #aaa;
  font-size: 14px;
}
/* Tag-sky med toggle */
.mentor-tag-toggle {
  font-size: 12px;
  color: #7c4dff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px dashed #7c4dff;
  background: none;
}
.mentor-tag-toggle:hover {
  background: #f3eeff;
}

/* Kortliste */
.mentor-kortliste-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.mentor-tekst-btn {
  background: none;
  border: none;
  color: #7c4dff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}
.mentor-tekst-btn:hover {
  background: #f3eeff;
}
.mentor-kortliste {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mentor-tomt {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}
.mentor-laster {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 13px;
}

/* Skillelinje for foreløpige kort */
.mentor-skillelinje {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 12px 0 4px;
  border-top: 1px dashed #ddd;
  margin-top: 8px;
}

/* Enkelt kort */
.mentor-kort {
  background: #f5f5f5;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  max-height: 2000px;
  transition: box-shadow 0.15s,
              opacity 0.25s ease,
              transform 0.25s ease,
              max-height 0.28s ease,
              margin 0.28s ease,
              padding 0.28s ease,
              border-width 0.2s ease;
}
.mentor-kort:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.mentor-kort-fjernes {
  opacity: 0;
  transform: scale(0.96);
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
}
@keyframes mentorKortInn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mentor-kort-ny {
  animation: mentorKortInn 0.6s ease;
}
.mentor-kort-forelop {
  opacity: 0.6;
}
.mentor-kort-banner {
  height: 5px;
}
.mentor-kort-innhold {
  padding: 12px 14px;
}
.mentor-kort-overskrift {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}
.mentor-tittel-redigerbar,
.mentor-kommentar-tekst-redigerbar {
  cursor: pointer;
}
.mentor-tittel-redigerbar:hover,
.mentor-kommentar-tekst-redigerbar:hover {
  text-decoration: underline;
  text-decoration-color: #7c4dff;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mentor-tittel-input {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  width: 100%;
  border: 1px solid #7c4dff;
  border-radius: 4px;
  padding: 2px 6px;
  background: #fff;
  box-sizing: border-box;
  font-family: inherit;
}
.mentor-tittel-input:focus {
  outline: none;
  border-color: #5a35c7;
}
.mentor-kort-tidl-overskrift {
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
}
.mentor-kort-endret {
  font-style: italic;
}
.mentor-kort-dato-inline {
  font-size: 11px;
  color: #888;
  margin-left: auto;
  white-space: nowrap;
}
.mentor-kort-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.mentor-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: #f0f0f0;
  color: #555;
  cursor: pointer;
}
.mentor-tag-legg-til {
  background: transparent;
  border: 1px dashed #bbb;
  color: #888;
}
.mentor-tag-legg-til:hover {
  border-color: #7c4dff;
  color: #7c4dff;
}
.mentor-tag-slett {
  margin-left: 5px;
  color: #999;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
}
.mentor-tag-slett:hover {
  color: #d32f2f;
}
.mentor-tag-forslag {
  background: #eef;
  color: #556;
}
.mentor-tag-forslag:hover {
  background: #7c4dff;
  color: white;
}
.mentor-tag-admin {
  background: #fff3e0;
  color: #b26a00;
}

/* Kommentarer */
.mentor-kort-kommentarer {
  margin-top: 8px;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}
.mentor-kommentar {
  background: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}
.mentor-kommentar::after {
  content: '';
  display: block;
  clear: both;
}
.mentor-kommentar-elev {
  box-shadow: inset 5px 0 0 #81c784;
}
.mentor-kommentar-alle {
  box-shadow: inset 5px 0 0 #ffa726;
}
.mentor-kommentar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.mentor-kommentar-header strong {
  font-size: 12px;
  color: #333;
}
.mentor-kommentar-tid {
  font-size: 11px;
  color: #999;
}
.mentor-samtale-ikon {
  cursor: pointer;
  margin-left: 6px;
  font-size: 11px;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.15s ease, filter 0.15s ease;
  user-select: none;
}
.mentor-samtale-ikon:hover {
  opacity: 1;
  filter: none;
}
.mentor-samtale-handlinger {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mentor-samtale-kort-blokk {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  padding: 6px 8px;
}
.mentor-samtale-kort-blokk-kollapset {
  padding-bottom: 6px;
}
.mentor-samtale-kort-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}
.mentor-samtale-kort-pil {
  color: #888;
  font-size: 10px;
  width: 10px;
  display: inline-block;
}
.mentor-samtale-kort-tittel {
  font-weight: 600;
  color: #333;
  cursor: pointer;
}
.mentor-samtale-kort-tittel:hover {
  text-decoration: underline;
  color: #7c4dff;
}
.mentor-samtale-kort-type {
  font-size: 10px;
  color: #888;
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: capitalize;
}
.mentor-samtale-kort-tidsspann {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #999;
  margin-left: auto;
}
.mentor-samtale-kort-handlinger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-left: 14px;
}
.mentor-samtale-handling {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.mentor-samtale-handling-tid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #999;
  margin-right: 6px;
}
.mentor-samtale-handling-fra-til {
  color: #999;
}
.mentor-samtale-handling-meta {
  background: #f0f4ff;
  color: #555;
}
.mentor-samtale-handling-komm.mentor-kommentar-laerer { background: #eceff1; }
.mentor-samtale-handling-komm.mentor-kommentar-elev   { background: #c8e6c9; }
.mentor-samtale-handling-komm.mentor-kommentar-alle   { background: #ffcc80; }
.mentor-samtale-handling-tekst {
  margin-top: 2px;
  white-space: pre-wrap;
}
.mentor-samtale-mini {
  margin-top: 6px;
  margin-left: 14px;
  padding: 3px 8px;
  font-size: 11px;
  font-style: italic;
  color: #7c4dff;
  cursor: pointer;
  border-left: 2px solid #d1c4e9;
}
.mentor-samtale-mini:hover {
  color: #5e35b1;
  background: #faf7ff;
}
.mentor-samtale-mini-rad {
  font-style: normal;
  color: #555;
  margin: 2px 0;
}

.mentor-kort-uthev {
  animation: mentorKortUthev 4s ease-out;
}
@keyframes mentorKortUthev {
  0%   { box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.65); }
  20%  { box-shadow: 0 0 0 10px rgba(124, 77, 255, 0.35); }
  40%  { box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.65); }
  60%  { box-shadow: 0 0 0 10px rgba(124, 77, 255, 0.35); }
  80%  { box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.55); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.mentor-kommentar-tekst {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
  white-space: pre-wrap;
}
.mentor-kommentar-tekst-editing {
  padding: 0;
}
.mentor-kommentar-rediger-inline {
  width: 100%;
  box-sizing: border-box;
}
.mentor-kommentar-vis-mer {
  text-align: center;
  font-size: 12px;
  color: #7c4dff;
  cursor: pointer;
  padding: 4px;
}
.mentor-kommentar-vis-mer:hover {
  text-decoration: underline;
}

/* Kommentarfelt */
.mentor-kort-kommentarfelt {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.mentor-kommentar-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  resize: vertical;
  min-height: 32px;
  font-family: inherit;
}
.mentor-kommentar-input:focus {
  outline: none;
  border-color: #7c4dff;
}
.mentor-kommentar-btn {
  background: #7c4dff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.mentor-kommentar-btn:hover {
  background: #651fff;
}

/* Handlingsknapper */
.mentor-kort-handlinger {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mentor-handling-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #555;
}
.mentor-handling-btn:hover {
  background: #f5f5f5;
}

/* Høyre panel (verktøy) */
.mentor-verktoy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mentor-opprett-btn {
  background: #7c4dff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}
.mentor-opprett-btn:hover {
  background: #651fff;
}
.mentor-opprett-btn-inline {
  width: auto;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  background: #b39ddb;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.mentor-opprett-btn-inline:hover {
  background: #9575cd;
}
.mentor-fane-linje {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mentor-fane-linje .mentor-fane-stripe {
  flex: 1;
  margin-bottom: 0;
}
.mentor-verktoy-seksjon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mentor-verktoy-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}
.mentor-verktoy-select {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  background: white;
}

/* Kort topplinje (checkbox + overskrift + menyknapp) */
.mentor-kort-topplinje {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mentor-kort-topplinje .mentor-kort-overskrift {
  flex: 1;
  margin: 0;
}
/* Ikonknapper (⋮ meny, ✎ rediger) */
.mentor-ikon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #999;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.mentor-ikon-btn:hover {
  background: #f0f0f0;
  color: #555;
}
.mentor-ikon-btn-sm {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #aaa;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
}
.mentor-ikon-btn-sm:hover {
  background: #f0f0f0;
  color: #555;
}

/* Kortmeny-overlay (⋮ dropdown) */
.mentor-kort-meny-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mentor-kort-meny-boks {
  background: white;
  border-radius: 10px;
  padding: 12px 0;
  min-width: 200px;
  max-width: 280px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.mentor-kort-meny-boks button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}
.mentor-kort-meny-boks button:hover {
  background: #f5f5f5;
}
.mentor-slett-btn {
  color: #d32f2f !important;
}
.mentor-slett-btn:hover {
  background: #ffebee !important;
}

/* Slette-bekreftelse */
.mentor-slett-bekreft-btn {
  background: #d32f2f !important;
  color: white !important;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.mentor-slett-bekreft-btn:hover {
  background: #b71c1c !important;
}

/* Synlighets-sirkler (M = mentor/lærere, E = elev, F = foresatte) */
.mentor-synl-sirkler {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.mentor-synl-sirkel {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #ccc;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  color: #999;
  padding: 0;
  line-height: 1;
  transition: transform 0.08s, box-shadow 0.1s;
}
.mentor-synl-sirkel:hover:not(:disabled) {
  border-color: #888;
  color: #555;
}
.mentor-synl-sirkel.aktiv {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.mentor-synl-sirkel:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #f5f5f5;
  color: #bbb;
}
.mentor-synl-l.aktiv { background: #9e9e9e; color: #fff; border-color: #757575; }
.mentor-synl-e.aktiv { background: #81c784; color: #1b5e20; border-color: #66bb6a; }
.mentor-synl-f.aktiv { background: #ffa726; color: #4e342e; border-color: #fb8c00; }

/* Synlighetsmarkering: full bakgrunn på topplinjen (strekker seg til kortets kanter). */
.mentor-kort-topplinje {
  margin: -12px -14px 10px -14px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #dcdcdc;
}
.mentor-kort[data-synlighet="elev"] .mentor-kort-topplinje {
  background: #c8e6c9;
}
.mentor-kort[data-synlighet="alle"] .mentor-kort-topplinje {
  background: #ffcc80;
}

/* Sirkler øverst til høyre på kortet */
.mentor-kort-topplinje .mentor-synl-sirkler {
  margin-left: auto;
}

/* Kommentarfelt speiler kommentarens kommende synlighet */
.mentor-kort-kommentarfelt[data-synlighet="elev"] .mentor-kommentar-input {
  box-shadow: inset 5px 0 0 #81c784;
}
.mentor-kort-kommentarfelt[data-synlighet="alle"] .mentor-kommentar-input {
  box-shadow: inset 5px 0 0 #ffa726;
}

/* Kommentar-handlinger og felt-knapper */
.mentor-kommentar-handlinger {
  float: right;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 4px 8px;
  position: relative;
  z-index: 2;
}
.mentor-kommentarfelt-knapper {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

/* Intern fritekstkommentar på samtalekort: subtile lilla aksent for å skille
   den fra vanlige kommentarfelt; tegnteller blir rød siste 20 tegn. */
.mentor-intern-kommentarfelt .mentor-kommentar-input {
  background: #faf7ff;
  border-color: #d1c4e9;
}
.mentor-intern-charcount {
  font-size: 11px;
  color: #888;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.mentor-intern-charcount-rod {
  color: #d32f2f;
  font-weight: 600;
}

/* Kommentarbibliotek-knapp (☰) per elev */
.mentor-komm-historikk-knapp {
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  padding: 2px 8px;
  line-height: 1.2;
  height: 24px;
}
.mentor-komm-historikk-knapp:hover {
  background: #f3eeff;
  border-color: #b39ddb;
  color: #4a148c;
}
.mentor-komm-historikk-popup {
  max-width: 360px;
  padding: 12px;
}
.mentor-komm-historikk-liste {
  max-height: 240px;
  overflow-y: auto;
  margin: 0 -12px -12px -12px;
}
.mentor-komm-historikk-rad {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  white-space: pre-wrap;
  word-break: break-word;
}
.mentor-komm-historikk-rad:last-child {
  border-bottom: none;
}
.mentor-komm-historikk-rad:hover {
  background: #f3eeff;
}

/* Samtalelogg */
.mentor-samtale-aktiv {
  background: #f1f8e9;
  border: 2px solid #66bb6a;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.mentor-samtale-bar {
  position: relative;
  margin: 2px 0 12px;
  height: 14px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}
.mentor-samtale-bar-fyll {
  height: 100%;
  width: 0%;
  transition: width 0.5s linear, background-color 0.2s;
  border-radius: 4px;
}
.mentor-samtale-bar-gronn .mentor-samtale-bar-fyll { background: #66bb6a; }
.mentor-samtale-bar-gul   .mentor-samtale-bar-fyll { background: #ffa726; }
.mentor-samtale-bar-rod   .mentor-samtale-bar-fyll { background: #e53935; }
.mentor-samtale-bar-rod { animation: mentorBarBlink 1s steps(2, start) infinite; }
@keyframes mentorBarBlink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}
.mentor-samtale-knapper {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.mentor-samtale-stopp-btn {
  background: #e53935;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.mentor-samtale-stopp-btn:hover {
  background: #c62828;
}
.mentor-samtale-nyfane-btn {
  background: #fff;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.mentor-samtale-nyfane-btn:hover {
  background: #f5f5f5;
  color: #333;
}
.mentor-samtale-start-btn {
  background: #43a047;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
}
.mentor-samtale-start-btn:hover {
  background: #2e7d32;
}
/* Rediger-overlay (gjenbrukes for opprett, kategori, slett-bekreftelse) */
.mentor-rediger-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Graf-modaler skal kunne snu skjermen mot eleven uten at eleven ser
   resten av mentor-flaten. Backdrop-blur skjuler underliggende innhold. */
.mentor-rediger-overlay.mentor-graf-modal {
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Popup-variant: plasseres nær klikket element */
.mentor-rediger-overlay.mentor-popup-naert {
  background: rgba(0,0,0,0.08);
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

/* Modaler for oppgavetabell og ITO-logg åpnet fra kontekst-kolonnen */
.mentor-rediger-overlay.mentor-elevtabell-modal,
.mentor-rediger-overlay.mentor-ito-modal {
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mentor-elevtabell-boks {
  max-width: 1200px !important;
  width: 90% !important;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mentor-elevtabell-innhold {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Kontroller (paint-knapper + kommentar + datovelger) er statisk på toppen.
   Statistikk-spans (Ikke levert, Blank, ...) ligger rett under, også statisk.
   Selve tabellen er den eneste scrollende delen, og tabell-thead er sticky
   slik at fagkolonne-overskriftene alltid er synlige under scroll. */
.mentor-elevtabell-innhold .paint-controls,
.mentor-elevtabell-innhold .assignments-statistikk {
  flex: 0 0 auto;
}
.mentor-elevtabell-innhold .assignments-statistikk {
  margin: 6px 0;
  line-height: 1.8;
}
.mentor-elevtabell-innhold .assignments-tabell-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 4px;
}
/* Sticky table-header for modal. Tre viktige punkter:
   1) `border-collapse: separate; border-spacing: 0` — uten dette får sticky
      thead-celler en synlig "sprekk" mellom seg og scroll-container-toppen.
   2) Den globale regelen `#assignmentsTable thead { position: sticky; top: 100px }`
      er designet for Elevprofil-siden. I modalen tvinger vi <thead> til static
      slik at sticky kun gjelder enkelt-celler — sticky på BÅDE thead og th
      gir doble sticky-contexts og layout-hopp ved scroll-start.
   3) Hver <th> er sticky til top:0 av scroll-containeren. !important er
      nødvendig for å overstyre inline-stilen på "Uke"-cellen som setter
      position:sticky med kun left:0 (horisontal pinning) — uten override
      pinnes den ikke vertikalt. */
/* SPLIT-TABELL i modal: thead er i sin egen statiske tabell, tbody i scroll-
   container. Begge tabellene deler samme <colgroup> så kolonnene aligner.
   Dette unngår alle sticky-thead-quirks i en enkel tabell. */
.mentor-elevtabell-innhold .assignments-thead-static {
  flex: 0 0 auto;
  margin-top: 12px;        /* luft mellom statistikk-spans og overskriftsraden */
  background: #f2f2f2;
  overflow-y: hidden;
}
.mentor-elevtabell-innhold .assignments-thead-static table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
.mentor-elevtabell-innhold .assignments-thead-static th {
  background: #f2f2f2;
  padding: 4px 4px 2px 4px;
  border-bottom: 1px solid #999;
  text-align: center;
  font-weight: bold;
}
.mentor-elevtabell-innhold .assignments-tabell-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
/* Aggressive overstyringer for å eliminere luft mellom thead og første rad.
   Inline-stiler bruker !important her fordi sirkel-spans har inline `margin: 2px`. */
.mentor-elevtabell-innhold .assignments-tabell-wrap > table,
.mentor-elevtabell-innhold .assignments-tabell-wrap tbody {
  margin: 0 !important;
  padding: 0 !important;
}
.mentor-elevtabell-innhold .assignments-tabell-wrap tbody tr:first-child td {
  padding-top: 0 !important;
  border-top: 0 !important;
}
.mentor-elevtabell-innhold .assignments-tabell-wrap tbody tr:first-child td .assignment-circle {
  margin-top: 0 !important;
}
/* Reserver scrollbar-plass i begge tabeller slik at kolonnene aligner
   uavhengig av om scrollbaren er synlig. Funker i moderne browsere;
   eldre browsere får en liten drift på Windows som er akseptabel. */
.mentor-elevtabell-innhold .assignments-thead-static,
.mentor-elevtabell-innhold .assignments-tabell-wrap {
  scrollbar-gutter: stable;
}
.mentor-ito-boks {
  max-width: 900px !important;
  width: 85% !important;
  max-height: 85vh;
  overflow-y: auto;
}
.mentor-elevtabell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mentor-elevtabell-header h3 {
  font-size: 18px;
}
.mentor-modal-lukk {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #888;
  line-height: 1;
  padding: 0 4px;
}
.mentor-modal-lukk:hover {
  color: #333;
}
/* Verktøyknapper i kontekst-kolonnen — opner modaler */
.mentor-elev-verktoy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px 0;
}
.mentor-verktoy-btn {
  flex: 1 1 auto;
  padding: 6px 10px;
  border: 1px solid #d1c4e9;
  border-radius: 6px;
  background: #faf7ff;
  color: #4527a0;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.mentor-verktoy-btn:hover {
  background: #ede7f6;
  border-color: #b39ddb;
}
.mentor-verktoy-ikon {
  font-size: 14px;
}
.mentor-verktoy-btn-bred {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin: 8px 0 0 0;
}
/* Fleksitid-oversikt-modal i mentor (gjenbruker .lvs-* fra admin-speilet; trenger boks-ramme).
   Like bred som Oppgaver-modalen (.mentor-elevtabell-boks). */
.mentor-fleks-modal-boks {
  max-width: 1200px !important;
  width: 90% !important;
  max-height: 90vh;
  overflow-y: auto;
}
.mentor-rediger-overlay.mentor-popup-naert .mentor-rediger-boks {
  position: fixed;
  margin: 0;
  min-width: 220px;
}
.mentor-rediger-boks {
  background: white;
  border-radius: 12px;
  padding: 20px;
  min-width: 280px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.mentor-rediger-boks h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
}
.mentor-rediger-boks label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}

/* Legende under stablet prikker-graf */
.mentor-graf-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: #444;
}
.mentor-graf-legende-rad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mentor-graf-legende-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.mentor-graf-legende-tall {
  color: #888;
}

/* Modusvelger øverst i graf-modaler — bytter mellom kumulativ (area) og per uke (søyle) */
.mentor-graf-modus-velger {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #555;
}
.mentor-rediger-boks .mentor-graf-modus-velger label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 12px;
}
.mentor-graf-modus-velger input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

/* Verktøy-input (søk, opprett-felt) */
.mentor-verktoy-input {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  background: white;
}
.mentor-verktoy-input:focus {
  outline: none;
  border-color: #7c4dff;
}

/* Horisontal verktøy-rad: Søk + Vis-dropdown + Sortér-dropdown på én linje */
.mentor-verktoy-rad-horisontal {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mentor-verktoy-select {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-family: inherit;
  cursor: pointer;
}
.mentor-verktoy-select:focus {
  outline: none;
  border-color: #7c4dff;
}

/* Tag-liste og aktiv tag */
.mentor-tag-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mentor-tag-aktiv {
  background: #7c4dff !important;
  color: white !important;
}

/* Toast-melding */
.mentor-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* Responsiv: mobil — kolonnene stables vertikalt og body scroller normalt */
@media (max-width: 900px) {
  .mentor-elevvisning {
    height: auto;
    overflow: visible;
  }
  .mentor-topanel {
    grid-template-columns: 1fr;
    height: auto;
  }
  .mentor-hoyre {
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
  .mentor-venstre {
    height: auto;
    overflow: visible;
    padding: 12px 14px;
  }
  .mentor-arbeid-topp {
    top: var(--header-height);
  }
  .mentor-rediger-boks {
    min-width: auto;
    max-width: 100%;
  }
  .mentor-kort-meny-boks {
    min-width: 180px;
  }
}

/* ==================== HVOR ER ALLE? ==================== */
.hea-wrap {
  padding: 16px 20px 40px;
}
.hea-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "torget auditoriet lykeion"
    "mellomrommet mellomrommet mellomrommet"
    "samtalerom annetsted pause";
  gap: 12px;
}
.hea-area-torget       { grid-area: torget; }
.hea-area-auditoriet   { grid-area: auditoriet; }
.hea-area-lykeion      { grid-area: lykeion; }
.hea-area-mellomrommet { grid-area: mellomrommet; }
.hea-area-samtalerom   { grid-area: samtalerom; }
.hea-area-annetsted    { grid-area: annetsted; }
.hea-area-pause        { grid-area: pause; }

.hea-boks {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 12px 14px 14px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hea-boks-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 8px;
}
.hea-romnavn {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hea-antall {
  font-size: 12px;
  font-weight: 500;
  color: #888;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1px 8px;
}
.hea-laerere {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hea-laerer-bilde {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  background: #eee;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d0d0d0;
}
.hea-laerer-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
}
.hea-elev-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hea-elev-kort {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hea-elev-kort img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  background: #eee;
}
.hea-elev-navn {
  font-size: 11px;
  color: #333;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
}
.hea-fravaerende img {
  filter: grayscale(100%);
  opacity: 0.55;
}
.hea-fravaerende .hea-elev-navn {
  color: #999;
  text-decoration: line-through;
}
.hea-tom {
  font-size: 12px;
  color: #aaa;
  font-style: italic;
  padding: 4px 2px;
}

@media (max-width: 900px) {
  .hea-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "torget"
      "auditoriet"
      "lykeion"
      "mellomrommet"
      "samtalerom"
      "annetsted"
      "pause";
  }
}

/* ============================================================
   HUMHOOT — bibliotek-side, editor og spørsmål-modal
   ============================================================ */

#humhootPage {
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
}

.humhoot-bibliotek,
.humhoot-redigerer {
  max-width: 1100px;
  margin: 0 auto;
}

.humhoot-topplinje {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.humhoot-tittel {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  flex: 1;
}
.humhoot-h3 {
  margin: 24px 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #555;
}

/* Knapper */
.humhoot-knapp {
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  color: #333;
  transition: background 0.15s, border-color 0.15s;
}
.humhoot-knapp:hover {
  background: #f5f5f5;
  border-color: #999;
}
.humhoot-knapp-primær {
  background: #7c4dff;
  border-color: #7c4dff;
  color: white;
  font-weight: 600;
}
.humhoot-knapp-primær:hover {
  background: #5e35b1;
  border-color: #5e35b1;
}
.humhoot-knapp-fare {
  border-color: #e57373;
  color: #c62828;
}
.humhoot-knapp-fare:hover {
  background: #ffebee;
  border-color: #c62828;
}
.humhoot-knapp-mini {
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: #555;
}
.humhoot-knapp-mini:hover {
  background: #f5f5f5;
}
.humhoot-knapp-mini.humhoot-knapp-fare {
  border-color: #e57373;
  color: #c62828;
}

/* Filter-rad */
.humhoot-filter-rad {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.humhoot-sok {
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  flex: 1;
  min-width: 200px;
}
.humhoot-eier-tabs {
  display: flex;
  gap: 4px;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 3px;
}
.humhoot-eier-tab {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  color: #555;
}
.humhoot-eier-tab.aktiv {
  background: white;
  color: #7c4dff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.humhoot-fagvelger {
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
}

/* Liste-visning */
.humhoot-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.humhoot-tom {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  color: #888;
  font-size: 14px;
}
.humhoot-kort {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.humhoot-kort:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.humhoot-kort-egen {
  border-left: 4px solid #7c4dff;
}
.humhoot-kort-delt {
  border-left: 4px solid #b0bec5;
  background: #fafafa;
}
.humhoot-kort-tittel {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
}
.humhoot-kort-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.humhoot-chip {
  background: #f0f0f0;
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 11px;
  color: #555;
}
.humhoot-chip-poeng {
  background: #ede7f6;
  color: #5e35b1;
}
.humhoot-chip-delt {
  background: #e3f2fd;
  color: #1565c0;
}
.humhoot-kort-eier {
  font-size: 11px;
  color: #888;
}
.humhoot-kort-handlinger {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Editor */
.humhoot-redigerer-topp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.humhoot-redigerer-status {
  font-size: 13px;
  color: #888;
}
.humhoot-redigerer-meta {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.humhoot-felt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.humhoot-felt-toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
}
.humhoot-felt-label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
}
.humhoot-felt-hint {
  font-size: 11px;
  color: #999;
  font-style: italic;
}
.humhoot-input {
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
}
.humhoot-textarea {
  resize: vertical;
  min-height: 50px;
}

/* Spørsmål-liste i editor */
.humhoot-sporsmal-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.humhoot-sp-kort {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 14px;
}
.humhoot-sp-kort-topp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.humhoot-sp-nr {
  background: #7c4dff;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}
.humhoot-sp-type {
  font-size: 11px;
  color: #5e35b1;
  background: #ede7f6;
  padding: 2px 8px;
  border-radius: 10px;
}
.humhoot-sp-tid {
  font-size: 11px;
  color: #777;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 10px;
}
.humhoot-sp-tekst {
  font-size: 14px;
  color: #222;
  margin-bottom: 8px;
}
.humhoot-sp-svar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.humhoot-sp-alt {
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #555;
}
.humhoot-sp-alt.riktig {
  font-weight: 600;
}
.humhoot-legg-til-sp {
  align-self: flex-start;
  margin-top: 6px;
}

/* Modal */
.humhoot-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.humhoot-modal-boks {
  background: white;
  border-radius: 14px;
  padding: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.humhoot-modal-tittel {
  font-size: 18px;
  font-weight: 700;
  color: #222;
}
.humhoot-modal-rad {
  display: flex;
  align-items: center;
  gap: 12px;
}
.humhoot-typevelger {
  display: flex;
  gap: 4px;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 3px;
}
.humhoot-type-knapp {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  color: #555;
}
.humhoot-type-knapp.aktiv {
  background: white;
  color: #7c4dff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Tidsfrist-knapper */
.humhoot-tidsfrister {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.humhoot-tid-knapp {
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  min-width: 44px;
}
.humhoot-tid-knapp.aktiv {
  background: #7c4dff;
  border-color: #7c4dff;
  color: white;
  font-weight: 600;
}

/* Svar-felter i modal */
.humhoot-svar-felt {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.humhoot-svar-prikk {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.humhoot-svar-input {
  flex: 1;
  border: 1px solid transparent;
  background: #f9f9f9;
}
.humhoot-svar-tekst-fast {
  flex: 1;
  font-weight: 600;
  color: #444;
}
.humhoot-svar-riktig {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  user-select: none;
}

.humhoot-modal-handlinger {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ============================================================
   HUMHOOT — kontrollpanel i Undervisning-fanen
   ============================================================ */

.humhoot-uv-panel {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
}
.humhoot-uv-tittel {
  font-size: 18px;
  font-weight: 700;
  color: #222;
}
.humhoot-uv-info {
  font-size: 13px;
  color: #666;
}
.humhoot-uv-tom {
  padding: 24px;
  text-align: center;
  color: #888;
  font-size: 13px;
  background: #fafafa;
  border-radius: 8px;
}
.humhoot-uv-rad {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.humhoot-uv-handlinger {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.humhoot-uv-hint {
  font-size: 12px;
  color: #888;
  font-style: italic;
}
.humhoot-knapp-stor {
  padding: 10px 22px;
  font-size: 15px;
}
.humhoot-uv-tid {
  background: #ff9800;
  color: white;
  padding: 2px 10px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

/* Lobby — deltakerliste */
.humhoot-uv-deltakere {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #fafafa;
  border-radius: 10px;
  padding: 14px;
  min-height: 80px;
}
.humhoot-uv-deltaker {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  animation: humhoot-deltaker-inn 0.25s ease;
}
@keyframes humhoot-deltaker-inn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
.humhoot-uv-deltaker-foto {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
}
.humhoot-uv-deltaker-foto-tom {
  background: #e0e0e0;
}
.humhoot-uv-deltaker-navn {
  font-size: 12px;
  color: #444;
}

/* Aktivt spørsmål — statistikk */
.humhoot-uv-sporsmal-tekst {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: 10px;
}
.humhoot-uv-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.humhoot-uv-stats-tittel {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}
.humhoot-uv-stat-rad {
  display: grid;
  grid-template-columns: 16px 1fr 200px 70px;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
}
.humhoot-uv-stat-rad.riktig .humhoot-uv-stat-tekst {
  font-weight: 700;
  color: #2e7d32;
}
.humhoot-uv-stat-prikk {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.humhoot-uv-stat-tekst {
  font-size: 13px;
  color: #444;
}
.humhoot-uv-stat-bar-wrapper {
  background: #f0f0f0;
  border-radius: 10px;
  height: 14px;
  overflow: hidden;
}
.humhoot-uv-stat-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s;
}
.humhoot-uv-stat-tall {
  font-size: 12px;
  color: #666;
  text-align: right;
}
.humhoot-uv-forklaring {
  background: #fff8e1;
  border-left: 4px solid #ffa000;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* ============================================================
   HUMHOOT — etteranalyse / resultater
   ============================================================ */

.humhoot-hovedfaner {
  display: flex;
  gap: 4px;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 3px;
  margin-right: auto;
  margin-left: 16px;
}
.humhoot-hovedfane {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  color: #555;
  font-weight: 500;
}
.humhoot-hovedfane.aktiv {
  background: white;
  color: #7c4dff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.humhoot-resultater-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.humhoot-resultat-kort {
  background: white;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #7c4dff;
  border-radius: 12px;
  display: flex;
  align-items: stretch;
  transition: box-shadow 0.15s, transform 0.1s;
  position: relative;
}
.humhoot-resultat-kort:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.humhoot-resultat-kort-innhold {
  flex: 1;
  padding: 14px 18px;
  cursor: pointer;
}
.humhoot-resultat-slett {
  align-self: center;
  margin-right: 12px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.humhoot-resultat-tittel {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.humhoot-resultat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.humhoot-resultat-stats {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: #555;
}
.humhoot-resultat-dato {
  margin-left: auto;
  color: #888;
  font-style: italic;
}

.humhoot-resultat-modal {
  max-width: 960px;
}
.humhoot-resultat-modal-topp {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}
.humhoot-resultat-modal-undertittel {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}
.humhoot-resultat-modal-knapper {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.humhoot-resultat-sp-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 50vh;
  overflow-y: auto;
}
.humhoot-resultat-sp {
  background: #fafafa;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.humhoot-resultat-sp-tekst {
  font-weight: 600;
  font-size: 14px;
  color: #222;
}
.humhoot-resultat-sp-stats {
  font-size: 12px;
  color: #666;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.humhoot-resultat-sp-fordeling {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.humhoot-resultat-alt {
  display: grid;
  grid-template-columns: 14px 1fr 200px 70px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.humhoot-resultat-alt.riktig .humhoot-resultat-alt-tekst {
  font-weight: 700;
  color: #2e7d32;
}
.humhoot-resultat-alt-prikk {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.humhoot-resultat-alt-bar-wrap {
  background: #e8e8e8;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
}
.humhoot-resultat-alt-bar {
  height: 100%;
  border-radius: 6px;
}
.humhoot-resultat-alt-tall {
  font-size: 11px;
  color: #666;
  text-align: right;
}

.humhoot-resultat-elev-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 40vh;
  overflow-y: auto;
}
.humhoot-resultat-elev-rad {
  display: grid;
  grid-template-columns: 30px 36px 1fr 80px 80px;
  gap: 12px;
  align-items: center;
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.humhoot-resultat-elev-rad:hover {
  background: #f5f5f5;
}
.humhoot-resultat-elev-plass {
  font-weight: 700;
  color: #7c4dff;
}
.humhoot-resultat-elev-foto {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
}
.humhoot-foto-tom {
  background: #d0d0d0;
}
.humhoot-resultat-elev-navn {
  font-weight: 600;
}
.humhoot-resultat-elev-riktige {
  font-size: 12px;
  color: #666;
  text-align: right;
}
.humhoot-resultat-elev-score {
  font-weight: 700;
  color: #4a148c;
  text-align: right;
}

/* Per-elev-detaljmodal */
.humhoot-elev-detalj {
  max-width: 1100px;
}
.humhoot-elev-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.humhoot-elev-tabell th {
  background: #f5f5f5;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #e0e0e0;
}
.humhoot-elev-tabell td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.humhoot-elev-tabell-sp {
  max-width: 360px;
}
.humhoot-tabell-riktig td:nth-child(3) {
  color: #2e7d32;
  font-weight: 600;
}
.humhoot-tabell-feil td:nth-child(3) {
  color: #c62828;
}

/* Print-styling for utskrift */
@media print {
  body.humhoot-skriver-ut * { visibility: hidden; }
  body.humhoot-skriver-ut #humhootResultatModal,
  body.humhoot-skriver-ut #humhootResultatModal * { visibility: visible; }
  body.humhoot-skriver-ut #humhootResultatModal {
    position: absolute; top: 0; left: 0; right: 0;
    background: white; padding: 20px;
  }
  body.humhoot-skriver-ut .humhoot-modal-overlay {
    background: white;
  }
  body.humhoot-skriver-ut .humhoot-resultat-modal-knapper { display: none; }
}

/* In-app bekreftelses-dialog (erstatter native confirm()) */
.humhoot-bekreft-overlay {
  z-index: 10003;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.humhoot-bekreft-boks {
  background: white;
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 440px;
  width: calc(100% - 40px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  animation: humhoot-bekreft-inn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes humhoot-bekreft-inn {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
.humhoot-bekreft-tittel {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.humhoot-bekreft-melding {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 18px;
}
.humhoot-bekreft-knapper {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================================
   STATISTIKK-MODULEN (Admin → Statistikk)
   ============================================================ */
.stat-toppbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
}
.stat-fane-bytte {
  display: flex;
  gap: 6px;
}
.stat-fane-btn {
  padding: 8px 18px;
  border: 1px solid #d0d0d0;
  background: #f5f5f5;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stat-fane-btn:hover { background: #ebebeb; }
.stat-fane-btn.active {
  background: #7c4dff;
  color: #fff;
  border-color: #7c4dff;
}
.stat-toppbar-hoyre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stat-label {
  font-size: 12px;
  color: #555;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stat-select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.stat-elev-select {
  min-width: 200px;
}
.stat-refresh-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stat-refresh-btn:hover { background: #f0f0f0; }
.stat-beregn-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #7c4dff;
  background: #f3eeff;
  font-size: 12px;
  font-weight: 600;
  color: #5e35b1;
  cursor: pointer;
  white-space: nowrap;
}
.stat-beregn-btn:hover { background: #e8def8; }
.stat-sist-beregnet {
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-right: 4px;
}
.stat-anon-btn {
  margin-left: 12px;
  padding: 4px 12px;
  font-size: 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 12px;
  cursor: pointer;
  color: #555;
}
.stat-anon-btn:hover { background: #ebebeb; }
.stat-periode-info {
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.stat-loading {
  padding: 60px 20px;
  text-align: center;
  color: #777;
}
.stat-loading-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  border: 3px solid #e0e0e0;
  border-top-color: #7c4dff;
  border-radius: 50%;
  animation: stat-spin 0.9s linear infinite;
}
@keyframes stat-spin { to { transform: rotate(360deg); } }
.stat-loading-tekst { font-size: 13px; margin-bottom: 10px; }
.stat-loading-progress {
  max-width: 320px;
  margin: 0 auto;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}
.stat-loading-bar {
  height: 100%;
  background: #7c4dff;
  transition: width 0.25s;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  padding-bottom: 40px;
}
@media (min-width: 1400px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
}
.stat-kort {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
/* §9: Rom & samlokalisering-fanen */
.stat-rom-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px; margin: 0 0 16px; font-size: 14px; color: #444;
}
.stat-rom-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 900px) { .stat-rom-grid { grid-template-columns: 1fr; } }
.stat-rom-grid .stat-kort h3 { font-size: 15px; margin: 0 0 10px; }
.stat-chart { min-height: 240px; width: 100%; }
.stat-graf-kort { margin-top: 16px; }
.stat-graf-forklaring { font-size: 12px; color: #888; margin: 0 0 10px; }
.stat-graf-nullstill { cursor: pointer; }
.stat-romtopp-kort { margin-top: 16px; }
.stat-romtopp-kontroll { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: #555; }
.stat-romtopp-kontroll label { display: flex; align-items: center; gap: 8px; }
.stat-graf-kontroll { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: #555; }
.stat-graf-kontroll label { display: flex; align-items: center; gap: 8px; }
.stat-graf-kontroll input[type="range"] { width: 160px; }
.stat-graf-kontroll strong { color: #7c4dff; font-variant-numeric: tabular-nums; }
.stat-graf-info { color: #888; margin-left: auto; }
.stat-graf-svg { width: 100%; max-width: 760px; margin: 0 auto; }
.stat-graf-svgel { width: 100%; height: auto; display: block; }
.stat-graf-node text { user-select: none; }
.stat-graf-node:hover text { fill: #e91e63 !important; font-weight: 700; }
.stat-kort-tittel {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.stat-kort-innhold {
  flex: 1;
  min-height: 260px;
  position: relative;
}
.stat-kort-info {
  font-size: 12px;
  color: #777;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
  min-height: 0;
}
.stat-kort-info:empty { display: none; }
.stat-no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: #999;
  font-size: 13px;
  font-style: italic;
  padding: 20px;
  text-align: center;
}
.stat-elev-velger-rad {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: #f9f6ff;
  border-radius: 8px;
  margin-bottom: 14px;
  border: 1px solid #e8e0ff;
  flex-wrap: wrap;
}
.stat-elev-bilde {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #7c4dff;
}
.stat-elev-info {
  flex: 1;
  min-width: 240px;
}
.stat-nokkeltall {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
}
.stat-nokkeltall > div { white-space: nowrap; }
.stat-median { color: #888; font-size: 12px; }
.stat-diff {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #f0f0f0;
  color: #777;
}
.stat-diff.pos { background: #c8e6c9; color: #1b5e20; }
.stat-diff.neg { background: #ffcdd2; color: #b71c1c; }
.stat-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.stat-tabell th, .stat-tabell td {
  border-bottom: 1px solid #eee;
  padding: 4px 8px;
  text-align: left;
}
.stat-tabell th { background: #fafafa; font-weight: 600; color: #555; }
.stat-tabell td.num { text-align: right; font-variant-numeric: tabular-nums; }
.stat-rang-strek {
  position: relative;
  height: 32px;
  /* Kohort-kalibrert gradient: stop-posisjoner kommer fra --bp-r (rødt slutter) og --bp-o (oransje slutter).
     Defaults gjør at en strek uten breakpoints fortsatt rendrer noenlunde fornuftig (men render-koden
     setter normalt 'stat-rang-strek-gra'-modifier i såfall). */
  --bp-r: 0;
  --bp-o: 0;
  background: linear-gradient(to right,
    #e57373 0%,
    #e57373 calc(var(--bp-r) * 50%),
    #ffcdd2 calc(var(--bp-r) * 100%),
    #ffcc80 calc((var(--bp-r) + var(--bp-o)) * 50%),
    #c8e6c9 calc(var(--bp-o) * 100%),
    #81c784 calc(var(--bp-o) * 100% + (100% - var(--bp-o) * 100%) * 0.5),
    #81c784 100%);
  border-radius: 16px;
  margin: 6px 0 6px;
}
.stat-rang-strek-gra {
  background: #d8d8d8 !important;
}
.stat-rang-kontekst {
  font-size: 11px;
  color: #888;
  margin: 2px 0 14px;
  text-align: right;
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
}
.stat-rang-info-graperiode {
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-top: 8px;
}
.stat-rang-info {
  font-size: 11px;
  color: #888;
  margin-top: 8px;
}
.stat-rang-info-halvveis,
.stat-rang-info-naa {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  box-sizing: border-box;
  margin-right: 4px;
}
.stat-rang-info-halvveis {
  background: rgba(124, 77, 255, 0.22);
  border: 1px solid rgba(124, 77, 255, 0.55);
}
.stat-rang-info-naa {
  background: #7c4dff;
}
.stat-rang-vrapper {
  padding: 10px 14px;
}
.mentor-modal-forklaring {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
}
/* Forklaringen vises i modal-header — skjul den ekstra forklaringen i grafens innhold. */
.mentor-graf-modal-boks .stat-rang-info {
  display: none;
}
.stat-rang-marker {
  position: absolute;
  top: -4px;
  width: 18px;
  height: 40px;
  background: #7c4dff;
  border-radius: 9px;
  transform: translateX(-9px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 2;
}
.stat-rang-halvveis {
  position: absolute;
  top: -4px;
  width: 18px;
  height: 40px;
  background: rgba(124, 77, 255, 0.22);
  border: 1px solid rgba(124, 77, 255, 0.55);
  border-radius: 9px;
  transform: translateX(-9px);
  z-index: 1;
  box-sizing: border-box;
}
.stat-rang-tekst {
  font-size: 12px;
  color: #555;
  margin-bottom: 2px;
}
.stat-kalender-grid {
  display: grid;
  grid-template-columns: 40px repeat(5, 1fr);
  gap: 2px;
  font-size: 10px;
}
.stat-kalender-celle {
  aspect-ratio: 1;
  background: #f0f0f0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #555;
}
.stat-kalender-uke { font-size: 10px; color: #888; padding: 4px; }
.stat-sirkler-rad {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 4px;
}
.stat-sirkel {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.stat-sirkel.gronn { background: #4caf50; }
.stat-sirkel.gul { background: #ff9800; }
.stat-sirkel.rod { background: #f44336; }
.stat-sirkel.grey { background: #bdbdbd; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-toppbar { flex-direction: column; align-items: stretch; }
  .stat-toppbar-hoyre { justify-content: flex-end; }
}

/* ==================== FRAVÆRSMODULEN (Del 1) ==================== */
.fravaer-modul { padding: 16px 20px; }
.fravaer-sticky { position: sticky; top: var(--header-height); background: #fff; z-index: 30; padding-top: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
.fravaer-topp { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.fravaer-akse-rad { display: flex; align-items: center; gap: 10px; padding: 0 8px 4px; }
.fravaer-akse { position: relative; flex: 1; height: 13px; border-bottom: 1px solid #eee; }
.fravaer-akse-merke { position: absolute; top: 0; transform: translateX(-50%); font-size: 9px; color: #aaa; white-space: nowrap; }
/* Inline tidsakse for en avvikende dag (egen skala) i elev-fokus. */
.fravaer-rad-akse { position: relative; height: 12px; margin-bottom: 2px; border-bottom: 1px dashed #d6c4f0; }
.fravaer-rad-akse .fravaer-akse-merke { color: #9575cd; }
.fravaer-plus-spacer { width: 26px; flex-shrink: 0; }
.fravaer-hoyre { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fravaer-dato-velger { display: flex; align-items: center; gap: 6px; }
.fravaer-dato-btn { width: 30px; height: 30px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; }
.fravaer-dato-btn:hover { background: #f0f0f0; }
.fravaer-dato-velger input[type="date"] { padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; }
.fravaer-dato-label { font-size: 13px; color: #555; }
.fravaer-laster { padding: 30px; text-align: center; color: #888; font-size: 14px; }

.fravaer-rad { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid #eee; min-height: 56px; border-radius: 6px; }
.fravaer-elev { display: flex; align-items: center; gap: 6px; width: 200px; flex-shrink: 0; }
.fravaer-foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.fravaer-navn { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fravaer-utrop { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e53935; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.fravaer-dag-btn { border: 1px solid #ccc; background: #fafafa; border-radius: 14px; padding: 3px 10px; font-size: 11px; cursor: pointer; color: #666; flex-shrink: 0; }
.fravaer-dag-btn.aktiv { font-weight: 700; color: #fff; background: #999; border-color: #999; }
.fravaer-dag-btn:hover { filter: brightness(0.96); }
.fravaer-komm-btn { border: 1px solid #ccc; background: #fafafa; border-radius: 14px; padding: 3px 8px; font-size: 11px; cursor: pointer; flex-shrink: 0; }
.fravaer-komm-btn.aktiv { background: #fff8e1; border-color: #ffd54f; }
.fravaer-komm-btn:hover { filter: brightness(0.96); }
.fravaer-komm-liste { margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.fravaer-komm-rad { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; background: #fafafa; padding: 5px 8px; border-radius: 6px; }
.fravaer-komm-rad em { color: #888; font-style: normal; font-size: 11px; }
.fravaer-komm-slett { border: none; background: none; color: #c62828; cursor: pointer; font-size: 16px; line-height: 1; }
.fravaer-komm-tom { font-size: 12px; color: #aaa; padding: 4px 0; }

/* Fraværskommentar-pille på elevbildet i Undervisning */
.uv-komm-pille { position: absolute; top: -4px; left: -4px; background: #fff8e1; border: 1px solid #ffd54f; border-radius: 10px; font-size: 10px; padding: 0 4px; line-height: 16px; z-index: 2; cursor: default; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }

.fravaer-tidslinjer { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; }
.fravaer-linjer-stabel { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fravaer-linjer-stabel.fravaer-dempet { opacity: 0.4; pointer-events: none; }
/* Dagsfravær-bjelke: full bredde foran den nedre (mentor) linjen — overstyrer timefravær */
.fravaer-dag-band { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: 3; display: flex; align-items: center; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fravaer-linje { position: relative; height: 22px; background: #f7f7f7; border-radius: 4px; }
.fravaer-linje-mentor { background: #fcfcfc; }
.fravaer-linje-tom { position: absolute; left: 8px; top: 3px; font-size: 10px; color: #bbb; }
.fravaer-plus-btn { width: 26px; height: 26px; border: 1px dashed #bbb; background: #fff; border-radius: 6px; cursor: pointer; font-size: 16px; color: #888; flex-shrink: 0; }
.fravaer-plus-btn:hover { border-color: #7c4dff; color: #7c4dff; }

.fravaer-boks { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 8px; }
.fravaer-boks-merk { font-size: 9px; font-weight: 600; color: rgba(0,0,0,0.55); white-space: nowrap; pointer-events: none; z-index: 1; }
.fravaer-boks.klikkbar { cursor: pointer; }
.fravaer-boks.klikkbar:hover { outline: 2px solid #7c4dff; outline-offset: -2px; }

/* Faglærer-tidslinje — dus-farger */
.fravaer-fl-hvit { background: #fff; border: 1px solid #e0e0e0; }
.fravaer-fl-uaapnet { border: 1px dashed #bdbdbd; background: repeating-linear-gradient(45deg, #fff, #fff 4px, #fafafa 4px, #fafafa 8px); }
.fravaer-fl-tilstede { background: #c8e6c9; border: 1px solid #a5d6a7; }
.fravaer-fl-fravaer { background: #ffcdd2; border: 1px solid #ef9a9a; }
.fravaer-fl-sen { position: absolute; left: 0; top: 0; bottom: 0; background: #ffcdd2; z-index: 0; }
.fravaer-kvit-hake { position: absolute; right: 2px; top: 0; font-size: 11px; color: #2e7d32; z-index: 2; }

/* LV-boks — read-only info, lys blå ramme + stemplings-segmenter */
.fravaer-lv-boks { border: 2px solid #1976d2; background: #e3f2fd; }
/* Egen hover-tooltip for LV-bokser (flerlinjet — title viser ikke \n pålitelig) */
.fravaer-tip { position: fixed; z-index: 10050; background: #263238; color: #fff; font-size: 11px; line-height: 1.5; padding: 6px 9px; border-radius: 6px; white-space: pre-line; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.25); max-width: 280px; }
.fravaer-lv-segs { position: absolute; inset: 0; display: flex; }
.fravaer-lv-seg { height: 100%; }
.fravaer-lv-gronn { background: #a5d6a7; }
.fravaer-lv-rod { background: #ffab91; }
.fravaer-lv-graa { background: #e0e0e0; }

/* Mentor-tidslinje — skarp-farger (bakgrunn settes inline pr. kategori) */
.fravaer-mentor-boks .fravaer-boks-merk { color: #fff; }
/* Ghost-markør: tidsbestemt kommentar (ikke et fravær) — stiplet, halvtransparent */
.fravaer-ghost { position: absolute; top: 1px; bottom: 1px; border: 1px dashed #b39ddb; background: rgba(179,157,219,0.14); border-radius: 3px; display: flex; align-items: center; justify-content: flex-start; gap: 2px; font-size: 10px; color: #5e35b1; box-sizing: border-box; min-width: 14px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fravaer-ghost:hover { background: rgba(179,157,219,0.28); }
.fravaer-ghost-tekst { pointer-events: none; overflow: hidden; text-overflow: ellipsis; }
.fravaer-ghost-hdl { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; touch-action: none; }
.fravaer-ghost-hdl-v { left: 0; }
.fravaer-ghost-hdl-h { right: 0; }
.fravaer-ghost-hdl:hover { background: rgba(94,53,177,0.4); }
/* Dra-håndtak på fravær-bokser (justere start/slutt) — hvit-aktig på fargede bokser. */
.fravaer-boks-hdl { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; touch-action: none; }
.fravaer-boks-hdl-v { left: 0; }
.fravaer-boks-hdl-h { right: 0; }
.fravaer-boks-hdl:hover { background: rgba(255,255,255,0.55); }
.fravaer-drag-tid { position: fixed; z-index: 10002; background: #5e35b1; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 5px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); white-space: nowrap; }
.fravaer-komm-rad-tekst { cursor: pointer; }
.fravaer-komm-rad-tekst:hover { text-decoration: underline; }
.fravaer-kat-rad { display: flex; gap: 8px; }
.fravaer-kat-knapp { flex: 1; border: none; border-radius: 6px; padding: 9px 4px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; }
.fravaer-kat-knapp:hover { filter: brightness(0.95); }
.fravaer-kat-U { background: #e53935; }
.fravaer-kat-S { background: #fb8c00; }
.fravaer-kat-P { background: #ec407a; }
.fravaer-kat-A { background: #42a5f5; }

@media (max-width: 700px) {
  .fravaer-elev { width: 120px; }
  .fravaer-rad { flex-wrap: wrap; }
}

/* Fravær-popup */
.fravaer-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10001; }
.fravaer-popup { background: #fff; border-radius: 10px; padding: 18px 20px; max-width: 440px; width: 90%; box-shadow: 0 8px 30px rgba(0,0,0,0.25); max-height: 85vh; overflow-y: auto; }
.fravaer-popup h3 { margin: 0 0 4px; font-size: 16px; }
.fravaer-pop-elev { font-weight: 600; margin-bottom: 6px; }
.fravaer-pop-kontekst { font-size: 12px; color: #666; margin-bottom: 10px; }
.fravaer-pop-seksjon { margin: 12px 0; border-top: 1px solid #eee; padding-top: 10px; }
.fravaer-pop-seksjon > label { display: block; font-size: 11px; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.fravaer-pop-rad { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fravaer-popup select, .fravaer-popup input[type="text"], .fravaer-popup input[type="number"], .fravaer-popup input[type="time"] { padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; }
.fravaer-popup input[type="number"] { width: 70px; }
.fravaer-popup input[type="text"] { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.fravaer-popup input[type="date"] { padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; box-sizing: border-box; }
.fravaer-popup textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; margin-bottom: 8px; }
.fravaer-snarvei-rad { display: flex; flex-wrap: wrap; gap: 6px; }
.fravaer-snarvei { border: none; border-radius: 14px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: #fff; }
.fravaer-snarvei-P { background: #ec407a; }
.fravaer-snarvei-S { background: #fb8c00; }
.fravaer-snarvei-A { background: #42a5f5; }
.fravaer-snarvei-U { background: #e53935; }
.fravaer-snarvei:hover { filter: brightness(0.92); }
.fravaer-pop-primary { background: #7c4dff; color: #fff; border: none; border-radius: 6px; padding: 9px 16px; cursor: pointer; font-size: 13px; width: 100%; margin-top: 4px; }
.fravaer-pop-primary:hover { filter: brightness(1.06); }
.fravaer-pop-sekundary { background: #fff; color: #555; border: 1px solid #ccc; border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 13px; width: 100%; }
.fravaer-pop-sekundary:hover { background: #f5f5f5; }
.fravaer-pop-lukk { background: none; border: none; color: #888; cursor: pointer; font-size: 12px; margin-top: 12px; width: 100%; }

/* Liten kontekst-boks ved musen */
.fravaer-mini-overlay { position: fixed; inset: 0; z-index: 10001; }
.fravaer-mini { position: fixed; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.22); padding: 7px; display: flex; flex-direction: column; gap: 5px; min-width: 110px; }
.fravaer-mini-tid { font-size: 11px; color: #666; text-align: center; padding: 0 2px 2px; white-space: nowrap; }
.fravaer-mini button { border: none; border-radius: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.fravaer-mini-syk { background: #fb8c00; color: #fff; font-weight: 600; }
.fravaer-mini-syk:hover { filter: brightness(0.95); }
.fravaer-mini-borte { background: #e53935; color: #fff; font-weight: 600; }
.fravaer-mini-borte:hover { filter: brightness(0.95); }
.fravaer-mini-mer { background: #f0f0f0; color: #444; }
.fravaer-mini-mer:hover { background: #e6e6e6; }
.fravaer-mini-laast { font-size: 11px; color: #b71c1c; text-align: center; padding: 4px 6px; max-width: 180px; line-height: 1.4; }
.fravaer-pop-laast { font-size: 13px; color: #b71c1c; background: #fdecea; border: 1px solid #f5c6cb; border-radius: 6px; padding: 10px 12px; margin: 8px 0 4px; line-height: 1.5; }

/* Visning B — elev-fokus */
.fravaer-navn-klikk { cursor: pointer; }
.fravaer-navn-klikk:hover { color: #7c4dff; text-decoration: underline; }
.fravaer-elevvelger { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-weight: 600; }
.fravaer-sum { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.fravaer-sum-boks { background: #f5f5f5; border-radius: 8px; padding: 12px 18px; min-width: 130px; text-align: center; }
.fravaer-sum-tall { font-size: 22px; font-weight: 700; color: #333; }
.fravaer-sum-merk { font-size: 11px; color: #777; margin-top: 2px; }
.fravaer-sum-detalj { font-size: 12px; color: #666; margin-bottom: 14px; padding: 0 2px; }
/* Elev-fokus: per-dag-rader (gjenbruker .fravaer-rad). Datolabel i venstre kolonne. */
.fravaer-elev-sticky { padding-bottom: 4px; }
.fravaer-elev-dato-celle { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fravaer-vis-flere { display: block; margin: 12px auto; padding: 8px 18px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #7c4dff; font-size: 13px; cursor: pointer; }
.fravaer-vis-flere:hover { background: #faf7ff; border-color: #7c4dff; }

/* ============================================================
   ADMIN: LÆRINGSVERKSTED-SPEIL (port av elevappens fleks-* med lvs-prefiks)
   ============================================================ */
.lvs-speil {
  border: 1px solid #e6e0f2; border-radius: 14px; padding: 16px;
  margin-bottom: 24px; background: #faf8ff;
}
.lvs-speil-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.lvs-speil-elev { display: flex; align-items: center; gap: 10px; }
.lvs-speil-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: #eee; }
.lvs-speil-navn { font-size: 16px; font-weight: 700; }
.lvs-speil-sub { font-size: 12px; color: #888; }
.lvs-speil-knapper { display: flex; gap: 8px; }
.lvs-varsel {
  background: #fff8e1; border: 1px solid #ffe082; color: #8a6d00;
  border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px;
}
.lvs-toppbokser { display: flex; gap: 12px; margin: 8px 0 16px; }
.lvs-boks { flex: 1; border-radius: 16px; padding: 18px 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.lvs-boks-tid { background: #e8f5e9; }
.lvs-boks-fravaer { background: #ffebee; }
.lvs-boks-label { font-size: 13px; font-weight: 600; opacity: 0.8; }
.lvs-boks-tid .lvs-boks-label { color: #2e7d32; }
.lvs-boks-fravaer .lvs-boks-label { color: #c62828; }
.lvs-boks-tall { font-size: 34px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.lvs-boks-tid .lvs-boks-tall { color: #2e7d32; }
.lvs-boks-tid .lvs-boks-tall.lvs-boks-tall-minus { color: #c62828; }
.lvs-boks-fravaer .lvs-boks-tall { color: #c62828; }
.lvs-humanna { font-size: 15px; font-weight: 600; color: #5e35b1; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.lvs-humanna-mynt { display: inline-flex; }
.lvs-humanna-mynt svg { width: 20px; height: 20px; display: block; }
.lvs-tom { color: #888; font-size: 14px; padding: 12px 0; text-align: center; }

.lvs-kort {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e6e0f2; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 6px;
}
.lvs-kort-tidslinje, .lvs-kort-bot { cursor: pointer; }
.lvs-kort-tidslinje:hover, .lvs-kort-bot:hover { background: #faf8ff; }
.lvs-kort-bot { border-left: 4px solid #ef5350; }
.lvs-kort-gods { border-left: 4px solid #66bb6a; }
.lvs-kort-dato { font-size: 13px; font-weight: 600; color: #888; min-width: 42px; }
.lvs-kort-tittel { flex: 1; font-size: 14px; color: #444; }
.lvs-kort-netto { font-size: 22px; font-weight: 700; white-space: nowrap; }
.lvs-kort-netto.pluss { color: #2e7d32; }
.lvs-kort-netto.minus { color: #c62828; }
.lvs-kort-netto.noytral { color: #888; }
.lvs-slett-btn { font-size: 12px; padding: 3px 9px; border: 1px solid #c62828; background: #fff; color: #c62828; border-radius: 5px; cursor: pointer; }
.lvs-slett-btn:hover { background: #fdecea; }

.lvs-okter { flex: 1; display: flex; gap: 14px; min-width: 0; }
.lvs-okt { flex: 1; min-width: 0; }
.lvs-okt-bar { position: relative; height: 22px; }
.lvs-okt-segs { display: flex; height: 100%; border-radius: 5px; overflow: hidden; background: #eceff1; border: 1px solid #e0e0e0; }
.lvs-okt-naa {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: #263238; transform: translateX(-1px); z-index: 1; border-radius: 2px;
  animation: lvs-naa-puls 2s ease-in-out infinite;
}
@keyframes lvs-naa-puls {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(38,50,56,0.35); }
  50% { opacity: 0.55; box-shadow: 0 0 4px 1px rgba(38,50,56,0.25); }
}
.lvs-seg { height: 100%; }
.lvs-seg-bla { background: #42a5f5; }
.lvs-seg-gronn { background: #66bb6a; }
.lvs-seg-rod { background: #ef5350; }
.lvs-seg-gra { background: #cfd8dc; }
.lvs-seg-lysrod { background: #ffcdd2; }
.lvs-seg-lysgra { background: #f0f3f5; }
.lvs-okt-tid { display: flex; justify-content: space-between; font-size: 10px; color: #999; margin-top: 2px; }

.lvs-vis-mer { text-align: center; color: #5e35b1; font-size: 13px; cursor: pointer; padding: 8px; text-decoration: underline; }
.lvs-vis-mer:hover { color: #7c4dff; }

.lvs-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 10010; padding: 20px;
}
.lvs-modal-boks { background: #fff; border-radius: 14px; padding: 20px; max-width: 360px; width: 100%; max-height: 80vh; overflow-y: auto; }
.lvs-modal-tittel { font-size: 16px; font-weight: 700; margin-bottom: 12px; text-transform: capitalize; }
.lvs-modal-tabell { width: 100%; border-collapse: collapse; }
.lvs-modal-tabell th { text-align: left; font-size: 12px; color: #888; padding: 4px 8px; border-bottom: 1px solid #eee; }
.lvs-modal-tabell td { font-size: 14px; padding: 6px 8px; border-bottom: 1px solid #f3f3f3; }
.lvs-modal-lukk { margin-top: 14px; width: 100%; padding: 10px; border: none; border-radius: 8px; background: #7c4dff; color: #fff; font-size: 14px; cursor: pointer; }

/* Mentor: tom-tilstand */
.mentor-tom { padding: 24px; color: #888; }

/* ==================== NAVNETRENING ==================== */
.nt-modul { max-width: 900px; margin: 0 auto; padding: 20px 16px 60px; }
.nt-tomt { max-width: 900px; margin: 40px auto; text-align: center; color: #888; }
.nt-tomt-liten { color: #999; font-size: 13px; padding: 8px; }
.nt-topp { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.nt-tittel { font-size: 22px; font-weight: 700; color: #333; }
.nt-stripe { display: flex; gap: 8px; flex-wrap: wrap; }
.nt-pille { background: #eee; color: #555; border-radius: 14px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.nt-pille-gronn { background: #e8f5e9; color: #2e7d32; }
.nt-pille-roed { background: #ffebee; color: #c62828; }

.nt-knapper { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 24px; }
.nt-knapper-rad { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.nt-stor-knapp { grid-column: 1 / -1; background: #7c4dff; color: #fff; border: none; border-radius: 12px; padding: 18px; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nt-stor-knapp small { font-weight: 400; font-size: 12px; opacity: 0.85; }
.nt-stor-knapp:hover { filter: brightness(1.05); }
.nt-knapp { background: #fff; border: 1.5px solid #d1c4e9; border-radius: 12px; padding: 16px 12px; font-size: 15px; font-weight: 600; color: #4a148c; cursor: pointer; }
.nt-knapp:hover { background: #f3eeff; }
.nt-knapp-sek { border-color: #ccc; color: #555; }

/* Mosaikk */
.nt-mosaikk-mini { margin-top: 8px; }
.nt-mosaikk { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.nt-mos-rute { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f0f0f0; border: 2px solid transparent; }
.nt-tip { position: fixed; z-index: 10050; background: #333; color: #fff; padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; pointer-events: none; white-space: nowrap; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.nt-mos-rute img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: filter 0.4s, opacity 0.4s; }
.nt-mos-laast img { filter: grayscale(100%) blur(2px); opacity: 0.22; }
.nt-mos-mentee { border-color: #7c4dff; }
.nt-mos-vansk { position: absolute; top: 1px; right: 2px; font-size: 12px; color: #e53935; text-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 3px rgba(0,0,0,0.5); pointer-events: none; }

/* Økt */
.nt-okt { max-width: 720px; margin: 0 auto; padding: 16px; text-align: center; }
.nt-prog-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 auto 14px; max-width: 688px; }
.nt-avslutt-btn { background: none; border: 1px solid #ccc; border-radius: 8px; padding: 5px 12px; font-size: 13px; color: #666; cursor: pointer; white-space: nowrap; }
.nt-avslutt-btn:hover { background: #f5f5f5; }
.nt-sprint-tid-rad { text-align: center; font-size: 22px; font-weight: 800; color: #5e35b1; margin: 8px 0 14px; }
.nt-kortfoto { position: relative; display: inline-block; line-height: 0; }
.nt-vansk-btn { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,0.45); color: #f0f0f0; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s; }
.nt-vansk-btn:hover { background: rgba(0,0,0,0.6); }
.nt-vansk-btn.nt-vansk-pa { background: #e53935; color: #fff; box-shadow: 0 0 0 2px rgba(229,57,53,0.35); }
.nt-vansk-prog { flex: 1; font-size: 14px; font-weight: 700; color: #e53935; }
.nt-vansk-hint { background: #fff8e1; border: 1px solid #ffe082; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: #6b5300; margin: 0 auto 14px; max-width: 360px; text-align: center; }
/* Leken poenglinje (per økt, nivå-basert) */
.nt-prog-rad .nt-poenglinje { flex: 1; }
.nt-poenglinje { display: flex; align-items: center; gap: 10px; }
.nt-poeng-niva { font-size: 13px; font-weight: 800; color: #7c4dff; white-space: nowrap; display: inline-block; }
.nt-poeng-spor { position: relative; flex: 1; height: 17px; background: #ede7f6; border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); }
.nt-poeng-fyll { position: relative; overflow: hidden; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #b388ff, #7c4dff 60%, #5e35b1); transition: width 0.4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 8px rgba(124,77,255,0.5); }
.nt-poeng-fyll::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); background-size: 55px 100%; background-repeat: no-repeat; animation: ntPoengGlim 6s ease-in-out infinite; pointer-events: none; }
@keyframes ntPoengGlim { 0% { background-position: -55px 0; } 28% { background-position: 120% 0; } 100% { background-position: 120% 0; } }
.nt-poeng-iniva { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: -1px -1px 0 #311b92, 1px -1px 0 #311b92, -1px 1px 0 #311b92, 1px 1px 0 #311b92, 0 0 3px #311b92; }
.nt-poeng-tall { font-size: 15px; font-weight: 800; color: #5e35b1; white-space: nowrap; }
.nt-niva-opp { animation: ntNivaPop 0.6s ease; }
@keyframes ntNivaPop { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 100% { transform: scale(1); } }
.nt-fyll-opp { animation: ntFyllOpp 0.6s ease; }
@keyframes ntFyllOpp { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.7); } }
.nt-sporsmal { font-size: 18px; color: #444; min-height: 34px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.nt-sporsmal strong { font-size: inherit; font-weight: 700; }
.nt-hint strong { font-size: inherit; font-weight: 700; }
.nt-bilde-stor { display: flex; justify-content: center; margin: 0 auto 16px; }
.nt-foto-wrap { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.12); background: #f0f0f0; }
.nt-foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.nt-foto-graa { filter: grayscale(100%); }
.nt-foto-halv-v { object-position: 0% 25%; transform: scale(1.6); }
.nt-foto-laast { filter: grayscale(100%) blur(2px); opacity: 0.3; }

.nt-valg-navn { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 0 auto; }
.nt-valg-btn { background: #fff; border: 1.5px solid #d1c4e9; border-radius: 10px; padding: 14px; font-size: 16px; font-weight: 600; color: #333; cursor: pointer; }
.nt-valg-btn:hover { background: #f3eeff; }
.nt-valg-rett { background: #c8e6c9 !important; border-color: #66bb6a !important; color: #2e7d32 !important; }
.nt-valg-feil { background: #ffcdd2 !important; border-color: #ef5350 !important; color: #c62828 !important; }
.nt-valg-bilde.nt-valg-rett { background: none !important; box-shadow: 0 0 0 3px #66bb6a; }
.nt-valg-bilde.nt-valg-feil { background: none !important; box-shadow: 0 0 0 3px #ef5350; }
.nt-flervalg-fot { min-height: 8px; margin-top: 10px; }
.nt-valg-bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; max-width: 480px; margin: 0 auto; justify-items: center; }
.nt-valg-bilde { display: flex; line-height: 0; background: none; border: 2px solid transparent; border-radius: 14px; padding: 0; cursor: pointer; }
.nt-valg-bilde:hover { border-color: #7c4dff; }

.nt-feedback { font-size: 20px; font-weight: 700; min-height: 34px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.nt-fb-rett { color: #2e7d32; }
.nt-fb-feil { color: #c62828; }
.nt-fasit { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 6px; }
.nt-feil-valg { color: #c62828; font-size: 14px; margin-bottom: 10px; }
.nt-neste-btn { margin-top: 16px; background: #7c4dff; color: #fff; border: none; border-radius: 10px; padding: 12px 28px; font-size: 16px; font-weight: 600; cursor: pointer; }
.nt-hint { font-size: 17px; color: #7c4dff; margin-bottom: 8px; }

/* Gjenkalling: stemme + skriving */
.nt-recall-status { font-size: 17px; color: #555; min-height: 26px; margin: 8px 0; font-weight: 600; }
.nt-recall-status.nt-lytter { color: #7c4dff; animation: nt-lytt-puls 1s ease infinite alternate; }
@keyframes nt-lytt-puls { from { opacity: 0.55; } to { opacity: 1; } }
.nt-mic-knapp { display: inline-flex; width: auto; font-size: 18px; }
.nt-recall-rad { display: flex; gap: 8px; max-width: 360px; margin: 4px auto 0; }
.nt-recall-input { flex: 1; border: 1.5px solid #d1c4e9; border-radius: 10px; padding: 12px 14px; font-size: 17px; font-family: inherit; }
.nt-recall-input:focus { outline: none; border-color: #7c4dff; }
.nt-recall-rad .nt-neste-btn { margin-top: 0; }
.nt-recall-rett { border-color: #66bb6a !important; background: #e8f5e9; color: #2e7d32; }
.nt-recall-feil { border-color: #ef5350 !important; background: #ffebee; color: #c62828; }
.nt-recall-bytt { background: none; border: none; color: #888; font-size: 13px; cursor: pointer; margin-top: 12px; text-decoration: underline; }
.nt-recall-bytt:hover { color: #7c4dff; }
.nt-hint-btn { margin-top: 14px; background: #fff3e0; border: 1.5px solid #ffcc80; border-radius: 10px; padding: 9px 20px; font-size: 14px; font-weight: 600; color: #8a5a00; cursor: pointer; }
.nt-hint-btn:hover { background: #ffe0b2; }

/* Oppsummering */
.nt-oppsummering { text-align: center; padding: 40px 16px; }
.nt-opp-tall { font-size: 18px; color: #444; margin: 12px 0; }
.nt-opp-merker { margin: 10px 0; }
.nt-merker { display: flex; gap: 14px; flex-wrap: wrap; }
.nt-merke { background: #fff3e0; color: #e65100; border-radius: 12px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.nt-medalje { width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.28), inset 0 0 0 4px rgba(255,255,255,0.4), inset 0 0 0 5px rgba(0,0,0,0.08); }
.nt-medalje svg { width: 100%; height: 100%; display: block; }
.nt-medalje-buet { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.nt-medalje-tall { font-weight: 800; }
.nt-medalje-gull { background: radial-gradient(circle at 35% 28%, #ffe082, #f4b400 68%, #c98f00); }
.nt-medalje-solv { background: radial-gradient(circle at 35% 28%, #fafafa, #c2c7cc 68%, #969ba1); }
.nt-medalje-bronse { background: radial-gradient(circle at 35% 28%, #f0c19b, #cd7f32 68%, #9c5520); }
.nt-medalje-gronn { background: radial-gradient(circle at 35% 28%, #b9f6ca, #4caf50 68%, #2e7d32); }
.nt-medalje-lilla { background: radial-gradient(circle at 35% 28%, #e1bee7, #ab47bc 68%, #7b1fa2); }
.nt-medalje-poeng { background: radial-gradient(circle at 35% 28%, #b3e5fc, #039be5 66%, #01579b); }
.nt-medalje-poeng text { fill: #fff; }
.nt-medalje-lyn { background: radial-gradient(circle at 35% 28%, #ffe0b2, #fb8c00 64%, #e65100); }
.nt-medalje-lyn text { fill: #fff; }
.nt-medalje-gull text { fill: #6b4e00; }
.nt-medalje-solv text { fill: #37474f; }
.nt-medalje-bronse text, .nt-medalje-gronn text, .nt-medalje-lilla text { fill: #fff; }

/* Zoom */
.nt-zoom-info { color: #888; font-size: 13px; margin: 8px 0; }
.nt-zoom-knapp { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #d1c4e9; border-radius: 12px; padding: 8px 18px; cursor: pointer; margin: 4px 0 14px; }
.nt-zoom-knapp:hover:not(:disabled) { background: #f3eeff; }
.nt-zoom-knapp:disabled { opacity: 0.5; cursor: default; }
.nt-zoom-soyler { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.nt-zs { width: 6px; background: #ddd; border-radius: 2px; }
.nt-zs-lit { background: #7c4dff; }
.nt-zoom-tekst { font-size: 14px; font-weight: 600; color: #4a148c; }

/* Par-spill */
.nt-par-info, .nt-par-navn { margin: 12px 0; }
.nt-par-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 380px; margin: 0 auto; justify-items: center; }
.nt-par-celle { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nt-par-bilde { display: flex; line-height: 0; border: 3px solid transparent; border-radius: 14px; }
.nt-par-over { box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.45); border-radius: 14px; }
.nt-par-over .nt-par-slot { border-color: #7c4dff; border-style: solid; color: #7c4dff; }
.nt-par-feil { border-color: #ef5350 !important; box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.4); }
.nt-par-slot { min-height: 22px; min-width: 86px; border: 1.5px dashed #d1c4e9; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #888; padding: 3px 8px; }
.nt-par-slot-fylt { border-style: solid; border-color: #66bb6a; background: #e8f5e9; color: #2e7d32; font-weight: 600; }
.nt-par-navn { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nt-par-navn-btn { background: #fff; border: 1.5px solid #d1c4e9; border-radius: 18px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: grab; touch-action: none; }
.nt-par-drar { opacity: 0.35; }
.nt-par-klon { position: fixed; z-index: 11000; pointer-events: none; transform: translate(-50%, -50%); background: #fff; border: 1.5px solid #7c4dff; border-radius: 18px; padding: 8px 16px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.nt-par-lost { opacity: 0.35; }

/* Bokstavsalat */
.nt-salat-ruter { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px auto 4px; max-width: 688px; }
.nt-salat-rute { min-width: 30px; height: 42px; padding: 0 4px; border-bottom: 3px solid #d1c4e9; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #4a148c; }
.nt-salat-rute.nt-salat-rett { color: #2e7d32; border-bottom-color: #66bb6a; }
.nt-salat-rute.nt-salat-graa { color: #9e9e9e; border-bottom-color: #bdbdbd; }
.nt-salat-brikker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px auto 0; max-width: 688px; }
.nt-salat-brikker.nt-salat-ferdig .nt-salat-brikke:not(.nt-salat-rett):not(.nt-salat-feil) { opacity: 0.3; }
.nt-salat-brikke { width: 46px; height: 54px; background: #fff; border: 1.5px solid #d1c4e9; border-radius: 12px; font-size: 26px; font-weight: 700; color: #4a148c; cursor: pointer; }
.nt-salat-brikke.nt-salat-rett { background: #c8e6c9; border-color: #66bb6a; color: #2e7d32; }
.nt-salat-brikke.nt-salat-feil { background: #ffcdd2; border-color: #ef5350; color: #c62828; }
.nt-salat-brikke.nt-salat-brukt { visibility: hidden; }
.nt-salat-klon { position: fixed; z-index: 11000; pointer-events: none; transform: translate(-50%, -50%); width: 46px; height: 54px; display: flex; align-items: center; justify-content: center; background: #c8e6c9; border: 1.5px solid #66bb6a; border-radius: 12px; font-size: 26px; font-weight: 700; color: #2e7d32; transition: left 0.35s cubic-bezier(.22,.61,.36,1), top 0.35s cubic-bezier(.22,.61,.36,1); }

/* Navnebingo */
.nt-bingo-oppkall { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.nt-bingo-oppkall-tekst { font-size: 15px; color: #555; }
.nt-bingo-oppkall-navn { font-size: 28px; font-weight: 800; color: #4a148c; }
.nt-bingo-brett { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.nt-bingo-rute { position: relative; aspect-ratio: 1; background: #fff; border: 1.5px solid #d1c4e9; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; overflow: hidden; }
.nt-bingo-navn { font-size: 14px; font-weight: 700; color: #4a148c; text-align: center; line-height: 1.1; }
.nt-bingo-markert { background: #c8e6c9; border-color: #66bb6a; }
.nt-bingo-feil { background: #ffcdd2; border-color: #ef5350; animation: nt-bingo-blink 0.45s ease; }
@keyframes nt-bingo-blink { 0%, 100% { background: #ffcdd2; } 50% { background: #ef9a9a; } }
.nt-bingo-hake { position: absolute; top: 2px; right: 5px; color: #2e7d32; font-weight: 800; font-size: 16px; }
.nt-bingo-vinner { animation: nt-bingo-vinner-blink 0.5s ease-in-out infinite alternate; }
@keyframes nt-bingo-vinner-blink { from { background: #c8e6c9; box-shadow: 0 0 0 0 rgba(102, 187, 106, 0); } to { background: #a5d6a7; box-shadow: 0 0 0 4px rgba(102, 187, 106, 0.55); } }

/* Vendespill (memory) */
.nt-vende-brett { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; margin: 0 auto; }
.nt-vende-kort { aspect-ratio: 1; background: #7c4dff; border: 1.5px solid #7c4dff; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; overflow: hidden; }
.nt-vende-bak { font-size: 30px; font-weight: 800; color: rgba(255, 255, 255, 0.85); }
.nt-vende-aapen { background: #fff; border-color: #d1c4e9; }
.nt-vende-navn { font-size: 13px; font-weight: 700; color: #4a148c; text-align: center; line-height: 1.1; }
.nt-vende-matchet { background: #e8f5e9; border-color: #66bb6a; opacity: 0.85; }

/* Overlay */

/* Statistikk */
.nt-stat-tall { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }
.nt-stat-kort { background: #f7f5fb; border-radius: 12px; padding: 16px; text-align: center; }
.nt-stat-stor { font-size: 26px; font-weight: 700; color: #4a148c; }
.nt-stat-label { font-size: 12px; color: #777; margin-top: 2px; }
.nt-stat-seksjon { margin-bottom: 24px; }
.nt-stat-seksjon h3 { font-size: 15px; color: #555; margin: 0 0 10px; }
.nt-stolpe-rad { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nt-stolpe-label { width: 90px; font-size: 13px; color: #555; }
.nt-stolpe-bar { flex: 1; height: 18px; background: #eee; border-radius: 9px; overflow: hidden; }
.nt-stolpe-fyll { height: 100%; border-radius: 9px; transition: width 0.4s; }
.nt-stolpe-tall { width: 50px; text-align: right; font-size: 13px; color: #777; }
.nt-nivabar { display: flex; width: 100%; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); }
.nt-nivabar-seg { height: 100%; transition: width 0.3s; }
.nt-nivabar-tegn { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 12px; color: #555; }
.nt-nivabar-tegn span { display: inline-flex; align-items: center; gap: 4px; }
.nt-nivabar-tegn i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Mellom-etappe-skjerm */
.nt-interstitial { text-align: center; padding: 48px 16px; }
.nt-int-emoji { font-size: 52px; margin-bottom: 8px; }
.nt-int-under { font-size: 16px; color: #555; margin: 8px 0 4px; }

/* Milepæl-feiring (konfetti) */
.nt-feiring { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); overflow: hidden; }
.nt-konf-lag { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nt-konf { position: absolute; top: -24px; opacity: 0.92; animation-name: nt-konf-fall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes nt-konf-fall { 0% { top: -24px; } 100% { top: 110%; } }
.nt-feir-kort { position: relative; background: #fff; border-radius: 20px; padding: 32px 40px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.3); animation: nt-feir-inn 0.5s cubic-bezier(.18,.89,.32,1.28); max-width: 90%; }
@keyframes nt-feir-inn { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.nt-feir-emoji { font-size: 58px; animation: nt-feir-sprett 0.9s ease infinite alternate; }
@keyframes nt-feir-sprett { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.nt-feir-tittel { font-size: 24px; font-weight: 800; color: #4a148c; margin: 8px 0 14px; }
.nt-feir-merker { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.nt-merke-stor { font-size: 16px; padding: 8px 18px; }
.nt-feir-ok { display: inline-flex; }


/* ============================================================
   PIZZA-LYKKEHJUL — ADMIN (Admin → Pizza)
   ============================================================ */

.pza-tab { padding: 16px 24px; max-width: 1000px; }
.pza-seksjon { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #e0e0e0; }
.pza-seksjon:last-child { border-bottom: none; }
.pza-seksjon h3 { margin: 0 0 10px 0; font-size: 16px; }
.pza-hjelp { margin: 0 0 10px 0; color: #666; font-size: 12px; line-height: 1.5; }
.pza-tom { color: #999; font-size: 13px; padding: 8px 0; }
.pza-null { color: #ccc; }
.pza-eller { color: #999; font-size: 12px; }

.pza-rad { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.pza-felt { font-size: 12px; color: #555; display: flex; flex-direction: column; gap: 3px; }
.pza-felt-bred { flex: 1; min-width: 200px; }
.pza-felt input, .pza-felt select { padding: 5px; font-size: 13px; }
.pza-felt-bred input { width: 100%; box-sizing: border-box; }
.pza-rad .admin-btn { margin-top: 0; }

.pza-advarsel {
  background: #fff3e0; border: 1px solid #ffcc80; border-radius: 6px;
  padding: 8px 10px; margin-bottom: 10px; font-size: 13px; color: #e65100;
}

/* ---- Meny-editor ---- */
.pza-pizzaer { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pza-pizza { border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; background: #fff; }
.pza-pizza-inaktiv { background: #fafafa; opacity: 0.65; }
.pza-pizza-topp { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pza-pizza-navn { flex: 1; min-width: 140px; padding: 5px; font-size: 14px; font-weight: 600; }
.pza-rekkefolge { width: 58px; padding: 4px; font-size: 12px; }
.pza-liten { font-size: 12px; color: #555; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pza-ingr { margin: 8px 0 0 0; padding-left: 12px; border-left: 2px solid #f0f0f0; }
.pza-ingr-rad { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.pza-ingr-navn { width: 170px; padding: 3px 5px; font-size: 12px; }
.pza-x {
  background: none; border: none; color: #c62828; font-size: 16px;
  cursor: pointer; padding: 0 5px; line-height: 1;
}
.pza-x:hover { color: #8e0000; }
.pza-legg-til {
  background: none; border: 1px dashed #b39ddb; color: #7c4dff;
  border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; margin-top: 4px;
}
.pza-legg-til:hover { background: #f3eeff; }
/* Lås på pizzaer med åpne bestillinger — endring av navn/ingredienser ville endret
   bestillingen under eleven. Frosne bestillinger har snapshot og teller ikke. */
.pza-laas {
  background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px;
  padding: 6px 10px; margin-bottom: 8px; font-size: 12px; color: #795548; line-height: 1.5;
}
.pza-laas-aapen { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
.pza-laas-opp {
  background: none; border: none; padding: 0; font-size: 12px; font-weight: 700;
  color: #7c4dff; text-decoration: underline; cursor: pointer;
}
.pza-pizza input:disabled, .pza-pizza button:disabled { opacity: .5; cursor: not-allowed; background: #f0f0f0; }
.pza-pizza .pza-x:disabled { background: none; }

/* ---- Statistikk-tabell ---- */
.pza-graf { min-height: 120px; }
.pza-tabell { width: 100%; border-collapse: collapse; }
.pza-th { cursor: pointer; user-select: none; }
.pza-th-tall, .pza-tall { text-align: right; }
.pza-th-foto { width: 46px; }
.pza-tall { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pza-navn-celle { font-weight: 600; }
.pza-foto {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; object-position: 50% 25%; background: #eee;
}

/* ---- Bestillinger ---- */
.pza-best-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pza-best-elev {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #eee; border-radius: 8px; padding: 8px 10px; background: #fff;
}
.pza-best-innhold { flex: 1; min-width: 0; }
.pza-best-navn { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.pza-best-linje { font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 1px 0; }
.pza-uten { color: #c62828; font-size: 12px; }
/* GLUTENFRI: rød innrammet markør — samme språk på skjerm og utskrift, så den
   ikke kan overses når admin bestiller. */
.pza-gf {
  color: #c62828; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  border: 1px solid #c62828; border-radius: 10px; padding: 1px 7px;
}
.pza-merke { border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.pza-merke-laast { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }
.pza-merke-apen { background: #fff3e0; border: 1px solid #ffcc80; color: #e65100; }

/* ---- In-app dialoger (erstatter confirm/prompt) ---- */
.pza-modal-ov {
  position: fixed; inset: 0; z-index: 10003;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.pza-modal {
  background: #fff; border-radius: 14px; padding: 22px 24px;
  max-width: 460px; width: calc(100% - 40px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  animation: pza-modal-inn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pza-modal-inn {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pza-modal h3 { margin: 0 0 8px 0; font-size: 17px; }
.pza-modal p { margin: 0 0 16px 0; font-size: 13px; color: #555; line-height: 1.5; }
.pza-modal-label { display: block; font-size: 12px; color: #555; margin-bottom: 16px; }
.pza-modal-input { display: block; width: 100%; box-sizing: border-box; padding: 7px; margin-top: 4px; font-size: 14px; }
.pza-modal-knapper { display: flex; gap: 8px; justify-content: flex-end; }
.pza-modal-knapper .admin-btn { margin-top: 0; }
.pza-avbryt { background: #fff; color: #555; border: 1px solid #ccc; }
.pza-avbryt:hover { background: #f5f5f5; }

/* ---- Utskrift av bestillingslisten ---- */
#pzaPrint { position: absolute; top: 0; left: -10000px; width: 700px; background: #fff; }
.pza-print-tittel { margin: 0 0 4px 0; font-size: 20px; }
.pza-print-meta { font-size: 12px; color: #666; margin-bottom: 14px; }
.pza-print-rad {
  display: flex; gap: 12px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid #ddd; break-inside: avoid;
}
.pza-print-foto {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; object-position: 50% 25%; background: #eee; flex: none;
}
.pza-print-navn { width: 150px; font-weight: 600; font-size: 14px; flex: none; }
.pza-print-pizza { font-size: 14px; }
.pza-print-detalj { font-size: 12px; color: #444; }
/* Egen markør ytterst til høyre, ikke en del av «uten …»-kjeden — skal kunne
   skannes nedover arket. `print-color-adjust: exact` er nødvendig: uten den
   stripper nettleseren farge/ramme ved utskrift, og markøren kommer ut grå. */
.pza-print-gf {
  margin-left: auto; flex: none;
  border: 2px solid #c62828; border-radius: 6px; padding: 3px 10px;
  color: #c62828; font-size: 13px; font-weight: 800; letter-spacing: .5px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

@media print {
  body.pza-skriver-ut * { visibility: hidden; }
  body.pza-skriver-ut #pzaPrint, body.pza-skriver-ut #pzaPrint * { visibility: visible; }
  body.pza-skriver-ut #pzaPrint {
    position: absolute; top: 0; left: 0; right: 0; width: auto; padding: 0;
  }
}

/* ==================== ADMIN: PERMISJON (godkjenningskø) ==================== */
.perm-admin { padding: 16px 20px; max-width: 760px; }
.perm-h2 { font-size: 18px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.perm-h3 { font-size: 14px; color: #555; margin: 24px 0 8px; }
.perm-merke { background: #1565c0; color: #fff; border-radius: 12px; font-size: 13px; padding: 1px 9px; font-weight: 700; }
.perm-tom { color: #888; font-size: 14px; }
.perm-kort { border: 1px solid #ddd; border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.perm-kort-ko { border-left: 4px solid #1565c0; }
.perm-kort-info { background: #f7f7f9; }
.perm-kort-avgjort { background: #f5f5f5; padding: 8px 14px; }
.perm-kort-topp { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.perm-elev { font-weight: 700; font-size: 15px; }
.perm-periode { color: #333; font-size: 14px; }
.perm-soker { font-size: 12px; color: #888; margin-top: 2px; }
.perm-dager { margin: 8px 0; padding-left: 20px; font-size: 13px; color: #444; }
.perm-begrunnelse { font-size: 13px; background: #fafafa; border-radius: 4px; padding: 6px 10px; margin: 8px 0; }
.perm-uttal { font-size: 13px; margin: 6px 0; }
.perm-uttal-mangler { color: #b26a00; }
.perm-anbefaler-ja { color: #2e7d32; font-weight: 600; }
.perm-anbefaler-nei { color: #c62828; font-weight: 600; }
.perm-vedtak-felt { margin-top: 10px; }
.perm-vedtak-komm { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; margin-bottom: 8px; }
.perm-knapper { display: flex; gap: 8px; }
.perm-btn { padding: 6px 16px; border: none; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
.perm-btn-innvilg { background: #2e7d32; color: #fff; }
.perm-btn-avsla { background: #c62828; color: #fff; }
.perm-btn-avbryt { background: #e0e0e0; color: #333; }
.perm-status-innvilget { color: #2e7d32; font-weight: 600; font-size: 13px; }
.perm-status-avslatt { color: #c62828; font-weight: 600; font-size: 13px; }
.perm-status-bortfalt { color: #888; font-weight: 600; font-size: 13px; }
.perm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.perm-les-btn { margin-left: auto; background: none; border: none; color: #1565c0; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }
.perm-status-opphevet { color: #6a1b9a; font-weight: 600; font-size: 13px; }
.perm-kort-opphevet { opacity: 0.72; }
.perm-opphev-btn { margin-left: 12px; background: none; border: none; color: #c62828; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }
.perm-opphev-grunn { font-size: 12px; color: #6a1b9a; font-style: italic; margin-top: 6px; }
.perm-opphev-info { font-size: 13px; color: #555; line-height: 1.5; margin: 0 0 14px; }
.perm-opphev-label { font-size: 13px; font-weight: 600; color: #444; display: block; margin-bottom: 6px; }
.perm-opphev-tekst { width: 100%; box-sizing: border-box; font-size: 14px; font-family: inherit; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; resize: vertical; margin-bottom: 16px; }
.perm-vedtak-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10002; padding: 20px; }
.perm-vedtak-boks { background: #fff; border-radius: 10px; padding: 22px 26px; max-width: 640px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
.perm-vedtak-boks h3 { margin: 0 0 12px; font-size: 16px; }
.perm-vedtak-tekst { flex: 1; overflow-y: auto; white-space: pre-wrap; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.5; color: #222; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 16px 18px; margin: 0 0 16px; }
.perm-vedtak-modal-knapper { display: flex; gap: 8px; justify-content: flex-end; }

/* ==================== FRAVÆR: MENTOR-PERMISJON-UTTALELSE ==================== */
.fravaer-perm { margin: 0 0 14px; padding: 12px 16px; background: #eef4fb; border: 1px solid #cfe0f2; border-radius: 8px; }
.fravaer-perm-h3 { font-size: 14px; color: #1565c0; margin: 0 0 10px; }
.fravaer-perm-kort { background: #fff; border: 1px solid #ddd; border-left: 4px solid #1565c0; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.fravaer-perm-kort:last-child { margin-bottom: 0; }
.fravaer-perm-topp { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fravaer-perm-elev { font-weight: 700; font-size: 15px; }
.fravaer-perm-periode { color: #333; font-size: 14px; }
.fravaer-perm-begrunnelse { font-size: 13px; background: #fafafa; border-radius: 4px; padding: 6px 10px; margin: 8px 0; }
.fravaer-perm-komm { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; margin: 8px 0; resize: vertical; }
.fravaer-perm-knapper { display: flex; gap: 8px; }
/* Nøytrale knapper: lik visuell vekt (hvit + ramme), ingen fylt «gjør dette».
   Meningen ligger i teksten + en diskret fargetone på ramme/skrift. */
.fravaer-perm-btn { padding: 6px 14px; border: 1px solid #bbb; background: #fff; color: #333; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
.fravaer-perm-btn:hover:not(:disabled) { background: #f5f5f5; }
.fravaer-perm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fravaer-perm-anbefaler, .fravaer-perm-innvilg { border-color: #4c8c50; color: #1b5e20; }
.fravaer-perm-anbefaler-ikke { border-color: #cf7b7b; color: #b23b3b; }
.fravaer-perm-reg-btn { display: block; width: 100%; margin: 0 0 12px; padding: 9px 14px; border: 1px dashed #9575cd; background: #f6f2fc; color: #5b34d1; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.fravaer-perm-reg-btn:hover { background: #efe8fb; }
.fravaer-perm-reg-rad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fravaer-perm-reg-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.fravaer-perm-reg-knapper { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fravaer-perm-reg-hint { font-size: 12px; color: #777; margin-top: 6px; }
/* Fraværs-oppsummering på kortet (samme tall som elev-fokus). */
.fravaer-perm-fravaer { font-size: 13px; color: #444; background: #f6f8fb; border-radius: 4px; padding: 6px 10px; margin: 8px 0; }
.fravaer-perm-fravaer strong { color: #1565c0; }
/* Delvis-dag: mentor avgjør selv → egen aksentfarge + merkelapp. */
.fravaer-perm-kort-delvis { border-left-color: #7b1fa2; }
.fravaer-perm-merkelapp { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #7b1fa2; background: #f3e5f5; border-radius: 10px; padding: 2px 8px; margin: 6px 0 2px; }
/* Spinner under behandling (CF-kall har cold start) — delt av admin- og mentor-flaten. */
.perm-spinner, .fravaer-perm-spinner {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  border: 2px solid rgba(0, 0, 0, 0.18); border-top-color: #555; border-radius: 50%;
  animation: perm-snurr 0.7s linear infinite;
}
@keyframes perm-snurr { to { transform: rotate(360deg); } }
.perm-kort-spinner { margin-top: 8px; font-size: 13px; color: #555; display: flex; align-items: center; gap: 8px; }