/* ============================================================
 * File: css/tools/http.css
 * Module: Tool CSS — HTTP Status Codes
 * ============================================================ */

/* Scrollable results area */
#dt-http-list {
  max-height: 460px;
  overflow-y: auto;
  padding: 8px 0;
}

/* Section per class (1xx, 2xx, …) */
.dt-http-section {
  display: flex;
  flex-direction: column;
  padding: 0 12px 8px;
}

.dt-http-section + .dt-http-section {
  padding-top: 8px;
}

.dt-http-section__head {
  padding: 6px 4px 8px;

  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);

  position: sticky;
  top: 0;
  background-color: var(--color-surface);
  z-index: 1;
}

.dt-http-section__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Each row: badge + text + copy */
.dt-http-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 8px 10px;
  border-radius: var(--radius-md);

  transition: background-color var(--duration-fast) var(--ease-standard);
}

.dt-http-row:hover {
  background-color: var(--color-hover);
}

.dt-http-row:hover .dt-btn--ghost {
  background-color: var(--color-surface);
}

/* Code badge */
.dt-http-code {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 3px 8px;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-align: center;

  border-radius: var(--radius-sm);
  border: var(--border-thin) solid transparent;
}

.dt-http-code--info {
  background-color: var(--color-info-soft);
  color: var(--color-info);
}
.dt-http-code--success {
  background-color: var(--color-success-soft);
  color: var(--color-success);
}
.dt-http-code--warning {
  background-color: var(--color-warning-soft);
  color: var(--color-warning);
}
.dt-http-code--danger {
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}
.dt-http-code--accent {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Text column */
.dt-http-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dt-http-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.dt-http-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}