:root { --modal-z: 1000; }

.modal {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: auto; z-index: var(--modal-z);
}

/* Glassy backdrop */
.modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, #000 55%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Kortet – glassmorphism */
.modal-card {
  position: relative;
  /*width: min(640px, 92vw);*/
  max-height: 80vh;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Seksjoner */
.modal-header {
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-body   { padding: var(--sp-4); overflow: auto; }
.modal-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); display:flex; gap: var(--sp-2); justify-content: flex-end; }

/* Knapper */
.modal .btn { padding: 8px 12px; border-radius: var(--r-1); border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.modal .btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.modal .btn.danger  { background: var(--danger, #b33); color: #fff; border-color: transparent; }

.modal-close { background: none; border: none; font-size: 1.2em; cursor: pointer; line-height: 1; padding: 0; color: inherit; }

/* Tabs i modal (for fremtidig bruk) */
.modal-tabs { display:flex; gap:6px; padding: var(--sp-2) var(--sp-4); border-bottom:1px solid var(--border); }
.modal-tab { border:1px solid var(--border); background: var(--surface); padding:6px 10px; border-radius: var(--r-1); cursor:pointer; }
.modal-tab.active { background: var(--accent-weak, color-mix(in oklab, var(--accent) 12%, var(--surface))); }

/* Feilmelding + “loading” state */
.modal-error { margin: 8px var(--sp-4); padding: 8px 10px; border:1px solid var(--danger-border, #b33); background: var(--danger-bg, #fee); border-radius: var(--r-1); color: var(--danger-fg, #700); }
.modal-footer.modal-loading { opacity:.7; pointer-events:none; }

/* Responsiv + animasjon */
@media (max-width: 480px) { .modal-card { width: 94vw; } }

@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-card { animation: modal-in 150ms ease-out; }

/* Variant: litt bredere for “Edit parti” */
.modal--wide .modal-card { width: min(840px, 96vw); }

/* (valgfritt) lås bakgrunnsrulling når modal er åpen */
html.has-modal, body.has-modal { overflow: hidden; }