/* =================================================================
   SIDEBAR -- v2
   Width: 280px. Collapsible sections with icon + label + chevron.
   Border system: each section header has border-bottom. Body has
   no extra borders -- the header's border-bottom IS the separator.
================================================================= */

/* Shell */
.sb {
  flex: none;
  width: calc(var(--sb-w) - 2px);  /* 2px is the border below */
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border-right: 2px solid var(--rule);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Each section is a semantic block */
.sb-section { flex: none; }

/* Section header -- the clickable toggle row */
.sb-hdr {
  display: flex;
  align-items: center;
  gap: var(--gap-loose);
  height: 44px;
  padding: 0 16px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--rule-soft);
}

.sb-hdr:hover .sb-icon { background: var(--tint); }
.sb-hdr:hover .sb-icon svg { color: var(--accent); }
.sb-hdr:hover .sb-title { color: var(--ink); }

/* Icon square */
.sb-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rule-faint);
  transition: background .15s;
}

.sb-icon svg {
  color: var(--mute);
  transition: color .15s;
}

/* Section title label */
.sb-title {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color .15s;
}

/* Chevron */
.sb-chevron {
  flex: none;
  color: var(--mute);
  transition: transform .2s;
}

.sb-hdr.collapsed .sb-chevron { transform: rotate(-90deg); }

/* Section body -- animated collapse */
.sb-body {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition: max-height .2s cubic-bezier(.4,0,.2,1), opacity .15s;
}

.sb-body.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Body inner padding -- applied to the inner div, not the body itself,
   so the collapse animation clips cleanly without border flicker */
.sb-pad {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-loose);
}

/* =================================================================
   FORM ELEMENTS
================================================================= */

.sb-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
}

.sb-field > label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

.sb-input {
  height: var(--ctl-lg);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  width: 100%;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}

.sb-input:focus {
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  outline: none;
}

.sb-input::placeholder { color: var(--mute); }
.sb-input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Masked field wrapper (for eye-toggle inputs) */
.sb-masked {
  position: relative;
  display: flex;
}

.sb-masked .sb-input { padding-right: 36px; }

.sb-eye {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--mute);
  cursor: pointer;
  transition: color .15s;
}

.sb-eye:hover { color: var(--accent); }

/* Inline row (e.g. select + icon button) */
.sb-row {
  display: flex;
  gap: var(--gap-tight);
  align-items: center;
}

/* =================================================================
   BUTTONS
================================================================= */

.sb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-tight);
  width: 100%;
  height: var(--ctl-lg);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 10px;
  transition: background .15s, border-color .15s, color .15s;
}

.sb-btn:hover { background: var(--rule-faint); }

.sb-btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.sb-btn-accent:hover { background: var(--accent-deep); }

.sb-btn-danger { color: var(--bad); border-color: var(--bad); }
.sb-btn-danger:hover { background: var(--bad-tint); }

/* Square icon-only button */
.sb-icon-btn {
  flex: none;
  width: var(--ctl-lg);
  height: var(--ctl-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--mute);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.sb-icon-btn:hover { color: var(--ink); border-color: var(--ink); }

/* =================================================================
   AUTH STATUS
================================================================= */

.sb-auth-status {
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--mute);
}

/* =================================================================
   DEVICE TABS
================================================================= */

.sb-tab-strip {
  display: flex;
  border-bottom: 1px solid var(--rule);
}

