/* ============================================================ Conjunto layout — fixed topbar / fixed sidebar(s) / fixed statusbar ============================================================ Required CSS variables (set on ): --cj-navbar-height --cj-statusbar-height --cj-sidebar-left-width (free-drag, "full" mode only) --cj-sidebar-left-mini-width --cj-sidebar-right-width (free-drag, "full" mode only) --cj-sidebar-right-mini-width Body classes (exactly one per side): .cj-sidebar-{left,right}-mode-full → text + icons, free-drag width .cj-sidebar-{left,right}-mode-mini → icons only; flyout submenus .cj-sidebar-{left,right}-mode-collapsed → sidebar fully out of layout Additional (mobile only): .cj-sidebar-{left,right}-open → overlay visible (< 992px) */ :root { --cj-navbar-height: 3.5rem; --cj-statusbar-height: 2.5rem; --cj-sidebar-left-width: 15rem; --cj-sidebar-left-mini-width: 3.5rem; --cj-sidebar-right-width: 20rem; --cj-sidebar-right-mini-width: 3.5rem; --cj-sidebar-bg: var(--tblr-bg-surface, #fff); --cj-sidebar-border: var(--tblr-border-color, rgba(0, 0, 0, 0.08)); /* Stacking order, foreground → background: sidebar (1050) > backdrop (1045) > topbar/statusbar (1030). Sidebar must stay above the topbar so dropdowns/avatar/bell opened from the topbar do not punch through the mobile overlay. The backdrop sits below the sidebar but still above the topbar so the dimming covers the chrome too. */ --cj-z-topbar: 1030; --cj-z-statusbar: 1030; --cj-z-backdrop: 1045; --cj-z-sidebar: 1050; } /* ── Topbar ───────────────────────────────────────────────── */ #cj-topbar { z-index: var(--cj-z-topbar); border-bottom: 1px solid var(--cj-sidebar-border); background: var(--tblr-bg-surface, #fff); } /* ── Sidebars (always position:fixed) ─────────────────────── */ .cj-sidebar-left, .cj-sidebar-right { position: fixed; top: var(--cj-navbar-height); bottom: var(--cj-statusbar-height); z-index: var(--cj-z-sidebar); background: var(--cj-sidebar-bg); overflow-y: auto; overflow-x: hidden; transition: transform 0.25s ease, width 0.25s ease; transform: translateX(0); /* Thin, unobtrusive scrollbar — the thumb only materialises on hover so a tall menu (especially in the narrow mini mode) doesn't show Chrome's chunky default bar. */ scrollbar-width: thin; scrollbar-color: transparent transparent; } .cj-sidebar-left:hover, .cj-sidebar-right:hover { scrollbar-color: var(--tblr-border-color, rgba(0, 0, 0, 0.2)) transparent; } .cj-sidebar-left::-webkit-scrollbar, .cj-sidebar-right::-webkit-scrollbar { width: 6px; } .cj-sidebar-left::-webkit-scrollbar-thumb, .cj-sidebar-right::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; } .cj-sidebar-left:hover::-webkit-scrollbar-thumb, .cj-sidebar-right:hover::-webkit-scrollbar-thumb { background: var(--tblr-border-color, rgba(0, 0, 0, 0.2)); } .cj-sidebar-left { left: 0; width: var(--cj-sidebar-left-width); border-right: 1px solid var(--cj-sidebar-border); } .cj-sidebar-right { right: 0; width: var(--cj-sidebar-right-width); border-left: 1px solid var(--cj-sidebar-border); } /* ── Sidebar resize handle (desktop only) ────────────────── */ .cj-sidebar-resize { position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 1; background: transparent; transition: background 0.15s ease; } .cj-sidebar-left-resize { right: 0; } .cj-sidebar-right-resize { left: 0; } .cj-sidebar-resize:hover, body.cj-sidebar-resizing .cj-sidebar-resize { background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.3); } body.cj-sidebar-resizing .cj-sidebar-left, body.cj-sidebar-resizing .cj-sidebar-right, body.cj-sidebar-resizing .cj-page-content { transition: none; } body.cj-sidebar-resizing { user-select: none; -webkit-user-select: none; cursor: col-resize; } .cj-sidebar-nav { list-style: none; margin: 0; padding: 0.5rem 0; display: flex; flex-direction: column; } .cj-sidebar-nav .nav-item { width: 100%; } .cj-sidebar-nav .nav-link { display: flex; align-items: center; padding: 0.5rem 1rem; color: var(--tblr-body-color); text-decoration: none; border-radius: 0; } .cj-sidebar-nav .nav-link-icon { display: inline-flex; align-items: center; margin-right: 0.5rem; font-size: 1.1rem; width: 1.25rem; } .cj-sidebar-nav .nav-link-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cj-sidebar-nav .nav-link.active, .cj-sidebar-nav .nav-item.active > .cj-sidebar-row > .nav-link { color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.08); } .cj-sidebar-nav .nav-link:hover { background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.05); } .cj-sidebar-nav .nav-link.disabled, .cj-sidebar-nav .nav-link.disabled:hover { color: var(--tblr-nav-link-disabled-color, var(--tblr-disabled-color)); background: transparent; opacity: 0.55; pointer-events: none; cursor: default; } /* Submenu (level 2) — indented, no nested children */ .cj-sidebar-nav .nav-submenu { list-style: none; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.02); } .cj-sidebar-nav .nav-submenu .nav-link { padding-left: 2.75rem; font-size: 0.875rem; } /* Right-sidebar widget stack — same vertical rhythm as the nav above. */ .cj-sidebar-right-stack { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; } /* Inline action button: half-opacity until row hover */ .cj-sidebar-action { flex: 0 0 auto; opacity: 0.35; transition: opacity 0.15s ease; } .cj-sidebar-row:hover .cj-sidebar-action { opacity: 1; } /* Collapse arrow rotation */ .cj-sidebar-arrow { transition: transform 0.2s ease; flex: 0 0 auto; } .cj-sidebar-nav [aria-expanded="true"] .cj-sidebar-arrow { transform: rotate(90deg); } /* Chevron toggle button sits next to the nav-link — keep it visually flush */ .cj-sidebar-nav .cj-sidebar-toggle { background: transparent; color: inherit; } .cj-sidebar-nav .cj-sidebar-toggle:hover { background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.05); } .cj-sidebar-divider { list-style: none; height: 1px; background: var(--cj-sidebar-border); margin: 0.5rem 0; } /* ── Page title icon ──────────────────────────────────────── */ .page-title-icon:empty { display: none; } .page-title-icon:not(:empty) { margin-right: 0.5rem; } /* ── Page content (canvas) ────────────────────────────────── */ .cj-page-content { margin-left: var(--cj-sidebar-left-width); margin-right: var(--cj-sidebar-right-width); padding-top: var(--cj-navbar-height); padding-bottom: var(--cj-statusbar-height); min-height: 100vh; transition: margin 0.25s ease; box-sizing: border-box; } /* ── Left sidebar mode: mini ──────────────────────────────── */ body.cj-sidebar-left-mode-mini .cj-sidebar-left { width: var(--cj-sidebar-left-mini-width); } body.cj-sidebar-left-mode-mini .cj-page-content { margin-left: var(--cj-sidebar-left-mini-width); } body.cj-sidebar-left-mode-mini .cj-sidebar-left .nav-link-title, body.cj-sidebar-left-mode-mini .cj-sidebar-left .badge, body.cj-sidebar-left-mode-mini .cj-sidebar-left .cj-sidebar-arrow, body.cj-sidebar-left-mode-mini .cj-sidebar-left .cj-sidebar-toggle, body.cj-sidebar-left-mode-mini .cj-sidebar-left .cj-sidebar-action, body.cj-sidebar-left-mode-mini .cj-sidebar-left .nav-submenu { display: none; } body.cj-sidebar-left-mode-mini .cj-sidebar-left .cj-sidebar-row { justify-content: center; min-height: 2.5rem; } body.cj-sidebar-left-mode-mini .cj-sidebar-left .cj-sidebar-link { justify-content: center; align-items: center; padding: 0; line-height: 1; align-self: stretch; } body.cj-sidebar-left-mode-mini .cj-sidebar-left .nav-link-icon { margin-right: 0; font-size: 1.5rem; /* fs-2 */ width: auto; justify-content: center; line-height: 1; } body.cj-sidebar-left-mode-mini .cj-sidebar-left .nav-link-icon > i { line-height: 1; } body.cj-sidebar-left-mode-mini .cj-sidebar-left .nav-item.active > .cj-sidebar-row, body.cj-sidebar-left-mode-mini .cj-sidebar-left .nav-item:has(> .cj-sidebar-row > .nav-link.active) > .cj-sidebar-row { box-shadow: inset 3px 0 0 var(--tblr-primary); } /* ── Left sidebar mode: collapsed ─────────────────────────── */ body.cj-sidebar-left-mode-collapsed .cj-sidebar-left { transform: translateX(-100%); } /* Preserve the previous expanded width while collapsed so the slide-in animation starts from the correct off-screen offset. */ body.cj-sidebar-left-mode-collapsed[data-sidebar-left-last-expanded-mode="mini"] .cj-sidebar-left { width: var(--cj-sidebar-left-mini-width); } body.cj-sidebar-left-mode-collapsed .cj-page-content { margin-left: 0; } body.cj-sidebar-left-mode-collapsed .cj-sidebar-left-resize { display: none; } /* ── Right sidebar mode: mini ─────────────────────────────── */ body.cj-sidebar-right-mode-mini .cj-sidebar-right { width: var(--cj-sidebar-right-mini-width); } body.cj-sidebar-right-mode-mini .cj-page-content { margin-right: var(--cj-sidebar-right-mini-width); } body.cj-sidebar-right-mode-mini .cj-sidebar-right .cj-sidebar-right-stack > * > :not(.cj-sidebar-mini-marker) { /* Plugins can opt-in to mini-mode visibility by marking their icon with .cj-sidebar-mini-marker; everything else collapses. */ display: none; } /* ── Right sidebar mode: collapsed ────────────────────────── */ body.cj-sidebar-right-mode-collapsed .cj-sidebar-right { transform: translateX(100%); } body.cj-sidebar-right-mode-collapsed[data-sidebar-right-last-expanded-mode="mini"] .cj-sidebar-right { width: var(--cj-sidebar-right-mini-width); } body.cj-sidebar-right-mode-collapsed .cj-page-content { margin-right: 0; } body.cj-sidebar-right-mode-collapsed .cj-sidebar-right-resize { display: none; } /* ── Topbar toggle icon swap ──────────────────────────────── */ /* Both icons render inside the same button — CSS picks the matching one per sidebar mode so the swap survives reloads and HTMX swaps without any JS coordination. Default: show the "expanded" icon, hide the "collapsed" one. When the body carries the collapsed-mode class for THIS side, flip the pair. */ #cj-sidebar-left-toggle .cj-icon-when-collapsed, #cj-sidebar-right-toggle .cj-icon-when-collapsed { display: none; } body.cj-sidebar-left-mode-collapsed #cj-sidebar-left-toggle .cj-icon-when-expanded { display: none; } body.cj-sidebar-left-mode-collapsed #cj-sidebar-left-toggle .cj-icon-when-collapsed { display: inline-block; } body.cj-sidebar-right-mode-collapsed #cj-sidebar-right-toggle .cj-icon-when-expanded { display: none; } body.cj-sidebar-right-mode-collapsed #cj-sidebar-right-toggle .cj-icon-when-collapsed { display: inline-block; } /* ── Lock indicators ──────────────────────────────────────── */ body[data-sidebar-left-mode-locked] #cj-sidebar-left-toggle { pointer-events: none; opacity: 0.4; } body[data-sidebar-left-mode-locked] .cj-sidebar-left-resize { display: none; } body[data-sidebar-right-mode-locked] #cj-sidebar-right-toggle { pointer-events: none; opacity: 0.4; } body[data-sidebar-right-mode-locked] .cj-sidebar-right-resize { display: none; } /* ── Mini-mode flyout (legacy markup, always hidden) ──────── */ /* Mini mode no longer opens submenu flyouts — only level-1 icons are visible and a click follows the link's own href. The .cj-sidebar-flyout