body { min-height: 100vh; } :root { --sidebar-width: 250px; --sidebar-width-collapsed: 68px; --topbar-height: 56px; } /* --- Sidebar ------------------------------------------------------- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); display: flex; flex-direction: column; background: #1f2937; color: #cbd5e1; overflow-y: auto; overflow-x: hidden; transition: width 0.2s ease, left 0.25s ease; z-index: 1030; } .sidebar-header { display: flex; align-items: center; gap: 0.5rem; min-height: var(--topbar-height); padding: 0.5rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .sidebar-logo-link { display: flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; overflow: hidden; min-width: 0; } .sidebar-logo { max-height: 32px; max-width: 140px; width: auto; height: auto; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px; flex-shrink: 0; } .sidebar-logo-fallback { font-size: 1.5rem; flex-shrink: 0; } .sidebar-app-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Always-visible collapse/expand control — its own row (so it never has to compete with the logo for space at the collapsed width, and is never hidden the way it was hidden-when-collapsed before), aligned toward the sidebar's right edge in both expanded and collapsed desktop states — the same rule handles both since flex-end plus a fixed right padding stays "near the right edge" regardless of the sidebar's current width. */ .sidebar-toggle-row { display: flex; justify-content: flex-end; padding-right: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .sidebar-collapse-toggle { display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #cbd5e1; padding: 0.5rem 0.4rem; border-radius: 4px; } .sidebar-collapse-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .sidebar-collapse-toggle .icon-collapsed { display: none; } .sidebar-nav { flex: 1 1 auto; padding: 0.5rem 0 1rem; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; color: #cbd5e1; border-left: 3px solid transparent; white-space: nowrap; } .sidebar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .sidebar-nav .nav-link.active { background: rgba(255, 255, 255, 0.1); color: #fff; border-left-color: #0d6efd; font-weight: 500; } .sidebar-nav .nav-link i.bi { width: 1.25rem; flex-shrink: 0; text-align: center; font-size: 1.05rem; } .sidebar-nav .submenu-caret { font-size: 0.7rem; transition: transform 0.2s ease; } .sidebar-nav .nav-link[aria-expanded="true"] .submenu-caret { transform: rotate(180deg); } .sidebar-nav .submenu { padding-left: 2.1rem; } .sidebar-nav .submenu .nav-link { padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 0.925rem; } /* --- Collapsed (icon-only) desktop state ---------------------------- Keyed off a class on , not on .sidebar itself: a tiny inline script in base.html's applies it (from localStorage) before is even parsed, so there is no flash of the wrong state. The same class is what app.js toggles on button click. */ html.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); } html.sidebar-collapsed .sidebar .nav-label, html.sidebar-collapsed .sidebar .sidebar-app-name, html.sidebar-collapsed .sidebar .submenu-caret { display: none; } html.sidebar-collapsed .sidebar .submenu { display: none !important; } html.sidebar-collapsed .sidebar .sidebar-header { justify-content: center; padding: 0.5rem 0.25rem; } html.sidebar-collapsed .sidebar .sidebar-nav .nav-link { justify-content: center; padding: 0.65rem 0; } html.sidebar-collapsed .sidebar-collapse-toggle .icon-expanded { display: none; } html.sidebar-collapsed .sidebar-collapse-toggle .icon-collapsed { display: inline-block; } html.sidebar-collapsed .main-wrapper.with-sidebar { margin-left: var(--sidebar-width-collapsed); } /* --- Main content / topbar ------------------------------------------ */ .main-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .main-wrapper.with-sidebar { margin-left: var(--sidebar-width); transition: margin-left 0.2s ease; } .topbar { min-height: var(--topbar-height); background: #fff; border-bottom: 1px solid #dee2e6; position: sticky; top: 0; z-index: 1020; } .topbar-title { font-weight: 600; } .content-area { flex: 1 1 auto; padding: 1.5rem; min-width: 0; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1025; } /* --- Internal data tables: subtle column/row borders ------------------- A reusable class (not per-page inline styles) applied alongside Bootstrap's own `table`/`table-striped`/`table-hover` classes — this only adds light cell borders and a slightly more prominent header, it doesn't replace any existing Bootstrap table behavior. */ .table-subtle > :not(caption) > * > * { border: 1px solid #e5e7eb; } .table-subtle > thead > tr > th { border-bottom: 2px solid #d1d5db; background-color: #f9fafb; font-weight: 600; } /* --- SKU / product imagery ---------------------------------------------- Shared between the admin media-management page, internal SKU detail, and the customer catalog/detail pages, so the same visual language (rounded corners, contain-vs-cover, consistent placeholder) applies everywhere a SKU image can appear. */ .sku-image-preview { max-width: 100%; max-height: 320px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; padding: 6px; } .sku-thumbnail { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; background: #fff; } .sku-gallery-thumb { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; } .image-placeholder { display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #9ca3af; border-radius: 4px; border: 1px dashed #d1d5db; } .image-placeholder.sku-thumbnail { font-size: 2rem; } .image-placeholder.sku-image-preview { height: 220px; font-size: 3rem; padding: 0; } .image-placeholder.sku-gallery-thumb { font-size: 1.5rem; } /* --- Settings logo preview -------------------------------------------- */ .settings-logo-preview { max-height: 80px; max-width: 240px; object-fit: contain; border: 1px solid #dee2e6; border-radius: 4px; padding: 4px; background: #fff; } /* --- Mobile: sidebar becomes a drawer/overlay -------------------------- */ @media (max-width: 991.98px) { .sidebar { left: calc(-1 * var(--sidebar-width)); width: var(--sidebar-width) !important; } .sidebar.mobile-open { left: 0; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25); } /* The drawer always shows full labels, even if "collapsed" is the current desktop preference — icon-only doesn't make sense as an overlay, and the desktop preference must not be touched by mobile drawer open/close (kept only as a display override here). */ html.sidebar-collapsed .sidebar .nav-label, html.sidebar-collapsed .sidebar .sidebar-app-name, html.sidebar-collapsed .sidebar .submenu-caret { display: inline; } html.sidebar-collapsed .sidebar .submenu { display: block !important; } html.sidebar-collapsed .sidebar .sidebar-header { justify-content: flex-start; padding: 0.5rem 1rem; } html.sidebar-collapsed .sidebar .sidebar-nav .nav-link { justify-content: flex-start; padding: 0.6rem 1rem; } .sidebar-toggle-row { display: none; } .main-wrapper.with-sidebar { margin-left: 0 !important; } body.sidebar-mobile-open .sidebar-backdrop { display: block; } }