/* Modern student management styling — Vem da Escola */
.vde-form {
  max-width: 880px;
  padding: var(--space-5, 24px);
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #dce5e7);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 2px 8px rgba(23, 47, 66, 0.04));
  display: grid;
  gap: var(--space-4, 16px);
}
.vde-form > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #223747);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.vde-form > input:not([type="checkbox"]),
.vde-form > select,
.vde-form > textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--field-line, #adbfc4);
  border-radius: var(--radius-control, 10px);
  color: var(--ink, #223747);
  background: var(--surface, #ffffff);
  transition: border-color var(--ease, 140ms ease), box-shadow var(--ease, 140ms ease);
}
.vde-form > input:focus-visible,
.vde-form > select:focus-visible,
.vde-form > textarea:focus-visible {
  outline: 3px solid var(--focus, #176bba);
  outline-offset: 2px;
  border-color: var(--primary, #1464de);
}
.vde-checkbox {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-3, 12px) !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 550 !important;
  color: var(--ink, #223747);
  cursor: pointer;
  min-height: 44px;
}
.vde-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  cursor: pointer;
  accent-color: var(--primary, #1464de);
}
.vde-help {
  font-size: 12px;
  color: var(--muted, #596b77);
  margin: -8px 0 var(--space-2, 8px);
  line-height: 1.5;
}
.vde-tip {
  font-size: 13px;
  color: var(--muted, #596b77);
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--soft, #edf4ff);
  border-left: 3px solid var(--primary, #1464de);
  border-radius: 0 var(--radius-control, 10px) var(--radius-control, 10px) 0;
}
.vde-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding-top: var(--space-4, 16px);
  margin-top: var(--space-2, 8px);
  border-top: 1px solid var(--line, #dce5e7);
}

@media (max-width: 768px) {
  .vde-form {
    padding: var(--space-4, 16px);
  }
  .vde-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .vde-buttons > * {
    width: 100%;
  }
}