/* Settings tabs: content column + right rail (Settings Proposal design).
   Single column below lg, 2fr/1fr above. */
.settings-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (min-width: 1024px) {
  .settings-cols {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* Settings cards: exact spacing from the design (header 24/24/0, body 16/24/24,
   10px row rhythm). Plain CSS because pt-4 / space-y-2.5 / gap-2.5 are not in the
   precompiled Tailwind bundle. Used by both columns. */
.rail-header {
  padding: 24px 24px 0;
}
.rail-body {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.rail-body p {
  margin: 0;
}
.rail-body-roomy {
  gap: 20px;
}
/* the email notification category groups breathe more than text rows */
.rail-body-groups {
  gap: 24px;
}
.rail-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rail-bullet svg {
  flex-shrink: 0;
  margin-top: 2px;
}
/* section label inside the branding Live Preview (text-[11px] / mb-2 not in bundle).
   Must out-specify ".rail-body p { margin: 0 }". */
.rail-body p.rail-caption {
  font-size: 11px;
  margin: 0 0 8px;
}

/* "New" pill on a settings tab */
.tab-new-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

/* HRIS sync frequency: Daily / Manual only, radios drawn as pills
   (peer-checked and the pill padding are not in the Tailwind bundle). */
.hris-frequency {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid hsl(var(--border));
}
.hris-frequency input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.hris-frequency label span {
  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.hris-frequency label input:checked + span {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}
.hris-frequency label input:focus-visible + span {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.webhook-url {
  max-width: 12rem;
}