.hf-services,
.hf-service-detail {
  display: grid;
  gap: .875rem;
  max-inline-size: 84rem;
  margin-inline: auto;
}

.hf-services-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hf-space-2);
}
.hf-services-summary span {
  display: inline-flex;
  align-items: center;
  gap: var(--hf-space-2);
  min-block-size: 2.25rem;
  padding-inline: var(--hf-space-3);
  border: 1px solid var(--hf-color-border);
  border-radius: 999px;
  background: var(--hf-color-surface);
  color: var(--hf-color-text-muted);
  font-size: .84rem;
}
.hf-services-summary strong { color: var(--hf-color-text); }

.hf-services-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(10rem, 1fr) minmax(10rem, 1fr);
  gap: .625rem;
  padding: .625rem;
  align-items: end;
}
.hf-services-toolbar .hf-field > span { color: var(--hf-color-text-muted); font-size: .82rem; font-weight: 500; }
.hf-services-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .625rem;
}
.hf-services-no-results[hidden] { display: none; }

.hf-service-card {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(16rem, 1.35fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  transition: transform var(--hf-motion-normal) var(--hf-ease), border-color var(--hf-motion-normal) var(--hf-ease), box-shadow var(--hf-motion-normal) var(--hf-ease);
}
.hf-service-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--hf-color-primary) 20%, var(--hf-color-border));
  box-shadow: var(--hf-shadow-md);
}
.hf-service-card[hidden] { display: none; }
.hf-service-card__head,
.hf-service-card__identity,
.hf-service-card__footer {
  display: flex;
  align-items: center;
}
.hf-service-card__head { justify-content: space-between; gap: var(--hf-space-4); }
.hf-service-card__identity { min-inline-size: 0; gap: var(--hf-space-3); }
.hf-service-card__icon {
  inline-size: 2.375rem;
  block-size: 2.375rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--hf-radius-md);
  color: var(--hf-color-primary);
  background: color-mix(in srgb, var(--hf-color-primary) 8%, var(--hf-color-surface));
}
.hf-service-card__identity > div:last-child { min-inline-size: 0; }
.hf-service-card__identity h2 { margin: 0; overflow-wrap: anywhere; }
.hf-service-card__identity p { margin: var(--hf-space-1) 0 0; color: var(--hf-color-text-muted); font-size: .84rem; overflow-wrap: anywhere; text-align: right; }
.hf-service-card__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(7rem, 1fr));
  gap: .5rem;
  margin: 0;
}
.hf-service-card__meta > div {
  min-inline-size: 0;
  padding: .35rem .45rem;
  border-radius: var(--hf-radius-sm);
  background: color-mix(in srgb, var(--hf-color-surface-muted) 55%, var(--hf-color-surface));
}
.hf-service-card__meta dt { color: var(--hf-color-text-muted); font-size: .76rem; }
.hf-service-card__meta dd { margin: var(--hf-space-1) 0 0; font-weight: 500; overflow-wrap: anywhere; }
.hf-service-card__footer { justify-content: flex-end; gap: .5rem; padding-block-start: 0; border-block-start: 0; }
.hf-service-card__group { display: none; color: var(--hf-color-text-muted); font-size: .78rem; }

.hf-service-detail__hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .875rem;
  padding: .875rem;
}
.hf-service-detail__identity { min-inline-size: 0; display: flex; align-items: center; gap: var(--hf-space-4); }
.hf-service-detail__icon {
  inline-size: 3rem;
  block-size: 3rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--hf-radius-lg);
  color: var(--hf-color-primary);
  background: color-mix(in srgb, var(--hf-color-primary) 9%, var(--hf-color-surface));
}
.hf-service-detail__identity h1 { margin: var(--hf-space-1) 0 0; overflow-wrap: anywhere; }
.hf-service-detail__identity p { margin: var(--hf-space-1) 0 0; color: var(--hf-color-text-muted); overflow-wrap: anywhere; text-align: right; }
.hf-service-detail__status { display: grid; justify-items: end; gap: var(--hf-space-2); color: var(--hf-color-text-muted); font-size: .8rem; }

