/* ================================================================ ERMS Sidebar Refresh — assets/css/sidebar_refresh.css Petre, 2026-06-30. HOW TO LOAD (Andrei): Add ONE line inside includes/header.php , after app.css: This file OVERRIDES/LAYERS on top of app.css sidebar rules. It is fully scoped to .sidebar so it cannot break page content. WHAT THIS FILE DOES: - Repaints the sidebar to dark navy (#0d1b2e) - Styles section labels as small uppercase muted caps - Styles .nav-item with icon + label flex layout - Active item: rounded pill background + orange-red left accent bar (inset box-shadow) - Hover: subtle lighter background + text brightening - 160ms ease transitions throughout - No new JS, no new dependencies. WHAT THIS FILE DOES NOT TOUCH: - Which items appear (PHP permission logic untouched) - Item order - Item labels/text (no renames) - The .content / .main / .app layout ================================================================ */ /* ── 1. Sidebar shell ─────────────────────────────────────────── */ .sidebar { background: #0d1b2e; border-right: 1px solid rgba(255, 255, 255, 0.05); } /* Logo area */ .sidebar-header { padding: 18px 14px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; } .sidebar-logo { height: 32px; width: auto; object-fit: contain; display: block; } /* ── 2. Nav container ─────────────────────────────────────────── */ .sidebar-nav { padding: 8px 0 8px; overflow-y: auto; flex: 1; } /* ── 3. Section labels ────────────────────────────────────────── */ .nav-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4a6a8a; padding: 12px 14px 4px; margin-top: 2px; user-select: none; } /* ── 4. Section divider ───────────────────────────────────────── */ .nav-section-divider { height: 1px; background: rgba(255, 255, 255, 0.07); margin: 8px 12px; } /* ── 5. Nav items ─────────────────────────────────────────────── */ /* Andrei: no markup change is strictly required for the base layout. Adding icons (step 7 below) requires adding one per item. */ .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 1px 6px; border-radius: 8px; color: #8dafc9; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease; /* Ensures the inset box-shadow (accent bar) renders cleanly */ isolation: isolate; } /* Hover state */ .sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #c8ddef; } /* Active / selected state: pill background + orange-red left accent bar via inset box-shadow. No absolute positioning needed; box-shadow keeps layout clean. */ .sidebar .nav-item.active, .sidebar .nav-item.active:visited { background: rgba(255, 255, 255, 0.10); color: #ffffff; font-weight: 600; /* inset 3px 0 0 = 3px bar on the left edge of the element */ box-shadow: inset 3px 0 0 0 #e05c2a; } .sidebar .nav-item.active:hover { background: rgba(255, 255, 255, 0.13); } /* Placeholder items (e.g. modul_hr) — keep muted until the module is live */ .sidebar .nav-item.nav-placeholder { opacity: 0.55; cursor: default; pointer-events: none; } /* ── 6. Icon styling ──────────────────────────────────────────── */ /* Andrei adds as the first child of each .nav-item. The label text (or a ) follows the SVG. If the SVG is absent, flex layout still works with text only. */ .sidebar .nav-item .nav-icon, .sidebar .nav-item > svg:first-child { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.6; transition: opacity 160ms ease; } .sidebar .nav-item:hover .nav-icon, .sidebar .nav-item:hover > svg:first-child, .sidebar .nav-item.active .nav-icon, .sidebar .nav-item.active > svg:first-child { opacity: 1; } /* ── 7. Settings button (sidebar footer) ──────────────────────── */ .settings-btn { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 1px 6px 8px; border-radius: 8px; color: #8dafc9; font-size: 13px; font-weight: 500; text-decoration: none; transition: background 160ms ease, color 160ms ease; } .settings-btn:hover { background: rgba(255, 255, 255, 0.07); color: #c8ddef; } .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 4px; } .settings-icon { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.6; transition: opacity 160ms ease; } .settings-btn:hover .settings-icon { opacity: 1; } /* ── 8. Collapsible sub-menu (Target Executare pattern) ───────── */ /* Existing .nav-parent / .nav-parent-children — just update colors */ .nav-parent-children { border-left-color: rgba(255, 255, 255, 0.10) !important; } .nav-parent-children .nav-item { font-size: 12px; } /* ── 9. WhatsApp badge (notification count) ───────────────────── */ /* The existing inline style overrides work; this just reinforces them in case the inline style is moved to a class later */ .nav-item .nav-wa-badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #fff; color: #16a34a; font-size: 10px; font-weight: 700; text-align: center; margin-left: auto; } /* ================================================================ FIX 2026-06-30b (Andrei) — applied AFTER Petre's refresh above. Two corrections requested by Marius. Appended last so these rules win. 1) Restore ERMS logo to its original rendered size. 2) Align all menu icons into ONE vertical column. Scoped to .sidebar only. No markup change. Active state untouched. ================================================================ */ /* ── FIX 1: ERMS logo size restore ────────────────────────────── Root cause: the refresh block set `.sidebar-logo{height:32px;width:auto}`, overriding the original app.css `.sidebar-logo{width:90px;height:auto}`. The coin badge is ~square, so height:32px shrank it well below the old 90px-wide render. Restore the original 90px width + keep it centered. */ .sidebar .sidebar-header { justify-content: center; } .sidebar .sidebar-logo { width: 90px; height: auto; } /* ── FIX 2: single vertical icon rail ─────────────────────────── Root cause: app.css `.nav-item{justify-content:center}` was NOT overridden by the refresh, so every item centered its icon+label block as a unit — each row's icon landed at a different x depending on label length. Force left alignment so all icons share one column and every label starts at the same x. The 16px icon box is hard-pinned as the uniform slot. */ .sidebar .nav-item { justify-content: flex-start; text-align: left; } .sidebar .nav-item .nav-icon, .sidebar .nav-item > svg:first-child { width: 16px; height: 16px; flex: 0 0 16px; /* hard-pin the icon-column width (no grow/shrink) */ text-align: center; } /* ================================================================ SIDEBAR WIDTH + COLLAPSE/EXPAND - 20260630 (andrei) Appended last so these rules win. Two requests from Marius: ITEM 1: widen the EXPANDED sidebar so the longest label shows in full (no ellipsis truncation). ITEM 2: collapse/expand toggle -> icons-only ~64px rail, state persisted in localStorage (key: erms_sidebar_collapsed), applied pre-paint on . Layout is flexbox (.app{display:flex} / .sidebar{flex} / .main{flex:1}), so .main auto-follows the sidebar width in BOTH states - no manual margin math, no overlap, no horizontal scrollbar. Menu items / labels / order / per-role logic are NOT touched. ================================================================ */ /* ── ITEM 1: expanded width + smooth transition ───────────────── Longest label measured: "Control Motoare Alerte" (top level) and "Setare Target Executare" (submenu, 12px). 270px fits both with the icon column + paddings. app.css pins 180px on all four box props, so override all four here. */ .sidebar { flex: 0 0 270px; width: 270px; min-width: 270px; max-width: 270px; transition: flex-basis 180ms ease, width 180ms ease, min-width 180ms ease, max-width 180ms ease, padding 180ms ease; } /* Remove the ellipsis truncation - keep single line, show full text. */ .sidebar .nav-item { overflow: visible; text-overflow: clip; } /* ── ITEM 2: collapsed icons-only rail (~64px) ────────────────── Triggered by (set pre-paint). */ html.erms-sidebar-collapsed .sidebar { flex: 0 0 64px; width: 64px; min-width: 64px; max-width: 64px; padding-left: 0; padding-right: 0; } /* Header: stack the coin logo + toggle, centered, in collapsed mode. */ html.erms-sidebar-collapsed .sidebar .sidebar-header { flex-direction: column; justify-content: flex-start; gap: 8px; } html.erms-sidebar-collapsed .sidebar .sidebar-logo { width: 32px; /* logo.png is the square coin -> shows as the icon */ } /* Nav items: center the icon, hide the (bare text-node) label via font-size:0. The SVG icons keep their explicit 16x16 box so they stay visible. */ html.erms-sidebar-collapsed .sidebar .nav-item { justify-content: center; gap: 0; font-size: 0; padding-left: 0; padding-right: 0; margin-left: 8px; margin-right: 8px; } /* Hide direct-child spans (WhatsApp count badge, the submenu caret) ... */ html.erms-sidebar-collapsed .sidebar .nav-item > span { display: none; } /* ... but keep the "Target Executare" parent icon (it is nested inside the first span). font-size:0 above still hides that span's inner label text. */ html.erms-sidebar-collapsed .sidebar .nav-parent-toggle > span:first-child { display: inline-flex; gap: 0; } /* Section captions: hide the text in collapsed mode; keep the thin dividers as visual group separators. */ html.erms-sidebar-collapsed .sidebar .nav-section-title { display: none; } /* Submenu children stay collapsed in rail mode (no room to nest at 64px). */ html.erms-sidebar-collapsed .sidebar .nav-parent-children { display: none !important; } /* Footer settings button: same icon-only treatment. */ html.erms-sidebar-collapsed .sidebar .settings-btn { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } html.erms-sidebar-collapsed .sidebar .settings-btn span { display: none; } /* ── Toggle button (top-right of the header in expanded mode) ────── */ .sidebar .sidebar-header { position: relative; } .sidebar-toggle { position: absolute; top: 0; right: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: #8dafc9; cursor: pointer; transition: background 160ms ease, color 160ms ease; } .sidebar-toggle:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; } .sidebar-toggle svg { width: 16px; height: 16px; display: block; transition: transform 160ms ease; } /* In collapsed mode the toggle joins the centered column and the chevron flips to point right (expand). */ html.erms-sidebar-collapsed .sidebar .sidebar-toggle { position: static; margin: 0 auto; } html.erms-sidebar-collapsed .sidebar .sidebar-toggle svg { transform: rotate(180deg); }