/*
 * maestro-components.css — Unified component library
 * Tokens live in maestro-shell.css. This file only references them.
 * Namespace: .ms-* (Maestro System)
 *
 * §1  Buttons
 * §2  Form fields
 * §3  Save bar
 * §4  Tables
 * §5  Cards
 * §6  Modals
 * §7  Badges & pills
 * §8  Tabs
 * §9  Search bar
 * §10 Dropdown
 * §11 Drag list (sortable)
 * §12 Spinner
 * §13 Avatar
 * §14 Back link
 * §15 Alert
 * §16 Empty state
 * §17 Page header
 * §18 Multi-select dropdown
 * §19 Autocomplete
 * §20 Entity selection card
 * §21 Type selection grid
 * §22 Input modifiers
 */

/* ─────────────────────────────────────────────────────────────────────────────
   §1  BUTTONS
   height: 36px — compact/premium like Linear
   Variants: primary · ghost · danger · success · icon
   Sizes: default · sm (28px)
───────────────────────────────────────────────────────────────────────────── */

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--ms-radius);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: var(--ms-text-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--ms-tr), border-color var(--ms-tr), color var(--ms-tr), box-shadow var(--ms-tr);
  box-sizing: border-box;
  user-select: none;
}
.ms-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--ms-accent-rgb),.22);
}
.ms-btn:disabled,
.ms-btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

/* Primary — accent purple */
.ms-btn-primary {
  background: var(--ms-accent);
  color: var(--ms-on-accent);
  border-color: var(--ms-accent);
}
.ms-btn-primary:hover {
  background: var(--ms-accent-hover);
  border-color: var(--ms-accent-hover);
}

/* Ghost — outlined, neutral */
.ms-btn-ghost {
  background: var(--ms-surface);
  color: var(--ms-muted);
  border-color: var(--ms-line-strong);
}
.ms-btn-ghost:hover {
  background: var(--ms-bg);
  border-color: var(--ms-accent);
  color: var(--ms-accent);
}

/* Danger — destructive action */
.ms-btn-danger {
  background: var(--ms-red-soft);
  color: var(--ms-red);
  border-color: var(--ms-red);
}
.ms-btn-danger:hover {
  background: var(--ms-red);
  color: var(--ms-on-accent);
}

/* Success */
.ms-btn-success {
  background: var(--ms-green-soft);
  color: var(--ms-green);
  border-color: var(--ms-green);
}
.ms-btn-success:hover {
  background: var(--ms-green);
  color: var(--ms-on-accent);
}

/* Warning — ação de aprovação parcial/com ressalva */
.ms-btn-warning {
  background: var(--ms-amber-soft);
  color: var(--ms-amber);
  border-color: var(--ms-amber);
}
.ms-btn-warning:hover {
  background: var(--ms-amber);
  color: var(--ms-on-accent);
}

/* Icon — square, no label */
.ms-btn-icon {
  padding: 0;
  width: 36px;
}
.ms-btn-icon.ms-btn-sm {
  width: 32px;
  height: 32px;
}
/* Escala o ícone interno sem distorcer proporção (alguns ícones não são quadrados,
   ex: menu "mais ações" 4x16) — maior área de clique sozinha não resolve o ícone
   parecer pequeno demais dentro dela. */
.ms-btn-icon.ms-btn-sm svg {
  transform: scale(1.15);
}

/* Small */
.ms-btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: var(--ms-text-xs);
  border-radius: var(--ms-radius-sm);
}

/* ── Filtro em pílula ──────────────────────────────────────────────────────
   Gatilho de dropdown de filtro: ícone, rótulo e chevron numa pílula que fica
   accent quando há valor escolhido. Nasceu no quadro do Pipeline (.pl-filter-btn,
   mantido como alias para não mexer no markup de lá) e virou componente ao ser
   usado também na fila da Prospecção. */
.ms-filter-btn,
.pl-filter-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
  font-size: var(--ms-text-sm); color: var(--ms-muted);
  background: var(--ms-surface); cursor: pointer; user-select: none;
  white-space: nowrap; font-family: inherit; transition: all var(--ms-tr);
}
.ms-filter-btn:hover,
.pl-filter-btn:hover { border-color: var(--ms-line-strong); color: var(--ms-text); }
.ms-filter-btn.is-active,
.pl-filter-btn.is-active {
  background: var(--ms-accent-soft); border-color: var(--ms-accent); color: var(--ms-accent);
}
.ms-fi, .pl-fi { flex-shrink: 0; opacity: .65; }
.ms-fchev, .pl-fchev { flex-shrink: 0; opacity: .45; }

.ms-filter-clear {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 8px;
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: var(--ms-text-xs); color: var(--ms-muted-lt);
  transition: color var(--ms-tr);
}
.ms-filter-clear:hover { color: var(--ms-red); }

/* Select reduzido, par do .ms-btn-sm — para barras de filtro, onde o campo
   acompanha botões de 28px e não é entrada de formulário. */
.ms-select-sm,
.ms-input-sm {
  height: 28px;
  padding: 0 8px;
  font-size: var(--ms-text-xs);
  border-radius: var(--ms-radius-sm);
}

/* Loading spinner inside button */
.ms-btn[data-loading="true"] {
  position: relative;
  pointer-events: none;
  color: transparent;
}
.ms-btn[data-loading="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ms-spin .7s linear infinite;
}


/* ─────────────────────────────────────────────────────────────────────────────
   §2  FORM FIELDS
   Labels, inputs, selects, textareas, hints, error states
───────────────────────────────────────────────────────────────────────────── */

.ms-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Two-column responsive grid */
.ms-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
@media (max-width: 640px) {
  .ms-form-grid { grid-template-columns: 1fr; }
}

/* Full-width field inside grid */
.ms-field-full { grid-column: 1 / -1; }

/* Section heading inside a form */
.ms-form-section {
  padding-bottom: 8px;
  margin-top: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ms-line);
  font-size: var(--ms-text-sm);
  font-weight: 700;
  color: var(--ms-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ms-form-section:first-child { margin-top: 0; }

/* Field wrapper (label + control + hint) */
.ms-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ms-label {
  font-size: var(--ms-text-sm);
  font-weight: 600;
  color: var(--ms-text);
  line-height: 1.2;
}
.ms-label-req::after {
  content: ' *';
  color: var(--ms-red);
}

/* Base control styles shared by input/select/textarea */
.ms-input,
.ms-select,
.ms-textarea {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--ms-line-strong);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  color: var(--ms-text);
  font-family: inherit;
  font-size: var(--ms-text-sm);
  font-weight: 500;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color var(--ms-tr), box-shadow var(--ms-tr);
  appearance: none;
  -webkit-appearance: none;
}
.ms-input::placeholder,
.ms-textarea::placeholder {
  color: var(--ms-muted-lt);
  font-weight: 400;
}
.ms-input:focus,
.ms-select:focus,
.ms-textarea:focus {
  outline: none;
  border-color: var(--ms-accent);
  box-shadow: 0 0 0 3px rgba(var(--ms-accent-rgb),.14);
}
.ms-input:disabled,
.ms-select:disabled,
.ms-textarea:disabled {
  background: var(--ms-bg);
  color: var(--ms-muted);
  cursor: not-allowed;
}

