/* Settings (.set-*), Team members (.team-*) and Approval workflows (.appr-*) pages */

.set-wrap { flex-wrap: wrap; }
/* muted one-liner next to a page-bar title */
:is(.set-bar-note, .team-bar-note, .appr-bar-note) { min-width: 0; flex: 0 1 auto; }
@media (max-width: 640px) {
  :is(.set-bar-note, .appr-bar-note) { flex-basis: 100%; }
  /* tall wrapped page bars would cover much of a phone screen, so they scroll away */
  :is(.set-page, .team-page, .appr-page) > .page-bar { position: static; }
}

/* shared bits */
.set-secret { align-items: center; }
.set-secret-value { overflow-wrap: anywhere; word-break: break-all; user-select: all; min-width: 0; }
.set-code {
  margin: 0; padding: 10px 12px; max-width: 100%; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre; color: var(--text);
}
.set-code code { background: none; border: 0; padding: 0; word-break: normal; font-size: inherit; }
.set-url {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  word-break: normal; padding: 4px 8px; font-size: 12.5px;
}
.set-nowrap { white-space: nowrap; word-break: normal; }
.set-details > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 2px 0; }
.set-details > summary:hover { color: var(--text); }
.set-details[open] > summary { margin-bottom: 8px; }
.set-readonly { background: var(--surface-2); color: var(--text-2); }

/* card list rows (webhooks, share links, deliveries) */
.set-list { list-style: none; margin: 0; padding: 0; }
.set-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.set-item:last-child { border-bottom: 0; }
.set-item-main { flex: 1 1 260px; min-width: 0; }
.set-item-actions { gap: 6px; }
.set-deliveries .set-item { padding: 12px 0; gap: 6px; }
.set-page .btn-ghost.btn-danger-ghost, .team-page .btn-ghost.btn-danger-ghost { color: var(--danger-ink); }
.set-row-muted td { opacity: .6; }

/* workspace */
.set-logo {
  width: 48px; height: 48px; flex: none; border-radius: 12px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 17px;
  border: 1px solid var(--border);
}
.set-logo img { width: 100%; height: 100%; object-fit: cover; }
.set-logo.is-broken { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger-ink); }
.set-usage { gap: 16px 24px; }
.set-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; font-size: 13px; }
.set-features li { display: flex; align-items: center; gap: 6px; color: var(--text); }
.set-features li .icon-wrap { color: var(--success-ink); }
.set-features li.is-off { color: var(--text-3); text-decoration: line-through; }
.set-features li.is-off .icon-wrap { color: var(--text-3); }
.set-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.set-danger .card-header h2 { color: var(--danger-ink); }

