/* ==========================================
       DESIGN SYSTEM
       ========================================== */
    :root {
      --col-width: 140px;
      --primary: #F71B00;
      --primary-dark: #CC1500;
      --bg: #FFF2E9;
      --bg-panel: #2A2A2A;
      --surface: #FFFFFF;
      --text: #1D1D1D;
      --text-muted: #7A6E68;
      --border: #E5D8CF;
      --accent: #2563eb;
      --bg2: #F0E5DC;
      --card: rgba(255,255,255,0.05);
      --card-hover: rgba(255,255,255,0.09);
      /* Org-modal A+B tokens */
      --ink-soft: #5C5048;
      --line-soft: #D6C7BC;
      --amber: #F59E0B;
      --amber-soft: rgba(251,191,36,0.15);
      --amber-text: #9A6E0A;
      --primary-pill: #FFE7DD;
      --header-dark: #1D1D1D;
      --paper: #FFF8F1;
      --header-panel-height: 215px;
      --area-header-height: 40px;
      --loc-header-height: 50px;
      --hour-height: 120px;
      --half-hour-height: 60px;
      --quarter-height: 30px;
    }

    .spinner {
      border: 4px solid rgba(255,255,255,0.15);
      border-top: 4px solid white;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    html, body {
      height: 100vh;
      margin: 0;
      overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background-color: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }
    body { display: flex; flex-direction: column; }

    /* ==========================================
       HEADER
       ========================================== */
    .header-panel {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 2000;
      background: #1D1D1D;
      padding: 10px 24px 0;
      border-bottom: none;
      box-shadow: 0 4px 20px rgba(0,0,0,0.35);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 0;
      transform: translateY(0);
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.28s ease;
    }
    .header-panel.skjult {
      transform: translateY(-100%);
      box-shadow: none;
    }
    #header-spacer {
      flex-shrink: 0;
      transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .header-row1 {
      display: flex; align-items: center; gap: 12px;
      padding: 6px 0 10px;
    }
    .header-row2 {
      display: flex; align-items: center; gap: 0;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 7px 0;
    }
    .header-row3 {
      display: flex; align-items: center; gap: 0;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 8px 0 10px;
    }
    .h-group {
      display: flex; align-items: center; gap: 6px;
      flex-shrink: 0;
    }
    .h-divider {
      width: 1px; height: 20px;
      background: rgba(255,255,255,0.12);
      margin: 0 12px;
      flex-shrink: 0;
    }
    .header-panel .btn-ai-primary {
      background: linear-gradient(135deg,#CC1500,#F71B00);
      color: white;
      border: 1px solid rgba(255,255,255,0.2);
      font-weight: 700;
      box-shadow: 0 2px 10px rgba(247,27,0,0.4);
    }
    .header-panel .btn-ai-secondary {
      background: rgba(247,27,0,0.15);
      color: white;
      border: 1px solid rgba(247,27,0,0.4);
      font-weight: 700;
    }
    #header-pin-btn.pinned {
      background: rgba(255,255,255,0.18) !important;
      border-color: rgba(255,255,255,0.45) !important;
      color: white !important;
    }
    .header-zone {
      display: flex; align-items: center; gap: 6px;
      padding: 0 16px;
      flex-shrink: 0;
    }
    .header-zone:first-child { padding-left: 0; }
    .header-zone + .header-zone { border-left: 1px solid rgba(255,255,255,0.12); }
    .header-zone.grow { flex: 1; }
    .zone-label {
      font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.3);
      text-transform: uppercase; letter-spacing: 0.1em;
      white-space: nowrap; margin-right: 4px;
    }

    .ctrl-group {
      display: flex; align-items: center; gap: 3px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px; padding: 2px 5px 2px 7px;
      flex-shrink: 0;
    }
    .ctrl-label {
      font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.35);
      text-transform: uppercase; letter-spacing: 0.08em;
      padding-right: 5px; margin-right: 1px;
      border-right: 1px solid rgba(255,255,255,0.14);
      white-space: nowrap;
    }
    .header-sep {
      width: 1px; height: 18px; background: rgba(255,255,255,0.15); flex-shrink: 0;
    }

    /* ORG/EVENT-CHIP OG DROPDOWN */
    .org-chip {
      display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 8px; padding: 5px 10px 5px 10px;
      color: white; font-size: 12px; font-weight: 600;
      cursor: pointer; transition: background 0.15s; white-space: nowrap;
      font-family: inherit;
    }
    .org-chip:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
    .org-chip-sep { opacity: 0.3; margin: 0 2px; }
    .org-chip-event { color: rgba(255,255,255,0.65); font-weight: 500; }
    .org-chip-arrow { opacity: 0.45; font-size: 10px; margin-left: 2px; }

    .org-dropdown-popup {
      position: absolute; top: calc(100% + 8px); right: 0;
      background: white; border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
      border: 1px solid #E5E7EB; min-width: 240px; z-index: 9999;
      overflow: hidden; animation: dropdownFadeIn 0.12s ease;
    }
    @keyframes dropdownFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
    .org-dropdown-header {
      padding: 12px 16px 8px;
      font-size: 10px; font-weight: 700; color: #9CA3AF;
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .org-dropdown-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 16px; font-size: 13px; color: #1D1D1D;
      cursor: pointer; transition: background 0.1s; text-decoration: none;
    }
    .org-dropdown-item:hover { background: #F9FAFB; }
    .org-dropdown-item.active { background: #FFF7ED; color: #EA580C; font-weight: 600; }
    .org-dropdown-item.action { color: #374151; font-weight: 500; }
    .org-dropdown-sep { height: 1px; background: #F1F5F9; margin: 4px 0; }

    .hoved-tittel {
      margin: 0;
      font-family: 'Bebas Neue', 'Inter', sans-serif;
      font-size: 22px;
      font-weight: 400;
      color: white;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    /* ==========================================
       BUTTONS — base (light bg)
       ========================================== */
    button {
      padding: 7px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }
    button:hover { background: var(--bg); border-color: #C8B8AD; }
    button.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(247,27,0,0.35);
    }

    /* Header button overrides (dark bg) */
    .header-panel button {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.85);
      border-color: rgba(255,255,255,0.15);
      padding: 5px 11px;
      font-size: 12px;
    }
    .header-panel button:hover {
      background: rgba(255,255,255,0.15);
      border-color: rgba(255,255,255,0.3);
      color: white;
    }
    .header-panel button.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(247,27,0,0.5);
    }

    /* ==========================================
       SELECTS — base (light bg)
       ========================================== */
    select {
      padding: 7px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    select:hover { border-color: #94A3B8; }
    select option { background: white; color: var(--text); }

    /* Header select overrides (dark bg) */
    .header-panel select {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.85);
      border-color: rgba(255,255,255,0.15);
      padding: 5px 8px;
      font-size: 12px;
    }
    .header-panel select:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }
    .header-panel select option { background: #2A2A2A; color: white; }

    /* Header text input */
    .header-panel input[type="text"] {
      padding: 5px 10px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 6px;
      background: rgba(255,255,255,0.08);
      color: white;
      font-size: 12px;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    .header-panel input[type="text"]:focus {
      outline: none;
      border-color: rgba(255,255,255,0.4);
      background: rgba(255,255,255,0.12);
    }
    .header-panel input[type="text"]::placeholder { color: rgba(255,255,255,0.35); }
    .header-panel input[type="range"] { cursor: pointer; accent-color: white; }

    .controls-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

    /* ==========================================
       TIMELINE
       ========================================== */
    .timeline-wrapper { flex-grow: 1; overflow: auto; display: flex; position: relative; }

    .time-column {
      position: sticky; left: 0; z-index: 990;
      width: 65px; flex-shrink: 0;
      background-color: var(--bg);
      border-right: 1px solid var(--border);
      height: var(--timeline-height, 11520px);
    }
    .time-spacer { height: calc(var(--area-header-height) + var(--loc-header-height)); box-sizing: border-box; }

    .time-slot { height: 120px; box-sizing: border-box; position: relative; border-bottom: 1px solid transparent; }
    .time-text {
      position: absolute; top: -7px; right: 12px;
      font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em;
    }

    .area-group {
      display: flex; flex-direction: column;
      min-height: var(--timeline-height, 11520px);
      border-right: 2px solid var(--border);
    }
    .area-header {
      position: sticky; top: 0; z-index: 800;
      height: var(--area-header-height); line-height: var(--area-header-height);
      background: #374151; color: white;
      text-align: center; font-weight: 700; font-size: 11px;
      text-transform: uppercase; letter-spacing: 0.1em;
    }
    .location-columns-container { display: flex; flex-direction: row; flex-grow: 1; min-height: 100%; }
    .location-column {
      height: var(--timeline-height, 11520px);
      position: relative; box-sizing: border-box;
      border-right: 1px solid #CBD5E1;
      min-width: var(--col-width); max-width: var(--col-width); flex: 0 0 var(--col-width);
    }
    .location-header {
      position: sticky; top: var(--area-header-height); z-index: 700;
      height: var(--loc-header-height); line-height: var(--loc-header-height);
      background: var(--surface); text-align: center;
      font-weight: 700; font-size: 11px; color: var(--text);
      border-bottom: 2px solid var(--border);
      letter-spacing: 0.06em; text-transform: uppercase;
    }

    .grid-container {
      flex-grow: 1; height: var(--timeline-height, 11520px);
      display: flex; position: relative; cursor: pointer;
      background-image:
        linear-gradient(to bottom, #94A3B8 1px, transparent 1px),
        linear-gradient(to bottom, #B8C5D3 1px, transparent 1px),
        linear-gradient(to bottom, #DDE4EC 1px, transparent 1px);
      background-size: 100% var(--hour-height), 100% var(--half-hour-height), 100% var(--quarter-height);
    }

    /* ==========================================
       EVENT CARDS
       ========================================== */
    .event-card {
      position: absolute;
      border-radius: 8px;
      color: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
      transition: box-shadow 0.15s ease, height 0.15s ease;
      border: none;
      display: flex; flex-direction: column;
      justify-content: space-between; align-items: center;
      text-align: center; padding: 6px 5px;
    }
    .event-card:hover:not(.is-resizing) {
      height: auto !important;
      min-height: var(--card-h, 40px);
      overflow: visible;
      z-index: 50 !important;
      box-shadow: 0 8px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .event-card.is-resizing {
      overflow: hidden;
      cursor: ns-resize;
    }
    .card-expanded {
      display: none; width: 100%; margin-top: 6px;
      padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.25);
      text-align: left;
    }
    .event-card:hover:not(.is-resizing) .card-expanded { display: block; }
    .card-exp-tid { font-size: 12px; font-weight: 700; margin-bottom: 5px; opacity: 0.95; }
    .card-exp-rad { font-size: 11px; opacity: 0.85; line-height: 1.5; }
    .card-exp-lbl { opacity: 0.65; margin-right: 3px; }
    .card-exp-besk { font-size: 11px; opacity: 0.8; margin-top: 5px; line-height: 1.4; font-style: italic; }
    .card-exp-konflikt { margin-top: 6px; font-size: 11px; font-weight: 700; color: #FBBF24; }

    .resizer {
      position: absolute; bottom: 0; left: 0; width: 100%; height: 8px;
      cursor: ns-resize;
      background: rgba(0,0,0,0.15);
      border-top: 1px solid rgba(0,0,0,0.08);
      border-radius: 0 0 8px 8px;
    }
    .resizer:hover { background: rgba(0,0,0,0.28); }

    /* ==========================================
       MODALS
       ========================================== */
    .modal {
      display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.65);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .modal-content {
      background: var(--surface); margin: 3% auto; padding: 32px;
      border-radius: 16px; width: 650px; max-width: 95%;
      max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
      box-shadow: 0 25px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .modal-header {
      margin-top: 0; border-bottom: 1px solid var(--border);
      padding-bottom: 16px; margin-bottom: 24px;
      font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
    }

    /* Reset buttons/selects inside modals to light theme */
    .modal button, .modal-content button { background: var(--surface); color: var(--text); border-color: var(--border); }
    .modal button:hover, .modal-content button:hover { background: var(--bg); border-color: #C8B8AD; color: var(--text); }
    .modal select, .modal-content select { background: var(--surface); color: var(--text); border-color: var(--border); }
    .modal select option, .modal-content select option { background: white; color: var(--text); }

    /* ── Event-skjema: høyre sidebar ──────────────────────────────── */
    #eventModal {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      left: auto;
      right: 0;
      width: 480px;
      pointer-events: none;
    }
    /* Delt stil for event- og info-sidebar */
    #eventModal .modal-content,
    #infoModal  .modal-content {
      margin: 0 !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      border-left: 1px solid var(--border);
      box-shadow: -12px 0 48px rgba(0,0,0,0.35) !important;
      pointer-events: all;
      box-sizing: border-box !important;
      overflow-y: auto;
      animation: event-sidebar-in 0.28s cubic-bezier(0.32,0.72,0,1);
    }
    #eventModal .modal-content {
      width: 480px !important;
      border-radius: 16px 0 0 16px !important;
    }
    #infoModal .modal-content {
      width: 600px !important;
      border-radius: 16px 0 0 16px !important;
    }
    @keyframes event-sidebar-in {
      from { transform: translateX(100%); }
      to   { transform: translateX(0); }
    }

    /* ── Info-sidebar ──────────────────────────────────────── */
    #infoModal {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      left: auto;
      right: 0;
      width: 600px;
      pointer-events: none;
    }
    #infoModal .info-layout {
      grid-template-columns: 1fr !important;
    }
    #infoModal .info-kp-kolonne {
      border-left: none !important;
      padding-left: 0 !important;
      border-top: 1px solid var(--border);
      padding-top: 20px;
      margin-top: 8px;
    }
    #infoModal .info-modal-footer {
      position: sticky; bottom: 0;
      background: var(--surface);
      padding: 14px 0 4px !important;
      margin-top: 8px;
      border-top: 1px solid var(--border);
    }

    .event-modal-hd {
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 2;
      background: var(--surface);
      padding-bottom: 14px; margin-bottom: 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      padding-top: 2px;
    }
    #eventModal .modal-header,
    #infoModal  .modal-header {
      border: none !important; padding: 0 !important; margin: 0 !important;
      font-size: 16px;
    }
    .event-modal-lukk {
      width: 28px; height: 28px; border-radius: 7px;
      border: 1px solid var(--border) !important; background: transparent !important;
      color: var(--text-muted) !important; cursor: pointer;
      display: flex !important; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background .12s, color .12s;
      padding: 0;
    }
    .event-modal-lukk:hover { background: var(--border) !important; color: var(--text) !important; }
    #eventModal .mal-footer-row {
      position: sticky; bottom: 0;
      background: var(--surface);
      padding: 14px 0 2px !important;
      margin-top: 12px;
      border-top: 1px solid var(--border);
    }

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

    .form-group label {
      display: block; font-size: 11px; font-weight: 700;
      margin-bottom: 6px; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em;
    }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%; box-sizing: border-box; padding: 10px 12px;
      border: 1.5px solid var(--border); border-radius: 8px;
      font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      outline: none; border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(247,27,0,0.12);
    }
    .form-group select option { background: white; color: var(--text); }

    .info-item { background: var(--bg); padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border); }
    .info-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; display: block; margin-bottom: 4px; letter-spacing: 0.07em; }
    .info-value { font-size: 14px; font-weight: 600; color: var(--text); }

    .full-width { grid-column: span 2; }

    .btn-save {
      background: var(--primary) !important; color: white !important; font-weight: 700;
      border: none !important; padding: 11px 24px; border-radius: 8px; font-size: 14px;
      box-shadow: 0 2px 8px rgba(247,27,0,0.3);
    }
    .btn-save:hover { background: var(--primary-dark) !important; box-shadow: 0 4px 14px rgba(247,27,0,0.4) !important; }
    .btn-cancel {
      background: var(--bg) !important; color: var(--text-muted) !important;
      border: 1.5px solid var(--border) !important; padding: 11px 24px;
      border-radius: 8px; font-size: 14px; font-weight: 600; margin-left: 10px;
    }
    .btn-cancel:hover { background: var(--border) !important; color: var(--text) !important; }

    /* ==========================================
       TOAST
       ========================================== */
    #toast-varsel {
      visibility: hidden; min-width: 260px;
      background: #0F172A; color: white;
      border-radius: 12px; padding: 14px 18px;
      position: fixed; z-index: 3000; left: 50%; bottom: 32px; transform: translateX(-50%);
      box-shadow: 0 8px 32px rgba(0,0,0,0.35);
      font-size: 14px; font-weight: 500;
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    #toast-varsel.show { visibility: visible; animation: fadein 0.25s, fadeout 0.3s 4.7s; }
    @keyframes fadein { from { bottom: 16px; opacity: 0; } to { bottom: 32px; opacity: 1; } }
    @keyframes fadeout { from { bottom: 32px; opacity: 1; } to { bottom: 16px; opacity: 0; } }

    .btn-undo { background: #EF4444; color: white; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; }
    .btn-undo:hover { background: #DC2626; }

    /* ==========================================
       INFO MODAL — TO-KOLONNE KJØREPLAN-LAYOUT
       ========================================== */
    #infoModal .modal-content {
      width: 940px;
    }
    .info-layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 0 28px;
      align-items: start;
    }
    .info-kp-kolonne {
      border-left: 1px solid var(--border);
      padding-left: 28px;
    }
    .info-kp-kolonne .kp-seksjon {
      margin-top: 0;
      border-top: none;
      padding-top: 0;
    }
    .info-meta-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 16px;
      margin-bottom: 12px;
    }
    .info-meta-grid .info-item { margin: 0; }
    .info-meta-extra { display: flex; flex-direction: column; gap: 10px; }
    @media (max-width: 720px) {
      #infoModal .modal-content { width: 95vw; }
      .info-layout { grid-template-columns: 1fr; }
      .info-kp-kolonne { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 8px; }
    }

    /* ==========================================
       CONFIRM MODAL
       ========================================== */
    #confirmModal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(15,23,42,0.65); backdrop-filter: blur(6px); }
    #confirmModal .modal-content { background: var(--surface); margin: 15% auto; padding: 32px; border-radius: 16px; width: 360px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.2); }

    /* KPI MODAL */
    #kpiModal { display: none; position: fixed; z-index: 3100; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px); }
    #kpiModal .modal-content { background: var(--surface); margin: 4% auto; padding: 28px 32px;
      border-radius: 16px; width: 560px; max-width: 95%; max-height: 85vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04); }
    .kpi-modal-tittel { margin: 0 0 20px; font-size: 18px; font-weight: 800; color: var(--text);
      letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
    .kpi-modal-seksjon { font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.08em; margin: 20px 0 10px; }
    .kpi-rad { display: flex; align-items: center; gap: 10px; padding: 7px 0;
      border-bottom: 1px solid var(--border); }
    .kpi-rad:last-child { border-bottom: none; }
    .kpi-rad-label { font-size: 13px; font-weight: 600; color: var(--text); width: 160px; min-width: 160px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kpi-rad-tall { font-size: 12px; color: var(--text-muted); min-width: 90px; text-align: right; white-space: nowrap; }
    .kpi-bar-wrapper { flex: 1; background: var(--border); border-radius: 4px; height: 7px; overflow: hidden; min-width: 60px; }
    .kpi-bar { height: 100%; border-radius: 4px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }
    .kpi-summary-box { background: var(--bg); border-radius: 10px; padding: 14px 18px;
      display: flex; gap: 24px; margin-bottom: 4px; flex-wrap: wrap; }
    .kpi-summary-stat { display: flex; flex-direction: column; }
    .kpi-summary-tall { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
    .kpi-summary-lbl  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    #confirmModal h3 { margin-top: 0; color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
    #confirmModal p { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
    .btn-danger { background: #EF4444; color: white; border: none; padding: 11px 24px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; box-shadow: 0 2px 8px rgba(239,68,68,0.3); }
    .btn-danger:hover { background: #DC2626; }

    /* ==========================================
       KONFLIKT-BADGE
       ========================================== */
    .har-konflikt {
      border: 2px solid #FBBF24 !important;
      box-shadow: 0 0 0 1px rgba(251,191,36,0.4), 0 2px 8px rgba(0,0,0,0.2) !important;
    }
    .har-konflikt::before {
      content: '⚠';
      position: absolute; top: 3px; right: 5px;
      font-size: 10px; z-index: 10; line-height: 1;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    }
    #konflikt-chip {
      display: none; cursor: pointer; padding: 2px 8px;
      background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.4);
      border-radius: 6px; font-size: 12px; font-weight: 700; color: #FBBF24;
      white-space: nowrap; transition: background 0.15s;
      align-items: center; gap: 4px;
    }
    #konflikt-chip:hover { background: rgba(251,191,36,0.25); }

    /* ==========================================
       HEATMAP I TIDSKOLONNE
       ========================================== */
    .heatmap-celle {
      position: absolute; right: 0; width: 5px; border-radius: 1px 0 0 1px;
      pointer-events: none;
    }

    /* ==========================================
       HENDELSESMALER
       ========================================== */
    .mal-bar { display: none; }
    .mal-footer-row {
      display: flex; align-items: center; gap: 8px;
      margin-top: 20px; flex-wrap: wrap;
    }
    .btn-sekundær {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 7px; border: 1px solid var(--border);
      background: var(--bg); color: var(--text); font-size: 12px; font-weight: 500;
      cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s;
    }
    .btn-sekundær:hover { border-color: var(--primary); color: var(--primary); }
    .mal-dropdown-panel {
      position: absolute; bottom: calc(100% + 6px); left: 0;
      min-width: 220px; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px;
      box-shadow: 0 8px 28px rgba(0,0,0,.15); z-index: 500;
      overflow: hidden;
    }
    .mal-panel-rad {
      display: flex; align-items: center;
    }
    .mal-liste-btn {
      flex: 1; padding: 9px 14px; text-align: left; border: none; background: none;
      color: var(--text); font-size: 13px; cursor: pointer;
    }
    .mal-liste-btn:hover { background: rgba(247,27,0,.06); color: var(--primary); }
    .mal-slett-inline-btn {
      padding: 9px 12px; border: none; background: none;
      color: var(--text-muted); font-size: 16px; cursor: pointer; flex-shrink: 0;
    }
    .mal-slett-inline-btn:hover { color: #EF4444; }

    /* ==========================================
       LEGENDE MODAL
       ========================================== */
    #legendeModal .modal-content { width: 440px; }
    .legende-rad { display: flex; align-items: center; gap: 10px; padding: 6px 0;
      border-bottom: 1px solid var(--border); font-size: 13px; }
    .legende-rad:last-child { border-bottom: none; }
    .legende-farge { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }

    /* ==========================================
       KPI DASHBOARD
       ========================================== */
    .kpi-box {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      border-left: 2px solid rgba(255,255,255,0.25);
      border-radius: 8px; padding: 4px 10px;
      display: flex; flex-direction: column; justify-content: center;
    }
    .kpi-title { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1px; }
    .kpi-value { font-size: 13px; font-weight: 800; color: white; white-space: nowrap; }

    /* ==========================================
       TOOLTIP
       ========================================== */
    .tooltip { position: relative; display: inline-block; margin-left: 5px; cursor: help; }
    .tooltip-icon { background: rgba(255,255,255,0.2); color: white; border-radius: 50%; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; }
    .tooltip-text {
      visibility: hidden; width: 180px; background-color: #0F172A; color: white;
      text-align: center; border-radius: 8px; padding: 8px 12px;
      position: absolute; z-index: 1000; bottom: 125%; left: 50%; margin-left: -90px;
      opacity: 0; transition: opacity 0.2s; font-size: 11px; font-weight: 400; line-height: 1.5;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
    }
    .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

    /* ==========================================
       DB STATUS BADGE
       ========================================== */
    .db-status-badge { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
    .status-green { background: rgba(16,185,129,0.15); color: #6EE7B7; border: 1px solid rgba(16,185,129,0.3); }
    .status-red { background: rgba(239,68,68,0.15); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.3); }

    /* ==========================================
       SETTINGS TABS
       ========================================== */
    .tab-btn {
      background: transparent !important; border: none !important;
      border-bottom: 2px solid transparent !important; border-radius: 0 !important;
      color: var(--text-muted) !important; font-weight: 600 !important;
      padding: 8px 16px !important; font-size: 14px !important; box-shadow: none !important;
    }
    .tab-btn:hover { color: var(--primary) !important; background: transparent !important; }
    .tab-btn.active { color: var(--primary) !important; border-bottom: 2px solid var(--primary) !important; background: transparent !important; box-shadow: none !important; }
    .org-tab-hjelp { font-size: 12px; color: var(--text-muted); padding: 6px 2px 14px; min-height: 18px; }

    /* ==========================================
       ORGANISASJONSINNSTILLINGER — FULLSKJERM (A+B)
       ========================================== */
    .orgp-header {
      display: flex; align-items: center; gap: 12px;
      padding: 0 18px; height: 56px;
      background: var(--header-dark); color: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      flex-shrink: 0;
    }
    .orgp-header .kpd-tilbake-btn {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.85);
      padding: 6px 11px; border-radius: 8px;
      font-size: 12px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer;
    }
    .orgp-header .kpd-tilbake-btn:hover { background: rgba(255,255,255,0.12); }
    .orgp-org-pille {
      display: inline-flex; align-items: center; gap: 9px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 4px 11px 4px 5px; border-radius: 999px;
      font-family: inherit;
    }
    .orgp-org-pille-avatar {
      width: 22px; height: 22px; border-radius: 999px;
      background: var(--primary); color: #fff;
      display: grid; place-items: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 13px; padding-top: 1px;
      letter-spacing: 0.04em;
    }
    .orgp-org-pille-navn { font-size: 12px; font-weight: 600; color: #fff; }
    .orgp-org-pille-sep { font-size: 10px; color: rgba(255,255,255,0.35); }
    .orgp-org-pille-meta { font-size: 11px; color: rgba(255,255,255,0.55); white-space: nowrap; }
    .orgp-tittel {
      margin: 0 0 0 4px; font-family: 'Bebas Neue', sans-serif;
      font-size: 18px; font-weight: 400; letter-spacing: 0.04em;
      color: rgba(255,255,255,0.95);
    }
    .orgp-header-soek {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px; padding: 5px 11px;
      min-width: 240px; max-width: 320px; flex: 0 1 260px;
      transition: border-color 0.15s, background 0.15s;
    }
    .orgp-header-soek:focus-within {
      border-color: rgba(255,255,255,0.32);
      background: rgba(255,255,255,0.1);
    }
    .orgp-header-soek input {
      flex: 1; background: transparent; border: none; outline: none;
      color: #fff; font-size: 12px; font-family: inherit; padding: 0;
      min-width: 0;
    }
    .orgp-header-soek input::placeholder { color: rgba(255,255,255,0.5); }
    .orgp-header-soek svg { flex-shrink: 0; }
    .orgp-header-soek .orgp-kbd {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9.5px; color: rgba(255,255,255,0.4);
      border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
      padding: 1px 5px; flex-shrink: 0;
    }
    .orgp-support-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 8px;
      font-size: 12px; font-weight: 600;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.85);
      cursor: pointer; flex-shrink: 0;
    }
    .orgp-support-btn:hover { background: rgba(255,255,255,0.08); }
    .orgp-support-btn .orgp-badge {
      background: var(--primary); color: #fff;
      border-radius: 999px; font-size: 9.5px;
      padding: 1px 5px; font-weight: 700; margin-left: 2px;
    }
    .orgp-bruker-avatar {
      width: 30px; height: 30px; border-radius: 999px;
      background: linear-gradient(135deg,#8B5CF6,#3B82F6);
      color: #fff; display: grid; place-items: center;
      font-size: 11px; font-weight: 700; flex-shrink: 0;
    }

    .orgp-body {
      display: flex; flex: 1; min-height: 0; overflow: hidden;
    }
    .orgp-nav {
      width: 232px; flex-shrink: 0;
      border-right: 1px solid var(--border);
      background: var(--surface);
      display: flex; flex-direction: column;
      overflow-y: auto; padding: 14px 10px;
      gap: 0;
    }
    .orgp-nav-soek {
      display: flex; align-items: center; gap: 7px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px; padding: 6px 10px;
      margin-bottom: 14px; flex-shrink: 0;
    }
    .orgp-nav-soek input {
      flex: 1; background: transparent; border: none; outline: none;
      color: var(--text); font-size: 12px; font-family: inherit; padding: 0;
      min-width: 0;
    }
    .orgp-nav-soek input::placeholder { color: var(--text-muted); }
    .orgp-nav-gruppe { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
    .orgp-nav-gruppe-tittel {
      font-size: 9.5px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.12em;
      padding: 0 8px 6px;
    }
    /* legacy separator — bevart for back-compat hvis noe injecter den */
    .orgp-nav-separator { display: none; }
    .orgp-nav-btn {
      position: relative;
      display: flex; align-items: center; gap: 9px;
      width: 100%; padding: 7px 9px; border-radius: 7px;
      border: none !important; background: transparent !important;
      color: var(--ink-soft) !important; font-size: 12.5px; font-weight: 500;
      cursor: pointer; text-align: left;
      transition: background 0.12s, color 0.12s;
      font-family: inherit; white-space: nowrap;
    }
    .orgp-nav-btn > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .orgp-nav-btn:hover {
      background: rgba(128,128,128,0.07) !important;
      color: var(--text) !important;
    }
    .orgp-nav-btn.active {
      background: var(--primary-pill) !important;
      color: var(--primary-dark) !important;
      font-weight: 700 !important;
    }
    .orgp-nav-btn.active::before {
      content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
      width: 2.5px; background: var(--primary); border-radius: 2px;
    }
    .orgp-nav-btn.active svg { stroke: var(--primary); }
    .orgp-nav-btn-badge {
      font-size: 9.5px; font-weight: 700;
      padding: 1px 5px; border-radius: 4px;
      background: var(--primary); color: #fff;
      min-width: 14px; text-align: center; line-height: 1.4;
      margin-left: auto; flex-shrink: 0;
    }
    .orgp-nav-btn-badge.amber { background: var(--amber); color: #fff; }
    .orgp-nav-spacer { flex: 1; min-height: 6px; }
    .orgp-nav-footer {
      border-top: 1px solid var(--border);
      padding: 10px 9px 0; margin-top: 6px;
      display: flex; align-items: center; gap: 9px;
      flex-shrink: 0;
    }
    .orgp-nav-footer-avatar {
      width: 26px; height: 26px; border-radius: 999px;
      background: linear-gradient(135deg,#8B5CF6,#3B82F6);
      color: #fff; display: grid; place-items: center;
      font-size: 10px; font-weight: 700; flex-shrink: 0;
    }
    .orgp-nav-footer-info { flex: 1; min-width: 0; line-height: 1.2; }
    .orgp-nav-footer-navn {
      font-size: 11.5px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .orgp-nav-footer-rolle {
      font-size: 10px; color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .orgp-nav-footer-logout {
      background: transparent; border: none; color: var(--text-muted);
      padding: 4px; border-radius: 6px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .orgp-nav-footer-logout:hover { background: var(--bg2); color: var(--text); }

    .orgp-content {
      flex: 1; min-width: 0; overflow-y: auto;
      padding: 20px 28px;
    }
    .orgp-hjelp {
      font-size: 12px; color: var(--text-muted);
      margin-bottom: 16px; min-height: 0;
    }
    .orgp-hjelp:empty { display: none; }

    /* Eventer-dashboard (A+B) */
    .ev-dash-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
    }
    .ev-dash-kicker {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: var(--text-muted);
      letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 6px;
    }
    .ev-dash-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 38px; font-weight: 400; line-height: 1;
      margin: 0; color: var(--text); letter-spacing: 0.01em;
    }
    .ev-dash-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .ev-dash-segm {
      display: inline-flex; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px; padding: 3px;
    }
    .ev-dash-segm button {
      background: transparent; color: var(--ink-soft);
      border: none !important; padding: 6px 12px; border-radius: 6px;
      font-size: 11.5px; font-weight: 600; cursor: pointer;
      font-family: inherit;
    }
    .ev-dash-segm button.aktiv { background: var(--text); color: #fff; }
    .ev-dash-nytt {
      background: var(--primary); color: #fff;
      border: none; border-radius: 8px;
      padding: 9px 16px; font-size: 12.5px; font-weight: 700;
      display: inline-flex; align-items: center; gap: 8px;
      cursor: pointer; box-shadow: 0 2px 0 var(--primary-dark);
      font-family: inherit;
    }
    .ev-dash-nytt:hover { background: var(--primary-dark); }

    .ev-stat-strip {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 12px; margin-bottom: 22px;
    }
    .ev-stat-kort {
      border: 1px solid var(--border); border-radius: 12px;
      padding: 14px 16px; position: relative; overflow: hidden;
      background: var(--surface);
    }
    .ev-stat-kort.tone-red { background: var(--text); }
    .ev-stat-kort.tone-amber { background: rgba(251,191,36,0.10); }
    .ev-stat-label {
      font-size: 10px; font-weight: 700; color: var(--text-muted);
      letter-spacing: 0.1em; text-transform: uppercase;
      display: flex; align-items: center; gap: 6px;
    }
    .ev-stat-kort.tone-red .ev-stat-label { color: rgba(255,255,255,0.55); }
    .ev-stat-kort.tone-amber .ev-stat-label { color: var(--amber-text); }
    .ev-stat-pulse {
      width: 6px; height: 6px; border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 3px rgba(247,27,0,0.25);
      animation: ev-pulse 1.6s ease-in-out infinite;
    }
    @keyframes ev-pulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(247,27,0,0.25); }
      50% { box-shadow: 0 0 0 5px rgba(247,27,0,0.08); }
    }
    .ev-stat-verdi {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 38px; line-height: 1; margin-top: 8px;
      color: var(--text); letter-spacing: 0.01em;
    }
    .ev-stat-kort.tone-red .ev-stat-verdi { color: #fff; }
    .ev-stat-delta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .ev-stat-kort.tone-red .ev-stat-delta { color: rgba(255,255,255,0.55); }
    .ev-stat-kort.tone-amber .ev-stat-delta { color: var(--amber-text); }

    /* Klikkbar variant — brukes f.eks. for "Personer"-KPI på landingen */
    button.ev-stat-kort, .ev-stat-knapp {
      display: block; width: 100%; text-align: left;
      font-family: inherit; cursor: pointer;
      transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    }
    button.ev-stat-kort:hover, .ev-stat-knapp:hover {
      transform: translateY(-1px);
      border-color: var(--line-soft);
      box-shadow: 0 4px 14px rgba(29,29,29,0.07);
    }
    .ev-stat-knapp .ev-stat-label { gap: 6px; }
    .ev-stat-knapp .ev-stat-pil { color: var(--text-muted); transition: transform 0.15s, color 0.15s; }
    .ev-stat-knapp:hover .ev-stat-pil { color: var(--primary); transform: translateX(2px); }

    .ev-kort-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    }
    @media (max-width: 1100px) {
      .ev-kort-grid { grid-template-columns: 1fr; }
      .ev-stat-strip { grid-template-columns: repeat(2, 1fr); }
    }
    .ev-kort {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 18px;
      position: relative; overflow: hidden; cursor: pointer;
      transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    .ev-kort:hover {
      border-color: var(--line-soft);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(29,29,29,0.06);
    }
    .ev-kort-rail {
      position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: var(--primary);
    }
    .ev-kort-topp {
      display: flex; align-items: flex-start; gap: 12px;
    }
    .ev-kort-tittelblokk { flex: 1; min-width: 0; }
    .ev-kort-tittelrad {
      display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
      flex-wrap: wrap;
    }
    .ev-kort-navn {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px; font-weight: 400; line-height: 1; margin: 0;
      color: var(--text); letter-spacing: 0.02em; text-transform: uppercase;
    }
    .ev-kort-pille-live {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 999px;
      background: var(--primary); color: #fff;
      display: inline-flex; align-items: center; gap: 4px;
      letter-spacing: 0.06em;
    }
    .ev-kort-pille-live::before {
      content: ''; width: 5px; height: 5px; border-radius: 999px;
      background: #fff;
      animation: ev-pulse-dot 1.4s ease-in-out infinite;
    }
    @keyframes ev-pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    .ev-kort-pille-arkiv {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 999px;
      background: var(--border); color: var(--text-muted);
      letter-spacing: 0.06em;
    }
    .ev-kort-id {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10.5px; color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ev-kort-mer {
      width: 26px; height: 26px; border-radius: 6px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ev-kort-mer:hover { background: var(--bg2); color: var(--text); }
    .ev-kort-meta {
      display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap;
      font-size: 11.5px; color: var(--ink-soft);
    }
    .ev-kort-meta-item {
      display: inline-flex; align-items: center; gap: 5px;
    }
    .ev-kort-meta-item svg { stroke: var(--text-muted); flex-shrink: 0; }
    .ev-kort-footer {
      display: flex; align-items: center; gap: 10px;
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid var(--border);
    }
    .ev-kort-prog { flex: 1; min-width: 0; }
    .ev-kort-prog-label {
      display: flex; justify-content: space-between;
      font-size: 10px; color: var(--text-muted); margin-bottom: 4px;
    }
    .ev-kort-prog-label > span:first-child {
      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ev-kort-prog-label > span:last-child { font-family: 'JetBrains Mono', monospace; }
    .ev-kort-prog-bar {
      height: 4px; background: var(--border); border-radius: 999px; overflow: hidden;
    }
    .ev-kort-prog-fill {
      height: 100%; background: var(--primary); border-radius: 999px;
      transition: width 0.3s ease;
    }
    .ev-kort-konflikt {
      font-size: 10.5px; font-weight: 700;
      padding: 3px 8px; border-radius: 6px;
      background: var(--amber-soft); color: var(--amber-text);
      display: inline-flex; align-items: center; gap: 4px;
      flex-shrink: 0;
    }

    .ev-tom-state {
      grid-column: 1 / -1;
      padding: 32px; text-align: center;
      color: var(--text-muted); font-size: 13px;
      border: 1px dashed var(--line-soft); border-radius: 12px;
      background: var(--surface);
    }

    .ev-tips {
      margin-top: 22px; padding: 12px 16px;
      background: rgba(255,255,255,0.5);
      border: 1px dashed var(--line-soft);
      border-radius: 10px;
      display: flex; align-items: center; gap: 12px;
      font-size: 12px; color: var(--ink-soft);
    }
    .ev-tips a { color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: none; }
    .ev-tips a:hover { text-decoration: underline; }
    .ev-tips-lukk {
      background: transparent; border: none; color: var(--text-muted);
      cursor: pointer; font-size: 16px; padding: 4px; line-height: 1;
      margin-left: auto;
    }

    /* Inline opprett/rediger event-skjema */
    .ev-form-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 18px; margin-bottom: 18px;
    }
    .ev-form-panel.skjult { display: none; }
    .ev-form-tittel {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px; letter-spacing: 0.04em;
      margin: 0 0 12px; color: var(--text);
    }
    .ev-form-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .ev-form-grid label {
      display: block; font-size: 11px; font-weight: 700;
      color: var(--ink-soft); margin-bottom: 4px;
    }
    .ev-form-grid input, .ev-form-grid select {
      width: 100%; padding: 9px 12px; box-sizing: border-box;
      border: 1px solid var(--border); border-radius: 8px;
      background: var(--bg); color: var(--text);
      font-size: 13px; font-family: inherit;
    }
    .ev-form-grid input:focus, .ev-form-grid select:focus {
      outline: none; border-color: var(--primary);
    }
    .ev-form-knapper {
      display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
      align-items: center;
    }
    .ev-form-status {
      font-size: 12px; color: var(--text-muted); margin-right: auto;
      min-height: 18px;
    }
    .ev-form-avbryt {
      background: transparent; color: var(--ink-soft);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
      font-family: inherit;
    }
    .ev-form-avbryt:hover { background: var(--bg2); }
    .ev-form-lagre {
      background: var(--primary); color: #fff;
      border: none; border-radius: 8px;
      padding: 8px 18px; font-size: 12.5px; font-weight: 700;
      cursor: pointer; box-shadow: 0 2px 0 var(--primary-dark);
      font-family: inherit;
    }
    .ev-form-lagre:hover { background: var(--primary-dark); }

    @media (max-width: 720px) {
      .orgp-header { padding: 0 12px; gap: 8px; }
      .orgp-org-pille-meta { display: none; }
      .orgp-tittel { display: none; }
      .orgp-header-soek { display: none; }
      .orgp-support-btn span:not(.orgp-badge) { display: none; }
      .ev-stat-strip { grid-template-columns: repeat(2, 1fr); }
      .ev-form-grid { grid-template-columns: 1fr; }
      .ev-dash-tittel { font-size: 28px; }
    }
    @media (max-width: 680px) {
      .orgp-nav { width: 44px; padding: 10px 4px; gap: 4px; }
      .orgp-nav-soek { display: none; }
      .orgp-nav-gruppe-tittel { display: none; }
      .orgp-nav-btn { padding: 9px; justify-content: center; gap: 0; }
      .orgp-nav-btn > span:first-of-type, .orgp-nav-btn-badge { display: none; }
      .orgp-nav-btn.active::before { left: -2px; top: 4px; bottom: 4px; }
      .orgp-nav-footer-info, .orgp-nav-footer-logout { display: none; }
      .orgp-nav-footer { justify-content: center; padding: 10px 4px 0; }
      .orgp-content { padding: 14px 16px; }
    }

    /* ==========================================
       MITT ARBEID — på tvers av events
       ========================================== */
    /* Toggle: Åpne / Fullførte */
    .mitt-arbeid-toggle-rad {
      display: inline-flex;
      background: rgba(128,128,128,0.12);
      border-radius: 999px;
      padding: 3px;
      gap: 2px;
      margin-bottom: 16px;
    }
    .mitt-arbeid-toggle-btn {
      flex: 0 0 auto;
      background: transparent !important;
      border: none !important;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
      padding: 7px 18px !important;
      border-radius: 999px !important;
      cursor: pointer;
      font-family: inherit;
      min-height: 0 !important;
      transition: background 0.12s, color 0.12s, box-shadow 0.12s;
    }
    .mitt-arbeid-toggle-btn:hover {
      background: rgba(128,128,128,0.08) !important;
      color: var(--text);
    }
    .mitt-arbeid-toggle-btn.aktiv {
      background: var(--bg-panel, var(--surface)) !important;
      color: var(--primary);
      box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    }

    .mitt-arbeid-header {
      padding: 8px 0 24px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 24px;
    }
    .mitt-arbeid-tittel {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .mitt-arbeid-summary {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 14px;
      line-height: 1.5;
    }
    .mitt-arbeid-summary strong { color: var(--text); font-weight: 700; }
    .mitt-arbeid-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mitt-arbeid-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      background: rgba(128,128,128,0.08);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }
    .mitt-arbeid-chip-tall {
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
    }
    .mitt-arbeid-chip[data-type="oppgave"] .mitt-arbeid-chip-tall  { color: #1A73E8; }
    .mitt-arbeid-chip[data-type="hendelse"] .mitt-arbeid-chip-tall { color: #34A853; }
    .mitt-arbeid-chip[data-type="under"] .mitt-arbeid-chip-tall    { color: #B06000; }
    .mitt-arbeid-chip[data-type="ai"] .mitt-arbeid-chip-tall       { color: #6F42C1; }

    .mitt-arbeid-tom {
      padding: 80px 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
    }

    .mitt-arbeid-seksjon {
      margin-bottom: 28px;
    }
    .mitt-arbeid-seksjon-hdr {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 14px;
    }
    .mitt-arbeid-eventnavn {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.005em;
    }
    .mitt-arbeid-eventdato {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .mitt-arbeid-aapn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      color: var(--primary);
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 6px;
      transition: background 0.12s;
      flex-shrink: 0;
    }
    .mitt-arbeid-aapn:hover { background: rgba(var(--primary-rgb, 247,27,0), 0.08); }

    .mitt-arbeid-kort-rad {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px;
    }
    .mitt-arbeid-kort {
      display: flex;
      gap: 10px;
      padding: 12px 14px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .mitt-arbeid-kort[data-event-slug=""] { cursor: default; }
    .mitt-arbeid-kort:hover {
      border-color: rgba(128,128,128,0.35);
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .mitt-arbeid-kort[data-event-slug]:not([data-event-slug=""]):hover {
      border-color: var(--primary);
      box-shadow: 0 4px 14px rgba(247,27,0,0.08);
    }
    .mitt-arbeid-kort-tag {
      flex-shrink: 0;
      width: 3px;
      align-self: stretch;
      border-radius: 2px;
      background: #DADCE0;
    }
    /* Sjekk-sirkel — matcher .mob-opp-check (Google Tasks-stil) */
    .mitt-arbeid-kort-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px !important;
      height: 22px !important;
      flex: 0 0 22px;
      align-self: flex-start;
      margin-top: 14px;
      box-sizing: border-box;
      aspect-ratio: 1 / 1;
      border: 2px solid var(--text-muted) !important;
      border-radius: 50% !important;
      background: transparent !important;
      color: #FFFFFF;
      cursor: pointer;
      padding: 0 !important;
      outline: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
      min-height: 0 !important;
    }
    .mitt-arbeid-kort-check svg {
      display: block;
      width: 14px;
      height: 14px;
      opacity: 0;
      transition: opacity 0.12s;
    }
    .mitt-arbeid-kort-check:hover {
      background: rgba(128,128,128,0.12) !important;
      border-color: var(--text) !important;
    }
    .mitt-arbeid-kort-check:active {
      background: rgba(128,128,128,0.18) !important;
      border-color: var(--text) !important;
      transform: scale(0.90);
    }
    .mitt-arbeid-kort.fullfort-anim {
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.28s, transform 0.28s;
    }
    .mitt-arbeid-kort.fullfort-anim .mitt-arbeid-kort-check {
      background: var(--text-muted) !important;
      border-color: var(--text-muted) !important;
    }
    .mitt-arbeid-kort.fullfort-anim .mitt-arbeid-kort-check svg { opacity: 1; }
    .mitt-arbeid-kort[data-type="oppgave"]  .mitt-arbeid-kort-tag { background: #1A73E8; }
    .mitt-arbeid-kort[data-type="hendelse"] .mitt-arbeid-kort-tag { background: #34A853; }
    .mitt-arbeid-kort[data-type="under"]    .mitt-arbeid-kort-tag { background: #FBBC04; }
    .mitt-arbeid-kort[data-type="ai"]       .mitt-arbeid-kort-tag { background: #6F42C1; }
    .mitt-arbeid-kort-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mitt-arbeid-kort-topp {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .mitt-arbeid-typetag {
      padding: 2px 7px;
      border-radius: 4px;
      font-weight: 800;
      letter-spacing: 0.08em;
      background: rgba(128,128,128,0.12);
      color: var(--text-muted);
    }
    .mitt-arbeid-kort[data-type="oppgave"]  .mitt-arbeid-typetag { background: rgba(26,115,232,0.12); color: #1A73E8; }
    .mitt-arbeid-kort[data-type="hendelse"] .mitt-arbeid-typetag { background: rgba(52,168,83,0.13);  color: #137333; }
    .mitt-arbeid-kort[data-type="under"]    .mitt-arbeid-typetag { background: rgba(251,188,4,0.16);  color: #B06000; }
    .mitt-arbeid-kort[data-type="ai"]       .mitt-arbeid-typetag { background: rgba(111,66,193,0.13); color: #6F42C1; }
    .mitt-arbeid-prio {
      color: #D93025;
      font-size: 10px;
      font-weight: 700;
    }
    .mitt-arbeid-kort-tittel {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .mitt-arbeid-kort-besk {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .mitt-arbeid-kort-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .mitt-arbeid-kort-meta .sep { color: rgba(128,128,128,0.5); margin: 0 2px; }
    .mitt-arbeid-forfalt { color: #D93025; font-weight: 600; }

    /* Vis/skjul: kort utover MAX_VIST gjemmes til seksjonen utvides */
    .mitt-arbeid-kort.skjult { display: none; }
    .mitt-arbeid-seksjon.utvidet .mitt-arbeid-kort.skjult { display: flex; }
    .mitt-arbeid-vis-mer {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding: 6px 12px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      font-family: inherit;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .mitt-arbeid-vis-mer:hover {
      background: rgba(128,128,128,0.08);
      color: var(--text);
      border-color: rgba(128,128,128,0.35);
    }
    .mitt-arbeid-vis-mer svg { transition: transform 0.18s ease; }
    .mitt-arbeid-seksjon.utvidet .mitt-arbeid-vis-mer svg { transform: rotate(180deg); }

    /* ==========================================
       EVENT-INNSTILLINGER — SIDEBAR-LAYOUT (estab-)
       ========================================== */
    .estab-layout {
      display: flex;
      gap: 0;
      height: 100%;
    }
    .estab-nav {
      width: 176px;
      flex-shrink: 0;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 1px;
      padding: 6px 8px;
      background: var(--surface);
      overflow-y: auto;
    }
    .estab-nav-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 9px 11px;
      border-radius: 8px;
      border: none !important;
      background: transparent !important;
      color: var(--text-muted) !important;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: background 0.12s, color 0.12s;
      white-space: nowrap;
    }
    .estab-nav-btn:hover {
      background: rgba(128,128,128,0.1) !important;
      color: var(--text) !important;
    }
    .estab-nav-btn.active {
      background: rgba(247,27,0,0.1) !important;
      color: var(--primary) !important;
      font-weight: 700 !important;
    }
    .estab-nav-btn.active svg { stroke: var(--primary); }
    .estab-content {
      flex: 1;
      min-width: 0;
      padding: 20px 24px;
      overflow-y: auto;
    }
    /* db-innstillinger overrides — replace old tab-bar rules */
    #db-innstillinger .tab-bar { display: none; }
    #db-innstillinger .estab-layout { min-height: 500px; height: auto; }
    #db-innstillinger .estab-nav { background: transparent; border-right-color: var(--border); }
    #db-innstillinger .estab-content { padding: 0 0 0 20px; }
    @media (max-width: 680px) {
      .estab-nav { width: 44px !important; padding: 6px 4px !important; }
      .estab-nav-btn { padding: 9px !important; justify-content: center !important; font-size: 0 !important; }
      .estab-nav-btn svg { flex-shrink: 0; }
      .estab-content { padding: 14px 0 14px 12px !important; }
    }

    /* ==========================================
       SETTINGS MODAL – ADMIN TABLE & ICON BTNS
       ========================================== */
    .settings-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 20px;
    }
    .settings-modal-header h2 {
      margin: 0; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
    }
    .settings-close-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 8px;
      border: none !important; background: transparent !important;
      color: var(--text-muted) !important; cursor: pointer; transition: background 0.15s, color 0.15s;
      font-size: 18px; line-height: 1; padding: 0 !important;
    }
    .settings-close-btn:hover { background: var(--border) !important; color: var(--text) !important; }

    .icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 6px;
      border: none !important; cursor: pointer;
      transition: background 0.15s, color 0.15s; padding: 0 !important; flex-shrink: 0;
    }
    .icon-btn-edit  { background: rgba(247,27,0,0.08) !important; color: var(--primary) !important; }
    .icon-btn-edit:hover  { background: rgba(247,27,0,0.18) !important; }
    .icon-btn-delete { background: rgba(239,68,68,0.08) !important; color: #EF4444 !important; }
    .icon-btn-delete:hover { background: rgba(239,68,68,0.18) !important; color: #DC2626 !important; }

    .admin-table { width: 100%; border-collapse: collapse; background: var(--bg); font-size: 13px; min-width: 600px; border-radius: 10px; overflow: hidden; }
    .admin-table thead th {
      background: rgba(128,128,128,0.12); color: var(--text-muted);
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      padding: 10px 14px; border-bottom: 2px solid #E5E7EB; text-align: left;
    }
    .admin-table thead th:last-child { text-align: right; width: 80px; }
    .admin-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; }
    .admin-table tbody tr:last-child { border-bottom: none; }
    .admin-table tbody tr:hover { background: rgba(128,128,128,0.07); }
    .admin-table tbody td { padding: 10px 14px; color: var(--text); }
    .admin-table tbody td:last-child { text-align: right; white-space: nowrap; }

    .admin-form-box {
      background: rgba(128,128,128,0.06); border: 1px solid var(--border); padding: 20px 24px; border-radius: 12px;
      margin-bottom: 20px; border: 1.5px solid var(--border);
    }
    .admin-form-title {
      margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.06em;
    }

    /* ==========================================
       PERSON POPUP (inni innstillinger)
       ========================================== */
    .person-back-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: transparent !important; border: none !important; box-shadow: none !important;
      color: var(--text-muted) !important; font-size: 13px; font-weight: 600;
      cursor: pointer; padding: 0 0 16px !important; transition: color 0.15s;
    }
    .person-back-btn:hover { color: var(--text) !important; background: transparent !important; }
    .person-popup-hero {
      display: flex; align-items: center; gap: 16px;
      padding-bottom: 20px; border-bottom: 1.5px solid var(--border); margin-bottom: 20px;
    }
    .person-avatar {
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, var(--primary) 0%, #FFD0A2 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 19px; font-weight: 800; color: white; flex-shrink: 0; letter-spacing: -0.01em;
    }
    .person-popup-name { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
    .person-popup-meta { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
    .person-contact-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
    .person-contact-chip {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px;
      padding: 7px 13px; font-size: 13px; color: var(--text);
    }
    .person-contact-chip a { color: inherit; text-decoration: none; }
    .person-contact-chip a:hover { text-decoration: underline; }
    .person-events-title {
      font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em;
      display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    }
    .person-count-badge {
      background: var(--primary); color: white; border-radius: 20px;
      padding: 1px 8px; font-size: 11px; font-weight: 700;
    }
    .person-day-label {
      font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em; margin: 16px 0 8px;
    }
    .person-event-card {
      display: flex; align-items: stretch; gap: 0;
      border-radius: 8px; margin-bottom: 0; overflow: hidden;
      background: var(--bg); border: 1.5px solid var(--border); transition: border-color 0.15s;
    }
    .person-event-card:hover { border-color: #C8B8AD; }
    .person-event-accent { width: 4px; flex-shrink: 0; }
    .person-event-body { padding: 9px 13px; flex: 1; min-width: 0; }
    .person-event-title { font-size: 13px; font-weight: 600; color: var(--text); }
    .person-event-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .person-events-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 4px;
    }
    .person-hero-edit-btn {
      margin-left: auto; flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(247,27,0,0.08) !important; color: var(--primary) !important;
      border: none !important; border-radius: 8px; padding: 7px 14px;
      font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
    }
    .person-hero-edit-btn:hover { background: rgba(247,27,0,0.18) !important; }
    .status-badge-avlyst {
      display: inline-block; font-size: 10px; font-weight: 700;
      background: rgba(239,68,68,0.1); color: #EF4444;
      border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
    }
    .person-name-link {
      color: var(--primary); cursor: pointer; font-weight: 600;
      border-bottom: 1px dashed rgba(247,27,0,0.35); transition: border-color 0.15s;
    }
    .person-name-link:hover { border-bottom-color: var(--primary); }

    /* ==========================================
       SAMMENDRAGSKOLONNE
       ========================================== */
    .summary-column {
      position: sticky;
      left: 65px;
      z-index: 980;
      width: 280px;
      height: var(--timeline-height, 11520px);
      flex-shrink: 0;
      background: #EED9C8;
      border-right: 2px solid #6B7280;
      box-shadow: 4px 0 16px rgba(0,0,0,0.10);
      transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    .summary-column.collapsed {
      width: 26px;
      cursor: pointer;
      background: rgba(0,0,0,0.04);
      box-shadow: 2px 0 8px rgba(0,0,0,0.07);
      overflow: hidden;
    }
    .summary-column.collapsed:hover { background: rgba(0,0,0,0.09); }
    .summary-header {
      position: sticky;
      top: 0;
      z-index: 981;
      box-sizing: border-box;
      height: calc(var(--area-header-height) + var(--loc-header-height) + 4px);
      background: #374151;
      color: white;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 0 8px 10px 10px;
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(0,0,0,0.20);
    }
    .summary-toggle-btn {
      background: rgba(255,255,255,0.15) !important;
      border: 1px solid rgba(255,255,255,0.25) !important;
      color: white !important;
      font-size: 11px !important;
      padding: 2px 7px !important;
      border-radius: 5px !important;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s !important;
    }
    .summary-toggle-btn:hover { background: rgba(255,255,255,0.28) !important; }
    .summary-column.collapsed .summary-header {
      height: 160px !important;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      align-items: center;
      justify-content: flex-end;
      padding: 12px 6px;
      font-size: 9px;
      color: rgba(255,255,255,0.45);
      background: transparent;
      box-shadow: none;
    }
    .summary-column.collapsed .summary-toggle-btn { display: none; }
    .summary-column.collapsed .summary-grid { opacity: 0; pointer-events: none; }
    .summary-grid {
      position: relative;
      height: var(--timeline-height, 11520px);
      transition: opacity 0.2s;
      background-image:
        linear-gradient(to bottom, #94A3B8 1px, transparent 1px),
        linear-gradient(to bottom, #B8C5D3 1px, transparent 1px),
        linear-gradient(to bottom, #DDE4EC 1px, transparent 1px);
      background-size: 100% var(--hour-height), 100% var(--half-hour-height), 100% var(--quarter-height);
    }
    .summary-event {
      position: absolute;
      border-radius: 6px;
      padding: 4px 6px;
      box-sizing: border-box;
      overflow: hidden;
      cursor: pointer;
      color: white;
      font-size: 11px;
      line-height: 1.2;
      box-shadow: 0 1px 4px rgba(0,0,0,0.18);
      border: 1.5px solid rgba(255,255,255,0.18);
      transition: filter 0.1s;
    }
    .summary-event:hover { filter: brightness(1.12); }
    .summary-event-title { font-weight: 700; font-size: 12px; }
    .summary-event-meta { font-size: 10px; opacity: 0.85; margin-top: 1px; }
    .summary-resize-handle {
      position: absolute;
      top: 0; right: 0;
      width: 5px;
      height: 100%;
      cursor: col-resize;
      z-index: 990;
      background: transparent;
      transition: background 0.15s;
    }
    .summary-resize-handle:hover,
    .summary-resize-handle.dragging { background: rgba(0,0,0,0.25); }

    /* ==========================================
       COLLAPSED LOCATION COLUMNS
       ========================================== */
    .location-column.collapsed {
      min-width: 26px !important;
      max-width: 26px !important;
      flex: 0 0 26px !important;
      overflow: clip;
      cursor: pointer;
      background: rgba(79, 70, 229, 0.08);
      transition: background 0.15s;
    }
    .location-column.collapsed:hover {
      background: rgba(79, 70, 229, 0.18);
    }
    .location-column.collapsed .location-header {
      position: sticky !important;
      top: var(--area-header-height, 48px);
      height: 120px !important;
      line-height: 1 !important;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 9px;
      padding: 10px 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      background: transparent;
      color: rgba(255,255,255,0.4);
      border-bottom: none;
      transition: color 0.15s;
      z-index: 701;
    }
    .location-column.collapsed:hover .location-header {
      color: white;
    }
    .location-column.collapsed .grid-container {
      pointer-events: none;
      opacity: 0;
    }
    .ny-hendelse-ghost {
      position: absolute; left: 3px; right: 3px;
      background: rgba(247,27,0,0.15);
      border: 2px solid var(--primary);
      border-radius: 6px;
      pointer-events: none;
      z-index: 500;
      box-sizing: border-box;
      display: flex; align-items: flex-start; justify-content: center;
      padding: 5px 6px;
      font-size: 11px; font-weight: 700; color: var(--primary);
      overflow: hidden; white-space: nowrap;
      min-height: 4px;
      transition: none;
    }

    /* ==========================================
       PROGRAM FLYT MODAL
       ========================================== */
    #pfModal {
      display: none; position: fixed; z-index: 3100; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #pfModal .modal-content {
      background: var(--surface); margin: 3% auto; padding: 28px 32px;
      border-radius: 16px; width: 960px; max-width: 96%; max-height: 90vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .pf-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
    .pf-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .pf-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; line-height: 1; }
    .pf-lukk:hover { color: var(--text); background: none; }
    .pf-dag-select { padding: 5px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--text); font-family: inherit; cursor: pointer; }
    .pf-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
    .pf-stat {
      background: var(--bg); border-radius: 12px; padding: 14px 16px;
      border: 1.5px solid var(--border); display: flex; flex-direction: column; gap: 4px;
    }
    .pf-stat-tall { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
    .pf-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .pf-stat.grønn .pf-stat-tall { color: #16A34A; }
    .pf-stat.oransje .pf-stat-tall { color: #D4500A; }
    .pf-stat.rød .pf-stat-tall { color: var(--primary); }
    .pf-stat.grå .pf-stat-tall { color: var(--text-muted); }
    .pf-snitt { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; padding: 10px 14px; background: var(--bg); border-radius: 8px; border: 1.5px solid var(--border); }
    .pf-dag-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 20px 0 8px; }
    .pf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .pf-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); padding: 6px 10px; text-align: left; border-bottom: 1.5px solid var(--border); }
    .pf-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .pf-table tr:last-child td { border-bottom: none; }
    .pf-table tr:hover td { background: var(--bg); }
    .pf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
    .pf-forsinkelse { font-weight: 700; font-size: 13px; }
    .pf-forsinkelse.grønn { color: #16A34A; }
    .pf-forsinkelse.oransje { color: #D4500A; }
    .pf-forsinkelse.rød { color: var(--primary); }
    .pf-forsinkelse.grå { color: var(--text-muted); }
    .pf-status-chip {
      display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px;
      font-size: 11px; font-weight: 700;
    }
    .pf-ingen-logg { text-align: center; padding: 40px 0; color: var(--text-muted); }
    .pf-setup-btn { margin-top: 12px; background: var(--primary) !important; color: white !important; border: none !important; padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; }
    .pf-sammendrag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
    .pf-sammendrag-boks { background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; }
    .pf-sammendrag-tittel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; }
    .pf-s-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .pf-s-table th { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); }
    .pf-s-table th:not(:first-child) { text-align: right; }
    .pf-s-table td { padding: 6px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .pf-s-table tr:last-child td { border-bottom: none; }
    .pf-s-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
    .pf-s-navn { font-weight: 600; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pf-s-snitt { font-weight: 700; }
    .pf-s-snitt.grønn { color: #16A34A; }
    .pf-s-snitt.oransje { color: #D4500A; }
    .pf-s-snitt.rød { color: var(--primary); }
    .pf-s-snitt.grå { color: var(--text-muted); }
    .pf-mini-bar-wrap { width: 50px; height: 5px; background: var(--border); border-radius: 3px; display: inline-block; vertical-align: middle; margin-left: 4px; }
    .pf-mini-bar { height: 100%; border-radius: 3px; }
    .pf-detaljer-tittel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 10px; }

    /* ==========================================
       SKRIV UT MODAL
       ========================================== */
    #skrivUtModal {
      display: none; position: fixed; z-index: 3200; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #skrivUtModal .modal-content {
      background: var(--surface); margin: 8% auto; padding: 28px 32px;
      border-radius: 16px; width: 520px; max-width: 96%;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .su-header { display: flex; align-items: center; margin-bottom: 22px; }
    .su-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .su-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; line-height: 1; }
    .su-lukk:hover { color: var(--text); background: none; }
    .su-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
    .su-filter-group { display: flex; flex-direction: column; gap: 5px; }
    .su-filter-group label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .su-filter-group select { padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 500; color: var(--text); font-family: inherit; cursor: pointer; }
    .su-filter-group select:focus { outline: none; border-color: var(--primary); }
    .su-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 18px; }
    .su-layout-row { display: flex; gap: 8px; margin-bottom: 16px; }
    .su-layout-btn { flex: 1; padding: 8px 6px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); transition: all 0.15s; text-align: center; }
    .su-layout-btn.aktiv { border-color: var(--primary); background: rgba(247,27,0,0.06); color: var(--primary); }
    .su-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .su-preview-count { font-size: 12px; color: var(--text-muted); align-self: center; margin-right: auto; }

    /* ==========================================
       AI MASSE-OPPRETTELSE MODAL
       ========================================== */
    #aiMasseModal {
      display: none; position: fixed; z-index: 3200; left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(15,23,42,0.6); backdrop-filter: blur(6px);
    }
    #aiMasseModal .modal-content {
      background: var(--surface); margin: 5% auto; padding: 28px 32px;
      border-radius: 16px; width: 640px; max-width: 96%; max-height: 88vh; overflow-y: auto;
      box-shadow: 0 30px 70px rgba(0,0,0,0.22);
    }
    .aim-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .aim-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .aim-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; }
    .aim-lukk:hover { color: var(--text); background: none; }
    .aim-ingress { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
    #aiMasse-tekst {
      width: 100%; box-sizing: border-box; padding: 12px; border: 1.5px solid var(--border);
      border-radius: 10px; font-size: 13px; font-family: inherit; resize: vertical;
      background: var(--bg); color: var(--text); line-height: 1.5;
    }
    #aiMasse-tekst:focus { outline: none; border-color: var(--primary); }
    .aim-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
    .aim-kort-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .aim-kort {
      background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
      transition: border-color 0.15s;
    }
    .aim-kort:has(input:checked) { border-color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-kort-checkbox-row { display: flex; align-items: center; gap: 10px; }
    .aim-kort-checkbox-row input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
    .aim-kort-tittel { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .aim-kort-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; }
    .aim-kort-meta span::before { content: '· '; }
    .aim-kort-meta span:first-child::before { content: ''; }
    .aim-loading { text-align: center; padding: 32px 0; color: var(--text-muted); font-size: 14px; }
    .aim-tabs { display: flex; gap: 0; margin-bottom: 16px; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
    .aim-tab {
      flex: 1; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
      background: var(--bg); color: var(--text-muted); border: none; border-radius: 0;
      transition: all 0.15s; font-family: inherit;
    }
    .aim-tab + .aim-tab { border-left: 1.5px solid var(--border); }
    .aim-tab.aktiv { background: var(--surface); color: var(--text); }
    .aim-dropzone {
      border: 2px dashed var(--border); border-radius: 10px; padding: 32px 20px;
      text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg);
    }
    .aim-dropzone:hover, .aim-dropzone.dragover { border-color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-dropzone-ikon { font-size: 32px; margin-bottom: 8px; }
    .aim-dropzone-tekst { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
    .aim-dropzone-sub { font-size: 12px; color: var(--text-muted); }
    .aim-fil-valgt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(247,27,0,0.06); border: 1.5px solid var(--primary); border-radius: 10px; margin-top: 10px; }
    .aim-fil-navn { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aim-fil-fjern { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 4px; flex-shrink: 0; }
    .aim-formater { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; justify-content: center; }
    .aim-format-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); letter-spacing: 0.04em; }

    /* Tale-inndata */
    .aim-tale-rad {
      display: flex; align-items: center; gap: 12px; margin: 10px 0 4px;
    }
    .aim-tale-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 18px; border-radius: 10px;
      background: var(--bg); border: 1.5px solid var(--border);
      color: var(--text-muted); font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit;
      transition: all 0.18s; flex-shrink: 0;
    }
    .aim-tale-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(247,27,0,0.04); }
    .aim-tale-btn.tale-aktiv {
      background: rgba(247,27,0,0.08);
      border-color: var(--primary);
      color: var(--primary);
      animation: tale-puls 1.4s ease-in-out infinite;
    }
    .aim-tale-btn.tale-aktiv svg { animation: tale-mic-puls 1.4s ease-in-out infinite; }
    .aim-tale-status {
      font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px;
    }
    .aim-tale-status.lytter { color: var(--primary); }
    .aim-tale-status.lytter::before {
      content: '';
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: var(--primary);
      animation: tale-dot-puls 1s ease-in-out infinite;
    }
    .aim-tale-status.feil { color: #ef4444; }
    @keyframes tale-puls {
      0%, 100% { box-shadow: 0 0 0 0 rgba(247,27,0,0.25); }
      50%       { box-shadow: 0 0 0 6px rgba(247,27,0,0); }
    }
    @keyframes tale-mic-puls {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.6; }
    }
    @keyframes tale-dot-puls {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(0.75); }
    }
    .aim-kort-tittel-input {
      width: 100%; box-sizing: border-box; font-size: 13px; font-weight: 700; color: var(--text);
      border: none; border-bottom: 1.5px solid transparent; background: transparent; padding: 0 0 2px;
      font-family: inherit; outline: none; transition: border-color 0.15s;
    }
    .aim-kort-tittel-input:focus { border-bottom-color: var(--primary); }
    .aim-edit-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
    .aim-input-sm {
      padding: 3px 7px; border: 1.5px solid var(--border); border-radius: 6px;
      font-size: 11px; font-family: inherit; background: var(--surface); color: var(--text);
      outline: none; transition: border-color 0.15s;
    }
    .aim-input-sm:focus { border-color: var(--primary); }
    .aim-input-sm.dato { width: 155px; }
    .aim-select-sm {
      padding: 3px 6px; border: 1.5px solid var(--border); border-radius: 6px;
      font-size: 11px; font-family: inherit; background: var(--surface); color: var(--text);
      outline: none; cursor: pointer; transition: border-color 0.15s;
    }
    .aim-select-sm:focus { border-color: var(--primary); }

    /* ==========================================
       AI SPØRRE-MODUS MODAL
       ========================================== */
    #aiSporModal {
      display: none; position: fixed; z-index: 3200;
      left: auto; right: 0; top: 0;
      width: 420px; height: 100vh;
      pointer-events: none;
    }
    #aiSporModal .modal-content {
      background: var(--surface); margin: 0; padding: 24px 28px;
      width: 420px !important; max-width: 100vw;
      height: 100vh; max-height: 100vh; box-sizing: border-box;
      border-radius: 16px 0 0 16px;
      border-left: 1px solid var(--border);
      box-shadow: -12px 0 48px rgba(0,0,0,0.35);
      display: flex; flex-direction: column;
      pointer-events: all;
      animation: event-sidebar-in 0.28s cubic-bezier(0.32,0.72,0,1);
    }
    .ais-header {
      display: flex; align-items: center; gap: 10px;
      padding-bottom: 14px; margin-bottom: 16px;
      border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .ais-tittel { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.06em; color: var(--text); flex: 1; }
    .ais-lukk { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; }
    .ais-lukk:hover { color: var(--text); background: none; }
    .ais-chat {
      flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
      margin-bottom: 14px; min-height: 0;
    }
    .ais-msg-sporsmal {
      align-self: flex-end; background: var(--primary); color: white;
      padding: 9px 14px; border-radius: 14px 14px 4px 14px; font-size: 13px; max-width: 80%;
    }
    .ais-msg-svar {
      align-self: flex-start; background: var(--bg); border: 1px solid var(--border);
      padding: 12px 14px; border-radius: 4px 14px 14px 14px; font-size: 13px;
      max-width: 90%; white-space: pre-wrap; line-height: 1.55; color: var(--text);
    }
    .ais-msg-feil { align-self: flex-start; color: var(--primary); font-size: 13px; padding: 8px 0; }
    .ais-msg-laster { align-self: flex-start; color: var(--text-muted); font-size: 13px; font-style: italic; }
    .ais-input-row { display: flex; gap: 8px; flex-shrink: 0; }
    #ais-input {
      flex: 1; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px;
      font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text);
    }
    #ais-input:focus { outline: none; border-color: var(--primary); }
    .ais-tale-btn {
      width: 40px; flex-shrink: 0;
      background: var(--bg); border: 1.5px solid var(--border);
      color: var(--text-muted); border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.18s; padding: 0;
    }
    .ais-tale-btn:hover { border-color: var(--primary); color: var(--primary); }
    .ais-tale-btn.tale-aktiv {
      background: rgba(247,27,0,0.08); border-color: var(--primary); color: var(--primary);
      animation: tale-puls 1.4s ease-in-out infinite;
    }
    .ais-forslag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; flex-shrink: 0; }
    .ais-forslag-btn {
      font-size: 11px; padding: 4px 10px; border-radius: 20px;
      background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
      cursor: pointer; transition: all 0.15s;
    }
    .ais-forslag-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(247,27,0,0.04); }

    /* ==========================================
       KJØREPLAN / UNDERHENDELSER
       ========================================== */
    .kp-seksjon { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
    .kp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .kp-tittel {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.09em; color: var(--text-muted);
    }
    .kp-header-actions { display: flex; gap: 6px; align-items: center; }
    .kp-legg-til-btn {
      font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 7px;
      background: var(--primary); border: none; color: #fff;
      cursor: pointer; transition: opacity 0.15s;
    }
    .kp-legg-til-btn:hover { opacity: 0.85; }
    .kp-loading { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
    .kp-tom {
      font-size: 13px; color: var(--text-muted); font-style: italic;
      padding: 20px 0; text-align: center;
    }
    .kp-liste { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
    .kp-fase-gruppe { margin-bottom: 16px; }
    .kp-fase-header {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .kp-fase-header-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted); white-space: nowrap;
    }
    .kp-fase-header-tid {
      font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums;
      white-space: nowrap; opacity: 0.7;
    }
    .kp-fase-header-linje { flex: 1; height: 1px; background: var(--border); }
    .kp-rad {
      display: grid; grid-template-columns: 16px 54px 1fr auto auto;
      align-items: center; gap: 10px;
      padding: 10px 12px 10px 10px; border-radius: 8px; background: var(--bg);
      border: 1px solid var(--border);
      border-left-width: 3px;
      transition: box-shadow 0.15s, opacity 0.15s;
      position: relative;
    }
    .kp-rad:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
    .kp-rad:hover .kp-aksjoner { opacity: 1; }
    .kp-rad.dragging { opacity: 0.3; }
    .kp-rad { position: relative; }
    .kp-rad.drag-over-top::before,
    .kp-rad.drag-over-bottom::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 3px;
      background: var(--primary);
      border-radius: 2px;
      z-index: 10;
    }
    .kp-rad.drag-over-top::before  { top: -2px; }
    .kp-rad.drag-over-bottom::after { bottom: -2px; }
    .kp-drag {
      cursor: grab; color: var(--text-muted); font-size: 15px; line-height: 1;
      user-select: none; text-align: center; transition: color 0.15s, background 0.15s;
      padding: 3px 2px; border-radius: 4px; opacity: 0.45;
    }
    .kp-rad:hover .kp-drag { opacity: 1; background: var(--border); }
    .kp-drag:active { cursor: grabbing; }
    .kp-tid {
      font-size: 14px; font-weight: 700; color: var(--text);
      font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em;
    }
    .kp-innhold { min-width: 0; }
    .kp-rad-tittel {
      font-size: 14px; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }
    .kp-rad-meta {
      font-size: 11px; color: var(--text-muted);
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px;
    }
    .kp-rad-meta span { display: flex; align-items: center; gap: 2px; }
    .kp-status-badge {
      font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; cursor: pointer;
      white-space: nowrap; transition: opacity 0.15s; flex-shrink: 0;
    }
    .kp-status-badge:hover { opacity: 0.7; }
    .kp-aksjoner {
      display: flex; gap: 4px; align-items: center;
      opacity: 0; transition: opacity 0.15s;
    }
    .kp-btn-sm {
      font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer;
      border: 1px solid; transition: all 0.12s; white-space: nowrap;
    }
    .kp-btn-rediger {
      background: transparent; border-color: var(--border); color: var(--text-muted);
    }
    .kp-btn-rediger:hover { background: rgba(0,0,0,0.05); border-color: var(--text-muted); color: var(--text); }
    .kp-btn-slett {
      background: transparent; border-color: transparent; color: #9CA3AF;
    }
    .kp-btn-slett:hover { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #DC2626; }
    .kp-btn-print {
      font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer;
      background: transparent; border: 1px solid var(--border); color: var(--text-muted);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-btn-print:hover { border-color: var(--text-muted); color: var(--text); }
    .kp-btn-mal {
      font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer;
      background: transparent; border: 1px solid var(--border); color: var(--text-muted);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-btn-mal:hover { border-color: var(--primary); color: var(--primary); }
    #kp-mal-panel, #kpd-mal-panel,
    #kp-lagre-mal-panel, #kpd-lagre-mal-panel {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
      min-width: 320px; background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    }
    .kp-live-btn {
      font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 7px;
      background: linear-gradient(135deg, #CC1500, #F71B00); border: 1px solid rgba(255,255,255,0.15);
      color: white; cursor: pointer; box-shadow: 0 2px 8px rgba(247,27,0,0.35);
      transition: all 0.15s; white-space: nowrap;
    }
    .kp-live-btn:hover { box-shadow: 0 3px 14px rgba(247,27,0,0.5); opacity: 0.92; }

    /* Kjøreplan-skjema */
    .kp-skjema {
      background: var(--surface); border: 1.5px solid var(--primary);
      border-radius: 10px; padding: 16px; margin-top: 10px;
    }
    .kp-skjema-rad { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
    .kp-skjema-felt { display: flex; flex-direction: column; gap: 4px; }
    .kp-skjema-felt label {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--text-muted);
    }
    .kp-input {
      padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 7px;
      font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text);
      outline: none; transition: border-color 0.15s;
    }
    .kp-input:focus { border-color: var(--primary); }
    .kp-input.w-full { width: 100%; box-sizing: border-box; }
    .kp-teknisk-toggle {
      background: none; border: none; cursor: pointer; font-size: 11px; color: var(--text-muted);
      padding: 4px 0; text-align: left; margin: 2px 0 4px; display: flex; align-items: center; gap: 4px;
    }
    .kp-teknisk-toggle:hover { color: var(--text); }
    .kp-teknisk-seksjon { display: none; }
    .kp-teknisk-seksjon.apen { display: block; }
    .kp-skjema-knapper { display: flex; gap: 8px; margin-top: 14px; }
    .kp-lagre-btn {
      padding: 8px 20px; border-radius: 7px; font-size: 13px; font-weight: 700;
      background: var(--primary); color: #fff; border: none;
      cursor: pointer; transition: opacity 0.15s;
      box-shadow: 0 2px 8px rgba(247,27,0,0.3);
    }
    .kp-lagre-btn:hover { opacity: 0.85; }
    .kp-avbryt-btn {
      padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 600;
      background: transparent; border: 1.5px solid var(--border); color: var(--text-muted);
      cursor: pointer; transition: border-color 0.15s, color 0.15s;
    }
    .kp-avbryt-btn:hover { border-color: var(--text-muted); color: var(--text); }

/* ─── KJØREPLAN DASHBOARD ────────────────────────────────────────────── */
    .kpd-header {
      display: flex; align-items: center; gap: 16px;
      padding: 14px 24px;
      background: #1B3A2D; flex-shrink: 0;
    }
    .kpd-tilbake-btn {
      display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600;
      padding: 7px 14px; border-radius: 8px;
      cursor: pointer; flex-shrink: 0; transition: all 0.12s; font-family: inherit;
    }
    .kpd-tilbake-btn:hover { background: rgba(255,255,255,0.18); color: white; }
    .kpd-header-tittelblokk { display: flex; flex-direction: column; gap: 1px; }
    .kpd-overskrift {
      font-size: 17px; font-weight: 800; color: white;
      margin: 0; letter-spacing: -0.02em;
    }
    .kpd-header-meta { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 400; }

    /* Event picker in header */
    .kpd-event-picker-seksjon { display: flex; align-items: center; }
    .kpd-event-velger {
      border: 1px solid rgba(255,255,255,0.25); border-radius: 8px;
      padding: 7px 12px; font-size: 13px; font-weight: 600;
      background: rgba(255,255,255,0.1); color: white;
      font-family: inherit; cursor: pointer; outline: none;
      transition: border-color 0.15s; max-width: 280px;
    }
    .kpd-event-velger:focus { border-color: rgba(255,255,255,0.5); }
    .kpd-event-velger option { background: #1B3A2D; color: white; }

    /* ── Statistikk-rad ─────────────────────────────────── */
    .kpd-stat-rad {
      display: flex; gap: 12px; align-items: stretch;
      padding: 16px 24px; flex-shrink: 0;
      background: #EEF2EC;
    }
    .kpd-stat-kort {
      display: flex; align-items: center; gap: 14px;
      background: white; border-radius: 16px;
      padding: 16px 20px; flex: 1;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .kpd-stat-mork { background: #1B3A2D; }
    .kpd-stat-mork .kpd-stat-num { color: white; }
    .kpd-stat-mork .kpd-stat-etikett { color: rgba(255,255,255,0.55); }
    .kpd-stat-ikonboks {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.15); color: white;
    }
    .kpd-stat-ikon-gronn { background: rgba(22,163,74,0.12); color: #16A34A; }
    .kpd-stat-ikon-muted { background: rgba(100,116,139,0.1); color: #64748B; }
    .kpd-stat-num {
      font-size: 26px; font-weight: 800; color: #1B3A2D;
      line-height: 1; letter-spacing: -0.03em;
    }
    .kpd-stat-num-gronn { color: #16A34A; }
    .kpd-stat-etikett { font-size: 11px; color: #94A3B8; font-weight: 500; margin-top: 3px; white-space: nowrap; }
    .kpd-stat-sok-kort { gap: 10px; padding: 13px 18px; flex: 1.4; }
    .kpd-sok-ikon { color: #94A3B8; flex-shrink: 0; }
    .kpd-sok-input {
      flex: 1; border: none; outline: none;
      font-size: 13px; font-family: inherit;
      color: #1B3A2D; background: transparent; width: 100%;
    }
    .kpd-sok-input::placeholder { color: #94A3B8; }

    /* ── Body ──────────────────────────────────────────── */
    .kpd-body {
      display: flex; flex: 1; min-height: 0; overflow: hidden;
      padding: 0 24px 24px; gap: 12px; background: #EEF2EC;
    }

    /* ── Venstre panel ─────────────────────────────────── */
    .kpd-venstre {
      width: 280px; flex-shrink: 0;
      background: white; border-radius: 16px;
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .kpd-hendelse-liste { flex: 1; overflow-y: auto; padding-bottom: 16px; }

    /* Seksjonsoverskrift (Med kjøreplan / Øvrige hendelser) */
    .kpd-seksjon-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 6px;
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: #1B3A2D;
      background: white; position: sticky; top: 0; z-index: 2;
    }
    .kpd-seksjon-header-dim { color: #94A3B8; }
    .kpd-seksjon-header-border { border-top: 1px solid #F1F5F1; margin-top: 4px; padding-top: 14px; }
    .kpd-seksjon-teller {
      background: #1B3A2D; color: white;
      font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
    }
    .kpd-seksjon-teller-dim { background: #E2E8E2; color: #94A3B8; }

    .kpd-dag-header {
      padding: 6px 16px 3px; font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em; color: #94A3B8; background: white;
    }
    .kpd-hendelse-rad {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; cursor: pointer;
      border-left: 3px solid transparent;
      border-bottom: 1px solid #F4F6F4;
      transition: background 0.1s;
    }
    .kpd-hendelse-rad:hover { background: #F6FAF6; }
    .kpd-hendelse-rad.aktiv {
      background: rgba(27,58,45,0.06);
      border-left-color: #1B3A2D;
    }
    .kpd-hendelse-info { flex: 1; min-width: 0; }
    .kpd-hendelse-tittel {
      font-size: 13px; font-weight: 600; color: #1B3A2D;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .kpd-hendelse-meta { font-size: 11px; color: #94A3B8; margin-top: 2px; }
    .kpd-antall-badge {
      flex-shrink: 0; background: #1B3A2D; color: white;
      font-size: 10px; font-weight: 700; padding: 2px 7px;
      border-radius: 10px; min-width: 20px; text-align: center;
    }
    .kpd-antall-tom { background: #E2E8E2; color: #94A3B8; }

    /* ── Høyre panel ───────────────────────────────────── */
    .kpd-hoyre {
      flex: 1; min-width: 0; display: flex;
      flex-direction: column; overflow: hidden;
      background: white; border-radius: 16px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .kpd-tom-panel {
      flex: 1; display: flex; align-items: center; justify-content: center;
    }
    .kpd-tom-innhold { text-align: center; padding: 40px 20px; }
    .kpd-tom-ikon-wrapper {
      width: 72px; height: 72px; border-radius: 50%;
      background: #EEF5EE; display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; color: #1B3A2D;
    }
    .kpd-tom-tittel { font-size: 17px; font-weight: 700; color: #1B3A2D; margin-bottom: 8px; }
    .kpd-tom-tekst { font-size: 13px; color: #94A3B8; max-width: 240px; margin: 0 auto; line-height: 1.5; }

    .kpd-panel-header {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
      padding: 20px 24px 18px;
      border-bottom: 1px solid #F0F5F0;
      background: white; flex-shrink: 0;
    }
    .kpd-panel-tilbake { display: none; }
    .kpd-panel-tittel {
      font-size: 20px; font-weight: 800; color: #1B3A2D;
      line-height: 1.2; letter-spacing: -0.02em;
    }
    .kpd-panel-meta { font-size: 12px; color: #94A3B8; margin-top: 5px; }
    .kpd-panel-knappar { display: flex; gap: 8px; align-items: center; flex-shrink: 0; padding-top: 2px; }
    .kpd-kjoreplan-scroll { flex: 1; overflow-y: auto; padding: 24px; }
    .kpd-kjoreplan-scroll > * { max-width: 820px; }

    /* ── Fase-header i dashboard ────────────────────────── */
    .kpd-kjoreplan-scroll .kp-fase-gruppe { margin-bottom: 24px; }
    .kpd-kjoreplan-scroll .kp-fase-header {
      padding: 8px 14px; border-radius: 9px; margin-bottom: 10px;
      background: rgba(128,128,128,0.07); border: 1.5px solid rgba(0,0,0,0.06);
      gap: 10px;
    }
    .kpd-kjoreplan-scroll .kp-fase-header-label {
      font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    }
    .kpd-kjoreplan-scroll .kp-fase-header-linje { display: none; }

    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Før"] .kp-fase-header {
      background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.22);
    }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Før"] .kp-fase-header-label { color: #4F46E5; }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Under"] .kp-fase-header {
      background: rgba(27,58,45,0.06); border-color: rgba(27,58,45,0.18);
    }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Under"] .kp-fase-header-label { color: #1B3A2D; }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Etter"] .kp-fase-header {
      background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.22);
    }
    .kpd-kjoreplan-scroll .kp-fase-gruppe[data-fase="Etter"] .kp-fase-header-label { color: #059669; }

    .kpd-kjoreplan-scroll .kp-rad {
      background: var(--surface);
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .kpd-kjoreplan-scroll .kp-rad:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.09); }

/* ============================================================
   LANDINGSSIDE
   ============================================================ */
#landing-screen {
  background: var(--bg, #1D1D1D);
  color: var(--text, #FFFFFF);
  font-family: 'Inter', sans-serif;
}

.landing-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* ============================================================
   LANDING — A+B (full-bredde dashboard)
   ============================================================ */
.lp-skjerm {
  display: flex; flex-direction: column;
  width: 100%; min-height: 100vh;
  background: var(--paper);
  color: var(--text);
}
.lp-body {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 0;
  width: 100%;
  flex: 1;
  align-items: start;
}
.lp-body[data-layout="single"] {
  grid-template-columns: minmax(0, 1fr);
}
.lp-sidebar {
  position: sticky;
  top: 56px;
  align-self: start;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 22px 18px 28px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 16px;
}
.lp-sidebar-tittel {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 0.04em;
  color: var(--text); margin: 0;
}
.lp-sidebar-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: -4px;
}
.lp-sidebar-tom {
  padding: 18px; border: 1px dashed var(--line-soft);
  border-radius: 10px; text-align: center;
  color: var(--text-muted); font-size: 12px;
}

.lp-main {
  padding: 28px clamp(20px, 4vw, 56px) 64px;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 24px;
}

.lp-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lp-hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 6px;
}
.lp-hero-tittel {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 400; line-height: 1; margin: 0;
  letter-spacing: 0.02em; color: var(--text);
}
.lp-hero-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.lp-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1280px) { .lp-stat-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .lp-stat-strip { grid-template-columns: 1fr; } }

.lp-events-blokk {
  display: flex; flex-direction: column; gap: 14px;
}
.lp-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 14px;
}
.lp-event-kort {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.lp-event-kort:hover {
  transform: translateY(-2px);
  border-color: var(--line-soft);
  box-shadow: 0 6px 18px rgba(29,29,29,0.07);
}
.lp-event-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--primary);
}
.lp-event-topp {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lp-event-navn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; line-height: 1; margin: 0;
  color: var(--text); letter-spacing: 0.02em; text-transform: uppercase;
}
.lp-event-pille {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
}
.lp-event-pille.live {
  background: var(--primary); color: #fff;
}
.lp-event-pille.live::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: #fff; animation: ev-pulse-dot 1.4s ease-in-out infinite;
}
.lp-event-pille.kommende { background: rgba(59,130,246,0.12); color: #1D4ED8; }
.lp-event-pille.avsluttet { background: var(--border); color: var(--text-muted); }

.lp-event-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--ink-soft);
}
.lp-event-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
}
.lp-event-meta-item svg { stroke: var(--text-muted); flex-shrink: 0; }
.lp-event-pil {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--primary);
  opacity: 0; transition: opacity 0.15s, right 0.15s;
}
.lp-event-kort:hover .lp-event-pil { opacity: 1; right: 14px; }

.lp-tom-state {
  grid-column: 1 / -1;
  padding: 32px; text-align: center;
  color: var(--text-muted); font-size: 13px;
  border: 1px dashed var(--line-soft); border-radius: 12px;
  background: var(--surface);
}

.lp-seksjon-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.lp-seksjon-tittel {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 0.04em;
  color: var(--text); margin: 0;
}

.lp-kp-grupper {
  display: flex; flex-direction: column; gap: 18px;
}
.lp-kp-gruppe {
  display: flex; flex-direction: column; gap: 8px;
}
.lp-kp-gruppe-tittel {
  font-size: 12px; font-weight: 700;
  color: var(--text); letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.lp-kp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 10px;
}
.lp-kp-kort {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lp-kp-kort:hover { border-color: var(--line-soft); box-shadow: 0 4px 12px rgba(29,29,29,0.06); }
.lp-kp-info { flex: 1; min-width: 0; }
.lp-kp-navn {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.lp-kp-meta {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-kp-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(99,102,241,0.12); color: #6366F1;
  white-space: nowrap; flex-shrink: 0;
}
.lp-kp-badge.event {
  background: rgba(16,185,129,0.12); color: #047857;
}

.lp-mitt-arbeid-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 14px 4px;
  flex: 1; min-height: 0; overflow-y: auto;
}
.lp-mitt-arbeid-wrap .mitt-arbeid-header { padding: 0 0 8px; border: none; }

@media (max-width: 1100px) {
  .lp-body { grid-template-columns: 1fr !important; }
  .lp-sidebar {
    position: static; height: auto;
    border-right: none; border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 720px) {
  .lp-main { padding: 18px 16px 56px; gap: 18px; }
  .lp-sidebar { padding: 16px; }
  .lp-hero-tittel { font-size: 30px; }
}

/* Topplinje */
.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
  background: var(--bg-panel, #2A2A2A);
  flex-shrink: 0;
}
.landing-org-chip {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--text, white);
  opacity: 0.8;
}
.landing-bruker-navn {
  font-size: 13px;
  color: var(--text-muted, #9CA3AF);
}
.landing-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(247,27,0,0.25);
  border: 1.5px solid rgba(247,27,0,0.5);
  color: var(--text, white);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; cursor: default;
}
.landing-logg-ut-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  color: var(--text-muted, #9CA3AF);
  font-size: 12px; padding: 5px 12px; border-radius: 6px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.landing-logg-ut-btn:hover { background: rgba(255,255,255,0.13); }

.landing-opprett-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: var(--primary, #F71B00);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(247,27,0,0.35);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.landing-opprett-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(247,27,0,0.45);
  opacity: 0.92;
}
.landing-opprett-btn:active {
  transform: translateY(0);
}

.landing-settings-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  color: var(--text, white);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.landing-settings-btn:hover {
  background: rgba(255,255,255,0.13);
  border-color: var(--primary, #F71B00);
}
.landing-settings-btn.icon-only {
  padding: 0;
  width: 36px;
  height: 36px;
  gap: 0;
  justify-content: center;
  flex-shrink: 0;
}

/* Innholdsseksjon */
.landing-innhold {
  flex: 1;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.landing-header { text-align: center; }
.landing-tittel {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
  color: var(--text, white);
  line-height: 1;
}
.landing-subtitle {
  font-size: 14px;
  color: var(--text-muted, #9CA3AF);
  margin: 0;
}

/* Event-kort */
.landing-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.landing-event-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 24px 22px;
  background: var(--bg-panel, #2A2A2A);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 16px;
  text-decoration: none;
  color: var(--text, white);
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.landing-event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border-color: var(--primary, #F71B00);
}
.landing-event-navn {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, white);
}
.landing-event-slug {
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
  font-family: monospace;
}
.landing-event-pil {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--primary, #F71B00);
  opacity: 0;
  transition: opacity 0.15s, right 0.15s;
}
.landing-event-card:hover .landing-event-pil {
  opacity: 1;
  right: 16px;
}

.landing-ingen-eventer {
  padding: 40px;
  text-align: center;
  color: var(--text-muted, #9CA3AF);
  font-size: 14px;
  background: var(--bg-panel, #2A2A2A);
  border: 1px dashed var(--border, rgba(255,255,255,0.1));
  border-radius: 16px;
  grid-column: 1 / -1;
}

/* Seksjonslabel (Arrangement / Kjøreplaner) */
.landing-seksjon-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  margin-bottom: -16px;
}

/* Mitt arbeid på landingssiden — bruk samme kort som org-modalen */
.landing-mitt-arbeid {
  background: var(--bg-panel, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 18px 20px;
}
.landing-mitt-arbeid .mitt-arbeid-seksjon { margin-bottom: 18px; }
.landing-mitt-arbeid .mitt-arbeid-seksjon:last-child { margin-bottom: 0; }
.mitt-arbeid-ikke-registrert {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 6px 0;
}

/* Kjøreplan-kort */
.landing-kp-seksjoner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.landing-kp-event-gruppe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landing-kp-event-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.landing-kp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.landing-kp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg-panel, #2A2A2A);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px;
  text-decoration: none;
  color: var(--text, white);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.landing-kp-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary, #F71B00);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.landing-kp-info { flex: 1; min-width: 0; }
.landing-kp-navn {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-kp-meta {
  font-size: 11px;
  color: var(--text-muted, #9CA3AF);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-kp-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  background: rgba(99,102,241,0.15);
  color: #818CF8;
  border: 1px solid rgba(99,102,241,0.25);
  flex-shrink: 0;
}
.landing-kp-type-badge.landing-kp-type-event {
  background: rgba(16,185,129,0.12);
  color: #34D399;
  border-color: rgba(16,185,129,0.25);
}

/* Sekundær opprett-knapp */
.landing-opprett-btn-sekundaer {
  background: transparent;
  border: 2px solid var(--border, rgba(255,255,255,0.2));
  color: var(--text-muted, #9CA3AF);
  box-shadow: none;
  font-size: 14px;
  padding: 12px 28px;
}
.landing-opprett-btn-sekundaer:hover {
  border-color: var(--primary, #F71B00);
  color: var(--text, white);
  box-shadow: none;
}

.landing-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--primary, #F71B00);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.landing-admin-btn:hover { opacity: 0.85; }

/* ============================================================
   DESIGN-KONFIGURATOR
   ============================================================ */
.design-panel {
  background: var(--bg-panel, #2A2A2A);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 16px;
  overflow: hidden;
}

.design-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  color: var(--text, white);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.design-panel-toggle {
  background: none; border: none;
  color: var(--text-muted, #9CA3AF);
  font-size: 13px; cursor: pointer; padding: 0;
}

#design-panel-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.design-section { display: flex; flex-direction: column; gap: 10px; }
.design-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #9CA3AF);
}

.design-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.design-preset-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, box-shadow 0.1s;
}
.design-preset-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.design-preset-btn.active {
  box-shadow: 0 0 0 2px white;
}

.design-custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.design-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.15);
  padding: 8px 12px;
  border-radius: 8px;
}
.design-custom-row label {
  flex: 1;
  font-size: 13px;
  color: var(--text, white);
  white-space: nowrap;
}
.design-custom-row input[type="color"] {
  width: 32px; height: 32px;
  border: 2px solid var(--border, rgba(255,255,255,0.2));
  border-radius: 6px;
  padding: 2px; cursor: pointer;
  background: none;
  flex-shrink: 0;
}
.dc-hex {
  font-size: 11px;
  font-family: monospace;
  color: var(--text-muted, #9CA3AF);
  min-width: 52px;
}

.design-modus-row { display: flex; gap: 8px; }
.design-modus-btn {
  flex: 1;
  padding: 9px;
  border-radius: 8px;
  border: 2px solid var(--border, rgba(255,255,255,0.15));
  background: rgba(0,0,0,0.15);
  color: var(--text-muted, #9CA3AF);
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.design-modus-btn.active {
  border-color: var(--primary, #F71B00);
  color: var(--text, white);
  background: rgba(247,27,0,0.1);
}
.design-modus-btn:hover:not(.active) {
  border-color: rgba(255,255,255,0.3);
  color: var(--text, white);
}

.design-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.design-lagre-btn {
  padding: 10px 24px;
  background: var(--primary, #F71B00);
  color: white; border: none;
  border-radius: 8px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s;
}
.design-lagre-btn:hover { opacity: 0.85; }
#design-lagre-status {
  font-size: 13px;
  color: var(--text-muted, #9CA3AF);
  transition: color 0.2s;
}

/* ==========================================
   ORG SETTINGS — INNSTILLINGER TAB (oset-)
   ========================================== */
.oset-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 16px;
}
.oset-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.oset-card {
  background: var(--bg-panel, #2A2A2A);
  border: 1.5px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px;
  overflow: hidden;
}
.oset-card-hdr {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.oset-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(128,128,128,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.oset-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.oset-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.oset-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
.oset-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.oset-badge-ok {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.25);
}
.oset-badge-off {
  background: rgba(156,163,175,0.08);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.oset-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oset-ai-active {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #22c55e;
  background: rgba(34,197,94,0.07);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 7px;
  padding: 7px 12px;
}
.oset-ai-active span { flex: 1; font-weight: 500; }
.oset-remove-btn {
  font-size: 11px !important;
  padding: 3px 10px !important;
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  border-radius: 5px !important;
  color: #ef4444 !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.oset-remove-btn:hover { background: rgba(239,68,68,0.18) !important; }
.oset-ai-input-row { display: flex; gap: 8px; align-items: center; }
.oset-primary-btn {
  padding: 9px 16px !important;
  background: var(--primary) !important;
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.oset-primary-btn:hover { opacity: 0.85 !important; }
.oset-ai-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.65;
  padding: 8px 12px;
  background: rgba(128,128,128,0.05);
  border-radius: 7px;
  border: 1px solid var(--border);
}
.oset-subsection { display: flex; flex-direction: column; gap: 8px; }
.oset-subsection-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.oset-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.oset-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(128,128,128,0.06);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 6px 8px;
  transition: border-color 0.15s;
}
.oset-color-swatch:hover { border-color: rgba(128,128,128,0.35); }
.oset-color-swatch input[type="color"] {
  width: 34px;
  height: 34px;
  border: 2px solid var(--border);
  border-radius: 7px;
  padding: 2px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
.oset-color-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.oset-color-swatch .dc-hex {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
  opacity: 0.7;
}
.oset-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
@media (max-width: 680px) {
  .oset-2col { grid-template-columns: 1fr; }
  .oset-color-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Lys modus-overrides for body */
body.light-mode {
  background: var(--bg, #F3F4F6);
  color: var(--text, #111827);
}
body.light-mode .landing-topbar {
  background: var(--bg-panel, #FFFFFF);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
body.light-mode .landing-event-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.light-mode .design-custom-row {
  background: rgba(0,0,0,0.04);
}
body.light-mode .design-modus-btn {
  background: rgba(0,0,0,0.04);
}
body.light-mode .design-preset-btn.active {
  box-shadow: 0 0 0 2px #111827;
}

/* ─── LIVE SYSTEM — broadcast-konsoll, dark-room readability ─ */
.live-header {
  display:flex;align-items:center;gap:18px;
  padding:18px 28px;border-bottom:1px solid rgba(255,255,255,0.10);
  flex-shrink:0;background:#0E0E12;
}
.live-header-left { display:flex;align-items:center;gap:14px;flex:1; }
.live-dot-aktiv {
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 11px;border-radius:5px;
  background:#DC2626;color:#fff;
  font-size:11px;font-weight:900;letter-spacing:0.16em;
  font-family:'Bebas Neue', sans-serif;
  box-shadow:0 0 14px rgba(220,38,38,0.55), inset 0 -2px 0 rgba(0,0,0,0.25);
  animation:livepulse 2.4s ease-in-out infinite;flex-shrink:0;
}
.live-dot-aktiv::before { content:'LIVE'; }
@keyframes livepulse {
  0%,100%{ box-shadow:0 0 14px rgba(220,38,38,0.55), inset 0 -2px 0 rgba(0,0,0,0.25); }
  50%    { box-shadow:0 0 22px rgba(220,38,38,0.95), 0 0 38px rgba(220,38,38,0.35), inset 0 -2px 0 rgba(0,0,0,0.25); }
}
.live-header-tittel {
  font-size:20px;font-weight:700;color:#fff;letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.live-header-lukk {
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.85);font-size:14px;font-weight:600;
  padding:9px 15px;border-radius:8px;cursor:pointer;
  transition:background 0.12s, border-color 0.12s;
}
.live-header-lukk:hover { background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.25); }

.live-split { display:grid;grid-template-columns:38% 38% 24%;height:100%;overflow:hidden; }
.live-venstre {
  border-right:1px solid rgba(255,255,255,0.08);
  background:#0A0A0E;display:flex;flex-direction:column;overflow:hidden;padding:22px;
}
.live-midt {
  overflow-y:auto;padding:24px;
  background:#0E0E12;display:flex;flex-direction:column;gap:18px;
  border-right:1px solid rgba(255,255,255,0.08);
}
.live-panel-tittel {
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.10em;
  color:rgba(255,255,255,0.5);margin-bottom:14px;
}
.live-liste { flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px; }
/* Legende — kort forklaring av handlinger over listen */
.live-legende {
  display:flex;flex-direction:column;gap:5px;
  padding:10px 12px;margin:0 0 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:9px;
  font-size:11.5px;color:rgba(255,255,255,0.65);line-height:1.45;
}
.live-legende-rad { display:flex;align-items:center;gap:9px; }
.live-legende-tag {
  flex-shrink:0;font-size:10.5px;font-weight:800;
  padding:3px 8px;border-radius:4px;letter-spacing:0.04em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.live-legende-tag-plan {
  background:rgba(245,158,11,0.13);color:#FCD34D;
  border:1px solid rgba(245,158,11,0.40);
}
.live-legende-tag-overtid {
  background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.18);
}
.live-legende-tag-auto {
  background:rgba(99,102,241,0.16);color:#A5B4FC;
  border:1px solid rgba(99,102,241,0.45);
}
.live-fase-header {
  position:relative;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:0.14em;
  color:rgba(255,255,255,0.85);
  padding:14px 0 8px 14px;margin-top:8px;
}
.live-fase-header:first-child { margin-top:0; }
.live-fase-header::before {
  content:'';position:absolute;left:0;top:14px;bottom:8px;width:3px;border-radius:2px;
  background:rgba(255,255,255,0.3);
}
/* Color-coded faser */
.live-fase-header[data-fase="Før"]::before,
.live-fase-header:nth-of-type(1):not([data-fase])::before  { background:#3B82F6; box-shadow:0 0 10px rgba(59,130,246,0.5); }
.live-fase-header[data-fase="Under"]::before { background:#10B981; box-shadow:0 0 10px rgba(16,185,129,0.5); }
.live-fase-header[data-fase="Etter"]::before { background:#A855F7; box-shadow:0 0 10px rgba(168,85,247,0.5); }
/* Match labels by text content (no data-fase attribute set yet) — use generic colored bar */
.live-item {
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.025);
  transition:background 0.12s, border-color 0.12s, transform 0.08s;
}
.live-item:hover { background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.16); }
.live-item:active { transform:scale(0.998); }
.live-item-aktiv {
  background:linear-gradient(180deg,rgba(16,185,129,0.18) 0%,rgba(16,185,129,0.10) 100%) !important;
  border-color:rgba(16,185,129,0.55) !important;
  box-shadow:0 0 0 1px rgba(16,185,129,0.25), 0 0 22px rgba(16,185,129,0.20);
}
.live-item-valgt {
  background:rgba(99,102,241,0.14) !important;
  border-color:rgba(99,102,241,0.50) !important;
  box-shadow:0 0 0 1px rgba(99,102,241,0.20);
}
.live-overflow-aktiv {
  background:rgba(247,27,0,0.15) !important;
  color:#F87171 !important;
  border-color:rgba(247,27,0,0.4) !important;
}
.live-overflow-toggle { font-size:13px;padding:3px 6px; }
.live-item.dragging { opacity:0.4; }
.live-item { position: relative; }
.live-item.drag-over-top::before,
.live-item.drag-over-bottom::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: #6366F1;
  border-radius: 2px;
  z-index: 10;
}
.live-item.drag-over-top::before  { top: -2px; }
.live-item.drag-over-bottom::after { bottom: -2px; }
.live-item-indikator { font-size:16px;color:#10B981;flex-shrink:0;width:18px;text-align:center; }
.live-item-aktiv .live-item-indikator { color:#34D399; text-shadow:0 0 8px rgba(16,185,129,0.6); }
.live-item-info { flex:1;min-width:0; }
.live-item-tittel { font-size:16px;font-weight:700;color:#fff;line-height:1.3;letter-spacing:-0.005em; }
.live-item-var { font-size:13px;color:rgba(255,255,255,0.55);margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:0.02em; }
.live-item-var-running { display:flex;align-items:baseline;gap:10px;margin-top:5px; }
.live-item-scheduled-badge {
  font-size:12px;font-weight:800;color:#F59E0B;
  background:rgba(245,158,11,0.10);
  border:1px solid rgba(245,158,11,0.45);
  border-radius:5px;padding:2px 8px;letter-spacing:0.04em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.live-item-avbryt-plan {
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.55);font-size:11px;cursor:pointer;padding:3px 7px;border-radius:4px;line-height:1;
  transition:background 0.12s, color 0.12s, border-color 0.12s;
}
.live-item-avbryt-plan:hover { color:#FCA5A5;background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.4); }
.live-item-running-timer {
  font-size:28px;font-weight:900;letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;line-height:1;
  text-shadow:0 0 12px currentColor;
}
.live-item-var-av { font-size:12px;color:rgba(255,255,255,0.4); }
.live-ingen { color:rgba(255,255,255,0.4);font-size:14px;padding:32px 0;text-align:center; }

.live-hoyre {
  overflow-y:auto;padding:22px;
  background:#0A0A0E;display:flex;flex-direction:column;gap:18px;
}
.live-aktiv-bar {
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:linear-gradient(180deg,#15171F 0%,#0F1116 100%);
  border:1px solid rgba(16,185,129,0.35);
  border-radius:14px;padding:18px 22px;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(16,185,129,0.10), 0 0 32px rgba(16,185,129,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
.live-aktiv-bar-tom {
  border-color:rgba(255,255,255,0.10);
  box-shadow:none;background:rgba(255,255,255,0.02);
  opacity:0.6;
}
.live-aktiv-bar-venstre { display:flex;flex-direction:column;gap:6px;min-width:0;flex:1; }
.live-aktiv-bar-tittel {
  font-size:24px;font-weight:800;color:#fff;letter-spacing:-0.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;
}
.live-aktiv-bar-cue {
  font-size:13px;color:rgba(255,255,255,0.55);
  font-variant-numeric:tabular-nums;letter-spacing:0.02em;
  text-transform:uppercase;font-weight:600;
}
.live-aktiv-bar-timer {
  font-size:clamp(48px, 6vw, 72px);
  font-weight:900;letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;line-height:1;flex-shrink:0;
  transition:color 0.3s, text-shadow 0.3s;
  text-shadow:0 0 24px currentColor;
  font-feature-settings:'tnum' 1, 'ss01' 1;
}
.live-aktiv-bar-ingen { font-size:15px;color:rgba(255,255,255,0.45);font-weight:600; }

.live-venstre-header {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:14px;
}
.live-klokke {
  font-family:'Bebas Neue', sans-serif;font-size:36px;font-weight:700;
  color:#fff;letter-spacing:0.06em;font-variant-numeric:tabular-nums;
  flex-shrink:0;line-height:1;
  text-shadow:0 0 18px rgba(255,255,255,0.18);
}
.live-footer-rad {
  display:flex;flex-direction:column;gap:8px;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:14px;margin-top:10px;flex-shrink:0;
}
.live-total-rad { display:flex;justify-content:space-between;align-items:baseline; }
.live-total-label { font-size:11px;font-weight:700;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.10em; }
.live-total-tid { font-size:15px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:0.01em; }

.live-kontroll-btns { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; }
.live-btn {
  font-size:15px;font-weight:800;padding:13px 24px;border-radius:10px;
  cursor:pointer;border:1.5px solid transparent;transition:all 0.12s;
  white-space:nowrap;letter-spacing:0.01em;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
}
.live-btn:active:not(:disabled) { transform:scale(0.98); }
.live-btn:disabled { opacity:0.30;cursor:not-allowed; }
.live-btn-start {
  background:linear-gradient(180deg,#10B981 0%,#059669 100%);color:#fff;
  box-shadow:0 0 0 1px rgba(16,185,129,0.4), 0 4px 18px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.live-btn-start:hover:not(:disabled) { background:linear-gradient(180deg,#059669 0%,#047857 100%); }
.live-btn-pause { background:rgba(245,158,11,0.14);color:#FCD34D;border-color:rgba(245,158,11,0.50); }
.live-btn-pause:hover:not(:disabled) { background:rgba(245,158,11,0.24); }
.live-btn-neste { background:rgba(99,102,241,0.16);color:#A5B4FC;border-color:rgba(99,102,241,0.45); }
.live-btn-neste:hover:not(:disabled) { background:rgba(99,102,241,0.26); }
.live-btn-stopp { background:rgba(239,68,68,0.10);color:#FCA5A5;border-color:rgba(239,68,68,0.40); }
.live-btn-stopp:hover:not(:disabled) { background:rgba(239,68,68,0.22); }
.live-btn-send { background:linear-gradient(180deg,#F71B00 0%,#CC1500 100%);color:#fff;border:none;box-shadow:0 4px 16px rgba(247,27,0,0.35); }
.live-btn-send:hover { background:linear-gradient(180deg,#CC1500 0%,#A21000 100%); }
.live-btn-fjern { background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.12); }
.live-btn-fjern:hover { background:rgba(255,255,255,0.12);color:#fff; }
.live-btn-avslutt {
  background:rgba(239,68,68,0.12);color:#FCA5A5;
  border:1px solid rgba(239,68,68,0.40);
  font-size:14px;font-weight:700;padding:9px 18px;border-radius:8px;cursor:pointer;
  transition:background 0.12s;letter-spacing:0.02em;
}
.live-btn-avslutt:hover { background:rgba(239,68,68,0.24);border-color:rgba(239,68,68,0.6); }

.live-divider { height:1px;background:rgba(255,255,255,0.11); }

.live-seksjon-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94A3B8;margin-bottom:10px; }
.live-melding-seksjon { display:flex;flex-direction:column; }
.live-melding-input {
  width:100%;box-sizing:border-box;background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);border-radius:8px;
  color:white;font-family:inherit;font-size:13px;padding:10px 12px;resize:none;outline:none;
}
.live-melding-input:focus { border-color:rgba(247,27,0,0.5); }
.live-melding-input::placeholder { color:#64748B; }

.live-url-seksjon { display:flex;flex-direction:column;gap:8px; }
.live-url-rad { display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:8px 12px; }
.live-url-label { font-size:11px;font-weight:700;color:#64748B;width:60px;flex-shrink:0; }
.live-url-tekst { flex:1;font-size:11px;color:#94A3B8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace; }
.live-url-btn { background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.16);color:#94A3B8;font-size:11px;font-weight:600;padding:4px 10px;border-radius:5px;cursor:pointer;flex-shrink:0;white-space:nowrap; }
.live-url-btn:hover { background:rgba(255,255,255,0.18);color:white; }

/* Juster-tid knapper — større hit-target, tydeligere fargesignal */
.live-juster-seksjon { background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:14px; }
.live-juster-btn {
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.85);font-size:14px;font-weight:800;
  padding:10px 14px;border-radius:8px;cursor:pointer;flex:1;
  transition:all 0.1s;font-variant-numeric:tabular-nums;letter-spacing:0.01em;
  min-height:40px;
}
.live-juster-btn:hover { background:rgba(239,68,68,0.18);color:#FCA5A5;border-color:rgba(239,68,68,0.45); }
.live-juster-btn:active { transform:scale(0.97); }
.live-juster-pluss { }
.live-juster-pluss:hover { background:rgba(16,185,129,0.18) !important;color:#6EE7B7 !important;border-color:rgba(16,185,129,0.45) !important; }

/* Live-inspektor: full feltredigering i midtkolonnen */
.live-inspektor {
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
}
.live-inspektor-header {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:rgba(255,255,255,0.035);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.live-inspektor-header-tittel {
  font-size:14px;font-weight:800;color:#fff;letter-spacing:-0.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.live-inspektor-form {
  padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;
}
.live-inspektor-rad { display:flex;flex-direction:column;gap:5px; }
.live-inspektor-rad.span2 { grid-column:1/-1; }
.live-inspektor-label {
  font-size:11px;font-weight:800;color:rgba(255,255,255,0.55);
  text-transform:uppercase;letter-spacing:0.10em;
}
.live-inspektor-input {
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  border-radius:7px;color:#fff;font-size:14px;font-family:inherit;
  padding:9px 12px;outline:none;width:100%;box-sizing:border-box;
  transition:border-color 0.12s, background 0.12s;
}
.live-inspektor-input:focus {
  border-color:rgba(99,102,241,0.6);background:rgba(99,102,241,0.08);
  box-shadow:0 0 0 3px rgba(99,102,241,0.18);
}
textarea.live-inspektor-input { resize:vertical;min-height:54px;line-height:1.5; }
select.live-inspektor-input { cursor:pointer; }
.live-inspektor-deler {
  grid-column:1/-1;font-size:11px;font-weight:800;color:rgba(255,255,255,0.55);
  text-transform:uppercase;letter-spacing:0.10em;
  border-top:1px solid rgba(255,255,255,0.06);padding-top:10px;margin-top:4px;
}
.live-inspektor-lagre {
  grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:6px;gap:10px;
}
.live-inspektor-lagre-btn {
  background:linear-gradient(180deg,#10B981 0%,#059669 100%);
  border:none;color:#fff;font-size:14px;font-weight:800;
  padding:11px 26px;border-radius:8px;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 14px rgba(16,185,129,0.30);
  transition:transform 0.06s, box-shadow 0.12s;
}
.live-inspektor-lagre-btn:hover { background:linear-gradient(180deg,#059669 0%,#047857 100%); }
.live-inspektor-lagre-btn:active { transform:scale(0.97); }
.live-inspektor-tom {
  color:rgba(255,255,255,0.45);font-size:14px;text-align:center;padding:36px 18px;line-height:1.6;
}

/* Meldingseksjon */
.live-meld-monitor-rad {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;padding:10px 14px;margin-bottom:10px;
}
.live-meld-monitor-rad.har-melding {
  background:rgba(247,27,0,0.1);border-color:rgba(247,27,0,0.35);
}
.live-meld-monitor-info { display:flex;flex-direction:column;gap:2px;min-width:0;flex:1; }
.live-meld-monitor-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#475569; }
.live-meld-monitor-rad.har-melding .live-meld-monitor-label { color:#F87171; }
.live-meld-monitor-tekst { font-size:13px;font-weight:600;color:#94A3B8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.live-meld-monitor-rad.har-melding .live-meld-monitor-tekst { color:white; }
.live-meld-fjern-btn {
  background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:#F87171;
  font-size:12px;font-weight:700;padding:6px 12px;border-radius:7px;cursor:pointer;
  font-family:inherit;flex-shrink:0;white-space:nowrap;
}
.live-meld-fjern-btn:hover:not(:disabled) { background:rgba(239,68,68,0.25);border-color:rgba(239,68,68,0.5); }
.live-meld-fjern-btn:disabled { opacity:0.3;cursor:not-allowed; }

.live-meld-liste { display:flex;flex-direction:column;gap:5px;margin-bottom:8px; }
.live-meld-rad {
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;padding:5px 8px;
}
.live-meld-rad.aktiv { background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.35); }
.live-meld-rad-input {
  flex:1;background:transparent;border:none;color:white;font-size:13px;
  font-family:inherit;padding:3px 4px;outline:none;min-width:0;
}
.live-meld-rad-input::placeholder { color:#475569; }
.live-meld-rad.aktiv .live-meld-rad-input { color:#6EE7B7; }
.live-meld-send-btn {
  background:rgba(247,27,0,0.15);border:1px solid rgba(247,27,0,0.35);color:#F87171;
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:5px;cursor:pointer;
  font-family:inherit;flex-shrink:0;white-space:nowrap;
}
.live-meld-send-btn.aktiv { background:rgba(16,185,129,0.15);border-color:rgba(16,185,129,0.4);color:#10B981; }
.live-meld-send-btn:hover { background:rgba(247,27,0,0.3);color:white; }
.live-meld-send-btn.aktiv:hover { background:rgba(16,185,129,0.3);color:white; }
.live-meld-slett-btn {
  background:none;border:none;color:rgba(255,255,255,0.25);font-size:12px;
  padding:4px 6px;cursor:pointer;border-radius:4px;flex-shrink:0;
}
.live-meld-slett-btn:hover { color:#EF4444;background:rgba(239,68,68,0.12); }

.live-meld-ny-rad {
  display:flex;align-items:center;gap:5px;
  border-top:1px solid rgba(255,255,255,0.09);padding-top:8px;margin-top:4px;
}
.live-meld-ny-input {
  flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  border-radius:7px;color:white;font-size:13px;font-family:inherit;
  padding:7px 10px;outline:none;min-width:0;
}
.live-meld-ny-input:focus { border-color:rgba(247,27,0,0.45);background:rgba(247,27,0,0.06); }
.live-meld-ny-input::placeholder { color:#475569; }
.live-meld-ny-lagre {
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);color:#94A3B8;
  font-size:12px;font-weight:600;padding:6px 10px;border-radius:6px;cursor:pointer;font-family:inherit;flex-shrink:0;
}
.live-meld-ny-lagre:hover { color:white;background:rgba(255,255,255,0.14); }
.live-meld-ny-send {
  background:#F71B00;border:none;color:white;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:6px;cursor:pointer;font-family:inherit;flex-shrink:0;
}
.live-meld-ny-send:hover { opacity:0.85; }

/* (kept for compat) */
.live-meld-bibliotek { display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.09); }
.live-meld-chip {
  display:flex;align-items:stretch;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);
  border-radius:6px;overflow:hidden;transition:all 0.1s;
}
.live-meld-chip.aktiv { background:rgba(16,185,129,0.12) !important;border-color:rgba(16,185,129,0.4) !important; }
.live-meld-chip:hover { border-color:rgba(255,255,255,0.28); }
.live-meld-chip-btn {
  padding:5px 10px;font-size:12px;font-weight:500;color:rgba(255,255,255,0.75);
  background:transparent;border:none;cursor:pointer;font-family:inherit;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.live-meld-chip.aktiv .live-meld-chip-btn { color:#10B981;font-weight:700; }
.live-meld-chip-btn:hover { color:white; }
.live-meld-chip-slett {
  padding:4px 7px;font-size:10px;color:rgba(255,255,255,0.3);
  background:transparent;border:none;border-left:1px solid rgba(255,255,255,0.1);
  cursor:pointer;flex-shrink:0;line-height:1;
}
.live-meld-chip-slett:hover { color:#EF4444;background:rgba(239,68,68,0.12); }

/* Mini monitor preview */
.live-mini-monitor {
  background:#0D1521;border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;overflow:hidden;flex-shrink:0;
}
.live-mini-mon-topbar {
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.live-mini-mon-label { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#64748B; }
.live-mini-mon-dot { width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 6px #10B981;animation:livepulse 2s ease-in-out infinite; }
.live-mini-mon-dot.inaktiv { background:#475569;box-shadow:none;animation:none; }
.live-mini-mon-skjerm {
  padding:12px 14px;text-align:center;min-height:72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.live-mini-mon-artist { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#F59E0B;margin-bottom:2px; }
.live-mini-mon-naa-label { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#475569; }
.live-mini-mon-item-tittel { font-size:13px;font-weight:700;color:white;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.live-mini-mon-timer { font-size:30px;font-weight:900;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1; }
.live-mini-mon-venter { font-size:12px;color:#475569; }
.live-mini-mon-meld {
  font-size:10px;color:#F87171;font-weight:600;background:rgba(247,27,0,0.12);
  border-radius:4px;padding:3px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.live-mini-mon-neste {
  padding:6px 10px;font-size:10px;color:#94A3B8;
  border-top:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;
}

/* Inline edit form i live-listen */
.live-item-editmod { cursor:default;flex-wrap:wrap;align-items:flex-start; }
.live-item-edit-form { width:100%;display:flex;flex-direction:column;gap:7px;padding:2px 0; }
.live-item-edit-row { display:flex;align-items:center;gap:7px; }
.live-item-edit-label { font-size:10px;font-weight:700;color:#94A3B8;text-transform:uppercase;letter-spacing:0.07em;min-width:72px;flex-shrink:0; }
.live-item-edit-input {
  flex:1;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.18);
  border-radius:6px;color:white;font-size:12px;font-family:inherit;
  padding:5px 9px;outline:none;
}
.live-item-edit-input:focus { border-color:rgba(99,102,241,0.55);background:rgba(99,102,241,0.08); }
.live-item-edit-actions { display:flex;gap:5px;margin-top:2px;justify-content:flex-end; }
.live-item-edit-save { background:#10B981;border:none;color:white;font-size:11px;font-weight:700;padding:5px 13px;border-radius:5px;cursor:pointer;font-family:inherit; }
.live-item-edit-save:hover { background:#0ea274; }
.live-item-edit-cancel { background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);color:#94A3B8;font-size:11px;padding:5px 10px;border-radius:5px;cursor:pointer;font-family:inherit; }
.live-item-edit-btn { background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);color:#94A3B8;font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;cursor:pointer;flex-shrink:0; }
.live-item-edit-btn:hover { color:white;background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3); }
.live-item-plan-btn { display:none; }
.live-item:hover .live-item-plan-btn { display:inline-flex; }

/* FOH detalje-panel */
.live-detaljer-panel {
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;
}
.live-detalj-rad { display:flex;gap:10px;align-items:baseline; }
.live-detalj-key { font-size:11px;font-weight:700;color:#64748B;white-space:nowrap;min-width:110px;flex-shrink:0; }
.live-detalj-val { font-size:13px;color:#CBD5E1;line-height:1.35; }

/* Planlagt start per item — alltid synlig, ingen hover-å-avsløre i live-bruk */
.live-item-actions { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.live-item-btn {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.85);
  font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:7px;
  cursor:pointer;font-family:inherit;
  transition:background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
  min-height:32px;display:inline-flex;align-items:center;
}
.live-item-btn:hover { background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.28); }
.live-item-btn:active { transform:scale(0.97); }
.live-overflow-toggle.live-overflow-aktiv {
  background:rgba(99,102,241,0.18);color:#A5B4FC;
  border-color:rgba(99,102,241,0.5);
  box-shadow:0 0 12px rgba(99,102,241,0.20);
}
.live-schedule-time {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;font-size:13px;font-weight:700;
  padding:6px 8px;border-radius:6px;
  width:88px;cursor:pointer;
  font-variant-numeric:tabular-nums;
  font-family:'SF Mono','JetBrains Mono',Consolas,monospace;
  display:inline-block; /* var hidden — nå alltid synlig */
}
.live-schedule-time:hover { border-color:rgba(255,255,255,0.28);background:rgba(255,255,255,0.10); }
.live-schedule-time:focus { outline:none;border-color:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,0.2); }
/* Plan-knappen (siste <button> i .live-item-actions) skal alltid være synlig */
.live-item-actions > button:last-child { display:inline-flex; }
.live-schedule-time:focus { outline:none;border-color:rgba(245,158,11,0.4);color:#F59E0B; }

/* Live button in kjøreplan panel */
.live-start-btn, .live-monitor-btn, .kp-monitor-btn {
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:7px;cursor:pointer;
  background:rgba(16,185,129,0.12);color:#10B981;
  border:1.5px solid rgba(16,185,129,0.3);
  transition:all 0.12s;white-space:nowrap;
}
.live-start-btn:hover, .live-monitor-btn:hover, .kp-monitor-btn:hover { background:rgba(16,185,129,0.22); }
/* Skill Monitor visuelt fra Live: blå-tone */
.live-monitor-btn, .kp-monitor-btn {
  background:rgba(59,130,246,0.10);
  color:#2563EB;
  border-color:rgba(59,130,246,0.35);
}
.live-monitor-btn:hover, .kp-monitor-btn:hover { background:rgba(59,130,246,0.20); }


/* ─── ENDRINGSLOGG PANEL ────────────────────────────────── */
.logg-rad {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background 0.1s;
}
.logg-rad:hover { background: rgba(255,255,255,0.04); }
.logg-rad-angret { opacity: 0.45; }
.logg-ikon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #94A3B8; margin-top: 2px;
}
.logg-info { flex: 1; min-width: 0; }
.logg-beskriv { font-size: 13px; font-weight: 600; color: #E2E8F0; line-height: 1.4; word-break: break-word; }
.logg-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11px; color: #64748B;
}
.logg-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(247,27,0,0.3); border: 1px solid rgba(247,27,0,0.5);
  color: white; font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.logg-angret-label {
  background: rgba(16,185,129,0.15); color: #10B981;
  border: 1px solid rgba(16,185,129,0.3); border-radius: 4px;
  padding: 1px 6px; font-size: 10px; font-weight: 700;
}
.logg-angre-btn {
  flex-shrink: 0; background: rgba(247,27,0,0.1);
  border: 1.5px solid rgba(247,27,0,0.3); color: #F87171;
  font-size: 11px; font-weight: 700; padding: 5px 10px;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: all 0.1s; margin-top: 2px;
}
.logg-angre-btn:hover { background: rgba(247,27,0,0.22); color: white; }
.logg-angre-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================
   MOBIL — max 768px
   Alle desktop-regler forblir uendret.
   ========================================== */
@media (max-width: 768px) {

  /* ── Innloggingsskjerm ──────────────────── */
  #login-screen { padding: 32px 24px; box-sizing: border-box; text-align: center; }

  /* ── Header ─────────────────────────────── */
  .header-panel { padding: 6px 14px 0; }
  .header-row1  { padding: 6px 0 8px; gap: 8px; }
  .header-row2,
  .header-row3  { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .hoved-tittel { font-size: 16px; }
  .header-zone  { padding: 0 8px; }

  /* ── Generelle modaler ───────────────────── */
  .modal-backdrop,
  .modal { align-items: flex-start; }

  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 100dvh;
    border-radius: 0 !important;
    padding: 20px 16px 32px !important;
    box-sizing: border-box;
  }

  /* Bekreft-modal: trenger ikke full høyde */
  #confirmModal .modal-content {
    min-height: auto !important;
    width: 88% !important;
    max-width: 360px !important;
    margin: 20vh auto 0 !important;
    border-radius: 16px !important;
    padding: 28px 22px !important;
  }

  /* Alle sidebarer: full bredde på mobil */
  #eventModal,
  #infoModal,
  #aiSporModal { width: 100% !important; }
  #eventModal .modal-content,
  #infoModal  .modal-content,
  #aiSporModal .modal-content {
    width: 100% !important;
    border-radius: 0 !important;
  }

  /* ── Skjemalgitter → enkeltkolonne ─────── */
  .form-grid         { grid-template-columns: 1fr !important; }
  .full-width        { grid-column: span 1 !important; }
  .info-meta-grid    { grid-template-columns: 1fr !important; }
  .person-events-grid { grid-template-columns: 1fr !important; }

  /* ── Info-modal layout ───────────────────── */
  #infoModal .modal-content { width: 100% !important; }
  .info-layout {
    grid-template-columns: 1fr !important;
  }
  .info-kp-kolonne {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: 8px;
  }

  /* ── Org-side (fullskjerm) ─────────────── */
  .orgp-nav { width: 44px !important; padding: 10px 4px !important; }
  .orgp-nav-soek { display: none !important; }
  .orgp-nav-gruppe-tittel { display: none !important; }
  .orgp-nav-btn { padding: 9px !important; justify-content: center !important; font-size: 0 !important; gap: 0 !important; }
  .orgp-nav-btn svg { flex-shrink: 0; }
  .orgp-nav-btn-badge { display: none !important; }
  .orgp-nav-footer-info, .orgp-nav-footer-logout { display: none !important; }
  .orgp-content { padding: 14px 16px !important; }

  /* ── Info-modal footer knapper ──────────── */
  .info-modal-footer {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .info-modal-footer > div {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .info-modal-footer .btn-save,
  .info-modal-footer .btn-cancel {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

  /* ── Kjøreplan-dashboard — mobil ─ */
  #kp-dashboard { overflow: hidden; }
  .kpd-stat-rad { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .kpd-stat-kort { flex: calc(50% - 4px); min-width: 130px; padding: 12px 14px; }
  .kpd-stat-num { font-size: 22px; }
  .kpd-stat-ikonboks { width: 36px; height: 36px; }
  .kpd-stat-sok-kort { flex: 100%; min-width: unset; }
  .kpd-body { flex-direction: column !important; padding: 0 12px 12px; gap: 8px; }
  .kpd-venstre { width: 100%; border-radius: 12px; }
  .kpd-hoyre { border-radius: 12px; }

  /* Liste-visning (default) */
  #kp-dashboard[data-kpd-vis="liste"] .kpd-venstre {
    width: 100% !important; max-height: 100% !important; flex: 1;
    border-right: none !important; border-bottom: none !important;
  }
  #kp-dashboard[data-kpd-vis="liste"] .kpd-hoyre { display: none !important; }

  /* Detalj-visning */
  #kp-dashboard[data-kpd-vis="detalj"] .kpd-venstre { display: none !important; }
  #kp-dashboard[data-kpd-vis="detalj"] .kpd-hoyre {
    flex: 1 !important; width: 100% !important; min-height: 0; overflow-y: auto;
  }

  /* Fallback (ingen data-attr satt ennå) */
  #kp-dashboard:not([data-kpd-vis]) .kpd-venstre {
    width: 100% !important; max-height: 42vh;
    border-right: none !important; border-bottom: 1px solid #F0F5F0; flex-shrink: 0;
  }
  #kp-dashboard:not([data-kpd-vis]) .kpd-hoyre { min-height: 0; overflow-y: auto; }

  /* Tilbake-knapp i kjøreplandetalj (kun mobil) */
  .kpd-panel-tilbake {
    display: flex !important;
    align-items: center; gap: 6px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    font-size: 13px; font-weight: 600;
    padding: 6px 12px; border-radius: 8px;
    cursor: pointer; flex-shrink: 0; font-family: inherit;
  }

  .kpd-header { padding: 10px 14px; gap: 8px; }
  .kpd-overskrift { font-size: 14px; }
  .kpd-panel-header { padding: 12px 16px 10px; gap: 10px; flex-wrap: wrap; }
  .kpd-panel-tittel { font-size: 16px; }
  .kpd-panel-knappar { flex-wrap: wrap; gap: 6px; }
  .kpd-kjoreplan-scroll { padding: 12px 14px; }

  /* ── Kjøreplan-rad ──────────────────────── */
  .kp-rad {
    grid-template-columns: 16px 44px 1fr auto !important;
    gap: 7px !important;
    padding: 9px 10px !important;
  }

  /* ── Live kontrollpanel ─────────────────── */
  .live-split {
    grid-template-columns: 1fr !important;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto !important;
  }
  .live-venstre,
  .live-midt,
  .live-hoyre {
    overflow-y: visible !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    height: auto !important;
    min-height: 0;
  }
  .live-hoyre { border-bottom: none !important; }
  .live-liste {
    overflow-y: visible !important;
    max-height: none !important;
    flex: none !important;
  }
  .live-header        { padding: 10px 14px; gap: 10px; }
  .live-header-tittel { font-size: 13px; }

  /* Inspector-skjema → enkeltkolonne */
  .live-inspektor-form {
    grid-template-columns: 1fr !important;
  }
  .live-inspektor-rad.span2 {
    grid-column: span 1 !important;
  }

  /* URL-seksjon: stabel vertikalt */
  .live-url-seksjon { gap: 6px; }
  .live-url-rad     { flex-wrap: wrap; }
  .live-url-tekst   { width: 100%; }

  /* ── Trykkmål: minimum 44px ─────────────── */
  button, select, input[type="button"], input[type="submit"] {
    min-height: 40px;
  }
  .icon-btn        { width: 40px; height: 40px; }
  .live-item       { padding: 14px 14px; }
  .kpd-hendelse-rad { padding: 11px 14px; }

  /* ── Toast: full bredde nedentil ─────────── */
  #toast-varsel {
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    min-width: 0 !important;
    bottom: 20px !important;
  }

  /* ── Admin-tabell: horisontal scroll ─────── */
  .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Landing/org-side ───────────────────── */
  #landing-screen { overflow-x: hidden; }
  .landing-topbar {
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 6px;
    box-sizing: border-box;
  }
  .landing-topbar-actions {
    gap: 6px !important;
    width: 100%;
  }
  .landing-settings-btn { font-size: 12px; padding: 5px 10px; }
  .landing-bruker-navn { display: none; }
  .landing-innhold {
    padding: 20px 16px 80px;
    box-sizing: border-box;
    max-width: 100%;
  }
  .landing-tittel { font-size: 30px; }
  .landing-events-grid, .landing-kp-grid {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
  .landing-event-card, .landing-kp-card {
    box-sizing: border-box;
    max-width: 100%;
  }
  .landing-event-card { padding: 16px 14px 14px; }
  .landing-kp-card { padding: 12px 14px; }

  /* ── Modaler: forhindre horisontal overflow ─ */
  .modal-content { overflow-x: hidden; }

  /* ── Info-modal: kompakt 2-kolonne grid ──── */
  #infoModal .info-meta-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #infoModal .info-item {
    padding: 8px 10px;
    border-radius: 8px;
  }
  #infoModal .info-value { font-size: 13px; }

  /* ── Kjøreplan-seksjon i info-modal ──────── */
  #infoModal .info-kp-kolonne {
    border-top: 2px solid var(--primary);
    padding-top: 18px;
    margin-top: 4px;
  }
  #infoModal .kp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
  }
  #infoModal .kp-header-actions { flex-wrap: wrap; gap: 6px; }
  #infoModal .kp-tittel { font-size: 13px; }

  /* ── Kjøreplanskjema: kompakt + forhindre iOS-zoom ─ */
  .kp-skjema-rad {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }
  .kp-skjema-felt {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .kp-input, .kp-skjema input, .kp-skjema select, .kp-skjema textarea {
    font-size: 16px !important;
    min-height: 0;
    padding: 8px 10px;
  }
  /* Forhindre iOS-zoom på alle skjema-felt i modaler */
  .modal-content input,
  .modal-content select,
  .modal-content textarea {
    font-size: 16px !important;
  }

  /* ── Skjema-footer: sticky over browser-chrome ─ */
  .modal-form-footer {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding: 12px 0 max(16px, env(safe-area-inset-bottom, 16px));
    margin: 8px 0 -32px;
    border-top: 1px solid var(--border);
  }

}

/* ============================================================
   MOBIL LISTEVISNING
   ============================================================ */

.mobil-header {
  background: #1D1D1D;
  padding: max(12px, env(safe-area-inset-top, 12px)) 16px 0;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.4);
}
.mobil-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
}
.mobil-tittel {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: white;
  letter-spacing: 0.08em;
  font-weight: 400;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobil-header-actions { display: flex; align-items: center; gap: 10px; }
.mobil-filter-btn {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.8);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.mobil-filter-btn.aktiv { background: rgba(247,27,0,0.25); border-color: rgba(247,27,0,0.5); }
.mobil-filter-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--primary);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-sizing: border-box;
}
.mobil-tilbake-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}
.mobil-tilbake-btn:active { background: rgba(255,255,255,0.15); }
.mobil-fullversjon-btn {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 0.15s, border-color 0.15s;
}
.mobil-fullversjon-btn:active { color: rgba(255,255,255,0.7); }

/* Dag-tabs */
/* Min dag / Alle hendelser-toggle (segmentert) */
.mobil-mindag-toggle {
  display: flex;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 10px;
  gap: 2px;
}
.mobil-mindag-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobil-mindag-tab:active { background: rgba(255,255,255,0.06); }
.mobil-mindag-tab.aktiv {
  background: rgba(255,255,255,0.14);
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.mobil-dag-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.mobil-dag-tabs::-webkit-scrollbar { display: none; }
.mobil-dag-tab {
  flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  min-height: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobil-dag-tab:active { background: rgba(255,255,255,0.12); }
.mobil-dag-tab.aktiv {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 2px 10px rgba(247,27,0,0.35);
}

/* Filter-panel */
.mobil-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mobil-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mobil-filter-input,
.mobil-filter-select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: white;
  font-size: 16px;
  box-sizing: border-box;
  -webkit-appearance: none;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.mobil-filter-input:focus,
.mobil-filter-select:focus {
  outline: none;
  border-color: rgba(247,27,0,0.5);
  background: rgba(255,255,255,0.1);
}
.mobil-filter-input::placeholder { color: rgba(255,255,255,0.3); }
.mobil-filter-select option { background: #2A2A2A; color: white; }
.mobil-mine-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 2px;
}
.mobil-mine-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.mobil-filter-reset {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #F87171;
  font-size: 13px;
  font-weight: 600;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  font-family: inherit;
  transition: background 0.15s;
}
.mobil-filter-reset:active { background: rgba(239,68,68,0.18); }

/* Kortliste */
.mobil-liste {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px max(88px, calc(80px + env(safe-area-inset-bottom, 0px)));
}
.mobil-dag-divider {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.mobil-dag-divider:first-child { padding-top: 4px; }

/* Event-kort */
.mobil-kort {
  display: flex;
  background: var(--surface);
  border-radius: 16px;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(255,255,255,0.04);
  -webkit-tap-highlight-color: transparent;
}
.mobil-kort:active { transform: scale(0.982); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.mobil-kort-min { border-color: rgba(247,27,0,0.3); box-shadow: 0 2px 8px rgba(247,27,0,0.08), 0 0 0 0.5px rgba(247,27,0,0.15); }
.mobil-kort-pagaar { border-color: rgba(16,185,129,0.4); box-shadow: 0 2px 10px rgba(16,185,129,0.12); }
.mobil-kort-snart { border-color: rgba(245,158,11,0.4); box-shadow: 0 2px 10px rgba(245,158,11,0.1); }
.mobil-kort-forsinket { border-color: rgba(239,68,68,0.45); box-shadow: 0 2px 10px rgba(239,68,68,0.12); }
.mobil-kort-ferdig { opacity: 0.6; }
.mobil-kort-strip { width: 5px; flex-shrink: 0; }
.mobil-kort-innhold { flex: 1; padding: 13px 14px 12px; min-width: 0; }
.mobil-kort-toprad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.mobil-kort-tid {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.mobil-kort-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.mobil-kort-tittel {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mobil-kort-metarad { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 7px; }
.mobil-kort-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}
.mobil-kort-kategori {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tom tilstand */
.mobil-tom-tilstand { text-align: center; padding: 60px 24px; color: var(--text-muted); }
.mobil-tom-ikon { margin-bottom: 12px; color: var(--text-muted); }
.mobil-tom-tekst { font-size: 15px; font-weight: 600; margin-bottom: 16px; }

/* FAB */
.mobil-fab {
  position: fixed;
  bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px)));
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--primary);
  color: white;
  border: none;
  box-shadow: 0 4px 20px rgba(247,27,0,0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: transform 0.15s;
}
.mobil-fab:active { transform: scale(0.93); }

/* AI-knapp i header */
.mobil-kart-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
.mobil-kart-btn:active { background: rgba(255,255,255,0.14); }

/* Kart fullskjerm-overlay */
.mobil-kart-overlay {
  position: absolute; inset: 0; z-index: 120;
  background: var(--bg); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.25s, transform 0.25s;
}
.mobil-kart-overlay.aktiv { opacity: 1; transform: translateY(0); }
.mobil-kart-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.mobil-kart-tittel { font-size: 16px; font-weight: 700; color: var(--text); }
.mobil-kart-lukk {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  color: var(--text); display: flex; align-items: center;
  justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobil-kart-iframe {
  flex: 1; width: 100%; border: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobil-ai-btn {
  position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--primary) 15%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobil-ai-btn:active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, transparent), color-mix(in srgb, var(--primary) 30%, transparent));
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
}

/* AI bottom-sheet */
.mobil-ai-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 3000;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobil-ai-overlay.aktiv { opacity: 1; }

.mobil-ai-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #1A1A1A;
  border-radius: 22px 22px 0 0;
  z-index: 3001;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  box-shadow: 0 -4px 40px rgba(0,0,0,0.7), 0 -1px 0 rgba(255,255,255,0.07);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.mobil-ai-sheet.aktiv { transform: translateY(0); }

.mobil-ai-sheet-header {
  padding: 10px 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 8px;
}
.mobil-ai-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
}
.mobil-ai-sheet-titlerow {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  position: relative;
}
.mobil-ai-sheet-tittel {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}
.mobil-ai-sheet-lukk {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s;
}
.mobil-ai-sheet-lukk:active { background: rgba(255,255,255,0.14); color: white; }

.mobil-ai-options {
  padding: 4px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobil-ai-option {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  color: white;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.mobil-ai-option:active {
  background: rgba(247,27,0,0.12);
  border-color: rgba(247,27,0,0.3);
}
.mobil-ai-option-ikon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, rgba(180,18,0,0.25), rgba(247,27,0,0.15));
  border: 1px solid rgba(247,27,0,0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FF4425;
  font-size: 14px;
  font-weight: 900;
}
.mobil-ai-option-tekst { flex: 1; min-width: 0; }
.mobil-ai-option-tittel {
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin-bottom: 3px;
  line-height: 1.2;
}
.mobil-ai-option-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.3;
}
.mobil-ai-option-pil {
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

/* ============================================================
   MOBIL BUNN-NAVIGASJON
   ============================================================ */

.mobil-fane-innhold {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mobil-bunn-nav {
  display: flex;
  background: #181818;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  /* Beholder en romslig buffer over home-stripen på iPhone, og en
     fornuftig minimum-padding på enheter uten safe-area-inset. */
  padding-bottom: max(18px, calc(14px + env(safe-area-inset-bottom, 0px)));
  z-index: 2;
}
.mobil-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobil-nav-tab.aktiv { color: var(--primary); }
.mobil-nav-tab svg { transition: stroke 0.15s; }
.mobil-nav-tab.aktiv svg { stroke: var(--primary); }

/* FAB heves over bunn-nav */
.mobil-fab {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============================================================
   MOBIL PERSONLISTE
   ============================================================ */

.mobil-personer-skjerm {
  flex: 1;
  overflow: hidden;
  flex-direction: column;
  display: none;
  min-height: 0;
}
.mobil-person-sok-wrapper {
  position: relative;
  padding: 10px 16px;
  background: #1D1D1D;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobil-person-sok-ikon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.3);
  pointer-events: none;
}
.mobil-person-sok-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: white;
  font-size: 16px;
  box-sizing: border-box;
  font-family: inherit;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}
.mobil-person-sok-input::placeholder { color: rgba(255,255,255,0.3); }
.mobil-person-sok-input:focus { outline: none; border-color: rgba(247,27,0,0.4); background: rgba(255,255,255,0.09); }
.mobil-personer-innhold {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
.mobil-person-gruppe-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 16px 5px;
}
.mobil-person-rad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.mobil-person-rad:active { background: rgba(0,0,0,0.04); }
.mobil-person-avatar {
  width: 44px; height: 44px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: white;
  flex-shrink: 0; letter-spacing: 0.02em;
}
.mobil-person-info { flex: 1; min-width: 0; }
.mobil-person-navn {
  font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobil-person-rolle {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.mobil-person-team {
  font-size: 11px; color: var(--text-muted); opacity: 0.65; margin-top: 1px;
}
.mobil-person-kontakt-ikoner {
  display: flex; gap: 6px; color: var(--text-muted); flex-shrink: 0; opacity: 0.6;
}
.mobil-person-chevron { color: rgba(0,0,0,0.3); flex-shrink: 0; }
.mobil-person-laster {
  padding: 48px 24px; text-align: center;
  color: var(--text-muted); font-size: 14px;
}

/* ============================================================
   PERSON-DETALJ (slide-in)
   ============================================================ */

.mobil-person-detalj {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 6;
}
.mobil-person-detalj.aktiv { transform: translateX(0); }
.mpd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top, 12px)) 16px 10px;
  background: #1D1D1D;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
.mpd-header-tittel {
  font-size: 15px; font-weight: 700; color: white;
}
.mpd-innhold {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: max(32px, env(safe-area-inset-bottom, 32px));
}
.mpd-profil {
  padding: 32px 20px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border);
}
.mpd-stor-avatar {
  width: 76px; height: 76px; border-radius: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: white;
  margin-bottom: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.mpd-profil-navn { font-size: 22px; font-weight: 800; color: var(--text); text-align: center; }
.mpd-profil-rolle { font-size: 14px; color: var(--text-muted); text-align: center; }
.mpd-kontakt-rad {
  display: flex; gap: 12px; padding: 20px 16px 20px;
  justify-content: center; border-bottom: 1px solid var(--border);
}
.mpd-kontakt-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text); flex: 1; max-width: 90px;
  -webkit-tap-highlight-color: transparent;
}
.mpd-kontakt-ikon {
  width: 54px; height: 54px; border-radius: 16px; border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s;
}
.mpd-kontakt-btn:active .mpd-kontakt-ikon { transform: scale(0.91); }
.mpd-kontakt-btn span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mpd-info-seksjon {
  padding: 4px 16px 4px;
  border-bottom: 1px solid var(--border);
}
.mpd-info-rad {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14px; gap: 12px;
}
.mpd-info-rad:last-child { border-bottom: none; }
.mpd-info-rad-label { color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.mpd-info-rad-verdi { color: var(--text); font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpd-hendelser-seksjon { padding: 16px; }
.mpd-seksjon-tittel {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px;
}
.mpd-hendelse-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mpd-hendelse-rad:last-child { border-bottom: none; }
.mpd-hendelse-rad:active { opacity: 0.7; }
.mpd-hendelse-tid {
  font-size: 12px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 42px;
}
.mpd-hendelse-tittel { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.mpd-hendelse-chevron { color: rgba(0,0,0,0.3); flex-shrink: 0; }
.mpd-ingen-hendelser { color: var(--text-muted); font-size: 13px; padding: 4px 0 12px; }

/* ============================================================
   MOBIL VARSLER + KUNNGJØRINGER
   ============================================================ */

.mobil-varsler-skjerm {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.mobil-varsler-innhold {
  flex: 1; padding: 12px 16px 80px; display: flex; flex-direction: column; gap: 0;
}
.mobil-varsler-seksjon { margin-bottom: 20px; }
.mobil-varsler-seksjon-hdr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 2px 8px;
}
.mobil-merk-lest-btn {
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: rgba(247,27,0,0.08);
  border: 1px solid rgba(247,27,0,0.25);
  border-radius: 7px;
  padding: 6px 10px;
  letter-spacing: 0.04em;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.mobil-merk-lest-btn:active { background: rgba(247,27,0,0.18); border-color: rgba(247,27,0,0.45); }
.mobil-varsler-tom {
  font-size: 13px; color: var(--text-muted); padding: 4px 2px 8px;
}
.mobil-kunngjøring-kort {
  background: rgba(99,102,241,0.08); border: 1.5px solid rgba(99,102,241,0.2);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
.mobil-kunngjøring-tekst {
  font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.45; margin-bottom: 6px;
}
.mobil-kunngjøring-meta {
  font-size: 11px; color: var(--text-muted);
}
.mobil-varsel-rad {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border-radius: 10px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.mobil-varsel-rad.lest {
  background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06);
}
.mobil-varsel-rad:active { background: rgba(0,0,0,0.05); }
.mobil-varsel-ikon {
  font-size: 14px; flex-shrink: 0; margin-top: 1px; color: var(--text-muted);
  display: flex; align-items: center;
}
.mobil-varsel-tekst-blokk { flex: 1; min-width: 0; }
.mobil-varsel-tittel {
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3;
}
.mobil-varsel-rad.lest .mobil-varsel-tittel { font-weight: 400; color: var(--text-muted); }
.mobil-varsel-melding {
  font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4;
}
.mobil-varsel-dato { font-size: 11px; color: var(--text-muted); margin-top: 4px; opacity: 0.8; }
.mobil-varsel-ulest-prikk {
  width: 7px; height: 7px; border-radius: 50%; background: #EF4444;
  flex-shrink: 0; margin-top: 4px;
}

/* Varsler nav-badge */
.mobil-varsler-badge {
  position: absolute; top: 6px; right: calc(50% - 16px);
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #EF4444; color: #fff;
  border-radius: 8px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
}

/* ============================================================
   MOBIL BEREDSKAPS-FANE
   ============================================================ */

/* ============================================================
   MOBIL SNARVEIER
   ============================================================ */

.mobil-snarveier-skjerm {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.mobil-snarveier-innhold {
  flex: 1; padding: 16px 16px 80px; display: flex; flex-direction: column; gap: 10px;
}
.mobil-snarvei-kort {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-radius: 14px;
  border: 1.5px solid var(--border);
  padding: 16px 16px 16px 14px;
  text-decoration: none; color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, box-shadow 0.12s;
}
.mobil-snarvei-kort:active { transform: scale(0.983); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.mobil-snarvei-ikon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: rgba(99,102,241,0.12); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.mobil-snarvei-navn {
  flex: 1; font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobil-snarvei-pil { flex-shrink: 0; color: var(--text-muted); }

/* ============================================================
   MOBIL BEREDSKAP
   ============================================================ */

.mobil-beredskap-skjerm {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.mobil-beredskap-innhold {
  flex: 1; padding: 16px 16px 80px; display: flex; flex-direction: column; gap: 12px;
}

/* Beredskaps-kort */
.mobil-beredskap-kort {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-radius: 14px;
  border: 1.5px solid var(--border);
  padding: 0; overflow: hidden; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, box-shadow 0.12s;
}
.mobil-beredskap-kort:active { transform: scale(0.983); }
.mbk-fargebar { width: 6px; flex-shrink: 0; align-self: stretch; }
.mbk-ikon-wrap {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0;
  border: 1.5px solid transparent; margin: 12px 0 12px 8px;
}
.mbk-tekst { flex: 1; min-width: 0; padding: 14px 0; }
.mbk-tittel {
  font-size: 17px; font-weight: 800; color: var(--text);
  margin-bottom: 3px; line-height: 1.2;
}
.mbk-preview {
  font-size: 13px; color: var(--text-muted); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mbk-kontakt {
  font-size: 13px; font-weight: 700; color: var(--primary);
  margin-top: 4px;
}
.mobil-person-chevron { color: rgba(0,0,0,0.3); flex-shrink: 0; margin-right: 14px; }

/* Beredskaps-detalj slide-in (reuses .mobil-person-detalj) */
.mbd-topp {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 24px 20px; text-align: center;
}
.mbd-stor-ikon { font-size: 52px; margin-bottom: 10px; line-height: 1; }
.mbd-profil-navn { font-size: 24px; font-weight: 800; color: var(--text); }
.mbd-ring-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; border-radius: 12px;
  color: white; font-size: 16px; font-weight: 700;
  text-decoration: none; border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  -webkit-tap-highlight-color: transparent;
}
.mbd-ring-btn:active { opacity: 0.85; }
.mbd-instruksjoner { padding: 16px; }
.mbd-steg {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.mbd-steg:last-child { border-bottom: none; }
.mbd-steg-nr {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(247,27,0,0.12); border: 1.5px solid rgba(247,27,0,0.3);
  color: var(--primary); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-top: 1px;
}
.mbd-steg-tekst { font-size: 15px; color: var(--text); line-height: 1.5; }
.mbd-avsnitt {
  font-size: 15px; color: var(--text); line-height: 1.6;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.mbd-avsnitt:last-child { border-bottom: none; }

/* ── Offentlig visning ────────────────────────────────────────────────────── */
.pub-mobil-wrap    { width: 100%; max-width: 600px; margin: 0 auto; padding-bottom: 40px; }
.pub-header        { padding: 24px 16px 16px; border-bottom: 1px solid var(--border); }
.pub-org           { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; }
.pub-tittel        { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.2; }
.pub-datoer        { font-size: 14px; color: var(--text-muted); margin-top: 6px; }
.pub-liste         { padding: 0 16px; }
.pub-dag-header    { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); padding: 18px 0 8px; border-bottom: 2px solid var(--border); margin-bottom: 4px; }
.pub-mobil-item    { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pub-mobil-tid     { font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; min-width: 80px; padding-top: 2px; }
.pub-mobil-innhold { flex: 1; min-width: 0; }
.pub-mobil-tittel  { font-size: 15px; font-weight: 600; color: var(--text); padding-left: 8px; line-height: 1.3; }
.pub-mobil-sted    { font-size: 12px; color: var(--text-muted); padding-left: 8px; margin-top: 2px; }

/* Desktop gantt */
.pub-desktop-wrap    { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 0 60px; }
.pub-desktop-header  { padding: 32px 40px 24px; border-bottom: 2px solid var(--border); margin-bottom: 0; }
.pub-desktop-tittel  { font-size: 36px; font-weight: 800; color: var(--text); margin: 6px 0; }
.pub-desktop-innhold { padding: 0 40px; }
.pub-dag-seksjon     { margin-top: 32px; }
.pub-dag-header-desktop { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: 12px; }
.pub-gantt-wrap      { position: relative; }
.pub-gantt-akse      { position: absolute; left: 0; top: 0; width: 60px; bottom: 0; }
.pub-tidslabel       { position: absolute; left: 0; font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; transform: translateY(-50%); }
.pub-tidslinje       { position: absolute; left: 60px; right: -40px; height: 1px; background: var(--border); }
.pub-gantt-items     { position: relative; margin-left: 68px; }
.pub-item            { position: absolute; left: 0; right: 0; border-radius: 5px; padding: 4px 8px; overflow: hidden; box-sizing: border-box; }
.pub-item-tid        { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-bottom: 1px; }
.pub-item-tittel     { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pub-item-sted       { font-size: 11px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── Chip-select (flervalg sted/ansvarlig i skjema) ── */
.chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 44px;
  background: var(--bg);
  align-content: flex-start;
  box-sizing: border-box;
}
.chip {
  padding: 5px 13px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}
.chip:hover {
  background: rgba(247,27,0,.06);
  border-color: rgba(247,27,0,.4);
}
.chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  font-weight: 600;
}
.chip.selected:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: white;
}
.chip-tom {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 2px;
  font-style: italic;
}
.label-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}
.chip-search-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.chip-sok {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
}
.chip-sok::placeholder { color: var(--text-muted); }
.chip-search-wrap .chip-select {
  border: none;
  border-radius: 0;
  max-height: 120px;
  overflow-y: auto;
}
.ny-sektor-display {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
  color: var(--text-muted);
  min-height: 18px;
  font-size: 13px;
  line-height: 1.4;
}
.ny-sektor-display .ns-pill {
  display: inline-block;
  padding: 2px 9px;
  margin: 1px 4px 1px 0;
  border-radius: 12px;
  background: var(--primary, #6366F1);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.chip.chip-underteam {
  margin-left: 18px;
  position: relative;
}
.chip.chip-underteam::before {
  content: "↳ ";
  opacity: 0.5;
  margin-right: 2px;
}

    /* ==========================================
       EVENT DASHBOARD
       ========================================== */
    #event-dashboard-screen { background: var(--bg); }

    .header-panel #varsel-btn { color: rgba(255,255,255,0.6); }
    .header-panel #varsel-btn:hover { color: white; }

    #db-til-tidslinje {
      flex-shrink: 0; padding: 7px 14px; border-radius: 8px;
      background: var(--primary); color: white; border: none; cursor: pointer;
      font-size: 12px; font-weight: 600;
    }

    .db-content {
      flex: 1; overflow-y: auto; padding: 24px;
      width: 100%; box-sizing: border-box;
    }

    /* KPI-grid */
    .db-kpi-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 14px; margin-bottom: 28px;
    }
    .db-kpi-kort {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 10px; padding: 18px 20px;
    }
    .db-kpi-tall { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1; }
    .db-kpi-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
    .db-kpi-kort.varsel .db-kpi-tall { color: #EF4444; }
    .db-kpi-klikk { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
    .db-kpi-klikk:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(247,27,0,.08); }

    /* ── Oversikt — rad under KPI ──────────────────────────────── */
    .db-oversikt-rad {
      display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin-bottom: 20px;
    }
    .db-mini-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 18px 20px;
      display: flex; flex-direction: column; gap: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
      cursor: pointer; transition: transform .15s, box-shadow .15s;
    }
    .db-mini-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.1); }
    .db-mini-card-hdr { display: flex; align-items: center; justify-content: space-between; }
    .db-mini-card-tittel { font-size: 13px; font-weight: 700; color: var(--text); }
    .db-mini-alle-ok { font-size: 11px; color: #16A34A; font-weight: 600; }
    .db-mini-stats { display: flex; gap: 0; }
    .db-mini-stat {
      flex: 1; text-align: center; padding: 8px 0;
      border-right: 1px solid var(--border);
    }
    .db-mini-stat:last-child { border-right: none; }
    .db-mini-stat.roed .db-mini-stat-num { color: #EF4444; }
    .db-mini-stat-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
    .db-mini-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

    /* ── Kunngjøringer ─────────────────────────────────────────── */
    .db-melding-kort {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 18px 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
      display: flex; flex-direction: column; gap: 0;
    }
    .db-melding-hdr {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px; flex-shrink: 0;
    }
    .db-melding-tittel { font-size: 13px; font-weight: 700; color: var(--text); }
    .db-melding-tom { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
    .db-melding-item {
      padding: 10px 0; border-bottom: 1px solid var(--border);
    }
    .db-melding-item:last-child { border-bottom: none; }
    .db-melding-tekst { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 5px; }
    .db-melding-meta {
      display: flex; align-items: center; gap: 10px;
      font-size: 11px; color: var(--text-muted);
    }
    .db-melding-slett {
      margin-left: auto; background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 16px; line-height: 1; padding: 0 2px;
      transition: color .1s;
    }
    .db-melding-slett:hover { color: #EF4444; }
    .db-melding-input {
      width: 100%; box-sizing: border-box;
      border: 1.5px solid var(--border); border-radius: 8px;
      padding: 8px 12px; font-size: 13px; font-family: inherit;
      background: var(--bg); color: var(--text); resize: vertical; outline: none;
    }
    .db-melding-input:focus { border-color: var(--primary); }

    /* ── Oppgaver-fane KPI-rad ─────────────────────────────────── */
    .db-opp-kpi-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-bottom: 20px;
    }
    .db-opp-kpi-kort {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 16px 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
    }
    .db-opp-kpi-kort.varsel .db-kpi-tall { color: #EF4444; }

    /* ── Program-fane (inline tab) ──────────────────────────────── */
    .lv-tab-panel { display: flex; flex-direction: column; gap: 14px; }
    .lv-toppbar-tab {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .lv-tab-count { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
    .lv-table-card {
      border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
      display: flex; flex-direction: column;
      max-height: calc(100vh - 280px);
    }
    .lv-table-card .lv-kolheader {
      position: sticky; top: 0; z-index: 2; background: var(--bg);
      border-radius: 0; border-bottom: 1px solid var(--border);
    }
    .lv-table-card .lv-liste { overflow-y: auto; flex: 1; }

    /* ── Listevisning (Programhendelser) ──────────────────────── */
    .lv-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000;
      display: flex; align-items: flex-start; justify-content: center;
      padding: 36px 20px; box-sizing: border-box;
    }
    .lv-panel {
      background: var(--bg); border-radius: 14px; width: 100%; max-width: 1140px;
      max-height: calc(100vh - 72px); display: flex; flex-direction: column;
      box-shadow: 0 28px 90px rgba(0,0,0,.38); overflow: hidden;
    }
    .lv-toppbar {
      display: flex; align-items: center; gap: 10px; padding: 14px 18px;
      border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .lv-toppbar-tittel { font-size: 15px; font-weight: 700; color: var(--text); flex-shrink: 0; margin-right: 4px; }
    .lv-sok {
      flex: 1; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border);
      background: var(--bg); color: var(--text); font-size: 13px; min-width: 0;
    }
    .lv-kat-filter {
      padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border);
      background: var(--bg); color: var(--text); font-size: 13px; flex-shrink: 0; max-width: 180px;
    }
    .lv-lukk-btn {
      padding: 6px; border-radius: 7px; border: none; background: none; cursor: pointer;
      color: var(--text-muted); display: flex; align-items: center; flex-shrink: 0;
    }
    .lv-lukk-btn:hover { background: var(--border); color: var(--text); }
    .lv-dag-tabs {
      display: flex; gap: 4px; padding: 10px 18px; border-bottom: 1px solid var(--border);
      overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
    }
    .lv-dag-tabs::-webkit-scrollbar { display: none; }
    .lv-dag-tab {
      padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border);
      background: var(--bg); color: var(--text-muted); font-size: 12px; cursor: pointer;
      white-space: nowrap; flex-shrink: 0;
    }
    .lv-dag-tab.aktiv { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
    .lv-dag-tab:hover:not(.aktiv) { border-color: var(--primary); color: var(--primary); }
    .lv-kolheader {
      display: grid;
      grid-template-columns: 5px 104px 1fr 118px 130px 155px 100px 38px;
      padding: 7px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted);
    }
    .lv-kolheader > div { padding: 0 6px; }
    .lv-liste { overflow-y: auto; flex: 1; }
    .lv-rad {
      display: grid;
      grid-template-columns: 5px 104px 1fr 118px 130px 155px 100px 38px;
      align-items: center; padding: 0 18px; min-height: 50px;
      border-bottom: 1px solid var(--border); cursor: pointer;
      transition: background .1s;
    }
    .lv-rad:hover { background: rgba(247,27,0,.04); }
    .lv-strip { width: 5px; border-radius: 3px; height: 30px; align-self: center; margin: 0; }
    .lv-kol-tid {
      padding: 10px 6px; display: flex; flex-direction: column; font-size: 13px; font-weight: 600;
    }
    .lv-tid-slutt { font-size: 11px; font-weight: 400; color: var(--text-muted); }
    .lv-kol-tittel { padding: 10px 6px; font-size: 13px; font-weight: 600; min-width: 0; }
    .lv-kol-kat, .lv-kol-sted, .lv-kol-ans, .lv-kol-status { padding: 10px 6px; font-size: 12px; min-width: 0; }
    .lv-kol-edit { padding: 0 2px; display: flex; align-items: center; justify-content: center; }
    .lv-kat-chip {
      display: inline-block; padding: 2px 8px; border-radius: 10px; border: 1px solid;
      font-size: 11px; font-weight: 500; white-space: nowrap;
    }
    .lv-status-chip {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 11px; font-weight: 500; white-space: nowrap;
    }
    .lv-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
    .lv-muted { color: var(--text-muted); }
    .lv-rediger-btn {
      padding: 5px; border: none; background: none; cursor: pointer;
      color: var(--text-muted); border-radius: 6px; display: flex; align-items: center;
    }
    .lv-rediger-btn:hover { background: var(--border); color: var(--text); }
    .lv-las-ikon {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 5px; border-radius: 6px;
      color: var(--text-muted); opacity: 0.55; cursor: not-allowed;
    }
    .lv-form-footer-las {
      display: flex; align-items: center; justify-content: center;
      padding: 12px 16px;
    }
    .lv-las-melding {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; color: var(--text-muted);
      padding: 8px 14px;
      background: rgba(128,128,128,0.06);
      border: 1px dashed var(--border);
      border-radius: 8px;
    }
    .lv-dag-divider {
      padding: 8px 24px; font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: var(--text-muted); background: rgba(0,0,0,.02);
      border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1;
    }
    .lv-tom {
      padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 13px;
    }

    /* Kart-kort */
    .db-kart-kort {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden; margin-bottom: 24px;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
    }
    .db-kart-hdr {
      display: flex; align-items: center; gap: 7px;
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      font-size: 13px; font-weight: 700; color: var(--text);
    }
    .db-kart-iframe {
      width: 100%; height: 420px; border: none; display: block;
    }

    /* Event-info kort */
    .db-event-kort {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 10px; padding: 18px 20px; margin-bottom: 24px;
      display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    }
    .db-event-info { flex: 1; min-width: 220px; }
    .db-event-navn { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
    .db-event-datoer { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
    .db-event-badge {
      display: inline-block; padding: 2px 10px; border-radius: 100px;
      font-size: 11px; font-weight: 600;
    }
    .db-event-badge.offentlig { background: rgba(34,197,94,0.15); color: #16a34a; }
    .db-event-badge.intern    { background: rgba(107,114,128,0.15); color: var(--text-muted); }
    .db-hurtiglenker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
    .db-hurtiglenke {
      padding: 6px 14px; border-radius: 7px; border: 1px solid var(--border);
      background: var(--bg); font-size: 12px; font-weight: 500; cursor: pointer;
      color: var(--text);
    }
    .db-hurtiglenke:hover { border-color: var(--primary); color: var(--primary); }
    .db-hurtiglenke-primary {
      background: var(--primary); color: #fff; border-color: var(--primary);
    }
    .db-hurtiglenke-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

    /* Inline opprett-skjema (kategori / sted / person i hendelse-modal) */
    .ny-form-pluss-btn {
      display: inline-flex; align-items: center; padding: 1px 7px; margin-left: 8px;
      font-size: 11px; font-weight: 600; border-radius: 5px; cursor: pointer;
      border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
      vertical-align: middle; line-height: 1.6;
    }
    .ny-form-pluss-btn:hover { border-color: var(--primary); color: var(--primary); }
    .inline-opprett-boks {
      margin-top: 8px; padding: 12px 14px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--bg);
    }
    .inline-opprett-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 10px;
    }
    .inline-opprett-grid .inline-felt { display: flex; flex-direction: column; gap: 3px; }
    .inline-opprett-grid .inline-felt.full { grid-column: 1 / -1; }
    .inline-opprett-grid label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
    .inline-opprett-grid input, .inline-opprett-grid select {
      padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
      background: var(--surface); color: var(--text); font-size: 12px;
    }
    .inline-opprett-knapper {
      display: flex; justify-content: flex-end; gap: 8px;
    }
    .inline-opprett-knapper button {
      padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer;
      border: 1px solid var(--border); background: var(--bg); color: var(--text);
    }
    .inline-opprett-knapper button.lagre-btn {
      background: var(--primary); border-color: var(--primary); color: #fff;
    }
    .inline-opprett-knapper button.lagre-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

    /* Seksjonstittel */
    .db-seksjon-tittel {
      font-size: 13px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); margin: 0 0 12px;
      display: flex; align-items: center; justify-content: space-between;
    }

    /* Oppgaveliste */
    .oppgave-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .oppgave-rad {
      display: flex; align-items: center; gap: 12px; padding: 10px 14px;
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      transition: background 0.1s; cursor: pointer;
    }
    .oppgave-rad:hover { background: var(--card-hover, rgba(255,255,255,0.04)); }
    .oppgave-rad.forfalt { border-left: 3px solid #EF4444; }
    .oppgave-rad.fullfort { opacity: .6; }
    .oppgave-prio { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .oppgave-prio.p1 { background: #EF4444; }
    .oppgave-prio.p2 { background: #F59E0B; }
    .oppgave-prio.p3 { background: #9CA3AF; }
    .oppgave-tittel { flex: 1; font-size: 13px; font-weight: 500; }
    .oppgave-tittel.fullfort { text-decoration: line-through; }
    .oppgave-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
    .oppgave-meta.forfalt { color: #EF4444; font-weight: 600; }
    .oppgave-status-badge {
      padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600;
      white-space: nowrap;
    }
    .oppgave-status-badge.ikke_startet { background: rgba(107,114,128,0.12); color: var(--text-muted); }
    .oppgave-status-badge.pagaar       { background: rgba(59,130,246,0.12); color: #3B82F6; }
    .oppgave-status-badge.fullfort     { background: rgba(34,197,94,0.12); color: #16a34a; }
    .oppgave-status-badge.blokkert     { background: rgba(239,68,68,0.12); color: #dc2626; }
    .oppgave-handlinger { display: flex; gap: 4px; }
    .oppgave-ikon-btn {
      background: none; border: none; cursor: pointer; padding: 4px 6px;
      border-radius: 5px; color: var(--text-muted); font-size: 13px;
    }
    .oppgave-ikon-btn:hover { background: var(--bg); color: var(--text); }

    /* Oppgave-skjema */
    .oppgave-form {
      background: var(--card); border: 1px solid var(--primary);
      border-radius: 8px; padding: 14px 16px; margin-bottom: 8px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .oppgave-form-rad { display: flex; gap: 10px; flex-wrap: wrap; }
    .oppgave-form input, .oppgave-form select, .oppgave-form textarea {
      padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
      font-size: 13px; background: var(--bg); color: var(--text); font-family: inherit;
    }
    .oppgave-form input:focus, .oppgave-form select:focus, .oppgave-form textarea:focus {
      outline: none; border-color: var(--primary);
    }
    .oppgave-form-tittel { flex: 1; min-width: 200px; }
    .oppgave-form-knapper { display: flex; gap: 8px; justify-content: flex-end; }

    /* Filterknapper */
    .db-filter-bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
    .db-filter-btn {
      padding: 5px 13px; border-radius: 100px; border: 1.5px solid var(--border);
      font-size: 12px; cursor: pointer; background: var(--bg); color: var(--text-muted);
    }
    .db-filter-btn.active { background: var(--primary); border-color: var(--primary); color: white; font-weight: 600; }

    /* AI sjekkliste */
    .ai-tom-state {
      text-align: center; padding: 40px 20px; color: var(--text-muted);
    }
    .ai-tom-state p { margin: 8px 0 20px; font-size: 14px; }
    .ai-sesjon-meta {
      font-size: 12px; color: var(--text-muted); margin-bottom: 16px;
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    }
    .ai-kategori-gruppe { margin-bottom: 20px; }
    .ai-kategori-header {
      font-size: 11px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--text-muted);
      padding: 6px 0; border-bottom: 1px solid var(--border); margin-bottom: 8px;
      display: flex; align-items: center; gap: 6px;
    }
    .ai-punkt-rad {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 8px 6px; border-radius: 6px; transition: background 0.1s;
    }
    .ai-punkt-rad:hover { background: var(--bg); }
    .ai-punkt-rad input[type=checkbox] { margin-top: 2px; flex-shrink: 0; accent-color: var(--primary); }
    .ai-punkt-tekst { font-size: 13px; flex: 1; line-height: 1.4; }
    .ai-punkt-rad.avklart .ai-punkt-tekst { text-decoration: line-through; opacity: .5; }
    .ai-prio-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
    .ai-prio-dot.p1 { background: #EF4444; }
    .ai-prio-dot.p2 { background: #F59E0B; }
    .ai-prio-dot.p3 { background: #9CA3AF; }
    .ai-svar-felt {
      width: 100%; margin-top: 6px; font-size: 12px; padding: 5px 8px;
      border: 1px solid var(--border); border-radius: 6px;
      background: var(--bg); color: var(--text); font-family: inherit; resize: vertical;
    }
    .ai-svar-felt:focus { outline: none; border-color: var(--primary); }
    .ai-spinner {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      padding: 40px; color: var(--text-muted); font-size: 13px;
    }

    /* Dashboard Innstillinger-tab */
    #db-innstillinger #tab-content { background: transparent; }

    @media (max-width: 768px) {
      .db-kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .db-content { padding: 16px; }
    }

    /* Unified oppgaveliste */
    .db-seksjon-header { display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; flex-wrap:wrap; gap:10px; }
    .db-seksjon-tittel { font-size:14px; font-weight:700; color:var(--text); }
    .db-seksjon-badge { display:inline-flex; align-items:center; justify-content:center; background:var(--primary); color:white; font-size:10px; font-weight:700; border-radius:50%; min-width:18px; height:18px; padding:0 4px; margin-left:6px; }
    .db-oppgave-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .db-filter-gruppe { display:flex; }
    .db-filter-btn { padding:5px 12px; border:1px solid var(--border); background:none; color:var(--text-muted); font-size:12px; cursor:pointer; }
    .db-filter-btn:first-child { border-radius:6px 0 0 6px; }
    .db-filter-btn:last-child { border-radius:0 6px 6px 0; }
    .db-filter-btn.active { background:var(--primary); border-color:var(--primary); color:white; font-weight:600; }
    .db-ny-btn { padding:5px 14px; border-radius:6px; background:var(--primary); color:white; border:none; font-size:12px; font-weight:600; cursor:pointer; }
    .db-ai-mini-btn { padding:5px 12px; border-radius:6px; border:1px solid var(--border); background:none; color:var(--text); font-size:12px; cursor:pointer; }
    .db-ai-mini-btn:hover { background:var(--primary); border-color:var(--primary); color:white; }
    .oppgave-separator { height:1px; background:var(--border); margin:8px 0; opacity:0.5; }
    .oppgave-rad { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--card); border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:background 0.1s; }
    .oppgave-rad:hover { background:var(--card-hover, rgba(255,255,255,0.04)); }
    .oppgave-rad.forfalt { border-left:3px solid #EF4444; }
    .oppgave-rad.fullfort { opacity:0.55; }
    .oppgave-rad.ai-punkt { border-left:3px solid rgba(124,58,237,0.5); }
    .oppgave-check { width:15px; height:15px; cursor:pointer; flex-shrink:0; accent-color:var(--primary); }
    .oppgave-tittel { flex:1; font-size:13px; font-weight:500; color:var(--text); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .oppgave-tittel.gjennomstreket { text-decoration:line-through; }
    .oppgave-ans { font-size:11px; color:var(--text-muted); white-space:nowrap; }
    .oppgave-meta { font-size:11px; color:var(--text-muted); white-space:nowrap; }
    .oppgave-meta.roed { color:#EF4444; font-weight:600; }
    .oppgave-knapper { display:flex; gap:4px; opacity:0; transition:opacity 0.15s; }
    .oppgave-rad:hover .oppgave-knapper { opacity:1; }
    .oppgave-edit-btn, .oppgave-slett-btn { background:none; border:1px solid var(--border); border-radius:5px; padding:2px 7px; font-size:11px; cursor:pointer; color:var(--text-muted); }
    .oppgave-slett-btn:hover { background:#EF4444; border-color:#EF4444; color:white; }
    .ai-badge { font-size:9px; font-weight:800; letter-spacing:.06em; padding:2px 5px; border-radius:4px; background:rgba(124,58,237,0.15); color:#7C3AED; flex-shrink:0; }

    /* ── Oppgave-tab: kortbasert org-kart-layout ────────────── */
    .opp-toolbar { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:14px; display:flex; flex-direction:column; gap:8px; }
    .opp-toolbar-rad { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .opp-toolbar-rad-2 { padding-top:6px; border-top:1px dashed var(--border); }
    .opp-sok { flex:1; min-width:200px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:13px; }
    .opp-sok:focus { outline:none; border-color:var(--primary); }
    .opp-pill { padding:4px 10px; border:1px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:12px; border-radius:100px; cursor:pointer; transition:all 0.12s; }
    .opp-pill:hover { color:var(--text); border-color:var(--primary); }
    .opp-pill.active { background:var(--primary); border-color:var(--primary); color:white; font-weight:600; }
    .opp-pill-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-right:2px; }
    .opp-pill-sep { width:1px; height:18px; background:var(--border); margin:0 4px; }
    .opp-toggle { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text); cursor:pointer; user-select:none; }
    .opp-toggle input { accent-color:var(--primary); cursor:pointer; }
    .opp-stats { margin-left:auto; font-size:11px; color:var(--text-muted); }

    .opp-sektorer-grid { padding:0; }
    .opp-ingen-struktur { padding:14px; background:var(--surface); border:1px dashed var(--border); border-radius:10px; margin-bottom:14px; font-size:13px; color:var(--text-muted); }
    .opp-ingen-struktur p { margin:0; }

    .opp-sektor-add { width:26px; height:26px; border-radius:50%; background:color-mix(in srgb, var(--primary) 12%, transparent); border:1px solid color-mix(in srgb, var(--primary) 35%, transparent); color:var(--primary); font-size:18px; line-height:1; cursor:pointer; flex-shrink:0; transition:all 0.15s; }
    .opp-sektor-add:hover { background:var(--primary); color:white; }

    .opp-team-kort { background:color-mix(in srgb, var(--bg) 70%, var(--surface) 30%); border:1px solid var(--border); border-radius:8px; padding:10px 12px; transition:box-shadow .15s, border-color .15s, background .15s; display:flex; flex-direction:column; gap:6px; }
    .opp-team-kort.opp-team-over { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
    .opp-team-kort-tom { opacity:.7; }

    /* Sektor-kort som drop-target */
    .opp-sektor-drop { position:relative; transition:box-shadow .15s, background .15s; }
    .opp-sektor-drop.opp-sektor-over { box-shadow:0 0 0 2px var(--ok-farge, var(--primary)), 0 4px 14px rgba(0,0,0,.12); background:color-mix(in srgb, var(--ok-farge, var(--primary)) 5%, var(--surface)); }
    .opp-sektor-droplabel { color:transparent; transition:color .15s; }
    .opp-sektor-drop.opp-sektor-over .opp-sektor-droplabel { color:var(--ok-farge, var(--primary)); font-weight:600; }
    .opp-sektor-tom { font-size:12px; color:var(--text-muted); font-style:italic; padding:14px 8px; text-align:center; border:1px dashed var(--border); border-radius:8px; }

    /* To-kolonne layout: overordnede til venstre, sektorer til høyre */
    .opp-hovedlayout { display:grid; grid-template-columns:minmax(260px, 2fr) minmax(0, 3fr); gap:14px; align-items:start; }
    .opp-hovedlayout > .ok-sektorer-grid { padding:0; }
    @media (max-width: 900px) {
      .opp-hovedlayout { grid-template-columns:1fr; }
    }

    /* Overordnede oppgaver-panel (venstre kolonne) */
    .opp-overordnet-seksjon { padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:12px; transition:box-shadow .15s, background .15s, border-color .15s; display:flex; flex-direction:column; gap:10px; min-height:200px; }
    .opp-overordnet-seksjon.opp-overordnet-over { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 6%, var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
    .opp-overordnet-tittel-rad { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:8px; border-bottom:1px solid var(--border); }
    .opp-overordnet-tittel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }
    .opp-overordnet-sub { font-size:11px; color:var(--text-muted); }
    .opp-overordnet-add { margin-left:auto; padding:5px 12px; border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); font-size:11px; font-weight:600; border-radius:20px; cursor:pointer; transition:all .15s; }
    .opp-overordnet-add:hover { background:var(--primary); color:white; border-color:var(--primary); }
    .opp-overordnet-grid { display:flex; flex-direction:column; gap:6px; flex:1; }
    .opp-overordnet-tom { font-size:12px; color:var(--text-muted); font-style:italic; padding:14px 10px; text-align:center; border:1px dashed var(--border); border-radius:8px; }
    @media (max-width: 900px) {
      .opp-overordnet-seksjon { min-height:0; }
      .opp-overordnet-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
    }
    .opp-team-hdr { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; }
    .opp-team-navn { font-size:13px; font-weight:700; color:var(--text); }
    .opp-team-ant { font-size:10px; font-weight:700; color:var(--text-muted); background:var(--card); border:1px solid var(--border); border-radius:100px; padding:1px 7px; }
    .opp-team-radlist { display:flex; flex-direction:column; gap:5px; min-height:8px; }
    .opp-team-tom { font-size:11px; color:var(--text-muted); font-style:italic; padding:6px 4px; }
    .opp-team-add { margin-top:4px; padding:5px 8px; background:none; border:1px dashed var(--border); border-radius:6px; color:var(--text-muted); font-size:11px; font-weight:600; cursor:pointer; transition:all 0.12s; }
    .opp-team-add:hover { color:var(--primary); border-color:var(--primary); border-style:solid; background:color-mix(in srgb, var(--primary) 8%, transparent); }

    /* Oppgave-kort inni team */
    .opp-kort { display:flex; align-items:flex-start; gap:8px; padding:7px 8px; background:var(--card, var(--surface)); border:1px solid var(--border); border-radius:6px; cursor:grab; transition:background 0.1s, box-shadow 0.12s, transform 0.08s; user-select:none; }
    .opp-kort:hover { background:var(--card-hover, color-mix(in srgb, var(--primary) 4%, var(--surface))); box-shadow:0 1px 4px rgba(0,0,0,0.07); }
    .opp-kort:active { cursor:grabbing; }
    .opp-kort.opp-kort-dragging { opacity:0.4; transform:scale(0.98); }
    .opp-kort.forfalt { border-left:3px solid #EF4444; }
    .opp-kort.fullfort { opacity:0.55; }
    .opp-kort.ai-punkt { border-left:3px solid rgba(124,58,237,0.5); background:color-mix(in srgb, rgba(124,58,237,0.04) 50%, var(--card, var(--surface))); }
    .opp-kort-prio { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:6px; }
    .opp-kort-prio.p1 { background:#EF4444; }
    .opp-kort-prio.p2 { background:#F59E0B; }
    .opp-kort-prio.p3 { background:#9CA3AF; }
    .opp-kort-check { width:14px; height:14px; cursor:pointer; flex-shrink:0; accent-color:var(--primary); margin-top:3px; }
    .opp-kort-innhold { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
    .opp-kort-tittel { font-size:12.5px; font-weight:500; color:var(--text); line-height:1.3; word-break:break-word; }
    .opp-kort-tittel.gjennomstreket { text-decoration:line-through; color:var(--text-muted); }
    .opp-kort-meta { display:flex; flex-wrap:wrap; gap:5px 8px; align-items:center; font-size:10.5px; color:var(--text-muted); }
    .opp-kort-ans { white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis; }
    .opp-kort-frist { white-space:nowrap; }
    .opp-kort-frist.roed { color:#EF4444; font-weight:600; }
    .opp-kort-kategori { white-space:nowrap; }
    .opp-kort-svar { font-size:10.5px; font-style:italic; color:var(--text-muted); margin-top:2px; }
    .opp-kort-slett { background:none; border:none; padding:2px 4px; color:var(--text-muted); font-size:14px; cursor:pointer; opacity:0; transition:opacity 0.12s, color 0.12s; flex-shrink:0; }
    .opp-kort:hover .opp-kort-slett { opacity:1; }
    .opp-kort-slett:hover { color:#EF4444; }

    /* Multi-select for ansvarlige */
    .person-valg-gruppe { display:flex; flex-wrap:wrap; gap:5px; }
    .person-valg { display:flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid var(--border); border-radius:100px; font-size:12px; cursor:pointer; color:var(--text-muted); background:var(--bg); transition:all 0.12s; }
    .person-valg input { display:none; }
    .person-valg.valgt { background:rgba(247,27,0,0.1); border-color:rgba(247,27,0,0.4); color:var(--primary); font-weight:600; }

    /* Varsel-sidebar */
    .varsel-rad:hover { filter:brightness(1.05); }
    .varsel-rad.lest { opacity:0.7; }

    /* ── Dashboard visual depth ─────────────────────────────────── */
    /* White-surface cards with elevation instead of near-transparent --card */
    .db-kpi-kort {
      background: var(--surface);
      border-color: transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
      transition: transform .15s, box-shadow .15s, border-color .15s;
    }
    .db-kpi-klikk:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(247,27,0,.12), 0 1px 4px rgba(0,0,0,.07) !important;
      border-color: var(--primary) !important;
    }
    .db-event-kort {
      background: var(--surface);
      border-color: transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
    }
    .lv-table-card {
      background: var(--surface);
      border-color: transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
    }
    .lv-table-card .lv-kolheader { background: rgba(0,0,0,.025); }
    .lv-rad:nth-child(even) { background: rgba(0,0,0,.012); }
    .lv-rad:hover { background: rgba(247,27,0,.05) !important; }

    /* ── Program tab — split panel ──────────────────────────────── */
    .db-content--program {
      max-width: none !important;
      padding: 0 !important;
      overflow: hidden !important;
    }
    #db-program { height: 100%; }
    .db-content--orgkart {
      max-width: none !important;
      padding: 0 !important;
      overflow: hidden !important;
    }
    #db-orgkart { height: 100%; }
    .lv-split-panel {
      display: flex; flex-direction: column; height: 100%; overflow: hidden;
    }
    .lv-split-toolbar {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      padding: 12px 20px; border-bottom: 1px solid var(--border);
      flex-shrink: 0; background: var(--surface);
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .lv-split-body {
      display: flex; flex: 1; min-height: 0; overflow: hidden;
    }
    .lv-split-left {
      flex: 0 0 auto; width: 34%; min-width: 240px; max-width: 440px;
      display: flex; flex-direction: column;
      border-right: 1.5px solid var(--border);
      background: var(--bg); overflow: hidden;
    }
    /* Filter-seksjon i venstre kolonne */
    .lv-filter-seksjon {
      padding: 10px 12px; border-bottom: 1px solid var(--border);
      background: var(--surface); flex-shrink: 0; display: flex; flex-direction: column; gap: 6px;
    }
    .lv-filter-sok-rad { display: flex; gap: 6px; align-items: center; }
    .lv-filter-sok-felt {
      flex: 1; padding: 6px 10px; border: 1px solid var(--border);
      border-radius: 6px; font-size: 12px; background: var(--bg); color: var(--text);
      font-family: inherit; min-width: 0;
    }
    .lv-filter-sok-felt:focus { outline: none; border-color: var(--primary); }
    .lv-filter-rad { display: flex; flex-wrap: wrap; gap: 4px; }
    .lv-filter-sel {
      flex: 1 1 calc(50% - 4px); min-width: 0;
      padding: 5px 6px; border: 1px solid var(--border);
      border-radius: 6px; font-size: 11px; background: var(--bg); color: var(--text);
      cursor: pointer; font-family: inherit;
    }
    .lv-filter-sel:focus { outline: none; border-color: var(--primary); }
    .lv-filter-sel--aktiv {
      border-color: var(--primary); color: var(--primary);
      background: color-mix(in srgb, var(--primary) 8%, var(--bg));
      font-weight: 600;
    }
    .lv-filter-nullstill {
      padding: 4px 8px; background: none; border: 1px solid var(--border);
      border-radius: 5px; font-size: 11px; cursor: pointer;
      color: var(--text-muted); white-space: nowrap; font-family: inherit; flex-shrink: 0;
    }
    .lv-filter-nullstill:hover { border-color: var(--primary); color: var(--primary); }

    .lv-split-left .lv-dag-tabs { padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
    .lv-split-left .lv-liste { overflow-y: auto; flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
    .lv-split-mid-right {
      display: flex; flex-direction: row;
      flex: 1; min-width: 0; overflow: hidden;
    }
    .lv-narrow-tab-bar { display: none; }
    .lv-split-mid {
      flex: 1; min-width: 0;
      overflow-y: auto; padding: 20px 22px;
      background: var(--surface);
      border-left: 1.5px solid var(--border);
    }
    .lv-split-right {
      flex: 1; min-width: 0;
      overflow-y: auto; padding: 20px 22px;
      background: var(--bg);
      border-left: 1px solid var(--border);
    }
    /* Box-style rows in split-left */
    .lv-rad-boks {
      display: flex; align-items: stretch;
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--surface); cursor: pointer;
      transition: border-color .15s, box-shadow .15s, transform .1s;
      overflow: hidden; flex-shrink: 0;
    }
    .lv-rad-boks:hover {
      border-color: rgba(247,27,0,.35);
      box-shadow: 0 3px 12px rgba(0,0,0,.06);
      transform: translateY(-1px);
    }
    .lv-rad-boks.aktiv {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(247,27,0,.15), 0 3px 14px rgba(247,27,0,.1);
    }
    .lv-boks-strip {
      width: 5px; flex-shrink: 0;
    }
    .lv-boks-body {
      flex: 1; padding: 11px 14px; min-width: 0;
      display: flex; flex-direction: column; gap: 5px;
    }
    .lv-boks-topp {
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    }
    .lv-boks-tid {
      font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap;
    }
    .lv-boks-slutt { font-weight: 400; color: var(--text-muted); font-size: 11px; }
    .lv-boks-tittel {
      font-size: 14px; font-weight: 700; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .lv-boks-meta {
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    }
    .lv-boks-meta-item {
      display: flex; align-items: center; gap: 4px;
      font-size: 11px; color: var(--text-muted); min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* dag-divider in split mode needs margin reset */
    .lv-split-left .lv-dag-divider {
      margin: 4px -16px; border-radius: 0;
    }
    /* Detail panel */
    .lv-detalj-panel { max-width: 680px; }
    .lv-detalj-stripe {
      height: 5px; border-radius: 3px; margin-bottom: 22px;
    }
    .lv-detalj-topp {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; margin-bottom: 20px;
    }
    .lv-detalj-tittel {
      font-size: 22px; font-weight: 800; color: var(--text);
      line-height: 1.25; margin: 0;
    }
    .lv-detalj-section {
      display: grid; grid-template-columns: 90px 1fr;
      gap: 10px 16px; margin-bottom: 20px;
    }
    .lv-detalj-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); padding-top: 2px;
    }
    .lv-detalj-val { font-size: 13px; color: var(--text); }
    .lv-detalj-beskrivelse {
      padding: 14px 16px; background: var(--bg);
      border-radius: 8px; border: 1px solid var(--border);
      font-size: 13px; color: var(--text); line-height: 1.6;
      white-space: pre-line; margin-bottom: 22px;
    }
    .lv-detalj-knapper { display: flex; gap: 10px; flex-wrap: wrap; }
    .lv-detalj-tom {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; height: 100%; min-height: 200px;
      color: var(--text-muted); font-size: 13px; text-align: center; gap: 10px;
    }

    /* ── Inline hendelse-form i program-panelet ─────────────── */
    /* Les-visning (detalj) */
    .lv-detalj-view { display: flex; flex-direction: column; gap: 0; }
    .lv-dv-rader {
      border: 1px solid var(--border); border-radius: 8px;
      overflow: hidden; margin: 14px 0;
    }
    .lv-dv-rad {
      display: grid; grid-template-columns: 90px 1fr;
      gap: 10px; padding: 9px 12px;
      border-bottom: 1px solid var(--border);
      align-items: baseline;
    }
    .lv-dv-rad:last-child { border-bottom: none; }
    .lv-dv-etikett {
      font-size: 11px; font-weight: 600; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: .04em; padding-top: 2px;
    }
    .lv-dv-verdi { font-size: 13px; color: var(--text); line-height: 1.5; }

    .lv-hendelse-form { display: flex; flex-direction: column; gap: 0; }
    .lv-form-hd {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px; gap: 10px;
    }
    .lv-form-tittel {
      font-size: 16px; font-weight: 700; color: var(--text); margin: 0;
    }
    .lv-form-hd-actions { display: flex; align-items: center; gap: 6px; }
    .lv-form-slett-btn {
      background: none; border: none; cursor: pointer; color: var(--text-muted);
      padding: 4px; display: flex; align-items: center; border-radius: 4px;
      transition: color .15s, background .15s;
    }
    .lv-form-slett-btn:hover { color: #ef4444; background: rgba(239,68,68,.08); }
    .lv-form-footer {
      display: flex; gap: 8px; justify-content: flex-end; align-items: center;
      padding-top: 14px; margin-top: 4px;
      border-top: 1px solid var(--border);
    }

    /* Kjøreplan URL-seksjon */
    .lv-kp-url-seksjon {
      display: flex; flex-direction: column; gap: 6px;
      background: color-mix(in srgb, var(--primary) 5%, var(--bg));
      border: 1.5px solid color-mix(in srgb, var(--primary) 20%, var(--border));
      border-radius: 8px; padding: 10px 12px;
      margin: 10px 0 14px;
    }
    .lv-kp-url-label {
      display: flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--primary);
    }
    .lv-kp-url-innhold { display: flex; gap: 8px; align-items: center; }
    .lv-kp-url-innhold input[type="url"] {
      flex: 1; padding: 7px 10px; border: 1px solid var(--border);
      border-radius: 6px; background: var(--surface); color: var(--text);
      font-size: 12px; font-family: inherit;
    }
    .lv-kp-url-aapne-btn {
      display: flex; align-items: center; gap: 4px;
      padding: 6px 12px; background: var(--primary); color: #fff;
      border: none; border-radius: 6px; font-size: 12px; font-weight: 700;
      text-decoration: none; white-space: nowrap; cursor: pointer; flex-shrink: 0;
      transition: opacity .15s;
    }
    .lv-kp-url-aapne-btn:hover { opacity: .85; }

    /* Kjøreplan-seksjon under skjemaet */
    .lv-kp-seksjon {
      margin-top: 20px; border-top: 2px solid var(--border);
      padding-top: 16px;
    }
    .lv-kp-seksjon-hd {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .lv-kp-seksjon-tittel {
      font-size: 13px; font-weight: 700; color: var(--text);
      text-transform: uppercase; letter-spacing: .05em;
    }
    .lv-kp-seksjon-actions { display: flex; align-items: center; gap: 6px; }
    .lv-kp-skriv-ut-btn {
      background: none; border: 1px solid var(--border); border-radius: 5px;
      color: var(--text-muted); padding: 3px 7px; cursor: pointer; display: flex; align-items: center;
    }
    .lv-kp-skriv-ut-btn:hover { background: var(--bg); color: var(--text); }

    /* Kjøreplan-kolonne (høyre panel, eget panel-header) */
    .lv-kp-panel { display: flex; flex-direction: column; }
    .lv-kp-panel-hd {
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 5;
      background: var(--bg);
      margin: -20px -22px 22px; padding: 20px 22px 12px;
      border-bottom: 1.5px solid var(--border); flex-shrink: 0;
    }
    .lv-kp-panel-tittel {
      font-size: 13px; font-weight: 700; color: var(--text);
      text-transform: uppercase; letter-spacing: .05em;
    }
    .lv-kp-panel-actions { display: flex; align-items: center; gap: 6px; }

    /* Narrow screens: tabs for mid+right */
    @media (max-width: 1100px) {
      .lv-split-mid-right { flex-direction: column; }
      .lv-narrow-tab-bar {
        display: flex; flex-shrink: 0;
        border-bottom: 1.5px solid var(--border);
        background: var(--surface);
      }
      .lv-narrow-tab {
        flex: 1; padding: 10px 16px;
        font-size: 13px; font-weight: 600; color: var(--text-muted);
        background: none; border: none; cursor: pointer;
        border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
        transition: color .15s, border-color .15s;
      }
      .lv-narrow-tab.lv-narrow-tab-aktiv {
        color: var(--primary); border-bottom-color: var(--primary);
      }
      .lv-split-mid { border-left: none; }
      .lv-split-right { display: none; border-left: none; }
      .lv-split-right.lv-fane-aktiv { display: flex; flex-direction: column; overflow-y: auto; }
      .lv-split-mid.lv-fane-skjult { display: none; }
    }

    /* AI-info-boks */
    .ai-info-boks { background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.2); border-radius:8px; padding:12px 14px; font-size:12px; color:var(--text-muted); line-height:1.5; margin-bottom:10px; }
    .ai-info-boks strong { color:rgba(124,58,237,0.9); }
    .ai-info-boks ul { margin:6px 0 0 0; padding-left:16px; }
    .ai-info-boks li { margin-bottom:3px; }

    /* ── Arrangement-lokasjoner admin ────────────────────────── */
    .lok-omrade-rad {
      border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:8px;
      background:var(--surface,#fff);
    }
    .lok-omrade-farge {
      width:13px; height:13px; border-radius:50%; flex-shrink:0; display:inline-block;
    }
    .lok-sted-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .lok-sted-chip {
      display:inline-flex; align-items:center; gap:4px;
      background:rgba(128,128,128,0.1); border:1px solid var(--border);
      border-radius:100px; padding:2px 8px 2px 10px; font-size:12px; color:var(--text);
    }
    .lok-sted-chip-slett {
      background:none; border:none; cursor:pointer; color:var(--text-muted);
      font-size:12px; padding:0 1px; line-height:1; transition:color 0.15s;
    }
    .lok-sted-chip-slett:hover { color:#ef4444; }
    .lok-add-sted-btn {
      padding:2px 10px; border:1px dashed var(--border); border-radius:100px;
      background:none; color:var(--text-muted); font-size:12px; cursor:pointer; transition:all 0.15s;
    }
    .lok-add-sted-btn:hover { border-color:var(--primary); color:var(--primary); }
    .lok-import-btn {
      padding:7px 14px; border:1px solid var(--border); border-radius:7px;
      background:none; color:var(--text-muted); font-size:12px; cursor:pointer;
      transition:all 0.15s; display:inline-flex; align-items:center; gap:6px;
    }
    .lok-import-btn:hover { border-color:var(--primary); color:var(--primary); }

    /* ── View-mode klasser — !important overstyrer alle inline-stiler ── */
    body.modo-dashboard .header-panel,
    body.modo-dashboard .timeline-wrapper,
    body.modo-landing   .header-panel,
    body.modo-landing   .timeline-wrapper { display: none !important; }
    body.modo-tidslinje #event-dashboard-screen,
    body.modo-landing   #event-dashboard-screen { display: none !important; }

    /* ── Google Workspace-integrasjoner ── */
    .integrasjon-kort { background:var(--card,#fff); border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:14px; }
    .integrasjon-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .integrasjon-ikon { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .integrasjon-tittel { font-size:14px; font-weight:700; color:var(--text); flex:1; }
    .integrasjon-status { font-size:11px; font-weight:600; padding:2px 9px; border-radius:100px; flex-shrink:0; }
    .integrasjon-status.tilkoblet { background:rgba(34,197,94,0.15); color:#16a34a; }
    .integrasjon-status.ikke-tilkoblet { background:rgba(156,163,175,0.13); color:var(--text-muted); }
    .integrasjon-url-input { flex:1; padding:5px 9px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:12px; font-family:monospace; min-width:0; }
    .integrasjon-url-input:focus { outline:none; border-color:var(--primary); }
    .snarveier-rad { display:flex; align-items:center; gap:6px; }
    .integrasjon-koble-btn { padding:7px 14px; border-radius:7px; border:1px solid var(--border); background:none; color:var(--text); font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all 0.15s; white-space:nowrap; }
    .integrasjon-koble-btn:hover { border-color:var(--primary); color:var(--primary); }
    .integrasjon-koble-btn.tilkoblet { background:rgba(34,197,94,0.08); border-color:rgba(34,197,94,0.3); color:#16a34a; }
    .db-settings-seksjon { background:var(--bg-secondary); border-radius:10px; padding:18px; margin-bottom:18px; border:1px solid var(--border); }
    .db-settings-seksjon-hdr { font-weight:700; font-size:13px; color:var(--text); margin-bottom:12px; }
    .mobil-push-banner { padding:0 0 10px; }
    .mobil-push-opt-btn { width:100%; padding:10px 14px; border-radius:8px; border:1px dashed var(--primary); background:rgba(var(--primary-rgb,99,102,241),0.06); color:var(--primary); font-size:12px; font-weight:600; cursor:pointer; text-align:center; transition:background 0.15s; }
    .mobil-push-opt-btn:active { background:rgba(var(--primary-rgb,99,102,241),0.14); }
    .mobil-push-opt-btn.aktiv { border-style:solid; background:rgba(var(--primary-rgb,99,102,241),0.10); opacity:0.7; }

    /* ── Profil-modal (lys) ──────────────────────────────────────── */

    .pp-lukk-btn {
      width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center;
      background:none; border:1px solid var(--border); color:var(--text-muted); cursor:pointer; transition:background .12s;
    }
    .pp-lukk-btn:hover { background:var(--bg2); color:var(--text); }

    .pp-bruker-kort {
      display:flex; align-items:center; gap:14px;
      padding:14px 16px; background:var(--bg); border:1px solid var(--border);
      border-radius:12px; margin-bottom:20px;
    }
    .pp-avatar {
      width:46px; height:46px; border-radius:50%;
      background:linear-gradient(135deg,#F71B00,#d91000);
      color:#fff; display:flex; align-items:center; justify-content:center;
      font-size:16px; font-weight:700; flex-shrink:0;
      box-shadow:0 2px 8px rgba(247,27,0,.28);
    }
    .pp-bruker-navn { font-size:14px; font-weight:700; color:var(--text); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pp-bruker-epost { font-size:12px; color:var(--text-muted); }

    .pp-seksjon { margin-bottom:20px; }
    .pp-seksjon-hdr {
      font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
      color:var(--text-muted); margin-bottom:10px;
    }
    .pp-form-gruppe { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
    .pp-label { font-size:12px; font-weight:500; color:var(--text-muted); }
    .pp-input {
      padding:8px 12px; border:1px solid var(--border); border-radius:8px;
      background:var(--surface); color:var(--text); font-size:13px; font-family:inherit;
      transition:border-color .15s;
    }
    .pp-input:focus { outline:none; border-color:#93C5FD; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .pp-input:disabled { opacity:.55; cursor:default; background:var(--bg); }
    .pp-lagre-btn {
      padding:7px 16px; border-radius:8px; border:none;
      background:var(--primary); color:#fff; font-size:13px; font-weight:600; cursor:pointer;
      transition:background .12s;
    }
    .pp-lagre-btn:hover { background:var(--primary-dark); }

    .pp-org-link {
      display:flex; align-items:center; gap:10px; padding:9px 12px;
      border-radius:9px; border:1px solid var(--border); text-decoration:none;
      margin-bottom:6px; transition:background .12s, border-color .12s;
      background:var(--surface);
    }
    .pp-org-link:hover { background:var(--bg); border-color:#C8B8AD; }
    .pp-org-link.aktiv { background:#FFF5F5; border-color:rgba(247,27,0,.3); }
    .pp-org-ikon {
      width:30px; height:30px; border-radius:7px;
      background:var(--bg); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; color:var(--text-muted);
    }
    .pp-org-aktiv-merke { font-size:10px; font-weight:700; color:var(--primary); flex-shrink:0; }

    .pp-integ-kort {
      border:1px solid var(--border); border-radius:10px;
      padding:14px 16px; margin-bottom:10px; background:var(--surface);
    }
    .pp-integ-hdr { display:flex; align-items:flex-start; gap:12px; }
    .pp-integ-ikon { flex-shrink:0; margin-top:1px; }
    .pp-integ-info { flex:1; min-width:0; }
    .pp-integ-naam { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
    .pp-integ-beskr { font-size:12px; color:var(--text-muted); line-height:1.45; }
    .pp-integ-knapper { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
    .pp-koble-fra-btn { color:#dc2626 !important; border-color:#FECACA !important; }
    .pp-koble-fra-btn:hover { color:#b91c1c !important; border-color:#FCA5A5 !important; background:#FEF2F2 !important; }

    .pp-select {
      padding:5px 10px; border:1px solid var(--border); border-radius:7px;
      background:var(--bg); color:var(--text); font-size:12px; cursor:pointer; max-width:180px;
    }

    .pp-bunn {
      display:flex; justify-content:flex-end; padding-top:8px;
      border-top:1px solid var(--border);
    }
    .pp-logg-ut-btn {
      padding:7px 16px; border-radius:8px; border:1px solid var(--border);
      background:none; color:var(--text-muted); font-size:13px; cursor:pointer; transition:all .12s;
    }
    .pp-logg-ut-btn:hover { background:#FEF2F2; color:#dc2626; border-color:#FECACA; }

    /* Drive eksport-grid */
    .pp-drive-eksport-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
    .pp-drive-eksport-btn {
      display:flex; align-items:center; gap:8px; padding:8px 10px;
      border:1px solid var(--border); border-radius:8px; background:var(--bg);
      cursor:pointer; text-align:left; transition:border-color .12s, background .12s;
    }
    .pp-drive-eksport-btn:hover { border-color:#4285F4; background:rgba(66,133,244,0.05); }

    /* Calendar-eksportfilter */
    .cal-filter-rad { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted); cursor:pointer; }
    .cal-filter-rad input[type=radio] { accent-color:var(--primary); flex-shrink:0; }

/* ============================================================
   EVENT-VELGER (mobil, #mobil-ev-velger)
   ============================================================ */
.mev-header {
  padding: max(16px, env(safe-area-inset-top, 16px)) 20px 14px;
  background: #1D1D1D;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.mev-org-navn {
  font-size: 24px; font-weight: 800; color: var(--text, #fff);
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em;
}
.mev-undertittel {
  font-size: 13px; color: var(--text-muted, #9CA3AF); margin-top: 2px;
}
.mev-liste {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.mev-kort {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: background 0.12s; text-decoration: none;
}
.mev-kort:active { background: rgba(255,255,255,0.1); }
.mev-kort-tekst { flex: 1; }
.mev-kort-navn { font-size: 17px; font-weight: 600; color: var(--text, #fff); }
.mev-kort-dato { font-size: 13px; color: var(--text-muted, #9CA3AF); margin-top: 2px; }

/* ============================================================
   HENDELSESDETALJ + KJØREPLAN (mobil slide-in)
   ============================================================ */
.mhd-innhold {
  padding: 20px 16px;
  display: flex; flex-direction: column;
}
.mhd-tid {
  font-size: 28px; font-weight: 800; color: var(--text, #fff);
  letter-spacing: -0.5px; margin-bottom: 4px;
}
.mhd-tittel {
  font-size: 20px; font-weight: 700; color: var(--text, #fff);
  line-height: 1.3; margin-bottom: 10px;
}
.mhd-status-naa {
  display: inline-block; padding: 4px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 700; margin-bottom: 16px; align-self: flex-start;
}
.mhd-meta-rad {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text, #fff); padding: 5px 0;
}
.mhd-beskrivelse {
  font-size: 14px; color: var(--text-muted, #9CA3AF); line-height: 1.65;
  padding-top: 16px; margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  white-space: pre-wrap;
}
.mhd-status-seksjon {
  padding-top: 20px; margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mhd-status-seksjon-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 12px;
}
.mhd-status-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mhd-status-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 10px; border-radius: 14px; border: 1px solid;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: opacity 0.12s, transform 0.08s; min-height: 52px;
  -webkit-tap-highlight-color: transparent; box-sizing: border-box; width: 100%;
  line-height: 1.2; text-align: center;
}
.mhd-status-btn:active:not(:disabled) { transform: scale(0.96); }
.mhd-status-btn:disabled { cursor: default; }
.mhd-status-aktiv { box-shadow: 0 0 0 1.5px currentColor; }
.mhd-status-btn-ikon { font-size: 14px; flex-shrink: 0; line-height: 1; }
.mhd-tids-dialog {
  margin-top: 12px; padding: 14px 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
}
.mhd-tids-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 10px;
}
.mhd-tids-rad { display: flex; align-items: center; gap: 8px; }
.mhd-tids-input {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.07);
  color: #fff; font-size: 17px; font-weight: 600; font-family: inherit;
  -webkit-appearance: none; min-width: 0; color-scheme: dark;
}
.mhd-tids-input::-webkit-datetime-edit,
.mhd-tids-input::-webkit-datetime-edit-fields-wrapper,
.mhd-tids-input::-webkit-datetime-edit-hour-field,
.mhd-tids-input::-webkit-datetime-edit-minute-field,
.mhd-tids-input::-webkit-datetime-edit-ampm-field { color: #fff; }
.mhd-tids-input:focus { outline: none; border-color: var(--primary); }
.mhd-tids-bekreft {
  padding: 10px 14px; border-radius: 10px; border: none;
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.mhd-tids-bekreft:disabled { opacity: 0.5; }
.mhd-tids-avbryt {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12); background: none;
  color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.mhd-kp-btn {
  margin-top: 12px; padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left; display: flex;
  align-items: center; justify-content: space-between;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  width: 100%; font-family: inherit;
  box-sizing: border-box; -webkit-tap-highlight-color: transparent;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mhd-kp-btn:active {
  background: rgba(0,0,0,0.03);
  border-color: rgba(247,27,0,0.35);
  transform: scale(0.99);
}

/* Kjøreplan-rad */
.mkp-tid-banner {
  display: flex; gap: 18px; align-items: center;
  padding: 12px 14px; margin: 4px 0 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mkp-tid-blokk { display: flex; flex-direction: column; gap: 2px; }
.mkp-tid-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted, #9CA3AF);
}
.mkp-tid-verdi {
  font-size: 18px; font-weight: 700; color: var(--text, #fff);
  font-variant-numeric: tabular-nums;
}
.mkp-rad-tid {
  font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.mkp-fase-header {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-muted, #9CA3AF); padding: 16px 0 6px;
  text-transform: uppercase;
}
.mkp-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mkp-rad-nr {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(247,27,0,0.1); color: var(--primary);
  font-size: 11px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.mkp-rad-innhold { flex: 1; min-width: 0; }
.mkp-rad-tittel { font-size: 15px; font-weight: 600; color: var(--text, #fff); }
.mkp-rad-meta {
  display: flex; gap: 6px; margin-top: 3px;
  font-size: 12px; color: var(--text-muted, #9CA3AF);
}
.mkp-status-badge {
  padding: 5px 11px; border-radius: 100px;
  font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
  border: none;
}
.mkp-status-tappbar {
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s, transform 0.08s;
}
.mkp-status-tappbar:active { transform: scale(0.93); opacity: 0.8; }

/* Underhendelse / kjøreplan-punkt modal (web) */
#uhSkjemaModal .modal-content.uh-modal {
  width: 560px; max-width: 95%; padding: 22px 24px 20px;
  border: 1px solid var(--border);
}
.uh-modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.uh-modal-tittel {
  flex: 1; font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}
.uh-modal-lukk {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-muted);
  cursor: pointer; padding: 0;
}
.uh-modal-lukk:hover { background: rgba(0,0,0,0.06); color: var(--text); }

.uh-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  padding: 16px 0 4px;
}
.uh-felt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.uh-full { grid-column: 1 / -1; }
.uh-tre-kol { grid-column: span 1; }
@media (min-width: 560px) {
  .uh-form-grid { grid-template-columns: repeat(6, 1fr); }
  .uh-felt { grid-column: span 3; }
  .uh-tre-kol { grid-column: span 2; }
}
.uh-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.uh-paak { color: var(--primary); }
.uh-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.uh-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(247,27,0,0.12);
}
select.uh-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A6E68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 28px;
}
.uh-varighet-rad { display: flex; align-items: center; gap: 6px; }
.uh-varighet-input { width: 56px; flex: 0 0 56px; text-align: center; }
.uh-varighet-sep, .uh-varighet-suffix {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
}
.uh-varighet-sep { padding: 0 1px; }
.uh-seksjon-tittel {
  font-size: 11px; font-weight: 800; color: var(--primary);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 0 2px; margin-top: 4px;
  border-top: 1px solid var(--border);
}
.uh-knapper {
  display: flex; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.uh-knapper .btn-save {
  background: linear-gradient(135deg,#F71B00,#CC1500);
  color: white !important; border: none !important;
  padding: 10px 20px; border-radius: 8px;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 8px rgba(247,27,0,0.3);
  cursor: pointer;
}
.uh-knapper .btn-save:hover { background: linear-gradient(135deg,#CC1500,#A21000); }
.uh-knapper .btn-save:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.uh-knapper .btn-cancel {
  background: var(--bg); color: var(--text-muted);
  border: 1px solid var(--border); padding: 10px 18px;
  border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.uh-knapper .btn-cancel:hover { background: rgba(0,0,0,0.04); color: var(--text); }

/* Knapprad nederst i mobil kjøreplan */
.mkp-knapp-rad {
  display: flex; gap: 8px;
  margin: 16px 0 8px;
}
.mkp-live-btn, .mkp-legg-til-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.mkp-live-btn {
  background: rgba(59,130,246,0.10);
  border: 1.5px solid rgba(59,130,246,0.45);
  color: #2563EB;
}
.mkp-live-btn:active { background: rgba(59,130,246,0.22); border-color: rgba(59,130,246,0.7); }
.mkp-legg-til-btn {
  background: rgba(247,27,0,0.06);
  border: 1.5px dashed rgba(247,27,0,0.35);
  color: var(--primary);
}
.mkp-legg-til-btn:active { background: rgba(247,27,0,0.14); border-color: rgba(247,27,0,0.6); }

/* Full-size punkt-skjema (slide-in) */
.muh-form {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.muh-felt { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.muh-rad { display: flex; gap: 10px; }
.muh-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.muh-paak { color: var(--primary); }
.muh-input {
  padding: 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px; color: var(--text);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
}
.muh-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(247,27,0,0.12);
}
.muh-textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.muh-varighet-rad { display: flex; align-items: center; gap: 6px; }
.muh-varighet-input { flex: 0 0 64px; width: 64px; text-align: center; }
.muh-varighet-sep { font-size: 13px; color: var(--text-muted); font-weight: 600; padding: 0 2px; }
select.muh-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A6E68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.muh-seksjon-tittel {
  font-size: 11px; font-weight: 800; color: var(--primary);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.muh-form > .muh-seksjon-tittel:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.muh-bunn {
  display: flex; gap: 8px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom, 12px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.muh-avbryt, .muh-lagre {
  flex: 1; padding: 13px 14px;
  border-radius: 10px; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, opacity 0.12s, transform 0.06s;
}
.muh-avbryt {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.muh-avbryt:active { background: rgba(0,0,0,0.04); transform: scale(0.99); }
.muh-lagre {
  background: linear-gradient(135deg,#F71B00,#CC1500);
  border: none; color: white;
  box-shadow: 0 2px 10px rgba(247,27,0,0.35);
}
.muh-lagre:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.muh-lagre:active:not(:disabled) { transform: scale(0.99); }

    .cal-filter-rad.cal-filter-disabled { opacity:0.35; cursor:not-allowed; }

/* ── #13: AI-badge og ai-info-boks bruker primærfarge ─────── */
.ai-badge {
  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
  color: var(--primary) !important;
}
.ai-info-boks {
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
}
.ai-info-boks strong { color: var(--primary) !important; }

/* ── #12: Light-mode overrides ────────────────────────────── */
body.light-mode {
  --bg: #F3F4F6;
  --bg-panel: #FFFFFF;
  --surface: #FFFFFF;
  --text: #111827;
  --text-muted: #6B7280;
  --border: rgba(0,0,0,0.1);
  --card: rgba(0,0,0,0.03);
  --card-hover: rgba(0,0,0,0.06);
}
body.light-mode #login-screen,
body.light-mode #loading-screen { background: var(--bg) !important; }
body.light-mode #login-screen h2,
body.light-mode #loading-screen h2 { color: var(--text) !important; }
body.light-mode .spinner { border-color: rgba(0,0,0,0.15); border-top-color: var(--primary); }
body.light-mode #logg-panel { background: var(--bg-panel) !important; border-color: var(--border) !important; }
body.light-mode #varsel-sidebar { background: var(--bg-panel) !important; }
body.light-mode #profil-sidebar  { background: var(--surface) !important; }
body.light-mode .modal-content   { background: var(--bg-panel) !important; color: var(--text) !important; }
body.light-mode .org-chip        { color: var(--text) !important; background: rgba(0,0,0,0.06) !important; }
body.light-mode .header-panel    { background: var(--bg-panel) !important; border-color: var(--border) !important; }

/* ── #14: Tablet-breakpoint (769px – 1024px) ──────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .db-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .db-content  { padding: 0 16px !important; }
  .oppgave-rad { gap: 8px !important; }
  .landing-events-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .db-oversikt-rad { grid-template-columns: 1fr !important; }
  .db-opp-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Gjennomføring-fane ────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   GJENNOMFØRING — Execution Dashboard
   ══════════════════════════════════════════════════════════════ */

.gj-panel { display: flex; flex-direction: column; gap: 0; padding-bottom: 40px; }
.gj-body { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start; }
.gj-main { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 700px) { .gj-body { grid-template-columns: 1fr; } .gj-sidebar { display: none; } }

/* ── Dag-picker ─────────────────────────────────────────────── */
.gj-dag-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.gj-dag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
  white-space: nowrap; text-transform: capitalize;
}
.gj-dag-pill:hover { color: var(--text); border-color: #C8B8AD; background: var(--bg2); }
.gj-dag-pill:active { transform: scale(.97); }
.gj-dag-pill.aktiv {
  background: var(--text); color: var(--surface);
  border-color: var(--text);
}
.gj-dag-pill.aktiv:hover { background: var(--text); color: var(--surface); }
.gj-dag-pill-prikk {
  width: 6px; height: 6px; border-radius: 50%;
  background: #16A34A; flex-shrink: 0;
}
.gj-dag-pill.aktiv .gj-dag-pill-prikk { background: #4ADE80; }
.gj-dag-pill-alle {
  margin-left: auto; font-weight: 500;
  color: var(--text-muted); font-size: 12px;
}

/* ── Dag-skille i rundown (Vis alle) ────────────────────────── */
.gj-dag-skille {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  padding: 14px 4px 6px; margin-top: 8px;
  border-bottom: 1px solid var(--border);
}
.gj-dag-skille:first-child { margin-top: 0; padding-top: 4px; }

/* ── Dag-badge på aktiv-kort (Vis alle) ─────────────────────── */
.gj-aktiv-dag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 100px;
  background: rgba(22,163,74,.15); color: #16A34A;
}

/* ── Tom dag ─────────────────────────────────────────────────── */
.gj-tom-dag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: 12px; padding: 36px 20px;
  color: var(--text-muted);
}
.gj-tom-dag-tittel { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.gj-tom-dag-beskr { font-size: 12px; color: var(--text-muted); }

/* ── Header ─────────────────────────────────────────────────── */
.gj-header {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.gj-header-rad1 { display: flex; align-items: center; gap: 14px; }

.gj-klokke-boks {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.gj-klokke {
  font-size: 22px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

.gj-progress-boks { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gj-progress-bar {
  height: 8px; border-radius: 100px;
  background: var(--border); overflow: hidden;
}
.gj-progress-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #16A34A, #22c55e);
  transition: width 1s linear;
}
.gj-progress-tider {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

.gj-refresh-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--border);
  background: none; color: var(--text-muted); cursor: pointer; font-size: 12px;
  white-space: nowrap; flex-shrink: 0; transition: color .12s, border-color .12s;
}
.gj-refresh-btn:hover { color: var(--text); border-color: #C8B8AD; }

.gj-kpi-rad {
  display: flex; align-items: center; gap: 0;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.gj-kpi { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; }
.gj-kpi-tall { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1; }
.gj-kpi-label { font-size: 11px; color: var(--text-muted); }
.gj-kpi-live .gj-kpi-tall { color: #16A34A; }
.gj-kpi-ferdig .gj-kpi-tall { color: #64748B; }
.gj-kpi-sep { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }

/* ── Live prikk ─────────────────────────────────────────────── */
.gj-live-prikk {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #16A34A; margin-right: 7px; flex-shrink: 0;
  animation: gj-pulse 1.8s ease-in-out infinite;
}
@keyframes gj-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}

/* ── Seksjoner ──────────────────────────────────────────────── */
.gj-aktiv-seksjon { margin-bottom: 16px; }
.gj-rundown-seksjon { }

.gj-seksjon-hdr {
  display: flex; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 8px; padding: 0 2px;
}

/* ── Aktiv-kort ─────────────────────────────────────────────── */
.gj-aktiv-kort {
  display: flex; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(22,163,74,.35);
  background: linear-gradient(135deg, rgba(22,163,74,.07) 0%, rgba(22,163,74,.03) 100%);
  margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(22,163,74,.1);
}
.gj-aktiv-stripe { width: 5px; background: #16A34A; flex-shrink: 0; }
.gj-aktiv-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gj-aktiv-topp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gj-aktiv-tid { font-size: 12px; font-weight: 600; color: #16A34A; font-variant-numeric: tabular-nums; }
.gj-aktiv-reltid { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.gj-aktiv-tittel { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.25; }
.gj-aktiv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gj-aktiv-btn { margin-top: 6px; align-self: flex-start; }

/* ── Rundown rader ──────────────────────────────────────────── */
.gj-liste { display: flex; flex-direction: column; gap: 0; }

.gj-naa-linje {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 6px;
}
.gj-naa-linje::before, .gj-naa-linje::after {
  content: ''; flex: 1; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.gj-naa-tekst {
  font-size: 10px; font-weight: 700; color: var(--primary);
  white-space: nowrap; padding: 2px 8px;
  background: rgba(247,27,0,.08); border-radius: 100px; border: 1px solid rgba(247,27,0,.2);
}

.gj-rad {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; margin: 4px 0; transition: background .1s, border-color .1s;
}
.gj-rad:hover { background: var(--bg2); border-color: #C8B8AD; }
.gj-rad-ferdig { opacity: .45; }
.gj-rad-ferdig:hover { opacity: .7; }

.gj-rad-innhold {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
}

.gj-r-ikon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.gj-r-ferdig { background: rgba(100,116,139,.15); color: #64748B; }
.gj-r-planlagt {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); background: none; margin: 2px;
}

.gj-tid {
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-muted); white-space: nowrap; min-width: 96px; flex-shrink: 0;
}
.gj-info { flex: 1; min-width: 0; }
.gj-tittel { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gj-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.gj-meta span { font-size: 11px; color: var(--text-muted); }
.gj-meta-sted { display: inline-flex; align-items: center; gap: 3px; }

.gj-handling { flex-shrink: 0; }

/* ── Knapper ────────────────────────────────────────────────── */
.gj-status-btn {
  padding: 6px 13px; border-radius: 7px; border: none;
  cursor: pointer; font-size: 12px; font-weight: 600;
  transition: opacity .12s, transform .08s; white-space: nowrap;
}
.gj-status-btn:hover { opacity: .85; }
.gj-status-btn:active { transform: scale(.97); }
.gj-start-btn  { background: var(--primary); color: #fff; }
.gj-ferdig-btn { background: rgba(22,163,74,.12); color: #16A34A; border: 1px solid rgba(22,163,74,.3); }

/* ── Tid-dialog ─────────────────────────────────────────────── */
.gj-dialog { padding: 0 10px 10px 42px; }
.gj-dialog-innhold {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 14px;
}
.gj-dialog-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.gj-dialog-input {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 14px; width: 110px;
  font-variant-numeric: tabular-nums;
}
.gj-dialog-input:focus { outline: none; border-color: #93C5FD; }
.gj-dialog-bekreft {
  padding: 6px 14px; border-radius: 6px; border: none;
  background: var(--primary); color: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: opacity .12s;
}
.gj-dialog-bekreft:hover { opacity: .88; }
.gj-dialog-bekreft:disabled { opacity: .5; cursor: not-allowed; }
.gj-dialog-avbryt {
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: none;
  cursor: pointer; font-size: 13px; color: var(--text-muted);
}
.gj-dialog-avbryt:hover { color: var(--text); background: var(--bg2); }

/* ── People sidebar ─────────────────────────────────────────── */
.gj-sidebar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  position: sticky; top: 16px;
}
.gj-sidebar-tom {
  font-size: 12px; color: var(--text-muted);
  text-align: center; padding: 16px 0;
}
.gj-pers-kort {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.gj-pers-kort:last-child { border-bottom: none; padding-bottom: 0; }
.gj-pers-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(37,99,235,.12); color: #2563eb;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.gj-pers-info { flex: 1; min-width: 0; }
.gj-pers-navn { font-size: 13px; font-weight: 600; color: var(--text); }
.gj-pers-hendelse {
  font-size: 11px; color: #16A34A; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Analyse-fane (pf-filter uten modal-header) ────────────── */
.pf-analyse-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 0 10px;
}

/* ══════════════════════════════════════════════════════════════
   PERSONER-FANE — Personellstyringspanel
   ══════════════════════════════════════════════════════════════ */

/* ── Hoved-layout ──────────────────────────────────────────── */
.pers-panel {
  display: flex; gap: 20px; min-height: 500px;
  padding: 4px 0;
}
.pers-venstre {
  flex: 0 0 340px; display: flex; flex-direction: column; gap: 12px;
}
.pers-hoyre {
  flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}

/* ── Topbar (søk + ny-knapp) ───────────────────────────────── */
.pers-topbar {
  display: flex; gap: 8px; align-items: center;
}
.pers-topbar-tittel {
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .06em;
  flex: 1;
}
.pers-sok {
  flex: 1; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--card, var(--bg));
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color .15s;
}
.pers-sok:focus { border-color: var(--primary); }
.pers-ny-btn {
  padding: 8px 14px; border-radius: 10px; border: none;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: opacity .15s;
}
.pers-ny-btn:hover { opacity: .85; }

/* ── Personliste ───────────────────────────────────────────── */
.pers-liste {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; padding-right: 2px;
}
.pers-liste::-webkit-scrollbar { width: 4px; }
.pers-liste::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Personkort ────────────────────────────────────────────── */
.pers-kort {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--card, var(--bg)); border: 1.5px solid var(--border);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  user-select: none;
}
.pers-kort:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.pers-kort-drag { opacity: .5; }
.pers-kort-dropmaal { border-color: var(--primary); background: var(--primary)1a; }

.pers-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
  letter-spacing: .02em;
}
.pers-info { flex: 1; min-width: 0; }
.pers-navn {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pers-rolle {
  font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pers-team-badge {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
  background: var(--primary)22; color: var(--primary); white-space: nowrap;
  flex-shrink: 0;
}
.pers-handle {
  font-size: 16px; color: var(--text-secondary); cursor: grab; flex-shrink: 0;
  padding: 0 2px; line-height: 1;
}
.pers-handle:active { cursor: grabbing; }

.pers-ingen {
  text-align: center; color: var(--text-secondary); font-size: 13px;
  padding: 32px 0;
}

/* ── Hierarki (høyre kolonne) ──────────────────────────────── */
.pers-hierarki-topbar {
  display: flex; align-items: center; justify-content: space-between;
}
.pers-hierarki-tittel {
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .06em;
}
.pers-hierarki-rediger {
  font-size: 12px; padding: 5px 12px; border-radius: 8px;
  border: 1.5px solid var(--border); background: none;
  color: var(--text-secondary); cursor: pointer; transition: border-color .15s;
}
.pers-hierarki-rediger:hover { border-color: var(--primary); color: var(--primary); }

.pers-hierarki-liste {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
}
.pers-hierarki-liste::-webkit-scrollbar { width: 4px; }
.pers-hierarki-liste::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.pers-hierarki-ingen {
  text-align: center; color: var(--text-secondary); font-size: 13px; padding: 32px 0;
}

/* ── Sektor-blokk ──────────────────────────────────────────── */
.pers-sektor-blokk { display: flex; flex-direction: column; gap: 8px; }
.pers-sektor-hdr {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.pers-sektor-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.pers-sektor-navn {
  font-size: 13px; font-weight: 700; color: var(--text); flex: 1;
}
.pers-sektor-tall {
  font-size: 12px; color: var(--text-secondary);
  background: var(--bg); padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--border);
}
.pers-sektor-teams { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Team-mål (drop target) ────────────────────────────────── */
.pers-team-target {
  flex: 0 1 calc(50% - 4px); min-width: 140px;
  border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--card, var(--bg)); padding: 10px 12px;
  transition: border-color .15s, background .15s; cursor: default;
}
.pers-team-over {
  border-color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--bg)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.pers-team-naam {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.pers-team-bunn { display: flex; align-items: center; gap: 6px; }
.pers-team-avatarer { display: flex; }
.pers-mini-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  border: 2px solid var(--bg); margin-left: -6px; flex-shrink: 0;
}
.pers-mini-avatar:first-child { margin-left: 0; }
.pers-mini-mer {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--border); color: var(--text-secondary);
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg); margin-left: -6px; flex-shrink: 0;
}
.pers-team-tall {
  font-size: 11px; color: var(--text-secondary); margin-left: auto;
}
.pers-team-tom {
  font-size: 11px; color: var(--text-secondary); font-style: italic;
  padding: 4px 0;
}

/* ── "Ikke tildelt team" rad ───────────────────────────────── */
.pers-ingen-team-liste {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0;
}
.pers-ingen-team-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: var(--bg); border: 1.5px solid var(--border);
  color: var(--text-secondary); cursor: pointer; transition: border-color .15s;
}
.pers-ingen-team-chip:hover { border-color: var(--primary); color: var(--primary); }

/* ── Rediger-modal ─────────────────────────────────────────── */
.pers-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; backdrop-filter: blur(2px);
  animation: persOverlayIn .15s ease;
}
@keyframes persOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.pers-modal {
  background: var(--sidebar, var(--bg)); border-radius: 18px;
  width: 440px; max-width: calc(100vw - 32px); max-height: 90vh;
  overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.4);
  animation: persModalIn .2s ease;
}
@keyframes persModalIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.pm-header {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.pm-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.pm-tittel { flex: 1; }
.pm-tittel h3 { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.pm-tittel p { font-size: 12px; color: var(--text-secondary); margin: 0; }
.pm-lukk {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--border); color: var(--text); cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0;
}
.pm-lukk:hover { background: var(--primary); color: #fff; }

.pm-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-felt { display: flex; flex-direction: column; gap: 5px; }
.pm-felt label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pm-input {
  padding: 9px 12px; border-radius: 9px;
  border: 1.5px solid var(--border); background: var(--card, var(--bg));
  color: var(--text); font-size: 13px; outline: none; width: 100%;
  box-sizing: border-box; transition: border-color .15s;
}
.pm-input:focus { border-color: var(--primary); }
.pm-input[disabled] { opacity: .5; cursor: not-allowed; }

.pm-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--border);
}
.pm-slett {
  padding: 9px 14px; border-radius: 9px; border: 1.5px solid #e74c3c44;
  background: none; color: #e74c3c; cursor: pointer; font-size: 13px;
  font-weight: 600; transition: background .15s;
}
.pm-slett:hover { background: #e74c3c22; }
.pm-avbryt {
  margin-left: auto; padding: 9px 16px; border-radius: 9px;
  border: 1.5px solid var(--border); background: none;
  color: var(--text-secondary); cursor: pointer; font-size: 13px;
  transition: border-color .15s;
}
.pm-avbryt:hover { border-color: var(--primary); color: var(--primary); }
.pm-lagre {
  padding: 9px 20px; border-radius: 9px; border: none;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.pm-lagre:hover { opacity: .85; }

/* ── Angre-toast ───────────────────────────────────────────── */
.pers-undo-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: #1e2130; color: #fff; border-radius: 12px;
  padding: 12px 18px; display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 500; box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 9999; white-space: nowrap;
  animation: persToastIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes persToastIn { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

.pers-undo-btn {
  padding: 5px 12px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.3);
  background: none; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700;
  transition: background .15s;
}
.pers-undo-btn:hover { background: rgba(255,255,255,.15); }

/* ── Responsiv ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .pers-panel { flex-direction: column; }
  .pers-venstre { flex: none; }
  .pers-team-target { flex: 0 1 100%; }
}

/* ── Hierarki-redigeringsmodus ─────────────────────────────── */
.pers-rediger-wrapper {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
}
.pers-rediger-seksjon { display: flex; flex-direction: column; gap: 6px; }
.pers-rediger-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-secondary);
}
.pers-rediger-ny {
  padding: 4px 10px; border-radius: 8px; border: 1.5px solid var(--primary);
  background: none; color: var(--primary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.pers-rediger-ny:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.pers-rediger-rad {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--card, var(--bg));
  transition: border-color .15s;
}
.pers-rediger-rad:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.pers-rediger-rad-navn { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.pers-rediger-rad-chip {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.pers-rediger-tom {
  font-size: 12px; color: var(--text-secondary); font-style: italic; padding: 8px 4px;
}
.pers-rediger-ikonbtn {
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: none; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: background .15s, color .15s; flex-shrink: 0;
}
.pers-rediger-ikonbtn:hover { background: var(--border); color: var(--text); }
.pers-rediger-ikonbtn.slett:hover { background: #e74c3c22; color: #e74c3c; }

/* ── Ansvarlig chip-select: gruppe-labels ──────────────────── */
.chip-gruppe-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-secondary);
  width: 100%; padding: 6px 2px 2px; margin-top: 4px;
  pointer-events: none;
}

/* ── Leder-stjerne i personkort ────────────────────────────── */
.pers-leder-stjerne {
  color: var(--primary); font-size: 11px; opacity: .8;
}

/* ── Roller-admin panel (org-innstillinger) ────────────────── */
.rolle-panel {
  max-width: 560px; display: flex; flex-direction: column; gap: 20px;
  padding: 4px 0;
}
.rolle-topbar {
  display: flex; align-items: center; justify-content: space-between;
}
.rolle-tittel {
  font-size: 16px; font-weight: 700; margin: 0; color: var(--text);
}
.rolle-ny-btn {
  padding: 7px 14px; border-radius: 9px; border: 1.5px solid var(--primary);
  background: none; color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.rolle-ny-btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.rolle-liste { display: flex; flex-direction: column; gap: 6px; }
.rolle-ingen {
  font-size: 13px; color: var(--text-secondary); font-style: italic; padding: 8px 0;
}
.rolle-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--card, var(--bg));
  transition: border-color .15s;
}
.rolle-rad:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.rolle-rad-navn { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.rolle-leder-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer;
  user-select: none;
}
.rolle-leder-toggle input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }
.rolle-slett-btn {
  width: 26px; height: 26px; border-radius: 7px; border: none;
  background: none; color: var(--text-secondary); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.rolle-slett-btn:hover { background: #e74c3c22; color: #e74c3c; }
.rolle-info {
  font-size: 12px; color: var(--text-secondary);
  padding: 10px 14px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  margin: 0; line-height: 1.6;
}

/* ── Personell: filter chips ─────────────────────────────────── */
.pers-filter-chips {
  display: flex; gap: 6px; padding: 8px 14px 0;
}
.pers-filter-chip {
  font-size: 12px; font-weight: 600; border: 1.5px solid var(--border);
  background: var(--card, var(--bg)); color: var(--text-secondary);
  border-radius: 20px; padding: 3px 12px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pers-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.pers-filter-chip.aktiv {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* ── Personell: multi-select bar ──────────────────────────────── */
.pers-multi-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--primary)10;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--primary);
}
.pers-flytt-sel {
  flex: 1; font-size: 12px; border: 1.5px solid var(--border);
  border-radius: 8px; padding: 4px 8px; background: var(--bg); color: var(--text);
  cursor: pointer;
}
.pers-flytt-btn {
  font-size: 12px; font-weight: 700; padding: 4px 14px;
  border-radius: 8px; border: none; background: var(--primary); color: #fff;
  cursor: pointer; transition: opacity .15s;
}
.pers-flytt-btn:hover { opacity: .85; }
.pers-avmarker-btn {
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: none; color: var(--text-secondary); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.pers-avmarker-btn:hover { background: var(--border); }

/* ── Personell: multi-select checkbox on kort ─────────────────── */
.pers-valg-cb {
  width: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pers-cb {
  width: 16px; height: 16px; border-radius: 5px;
  border: 2px solid var(--border); background: var(--bg);
  transition: border-color .15s, background .15s;
}
.pers-cb.checked {
  background: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px; background-repeat: no-repeat; background-position: center;
}
.pers-kort.valgt {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--card, var(--bg)));
}

/* ── Personell: org person lookup modal ──────────────────────── */
.pers-org-liste {
  max-height: 280px; overflow-y: auto;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--card, var(--bg));
}
.pers-org-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.pers-org-rad:last-child { border-bottom: none; }
.pers-org-rad:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.pers-org-rad-navn { font-size: 14px; font-weight: 600; color: var(--text); }
.pers-org-rad-epost { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.pers-org-ingen {
  padding: 16px; text-align: center;
  font-size: 13px; color: var(--text-secondary); font-style: italic;
}
.pers-org-ny-btn {
  font-size: 13px; font-weight: 600; color: var(--primary); background: none;
  border: 1.5px dashed var(--primary); border-radius: 8px;
  padding: 7px 16px; cursor: pointer; width: 100%;
  transition: background .15s;
}
.pers-org-ny-btn:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* ── Personell: org søkbar + legg-til-alle ───────────────────── */
.pers-org-sokbar {
  display: flex; gap: 8px; margin-bottom: 10px; align-items: center;
}
.pers-legg-alle-btn {
  flex-shrink: 0; font-size: 12px; font-weight: 700;
  background: var(--primary); color: #fff; border: none;
  border-radius: 8px; padding: 6px 14px; cursor: pointer;
  white-space: nowrap; transition: opacity .15s;
  display: inline-flex; align-items: center;
}
.pers-legg-alle-btn:hover { opacity: .85; }
.pers-org-rolle-chips {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px;
}

/* ── Personell: velg-alle-med-rolle bar ──────────────────────── */
.pers-velg-rolle-bar {
  padding: 6px 14px 0;
}

/* ── Personell: sektor ledere strip ─────────────────────────── */
.pers-sektor-ledere {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 14px 2px;
}
.pers-leder-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 20px; padding: 3px 10px 3px 4px;
  font-size: 12px; color: var(--text); cursor: pointer;
  transition: background .12s;
}
.pers-leder-chip:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.pers-leder-chip-init {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.pers-leder-chip-navn { font-weight: 600; }
.pers-leder-chip-mer {
  font-size: 12px; color: var(--text-secondary);
  padding: 3px 8px;
}

/* ── Personell: team leder ───────────────────────────────────── */
.pers-team-leder {
  font-size: 11px; color: var(--primary); font-weight: 600;
  padding: 2px 0 4px; line-height: 1.4;
}
.pers-team-leder span { cursor: pointer; }
.pers-team-leder span:hover { text-decoration: underline; }
.pers-team-leder.ingen { color: var(--text-secondary); font-weight: 400; font-style: italic; }

/* ── Ansatte: split-layout ───────────────────────────────────── */
.ans-splitt {
  display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg);
}
.ans-liste-kol {
  flex: 0 0 300px; min-width: 220px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  max-height: calc(100vh - 160px); min-height: 420px;
}
.ans-liste-kol-header { padding: 12px 12px 0; flex-shrink: 0; }
.ans-liste-kol-innhold { flex: 1; overflow-y: auto; }
.ans-liste-kol-footer {
  padding: 8px 12px; border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ans-detalj-kol {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  overflow: hidden; max-height: calc(100vh - 160px); min-height: 420px;
}
.ans-detalj-innhold {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.ans-detalj-tom {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 32px; text-align: center;
}
.ans-rad.aktiv { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; }

/* ── Ansatte-panel (org-admin fane) ─────────────────────────── */
.ans-panel { display: flex; flex-direction: column; gap: 0; }
.ans-topbar {
  display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap;
}
.ans-sok {
  flex: 1; min-width: 180px; border: 1.5px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-size: 13px;
  background: var(--bg); color: var(--text);
}
.ans-ny-btn {
  font-size: 13px; font-weight: 700; padding: 8px 16px;
  background: var(--primary); color: #fff; border: none;
  border-radius: 10px; cursor: pointer; white-space: nowrap;
  transition: opacity .15s;
}
.ans-ny-btn:hover { opacity: .85; }
.ans-csv-btn {
  font-size: 13px; font-weight: 600; padding: 8px 14px;
  background: none; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: 10px;
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.ans-csv-btn:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ans-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.ans-filter-chip {
  font-size: 12px; font-weight: 600; padding: 3px 12px;
  border: 1.5px solid var(--border); border-radius: 20px;
  background: var(--card,var(--bg)); color: var(--text-secondary); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ans-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.ans-filter-chip.aktiv { background: var(--primary); color: #fff; border-color: var(--primary); }
.ans-tabell { width: 100%; border-collapse: collapse; font-size: 13px; }
.ans-th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary);
  padding: 6px 10px; border-bottom: 2px solid var(--border);
}
.ans-rad { border-bottom: 1px solid var(--border); transition: background .1s; }
.ans-rad:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.ans-td { padding: 10px 10px; color: var(--text); vertical-align: middle; }
.ans-td-navn { padding: 10px 10px; vertical-align: middle; }
.ans-td-epost { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-td-tlf { white-space: nowrap; }
.ans-td-actions { padding: 6px 10px; text-align: right; white-space: nowrap; }
.ans-rad-klikk { cursor: pointer; }
.ans-td-epost a { color: var(--primary); text-decoration: none; }
.ans-td-epost a:hover { text-decoration: underline; }
.ans-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.ans-ikonbtn {
  width: 28px; height: 28px; border-radius: 7px; border: none;
  background: none; color: var(--text-secondary); cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.ans-ikonbtn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.ans-ikonbtn.slett:hover { background: #e74c3c22; color: #e74c3c; }
.ans-ingen {
  padding: 32px; text-align: center;
  font-size: 14px; color: var(--text-secondary); font-style: italic;
}
.ans-footer {
  padding: 10px 10px 0; font-size: 12px; color: var(--text-secondary); text-align: right;
}

/* ── Ansatte: bulk-markering ─────────────────────────────────── */
.ans-rad.valgt { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.ans-cb { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.ans-td-cb { padding: 0 2px 0 10px; width: 24px; }
.ans-bulk-bar {
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  padding: 8px 12px; display: flex; flex-direction: column; gap: 6px;
}
.ans-bulk-rad1 { display: flex; align-items: center; gap: 8px; }
.ans-bulk-teller { font-size: 12px; font-weight: 700; color: var(--primary); }
.ans-bulk-link {
  background: none; border: none; color: var(--text-secondary);
  font-size: 11px; cursor: pointer; text-decoration: underline; padding: 0;
}
.ans-bulk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ans-bulk-btn {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer;
  transition: background .12s;
}
.ans-bulk-btn:hover { background: var(--border); }
.ans-bulk-btn.evt { background: var(--primary); color: #fff; border-color: var(--primary); }
.ans-bulk-btn.evt:hover { opacity: .85; }
.ans-bulk-btn.inv { background: #059669; color: #fff; border-color: #059669; }
.ans-bulk-btn.inv:hover { opacity: .85; }
.ans-bulk-btn.slett { color: #ef4444; border-color: rgba(239,68,68,.3); }
.ans-bulk-btn.slett:hover { background: rgba(239,68,68,.1); }
.ans-bulk-rolle {
  font-size: 11px; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer;
}

@media (max-width: 680px) {
  .ans-splitt { flex-direction: column; }
  .ans-liste-kol { flex: none; max-height: 50vh; border-right: none; border-bottom: 1px solid var(--border); }
  .ans-detalj-kol { max-height: none; min-height: 360px; }
}

/* ── Ansatte: edit + import modal ────────────────────────────── */
.ans-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.ans-modal {
  background: var(--surface); border-radius: 16px;
  width: min(560px, 94vw); max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  display: flex; flex-direction: column; overflow: hidden;
  color: var(--text);
  --text-secondary: var(--text-muted);
}
.ans-modal .ans-input {
  background: var(--bg);
}
.ans-modal-header {
  display: flex; align-items: center; gap: 10px; padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.ans-modal-header h3 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; }
.ans-lukk {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: none; cursor: pointer; font-size: 16px; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.ans-lukk:hover { background: var(--border); }
.ans-modal-body { padding: 20px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ans-felt { display: flex; flex-direction: column; gap: 5px; }
.ans-felt label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.ans-input {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; background: var(--bg); color: var(--text);
  width: 100%; box-sizing: border-box;
}
.ans-input:focus { outline: none; border-color: var(--primary); }
.ans-modal-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--border);
}
.ans-slett-btn {
  font-size: 13px; padding: 8px 14px; border-radius: 10px; border: none;
  background: #e74c3c18; color: #e74c3c; cursor: pointer; font-weight: 600;
  transition: background .15s;
}
.ans-slett-btn:hover { background: #e74c3c30; }
.ans-avbryt-btn {
  font-size: 13px; padding: 8px 16px; border-radius: 10px;
  border: 1.5px solid var(--border); background: none; color: var(--text);
  cursor: pointer; transition: border-color .15s;
}
.ans-avbryt-btn:hover { border-color: var(--primary); }
.ans-lagre-btn {
  font-size: 13px; font-weight: 700; padding: 8px 20px; border-radius: 10px;
  border: none; background: var(--primary); color: #fff; cursor: pointer;
  transition: opacity .15s;
}
.ans-lagre-btn:hover { opacity: .85; }
.ans-csv-preview {
  width: 100%; border-collapse: collapse; font-size: 12px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.ans-csv-preview th {
  background: var(--bg); font-weight: 700; text-align: left;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; color: var(--text-secondary);
}
.ans-csv-preview td { padding: 5px 8px; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text); }
.ans-csv-preview tr:last-child td { border-bottom: none; }

/* ── Ansatt-modal: eventer-seksjon ──────────────────────────── */
.ans-eventer-seksjon {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ans-eventer-tittel {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 8px;
}
.ans-eventer-liste { display: flex; flex-direction: column; gap: 4px; }
.ans-event-rad {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  font-size: 13px;
}
.ans-event-navn { flex: 1; font-weight: 500; color: var(--text); }
.ans-event-rolle {
  font-size: 11px; color: var(--text-secondary);
  background: var(--border); padding: 2px 7px; border-radius: 20px;
}
.ans-event-dato { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ── Personer-side (full-page) ───────────────────────────────── */
#personer-screen {
  min-height: 100vh;
  background: var(--bg, #1D1D1D);
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}
.pers-side-wrapper {
  width: 100%;
  max-width: 900px;
  padding: 0 24px 60px;
  box-sizing: border-box;
}
.pers-side-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.pers-side-tilbake {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.pers-side-tilbake:hover {
  color: var(--text);
  border-color: var(--text-secondary);
}
.pers-side-tittel {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.pers-side-innhold {
  width: 100%;
}

/* ── Collapsible sektorer (personer-fane) ──────────────────── */
.pers-sektor-hdr--klikk { cursor: pointer; user-select: none; border-radius: 6px; transition: background .12s; }
.pers-sektor-hdr--klikk:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.pers-sektor-chevron {
  font-size: 13px; color: var(--text-muted); flex-shrink: 0;
  transition: transform .2s; margin-left: 4px;
}
.pers-sektor-chevron.kollapset { transform: rotate(-90deg); }
.pers-sektor-innhold {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height .25s ease, opacity .2s;
  opacity: 1;
}
.pers-sektor-innhold.kollapset { max-height: 0; opacity: 0; pointer-events: none; }

/* ── Org-kart-fane ──────────────────────────────────────────── */

/* Full-screen split layout */
.ok-full-wrapper {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.ok-full-venstre {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--surface);
}
.ok-full-hoyre {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg);
}
.ok-venstre-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}
.ok-venstre-tittel {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}

.ok-sort-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 12px 6px; flex-shrink: 0;
}
.ok-sort-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.ok-sort-sel {
  flex: 1; font-size: 12px; border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 8px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .12s;
}
.ok-sort-sel:hover, .ok-sort-sel:focus { border-color: var(--primary); outline: none; }

/* Legacy wrapper still used by old ok-wrapper content */
.ok-wrapper { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; }
.ok-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ok-tittel { font-size: 22px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.03em; }

/* Stab-rad */
.ok-stab-seksjon {
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ok-stab-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ok-stab-tittel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.ok-stab-ant {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--border); border-radius: 12px; padding: 2px 8px;
}
.ok-stab-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.ok-stab-kort {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px 8px 8px; cursor: pointer;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.ok-stab-kort:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.1); transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.ok-stab-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ok-stab-navn { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.ok-stab-rolle { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ok-stab-rolle.leder { color: var(--primary); font-weight: 600; }

/* Sektor-grid */
.ok-sektorer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  padding: 16px 20px 20px;
  align-content: start;
}
.ok-sektor-kolonne { min-width: 0; }

/* Collapsible sector */
.ok-sektor-hdr--klikk { cursor: pointer; transition: background .12s; border-radius: 6px; }
.ok-sektor-chevron { font-size: 13px; transition: transform .2s; display: inline-block; margin-left: 4px; }
.ok-sektor-chevron.kollapset { transform: rotate(-90deg); }
.ok-sektor-innhold { overflow: hidden; max-height: 4000px; transition: max-height .3s ease, opacity .2s; }
.ok-sektor-innhold.kollapset { max-height: 0; opacity: 0; pointer-events: none; }
.ok-sektor-vis-btn {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  cursor: pointer; color: var(--primary);
  font-size: 11px; font-weight: 600; padding: 5px 12px;
  border-radius: 20px; transition: all .15s; flex-shrink: 0; white-space: nowrap;
  margin-top: 2px;
}
.ok-sektor-vis-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
.ok-sektor-kort {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
}
.ok-sektor-stripe { height: 6px; flex-shrink: 0; }
.ok-sektor-hdr { padding: 14px 16px 8px; }
.ok-sektor-navn { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.ok-sektor-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ok-sektor-leder-rad {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--border);
}
.ok-leder-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.ok-sektor-leder-navn, .ok-team-leder-navn {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.ok-sektor-leder-navn span, .ok-team-leder-navn span {
  cursor: pointer; color: var(--primary);
}
.ok-sektor-leder-navn span:hover, .ok-team-leder-navn span:hover { text-decoration: underline; }
.ok-leder-ingen { font-size: 12px; color: var(--text-muted); font-style: italic; font-weight: 400; }

/* Team-kort inni sektor */
.ok-sektor-teams { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ok-team-kort {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface) 30%);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  transition: box-shadow .15s;
}
.ok-team-kort:hover { box-shadow: 0 2px 10px rgba(0,0,0,.09); }
.ok-team-navn { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ok-team-leder-rad { display: flex; align-items: baseline; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.ok-team-bunn { display: flex; align-items: center; gap: 4px; }
.ok-mini-avatarer { display: flex; }
.ok-mini-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700;
  margin-left: -5px; flex-shrink: 0;
}
.ok-mini-avatar:first-child { margin-left: 0; }
.ok-mini-mer {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--border); color: var(--text-secondary);
  font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-left: -5px; flex-shrink: 0;
}
.ok-team-ant { font-size: 11px; color: var(--text-muted); margin-left: auto; font-weight: 600; }
.ok-team-tom { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 6px 0; }
.ok-ingen {
  padding: 48px 24px; text-align: center;
  font-size: 14px; color: var(--text-muted); line-height: 1.7;
}

/* Overordnet row above sektor grid */
.ok-overordnet-seksjon {
  padding: 0 20px 4px;
}
.ok-overordnet-tittel-rad {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
}
.ok-overordnet-tittel {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.ok-overordnet-sub { font-size: 11px; color: var(--text-muted); }
.ok-overordnet-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.ok-overordnet-kort {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
  transition: box-shadow .15s, transform .15s;
  min-width: 180px;
}
.ok-overordnet-kort:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.1); transform: translateY(-1px);
}
.ok-overordnet-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.ok-overordnet-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ok-overordnet-navn { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ok-overordnet-rolle { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ok-overordnet-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ok-overordnet-badge {
  font-size: 10px; font-weight: 600;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 20px; padding: 1px 7px; white-space: nowrap;
}

/* Multi-select hint in person modal */
.pm-felt-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: block; }
.pm-felt--full { grid-column: 1 / -1; }

/* Clickable areas in org chart */
.ok-klikk { cursor: pointer; }
.ok-sektor-hdr.ok-klikk {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 6px; padding: 14px 16px 8px;
  transition: background .15s;
}
.ok-sektor-hdr.ok-klikk:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.ok-sektor-hdr:not(.ok-klikk) { padding: 14px 16px 8px; }
.ok-vis-alle-pil {
  font-size: 16px; color: var(--text-muted); opacity: 0;
  transition: opacity .15s, transform .15s;
}
.ok-sektor-hdr.ok-klikk:hover .ok-vis-alle-pil { opacity: 1; transform: translateX(3px); }
.ok-team-kort.ok-klikk { transition: box-shadow .15s, transform .15s, border-color .15s, background .15s; }
.ok-team-kort.ok-klikk:hover {
  box-shadow: 0 3px 14px rgba(0,0,0,.12);
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary) 4%, var(--bg));
}

/* Org chart popup modal */
.ok-modal {
  background: var(--surface, #fff);
  border-radius: 14px; width: 100%; max-width: 640px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.35); overflow: hidden;
}
.ok-modal-stripe { height: 5px; flex-shrink: 0; }
.ok-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ok-modal-tittel { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.025em; }
.ok-modal-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.ok-modal-rediger-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  color: var(--text-muted); font-size: 15px; padding: 4px 10px;
  border-radius: 7px; transition: all .15s;
}
.ok-modal-rediger-btn:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ok-modal-slett-btn {
  background: none; border: 1px solid var(--border); cursor: pointer;
  color: var(--text-muted); font-size: 14px; padding: 4px 10px;
  border-radius: 7px; transition: all .15s;
}
.ok-modal-slett-btn:hover { border-color: #EF4444; color: #EF4444; background: rgba(239,68,68,0.07); }

/* Toolbar */
.ok-modal-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: color-mix(in srgb, var(--bg) 70%, var(--surface));
}
.ok-tb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  color: var(--text); text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.ok-tb-btn:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--primary);
}

/* Underteam-filter-chips i team-modal */
.ok-utf-rad {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.ok-utf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: rgba(0,0,0,0.04);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ok-utf-chip:hover { background: rgba(0,0,0,0.08); }
.ok-utf-chip.aktiv {
  background: var(--primary, #6366F1);
  color: #fff;
  border-color: var(--primary, #6366F1);
}
.ok-utf-ant {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.18);
  padding: 1px 6px;
  border-radius: 8px;
}
.ok-utf-chip:not(.aktiv) .ok-utf-ant {
  background: rgba(0,0,0,0.08);
  color: var(--text-muted);
}

/* Underteam-seksjon i team-modal */
.ok-ut-seksjon {
  border-top: 1px solid var(--border);
  padding: 12px 16px 14px;
  background: rgba(0,0,0,0.02);
}
.ok-ut-tittel-rad {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.ok-ut-tittel { font-size: 13px; font-weight: 700; color: var(--text); }
.ok-ut-sub { font-size: 11px; color: var(--text-muted); }
.ok-ut-tom { font-size: 12px; color: var(--text-muted); padding: 6px 0 10px; font-style: italic; }
.ok-ut-chips-rad {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.ok-ut-chip {
  display: inline-flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 4px 3px 12px;
  transition: border-color .12s, background .12s, box-shadow .12s;
  position: relative;
}
.ok-ut-chip:hover {
  border-color: var(--primary, #6366F1);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.ok-ut-chip.redigerer {
  border-color: var(--primary, #6366F1);
  background: var(--bg);
}
.ok-ut-chip-vis, .ok-ut-chip-rediger {
  display: inline-flex; align-items: center; gap: 6px;
}
.ok-ut-chip-navn {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap;
}
.ok-ut-chip-ant {
  font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,0.08);
  color: var(--text-muted);
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 14px; text-align: center;
}
.ok-ut-chip-act {
  background: none; border: none; cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  color: var(--text-muted);
  transition: background .12s, color .12s;
  padding: 0;
}
.ok-ut-chip-act:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.ok-ut-chip-edit:hover { color: var(--primary, #6366F1); }
.ok-ut-chip-slett:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.ok-ut-chip-ok:hover { color: #22c55e; background: rgba(34,197,94,0.1); }
.ok-ut-chip-input {
  border: none; outline: none; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--text);
  padding: 2px 4px;
  min-width: 100px;
  border-bottom: 1px dashed var(--primary, #6366F1);
}
.ok-ut-ny { display: flex; gap: 6px; align-items: center; }
.ok-ut-ny input {
  flex: 1; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.ok-ut-ny-btn {
  padding: 6px 12px; border-radius: 6px;
  background: var(--primary, #6366F1); color: #fff;
  border: none; cursor: pointer; font-size: 12px; font-weight: 600;
}
.ok-ut-ny-btn:hover { filter: brightness(1.1); }

/* List */
.ok-modal-liste { overflow-y: auto; padding: 4px 0; }
.ok-modal-rad {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.ok-modal-rad:last-child { border-bottom: none; }
.ok-modal-rad:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.ok-modal-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.ok-modal-info { flex: 1; min-width: 0; }
.ok-modal-navn { font-size: 14px; font-weight: 700; color: var(--text); }

/* Inline rolle-edit */
.ok-modal-rolle-wrap { display: flex; align-items: center; gap: 5px; margin-top: 1px; flex-wrap: wrap; }
.ok-modal-rolle { font-size: 12px; color: var(--text-muted); }
.ok-modal-rolle.leder { color: var(--primary); font-weight: 700; }
.ok-modal-ingen-rolle { font-style: italic; color: var(--text-muted); }
.ok-modal-rolle-edit-btn {
  background: none; border: none; cursor: pointer; font-size: 11px;
  color: var(--text-muted); padding: 1px 3px; border-radius: 4px;
  opacity: 0; transition: opacity .15s; line-height: 1;
}
.ok-modal-rad:hover .ok-modal-rolle-edit-btn { opacity: 1; }
.ok-modal-rolle-sel {
  font-size: 12px; border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 6px; background: var(--surface); color: var(--text);
  max-width: 160px;
}

.ok-modal-team { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Actions (flytt + kontakt) */
.ok-modal-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0;
}
.ok-modal-flytt-sel {
  font-size: 11px; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 6px; background: var(--surface); color: var(--text-muted);
  cursor: pointer; max-width: 150px;
  transition: border-color .12s, color .12s;
}
.ok-modal-flytt-sel:hover { border-color: var(--primary); color: var(--text); }
.ok-modal-kontakt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ok-modal-kontakt-lnk {
  font-size: 11px; color: var(--text-muted); text-decoration: none;
  white-space: nowrap; transition: color .12s;
}
.ok-modal-kontakt-lnk:hover { color: var(--primary); }

/* ── Lokasjoner-fane ────────────────────────────────────────── */
.lok-wrapper { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.lok-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.lok-tittel { font-size: 22px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.03em; }
.lok-topbar-actions { display: flex; gap: 8px; }

.lok-layout {
  display: grid; grid-template-columns: 252px 1fr;
  flex: 1; min-height: 0; overflow: hidden;
}
.lok-venstre {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto; min-height: 0;
}
.lok-hogre { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }

/* Left panel header */
.lok-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.lok-panel-tittel {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
}

/* Right panel header — bigger, area-colored accent */
.lok-hogre-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); border-bottom: 2px solid var(--border); flex-shrink: 0;
  border-left: 5px solid transparent;
  transition: border-left-color .2s;
}
.lok-hogre-tittel { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.025em; }
.lok-hogre-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.lok-ny-btn {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: none; border: 1.5px solid var(--primary);
  border-radius: 20px; padding: 5px 14px; cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.lok-ny-btn:hover { background: var(--primary); color: #fff; }

/* Areas list */
.lok-omrade-liste { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
.lok-omrade-blokk {
  cursor: pointer; border-radius: 8px; overflow: hidden;
  transition: background .12s; position: relative;
}
.lok-omrade-blokk:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.lok-omrade-blokk.lok-aktiv { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.lok-omrade-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px;
  border: none; background: none;
}
.lok-omrade-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lok-omrade-navn { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.lok-omrade-ant {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--border); border-radius: 12px;
  padding: 2px 8px; white-space: nowrap; text-align: center;
}
.lok-omrade-blokk.lok-aktiv .lok-omrade-ant {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--primary);
}
.lok-icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px 5px; border-radius: 5px;
  display: flex; align-items: center; opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
}
.lok-omrade-rad:hover .lok-icon-btn,
.lok-sted-footer:hover .lok-icon-btn,
.lok-sted-footer .lok-icon-btn { opacity: 1; }
.lok-omrade-rad:hover .lok-icon-btn { opacity: 1; }
.lok-icon-btn:hover { color: var(--text); background: var(--border); }
.lok-slett-btn:hover { color: #EF4444; background: rgba(239,68,68,.12); }

/* Drag handle */
.lok-drag-handle {
  padding: 0 9px; color: var(--text-muted); opacity: .25;
  font-size: 14px; flex-shrink: 0; cursor: grab;
  transition: opacity .15s; user-select: none;
  display: flex; align-items: center; align-self: stretch;
}
.lok-omrade-blokk:hover .lok-drag-handle,
.lok-sted-blokk:hover .lok-drag-handle { opacity: .65; }
.lok-drag-handle:active { cursor: grabbing; opacity: 1 !important; }

/* Drag states */
.lok-omrade-blokk.lok-dragging,
.lok-sted-blokk.lok-dragging { opacity: .3; }
.lok-omrade-blokk.lok-drop-before { box-shadow: 0 -2px 0 var(--primary); }
.lok-omrade-blokk.lok-drop-after  { box-shadow: 0  2px 0 var(--primary); }
.lok-sted-blokk.lok-drop-before   { box-shadow: 0 -2px 0 var(--primary); border-top-color: var(--primary); }
.lok-sted-blokk.lok-drop-after    { box-shadow: 0  2px 0 var(--primary); border-bottom-color: var(--primary); }

/* Sortable location list */
.lok-sted-liste {
  display: flex; flex-direction: column;
  gap: 5px; padding: 12px; align-content: start;
}
.lok-sted-blokk {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; flex-direction: row; align-items: center;
  transition: box-shadow .15s, border-color .15s, opacity .15s;
}
.lok-sted-blokk:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.lok-sted-stripe { width: 4px; align-self: stretch; flex-shrink: 0; border-radius: 0 0 0 0; }
.lok-sted-body {
  flex: 1; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.lok-sted-navn {
  font-size: 13px; font-weight: 700; color: var(--text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lok-sted-kart { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.lok-sted-footer {
  display: flex; align-items: center; gap: 2px;
  padding: 0 8px; flex-shrink: 0;
  opacity: 0; transition: opacity .15s;
}
.lok-sted-blokk:hover .lok-sted-footer { opacity: 1; }

/* Forms */
.lok-form {
  padding: 12px 14px 14px;
  background: color-mix(in srgb, var(--primary) 5%, var(--bg));
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.lok-form-rad { display: flex; gap: 8px; }
.lok-input {
  flex: 1; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.lok-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.lok-farge-rad { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0; }
.lok-farge-boks {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.lok-farge-boks:hover { transform: scale(1.2); }
.lok-farge-boks.lok-farge-aktiv { border-color: #fff; box-shadow: 0 0 0 2.5px var(--primary); }
.lok-form-knapper { display: flex; gap: 8px; justify-content: flex-end; padding-top: 2px; }
.lok-avbryt-btn {
  font-size: 12px; padding: 7px 14px; border-radius: 7px;
  border: 1px solid var(--border); background: none;
  color: var(--text-secondary); cursor: pointer; transition: background .12s;
}
.lok-avbryt-btn:hover { background: var(--border); }
.lok-lagre-btn {
  font-size: 12px; padding: 7px 16px; border-radius: 7px;
  border: none; background: var(--primary); color: #fff;
  font-weight: 700; cursor: pointer; transition: opacity .15s, box-shadow .15s;
}
.lok-lagre-btn:hover { opacity: .87; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.lok-tom { padding: 40px 20px; font-size: 13px; color: var(--text-muted); text-align: center; }
.lok-tom-panel {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-muted);
}

/* ── Lokasjoner rebuilt layout ──────────────────────────────── */
.lok-ny-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.lok-hend-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lok-hend-sidebar-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lok-hend-sidebar-tittel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.lok-hend-sidebar-ant {
  font-size: 11px;
  background: var(--border);
  color: var(--text-secondary);
  padding: 1px 7px;
  border-radius: 100px;
  font-weight: 600;
}
.lok-hend-liste {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  transition: background .12s;
}
.lok-hend-liste.lok-drop-over {
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
}
.lok-hend-kort {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  cursor: grab;
  transition: box-shadow .12s, background .12s, border-color .12s;
  user-select: none;
}
.lok-hend-kort:hover {
  background: color-mix(in srgb, var(--primary) 5%, var(--bg));
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.lok-hend-kort.lok-dragging { opacity: .3; }
.lok-hend-kort-tid {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.lok-hend-kort-tittel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.lok-hend-draggable { cursor: grab; }
.lok-hend-draggable:hover { transform: none !important; }
.lok-hend-draggable.lok-dragging { opacity: .35; }
.lok-hend-tom {
  padding: 20px 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}
.lok-kart-innhold {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-width: 0;
  background: color-mix(in srgb, var(--border) 18%, var(--bg));
}
.lok-omrader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}
.lok-omrade-kolonne {
  min-width: 0;
  transition: opacity .15s;
}
.lok-omrade-kolonne .ok-sektor-kort {
  box-shadow: 0 3px 14px rgba(0,0,0,.11), 0 1px 4px rgba(0,0,0,.07);
  border-color: color-mix(in srgb, var(--border) 70%, var(--text));
}
.lok-omrade-kolonne.lok-dragging { opacity: .3; }
.lok-omrade-kolonne.lok-drop-before { box-shadow: -3px 0 0 var(--primary); border-radius: 8px; }
.lok-omrade-kolonne.lok-drop-after  { box-shadow:  3px 0 0 var(--primary); border-radius: 8px; }
.lok-sted-kart-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 12px;
}
.lok-sted-kart-kort {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  transition: box-shadow .12s, border-color .12s, background .12s;
  position: relative;
}
.lok-sted-kart-kort:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.lok-sted-kart-kort.lok-dragging { opacity: .3; pointer-events: none; }
.lok-sted-kart-kort.lok-drop-before::before,
.lok-sted-kart-kort.lok-drop-after::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 99px;
  z-index: 10;
}
.lok-sted-kart-kort.lok-drop-before::before { top: -4px; }
.lok-sted-kart-kort.lok-drop-after::after  { bottom: -4px; }
.lok-sted-kart-kort.lok-drop-over {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
}
.lok-sted-kart-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--border) 25%, var(--bg));
  border-bottom: 1px solid var(--border);
  border-radius: 7px 7px 0 0;
  overflow: hidden;
}
.lok-sted-kart-naam {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lok-sted-kart-meta {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.lok-sted-kart-btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
.lok-sted-kart-kort:hover .lok-sted-kart-btns { opacity: 1; }
.lok-sted-hend-liste {
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 36px;
  overflow: hidden;
  max-height: 2000px;
  transition: max-height .25s ease, opacity .15s, padding .25s;
}
.lok-sted-hend-liste.kollapset {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.lok-sted-toggle-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 8px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; flex-shrink: 0; margin-left: auto;
  transition: background .1s, color .1s; font-family: inherit;
}
.lok-sted-toggle-btn:hover { background: var(--bg); color: var(--text); }
.lok-sted-toggle-btn .ok-sektor-chevron { font-size: 13px; }
.lok-sted-toggle-ant { font-variant-numeric: tabular-nums; }
.lok-sted-dag-hdr {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
  padding: 6px 2px 3px; margin-top: 4px;
}
.lok-sted-dag-hdr:first-child { margin-top: 0; padding-top: 2px; }
.lok-drop-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 5px;
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  opacity: .6;
}
.lok-hend-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  font-size: 11px;
}
.lok-hend-chip-tid {
  color: var(--text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.lok-hend-chip-tittel {
  flex: 1;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lok-hend-chip-fjern {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 1px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .1s, color .1s;
  line-height: 1;
  display: flex;
  align-items: center;
}
.lok-hend-chip:hover .lok-hend-chip-fjern { opacity: 1; }
.lok-hend-chip-fjern:hover { color: #EF4444; }
.lok-ny-sted-i-omrade {
  margin-top: 2px;
  width: 100%;
  padding: 7px;
  border: 1.5px dashed var(--border);
  border-radius: 7px;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  box-sizing: border-box;
}
.lok-ny-sted-i-omrade:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--bg));
}
.lok-tom-grid {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Booking-fane ─────────────────────────────────────────── */
.bk-panel { display: flex; flex-direction: column; gap: 14px; }

.bk-toppbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.bk-filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.bk-filter-btn {
  padding: 5px 13px; border-radius: 100px; border: 1.5px solid var(--border);
  font-size: 12px; cursor: pointer; background: var(--bg); color: var(--text-muted);
  transition: border-color .12s, color .12s, background .12s;
}
.bk-filter-btn.aktiv { font-weight: 600; }
.bk-filter-btn:not(.aktiv):hover { border-color: var(--text-muted); color: var(--text); }

/* ── Kort-grid ───────────────────────────────────────────────── */
.bk-kort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; align-items: start;
}

.bk-kort {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.bk-kort:hover { border-color: #C8B8AD; box-shadow: 0 2px 12px rgba(0,0,0,.06); }

.bk-kort-hdr { display: flex; align-items: flex-start; gap: 8px; }
.bk-kort-hdr-left { flex: 1; min-width: 0; }
.bk-kort-navn { font-size: 15px; font-weight: 700; color: var(--text); }
.bk-kort-badges { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.bk-kort-type-chip {
  font-size: 11px; color: var(--text-muted); padding: 2px 8px;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--bg); white-space: nowrap;
}
.bk-kort-knapper { display: flex; gap: 2px; flex-shrink: 0; }

.bk-kort-kontakt {
  font-size: 12px; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 8px;
}

/* ── Info-seksjoner (reise, overnatting, rider, økonomi) ─────── */
.bk-kort-info-seksjoner {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--border); padding-top: 8px;
}
.bk-kort-info-rad {
  display: flex; align-items: flex-start; gap: 8px; font-size: 13px;
}
.bk-kort-info-ikon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bk-kort-info-ikon-kr          { background: rgba(16,185,129,.12); color: #10B981; }
.bk-kort-info-ikon-reise       { background: rgba(59,130,246,.12); color: #3B82F6; }
.bk-kort-info-ikon-overnatting { background: rgba(139,92,246,.12); color: #8B5CF6; }
.bk-kort-info-ikon-rider       { background: rgba(245,158,11,.12); color: #D97706; }

.bk-kort-info-tekst {
  flex: 1; color: var(--text); line-height: 1.4;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bk-kort-rider-tekst {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bk-kort-dekkes {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 100px;
  background: rgba(22,163,74,.1); color: #16A34A; border: 1px solid rgba(22,163,74,.2);
  white-space: nowrap; flex-shrink: 0;
}

/* ── Kortets footer: GA, scene, agent ───────────────────────── */
.bk-kort-footer {
  display: flex; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid var(--border); padding-top: 8px;
}
.bk-kort-footer-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted);
}

.bk-badge {
  display: inline-block; padding: 3px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}

.bk-tom {
  padding: 40px; text-align: center;
  color: var(--text-muted); font-size: 13px;
}

.bk-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 36px 20px; box-sizing: border-box; overflow-y: auto;
}

.bk-modal {
  background: var(--bg); border-radius: 14px;
  width: 100%; max-width: 680px;
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  display: flex; flex-direction: column;
}

.bk-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bk-modal-tittel { font-size: 16px; font-weight: 700; color: var(--text); }

.bk-modal-body {
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; max-height: calc(100vh - 200px);
}

.bk-modal-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0;
}

.bk-modal-rad { display: flex; flex-direction: column; gap: 5px; }

.bk-modal-kolonne-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-modal-kolonne-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.bk-modal-seksjon-tittel {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
  margin-top: 4px;
}

.bk-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }

.bk-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--bg); color: var(--text);
  font-size: 13px; font-family: inherit; box-sizing: border-box;
}
.bk-input:focus { outline: none; border-color: var(--primary); }

.bk-textarea { resize: vertical; min-height: 60px; }

.bk-sjekkboks-rad {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-muted); cursor: pointer;
  margin-top: 6px;
}
.bk-sjekkboks-rad input { accent-color: var(--primary); }

.bk-slett-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 7px; border: 1px solid #EF4444;
  background: none; color: #EF4444; font-size: 13px; cursor: pointer;
}
.bk-slett-btn:hover { background: rgba(239,68,68,.08); }

/* KPI-linje */
.bk-kpi-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--card-bg, var(--bg)); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 20px; flex-wrap: wrap; gap: 0;
}
.bk-kpi-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 20px; gap: 3px;
}
.bk-kpi-tall {
  font-size: 20px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bk-kpi-label {
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.bk-kpi-sep {
  width: 1px; height: 32px; background: var(--border); flex-shrink: 0;
}

/* Budsjettposter */
.bk-budsjett-liste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.bk-budsjett-rad {
  display: grid; grid-template-columns: 130px 1fr 110px 32px;
  gap: 8px; align-items: center; font-size: 13px;
  padding: 6px 10px; border-radius: 6px; background: var(--bg);
  border: 1px solid var(--border);
}
.bk-budsjett-kat { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.bk-budsjett-besk { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-budsjett-belop { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bk-budsjett-tom { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px 0; }
.bk-budsjett-sum {
  text-align: right; font-size: 13px; padding: 4px 10px;
  color: var(--text-muted); border-top: 1px solid var(--border); margin-bottom: 8px;
}
.bk-budsjett-ny {
  display: flex; gap: 6px; align-items: center; margin-top: 8px;
}

/* Settings-typer */
.bk-typer-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bk-type-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 100px;
  background: var(--card-bg, rgba(0,0,0,0.04)); border: 1px solid var(--border);
  font-size: 12px; font-weight: 500;
}
.bk-type-chip button {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; color: var(--text-muted);
  opacity: 0.7;
}
.bk-type-chip button:hover { opacity: 1; }

/* Multi-select chips for tilknyttede programhendelser */
.bk-hendelse-sok-rad { margin-bottom: 6px; }
.bk-hendelse-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 180px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg, rgba(0,0,0,0.02));
}
.bk-hendelse-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 100px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  font-size: 12px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bk-hendelse-chip:hover { border-color: var(--primary); }
.bk-hendelse-chip.selected {
  background: rgba(124, 58, 237, 0.10);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.bk-hendelse-chip-tittel { white-space: nowrap; }
.bk-hendelse-chip-tid {
  font-size: 11px; opacity: 0.7; font-weight: 400;
  padding-left: 4px; border-left: 1px solid currentColor;
  margin-left: 2px;
}
.bk-hendelse-chip-tom {
  color: var(--text-muted); font-size: 12px; font-style: italic;
}

/* Bidragsyter-chip på event-kort i program-tab og tidslinje */
.lv-boks-bidragsyter,
.lv-dv-bidragsyter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 100px;
  background: rgba(217, 119, 6, 0.12);
  color: #B45309;
  font-size: 11px; font-weight: 600;
  border: 1px solid rgba(217, 119, 6, 0.25);
}
.lv-boks-bidragsyter svg,
.lv-dv-bidragsyter-chip svg { flex-shrink: 0; }

/* Tidslinje event-card mikrofon-badge */
.event-card-bidragsyter-badge {
  position: absolute; top: 4px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: rgba(255, 255, 255, 0.92);
  color: #B45309;
  border-radius: 100px; font-size: 10px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  pointer-events: none;
}
.card-exp-bidragsytere {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.card-exp-bidragsyter-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 100px;
  background: rgba(255,255,255,0.92); color: #B45309;
  font-size: 11px; font-weight: 600;
}

@media (max-width: 768px) {
  .bk-kort-grid { grid-template-columns: 1fr; }
  .bk-modal-kolonne-2,
  .bk-modal-kolonne-3 { grid-template-columns: 1fr; }
  .bk-kpi-bar { gap: 8px; }
  .bk-kpi-item { padding: 0 10px; }
  .bk-budsjett-rad { grid-template-columns: 100px 1fr 90px 28px; }
  .bk-hendelse-chips { max-height: 240px; }
}

/* ── Support-innboks ────────────────────────────────────────────────────────── */

.sup-wrapper { display: flex; flex-direction: column; height: 100%; }

.sup-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.sup-subtabs { display: flex; gap: 4px; }
.sup-subtab-btn {
  padding: 5px 14px; border-radius: 6px; border: 1px solid var(--border);
  background: none; color: var(--text-muted); font-size: 13px; cursor: pointer;
}
.sup-subtab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sup-topbar-actions { margin-left: auto; }

.sup-ny-btn {
  padding: 5px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
  background: none; border: 1px solid var(--border); color: var(--text);
}
.sup-ny-btn:hover { background: var(--bg2); }

.sup-filter-rad {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.sup-filter-sel {
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 12px; cursor: pointer;
}
.sup-sak-teller { font-size: 12px; color: var(--text-muted); margin-left: auto; }

.sup-innboks-layout { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

.sup-splitt {
  display: grid; grid-template-columns: 320px 1fr; gap: 0;
  flex: 1; overflow: hidden; border: 1px solid var(--border); border-radius: 10px;
}

.sup-liste-kol {
  overflow-y: auto; border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--border) 10%, var(--bg));
}

.sup-sak-rad {
  padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 0.1s;
}
.sup-sak-rad:hover { background: var(--bg2); }
.sup-sak-rad-aktiv { background: color-mix(in srgb, var(--accent) 10%, var(--bg)) !important; border-left: 3px solid var(--accent); }

.sup-sak-rad-topp { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sup-sak-emne { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-sak-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-sak-dato { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

.sup-chip {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.sup-chip-kat { background: none !important; border: 1px solid; }

.sup-detalj-kol { overflow-y: auto; padding: 20px 24px; }
.sup-velg-sak { color: var(--text-muted); font-size: 14px; padding: 40px 0; text-align: center; }
.sup-epost-link { color: #2563eb; text-decoration: none; font-size: 13px; }
.sup-epost-link:hover { text-decoration: underline; }

/* ── Detail panel shell ──────────────────────────────────────────────────── */

.sup-dp-topbar {
  display: flex; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.sup-dp-topbar-tittel {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; flex: 1;
}
.sup-dp-lukk {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.sup-dp-lukk:hover { background: var(--bg2); color: var(--text); }

.sup-dp-innhold {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
}

/* ── Case detail inner layout ────────────────────────────────────────────── */

.sup-detalj { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.sup-dh {
  flex-shrink: 0; padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface);
}
.sup-dh-rad1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sup-dh-status-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.sup-dh-kanal { font-size: 14px; margin-left: auto; }
.sup-dh-tittel { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
.sup-dh-kontakt {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.sup-dh-kontakt strong { color: var(--text); }
.sup-dh-tidspunkt { font-size: 12px; }
.sup-dh-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 2px; }

.sup-status-sel {
  padding: 6px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 12px; cursor: pointer; font-family: inherit;
}
.sup-tildel-btn {
  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--border);
  background: none; color: var(--text); font-size: 12px; cursor: pointer; white-space: nowrap;
}
.sup-tildel-btn:hover { background: var(--bg2); }

/* AI summary */
.sup-ai-seksjon { flex-shrink: 0; padding: 12px 20px 0; }
.sup-ai-sammendrag {
  background: #EFF6FF; border: 1px solid #BFDBFE;
  border-radius: 9px; padding: 10px 14px;
  font-size: 13px; display: flex; align-items: flex-start; gap: 9px;
  color: #1e40af; line-height: 1.5;
}
.sup-ai-badge {
  background: #2563eb; color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 1px;
  letter-spacing: .03em;
}

/* Ticket info */
.sup-billett-seksjon { flex-shrink: 0; padding: 12px 20px 0; }
.sup-billett-info {
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 9px; padding: 12px 14px;
}
.sup-seksjon-hdr {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}
.sup-seksjon-hdr-rad { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sup-trad-teller {
  font-size: 11px; color: var(--text-muted);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 9px; padding: 1px 8px;
}
.sup-kv-rad { display: flex; gap: 8px; font-size: 13px; margin-bottom: 5px; align-items: baseline; }
.sup-kv-nokkel { color: var(--text-muted); min-width: 130px; text-transform: capitalize; font-size: 12px; flex-shrink: 0; }
.sup-kv-verdi { color: var(--text); font-weight: 500; }

/* Thread */
.sup-trad-seksjon {
  flex: 1; overflow-y: auto; padding: 14px 20px;
  display: flex; flex-direction: column;
}
.sup-trad { display: flex; flex-direction: column; gap: 14px; }
.sup-trad-tom { text-align: center; color: var(--text-muted); font-size: 13px; padding: 24px 0; }

/* Message bubbles */
.sup-meldrad { display: flex; gap: 10px; align-items: flex-start; }
.sup-meldrad-ut { flex-direction: row-reverse; }
.sup-meld-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.sup-avatar-inn { background: #E5E7EB; color: #374151; }
.sup-avatar-ut  { background: #DBEAFE; color: #1D4ED8; }
.sup-meld-boble { max-width: 82%; display: flex; flex-direction: column; gap: 4px; }
.sup-meld-meta { display: flex; align-items: center; gap: 7px; padding: 0 4px; }
.sup-meldrad-ut .sup-meld-meta { justify-content: flex-end; }
.sup-melding-fra { font-size: 12px; font-weight: 600; color: var(--text); }
.sup-melding-tid { font-size: 11px; color: var(--text-muted); }
.sup-sendt-merke { font-size: 11px; color: #16a34a; font-weight: 500; }
.sup-melding { border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.55; }
.sup-melding-inn { background: #F3F4F6; color: #111827; border-radius: 12px 12px 12px 3px; }
.sup-melding-ut  { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; border-radius: 12px 12px 3px 12px; }

/* Compose */
.sup-svar-panel {
  flex-shrink: 0; padding: 12px 16px 16px;
  border-top: 2px solid var(--border);
  background: var(--surface);
}
.sup-svar-hdr {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.sup-svar-hdr strong { color: var(--text); }
.sup-svar-tekst {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text); font-size: 13px;
  resize: vertical; font-family: inherit; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.sup-svar-tekst:focus { outline: none; border-color: #93C5FD; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.sup-svar-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sup-send-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #2563eb; color: #fff; border: none;
  transition: background .12s, transform .08s;
  margin-left: auto;
}
.sup-send-btn:hover { background: #1D4ED8; }
.sup-send-btn:active { transform: scale(0.98); }
.sup-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sup-laster, .sup-feil, .sup-tom {
  padding: 32px; text-align: center; color: var(--text-muted); font-size: 14px;
}
.sup-feil { color: #dc2626; }

#sup-innstillinger-innhold { flex: 1; overflow-y: auto; padding-bottom: 24px; }
.sup-innst-wrapper { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.sup-innst-footer { padding-top: 4px; }
.sup-form-gruppe { display: flex; flex-direction: column; gap: 6px; }
.sup-form-gruppe label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.sup-input {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit;
}
.sup-input:focus { outline: none; border-color: var(--accent); }
.sup-hjelp-tekst { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

.sup-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.sup-toggle input { display: none; }
.sup-toggle-knapp {
  width: 36px; height: 20px; border-radius: 10px; background: var(--border);
  position: relative; transition: background 0.2s;
}
.sup-toggle-knapp::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: transform 0.2s;
}
.sup-toggle input:checked + .sup-toggle-knapp { background: var(--accent); }
.sup-toggle input:checked + .sup-toggle-knapp::after { transform: translateX(16px); }

/* ── Support Kanban-brett ─────────────────────────────────────────────────── */

.sup-kb-brett {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.sup-kb-kolonne {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--border) 18%, var(--bg));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}

.sup-kb-kol-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 2px solid var(--kb-farge, var(--border));
  background: color-mix(in srgb, var(--kb-farge, var(--border)) 8%, var(--bg));
  flex-shrink: 0;
}
.sup-kb-kol-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sup-kb-kol-tittel {
  font-size: 12px; font-weight: 700; color: var(--text); flex: 1;
  text-transform: uppercase; letter-spacing: .04em;
}
.sup-kb-kol-teller {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 7px;
}

.sup-kb-kort-liste {
  flex: 1; overflow-y: auto; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 8px;
}

.sup-kb-tom {
  text-align: center; color: var(--text-muted); font-size: 12px; padding: 20px 0;
}

.sup-kb-kort {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.sup-kb-kort:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  transform: translateY(-1px);
}
.sup-kb-kort-aktiv {
  box-shadow: 0 0 0 2px var(--accent) !important;
}

.sup-kb-stripe {
  width: 4px; flex-shrink: 0;
}
.sup-kb-kort-body {
  padding: 10px 12px; flex: 1; min-width: 0;
}
.sup-kb-kort-topp {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.sup-kb-kort-emne {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.sup-kb-kort-sammendrag {
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 4px;
}
.sup-kb-kort-meta {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Detalj-panel (slide-in overlay på høyre side) */
.sup-detalj-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 32px rgba(0,0,0,.13);
  z-index: 10;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Innboks-layout trenger position:relative for panelet */
.sup-innboks-layout { position: relative; display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Support-tilgang: brukerliste */
.sup-bruker-rad {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
  margin-bottom: 6px; background: var(--surface);
}
.sup-bruker-epost { font-size: 13px; color: var(--text); }
.sup-fjern-bruker-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; line-height: 1;
  padding: 0 4px; border-radius: 4px; transition: color .15s;
}
.sup-fjern-bruker-btn:hover { color: #dc2626; }

/* Gmail OAuth: connect button and status */
.sup-koble-gmail-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--text); transition: background .15s, border-color .15s;
}
.sup-koble-gmail-btn:hover { background: var(--surface); border-color: #2563eb; color: #2563eb; }
.sup-koble-gmail-btn:disabled { opacity: .6; cursor: default; }
.sup-gmail-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); margin-bottom: 10px;
}
.sup-gmail-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a; flex-shrink: 0;
}
.sup-gmail-ok {
  padding: 8px 12px; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 8px; font-size: 13px; color: #15803d;
  margin-bottom: 12px;
}

/* Gmail-kobling: collapsible steg-guide */
.sup-hjelp-detaljer {
  margin-top: 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); overflow: hidden;
}
.sup-hjelp-detaljer summary {
  padding: 10px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; user-select: none; color: var(--text);
  list-style: none;
}
.sup-hjelp-detaljer summary::-webkit-details-marker { display: none; }
.sup-hjelp-detaljer[open] summary { border-bottom: 1px solid var(--border); }
.sup-steg-liste {
  margin: 0; padding: 14px 14px 14px 30px;
  font-size: 13px; line-height: 1.7; color: var(--text);
}
.sup-steg-liste li { margin-bottom: 10px; }
.sup-steg-liste code {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: 12px;
  font-family: ui-monospace, monospace;
}

/* ── Support: forbedringer (mai 2026) ──────────────────────────────────── */
.sup-sok-input {
  flex: 1; min-width: 200px; max-width: 360px;
  padding: 6px 10px; font-size: 13px;
}

/* SLA-aldring */
.sup-alder {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent;
}
.sup-alder-ok        { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
.sup-alder-advarsel  { color: #d97706; background: #fffbeb; border-color: #fed7aa; }
.sup-alder-kritisk   { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.sup-kb-kort-advarsel { box-shadow: inset 3px 0 0 #f59e0b; }
.sup-kb-kort-kritisk  { box-shadow: inset 3px 0 0 #dc2626; }

/* Manglende-felt-merke */
.sup-mangler-merke {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  color: #b45309; background: #fef3c7; border: 1px solid #fde68a;
}
.sup-kb-kort-merker { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

.sup-mangler-seksjon {
  margin: 12px 0; padding: 10px 14px;
  background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px;
}
.sup-mangler-liste {
  margin: 6px 0 0; padding-left: 20px; font-size: 13px; color: #92400e;
}
.sup-mangler-liste li { margin-bottom: 2px; }

/* Kundehistorikk */
.sup-historikk-seksjon {
  margin: 12px 0; padding: 10px 14px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
}
.sup-historikk-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sup-historikk-rad {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.sup-historikk-rad:hover { background: var(--bg); border-color: var(--border); }
.sup-historikk-emne { flex: 1; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-historikk-dato { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Vedlegg */
.sup-vedlegg-liste {
  margin-top: 6px; display: flex; flex-direction: column; gap: 3px;
}
.sup-vedlegg-rad {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 12px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  width: fit-content; max-width: 100%;
}
.sup-vedlegg-ikon { font-size: 14px; }
.sup-vedlegg-navn { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.sup-vedlegg-storrelse { color: var(--text-muted); font-size: 11px; }

/* Internt notat */
.sup-meldrad-notat { display: flex; gap: 10px; margin-bottom: 12px; }
.sup-avatar-notat {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fef3c7; border: 1px solid #fde68a; font-size: 14px; flex-shrink: 0;
}
.sup-melding-notat {
  background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 8px;
  padding: 8px 12px; font-size: 13px; color: #78350f;
  white-space: pre-wrap; word-wrap: break-word;
}

/* Svar/notat-mode-velger */
.sup-svar-mode-velger {
  display: flex; gap: 4px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.sup-svar-mode-btn {
  padding: 4px 12px; font-size: 12px; font-weight: 500;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
}
.sup-svar-mode-btn:hover { background: var(--bg2); color: var(--text); }
.sup-svar-mode-btn.aktiv { background: var(--bg2); color: var(--text); border-color: var(--border); }

/* Statistikk-dashboard */
.sup-stats-wrapper { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.sup-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
.sup-stat-kort {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
}
.sup-stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.sup-stat-tall  { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; }
.sup-stat-sub   { font-size: 11px; color: var(--text-muted); }

.sup-stats-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sup-stats-kort .oset-card-body { padding: 12px 16px 16px; }
@media (max-width: 720px) { .sup-stats-rad { grid-template-columns: 1fr; } }

.sup-stats-bar-rad {
  display: flex; align-items: flex-end; gap: 6px;
  height: 140px; padding-top: 12px;
}
.sup-stats-bar-celle {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; position: relative;
}
.sup-stats-bar {
  width: 100%; min-height: 2px; max-width: 32px;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 3px 3px 0 0; margin-top: auto;
}
.sup-stats-bar-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.sup-stats-bar-tall {
  position: absolute; top: 0; font-size: 10px; font-weight: 600; color: var(--text);
}

.sup-stats-rad-rad {
  display: grid; grid-template-columns: 120px 1fr 32px;
  gap: 8px; align-items: center; margin-bottom: 6px; font-size: 13px;
}
.sup-stats-rad-label { color: var(--text); text-transform: capitalize; }
.sup-stats-rad-spor { background: var(--bg2); border-radius: 4px; height: 12px; overflow: hidden; }
.sup-stats-rad-fyll { background: #2563eb; height: 100%; border-radius: 4px; }
.sup-stats-rad-tall { font-weight: 600; color: var(--text); text-align: right; }

.sup-kanal-rad { display: flex; gap: 12px; flex-wrap: wrap; }
.sup-kanal-celle {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  min-width: 80px;
}
.sup-kanal-tall  { font-size: 22px; font-weight: 700; color: var(--text); }
.sup-kanal-label { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }

/* Event-pille på sak-kort (per arrangement) */
.sup-event-pille {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 9px;
  font-size: 10px; font-weight: 600; line-height: 1.5;
  color: #fff;
  max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .01em;
}

/* Per-event konfig-form */
.sup-eventkonfig-form { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.sup-eventkonfig-knapper { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sup-eventkonf-slett { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fecaca !important; }
.sup-eventkonf-slett:hover { background: #fee2e2 !important; }
.sup-radio-rad {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px;
}
.sup-radio-rad label {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; color: var(--text);
}

/* Hurtig-godkjenn: lyn-knapp på sak-kort */
.sup-kb-hurtig-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; padding: 0;
  border: 1px solid #fde68a; background: #fef3c7; border-radius: 6px;
  font-size: 14px; cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.sup-kb-hurtig-btn:hover {
  background: #fcd34d; transform: scale(1.05);
}
.sup-kb-hurtig-btn:active { transform: scale(0.95); }

/* Hurtig-godkjenn bottom-sheet */
.sup-hurtig-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(0, 0, 0, 0); backdrop-filter: blur(0);
  display: flex; align-items: flex-end; justify-content: center;
  transition: background 0.18s;
}
.sup-hurtig-overlay.aapen {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.sup-hurtig-sheet {
  width: 100%; max-width: 560px;
  background: var(--bg); border-radius: 16px 16px 0 0;
  padding: 20px 18px 22px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.2s cubic-bezier(.2,.7,.3,1);
}
.sup-hurtig-overlay.aapen .sup-hurtig-sheet { transform: translateY(0); }
@media (min-width: 600px) {
  .sup-hurtig-overlay { align-items: center; }
  .sup-hurtig-sheet { border-radius: 16px; }
}
.sup-hurtig-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 10px;
}
.sup-hurtig-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.sup-hurtig-emne { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.sup-hurtig-utkast {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; line-height: 1.5;
  color: var(--text); white-space: pre-wrap;
  max-height: 50vh; overflow-y: auto; margin-bottom: 14px;
}
.sup-hurtig-laster { padding: 32px; text-align: center; color: var(--text-muted); }
.sup-hurtig-knapper {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.sup-hurtig-btn-pri, .sup-hurtig-btn-sek {
  padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; flex: 1; min-width: 100px; border: none;
}
.sup-hurtig-btn-pri {
  background: #16a34a; color: #fff;
}
.sup-hurtig-btn-pri:hover { background: #15803d; }
.sup-hurtig-btn-pri:disabled { background: #9ca3af; cursor: default; }
.sup-hurtig-btn-sek {
  background: var(--bg2); color: var(--text); border: 1px solid var(--border);
}
.sup-hurtig-btn-sek:hover { background: var(--surface); }

/* Mobil-tilpasninger for support-modulen */
@media (max-width: 768px) {
  .sup-kb-brett {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82vw, 320px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .sup-kb-kolonne { scroll-snap-align: start; }
  .sup-filter-rad {
    flex-wrap: wrap;
    gap: 6px;
  }
  .sup-sok-input {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
  .sup-filter-sel {
    flex: 1;
    min-width: 0;
  }
  .sup-sak-teller { flex: 0 0 auto; }
  .sup-topbar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .sup-subtabs { flex: 1; min-width: 0; }
  .sup-subtab-btn {
    padding: 6px 10px; font-size: 12px;
  }
  .sup-topbar-actions { margin-left: 0; }
  .sup-detalj-panel {
    width: 100%;
    border-left: none;
  }
  .sup-stats-wrapper { padding: 12px; }
  .sup-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Gjennomføring-fane (mobil) ─────────────────────────────── */
.mobil-gjennomforing-skjerm {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.mobil-gjennomforing-innhold { padding: 0 0 80px; }
.mgj-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.mgj-klokke-rad {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.mgj-klokke {
  font-size: 28px; font-weight: 700; letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.mgj-oppdater-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 7px 9px; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.mgj-oppdater-btn:active { background: rgba(255,255,255,0.06); }
.mgj-dag-picker {
  display: flex; gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.mgj-dag-picker::-webkit-scrollbar { display: none; }
.mgj-dag-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 100px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted); cursor: pointer;
  font-size: 12px; font-weight: 600; line-height: 1;
  white-space: nowrap; flex-shrink: 0; text-transform: capitalize;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.mgj-dag-pill:active { background: rgba(255,255,255,0.08); }
.mgj-dag-pill.aktiv {
  background: var(--text); color: #0F172A; border-color: var(--text);
}
.mgj-dag-pill-prikk {
  width: 5px; height: 5px; border-radius: 50%;
  background: #10B981; flex-shrink: 0;
}
.mgj-dag-pill.aktiv .mgj-dag-pill-prikk { background: #10B981; }
.mgj-dag-pill-alle { font-weight: 500; }

.mgj-tom-dag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px;
  text-align: center;
}
.mgj-tom-dag-tittel { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.mgj-tom-dag-beskr { font-size: 12px; color: var(--text-muted); }

.mgj-kpi-rad {
  display: flex; align-items: center; gap: 0;
}
.mgj-kpi {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.mgj-kpi-tall { font-size: 22px; font-weight: 700; line-height: 1; }
.mgj-kpi-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; }
.mgj-kpi-sep { width: 1px; height: 32px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.mgj-seksjon { padding: 14px 16px 4px; }
.mgj-seksjon-hdr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); padding-bottom: 10px;
}
.mgj-seksjon-count {
  background: rgba(255,255,255,0.08); border-radius: 10px;
  padding: 1px 7px; font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.mgj-aktiv-kort {
  background: rgba(16,185,129,0.07); border: 1px solid rgba(16,185,129,0.2);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mgj-aktiv-kort:active { background: rgba(16,185,129,0.12); }
.mgj-aktiv-kort-topp {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.mgj-aktiv-tid { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.mgj-aktiv-status {
  font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 8px;
}
.mgj-aktiv-tittel { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.mgj-aktiv-sted {
  font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px;
  margin-bottom: 10px;
}
.mgj-aktiv-handlinger {
  display: flex; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mgj-ferdig-btn, .mgj-forsinket-btn {
  flex: 1; padding: 8px 0; border-radius: 7px; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mgj-ferdig-btn { background: rgba(16,185,129,0.15); color: #10B981; }
.mgj-ferdig-btn:active { background: rgba(16,185,129,0.25); }
.mgj-forsinket-btn { background: rgba(245,158,11,0.12); color: #F59E0B; }
.mgj-forsinket-btn:active { background: rgba(245,158,11,0.22); }
.mgj-liste-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mgj-liste-rad:active { background: rgba(255,255,255,0.03); margin: 0 -4px; padding: 10px 4px; border-radius: 4px; }
.mgj-liste-tid {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  min-width: 44px; font-variant-numeric: tabular-nums;
}
.mgj-liste-tittel { flex: 1; font-size: 14px; color: var(--text); }
.mgj-snart-badge {
  font-size: 10px; font-weight: 700; background: rgba(245,158,11,0.15);
  color: #F59E0B; border-radius: 6px; padding: 2px 6px; flex-shrink: 0;
}
.mgj-start-btn {
  background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25);
  color: #818CF8; border-radius: 7px; padding: 5px 10px; font-size: 13px;
  cursor: pointer; flex-shrink: 0; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mgj-start-btn:active { background: rgba(99,102,241,0.22); }
.mgj-ferdig-rad {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; opacity: 0.6; -webkit-tap-highlight-color: transparent;
}
.mgj-ferdig-rad:active { opacity: 0.9; }
.mgj-ferdig-ikon { font-size: 12px; color: #4ADE80; flex-shrink: 0; width: 14px; text-align: center; }
.mgj-ferdig-tid { font-size: 12px; color: var(--text-muted); min-width: 40px; font-variant-numeric: tabular-nums; }
.mgj-ferdig-tittel { font-size: 13px; color: var(--text-muted); flex: 1; }
.mgj-tom-seksjon {
  font-size: 13px; color: var(--text-muted); text-align: center; padding: 16px 0;
}
.mgj-mer-tekst {
  font-size: 12px; color: var(--text-muted); text-align: center; padding: 10px 0 4px;
}

/* ── Ny person-knapp (mobil) ────────────────────────────────── */
.mobil-person-actbar {
  padding: 8px 16px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: #1D1D1D;
  flex-shrink: 0;
}
.mobil-ny-person-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(247,27,0,0.12);
  border: 1px solid rgba(247,27,0,0.25);
  border-radius: 8px; padding: 7px 13px;
  color: var(--primary); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mobil-ny-person-btn:active { background: rgba(247,27,0,0.22); }

/* ── Send varsel-panel (mobil) ──────────────────────────────── */
.mobil-send-varsel-btn {
  background: transparent; border: none;
  font-size: 11px; font-weight: 700; color: var(--primary);
  cursor: pointer; font-family: inherit; padding: 2px 0;
  -webkit-tap-highlight-color: transparent;
}
.mobil-send-varsel-btn:active { opacity: 0.7; }
.msvp-form { padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; }
.msvp-felt { display: flex; flex-direction: column; gap: 7px; }
.msvp-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
}
.msvp-input, .msvp-textarea, .msvp-select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; color: var(--text); font-size: 15px; font-family: inherit;
  padding: 11px 13px; outline: none; width: 100%; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
.msvp-input:focus, .msvp-textarea:focus, .msvp-select:focus {
  border-color: var(--primary); background: rgba(255,255,255,0.09);
}
.msvp-textarea { resize: none; line-height: 1.5; }
.msvp-send-btn {
  background: var(--primary); color: #fff; border: none;
  border-radius: 10px; padding: 14px 0; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.msvp-send-btn:active { opacity: 0.85; }
.msvp-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Direkte kontaktkoblinger i personliste ─────────────────── */
.mobil-kontakt-link {
  display: flex; align-items: center; color: inherit;
  padding: 4px; margin: -4px; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.mobil-kontakt-link:active { background: rgba(255,255,255,0.1); color: var(--primary); }
.sup-lenke { color: #2563eb; text-decoration: underline; }

/* ============================================================
   MOBIL BURGER-MENY
   ============================================================ */

.mobil-burger-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.mobil-burger-btn:active { background: rgba(255,255,255,0.16); }

.mobil-burger-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(86vw, 340px);
  height: 100vh;
  background: #161616;
  z-index: 3001;
  box-shadow: -8px 0 40px rgba(0,0,0,0.6), -1px 0 0 rgba(255,255,255,0.07);
  transform: translateX(100%);
  transition: transform 0.30s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  padding: max(16px, env(safe-area-inset-top, 16px)) 0 max(16px, env(safe-area-inset-bottom, 16px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobil-burger-panel.aktiv { transform: translateX(0); }
.mobil-burger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}
.mobil-burger-tittel {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mobil-burger-seksjon-tittel {
  padding: 12px 22px 6px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mobil-burger-rad {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.92);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.mobil-burger-rad:active { background: rgba(255,255,255,0.06); }
.mobil-burger-ikon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}
.mobil-burger-tekst { flex: 1; min-width: 0; }
.mobil-burger-pil { color: rgba(255,255,255,0.3); flex-shrink: 0; }
.mobil-burger-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mobil-burger-status.aktiv {
  background: rgba(46,204,113,0.18);
  color: #5fd49a;
}
.mobil-burger-fare {
  margin-top: 4px;
  color: rgba(255,255,255,0.7);
}
.mobil-burger-fare .mobil-burger-ikon { color: rgba(247,27,0,0.65); }
.mobil-burger-fare:active { background: rgba(247,27,0,0.10); }

/* ============================================================
   MOBIL OPPGAVER-FANE
   ============================================================ */

/* Oppgaver-fane bruker lys palett (Google Tasks-stil) */
.mobil-oppgaver-skjerm {
  flex: 1;
  overflow: hidden;
  flex-direction: column;
  display: none;
  min-height: 0;
  background: #F1F3F4;
}
.mobil-oppgave-toolbar {
  flex-shrink: 0;
  background: #FFFFFF;
  border-bottom: 1px solid #E8EAED;
  padding-bottom: 8px;
}
.mob-opp-sok-wrap {
  position: relative;
  padding: 10px 14px 4px;
}
.mob-opp-sok-ikon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-30%);
  color: #80868B;
  pointer-events: none;
}
.mob-opp-sok-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: #F1F3F4;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #1F1F1F;
  font-size: 14px;
  box-sizing: border-box;
  font-family: inherit;
  -webkit-appearance: none;
  transition: background 0.12s, border-color 0.12s;
}
.mob-opp-sok-input::placeholder { color: #9AA0A6; }
.mob-opp-sok-input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #DADCE0;
}
.mobil-oppgave-filter-rad {
  display: flex;
  gap: 6px;
  padding: 8px 14px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobil-oppgave-filter-rad::-webkit-scrollbar { display: none; }
.mobil-oppgave-chip {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #DADCE0;
  color: #5F6368;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mobil-oppgave-chip:active { background: #F1F3F4; }
.mobil-oppgave-chip.aktiv {
  background: #E8F0FE;
  border-color: #D2E3FC;
  color: #1A73E8;
}
.mobil-oppgave-grupp-rad {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobil-oppgave-grupp-rad::-webkit-scrollbar { display: none; }
.mob-opp-grupp-label {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: #80868B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
}
.mobil-oppgave-grupp-chip {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #DADCE0;
  color: #5F6368;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mobil-oppgave-grupp-chip:active { background: #F1F3F4; }
.mobil-oppgave-grupp-chip.aktiv {
  background: #E8F0FE;
  border-color: #D2E3FC;
  color: #1A73E8;
}

/* Grupperte oppgaver — seksjonshoder */
.mob-opp-gruppe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mob-opp-gruppe-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  width: 100%;
}
.mob-opp-gruppe-chevron {
  color: #5F6368;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.mob-opp-gruppe.kollapset .mob-opp-gruppe-chevron {
  transform: rotate(-90deg);
}
.mob-opp-gruppe-navn {
  flex: 1;
  font-size: 11.5px;
  font-weight: 700;
  color: #5F6368;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-opp-gruppe-antall {
  font-size: 11px;
  font-weight: 600;
  color: #5F6368;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 999px;
  padding: 1px 8px;
  flex-shrink: 0;
}
.mob-opp-gruppe-innhold {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobil-oppgaver-innhold {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px));
  background: #F1F3F4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Card-stil rad */
.mob-opp-rad {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(60,64,67,0.04);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.mob-opp-rad:active {
  background: #F8F9FA;
  box-shadow: 0 2px 6px rgba(60,64,67,0.08);
}
.mob-opp-rad.fullfort .mob-opp-tittel {
  text-decoration: line-through;
  color: #9AA0A6;
}
.mob-opp-rad.fullfort .mob-opp-meta,
.mob-opp-rad.fullfort .mob-opp-besk { opacity: 0.65; }

/* Sjekk-sirkel — span (ikke button) for å unngå global button-padding-cascade */
.mob-opp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border: 2px solid #5F6368;
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  margin-top: 1px;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.mob-opp-check svg {
  display: block;
  width: 14px;
  height: 14px;
}
.mob-opp-check:active {
  background: #F1F3F4;
  border-color: #1F1F1F;
  transform: scale(0.90);
}
.mob-opp-check.av {
  background: #5F6368;
  border-color: #5F6368;
}
.mob-opp-check.av:active {
  background: #3C4043;
  border-color: #3C4043;
  transform: scale(0.90);
}

.mob-opp-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 8px;
}
.mob-opp-tittel {
  font-size: 13.5px;
  font-weight: 500;
  color: #1F1F1F;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.mob-opp-besk {
  font-size: 12px;
  color: #5F6368;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.mob-opp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11.5px;
  color: #5F6368;
  line-height: 1.3;
  margin-top: 1px;
}
.mob-opp-sep {
  color: #BDC1C6;
  margin: 0 2px;
}
.mob-opp-frist { color: #5F6368; }
.mob-opp-frist.forfalt { color: #D93025; font-weight: 600; }

/* Høy-prio: liten rød prikk i høyre kant */
.mob-opp-prio-flagg {
  position: absolute;
  right: 14px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D93025;
  flex-shrink: 0;
}

/* AI-punkter: mini-tag i tittelen */
.mob-opp-ai-mark {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  color: #6F42C1;
  background: #F3EBFF;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  margin-right: 7px;
  vertical-align: 2px;
  text-transform: uppercase;
}
.mob-opp-rad.ai.fullfort .mob-opp-ai-mark { opacity: 0.5; }

/* Tom-tilstand i lys oppgaveliste */
.mobil-oppgaver-innhold .mobil-tom-tilstand { color: #5F6368; }
.mobil-oppgaver-innhold .mobil-tom-tekst { color: #1F1F1F; font-weight: 500; }

/* ============================================================
   MIN DAG (cross-event) — lys, card-basert
   ============================================================ */
.mobil-mindag-skjerm {
  flex: 1;
  flex-direction: column;
  display: none;
  min-height: 0;
  background: #F1F3F4;
}
.mobil-mindag-innhold {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px));
  background: #F1F3F4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mob-mindag-event {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mob-mindag-event-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px 2px;
}
.mob-mindag-event-navn {
  font-size: 11.5px;
  font-weight: 700;
  color: #5F6368;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-mindag-event-dato {
  font-size: 11px;
  color: #80868B;
  flex-shrink: 0;
}
.mob-mindag-kort {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(60,64,67,0.04);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, box-shadow 0.15s, opacity 0.28s, transform 0.28s;
}
.mob-mindag-kort-fade {
  opacity: 0;
  transform: translateX(20px);
}

/* Sjekk-sirkel på oppgave-kort i Mitt ansvar (samme stil som .mob-opp-check) */
.mob-mindag-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-self: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border: 2px solid #5F6368;
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.mob-mindag-check svg { display: block; width: 14px; height: 14px; }
.mob-mindag-check:active {
  background: #F1F3F4;
  border-color: #1F1F1F;
  transform: scale(0.90);
}
.mob-mindag-check.av {
  background: #5F6368;
  border-color: #5F6368;
}
.mob-mindag-check.av:active {
  background: #3C4043;
  border-color: #3C4043;
  transform: scale(0.90);
}

/* Toggle-rad: Åpne / Fullførte */
.mob-mindag-toggle-rad {
  display: flex;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 4px;
  align-self: stretch;
}
.mob-mindag-toggle-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #5F6368;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s;
}
.mob-mindag-toggle-btn:active { background: rgba(0,0,0,0.04); }
.mob-mindag-toggle-btn.aktiv {
  background: #FFFFFF;
  color: #1A73E8;
  box-shadow: 0 1px 3px rgba(60,64,67,0.12);
}
.mob-mindag-kort:active {
  background: #F8F9FA;
  box-shadow: 0 2px 6px rgba(60,64,67,0.08);
}
.mob-mindag-kort.fullfort .mob-mindag-tittel {
  text-decoration: line-through;
  color: #9AA0A6;
}
.mob-mindag-tag {
  flex-shrink: 0;
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  background: #DADCE0;
}
.mob-mindag-kort[data-type="oppgave"]   .mob-mindag-tag { background: #1A73E8; }
.mob-mindag-kort[data-type="hendelse"]  .mob-mindag-tag { background: #34A853; }
.mob-mindag-kort[data-type="under"]     .mob-mindag-tag { background: #FBBC04; }
.mob-mindag-kort[data-type="ai"]        .mob-mindag-tag { background: #6F42C1; }
.mob-mindag-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mob-mindag-toppmeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #80868B;
}
.mob-mindag-typetag {
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.mob-mindag-kort[data-type="oppgave"]  .mob-mindag-typetag { background: #E8F0FE; color: #1A73E8; }
.mob-mindag-kort[data-type="hendelse"] .mob-mindag-typetag { background: #E6F4EA; color: #137333; }
.mob-mindag-kort[data-type="under"]    .mob-mindag-typetag { background: #FEF7E0; color: #B06000; }
.mob-mindag-kort[data-type="ai"]       .mob-mindag-typetag { background: #F3EBFF; color: #6F42C1; }
.mob-mindag-tittel {
  font-size: 14px;
  font-weight: 600;
  color: #1F1F1F;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.mob-mindag-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11.5px;
  color: #5F6368;
  line-height: 1.3;
  margin-top: 2px;
}
.mob-mindag-meta .sep { color: #BDC1C6; margin: 0 2px; }
.mob-mindag-frist { color: #5F6368; }
.mob-mindag-frist.forfalt { color: #D93025; font-weight: 600; }
.mob-mindag-prio-flagg {
  position: absolute;
  right: 12px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D93025;
}
.mobil-mindag-innhold .mobil-tom-tilstand { color: #5F6368; padding: 60px 24px; }
.mobil-mindag-innhold .mobil-tom-tekst { color: #1F1F1F; font-weight: 500; }
.mob-mindag-laster {
  text-align: center;
  color: #5F6368;
  padding: 40px 24px;
  font-size: 14px;
}

/* Grupper pr type (Hendelser / Underhendelser / Oppgaver / AI) — kollapsbare */
.mob-mindag-gruppe {
  display: flex;
  flex-direction: column;
}
.mob-mindag-gruppe-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 6px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.mob-mindag-gruppe-chevron {
  color: #5F6368;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.mob-mindag-gruppe.kollapset .mob-mindag-gruppe-chevron {
  transform: rotate(-90deg);
}
.mob-mindag-gruppe-tittel {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: #5F6368;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mob-mindag-gruppe-antall {
  font-size: 11.5px;
  font-weight: 700;
  color: #5F6368;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 999px;
  padding: 1px 9px;
  flex-shrink: 0;
}
.mob-mindag-gruppe[data-type="hendelser"] .mob-mindag-gruppe-antall { color: #137333; border-color: rgba(52,168,83,0.3); }
.mob-mindag-gruppe[data-type="under"] .mob-mindag-gruppe-antall     { color: #B06000; border-color: rgba(251,188,4,0.4); }
.mob-mindag-gruppe[data-type="oppgaver"] .mob-mindag-gruppe-antall  { color: #1A73E8; border-color: rgba(26,115,232,0.3); }
.mob-mindag-gruppe[data-type="ai"] .mob-mindag-gruppe-antall        { color: #6F42C1; border-color: rgba(111,66,193,0.3); }
.mob-mindag-gruppe-innhold {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.mob-mindag-gruppe.kollapset .mob-mindag-gruppe-innhold { display: none; }

/* ============================================================
   KJØREPLAN-LISTE (mobil event-fane)
   ============================================================ */
.mobil-kjoreplan-skjerm {
  flex: 1;
  flex-direction: column;
  display: none;
  min-height: 0;
  background: #F1F3F4;
}
.mobil-kjoreplan-innhold {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mob-kp-gruppe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mob-kp-gruppe-tittel {
  font-size: 11px;
  font-weight: 700;
  color: #5F6368;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 6px 4px;
}
.mob-kp-rad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.mob-kp-rad:active {
  background: #F8F9FA;
  border-color: #DADCE0;
  transform: scale(0.99);
}
.mob-kp-tid {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1A73E8;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
}
.mob-kp-tid-tom { color: #9AA0A6; }
.mob-kp-tittel {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #1F1F1F;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.mob-kp-pil {
  color: #80868B;
  flex-shrink: 0;
}
.mob-kp-laster {
  text-align: center;
  color: #5F6368;
  padding: 40px 24px;
  font-size: 14px;
}
.mobil-kjoreplan-innhold .mobil-tom-tilstand { color: #5F6368; padding: 60px 24px; }
.mobil-kjoreplan-innhold .mobil-tom-tekst { color: #1F1F1F; font-weight: 500; }

/* ============================================================
   MOBIL ORG-LANDING — egen layout med bunn-fane-meny
   ============================================================ */
.mobil-org-skjerm {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background: var(--bg);
  overflow: hidden;
}
body.mobil-org-aktiv #landing-screen {
  padding: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
  height: 100vh;
}
.mobil-org-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top, 14px)) 16px 12px;
  background: var(--bg-panel, #1D1D1D);
  border-bottom: 1px solid var(--border);
}
.mobil-org-logo-wrap {
  flex: 1;
  min-width: 0;
}
.mobil-org-tittel {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobil-org-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mobil-org-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mobil-org-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
.mobil-org-fane {
  padding: 18px 14px calc(96px + env(safe-area-inset-bottom, 0px));
}
.mobil-org-fane[hidden] { display: none !important; }
.mobil-org-h2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 4px 12px;
}
.mobil-org-tom {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 60px 24px;
  line-height: 1.5;
}

/* Event-kort */
.mobil-org-event-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobil-org-event {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--bg-panel, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.mobil-org-event:active {
  background: rgba(128,128,128,0.08);
  transform: scale(0.99);
}
.mobil-org-event-toppmeta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  flex-wrap: wrap;
}
.mobil-org-event-status {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mobil-org-event-status.kommende {
  background: rgba(59,130,246,0.16);
  color: #60A5FA;
  border: 1px solid rgba(59,130,246,0.3);
}
.mobil-org-event-status.pagaar {
  background: rgba(16,185,129,0.16);
  color: #34D399;
  border: 1px solid rgba(16,185,129,0.3);
}
.mobil-org-event-status.avsluttet {
  background: rgba(107,114,128,0.16);
  color: #9CA3AF;
  border: 1px solid rgba(107,114,128,0.3);
}
.mobil-org-event-countdown {
  color: var(--primary);
  font-weight: 700;
  font-size: 11.5px;
}
.mobil-org-event-navn {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  word-wrap: break-word;
}
.mobil-org-event-dato {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Mitt arbeid-fane: bruker eksisterende mitt-arbeid-* kort fra org-modalen */
.mobil-org-mittarbeid { padding: 0 2px; }

/* Kjøreplan-kort */
.mobil-org-kp-gruppe {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.mobil-org-kp-gruppe:last-child { margin-bottom: 0; }
.mobil-org-kp-gruppe-tittel {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 4px 2px;
}
.mobil-org-kp-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobil-org-kp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-panel, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.mobil-org-kp:active { background: rgba(128,128,128,0.1); }
.mobil-org-kp-info { flex: 1; min-width: 0; }
.mobil-org-kp-navn {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobil-org-kp-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobil-org-kp-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(128,128,128,0.18);
  color: var(--text-muted);
}
.mobil-org-kp-badge.type-event {
  background: rgba(var(--primary-rgb, 247,27,0), 0.15);
  color: var(--primary);
}

/* Profil */
.mobil-org-profilkort {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px 28px;
  background: var(--bg-panel, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 16px;
}
.mobil-org-profil-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(247,27,0,0.3);
}
.mobil-org-profil-navn {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.mobil-org-profil-epost {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  word-break: break-word;
}
.mobil-org-profil-rolle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(var(--primary-rgb, 247,27,0), 0.13);
  padding: 4px 12px;
  border-radius: 999px;
  margin-top: 2px;
}
.mobil-org-profil-varsel {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(251,188,4,0.12);
  border: 1px solid rgba(251,188,4,0.3);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.mobil-org-profil-handlinger {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobil-org-profil-loggut {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mobil-org-profil-loggut:active {
  background: rgba(239,68,68,0.1);
  color: #F87171;
  border-color: rgba(239,68,68,0.3);
}

/* Bunn-nav: posisjoner i org-skjermen */
.mobil-org-skjerm .mobil-org-bunn-nav {
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

/* Midt-knapp (FAB) i bunn-nav */
.mobil-nav-fab {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: 4px solid #181818;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(247,27,0,0.45), 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s, background 0.15s;
}
.mobil-nav-fab:active {
  transform: scale(0.92);
  box-shadow: 0 3px 10px rgba(247,27,0,0.4);
}
.mobil-nav-fab-placeholder {
  flex: 0 0 56px;
}

/* Mitt ansvar-varianten har dempet bakgrunn til den er aktiv */
.mobil-nav-fab-mittansvar {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}
.mobil-nav-fab-mittansvar.aktiv {
  background: var(--primary);
  color: white;
  box-shadow: 0 6px 20px rgba(247,27,0,0.5), 0 2px 6px rgba(0,0,0,0.25);
}
.mobil-nav-fab-mittansvar:active {
  transform: scale(0.92);
}

/* Opprett-sheet (mobile) */
.mobil-org-opprett-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.22s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.mobil-org-opprett-overlay.aktiv { opacity: 1; }

.mobil-org-opprett-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-panel, #1F1F1F);
  border-radius: 22px 22px 0 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
  max-height: 75vh;
  overflow-y: auto;
}
.mobil-org-opprett-sheet.aktiv { transform: translateY(0); }

.moo-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  margin: 0 auto 6px;
  flex-shrink: 0;
}
.moo-sheet-tittel {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  letter-spacing: -0.005em;
}
.moo-type-rad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.moo-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: rgba(255,255,255,0.04);
  border: 2px solid var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.moo-type-btn:active {
  transform: scale(0.97);
}
.moo-type-btn.aktiv {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(247,27,0,0.32);
}
.moo-type-btn svg { color: inherit; }
body.light-mode .moo-type-btn { background: #F1F3F4; border-color: #E5E7EB; color: #5F6368; }

.moo-event-velg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.moo-event-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 6px 2px 0;
}
.moo-event-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 40vh;
  overflow-y: auto;
}
.moo-event-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.moo-event-rad:hover {
  background: rgba(var(--primary-rgb, 247,27,0), 0.06);
  border-color: rgba(var(--primary-rgb, 247,27,0), 0.3);
}
.moo-event-rad:active {
  background: rgba(var(--primary-rgb, 247,27,0), 0.16);
  border-color: var(--primary);
  transform: scale(0.98);
}
.moo-event-info { flex: 1; min-width: 0; }
.moo-event-navn {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moo-event-dato {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.moo-event-mangler {
  color: #F59E0B;
  font-style: italic;
}
.moo-event-rad.uten-datoer .moo-event-navn { opacity: 0.85; }
.moo-event-rad svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb, 247,27,0), 0.12);
  color: var(--primary);
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.moo-event-rad:active svg {
  background: var(--primary);
  color: #FFFFFF;
  transform: translateX(2px);
}
.moo-event-tom {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 8px;
  font-size: 13px;
}

/* Lyst tema */
body.light-mode .mobil-org-opprett-sheet { background: #FFFFFF; }
body.light-mode .moo-sheet-handle        { background: rgba(0,0,0,0.18); }
body.light-mode .moo-event-rad           { background: #F8F9FA; }
body.light-mode .moo-event-rad:hover     { background: #FFF5F5; }

/* ── Synlighetsvelger på oppgaver — desktop og mobil ── */
.of-synl-rad {
  display: flex;
  gap: 6px;
}
.of-synl-btn {
  flex: 0 0 auto;
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.of-synl-btn:hover { background: rgba(128,128,128,0.07); }
.of-synl-btn.aktiv {
  background: rgba(var(--primary-rgb, 247,27,0), 0.13);
  border-color: rgba(var(--primary-rgb, 247,27,0), 0.4);
  color: var(--primary);
}

.mop-synl-rad {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.mop-synl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  background: #FFFFFF;
  border: 1.5px solid #E8EAED;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mop-synl-btn:active { background: #F1F3F4; }
.mop-synl-btn.aktiv {
  background: rgba(26,115,232,0.08);
  border-color: #1A73E8;
}
.mop-synl-tittel {
  font-size: 13px;
  font-weight: 700;
  color: #1F1F1F;
}
.mop-synl-btn.aktiv .mop-synl-tittel { color: #1A73E8; }
.mop-synl-beskr {
  font-size: 10.5px;
  color: #5F6368;
  text-align: center;
  line-height: 1.25;
}

/* Synlighetsikon på oppgavekort */
.mob-opp-synl-ikon,
.opp-synl-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  vertical-align: 1px;
  color: #80868B;
  flex-shrink: 0;
}
.mob-opp-synl-ikon[data-synl="privat"],
.opp-synl-ikon[data-synl="privat"] { color: #D93025; }
.mob-opp-synl-ikon[data-synl="sektor"],
.opp-synl-ikon[data-synl="sektor"] { color: #B06000; }

/* Lyst tema-tilpasning */
body.light-mode .mobil-org-event,
body.light-mode .mobil-org-kp,
body.light-mode .mobil-org-profilkort {
  background: #FFFFFF;
}
body.light-mode .mobil-org-event:active,
body.light-mode .mobil-org-kp:active {
  background: #F3F4F6;
}
body.light-mode .mobil-org-header {
  background: var(--bg-panel, #FFFFFF);
}

/* ============================================================
   OPPGAVE-SKJEMA (slide-in) — lys, card-basert
   ============================================================ */
#mobil-oppgave-panel {
  background: #F1F3F4 !important;
}
#mobil-oppgave-panel .mpd-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E8EAED;
  color: #1F1F1F;
}
#mobil-oppgave-panel .mpd-header-tittel { color: #1F1F1F; }
#mobil-oppgave-panel .mobil-tilbake-btn {
  background: #FFFFFF;
  border-color: #E8EAED;
  color: #1F1F1F;
}
#mobil-oppgave-panel .mobil-tilbake-btn:active { background: #F1F3F4; }

#mobil-oppgave-panel .mpd-innhold {
  background: #F1F3F4;
}
#mobil-oppgave-panel .msvp-form {
  padding: 14px 12px calc(20px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
}
#mobil-oppgave-panel .msvp-felt {
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  padding: 12px 14px;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(60,64,67,0.04);
}
#mobil-oppgave-panel .msvp-rad {
  display: flex;
  gap: 10px;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
#mobil-oppgave-panel .msvp-rad .msvp-felt {
  flex: 1;
  min-width: 0;
}
#mobil-oppgave-panel .msvp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5F6368;
}
#mobil-oppgave-panel .msvp-input,
#mobil-oppgave-panel .msvp-textarea,
#mobil-oppgave-panel .msvp-select {
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 8px;
  color: #1F1F1F;
  font-size: 15px;
  padding: 10px 12px;
}
#mobil-oppgave-panel .msvp-input:focus,
#mobil-oppgave-panel .msvp-textarea:focus,
#mobil-oppgave-panel .msvp-select:focus {
  border-color: #1A73E8;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}
#mobil-oppgave-panel .msvp-input::placeholder,
#mobil-oppgave-panel .msvp-textarea::placeholder { color: #9AA0A6; }
#mobil-oppgave-panel .mobil-oppgave-ansv-rad {
  background: #FFFFFF;
  padding: 4px 0;
  max-height: 220px;
}
#mobil-oppgave-panel .mobil-oppgave-ansv-chip {
  background: #F1F3F4;
  border-color: #DADCE0;
  color: #1F1F1F;
}
#mobil-oppgave-panel .mobil-oppgave-ansv-chip:active { background: #E8EAED; }
#mobil-oppgave-panel .mobil-oppgave-ansv-chip.valgt {
  background: #E8F0FE;
  border-color: #1A73E8;
  color: #1A73E8;
}
#mobil-oppgave-panel .msvp-send-btn {
  background: #1A73E8;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 14px 0;
  font-weight: 600;
  font-size: 15px;
  margin-top: 4px;
  box-shadow: 0 1px 3px rgba(60,64,67,0.10);
}
#mobil-oppgave-panel .msvp-send-btn:active { background: #1765C5; }

/* Søkefelt over ansv-chips */
.mop-ansv-sok-wrap {
  position: relative;
  margin-bottom: 8px;
}
.mop-ansv-sok-ikon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #80868B;
  pointer-events: none;
}
.mop-ansv-sok-input {
  width: 100%;
  padding: 9px 12px 9px 33px;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 8px;
  color: #1F1F1F;
  font-size: 13.5px;
  box-sizing: border-box;
  font-family: inherit;
  -webkit-appearance: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.mop-ansv-sok-input::placeholder { color: #9AA0A6; }
.mop-ansv-sok-input:focus {
  outline: none;
  border-color: #1A73E8;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}

/* Ansv-chips i oppgave-skjema */
.mobil-oppgave-ansv-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
}
.mobil-oppgave-ansv-chip.selv {
  border-style: dashed;
}
.chip.selv {
  border-style: dashed;
}
.mobil-oppgave-ansv-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mobil-oppgave-ansv-chip:active { background: rgba(255,255,255,0.10); }
.mobil-oppgave-ansv-chip.valgt {
  background: rgba(247,27,0,0.18);
  border-color: rgba(247,27,0,0.5);
  color: white;
}

/* msvp-rad: 2 felt side-om-side i oppgave-skjema */
.msvp-rad { display: flex; gap: 10px; }
.msvp-rad .msvp-felt { min-width: 0; }

/* ── Velkomst-coachmark for nye brukere ──────────────────────────────── */
.velkomst-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 10, 16, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: velkomst-fade-inn 0.18s ease-out;
}
@keyframes velkomst-fade-inn { from { opacity: 0; } to { opacity: 1; } }
.velkomst-modal {
  background: var(--surface, #fff);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px 22px;
  max-width: 460px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: velkomst-pop-inn 0.22s ease-out;
  box-sizing: border-box;
}
@keyframes velkomst-pop-inn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.velkomst-hilsen {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.velkomst-tittel {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.2;
}
.velkomst-ingress {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.velkomst-ingress strong { color: var(--text); font-weight: 700; }
.velkomst-punkter {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
}
.velkomst-punkt {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.45; color: var(--text);
}
.velkomst-punkt strong { font-weight: 700; }
.velkomst-prikk {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.velkomst-tips {
  font-size: 12.5px;
  color: var(--text-muted);
  background: rgba(128,128,128,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.velkomst-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--primary, #6c63ff);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s, transform 0.06s;
}
.velkomst-btn:hover { filter: brightness(1.08); }
.velkomst-btn:active { transform: scale(0.985); }

/* ── PWA install bunnstripe ───────────────────────────────────────────── */
.pwa-stripe {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 9500;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(20, 22, 30, 0.96);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: pwa-slide-inn 0.28s cubic-bezier(.2,.7,.3,1);
}
@keyframes pwa-slide-inn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwa-stripe-ikon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(108, 99, 255, 0.18);
  color: #B8B0FF;
  border-radius: 9px;
}
.pwa-stripe-tekst { flex: 1; min-width: 0; }
.pwa-stripe-tittel {
  font-size: 14px; font-weight: 700; line-height: 1.25;
  color: #fff;
}
.pwa-stripe-undertekst {
  font-size: 12px; line-height: 1.35;
  color: rgba(255,255,255,0.62);
  margin-top: 2px;
}
.pwa-stripe-handlinger { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pwa-stripe-btn-primær {
  padding: 8px 14px;
  background: #6c63ff; color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.pwa-stripe-btn-primær:active { transform: scale(0.97); }
.pwa-stripe-btn-avvis {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: none; border-radius: 8px;
  font-size: 18px; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
}

.pwa-ios-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10001;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  animation: velkomst-fade-inn 0.18s ease-out;
}
.pwa-ios-modal {
  background: var(--surface, #fff);
  color: var(--text);
  width: 100%;
  max-width: 480px;
  border-radius: 18px 18px 0 0;
  padding: 22px 22px 28px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
  position: relative;
  animation: pwa-slide-inn 0.28s cubic-bezier(.2,.7,.3,1);
  box-sizing: border-box;
}
.pwa-ios-lukk {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px;
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; cursor: pointer; font-family: inherit;
  line-height: 1; padding: 0;
}
.pwa-ios-tittel {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0 0 14px;
}
.pwa-ios-steg {
  margin: 0 0 16px; padding-left: 22px;
  font-size: 14px; color: var(--text); line-height: 1.55;
}
.pwa-ios-steg li { margin-bottom: 8px; }
.pwa-ios-ikon {
  display: inline-block;
  background: rgba(108, 99, 255, 0.14);
  color: var(--primary, #6c63ff);
  padding: 1px 7px; border-radius: 5px;
  font-size: 13px; font-weight: 700;
}
.pwa-ios-info {
  font-size: 12.5px; color: var(--text-muted);
  background: rgba(128,128,128,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.pwa-ios-ok {
  width: 100%;
  padding: 12px 16px;
  background: var(--primary, #6c63ff);
  color: #fff;
  border: none; border-radius: 8px;
  font-size: 14.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.pwa-ios-ok:active { transform: scale(0.985); }

/* ============================================================
   MOBIL HJEM-SKJERM (event-home redesign)
   ============================================================ */

.mobil-hjem-skjerm {
  --el-cream:    #FFF2E9;
  --el-cream-2:  #F0E5DC;
  --el-paper:    #FFFFFF;
  --el-ink:      #1D1D1D;
  --el-ink-2:    #2A2A2A;
  --el-ink-3:    #3A3A3A;
  --el-muted:    #7A6E68;
  --el-line:     #E5D8CF;
  --el-line-2:   #C8B8AD;
  --el-red:      #F71B00;
  --el-red-dark: #CC1500;
  --el-red-soft: rgba(247, 27, 0, 0.12);
  --el-amber:    #FBBF24;
  --el-emerald:  #10B981;
  --el-blue:     #3B82F6;
  --el-purple:   #8B5CF6;

  display: none;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--el-cream);
  color: var(--el-ink);
  padding: 14px 18px calc(110px + env(safe-area-inset-bottom, 0px));
  position: relative;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  box-sizing: border-box;
}
.mobil-hjem-skjerm > * { flex-shrink: 0; }

/* Når Hjem-fanen er aktiv, skjul den mørke topp-headeren slik at vi kan
   tegne vår egen lyse header. */
body.mobil-hjem-aktiv .mobil-header,
body.mobil-mitt-aktiv .mobil-header { display: none !important; }

/* ── HEADER (avatar + org/event + bell) ───────────────────── */
.mob-hjem-topp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 18px;
}
.mob-hjem-avatar {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--el-ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(29,29,29,0.12);
}
.mob-hjem-tittel-blokk {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.mob-hjem-org {
  font-size: 11px;
  font-weight: 600;
  color: var(--el-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-hjem-event {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--el-ink);
  letter-spacing: 0.04em;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-hjem-bjelle {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--el-line);
  background: var(--el-paper);
  color: var(--el-ink-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.mob-hjem-bjelle:active { transform: scale(0.94); }
.mob-hjem-bjelle-badge {
  position: absolute;
  top: -5px; right: -5px;
  background: var(--el-red);
  color: #fff;
  border: 2px solid var(--el-cream);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── HERO: doors-open countdown + KPI grid ─────────────────── */
.mob-hjem-hero {
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 22px;
  padding: 18px 18px 6px;
  box-shadow: 0 14px 32px -16px rgba(58,42,28,0.18);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.mob-hjem-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 100% 0%, rgba(247,27,0,0.06), transparent 60%);
  pointer-events: none;
}
.mob-hjem-hero-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--el-muted);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  position: relative;
}
.mob-hjem-hero-tall-rad {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  position: relative;
}
.mob-hjem-hero-tall {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--el-ink);
  line-height: 0.95;
}
.mob-hjem-hero-tall-suffix {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--el-ink-3);
  letter-spacing: 0.06em;
  padding-bottom: 4px;
}
.mob-hjem-hero-undertittel {
  font-size: 13px;
  color: var(--el-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  margin-top: 4px;
}

.mob-hjem-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 14px 0 6px;
  border-top: 1px solid var(--el-line);
  position: relative;
}
.mob-hjem-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.mob-hjem-kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--el-muted);
  text-transform: uppercase;
}
.mob-hjem-kpi-bar {
  width: 100%;
  height: 5px;
  background: var(--el-cream-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.mob-hjem-kpi-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--el-ink);
  border-radius: inherit;
  transition: width 0.4s cubic-bezier(.5,.1,.2,1);
}
.mob-hjem-kpi-bar-fill[data-tone="warn"]   { background: var(--el-amber); }
.mob-hjem-kpi-bar-fill[data-tone="danger"] { background: var(--el-red); }
.mob-hjem-kpi-bar-fill[data-tone="ok"]     { background: var(--el-emerald); }
.mob-hjem-kpi-tall {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.03em;
  color: var(--el-ink);
  line-height: 1;
}
.mob-hjem-kpi-tall span {
  font-size: 12px;
  color: var(--el-muted);
  margin-left: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

/* ── Quick add bar ───────────────────────────────────────── */
.mob-hjem-quick {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--el-ink);
  color: #fff;
  border-radius: 16px;
  padding: 10px 10px 10px 14px;
  margin-bottom: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}
.mob-hjem-quick:active { transform: scale(0.98); }
.mob-hjem-quick-pluss {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.mob-hjem-quick-tekst {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  line-height: 1.15;
  gap: 2px;
}
.mob-hjem-quick-tittel {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.mob-hjem-quick-undertittel {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}
.mob-hjem-quick-start {
  background: var(--el-red);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.mob-hjem-quick-start:active { background: var(--el-red-dark); }

/* ── Section header (FORFALLER / MINE HENDELSER) ──────────── */
.mob-hjem-seksjon { margin-bottom: 22px; }
.mob-hjem-seksjon-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 4px;
}
.mob-hjem-seksjon-tittel {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--el-ink-2);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.mob-hjem-seksjon-pille {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  background: var(--el-cream-2);
  color: var(--el-ink-3);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.mob-hjem-seksjon-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--el-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 6px;
  -webkit-tap-highlight-color: transparent;
}
.mob-hjem-seksjon-link:active { color: var(--el-ink); }

/* ── Forfaller-task card ─────────────────────────────────── */
.mob-hjem-task {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, transform 0.1s;
}
.mob-hjem-task:active { transform: scale(0.985); }
.mob-hjem-task-prikk {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--el-amber);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(251,191,36,0.18);
}
.mob-hjem-task-prikk[data-tone="forfalt"] {
  background: var(--el-red);
  box-shadow: 0 0 0 4px var(--el-red-soft);
}
.mob-hjem-task-prikk[data-tone="ok"] {
  background: var(--el-emerald);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.16);
}
.mob-hjem-task-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mob-hjem-task-tittel {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-ink);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-hjem-task-meta {
  font-size: 11.5px;
  color: var(--el-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-hjem-task-dag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--el-ink-2);
  background: var(--el-cream-2);
  padding: 4px 8px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.mob-hjem-task-dag[data-tone="forfalt"] {
  background: var(--el-red-soft);
  color: var(--el-red-dark);
}

/* ── Mine hendelser card ─────────────────────────────────── */
.mob-hjem-hendelse {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  padding: 12px 12px 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, transform 0.1s;
}
.mob-hjem-hendelse:active { transform: scale(0.99); }
.mob-hjem-hendelse-dato {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 56px;
  padding-right: 12px;
  border-right: 1px solid var(--el-line);
  flex-shrink: 0;
}
.mob-hjem-hendelse-dato-dag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--el-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mob-hjem-hendelse-dato-tid {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--el-ink);
  letter-spacing: 0.03em;
  line-height: 1;
}
.mob-hjem-hendelse-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mob-hjem-hendelse-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mob-hjem-hendelse-chip {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  background: var(--el-cream-2);
  color: var(--el-ink-3);
}
.mob-hjem-hendelse-chip[data-tone="kladd"]    { background: rgba(122,110,104,0.14); color: var(--el-muted); }
.mob-hjem-hendelse-chip[data-tone="hovedakt"] { background: rgba(247,27,0,0.12);    color: var(--el-red-dark); }
.mob-hjem-hendelse-chip[data-tone="ny"]       { background: rgba(16,185,129,0.16);  color: #047857; }
.mob-hjem-hendelse-tittel {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-ink);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-hjem-hendelse-meta {
  font-size: 11.5px;
  color: var(--el-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-hjem-hendelse-pil {
  color: var(--el-muted);
  flex-shrink: 0;
}

/* ── Tom-tilstand for Hjem-seksjoner ──────────────────────── */
.mob-hjem-tom {
  background: var(--el-paper);
  border: 1px dashed var(--el-line-2);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--el-muted);
}

/* ── Loader for Hjem ─────────────────────────────────────── */
.mob-hjem-laster {
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  font-size: 13px;
  color: var(--el-muted);
}

/* ── FAB-styling spesifikt for Hjem (cream-vennlig) ────────── */
body.mobil-hjem-aktiv .mobil-fab {
  background: var(--el-red, #F71B00);
  box-shadow: 0 14px 28px -10px rgba(247,27,0,0.45), 0 4px 10px rgba(0,0,0,0.08);
}

/* Smale skjermer (≤360 px): krymp KPI-tall litt */
@media (max-width: 360px) {
  .mob-hjem-hero-tall { font-size: 56px; }
  .mob-hjem-kpi-tall  { font-size: 19px; }
  .mob-hjem-kpi-grid  { gap: 8px; }
}

/* ============================================================
   MOBIL MITT ANSVAR (frivillig perspektiv)
   ============================================================ */

.mobil-mindag-skjerm {
  --el-cream:    #FFF2E9;
  --el-cream-2:  #F0E5DC;
  --el-paper:    #FFFFFF;
  --el-ink:      #1D1D1D;
  --el-ink-2:    #2A2A2A;
  --el-ink-3:    #3A3A3A;
  --el-muted:    #7A6E68;
  --el-line:     #E5D8CF;
  --el-line-2:   #C8B8AD;
  --el-red:      #F71B00;
  --el-red-dark: #CC1500;
  --el-red-soft: rgba(247, 27, 0, 0.12);
  --el-amber:    #FBBF24;
  --el-emerald:  #10B981;

  background: var(--el-cream);
  color: var(--el-ink);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
.mobil-mindag-skjerm .mobil-mindag-innhold {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px calc(110px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  background: var(--el-cream);
}

/* Header */
.mob-mitt-topp {
  padding: 6px 0 6px;
  margin-bottom: 14px;
}
.mob-mitt-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--el-muted);
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 6px;
}
.mob-mitt-stortittel {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--el-ink);
}

/* Pill-toggle */
.mob-mitt-toggle-rad {
  display: flex;
  gap: 8px;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 16px;
  padding: 5px;
  margin-bottom: 14px;
}
.mob-mitt-pill {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--el-muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.mob-mitt-pill.aktiv {
  background: var(--el-ink);
  color: #fff;
}
.mob-mitt-pill-antall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 20px;
  border-radius: 999px;
  background: var(--el-cream-2);
  color: var(--el-ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mob-mitt-pill.aktiv .mob-mitt-pill-antall {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

/* Quick add */
.mob-mitt-quick {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--el-paper);
  border: 1px dashed var(--el-line-2);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.mob-mitt-quick:active { background: var(--el-cream-2); }
.mob-mitt-quick-pluss {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--el-red-soft);
  color: var(--el-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mob-mitt-quick-tekst {
  flex: 1;
  color: var(--el-muted);
  font-size: 13.5px;
  font-weight: 500;
}

/* Section */
.mob-mitt-seksjon { margin-top: 14px; }
.mob-mitt-seksjon:first-of-type { margin-top: 6px; }
.mob-mitt-seksjon-tittel {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 4px 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--el-ink-2);
  text-transform: uppercase;
}
.mob-mitt-seksjon-antall {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--el-muted);
}
.mob-mitt-seksjon-innhold {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Kort */
.mob-mitt-rad {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, opacity 0.2s, background 0.2s;
}
.mob-mitt-rad:active { transform: scale(0.985); }
.mob-mitt-fade { opacity: 0; transform: scale(0.97); }

.mob-mitt-rad-ferdig { background: var(--el-cream-2); border-color: transparent; }
.mob-mitt-rad-ferdig .mob-mitt-tittel { color: var(--el-muted); text-decoration: line-through; text-decoration-color: rgba(122,110,104,0.4); }
.mob-mitt-rad-ferdig .mob-mitt-meta   { color: var(--el-muted); }

/* Avkrysningssirkel */
.mob-mitt-check {
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 1.8px solid var(--el-line-2);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mob-mitt-check:hover { border-color: var(--el-ink-3); }
.mob-mitt-check.av {
  background: var(--el-ink);
  border-color: var(--el-ink);
  color: #fff;
}
.mob-mitt-check svg { width: 14px; height: 14px; }

/* Hendelse-ikon (alternativ til check) */
.mob-mitt-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--el-cream-2);
  color: var(--el-ink-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.mob-mitt-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mob-mitt-tittel {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-ink);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-mitt-meta {
  font-size: 11.5px;
  color: var(--el-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Dato-pille */
.mob-mitt-pille-dag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--el-cream-2);
  color: var(--el-ink-2);
  padding: 4px 8px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  text-transform: capitalize;
}
.mob-mitt-pille-dag[data-tone="forfalt"] { background: var(--el-red-soft); color: var(--el-red-dark); text-transform: uppercase; }
.mob-mitt-pille-dag[data-tone="idag"]    { background: rgba(251,191,36,0.18); color: #92400e; text-transform: uppercase; }
.mob-mitt-pille-dag[data-tone="ferdig"]  { background: rgba(122,110,104,0.16); color: var(--el-muted); }

/* Tom tilstand */
.mob-mitt-tom {
  background: var(--el-paper);
  border: 1px dashed var(--el-line-2);
  border-radius: 14px;
  padding: 22px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--el-muted);
  margin-top: 8px;
}

/* Loader */
.mob-mitt-laster {
  padding: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--el-muted);
}

/* FAB-styling spesifikt for Mitt-ansvar (cream-vennlig) */
body.mobil-mitt-aktiv .mobil-fab {
  background: var(--el-red, #F71B00);
  box-shadow: 0 14px 28px -10px rgba(247,27,0,0.45), 0 4px 10px rgba(0,0,0,0.08);
}

@media (max-width: 360px) {
  .mob-mitt-stortittel { font-size: 56px; }
  .mob-mitt-pill { padding: 9px 10px; font-size: 13px; }
}

/* ============================================================
   MOBIL SKJEMA-SHEET (Ny hendelse / Ny oppgave)
   Brukes av #mobil-oppgave-panel og #eventModal når mobil-stilet
   ============================================================ */

.mobil-skjema-sheet,
body.mobil-event-modal-aktiv #eventModal {
  --el-cream:    #FFF2E9;
  --el-cream-2:  #F0E5DC;
  --el-paper:    #FFFFFF;
  --el-ink:      #1D1D1D;
  --el-ink-2:    #2A2A2A;
  --el-ink-3:    #3A3A3A;
  --el-muted:    #7A6E68;
  --el-line:     #E5D8CF;
  --el-line-2:   #C8B8AD;
  --el-red:      #F71B00;
  --el-red-dark: #CC1500;
  --el-red-soft: rgba(247, 27, 0, 0.12);
  --el-amber:    #FBBF24;
  --el-emerald:  #10B981;
  --el-blue:     #3B82F6;
}

.mobil-skjema-sheet {
  background: var(--el-cream);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  color: var(--el-ink);
}

/* Header (sticky topbar) */
.mob-skjema-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--el-cream);
  padding: max(12px, env(safe-area-inset-top, 12px)) 14px 10px;
  border-bottom: 1px solid var(--el-line);
  z-index: 5;
}
.mob-skjema-back,
.mob-skjema-slett {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--el-line);
  background: var(--el-paper);
  color: var(--el-ink-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mob-skjema-back:active,
.mob-skjema-slett:active { background: var(--el-cream-2); }
.mob-skjema-slett { color: var(--el-red); }

.mob-skjema-tittel-blokk {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.mob-skjema-tittel {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--el-ink);
}
.mob-skjema-undertittel {
  font-size: 11px;
  color: var(--el-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.mob-skjema-lagre {
  background: var(--el-red);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.mob-skjema-lagre:active { background: var(--el-red-dark); transform: scale(0.96); }
.mob-skjema-lagre:disabled { opacity: 0.6; }

/* Innhold */
.mob-skjema-innhold {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(40px + env(safe-area-inset-bottom, 0px));
  background: var(--el-cream);
}
.mob-skj { display: flex; flex-direction: column; gap: 14px; }

/* Seksjon (uppercase label + content) */
.mob-skj-seksjon {
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  padding: 12px 14px;
}
.mob-skj-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--el-muted);
  margin-bottom: 8px;
}

/* Tittel-input (stort, ramme-løst) */
.mob-skj-tittel-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--el-ink);
  letter-spacing: -0.005em;
  padding: 4px 0;
  outline: none;
}
.mob-skj-tittel-input::placeholder { color: var(--el-line-2); font-weight: 500; }

/* Vanlige inputs */
.mob-skj-input,
.mob-skj-select,
.mob-skj-textarea {
  width: 100%;
  border: 1px solid var(--el-line);
  background: var(--el-cream);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--el-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.mob-skj-input:focus,
.mob-skj-select:focus,
.mob-skj-textarea:focus { border-color: var(--el-ink-3); background: #fff; }
.mob-skj-textarea { resize: vertical; min-height: 76px; line-height: 1.45; }
.mob-skj-select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A6E68' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

/* Skjult input som likevel finnes i DOM (for save-handler) */
.mob-skj-skjult-input { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
/* Synlig dato-input når brukeren har klikket "Velg dato" */
.mob-skj-input-synlig {
  position: static !important;
  left: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--el-line);
  background: var(--el-cream);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--el-ink);
}

/* Chip-rad */
.mob-skj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mob-skj-chip {
  background: var(--el-cream);
  border: 1px solid var(--el-line);
  color: var(--el-ink-2);
  padding: 8px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.mob-skj-chip:active { transform: scale(0.96); }
.mob-skj-chip.aktiv {
  background: var(--el-ink);
  border-color: var(--el-ink);
  color: #fff;
}

/* "Flere innstillinger" details */
.mob-skj-detaljer {
  border: 1px dashed var(--el-line-2);
  border-radius: 14px;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.mob-skj-detaljer summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--el-muted);
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
}
.mob-skj-detaljer summary::-webkit-details-marker { display: none; }
.mob-skj-detaljer summary::after {
  content: '▾';
  float: right;
  font-size: 11px;
  opacity: 0.7;
  transition: transform 0.15s;
}
.mob-skj-detaljer[open] summary::after { transform: rotate(180deg); }
.mob-skj-detaljer .mob-skj-seksjon {
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--el-line);
  background: var(--el-paper);
}

/* Re-skin den eksisterende synlighet/ansvarlig-raden inni nytt panel */
.mobil-skjema-sheet .mop-synl-rad {
  display: flex; flex-direction: column; gap: 8px;
}
.mobil-skjema-sheet .mop-synl-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--el-cream); border: 1px solid var(--el-line);
  border-radius: 12px; padding: 10px 14px;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobil-skjema-sheet .mop-synl-btn.aktiv {
  background: var(--el-ink); border-color: var(--el-ink); color: #fff;
}
.mobil-skjema-sheet .mop-synl-btn .mop-synl-tittel {
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
}
.mobil-skjema-sheet .mop-synl-btn .mop-synl-beskr {
  font-size: 11px; opacity: 0.75;
}
.mobil-skjema-sheet .mobil-oppgave-ansv-rad { display: flex; flex-wrap: wrap; gap: 6px; }
.mobil-skjema-sheet .mobil-oppgave-ansv-chip {
  background: var(--el-cream); border: 1px solid var(--el-line);
  color: var(--el-ink-2); padding: 6px 10px; border-radius: 999px;
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobil-skjema-sheet .mobil-oppgave-ansv-chip.valgt {
  background: var(--el-ink); border-color: var(--el-ink); color: #fff;
}
.mobil-skjema-sheet .mop-ansv-sok-wrap {
  position: relative;
  display: flex; align-items: center;
  background: var(--el-cream); border: 1px solid var(--el-line);
  border-radius: 10px; padding: 0 10px;
}
.mobil-skjema-sheet .mop-ansv-sok-ikon { color: var(--el-muted); flex-shrink: 0; }
.mobil-skjema-sheet .mop-ansv-sok-input {
  flex: 1; border: none; background: transparent;
  padding: 9px 10px; font-family: inherit; font-size: 13px;
  outline: none; color: var(--el-ink);
}

/* ============================================================
   NY HENDELSE — re-skin desktop #eventModal til mobile sheet
   Aktivert via body.mobil-event-modal-aktiv
   ============================================================ */

body.mobil-event-modal-aktiv #eventModal {
  position: fixed;
  inset: 0;
  display: flex !important;
  align-items: stretch;
  justify-content: stretch;
  background: var(--el-cream);
  padding: 0 !important;
  z-index: 9000;
  overflow: hidden;
}
body.mobil-event-modal-aktiv #eventModal .modal-content {
  background: var(--el-cream);
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none !important;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  color: var(--el-ink);
  box-sizing: border-box;
  animation: none !important;
}
/* Hindre at noen child-element tvinger horisontal overflow */
body.mobil-event-modal-aktiv #eventModal,
body.mobil-event-modal-aktiv #eventModal * { box-sizing: border-box; }
body.mobil-event-modal-aktiv #eventModal .modal-content,
body.mobil-event-modal-aktiv #eventModal .form-grid {
  overflow-x: hidden;
}

/* Header */
body.mobil-event-modal-aktiv #eventModal .event-modal-hd {
  position: sticky;
  top: 0;
  background: var(--el-cream);
  padding: max(12px, env(safe-area-inset-top, 12px)) 14px 10px;
  border-bottom: 1px solid var(--el-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 5;
}
body.mobil-event-modal-aktiv #eventModal .modal-header {
  flex: 1;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--el-ink);
  text-transform: uppercase;
  margin: 0;
  text-align: left;
  padding-left: 4px;
}
body.mobil-event-modal-aktiv #eventModal .event-modal-lukk {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--el-line);
  background: var(--el-paper);
  color: var(--el-ink-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
body.mobil-event-modal-aktiv #eventModal .event-modal-lukk:hover { background: var(--el-cream-2); }

/* Sticky save bar (laget med ::after på footer-row, men vi lar den ekte vises) */
body.mobil-event-modal-aktiv #eventModal .mal-footer-row {
  position: sticky;
  bottom: 0;
  background: var(--el-cream);
  border-top: 1px solid var(--el-line);
  padding: 10px 14px max(10px, env(safe-area-inset-bottom, 10px));
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  z-index: 5;
}
body.mobil-event-modal-aktiv #eventModal .mal-footer-row .btn-cancel,
body.mobil-event-modal-aktiv #eventModal .mal-footer-row .btn-sekundær {
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  color: var(--el-ink-2);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
body.mobil-event-modal-aktiv #eventModal .mal-footer-row > div[style*='flex:1'] { display: none; }
body.mobil-event-modal-aktiv #eventModal #bruk-mal-btn,
body.mobil-event-modal-aktiv #eventModal .mal-footer-row > button:not(.btn-save):not(.btn-cancel) { display: none !important; }
body.mobil-event-modal-aktiv #eventModal .btn-save {
  flex: 1;
  background: var(--el-red);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
body.mobil-event-modal-aktiv #eventModal .btn-save:active { background: var(--el-red-dark); }

/* Skjema-grid → kolonne */
body.mobil-event-modal-aktiv #eventModal .form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  background: var(--el-cream);
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.mobil-event-modal-aktiv #eventModal > .modal-content > .form-group:first-of-type {
  padding: 12px 16px 0;
}
body.mobil-event-modal-aktiv #eventModal .form-group {
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
body.mobil-event-modal-aktiv #eventModal .form-group.full-width { width: 100%; grid-column: auto !important; }
body.mobil-event-modal-aktiv #eventModal .inline-opprett-boks,
body.mobil-event-modal-aktiv #eventModal .inline-opprett-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
body.mobil-event-modal-aktiv #eventModal .inline-felt { width: 100%; min-width: 0; }
body.mobil-event-modal-aktiv #eventModal .inline-opprett-knapper {
  display: flex; gap: 8px; flex-wrap: wrap;
}
body.mobil-event-modal-aktiv #eventModal .form-group label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--el-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.mobil-event-modal-aktiv #eventModal .form-group input[type="text"],
body.mobil-event-modal-aktiv #eventModal .form-group input[type="url"],
body.mobil-event-modal-aktiv #eventModal .form-group input[type="email"],
body.mobil-event-modal-aktiv #eventModal .form-group input[type="tel"],
body.mobil-event-modal-aktiv #eventModal .form-group input[type="datetime-local"],
body.mobil-event-modal-aktiv #eventModal .form-group input[type="date"],
body.mobil-event-modal-aktiv #eventModal .form-group select,
body.mobil-event-modal-aktiv #eventModal .form-group textarea {
  width: 100%;
  border: 1px solid var(--el-line);
  background: var(--el-cream);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--el-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
body.mobil-event-modal-aktiv #eventModal .form-group input:focus,
body.mobil-event-modal-aktiv #eventModal .form-group select:focus,
body.mobil-event-modal-aktiv #eventModal .form-group textarea:focus {
  border-color: var(--el-ink-3);
  background: #fff;
}
body.mobil-event-modal-aktiv #eventModal .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A6E68' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
body.mobil-event-modal-aktiv #eventModal .label-hint {
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--el-line-2);
  text-transform: none;
  font-weight: 500;
  margin-left: 4px;
}
body.mobil-event-modal-aktiv #eventModal .ny-form-pluss-btn {
  background: var(--el-cream-2);
  border: none;
  color: var(--el-ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  margin-left: auto;
  cursor: pointer;
}
body.mobil-event-modal-aktiv #eventModal .chip-select {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0;
}
body.mobil-event-modal-aktiv #eventModal .chip-select > * {
  background: var(--el-cream); border: 1px solid var(--el-line);
  color: var(--el-ink-2); padding: 6px 10px; border-radius: 999px;
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
body.mobil-event-modal-aktiv #eventModal .chip-select > .valgt,
body.mobil-event-modal-aktiv #eventModal .chip-select > .aktiv {
  background: var(--el-ink); border-color: var(--el-ink); color: #fff;
}
body.mobil-event-modal-aktiv #eventModal .chip-search-wrap {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
}
body.mobil-event-modal-aktiv #eventModal .chip-sok {
  width: 100%;
  border: 1px solid var(--el-line);
  background: var(--el-cream);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
body.mobil-event-modal-aktiv #eventModal .ny-sektor-display {
  background: var(--el-cream);
  border: 1px dashed var(--el-line-2);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--el-muted);
}

/* Skjul desktop-only ting på mobil hendelse-modal */
body.mobil-event-modal-aktiv #eventModal #mal-velger,
body.mobil-event-modal-aktiv #eventModal #slett-mal-btn,
body.mobil-event-modal-aktiv #eventModal #ny-id { display: none !important; }

/* Hindre at body skroller bak panel */
body.mobil-event-modal-aktiv { overflow: hidden; }

/* ============================================================
   MOBIL PROGRAM-SKJERM (Hendelser-tab redesign)
   ============================================================ */

body.mobil-program-aktiv .mobil-header { display: none !important; }

.mobil-program-skjerm {
  --el-cream:    #FFF2E9;
  --el-cream-2:  #F0E5DC;
  --el-paper:    #FFFFFF;
  --el-ink:      #1D1D1D;
  --el-ink-2:    #2A2A2A;
  --el-ink-3:    #3A3A3A;
  --el-muted:    #7A6E68;
  --el-line:     #E5D8CF;
  --el-line-2:   #C8B8AD;
  --el-red:      #F71B00;
  --el-red-dark: #CC1500;
  --el-red-soft: rgba(247, 27, 0, 0.12);
  --el-amber:    #FBBF24;
  --el-emerald:  #10B981;
  --el-blue:     #3B82F6;

  background: var(--el-cream);
  color: var(--el-ink);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  padding: 14px 18px calc(110px + env(safe-area-inset-bottom, 0px));
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Topp: eyebrow + tittel + actions */
.mob-prog-topp {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0 12px;
}
.mob-prog-tittel-blokk { flex: 1; min-width: 0; }
.mob-prog-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--el-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-prog-stortittel {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--el-ink);
}
.mob-prog-action {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--el-line);
  background: var(--el-paper);
  color: var(--el-ink-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
  position: relative;
}
.mob-prog-action:active { transform: scale(0.94); }
.mob-prog-action.aktiv { background: var(--el-ink); color: #fff; border-color: var(--el-ink); }
.mob-prog-action-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--el-red);
  color: #fff;
  border: 2px solid var(--el-cream);
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  font-size: 9.5px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  font-family: 'JetBrains Mono', monospace;
}

/* Søke-rad (toggle-bar) */
.mob-prog-sok {
  display: flex;
  align-items: center;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 12px;
  padding: 0 12px;
  margin-bottom: 12px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.18s, opacity 0.18s, margin 0.18s, padding 0.18s;
}
.mob-prog-sok.aapen { max-height: 56px; opacity: 1; padding: 0 12px; }
.mob-prog-sok-ikon { color: var(--el-muted); flex-shrink: 0; }
.mob-prog-sok-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  padding: 11px 8px;
  outline: none;
  color: var(--el-ink);
  width: 100%;
}

/* Dag-tabs row (uppercase weekday + dato · count) */
.mob-prog-dagtabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  margin: 0 -18px 12px;
  padding-left: 18px;
  padding-right: 18px;
  scroll-padding: 0 18px;
}
.mob-prog-dagtabs::-webkit-scrollbar { display: none; }
.mob-prog-dagtab {
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 12px;
  padding: 8px 12px 7px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  min-width: 64px;
}
.mob-prog-dagtab:active { transform: scale(0.97); }
.mob-prog-dagtab-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--el-muted);
}
.mob-prog-dagtab-tall {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--el-ink);
  line-height: 1;
}
.mob-prog-dagtab.aktiv {
  background: var(--el-ink);
  border-color: var(--el-ink);
}
.mob-prog-dagtab.aktiv .mob-prog-dagtab-label { color: rgba(255,255,255,0.65); }
.mob-prog-dagtab.aktiv .mob-prog-dagtab-tall  { color: #fff; }

/* Filter-chips */
.mob-prog-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -18px 14px;
  padding: 2px 18px 4px;
  scroll-padding: 0 18px;
}
.mob-prog-chips::-webkit-scrollbar { display: none; }
.mob-prog-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  color: var(--el-ink-2);
  padding: 6px 11px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.mob-prog-chip:active { transform: scale(0.96); }
.mob-prog-chip.aktiv {
  background: var(--el-ink);
  border-color: var(--el-ink);
  color: #fff;
}
.mob-prog-chip-tall {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--el-cream-2);
  color: var(--el-ink-3);
  border-radius: 999px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}
.mob-prog-chip.aktiv .mob-prog-chip-tall {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

/* Dag-divider mellom hendelser */
.mob-prog-dag-divider {
  margin: 14px 4px 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 0.16em;
  color: var(--el-ink-2);
  text-transform: uppercase;
}
.mob-prog-dag-divider:first-child { margin-top: 4px; }

/* Hendelse-rad (timeline-style) */
.mob-prog-rad {
  display: flex;
  gap: 10px;
  background: var(--el-paper);
  border: 1px solid var(--el-line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.mob-prog-rad:active { transform: scale(0.99); }
.mob-prog-rad.ferdig {
  background: var(--el-cream-2);
  border-color: transparent;
}
.mob-prog-rad.ferdig .mob-prog-rad-tittel { color: var(--el-muted); }
.mob-prog-rad.min {
  border-color: var(--el-red);
  box-shadow: 0 0 0 3px var(--el-red-soft);
}
.mob-prog-rad.pagaar {
  border-color: var(--el-emerald);
}

.mob-prog-rad-tid {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--el-ink);
  line-height: 1;
  min-width: 46px;
  flex-shrink: 0;
  padding-top: 4px;
}
.mob-prog-rad.ferdig .mob-prog-rad-tid { color: var(--el-muted); }

.mob-prog-rad-strip {
  width: 3px;
  border-radius: 3px;
  background: var(--el-line);
  align-self: stretch;
  flex-shrink: 0;
}

.mob-prog-rad-innhold {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mob-prog-rad-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 1px;
}
.mob-prog-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--el-cream-2);
  color: var(--el-ink-3);
}
.mob-prog-pill[data-tone="pagaar"]   { background: rgba(16,185,129,0.18); color: #047857; }
.mob-prog-pill[data-tone="snart"]    { background: rgba(251,191,36,0.20); color: #92400e; }
.mob-prog-pill[data-tone="forsinket"]{ background: var(--el-red-soft);    color: var(--el-red-dark); }
.mob-prog-pill[data-tone="ferdig"]   { background: rgba(122,110,104,0.16); color: var(--el-muted); }
.mob-prog-pill[data-tone="min"]      { background: var(--el-red); color: #fff; }
.mob-prog-pill[data-tone="kat"]      { background: rgba(251,191,36,0.20); color: #92400e; }
.mob-prog-pill-prikk {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  margin-right: 1px;
}

.mob-prog-rad-tittel {
  font-size: 15px;
  font-weight: 600;
  color: var(--el-ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mob-prog-rad-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11.5px;
  color: var(--el-muted);
}
.mob-prog-rad-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mob-prog-rad-meta svg { width: 11px; height: 11px; }

/* Tom-tilstand */
.mob-prog-tom {
  background: var(--el-paper);
  border: 1px dashed var(--el-line-2);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--el-muted);
  margin-top: 10px;
}
.mob-prog-tom button {
  margin-top: 10px;
  background: var(--el-ink);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* FAB i program — cream-vennlig (rød) */
body.mobil-program-aktiv .mobil-fab {
  background: var(--el-red, #F71B00);
  box-shadow: 0 14px 28px -10px rgba(247,27,0,0.45), 0 4px 10px rgba(0,0,0,0.08);
}

@media (max-width: 360px) {
  .mob-prog-stortittel { font-size: 40px; }
  .mob-prog-rad-tid { font-size: 16px; min-width: 42px; }
}