.sb-tab {
  flex: 1;
  height: var(--ctl-lg);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.sb-tab.active {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.sb-no-sim {
  font-size: 11px;
  color: var(--bad);
  font-weight: 600;
}

/* Delete device text link */
.sb-delete-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: var(--mute);
  cursor: pointer;
  text-align: left;
  transition: color .15s;
}

.sb-delete-link:hover { color: var(--bad); }

/* Add SIM inline form */
.sb-sim-add {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
}

/* Operator pair toggle */
.sb-op-pair {
  display: flex;
}

.sb-op-btn {
  flex: 1;
  height: var(--ctl-lg);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}

.sb-op-btn:nth-child(2) { margin-left: -1px; }

.sb-op-btn.active {
  background: var(--ink);
  color: var(--inv);
  border-color: var(--ink);
}

.sb-op-btn:hover:not(.active) { background: var(--rule-faint); color: var(--ink); }

.sb-slot-btn {
  flex: 1;
  height: var(--ctl-lg);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}

.sb-slot-btn:nth-child(2) { margin-left: -1px; }

.sb-slot-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.sb-slot-btn:hover:not(.active):not([disabled]) { background: var(--rule-faint); color: var(--ink); }

.sb-slot-btn[disabled] { cursor: not-allowed; }

/* Token copy result */
.sb-token-warn {
  font-size: 11px;
  font-weight: 600;
  color: var(--bad);
  line-height: 1.4;
}

/* =================================================================
   GET STARTED STEPS
================================================================= */

.sb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sb-step {
  display: flex;
  align-items: center;
  gap: var(--gap-loose);
  height: var(--ctl-lg);
  border-bottom: 1px solid var(--rule-faint);
}

.sb-step:last-child { border-bottom: none; }

.sb-step-num {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  border: 1px solid var(--rule);
  color: var(--mute);
}

.sb-step-lbl {
  flex: 1;
  font-size: 13px;
  color: var(--mute);
}

.sb-step-state {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* =================================================================
   SIM CARDS
   Compact card rows: status dot + operator badge + MSISDN + slot + delete
================================================================= */

.sb-pills {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sb-sim-card {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  height: var(--ctl-md);
  padding: 0 5px 0 7px;
  border: 1px solid var(--rule-soft);
  background: var(--surface);
  transition: border-color .15s;
}

.sb-sim-card:hover { border-color: var(--rule); }
.sb-sim-card-inactive { opacity: 0.45; }

.sb-sim-status-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute);
  opacity: .4;
}

.sb-sim-status-dot.sb-sim-status-ok {
  background: var(--ok, #22c55e);
  opacity: 1;
}

.sb-sim-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctl-sm);
  padding: 0 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sb-sim-msisdn {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-sim-slot-tag {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}

.sb-sim-del {
  flex: none;
  width: var(--ctl-sm);
  height: var(--ctl-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: transparent;
  cursor: pointer;
  transition: color .15s;
  padding: 0;
}

.sb-sim-card:hover .sb-sim-del { color: var(--mute); }
.sb-sim-del:hover { color: var(--bad) !important; }

.sb-sim-empty {
  font-size: 11px;
  color: var(--mute);
  padding: 6px 0;
}

/* =================================================================
   DEVICE ACTION ROW
================================================================= */

.sb-device-actions {
  display: flex;
  gap: var(--gap-tight);
}

.sb-btn-sm {
  height: var(--ctl-lg);
  font-size: 11px;
  padding: 0 8px;
  gap: var(--gap-tight);
}

/* =================================================================
   ADD SIM FORM
================================================================= */

.sb-sim-add-hdr {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

.sb-sim-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.sb-add-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sb-add-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
}


/* =================================================================
   WEGO VERIFIED TOGGLE
================================================================= */

.wego-toggle {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  height: var(--ctl-lg);
  padding: 0 10px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  transition: border-color .15s, background .15s;
}

.wego-toggle-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background .15s;
}

.wego-toggle-on {
  border-color: var(--ok);
}

.wego-toggle-on .wego-toggle-dot {
  background: var(--ok);
}

.wego-toggle-on .wego-toggle-label {
  color: var(--ok);
}

.wego-toggle-off {
  border-color: var(--warn);
}

.wego-toggle-off .wego-toggle-dot {
  background: var(--warn);
}

.wego-toggle-off .wego-toggle-label {
  color: var(--warn);
}

/* =================================================================
   N8N FORM -- SIM SELECTOR
================================================================= */

.n8n-sim-select-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}

.n8n-no-sim {
  font-size: 11px;
  color: var(--bad);
  font-weight: 600;
  line-height: 1.5;
  padding: 6px 0;
}

/* USSD preview PIN reveal */
#n8n-ussd-preview {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.ussd-sep {
  color: var(--mute);
  margin: 0 1px;
}

