body { display: flex; min-height: 100vh; background-color: #f4f7f6; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; }

::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-bg-color);
    border-radius: 10px;
}

.ls-1 { letter-spacing: 1px; }
.btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 4px; }
.bg-soft-dark { background-color: #f1f1f1; border: 1px solid #ddd; }

/* .main-content { flex-grow: 1; width: calc(100% - var(--sidebar-nocollapse-width)); display: flex; flex-direction: column; } */
.main-content { 
    flex-grow: 1;
    margin-left: var(--sidebar-nocollapse-width); /* Push content to the right */
    transition: all 0.3s ease-in-out; 
    width: calc(100% - var(--sidebar-nocollapse-width));
}
.topbar { background: #fff; padding: 10px 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; height: var(--topbar-height); }
.content-wrapper { padding: 14px; overflow-y: auto; flex-grow: 1; height:calc(100vh - var(--topbar-height)); height:calc(100dvh - var(--topbar-height)); max-height:calc(100vh - var(--topbar-height)); max-height:calc(100dvh - var(--topbar-height)); }
.card { border: 0.5px solid #e3e8ee; border-radius: var(--primary-border-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); background-color: #ffffff; }
.card-header { border-radius: var(--primary-border-radius) var(--primary-border-radius) 0 0 !important; font-weight: 600; }
#togglePass {
    border-left: none; /* Removes double border between input and button */
    border-color: #dee2e6; /* Matches standard Bootstrap border color */
}
#passInput {
    border-right: none;
}

/* sidebar start */
/* .sidebar { width: var(--sidebar-nocollapse-width); background: var(--sidebar-bg-color); color: var(--sidebar-text-color); display: flex; flex-direction: column; transition: all 0.3s; } */
.sidebar { 
    width: var(--sidebar-nocollapse-width); 
    background: var(--sidebar-bg-color); 
    color: var(--sidebar-text-color); 
    display: flex; 
    flex-direction: column; 
    transition: all 0.3s; 
    
    /* SCROLL LOGIC START */
    position: fixed;    /* Stay fixed on the left */
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;     /* Dynamic viewport height — matches the REAL visible area on mobile (no gap) */
    overflow-y: auto;   /* Allow vertical scroll */
    overflow-x: hidden; /* Prevent horizontal jitter */
    z-index: 1000;
    /* SCROLL LOGIC END */
}
.sidebar-brand { padding: 14px; font-size: calc(var(--font-size) + 10px); font-weight: bold; text-align: center; color: var(--sidebar-border-color); }
.sidebar-menu { padding: 6px 0; flex-grow: 1; }
.sidebar a { color: var(--sidebar-text-color); text-decoration: none; padding: 10px 16px; display: block; font-size: var(--font-size); transition: 0.2s; }
.sidebar a i { margin-right: 10px; width: 20px; text-align: center; }
.sidebar a:hover, .sidebar a.active { color: #ffffff; background: var(--sidebar-active-bg-color); border-left: 4px solid var(--sidebar-border-color); }
.sidebar .submenu { background: var(--sidebar-submenu-bg-color); color: var(--sidebar-submenu-text-color); display: none; /* Hidden by default */ list-style: none; padding: 0; }
.sidebar .has-submenu.active .submenu { display: block; /* Show if parent is active */ }
.sidebar .submenu.open { display: block; /* toggled open via toggleSubmenu() — class-based so it beats the mobile !important-hide */ }
.sidebar .submenu a { padding-left: 46px; font-size: var(--font-size); border-left: none; }
.sidebar .submenu a:hover { background: var(--sidebar-border-color); }

.sidebar.collapsed { width: var(--sidebar-collapse-width); }
.sidebar.collapsed .sidebar-brand span, 
.sidebar.collapsed .sidebar-menu a span,
.sidebar.collapsed .fa-chevron-down { display: none; }
.sidebar.collapsed .sidebar-brand { padding: 20px 0; }
.sidebar.collapsed .sidebar-menu a { text-align: center; padding: 15px 0; }
.sidebar.collapsed .sidebar-menu a i { margin-right: 0; font-size: var(--font-size); }
.sidebar.collapsed .submenu { display: none !important; } /* Hide submenus when collapsed */

/* Use ~ (any following sibling), not + : the #sidebarBackdrop div sits between .sidebar and .main-content,
   which breaks the adjacent-sibling (+) match — so the content never widened on collapse. */
.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapse-width); 
    width: calc(100% - var(--sidebar-collapse-width));
}

