/* ==========================================================================
   CATEQUESE ONLINE — Utilities
   ========================================================================== */

/* ===== Visibility ===== */
.hidden { display: none !important; }
.visible { display: block !important; }

/* ===== Flex ===== */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: flex-start; justify-content: flex-start; }

/* ===== Grid ===== */
.grid-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* ===== Spacing ===== */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-sm-0 { margin-top: 0 !important; }

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }

/* ===== Text ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-muted { color: var(--color-text-secondary); }
.text-small { font-size: var(--font-size-sm); }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 600; }
.font-family-heading { font-family: var(--font-family-heading); }

/* ===== Borders ===== */
.border { border: var(--border-width-thin) solid var(--color-border); }
.border-l { border-left: var(--border-width-thin) solid var(--color-border); }
.rounded { border-radius: var(--radius-base); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ===== Buttons quick ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: var(--border-width-thin) solid transparent; border-radius: var(--radius-base);
  font-family: var(--font-family-base); font-weight: var(--font-weight-medium);
  cursor: pointer; transition: var(--transition-fast); white-space: nowrap;
  padding: var(--space-2) var(--space-4); font-size: var(--font-size-base);
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { background: rgba(0,0,0,0.04); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.btn-full { width: 100%; }

/* ===== Card ===== */
.card {
  background: var(--color-bg); border-radius: var(--radius-xl);
  border: var(--border-width-thick) solid var(--color-gold);
  padding: var(--space-4); box-shadow: var(--shadow);
}

/* ===== Input ===== */
.field { display: block; margin-bottom: var(--space-4); width: 100%; }
.field span { display: block; font-weight: var(--font-weight-medium); margin-bottom: var(--space-1); color: var(--color-text); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--space-2) var(--space-3); font-family: inherit;
  font-size: var(--font-size-base); border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-base); background: var(--color-bg); color: var(--color-text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(23,37,84,0.1);
}
/* A barra de busca. Usa .input-search, que já existe no design system.
   `.field input/select/textarea` estilizam os inputs de FORMULÁRIO, mas a
   busca fica fora de um .field — sem `border` aqui o navegador desenhava a
   borda PRETA default em todas as telas de listagem (catequistas,
   catequisandos, turmas, responsáveis). */
.input-search {
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(23, 37, 84, 0.1);
}

.input-search::placeholder {
  color: var(--color-text-secondary);
}

/* ===== Table ===== */
.cell-progress { position: relative; white-space: nowrap; }
.cell-progress span { position: absolute; right: var(--space-2); font-weight: 600; }

/* ===== Panel note ===== */
.panel-note { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-2); }

/* ===== Tenancy hint ===== */
.tenancy-hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); text-align: center; }

/* ===== Hide scroll === */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }