/* ------- topbar nav additions ------- */
.topbar-nav { display:flex; align-items:center; gap:12px; }
.nav-link { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; color:#475569; text-decoration:none; font-size:14px; }
.nav-link:hover { background:#f1f5f9; color:#0f172a; }
.nav-link.active { background:#eef2ff; color:#2563eb; }
.nav-link svg { display:block; }

/* ------- history layout ------- */
.hist-layout { max-width:1140px; margin:0 auto; padding:24px 20px 60px; display:grid; grid-template-columns: 240px 1fr; gap:24px; }
.hist-layout.single { grid-template-columns: 1fr; }
@media (max-width: 760px){ .hist-layout { grid-template-columns: 1fr; } }
.hist-side { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px; height:fit-content; position:sticky; top:16px; }
.hist-side-title { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#64748b; margin:0 0 10px; }
.proj-filter { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.pf-btn { width:100%; text-align:left; background:transparent; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:#0f172a; font-size:14px; }
.pf-btn:hover { background:#f1f5f9; }
.pf-btn.active { background:#eef2ff; color:#2563eb; font-weight:600; }
.pf-count { background:#e2e8f0; color:#475569; font-size:11px; padding:2px 7px; border-radius:999px; font-weight:600; }
.pf-btn.active .pf-count { background:#dbeafe; color:#1d4ed8; }

/* ------- history main ------- */
.hist-main { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:24px; min-height:400px; }
.hist-head { margin:0 0 16px; }
.hist-head h1 { margin:0 0 4px; font-size:24px; }
.hist-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hist-item { display:flex; gap:14px; padding:14px; border:1px solid #e2e8f0; border-radius:12px; background:#fafafa; transition:border-color .15s; }
.hist-item:hover { border-color:#cbd5e1; background:#fff; }
.hist-thumb { width:88px; height:88px; border-radius:8px; background:#fff; padding:4px; border:1px solid #e2e8f0; flex-shrink:0; object-fit:contain; }
.hist-thumb.placeholder { background:#f1f5f9; }
.hist-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.hist-title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hist-short { font-weight:600; color:#2563eb; text-decoration:none; word-break:break-all; }
.hist-short:hover { text-decoration:underline; }
.hist-orig { font-size:13px; word-break:break-all; }
.hist-meta { font-size:12px; }
.proj-tag { background:#eef2ff; color:#1e40af; padding:2px 8px; border-radius:999px; font-weight:500; }
.badge { background:#eff6ff; color:#1d4ed8; font-size:11px; padding:2px 8px; border-radius:999px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.badge.alt { background:#ecfdf5; color:#047857; }
.hist-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.hist-actions .ghost { padding:5px 10px; font-size:12px; }
.hist-actions .danger { color:#dc2626; }
.hist-actions .danger:hover { background:#fee2e2; }
.hist-actions .proj-move { padding:5px 8px; font-size:12px; border:1px solid #e2e8f0; border-radius:6px; background:#fff; cursor:pointer; }
.hist-actions .proj-move.ok { background:#d1fae5; }

.empty { text-align:center; padding:40px 20px; color:#64748b; }

/* ------- projects page ------- */
.proj-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.proj-card { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:14px; border:1px solid #e2e8f0; border-radius:12px; background:#fafafa; }
.proj-card-main { min-width:0; }
.proj-name { font-weight:600; font-size:15px; color:#0f172a; word-break:break-word; }
.proj-card-actions { display:flex; gap:6px; flex-wrap:wrap; }
.proj-card-actions .ghost { padding:4px 10px; font-size:12px; }
.new-proj-form { display:flex; gap:8px; margin:12px 0 16px; flex-wrap:wrap; }
.new-proj-form input { flex:1; min-width:200px; padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; }
.new-proj-form input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.row.between { display:flex; justify-content:space-between; align-items:center; }
.primary.small, .ghost.small { padding:6px 12px; font-size:13px; }
.ghost.danger { color:#dc2626; }

/* ------- project select on creation form ------- */
.project-select { width:100%; padding:10px 14px 10px 40px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; font-size:15px; appearance:none; cursor:pointer; }
.project-select:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }