/* ── Unit Files page ─────────────────────────────────────────────────────── */

.uf-main { max-width: 1500px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.uf-toolbar {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin: 1rem 0 .9rem;
}
.uf-toolbar input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    color: var(--text);
    padding: .55rem .8rem;
    border-radius: 6px;
    font-size: .95rem;
}
.uf-toolbar input::placeholder { color: var(--text-muted); }
.uf-toolbar input:focus { outline: none; border-color: var(--gold); }
.uf-actions { display: flex; gap: .5rem; }

.uf-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 900px) {
    .uf-layout { grid-template-columns: 1fr; }
}

/* ── Sidebar / tree ───────────────────────────────────────────────────────── */

.uf-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding: .5rem .25rem;
}
.uf-tree { font-size: .92rem; }

.uf-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .4rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uf-node:hover { background: var(--bg-card-hover); }
.uf-node.selected { background: var(--gold-dim); color: var(--gold); }
.uf-node-caret {
    width: 14px;
    flex: none;
    text-align: center;
    color: var(--text-muted);
    font-size: .7rem;
}
.uf-node-icon {
    width: 18px;
    flex: none;
    text-align: center;
}
.uf-node-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Action buttons pin to the right edge of the row on hover so they remain
   visible at any nesting depth. The strip uses its own solid dark surface
   (not the row's background) so colored emoji icons always have consistent
   contrast --- on a normal row, a hovered row, and the gold-dim selected
   row alike. A subtle border + shadow separate it from the row underneath. */
.uf-node-actions {
    display: none;
    gap: .1rem;
    position: absolute;
    right: .2rem;
    top: 50%;
    transform: translateY(-50%);
    padding: .15rem .3rem;
    background: var(--bg);
    border: 1px solid var(--border-accent);
    border-radius: 4px;
    box-shadow: -6px 0 8px -4px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.uf-node:hover .uf-node-actions { display: flex; }
.uf-node-actions button {
    background: transparent;
    color: var(--text);
    border: none;
    cursor: pointer;
    padding: 0 .25rem;
    font-size: .85rem;
    line-height: 1;
    border-radius: 3px;
}
.uf-node-actions button:hover { background: var(--bg-card-hover); }

.uf-children { padding-left: 1.05rem; }
.uf-children.collapsed { display: none; }

/* Search results override the tree visually */
.uf-search-results { padding: .25rem 0; }
.uf-search-result {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
}
.uf-search-result:hover { background: var(--bg-card-hover); }
.uf-search-result-path {
    color: var(--text-muted);
    font-size: .76rem;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

/* ── Content pane ─────────────────────────────────────────────────────────── */

.uf-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 60vh;
    padding: 1.4rem 1.6rem;
}
.uf-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 4rem 1rem;
}
.uf-empty-icon { font-size: 3rem; opacity: .6; margin-bottom: .5rem; }
.uf-empty h2 { color: var(--text); margin: .5rem 0; }

.uf-file-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .9rem;
    margin-bottom: 1.2rem;
}
.uf-file-title {
    font-size: 1.6rem;
    color: var(--text);
    margin: 0;
    flex: 1;
}
.uf-file-meta {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .25rem;
}
.uf-file-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.uf-breadcrumb {
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: .35rem;
}
.uf-breadcrumb span + span::before { content: " / "; color: var(--text-muted); margin: 0 .25rem; }

