/* ─── Documents tab ───────────────────────────────────────────────────────────── */

/* 9 kind tabs is more than .tab-bar's default flex row comfortably fits — scroll horizontally
   instead of wrapping to a second, uneven row. padding-bottom pushes the scrollbar itself down
   away from the tab buttons/active-tab underline instead of crowding right against them. */
#doc-kind-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
#doc-kind-tabs .tab-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

#doc-filter-row {
  margin-bottom: 1rem;
}

.doc-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.doc-layout .table-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
/* Wider than .collapsible-panel's shared 320px default (also used by NC Deploy's encode panel) —
   scoped here so only Documents' own detail pane gets the extra width. :not(.collapsed) keeps this
   from out-specificity-ing shared.css's .collapsible-panel.collapsed 2.5rem collapse width. */
.doc-layout .collapsible-panel:not(.collapsed) {
  width: 25%;
  min-width: 320px;
}

.doc-title-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.doc-title-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.doc-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.doc-location {
  font-size: 0.76rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

/* Revision badge — external_rev.internal_rev, e.g. "A.3" */
.doc-rev-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: var(--exceptional-bg);
  color: var(--exceptional-color);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Kind pill, one modifier per entity_type — reuses the app's existing semantic color tokens */
.doc-kind-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.55rem;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}
.doc-kind-pill--kit { background: var(--exceptional-bg); color: var(--exceptional-color); }
.doc-kind-pill--engineering_change { background: var(--warning-bg); color: var(--warning); }
.doc-kind-pill--quote { background: var(--success-bg); color: var(--success); }
.doc-kind-pill--design_sheet,
.doc-kind-pill--pqp,
.doc-kind-pill--cutting_list,
.doc-kind-pill--packaging_list,
.doc-kind-pill--nest,
.doc-kind-pill--pseudo {
  background: var(--table-surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.doc-detail-empty {
  color: var(--text-faint);
  text-align: center;
  padding: 2.2rem 0.5rem;
  font-size: 0.85rem;
}
.doc-detail-header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.doc-detail-title {
  font-size: 1rem;
  font-weight: 650;
  text-wrap: balance;
}
.doc-detail-location {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.doc-detail-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  font-size: 0.82rem;
  margin-bottom: 1.1rem;
}
.doc-detail-meta dt { color: var(--text-faint); }
.doc-detail-meta dd { margin: 0; color: var(--text-sub); text-align: right; }

.doc-launch-note {
  font-size: 0.78rem;
  color: var(--text-faint);
  text-align: center;
  margin-top: 0.6rem;
  line-height: 1.4;
}

.doc-attachments {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.doc-attachments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 650;
  margin-bottom: 0.6rem;
}
.doc-attachment-upload-btn {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}
.doc-attachments-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.doc-attachment-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  background: var(--table-surface);
  border: 1px solid var(--border);
}
.doc-attachment-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.doc-attachment-meta {
  font-size: 0.72rem;
  color: var(--text-faint);
  white-space: nowrap;
  margin-left: auto;
  padding-right: 0.4rem;
}
.doc-attachment-actions {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .doc-layout { flex-direction: column; }
  .doc-layout .collapsible-panel:not(.collapsed) { width: 100%; }
  .doc-layout .collapsible-panel.collapsed { width: 100%; height: 2.5rem; }
}