/* ============================================ CSS CUSTOM PROPERTIES ============================================ */ :root { --sidebar-width: 260px; --sidebar-collapsed-width: 70px; --sidebar-bg: #0f172a; --sidebar-border: rgba(255, 255, 255, 0.05); --sidebar-text: #94a3b8; --sidebar-active-bg: rgba(0, 167, 126, 0.1); --sidebar-active-color: #00a77e; --sidebar-hover-bg: rgba(255, 255, 255, 0.03); --topbar-height: 70px; --transition-speed: 0.3s; } /* ============================================ FOUC PREVENTION (applied to before paint) ============================================ */ .layout-topnav-preload .app-sidebar { display: none !important; } .layout-topnav-preload .app-topbar { left: 0 !important; } .layout-topnav-preload .app-content { margin-left: 0 !important; } .sidebar-collapsed-preload .app-sidebar { width: var(--sidebar-collapsed-width) !important; } .sidebar-collapsed-preload .app-topbar { left: var(--sidebar-collapsed-width) !important; } .sidebar-collapsed-preload .app-content { margin-left: var(--sidebar-collapsed-width) !important; } /* ============================================ SIDEBAR COMPONENT ============================================ */ .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; z-index: 1040; transition: width var(--transition-speed) ease; overflow: hidden; } .sidebar-brand { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--sidebar-border); min-height: var(--topbar-height); gap: 10px; } .sidebar-brand a { flex-shrink: 0; line-height: 0; } .sidebar-brand img { width: 32px; height: auto; } .sidebar-brand-text { font-size: 14px; font-weight: 600; color: var(--sidebar-active-color); white-space: nowrap; overflow: hidden; transition: opacity var(--transition-speed) ease; } /* Sidebar User Info */ .sidebar-user { padding: 20px 16px; border-bottom: 1px solid var(--sidebar-border); overflow: hidden; transition: all var(--transition-speed) ease; background: rgba(255, 255, 255, 0.02); } .sidebar-user-name { font-weight: 600; font-size: 14px; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .sidebar-user-time { font-size: 11px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================ SIDEBAR NAVIGATION ============================================ */ .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; } .sidebar-nav ul { list-style: none; padding: 0; margin: 0; } .sidebar-nav .nav-link { display: flex; align-items: center; padding: 9px 16px !important; color: var(--sidebar-text); text-decoration: none; font-size: 13px !important; white-space: nowrap; border-radius: 0; transition: background-color 0.15s ease, color 0.15s ease; gap: 10px; } .sidebar-nav .nav-link i { width: 20px; text-align: center; flex-shrink: 0; font-size: 14px; margin-right: 0 !important; } .sidebar-nav .nav-link span { overflow: hidden; transition: opacity var(--transition-speed) ease; } /* Sub-navigation items (indented under parent) */ .sidebar-nav .nav-link-sub { padding-left: 32px !important; font-size: 12px !important; } .sidebar-nav .nav-link-sub i { font-size: 12px; } .sidebar-nav .nav-link:hover { background-color: var(--sidebar-hover-bg); color: var(--sidebar-active-color); } .sidebar-nav .nav-link.active { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-color) !important; border-right: 3px solid var(--sidebar-active-color); border-radius: 0 !important; } .sidebar-nav .nav-section-label { padding: 24px 16px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #475569; font-weight: 700; white-space: nowrap; overflow: hidden; } /* ============================================ SIDEBAR FOOTER ============================================ */ .sidebar-footer { border-top: 1px solid var(--sidebar-border); padding: 8px; } .sidebar-footer .btn-sidebar { display: flex; align-items: center; width: 100%; padding: 8px 12px; border: none; background: transparent; color: var(--sidebar-text); font-size: 12px; cursor: pointer; gap: 10px; border-radius: 4px; white-space: nowrap; text-decoration: none; } .sidebar-footer .btn-sidebar:hover { background-color: var(--sidebar-hover-bg); color: var(--sidebar-active-color); } .sidebar-footer .btn-sidebar.text-danger:hover { background-color: #fef2f2; } .sidebar-footer .btn-sidebar i { width: 20px; text-align: center; flex-shrink: 0; margin-right: 0 !important; } /* ============================================ TOP BAR COMPONENT ============================================ */ .app-topbar { position: fixed; top: 0; right: 0; left: var(--sidebar-width); height: var(--topbar-height); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; padding: 0 24px; z-index: 1030; transition: left var(--transition-speed) ease; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); } .app-topbar .topbar-brand { display: none; } .app-topbar .sidebar-toggle-btn { display: none; background: none; border: none; font-size: 18px; color: #333; cursor: pointer; padding: 4px 8px; border-radius: 4px; margin-right: 8px; } .app-topbar .sidebar-toggle-btn:hover { background: #f3f4f6; } .app-topbar .topbar-user-info { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* Topbar horizontal nav (hidden in sidebar mode) */ .topbar-nav { display: none; list-style: none; margin: 0; padding: 0; } .topbar-nav .nav-item { display: flex; align-items: center; } /* ============================================ MAIN CONTENT AREA ============================================ */ .app-content { margin-left: var(--sidebar-width); margin-top: var(--topbar-height); min-height: calc(100vh - var(--topbar-height)); padding: 14px 20px 22px; transition: margin-left var(--transition-speed) ease; } /* Normalize spacing across all pages so they all match the 'perfect' alignment */ .app-content>.row, .app-content>form>.row { margin-left: -15px !important; margin-right: -15px !important; } /* ============================================ SIDEBAR COLLAPSED STATE (icon-only) ============================================ */ .sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-width); } .sidebar-collapsed .app-topbar { left: var(--sidebar-collapsed-width); } .sidebar-collapsed .app-content { margin-left: var(--sidebar-collapsed-width); } .sidebar-collapsed .sidebar-brand-text { opacity: 0; width: 0; overflow: hidden; } .sidebar-collapsed .sidebar-user { opacity: 0; height: 0; padding: 0 16px; border-bottom: none; overflow: hidden; } .sidebar-collapsed .sidebar-nav .nav-link span { opacity: 0; width: 0; overflow: hidden; } .sidebar-collapsed .sidebar-nav .nav-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; } .sidebar-collapsed .sidebar-footer .btn-sidebar span { opacity: 0; width: 0; overflow: hidden; } .sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: 12px 0 !important; gap: 0; } .sidebar-collapsed .sidebar-nav .nav-link i { font-size: 16px; } .sidebar-collapsed .sidebar-footer .btn-sidebar { justify-content: center; gap: 0; } .sidebar-collapsed .sidebar-nav .nav-link.active { border-right: none; } /* Tooltip on hover for collapsed sidebar */ .sidebar-collapsed .sidebar-nav .nav-link { position: relative; } .sidebar-collapsed .sidebar-nav .nav-link::after { content: attr(data-title); position: absolute; left: calc(var(--sidebar-collapsed-width) + 5px); top: 50%; transform: translateY(-50%); background: #333; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 1050; } .sidebar-collapsed .sidebar-nav .nav-link:hover::after { opacity: 1; } /* ============================================ TOP NAV LAYOUT MODE ============================================ */ .layout-topnav .app-sidebar { display: none; } .layout-topnav .app-topbar { left: 0; } .layout-topnav .app-topbar .topbar-brand { display: flex; align-items: center; gap: 10px; margin-right: 16px; flex-shrink: 0; } .topbar-brand-info { display: flex; flex-direction: column; line-height: 1.3; } .topbar-brand-name { font-size: 13px; font-weight: 600; color: #333; white-space: nowrap; } .topbar-brand-role { font-size: 11px; color: #6c757d; white-space: nowrap; } .topbar-brand-time { font-size: 11px; color: #6b7280; white-space: nowrap; } .layout-topnav .app-topbar .sidebar-toggle-btn { display: none; } .layout-topnav .topbar-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .layout-topnav .topbar-user-info { margin-left: 0; } .layout-topnav .topbar-nav .nav-link { padding: 5px 10px !important; font-size: 14px !important; white-space: nowrap; } .layout-topnav .topbar-nav .nav-link.active { background: var(--sidebar-active-bg); border-radius: 5px; color: var(--sidebar-active-color); } .layout-topnav .app-content { margin-left: 0; } /* Hide "switch to sidebar" button when already in sidebar mode */ .layout-sidebar .topbar-user-info .layout-switch-topnav { display: none; } /* Hide Nepal time in topbar when in sidebar mode (it's shown in sidebar user section) */ .layout-sidebar #nepal-time { display: none; } /* Hide topbar completely in sidebar mode (redundant since nav is in sidebar) */ .layout-sidebar .app-topbar { display: none; } /* Remove top margin from content in sidebar mode since topbar is hidden */ .layout-sidebar .app-content { margin-top: 0; } /* Nepal time shown on right side in topnav mode (no longer in brand area) */ /* Mobile overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1035; } /* ============================================ RESPONSIVE: MOBILE (< 992px) ============================================ */ @media (max-width: 991.98px) { /* Sidebar mode: off-screen by default */ .layout-sidebar .app-sidebar { left: calc(-1 * var(--sidebar-width)); transition: left var(--transition-speed) ease; } .layout-sidebar .app-sidebar.mobile-open { left: 0; } .layout-sidebar .app-sidebar.mobile-open~.sidebar-overlay { display: block; } .layout-sidebar .app-topbar { left: 0; } /* Show hamburger on mobile to open sidebar */ .layout-sidebar .app-topbar .sidebar-toggle-btn { display: block; } .layout-sidebar .app-content { margin-left: 0; } /* Collapsed state irrelevant on mobile */ .layout-sidebar.sidebar-collapsed .app-topbar { left: 0; } .layout-sidebar.sidebar-collapsed .app-content { margin-left: 0; } /* Topnav mode on mobile */ .layout-topnav .topbar-nav { display: none; } .layout-topnav .topbar-nav.show { display: flex; flex-direction: column; position: absolute; top: var(--topbar-height); left: 0; right: 0; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 8px; z-index: 1029; } .layout-topnav .navbar-toggler-mobile { display: block !important; } } @media (min-width: 992px) { .layout-topnav .navbar-toggler-mobile { display: none !important; } } /* ============================================ PRINT STYLES ============================================ */ @media print { .app-sidebar, .app-topbar, .sidebar-overlay { display: none !important; } .app-content { margin: 0 !important; padding: 0 !important; } } /* ============================================ TOAST NOTIFICATIONS (Premium Refinement) ============================================ */ .toast-container { z-index: 9999; } .custom-toast { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border: none; overflow: hidden; min-width: 320px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .custom-toast.toast-success { border-left: 5px solid #198754; } .custom-toast.toast-error { border-left: 5px solid #dc3545; } .custom-toast .toast-header { background: transparent; border-bottom: none; padding: 12px 16px 4px; font-weight: 700; } .custom-toast .toast-body { padding: 12px 16px 16px; display: flex; align-items: center; font-size: 0.95rem; color: #333; } .custom-toast .icon-box { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .toast-success .icon-box { background: rgba(25, 135, 84, 0.1); color: #198754; } .toast-error .icon-box { background: rgba(220, 53, 69, 0.1); color: #dc3545; } .custom-toast .btn-close { font-size: 0.75rem; padding: 10px; }