/* Rendered markdown — readable prose */
.uf-prose {
    color: var(--text);
    line-height: 1.65;
    font-size: .98rem;
}
.uf-prose h1, .uf-prose h2, .uf-prose h3, .uf-prose h4 {
    color: var(--text);
    margin: 1.4em 0 .55em;
    line-height: 1.25;
}
.uf-prose h1 { font-size: 1.7rem; border-bottom: 1px solid var(--border); padding-bottom: .35rem; }
.uf-prose h2 { font-size: 1.4rem; }
.uf-prose h3 { font-size: 1.15rem; color: var(--gold); }
.uf-prose h4 { font-size: 1rem; }
.uf-prose p, .uf-prose ul, .uf-prose ol, .uf-prose blockquote { margin: .65em 0; }
.uf-prose ul, .uf-prose ol { padding-left: 1.5rem; }
.uf-prose li { margin: .2em 0; }
.uf-prose a { color: var(--gold-light); text-decoration: underline; }
.uf-prose .ta-left   { text-align: left; }
.uf-prose .ta-center { text-align: center; }
.uf-prose .ta-right  { text-align: right; }
.uf-prose .ta-center > *, .uf-prose .ta-right > *, .uf-prose .ta-left > * { text-align: inherit; }
.uf-prose code {
    background: var(--bg);
    padding: .1em .35em;
    border-radius: 3px;
    font-size: .9em;
}
.uf-prose pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .8rem 1rem;
    overflow-x: auto;
}
.uf-prose pre code { background: transparent; padding: 0; }
.uf-prose blockquote {
    border-left: 3px solid var(--gold);
    padding: .15rem 0 .15rem 1rem;
    color: var(--text-dim);
    background: rgba(207, 181, 59, .05);
}
.uf-prose img { max-width: 100%; border-radius: 6px; margin: .6rem 0; }
.uf-prose table {
    border-collapse: collapse;
    margin: .8rem 0;
    width: 100%;
}
.uf-prose th, .uf-prose td {
    border: 1px solid var(--border);
    padding: .45rem .65rem;
    text-align: left;
}
.uf-prose th { background: var(--bg); color: var(--gold); }
.uf-prose hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* ── Editor ───────────────────────────────────────────────────────────────── */

.uf-editor-wrap { margin-top: .25rem; }
.uf-editor-wrap .EasyMDEContainer { background: var(--bg); }
.uf-editor-wrap .CodeMirror {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border-accent);
    border-radius: 0 0 6px 6px;
    min-height: 60vh;
}
.uf-editor-wrap .CodeMirror-cursor { border-left-color: var(--gold); }
.uf-editor-wrap .editor-toolbar {
    background: var(--bg-card-hover);
    border: 1px solid var(--border-accent);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    /* Stick to the top of the viewport (just below the 62px main nav) so the
       formatting controls follow the user as they scroll through long files. */
    position: sticky;
    top: 62px;
    z-index: 50;
}
/* Side-by-side mode: EasyMDE pulls the preview pane out with
   `position: fixed; top: 50px; right: 0; width: 50%` and floats the
   CodeMirror to half-width, which means the toolbar's `position: sticky`
   no longer pins to the viewport — it scrolls away and users can't find
   the side-by-side button to toggle back to normal view. Pin the toolbar
   to the viewport top whenever the editor is in side-by-side OR
   fullscreen mode. EasyMDE adds `CodeMirror-sided` for side-by-side and
   the body gets `.fullscreen` in fullscreen mode. */
/* EasyMDE adds `.editor-toolbar.fullscreen` whenever the editor is in
   fullscreen OR side-by-side (its side-by-side toggle auto-engages
   fullscreen). That class pins the toolbar to `position: fixed; top: 0;
   z-index: 9`, which lands BEHIND the website's main nav (z-index 100).
   Bump it above the nav and re-skin it to match the dark theme. We also
   handle the case where toggling side-by-side off leaves the toolbar's
   fullscreen class lingering — by targeting the class directly, the
   override applies regardless of the surrounding state. */
.uf-editor-wrap .editor-toolbar.fullscreen,
.uf-editor-wrap:has(.CodeMirror-sided) .editor-toolbar,
body.fullscreen .uf-editor-wrap .editor-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    border-radius: 0;
    background: var(--bg-card-hover) !important;
    border-color: var(--border-accent) !important;
}
.uf-editor-wrap .editor-toolbar.fullscreen button,
.uf-editor-wrap:has(.CodeMirror-sided) .editor-toolbar button,
body.fullscreen .uf-editor-wrap .editor-toolbar button {
    color: var(--text) !important;
}
.uf-editor-wrap .editor-toolbar.fullscreen i.separator,
.uf-editor-wrap:has(.CodeMirror-sided) .editor-toolbar i.separator,
body.fullscreen .uf-editor-wrap .editor-toolbar i.separator {
    border-color: var(--border-accent) !important;
}
.uf-editor-wrap .editor-toolbar button {
    color: var(--text) !important;
}
.uf-editor-wrap .editor-toolbar button:hover {
    background: var(--gold-dim) !important;
    border-color: var(--gold) !important;
}
.uf-editor-wrap .editor-statusbar { color: var(--text-muted); }
.uf-editor-wrap .editor-preview-side,
.uf-editor-wrap .editor-preview {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border-accent);
}

