/* ============================================ Instant initial state from localStorage (set on before CSS loads) Prevents flash of expanded sidebar when stored state is collapsed ============================================ */ html.sidebar-initial-collapsed .sidebar.sidebar--expanded { width: var(--sidebar-width-collapsed, calc(40px + 2 * 0.75rem)); padding-left: var(--sidebar-padding-x, 0.75rem); padding-right: var(--sidebar-padding-x, 0.75rem); } html.sidebar-initial-collapsed .sidebar.sidebar--expanded .sidebar__nav-label { display: none; } html.sidebar-initial-collapsed .sidebar.sidebar--expanded .sidebar__nav-link { justify-content: center; width: 40px; height: 40px; min-height: 40px; margin-left: 0; margin-right: auto; padding: 0; } html.sidebar-initial-collapsed .sidebar.sidebar--expanded .sidebar__nav-icon { margin-right: 0; } html.sidebar-initial-collapsed .sidebar.sidebar--expanded .sidebar__brand--expanded { opacity: 0; pointer-events: none; } html.sidebar-initial-collapsed .sidebar.sidebar--expanded .sidebar__brand--collapsed { opacity: 1; pointer-events: auto; } html.sidebar-initial-collapsed .sidebar.sidebar--expanded .sidebar__brand { left: 0; } html.sidebar-initial-collapsed .sidebar.sidebar--expanded .sidebar__header { padding: 0; } html.sidebar-initial-collapsed #page-content-wrapper.page-content.page-content--sidebar-expanded { margin-left: var(--sidebar-width-collapsed, calc(40px + 2 * 0.75rem)) !important; width: calc(100% - var(--sidebar-width-collapsed, calc(40px + 2 * 0.75rem))) !important; } /* ============================================ Sidebar Styles - BEM Methodology Block: sidebar ============================================ */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width-expanded, 232px); background-color: white; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); overflow: visible; /* Keep constant inner gutter so icon anchor is stable across states */ padding: 0.5rem var(--sidebar-padding-x, 0.75rem); z-index: 2200; transition: none; transform: translateX(0); display: flex; flex-direction: column; top: 0; } .sidebar--collapsed { width: var(--sidebar-width-collapsed, calc(40px + 2 * 0.75rem)); padding-left: var(--sidebar-padding-x, 0.75rem); padding-right: var(--sidebar-padding-x, 0.75rem); } .sidebar--expanded { width: var(--sidebar-width-expanded, 232px); } .sidebar__nav-link { display: flex !important; align-items: center; width: 100%; padding: 10px 8px; height: 40px; min-height: 40px; box-sizing: border-box; color: hsl(var(--foreground)); font-size: 14px; font-weight: 500; text-decoration: none; position: relative; transform: translateX(0); border-radius: var(--app-radius, 8px); color: hsl(var(--foreground)) !important; } .sidebar__nav-link:hover { background-color: hsl(var(--accent)); transition: background-color 0.2s ease; border-radius: var(--app-radius, 8px) !important; } .sidebar__nav-link.active { background-color: hsl(var(--accent)) !important; font-weight: 600; position: relative; border-radius: var(--app-radius, 8px) !important; } /* Hover en el link activo */ .sidebar__nav-link.active:hover { background-color: hsl(var(--accent)) !important; } .sidebar__nav-link.active, .sidebar__nav-link:hover { color: hsl(var(--foreground)) !important; } #sidebar-container .nav-pills .nav-link, #sidebar-container .nav-pills .nav-link.active { color: hsl(var(--foreground)) !important; border-radius: var(--app-radius, 8px) !important; } /* Color del texto en el link activo */ .sidebar__nav-link.active .sidebar__nav-label { color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .sidebar__nav-icon { width: 24px; height: 24px; margin-right: 10px; transition: opacity 0.2s ease; opacity: 1; } .sidebar--collapsed .sidebar__nav-link { justify-content: center; width: 40px; height: 40px; min-height: 40px; margin-left: 0; margin-right: auto; padding: 0; } .sidebar--collapsed .sidebar__nav-icon { margin-right: 0; } .sidebar--collapsed .sidebar__nav-label { display: none; } .sidebar__nav-item { position: relative; width: 100%; } .sidebar__nav-group { width: 100%; } .sidebar__nav-group-toggle { border: none; background: transparent; text-align: left; } .sidebar__nav-group-toggle .sidebar__nav-label { text-align: left; } .sidebar__nav-group-chevron { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; transition: transform 0.2s ease; } .sidebar__nav-group-chevron--open { transform: rotate(180deg); } .sidebar__nav-group-children { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; } .sidebar__nav-group-children--open { display: flex; } .sidebar__nav-group-children--closed { display: none; } .sidebar__nav-item--nested .sidebar__nav-link { padding-left: 2.25rem; } .sidebar__header { height: 40px; min-height: 40px; position: relative; display: flex; align-items: center; padding: 0 8px; margin-bottom: 0.5rem; overflow: hidden; } .sidebar__logo-link, .sidebar__logo-link:hover, .sidebar__logo-link:focus, .sidebar__logo-link:focus-visible, .sidebar__logo-link:active, .sidebar__logo-link:visited { display: block; width: 100%; color: inherit !important; text-decoration: none !important; background: transparent !important; } .sidebar__brand { object-fit: contain; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); transition: opacity 0ms, transform 0ms; } .sidebar__brand--expanded { height: 40px; width: auto; min-width: max-content; opacity: 1; filter: contrast(1.2); color: hsl(var(--foreground)) !important; } .sidebar__nav-label { flex: 1; /* Allow text ellipsis in flexbox (min-width:auto would prevent shrinking). */ min-width: 0; transition: color 0.2s ease, font-weight 0.2s ease; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar--collapsed .sidebar__nav-link { justify-content: center; width: 40px; height: 40px; min-height: 40px; margin-left: 0; margin-right: auto; padding: 0; border-radius: var(--app-radius, 8px); } .sidebar__nav-item { position: relative; width: 100%; } /* Keep tooltip trigger wrapper from shrinking nav links */ .sidebar__nav-tooltip-trigger, .sidebar__nav-item .sidebar__nav-tooltip-trigger { display: block !important; width: 100% !important; } /* Tooltip bubble (portaled): class is on the bubble via classNames in sidebar.py */ .sidebar__nav-tooltip-bubble-inner { width: fit-content !important; max-width: max-content !important; } .sidebar__header { height: 40px; min-height: 40px; position: relative; display: flex; align-items: center; padding: 0 8px; margin-bottom: 0; overflow: visible; } .sidebar__logo-link, .sidebar__logo-link:hover, .sidebar__logo-link:focus, .sidebar__logo-link:focus-visible, .sidebar__logo-link:active, .sidebar__logo-link:visited { display: block; width: 100%; color: inherit !important; text-decoration: none !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; filter: none !important; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 0.5rem; margin-bottom: 0.5rem; } .sidebar__brand { object-fit: contain; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); transition: opacity 0ms, transform 0ms; } .sidebar__brand--expanded { height: 40px; width: auto; max-width: calc(100% - 16px); object-fit: contain; object-position: left center; opacity: 1; transform: translateY(-50%) scale(1); transition: opacity 200ms ease 170ms, transform 200ms ease 170ms; } .sidebar__brand--collapsed { height: 40px; width: 40px; max-width: 100%; box-sizing: border-box; object-fit: contain; object-position: center center; opacity: 0; transform: translateY(-50%) scale(0.95); pointer-events: none; transition: opacity 0ms, transform 0ms; } .sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 0.5rem; flex-wrap: nowrap !important; row-gap: 4px; } .sidebar__nav::-webkit-scrollbar { width: 4px; } .sidebar__nav::-webkit-scrollbar-track { background: transparent; margin-right: 3px; } .sidebar__nav::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 4px; } .sidebar__nav::-webkit-scrollbar-thumb:hover { background: hsl(var(--foreground) / 0.3); } .sidebar__footer { margin-top: auto; padding-top: 0.5rem; padding-bottom: 0.25rem; border-top: 1px solid hsl(var(--border)); background: inherit; position: sticky; bottom: 0; z-index: 1; } .sidebar__footer-item .sidebar__nav-link { margin-bottom: 0; } .sidebar--collapsed .sidebar__nav-icon { margin-right: 0; } .sidebar--collapsed .sidebar__nav-label { display: none; } .sidebar--collapsed .sidebar__nav-group-chevron { display: none; } .sidebar--collapsed .sidebar__header { justify-content: flex-start; padding: 0; } .sidebar--collapsed .sidebar__brand { left: 0; } .sidebar--collapsed .sidebar__brand--expanded { opacity: 0; transform: translateY(-50%) scale(0.8); pointer-events: none; transition: opacity 0ms, transform 0ms; } .sidebar--collapsed .sidebar__brand--collapsed { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; transition: opacity 200ms ease 50ms, transform 200ms ease 50ms; } /* Ensure active/hover states never shift icon-only buttons */ .sidebar--collapsed .sidebar__nav-link, .sidebar--collapsed .sidebar__nav-link.active, .sidebar--collapsed .sidebar__nav-link--active, .sidebar--collapsed .sidebar__nav-link:hover { padding-left: 0 !important; } .sidebar--collapsed .sidebar__nav-group-children { display: none !important; } /* Collapsed tooltips are handled by Tooltip component on icons */ /* Desktop layout: no navbar, sidebar starts at top */ html body #app-navbar { display: none !important; } html body #page-content { padding-top: 0 !important; } html body #route-loading-overlay, html body #calculator-page-loading-overlay { top: 0 !important; height: 100vh !important; } .sidebar-toggle-mobile { display: none !important; } @media (max-width: 992px) { html body #app-navbar { display: flex !important; } .sidebar { display: none !important; } html body #page-content { padding-top: calc(var(--navbar-height, 70px)) !important; } html body #route-loading-overlay, html body #calculator-page-loading-overlay { top: 70px !important; height: calc(100vh - 70px) !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; } .sidebar-toggle-desktop { display: none !important; } .sidebar-toggle-mobile { display: flex !important; } #page-content-wrapper.page-content, #page-content-wrapper.page-content.page-content--sidebar-expanded, #page-content-wrapper.page-content.page-content--sidebar-collapsed { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; } #page-content-wrapper.page-content #page-content, #page-content-wrapper.page-content #page-container-wrapper { width: 100% !important; max-width: 100% !important; } } .sidebar-toggle-desktop { position: absolute; left: calc(100% + 8px); top: 8px; z-index: 2201; width: 36px; height: 36px; border: 1px solid hsl(var(--border)); border-radius: var(--app-radius, 8px); background: hsl(var(--background)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; } .sidebar-toggle-desktop:hover { background: hsl(var(--accent)); } #app-layout-root { width: 100% !important; max-width: 100% !important; min-height: 100vh !important; box-sizing: border-box !important; } #page-content-wrapper.page-content { box-sizing: border-box !important; margin-left: 220px !important; width: calc(100% - 220px) !important; min-width: 0 !important; overflow-x: hidden !important; transition: none !important; } .sidebar.sidebar--ready { transition: width 0.3s ease-in-out; } #page-content-wrapper.page-content.page-content--ready { transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out !important; } #page-content-wrapper.page-content.page-content--sidebar-expanded { margin-left: var(--sidebar-width-expanded, 232px) !important; width: calc(100% - var(--sidebar-width-expanded, 232px)) !important; } #page-content-wrapper.page-content.page-content--sidebar-collapsed { margin-left: var(--sidebar-width-collapsed, calc(40px + 2 * 0.75rem)) !important; width: calc(100% - var(--sidebar-width-collapsed, calc(40px + 2 * 0.75rem))) !important; } #page-content-wrapper.page-content > div { display: flex !important; flex-direction: column !important; min-height: 100vh !important; } #page-content-wrapper.page-content #page-content { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; flex: 1 1 0 !important; min-height: 0 !important; } #page-content-wrapper.page-content #page-content > * { max-width: 100% !important; box-sizing: border-box !important; } /* Page shell: stay within #page-content width. No height:100% — it inflates the Mantine Container vs flex parents when content is shorter than the viewport (percent height + flex). */ #page-content-wrapper.page-content #page-container-wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; min-height: 0 !important; flex: 1 1 auto; align-self: stretch; container-type: inline-size; container-name: main-content; } /* ============================================ Header Toggle Button Styles Block: header ============================================ */ .header__toggle-btn { background: transparent; border: none; color: white; cursor: pointer; display: flex; align-items: center; margin-right: 1rem; font-size: 24px; padding: 8px; border-radius: var(--app-radius, 8px); transition: all 0.2s ease; min-width: 40px; justify-content: center; } .header__toggle-btn:hover { background: rgba(255, 255, 255, 0.1); } .header__toggle-btn--active { background: rgba(255, 255, 255, 0.1); transform: rotate(0deg); } /* ============================================ Burger Button Styles ============================================ */ #sidebar-toggle-mobile, #sidebar-toggle-desktop { transition: background-color 0.2s ease !important; } #sidebar-toggle-mobile:hover, #sidebar-toggle-desktop:hover { background-color: rgba(0, 0, 0, 0.08) !important; } #sidebar-toggle-mobile:active, #sidebar-toggle-desktop:active { background-color: rgba(0, 0, 0, 0.12) !important; } .header__burger-btn { cursor: pointer; } /* ============================================ Sidebar Loading Indicator ============================================ */ .sidebar__nav-loading { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid hsl(var(--foreground)); border-radius: 50%; border-top-color: transparent; animation: sidebar-spin 0.8s linear infinite; display: none; } .sidebar__nav-link--loading .sidebar__nav-loading { display: block !important; } .sidebar__nav-link--loading { opacity: 0.8; background-color: hsl(var(--accent) / 0.5); } @keyframes sidebar-spin { to { transform: translateY(-50%) rotate(360deg); } }