.sidebar.collapsed .sidebar-brand .collapse-hide {
    display: none !important;
}

.sidebar, .main-content { transition: all 0.3s ease-in-out; }

#sidebarCollapse {
    background: none;
    border: none;
    font-size: var(--font-size);
    cursor: pointer;
    color: #6c757d;
}

.menu-item-container {
    position: relative;
    display: flex;
    align-items: center;
}

.menu-item-container {
    position: relative;
    width: 100%;
}

.custom-tooltip {
    position: absolute;
    left: 100%; /* Move it to the right of the sidebar */
    top: 50%;
    transform: translateY(-50%) translateX(10px); /* Vertical center and slight offset */
    background-color: var(--primary-bg-color); /* Your blue theme */
    color: white;
    padding: 6px 12px;
    border-radius: var(--primary-border-radius);
    font-size: var(--font-size);
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: none; /* Prevents interference with clicking */
}

.custom-tooltip::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background-color: var(--primary-bg-color);
}

.sidebar.collapsed .menu-item-container:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(-50%) translateX(15px); /* Smooth slide-in */
}

.sidebar.collapsed {
    overflow: visible !important;
}
.sidebar-menu {
    overflow: visible !important;
}

.tooltip-subtitle {
    font-size: var(--font-size);
    opacity: 0.8;
    display: block;
    margin-top: -2px;
}

/* Pagination — match the 12px admin font (Bootstrap defaults to rem ~14px) */
.pagination { --bs-pagination-font-size: var(--font-size); }
.pagination .page-link { font-size: var(--font-size); padding: 4px 10px; }

/* Auto-collapse the sidebar to an icon rail on small screens (no JS class needed).
   Only affects sites that render .sidebar (admin); the company site uses a top-nav. */
@media (max-width: 768px) {
    .sidebar { width: var(--sidebar-collapse-width); overflow: visible; }
    .sidebar .sidebar-brand span,
    .sidebar .sidebar-menu a span,
    .sidebar .fa-chevron-down { display: none; }
    .sidebar .sidebar-brand { padding: 20px 0; }
    .sidebar .sidebar-menu a { text-align: center; padding: 15px 0; }
    .sidebar .sidebar-menu a i { margin-right: 0; font-size: var(--font-size); }
    .sidebar .submenu { display: none !important; }
    .sidebar .menu-item-container:hover .custom-tooltip { visibility: visible; opacity: 1; transform: translateY(-50%) translateX(15px); }
    .main-content { margin-left: var(--sidebar-collapse-width); width: calc(100% - var(--sidebar-collapse-width)); }

    /* Tapping the ☰ toggle (JS adds .mobile-open) slides the FULL sidebar in as an overlay drawer —
       labels + submenus visible — instead of leaving a dead icon rail that can't expand on touch. */
    .sidebar.mobile-open { width: var(--sidebar-nocollapse-width); overflow-y: auto; z-index: 1050; box-shadow: 2px 0 14px rgba(0,0,0,.28); }
    .sidebar.mobile-open .sidebar-brand span,
    .sidebar.mobile-open .sidebar-menu a span,
    .sidebar.mobile-open .fa-chevron-down { display: inline; }
    .sidebar.mobile-open .sidebar-brand { padding: 14px; }
    .sidebar.mobile-open .sidebar-menu a { text-align: left; padding: 10px 16px; }
    .sidebar.mobile-open .sidebar-menu a i { margin-right: 10px; }
    .sidebar.mobile-open .has-submenu.active .submenu,
    .sidebar.mobile-open .submenu.open { display: block !important; }
    .sidebar.mobile-open .custom-tooltip { display: none; }
}

/* Backdrop behind the mobile drawer (JS toggles .show). Hidden by default on every screen size, so it
   never affects the desktop layout. */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1040; }
.sidebar-backdrop.show { display: block; }
/* side bar end */