/* EasyMDE's side-by-side / fullscreen modes apply `.CodeMirror-fullscreen`
   and `.CodeMirror-sided`, which bring in EasyMDE's own white background
   styling that wins on specificity over the scoped `.uf-editor-wrap` rules
   above. Re-assert the dark theme on those classes, plus on every internal
   CodeMirror pane so nothing falls back to the library's light default. */
.CodeMirror.CodeMirror-fullscreen,
.CodeMirror.CodeMirror-sided,
.EasyMDEContainer .CodeMirror-fullscreen,
.EasyMDEContainer .CodeMirror-sided {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border-accent) !important;
}
.CodeMirror.CodeMirror-fullscreen .CodeMirror-scroll,
.CodeMirror.CodeMirror-sided .CodeMirror-scroll,
.CodeMirror.CodeMirror-fullscreen .CodeMirror-gutters,
.CodeMirror.CodeMirror-sided .CodeMirror-gutters {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border-accent) !important;
}
.CodeMirror.CodeMirror-fullscreen .CodeMirror-cursor,
.CodeMirror.CodeMirror-sided .CodeMirror-cursor {
    border-left-color: var(--gold) !important;
}
.editor-preview-side {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border-accent) !important;
}


.uf-editor-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}
.uf-editor-row input {
    flex: 1;
    min-width: 200px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border-accent);
    padding: .5rem .75rem;
    border-radius: 6px;
    font-size: 1.05rem;
}
.uf-editor-row input:focus { outline: none; border-color: var(--gold); }

.uf-revision-list {
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
}
.uf-revision-list li {
    border-bottom: 1px solid var(--border);
    padding: .5rem .25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
}
.uf-revision-list .meta { color: var(--text-muted); }
.uf-revision-list button { background: transparent; border: 1px solid var(--border-accent); color: var(--text); padding: .15rem .55rem; border-radius: 4px; cursor: pointer; font-size: .78rem; }
.uf-revision-list button:hover { border-color: var(--gold); color: var(--gold); }

/* ── Viewer with TOC sidebar ──────────────────────────────────────────────── */

.uf-viewer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .uf-viewer-grid { grid-template-columns: 1fr; }
    .uf-toc { display: none !important; }
}

.uf-toc {
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.uf-toc::-webkit-scrollbar { width: 4px; }
.uf-toc::-webkit-scrollbar-track { background: transparent; }
.uf-toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.uf-toc-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: .5rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.uf-toc-link {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .76rem;
    line-height: 1.4;
    padding: .15rem 0 .15rem .55rem;
    border-left: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.uf-toc-link:hover { color: var(--gold); }
.uf-toc-link.active { color: var(--gold); border-left-color: var(--gold); }

.uf-toc-h1 { font-weight: 600; color: var(--text); padding-top: .25rem; }
.uf-toc-h1.active { color: var(--gold); }
.uf-toc-h2 { padding-left: .9rem; }
.uf-toc-h3 { padding-left: 1.4rem; font-size: .73rem; }
.uf-toc-h4 { padding-left: 1.9rem; font-size: .72rem; }
.uf-toc-h5 { padding-left: 2.4rem; font-size: .7rem; opacity: .85; }

.uf-toc-section { margin-bottom: .15rem; }
.uf-toc-row {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
}
.uf-toc-row .uf-toc-link { flex: 1 1 auto; min-width: 0; }
.uf-toc-chev {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    margin-top: .25rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .65rem;
    transition: transform .15s, color .15s;
    transform: rotate(0deg);
}
.uf-toc-chev:hover { color: var(--gold); }
.uf-toc-chev[aria-expanded="true"] { transform: rotate(90deg); color: var(--gold); }
.uf-toc-chev-empty { cursor: default; visibility: hidden; }
.uf-toc-children {
    display: block;
    padding-left: .25rem;
    margin-bottom: .25rem;
}
.uf-toc-children[hidden] { display: none; }

/* ── Heading toolbar buttons (H1..H5) ─────────────────────────────────────── */

.editor-toolbar button.uf-h-btn {
    width: auto !important;
    min-width: 28px;
    padding: 0 .35rem !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
}
.editor-toolbar button.uf-h-btn::before { content: none !important; }

/* ── Permissions modal ────────────────────────────────────────────────────── */

.uf-perms-modal { max-height: 90vh; overflow-y: auto; }
.uf-perms-hint  { color: var(--text-muted); font-size: .82rem; margin: .25rem 0 .8rem; }

.uf-perms-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    margin-bottom: .9rem;
}

.uf-perms-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .85rem 1rem;
    margin-bottom: .8rem;
}
.uf-perms-section h4 {
    margin: 0 0 .4rem;
    color: var(--gold);
    font-size: .98rem;
}
.uf-perms-mode {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .6rem;
    font-size: .9rem;
}
.uf-perms-mode label { cursor: pointer; }
.uf-perms-mode input[type="radio"] { margin-right: .35rem; }

