/* =========================
   TWT Theme tokens (premium layer)
   ========================= */

.twt-tcrm{
  --twt-primary:#2563eb;
  --twt-primary-hover:#1d4ed8;
  --twt-bg:#f6f7f7;
  --twt-surface:#ffffff;
  --twt-surface-2:rgba(255,255,255,0.7);
  --twt-text:#111827;
  --twt-muted:rgba(17,24,39,0.70);
  --twt-border:rgba(0,0,0,0.10);

  --twt-font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --twt-font-size:16px;
  --twt-h3-size:18px;

  --twt-radius:14px;
  --twt-card-padding:16px;
  --twt-gap:12px;
  --twt-btn-font-size:15px;

  font-family:var(--twt-font);
  font-size:var(--twt-font-size);
  color:var(--twt-text);
}

.twt-tcrm{
  background:transparent;
}

/* Cards e secções */
.twt-tcrm .twt-tcrm-section{
  background:var(--twt-surface) !important;
  border:1px solid var(--twt-border) !important;
  border-radius:var(--twt-radius) !important;
  padding:var(--twt-card-padding) !important;
  box-shadow:0 1px 0 rgba(0,0,0,0.04);
}

.twt-tcrm .twt-tcrm-section-title{
  font-size:var(--twt-h3-size) !important;
  letter-spacing:-0.01em;
}

/* Inputs */
.twt-tcrm .twt-tcrm-field input[type="text"],
.twt-tcrm .twt-tcrm-field input[type="number"],
.twt-tcrm .twt-tcrm-field input[type="email"],
.twt-tcrm .twt-tcrm-field input[type="date"],
.twt-tcrm .twt-tcrm-field input[type="time"],
.twt-tcrm .twt-tcrm-field textarea,
.twt-tcrm .twt-tcrm-field select{
  border:1px solid var(--twt-border) !important;
  border-radius:calc(var(--twt-radius) - 4px) !important;
  background:var(--twt-surface) !important;
}

.twt-tcrm .twt-tcrm-field input:focus,
.twt-tcrm .twt-tcrm-field textarea:focus,
.twt-tcrm .twt-tcrm-field select:focus{
  border-color:color-mix(in srgb, var(--twt-primary) 65%, var(--twt-border)) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--twt-primary) 18%, transparent) !important;
}

/* Choices (radio/checkbox) */
.twt-tcrm .twt-tcrm-choice{
  border:1px solid var(--twt-border) !important;
  border-radius:calc(var(--twt-radius) - 4px) !important;
  background:color-mix(in srgb, var(--twt-bg) 55%, transparent) !important;
}

/* Buttons */
.twt-tcrm .twt-tcrm-btn,
.twt-tcrm button.twt-tcrm-btn,
.twt-tcrm a.twt-tcrm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:calc(var(--twt-radius) - 4px);
  padding:10px 14px;
  border:1px solid var(--twt-border);
  font-size:var(--twt-btn-font-size);
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}

.twt-tcrm .twt-tcrm-btn-primary{
  background:var(--twt-primary) !important;
  border-color:color-mix(in srgb, var(--twt-primary) 75%, #000) !important;
  color:#fff !important;
}

.twt-tcrm .twt-tcrm-btn-primary:hover{
  background:var(--twt-primary-hover, var(--twt-primary)) !important;
}


/* Add these blocks at the end of your theme.css */

/* Wizard */
.twt-tcrm-wizard {
  margin-top: 10px;
}

.twt-tcrm-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px 0;
}

.twt-tcrm-progress-bar {
  flex: 1;
  height: 10px;
  background: var(--twt-surface-2);
  border: 1px solid var(--twt-border);
  border-radius: 999px;
  overflow: hidden;
}

.twt-tcrm-progress-fill {
  display: block;
  height: 100%;
  background: var(--twt-primary);
  width: 0%;
}

.twt-tcrm-progress-label {
  min-width: 48px;
  text-align: right;
  color: var(--twt-muted);
  font-weight: 700;
}

/* Wizard actions */
.twt-tcrm-wizard-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.twt-tcrm-btn-secondary {
  background: transparent !important;
  color: var(--twt-primary) !important;
  border-color: var(--twt-border) !important;
}

/* Width helpers (presets) */
.twt-tcrm-col { width: 100%; }
.twt-tcrm-w-25 { width: 25%; }
.twt-tcrm-w-33 { width: 33.3333%; }
.twt-tcrm-w-50 { width: 50%; }
.twt-tcrm-w-66 { width: 66.6667%; }
.twt-tcrm-w-75 { width: 75%; }
.twt-tcrm-w-100 { width: 100%; }

/* Ensure grid respects manual widths */
.twt-tcrm-flexgrid{
  display:flex;
  flex-wrap:wrap;
  gap: var(--twt-gap);
}

.twt-tcrm-cols-2 > .twt-tcrm-col {
  /* allow widths to work inside */
}

/* On small screens: full width */
@media (max-width: 700px) {
  .twt-tcrm-w-25,
  .twt-tcrm-w-33,
  .twt-tcrm-w-50,
  .twt-tcrm-w-66,
  .twt-tcrm-w-75 {
    width: 100%;
  }
}
/* =========================
   TWT Fix pack, layout e scroll hardening
   Coloca no FIM do theme.css
   ========================= */

/* 1) Permitir encolher dentro de flex e grid, evita tabelas a rebentar layout */
.twt-tcrm,
.twt-tcrm .twt-tcrm-section,
.twt-tcrm .twt-tcrm-card,
.twt-tcrm .twt-tcrm-grid,
.twt-tcrm .twt-tcrm-col{
  min-width: 0;
}

/* 2) Grid do wizard, garantir que as widths funcionam em flex */
.twt-tcrm .twt-tcrm-col{
  flex: 0 0 auto;
  max-width: 100%;
}

.twt-tcrm .twt-tcrm-w-25{ flex-basis: 25%; width: 25%; }
.twt-tcrm .twt-tcrm-w-33{ flex-basis: 33.3333%; width: 33.3333%; }
.twt-tcrm .twt-tcrm-w-50{ flex-basis: 50%; width: 50%; }
.twt-tcrm .twt-tcrm-w-66{ flex-basis: 66.6667%; width: 66.6667%; }
.twt-tcrm .twt-tcrm-w-75{ flex-basis: 75%; width: 75%; }
.twt-tcrm .twt-tcrm-w-100{ flex-basis: 100%; width: 100%; }

/* 3) Garantir que qualquer wrapper de tabela dentro de TWT faz scroll sem drama */
.twt-tcrm .twt-tcrm-table-wrap{
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 4) Se alguma tabela for filha directa de um card/section, não a deixes rebentar */
.twt-tcrm table{
  max-width: 100%;
}