/* ─────────────────────────────────────────────────────────────────────────
   Settings — editorial form controls + layout
   Keeps the monochrome paper/ink aesthetic from styles.css
   ───────────────────────────────────────────────────────────────────────── */

/* ── Padrão de tabela com scroll e cabeçalho fixo ─────────────────────── */
.table-scroll {
  border: 0.5px solid var(--hairline-strong);
  border-radius: 8px;
  overflow: hidden;
}
.table-scroll-body {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: auto;
}
.table-scroll .table {
  margin: 0;
  border-radius: 0;
  border: none;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline-strong);
  box-shadow: 0 1px 0 var(--hairline-strong);
}

/* ── Settings tabs (wider, more editorial than .tabs) ─────────────── */
.settings-nav {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border-top: 0.5px solid var(--hairline);
  border-bottom: 0.5px solid var(--hairline-strong);
  margin-bottom: 36px;
  position: sticky;
  top: 60px;
  background: var(--paper);
  z-index: 10;
}
.settings-nav button {
  position: relative;
  padding: 16px 14px 14px;
  background: transparent;
  border: 0;
  border-right: 0.5px solid var(--hairline);
  color: var(--ink-soft);
  text-align: left;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: color 0.12s, background 0.12s;
}
.settings-nav button:last-child { border-right: 0; }
.settings-nav button:hover { color: var(--ink); background: rgba(0,0,0,0.025); }
.settings-nav button[data-active="true"] { color: var(--ink); }
.settings-nav button[data-active="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.5px; height: 2px;
  background: var(--ink);
}
.settings-nav .sn-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.settings-nav .sn-name {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.settings-nav button[data-warn="true"] .sn-name::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  margin-left: 6px;
  vertical-align: 1px;
}

/* ── Settings section block ───────────────────────────────────────── */
.settings-section { margin-bottom: 56px; }
.settings-section:last-child { margin-bottom: 0; }

.settings-section-head {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  padding-bottom: 18px;
  margin-bottom: 0;
  border-bottom: 0.5px solid var(--hairline-strong);
  align-items: end;
}
.settings-section-head .ssh-l { display: flex; flex-direction: column; gap: 8px; }
.settings-section-head .ssh-l .eyebrow { margin: 0; }
.settings-section-head .ssh-l h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0;
}
.settings-section-head .ssh-l h2 em { font-style: italic; }
.settings-section-head .ssh-r {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-mute);
  max-width: 60ch;
  padding-bottom: 6px;
}
.settings-section-head .ssh-r b {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

/* ── Settings row (label + control) ───────────────────────────────── */
.settings-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  padding: 22px 0;
  border-bottom: 0.5px solid var(--hairline);
  align-items: flex-start;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row .sr-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.settings-row .sr-label b {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.settings-row .sr-label .sr-desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 36ch;
}
.settings-row .sr-label .sr-tag {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 2px 6px;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 3px;
}
.settings-row .sr-control { min-width: 0; max-width: 640px; }
.settings-row.cols-1 { grid-template-columns: 1fr; gap: 14px; }
/* Blocos largos (tabelas) usam a página inteira em vez da coluna de 640px. */
.settings-row.sr-wide .sr-control { max-width: none; }

/* Política fixa: o que antes eram toggles e campos e hoje é só leitura. Sem
   controle nenhum de propósito — a página precisa dizer a regra, não oferecer
   um jeito de mudá-la. */
.s-fixed-policy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 0.5px solid var(--hairline-strong);
  border-radius: 8px;
  overflow: hidden;
}
.s-fixed-policy > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--paper-2);
}
.s-fixed-policy > div b { font-weight: 500; font-size: 13px; color: var(--ink); }
.s-fixed-policy > div span { font-size: 12px; line-height: 1.45; color: var(--ink-soft); }

.settings-row .sr-stack {
  display: flex; flex-direction: column; gap: 10px;
}

