{# Shared editor layout + file-tree styles for the content, plugin and theme editors.
   Included via {% include 'pages/_editor-styles.twig' %} inside the extra_css block. #}
<style>
.editor-layout { display: flex; gap: 1rem; align-items: stretch; }
.plugin-file-tree { width: 300px; flex: 0 0 300px; }
.editor-main { flex: 1 1 auto; min-width: 0; }
.editor-tree { list-style: none; padding-left: 0; margin: 0; }
.editor-tree ul { list-style: none; padding-left: 1.1rem; margin: 0; }
.editor-tree li { padding: 0; position: relative; }
.editor-tree li > .tree-link { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; border-radius: .25rem; text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.4; }
.editor-tree li > .tree-link:hover { background-color: rgba(13,110,253,.08); }
.editor-tree li > .tree-link.is-active { background-color: var(--bs-primary-bg-subtle, #cfe2ff); font-weight: 600; }
.editor-tree .tree-toggle.is-selected { background-color: rgba(13,110,253,.12); font-weight: 600; }
.editor-tree .tree-toggle { cursor: pointer; user-select: none; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; }
.editor-tree .tree-chevron { flex: 0 0 auto; }
.editor-tree .tree-chevron-btn { background: transparent; border: 0; color: inherit; padding: .2rem .4rem; line-height: 1.4; flex: 0 0 auto; cursor: pointer; }
.editor-tree .tree-chevron-btn:hover { color: var(--bs-primary, #0d6efd); }
.editor-tree .tree-name { flex: 1 1 auto; min-width: 0; }
.editor-tree .tree-name.is-selected { background-color: var(--bs-primary-bg-subtle, #cfe2ff); font-weight: 600; }
.editor-tree .tree-root-link { display: flex; align-items: center; gap: .3rem; padding: .25rem .4rem; border-radius: .25rem; text-decoration: none; color: inherit; font-size: .9rem; font-weight: 600; }
.editor-tree .tree-root-link:hover { background-color: rgba(13,110,253,.08); }
.editor-tree .tree-root-link.is-selected { background-color: var(--bs-primary-bg-subtle, #cfe2ff); }
.editor-tree .tree-chevron-spacer { display: inline-block; width: .9rem; flex: 0 0 auto; }
.editor-tree .badge-ext { font-size: .6rem; margin-left: auto; }
.editor-tree .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-tree .tree-move-btn,
.editor-tree .tree-delete-btn { font-size: .9rem; line-height: 1; padding: .15rem; color: #6c757d; text-decoration: none; background: transparent; border: 0; }
.editor-tree .tree-move-btn:hover,
.editor-tree .tree-delete-btn:hover { color: #0d6efd; }
.editor-tree .tree-delete-btn:hover { color: #dc3545; }
.editor-tree .tree-file-actions { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); display: flex; gap: .15rem; align-items: center; opacity: 0; transition: opacity .15s; }
.editor-tree li:hover > .tree-file-actions { opacity: 1; }
.editor-tree li > .tree-link { padding-right: 4rem; }
/* Drag-and-drop states */
.editor-tree li.tree-dragging { opacity: .5; }
.editor-tree .tree-drag-over { background-color: rgba(13,110,253,.18) !important; outline: 2px dashed var(--bs-primary, #0d6efd); outline-offset: -2px; border-radius: .25rem; }
/* Toast */
.tree-toast { border-radius: .375rem; }
.plugin-file-tree .card-body { max-height: 70vh; overflow-y: auto; }
/* Directory action buttons (new file/dir, rename) — content editor only */
.tree-dir-row { position: relative; display: flex; align-items: center; }
.tree-dir-row > .tree-name { padding-right: 3rem; }
.tree-dir-row > .tree-toggle { padding-right: 5rem; }
.tree-dir-actions { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); display: flex; gap: .15rem; align-items: center; }
.tree-dir-actions .btn-link { color: #6c757d; }
.tree-dir-actions .btn-link:hover { color: #0d6efd; }
@media (max-width: 768px) {
    .editor-layout { flex-direction: column; }
    .plugin-file-tree { width: 100%; flex-basis: auto; max-height: 320px; }
    .plugin-file-tree .card-body { max-height: 260px; }
}
/* Plugin checkbox group (content editor) */
.plugin-checkbox-group { display: flex; flex-direction: column; gap: .15rem; }
.plugin-checkbox-group .form-check { margin-bottom: 0; }
.plugin-checkbox-group .form-check-label { font-size: .875rem; }
</style>