/* ── Permissions Manager Modal ────────────────────────────────── */

.perm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.perm-overlay.visible {
  opacity: 1;
}

.perm-modal {
  background: #f4f0e3;
  border-radius: 16px;
  width: 90%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.perm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e8e2d0;
}

.perm-modal-header h2 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c3e33;
  margin: 0;
}

.perm-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #6b7d8a;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.perm-modal-close:hover {
  background: #e8e2d0;
  color: #2c3e33;
}

.perm-modal-body {
  padding: 20px 24px;
}

/* ── Tool Section ────────────────────────────────────────────── */

.perm-tool {
  background: #fff;
  border: 1px solid #e8e2d0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.perm-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.perm-tool-name {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #2c3e33;
}

.perm-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.perm-mode-label {
  font-size: 0.78rem;
  color: #6b7d8a;
}

.perm-mode-switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.perm-mode-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.perm-mode-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #9aa583;
  border-radius: 24px;
  transition: background 0.2s;
}

.perm-mode-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.perm-mode-switch input:checked + .perm-mode-slider {
  background: #c8856a;
}

.perm-mode-switch input:checked + .perm-mode-slider::before {
  transform: translateX(20px);
}

/* Grant toggles (Origins / External accounts / Light Warrior) mean the opposite
   of Restrict: checked = this group MAY use the tool. Sharing the colours above
   made "on" read as orange, i.e. the same signal Restrict uses for locked down.
   Swap them so green always means "has access" and orange always means "does
   not", whichever toggle you are looking at. */
.perm-mode-switch.perm-grant .perm-mode-slider {
  background: #c8856a;
}

.perm-mode-switch.perm-grant input:checked + .perm-mode-slider {
  background: #9aa583;
}

.perm-mode-status {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.perm-mode-status.open {
  background: #e8f5e9;
  color: #2e7d32;
}

.perm-mode-status.restricted {
  background: #fff3e0;
  color: #e65100;
}

/* ── User Pills ──────────────────────────────────────────────── */

.perm-users {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.perm-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #f4f0e3;
  border: 1px solid #e8e2d0;
  border-radius: 20px;
  font-size: 0.82rem;
  color: #333;
}

.perm-user-pill .remove-btn {
  background: none;
  border: none;
  color: #c8856a;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  line-height: 1;
}

.perm-user-pill .remove-btn:hover {
  color: #a86b52;
}

/* ── Add User ────────────────────────────────────────────────── */

.perm-add-user {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.perm-add-user select,
.perm-add-user input {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.85rem;
  padding: 6px 12px;
  border: 1px solid #e8e2d0;
  border-radius: 8px;
  background: #fff;
  color: #333;
}

.perm-add-user select {
  flex: 1;
  max-width: 280px;
}

.perm-add-user input {
  flex: 1;
  max-width: 280px;
}

.perm-add-user input::placeholder {
  color: #aaa;
}

.perm-add-btn {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.82rem;
  padding: 6px 16px;
  background: #3d5b47;
  color: #f4f0e3;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.perm-add-btn:hover {
  background: #2c3e33;
}

.perm-toggle-input {
  font-size: 0.78rem;
  color: #9aa583;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

.perm-toggle-input:hover {
  color: #7d8c6e;
}

/* ── Restricted section collapsed ────────────────────────────── */

.perm-restricted-content {
  border-top: 1px solid #e8e2d0;
  padding-top: 12px;
  margin-top: 4px;
}

.perm-no-users {
  font-size: 0.82rem;
  color: #6b7d8a;
  font-style: italic;
}

/* ── External Email Accounts Section ─────────────────────────── */

.perm-ext-section {
  border-color: #9aa583;
  background: #fdfcf8;
}

.perm-ext-help {
  font-size: 0.82rem;
  color: #6b7d8a;
  line-height: 1.5;
  margin: 0 0 12px;
}

.perm-ext-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.perm-ext-add .perm-lw-input {
  flex: 1;
}

/* ── Light Warrior Section ───────────────────────────────────── */

.perm-lw-section {
  border-top: 1px solid #e8e2d0;
  padding-top: 14px;
  margin-top: 12px;
}

.perm-lw-divider {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa583;
  margin-bottom: 10px;
}

.perm-lw-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.perm-lw-toggle-label {
  font-size: 0.88rem;
  color: #444;
}

.perm-lw-users {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.lw-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #f9f7f2;
  border: 1px solid #e8e2d0;
  border-radius: 8px;
  font-size: 0.84rem;
}

.lw-user-name {
  font-weight: 600;
  color: #2c3e33;
  flex: 1;
}

.lw-user-username {
  color: #6b7d8a;
  font-family: monospace;
  font-size: 0.82rem;
}

.lw-user-org {
  color: #9aa583;
  font-size: 0.78rem;
  font-style: italic;
}

.lw-remove-btn {
  background: none;
  border: none;
  color: #c8856a;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 4px;
  line-height: 1;
}

.lw-remove-btn:hover {
  color: #a86b52;
}

.perm-lw-add {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding: 12px;
  background: #f4f0e3;
  border: 1px solid #e8e2d0;
  border-radius: 8px;
}

.perm-lw-input {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.85rem;
  padding: 6px 12px;
  border: 1px solid #e8e2d0;
  border-radius: 8px;
  background: #fff;
  color: #333;
  width: 100%;
}

.perm-lw-input::placeholder {
  color: #aaa;
}

.perm-lw-add-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.perm-cancel-btn {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.82rem;
  padding: 6px 16px;
  background: #e8e2d0;
  color: #444;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.perm-cancel-btn:hover {
  background: #d8d0bc;
}

.perm-lw-show-add-btn {
  font-size: 0.82rem;
  padding: 5px 14px;
  background: transparent;
  color: #3d5b47;
  border: 1px solid #9aa583;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.perm-lw-show-add-btn:hover {
  background: #3d5b47;
  color: #f4f0e3;
}

/* ── Header button ───────────────────────────────────────────── */

.ch-permissions-btn {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.78rem;
  border: 1px solid rgba(244, 240, 227, 0.2);
  color: rgba(244, 240, 227, 0.5);
  background: transparent;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.ch-permissions-btn:hover {
  border-color: #9aa583;
  color: #b5c9b7;
}