/* ============================================================
   Shared databases — the full-screen list of databases other
   people shared with you, plus the read-only fallback renderer.
   Scoped to .shareddbs-root and .sdb-ro.
   Reuses css/style.css custom properties (fallbacks provided);
   role pills come from css/features/roles.css.
   ============================================================ */

/* ------------------------- the full-screen view ------------------------- */
.shareddbs-root {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 56px 80px;
  color: var(--text, #37352f);
}
.shareddbs-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.shareddbs-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text, #37352f);
}
.shareddbs-count {
  font-size: 14px;
  color: var(--text-faint, #9b9a97);
}

.shareddbs-searchbar { margin-bottom: 14px; }
.shareddbs-search {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--font, sans-serif);
  color: var(--text, #37352f);
  background: var(--bg-hover, rgba(0, 0, 0, 0.045));
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.shareddbs-search:focus {
  border-color: var(--accent, #5b5bd6);
  background: var(--bg-input, #fff);
}
.shareddbs-search::placeholder { color: var(--text-placeholder, rgba(55, 53, 47, 0.35)); }

.shareddbs-list { margin-top: 4px; }

.shareddbs-group { margin-bottom: 22px; }
.shareddbs-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 2px;
}
.shareddbs-owner {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint, #9b9a97);
}
.shareddbs-group-count {
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 20px;
  color: var(--text-faint, #9b9a97);
  background: var(--bg-hover, rgba(0, 0, 0, 0.045));
}

.shareddbs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  border-bottom: 1px solid var(--border, #e9e9e7);
  cursor: pointer;
  outline: none;
}
.shareddbs-row:hover { background: var(--bg-hover, rgba(0, 0, 0, 0.045)); }
.shareddbs-row:focus-visible { box-shadow: 0 0 0 2px var(--accent, #5b5bd6); }

.shareddbs-ic {
  width: 26px;
  flex: 0 0 26px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
}
.shareddbs-info { flex: 1; min-width: 0; }
.shareddbs-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text, #37352f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shareddbs-meta {
  font-size: 12px;
  margin-top: 2px;
  color: var(--text-faint, #9b9a97);
}
.shareddbs-lock { color: var(--text-faint, #9b9a97); }
.shareddbs-role { flex: 0 0 auto; }

.shareddbs-blank {
  padding: 42px 10px;
  text-align: center;
  color: var(--text-faint, #9b9a97);
  font-size: 14px;
}
.shareddbs-blank-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #37352f);
  margin-bottom: 8px;
}
.shareddbs-blank-text {
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ------------------- read-only renderer (viewer fallback) ------------------- */
.sdb-ro {
  max-width: 100%;
  color: var(--text, #37352f);
}
.sdb-ro-inline {
  border: 1px solid var(--border, #e9e9e7);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0;
}
.sdb-ro-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sdb-ro-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.sdb-ro-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  color: var(--text-faint, #9b9a97);
  background: var(--bg-hover, rgba(0, 0, 0, 0.045));
}
.sdb-ro-msg {
  padding: 18px 4px;
  font-size: 14px;
  color: var(--text-faint, #9b9a97);
}
.sdb-ro-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e9e9e7);
  border-radius: 8px;
}
.sdb-ro-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.sdb-ro-table th,
.sdb-ro-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, #e9e9e7);
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdb-ro-table th {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-faint, #9b9a97);
  background: var(--bg-hover, rgba(0, 0, 0, 0.03));
}
.sdb-ro-table tbody tr:last-child td { border-bottom: 0; }
.sdb-ro-foot {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-faint, #9b9a97);
}

/* ------------------------------- responsive ------------------------------- */
@media (max-width: 720px) {
  .shareddbs-root { padding: 24px 18px 60px; }
  .shareddbs-title { font-size: 26px; }
  .shareddbs-meta { display: none; }
}