/* ── Text input + select ───────────────────────────────────────────── */
.s-input,
.s-select select,
.s-textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-2);
  border: 0.5px solid var(--hairline-strong);
  border-radius: 6px;
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.s-textarea {
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
}
.s-input:focus,
.s-select select:focus,
.s-textarea:focus {
  border-color: var(--ink);
  background: var(--paper);
}
.s-input.mono { font-family: var(--font-mono); letter-spacing: -0.02em; }
.s-input::placeholder,
.s-textarea::placeholder { color: var(--ink-soft); }

.s-select { position: relative; }
.s-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
.s-select::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Input group — label + input inline */
.s-input-prefix {
  display: flex; align-items: center;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 6px;
  background: var(--paper-2);
  overflow: hidden;
}
.s-input-prefix .pfx {
  padding: 0 12px;
  height: 38px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-right: 0.5px solid var(--hairline-strong);
  background: rgba(0,0,0,0.04);
  white-space: nowrap;
}
[data-dark="true"] .s-input-prefix .pfx { background: rgba(255,255,255,0.04); }
.s-input-prefix .s-input {
  border: 0;
  background: transparent;
  border-radius: 0;
}
.s-input-prefix:focus-within {
  border-color: var(--ink);
  background: var(--paper);
}
.s-input-prefix .sfx {
  padding: 0 12px;
  height: 38px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  border-left: 0.5px solid var(--hairline-strong);
  white-space: nowrap;
}

.s-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.s-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.s-help {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 2px;
}
.s-help b { color: var(--ink); font-weight: 500; }

/* ── Toggle switch ───────────────────────────────────────────────── */
.s-toggle {
  position: relative;
  display: inline-flex;
  width: 38px; height: 22px;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--paper-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.16s, border-color 0.16s;
}
.s-toggle::after {
  content: "";
  position: absolute;
  left: 2px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.18s cubic-bezier(.3,.7,.4,1), background 0.16s;
}
.s-toggle[data-on="true"] {
  background: var(--ink);
  border-color: var(--ink);
}
.s-toggle[data-on="true"]::after {
  transform: translate(16px, -50%);
  background: var(--paper);
}

.s-toggle-row {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0;
}
.s-toggle-row .ttl {
  font-weight: 500;
  font-size: 13px;
}
.s-toggle-row .ttl-desc {
  font-size: 11.5px;
  color: var(--ink-soft);
  display: block;
  margin-top: 1px;
  font-weight: 400;
}