/* Select arrow */
.ms-select {
  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='%23475467' 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 10px center;
  padding-right: 32px;
  cursor: pointer;
}

/* Textarea */
.ms-textarea {
  height: auto;
  min-height: 80px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
}

/* Error state */
.ms-input.is-error,
.ms-select.is-error,
.ms-textarea.is-error {
  border-color: var(--ms-red);
  box-shadow: 0 0 0 3px rgba(var(--ms-red-rgb),.10);
}

/* Hint / error message */
.ms-hint {
  font-size: var(--ms-text-xs);
  color: var(--ms-muted);
  line-height: 1.4;
}
.ms-hint.is-error {
  color: var(--ms-red);
}

/* Wrapper gerado pelo PhoneInput — garantir block sem colapso */
[data-phone-id] { display: block; }

/* Phone row: DDI select + input visível + botões de ação */
.ms-phone-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.ms-phone-ddi-sel {
  width: 94px;
  flex-shrink: 0;
  padding-left: 6px;
  padding-right: 4px;
}
.ms-phone-vis {
  flex: 1;
  min-width: 0;
}
.ms-phone-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.ms-phone-wa-btn   { color: #25D366 !important; }
.ms-phone-call-btn { color: var(--ms-accent) !important; }
/* Aliases legado */
.ms-phone-ddi    { width: 68px; flex-shrink: 0; }
.ms-phone-number { flex: 1; }

/* Checkbox / radio row */
.ms-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ms-text-sm);
  font-weight: 500;
  color: var(--ms-text);
  cursor: pointer;
}
.ms-check-row input[type="checkbox"],
.ms-check-row input[type="radio"] {
  accent-color: var(--ms-accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Tag input */
.ms-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  border: 1.5px solid var(--ms-line-strong);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  min-height: 36px;
  cursor: text;
  transition: border-color var(--ms-tr), box-shadow var(--ms-tr);
}
.ms-tag-input:focus-within {
  border-color: var(--ms-accent);
  box-shadow: 0 0 0 3px rgba(var(--ms-accent-rgb),.14);
}
.ms-tag-input input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
  min-width: 80px;
  flex: 1;
}

/* Tipo-contato multi-select pills */
.ms-tipo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ms-tipo-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1.5px solid var(--ms-line-strong);
  border-radius: var(--ms-radius-full);
  background: var(--ms-surface);
  font-size: var(--ms-text-xs);
  font-weight: 600;
  color: var(--ms-muted);
  cursor: pointer;
  transition: all var(--ms-tr);
  user-select: none;
}
.ms-tipo-pill.is-selected {
  border-color: var(--ms-accent);
  background: var(--ms-accent-soft);
  color: var(--ms-accent);
}


/* ─────────────────────────────────────────────────────────────────────────────
   §3  SAVE BAR
   Fixed bottom bar shown when a form has unsaved changes
───────────────────────────────────────────────────────────────────────────── */

.ms-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--ms-surface);
  border-top: 1px solid var(--ms-line);
  border-radius: 0 0 var(--ms-radius-lg) var(--ms-radius-lg);
}

/* Sticky save bar that floats at bottom of viewport */
.ms-save-bar-sticky {
  position: sticky;
  bottom: 0;
  z-index: 50;
  box-shadow: 0 -4px 12px rgba(var(--ms-black-rgb),.06);
}

.ms-save-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ms-feedback {
  font-size: var(--ms-text-sm);
  font-weight: 500;
  color: var(--ms-muted);
  flex: 1;
}
.ms-feedback.is-error { color: var(--ms-red); }
.ms-feedback.is-success { color: var(--ms-green); }


/* ─────────────────────────────────────────────────────────────────────────────
   §4  TABLES
───────────────────────────────────────────────────────────────────────────── */

.ms-table-wrap {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
}

.ms-table {
  width: 100%;
  border-collapse: collapse;
}

.ms-table thead tr {
  background: var(--ms-bg);
  border-bottom: 2px solid var(--ms-line);
}
.ms-table thead th {
  padding: 9px 16px;
  text-align: left;
  font-size: var(--ms-text-xs);
  font-weight: 700;
  color: var(--ms-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  user-select: none;
}

.ms-table tbody tr {
  border-bottom: 1px solid var(--ms-line);
  transition: background var(--ms-tr);
}
.ms-table tbody tr:last-child { border-bottom: none; }
.ms-table tbody tr:hover { background: var(--ms-bg); }

.ms-table tbody td {
  padding: 10px 16px;
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
  vertical-align: middle;
}

/* Grid-based table row (for custom layouts) */
.ms-trow {
  display: grid;
  align-items: center;
  padding: 10px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--ms-line);
  transition: background var(--ms-tr);
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
}
.ms-trow:last-child { border-bottom: none; }
.ms-trow:hover { background: var(--ms-bg); }

.ms-thead {
  display: grid;
  align-items: center;
  padding: 9px 16px;
  gap: 12px;
  background: var(--ms-bg);
  border-bottom: 2px solid var(--ms-line);
  font-size: var(--ms-text-xs);
  font-weight: 700;
  color: var(--ms-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  user-select: none;
}

/* Sortable column header */
.ms-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.ms-th-sort:hover { color: var(--ms-text); }


/* ─────────────────────────────────────────────────────────────────────────────
   §5  CARDS
───────────────────────────────────────────────────────────────────────────── */

.ms-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  padding: 20px 24px;
}

/* Card subordinado a outro card na mesma tela (ex: config "padrão"/fallback
   abaixo de uma lista de overrides) — mesmo formato, fundo recuado pra pesar
   visualmente menos que o card principal. */
.ms-card-muted { background: var(--ms-bg); }

.ms-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ms-card-title {
  font-size: var(--ms-text-base);
  font-weight: 700;
  color: var(--ms-text);
  margin: 0;
}
.ms-card-sub {
  font-size: var(--ms-text-sm);
  color: var(--ms-muted);
  margin: 2px 0 0;
}

