/*
 * Shared sidebar navigation — used by Import, Tools, and Publish views.
 * Pattern: narrow left sidebar + content area to the right.
 */

.hl-page { padding: 1rem 1.25rem; }
.hl-page-body { display: flex; gap: 1.25rem; align-items: flex-start; }

/* ── Sidebar ── */
.hl-sidebar { width: 200px; flex-shrink: 0; }

.hl-nav-list { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; }
.hl-nav-header { padding: 0.5rem 0.75rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6c757d; background: #f8f9fa; border-bottom: 1px solid #dee2e6; }

.hl-nav-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.1s; user-select: none; text-decoration: none; }
.hl-nav-item:last-child { border-bottom: none; }
.hl-nav-item:hover:not(.disabled) { background: #f8f9ff; }
.hl-nav-item.active { background: #eef3ff; border-left: 3px solid #0d6efd; padding-left: calc(0.75rem - 3px); }
.hl-nav-item.disabled { opacity: 0.45; cursor: default; pointer-events: none; }

.hl-nav-item .nav-icon { font-size: 1rem; color: #6c757d; flex-shrink: 0; }
.hl-nav-item.active .nav-icon { color: #0d6efd; }
.hl-nav-item .nav-label { font-size: 0.8rem; font-weight: 500; color: #343a40; }
.hl-nav-item.active .nav-label { font-weight: 600; color: #0d6efd; }

/* ── Delete nav item — red in default state ── */
#impNavDelete .nav-icon { color: #dc2626; }
#impNavDelete .nav-label { color: #dc2626; }
#impNavDelete:hover:not(.active) { background: #fef2f2; }

/* ── Options panel below nav ── */
.hl-options-panel { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; margin-top: 0.75rem; }
.hl-options-header { padding: 0.5rem 0.75rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6c757d; background: #f8f9fa; border-bottom: 1px solid #dee2e6; }
.hl-options-body { padding: 0.65rem 0.75rem; font-size: 0.78rem; }

/* ── Content area ── */
.hl-content { flex: 1; min-width: 0; }