/* ── Segmented radio ───────────────────────────────────────────────── */
.s-segmented {
  display: inline-flex;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 7px;
  padding: 2px;
  background: var(--paper-2);
}
.s-segmented button {
  height: 30px;
  min-width: 70px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-ui);
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.12s, color 0.12s;
}
.s-segmented button:hover { color: var(--ink); }
.s-segmented button[data-on="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* ── Checkbox cards (for multi-channel selection, screens) ─────────── */
.s-checkcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0;
  border: 0.5px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
}
.s-checkcard {
  padding: 16px 18px 14px;
  border-right: 0.5px solid var(--hairline);
  border-bottom: 0.5px solid var(--hairline);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: background 0.12s;
}
.s-checkcard:hover { background: var(--paper-2); }
.s-checkcard[data-on="true"] {
  background: var(--ink);
  color: var(--paper);
}
.s-checkcard .cc-mark {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid var(--ink-mute);
  margin-bottom: 14px;
  display: grid; place-items: center;
  color: var(--paper);
}
.s-checkcard[data-on="true"] .cc-mark {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.s-checkcard .cc-mark svg { width: 12px; height: 12px; display: none; }
.s-checkcard[data-on="true"] .cc-mark svg { display: block; }
.s-checkcard b {
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
}
.s-checkcard span {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.s-checkcard[data-on="true"] span { color: rgba(238,237,226,0.6); }

/* ── Buttons (settings flavor) ─────────────────────────────────────── */
.s-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  border: 0.5px solid var(--hairline-strong);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.s-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.s-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.s-btn.danger { background: transparent; color: var(--signal); border-color: rgba(197,51,26,0.4); }
.s-btn.danger:hover { background: var(--signal); color: #fff; border-color: var(--signal); }
.s-btn.ghost { background: transparent; }
.s-btn.sm { height: 30px; padding: 0 12px; font-size: 11.5px; }

/* ── Avatar editor ─────────────────────────────────────────────────── */
.s-avatar-edit {
  display: flex; align-items: center; gap: 22px;
}
.s-avatar-edit .av {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 30px;
  font-weight: 400;
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.s-avatar-edit .av::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 0.5px solid rgba(238,237,226,0.3);
  border-radius: 50%;
  pointer-events: none;
}
.s-avatar-edit .av-meta { display: flex; flex-direction: column; gap: 8px; }
.s-avatar-edit .av-meta b { font-weight: 500; font-size: 13px; }
.s-avatar-edit .av-meta span { font-size: 11.5px; color: var(--ink-soft); }
.s-avatar-edit .av-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ── Trigger matrix table (notifications) ─────────────────────────── */
.s-matrix {
  width: 100%;
  border-collapse: collapse;
  border: 0.5px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
}
.s-matrix thead th {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 14px 8px;
  border-bottom: 0.5px solid var(--hairline-strong);
  background: var(--paper-2);
  width: 90px;
}
.s-matrix thead th:first-child {
  text-align: left;
  padding-left: 18px;
  width: auto;
}
.s-matrix tbody td {
  padding: 14px 8px;
  border-bottom: 0.5px solid var(--hairline);
  text-align: center;
  vertical-align: middle;
}
.s-matrix tbody td:first-child {
  text-align: left;
  padding-left: 18px;
}
.s-matrix tbody tr:last-child td { border-bottom: 0; }
.s-matrix tbody tr:hover td { background: rgba(0,0,0,0.02); }
.s-matrix .ev-name {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  display: block;
}
.s-matrix .ev-desc {
  font-size: 11px;
  color: var(--ink-soft);
  display: block;
  margin-top: 1px;
}
.s-matrix .s-check {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
  cursor: pointer;
  color: var(--paper);
  transition: background 0.12s, border-color 0.12s;
}
.s-matrix .s-check[data-on="true"] {
  background: var(--ink);
  border-color: var(--ink);
}
.s-matrix .s-check svg { width: 14px; height: 14px; display: none; }
.s-matrix .s-check[data-on="true"] svg { display: block; }

/* ── Sessions list ─────────────────────────────────────────────────── */
.s-sessions {
  border: 0.5px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
}
.s-session {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--hairline);
}
.s-session:last-child { border-bottom: 0; }
.s-session .s-icn {
  width: 28px; height: 28px;
  border-radius: 5px;
  background: var(--paper-2);
  display: grid; place-items: center;
  color: var(--ink-mute);
}
.s-session .s-meta b { font-weight: 500; font-size: 13px; display: block; }
.s-session .s-meta span {
  font-size: 11px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.s-session .s-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: right;
}
.s-session .s-when b {
  display: block;
  color: var(--ink);
  font-weight: 500;
}
.s-session[data-current="true"] .s-meta b::after {
  content: "atual";
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  vertical-align: 2px;
  font-weight: 500;
}

/* ── Team members table tweaks ─────────────────────────────────────── */
/* Sem escopo: o pill nasceu dentro de .s-roles-table, mas a lista de convites
   e o card do usuário também o usam — presa à tabela, a regra deixava esses
   dois renderizando texto cru. */
.role-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 0.5px solid var(--hairline-strong);
  background: var(--paper-2);
  color: var(--ink-mute);
}
.s-roles-table .role-pill[data-r="owner"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.s-roles-table .role-pill[data-r="admin"] { color: var(--signal); border-color: rgba(197,51,26,0.32); background: var(--signal-soft); }
.s-roles-table .role-pill[data-r="manager"] { color: var(--good); border-color: rgba(29,107,62,0.32); background: var(--good-soft); }

/* ── Danger zone ────────────────────────────────────────────────── */
.danger-zone {
  margin-top: 36px;
  border: 0.5px solid rgba(197,51,26,0.32);
  border-radius: 6px;
  background: var(--signal-soft);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}
.danger-zone .dz-l { display: flex; flex-direction: column; gap: 4px; }
.danger-zone .dz-l b {
  font-weight: 500;
  font-size: 14px;
  color: var(--signal);
  letter-spacing: -0.005em;
}
.danger-zone .dz-l span {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.45;
  max-width: 60ch;
}

/* ── Editorial sidebar (sticky table of contents on Conta) ─────── */
.settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Pulled spec-sheet badge for the page-head meta */
.settings-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 0.5px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  min-width: 320px;
}
.settings-stat .ss-cell {
  padding: 12px 16px;
  border-right: 0.5px solid var(--hairline);
}
.settings-stat .ss-cell:last-child { border-right: 0; }
.settings-stat .ss-cell .ss-lab {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.settings-stat .ss-cell .ss-val {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: -0.03em;
  margin-top: 4px;
}
.settings-stat .ss-cell .ss-val small {
  font-size: 11px;
  color: var(--ink-soft);
}

/* ── Tag input (departments, holidays, etc) ────────────────────── */
.s-tag-input {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 6px;
  background: var(--paper-2);
  min-height: 44px;
  align-items: center;
}
.s-tag-input .stag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 4px 0 10px;
  background: var(--paper);
  border: 0.5px solid var(--hairline-strong);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.s-tag-input .stag button {
  width: 18px; height: 18px;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
}
.s-tag-input .stag button:hover { background: var(--ink); color: var(--paper); }
.s-tag-input input {
  flex: 1;
  min-width: 100px;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  height: 24px;
}
.s-tag-input input::placeholder { color: var(--ink-soft); }

/* ── API token list ─────────────────────────────────────────────── */
.s-tokens { border: 0.5px solid var(--hairline); border-radius: 6px; overflow: hidden; }
.s-tokens .row {
  display: grid;
  grid-template-columns: 1fr 200px 140px auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--hairline);
}
.s-tokens .row:last-child { border-bottom: 0; }
.s-tokens .row b { font-weight: 500; font-size: 13px; display: block; }
.s-tokens .row .t-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: -0.02em;
}
.s-tokens .row .t-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}

