/**
 * VexaCare — vertical rhythm and spacing between sections, cards and form fields.
 */
:root {
  --vex-section-gap: 2.5rem;
  --vex-block-gap: 1.75rem;
  --vex-card-gap: 1.25rem;
  --vex-form-gap: 1.25rem;
  --vex-stack-lg: 2rem;
  --vex-stack-xl: 2.5rem;
}

/* ── Page sections (homepage / tailwind layouts) ──────────────────────── */
.homepage-body > section + section {
  margin-top: var(--vex-section-gap);
}

.homepage-body > section {
  scroll-margin-top: 6rem;
}

/* Boost default Tailwind stack utilities site-wide */
.homepage-body .space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.875rem;
}

.homepage-body .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.25rem;
}

.homepage-body .space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.5rem;
}

.homepage-body .space-y-6 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--vex-stack-lg);
}

.homepage-body .space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: var(--vex-stack-xl);
}

.homepage-body .space-y-10 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 3rem;
}

/* Grids without explicit gap */
.homepage-body .grid:not([class*="gap-"]) {
  gap: var(--vex-card-gap);
}

/* ── Forms: label always above field ──────────────────────────────────── */
.homepage-body label.form-control,
.homepage-body .form-control:has(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.homepage-body .form-control .label-text,
.homepage-body .form-control .label {
  width: 100%;
  padding-inline: 0;
  padding-block: 0;
  margin: 0;
  justify-content: flex-start;
  text-align: left;
}

.homepage-body .vex-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.homepage-body .vex-form-field + .vex-form-field,
.homepage-body .form-control + .form-control {
  margin-top: var(--vex-form-gap);
}

/* Grid/row: adjacent-sibling margin drops the 2nd cell. gap already spaces the row.
   Profile registration groups are CSS grids without the Tailwind "grid" class. */
.homepage-body .grid > .form-control,
.homepage-body .grid > .vex-form-field,
.homepage-body .grid > label.form-control,
.homepage-body .flex:not(.flex-col) > .form-control,
.homepage-body .flex:not(.flex-col) > .vex-form-field,
.homepage-body .flex:not(.flex-col) > label.form-control,
.homepage-body .vc-profile-group__fields > .form-control,
.homepage-body .vc-profile-group__fields > .vex-form-field,
.homepage-body .vc-profile-group__fields > label.form-control {
  margin-top: 0 !important;
}

.homepage-body .grid > * + *,
.homepage-body .grid[class*="space-y"] > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

.homepage-body .vex-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--color-base-content) 8%, transparent);
}

@media (max-width: 639px) {
  .homepage-body .vex-form-actions {
    flex-direction: column;
  }

  .homepage-body .vex-form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Blocks: cards, panels, alerts ────────────────────────────────────── */
.homepage-body .alert {
  margin-block: 0;
}

.homepage-body .alert + :is(.rounded-3xl, .rounded-2xl, .card, .grid, .overflow-hidden, .partner-hub-shell, .doctor-invite-dedicated-box, article) {
  margin-top: var(--vex-block-gap);
}

.homepage-body :is(.rounded-3xl, .rounded-2xl, .card, .doctor-invite-dedicated-box) + .alert {
  margin-top: var(--vex-block-gap);
}

.homepage-body .card + .card,
.homepage-body .rounded-3xl + .rounded-3xl,
.homepage-body .rounded-3xl + .rounded-2xl,
.homepage-body .rounded-2xl + .rounded-3xl,
.homepage-body .doctor-invite-dedicated-box + .partner-hub-shell,
.homepage-body .doctor-invite-dedicated-box + :is(.rounded-3xl, .grid, .card) {
  margin-top: var(--vex-block-gap);
}

.homepage-body .grid > .card + .card,
.homepage-body .grid > article.card + article.card,
.homepage-body .grid > .rounded-3xl + .rounded-3xl,
.homepage-body .grid > .rounded-2xl + .rounded-2xl,
.homepage-body .grid > .rounded-3xl + .rounded-2xl,
.homepage-body .grid > .rounded-2xl + .rounded-3xl {
  margin-top: 0 !important;
}

.homepage-body .partner-panel > .grid + .overflow-hidden,
.homepage-body .partner-panel > .grid + .rounded-3xl,
.homepage-body .partner-panel > .overflow-hidden + .overflow-hidden {
  margin-top: var(--vex-block-gap);
}

/* Dedicated invite box separation */
.doctor-invite-dedicated-box {
  margin-bottom: var(--vex-stack-xl) !important;
}

/* Patient / clinical cards list */
.homepage-body article.rounded-2xl + article.rounded-2xl {
  margin-top: 1.25rem;
}

.homepage-body .doctor-copilot-panel {
  margin-bottom: var(--vex-block-gap);
}

/* ── Page stack utility ─────────────────────────────────────────────────── */
.homepage-body .vex-page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--vex-stack-lg);
}

.homepage-body .vex-page-stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--vex-stack-xl);
}

.homepage-body .invite-choice-grid {
  align-items: stretch;
}

.homepage-body .invite-choice-grid > * {
  margin-top: 0 !important;
  min-width: 0;
  height: 100%;
}

.homepage-body .invite-choice-grid > label {
  white-space: normal;
}

/* ── Admin dashboard ──────────────────────────────────────────────────── */
#layoutSidenav_content .container-fluid > .card + .card,
#layoutSidenav_content .container-fluid > .row + .row,
#layoutSidenav_content .container-fluid > .card + .row,
#layoutSidenav_content .container-fluid > .row + .card,
#layoutSidenav_content main .card + .card {
  margin-top: 1.75rem;
}

#layoutSidenav_content .card-body > .table-responsive + .d-flex,
#layoutSidenav_content .card-body > .table + .d-flex {
  margin-top: 1.25rem;
}

#layoutSidenav_content .alert + .card,
#layoutSidenav_content .card + .alert {
  margin-top: 1.25rem;
}

/* ── Legacy bootstrap layout ────────────────────────────────────────────── */
body:not(.homepage-body) .container .card + .card,
body:not(.homepage-body) .container-fluid .card + .card {
  margin-top: 1.5rem;
}

body:not(.homepage-body) section + section {
  margin-top: 2rem;
}