/* Permission editor mode: controls stay visible without changing the normal UI. */
.permission-hidden { display: none !important; }

body[data-permission-edit-mode="true"] .permission-editable-target {
  position: relative !important;
}

body[data-permission-edit-mode="true"] .permission-edit-control {
  position: absolute;
  z-index: 8;
  top: 6px;
  right: 7px;
  width: 25px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: rgba(15,23,42,.78);
  color: #fff;
  box-shadow: 0 3px 9px rgba(15,23,42,.22);
  font: 700 13px/1 system-ui, sans-serif;
  cursor: pointer;
}

/* Some legacy navigation/card rules style every direct child span and would
   otherwise turn this overlay back into a normal flex/grid item. */
body[data-permission-edit-mode="true"] .permission-editable-target > .permission-edit-control {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform: none;
}

body[data-permission-edit-mode="true"] .permission-edit-control:hover,
body[data-permission-edit-mode="true"] .permission-edit-control:focus-visible {
  background: #111827;
  transform: scale(1.08);
  outline: 2px solid rgba(91,124,250,.42);
}

body[data-permission-edit-mode="true"] .permission-mode-exit {
  cursor: pointer;
  outline: 2px solid rgba(91,124,250,.25);
  outline-offset: -2px;
}

body[data-permission-edit-mode="true"] .creator-permission-exit {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(15,23,42,.82);
  color: #fff;
  font: 800 12px/1 system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(15,23,42,.18);
}

.permission-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(5px);
}

.permission-editor-modal[hidden] { display: none !important; }

.permission-editor-card {
  width: min(460px, 94vw);
  max-height: min(90vh, 620px);
  overflow: auto;
  padding: 25px;
  border: 1px solid #e1e6ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,23,42,.25);
}

.permission-editor-card h2 { margin: 0 34px 8px 0; font-size: 24px; }
.permission-editor-card p { margin: 0 0 18px; color: #697487; line-height: 1.55; }
.permission-editor-key {
  margin: 0 0 16px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border-radius: 12px;
  background: #f4f6fa;
  color: #526075;
  font: 700 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.permission-editor-field { display: grid; gap: 7px; font-weight: 800; }
.permission-editor-field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d9dfe8;
  border-radius: 11px;
  background: #fff;
  font: inherit;
}
.permission-editor-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.permission-editor-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 50%;
  background: #f1f3f7;
  color: #647083;
  font-size: 24px;
  cursor: pointer;
}
.permission-editor-card { position: relative; }
.permission-editor-status { min-height: 1.4em; margin-top: 12px; color: #287d58; font-weight: 700; }
.permission-editor-status.error { color: #b23545; }

@media (max-width: 600px) {
  .permission-editor-modal { align-items: end; padding: 10px; }
  .permission-editor-card { width: 100%; padding: 22px 17px; border-radius: 22px 22px 14px 14px; }
  body[data-permission-edit-mode="true"] .permission-editable-target > .permission-edit-control { top: 3px !important; right: 3px !important; width: 23px; height: 23px; min-height: 23px; font-size: 12px; }
}