/* ACL UI — project cards, member rows, "add member" form row
   Designed mobile-first; ratios balanced, never let selects collapse. */

:root {
  --acl-control-h: 28px;
  --acl-font: 12px;
  --acl-pad-y: 3px;
  --acl-pad-x: 8px;
}

/* ─────────────────────────── Add-member row ─────────────────────────── */

.acl-add-row {
  display: grid;
  /* member grows, role fixed, button intrinsic.
     min-width:0 lets the long user labels truncate instead of pushing. */
  grid-template-columns: minmax(0, 1fr) 140px auto;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--janus-bg);
  border-top: 1px solid var(--janus-border);
}

.acl-add-row select,
.acl-add-row .acl-add-btn {
  height: var(--acl-control-h);
  font-size: var(--acl-font);
  padding: var(--acl-pad-y) var(--acl-pad-x);
  border-radius: 5px;
  border: 1px solid var(--janus-border);
  background: var(--janus-surface);
  color: var(--janus-text);
  /* Prevent browser default min-width on <select> with long <option> texts */
  min-width: 0;
}

.acl-add-select-member {
  /* Long labels like "👤 @very_long_username (agent)" get ellipsised */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.acl-add-select-role {
  /* Roles list is short (≤ 5), balanced fixed width. */
  width: 100%;
  cursor: pointer;
}

.acl-add-btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────── Member rows ───────────────────────────── */

.acl-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: var(--acl-font);
  border-bottom: 1px solid var(--janus-border);
}

.acl-member-row:last-child {
  border-bottom: none;
}

.acl-member-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* allow truncation */
}

.acl-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--janus-surface);
  border: 1px solid var(--janus-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.acl-member-info {
  min-width: 0;
  flex: 1;
}

.acl-member-name {
  font-weight: 600;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.acl-member-handle {
  font-size: 10px;
  color: var(--janus-muted);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.acl-member-row select,
.acl-role-select {
  height: var(--acl-control-h);
  font-size: var(--acl-font);
  padding: var(--acl-pad-y) var(--acl-pad-x);
  border-radius: 5px;
  border: 1px solid var(--janus-border);
  background: var(--janus-surface);
  color: var(--janus-text);
  min-width: 0;
  cursor: pointer;
}

.acl-member-revoke {
  height: var(--acl-control-h);
  font-size: var(--acl-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 10px;
}

/* ─────────────────────────── Responsive ────────────────────────────── */

/* Tablet: keep all 3 controls but let role shrink */
@media (max-width: 720px) {
  .acl-add-row {
    grid-template-columns: minmax(0, 1fr) 120px auto;
  }
}

/* Phone: stack vertically, full-width controls */
@media (max-width: 480px) {
  .acl-add-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .acl-add-row .acl-add-select-member,
  .acl-add-row .acl-add-select-role,
  .acl-add-row .acl-add-btn {
    width: 100%;
  }
  .acl-member-row {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }
  .acl-member-row select {
    grid-column: 1 / 2;
  }
  .acl-member-revoke {
    grid-column: 2 / 3;
  }
}

/* Card container: ensure overflow handled on narrow screens */
.acl-project-card {
  border: 1px solid var(--janus-border);
  border-left: 3px solid var(--janus-project); /* accent stripe — gives the card a clear "this is a project" anchor */
  border-radius: 8px;
  margin-bottom: 18px; /* more vertical breathing room between cards */
  background: var(--janus-card);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),                                /* crisp edge lift */
    0 4px 12px rgba(0, 0, 0, 0.20),                               /* soft drop shadow */
    0 0 0 1px rgba(0, 240, 255, 0.04);                           /* faint cyan halo matching the stripe */
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.acl-project-card:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.30),
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(0, 240, 255, 0.08);
  transform: translateY(-1px); /* subtle lift on hover, signals interactivity */
}

.acl-project-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--janus-border);
  background: var(--janus-surface);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.acl-project-title {
  font-weight: 600;
  font-size: 13px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.acl-project-counts {
  font-size: 10px;
  color: var(--janus-muted);
  flex-shrink: 0;
}

.acl-section-label {
  padding: 6px 12px;
  background: var(--janus-bg);
  font-size: 10px;
  color: var(--janus-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.acl-empty {
  padding: 14px;
  color: var(--janus-muted);
  font-size: 12px;
  text-align: center;
}

/* ───────────────────── User card (Vue "par utilisateur") ─────────── */

.acl-user-card {
  border: 1px solid var(--janus-border);
  border-left: 3px solid var(--janus-profile); /* accent stripe for user cards (purple to match --janus-profile) */
  border-radius: 8px;
  margin-bottom: 18px;
  background: var(--janus-card);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(167, 118, 228, 0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.acl-user-card:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.30),
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(167, 118, 228, 0.08);
  transform: translateY(-1px);
}

.acl-user-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--janus-border);
  background: var(--janus-surface);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.acl-user-title {
  font-weight: 600;
  font-size: 13px;
  min-width: 0;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.acl-user-handle-meta {
  font-weight: 400;
  color: var(--janus-muted);
  font-size: 11px;
}

.acl-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--janus-border);
}

.acl-user-row:last-child {
  border-bottom: none;
}

.acl-user-row-info {
  min-width: 0;
}

.acl-user-row-title {
  font-weight: 600;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.acl-user-row-meta {
  font-size: 10px;
  color: var(--janus-muted);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.acl-user-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.acl-section-label-inherit {
  color: #63b3ed;
}

/* =============================================================================
 * PATCH MODE: when we do an in-place innerHTML swap on a card, we briefly add
 * `acl-patching` to the parent view container. This kills all transitions on
 * the cards inside so the browser doesn't replay their box-shadow/transform
 * transition during the in-place mutation — which would otherwise look like
 * "all cards flicker" to the user.
 * Removed after ~2 animation frames via JS.
 * ===========================================================================*/
.acl-patching .acl-project-card,
.acl-patching .acl-user-card {
  transition: none !important;
}