.uf-picker { margin-top: .55rem; }
.uf-picker-label { font-size: .82rem; color: var(--text-muted); margin-bottom: .25rem; }
.uf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-height: 1.6rem;
    padding: .25rem .35rem;
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    border-radius: 4px;
}
.uf-chips-empty { color: var(--text-muted); font-size: .78rem; padding: .15rem .25rem; }
.uf-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--bg);
    border: 1px solid var(--border-accent);
    border-radius: 999px;
    padding: .15rem .45rem .15rem .55rem;
    font-size: .82rem;
    color: var(--text);
    cursor: default;
}
.uf-chip-x {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .9rem;
    padding: 0 .15rem;
    line-height: 1;
}
.uf-chip-x:hover { color: var(--gold); }
.uf-role-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.uf-picker-search {
    position: relative;
    margin-top: .35rem;
}
.uf-picker-search input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    color: var(--text);
    padding: .35rem .55rem;
    border-radius: 4px;
    font-size: .85rem;
}
.uf-picker-search input:focus { outline: none; border-color: var(--gold); }
.uf-picker-results {
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    border-radius: 4px;
    margin-top: .25rem;
    max-height: 180px;
    overflow-y: auto;
}
.uf-picker-results:empty { display: none; }
.uf-picker-result {
    padding: .3rem .5rem;
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.uf-picker-result:hover { background: var(--bg-card-hover); color: var(--gold); }
.uf-picker-empty { padding: .35rem .5rem; color: var(--text-muted); font-size: .78rem; }

/* ── Move modal ───────────────────────────────────────────────────────────── */
.uf-move-list {
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    border-radius: 6px;
    max-height: 360px;
    overflow-y: auto;
    margin-top: .5rem;
}
.uf-move-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .6rem;
    cursor: pointer;
    font-size: .9rem;
    border-bottom: 1px solid var(--border);
}
.uf-move-row:last-child { border-bottom: none; }
.uf-move-row:hover { background: var(--bg-card-hover); color: var(--gold); }
.uf-move-row[data-disabled] { opacity: .45; cursor: not-allowed; }
.uf-move-row[data-disabled]:hover { background: transparent; color: inherit; }
.uf-move-current { color: var(--text-muted); font-size: .78rem; font-style: italic; }

.uf-move-search {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    color: var(--text);
    padding: .45rem .65rem;
    border-radius: 6px;
    font-size: .9rem;
    margin-top: .5rem;
}
.uf-move-search::placeholder { color: var(--text-muted); }
.uf-move-search:focus { outline: none; border-color: var(--gold); }
.uf-move-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf-move-path {
    color: var(--text-muted);
    font-size: .78rem;
    margin-left: auto;
    padding-left: .6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uf-move-empty { padding: .8rem; color: var(--text-muted); font-size: .85rem; text-align: center; }