/* Hestia UI v2 — component library. Prefix hs- to prevent legacy collisions. */
.hs-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hs-space-2);
  min-height: var(--hs-control-height); padding: 8px 15px; border: 1px solid transparent;
  border-radius: var(--hs-radius-sm); font-size: var(--hs-size-body); font-weight: 650;
  white-space: nowrap; text-decoration: none; user-select: none; transition: background .15s var(--hs-ease), border-color .15s var(--hs-ease), transform .15s var(--hs-ease);
}
.hs-button:active:not(:disabled) { transform: translateY(1px); }
.hs-button:disabled { opacity: .52; }
.hs-button--primary { background: var(--hs-primary); color: #fff; }
.hs-button--primary:hover:not(:disabled) { background: var(--hs-primary-hover); }
.hs-button--secondary { background: var(--hs-primary-subtle); border-color: #C5E7E0; color: var(--hs-primary-hover); }
.hs-button--secondary:hover:not(:disabled) { background: #D8EFE9; }
.hs-button--outline { background: #fff; border-color: var(--hs-border); color: var(--hs-body); }
.hs-button--outline:hover:not(:disabled) { border-color: var(--hs-border-strong); background: var(--hs-surface-soft); }
.hs-button--ghost { background: transparent; color: var(--hs-muted); }
.hs-button--ghost:hover:not(:disabled) { background: var(--hs-neutral-surface); color: var(--hs-heading); }
.hs-button--danger { background: var(--hs-danger-surface); color: var(--hs-danger); border-color: #F6D7D2; }
.hs-button--danger:hover:not(:disabled) { background: #FCE1DC; }
.hs-button--sm { min-height: 32px; padding: 5px 10px; font-size: var(--hs-size-sm); }
.hs-button--lg { min-height: var(--hs-control-tap); padding-inline: 18px; }
.hs-button--full { width: 100%; }
.hs-button--loading { pointer-events: none; }
.hs-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hs-spin .75s linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }

.hs-card { min-width: 0; background: var(--hs-surface); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); }
.hs-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hs-space-3); padding: 20px 20px 14px; }
.hs-card__title { margin: 0; font-size: var(--hs-size-h3); font-weight: 750; color: var(--hs-heading); letter-spacing: -.025em; }
.hs-card__description { margin: 5px 0 0; color: var(--hs-muted); font-size: var(--hs-size-sm); }
.hs-card__content { padding: 0 20px 20px; }
.hs-card--compact .hs-card__head { padding: 16px 16px 12px; }
.hs-card--compact .hs-card__content { padding: 0 16px 16px; }

.hs-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap;
  padding: 5px 9px; border: 1px solid transparent; border-radius: var(--hs-radius-full);
  font-size: var(--hs-size-xs); font-weight: 700; line-height: 1.3; }
.hs-chip__dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.hs-chip--success { color: var(--hs-success); background: var(--hs-success-surface); }
.hs-chip--warning { color: var(--hs-warning); background: var(--hs-warning-surface); }
.hs-chip--danger { color: var(--hs-danger); background: var(--hs-danger-surface); }
.hs-chip--neutral { color: var(--hs-neutral); background: var(--hs-neutral-surface); }
.hs-chip--primary { color: var(--hs-primary); background: var(--hs-primary-subtle); }

.hs-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: visible; overscroll-behavior-inline: contain; }
.hs-table { width: 100%; border-spacing: 0; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; }
.hs-table th { background: #FAFBFC; color: var(--hs-muted); font-size: var(--hs-size-sm); font-weight: 700; padding: 12px 15px; border-bottom: 1px solid var(--hs-border); white-space: nowrap; }
.hs-table td { font-size: var(--hs-size-body); padding: 13px 15px; border-bottom: 1px solid var(--hs-border); color: var(--hs-body); }
.hs-table tbody tr:last-child td { border-bottom: 0; }
.hs-table tbody tr:hover { background: #FAFCFB; }
.hs-table th[data-align="right"],.hs-table td[data-align="right"] { text-align: right; }
.hs-table__sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; }
.hs-table__sort:hover { color: var(--hs-primary); }
.hs-table__chevron { font-size: 10px; opacity: .65; }
.hs-table--compact th { padding-block: 9px; }.hs-table--compact td { padding-block: 10px; }

.hs-tabs { display: flex; gap: 5px; border-bottom: 1px solid var(--hs-border); overflow-x: auto; }
.hs-tab { flex: 0 0 auto; min-height: var(--hs-control-tap); padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--hs-muted); font-size: var(--hs-size-body); font-weight: 640; white-space: nowrap; }
.hs-tab:hover:not([aria-selected="true"]) { background: var(--hs-surface-soft); }
.hs-tab[aria-selected="true"] { border-bottom-color: var(--hs-primary); color: var(--hs-primary); font-weight: 750; }
.hs-tab[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.hs-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 38px 20px; }
.hs-empty__icon { width: 49px; height: 49px; border: 1px solid #D4EAE4; border-radius: var(--hs-radius); display: grid; place-items: center; background: var(--hs-primary-subtle); color: var(--hs-primary); font-size: 22px; }
.hs-empty h3 { margin: 3px 0 0; font-size: var(--hs-size-h3); font-weight: 750; color: var(--hs-heading); }
.hs-empty p { margin: 0; max-width: 340px; color: var(--hs-muted); font-size: var(--hs-size-body); }

.hs-skeleton { display: block; height: 15px; width: 100%; border-radius: 7px; background: #E9EDF0;
  background-image: linear-gradient(90deg,transparent,#F7F9FA 50%,transparent); background-size: 200% 100%;
  animation: hs-shimmer 1.25s linear infinite; }
.hs-skeleton--circle { border-radius: 50%; }
.hs-skeleton-stack { display: grid; gap: 13px; }
@keyframes hs-shimmer { to { background-position-x: -200%; } }

.hs-drawer-overlay { position: fixed; inset: 0; z-index: var(--hs-z-drawer); background: rgba(15,23,42,.34); display: flex; justify-content: flex-end; }
.hs-drawer { height: 100%; width: min(100%, 490px); background: var(--hs-white,#fff); background: var(--hs-surface); box-shadow: var(--hs-shadow-overlay);
  display: flex; flex-direction: column; transform: translateX(0); overflow: hidden; }
.hs-drawer__head { min-height: 78px; padding: 18px 22px; border-bottom: 1px solid var(--hs-border); display: flex; align-items: center; justify-content: space-between; gap: var(--hs-space-4); }
.hs-drawer__title { color: var(--hs-heading); margin: 0; font-size: var(--hs-size-h2); letter-spacing: -.02em; }
.hs-drawer__body { min-height: 0; flex: 1; overflow: auto; padding: 24px 22px; }
.hs-drawer__footer { border-top: 1px solid var(--hs-border); padding: 15px 22px; display: flex; justify-content: flex-end; gap: var(--hs-space-2); background: #fff; }
.hs-drawer__close { width: 35px; height: 35px; border: 1px solid var(--hs-border); border-radius: var(--hs-radius-sm); background: #fff; font-size: 22px; color: var(--hs-muted); }
.hs-drawer__close:hover { background: var(--hs-neutral-surface); }

.hs-field { display: grid; gap: 7px; font-size: var(--hs-size-body); color: var(--hs-body); }
.hs-field__label { font-size: var(--hs-size-sm); color: var(--hs-heading); font-weight: 680; }
.hs-input { width: 100%; min-height: var(--hs-control-tap); background: white; border: 1px solid var(--hs-border-strong);
  border-radius: var(--hs-radius-sm); padding: 9px 12px; font-size: var(--hs-size-body); color: var(--hs-heading); outline: 0; }
.hs-input:focus { border-color: var(--hs-primary); box-shadow: 0 0 0 3px #0F766E1C; }
.hs-field__hint { color: var(--hs-muted); font-size: var(--hs-size-sm); }
.hs-field__error { color: var(--hs-danger); font-size: var(--hs-size-sm); }
.hs-input[aria-invalid="true"] { border-color: var(--hs-danger); }
.hs-field-stack { display: grid; gap: var(--hs-space-4); }
.hs-actions { display: flex; gap: var(--hs-space-2); flex-wrap: wrap; }
@media (max-width: 720px) {
  .hs-card__head { padding: 16px 15px 12px; }
  .hs-card__content { padding: 0 15px 16px; }
  .hs-table th,.hs-table td { padding-inline: 12px; }
  .hs-drawer { width: 100%; }
  .hs-drawer__head { padding-inline: 17px; }
  .hs-drawer__body { padding: 20px 17px; }
  .hs-drawer__footer { padding: 14px 17px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .hs-button { min-height: 42px; }
}