============================================================ */
.lo-pipeline {
display: flex;
align-items: center;
gap: 0;
background: var(--lactis-surface);
border: 1px solid var(--lactis-line);
border-radius: var(--lactis-r-md);
box-shadow: var(--lactis-shadow-card);
padding: 14px 18px;
overflow-x: auto;
}
.lo-pstep { display: flex; align-items: center; gap: 9px; flex: none; }
.lo-pc {
width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.lo-pl { font-size: 11.5px; line-height: 1.2; color: var(--lactis-muted-2); }
.lo-pl b { display: block; font-family: var(--font-display); font-size: 13px; color: var(--lactis-ink); font-weight: 600; }
.lo-pconn { height: 2px; width: 34px; background: var(--lactis-line); margin: 0 6px; flex: none; }
.lo-pconn--done { background: var(--spruce-400); }
.lo-pstep--done .lo-pc { background: var(--spruce-600); color: #fff; }
.lo-pstep--now .lo-pc { background: var(--gold-300); color: var(--spruce-900); box-shadow: 0 0 0 4px var(--gold-50); }
.lo-pstep--todo .lo-pc { background: var(--lactis-milk); color: var(--lactis-muted-2); border: 1.5px solid var(--lactis-line); }
.dark .lo-pstep--now .lo-pc { box-shadow: 0 0 0 4px rgba(221,180,86,.16); }
/* Enhance the existing flow widget to the same visual language */
.lactis-flow-step--done .lactis-flow-step__icon { background: var(--spruce-600); color: #fff; }
.lactis-flow-step--now .lactis-flow-step__icon { background: var(--gold-300); color: var(--spruce-900); box-shadow: 0 0 0 4px var(--gold-50); }
.lactis-flow-step--todo .lactis-flow-step__icon { background: var(--lactis-milk); color: var(--lactis-muted-2); border: 1.5px solid var(--lactis-line); }
/* QC grade chips (extend the existing .lactis-chip set) */
.lactis-chip--grade-a { background: var(--lo-success-bg); color: var(--lo-success-fg); }
.lactis-chip--grade-b { background: var(--lo-warning-bg); color: var(--lo-warning-fg); }
.lactis-chip--grade-c { background: var(--lo-danger-bg); color: var(--lo-danger-fg); }
.lactis-chip--priority { background: var(--gold-100); color: var(--gold-700); }
/* ============================================================
Sidebar collapse toggle (custom LactisOne system)
- Button stays visible when collapsed (no longer a label)
- Icon rotates 180deg: points in (collapse) <-> out (expand)
- Desktop-only control; hidden in the mobile drawer
============================================================ */
.lactis-sidebar-collapse i {
transition: transform 0.25s ease;
}
html.lactis-sidebar-collapsed .lactis-sidebar-collapse i {
transform: rotate(180deg);
}
@media (max-width: 1023.98px) {
.lactis-sidebar-collapse {
display: none !important;
}
}
/* ============================================================
Sidebar rail HARDENING (safe, bulletproof)
Guarantees the rail can never render white — and therefore can
never hide its light nav text/icons — regardless of KTUI drawer
state, re-init/relocation, or stale CSS. Background + the rail's
*default* text colour are forced; per-item state colours (active
#fff, group header dim, gold badge) are intentionally NOT forced,
so they keep working via their own (more specific) rules.
============================================================ */
:root {
--lactis-sidebar-bg: linear-gradient(180deg, #0E4D40 0%, #082E27 100%);
--lactis-sidebar-text: #CFE0DA;
}
.dark {
--lactis-sidebar-bg: linear-gradient(180deg, #0A1614 0%, #06100E 100%);
--lactis-sidebar-text: #C4D4CE;
}
/* 1 — Force the spruce rail in every state (solid #0B3D33 fallback).
Anchored on the #sidebar ID (not the class) so the rail survives even
if KTUI strips the lactis-sidebar class from the element. */
#sidebar,
aside#sidebar,
.lactis-shell #sidebar,
#sidebar.lactis-sidebar,
.kt-drawer.lactis-sidebar,
.lactis-sidebar {
background: var(--lactis-sidebar-bg, #0B3D33) !important;
color: var(--lactis-sidebar-text, #CFE0DA) !important;
}
/* 2 — Keep dividers subtle on the dark rail (scoped, not global *) */
#sidebar .lactis-sidebar-brand,
#sidebar .lactis-side-foot {
border-color: rgba(255, 255, 255, 0.08);
}
/* 3 — Icon-visibility safeguard ONLY (expanded + collapsed states).
Per-item COLOUR is deliberately left to the existing rules so active
(#fff), group headers (dim) and gold badges keep their states. The
forced container colour above is the legibility safety net; icons use
currentColor so they always follow the (light) text colour. */
#sidebar .lactis-nav-item i {
color: currentColor;
display: inline-flex !important;
}
/* 4 — Anchor the fixed rail to full viewport height even if KTUI strips
the top-0 / bottom-0 utility classes (they were shared with the drawer
attribute). Keeps the scrollable nav area from collapsing. */
#sidebar {
top: 0 !important;
bottom: 0 !important;
}
/* ============================================================
App shell width fix.
.lactis-shell is a flex child of with no width, so it
shrink-wraps to its content's intrinsic width. List pages have
full-width tables that fill the viewport (hiding this), but the
dashboard's content (KPI grid + fixed 300px rail) is intrinsically
narrower, so the shell shrank and left a gap on the right.
Forcing the shell to fill the viewport makes every page consistent
(.lactis-page stretches fluidly across the main content area).
============================================================ */
.lactis-shell {
width: 100%;
}
/* ============================================================
Sidebar collapse toggle — Metronic-style square icon button.
Converts the old full-width "Collapse" text row into a small
square icon-only button that sits on the sidebar/content divider
at header height and slides with the rail when collapsed.
Custom collapse logic (lactisOne.toggleSidebarCollapse) is kept;
only the button's appearance/position changes. CSS-only -> live
on refresh, no rebuild.
position:fixed escapes the rail's overflow:hidden, so the button
can straddle the divider; `left` tracks --sidebar-width so it
follows the rail in both expanded (264px) and collapsed (76px).
============================================================ */
.lactis-sidebar-collapse {
position: fixed;
top: 16px;
left: calc(var(--sidebar-width, 264px) - 16px);
z-index: 40;
width: 32px;
height: 32px;
padding: 0;
gap: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #A3B0AB;
border-radius: 9px;
background: #ffffff;
color: var(--spruce-600, #136150);
box-shadow: 0 0 0 1px rgba(11, 61, 51, 0.05), 0 2px 7px rgba(11, 61, 51, 0.16);
cursor: pointer;
transition: left 0.18s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.lactis-sidebar-collapse:hover {
background: var(--spruce-50, #ECF5F2);
color: var(--spruce-700, #0E4D40);
box-shadow: 0 2px 9px rgba(11, 61, 51, 0.16);
}
.lactis-sidebar-collapse span {
display: none; /* icon-only, like Metronic */
}
.lactis-sidebar-collapse i {
font-size: 16px;
line-height: 1;
}
/* Keep it square + icon-only in the collapsed state too */
html.lactis-sidebar-collapsed .lactis-sidebar-collapse {
padding: 0;
justify-content: center;
}
/* Dark mode: dark surface chip instead of white */
.dark .lactis-sidebar-collapse {
background: var(--lactis-surface, #121C1A);
border-color: var(--lactis-border, #283733);
color: var(--lo-rail-text, #CFE0DA);
}
.dark .lactis-sidebar-collapse:hover {
background: var(--spruce-800, #0B3D33);
color: #ffffff;
}
/* ============================================================
Sidebar collapse toggle — stacking fix.
The toggle straddles the sidebar/content divider, so its right
half sits over the sticky topbar (z-index:30). The button itself
is z-index:40 but lives inside the