/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f5f5f5;
}

a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 30px;
}

/* Navbar */
.navbar {
    background: #2c3e50;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand a { color: #fff; font-weight: bold; font-size: 1.1rem; }
.nav-brand a:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 12px; }
.nav-link { color: #ecf0f1; }
.nav-user { color: #ecf0f1; }

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; user-select: none; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 140px;
    z-index: 100;
    padding-top: 4px;
}
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
}
.nav-dropdown-menu a:hover { background: #f0f4f8; }
.dropdown-divider { border: none; border-top: 1px solid #dee2e6; margin: 4px 0; }

.badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    background: #7f8c8d;
    color: #fff;
}

.admin-badge { background: #e74c3c; }
.badge-added { background: #27ae60; }
.badge-modified { background: #f39c12; }
.badge-removed { background: #e74c3c; }

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 16px;
    color: #777;
    font-size: 0.9rem;
}

.breadcrumb a { color: #0066cc; }

/* Flash messages */
.flash {
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.flash-success { background: #d4edda; border-color: #c3e6cb; color: #155724; }
.flash-error   { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.flash-info    { background: #d1ecf1; border-color: #bee5eb; color: #0c5460; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    line-height: 1.5;
}

.btn:hover { text-decoration: none; opacity: 0.9; }
.btn-primary   { background: #3498db; color: #fff; }
.btn-secondary { background: #95a5a6; color: #fff; }
.btn-danger    { background: #e74c3c; color: #fff; }
.btn-success   { background: #27ae60; color: #fff; }
.btn-sm        { padding: 4px 10px; font-size: 0.8rem; }

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 20px;
}

.table th, .table td {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    text-align: left;
}

.table th { background: #f8f9fa; font-weight: 600; }
.table-responsive { overflow-x: auto; }

/* Diff colors */
.match            { background-color: #d4edda; }
.mismatch         { background-color: #f8d7da; }
.only-one         { background-color: #fff3cd; }
.only_agreed      { background-color: #fff3cd; }
.only_submission  { background-color: #fff3cd; }
.empty            { background-color: #e9ecef; color: #999; }

.key-cell { font-weight: 600; font-family: monospace; }

/* Table row drag reorder */
.drag-handle { cursor: grab; color: #999; text-align: center; width: 30px; user-select: none; }
.drag-handle:active { cursor: grabbing; }
tr.dragging { opacity: 0.4; }
tr.row-drop-above { border-top: 3px solid #3498db; }
tr.row-drop-below { border-bottom: 3px solid #3498db; }

/* Forms */
.form { max-width: 700px; }

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
}

.form-hint { color: #999; font-size: 0.8rem; margin-top: 4px; }

.form-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.form-row .form-control { flex: 1; }

.inline-form { display: inline; }

.inline-edit-form { margin-top: 8px; }

/* Login */
.login-container {
    max-width: 400px;
    margin: 60px auto;
    text-align: center;
}

.login-container .form { text-align: left; margin: 0 auto; }

/* Sections */
section { margin-top: 30px; }

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h2 { margin: 0; }

.description { margin-bottom: 8px; color: #555; }
.meta { color: #777; font-size: 0.85rem; }
.actions { margin-bottom: 20px; display: flex; gap: 8px; }
.empty-state { color: #999; font-style: italic; margin: 20px 0; }
.info-text { color: #666; font-size: 0.9rem; margin-top: 8px; }

/* Edit section (details/summary) */
.edit-section { margin-bottom: 16px; }
.edit-section summary { cursor: pointer; color: #0066cc; font-size: 0.9rem; }

/* Submissions */
.submissions-section h2 { margin-bottom: 12px; }

.submission-card, .suggestion-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.submission-notes { color: #555; margin-top: 4px; font-size: 0.9rem; }

.approve-form {
    margin-top: 8px;
}

/* Suggestions */
.suggestions-section h2 { margin-bottom: 12px; }
.suggestions-section h3 { margin: 16px 0 8px; }

/* Changelog */
.changelog-section { margin-top: 30px; }
.changelog-section h2 { margin-bottom: 12px; }

.changelog-entry {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 16px;
    margin-bottom: 8px;
}

.changelog-entry summary { cursor: pointer; }
.changelog-header { margin-bottom: 4px; }
.changelog-breadcrumb { font-size: 0.85rem; color: #777; }
.changelog-note { color: #555; margin-top: 4px; font-size: 0.9rem; font-style: italic; }

.changelog-feed { max-height: 400px; overflow-y: auto; }

/* Chat */
.chat-section h2 { margin-bottom: 12px; }

.chat-messages {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    background: #fff;
    margin-bottom: 8px;
}

.chat-msg { margin-bottom: 10px; }
.chat-msg p { margin: 2px 0 0; }
.chat-time { color: #999; margin-left: 6px; }

.chat-form {
    display: flex;
    gap: 8px;
}

.chat-form .form-control { flex: 1; }

/* Tree */
.tree { list-style: none; padding-left: 24px; margin: 0; }
.tree-root { padding-left: 0; }
.tree-node {
    padding: 1px 0;
    position: relative;
}
.tree-node::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 0;
    height: 100%;
    border-left: 1px solid #ccc;
}
.tree-node:last-child::before {
    height: 14px;
}
.tree-node::after {
    content: '';
    position: absolute;
    left: -16px;
    top: 14px;
    width: 12px;
    border-bottom: 1px solid #ccc;
}
.tree-root > .tree-node::before,
.tree-root > .tree-node::after { display: none; }
.tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.tree-item:hover { background: #f0f4f8; }
.tree-icon { font-size: 1.1rem; flex-shrink: 0; }
.tree-name { cursor: pointer; font-family: monospace; }
.tree-name:hover { text-decoration: underline; }
.tree-toggle { font-size: 0.6rem; color: #777; width: 12px; flex-shrink: 0; cursor: pointer; }
.tree-folder-toggle { cursor: pointer; }
.tree-collapsed { display: none; }
.tree-actions-inline { display: flex; gap: 3px; margin-left: 8px; }
.btn-xs { padding: 1px 6px; font-size: 0.7rem; }
.tree-node.dragging { opacity: 0.4; }
.tree-folder-drop { background: #d6eaf8; border-radius: 4px; }

/* Drop zones between items */
.tree-drop-zone {
    height: 4px;
    transition: height 0.1s, background 0.1s;
    border-radius: 2px;
}
.tree-drop-zone.active {
    height: 8px;
    background: #3498db;
    border: 1px dashed #2980b9;
}
.tree-drop-zone-root {
    height: 20px;
    min-height: 20px;
}
.tree-drop-zone-root.active {
    height: 20px;
    background: #d6eaf8;
    border: 2px dashed #3498db;
}
.tree-drop-zone-empty {
    height: 8px;
    margin: 4px 0;
}
.tree-drop-zone-empty.active {
    background: #d6eaf8;
    border: 1px dashed #3498db;
}
.tree-toolbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.toolbar-divider { width: 1px; height: 24px; background: #ccc; }

.tree-editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.tree-text-panel h3, .tree-visual-panel h3 { margin-bottom: 8px; font-size: 1rem; }
.tree-text-panel textarea { font-family: monospace; font-size: 0.85rem; }
.tree-text-actions { margin-top: 8px; display: flex; gap: 8px; }
.tree-text-panel code { background: #e9ecef; padding: 1px 4px; border-radius: 2px; font-size: 0.8rem; }
.tree-editor-container {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 16px;
    min-height: 100px;
    margin-bottom: 12px;
}
.tree-view {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 8px;
}
.tree-view-scroll {
    height: 400px;
    overflow-y: auto;
    resize: vertical;
    min-height: 100px;
}

/* Collapsible sections */
.collapsible-section { margin-bottom: 0; }
.collapsible-section summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin-bottom: 12px;
}
.collapsible-section summary::-webkit-details-marker { display: none; }
.collapsible-section summary::before {
    content: '▶';
    font-size: 0.7rem;
    transition: transform 0.2s;
    color: #777;
}
.collapsible-section[open] summary::before {
    transform: rotate(90deg);
}
.inline-heading { display: inline; margin: 0; font-size: 1.25rem; }

/* References */
.reference-card {
    padding: 8px 12px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 6px;
    background: #fff;
}
.reference-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
}
.reference-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.reference-actions .inline-form { display: inline-flex; }
.reference-actions .btn { vertical-align: middle; }
.reference-edit-row {
    padding: 8px 12px;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    margin-bottom: 6px;
    background: #f0f8ff;
}
.reference-edit-form { display: flex; gap: 6px; align-items: center; }
.reference-edit-form .form-control { flex: 1; padding: 4px 8px; font-size: 0.85rem; }
.add-reference-form { margin-top: 12px; }
.add-reference-form summary { cursor: pointer; }
.add-reference-form .form { margin-top: 8px; }