/* Nav card — clickable tile */
.ms-card-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  text-decoration: none;
  color: var(--ms-text);
  transition: border-color var(--ms-tr), box-shadow var(--ms-tr), transform var(--ms-tr);
}
.ms-card-nav:hover {
  border-color: var(--ms-accent);
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-1px);
}
.ms-card-nav-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ms-radius);
  background: var(--ms-accent-soft);
  color: var(--ms-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-card-nav-body { flex: 1; }
.ms-card-nav-label {
  font-size: var(--ms-text-sm);
  font-weight: 700;
  color: var(--ms-text);
}
.ms-card-nav-desc {
  font-size: var(--ms-text-xs);
  color: var(--ms-muted);
  margin-top: 2px;
}

/* Grid of nav cards */
.ms-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* Accordion card — item colapsável (details/summary nativo). Usar pra listas
   de itens configuráveis (evita "tripa" de N cards sempre abertos) ou pra
   organizar um card grande em subseções recolhíveis. */
.ms-accordion-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  margin-bottom: var(--ms-space-3);
  overflow: hidden;
}
.ms-accordion-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4);
}
.ms-accordion-card > summary::-webkit-details-marker { display: none; }
.ms-accordion-chevron {
  color: var(--ms-line);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.ms-accordion-card[open] > summary .ms-accordion-chevron { transform: rotate(90deg); }
.ms-accordion-title {
  font-weight: 700;
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
}
.ms-accordion-meta {
  flex: 1;
  color: var(--ms-muted);
  font-size: var(--ms-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-accordion-body {
  padding: var(--ms-space-4);
  border-top: 1px solid var(--ms-line);
}


/* ─────────────────────────────────────────────────────────────────────────────
   §6  MODALS
───────────────────────────────────────────────────────────────────────────── */

.ms-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(var(--ms-navy-rgb),.38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ms-fade-in .15s ease;
}
.ms-modal-overlay.is-hidden { display: none; }

.ms-modal {
  background: var(--ms-surface);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  animation: ms-slide-up .18s ease;
}
.ms-modal-lg { max-width: 720px; }
.ms-modal-xl { max-width: 960px; }

.ms-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--ms-line);
  flex-shrink: 0;
}
.ms-modal-title {
  font-size: var(--ms-text-base);
  font-weight: 700;
  color: var(--ms-text);
  margin: 0;
}
.ms-modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--ms-radius-sm);
  color: var(--ms-muted);
  cursor: pointer;
  transition: background var(--ms-tr), color var(--ms-tr);
  flex-shrink: 0;
}
.ms-modal-close:hover {
  background: var(--ms-bg);
  color: var(--ms-text);
}

.ms-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.ms-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--ms-line);
  flex-shrink: 0;
}
.ms-modal-foot-left {
  flex: 1;
  font-size: var(--ms-text-sm);
  color: var(--ms-muted);
}


/* ─────────────────────────────────────────────────────────────────────────────
   §7  BADGES & PILLS
───────────────────────────────────────────────────────────────────────────── */

.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--ms-radius-full);
  font-size: var(--ms-text-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Semantic variants */
.ms-badge-neutral {
  background: var(--ms-bg);
  color: var(--ms-muted);
  border: 1px solid var(--ms-line);
}
.ms-badge-accent {
  background: var(--ms-accent-soft);
  color: var(--ms-accent);
}
.ms-badge-green {
  background: var(--ms-green-soft);
  color: var(--ms-green);
}
.ms-badge-amber {
  background: var(--ms-amber-soft);
  color: var(--ms-amber);
}
.ms-badge-red {
  background: var(--ms-red-soft);
  color: var(--ms-red);
}
.ms-badge-navy {
  background: var(--ms-navy-soft);
  color: var(--ms-navy);
}
.ms-badge-pink {
  background: var(--ms-pink-soft);
  color: var(--ms-pink);
}
.ms-badge-blue {
  background: var(--ms-blue-soft);
  color: var(--ms-blue);
}

/* Dot indicator inside badge */
.ms-badge::before {
  display: none;
}
.ms-badge-dot::before {
  display: inline-block;
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Notification pill (count on nav) */
.ms-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--ms-radius-full);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.ms-pill-accent { background: var(--ms-accent); color: var(--ms-on-accent); }
.ms-pill-red    { background: var(--ms-red); color: var(--ms-on-accent); }


/* ─────────────────────────────────────────────────────────────────────────────
   §8  TABS
───────────────────────────────────────────────────────────────────────────── */

.ms-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--ms-line);
  margin-bottom: 20px;
}

.ms-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  font-family: inherit;
  font-size: var(--ms-text-sm);
  font-weight: 600;
  color: var(--ms-muted);
  cursor: pointer;
  transition: color var(--ms-tr), border-color var(--ms-tr);
  white-space: nowrap;
}
.ms-tab:hover { color: var(--ms-text); }
.ms-tab.is-active {
  color: var(--ms-accent);
  border-bottom-color: var(--ms-accent);
}

.ms-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-bg);
  border: 1px solid var(--ms-line);
  font-size: 10px;
  font-weight: 800;
}
.ms-tab.is-active .ms-tab-badge {
  background: var(--ms-accent-soft);
  border-color: var(--ms-accent-soft);
  color: var(--ms-accent);
}

.ms-tab-panel { display: none; }
.ms-tab-panel.is-active { display: block; }


/* ─────────────────────────────────────────────────────────────────────────────
   §9  SEARCH BAR
───────────────────────────────────────────────────────────────────────────── */

.ms-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ms-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.ms-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ms-muted-lt);
  pointer-events: none;
}
.ms-search-input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 34px;
  border: 1.5px solid var(--ms-line-strong);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  font-family: inherit;
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
  box-sizing: border-box;
  transition: border-color var(--ms-tr), box-shadow var(--ms-tr);
}
.ms-search-input::placeholder { color: var(--ms-muted-lt); }
.ms-search-input:focus {
  outline: none;
  border-color: var(--ms-accent);
  box-shadow: 0 0 0 3px rgba(var(--ms-accent-rgb),.14);
}

.ms-filter-select {
  height: 36px;
  padding: 0 30px 0 10px;
  border: 1.5px solid var(--ms-line-strong);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  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='%23475467' 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 8px center;
  font-family: inherit;
  font-size: var(--ms-text-sm);
  font-weight: 500;
  color: var(--ms-text);
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--ms-tr);
}
.ms-filter-select:focus {
  outline: none;
  border-color: var(--ms-accent);
}


/* ─────────────────────────────────────────────────────────────────────────────
   §10 DROPDOWN
───────────────────────────────────────────────────────────────────────────── */

.ms-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.ms-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 160px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-xl);
  padding: 4px;
  animation: ms-fade-in .12s ease;
}
.ms-dropdown.is-hidden { display: none; }

.ms-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--ms-radius);
  font-family: inherit;
  font-size: var(--ms-text-sm);
  font-weight: 500;
  color: var(--ms-text);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--ms-tr);
  box-sizing: border-box;
}
.ms-dropdown-item:hover { background: var(--ms-bg); }
.ms-dropdown-item.is-danger { color: var(--ms-red); }
.ms-dropdown-item.is-danger:hover { background: var(--ms-red-soft); }

