/*-------------------------------------------------------------- 1. Base Styles --------------------------------------------------------------*/ html, body { height: 100%; background-color: var(--color-light); display: flex; flex-direction: column; font-size: 0.875rem; } .container-fluid { flex: 1; } .feather { width: 16px; height: 16px; vertical-align: text-bottom; } main { background-color: var(--color-light); } /*-------------------------------------------------------------- 2. Sidebar --------------------------------------------------------------*/ .sidebar-sticky { position: -webkit-sticky; position: sticky; top: 48px; /* Height of navbar */ height: calc(100vh - 48px); padding-top: 0.5rem; overflow-x: hidden; overflow-y: auto; } .sidebar { position: fixed; top: 61px; /* Adjust to match navbar height */ bottom: 0; left: 0; z-index: 1020; padding: 0; width: 250px; background-color: var(--sidebar-bg) !important; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1); } .sidebar-heading { font-size: 0.75rem; text-transform: uppercase; } .sidebar .nav-link { font-weight: 500; color: var(--sidebar-text); font-size: 1rem; padding: 15px; } .sidebar .nav-link i { margin-right: 5px; } .sidebar .nav-link .feather { margin-right: 4px; color: #999; } .sidebar .nav-link:hover { background-color: var(--sidebar-active-bg); color: var(--sidebar-text-hover); } .sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather { color: inherit; } .sidebar .nav-link.active { background-color: var(--sidebar-active-bg); color: var(--color-primary); border-left: 3px solid var(--sidebar-active-border); font-weight: bold; } .sidebar .nav-item .nav-item .nav-link.active { border-left: none !important; } .sidebar .nav-item:hover { cursor: pointer; } .sidebar .nav-item .nav-item .nav-link { padding: 8px 5px 8px 15px; } .sidebar .nav-item .nav-item .nav-link.active { background-color: transparent; } #sidebarMenu { box-shadow: var(--bs-box-shadow) !important; } /* ========================================================= Sidebar rail toggle + collapsed mode (non-intrusive add-on) Append at the end of your stylesheet ========================================================= */ /* Tweaks are gated by .sidebar-collapsed on so defaults remain intact */ :root { --sidebar-width: 250px; /* matches your .sidebar width */ --sidebar-width-collapsed: 40px; /* icon rail width */ } /* Edge toggle button that hugs the right border of the sidebar */ .sidebar-rail-toggle { position: absolute; left: -32px; /* sit over the border */ top: 6px; /* initial vertical position; JS may refine */ z-index: 1040; padding: 0.35rem 0.5rem; line-height: 1; display: none; /* desktop only; shown via media query */ box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08); } .sidebar-rail-toggle i { font-size: 1rem; } /* Rail toggle icon sizing */ .sidebar-rail-toggle #sidebarRailIcon { font-size: 1.15rem; line-height: 1; } /* Optional: slightly larger when collapsed so it’s more tappable */ body.sidebar-collapsed .sidebar-rail-toggle #sidebarRailIcon { font-size: 1.2rem; } /* Show the rail toggle only on md+ (keep mobile burger as-is) */ @media (min-width: 768px) { .sidebar-rail-toggle { display: inline-flex; align-items: center; justify-content: center; } } /* Smoothen width changes of the fixed sidebar */ .sidebar { transition: width 0.18s ease, left 0.18s ease; width: var(--sidebar-width); /* keep your current width as default */ } /* Collapsed state (icon rail) */ body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); } /* Icon-only look: hide link text without changing your markup */ body.sidebar-collapsed .sidebar .nav-link { justify-content: center; text-overflow: clip; overflow: hidden; white-space: nowrap; font-size: 0; /* hide text */ padding-left: 12px; /* tighter padding */ padding-right: 12px; } body.sidebar-collapsed .sidebar .nav-link i { font-size: 1.25rem; /* keep icon visible when font-size:0 on link */ margin-right: 0 !important; } /* Remove left active border & background clutter in collapsed mode for a cleaner rail */ body.sidebar-collapsed .sidebar .nav-link.active { border-left: 0 !important; background-color: transparent !important; } /* Hide chevrons / nested accordions while collapsed */ body.sidebar-collapsed .sidebar .bi-chevron-down { display: none !important; } /* Optional: subtle icon rotation when toggled */ body.sidebar-collapsed .sidebar-rail-toggle i { transform: rotate(180deg); transition: transform 0.18s ease; } /* Keep the sidebar’s fixed positioning alignment tidy on small layout shifts */ @media (min-width: 992px) { /* If your layout ever needs it, you can offset main content visually. Commented out to avoid side effects: #mainContent{ transition: margin-left .18s ease; } body:not(.sidebar-collapsed) #mainContent{ margin-left: 0; } body.sidebar-collapsed #mainContent{ margin-left: 0; } */ } /* Little nicety: ensure the toggle never overlaps scrollbars visually */ .sidebar { overflow-y: auto; } /* Sidebar: remove submenu indent when collapsed */ body.sidebar-collapsed #sidebarMenu .nav > .nav-item > .collapse > .nav { /* overrides .ms-3 and .ps-2 on the submenu UL */ margin-left: 0 !important; padding-left: 0 !important; } /* Submenu links: same compact hit-area as top-level when collapsed */ body.sidebar-collapsed #sidebarMenu .nav > .nav-item > .collapse .nav-link { display: flex; align-items: center; justify-content: center; /* center icon */ padding: 12px !important; /* ignore nested padding rule */ font-size: 0; /* hide text like parent rail */ white-space: nowrap; overflow: hidden; } /* Keep submenu icons visible and nicely sized in collapsed mode */ body.sidebar-collapsed #sidebarMenu .nav > .nav-item > .collapse .nav-link i { font-size: 1.25rem; margin-right: 0 !important; } /* Remove the left active bar & background inside submenus when collapsed */ body.sidebar-collapsed #sidebarMenu .nav > .nav-item > .collapse .nav-link.active { border-left: 0 !important; background-color: transparent !important; } /* Hide labels inside collapsed submenus (matches top-level behavior) */ body.sidebar-collapsed #sidebarMenu .nav > .nav-item > .collapse .nav-link .nav-label { display: none !important; } /* Optional: tighten submenu row spacing a touch in rail mode */ body.sidebar-collapsed #sidebarMenu .nav > .nav-item > .collapse .nav-item { margin: 0; /* neutralize any external margins if present */ } /*-------------------------------------------------------------- 3. Navbar --------------------------------------------------------------*/ .form-control-dark { color: var(--color-secondary); background-color: rgba(var(--color-secondary-rgb), 0.1); border-color: rgba(var(--color-secondary-rgb), 0.1); } .form-control-dark:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb), 0.25); } /*-------------------------------------------------------------- 4. Utilities --------------------------------------------------------------*/ .border-top { border-top: 1px solid #e5e5e5; } .border-bottom { border-bottom: 1px solid #e5e5e5; } .card-shadow { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .nav-link.active { border-left: 3px solid var(--sidebar-active-border); background-color: var(--sidebar-active-bg); color: var(--bs-primary); padding-left: 0.75rem; } .form-check-input[type="checkbox"], input.datepicker, input.hasDatepicker, .timepicker { cursor: pointer; } .form-check-input[type="checkbox"]:indeterminate { background-color: var(--color-dark) !important; border-color: var(--bs-border-color) !important; } .form-check-input:checked { background-color: var(--color-dark) !important; border-color: var(--color-dark) !important; } .w-200 { width: 200px !important; } /*-------------------------------------------------------------- 5. Toggle Switch (.form-switch.toggle-lg) --------------------------------------------------------------*/ .form-switch .form-check-input.toggle-lg { width: 2.5em !important; height: 1.5em !important; margin-top: 0 !important; background-color: transparent !important; /* border: 1px solid var(--color-primary) !important; */ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } .form-switch .form-check-input.toggle-lg:checked { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .form-switch .form-check-input.toggle-lg:focus { outline: none !important; box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25) !important; } .form-switch .form-check-input.toggle-lg::before, .form-switch .form-check-input.toggle-lg::after { cursor: pointer; } /*-------------------------------------------------------------- 6. Form Focus Reset --------------------------------------------------------------*/ .form-control:focus, .form-switch .form-check-input.toggle-lg:focus { box-shadow: none !important; } .form-check-input:focus { border-color: var(--color-primary) !important; } .form-text-area textarea { height: 100px; } .navbar-brand img { height: 55px; width: 204px; margin-top: -9px; } .alert-error-section { background-color: var(--bs-alert-bg) !important; color: var(--bs-alert-color) !important; } .card { background-color: #fff !important; border-color: var(--color-secondary) !important; padding: 1rem; margin-bottom: 1.5rem; border-radius: 0.375rem; } /* Expand/contract main content when sidebar toggles (md+) */ @media (min-width: 768px) { #mainContent { /* ignore Bootstrap column width and fill remaining space */ flex: 0 0 auto !important; max-width: 100% !important; /* push right by sidebar width + compute remaining width */ margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); transition: margin-left 0.18s ease, width 0.18s ease; position: relative; } /* Collapsed rail: slimmer left margin and wider content */ body.sidebar-collapsed #mainContent { margin-left: var(--sidebar-width-collapsed); width: calc(100% - var(--sidebar-width-collapsed)); } .sidebar .portal-link .icon { font-size: 1rem; } .sidebar .portal-link .label { white-space: nowrap; } /* Collapsed sidebar overrides */ body.sidebar-collapsed .sidebar .portal-link { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--bs-body-color) !important; /* text/icon color -> dark */ padding-left: 0.5rem; padding-right: 0.5rem; justify-content: center; } body.sidebar-collapsed .sidebar .portal-link .label { display: none; } body.sidebar-collapsed .sidebar .portal-link .icon { font-size: 1.15rem; color: var(--bs-body-color) !important; /* ensure icon is dark */ } body.sidebar-collapsed .sidebar .portal-link:hover, body.sidebar-collapsed .sidebar .portal-link:focus { background: transparent !important; /* keep transparent on hover/focus */ color: var(--bs-body-color) !important; box-shadow: none !important; } } .menu-container { max-height: 86vh; overflow-y: auto; } /* On mobile, let Bootstrap’s collapse handle layout */ @media (max-width: 767.98px) { #mainContent { margin-left: 0; width: 100%; } } .card.shadow { box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.15) !important; } /* lift above modals/offcanvas if your layout has high z-index elements */ .tooltip { z-index: 2000; } /* dark tooltip */ .tooltip-inner { background: #111; color: #fff; } .tooltip.bs-tooltip-right .arrow::before { border-right-color: #111; } .tooltip.bs-tooltip-left .arrow::before { border-left-color: #111; } .tooltip.bs-tooltip-top .arrow::before { border-top-color: #111; } .tooltip.bs-tooltip-bottom.arrow::before { border-bottom-color: #111; } .margin-bottom-3 { margin-bottom: 1rem; } .ui-datepicker { z-index: 9999 !important; } input:disabled { cursor: pointer; } .table-filters .form-control { padding: 0.375rem 0.6rem; font-size: 0.87rem; height: 33px; } .back-caret { font-size: 1.5rem; /* large */ line-height: 1; color: var(--bs-body-color); text-decoration: none; } .back-caret:hover { color: var(--bs-primary); }