/*
 * Summary: Project-level overrides and glue styles for Hauth.
 * Responsibilities: Apply layout tweaks and fill minor gaps on top of HPortal defaults.
 * Notes: Keeps custom styling intentionally small to preserve the design system language.
 * 
 * Date: 18/04/2026
 */

:root {
  --hp-lh-tight: 1.2;
}

.hp-form-group input,
.hp-form-group textarea,
.hp-form-group select {
  width: 100%;
}

code {
  font-family: var(--hp-ff-mono);
}

/* Remove browser-default top margin on lists inside Panel bodies
   to avoid doubling up with the panel's own padding. */
.hp-panel__body > .hp-sumlist {
  margin-top: 0;
}

/* Simple stat card: box with big centered number and label */
.hauth-stat-card {
  border: 5px solid var(--hp-clr-main);
  text-align: center;
  padding: var(--hp-sp-4) var(--hp-sp-3);
}

.hauth-stat-card__number {
  font-size: var(--hp-fs-3xl);
  font-weight: var(--hp-fw-bold);
  line-height: 1;
  margin: 0 0 var(--hp-sp-2) 0;
}

.hauth-stat-card__label {
  font-size: var(--hp-fs-lg);
  font-weight: var(--hp-fw-bold);
  margin: 0;
}

.hauth-page-heading {
  align-items: flex-start;
  display: flex;
  gap: var(--hp-sp-4);
  justify-content: space-between;
}

.hauth-page-heading .hp-heading-xl,
.hauth-page-heading .hp-body-l {
  margin-bottom: 0;
}

.hauth-secret-box {
  background: var(--hp-clr-bg-light);
  border-left: 5px solid var(--hp-clr-main);
  overflow-wrap: anywhere;
  padding: var(--hp-sp-4);
}

.hauth-qr img {
  border: 1px solid var(--hp-clr-border-light);
  display: block;
  height: 220px;
  width: 220px;
}

.hp-u-ml-3 {
  margin-left: var(--hp-sp-3);
}

/* Keep destructive actions inside compact summary-list rows aligned with text. */
.hauth-compact-button {
  margin-bottom: 0;
}