/* ============================================================
   Document Vault module
   ============================================================ */

/* --- Primary organization bar (top of the Browse view) ---------------- */
.vault-org-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-2, #f5f6f8);
  border: 1px solid var(--border, #d6dadf);
  border-radius: 10px;
  margin: 0 0 12px;
}
.vault-org-bar label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, #6b7280);
  font-weight: 700;
  white-space: nowrap;
}
.vault-org-bar select {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: var(--surface, #fff);
  color: inherit;
}
.vault-selection-hint {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

/* --- Secondary filters ------------------------------------------------- */
.vault-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
}
.vault-filters select,
.vault-filters input[type="month"] {
  padding: 7px 10px;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface, #fff);
  color: inherit;
  min-width: 140px;
}
.vault-doc-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

/* --- Documents table --------------------------------------------------- */
.vault-table-wrap {
  border: 1px solid var(--border, #d6dadf);
  border-radius: 10px;
  overflow: auto;
  background: var(--surface, #fff);
}
.vault-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vault-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2, #f5f6f8);
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #d6dadf);
  white-space: nowrap;
  z-index: 1;
}
.vault-table tbody tr {
  border-bottom: 1px solid var(--border-soft, #eef0f3);
}
.vault-table tbody tr:hover { background: var(--hover, #f8f9fb); }
.vault-table td {
  padding: 10px 12px;
  vertical-align: top;
}
.vault-table .c-num { white-space: nowrap; }
.vault-table .c-date { white-space: nowrap; color: var(--muted, #6b7280); font-size: 12px; }
.vault-table .c-actions { text-align: right; white-space: nowrap; width: 260px; }
.vault-table .c-actions .btn + .btn { margin-left: 6px; }
.vault-empty {
  text-align: center;
  padding: 32px 12px !important;
  color: var(--muted, #6b7280);
}
.vault-cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3, #eef2fb);
  color: var(--text, #2f4478);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Upload form ------------------------------------------------------- */
.vault-upload-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 780px;
}
@media (max-width: 700px) {
  .vault-upload-form { grid-template-columns: 1fr; }
}
.vault-upload-form .full { grid-column: 1 / -1; }
.vault-upload-form label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted, #6b7280);
  font-weight: 600;
  margin-bottom: 4px;
}
.vault-upload-form select,
.vault-upload-form input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface, #fff);
  color: inherit;
}
.vault-upload-form input[type="file"] { padding: 6px; }
.vault-upload-hint {
  font-size: 12px;
  color: var(--muted, #6b7280);
  margin-top: 4px;
}
.vault-upload-actions { display: flex; gap: 8px; margin-top: 8px; }

/* --- Manage cards (orgs / facilities / categories / keyword lists) ----
   Stacked vertically — one full-width section per dictionary so each has
   room for its own add-entry form and list. */
.vault-manage-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
}
.vault-kw-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.vault-kw-form #vaultKwKeywords { grid-column: 1 / -1; }
.vault-kw-form input[type="text"] {
  padding: 6px 8px;
  border: 1px solid var(--border, #d5d9e0);
  border-radius: 6px;
  font: inherit;
}
.vault-kw-billable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}
.vault-kw-form button[type="submit"] { justify-self: end; }
.vault-kw-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.vault-kw-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.vault-kw-seed {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
}

/* Sub-facilities nested under each facility. */
.vault-fac-block {
  display: block !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border-soft, #eef0f3);
  border-radius: 8px;
  background: #fafbfc;
  margin-bottom: 8px;
}
.vault-fac-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.vault-subfac-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.vault-subfac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 6px;
  border-top: 1px dashed #e2e8f0;
  font-size: 12px;
}
.vault-subfac:first-child { border-top: 0; }
.vault-subfac-name { color: #1e293b; font-weight: 500; }
.vault-subfac-inactive .vault-subfac-name {
  color: #94a3b8;
  text-decoration: line-through;
}
.vault-subfac-actions { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
.vault-subfac-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
}
.vault-subfac-empty {
  padding: 4px 6px;
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}
.vault-subfac-add {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
}
.vault-subfac-add input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 6px;
  font-size: 12px;
}
.vault-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d6dadf);
  border-radius: 10px;
  padding: 14px 16px;
}
.vault-card h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted, #6b7280);
}
.vault-card form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.vault-card input,
.vault-card select {
  flex: 1;
  min-width: 100px;
  padding: 7px 9px;
  border: 1px solid var(--border, #d6dadf);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface, #fff);
  color: inherit;
}
.vault-inline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
}
.vault-inline-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--border-soft, #eef0f3);
  font-size: 13px;
}
.vault-inline-list li:first-child { border-top: 0; }
.vault-item-name { flex: 1; min-width: 0; }
.vault-item-hint {
  font-size: 11px;
  color: var(--muted, #6b7280);
  margin-left: 4px;
}
.vault-empty-inline {
  color: var(--muted, #6b7280);
  font-size: 12px;
  padding: 6px 0;
}

/* --- Viewer modal ----------------------------------------------------- */
/* The shared .modal-body sets `overflow: hidden`, which was clipping the
   XLSX preview so wide sheets couldn't scroll horizontally. We flip it to
   auto for the vault viewer specifically, and give a stable min-height so
   the inner XLSX flex layout has room to grow. */
.vault-viewer-body {
  padding: 0;
  background: var(--surface-2, #f5f6f8);
  overflow: auto;
  max-height: 82vh;
  min-height: 480px;
}
.vault-viewer-body iframe {
  display: block;
  width: 100%;
  height: 78vh;
  border: 0;
  background: var(--surface, #fff);
}
.vault-viewer-body img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
}
.vault-viewer-body pre {
  margin: 0;
  padding: 20px;
  max-height: 78vh;
  overflow: auto;
  background: var(--surface, #fff);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.vault-viewer-fallback {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted, #6b7280);
}
.vault-viewer-actions {
  margin-top: 14px;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* DOCX — mammoth renders semantic HTML, we just give it document-like
   typography inside the modal. */
.vault-viewer-docx {
  padding: 24px 32px;
  max-height: 78vh;
  overflow: auto;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  font-size: 14px;
  line-height: 1.55;
}
.vault-viewer-docx h1,
.vault-viewer-docx h2,
.vault-viewer-docx h3 { margin: 1em 0 0.4em; font-weight: 600; }
.vault-viewer-docx p { margin: 0.6em 0; }
.vault-viewer-docx table {
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 13px;
}
.vault-viewer-docx th,
.vault-viewer-docx td {
  border: 1px solid var(--border, #d6dadf);
  padding: 5px 8px;
  vertical-align: top;
}

/* XLSX — SheetJS produces its own HTML tables; we frame it with tabs.
   The container fills the modal body so the sheet body's `overflow: auto`
   yields both scroll bars for wide/tall workbooks. */
.vault-viewer-xlsx {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;
  background: var(--surface, #fff);
}
.vault-sheet-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #d6dadf);
  background: var(--surface-2, #f5f6f8);
  overflow-x: auto;
  flex: 0 0 auto;
}
.vault-sheet-tab {
  border: 1px solid var(--border, #d6dadf);
  background: var(--surface, #fff);
  color: inherit;
  border-radius: 6px 6px 0 0;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.vault-sheet-tab.active {
  background: var(--primary, #4f46e5);
  color: #fff;
  border-color: transparent;
}
.vault-sheet-body {
  flex: 1 1 auto;
  min-height: 0;      /* let it shrink so scrollbars appear inside flex */
  overflow-x: auto;
  overflow-y: auto;
  padding: 8px 12px;
  font-size: 12px;
  background: var(--surface, #fff);
}
.vault-sheet-body table {
  border-collapse: collapse;
  font-size: 12px;
  /* Force table width to its content so the horizontal scrollbar activates
     when there are many columns. Without this Chrome sometimes collapses
     wide tables to fit the container and drops the horizontal scroll. */
  width: max-content;
  min-width: 100%;
}
.vault-sheet-body td,
.vault-sheet-body th {
  border: 1px solid var(--border, #d6dadf);
  padding: 4px 8px;
  white-space: nowrap;
  vertical-align: top;
  max-width: 320px;   /* extra-wide cells get an ellipsis instead of pushing */
  overflow: hidden;
  text-overflow: ellipsis;
}
.vault-sheet-body th {
  position: sticky;
  top: 0;
  background: var(--surface-2, #f5f6f8);
  z-index: 1;
}

/* --- Upload: file-by-patient verification --------------------------- */
.vault-optional { font-weight: 400; color: var(--muted, #9ca3af); font-size: 11px; }
.vault-patient-verify { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vault-patient-verify input[type="text"] {
  flex: 1; min-width: 200px; padding: 8px 10px;
  border: 1px solid var(--border, #d5d9e0); border-radius: 6px; font: inherit;
}
.vault-patient-status { font-size: 12px; font-weight: 600; }
.vault-patient-status.ok { color: #166534; }
.vault-patient-status.err { color: #b91c1c; }
.vault-patient-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 600; white-space: nowrap;
}