.hf-service-warning { display: flex; align-items: center; justify-content: space-between; gap: var(--hf-space-4); }
.hf-service-warning strong { display: block; }
.hf-service-warning p { margin: var(--hf-space-1) 0 0; color: var(--hf-color-text-muted); }
.hf-alert--success { border-color: color-mix(in srgb, var(--hf-color-success) 28%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-success) 7%, var(--hf-color-surface)); }
.hf-alert--danger { border-color: color-mix(in srgb, var(--hf-color-danger) 28%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-danger) 7%, var(--hf-color-surface)); }
.hf-alert--info { border-color: color-mix(in srgb, var(--hf-color-info) 28%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-info) 7%, var(--hf-color-surface)); }
.hf-alert--neutral { background: var(--hf-color-surface-muted); }

.hf-service-nav {
  position: sticky;
  inset-block-start: calc(var(--hf-topbar-height) + var(--hf-space-3));
  z-index: var(--hf-z-sticky);
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-radius-lg);
  background: color-mix(in srgb, var(--hf-color-surface) 94%, transparent);
  box-shadow: var(--hf-shadow-sm);
  overflow-x: auto;
  scrollbar-width: thin;
}
.hf-service-nav a { flex: 0 0 auto; padding: .45rem .75rem; border-radius: var(--hf-radius-md); color: var(--hf-color-text-muted); font-size: .86rem; font-weight: 500; }
.hf-service-nav a:hover { color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 7%, var(--hf-color-surface)); }

.hf-service-section { display: grid; gap: .75rem; scroll-margin-block-start: calc(var(--hf-topbar-height) + 5rem); }
.hf-service-section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--hf-space-4); }
.hf-service-section__head h2,
.hf-service-section__subhead h3 { margin: var(--hf-space-1) 0 0; }
.hf-service-section__head p { margin: var(--hf-space-2) 0 0; color: var(--hf-color-text-muted); }
.hf-service-overview-grid,
.hf-service-config-grid,
.hf-service-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.hf-service-billing-card { display: grid; align-content: start; gap: var(--hf-space-2); }
.hf-service-billing-card > span { color: var(--hf-color-text-muted); }
.hf-service-billing-card > strong { font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
.hf-service-billing-card dl,
.hf-service-addon dl { display: grid; gap: var(--hf-space-3); margin: var(--hf-space-3) 0 0; }
.hf-service-billing-card dl > div,
.hf-service-addon dl > div { display: flex; justify-content: space-between; gap: var(--hf-space-3); }
.hf-service-billing-card dt,
.hf-service-addon dt { color: var(--hf-color-text-muted); }
.hf-service-billing-card dd,
.hf-service-addon dd { margin: 0; font-weight: 500; text-align: left; }

.hf-service-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hf-space-3);
  margin: 0;
}
.hf-service-info-grid__item { min-inline-size: 0; padding: .75rem; border-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); }
.hf-service-info-grid__item dt { color: var(--hf-color-text-muted); font-size: .76rem; }
.hf-service-info-grid__item dd { margin: var(--hf-space-1) 0 0; font-weight: 500; overflow-wrap: anywhere; }

.hf-service-actions { display: flex; flex-wrap: wrap; gap: var(--hf-space-3); }
.hf-service-action-form { display: inline-flex; margin: 0; }
.hf-service-password { grid-column: 1 / -1; padding: var(--hf-space-4); }
.hf-service-password summary { cursor: pointer; font-weight: 500; }
.hf-service-password form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: var(--hf-space-3); align-items: end; margin-block-start: var(--hf-space-4); }

