/* ============================================================
   Database permissions — locks + access control modal.
   Scoped to .dbperm-*. Reuses css/style.css design tokens so both
   light and dark themes read correctly (tokens flip via
   html[data-theme="dark"]; prefers-color-scheme is honored as a
   fallback below). Reuses roles.js controls (.role-select /
   .role-pill) — their CSS lives in roles.css; not touched here.
   ============================================================ */

/* ------------------------------ overlay ------------------------------ */
.dbperm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1170;
  background: rgba(8, 9, 22, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 11vh 20px 20px;
}

.dbperm-card {
  width: 480px;
  max-width: 100%;
  background: var(--bg-modal, #fff);
  color: var(--text, #1f2335);
  border: 1px solid var(--border, #e7e8f1);
  border-radius: var(--radius-pane, 14px);
  box-shadow: var(--shadow-pane, 0 10px 40px rgba(8, 9, 22, 0.35));
  overflow: hidden;
  outline: none;
  animation: dbperm-in 0.13s ease;
}
@keyframes dbperm-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
}
@media (prefers-reduced-motion: reduce) {
  .dbperm-card { animation: none; }
}

/* ------------------------------- header ------------------------------ */
.dbperm-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 14px 14px 18px;
  border-bottom: 1px solid var(--border, #e7e8f1);
}
.dbperm-head-icon {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.dbperm-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-display, sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbperm-title-tag {
  font-family: var(--font, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-faint, #989db6);
  flex: 0 0 auto;
}
.dbperm-close {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-ctl, 8px);
  font-size: 13px;
  color: var(--text-light, #676d89);
  transition: background 0.12s, color 0.12s;
}
.dbperm-close:hover {
  background: var(--bg-hover, rgba(35, 39, 74, 0.055));
  color: var(--text, #1f2335);
}

/* -------------------------------- body ------------------------------- */
.dbperm-body {
  padding: 4px 18px 18px;
  max-height: min(72vh, 660px);
  overflow-y: auto;
}

.dbperm-section {
  padding: 14px 0;
}
.dbperm-section + .dbperm-section {
  border-top: 1px solid var(--border, #e7e8f1);
}
.dbperm-section-title {
  font-family: var(--font-display, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint, #989db6);
  margin-bottom: 10px;
}

/* ---------------------------- lock toggles --------------------------- */
.dbperm-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.dbperm-toggle {
  flex: 1;
  min-width: 0;
}
.dbperm-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #1f2335);
}
.dbperm-toggle-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-faint, #989db6);
  margin-top: 2px;
}

/* "(included in view-only)" — hidden unless the schema row is implied */
.dbperm-schema-hint {
  color: var(--text-faint, #989db6);
  font-weight: 500;
  font-size: 12.5px;
  display: none;
}
.dbperm-implied .dbperm-schema-hint { display: inline; }
.dbperm-implied .dbperm-toggle-label { color: var(--text-light, #676d89); }

/* toggle switch (styled checkbox) */
.dbperm-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  margin: 0;
  border: none;
  border-radius: 11px;
  background: var(--border-strong, #d0d2e2);
  cursor: pointer;
  outline: none;
  transition: background 0.16s ease;
}
.dbperm-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(8, 9, 22, 0.3);
  transition: transform 0.16s ease;
}
.dbperm-switch:checked { background: var(--accent, #5b5bd6); }
.dbperm-switch:checked::after { transform: translateX(18px); }
.dbperm-switch:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5b5bd6) 30%, transparent);
}
.dbperm-switch:disabled {
  opacity: 0.5;
  cursor: default;
}

/* "Only the owner can change permissions." */
.dbperm-muted {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-faint, #989db6);
  margin-top: 8px;
}

/* -------------------------- add-by-email row ------------------------- */
.dbperm-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.dbperm-email {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--font, sans-serif);
  font-size: 13px;
  color: var(--text, #1f2335);
  background: var(--bg-input, #fff);
  border: 1px solid var(--border, #e7e8f1);
  border-radius: var(--radius-ctl, 8px);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.dbperm-email::placeholder { color: var(--text-faint, #989db6); }
.dbperm-email:focus {
  border-color: var(--accent, #5b5bd6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5b5bd6) 20%, transparent);
}

/* native role selects owned by this module (people-add + team rows) */
.dbperm-rolesel {
  flex: 0 0 auto;
  padding: 7px 9px;
  font-family: var(--font, sans-serif);
  font-size: 12.5px;
  color: var(--text, #1f2335);
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e7e8f1);
  border-radius: var(--radius-ctl, 8px);
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.dbperm-rolesel:hover { border-color: var(--border-strong, #d0d2e2); }
.dbperm-rolesel:focus {
  border-color: var(--accent, #5b5bd6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5b5bd6) 20%, transparent);
}
.dbperm-rolesel:disabled { opacity: 0.6; cursor: default; }
.dbperm-team-select { flex: 1 1 auto; min-width: 0; }

/* buttons */
.dbperm-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-family: var(--font, sans-serif);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text, #1f2335);
  background: var(--bg, #fff);
  border: 1px solid var(--border-strong, #d0d2e2);
  border-radius: var(--radius-ctl, 8px);
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.dbperm-btn:hover { background: var(--bg-hover, rgba(35, 39, 74, 0.055)); }
.dbperm-btn:disabled { opacity: 0.5; cursor: default; }
.dbperm-btn-primary {
  color: #fff;
  background: var(--accent, #5b5bd6);
  border-color: var(--accent, #5b5bd6);
}
.dbperm-btn-primary:hover { background: var(--accent-hover, #4a4ac8); }
.dbperm-btn-primary:disabled:hover { background: var(--accent, #5b5bd6); }

/* ------------------------------ people ------------------------------- */
.dbperm-people {
  display: flex;
  flex-direction: column;
}
.dbperm-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.dbperm-person + .dbperm-person {
  border-top: 1px solid var(--border, #e7e8f1);
}
.dbperm-person-info { flex: 1; min-width: 0; }
.dbperm-person-name {
  font-size: 13.5px;
  color: var(--text, #1f2335);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dbperm-person-email {
  font-size: 12px;
  color: var(--text-faint, #989db6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* ------------------------------- teams ------------------------------- */
.dbperm-teams {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dbperm-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-ctl, 8px);
}
.dbperm-team:hover { background: var(--bg-hover, rgba(35, 39, 74, 0.055)); }
.dbperm-team-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text, #1f2335);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dbperm-teams-empty { padding: 4px 0; }

/* remove × (teams + generic) */
.dbperm-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-ctl, 8px);
  font-size: 12px;
  color: var(--text-faint, #989db6);
  transition: background 0.12s, color 0.12s;
}
.dbperm-remove:hover {
  background: var(--bg-hover, rgba(35, 39, 74, 0.055));
  color: var(--danger, #e5534b);
}

/* --------------------------- honest note ---------------------------- */
.dbperm-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e7e8f1);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-faint, #989db6);
}

/* ------------------------- responsive tweak -------------------------- */
@media (max-width: 520px) {
  .dbperm-overlay { padding: 7vh 12px 12px; }
  .dbperm-add { flex-wrap: wrap; }
  .dbperm-email { flex: 1 1 100%; }
}

/* --------------- prefers-color-scheme dark fallback ------------------ *
   The app drives dark via html[data-theme="dark"] (tokens above already
   flip). This block only supplies sane token fallbacks for a viewer whose
   OS is dark before the theme attribute is applied — it never overrides an
   explicit light theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dbperm-overlay { background: rgba(0, 0, 0, 0.55); }
  :root:not([data-theme="light"]) .dbperm-switch::after { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
}