/* ── Page-foot save bar (sticky) ───────────────────────────────── */
.save-bar {
  position: sticky;
  bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px;
  margin: 48px -40px -80px;
  background: var(--paper-2);
  border-top: 0.5px solid var(--hairline-strong);
  z-index: 5;
}
[data-density="compact"] .save-bar { margin: 36px -28px -60px; }
[data-density="spacious"] .save-bar { margin: 64px -56px -100px; }
.save-bar .sb-msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
}
.save-bar .sb-msg b {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}
.save-bar .sb-actions { margin-left: auto; display: flex; gap: 10px; }

/* Scratch behind settings hero (subtle editorial flourish) */
.settings-head-scratch { position: relative; }
.settings-head-scratch::after {
  content: "";
  position: absolute;
  right: 280px; top: -8px;
  width: 90px; height: 90px;
  background: url("../assets/scratch-3.png") no-repeat center / contain;
  opacity: 0.22;
  pointer-events: none;
  transform: rotate(12deg);
}
[data-dark="true"] .settings-head-scratch::after { filter: invert(1); }

/* Make iconbtn (gear/bell in topbar) match the rest */
.iconbtn {
  width: 32px; height: 32px;
  border-radius: 7px;
  border: 0.5px solid var(--hairline-strong);
  background: var(--paper-2);
  color: var(--ink-mute);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.iconbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.iconbtn[data-active="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── Impressão / PDF — Aba Presencial ──────────────────────────────── */
@media print {
  /* Esconde tudo que não é o conteúdo do relatório */
  .side,
  .topbar,
  .page-footer,
  .tabs,
  .filters,
  .presencial-controls,
  .no-print,
  button.iconbtn,
  button.chip,
  select { display: none !important; }

  /* Remove scroll e padding do shell */
  body { background: #fff !important; }
  .app { display: block !important; }
  .main { padding: 0 !important; overflow: visible !important; }

  .page {
    padding: 24px 32px !important;
    max-width: 100% !important;
  }

  /* Mantém cores legíveis no papel */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Evita quebras ruins dentro de cards */
  .kpi-row, .kpi, .section-head { break-inside: avoid; }
  .page-head { break-after: avoid; }

  /* Garante que listas longas de pessoas não cortem no meio */
  .person-card-print { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ajustes · componentes do backend funcional
   Estados (carregando/erro/vazio), modais, campos de formulário, toast e o
   selo "admin" das abas. Tudo herdando as variáveis do main.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Selo admin — usado nas abas, nos cards de perfil e nas linhas de tela */
.sn-admin {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  opacity: 0.7;
  padding: 1px 4px;
  border: 0.5px solid rgba(197,51,26,0.35);
  border-radius: 3px;
}

/* .s-check fora da matriz (o main tinha só a regra aninhada em .s-matrix) */
.s-check {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.s-check:hover { border-color: var(--ink-soft); }
.s-check[data-on="true"] { background: var(--ink); border-color: var(--ink); }
.s-check svg { width: 14px; height: 14px; display: none; }
.s-check[data-on="true"] svg { display: block; }
.s-check:disabled { opacity: 0.4; cursor: not-allowed; }

/* Campo somente-leitura vindo da fonte */
.s-source-field {
  height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0.5px dashed var(--hairline-strong);
  border-radius: 6px;
  color: var(--ink-mute);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: -0.005em;
}
.s-source-field .sf-sub {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Estados de tela */
.s-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 64px 24px;
  color: var(--ink-soft);
  font-size: 13px;
}
.s-state[data-kind="error"] b { color: var(--signal); font-size: 15px; font-weight: 500; }
.s-empty {
  padding: 22px 18px;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
}

/* Aviso inline (ex.: "requer aprovação do admin") */
.s-note {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--signal-soft);
  border: 0.5px solid rgba(197,51,26,0.25);
  border-radius: 6px;
  font-size: 12px;
  color: var(--signal);
}

/* Sugestões de busca (clientes, diretório) */
.s-suggest {
  margin-top: 8px;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper);
}
.s-suggest button {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: 0;
  border-bottom: 0.5px solid var(--hairline);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.s-suggest button:last-child { border-bottom: 0; }
.s-suggest button:hover:not(:disabled) { background: var(--paper-2); }
.s-suggest button:disabled { opacity: 0.42; cursor: not-allowed; }
.s-suggest button b { font-weight: 500; font-size: 13px; }
.s-suggest button span { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); font-family: var(--font-mono); }

/* Matrizes largas rolam sozinhas em vez de estourar a página */
.s-matrix-scroll { overflow-x: auto; }
.s-matrix-scroll .s-matrix { min-width: 560px; }

/* Linha de token de TV — 4 colunas em vez do grid padrão de .s-tokens */
.s-tokens .row.s-token-row {
  grid-template-columns: minmax(0,1.4fr) minmax(0,0.9fr) minmax(0,0.7fr) auto;
  align-items: center;
  gap: 14px;
}

/* Campos de formulário (modais e blocos de senha) */
.s-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.s-field .sf-lab {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.s-field .sf-hint { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }

/* Modal */
.s-modal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(15,14,12,0.42);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.s-modal {
  width: min(520px, 100%);
  max-height: min(86vh, 760px);
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 0.5px solid var(--hairline-strong);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  overflow: hidden;
}
.s-modal[data-wide="true"] { width: min(680px, 100%); }
.s-modal > header {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 0.5px solid var(--hairline);
}
.s-modal > header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.s-modal > header p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
.s-modal-body { padding: 20px 22px; overflow-y: auto; }
.s-modal > footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px;
  border-top: 0.5px solid var(--hairline);
  background: var(--paper-2);
}

/* Toast */
.s-toast {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 140;
  max-width: 380px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 12px 32px rgba(0,0,0,0.24);
  animation: s-toast-in 0.2s ease-out;
}
.s-toast[data-kind="error"] { background: var(--signal); color: #fff; }
@keyframes s-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* A searchbar da aba 06 recebe um <input> de verdade */
.settings-layout .searchbar input { font-size: 12.5px; }
/* Chips de filtro viram controle clicável */
.settings-layout .filters .chip { cursor: pointer; user-select: none; }

/* ── Aba 07 · Log de acesso ─────────────────────────────────────── */
/* Reaproveita a moldura de .s-matrix, mas a matriz é feita de colunas de
   checkbox centralizadas (90px cada) — aqui é texto corrido alinhado à
   esquerda. */
.s-log-table thead th,
.s-log-table tbody td {
  text-align: left;
  width: auto;
  padding: 11px 14px;
}
.s-log-table thead th { padding-top: 13px; padding-bottom: 13px; }
.s-log-table thead th:first-child,
.s-log-table tbody td:first-child { padding-left: 18px; }
.s-log-table thead th.num,
.s-log-table tbody td.num { text-align: right; padding-right: 18px; width: 160px; }
.s-log-table th:nth-child(1), .s-log-table td:nth-child(1) { width: 22%; }
.s-log-table th:nth-child(2), .s-log-table td:nth-child(2) { width: 24%; }
.s-log-table tbody tr:hover td { background: rgba(20, 18, 14, 0.025); }
.s-log-table .lg-who { font-weight: 500; font-size: 13px; }
/* Quem estava de fato ao teclado quando a linha acima foi gravada. Só aparece
   em evento de personificação — a coluna "Pessoa" continua sendo a identidade
   sob a qual a ação aconteceu. */
.s-log-table .lg-actor {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--signal);
}

.s-log-table .lg-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
}
.s-log-table .lg-action i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.s-log-table .lg-detail,
.s-log-table .lg-when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}
.s-log-table .lg-detail { font-size: 12px; }

/* ── Aba 05 · Biblioteca de perfis ──────────────────────────────── */
/* Quadrados lado a lado: a biblioteca inteira cabe numa olhada, e a
   configuração de cada perfil abre em popup (ProfileModal) em vez de morar em
   duas matrizes com scroll horizontal. */
.s-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.s-profile-tile {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--paper-2);
  border: 0.5px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.s-profile-tile:hover {
  background: var(--paper);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.s-profile-tile .pt-head { display: flex; align-items: center; gap: 8px; }
.s-profile-tile .pt-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0.5px solid var(--hairline-strong);
  background: var(--paper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
}
.s-profile-tile .pt-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.s-profile-tile .pt-scope {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-profile-tile .pt-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding-top: 10px;
  border-top: 0.5px dashed var(--hairline);
  font-size: 11px;
  color: var(--ink-soft);
}
.s-profile-tile .pt-foot em {
  font-style: normal;
  font-family: var(--font-mono);
  color: var(--ink-mute);
}
/* O quadrado de criar: mesma caixa, sem peso visual de um perfil real. */
.s-profile-tile.is-new {
  background: transparent;
  border-style: dashed;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--ink-soft);
}
.s-profile-tile.is-new .pt-plus { font-size: 26px; line-height: 1; }
.s-profile-tile.is-new .pt-name { color: var(--ink); }
.s-profile-tile.is-new .pt-scope { max-width: 22ch; }

/* Listas de permissão dentro do popup do perfil (capacidades e telas). */
.s-perm-list { display: flex; flex-direction: column; }
.s-perm {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 0.5px solid var(--hairline);
}
.s-perm:last-child { border-bottom: 0; }
.s-perm[data-strong="true"] { border-top: 0.5px solid var(--hairline-strong); margin-top: 6px; }
.s-perm .ev-name {
  display: block;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.s-perm .ev-desc {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.s-perm .sn-admin { margin-left: 0; }
.s-perm-group {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 14px 0 6px;
}
.s-perm-group:first-child { padding-top: 2px; }

/* ── Aba 06 · Usuários ──────────────────────────────────────────── */
/* A tabela lista só quem tem acesso ao visualizador — o resto do cadastro da
   agência entra pela busca do modal "Adicionar usuário". A linha inteira é
   clicável e abre o card em popup, e o único controle que sobrevive na tabela
   é o select de perfil (que faz stopPropagation para não abrir o card junto). */
.s-users-table tbody tr.s-user-row { cursor: pointer; }
.s-users-table tbody tr.s-user-row:hover { background: var(--paper-2); }
.s-users-table .s-noaccess { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

/* Nome e e-mail são blocos empilhados: como <b> e <span> são inline, o e-mail
   colava no fim do nome e a dupla quebrava linha junta. */
.s-users-table .who { min-width: 0; }
.s-users-table .who > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.s-users-table .who b,
.s-users-table .who span {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-users-table .who span { line-height: 1.35; }

/* Larguras fixas para o nome não ser espremido pelas colunas numéricas. */
.s-users-table th:nth-child(1), .s-users-table td:nth-child(1) { width: 32%; }
.s-users-table th:nth-child(2), .s-users-table td:nth-child(2) { width: 24%; }
.s-users-table th:nth-child(3), .s-users-table td:nth-child(3) { width: 210px; }
.s-users-table th:nth-child(4), .s-users-table td:nth-child(4),
.s-users-table th:nth-child(5), .s-users-table td:nth-child(5) { width: 90px; }

.s-access-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 0.5px solid var(--hairline);
  background: var(--paper-2);
  color: var(--ink-soft);
  white-space: nowrap;
}
.s-access-tag[data-tone="on"]   { color: var(--ink-mute); border-color: var(--hairline-strong); }
.s-access-tag[data-tone="warn"] { color: var(--signal); border-color: rgba(197,51,26,0.32); background: var(--signal-soft); }

/* ── O card do usuário (popup) ──────────────────────────────────── */
.s-card-id {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px;
  border-bottom: 0.5px solid var(--hairline);
  margin-bottom: 18px;
}
.s-card-idmeta { min-width: 0; flex: 1; }
.s-card-idmeta b {
  display: block;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 19px; letter-spacing: -0.01em;
}
.s-card-idmeta > span { display: block; font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); margin-top: 2px; }
.s-card-access { text-align: right; flex-shrink: 0; }
.s-card-access .lab {
  display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.s-card-access b { display: block; font-size: 13px; font-weight: 500; margin-top: 3px; color: var(--ink-soft); }
.s-card-access[data-on="true"] b { color: var(--good); }
.s-card-access .sub { display: block; font-size: 10.5px; color: var(--ink-soft); font-family: var(--font-mono); margin-top: 2px; }

.s-card-block { margin-bottom: 18px; }
.s-card-blockhead { margin-bottom: 10px; }
.s-card-blockhead b { display: block; font-weight: 500; font-size: 13.5px; }
.s-card-blockhead span { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.s-card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-card-sub {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.s-card-sub small { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; margin-left: 6px; }

.s-card-tabs {
  display: flex; gap: 4px;
  border-bottom: 0.5px solid var(--hairline);
  margin-bottom: 16px;
}
.s-card-tabs button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-soft);
  padding: 8px 12px; margin-bottom: -0.5px;
  border-bottom: 1.5px solid transparent;
}
.s-card-tabs button b { font-family: var(--font-mono); font-size: 11px; font-weight: 400; margin-left: 5px; opacity: 0.7; }
.s-card-tabs button[data-on="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.s-card-pane { min-height: 120px; }

.s-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.s-grant {
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  border: 0.5px solid var(--hairline); background: var(--paper-2); color: var(--ink-soft);
}
/* Ligado vs. desligado no mesmo lugar: ver o que o perfil NÃO libera é metade
   da resposta de "o que essa pessoa vê". */
.s-grant[data-on="true"]  { color: var(--ink); border-color: var(--hairline-strong); background: var(--paper); }
.s-grant[data-on="false"] { opacity: 0.45; text-decoration: line-through; }

.s-tokens .row.s-team-row {
  appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: transparent; color: inherit;
  /* A linha de equipe tem duas colunas (pessoa · departamento), não as quatro
     do token de TV que a classe .row assume. */
  grid-template-columns: 1fr 160px;
}
.s-tokens .row.s-team-row .t-when { text-align: right; }
.s-tokens .row.s-team-row .t-when b { color: var(--ink-mute); font-family: var(--font-ui); font-size: 12px; }
.s-tokens .row.s-team-row:hover { background: var(--paper-2); }
/* Seis colunas não cabem em tela estreita — rola dentro do próprio bloco em
   vez de empurrar a página inteira para o lado. */
.s-users-scroll { overflow-x: auto; }
.s-users-scroll .s-users-table { min-width: 820px; }