.ms-dropdown-sep {
  height: 1px;
  background: var(--ms-line);
  margin: 4px 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   §11 DRAG LIST (sortable)
   Used in Origens, Classificacoes, Tipos de contato config pages
───────────────────────────────────────────────────────────────────────────── */

.ms-drag-list {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
}
.ms-drag-head {
  display: grid;
  gap: 8px;
  padding: 9px 16px;
  background: var(--ms-bg);
  border-bottom: 2px solid var(--ms-line);
  font-size: var(--ms-text-xs);
  font-weight: 700;
  color: var(--ms-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  user-select: none;
}
.ms-drag-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 6px 16px;
  border-bottom: 1px solid var(--ms-line);
  transition: background var(--ms-tr);
}
.ms-drag-row:last-child { border-bottom: none; }
.ms-drag-row.is-dragging { opacity: .4; }
.ms-drag-row.is-over { background: var(--ms-accent-soft); }

.ms-drag-handle {
  cursor: grab;
  color: var(--ms-line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--ms-tr);
  user-select: none;
  flex-shrink: 0;
}
.ms-drag-row:hover .ms-drag-handle { color: var(--ms-muted); }
.ms-drag-handle:active { cursor: grabbing; }

.ms-inline-input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid transparent;
  border-radius: var(--ms-radius-sm);
  font-family: inherit;
  font-size: var(--ms-text-sm);
  font-weight: 600;
  color: var(--ms-text);
  background: transparent;
  transition: border-color var(--ms-tr), background var(--ms-tr);
  box-sizing: border-box;
}
.ms-inline-input:focus {
  outline: none;
  border-color: var(--ms-accent);
  background: var(--ms-bg);
}
.ms-inline-input.is-new {
  border-color: var(--ms-accent);
  background: var(--ms-accent-soft);
}
.ms-drag-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: var(--ms-text-sm);
  color: var(--ms-muted);
}


/* ─────────────────────────────────────────────────────────────────────────────
   §12 SPINNER
───────────────────────────────────────────────────────────────────────────── */

@keyframes ms-spin {
  to { transform: rotate(360deg); }
}

.ms-spin {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--ms-line);
  border-top-color: var(--ms-accent);
  border-radius: 50%;
  animation: ms-spin .7s linear infinite;
  flex-shrink: 0;
}
.ms-spin-sm { width: 14px; height: 14px; border-width: 2px; }
.ms-spin-lg { width: 32px; height: 32px; border-width: 3px; }

/* Full-page loader */
.ms-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--ms-muted);
  font-size: var(--ms-text-sm);
}


/* ─────────────────────────────────────────────────────────────────────────────
   §13 AVATAR
───────────────────────────────────────────────────────────────────────────── */

.ms-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ms-accent-soft);
  color: var(--ms-accent);
  font-size: var(--ms-text-xs);
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}
.ms-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.ms-avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.ms-avatar-xl { width: 56px; height: 56px; font-size: 18px; }
.ms-avatar img { width: 100%; height: 100%; object-fit: cover; }


/* ─────────────────────────────────────────────────────────────────────────────
   §14 BACK LINK
───────────────────────────────────────────────────────────────────────────── */

.ms-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ms-text-sm);
  font-weight: 600;
  color: var(--ms-muted);
  text-decoration: none;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--ms-tr);
}
.ms-back-link:hover { color: var(--ms-text); }


/* ─────────────────────────────────────────────────────────────────────────────
   §15 ALERT
───────────────────────────────────────────────────────────────────────────── */

.ms-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--ms-radius);
  font-size: var(--ms-text-sm);
  font-weight: 500;
  line-height: 1.5;
}
.ms-alert-icon { flex-shrink: 0; margin-top: 1px; }

.ms-alert-info    { background: var(--ms-accent-soft); color: var(--ms-accent); }
.ms-alert-success { background: var(--ms-green-soft);  color: var(--ms-green); }
.ms-alert-warning { background: var(--ms-amber-soft);  color: var(--ms-amber); }
.ms-alert-error   { background: var(--ms-red-soft);    color: var(--ms-red); }


/* ─────────────────────────────────────────────────────────────────────────────
   §16 EMPTY STATE
───────────────────────────────────────────────────────────────────────────── */

.ms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 24px;
  text-align: center;
}
.ms-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ms-radius-lg);
  background: var(--ms-bg);
  color: var(--ms-muted-lt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-empty-title {
  font-size: var(--ms-text-base);
  font-weight: 700;
  color: var(--ms-text);
  margin: 0;
}
.ms-empty-sub {
  font-size: var(--ms-text-sm);
  color: var(--ms-muted);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────────────────────
   §17 PAGE HEADER (topbar inner content)
   .ms-page-title + .ms-page-sub inside .ms-topbar
───────────────────────────────────────────────────────────────────────────── */

.ms-page-title {
  font-size: var(--ms-text-base);
  font-weight: 700;
  color: var(--ms-text);
  margin: 0;
  line-height: 1.3;
}
.ms-topbar-main {
  min-width: 0;
  flex: 1;
}
.ms-page-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ms-breadcrumb-link {
  color: var(--ms-muted);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--ms-tr);
}
.ms-breadcrumb-link:hover {
  color: var(--ms-text);
}
.ms-page-sub {
  font-size: var(--ms-text-sm);
  color: var(--ms-muted);
  margin: 2px 0 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   §18 MULTI-SELECT DROPDOWN  (ms-mselect)
   Dropdown com checkboxes para seleção múltipla.
   Uso: <div class="ms-mselect [open]" [data-disabled]>
        <button class="ms-mselect-trigger" onclick="toggleMs(this)">
          <span class="ms-mselect-label">Selecione...</span>
          <svg …/>
        </button>
        <div class="ms-mselect-panel">
          <label><input type="checkbox" …> Opção</label>
        </div>
       </div>
   JS: toggleMs(btn) → btn.closest(".ms-mselect").classList.toggle("open")
───────────────────────────────────────────────────────────────────────────── */
.ms-mselect { position: relative; }
.ms-mselect-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--ms-line-strong); border-radius: var(--ms-radius);
  background: var(--ms-surface); cursor: pointer; font-family: inherit;
  font-size: var(--ms-text-sm); text-align: left; font-weight: 400;
  color: var(--ms-text); transition: border-color var(--ms-tr);
}
.ms-mselect-trigger:hover:not(:disabled) { border-color: var(--ms-accent); }
.ms-mselect-trigger:disabled             { background: var(--ms-bg); cursor: not-allowed; opacity: .8; }
.ms-mselect-label       { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-mselect-placeholder { color: var(--ms-muted-lt); }
.ms-mselect-panel {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0;
  background: var(--ms-surface); border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-md); padding: 6px; z-index: 200;
  display: none; max-height: 230px; overflow-y: auto;
}
.ms-mselect.open .ms-mselect-panel           { display: block; }
.ms-mselect[data-disabled] .ms-mselect-trigger { background: var(--ms-bg); cursor: not-allowed; opacity: .8; }
.ms-mselect-panel label {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: var(--ms-radius-sm); font-size: var(--ms-text-sm); font-weight: 400; cursor: pointer;
}
.ms-mselect-panel label:hover            { background: var(--ms-accent-soft); }
.ms-mselect-panel input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--ms-accent); flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   §19 AUTOCOMPLETE
   Dropdown de sugestões vinculado a um ms-input.
   Uso: <div class="ms-ac-wrap"><input class="ms-input">
        <div class="ms-ac-drop is-hidden" id="drop-x"></div></div>
