/* ============================================================
   Artico Sales — Roles & Capabilities matrix styles

   Loaded after style.css. Lives in a separate file so the admin
   matrix can be iterated on without churning the giant main
   stylesheet. Consumed by public/js/roles.js (rendered into the
   Team → Roles section).
   ============================================================ */

/* App-picker row at the top of the Roles section. */
.roles-app-picker { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-3); }
.roles-app-btn {
  padding:6px 14px;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  border-radius:8px;
  font-size:0.85rem;
  font-weight:500;
  cursor:pointer;
  min-height:36px;
}
.roles-app-btn:hover { background:var(--color-bg); }
.roles-app-btn.active {
  background:var(--color-primary, #1B3A6B);
  border-color:var(--color-primary, #1B3A6B);
  color:#fff;
}

/* Matrix container. */
.roles-matrix-wrap {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:10px;
  overflow:hidden;
}
.roles-matrix__scroll {
  overflow-x:auto;
  max-width:100%;
}
.roles-matrix {
  border-collapse:collapse;
  width:100%;
  min-width:360px;
  font-size:0.85rem;
}
.roles-matrix th, .roles-matrix td {
  padding:8px 10px;
  text-align:left;
  border-bottom:1px solid var(--color-border);
  background:var(--color-surface);
  vertical-align:middle;
}
.roles-matrix thead th {
  background:var(--color-bg);
  font-weight:600;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--color-muted);
  position:sticky;
  top:0;
  z-index:2;
}

/* Sticky first column so the cap label stays in view when scrolling
   horizontally on small screens. */
.roles-matrix__cap {
  position:sticky;
  left:0;
  background:var(--color-surface);
  z-index:1;
  min-width:200px;
  max-width:280px;
  border-right:1px solid var(--color-border);
}
.roles-matrix thead .roles-matrix__cap--head {
  background:var(--color-bg);
  z-index:3; /* over body sticky-left */
}
.roles-matrix__cap-label { font-weight:500; color:var(--color-text); }
.roles-matrix__cap-id   { font-size:0.7rem; color:var(--color-muted); margin-top:1px; font-family:ui-monospace,Menlo,Consolas,monospace; }

/* Column headers + cells (one per editable role). */
.roles-matrix__role {
  text-align:center;
  min-width:78px;
}
.roles-matrix__role--readonly {
  color:var(--color-muted);
  font-style:italic;
}
.roles-matrix__lock { font-size:0.7rem; opacity:0.65; }

.roles-matrix__cell {
  text-align:center;
  min-width:78px;
}
.roles-matrix__cell--readonly { background:var(--color-bg); opacity:0.55; }
.roles-matrix__cell--pending  { background:rgba(27,58,107,0.06); }
.roles-matrix__check {
  width:1.1rem;
  height:1.1rem;
  accent-color:var(--color-primary, #1B3A6B);
  cursor:pointer;
}
.roles-matrix__check:disabled { cursor:not-allowed; }

/* Group header rows split the cap list into logical sections matching
   the JSON vocab's groups[].label. */
.roles-matrix__group-row { background:var(--color-bg); }
.roles-matrix__group-header {
  position:sticky;
  left:0;
  padding:0 !important;
  background:var(--color-bg);
  z-index:1;
}
.roles-matrix__group-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:9px 12px;
  background:transparent;
  border:none;
  font-size:0.85rem;
  font-weight:600;
  color:var(--color-text);
  cursor:pointer;
  text-align:left;
}
.roles-matrix__group-toggle:hover { background:rgba(27,58,107,0.04); }
.roles-matrix__group-caret { font-size:0.7rem; color:var(--color-muted); min-width:0.8em; display:inline-block; }
.roles-matrix__group-label { flex:1; }
.roles-matrix__group-count { font-size:0.75rem; color:var(--color-muted); font-weight:400; }

/* Status line under the matrix — mirrors the tab-perms-status pattern. */
.roles-status {
  min-height:1.25rem;
  padding:8px 12px;
  font-size:0.8rem;
  text-align:center;
  color:var(--color-muted);
}
.roles-status--ok      { color:var(--color-success, #22c55e); }
.roles-status--error   { color:var(--color-danger, #ef4444); }
.roles-status--pending { color:var(--color-muted); font-style:italic; }

/* Footer caption mentioning wildcard roles. */
.roles-footer-note {
  margin-top:var(--space-3);
  font-size:0.78rem;
  color:var(--color-muted);
  line-height:1.4;
}
.roles-footer-note code {
  background:var(--color-bg);
  padding:1px 6px;
  border-radius:4px;
  border:1px solid var(--color-border);
  font-size:0.75rem;
}