/* Huddle — Navigation: sidebar (grouped), top bar, table/list rows */

/* ============ App shell ============ */
.hds-shell { display: flex; min-height: 100vh; background: var(--bg-surface); }
.hds-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hds-shell__content { flex: 1; padding: var(--space-8); }

/* ============ Sidebar ============ */
.hds-sidebar {
  width: var(--sidebar-width); flex: 0 0 auto;
  background: var(--bg-card); border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  height: 100vh; position: sticky; top: 0;
}
.hds-sidebar--collapsed { width: var(--sidebar-width-collapsed); }
.hds-sidebar__brand {
  height: var(--topbar-height); flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 0 var(--space-5); border-bottom: 1px solid var(--border-subtle);
}
.hds-sidebar__brand img { height: 28px; }
.hds-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-5); }
.hds-navgroup { display: flex; flex-direction: column; gap: 2px; }
.hds-navgroup__label {
  font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-disabled);
  padding: 4px 12px; margin-bottom: 2px;
}
.hds-navitem {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-md); color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
  text-decoration: none; transition: background-color .12s ease, color .12s ease; position: relative;
}
.hds-navitem svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-muted); }
.hds-navitem:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.hds-navitem:hover svg { color: var(--text-secondary); }
.hds-navitem--active { background: var(--primary-tint); color: var(--indigo-700); }
.hds-navitem--active svg { color: var(--primary); }
.hds-navitem__badge {
  margin-left: auto; font-size: 11px; font-weight: var(--weight-semibold);
  background: var(--gray-100); color: var(--text-muted); padding: 0 7px; border-radius: var(--radius-pill);
}
.hds-navitem--active .hds-navitem__badge { background: #fff; color: var(--indigo-700); }
.hds-sidebar__footer { flex: 0 0 auto; border-top: 1px solid var(--border-subtle); padding: var(--space-3); }

/* collapsed: hide labels */
.hds-sidebar--collapsed .hds-navitem { justify-content: center; padding: 8px; }
.hds-sidebar--collapsed .hds-navitem span,
.hds-sidebar--collapsed .hds-navgroup__label,
.hds-sidebar--collapsed .hds-navitem__badge,
.hds-sidebar--collapsed .hds-sidebar__brand .hds-sidebar__wordmark { display: none; }

/* ============ Top bar ============ */
.hds-topbar {
  height: var(--topbar-height); flex: 0 0 auto;
  background: var(--bg-card); border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-6); position: sticky; top: 0; z-index: var(--z-sticky);
}
.hds-topbar__ws {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-md);
  cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-primary); font-size: var(--text-sm);
}
.hds-topbar__ws:hover { background: var(--bg-hover); }
.hds-topbar__ws svg { width: 16px; height: 16px; color: var(--text-muted); }
.hds-topbar__search { flex: 1; max-width: 460px; }
.hds-topbar__spacer { flex: 1; }
.hds-topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.hds-topbar__divider { width: 1px; height: 24px; background: var(--border-subtle); margin: 0 4px; }

/* ============ Table / list ============ */
.hds-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.hds-table thead th {
  text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 10px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.hds-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.hds-table thead th:last-child { border-top-right-radius: var(--radius-lg); }
.hds-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.hds-table tbody tr:last-child td { border-bottom: none; }
.hds-table tbody tr { transition: background-color .1s ease; }
.hds-table tbody tr:hover { background: var(--bg-subtle); }
.hds-table__primary { color: var(--text-primary); font-weight: var(--weight-medium); }
.hds-table__muted { color: var(--text-muted); }
.hds-table__cell-strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.hds-table-wrap { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; }