───────────────────────────────────────────────────────────────────────────── */
.ms-ac-wrap { position: relative; }
.ms-ac-drop {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--ms-surface); border: 1px solid var(--ms-line-strong);
  border-radius: var(--ms-radius); box-shadow: var(--ms-shadow-md);
  z-index: 200; max-height: 240px; overflow-y: auto;
}
.ms-ac-item {
  padding: 9px 12px; font-size: var(--ms-text-sm); cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.ms-ac-item:hover { background: var(--ms-accent-soft); }
.ms-ac-item-name {
  font-weight: 600; color: var(--ms-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-ac-item-sub,
.ms-ac-item-cnpj { font-size: var(--ms-text-xs); color: var(--ms-muted); white-space: nowrap; flex-shrink: 0; }
.ms-ac-empty { padding: 10px 12px; font-size: var(--ms-text-sm); color: var(--ms-muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   §20 ENTITY SELECTION CARD
   Confirma o item selecionado via autocomplete.
   Uso: <div class="ms-sel-card [is-hidden]">
        <div class="ms-sel-card-info"><span class="ms-sel-card-name">...</span>
        <span class="ms-sel-card-sub">...</span></div>
        <button class="ms-sel-card-clear">×</button></div>
   Alias retrocompat: ms-empresa-card-* mapeado abaixo
───────────────────────────────────────────────────────────────────────────── */
.ms-sel-card,
.ms-empresa-card {
  padding: 10px 14px; background: var(--ms-accent-soft);
  border-radius: var(--ms-radius);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ms-sel-card-info,
.ms-empresa-card-info { display: flex; flex-direction: column; gap: 2px; }
.ms-sel-card-name,
.ms-empresa-card-nome { font-size: var(--ms-text-sm); font-weight: 600; color: var(--ms-text); }
.ms-sel-card-sub,
.ms-empresa-card-cnpj { font-size: var(--ms-text-xs); color: var(--ms-muted); }
.ms-sel-card-clear,
.ms-empresa-card-clear {
  background: none; border: none; cursor: pointer;
  color: var(--ms-muted); padding: 4px; border-radius: var(--ms-radius-xs); line-height: 1;
}
.ms-sel-card-clear:hover,
.ms-empresa-card-clear:hover { color: var(--ms-red); background: var(--ms-red-soft); }

/* ─────────────────────────────────────────────────────────────────────────────
   §21 TYPE SELECTION GRID  (ms-type-*)
   Seleção de categoria/produto em tela inteira, antes do formulário.
   Uso: <div id="tipo-selector">
        <div class="ms-type-sel-header"><h2>...</h2><p>...</p></div>
        <div class="ms-type-sel-grid">
          <button class="ms-type-card" onclick="...">
            <div class="ms-type-card-icon"><svg .../></div>
            <span class="ms-type-card-label">Saúde</span>
            <span class="ms-type-card-sub">opcional</span>
          </button>
        </div></div>
   Badge na tab bar: <div class="ms-type-badge is-hidden" id="tipo-badge">
───────────────────────────────────────────────────────────────────────────── */
#tipo-selector {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 24px 44px;
}
.ms-type-sel-header       { text-align: center; margin-bottom: 36px; }
.ms-type-sel-header h2    { font-size: 21px; font-weight: 700; color: var(--ms-text); margin: 0 0 6px; }
.ms-type-sel-header p     { color: var(--ms-muted); font-size: var(--ms-text-base); margin: 0; }
.ms-type-sel-grid         { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 720px; width: 100%; }

.ms-type-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 32px 16px 24px;
  border: 2px solid var(--ms-line); border-radius: var(--ms-radius-lg);
  background: var(--ms-surface); cursor: pointer; font-family: inherit;
  transition: border-color var(--ms-tr), box-shadow var(--ms-tr);
}
.ms-type-card:hover       { border-color: var(--ms-accent); box-shadow: var(--ms-shadow-md); }
.ms-type-card-icon        { width: 72px; height: 72px; border-radius: var(--ms-radius-lg); background: var(--ms-accent-soft); display: grid; place-items: center; color: var(--ms-accent); }
.ms-type-card-icon svg    { width: 38px; height: 38px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ms-type-card-label       { font-size: var(--ms-text-base); font-weight: 700; color: var(--ms-text); text-align: center; line-height: 1.3; }
.ms-type-card-sub         { font-size: var(--ms-text-xs); color: var(--ms-muted); margin-top: -8px; }

.ms-type-badge {
  display: flex; align-items: center; gap: 5px; padding: 5px 11px;
  background: var(--ms-accent-soft); border: 1.5px solid rgba(var(--ms-accent-rgb), .22);
  border-radius: var(--ms-radius); color: var(--ms-accent);
  font-size: var(--ms-text-xs); font-weight: 600;
  margin-left: auto; align-self: flex-end; margin-bottom: 3px; white-space: nowrap;
}
.ms-type-badge svg        { width: 13px; height: 13px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   §22 INPUT MODIFIERS
───────────────────────────────────────────────────────────────────────────── */
.ms-input-readonly { background: var(--ms-bg); color: var(--ms-muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   §23 UTILITY CLASSES
   Generic ms-* utilities moved from maestro-app.css.
───────────────────────────────────────────────────────────────────────────── */

/* Layout helpers */
.ms-content--static { display: block !important; }
.ms-module-content  { padding-top: 28px; }
.ms-module-wrap     { width: min(100%, var(--module-max, 1120px)); margin: 0 auto; }
.ms-module-wrap--back { margin-bottom: 16px; }
.ms-module-wrap--sm { --module-max:  580px; }
.ms-module-wrap--md { --module-max:  680px; }
.ms-module-wrap--lg { --module-max:  860px; }
.ms-module-wrap--xl { --module-max: 1120px; }
.ms-module-wrap--2xl{ --module-max: 1400px; }
.ms-grow            { flex: 1; }
.ms-row-actions     { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

/* Typography utilities */
.ms-section-eyebrow,
.ms-section-kicker {
  margin: 0 0 14px;
  color: var(--ms-muted);
  font-size: var(--ms-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ms-page-subtle    { margin: 2px 0 0; }
.ms-text-danger    { color: var(--ms-red); }
.ms-text-success   { color: var(--ms-green); }
.ms-text-center    { text-align: center; }
.ms-link-reset     { color: inherit; text-decoration: none; }
.ms-inline-link    { color: var(--ms-accent); text-decoration: none; }
.ms-inline-link:hover { text-decoration: underline; }

/* Search bar width caps */
.ms-search-bar--max-sm { max-width: 400px; }
.ms-search-bar--max-xs { max-width: 320px; }

/* Inline feedback */
.ms-inline-feedback-block { display: block; margin-top: 8px; }

/* Form inline checkbox/radio */
.ms-field-inline {
  display: flex; align-items: center; gap: 6px;
  color: var(--ms-muted); font-size: var(--ms-text-xs);
  cursor: pointer; white-space: nowrap;
}
.ms-field-inline input { margin: 0; }

/* Input/select modifier classes */
.ms-inline-input--meta,
.ms-select--compact { color: var(--ms-muted); font-size: var(--ms-text-xs); }

/* Empty state variants */
.ms-empty--spacious { padding: 48px; }
.ms-empty--compact  { padding: 24px 0; }

/* Card utilities */
.ms-card-stack       { display: flex; flex-direction: column; gap: 20px; }
.ms-card-body-pad    { margin-top: 12px; }
.ms-card-body-pad-lg { margin-top: 16px; }
.ms-card-nav-chevron { color: var(--ms-line); flex-shrink: 0; }

/* Save-bar variant */
.ms-save-bar--flush { padding: 16px 0 0; background: none; border: none; }

/* Button variants */
.ms-btn-icon-muted       { color: var(--ms-muted); }
.ms-btn-icon-muted:hover { color: var(--ms-red); }
.ms-icon-btn-muted       { color: var(--ms-muted); }
.ms-icon-btn-muted:hover { color: var(--ms-red); }
.ms-btn-ghost.ms-btn-success-text       { color: var(--ms-green); }
.ms-btn-ghost.ms-btn-success-text:hover {
  border-color: var(--ms-green); color: var(--ms-green); background: var(--ms-green-soft);
}

/* Avatar with accent fill */
.ms-avatar-accent { border-radius: var(--ms-radius-sm); background: var(--ms-accent); color: var(--ms-on-accent); }

/* Association / search result rows */
.ms-assoc-row,
.ms-result-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
}
.ms-assoc-row         { padding: 8px 0; border-bottom: 1px solid var(--ms-line); }
.ms-assoc-row:last-child { border-bottom: none; }
.ms-result-row        { padding: 8px 12px; border-radius: var(--ms-radius); transition: background var(--ms-tr); }
.ms-result-row:hover  { background: var(--ms-accent-soft); }
.ms-assoc-meta,
.ms-result-meta       { min-width: 0; }
.ms-assoc-title,
.ms-result-title      { color: var(--ms-text); font-size: var(--ms-text-sm); font-weight: 700; }
.ms-assoc-sub,
.ms-result-sub        { color: var(--ms-muted); font-size: var(--ms-text-xs); }

/* ─────────────────────────────────────────────────────────────────────────────
   §23 Toggle switch
───────────────────────────────────────────────────────────────────────────── */

.ms-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.ms-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ms-toggle-track {
  width: 36px; height: 20px;
  background: var(--ms-line-strong);
  border-radius: var(--ms-radius-full);
  transition: background var(--ms-tr);
  flex-shrink: 0;
}
.ms-toggle input:checked + .ms-toggle-track { background: var(--ms-accent); }
.ms-toggle-thumb {
  position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px;
  background: var(--ms-surface);
  border-radius: 50%;
  transition: transform var(--ms-tr);
  box-shadow: var(--ms-shadow);
}
.ms-toggle input:checked ~ .ms-toggle-thumb { transform: translateX(16px); }
.ms-toggle input:disabled ~ .ms-toggle-track { opacity: .45; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────────────────
   §24 Combobox (busca type-ahead)
───────────────────────────────────────────────────────────────────────────── */

.ms-combo { position: relative; width: 100%; }
.ms-combo-input {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
  background: var(--ms-surface);
  border: 1.5px solid var(--ms-line-strong);
  border-radius: var(--ms-radius);
  transition: border-color var(--ms-tr), box-shadow var(--ms-tr);
}
.ms-combo-input::placeholder { color: var(--ms-muted-lt); }
.ms-combo-input:focus {
  outline: none;
  border-color: var(--ms-accent);
  box-shadow: 0 0 0 3px rgba(var(--ms-accent-rgb), .14);
}
.ms-combo-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-md);
  animation: ms-fade-in var(--ms-tr);
}
.ms-combo-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
  border-radius: var(--ms-radius-sm);
  cursor: pointer;
}
.ms-combo-option:hover,
.ms-combo-option.is-active { background: var(--ms-accent-soft); }
.ms-combo-clear { color: var(--ms-muted); }
.ms-combo-meta { font-size: var(--ms-text-xs); color: var(--ms-muted-lt); flex-shrink: 0; }
.ms-combo-empty {
  padding: 10px;
  text-align: center;
  font-size: var(--ms-text-sm);
  color: var(--ms-muted-lt);
}

/* ─────────────────────────────────────────────────────────────────────────────
   §25 Temperatura do contato  (ms-temp)

   Frio, morno, quente — a chance de fechar, na leitura de quem falou com a
   pessoa. Ícone e não texto porque o campo mora em coluna de tabela e em linha
   de fila, onde não cabe rótulo; a forma muda junto com a cor (floco, meio
   termômetro, chama) para que o estado sobreviva a quem não distingue as cores.
   Vazio é estado legítimo: quem ninguém leu ainda fica com o termômetro apagado.
───────────────────────────────────────────────────────────────────────────── */

.ms-temp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  /* Borda tracejada e visível no estado vazio: sem ela o controle não se anuncia
     como campo a preencher — some no meio do nome do contato e o BDR não
     descobre que ali se clica. Tracejado, e não sólido, para dizer "vazio" sem
     parecer um botão já respondido. */
  border: 1px dashed var(--ms-line-strong);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-surface);
  color: var(--ms-muted);
  cursor: pointer;
  transition: var(--ms-tr);
}
.ms-temp:hover {
  border-style: solid;
  border-color: var(--ms-accent);
  background: var(--ms-accent-soft);
  color: var(--ms-accent);
}
.ms-temp:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 1px;
}
/* Respondido é borda sólida da própria cor: o contorno é o que separa o ícone
   do texto ao redor em coluna estreita — só o fundo suave não segura. */
.ms-temp.is-frio,
.ms-temp.is-morno,
.ms-temp.is-quente { border-style: solid; }
.ms-temp.is-frio   { color: var(--ms-blue);  background: var(--ms-blue-soft);  border-color: var(--ms-blue); }
.ms-temp.is-morno  { color: var(--ms-amber); background: var(--ms-amber-soft); border-color: var(--ms-amber); }
.ms-temp.is-quente { color: var(--ms-red);   background: var(--ms-red-soft);   border-color: var(--ms-red); }
.ms-temp[data-loading="true"] { opacity: .5; pointer-events: none; }

/* Leitura, sem clique: mesma linguagem visual em tela que não deixa editar. */
.ms-temp-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--ms-radius-sm);
  color: var(--ms-muted-lt);
}
.ms-temp-selo.is-frio   { color: var(--ms-blue); }
.ms-temp-selo.is-morno  { color: var(--ms-amber); }
.ms-temp-selo.is-quente { color: var(--ms-red); }

/* Menu flutuante: position fixed porque o botão vive dentro de `ms-table-wrap`
   e de drawers com overflow — ancorado no fluxo, o menu seria cortado. */
.ms-temp-menu {
  position: fixed;
  z-index: 1200;
  min-width: 168px;
  padding: 4px;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-md);
  animation: ms-fade-in 120ms ease;
}
.ms-temp-op {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--ms-radius-sm);
  background: transparent;
  font-size: var(--ms-text-sm);
  color: var(--ms-text);
  text-align: left;
  cursor: pointer;
}
.ms-temp-op:hover { background: var(--ms-accent-soft); }
.ms-temp-op.is-atual { font-weight: 600; }
.ms-temp-op.is-frio   { color: var(--ms-blue); }
.ms-temp-op.is-morno  { color: var(--ms-amber); }
.ms-temp-op.is-quente { color: var(--ms-red); }
.ms-temp-op-limpar {
  border-top: 1px solid var(--ms-line);
  margin-top: 4px;
  padding-top: 8px;
  border-radius: 0;
  color: var(--ms-muted);
  font-size: var(--ms-text-xs);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Animations
───────────────────────────────────────────────────────────────────────────── */

@keyframes ms-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ms-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dashboard — faixa de KPI, barra de filtro, navegação de período,
   multi-seleção e lista ranqueada

   Vieram de pipeline.css, onde nasceram junto com o Dashboard Inbound e o
   Dashboard Outbound. Passaram a ser compartilhados quando os dashboards de
   Chamados e de Atendimento adotaram a mesma anatomia — três consumidores em
   dois módulos diferentes é onde componente de tela deixa de ser CSS de
   módulo (CLAUDE.md, regra 17).

   Cada regra aceita os DOIS nomes: `ms-*` para quem nasce agora, `op-*`/`rl-*`
   para o Pipeline, que continua com o markup que já tinha. Uma definição só,
   dois seletores — não é duplicação, é alias. Ao mexer aqui, lembre que
   Pipeline e Chamados enxergam a mudança juntos; aparência específica de uma
   tela é variante no CSS do próprio módulo, como o Pipeline faz com
   `op-kpi-ganho`.
───────────────────────────────────────────────────────────────────────────── */

/* ── Faixa de KPI ── */
.ms-kpi-strip, .op-kpi-strip {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--ms-line);
}
/* Variante em card fechado (relatório/dashboard) — mesma faixa, com borda
   completa e raio; substitui o style inline repetido nos relatórios. */
.ms-kpi-strip--boxed, .op-kpi-strip--boxed {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  margin-bottom: 16px;
}
.ms-kpi, .op-kpi {
  /* min-width:0 — sem isso um card com label/subtítulo longo ("Atingimento
     de Meta" + "Sem meta cadastrada pro período") recusa encolher abaixo do
     próprio texto e empurra a faixa inteira pra fora do container. */
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 20px; background: var(--ms-surface);
  border-right: 1px solid var(--ms-line);
}
.ms-kpi:last-child, .op-kpi:last-child { border-right: none; }
.ms-kpi-val, .op-kpi-val {
  font-size: var(--ms-text-md); font-weight: 600; color: var(--ms-text);
  font-variant-numeric: tabular-nums;
}
.ms-kpi-lbl, .op-kpi-lbl {
  font-size: var(--ms-text-xs); color: var(--ms-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ms-kpi-sub, .op-kpi-sub {
  font-size: var(--ms-text-xs); color: var(--ms-muted-lt);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
/* Métrica em destaque — mesmo tile, valor maior e mais pesado, sem mudar a
   cor semântica que já tinha. */
.ms-kpi-hero .ms-kpi-val, .op-kpi-hero .op-kpi-val { font-size: var(--ms-text-lg); font-weight: 700; }
.ms-kpi.is-clickable, .op-kpi.is-clickable { cursor: pointer; transition: background var(--ms-tr); }
.ms-kpi.is-clickable:hover, .op-kpi.is-clickable:hover { background: var(--ms-bg); }
/* Card selecionado num filtro — mesmo tile, com destaque de que é ele que
   está filtrando a lista. */
.ms-kpi.is-active, .op-kpi.is-active { background: var(--ms-accent-soft); box-shadow: inset 0 -2px 0 var(--ms-accent); }
.ms-kpi.is-active .ms-kpi-val, .op-kpi.is-active .op-kpi-val { color: var(--ms-accent); }

/* ── Barra de filtro ── */
.ms-filterbar, .op-filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--ms-surface);
  border-bottom: 1px solid var(--ms-line); flex-shrink: 0;
}
.ms-filter-sel, .op-filter-sel { height: 32px; font-size: var(--ms-text-sm); min-width: 130px; max-width: 190px; }
.ms-date-range, .op-date-range { display: flex; align-items: center; gap: 6px; }
.ms-date-input, .op-date-input { height: 32px; font-size: var(--ms-text-sm); width: 130px; }
.ms-date-sep, .op-date-sep { font-size: var(--ms-text-sm); color: var(--ms-muted-lt); }
.ms-filter-badge, .op-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: var(--ms-radius-full);
  background: var(--ms-accent); color: #fff;
  font-size: 10px; font-weight: 700; margin-left: 4px;
}

/* ── Navegação de período (‹ Julho 2026 › Hoje) ── */
.ms-period-nav, .op-period-nav {
  display: flex; align-items: center; gap: 2px; height: 32px;
  padding: 0 4px;
  border: 1px solid var(--ms-line-strong); border-radius: var(--ms-radius);
  background: var(--ms-surface);
}
.ms-period-arrow, .op-period-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: none; background: none; border-radius: var(--ms-radius-sm);
  color: var(--ms-muted); cursor: pointer;
  transition: background var(--ms-tr), color var(--ms-tr);
}
.ms-period-arrow:hover, .op-period-arrow:hover { background: var(--ms-bg); color: var(--ms-accent); }
.ms-period-atual, .op-period-atual {
  min-width: 104px; text-align: center;
  font-size: var(--ms-text-sm); font-weight: 600; color: var(--ms-text);
  white-space: nowrap;
}
.ms-period-hoje, .op-period-hoje {
  height: 24px; padding: 0 8px; margin-left: 2px;
  border: none; border-left: 1px solid var(--ms-line); border-radius: 0;
  background: none; color: var(--ms-muted);
  font-size: var(--ms-text-xs); cursor: pointer;
  transition: color var(--ms-tr);
}
.ms-period-hoje:hover, .op-period-hoje:hover { color: var(--ms-accent); }

