/* Ghost Biographer — entity_console dev page styles
   Dark data-dense aesthetic intentional — this is an internal developer tool. */

html, body {
  height: 100%;
  background: #0c0f18;
  color: #c8d0e0;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
  font-size: 12.5px;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }

/* ── Action bar (below dev nav) ── */
#action-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem 1rem;
  background: #0f1420;
  border-bottom: 1px solid #1e2540;
  flex-shrink: 0;
}
#status-msg { font-size: .72rem; padding: .18rem .55rem; border-radius: 3px; display: none; }
#status-msg.ok  { background: #1a3a2a; color: #6fcf97; display: inline; }
#status-msg.err { background: #3a1a1a; color: #f87171; display: inline; }
#topbar-user { font-size: .72rem; color: #4a5568; margin-left: auto; }

/* ── Buttons ── */
button.action {
  background: #1e2540; border: 1px solid #2d3a5c; color: #94a3b8;
  font-family: inherit; font-size: .72rem; padding: .25rem .7rem;
  border-radius: 3px; cursor: pointer; transition: background .1s;
}
button.action:hover { background: #2a3356; color: #cbd5e1; }
button.action.primary { border-color: #3b4fd4; color: #a5b4fc; }
button.action.primary:hover { background: #232e6a; }
button.action.danger { border-color: #6b2020; color: #f87171; }
button.action.danger:hover { background: #3a1a1a; }
button.action.green { border-color: #1a5c3a; color: #6fcf97; }
button.action.green:hover { background: #1a3a2a; }

/* ── Tabs ── */
#tabs {
  display: flex;
  gap: 0;
  background: #0c0f18;
  border-bottom: 1px solid #1e2540;
  flex-shrink: 0;
}
.tab {
  padding: .45rem 1.1rem;
  cursor: pointer;
  font-size: .75rem;
  color: #4a5568;
  border-bottom: 2px solid transparent;
  transition: color .1s;
}
.tab:hover { color: #94a3b8; }
.tab.active { color: #7c9fd4; border-bottom-color: #7c9fd4; }
.tab-count {
  background: #1e2540;
  border-radius: 10px;
  padding: .05rem .4rem;
  font-size: .65rem;
  margin-left: .3rem;
}

/* ── Content area ── */
#content { flex: 1; display: flex; overflow: hidden; }

/* ── Panel views ── */
#queue-view, #personas-view, #retired-view {
  flex: 1; overflow-y: auto; padding: .75rem 1rem; display: none;
}
#queue-view.active, #personas-view.active, #retired-view.active { display: block; }

/* ── Queue cards ── */
.queue-card {
  background: #0f1420; border: 1px solid #1e2540; border-radius: 4px;
  padding: .6rem .85rem; margin-bottom: .55rem; display: flex; align-items: center; gap: .75rem;
}
.queue-card.resolving { opacity: .35; pointer-events: none; }
.qc-entities { flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.qc-side     { min-width: 0; }
.qc-name     { font-size: .8rem; color: #c8d0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.qc-name.unnamed { color: #4a5568; font-style: italic; }
.qc-meta { font-size: .68rem; color: #4a5568; margin-top: .1rem; }
.qc-vs   { font-size: .7rem; color: #2d3a5c; flex-shrink: 0; }
.qc-conf { font-size: .72rem; color: #94a3b8; flex-shrink: 0; width: 38px; text-align: right; }
.conf-bar  { width: 38px; height: 3px; background: #1e2540; border-radius: 2px; margin-top: 2px; overflow: hidden; }
.conf-fill { height: 100%; border-radius: 2px; background: #3b82f6; transition: width .3s; }
.qc-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.queue-empty { color: #2d3a5c; font-size: .8rem; padding: 2rem 0; text-align: center; }

/* ── Personas table ── */
#personas-toolbar { display: flex; gap: .5rem; margin-bottom: .6rem; align-items: center; }
#search-input {
  background: #0f1420; border: 1px solid #1e2540; color: #c8d0e0;
  font-family: inherit; font-size: .75rem; padding: .28rem .55rem; border-radius: 3px; width: 200px;
}
#search-input:focus { outline: none; border-color: #3b4fd4; }
#type-filter { background: #0f1420; border: 1px solid #1e2540; color: #94a3b8; font-family: inherit; font-size: .75rem; padding: .28rem .5rem; border-radius: 3px; }
#type-filter:focus { outline: none; border-color: #3b4fd4; }
#persona-count { font-size: .68rem; color: #4a5568; margin-left: auto; }

#persona-table { width: 100%; border-collapse: collapse; }
#persona-table th {
  text-align: left; padding: .3rem .5rem; color: #4a5568; font-size: .68rem;
  font-weight: 600; border-bottom: 1px solid #1e2540; text-transform: uppercase;
  letter-spacing: .04em; position: sticky; top: 0; background: #0c0f18; z-index: 1;
}
#persona-table td { padding: .3rem .5rem; border-bottom: 1px solid #12162a; vertical-align: middle; }
#persona-table tr { cursor: pointer; transition: background .08s; }
#persona-table tr:hover td { background: #0f1420; }
#persona-table tr.selected td { background: #151c30; }
.type-badge {
  display: inline-block; font-size: .62rem; padding: .1rem .35rem; border-radius: 3px;
  font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.type-person       { background: #1a2a4a; color: #7c9fd4; }
.type-place        { background: #1a3a2a; color: #6fcf97; }
.type-event        { background: #3a2a1a; color: #f6ad55; }
.type-moment       { background: #2a1a3a; color: #c084fc; }
.type-period       { background: #3a1a2a; color: #f472b6; }
.type-organization { background: #1a3a3a; color: #67e8f9; }
.type-other        { background: #1e2540; color: #64748b; }
.num-cell  { color: #4a5568; text-align: right; font-size: .72rem; }
.date-cell { color: #64748b; font-size: .68rem; }
.inspect-btn {
  background: none; border: 1px solid #2d3a5c; color: #4a5568; font-family: inherit;
  font-size: .65rem; padding: .15rem .45rem; border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.inspect-btn:hover { border-color: #7c9fd4; color: #7c9fd4; }

/* ── Detail drawer ── */
#detail-drawer {
  width: 340px; flex-shrink: 0; border-left: 1px solid #1e2540;
  background: #0f1420; overflow-y: auto; display: none; padding: .75rem;
}
#detail-drawer.open { display: block; }
#detail-close { float: right; background: none; border: none; color: #4a5568; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
#detail-close:hover { color: #94a3b8; }
.detail-name { font-size: .9rem; color: #c8d0e0; font-weight: 600; margin-bottom: .1rem; word-break: break-word; }
.detail-id { font-size: .62rem; color: #2d3a5c; margin-bottom: .5rem; font-family: monospace; }
.detail-section { margin-top: .75rem; }
.detail-section-title {
  font-size: .65rem; color: #4a5568; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; margin-bottom: .4rem; border-bottom: 1px solid #1e2540; padding-bottom: .2rem;
}
.detail-node {
  font-size: .72rem; padding: .2rem 0; border-bottom: 1px solid #12162a;
  display: flex; justify-content: space-between; gap: .5rem;
}
.detail-node-label { color: #94a3b8; }
.detail-node-meta  { color: #4a5568; font-size: .65rem; text-align: right; }
.cluster-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.cluster-thumb       { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #2d3a5c; background: #1e2540; }
.cluster-placeholder { width: 40px; height: 40px; border-radius: 50%; background: #1e2540; border: 1px dashed #2d3a5c; display: flex; align-items: center; justify-content: center; font-size: .55rem; color: #4a5568; }
.detail-edge { font-size: .68rem; padding: .18rem 0; display: flex; align-items: center; gap: .35rem; }
.rel-badge    { font-size: .58rem; padding: .1rem .3rem; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; flex-shrink: 0; }
.rel-same     { background: #1a3a2a; color: #6fcf97; }
.rel-possibly { background: #2a2a1a; color: #f6ad55; }
.rel-different { background: #3a1a1a; color: #f87171; }

/* ── Merge section ── */
#merge-section { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #1e2540; }
#merge-search {
  width: 100%; background: #0c0f18; border: 1px solid #1e2540; color: #c8d0e0;
  font-family: inherit; font-size: .72rem; padding: .28rem .5rem; border-radius: 3px; margin-bottom: .3rem;
}
#merge-search:focus { outline: none; border-color: #3b4fd4; }
#merge-results { background: #0c0f18; border: 1px solid #1e2540; border-radius: 3px; max-height: 140px; overflow-y: auto; display: none; }
.merge-result { padding: .3rem .5rem; cursor: pointer; display: flex; justify-content: space-between; font-size: .72rem; }
.merge-result:hover { background: #0f1420; }
.merge-result-name { color: #94a3b8; }
.merge-result-type { color: #4a5568; font-size: .65rem; }
#merge-confirm { margin-top: .4rem; display: none; }
#merge-target-label { font-size: .72rem; color: #94a3b8; margin-bottom: .35rem; }
.merge-btn-row { display: flex; gap: .35rem; }

/* ── Retired table ── */
#retired-table { width: 100%; border-collapse: collapse; }
#retired-table th {
  text-align: left; padding: .3rem .5rem; color: #4a5568; font-size: .68rem;
  font-weight: 600; border-bottom: 1px solid #1e2540; text-transform: uppercase; letter-spacing: .04em;
}
#retired-table td { padding: .3rem .5rem; border-bottom: 1px solid #12162a; font-size: .72rem; color: #4a5568; }
#retired-table .name-cell   { color: #64748b; text-decoration: line-through; }
#retired-table .target-cell { color: #7c9fd4; }

/* ── Scrollbars ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e2540; border-radius: 3px; }