.ussd-pin {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .05em;
  background: var(--tint);
  padding: 1px 5px;
  border-radius: 2px;
}

.ussd-eye-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctl-sm);
  height: var(--ctl-sm);
  background: none;
  border: none;
  padding: 0;
  margin-left: 6px;
  color: var(--mute);
  cursor: pointer;
  transition: color .15s;
}

.ussd-eye-btn:hover { color: var(--accent); }

/* =================================================================
   CONFIRM MODAL
================================================================= */

.nx-modal {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  max-width: 360px;
  width: 100%;
}

.nx-modal::backdrop { background: rgba(0, 0, 0, .55); }

.nx-modal-box {
  background: var(--ground);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}

.nx-modal-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 16px 18px 10px;
  color: var(--ink);
}

.nx-modal-msg {
  font-size: 12px;
  color: var(--mute);
  padding: 0 18px 18px;
  line-height: 1.55;
}

.nx-modal-actions {
  display: flex;
  border-top: 1px solid var(--rule);
}

.nx-modal-btn {
  flex: 1;
  height: var(--ctl-lg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--mute);
  transition: background .15s, color .15s;
}

.nx-modal-btn:hover { background: var(--rule-faint); color: var(--ink); }

.nx-modal-btn + .nx-modal-btn { border-left: 1px solid var(--rule); }

.nx-modal-btn-danger { color: var(--bad); }

.nx-modal-btn-danger:hover {
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  color: var(--bad);
}

/* =================================================================
   ENVIRONMENT SECTION
================================================================= */

.sb-env-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

.sb-env-divider {
  height: 1px;
  background: var(--rule-soft);
}

.sb-btn-danger-outline {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
}

.sb-btn-danger-outline:hover {
  background: var(--bad-tint);
  border-color: var(--bad);
}

/* =================================================================
   SCENARIOS SECTION
================================================================= */

.sb-scenarios-desc {
  margin: 0;
  font-size: 11px;
  color: var(--mute);
  line-height: 1.5;
}

/* =================================================================
   OPS TOOLBAR
================================================================= */

.ops-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  height: calc(var(--ctl-lg) + var(--gap) * 2);
  background: var(--surface);
  border-bottom: 2px solid var(--rule);
}

.ops-toolbar-identity {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex: none;
}

.ops-toolbar-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

.ops-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: var(--ctl-sm);
  padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--tint);
  color: var(--tint-ink);
  border-radius: 2px;
}

.ops-filter-group {
  display: flex;
  flex: none;
  border: 1px solid var(--rule);
}

.ops-util-group {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
}

.ops-util-sep {
  width: 1px;
  height: 20px;
  background: var(--rule);
  flex: none;
}

.ops-util-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  height: var(--ctl-lg);
  padding: var(--ctl-pad-md);
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  transition: color .15s, border-color .15s, background .15s;
}

.ops-util-btn:hover { background: var(--rule-faint); border-color: var(--ink); }

.ops-util-btn-ghost {
  color: var(--mute);
  border-color: transparent;
}

.ops-util-btn-ghost:hover { color: var(--ink); background: var(--rule-faint); border-color: var(--rule); }

/* Same checkbox size as the stage panels use, so the two do not disagree. */
.ops-live-label input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  cursor: pointer;
}

.ops-live-label {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  color: var(--mute);
  user-select: none;
}

/* =================================================================
   OPS TABLE DELETE BUTTON
================================================================= */

/* .ops-row-del and .ops-row-cancel are defined in console.css. They were
 * declared here as well, with a different border and radius, so adjacent row
 * buttons rendered as different shapes. */

/* =================================================================
   OPS TABLE EMPTY STATE
================================================================= */

.ops-empty-row td {
  text-align: center;
  vertical-align: middle;
  padding: 80px 24px;
}

.ops-empty-title {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--ink);
}

.ops-empty-sub {
  font-size: 13px;
  color: var(--mute);
}

/* Connection result row in the Server section. */
.sb-conn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-top: var(--gap-tight);
}