/* ── Filtro multi-seleção (dropdown checkbox) ── */
.ms-msel, .op-ms { position: relative; }
.ms-msel-btn, .op-ms-btn {
  display: flex; align-items: center; gap: 6px;
  min-width: 130px; max-width: 190px; height: 32px; padding: 0 10px;
  border: 1px solid var(--ms-line-strong); border-radius: var(--ms-radius);
  background: var(--ms-surface); color: var(--ms-text);
  font-size: var(--ms-text-sm); cursor: pointer; white-space: nowrap;
  transition: border-color var(--ms-tr), color var(--ms-tr);
}
.ms-msel-btn:hover, .op-ms-btn:hover { border-color: var(--ms-accent); }
.ms-msel-btn.is-filled, .op-ms-btn.is-filled { border-color: var(--ms-accent); color: var(--ms-accent); }
.ms-msel-label, .op-ms-label { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ms-msel-caret, .op-ms-caret { color: var(--ms-muted-lt); flex-shrink: 0; }
.ms-msel-menu, .op-ms-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--ms-surface); border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius); box-shadow: var(--ms-shadow-md); padding: 6px;
}
.ms-msel-opt, .op-ms-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-sm); color: var(--ms-text); cursor: pointer;
}
.ms-msel-opt:hover, .op-ms-opt:hover { background: var(--ms-bg); }
.ms-msel-opt input, .op-ms-opt input { cursor: pointer; flex-shrink: 0; }
.ms-msel-header, .op-ms-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 3px;
  font-size: var(--ms-text-xs); font-weight: 600;
  color: var(--ms-muted-lt); text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; border-radius: var(--ms-radius-sm);
  transition: color var(--ms-tr), background var(--ms-tr);
}
.ms-msel-header:not(:first-child), .op-ms-header:not(:first-child) { border-top: 1px solid var(--ms-line); margin-top: 4px; }
.ms-msel-header:hover, .op-ms-header:hover { color: var(--ms-accent); background: var(--ms-bg); }
.ms-msel-header > span, .op-ms-header > span { flex: 1; }
.ms-msel-header.is-sel, .op-ms-header.is-sel { color: var(--ms-accent); }
.ms-msel-header.is-sel::after, .op-ms-header.is-sel::after { content: '✓'; font-size: 11px; flex-shrink: 0; }

