/* Custom styles for toolbar */ .multi-select-toolbar { position: fixed; top: 0; /* Position at the top */ left: 0; width: 100%; background-color: #ff9f43; /* Brand color */ color: #ffffff; /* White text */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 15px; display: none; z-index: 9999; /* Highest z-index to ensure it's above everything else */ justify-content: space-between; align-items: center; } .multi-select-toolbar.active { display: flex; } /* Adjust all other page content when toolbar is active */ body.toolbar-active .header { margin-top: 60px; /* Height of toolbar + padding */ } body.toolbar-active .sidebar { padding-top: 60px; /* Push sidebar content down */ } body.toolbar-active .page-wrapper { padding-top: 60px; /* Push main content down when toolbar is visible */ } /* Make sure text is fully visible in toolbar */ .multi-select-toolbar .selected-count { font-weight: bold; padding: 5px; margin: 0; } .multi-select-toolbar .toolbar-actions { display: flex; gap: 10px; } .multi-select-toolbar .toolbar-actions button { white-space: nowrap; padding: 8px 15px; font-size: 14px; } /* Ensure the date picker stays on top */ .datetimepicker { z-index: 999999 !important; /* Ensure it's on top of other elements */ } /* Custom styles for dashboard stats */ .dash-widget-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 24px; background-color: rgba(255, 159, 67, 0.2); color: #ff9f43; } .dash-count { font-size: 20px; font-weight: 700; margin-bottom: 10px; } .dash-widget { transition: all 0.3s ease; } .dash-widget:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } /* Report specific styles */ .report-card { border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .report-card .card-header { background-color: #f9f9f9; border-bottom: 1px solid #eee; } .report-summary { background-color: #f8fbff; padding: 15px; border-radius: 8px; margin-bottom: 20px; } .report-summary-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dotted #ddd; } .report-summary-item:last-child { border-bottom: none; } /* Role-based styling */ .admin-only { display: none; } .admin .admin-only { display: block; } .employee .sensitive-financial { filter: blur(4px); position: relative; } .employee .sensitive-financial:hover::after { content: "Restricted data"; position: absolute; left: 0; top: 0; background: rgba(255,0,0,0.2); padding: 2px 5px; border-radius: 3px; font-size: 10px; white-space: nowrap; } /* Employee specific warning */ .employee-warning { display: none; } .employee .employee-warning { display: block; padding: 5px 10px; border-radius: 4px; background-color: #fff8e1; border-left: 4px solid #ffc107; margin-bottom: 15px; } /* Disabled buttons for employees */ .employee .disabled-for-employee { opacity: 0.6; pointer-events: none; } .employee .request-only { display: inline-block; } .admin .request-only { display: none; } /* Modal styling for employee permissions */ #permissionModal .modal-header { border-bottom: 3px solid #dc3545; background-color: #fff8f8; color: #dc3545; } #permissionModal .modal-body { padding: 25px; } #permissionModal .modal-footer { border-top: 1px solid #eee; background-color: #f9f9f9; } #permissionModal .fas.fa-lock { color: #dc3545; animation: pulse 1.5s ease-in-out infinite; } #permissionModal .btn-secondary { background-color: #6c757d; border-color: #6c757d; } #permissionModal .btn-secondary:hover { background-color: #5a6268; border-color: #545b62; } #permissionModal #actionDetails { background-color: #f8f9fa; border-left: 4px solid #dc3545; padding: 10px 15px; font-size: 0.9rem; } /* Animations */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } @keyframes fadeInScale { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Print specific styles */ @media print { .sidebar, .header, .no-print, #filter_inputs, .wordset, .search-set { display: none !important; } .page-wrapper { margin-left: 0 !important; padding: 0 !important; } .card { box-shadow: none !important; margin-bottom: 1rem !important; } .content { padding: 0 !important; } .table { width: 100% !important; } .table th, .table td { padding: 0.25rem !important; } .report-header { display: block !important; text-align: center; margin-bottom: 20px; } .report-header h2 { margin-bottom: 5px; } }