.sb-conn-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* --- Select ---------------------------------------------------------------
 * No select on the page had a rule, so all three rendered the OS control: a
 * light native dropdown on a dark panel, with its own arrow and its own font.
 * appearance:none plus an inline SVG chevron makes it match the inputs beside
 * it, and the arrow follows the theme because it is drawn from currentColor. */
select.sb-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8781' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

.nx[data-theme="light"] select.sb-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c7873' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

select.sb-input:hover { border-color: var(--accent); }

/* The option list is drawn by the OS, so it needs explicit colours or it
 * inherits the page background and loses its own text. */
select.sb-input option {
  background: var(--surface);
  color: var(--ink);
}

/* --- Management: access grants -------------------------------------------
 * Rebuilt. The section reused .input, .btn and .sim-pill from the stage
 * panels, so a sidebar field rendered at stage-panel scale, the select got no
 * rule at all, and the chips carried no signal that they were multi-select. */

/* Resting state, shown until an agent is chosen. */
.sb-mgmt-idle {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding: 14px;
  margin-bottom: var(--gap-loose);
  background: var(--rule-faint);
  border-left: 2px solid var(--accent);
  font-size: 11px;
  line-height: 1.55;
  color: var(--dim);
}

.sb-mgmt-idle svg { flex: none; color: var(--mute); margin-top: 1px; }

.sb-mgmt-editor {
  display: flex;
  flex-direction: column;
  gap: var(--gap-loose);
  margin-top: var(--gap-loose);
}

/* What the agent holds right now, before any edit. Two lines, not a sentence:
 * the login, then what it can actually do. */
.sb-mgmt-state {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  font-size: 11px;
  line-height: 1.5;
}

.sb-mgmt-state-who {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--ink);
}

.sb-mgmt-state-what { color: var(--mute); }
.sb-mgmt-state[data-tone="none"] { border-left: 2px solid var(--warn); }
.sb-mgmt-state[data-tone="none"] .sb-mgmt-state-what { color: var(--warn); }

.sb-mgmt-group { display: flex; flex-direction: column; gap: var(--gap-tight); }

.sb-mgmt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
}

/* Says how many of how many are on, so the count is readable without
 * counting filled chips. */
.sb-mgmt-count {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.sb-mgmt-grid { display: flex; flex-wrap: wrap; gap: var(--gap-tight); }

/* Multi-select chip. A checkbox mark states that these toggle and that more
 * than one can be on, which a plain filled pill never said. */
.sb-mgmt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
  height: var(--ctl-md);
  padding: 0 10px 0 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  user-select: none;
  transition: color .14s, border-color .14s, background .14s;
}

.sb-mgmt-chip:hover { border-color: var(--accent); color: var(--ink); }

.sb-mgmt-chip-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid var(--rule);
  color: transparent;
}

.sb-mgmt-chip.active {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--tint);
}

.sb-mgmt-chip.active .sb-mgmt-chip-box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* An admin's chips are all on and not editable, since the role grants them
 * rather than the profile. Shown rather than hidden, so the state is legible. */
.sb-mgmt-chip:disabled {
  cursor: default;
  opacity: .75;
}

.sb-mgmt-chip:disabled:hover {
  border-color: var(--rule);
  color: var(--mute);
}

.sb-mgmt-chip.active:disabled:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.sb-mgmt-state[data-tone="admin"] { border-left: 2px solid var(--accent); }
.sb-mgmt-state[data-tone="admin"] .sb-mgmt-state-what { color: var(--tint-ink); }

.sb-mgmt-empty {
  font-size: 11px;
  line-height: 1.5;
  color: var(--mute);
}

/* Amount with its unit inside the field, so the number is never read without
 * the currency. */
.sb-mgmt-amount { position: relative; display: flex; align-items: center; }
.sb-mgmt-amount .sb-input { padding-right: 48px; }

.sb-mgmt-unit {
  position: absolute;
  right: 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--mute);
  pointer-events: none;
}

.sb-mgmt-hint {
  font-size: 10px;
  line-height: 1.4;
  color: var(--mute);
}

.sb-mgmt-msg {
  font-size: 11px;
  line-height: 1.5;
  min-height: 15px;
}

.sb-mgmt-msg:empty { display: none; }