.hf-service-adapter__brand { display: inline-flex; align-items: center; min-block-size: 2rem; padding-inline: var(--hf-space-3); border-radius: 999px; color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 8%, var(--hf-color-surface)); font-size: .8rem; font-weight: 500; }
.hf-service-adapter__body { display: grid; gap: .875rem; }
.hf-service-adapter__hint { margin: 0; padding-block-start: var(--hf-space-3); border-block-start: 1px solid var(--hf-color-border); color: var(--hf-color-text-muted); font-size: .82rem; }

.hf-service-addon-list { padding: 0; overflow: hidden; }
.hf-service-addon-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.hf-service-addon-table th,
.hf-service-addon-table td { padding: .7rem .85rem; border-block-end: 1px solid var(--hf-color-border); text-align: start; vertical-align: middle; }
.hf-service-addon-table th { color: var(--hf-color-text-muted); background: var(--hf-color-surface-muted); font-size: .78rem; font-weight: 500; }
.hf-service-addon-table tbody tr:last-child td { border-block-end: 0; }
.hf-service-addon-table tbody tr:hover td { background: color-mix(in srgb, var(--hf-color-primary) 3%, var(--hf-color-surface)); }
.hf-service-addon-name { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-inline-size: 0; }
.hf-service-addon-name strong { overflow-wrap: anywhere; }
.hf-service-addon-actions { display: inline-flex; align-items: center; gap: .35rem; }
.hf-service-addon-actions :is(a, button, input[type="submit"]) { padding-inline: .55rem; }
.hf-module-inline-actions { padding-block-start: var(--hf-space-3); border-block-start: 1px solid var(--hf-color-border); overflow-wrap: anywhere; }

.hf-service-resource-grid .hf-card { display: grid; gap: var(--hf-space-2); }
.hf-service-resource-grid span,
.hf-service-resource-grid small { color: var(--hf-color-text-muted); }
.hf-service-resource-grid strong { font-size: 1.5rem; }

.hf-module-output {
  min-inline-size: 0;
  padding: var(--hf-space-5);
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-radius-lg);
  background: var(--hf-color-surface);
  overflow-x: auto;
  overflow-wrap: anywhere;
}
.hf-module-output img { max-inline-size: 100%; block-size: auto; }
.hf-module-output table { inline-size: 100%; }
.hf-module-output .row { max-inline-size: 100%; margin-inline: 0; }

.hf-service-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hf-space-5);
  border-color: color-mix(in srgb, var(--hf-color-danger) 22%, var(--hf-color-border));
}
.hf-service-danger-zone h2 { margin: var(--hf-space-1) 0 0; }
.hf-service-danger-zone p { margin: var(--hf-space-2) 0 0; color: var(--hf-color-text-muted); }
.hf-service-hook-output { min-inline-size: 0; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .hf-services-list { grid-template-columns: 1fr; }
  .hf-services-toolbar { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(9rem, .6fr)); }
}

@media (max-width: 767px) {
  .hf-services-list { grid-template-columns: 1fr; }
  .hf-service-card { grid-template-columns: 1fr; align-items: stretch; }
  .hf-services,
  .hf-service-detail { gap: var(--hf-space-4); }
  .hf-services-toolbar { grid-template-columns: 1fr; padding: var(--hf-space-4); }
  .hf-services-toolbar__search { grid-column: auto; }
  .hf-service-card { padding: 1rem; gap: 1rem; }
  .hf-service-card__head { align-items: start; }
  .hf-service-card__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-service-card__footer { align-items: stretch; flex-direction: column; padding-block-start: .75rem; border-block-start: 1px solid var(--hf-color-border); }
  .hf-service-card__footer .hf-btn { inline-size: 100%; }
  .hf-service-detail__hero { align-items: start; flex-direction: column; padding: 1rem; }
  .hf-service-detail__status { justify-items: start; }
  .hf-service-warning { align-items: stretch; flex-direction: column; }
  .hf-service-warning .hf-btn { inline-size: 100%; }
  .hf-service-nav { inset-block-start: var(--hf-space-2); margin-inline: calc(var(--hf-space-4) * -1); border-inline: 0; border-radius: 0; }
  .hf-service-overview-grid,
  .hf-service-config-grid,
  .hf-service-resource-grid { grid-template-columns: 1fr; }
  .hf-service-info-grid { grid-template-columns: 1fr; }
  .hf-service-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-service-actions .hf-btn,
  .hf-service-action-form { inline-size: 100%; }
  .hf-service-action-form .hf-btn { inline-size: 100%; }
  .hf-service-password form { grid-template-columns: 1fr; }
  .hf-service-danger-zone { align-items: stretch; flex-direction: column; padding: var(--hf-space-4); }
  .hf-service-danger-zone .hf-btn { inline-size: 100%; }
  .hf-module-output { padding: var(--hf-space-4); }
}