/* notifications */
.set-notif-group + .set-notif-group { border-top: 1px solid var(--border); }
.set-notif-day { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 12px 16px 4px; }
.set-notif-list { list-style: none; margin: 0; padding: 0; }
.set-notif { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 16px; position: relative; }
.set-notif + .set-notif { border-top: 1px solid var(--border); }
.set-notif.is-unread { background: var(--accent-soft); }
.set-notif.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.set-notif-icon {
  width: 32px; height: 32px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.set-tone-success { color: var(--success-ink); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.set-tone-warning { color: var(--warning-ink); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
.set-tone-danger { color: var(--danger-ink); background: color-mix(in srgb, var(--danger) 11%, var(--surface)); }
.set-notif-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
}
button.set-notif-main { cursor: pointer; border-radius: 6px; }
button.set-notif-main:hover .set-notif-title { text-decoration: underline; }
.set-notif-title { font-weight: 500; overflow-wrap: anywhere; }
.set-notif.is-unread .set-notif-title { font-weight: 650; }
.set-notif-body { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.set-notif-more { padding: 8px 16px 12px; margin: 0; }

/* webhook event picker */
.set-event-all { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.set-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; transition: opacity .15s; }
.set-events.is-disabled { opacity: .5; }
.set-event-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.set-event-group > legend { width: 100%; padding: 0 0 4px; font-size: 12.5px; font-weight: 650; color: var(--text-2); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.set-event { align-items: flex-start; }
.set-event input { margin-top: 2px; }
.set-event-code { font-family: var(--mono); font-size: 12px; background: none; border: 0; padding: 0; color: var(--text); word-break: break-all; }
@media (max-width: 640px) { .set-events { grid-template-columns: minmax(0, 1fr); } }

/* share link post chooser */
.set-post-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.set-post { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--border); width: 100%; }
.set-post:last-child { border-bottom: 0; }
.set-post:hover { background: var(--hover); }
.set-post input { margin-top: 2px; }
.set-post.is-disabled { opacity: .6; cursor: not-allowed; }
.set-post-text { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }

/* profile */
.set-avatar { --size: 48px; }

/* ---------- team members ---------- */
.team-search { flex: 0 1 260px; min-width: 180px; }
.team-member { min-width: 200px; }
.team-role-select { width: auto; min-width: 130px; }
.team-role {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2);
}
.team-role-super_admin { background: var(--accent-soft); color: var(--accent-ink); }
.team-role-admin { background: color-mix(in srgb, var(--info) 13%, var(--surface)); color: color-mix(in srgb, var(--info) 75%, var(--text)); }
.team-role-approver { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: var(--warning-ink); }
.team-status { align-items: flex-start; }
.team-actions { justify-content: flex-end; }
.team-card { overflow: hidden; }
.team-row-invited td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.team-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.team-fieldset > legend { padding: 0; margin-bottom: 8px; }
.team-acct-picker { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.team-help { gap: 16px 24px; }

@media (max-width: 760px) {
  .team-search { flex: 1 1 100%; }
  .team-bar-note { flex-basis: 100%; }
  .team-table thead { display: none; }
  .team-table, .team-table tbody, .team-table tr, .team-table td { display: block; width: 100%; }
  .team-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .team-table tr:last-child { border-bottom: 0; }
  .team-table td { border: 0; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
  .team-table tr:hover td { background: none; }
  .team-table td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--text-3); flex: none; }
  .team-table td.team-cell-member { padding-bottom: 8px; }
  .team-table td.team-cell-member::before { content: none; }
  .team-table td.col-actions { width: 100%; justify-content: flex-end; padding-top: 8px; }
  .team-table .team-status { align-items: flex-end; }
  .team-member { min-width: 0; }
  .team-row-invited td { background: none; }
  .team-row-invited { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
}

/* ---------- approval workflows ---------- */
/* empty state: centred getting-started card */
.appr-empty { max-width: 860px; width: 100%; margin: 24px auto 0; padding: 36px 28px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.appr-empty-icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 4px; }
.appr-empty-title { font-size: 20px; }
.appr-empty-text { color: var(--text-2); max-width: 520px; margin: 0; }
.appr-empty-steps { list-style: none; margin: 14px 0 6px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; }
.appr-empty-step { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); min-width: 0; }
.appr-empty-step .appr-num { margin-bottom: 2px; }
.appr-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@media (max-width: 760px) {
  .appr-empty { margin-top: 0; padding: 24px 16px; }
  .appr-empty-steps { grid-template-columns: minmax(0, 1fr); }
}

/* list and builder (also defined in library.css; kept here so this area owns its styles) */
.appr-how .card-body { padding: 14px 16px; }
.appr-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.appr-how-grid p { color: var(--text-2); }
.appr-how-grid strong { color: var(--text); }
.appr-how-icon { width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 900px) { .appr-how-grid { grid-template-columns: minmax(0, 1fr); } }

.appr-list { display: flex; flex-direction: column; gap: 12px; }
.appr-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.appr-card.is-default { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.appr-name { font-size: 15px; overflow-wrap: anywhere; }
.appr-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-width: 0; }
.appr-step { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); min-width: 0; max-width: 100%; flex: 0 1 260px; }
.appr-names { overflow-wrap: anywhere; }
.appr-arrow { align-self: center; color: var(--text-3); display: inline-flex; }
.appr-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 640px) {
  .appr-flow { flex-direction: column; }
  .appr-step { flex-basis: auto; }
  .appr-arrow { transform: rotate(90deg); }
}

.appr-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.appr-level { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); min-width: 0; }
.appr-level.is-invalid { border-color: var(--danger); }
.appr-level-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.appr-level-head .appr-num { width: 26px; height: 26px; font-size: 12.5px; margin-right: 2px; }
.appr-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 6px; }
.appr-member { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; min-width: 0; transition: border-color .12s, background .12s; }
.appr-member:hover { border-color: var(--border-strong); }
.appr-member.is-on { border-color: var(--accent); background: var(--accent-soft); }
.appr-member input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.appr-member:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.check.appr-default { align-items: flex-start; }
.check.appr-default input { margin-top: 2px; }