/* ── Indicador de ordenação de coluna ── */
.ms-sort-ic, .op-sort-ic { margin-left: 3px; }
.ms-sort-ic::after, .op-sort-ic::after { content: '↕'; color: var(--ms-muted-lt); font-size: 10px; }
th[data-asc] .ms-sort-ic::after,  th[data-asc] .op-sort-ic::after  { content: '↑'; color: var(--ms-accent); }
th[data-desc] .ms-sort-ic::after, th[data-desc] .op-sort-ic::after { content: '↓'; color: var(--ms-accent); }

/* ── Cabeçalho ordenável com clique direto no <th> (telas client-side, sem <a> interno) —
   contrapartida de .ms-th-sort (linha ~562), usado em telas server-side com link no cabeçalho.
   A seta (↕/↑/↓) é a mesma .ms-sort-ic acima, via th[data-asc]/th[data-desc] genérico. ── */
th.ms-th-sort {
  display: table-cell;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.ms-th-sort:hover { color: var(--ms-text); }
th.ms-th-sort[data-asc], th.ms-th-sort[data-desc] { color: var(--ms-accent); }
th.ms-th-sort > a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Paginação "Anterior/Próxima" abaixo de tabela, com contador "1–50 de 832" ── */
.ms-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-3);
}
.ms-pager-info {
  font-size: var(--ms-text-xs);
  color: var(--ms-muted);
}