@media (max-width: 720px) {
  .hf-service-addon-list { padding: .65rem; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .hf-service-addon-table,
  .hf-service-addon-table tbody,
  .hf-service-addon-table tr,
  .hf-service-addon-table td { display: block; inline-size: 100%; }
  .hf-service-addon-table thead { display: none; }
  .hf-service-addon-table tbody { display: grid; gap: .65rem; }
  .hf-service-addon-table tr { padding: .55rem .75rem; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface); box-shadow: var(--hf-shadow-sm); }
  .hf-service-addon-table td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-block-end: 1px solid var(--hf-color-border); }
  .hf-service-addon-table td:last-child { border-block-end: 0; }
  .hf-service-addon-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--hf-color-text-muted); font-size: .76rem; font-weight: 500; }
  .hf-service-addon-name { justify-content: flex-end; text-align: end; }
}

@media (max-width: 430px) {
  .hf-service-card__meta,
  .hf-service-actions { grid-template-columns: 1fr; }
  .hf-services-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-services-summary span { justify-content: center; }
}

/* Server-side service pagination with AJAX enhancement. */
.hf-services { position: relative; }
.hf-services.is-loading [data-hf-service-items],
.hf-services.is-loading [data-hf-service-pagination],
.hf-services.is-loading .hf-services-no-results {
  opacity: .42;
  pointer-events: none;
  transition: opacity var(--hf-motion-fast) var(--hf-ease);
}
.hf-services.is-loading::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 13rem;
  z-index: 3;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  margin-inline-start: -.8rem;
  border: 2px solid color-mix(in srgb, var(--hf-color-primary) 18%, var(--hf-color-border));
  border-block-start-color: var(--hf-color-primary);
  border-radius: 50%;
  animation: hf-service-spin .7s linear infinite;
}
@keyframes hf-service-spin { to { transform: rotate(360deg); } }

.hf-services-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .75rem;
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-radius-lg);
  background: var(--hf-color-surface);
}
.hf-services-pagination__meta { margin: 0; color: var(--hf-color-text-muted); }
.hf-services-pagination__controls,
.hf-services-pagination__pages { display: flex; align-items: center; gap: .35rem; }
.hf-services-pagination__page {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.35rem;
  block-size: 2.35rem;
  padding-inline: .45rem;
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-radius-md);
  background: var(--hf-color-surface);
  color: var(--hf-color-text-muted);
}
.hf-services-pagination__page:hover { color: var(--hf-color-primary); border-color: color-mix(in srgb, var(--hf-color-primary) 28%, var(--hf-color-border)); }
.hf-services-pagination__page.is-active { color: white; border-color: transparent; background: var(--hf-gradient-primary); }
.hf-services-pagination__gap { color: var(--hf-color-text-muted); padding-inline: .15rem; }
.hf-services-pagination__nav { min-inline-size: auto; }

@media (max-width: 767px) {
  .hf-services-pagination { align-items: stretch; flex-direction: column; }
  .hf-services-pagination__meta { text-align: center; }
  .hf-services-pagination__controls { justify-content: space-between; }
  .hf-services-pagination__pages { max-inline-size: 100%; overflow-x: auto; padding-block-end: .2rem; }
  .hf-services-pagination__nav { flex: 0 0 auto; }
}