/* ============================================================
   HUB
   Documents Hub page styles.
   ============================================================ */

/* ── Page header ──────────────────────────────────────────── */

.hub__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.hub__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

/* ── Search ───────────────────────────────────────────────── */

.hub__search {
  position: relative;
  max-width: 400px;
}

.hub__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
  font-size: var(--text-base);
}

.hub__search .field__input {
  padding-left: var(--space-10);
}

/* ── Action bar ───────────────────────────────────────────── */

.hub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Usage strip ──────────────────────────────────────────── */

.hub__usage {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* ── Sections ─────────────────────────────────────────────── */

.hub__section-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
}

.hub__empty {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  padding: var(--space-4) 0;
}

.hub__no-results {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-8) 0;
}

/* ── Document rows ────────────────────────────────────────── */

.hub__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.hub__row[hidden] {
  display: none;
}

/* Info fills the middle between the Open button and the secondary actions */
.hub__row-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0; /* allow text to truncate */
  flex: 1;
}

.hub__row-title {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub__row-meta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Secondary actions (Duplicate, Delete) sit on the far right */
.hub__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* On mobile: title on top, then Open on the left and secondary actions on the right */
@media (max-width: 480px) {
  .hub__row { flex-wrap: wrap; }

  .hub__row-info {
    order: 1;
    width: 100%;
    flex: none;
    margin-bottom: var(--space-1);
  }

  .hub__row > .btn  { order: 2; }
  .hub__row-actions { order: 2; margin-left: auto; }
}

/* ── Modal: New from Template tabs ───────────────────────── */

.hub__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-4);
}

.hub__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-4);
  margin-bottom: -1px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    color            var(--duration-fast) var(--ease-default),
    border-color     var(--duration-fast) var(--ease-default);
}

.hub__tab:hover {
  color: var(--color-text-primary);
}

.hub__tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ── Modal: Template picker list ────────────────────────── */

.hub__template-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  max-height: 220px;
  overflow-y: auto;
}

.hub__template-option {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-interactive);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color     var(--duration-fast) var(--ease-default);
}

.hub__template-option:hover {
  background-color: var(--color-bg-interactive-hover);
  border-color: var(--color-border-default);
}

.hub__template-option--selected {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
  color: var(--color-text-primary);
}

/* ── Onboarding card ─────────────────────────────────────── */

.hub__onboarding {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 560px;
}

.hub__onboarding-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.hub__onboarding-body {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ── Modal: Name field label within tab panel ───────────── */

.hub__name-field {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-4);
}