/* ── Lista ranqueada com barra de proporção ──
   Nome/rótulo + N colunas numéricas + linha de Total fixa, ordenável por
   qualquer coluna. Cada instância define --ms-ranking-cols conforme o número
   de colunas (o Pipeline ainda passa --rl-ranking-cols; os dois valem).
   Prefere isso a gráfico: comparar poucas categorias por comprimento de barra
   lê mais rápido que por ângulo de pizza. */
.ms-ranking-lista, .rl-ranking-lista { border: 1px solid var(--ms-line); border-radius: var(--ms-radius-lg); overflow: hidden; }
.ms-ranking-head, .ms-ranking-row, .rl-ranking-head, .rl-ranking-row {
  display: grid;
  grid-template-columns: var(--ms-ranking-cols, var(--rl-ranking-cols, 1fr 90px 90px));
  gap: 12px; align-items: center;
  padding: 10px 16px;
}
.ms-ranking-head, .rl-ranking-head {
  font-size: var(--ms-text-xs); color: var(--ms-muted); text-transform: uppercase; letter-spacing: .04em;
  background: var(--ms-bg); border-bottom: 1px solid var(--ms-line);
}
.ms-ranking-head span:not(:first-child), .rl-ranking-head span:not(:first-child) { text-align: right; }
.ms-ranking-th, .rl-ranking-th { cursor: pointer; user-select: none; }
.ms-ranking-th:hover, .rl-ranking-th:hover { color: var(--ms-text); }
.ms-ranking-th .ms-sort-ic::after,
.rl-ranking-th .op-sort-ic::after { content: '↕'; margin-left: 3px; color: var(--ms-muted-lt); font-size: 10px; }
.ms-ranking-th[data-asc], .ms-ranking-th[data-desc],
.rl-ranking-th[data-asc], .rl-ranking-th[data-desc] { color: var(--ms-accent); }
.ms-ranking-th[data-asc] .ms-sort-ic::after,
.rl-ranking-th[data-asc] .op-sort-ic::after  { content: '↑'; color: var(--ms-accent); }
.ms-ranking-th[data-desc] .ms-sort-ic::after,
.rl-ranking-th[data-desc] .op-sort-ic::after { content: '↓'; color: var(--ms-accent); }
.ms-ranking-row, .rl-ranking-row { border-bottom: 1px solid var(--ms-line); }
.ms-ranking-row:last-child, .rl-ranking-row:last-child { border-bottom: none; }
.ms-ranking-row.is-clickable, .rl-ranking-row.is-clickable { cursor: pointer; transition: background var(--ms-tr); }
.ms-ranking-row.is-clickable:hover, .rl-ranking-row.is-clickable:hover { background: var(--ms-bg); }
.ms-ranking-row--total, .rl-ranking-row--total { background: var(--ms-accent-soft); font-weight: 700; }
.ms-ranking-row--total .ms-ranking-nome span,
.ms-ranking-row--total .ms-ranking-num,
.rl-ranking-row--total .rl-ranking-nome span,
.rl-ranking-row--total .rl-ranking-num { font-weight: 700; color: var(--ms-accent); }
.ms-ranking-id, .rl-ranking-id { display: flex; align-items: center; gap: var(--ms-space-3); min-width: 0; }
.ms-ranking-avatar, .rl-ranking-avatar {
  /* Grande de propósito na Vendas por comercial — roda numa TV de parede,
     longe de quem olha. */
  width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ms-text-xl); font-weight: 700; color: var(--ms-surface);
  object-fit: cover; /* sem efeito em <div> — só entra em jogo quando é <img> (foto cadastrada) */
}
.ms-ranking-nome, .rl-ranking-nome { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ms-ranking-nome span, .rl-ranking-nome span {
  font-size: var(--ms-text-sm); font-weight: 600; color: var(--ms-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-ranking-bar, .rl-ranking-bar { height: 5px; background: var(--ms-bg); border-radius: var(--ms-radius-full); overflow: hidden; }
.ms-ranking-bar-fill, .rl-ranking-bar-fill { height: 100%; background: var(--ms-accent); border-radius: var(--ms-radius-full); }
.ms-ranking-breakdown, .rl-ranking-breakdown {
  font-size: var(--ms-text-xs); color: var(--ms-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-ranking-num, .rl-ranking-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: var(--ms-text-sm); color: var(--ms-text);
}
.ms-ranking-num.is-clickable, .rl-ranking-num.is-clickable { cursor: pointer; }
.ms-ranking-num.is-clickable:hover, .rl-ranking-num.is-clickable:hover { color: var(--ms-accent); text-decoration: underline; }

/* ── Cabeçalho e rodapé de drill-down ── */
.ms-drill-head, .rl-drill-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.ms-drill-foot, .rl-drill-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 2px 0;
}