/* docs-tab.css: styles for Admin > Documentation. Uses the portal's own variables, so light/dark follow the theme. */
.docs-card { max-width: 1500px; }
.docs-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.docs-head h2 { margin: 0; }
.docs-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.docs-nav button { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 0.82rem; cursor: pointer; }
.docs-nav button:hover { color: var(--text-primary); background: var(--bg-hover); }
.docs-nav button.active { color: var(--accent); border-color: var(--accent); }
.docs-counts { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.75rem; }

.docs-msg { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; border-radius: 6px; font-size: 0.85rem; border: 1px solid var(--border); line-height: 1.5; white-space: pre-wrap; }
.docs-msg.ok { border-color: var(--success); color: var(--success); }
.docs-msg.err { border-color: var(--danger); color: var(--danger); }
.docs-msg.warn { border-color: #ffb000; color: #ffb000; }

.docs-layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .docs-layout { grid-template-columns: 1fr; } }
.docs-side { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; min-width: 0; }
.docs-main { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; min-width: 0; min-height: 300px; }
.docs-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.docs-filters .wide { grid-column: 1 / -1; }
.docs-filters label.chk { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-secondary); }

.docs input[type=text], .docs input[type=search], .docs select, .docs textarea {
  width: 100%; background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 9px; font: inherit; font-size: 0.85rem; box-sizing: border-box;
}
.docs textarea { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8rem; line-height: 1.5; resize: vertical; }
.docs input:focus, .docs select:focus, .docs textarea:focus { outline: none; border-color: var(--accent); }

.docs-list { max-height: 68vh; overflow-y: auto; }
.docs-item { padding: 8px 9px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.docs-item:hover { background: var(--bg-hover); }
.docs-item.active { border-color: var(--accent); background: var(--bg-hover); }
.docs-item .t { font-size: 0.86rem; font-weight: 600; overflow-wrap: anywhere; }
.docs-item .k { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.docs-item .m { font-size: 0.72rem; color: var(--text-secondary); margin-top: 3px; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.docs-item .snip { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; overflow-wrap: anywhere; }
.docs-item.superseded .t { text-decoration: line-through; opacity: 0.65; }

.docs-badge { display: inline-block; font-size: 0.68rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.docs-badge.active { color: var(--success); border-color: var(--success); }
.docs-badge.emerging, .docs-badge.planned { color: var(--accent); border-color: var(--accent); }
.docs-badge.draft { color: #ffb000; border-color: #ffb000; }
.docs-badge.superseded { color: var(--danger); border-color: var(--danger); }
.docs-badge.stale { color: #ffb000; border-color: #ffb000; }
mark { background: rgba(255, 176, 0, 0.35); color: inherit; border-radius: 2px; padding: 0 1px; }

.docs-title-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.docs-title-row h3 { margin: 0 0 4px; overflow-wrap: anywhere; }
.docs-key { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.docs-meta { font-size: 0.78rem; color: var(--text-secondary); margin: 8px 0 12px; line-height: 1.7; }
.docs-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.docs-actions .admin-btn { padding: 5px 12px; font-size: 0.78rem; }
.docs-danger { color: var(--danger) !important; border-color: var(--danger) !important; }

.docs-md { font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
.docs-md h2 { font-size: 1.15rem; margin: 1.2rem 0 0.4rem; }
.docs-md h3 { font-size: 1.02rem; margin: 1rem 0 0.35rem; }
.docs-md h4, .docs-md h5, .docs-md h6, .docs-md h7 { font-size: 0.92rem; margin: 0.9rem 0 0.3rem; }
.docs-md p { margin: 0.5rem 0; }
.docs-md ul, .docs-md ol { margin: 0.4rem 0 0.4rem 1.3rem; }
.docs-md ul li { list-style: disc; } .docs-md ol li { list-style: decimal; }
.docs-md code { font-family: 'JetBrains Mono', monospace; font-size: 0.82em; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.docs-md pre { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; padding: 0.7rem 0.9rem; overflow-x: auto; margin: 0.6rem 0; }
.docs-md pre code { background: none; border: none; padding: 0; font-size: 0.8rem; }
.docs-md blockquote { margin: 0.6rem 0; padding: 0.3rem 0.9rem; border-left: 3px solid var(--accent); color: var(--text-secondary); background: var(--bg-hover); border-radius: 0 6px 6px 0; }
.docs-md table { border-collapse: collapse; margin: 0.6rem 0; display: block; overflow-x: auto; max-width: 100%; }
.docs-md th, .docs-md td { border: 1px solid var(--border); padding: 4px 9px; text-align: left; vertical-align: top; font-size: 0.84rem; }
.docs-md th { background: var(--bg-hover); }
.docs-md hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.docs-md a { color: var(--accent); }

.docs-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.docs-form .wide { grid-column: 1 / -1; }
.docs-form label { font-size: 0.74rem; color: var(--text-secondary); display: block; margin-bottom: 3px; }
.docs-form label.chk { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; }
.docs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1200px) { .docs-split { grid-template-columns: 1fr; } }
.docs-preview { border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.9rem; max-height: 60vh; overflow-y: auto; }

.docs-diff { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; line-height: 1.45; border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; max-height: 55vh; overflow-y: auto; }
.docs-diff div { padding: 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.docs-diff .add { background: rgba(0, 204, 102, 0.15); color: var(--success); }
.docs-diff .del { background: rgba(255, 68, 68, 0.15); color: var(--danger); }
.docs-diff .gap { color: var(--text-secondary); font-style: italic; background: var(--bg-hover); }

.docs-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.docs-table th, .docs-table td { border-bottom: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; }
.docs-table th { color: var(--text-secondary); font-weight: 600; font-size: 0.74rem; }
.docs-card-item { border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 0.7rem; }
.docs-card-item.resolved { opacity: 0.7; }
.docs-card-item h4 { margin: 0 0 4px; font-size: 0.9rem; overflow-wrap: anywhere; }
.docs-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.docs-hint { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.docs-empty { color: var(--text-secondary); padding: 1.5rem; text-align: center; font-size: 0.88rem; }
.docs-sub { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }

.docs-md code.docs-link, code.docs-link { cursor: pointer; color: var(--accent); text-decoration: underline dotted; }

/* ---- dropping a .md handoff (Import view) ---- */
.docs-drop { border: 2px dashed var(--border); border-radius: 10px; padding: 1.1rem 1rem; text-align: center; cursor: pointer; max-width: 980px; color: var(--text-primary); }
.docs-drop:hover, .docs-drop:focus, .docs-drop.over { border-color: var(--accent); background: rgba(0, 217, 255, 0.06); outline: none; }
.docs-drop .docs-hint { margin-top: 4px; }
.docs-preview { background: rgba(127, 127, 127, 0.08); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 0.74rem; }